@charset "utf-8";

html,body { width:100%; margin:0 auto; font-family:"Pretendard",sans-serif; background-color:#00102A; }
html,body{width:100%;height:100%;letter-spacing: 0;}

button { display:inline-block;margin:0;padding:0;outline:0; border:0;}

#gnb { z-index:100; position:absolute; left:0; top:0; width:100%; height:60px; font-family:"Noto Sans KR",sans-serif;box-sizing: border-box;padding:12px 9px;}
#gnb .logo{padding:0 10px;width: 28px;text-align: center;position: relative;display:inline-block}
#gnb .logo:after{
position: absolute;
width: 1px;
height: 36px;
left: 57px;
top: 0;
background: #FFFFFF;
opacity: 0.4;
content: "";
}
#gnb .logo img{}
#gnb .tit{
    vertical-align: top;
    margin-left: 25px;
    display:inline-block;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 38px;
    letter-spacing: -0.5px;
    color: #FFFFFF;
    
}
#gnb .btn_pc{/* bt_PC버전보기 */
    position: absolute;
    width: 105px;
    height: 31px;
    right: 12px;
    top: 18px;
    background: #FF1D62;
    border-radius: 3px;
    font-style: normal;
    font-weight: 700;
    font-size: 13px;
    line-height: 31px;
    text-align: center;
    letter-spacing: -0.5px;
    color: #FFFFFF;
}

img { image-rendering:-webkit-optimize-contrast; }

#middle{padding:0 12px;padding-top: 60px;background: linear-gradient(180deg, #00102A calc(53vw + 160px), #E4EEFF calc(53vw + 400px));}
#middle .main_banner{position: relative;}
#middle .main_banner .swiper-slide{height: calc(53vw + 140px);}
#middle .main_banner .swiper-slide a{display: block;width: 100%;;}
#middle .main_banner .swiper-slide .thumb{width:100%;height: 53vw;background-color: #eee;overflow: hidden;border-radius: 5px;}
#middle .main_banner .swiper-slide .thumb img{width: 100%;}
#middle .main_banner .swiper-slide .name{width:100%;font-style: normal;font-weight: 700;font-size: 20px;line-height: 24px;letter-spacing: -0.5px;text-transform: uppercase;color: #FFFFFF;margin-top: 15px;;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
#middle .main_banner .swiper-slide .desc{width:100%;font-weight: 400;font-size: 13px;line-height: 18px;letter-spacing: -0.5px;color: #CCCCCC;margin-top: 20px;;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
#middle .main_banner .swiper-pagination {position: absolute;bottom:10px;transform: translateX(-50%);left:50%;}
#middle .main_banner .swiper-pagination-bullet {width: 8px;height: 8px;display: inline-block;border-radius: 100%;background: #D9D9D9;opacity: 1;margin:0 5px;}
#middle .main_banner .swiper-pagination-bullet-active {opacity: 1;background: #FF1D62;}


#middle .main_banner .live_container{height: calc(53vw + 140px);position: relative;padding-top: 50px;padding-bottom: 50px; max-height: 630px;}
#middle .main_banner .live_container a{display: block;width: 100%;;}
#middle .main_banner .live_container .thumb{width:100%;height: 53vw;background-color: #eee;overflow: hidden; max-height: 435px; position: relative;}
#middle .main_banner .live_container .thumb iframe{width: 100%; position: absolute;width: 100%;top: 0;height: 100%; }
#middle .main_banner .live_container .desc{width:100%;font-weight: 400;font-size: 13px;line-height: 18px;letter-spacing: -0.5px;color: #CCCCCC;margin-top: 20px;}
#middle .main_banner .live_container .desc .sort{font-size: 15px;color: #fff;line-height: 3;position: relative;padding-left: 20px;}
#middle .main_banner .live_container .desc .sort:before{content: "";position: absolute;top: 15px;left: 0;width: 15px;height: 15px;background-color: #ff003c;border-radius: 15px;}
#middle .main_banner .live_container .desc .tit{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
#middle .main_banner .live_container .desc .desc_txt{font-size: 15px;color: #fff;}
#middle .main_banner .live_container .desc .desc_txt span{font-weight: 400;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: -0.5px;
    color: #CCCCCC;}
#middle .main_banner .live_container .desc .btn_coupon{margin-top:20px;
    width: 100%;height: 40px;line-height: 40px;text-align: center;color: #fefaef;background: linear-gradient(180deg, rgba(185,196,204,1) 0%, #ff2e9b 0%, #ff1a58 100%);font-weight: 500;border-radius: 8px;font-size: 13px;}


.schedule_banner{position: relative;overflow: hidden;}
.schedule_banner .state_item{margin-top: 10px;position: relative;margin-bottom: 30px;overflow: hidden;}
.schedule_banner .state_item .item{width: 100%;height: 84px;background-color: #fff;margin-bottom: 5px;box-shadow: 0 0 20px rgba(0,0,0,0.2);border-radius: 3px;;overflow: hidden;position: relative;}
.schedule_banner .state_item .state{float: left;width: 42px;background-color: #ff1d62;;height: 100%;color: #fff;font-size: 13px;line-height: 1;position: relative;}
.schedule_banner .state_item .state.case1{background-color: #ff1d62;}
.schedule_banner .state_item .state.case2{background-color: #5395ff;}
.schedule_banner .state_item .state.case3{background-color: #adb5c2;}
.schedule_banner .state_item .state span{line-height: 1;color: #fff;position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);width: 14px;;}

.schedule_banner .state_item .match{width: 350px;float: left;padding-left: 10px;position: absolute;left: 42px;top: 50%;transform: translateY(-50%);}
.schedule_banner .state_item .match:only-child{border: none;}
.schedule_banner .state_item .match:last-child{border: none;}
.schedule_banner .state_item .match .thumb{vertical-align: top;;margin-top: 0;display: inline-block;position: absolute;top:7px;left:10px;;}
.schedule_banner .state_item .match .thumb img{height: 55px;vertical-align: top;;}
.schedule_banner .state_item .match .name{height: 70px;position: relative;    margin-top: 0;;width: 100%;;}
.schedule_banner .state_item .match .name span:nth-child(1) {display:block; padding:20px 0 4px 0; font-weight:bold; color: #333333;font-size: 14px;padding-left: 55px;line-height:1;letter-spacing:0;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.schedule_banner .state_item .match .name span:nth-child(2) {display:block; padding:0 0 20px 0; color: #666666;font-size: 12px;padding-left: 55px;line-height:1;letter-spacing:0;}
.schedule_banner .state_item .match .name.empty{text-align: center;width: 100%;;}
.schedule_banner .state_item .item .btn_link {position: absolute;top:0;left:0;width: 100%;height: 100%;z-index: 1;background-color: transparent;}


.event_banner{width: 100%;overflow: hidden;position: relative;}
.event_banner .list_item{display: flex;width: 100%;overflow: hidden;flex-wrap: wrap;}
.event_banner .list_item .item{flex:0 0 calc(50% - 6px);position: relative;margin-bottom: 12px;;}
.event_banner .list_item .item:nth-child(n){margin-right: 6px;;}
.event_banner .list_item .item:nth-child(2n){margin-left: 6px;margin-right: 0;}
.event_banner .list_item .item .btn_link{position: absolute;top:0;left:0;width: 100%;height: 100%;z-index: 1;background-color: transparent;}
.event_banner .list_item .item .btn_movie{position: absolute;top:0;left:0;width: 100%;height: 100%;z-index: 1;;background-color: transparent;}
.event_banner .list_item .item .btn_img{position: absolute;top:0;left:0;width: 100%;height: 100%;z-index: 1;;background-color: transparent;}
.event_banner .list_item .item .thumb{width: 100%;overflow: hidden;border-radius: 5px;;}
.event_banner .list_item .item .thumb img{width: 100%;;}

.event_banner .btn_next{border:1px solid #333;font-size:13px;color:#333;width:100%;box-sizing: border-box;line-height: 43px;border-radius: 3px;background-color: #fff;margin-bottom:10px;box-shadow: 0 0 10px rgba(0,0,0,0.2);}
.event_banner .btn_next span{margin-right: 5px;;width: 0;height: 0;border-style: solid;border-width: 7px 5px 0 5px;border-color: #333333 transparent transparent transparent;}



.layer_popup{display: none;position: fixed;top:60px;left:0;width: 100vw;height: calc(100vh - 60px);z-index: 1000;overflow-y: auto;background: #00102A;}
.layer_popup .layer_content{width: 100%;padding-bottom: 100px;;padding:0 12px;box-sizing: border-box;}
.layer_popup .layer_content .title{background-color: #00102A;height: 60px;overflow: hidden;position: relative;}
.layer_popup .layer_content .title p{font-size: 15px;padding:0 20px;line-height: 50px;color: #fff;;}
.layer_popup .layer_content .title .btn_close{position: absolute;top:0;right:0;width: 60px;height: 60px;;}
.layer_popup .layer_content .title .btn_close:before{position: absolute;top:10px;left:28px;width: 2px;height: 40px;transform: rotate(45deg);background-color: #fff;content: "";}
.layer_popup .layer_content .title .btn_close:after{position: absolute;top:10px;left:28px;width: 2px;height: 40px;transform: rotate(-45deg);background-color: #fff;content: "";}
.layer_popup .layer_content .content{}

.videoframe.layer_popup{background: #00102A;}
.videoframe.layer_popup .layer_content { width:100%; padding:12px;box-sizing: border-box;}
.videoframe.layer_popup .layer_content .video{width: 100%;height: 53vw;overflow: hidden;}
.videoframe.layer_popup .layer_content .video iframe{width: 100%;;height: 100%;}
.videoframe.layer_popup .layer_content .name{width:100%;font-style: normal;font-weight: 700;font-size: 20px;line-height: 24px;letter-spacing: -0.5px;text-transform: uppercase;color: #FFFFFF;margin-top: 15px;;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
.videoframe.layer_popup .layer_content .desc{width:100%;font-weight: 400;font-size: 13px;line-height: 18px;letter-spacing: -0.5px;color: #CCCCCC;margin-top: 20px;;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}

.imgframe.layer_popup{background: #00102A;}
.imgframe.layer_popup .layer_content { width:100%; padding:12px;box-sizing: border-box;}
.imgframe.layer_popup .layer_content .img{width: 100%;height: 53vw;overflow: hidden;}
.imgframe.layer_popup .layer_content .img img{width: 100%;;height: 100%;}
.imgframe.layer_popup .layer_content .name{width:100%;font-style: normal;font-weight: 700;font-size: 20px;line-height: 24px;letter-spacing: -0.5px;text-transform: uppercase;color: #FFFFFF;margin-top: 15px;;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
.imgframe.layer_popup .layer_content .desc{width:100%;font-weight: 400;font-size: 13px;line-height: 18px;letter-spacing: -0.5px;color: #CCCCCC;margin-top: 20px;;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}


.infoPanel.layer_popup{background: #fff;}
.infoPanel.layer_popup .layer_content { width:100%; padding:12px;box-sizing: border-box;padding-bottom: 0;}
.infoPanel.layer_popup .layer_content .title{background-color: #fff;height: 60px;overflow: hidden;position: relative;}
.infoPanel.layer_popup .layer_content .title .btn_close{position: absolute;top:0;right:0;width: 60px;height: 60px;;}
.infoPanel.layer_popup .layer_content .title .btn_close:before{position: absolute;top:10px;left:28px;width: 2px;height: 40px;transform: rotate(45deg);background-color: #00102A;content: "";}
.infoPanel.layer_popup .layer_content .title .btn_close:after{position: absolute;top:10px;left:28px;width: 2px;height: 40px;transform: rotate(-45deg);background-color: #00102A;content: "";}
.infoPanel.layer_popup .layer_content .video{width: 100%;height: 53vw;overflow: hidden;}
.infoPanel.layer_popup .layer_content .video iframe{width: 100%;;height: 100%;}
.infoPanel.layer_popup .layer_content .name{width:100%;font-style: normal;font-weight: 700;font-size: 20px;line-height: 24px;letter-spacing: -0.5px;text-transform: uppercase;color: #FFFFFF;margin-top: 15px;;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
.infoPanel.layer_popup .layer_content .desc{width:100%;font-weight: 400;font-size: 13px;line-height: 18px;letter-spacing: -0.5px;color: #CCCCCC;margin-top: 20px;;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}

.infoPanel.layer_popup .layer_content .content .wrap .tit_wrap{position: relative;min-height: 245px;box-sizing: border-box;font-size:0; line-height:0;}

.infoPanel.layer_popup .layer_content .content .wrap .tit_wrap .thumb{width: 184px;height: 184px;}
.infoPanel.layer_popup .layer_content .content .wrap .tit_wrap .thumb img{width: 184px;;}
.infoPanel.layer_popup .layer_content .content .wrap .tit_wrap .thumb .tag{position: absolute;top:0;left:0;padding:0 15px;line-height: 23px;color: #fff;font-size: 13px;text-align: center;border-radius: 23px;overflow: hidden;}
.infoPanel.layer_popup .layer_content .content .wrap .tit_wrap .thumb .tag.active{background-color: #5395ff;}
.infoPanel.layer_popup .layer_content .content .wrap .tit_wrap .thumb .tag.disable{background-color: #adb5c2;}

/* 2022년 여름의 주인은 누가 될 것인가! */
.infoPanel.layer_popup .layer_content .content .wrap .tit_wrap .txt{font-size: 30px;color: #000000;font-weight: 900;margin-top: 10px;;line-height:1;}
.infoPanel.layer_popup .layer_content .content .wrap .tit_wrap .desc{font-size: 15px;color: #000000;margin-top: 10px;margin-bottom: 20px;;line-height:1;}
.infoPanel.layer_popup .layer_content .content .wrap .tit_wrap .desc_list{padding-bottom: 30px;;}
.infoPanel.layer_popup .layer_content .content .wrap .tit_wrap dl{overflow: hidden;position: relative; box-sizing: border-box; width:100%;margin-bottom: 8px;font-size:0; line-height: 0;}
.infoPanel.layer_popup .layer_content .content .wrap .tit_wrap dl:last-child { margin-bottom:0; }
.infoPanel.layer_popup .layer_content .content .wrap .tit_wrap dd:after{position: absolute;top:7px;left:4px;width: 3px;height: 3px;border-radius: 3px;background-color: #484848;content: "";}
.infoPanel.layer_popup .layer_content .content .wrap .tit_wrap dl dt{display:block;padding-bottom:4px; font-size: 15px;;color: #484848;line-height:18px; }
.infoPanel.layer_popup .layer_content .content .wrap .tit_wrap dl dd{display:inline-block;font-size: 14px;;color: #999;line-height:18px;position: relative;padding-left: 14px;;}

.infoPanel.layer_popup .layer_content .content .wrap .each_game_content_wrap{ position:relative; background-color: #ECECEC;padding:12px;padding-top: 0;padding-bottom: 10px;margin-left:-12px;width: calc(100% + 24px);box-sizing: border-box;}
.infoPanel.layer_popup .layer_content .content .wrap .each_game_content_wrap:last-child{padding-bottom: 100px;}
.infoPanel.layer_popup .layer_content .content .wrap .each_game_content_wrap + .each_game_content_wrap{border-top:none}
.infoPanel.layer_popup .layer_content .content .wrap .each_game_content_wrap + .each_game_content_wrap .tit{margin-top: 0;}
.infoPanel.layer_popup .layer_content .content .wrap .each_game_content_wrap .btn_rule { z-index:4; position:absolute; right:30px; top:26px; width:93px;height:26px;background: url(https://ssl.nexon.com/s2/game/fo4/event/2022/220401_esport_76fdh411v/btn_rule.png) 0 0 no-repeat; }
.infoPanel.layer_popup .layer_content .content .wrap .each_game_content_wrap .tit{margin-top: 15px;line-height: 80px;text-align: center;font-size: 15px;color: #000000;font-weight: 600;;}
.infoPanel.layer_popup .layer_content .content .wrap .each_game_content_wrap .inner_s{background-color: #fff;overflow-y: auto;height: 160px;;}
.infoPanel.layer_popup .layer_content .content .wrap .each_game_content_wrap .inner_s .wrap{width: 100%;;box-sizing: border-box;padding: 20px;font-size:14px;line-height:22px;}
.infoPanel.layer_popup .layer_content .content .wrap .each_game_content_wrap .inner_team .wrap{width: 100%;;box-sizing: border-box;padding: 20px ;text-align: center;}
.infoPanel.layer_popup .layer_content .content .wrap .each_game_content_wrap .inner_team .each_team{display: inline-block;position: relative;margin-right: 20px;margin-bottom: 20px;}
.infoPanel.layer_popup .layer_content .content .wrap .each_game_content_wrap .inner_team .each_team .thumb{background-color: #fff;}
.infoPanel.layer_popup .layer_content .content .wrap .each_game_content_wrap .inner_team .each_team .thumb img{width: 55px;;}
.infoPanel.layer_popup .layer_content .content .wrap .each_game_content_wrap .inner_team .each_team .desc{display: none;position: absolute;top:-66px;left:50%;transform: translateX(-50%);background-color: #fff;border-radius: 3px;font-size: 13px;color: #333333;text-align: center;width: 150px;height: 50px;line-height: 50px;;box-shadow: 0 0 20px rgba(0,0,0,0.2);}
.infoPanel.layer_popup .layer_content .content .wrap .each_game_content_wrap .inner_team .each_team .desc strong{color: #ff1d62}
.infoPanel.layer_popup .layer_content .content .wrap .each_game_content_wrap .inner_team .each_team .desc:after{content: "";position: absolute;bottom:-7px;left:50%;margin-left:-4px;width: 0;height: 0;border-style: solid;border-width: 7px 4.5px 0 4.5px;border-color: #ffffff transparent transparent transparent;;}
.infoPanel.layer_popup .layer_content .content .wrap .each_game_content_wrap .inner_team .each_team:hover .desc{display: block;;}