@charset "UTF-8";

/*#content{margin-top: 180px; height: calc(100vh - 240px);}*/
#content{height: calc(100vh - 240px);}
.mainCon{width: 1240px;}
.wFull .mainCon{width: 1535px;}
.modal .form *{width: 100%}

/*헤더*/
/*#header{position: fixed; top:0; width: 100%; z-index: 1000; background: #090909;}*/
#header{position: sticky; top:0; width: 100%; z-index: 1000; background: #090909; min-width: 1900px;}
.headerTop a,.nav a{color:#fff}
.logo{width: 150px;}
.utill .material-symbols-outlined{color: #fbb742; font-size: 20px;}
.utill li:last-child .material-symbols-outlined,.utill li:last-child a:hover{color: #fff;}
.nav>ul>li{width: 9.09%; position: relative;}
.nav>ul>li a{padding:15px 0; display: block;}
.nav>ul>li>a:hover{letter-spacing: 2px; font-weight: bold;}
.nav>ul>li>ul{position: absolute; left:0; width: 100%; background: #090909; font-size: 14px; top: 56px; max-height: 0; overflow: hidden;}

.nav li:hover ul{max-height: 500px; border-top: 2px solid #fbb742;}
.nav>ul>li li:hover a{background: #161616;}

/*회원가입폼*/
#joinPop{width: 500px; border: 2px solid #fbb742;}
#joinPop::before{width: 100px; padding-bottom: 10%;}
#joinPop h4{border-top:1px solid #666; margin-top: 20px; padding-top: 10px;}
#joinPop .form .timer{width: 44%;}

/*chat*/
.conLeft{min-width: 270px; max-width: 270px;}
.chat{flex-direction: column; height: 100%; justify-content: space-between;}
.chat .pad20{height: 100%; display: flex; flex-direction: column; justify-content: end; padding-top: 0;}
#messages{height: calc(100vh - 375px); display: flex; flex-direction: column-reverse;}
#messages li{margin-top: 10px; display: flex; align-items: flex-start;}
#messages .name{background: #232323; padding: 5px 15px; border-radius: 20px; margin-right: 10px;}
.chatform #message{width: 70%;}

/*오른쪽로그인*/
.rightArea{width: 280px; max-width: 280px;}
.infoCard .boxTit{padding:6px 15px; padding-top: 12px;}
.infoCard .lvArea{width: 80px;}
.infoCard .lvArea img{width: 100%;}
.infoArea h5{font-size: 14px;}
.infoArea li{display: flex; justify-content: space-between; gap:20px; padding:2px 0;}
.infoCard .btnArea{gap: 5px;}
.infoCard .btnArea li{width: calc(33.33% - 4px); text-align: center; font-size: 14px; background: #232323; border-radius: 10px;}
.infoCard .btnArea li.pBg2{text-shadow: 0 0 10px rgba(0,0,0,0.5); background: #ff9c3f;}
.infoCard .btnArea li .material-symbols-outlined{font-size: 18px;} 
.infoCard .btnArea a{color: #fff; padding:10px 0; display: block;}
.infoCard .btnArea input{background: #ff9c3f; transition: 0.3s; text-shadow: 0 0 10px rgba(0,0,0,0.5);}
.infoCard .btnArea input:hover{background: #f2b140;}
.infoCard .limit li{padding: 2px 0;}
.infoArea .pConver a{width: 100%; text-align: center; padding: 5px 0; font-weight: bold;}

/*페이징*/
.paging li a{color: #666; padding: 5px; display: block; font-weight: 300; transition: 0.3s;}
.paging li:hover a{color: #fff;}
.paging li.active a{color:#ff9c3f; font-weight: bold;}
.paging li .material-symbols-outlined{font-weight: 300;}

/*반응형*/
.mOnly{display: none;}
@media only screen and (max-width:767px){
    .wFull .mainCon{width: auto;}
    .pcOnly,.dimmed{display: none;}
    .mOnly,.loginBn{display: block;}
    .brLGra::before, .brLGra::after{background-size: 100%;}
    .pcStatic{position: fixed; transform: translate(-50%,-50%); width: 70%; height: 80%; overflow-y: scroll; display: none;}

    /*모바일헤더*/
    #mNav{left: 0; transform: unset; height: 100%; top: 0; background: rgba(0,0,0,0.9); width: 100%;}
    #mNav::before{width: 100%; margin-bottom: 0; background: #000 url(../images/common/logo.gif) no-repeat center; background-size: 25%;}
    #mNav ul{padding: 5px; gap: 5px;}
    #mNav ul li{width: calc(25% - 4px);  text-align: center; font-size: 12px; border: 1px solid #232323; box-sizing: border-box;}
    #mNav ul li img{transform: scale(0.5);}
    #mNav a{color: #fff; display: block; padding-bottom: 10px;}
    #mNav .mNavBottom li{width: 50%;}
    #mNav .mNavBottom li a{padding-bottom: 0;}

    #mHeader{overflow: hidden; position: sticky; z-index: 1000; top: 0; width: 100%; background: #000;}
    #mHeader .material-symbols-outlined{color: #fff; font-size: 32px; font-weight: 300;}
    #mHeader .logo{width: 110px;}

    .conLeft{position: fixed; z-index: 1001; top: 58px; right: 0; min-width: 90%; max-width: 90%; height: calc(100vh - 119px); border-radius: 0; display: none;}
    #messages{height: calc(100vh - 135px)}
    .chat .boxTit .material-symbols-outlined{margin-top: 0; font-weight: 400; margin-top: 3px; color: #fff;}

    .mTxtFlow{margin:0 -20px; padding-top: 0;}
    .mTxtFlow .dpFlex{width:110%; text-wrap: nowrap; white-space: nowrap; transform: translateX(100%); animation: txtflow 15s linear infinite; padding:5px 0}
    .mTxtFlow span{color: #ff9c3f;}
    .mheaderTopInfo{margin-top: -10px; padding:10px 20px}

    @keyframes txtflow {
        0%{transform: translateX(100%);}
        100%{transform: translateX(-100%);}
    }

    .rightArea{width: 100%; max-width: 100%;}

    .loginBox li{width: 50%; text-align: center; background: #f2b140; border-radius: 5px;}    
    .loginBox li:last-child{background: #ff9c3f;}
    .loginBox li a{display: block; padding: 10px 0; color: #fff; font-weight: bold; font-size: 14px;}
    #mHeader .loginBox li span{font-size: 22px;}
    .dimmed{display: none;}

    /*회원가입폼*/
    #joinPop{width: 95%; height: 80%; overflow-y: scroll;}
    #joinPop::before{width: 80px; padding-bottom: 15%;}
    #joinPop h3{font-size: 16px;}

    /*회원정보*/
    .infoCard{width:80%; display: none; left: auto; right: 0; top:0; height: 100%; transform: unset; background: #090909; padding:0 10px}
    .infoCard::before{margin-top: 0; width: 30%;}
    .mBtnArea{display: flex;}
    .infoCard .mBtnArea li{width:calc(25% - 4px);}
    .infoCard .mBtnArea2 li{width:calc(50% - 4px);}
    .infoCard .mBtnArea2 li:first-child{width: 100%;}
    .infoCard .mBtnArea li .material-symbols-outlined,.infoCard .mBtnArea2 li .material-symbols-outlined{color: #fbb742;}

    /*베팅카트*/
    .infoCard.bettingPop .cardList>li{display: none;}
    .infoCard.bettingPop .cardList .pcOnly{display: block;}


    /*모바일푸터*/
    #footer{padding-bottom: 100px;}
    .fNav{position: fixed; width: 100%; left: 0; bottom: 0; background: #161616; z-index: 10;}
    .fNav *{color: #fff;}
    .fNav li{width: 20%;}
    .fNav li .material-symbols-outlined{display: block; font-weight: 300; color: #f2b140; margin-top: 0;}
    
    .bettingCart{position: relative; padding:20px 0; margin:-20px 0}
    .bettingCart .dpFlex{flex-direction: column;}
    .bettingCart span:first-child{position: absolute; left: 50%; transform: translateX(-50%); background: #666; border-radius: 50%; width: 22px; height: 22px; top:-10px}
    .bettingCart span:last-child::before{content: ""; display: block; width: 50%; height: 1px; background: #fff; margin:5px auto; margin-bottom: 0;} 

    .fNormal .fNav>ul{padding-top: 10px;}
    .fNormal .fNav>ul li{width: 25%;}
}