@charset "utf-8";
/*-------------------------------------------------------------------------------------*
 *  게시판                                                                             *
 *-------------------------------------------------------------------------------------*/
.list_box  		 {width:100%;}
.list_tr{width:100%; font-size:0; display:flex;}
.list_tr>*{width:130px;}
.list_tr>*:nth-child(2){max-width:100%; width:calc(100% - 520px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.list_tr:not(.trfirst)>*:nth-child(2){padding-left:50px; font-weight:500; justify-content:flex-start;}
.list_title1     {background:linear-gradient(#192646 0%, #0a1125 100%); border-top:1px solid #f8de7f; border-bottom:1px solid rgba(255,255,255,0.1); color:#efefef; font-size:13px; font-weight:500; display: flex; align-items: center; justify-content:center; line-height:44px;}
.list_notice1    {background:rgba(0,0,0,0.3); border-bottom:1px solid rgba(255,255,255,0.1); color:#efefef; font-size:13px; text-align:center; display: flex; align-items: center; justify-content:center; padding:10px 5px 10px 5px; cursor:pointer;}
.list1           {background:none; border-bottom:1px solid rgba(255,255,255,0.1); color:#efefef; font-size:13px; width:130px; text-align:center; display: flex; align-items: center; justify-content:center; padding:10px 5px 10px 5px; cursor:pointer;}
.listview		 {background:rgba(255,255,255,0.02); border-bottom:1px solid rgba(255,255,255,0.1); color:#efefef; font-size:13px; width:100%; display: flex; align-items: center; padding:30px;}

/* 쪽지함 */
.list_tr2{width:100%; font-size:0; display:flex;}
.list_tr2>*{width:130px; transition:all 0.4s;}
.list_tr2>*:nth-child(2){max-width:100%; width:calc(100% - 390px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.list_tr2:not(.trfirst)>*:nth-child(2){padding-left:50px; font-weight:500; justify-content:flex-start; color:#ffffff;}
.list_title2     {background:#333; border-bottom:1px solid rgba(255,255,255,0.1); color:#efefef; font-size:13px; font-weight:500; display: flex; align-items: center; justify-content:center; line-height:33px;}
.list_notice2    {background:rgba(0,0,0,0.3); border-bottom:1px solid rgba(255,255,255,0.1); color:#efefef; font-size:13px; text-align:center; display: flex; align-items: center; justify-content:center; padding:10px 5px 10px 5px; cursor:pointer;}
.list2           {background:#111; border-bottom:solid 1px #444; color:#efefef; font-size:13px; width:130px; text-align:center; display: flex; align-items: center; justify-content:center; padding:10px 5px 10px 5px; cursor:pointer;}
.list_tr2:last-child .list2 {border-bottom: none;}

/* 충전내역/환전내역 */
.list_tr3{width:100%; font-size:0; display:flex;}
.list_tr3>*{width:calc(100% / 6); transition:all 0.4s;} /* 비율이같은 게시판일경우 사용 열숫자에 맞게 숫자만수정해주세요 */
.list_title3     {background:#333; border-top:1px solid #f8de7f; border-bottom:1px solid rgba(255,255,255,0.1); color:#efefef; font-size:13px; font-weight:500; text-align:center; display: flex; align-items: center; justify-content:center; line-height:44px;}
.list_notice3    {background:rgba(0,0,0,0.3); border-bottom:1px solid rgba(255,255,255,0.1); color:#efefef; font-size:13px; text-align:center; display: flex; align-items: center; justify-content:center; padding:10px 5px 10px 5px;}
.list3           {background:#111; border-bottom:1px solid rgba(255,255,255,0.1); color:#efefef; font-size:13px; text-align:center; display: flex; align-items: center; justify-content:center; padding:10px 5px 10px 5px;}
.list_tr3:last-child .list3 {border-bottom: none;}

.list_tr4{width:100%; font-size:0; display:flex;}
.list_tr4>*{width:130px; transition:all 0.4s;}
.list_tr4>*:nth-child(2){max-width:100%; width:calc(100% - 390px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.list_tr4:not(.trfirst)>*:nth-child(2){padding-left:50px; font-weight:500; justify-content:flex-start; color:#ffffff;}
.list_title4     {background:#333; border-top:1px solid #f8de7f; border-bottom:1px solid rgba(255,255,255,0.1); color:#efefef; font-size:13px; font-weight:500; display: flex; align-items: center; justify-content:center; line-height:44px;}
.list_notice4    {background:rgba(0,0,0,0.3); border-bottom:1px solid rgba(255,255,255,0.1); color:#efefef; font-size:13px; text-align:center; display: flex; align-items: center; justify-content:center; padding:10px 5px 10px 5px; cursor:pointer;}
.list4           {background:#111; border-bottom:1px solid rgba(255,255,255,0.1); color:#efefef; font-size:13px; width:130px; text-align:center; display: flex; align-items: center; justify-content:center; padding:10px 5px 10px 5px; cursor:pointer;}
.list_tr4:last-child .list4 {border-bottom: none;}

/* 고객센터 */
.list_tr5{width:100%; font-size:0; display:flex;}
.list_title5     {background:#333; border-bottom:1px solid rgba(255,255,255,0.1); color:#efefef; font-size:13px; font-weight:500; display: flex; align-items: center; justify-content:center; line-height:33px;}
.list_notice5    {background:rgba(0,0,0,0.3); border-bottom:1px solid rgba(255,255,255,0.1); color:#efefef; font-size:13px; text-align:center; display: flex; align-items: center; justify-content:center; padding:10px 5px 10px 5px; cursor:pointer;}
.list5           {background:#111; border-bottom:1px solid rgba(255,255,255,0.1); color:#efefef; font-size:13px; width:130px; text-align:center; display: flex; align-items: center; justify-content:center; padding:10px 5px 10px 5px; cursor:pointer;}
.list_tr5>div:nth-child(1){width:30px;}
.list_tr5>div:nth-child(2){width:100px;}
.list_tr5.trfirst>div:nth-child(3){justify-content:center;}
.list_tr5>div:nth-child(3){width:calc(100% - 470px); padding-left:50px; font-weight:500; justify-content:flex-start; color:#ffffff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.list_tr5>div:nth-child(4){width:120px;}
.list_tr5>div:nth-child(5){width:120px;}
.list_tr5>div:nth-child(6){width:100px;}
.list_tr5:last-child .list5 {border-bottom: none;}

/* 추천인내역 */
.list_tr6{width:100%; font-size:0; display:flex;}
.list_tr6>*{width:calc(100% / 5); transition:all 0.4s;} /* 비율이같은 게시판일경우 사용 열숫자에 맞게 숫자만수정해주세요 */
.list_title6     {background:linear-gradient(#192646 0%, #0a1125 100%); border-top:1px solid #f8de7f; border-bottom:1px solid rgba(255,255,255,0.1); color:#efefef; font-size:13px; font-weight:500; text-align:center; display: flex; align-items: center; justify-content:center; line-height:44px;}
.list_notice6    {background:rgba(0,0,0,0.3); border-bottom:1px solid rgba(255,255,255,0.1); color:#efefef; font-size:13px; text-align:center; display: flex; align-items: center; justify-content:center; padding:10px 5px 10px 5px;}
.list6           {background:none; border-bottom:1px solid rgba(255,255,255,0.1); color:#efefef; font-size:13px; text-align:center; display: flex; align-items: center; justify-content:center; padding:10px 5px 10px 5px;}

.write_box{width:100%;}
.write_tr{width:100%; display:flex;}
.write_title_top {border:solid 1px #444; background: #222;}
.write_title     {background:#333; border-bottom:1px solid #444; border-right: 1px solid #444; border-top:none; color:#efefef; width:200px; font-weight:500; font-size:13px; display:flex; align-items: center; justify-content: center;}
.write_basic     {background:rgba(0,0,0,0.3); border-bottom:1px solid rgba(255,255,255,0.1); color:#efefef; padding:12px 20px 12px 20px; width:calc(100% - 200px); }
.write_basic input::placeholder, .write_basic textarea::placeholder {color:#999999; transition:all 0.5s;}
.write_basic input:focus, .write_basic textarea:focus {border:1px solid #f8de7f;}

.view_box		 {width:100%;}
.view_tr		 {width:100%; font-size:0;}
.view_tr>*		 {width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.view_tr>*:nth-child(1){max-width:100%; font-size:13px; width:calc(100% - 480px); text-align:left; padding-left:20px;}
.view_tr>.view1_title{font-size:16px; font-family:'EsaManru'; font-weight:500; width:100%; text-align:left; padding-left:20px;}
.view1           {background:rgba(0,0,0,0.3); color:#efefef; display:inline-block; text-align:center; vertical-align:middle; line-height:44px;}
.view1_title           {background:linear-gradient(#192646 0%, #0a1125 100%); color:#efefef; display:inline-block; text-align:center; vertical-align:middle; line-height:48px;}
.view2           {background:#111; padding:12px 20px 10px 20px; width:100%; line-height:26px; min-height:150px; color:#efefef; font-size:12px;}
.view1_po        {background:rgba(255,255,255,0.1); color:#ffffff; padding:5px 8px 3px 8px; line-height:12px; text-align:center; display:inline-block;  font-size:12px; margin:0 5px 0 0; font-weight:300; border-radius:3px;}
.view2_l{float:left;}
.view2_r{float:left; padding:0 0 0 50px;}

.page_wrap       {float:left; width:100%; height:40px; text-align:center; clear:both;}
.page_wrap ul li {display:inline;}
.page            {background:#eee; color:#000; display:inline-block; padding:12px 17px 12px 17px;font-weight: bold;}
.pageon          {background:#ff1616; color:#ffffff; display:inline-block; padding:12px 17px 12px 17px; font-weight:500;font-weight: bold;}

.info_wrap       {float:left; width:100%; padding:15px 0 20px 0; border-radius:0px;}
.info1           {float:left; width:100%; line-height:28px; color:#ffffff; padding:0 20px 0 20px; font-size:18px; font-weight:500; letter-spacing:-1pt; font-family:'EsaManru';}
.info2           {float:left; width:100%; line-height:32px; color:#fff600; padding:5px 20px 0 20px; font-size:16px; font-weight:500; letter-spacing:-1pt; font-family:'EsaManru';}
.info3           {float:left; width:100%; line-height:26px; color:#ffffff; padding:5px 20px 0 23px; font-size:13px; font-weight:300; font-family:'EsaManru';}

@media (hover: hover) {


}

@media screen and (max-width:1280px) {
    .list_tr>*{width:110px;}
    .list_tr>*:nth-child(4){display:none;}
    .list_tr>*:nth-child(2){width:calc(100% - 330px);}
    .list_tr:not(.trfirst)>*:nth-child(2){padding-left:30px;}
    .list_tr4>*{width:110px;}
    .list_tr4>*:nth-child(2){width:calc(100% - 330px);}
    .list_tr4:not(.trfirst)>*:nth-child(2){padding-left:30px;}
}

@media screen and (max-width:1024px) {

    .list_tr3>*{width:calc(100% / 5);}
    .list_tr3>*:nth-child(1){display:none;}


    .write_tr {flex-wrap: wrap;}
    .write_title     {width:30%;}
    .write_basic     {width:70%; padding:8px 12px 8px 12px;}
    .table-bbs .hidden-1024{display:none} /* 수정 */


    .page_wrap ul li span{padding:10px 15px 10px 15px;}
}

@media screen and (max-width:768px) {
    .list_tr>*{width:100px;}
    .list_tr>*:nth-child(3){display:none;}
    .list_tr>*:nth-child(2){width:calc(100% - 200px);}
    .list_tr:not(.trfirst)>*:nth-child(2){padding-left:10px;}

    .list_tr2:not(.trfirst)>*:nth-child(2){padding-left:10px;}

    .list_tr4>*{width:100px;}
    .list_tr4>*:nth-child(1){display:none;}
    .list_tr4>*:nth-child(2){width:calc(100% - 100px);}
    .list_tr4>*:nth-child(3){display:none;}
    .list_tr4:not(.trfirst)>*:nth-child(2){padding-left:10px;}

    .list_tr5>div:nth-child(3){width:calc(100% - 150px); padding-left:10px;}
    .list_tr5>div:nth-child(2){display:none;}
    .list_tr5>div:nth-child(5){display:none;}
    .list_tr5>div:nth-child(6){display:none;}

    .list_tr6>*{width:calc(100% / 4);}
    .list_tr6>*:nth-child(1){display:none;}
    .write_tr>*{width:100%; }
    .write_title {padding:12px 12px 5px 12px; justify-content:flex-start;}
    .write_basic{}
    .write_basic input:not([type="checkbox"]){width:100%;}
    .write_basic label{font-size:14px; width:25%; display:inline-block;}
    .write_basic input.input1_view{margin:2px 0 0 0;}

    .view_tr>*{width:33.33333%; text-align:left; font-size:13px; padding-left:5px;}
    .view_tr>*:nth-child(1){width:100%; padding-left:5px;}

    .view1:first-child{border-bottom:1px solid rgba(255,255,255,0.1);}
    .view2           {padding:5px;}
    .view2_l{width:100%; text-align:center;}
    .view2_l img{width:100%;}
    .view2_r{width:100%; padding:0 0 0 0px;}

}

@media screen and (max-width:600px) {
    .list_tr>*:nth-child(1){display:none;}
    .list_tr2>*{width:120px;}
    .list_tr2>*:nth-child(1){width:50px;}
    .list_tr2>*:nth-child(2){width:calc(100% - 170px);}
    .list_tr2>*:nth-child(3){display:none;}
    .list_tr>*:nth-child(2){width:calc(100% - 100px);}

    .list_tr4>*:nth-child(4){display:none;}
    .list_tr4>*:nth-child(2){width:100%;}

    .info3           {font-size:12px;}

    .list_box{overflow-x:auto;}
    .list_tr3{min-width:600px;}
}

@media screen and (max-width:480px) {
    .list_tr>*{width:90px;}
    .list_tr>*:nth-child(2){width:calc(100% - 90px);}
    .list_tr:not(.trfirst)>*:nth-child(2){padding-left:10px;}
    .list_tr5>div:nth-child(3){width:calc(100% - 120px);}
    .list_tr5>div:nth-child(4){width:90px;}

}
@media screen and (max-width:480px) {

}

/*-------------------------------------------------------------------------------------*
 *  버튼                                                                               *
 *-------------------------------------------------------------------------------------*/
.btn1_1         {display:inline-block; text-align:center; border-radius:5px; color:#ffffff; font-size:12px; letter-spacing:0pt; font-weight:500; text-shadow:1px 1px 1px rgba(0,0,0,0.3); box-shadow:rgba(0,0,0,0.0) 2px 2px 2px -1px;}
.btn1_2         {display:inline-block; text-align:center; border-radius:5px; color:#ffffff; font-size:12px; letter-spacing:0pt; font-weight:500; text-shadow:1px 1px 1px rgba(0,0,0,0.3); box-shadow:rgba(0,0,0,0.0) 2px 2px 2px -1px;}
.btn2_1         {display:inline-block; text-align:center; color:#ffffff; font-size:12px; letter-spacing:0pt; font-weight:500; text-shadow:1px 1px 1px rgba(0,0,0,0.3); box-shadow:rgba(0,0,0,0.0) 2px 2px 2px -1px;padding: 0px 20px;font-weight: bold;}
.btn2_2         {display:inline-block; text-align:center; color:#ffffff; font-size:12px; letter-spacing:0pt; font-weight:500; text-shadow:1px 1px 1px rgba(0,0,0,0.3); box-shadow:rgba(0,0,0,0.0) 2px 2px 2px -1px;padding: 0px 20px;font-weight: bold;}
.btn3_1         {display:inline-block; text-align:center; color:#ffffff; font-size:16px; letter-spacing:-1pt; font-weight:500; text-shadow:1px 1px 1px rgba(0,0,0,0.3); box-shadow:rgba(0,0,0,0.0) 2px 2px 2px -1px;padding: 0px 20px;font-weight: bold;}
.btn3_2         {display:inline-block; text-align:center; border-radius:5px; color:#ffffff; font-size:16px; letter-spacing:-1pt; font-weight:500; text-shadow:1px 1px 1px rgba(0,0,0,0.3); box-shadow:rgba(0,0,0,0.0) 2px 2px 2px -1px;}

.btn_wrap_right        {float:left; width:100%; text-align:right;}
.btn_wrap_right ul li  {display:inline;}
.btn_wrap_center       {float:left; width:100%; text-align:center;}
.btn_wrap_center ul li {display:inline;}

.btn1_1         {background:linear-gradient(#f3c379 0%, #946331 100%); min-width:80px; min-height:34px; padding:0 15px 0 15px; line-height:34px;}
.btn1_1:hover   {background:linear-gradient(-45deg, #f3c379 0%, #946331 100%);}

.btn1_2         {background:linear-gradient(#797979 0%, #404040 100%); min-width:80px; min-height:34px; padding:0 15px 0 15px; line-height:34px;}
.btn1_2:hover   {background:linear-gradient(-45deg, #797979 0%, #404040 100%);}

.btn2_1         {background:#cc001b; height:38px; line-height:38px;}
.btn2_1:hover   {background:linear-gradient(-45deg, #f3c379 0%, #946331 100%);}

.btn2_2         {background:#555; height:38px; line-height:38px;}
.btn2_2:hover   {background:linear-gradient(-45deg, #797979 0%, #404040 100%);}

.btn3_1         {background:#cc001b; height:38px; line-height:38px;}
.btn3_1:hover   {background:linear-gradient(-45deg, #f3c379 0%, #946331 100%);}

.btn3_2         {background:linear-gradient(#797979 0%, #404040 100%); min-width:220px; height:50px; line-height:50px;}
.btn3_2:hover   {background:linear-gradient(-45deg, #797979 0%, #404040 100%);}

.btn2_3         {display:inline-block; text-align:center; border-radius:3px; color:#ffffff; font-size:12px; letter-spacing:0pt; font-weight:500; text-shadow:1px 1px 1px rgba(0,0,0,0); box-shadow:rgba(0,0,0,0.0) 2px 2px 2px -1px;}
.btn2_4         {display:inline-block; text-align:center; border-radius:3px; color:#ffffff; font-size:12px; letter-spacing:0pt; font-weight:500; text-shadow:1px 1px 1px rgba(0,0,0,0); box-shadow:rgba(0,0,0,0.0) 2px 2px 2px -1px;}

.btn2_3         {background:linear-gradient(#a7af0f  0%, #11531f 100%); min-width:110px; height:40px; line-height:40px;}
.btn2_3:hover   {background:linear-gradient(-45deg, #a7af0f 0%, #11531f 100%);}

.btn2_4         {background:linear-gradient(#af0f0f 0%, #531111 100%); min-width:110px; height:40px; line-height:40px;}
.btn2_4:hover   {background:linear-gradient(-45deg, #af0f0f 0%, #531111 100%);}

.division1      {background:rgba(255,255,255,0.1); display:inline-block; text-align:center; min-width:100px; padding:6px 8px 6px 8px; line-height:12px;  color:#ffffff; font-size:12px; font-weight:300; border-radius:5px;}
.division2      {background:#f8de7f; display:inline-block; text-align:center; min-width:100px; padding:6px 8px 6px 8px; line-height:12px;  color:#000000; font-size:12px; font-weight:300; border-radius:5px;}
.division3      {background:linear-gradient(#f3c379 0%, #946331 100%); display:inline-block; text-align:center; min-width:60px; padding:4px 8px 4px 8px; line-height:12px;  color:#ffffff; font-size:12px; font-weight:300; border-radius:0 20px 20px 0;}

.write_basic_btn{display:inline-block; margin:0 0 0 10px;}
[class*="btn1_"] {margin: 0 0 2px;}

@media screen and (max-width:1250px) {
    .write_basic_btn{margin:5px 0 0 0;}

}
@media screen and (max-width:768px) {
    .display_flex{display:flex; flex-wrap: nowrap; align-items: center; justify-content: center;}
    .display_flex li{width:100%; margin:0 2px 0 2px;}

    [class*="btn2_"] {min-width:100%;}
    /*[class*="btn3_"] {min-width:100%;}*/
    .division1{min-width:70px;}
    .division2{min-width:70px;}
    .division3{min-width:70px;}
}

.btn1_1:hover , .btn1_2:hover , .btn2_1:hover , .btn2_2:hover , .btn3_1:hover , .btn3_2:hover {
    -webkit-animation: mouseover03 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
    animation: mouseover03 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}


@keyframes mouseover03 {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }
}

/*-------------------------------------------------------------------------------------*
 *  탭                                                                                 *
 *-------------------------------------------------------------------------------------*/
.tab_wrap       {float:left; margin:10px 0 0 0; transition:all 0.5s;}
.tab_wrap ul li {float:left; margin:0 1px 3px 0;}
.tab            {background:rgba(255,255,255,0.04) url(../images/header_line.jpg) center bottom no-repeat; background-size:100% 2px; width:110px; height:40px; line-height:40px; text-align:center; display:inline-block; color:#989898; font-weight:400; border-radius:5px; transition:all 0.5s;}
.tab:hover      {background-size:100% 100%; color:#000000;}
.tabon          {background:url(../images/header_line.jpg) center top no-repeat; background-size:100% 100%; width:110px; height:40px; line-height:40px; text-align:center; display:inline-block; color:#000000; font-weight:400; border-radius:5px; text-shadow: 1px 0px 0px rgba(255,255,255, 0.6);}

.tab:hover img{filter:brightness(100);}

@media screen and (max-width:1024px) {
}

@media screen and (max-width:768px) {
    .tab_wrap{width:100%; margin:0;}
    .tab_wrap ul li{width:33%; margin:0 0.5% 0.5% 0;}
    .tab_wrap ul li:nth-child(3n){margin:0 0 0.5% 0;}
    .tab{width:100%;}
    .tabon{width:100%;}

}

/*-------------------------------------------------------------------------------------*
 *  폰트                                                                               *
 *-------------------------------------------------------------------------------------*/
.font01 {color:#ffffff; font-weight:500;}
.font02 {color:#000000; font-weight:500;}
.font03 {color:#929292;}
.font04 {color:#72b12c;}
.font05 {color:#ffcf00; font-weight:500;}
.font06 {color:#f8de7f; font-weight:500;}
.font07 {color:#fee599; font-weight:500;}
.font08 {color:#828282; font-weight:500;}
.font09 {color:#0048ff; font-weight:500;}
.font10 {color:#fee900; font-weight:500;}

.font11 {color:#fff600; font-weight:500; font-size:16px; font-family:'EsaManru';}
.font12 {color:#eaeaea; font-weight:500; font-size:16px; font-family:'EsaManru';}
.font13 {color:#ffffff; font-weight:500; font-size:16px; font-family:'EsaManru';}
.font14 {color:#ff0000; font-weight:500; font-size:20px; font-family:'EsaManru';}

/*-------------------------------------------------------------------------------------*
 *  인풋                                                                               *
 *-------------------------------------------------------------------------------------*/
.input1       {background-color:#111; border:1px solid #444; padding:4px 0 4px 5px; color:#ffffff; font-size:13px; border-radius:3px; height:34px; transition:all 0.5s;}
.input2       {background-color:#111; border:1px solid #444; padding:4px 0 4px 5px; color:#ffffff; font-size:13px; border-radius:3px; transition:all 0.5s;}
.input3       {background-color:#111; border:1px solid #444; padding:10px 5px 10px 5px; color:#ffffff; font-size:13px; border-radius:3px; transition:all 0.5s; width:100%; text-align:right;}


.select       {background-color:inherit; padding:0 10px; color:#ffffff; height:40px; text-align:center; transition:all 0.5s;}