.subTitle {width: 100%; height: 200px; background: linear-gradient(45deg, #52069c 45%, #b21691 95%); color: #fff; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden;}
    .subTitle .title {display: flex; align-items: center; flex-direction: column;}
    .subTitle .eng {font-family: var(--ffEng); font-size: 50px; text-transform: uppercase; display: flex; align-items: center;}
    .subTitle .eng span {font-family: var(--ffKor); font-size: 40px;}
    .subTitle .eng img {height: 70px; margin-right: 10px;}
    .subTitle .kor {font-family: var(--ffKor); font-weight: normal; display: flex; flex-direction: column; align-items: center; z-index: 1;}

    .subTitle .kor h1 {font-size: 20px; display: flex; align-items: center; margin: 5px 0; }
    .subTitle .kor h1 span {font-size: 11px; background: #f74544; color: #fff; padding: 5px 7px; border-radius: 5px; margin-right: 5px;}
    .subTitle .kor .date {margin-top: 5px; font-size: 15px;}
    .subTitle .kor .date span {font-family: var(--ffEng);}

    .subTitle .coinsWrap img:nth-child(2) {left: 10rem; top: 100px;}
    .subTitle .coinsWrap img:nth-child(3) {top: 10px;}
    .subTitle .coinsWrap img:nth-child(4) {right: 10rem; bottom: 1rem;}

    .subContLine {display: flex; height: 50px; color: #Fff; font-weight: bold; font-size: 13px;}
    .subContLine section > div {display: flex; align-items: center; }
    .subContLine .blue,
    .subContLine .red {height: 100%; width: 50%; position: relative;}
    .subContLine .red {background: #f30a5c; padding: 0 0 0 20px;}
    .subContLine .blue {background: #1c95f3; padding: 0 20px 0 0;}
    .subContLine .flowNoti {background: #222; width: 100%; overflow: hidden; position: relative; font-size: 15px; cursor: pointer; height: 50px;}
    .subContLine .flowNoti:hover .marquee {animation-play-state: paused;}
    .subContLine .flowNoti .marquee {position: absolute; white-space: nowrap; animation: marquee 15s linear infinite;}

    @keyframes marquee {
        0% {transform: translateX(30%);}
        95% { opacity: 1; }
        100% { transform: translateX(-75%); opacity: 0;}
    }

    .subContLine .flowNoti .marquee p {display: inline-block; margin-right: 50px;}
    .subContLine .flowNoti .marquee p span {background: #fff; color: #000; padding: 3px 5px; border-radius: 5px; font-size: 13px;}



    .subContLine .red > div,
    .subContLine .blue > div {position: relative; z-index: 2;}

    .subContLine .blue:after,
    .subContLine .red:after {content: ""; position: absolute; width: 40px; height: 100%; background: #f30a5c; top: 0; right: -19px; transform: skewX(-30deg); z-index: 1;}
    .subContLine .blue:after {left: -19px; background: #1c95f3;}

    
    /* campaign */
    .campaign_nav .cont {display: flex; justify-content: space-between; border-bottom: 1px solid #ccc;}
    .campaign_nav .cont li {color: #333; background: #fff; flex-direction: row; align-items: center; border-right: 1px solid #ccc; box-sizing: border-box; width: 25%; display: flex; justify-content: center; padding: 0.7rem 0;}
    .campaign_nav .cont li .img {justify-content: center; display: flex; margin-right: .5rem;}
    .campaign_nav .cont li img {height: 5vw;}
    .campaign_nav .cont li .txt {display: flex; flex-direction: column; align-items: flex-start;  flex-wrap: wrap}
    .campaign_nav .cont li .txt div:nth-child(1) {display: flex; flex-direction: row; align-items: center; font-size: 20px;}

    .campaign_nav .cont li .eng {font-family: var(--ffEng); font-weight: normal; font-size: 18px; padding: 0 0 0 0.5rem;}
    .campaign_nav .cont li .date {font-family: var(--ffEng); font-weight: normal; font-size: 15px; display: flex; padding-top: 0.4rem;}
    .campaign_nav .cont li .date span {font-family: var(--ffKor); font-size: 13px; padding-right: 5px;}
    .campaign_nav .cont li:hover {color: #fff; background: #fe4543; transition: all .3s ease; cursor: pointer;}
    
    @media(max-width: 1100px) {
        .campaign_nav .cont li .txt div:nth-child(1) {font-size: 15px;}
        .campaign_nav .cont li .date {padding-top: 0.2rem; font-size: 12px;}
        .campaign_nav .cont li .eng,
        .campaign_nav .cont li .date span {display: none !important;}
    }

    .subCont {padding: 2.3333rem 2.5rem; padding-bottom: 0; display: flex; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; max-width: 120rem; margin: auto; margin-bottom: 1.875rem; flex-wrap: wrap;}

    .campaign_season,
    .campaign_race,
    .campaign_quest,
    .campaign_tournament {width: 100%; display: none; flex-direction: column;}
    
    .campaign_season.active,
    .campaign_race.active,
    .campaign_quest.active,
    .campaign_tournament.active {display: flex;}


    #load_maincon {padding: 2.3333rem 2.5rem; box-sizing: border-box;}
    #match_result_txt_red,
    #match_result_txt_blue {font-size: 15px; padding-left: 3px;}




    .final {border: 1px solid #ccc; border-width: 1px 0; margin: 1% 2%;}
    .final .title {padding: 20px 0; width: 100%; text-align: center; font-size: 15px; color: #222; font-weight: 700; display: flex; align-items: center; justify-content: center;}


    
    .final .title .date {margin-top: 5px; font-size: 13px; font-weight: normal;}
    .final .title div span {font-family: var(--ffEng);}

    .final .cont {display: flex; justify-content: center; align-items: center; font-family: var(--ffEng);}
    .final .cont .teamInfo {display: flex; align-items: center;}
    .final .cont .teamInfo.teamRed  {text-align: right;}
    .final .cont .teamInfo.teamBlue  {text-align: left;}
    .final .cont .teamInfo .txt div:nth-child(1) {font-size: 25px; font-weight: 700;}
    .final .cont .teamInfo .txt div:nth-child(2) {font-size: 20px; font-weight: 400;}
    .final .cont .teamInfo .icon {margin: 0 30px; padding: 10px 20px;}
    .final .cont .teamInfo .icon img {height: 100px;}

    .final .cont .teamInfo.teamRed .icon {transform: skew(30deg); background: #f30a5c;}
    .final .cont .teamInfo.teamRed .icon:before {content: ""; position: absolute; width: 5px; height: 100%; background: #f30a5c; z-index: -1; right: -10px; top: 0;}
    .final .cont .teamInfo.teamBlue .icon {transform: skew(-30deg); background: #1c95f3;}
    .final .cont .teamInfo.teamBlue .icon:before {content: ""; position: absolute; width: 5px; height: 100%; background: #1c95f3; z-index: -1; left: -10px; top: 0;}

    .final .cont .teamInfo.teamRed .icon img {transform: skew(-30deg);}
    .final .cont .teamInfo.teamBlue .icon img {transform: skew(30deg);}

    
    
    .final .cont .score {padding: 0 4rem; text-align: center;}
    .final .cont .score div:nth-child(1) {font-size: 50px; font-weight: 700;}
    .final .cont .score div:nth-child(2) {font-size: 15px; font-weight: 400;}



        
    .subCont section > div {margin: 2% 2% 1% 2%;}



    .sub_title {font-weight: 700;}
    .sub_title span {font-family: var(--ffEng);}
    .sub_title b {font-size: 11px; float: right; top: 15px; position: relative;}
    .teamList .details {display: none; width: 90%; margin: 0 5% 2% 5%; border: 1px solid #dbdbdb;}
    .teamList .details li {display: flex; background: #fff; border-top: 1px solid #dbdbdb;font-weight: normal; font-size: 12px;}
    .teamList .details li:first-child {font-size: 11px; border-top: none; background: #555; color: #fff;}
    .teamList .details li > div {width: 20%; text-align: center; border-right: 1px solid #dbdbdb; padding: 10px 5px;}
    .teamList .details li > div:last-child {border-right: none;}
    .teamList .details li:nth-child(n+2) div:nth-child(3) {color: #885dd5; font-weight: bold;}
    .teamList .details li:nth-child(n+2) div:nth-child(4) {font-weight: bold;}
    .teamList .details li:nth-child(n+2) div:nth-child(5) {color: #f73d3c; font-weight: bold;}
    .teamList .active .details {display: flex;}

    .separator {width: 100%; height: 1px; margin-top: 10px; background-color: #dbdbdb; position: relative;}
    .separator:before {content: ''; width: 70px; height: 3px; background-color: #885dd5; position: absolute; top: -2px; left: 0;}

    .teamList .teamUl {display: flex; margin-top: 10px; justify-content: space-between;}
    .teamUl ul {display: flex; flex-direction: column; width: 49%;} 

    .teamUl .title {font-size: 20px; font-weight: normal; background: #f30a5c; color: #fff; text-align: center; padding: 10px 0;}
    .teamUl .teamBlue .title {background: #1c95f3;}
    .teamUl .title span {font-family: var(--ffEng);}
    .teamList ul li {margin: 0; cursor: pointer}
    .teamList .teamRed > li {background: #f9f9f9; border-bottom: 1px solid #dbdbdb}
    .teamList .teamRed > li:nth-child(2n) {background: #fff}
    .teamList .teamRed > li:hover {background: #ddd;}
    .teamList .teamRed .details li:first-child {background: #f30a5c;}

    .teamList .teamRed .winner .name,
    .teamList .teamRed .winner .score {color: #f30a5c;}
    .teamList .teamBlue .winner .name,
    .teamList .teamBlue .winner .score {color: #1c95f3;}

    .teamList .teamBlue > li {background: #fff; border-bottom: 1px solid #dbdbdb}
    .teamList .teamBlue > li:nth-child(2n) {background: #f9f9f9}
    .teamList .teamBlue > li:hover {background: #ddd;}
    .teamList .teamBlue .details li:first-child {background: #1c95f3;}


    .teamList .teamInfo {display: flex; font-weight: normal; justify-content: space-between; align-items: center; padding: 8px 0;}
    .teamList .teamBlue .teamInfo {flex-direction: row-reverse;}
    .teamList .headLi .teamInfo {padding: 3px 0;}


    .teamList .teamInfo > div {margin: 0 5px; height: 100%; display: flex; align-items: center; justify-content: center;}
    .teamList .teamInfo img {height: 50px;}
    .teamList .teamInfo .img {width: 9%;}
    .teamList .teamInfo .name {width: 10%; font-size: 17px; font-weight: bold;}
    .teamList .teamInfo .score {width: 50%; font-size: 13px; padding-right: 10px;}
    .teamList .teamInfo .btn {width: 11%;}
    
    .guild .teamList .teamInfo .rank {width: 5%; font-size: 15px; padding: 3px; text-align: center; border-radius: 3px; font-size: 13px; margin-right: 3px;}
    .guild .teamList .teamInfo .rank.num1 {background: #fcb614; color: #fff;}
    .guild .teamList .teamInfo .rank.num2 {background: #9faebb; color: #fff;}
    .guild .teamList .teamInfo .rank.num3 {background: #cf5520; color: #fff;}
    .guild .teamList .teamInfo .rank.num4 {background: #f68351; color: #fff;}
    .guild .teamList .teamInfo .rank.num5 {background: #2956a7; color: #fff;}
    .guild .teamList .teamInfo .rank.num6 {background: #5f90ec; color: #fff;}


    .teamList .teamInfo div span {font-family: var(--ffEng); font-size: 27px; font-weight: normal;}
    .teamList .teamInfo .btn i {margin-right: 5px; color: #000;}
    .teamList .teamInfo .btn i:hover {color: #555;}
    .teamList .teamInfo .btn button {background: #885dd5; border-radius: 5px; padding: 5px; color: #fff; cursor: pointer; font-size: 11px; border: none; outline: none;}

    .headLi div {font-size: 11px !important; height: 30px !important; }


    
    .ranking ul {display: flex; flex-wrap: wrap; padding: 10px 0;}
    .ranking ul li {display: flex; font-weight: normal; padding: 10px; font-size: 13px; width: 33.333%; box-sizing: border-box; margin: 3px 0; justify-content: space-between; border: 1px solid #ccc; border-width: 1px 0; align-items: center;}
    .ranking ul li:nth-child(2n) {background: #ececec;}
    .ranking ul li div {padding: 0 2px; position: relative;}
    .ranking ul li div:nth-child(1) {background: #777; color: #fff; width: 35px; padding: 3px 0; text-align: center; border-radius: 3px; font-size: 13px;}
    .ranking ul li div:nth-child(4) {font-weight: bold;}
    .ranking ul li:nth-child(1) div:nth-child(1) {background: #fcb614; }
    .ranking ul li:nth-child(2) div:nth-child(1) {background: #9faebb; }
    .ranking ul li:nth-child(3) div:nth-child(1) {background: #cf5520; }
    .ranking ul li:nth-child(4) div:nth-child(1) {background: #f68351; }
    .ranking ul li:nth-child(5) div:nth-child(1) {background: #2956a7; }
    .ranking ul li:nth-child(6) div:nth-child(1) {background: #5f90ec; }


    .ranking ul li div img {height: 25px; position: absolute; top: -6px;}

    .terms_cont {font-weight: normal; font-size: 15px; padding: 10px 0; display: flex; justify-content: space-between;}
    .terms_cont > div {width: 32%;}
    .terms_cont h5 {padding: 5px 0; font-size: 17px; font-weight: bold;}

    .terms_cont .rewards table {width: 100%; text-align: center;}
    .terms_cont .rewards table th {background: #777; color: #fff; padding: 7px 0; font-size: 11px; border: 1px solid #ccc;}
    .terms_cont .rewards table th:nth-child(2) {background: #fcb614;}
    .terms_cont .rewards table th:nth-child(3) {background: #9faebb;}
    .terms_cont .rewards table td {padding:  10px 0; border: 1px solid #ccc; font-size: 13px;}
    .terms_cont .rewards table td span {font-size: 11px;}
    .terms_cont .rewards table tr:nth-child(2n) {background: #f9f9f9;}

    .terms_cont .guide h6 {font-weight: bold; font-size: 15px; padding: 5px 0 10px 0;}
    .terms_cont .guide button {background: #885dd5; border-radius: 5px; padding: 3px 5px; color: #fff; cursor: pointer; font-size: 12px; border: none; outline: none;}
    .terms_cont .guide p {line-height: 1.3rem; font-size: 13px; background: #f9f9f9; border: 1px solid #ccc; padding: 5px; margin-bottom: 10px;}
    .terms_cont .guide p span {background: #fff; padding: 3px 5px; border: 1px solid #ccc; border-radius: 3px; font-weight: bold;}
    .terms_cont .rule p {line-height: 1.3rem; font-size: 13px; background: #f9f9f9; border: 1px solid #ccc; padding: 5px; margin: 8px 0;}
    .terms_cont .rule p:nth-child(2n) {background: #fff;}
    .terms_cont .rule p font {font-weight: bold; font-size: 15px;}



    /* 레이스     */
    .final .title {position: relative;}
    .final .title .btn {background: #885dd5; border-radius: 5px; padding: 12px 20px; color: #fff; cursor: pointer; font-size: 12px; border: none; outline: none; margin-left: 20px;}

    .campaign_race .terms_cont > div {width: 49.5%;}

    .campaign_race .ranking ul {justify-content: space-between}
    .campaign_race .ranking ul li {width: 49.5%; font-size: 15px; align-items: center}
    .campaign_race .ranking ul li:nth-child(2n) {background: #fff;}
    .campaign_race .ranking ul li:nth-child(4n),
    .campaign_race .ranking ul li:nth-child(4n+1) {background: #ececec;}

    .campaign_race .ranking ul li div:nth-child(3),
    .campaign_race .ranking ul li div:nth-child(4),
    .campaign_race .ranking ul li div:nth-child(5) {display: flex; flex-direction: column; align-items: center;}
    .campaign_race .ranking ul li div:nth-child(3):after,
    .campaign_race .ranking ul li div:nth-child(4):after,
    .campaign_race .ranking ul li div:nth-child(5):after {font-size: 11px; margin-top: 5px; color: #999; font-weight: normal;}

    .campaign_race .ranking ul li div:nth-child(3):after {content: "현재롤링"; }
    .campaign_race .ranking ul li div:nth-child(4):after {content: "비율"; }
    .campaign_race .ranking ul li div:nth-child(5):after {content: "예상상금"; }



    

    /* 시즌 */
    .campaign_season .final .btnwrap {display: flex; margin-top: 10px;}
    .campaign_season .final .title {flex-direction: column;}
    .campaign_season .final .title .btn {margin-left: 10px; position: relative;}
    .campaign_season .final .title .btn:before {content: ""; position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.55); top: 0; left: 0; display: none; align-items: center; justify-content: center; border: 1px solid #885dd5; border-radius: 5px; box-sizing: border-box;}
    .campaign_season .final .title .btn.fin {pointer-events: none;}
    .campaign_season .final .title .btn.fin:before {display: flex; content: "수령완료";}
    .campaign_season .final .title .btn:hover:before {display: flex; content: "수령하기"; background: #f74544;}
    .campaign_season .final .desc {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 7px;}
    .campaign_season .final .desc p {background: #fff; border: 1px solid #ccc; font-size: 13px; color: #555; border-radius: 3px; padding: 3px 5px; margin: 3px;}

    .seasonList {display: flex; justify-content: space-between; flex-wrap: wrap;}
    .seasonList section {width: 49.5%; margin-bottom: 20px;}
    .seasonUl {display: flex; justify-content: space-between;}
    .seasonList ul {display: flex; flex-wrap: wrap; padding: 10px 0; width: 49.5%;}
    .seasonList ul.full {width: 100%;}
    .seasonList ul li {display: flex; font-weight: normal; padding: 10px; font-size: 13px; width: 100%; box-sizing: border-box; margin: 3px 0; justify-content: space-between; border: 1px solid #ccc; border-width: 1px 0; align-items: center;}
    .seasonList ul:nth-child(1) li:nth-child(2n) {background: #ececec;}
    .seasonList ul:nth-child(2) li:nth-child(2n+1) {background: #ececec;}
    .seasonList ul li div {padding: 0 2px; position: relative;}
    .seasonList ul li div.btn {background: #885dd5; color: #fff; padding: 5px 7px; border-radius: 5px; font-size: 12px; cursor: pointer;}
    .seasonList ul li.fin {background: #ff8888 !important; color: #fff;}
    .seasonList ul li.fin div.btn {background: #999 !important;}

    .seasonList section:nth-child(1) ul li div.btn {background: #555;}
    .seasonList section:nth-child(2) ul li div.btn {background: #910d0d;}
    .seasonList section:nth-child(3) ul li div.btn {background: #0d8091;}
    .seasonList section:nth-child(4) ul li div.btn {background: #0d9122;}
    .seasonList section:nth-child(5) ul li div.btn {background: #91580d;}
    .seasonList section:nth-child(6) ul li div.btn {background: #1c95f3;}


    .seasonList section:nth-child(1) .separator:before {background: #555;}
    .seasonList section:nth-child(2) .separator:before {background: #910d0d;}
    .seasonList section:nth-child(3) .separator:before {background: #0d8091;}
    .seasonList section:nth-child(4) .separator:before {background: #0d9122;}
    .seasonList section:nth-child(5) .separator:before {background: #91580d;}
    .seasonList section:nth-child(6) .separator:before {background: #1c95f3;}

    


    
    .subContLine_tournament,
    .subContLine_season,
    .subContLine_race {display: none; width: 100%;}
    .subContLine_tournament.active,
    .subContLine_season.active,
    .subContLine_race.active {display: flex;}

    .subTitle_tournament,
    .subTitle_season,
    .subTitle_race {display: none;}

    .subTitle_tournament.active,
    .subTitle_season.active,
    .subTitle_race.active {display: flex}


    /* 길드 */

    
    .subContLine_guild {display: flex; width: 100%;}
    .subTitle_guild {display: flex}
    .guild .campaign_nav .cont li .txt div:nth-child(1) {flex-direction: column; align-items: flex-start;}
    .guild .campaign_nav .cont li .eng {padding: 0;}
    .guild .subCont section {width: 100%; flex-direction: column; display: none;}
    .guild .subCont section > div {margin: 2% 2% 1% 2%;}
    .guild .subCont section > form > div {margin: 2% 2% 1% 2%;}
    .guild .subCont section.active {display: flex;}

    .guild .final .title {font-size: 25px; font-weight: normal;}
    .guild .final .title div img {height: 50px; margin-right: 5px;}

    .guild .teamList .teamWrap {padding: 15px 0;}
    .guild .teamList .teamInfo > div {margin: 0 5px; height: 100%; display: flex; align-items: center; justify-content: center; width: 20%;}
    .guild .teamList .teamInfo .name { font-size: 13px; font-weight: normal; justify-content: flex-start;}
    .guild .teamList .teamInfo .name .level {background: #777; color: #fff; padding: 3px; text-align: center; border-radius: 3px; font-size: 11px; margin-right: 3px;}
    .guild .teamList .teamInfo .score { font-size: 15px; padding-right: 10px; font-weight: bold;}
    .guild .teamList .teamBlue .teamInfo {flex-direction: row;}

    .guild .teamList .teamInfo .member {width: 12%; font-size: 13px;}
    .guild .teamList .teamInfo .btn {width: 12%;}

    
    .guild .ranking ul li {width: 49.5%;}
    .guild .ranking ul li div {width: 20%;}
    .guild .ranking ul li div span {background: #777; color: #fff; padding: 3px; text-align: center; border-radius: 3px; font-size: 11px; margin-right: 3px;}
    .guild .ranking ul li div:nth-child(1) {width: 35px;}

    
    .guild .ranking ul li:nth-child(2n) {background: #fff;}
    .guild .ranking ul li:nth-child(4n),
    .guild .ranking ul li:nth-child(4n+1) {background: #ececec;}

    .guild .ranking ul li div:nth-child(2),
    .guild .ranking ul li div:nth-child(4) {display: flex; flex-direction: column; align-items: center;}
    .guild .ranking ul li div:nth-child(2):after,
    .guild .ranking ul li div:nth-child(4):after {font-size: 11px; margin-top: 5px; color: #999; font-weight: normal;}

    .guild .ranking ul li div:nth-child(2):after {content: "점수"; }
    .guild .ranking ul li div:nth-child(4):after {content: "전투력"; }


    .subCont .desc {margin: 10px 0; font-size: 13px; color: #777; line-height: 1.75; font-weight: normal; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;}
    .subCont .desc div {background: #fff; border: 1px solid #ccc; color: #555; border-radius: 3px; padding: 3px 5px; margin: 3px;}

    .subCont .notice .desc div {width: 31%; padding: 10px; background: #ececec;}
    .subCont .notice .desc div b {font-weight: bold;}
    .subCont .notice .desc div span {background: #fff; padding: 3px 5px; border: 1px solid #ccc; border-radius: 3px; font-weight: bold;}
    .guildInfowrap {font-weight: normal;}
    
    .guildInfo_cont {font-size: 15px;}
    .guildInfo_cont .guildInfo {display: flex; justify-content: space-between; font-size: 20px; margin: 20px 0;}
    .guildInfo_cont .guildInfo .infoBox {padding: 10px 0; text-align: center; font-weight: bold; border: 1px solid #ccc; border-radius: 5px; width: 19%; }
    .guildInfo_cont .guildInfo .infoBox span {font-size: 15px; padding-left: 3px;}
    .guildInfo_cont .infotitle {color: #999; font-size: 13px; font-weight: normal !important; padding: 5px 0 0 0;}
    
    .guildNoti {display: inline-flex; width: 49.5%; justify-content: space-between; font-weight: normal;}
    /* .guildNoti > div {width: 48.5%; background: #ececec; border: 1px solid #ccc; padding: 5px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 5px;} */
    .guildNoti > div {width: 100%; background: #ececec; border: 1px solid #ccc; padding: 5px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 5px;}
    .guildNoti h6 {padding: 5px 0; font-weight: bold;}
    .guildNoti textarea {width: calc(100% - 12px); background: none; background: #fff; border: 1px solid #ccc; height: 60px; outline: none; padding: 5px; border-radius: 5px;}
    .guildNoti p {line-height: 1.8; font-size: 12px;}
    

    .memberList ul {display: flex; flex-wrap: wrap; padding: 10px 0; justify-content: space-between;}
    .memberList ul li {display: flex; font-weight: normal; padding: 20px 10px; font-size: 13px; width: 49.5%; box-sizing: border-box; margin: 3px 0; justify-content: space-between; border: 1px solid #ccc; border-width: 1px 0; align-items: center; }
    .memberList ul li:nth-child(4n),
    .memberList ul li:nth-child(4n+1) {background: #ececec;}

    .memberList ul li.sort {background: #555; color: #fff; padding: 10px ;}

    .memberList ul li div {padding: 0 2px; position: relative; display: flex; flex-direction: column; align-items: center;}
    .memberList ul li div span {margin-top: 5px; font-size: 11px; color: #999;}
    .memberList ul li div:nth-child(1) {width: 10%;}
    .memberList ul li div:nth-child(2) {width: 30%; display: flex; flex-direction: row; justify-content: center;}
    .memberList ul li div:nth-child(3) {width: 20%;}
    .memberList ul li div:nth-child(4) {width: 15%;}
    .memberList ul li div:nth-child(5) {width: 15%;}
    .memberList ul li div:nth-child(6) {width: 10%; color: #999;}

    .guildBoard .btn {background: #885dd5;border-radius: 5px;padding: 10px 25px;color: #fff;cursor: pointer;font-size: 12px;top: -16px;border: none;outline: none;position: relative;}
    .guildBoard table {background: #ececec; text-align: center; font-size: 13px; width: 100%; margin-top: 20px;}
    .guildBoard table td {border: 1px solid #ccc;  height: 35px; vertical-align: middle; line-height: 17px; padding: 5px;}
    .guildBoard table th {background: #555; color: #fff; border: 1px solid #222; height: 25px; vertical-align: middle; line-height: 17px; padding: 5px 0; font-size: 11px;}
    .guildBoard table tbody tr td:first-child {text-align: left; padding-left: 15px;}

    .guildBoard .writeBox {display: flex; align-items: center; justify-content: flex-end; margin: 10px 0 0 0; height: 50px;}
    .guildBoard .writeBox textarea {width: 85%; border: 1px solid #999; outline: none; height: 100%; padding: 0; margin: 0;}
    .guildBoard .writeBox .btn {top: 0; background: #555; margin-left: 5px; padding: 0 5px; height: 100%; border: 1px solid #555; display: flex; align-items: center;}

    
    
    /* guild_shop */
    .guild_shop ul {display: flex; flex-wrap: wrap;}
    .guild_shop .skillList li {position: relative; text-align: center; margin: 0 25px 10px 25px; width: 200px;}
    .guild_shop .skillList li img {height: 200px;}
    .guild_shop .skillList li.coupon img {height: 130px; margin: 35px 0;}
    .guild_shop .skillList li .skillDesc { position: absolute; font-size: 17px; top: 143px; font-weight: bold; width: 95px; text-align: center; line-height: 20px;}
    .guild_shop .skillList li .skillDescText {font-size: 13px; position: absolute; bottom: 3px; background-color: #fff; color: #000; padding: 4px 10px; border-radius: 4px;}


    .guild_shop .skillList .dateLeft {position: absolute; color: #fff; top: 20px; left: 20px; font-size: 11px;}
    .guild_shop .skillList .hover {position: absolute; background: rgba(0,0,0,0.5); width: 90%; height: 200px; top: 0; left: 0; font-size: 15px; border-radius: 7px; color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; transition: all .3s ease; padding: 20px;}
    .guild_shop .skillList .hover span {font-size: 40px; margin-bottom: 50px; transition: all .3s ease;}

    .guild_shop .skillList li.active .hover,
    .guild_shop .skillList li:hover .hover {opacity: 1; transition: all .3s ease; cursor: pointer; z-index: 1;}
    .guild_shop .skillList li.active .hover span,
    .guild_shop .skillList li:hover .hover span {margin-bottom: 10px; transition: all .1s ease;}

    .guild_shop .skillList {padding: 20px; margin-top: 20px; }


    .guild_shop .skillbox  {text-align: center; display: flex; justify-content: center; align-items: center; padding: 20px; background: #1a2d4b; width: 90%; border-radius: 5px; position: relative;}


    .skillText {font-weight: normal; margin: 10px 0;}
    .skillText .title {font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-wrap: wrap;}
    .skillText .title span {font-size: 13px; margin-left: 5px; font-weight: bold;}
    .skillText .price {font-family: var(--ffEng); font-size: 30px; font-weight: 600; position: relative; display: flex; align-items: center; justify-content: center; margin-top: 5px;}
    .skillText .price .textHover {font-family: var(--ffKor); position: absolute; background: #885dd5; color: #fff; padding: 8px 0; border-radius: 5px; font-size: 13px; top: 2px; width: 70%; opacity: 0; transform: translateX(20%); transition: all .3s ease-in-out; cursor: pointer;}

    .skillText .amount {display: flex;align-items: center;justify-content: center;margin-top: 5px;font-size: 10px;}
    .skillText .amount a { overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; width: 2.117em; height: 2.117em; padding: 0; margin: 0 1px; font-size: 1.4em; border-radius: 2px; color: #000; background: #ececec; border: 1px solid transparent;}
    .skillText .amount a:hover,
    .skillText .amount a.active {cursor: pointer; border: 1px solid #222; background: #555; color: #fff; }


    .guild_shop .skillList li:hover .textHover {display: block; transition: all .3s ease-in-out; opacity: 1; transform: translateX(0);}





    /* guild_gift */
    .guild_gift .final .title {padding: 20px 0 0 0;}
    .guild_gift ul {display: flex; flex-wrap: wrap; padding: 10px 0; justify-content: space-between;}
    .guild_gift ul li {display: flex; font-weight: normal; padding: 20px 10px; font-size: 13px; width: 100%; box-sizing: border-box; margin: 3px 0; justify-content: space-between; border: 1px solid #ccc; border-width: 1px 0; align-items: center; }

    .guild_gift ul li.sort {background: #555; color: #fff; padding: 10px ;}

    .guild_gift ul li div {padding: 0 2px; position: relative; display: flex; flex-direction: column; align-items: center; width: 20%;}
    .guild_gift ul li div span {margin-top: 5px; font-size: 11px; color: #999;}

    .guild_gift ul li div.btn span {background: #885dd5; border-radius: 5px; padding: 12px 20px; color: #fff; cursor: pointer; font-size: 12px; border: none; outline: none;}

    .guild_gift ul li.fin div {text-decoration: line-through;}
    .guild_gift ul li.fin div.btn {text-decoration: none;}
    .guild_gift ul li.fin div.btn span {background: #555; }

    .guild_gift ul li.notarget {background: #ececec;}
    .guild_gift ul li.notarget div.btn {text-decoration: none;}
    .guild_gift ul li.notarget div.btn span {background: #555; }
    .guild_setting .guildNoti > div {width: 100%; margin-top: 20px; flex-direction: row;} 
    .guild_setting .guildNoti h6 b {background: #555; padding: 5px 7px; font-size: 11px; color: #fff; float: right; position: relative; top: -3px; border-radius: 5px; cursor: pointer;}
    .guild_setting .guildNoti > div > div {width: 49.5%;}

    /* guild_setting */
    .guild_setting .search { box-shadow: none; border-radius: 5px; position: relative; width: 90%; margin: 15px auto; }
    .guild_setting .search input {border: 1px solid #ccc;; border-radius: 0.5714rem; width: 100%; line-height: 1.0714rem; font-size: .9286rem; padding: 15px 10px; -webkit-box-sizing: border-box; box-sizing: border-box; background: #fff; color: #333; outline: none;}
    .guild_setting .search span {color: #f73d3c; position: absolute; right: 10px; top: 12px; font-size: 25px;}
    .guild_setting h6 {font-size: 15px; font-weight: normal;}
    .guild_setting .desc {justify-content: flex-start; }
    .guild_setting .desc > div {position: relative;}
    .guild_setting .desc > div:after {font-size: 11px; background: #885dd5; color: #fff; width: 100%; height: 100%; top: 0; left: 0; position: absolute; display: flex; justify-content: center; align-items: center; cursor: pointer; opacity: 0; transition: all .3s ease}
    .guild_setting .desc > div:hover:after {opacity: 1; transition: all .3s ease}
    
    .guild_setting .desc.invite > div:after {content: "초대하기";}
    .guild_setting .desc.expel > div:after {content: "추방하기";}

    .settingWrap {background: #ececec; padding: 10px; margin-top: 20px;}

    /* guild_challenge */
    .guild_challenge_wrap .guildInfo {flex-wrap: wrap;}
    .guild_challenge_wrap .guildInfo .infoBox {width: 32.333%; margin-bottom: 15px; padding: 15px 0;}






    @media(max-width: 900px) {

        .subTitle {height: 150px; padding-bottom: 20px;}
 
        .subTitle .coinsWrap img:nth-child(2) {left: -5rem; top: 100px;}
        .subTitle .coinsWrap img:nth-child(3) {top: 10px;}
        .subTitle .coinsWrap img:nth-child(4) {right: -2rem; bottom: 1rem;}

        .subTitle .eng img {height: 40px;}
        .subTitle .eng {font-size: 30px;}
        .subTitle .kor {font-size: 13px;}
        .subTitle .kor h1 {font-size: 15px;}

        .subContLine {height: auto; position: relative; top: -10px;}
        .subContLine_tournament.active,
        .subContLine_season.active,
        .subContLine_race.active {flex-direction: row; flex-wrap: wrap; position: relative;}
        .subContLine .blue {width: calc(50% - 30px); padding: 5px !important;}
        .subContLine .red {width: calc(50% + 10px); padding: 5px !important;}
        .subContLine .red > div, .subContLine .blue > div {width: 80%;}
        .subContLine .flowNoti {position: absolute; top: -20px; height: 20px; font-size: 11px; z-index: 10;}
        .subContLine .flowNoti .marquee p span {padding: 0px 2px; border-radius: 3px; font-size: 11px;}

        .campaign_nav .cont li {padding: 0.3rem 0; flex-direction: column}
        .campaign_nav .cont li .img {margin-right: 0;}
        .campaign_nav .cont li .txt {align-items: center;}

        .campaign_nav .cont li .txt div:nth-child(1) {font-size: 13px;}
        .subCont {padding: 1rem 0;}



        /* season */
        .campaign_season .final .title .btn {margin-left: 5px; padding: 10px;}
        .seasonList section {width: 100%; margin-bottom: 10px;}
        .seasonUl {flex-direction: column;}
        .seasonList ul {width: 100%;}

        .final .title {flex-direction: column;}
        .final .title .btn {margin: 10px 0 0 0;}
        .final .cont {flex-direction: column;}
        .final .cont .teamInfo .icon img {height: 50px;}
        .final .cont .score {padding: 0.5rem; width: 100%; border: 1px solid #ccc; border-width: 1px 0 ;}
        .final .cont .score div:nth-child(1) {font-size: 30px;}
        .final .cont .score div:nth-child(2) {font-size: 13px;}

        .sub_title {font-size: 15px;}
        .sub_title span {display: none;}
        .sub_title b {top: 5px;}

        .teamUl ul {width: 100%;}
        .teamList .teamUl {flex-direction: column;}

        .headLi div {font-size: 9px;}

        .teamUl .title {font-size: 15px; padding: 7px 0;}
        .teamList .teamInfo img {height: 30px;}
        .teamList .teamInfo .name {font-size: 13px; width: 13%;}
        .teamList .teamInfo .name span {font-size: 20px;}
        .teamList .teamInfo .score {width: 40%;}
        .teamList .teamInfo .btn {width: 12%;}
        .teamList .teamInfo .btn button {font-size: 11px;}
        .teamList .teamInfo div span {font-size: 20px;}

        .teamList .teamBlue .teamInfo {flex-direction: row;}

        .ranking ul li {width: 100%;}

        .terms_cont {flex-direction: column;}
        .terms_cont > div {width: 100%; margin-bottom: 20px;}
        .campaign_race .ranking ul li {width: 100%; font-size: 12px;}
        .campaign_race .terms_cont > div {width: 100%;}


        /* guild */
        .guild .campaign_nav .cont {flex-direction: row; flex-wrap: wrap;}
        .guild .campaign_nav .cont li {width: 33.3333%; flex-direction: row;}
        .guild .campaign_nav .cont li:nth-child(n+3) {border-top: 1px solid #ccc;}

        .guild .final .title {flex-direction: row; font-size: 18px; padding: 10px 0; font-weight: bold;}
        .guild .final .title div img {height: 30px;}
        .guild .subCont .notice .desc div {width: 100%;}
        .teamList .teamInfo {padding: 0;}
        .guild .teamList .teamWrap {padding: 10px 0;}
        .guild .teamList .teamInfo > div {line-height: 1.5em;}
        .guild .teamList .teamInfo .name,
        .guild .teamList .teamInfo .member,
        .guild .teamList .teamInfo .score {font-size: 11px !important;}
        .guild .teamList .teamInfo .btn {width: auto;}
        .guild .teamList .teamInfo .btn button {font-size: 9px; padding: 4px !important;}

        .guild .ranking ul li {width: 100%; font-size: 12px;}
        .guild .ranking ul li div {width: 33%; line-height: 1.2em;}

        .guild .final .title .btn {margin: 0 0 0 20px;}
        .guildInfo_cont .guildInfo {flex-wrap: wrap; font-size: 17px;}
        .guildInfo_cont .guildInfo .infoBox {width: 49%; margin-bottom: 5px;}

        .guild .guildNoti {flex-wrap: wrap;}
        .guild .guildNoti > div {width: 100%; margin-bottom: 10px;}

        .guild .memberList ul li {width: 100%; font-size: 11px; padding: 10px 5px;}
        .guild .memberList ul li.sort:nth-child(2) {display: none;}
        .guild .memberList ul li div span {font-size: 10px;}
        .guild_shop ul {justify-content: space-around;}
        .guild_shop .skillList {padding: 0; margin-top: 10px;}
        .guild_shop .skillList li {margin: 0; width: 155px;}
        .guild_shop .skillbox {padding: 10px;}
        .guild_shop .skillList .hover {padding: 10px;}
        .skillText .price {font-size: 25px;}
        .guild_shop .skillList li .skillDesc {top: 133px;}
        .skillText .price .textHover {top: 0;}


        .guild_gift ul li {flex-wrap: wrap; justify-content: flex-start; padding: 5px; font-size: 12px;}
        .guild_gift ul li div {width: 30%; align-items: flex-start;}
        .guild_gift ul li div:nth-child(2) {width: 46%;}
        .guild_gift ul li div:nth-child(3) {width: 20%;}
        .guild_gift ul li div:nth-child(4) {width: calc(100% - 75px); margin-top: 3px;}
        .guild_gift ul li div:nth-child(5) {width: auto; margin-top: 3px;}
        .guild_gift ul li div.btn {margin-bottom: 0;}
        .guild_gift ul li div.btn span {padding: 7px 10px;}

        .guildInfowrap .guildNoti {}
        .guild_setting .guildNoti > div {flex-direction: column;}
        .guild_setting .guildNoti > div > div {width: 100%;}


    }