@charset "euc-kr";

/* bg url: https://img.megagong.net/m/2022/ */
/* common */
.evSection .con_tit{margin-bottom: 40px;}
.evSection .con_stit{margin-bottom: 80px;font-size: 26px;color: #333;}
.evSection .color_mint{color: #3cd4d2;}
.evSection .color_pink{color: #c03b8e;}
.evSection .color_yellow{color: #f9aa3a;}
.evSection .color_red{color: #ff0000;}

.evCon1{padding-top: 75px; background:#201248 url(https://img.megagong.net/m/2022/0926_game/evcon1_bg.jpg) no-repeat center bottom;background-size: auto 100%}
.evCon1 h3{margin: 0 -42px 75px;overflow: hidden;}

.evCon2{background-color: #a5f6f4; padding: 105px 0 170px;}
.evCon2 ul li{float: left;width: 330px;margin-right: 45px;}

.evCon2 ul li .que{position: relative; font-size: 20px;font-style: normal;background: #fff;border-radius: 60px;display: block;margin: 0 25px;font-weight: 700;color: #000;padding: 15px 0;}
.evCon2 ul li .que::before{content: '';display: block;position: absolute;bottom: -8px;right: 0;background: url(https://img.megagong.net/m/2022/0926_game/evcon2_arr3.jpg) no-repeat center;width: 51px;height: 8px;}
.evCon2 ul li .wt{margin: 30px 0;background: #fff;border: 2px solid #000;border-radius: 15px;overflow: hidden;}
.evCon2 ul li .wt p{background: #1ac7d3;color: #fff;font-size: 24px;padding: 10px 0;}
.evCon2 ul li .wt .con{padding: 25px 20px 30px 50px;}
.evCon2 ul li .wt .left{float: left;padding-top: 40px;position: relative;}
.evCon2 ul li .wt .left::before{content: '';display: block;position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 28px;height: 28px;background: url(https://img.megagong.net/m/2022/0926_game/evcon2_heart.png) no-repeat center;background-size: contain;}

.evCon2 ul li .wt .right{float: left;font-size: 18px;margin: 30px 0 0 20px;}
.evCon2 ul li .wt .right strong{display: block;font-size: 48px;font-weight: 900;}
.evCon2 ul li .wt .right strong span{font-size: 32px;}
.evCon2 ul li .btxt{display: block;padding-top: 60px;position: relative;font-size: 22px;}
.evCon2 ul li .btxt::before{content: '';display: block;position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 44px;height: 22px;background: url(https://img.megagong.net/m/2022/0926_game/evcon2_arr2.png) no-repeat center;background-size: contain;}
.evCon2 .btns{margin: 100px auto 0;}
.evCon2 .btns a{display: inline-block;background: #000;border-radius: 10px;color: #fff;height: 90px;line-height: 90px;font-size: 24px;width: 440px;}
.evCon2 .btns a + a{margin-left: 45px;}
.evCon2 .btns a span{position: relative;background: url(https://img.megagong.net/m/2022/0926_game/evcon2_arr.png) no-repeat 100% center;;;;;;;;;;;;;;;;;;;;;;padding-right: 35px;;;;;;;}

.evCon2 ul li:nth-child(2) .wt p{background: #c03b8e}
.evCon2 ul li:nth-child(3){margin-right:0}
.evCon2 ul li:nth-child(3) .wt p{background: #f9aa3a}

.gauge{position: relative;padding: 10px 10px 15px;border: 5px solid #000;box-sizing: border-box;border-width: 0 5px;}
.gauge::before{content: '';display: block;position: absolute;top: -6px;left: -6px;width: 79px;height: 6px;background: url(https://img.megagong.net/m/2022/0926_game/evcon2_line1.jpg) no-repeat center;}
.gauge::after{content: '';display: block;position: absolute;bottom: 0;left: -6px;width: 79px;height: 6px;background: url(https://img.megagong.net/m/2022/0926_game/evcon2_line1.jpg) no-repeat center;}
.gauge span:last-of-type{margin-bottom: 0;}
.gauge span{display: block;width: 47px;border-radius: 3px;height: 8px;background: #d9d9d9;margin-bottom: 5px;}

.gauge_1 span.on{background: rgb(26, 199, 211);}
.gauge_1 span:first-of-type.on{position: relative;}
.gauge_1 span:first-of-type.on::before{content: '';display: block;position: absolute;top: 0;left: 0;width: 100%;height: 50%;background: #d9d9d9;border-top-left-radius: 2px;border-top-right-radius: 2px;}

.gauge_2 span.on{background: #c03b8e;}
.gauge_2 span.on:nth-of-type(1),.gauge_2 span.on:nth-of-type(2),.gauge_2 span.on:nth-of-type(3),.gauge_2 span.on:nth-of-type(4){background: #d9d9d9;}

.gauge_3 span.on{background: #f9aa3a;}
.gauge_3 span.on:nth-of-type(1),.gauge_3 span.on:nth-of-type(2),.gauge_3 span.on:nth-of-type(3),.gauge_3 span.on:nth-of-type(4),
.gauge_3 span.on:nth-of-type(5),.gauge_3 span.on:nth-of-type(6),.gauge_3 span.on:nth-of-type(7){background: #d9d9d9;}

.evCon3{padding: 105px 0 155px;background-color: #ff90c4;}
.evCon3 .moRoll{display: none;}
.evCon3 .vdbtns{}
.evCon3 .vdbtns a{font-size: 0;position: absolute;width: 16%;height: 5%;right: 6.5%;/* background: rgba(255, 0, 0, 0.26); */}
.evCon3 .vdbtns a:nth-of-type(1){top: 21%;}
.evCon3 .vdbtns a:nth-of-type(2){top: 57%;}
.evCon3 .vdbtns a:nth-of-type(3){bottom: 2%;}

.evCon4{padding: 105px 0 155px;background-color: #ffe4a2;}

.evCon5{padding: 105px 0 155px;background-color: #fff;}
.evCon5 .con_tit{margin-bottom: 80px;}

.eventWrap .sampleArea{padding:0;background-color:transparent;margin-top:0;border:0;}
.eventWrap .sampleArea .tab_base{width:100%;}
.eventWrap .sampleArea .tab_base:after{content:'';display:block;clear:both;}
.eventWrap .sampleArea .tab_base > li{float:left;width:11.57%;margin-right: 3%;}
.eventWrap .sampleArea .tab_base > li:last-child{margin-right: 0;}
.eventWrap .sampleArea .tab_base.army{margin: 0 10%;}
.eventWrap .sampleArea .tab_base > li a{display:block;padding:0}
.eventWrap .sampleArea .tab_base > li a img{display: none;}
.eventWrap .sampleArea .tab_base > li a img.off{display: block;}
.eventWrap .sampleArea .tab_base > li.on a{background-color:transparent;}
.eventWrap .sampleArea .tab_base > li.on a img.off{display: none;}
.eventWrap .sampleArea .tab_base > li.on a img.on{display: block;}

.eventWrap .sampleArea .tab_base > li a:hover img.off{display: none;}
.eventWrap .sampleArea .tab_base > li a:hover img.off + img.on{display: block;}


.evCon4 .panel_base{margin-top: 50px;}
.evCon4 .sampleList{border: 2px solid #887a56;border-radius: 15px;}
.evCon4 .sampleList .tab_tit{text-align: center;margin: -25px 0 0;}
.evCon4 .sampleList .tab_tit b{background: #ffe4a2;padding: 0 75px;position: relative;font-size: 36px;}
.evCon4 .sampleList .tab_tit b::before{content: '\00B7';display: block;position: absolute;left: -8px;top: 0;}
.evCon4 .sampleList .tab_tit b::after{content: '\00B7';display: block;position: absolute;right:-8px;top: 0;}
.evCon4 .sampleList .conwrap{margin: 45px 0;position: relative;}
.evCon4 .sampleList .conL{position: relative;float: left;}
.evCon4 .sampleList .conL a{position: absolute;bottom: 6%;left: 38%;height: 5%;width: 28%;font-size: 0;/*background: #ff000057;*/}
.evCon4 .sampleList .conR{position: absolute;right: 30px;top: 50px;}
.evCon4 .sampleList .conR .video_box{width: 585px;height: 325px;}
.evCon4 .sampleList .conR .video_box .play_area{width: 100% !important;height: 100% !important;}
.evCon4 .sampleList .conR .video_box img{width:100%}
.evCon4 .sampleList .conR .tab_info{margin-top: 35px;}
.evCon4 .sampleList .conR .tab_info .mo{display: none;}
.evCon4 .sampleList .conLast{text-align: center;}

.eventWrap .video_box.alert{}
.eventWrap .video_box.alert a{display: block;}

.evCon6{padding: 105px 0 155px;background-color: #f1f2f2;}
.evCon6 {position:relative;}
.evCon6 .slick-arrow {position:absolute;top:40%;width:30px;height:57px;transform: translateY(-50%);z-index:2;font-size:0;}
.evCon6 .slick-prev {left:-50px;background:url(https://img.megagong.net/m/2022/0926_game/evcon6_arr1.png) no-repeat center;}
.evCon6 .slick-next {right:-50px;background:url(https://img.megagong.net/m/2022/0926_game/evcon6_arr2.png) no-repeat center;}
.evCon6 .item{position: relative;}
.evCon6 .item a{position: absolute;bottom: 0;left: 46%;transform: translateX(-50%);width: 74%;height: 10%;font-size: 0;}

.evCon7{padding: 105px 0 155px;background:#271361 url(https://img.megagong.net/m/2022/0926_game/evcon7_bg.jpg) no-repeat center bottom;background-size: auto 100%}
.evCon7 h4 i{position: absolute;bottom: -121px;right: -181px;}
.evCon7 .square{width: 28px;height: 28px;display: inline-block;border: 2px solid #fff;box-sizing: border-box;margin: 0 2px -4px 2px;}
.evCon7 .con_stit{color: #fff;}
.evCon7 .quebox{position: relative;background:url(https://img.megagong.net/m/2022/0926_game/evcon7_bg2.jpg) no-repeat center;display: block;;height: 200px;margin: 200px 0 90px;;padding: 60px 0 0}
.evCon7 .quebox b{position: relative;font-size: 40px;color: #fff;display: block;}
.evCon7 .quebox b::before{content: '';display: block;position: absolute;left: -70px;top: -249px;background:url(https://img.megagong.net/m/2022/0926_game/evcon7_img4.png) no-repeat center;;width: 164px;height: 192px;}
.evCon7 .quebox b::after{content: '';display: block;position: absolute;right: -75px;top: -184px;background:url(https://img.megagong.net/m/2022/0926_game/evcon7_img5.png) no-repeat center;;width: 322px;height: 124px;}
.evCon7 .quebox b .square{width: 30px;margin: 0 5px 0 2px;height: 30px;}
.evCon7 .ansbox .quse{display: inline-block;}
.evCon7 .ansbox .init{display: none;}
.evCon7 .ansbox.on .quse{display: none;}
.evCon7 .ansbox.on .init{display: inline-block;}
.evCon7 .ansbox a{display: inline-block;background: #000;border-radius: 450px;color: #fff;height: 60px;line-height: 60px;font-size: 24px;width: 280px;margin: 40px auto 0;}
.evCon7 .ansbox a span{position: relative;background: url(https://img.megagong.net/m/2022/0926_game/evcon2_arr.png) no-repeat 100% center;;;;;;;;;;;;;;;;;;;;;;padding-right: 35px;;;;;;;}

.evCon7 .infobox{margin: 115px auto 55px;position: relative;}
.evCon7 .infobox p{float: right;}
.evCon7 .infobox .info{text-align: left;color: #fff;position: absolute;top: 75px;}
.evCon7 .infobox .info li{margin-bottom: 40px;}
.evCon7 .infobox .info b{position: relative;padding:0 12px 0 15px;margin-right: 12px;} 
.evCon7 .infobox .info b::before{content: '';display: block;position: absolute;left: 0;top: 50%;transform: translateY(-50%);background: #fff;width: 5px;height: 5px;border-radius: 100%;} 
.evCon7 .infobox .info b::after{content: '';display: block;position: absolute;right:0;top: 50%;transform: translateY(-50%);background: #fff;width: 1px;height: 55%;}
.evCon7 .evtBoard_common .board_notice li{opacity: 1;}


.evCon8{background-color: #f1f2f2;}
.evCon8 .warningList > li.w_tit{font-weight: 700;font-size: 16px;margin: 0;}
.evCon8 .warningList > li{margin-top: 20px;}
.evCon8 .warningList li ul li a{border: 1px solid #000;border-radius: 5px;}
@media screen and (max-width: 1200px){
    .evSection .con_tit{margin-bottom: 4%;}
    .evSection .con_stit{margin-bottom: 8%;}

    .evCon1{padding-top: 8%;}
    .evCon1 h3{margin: 0 0 8%}
    .evCon1 p{margin: 0 25%;}

    .evCon2{padding: 15% 0 15%;}
    .evCon2 ul li{width: 30.55%;margin-right: 4%;}
    .evCon2 ul li .wt p{font-size: 20px;}
    .evCon2 ul li .que{border-radius: 30px;font-size: 15px;}
    .evCon2 ul li .wt .con{padding: 3% 5% 5%;}
    .evCon2 ul li .wt .left{width: 42%;}
    .evCon2 ul li .wt .right{width: 55%;margin-left: 3%;font-size: 16px;}
    .evCon2 ul li .wt .right strong{font-size: 44px;}
    .evCon2 ul li .wt .right strong span{font-size: 24px;}
    .evCon2 .btns a{width: 335px;line-height: normal;height: auto;padding: 2% 0;}
    .evCon2 .btns a + a{margin-left: 20px;}
    .gauge::before,.gauge::after{background-size: cover;width: 115%;}
    .gauge span{width: 100%;}

    .evCon3{padding: 15% 0 15%;}
    .evCon3 img.pc{display: none;}
    .evCon3 .moRoll{display: block;position: relative;}
    .evCon3 .moRoll .slick-dots{margin-top: 20px;} 
    .evCon3 .moRoll .slick-dots li{display: inline-block;; width: 12px;height: 12px;border-radius: 100%;background: #df77a8; margin-right: 2%;} 
    .evCon3 .moRoll .slick-dots li.slick-active{background: #fff; }
    .evCon3 .moRoll .slick-dots li button{font-size:0;}
    .evCon3 .moRoll img{display: inline-block;}
    .evCon3 .moRoll .item{position: relative;}
    .evCon3 .moRoll .item a{font-size: 0;position: absolute;width: 26%;height: 7%;left: 50%;transform: translateX(-50%);bottom: 6%;/* background: rgba(255, 0, 0, 0.26); */}
    .evCon3 .vdbtns a{display: none;}
    

    .evCon4{padding: 15% 0;}
    .evCon4 .panel_base{margin-top:10%;}
    .evCon4 .sampleList .tab_tit b{font-size: 32px;padding: 0 60px;}
    .evCon4 .sampleList .conwrap{margin: 5% 0 3%;overflow: hidden;}
    .evCon4 .sampleList .conL{width: 46%;margin-left: -3%;}
    .evCon4 .sampleList .conR{right: 3%;top: 0;width: 57%;}
    .evCon4 .sampleList .conR .video_box{width: 100%;height: 100%;}
    .evCon4 .sampleList .conR .video_box .play_area{width: 100% !important;height: 100% !important;}
    .evCon4 .sampleList .conR .video_box img{width:100%}
    .evCon4 .sampleList .conR .tab_info{margin-top: 5%;}
    .evCon4 .sampleList .conR .tab_info .pc{display: none;}
    .evCon4 .sampleList .conR .tab_info .mo{display: block;}
    .evCon4 .sampleList .conLast{text-align: center;}

    .evCon5{padding: 15% 0;overflow: inherit !important;}

    .evCon6{padding: 15% 0;}

    .evCon7{padding: 15% 0;}
    .evCon7 .square{width: 25px;height: 25px;}
    .evCon7 h4 i{bottom: auto;right: -5%;width: 19%;z-index: 2;top: 30%;}
}

@media (max-width: 992px){
    .evSection .con_stit{font-size: 22px;}
    .evCon2 ul li .wt .right{font-size: 14px;}
    .evCon2 ul li .wt .right strong{font-size: 40px;}
    .evCon2 ul li .wt .right strong span{font-size: 20px;}
    .evCon2 ul li .btxt{font-size: 18px;}

    .eventWrap .video_box.alert a{display: inline-block;}

    .evCon4 .sampleList .tab_tit b{font-size: 28px;padding: 0 5%;}
    
    .evCon7 .quebox{height: auto;padding: 8% 0 5%;margin: 22% 0 10%;}
    .evCon7 .quebox b{font-size: 35px;}
    .evCon7 .quebox b .square{height: 25px;width: 25px;}
    .evCon7 .quebox b::before{background-size: contain;width: 32%;left: -9%;height: 160%;top: -214%;}
    .evCon7 .quebox b::after{background-size: contain;width: 45%;right: -8%;height: 100%;top: -155%;}

    .evCon7 .infobox p{width: 55%;}
    .evCon7 .infobox .info{top: 5%;}
}

@media (max-width: 768px){
    .evSection .con_stit{font-size: 18px;}

    .gauge::before,.gauge::after{content: none;}
    .gauge{border-width: 5px;}
    .evCon2 ul li{width: 100%;margin-right: 0;}
    .evCon2 ul li .wt{margin: 5% 0 3%;}
    .evCon2 ul li .wt .con{padding: 3% 5% 5% 15%;}
    .evCon2 ul li .wt .left{width: 20%;}
    .evCon2 ul li .wt .right{width: 75%;margin: 10% 0 0 3%;}
    .evCon2 ul li .wt .right br{display: none;}
    .evCon2 ul li .btxt{padding: 7% 0 20%;font-size: 14px;}
    .evCon2 ul li .btxt::before{background-size: contain;width: 5%;}    
    .evCon2 ul li:nth-child(3) .btxt{padding-bottom: 0;}
    .evCon2 .btns{margin: 10% auto 0;}
    .evCon2 .btns a{width: 46%;height: auto;line-height: normal;font-size: 20px;padding: 2% 1%;}
    .evCon2 .btns a span{background-size: 3%;padding-right: 7%;}
    .evCon2 .btns a + a{margin-left: 2%;}
    
    .evCon3 .moRoll .item a{width: 36%;}

    .evCon4 .sampleList .tab_tit{margin-top: -15px;}
    .evCon4 .sampleList .tab_tit b{font-size: 20px;}

    .evCon7 .square{width: 13px;height: 13px;border-width: 1px;margin: 0 2px -1px 1px;}
    .evCon7 .quebox b{font-size: 30px;}
    .evCon7 .quebox b .square{height: 20px;width: 20px;}

    .evCon7 .ansbox{margin: 0 5%;}
    .evCon7 .ansbox a{width: auto;padding: 3% 5%;line-height: normal;font-size: 20px;height: auto;}


    .evCon7 .infobox{margin: 15% auto;}
    .evCon7 .infobox p{width: 75%;float: none;margin: 0 auto 5%;}
    .evCon7 .infobox .info{top: auto;position: relative;}
    .evCon7 .infobox .info li{margin-bottom: 4%;}

    .eventBoard .evtBoard_common .board_notice li.chk_notice{position: relative;top: auto;right: auto;}
    .evCon8 .warningList > li.w_tit{font-size: 14px;}
}
@media (max-width: 576px){
    .evSection .con_tit{margin: 0 -2% 4%;overflow: hidden;}
    .evSection .con_stit{font-size: 14px;}
    .evCon2 ul li .wt .con{padding-left: 10%;}
    .evCon2 ul li .wt .left{width: 25%;}
    .evCon2 ul li .wt .right{width: 70%;}
    .evCon2 .btns a{font-size: 14px;}
    
    .evCon4 .sampleList .tab_tit{margin-top: -10px;}
    .evCon4 .sampleList .tab_tit b{font-size: 15px;padding:0 1.5%;}

    .evCon4 .sampleList .conL{width: 30%;margin: 0 0 -5% 66%;z-index: 2;}
    .evCon4 .sampleList .conR{position: relative;right: auto;top: auto;width: 90%;margin: 0 auto 5%;}
    .evCon4 .sampleList .conR .tab_info{position: absolute;top: 9%;overflow: hidden;margin: 0;width: 90%;}
    .evCon4 .sampleList .conR .video_box{z-index: 3;position: relative;}

    .evCon6 .slick-list{margin-left: 10%;}
    .evCon6 .slick-slide img{width: 80%;}

    .evCon7 .quebox b{font-size: 18px;}
    .evCon7 .quebox b .square{height: 15px;width: 15px;margin: 0 5px -2px 0px;}

    .evCon7 .ansbox a{padding: 2% 7%;font-size: 18px;margin-top: 8%;}

}