@charset "utf-8";
:root {
  --border-basic: #222222; /* 게시판 공통 보더색상 */
  --bg-basic: #333333; /* 게시판 공통 배경색상 */
  --bg-title: #222222; /* 게시판 타이틀 배경색상 */
  --color1-basic: #fff; /* 게시판 공통 글씨색상 */
  --color2-basic: #28ffbb; /* 게시판 공통 글씨색상 */
  --border-color1: #3a3a3a;
  --border-color2: #2c2c2c;
  --border-color3: #433737;
  --border-color4: #e0adad;
  --sport-border-color1: rgba(255,255,255,0.1);
  --input-border-color1: #121212;
  --normal-color: #121212;
  --title-color: #ffffff;
  --bgcolor1: #191919;
  --bgcolor2: #252525;
  --bgcolor3: #ffffff;
  --bgcolor4: #111111;
  --bgpointcolor1: #ff0000;
  --bgpointcolor2: #fff600;
  --bgalphacolor1: rgba(255,255,255,0.1);
  --bggradiuntcolor1: linear-gradient(#2b2b2b 0%, #222222 100%);
  --bggradiuntcolor2: linear-gradient(#6b6b6b 0%, #404040 100%);
  --bggradiuntcolor3: linear-gradient(#4e4e4e 0%, #3c3c3c 100%);
  --bgtitleimg1: url(../images/bg01.jpg) center top no-repeat;
  --bgtitleimg2: url(../images/bg011.jpg) center top no-repeat;
}

/*-------------------------------------------------------------------------------------*
 *  게시판                                                                             *
 *-------------------------------------------------------------------------------------*/
.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:var(--bg-title); border-bottom:1px solid var(--border-basic); color:var(--color1-basic); font-size:15px; font-weight:500; display: flex; align-items: center; justify-content:center; line-height:60px;}
.list_notice1    {background:var(--bg-basic); border-bottom:1px solid var(--border-basic); color:var(--color1-basic); font-size:15px; text-align:center; display: flex; align-items: center; justify-content:center; padding:15px 5px 15px 5px; cursor:pointer;}
.list1           {background:var(--bg-basic); border-bottom:1px solid var(--border-basic); color:var(--color1-basic); font-size:15px; width:130px; text-align:center; display: flex; align-items: center; justify-content:center; padding:15px 5px 15px 5px; cursor:pointer;}
.listview		 {background:var(--bgcolor4); border-bottom:1px solid var(--border-basic); color:var(--color1-basic); font-size:15px; width:100%; display: flex; align-items: center; padding:30px;}

.list_tr2{width:100%; font-size:0; display:flex;}
.list_tr2>*{width:calc(100% / 4);} /* 비율이같은 게시판일경우 사용 열숫자에 맞게 숫자만수정해주세요 */
.list_tr2:not(.trfirst)>*:nth-child(2){padding-left:15px; /*font-family:'EsaManru';*/ font-weight:500; color:#222222; font-size:16px; letter-spacing:1px; justify-content:flex-start;}
.list_title2     {background:var(--bg-title); border-bottom:1px solid var(--border-basic); color:var(--color1-basic); font-size:15px; font-weight:500; display:inline-block; text-align:center; display: flex; align-items: center; justify-content:center; line-height:60px;}
.list_notice2    {background:var(--bg-basic); border-bottom:1px solid var(--border-basic); color:var(--color1-basic); font-size:15px; text-align:center; display: flex; align-items: center; justify-content:center; padding:15px 5px 15px 5px;}
.list2           {background:var(--bg-basic); border-bottom:1px solid var(--border-basic); color:var(--color1-basic); font-size:15px; display: flex; align-items: center; justify-content:center; padding:15px 5px 15px 5px;}

.list_tr3{width:100%; font-size:0; display:flex;}
.list_tr3>*{width:calc(100% / 6); transition:all 0.4s;} /* 비율이같은 게시판일경우 사용 열숫자에 맞게 숫자만수정해주세요 */
.list_title3     {background:var(--bg-title); border-bottom:1px solid var(--border-basic); color:var(--color1-basic); font-size:15px; font-weight:500; text-align:center; display: flex; align-items: center; justify-content:center; line-height:60px;}
.list_notice3    {background:var(--bg-basic); border-bottom:1px solid var(--border-basic); color:var(--color1-basic); font-size:15px; text-align:center; display: flex; align-items: center; justify-content:center; padding:15px 5px 15px 5px;}
.list3           {background:var(--bg-basic); border-bottom:1px solid var(--border-basic); color:var(--color1-basic); font-size:15px; text-align:center; display: flex; align-items: center; justify-content:center; padding:15px 5px 15px 5px;}

.list_tr4{width:100%; font-size:0; display:flex;}
/*.list_tr4:not(.trfirst):hover>*{background:transparent;}*/
.list_tr4>*{width:130px;}
.list_tr4>*:nth-child(6){width:80px;}
.list_tr4>*:nth-child(2){display:none;}
.list_tr4>*:nth-child(3){max-width:100%; width:calc(100% - 470px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.list_tr4>*:nth-child(4){overflow:hidden; text-overflow:ellipsis; white-space:nowrap; /*display:block;*/ text-align:center;}
.list_tr4:not(.trfirst)>*:nth-child(3){padding-left:0; /*font-family:'EsaManru';*/ font-weight:300;  color:#222222; font-size:16px; justify-content:flex-start;}
.list_title4     {background:var(--bg-title); border-bottom:1px solid var(--border-basic); color:#28ffbb; font-size:15px; font-weight:500; display: flex; align-items: center; justify-content:center; line-height:60px;}
.list_notice4    {background:var(--bg-basic); border-bottom:1px solid var(--border-basic); color:var(--color1-basic); font-size:15px; text-align:center; display: flex; align-items: center; justify-content:center; padding:12px 5px 11px 5px; cursor:pointer;}
.list4           {background:#333333; border-bottom:1px solid var(--border-basic); color:#28ffbb; font-size:15px; width:130px; text-align:center; display: flex; align-items: center; justify-content:center; padding:15px 5px 15px 5px; cursor:pointer;}
.list_notice4 a { max-width: 100%; overflow: hidden; text-overflow: ellipsis; text-align:left;display:flex;}
.list_notice4 a span {
	overflow:hidden;
	text-overflow:ellipsis;
}
.list_notice4 a div {
    float: right;
    margin-left: 20px;
    font-size: 14px;
}
.list_notice4 a div span {
    color: #28ffbb;
    margin-left: 10px;
}
.list_notice4 a div img {
	width: 40px;
	height: 19px;
	vertical-align: top;
	margin-right: 10px;
}
.list_tr4 > *:nth-child(4) {
	width:170px;
}
.list_tr4 > *:nth-child(5) {
	width: 170px;
}
.list_tr4 > *:nth-child(6) {
	display: none;
}
.list_tr4 > .list_notice4 > .list_notice4_m {
	display: none;
}
.list_tr4 > .list_notice4 .bbs_lv {
	margin-right:5px;
}

.viewfont{color:#28ffbb;margin: 0 5px;}
.viewfont:nth-child(2){margin-left:15px;}
.viewhot{width:35px; height:22px; line-height:22px; border-radius:5px; background:#ff007e; font-size:12px; color:#ffffff;}

.write_box{width:100%;}
.write_tr{width:100%; display:flex;}
.write_title_top {}
.write_title     {background:var(--bg-basic); color:var(--color1-basic); width:200px; font-size:16px; display:flex; align-items: center; justify-content: center; /*font-family:'EsaManru';*/ font-weight:300; }  
.write_basic     {background:var(--bg-basic); color:var(--color2-basic); padding:12px 20px 12px 20px; width:calc(100% - 200px); }
.write_basic textarea{ padding:5px 0 5px 15px;}
.write_basic input::placeholder, .write_basic textarea::placeholder {color:#a3a3a3; transition:all 0.5s;}
.write_basic input:focus, .write_basic textarea:focus {border:1px solid #28ffbb;}

.view_box		 {width:100%; background-color: #333333;}
.view_tr		 {width:100%; font-size:0; position:relative;padding: 10px 20px 10px 30px;}
.view_tr>*		 {width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.view_tr>*:nth-child(1){max-width:100%; font-size:16px; width:calc(100% - 0px); text-align:left; padding-left:0px;}
.view_tr>.view1_title{font-size:14px; font-family:'GmarketSans'; font-weight:500; width:100%; text-align:left; padding-left:20px;}
.view1           {background:var(--bg-basic); color:var(--color1-basic); display:inline-block; text-align:center; vertical-align:middle; line-height:50px; font-weight:500;}
.view1_title           {background:var(--bgtitleimg1); color:var(--color2-basic); display:inline-block; text-align:center; vertical-align:middle; line-height:48px;}
.view2           {background:var(--bg-basic); border-bottom:1px solid var(--border-basic); padding:0px 20px 10px 20px; width:100%; line-height:26px; min-height:150px; color:var(--color1-basic); font-size:12px;}
.view1_po        {color:#ccc; padding:5px 8px 3px 8px; line-height:12px; text-align:center; display:inline-block;  font-size:14px; margin:0 5px 0 0; font-weight:300; border-radius:2px;}
.view2_l{float:left;}
.view2_r{float:left; padding:0 0 0 50px;}
.view_inner{background:none; padding:0px 10px 10px 10px; line-height:32px; font-size:14px; transition:all 0.5s;}
.view_inner textarea{margin-top:20px;}
.icon_plus{float:right; text-align:right; padding:0 20px 0 0; width:300px; background:var(--bg-basic); line-height:60px;}

.page_wrap       {float:left; width:100%; height:40px; text-align:center;}
.page_wrap ul li {display:inline;}
.page_wrap .pagination{display:inline-flex;justify-content:center;}
.page            {background:#272727; color:var(--color2-basic); display:inline-block; padding:12px 17px 12px 17px; border-radius:5px;}
.pageon          {background:#555555; color:#28ffbb; display:inline-block; padding:12px 17px 12px 17px; font-weight:500; border-radius:5px;}

.info_wrap       {background:var(--bg-basic); float:left; width:100%; padding:15px 0 20px 0; border-radius:2px;} 
.info1           {float:left; width:100%; line-height:28px; color:#222222; padding:0 20px 0 20px; font-size:18px; font-weight:500; letter-spacing:-1pt;}
.info2           {float:left; width:100%; line-height:32px; color:#5837ff; padding:5px 20px 0 20px; font-size:16px; font-weight:500; letter-spacing:-1pt;}
.info3           {float:left; width:100%; line-height:26px; color:#545454; padding:5px 20px 0 23px; font-size:13px; font-weight:400;}

.topnotice{background-color:#555;}
.topnotice .list_notice4{background:unset;}

@media screen and (max-width:1440px) {
	.write_title	{width:30%;}
	.write_basic     {width:70%;}
}
@media screen and (max-width:1024px) {
	.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_tr3>*{width:calc(100% / 5);}
	.list_tr3>*:nth-child(1){display:none;}
	
	.list_tr4>*{width:110px;}
	/*.list_tr4>*:nth-child(5){display:none;}*/
	.list_tr4>*:nth-child(3){width:calc(100% - 330px);}
	.list_tr4>*:nth-child(3)>a{text-align:left;}
	.list_tr4:not(.trfirst)>*:nth-child(3){padding-left:10px;}
	.list_tr:not(.trfirst)>*:nth-child(2){padding-left:30px;}

	.write_tr {flex-wrap: wrap;}
	.write_title     {width:30%;}  
	.write_basic     {width:70%; padding:8px 12px 8px 12px;} 
										 

	.page_wrap ul li span{padding:10px 15px 10px 15px;}
	.view_inner{padding:15px 20px 15px 20px; line-height:28px; font-size:14px;}
}

@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_tr3>*{width:calc(100% / 4);}
	.list_tr3>*:nth-child(6){display:none;}
	
	.list_tr4>*{width:70px;font-size:16px !important;}
	.list_tr4>*:nth-child(1){display:none;}
	.list_tr4>*:nth-child(2){display:none;}
	.list_tr4>*:nth-child(3){width:calc(100% - 170px);}
	.list_tr4>*:nth-child(4){display:none;}
	.list_tr4>*:nth-child(5){width:80px;}
	.list_tr4:not(.trfirst)>*:nth-child(2){padding-left:10px; font-size:14px;}
	.list_tr4>.list_notice4>.list_notice4_m{display:block;margin:10px 0 0 0;}
	.list_tr4:not(.trfirst)>*:nth-child(3) {flex-direction:column;align-items:flex-start;}
	.list_tr4>*:nth-child(3)>a{}

	.write_tr>*{width:100%; }
	.write_title {padding:12px 12px 5px 12px; font-size:14px; justify-content:flex-start;}
	.write_basic{border-left:1px solid var(--border-basic); border-right:1px solid var(--border-basic);}
	.write_basic input{width:100%;}
	
	.page_wrap ul li span{padding:10px 14px 10px 14px;}
	
	.view_tr{padding:10px 20px 10px 20px;}
	.view_tr>*{width:auto; text-align:left; font-size:12px; padding-left:5px; line-height:30px;}
	.view_tr>*:nth-child(1){width:100%; padding-left:0px; font-size:16px;}
	.view1_po{font-size:12px;}
	
	.view2           {padding:5px; font-size:14px;}
	.view2_l{width:100%; text-align:center;}
	.view2_r{width:100%; padding:0 0 0 0px;}

	.view_inner{line-height:24px; font-size:12px; padding: 0;padding-bottom:10px;}
	.icon_plus{width:auto; position:absolute; right:0; top:10px;}
	.icon_plus img{width:20px;}
	
	.info1{font-size:14px; padding:0 10px 0 10px;}
	.info2{font-size:14px; padding:0 10px 0 10px;}
	.info3{font-size:12px; padding:0 10px 0 10px;}
	[class^="list"] {font-size:12px;}
	[class^="list_notice"] {font-size:14px;}
	[class^="list_title"] {line-height:50px; font-size:14px;}
	.list_tr:not(.trfirst)>*:nth-child(2),.list_tr2:not(.trfirst)>*:nth-child(2),.list_tr4:not(.trfirst)>*:nth-child(2){font-size:12px; padding:0 0 0 5px;}
}

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

	/*.list_tr4>*:nth-child(5){display:none;}*/
	.list_tr4>*:nth-child(6){display:none;}
	.list_tr4>*:nth-child(3){width:calc(100% - 70px);}
	
}

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

}


/*-------------------------------------------------------------------------------------*
 *  버튼                                                                               *
 *-------------------------------------------------------------------------------------*/
.btn1_1         {display:inline-block; text-align:center; border-radius:2px; color:#000000; font-size:13px; letter-spacing:0pt; font-weight:; text-shadow:2px 0 3px rgba(0,0,0,0.0); box-shadow:rgba(0,0,0,0.3) 2px 2px 2px -1px; /*font-family:'EsaManru';*/ font-weight:300; }
.btn1_2         {display:inline-block; text-align:center; border-radius:2px; color:#000000; font-size:13px; letter-spacing:0pt; font-weight:; text-shadow:2px 0 3px rgba(0,0,0,0.0); box-shadow:rgba(0,0,0,0.3) 2px 2px 2px -1px; /*font-family:'EsaManru';*/ font-weight:300; }
.btn2_1         {display:inline-block; text-align:center; border-radius:2px; color:#000000; font-size:14px; letter-spacing:0pt; font-weight:; text-shadow:2px 0 3px rgba(0,0,0,0.0); box-shadow:rgba(0,0,0,0.3) 2px 2px 2px -1px; /*font-family:'EsaManru';*/ font-weight:300; }
.btn2_2         {display:inline-block; text-align:center; border-radius:2px; color:#000000; font-size:14px; letter-spacing:0pt; font-weight:; text-shadow:2px 0 3px rgba(0,0,0,0.0); box-shadow:rgba(0,0,0,0.3) 2px 2px 2px -1px; /*font-family:'EsaManru';*/ font-weight:300; }
.btn3_1         {display:inline-block; text-align:center; border-radius:3px; color:#000000; font-size:16px; letter-spacing:0pt; font-weight:; text-shadow:2px 0 3px rgba(0,0,0,0.0); box-shadow:rgba(0,0,0,0.3) 2px 2px 2px -1px; /*font-family:'EsaManru';*/ font-weight:700; }
.btn3_2         {display:inline-block; text-align:center; border-radius:3px; color:#000000; font-size:16px; letter-spacing:0pt; font-weight:; text-shadow:2px 0 3px rgba(0,0,0,0.0); box-shadow:rgba(0,0,0,0.3) 2px 2px 2px -1px; /*font-family:'EsaManru';*/ font-weight:700; }

.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:#ff007e; border:1px solid #ff007e; min-width:85px; min-height:34px; padding:0 15px 0 15px; line-height:34px;}
.btn1_1:hover   {background:none; border:1px solid #ff007e; color:#ff007e;}

.btn1_2         {background:#5f5f5f; border:1px solid #5f5f5f;  min-width:85px; min-height:34px; padding:0 15px 0 15px; line-height:34px;}
.btn1_2:hover   {background:none; border:1px solid #5f5f5f; color:#8f8f8f;}

.btn2_1         {background:#28ffbb; border:1px solid #28ffbb; min-width:100px; height:34px; line-height:34px;}
.btn2_1:hover   {background:#fff; border:1px solid #fff; color:#000;}

.btn2_2         {background:#5f5f5f; border:1px solid #5f5f5f; min-width:100px; height:34px; line-height:34px;}
.btn2_2:hover   {background:none; border:1px solid #5f5f5f; color:#8f8f8f;}

.btn3_1         {background:#ff007e; border:2px solid #ff007e; min-width:200px; height:48px; line-height:48px;}
.btn3_1:hover   {background:none; border:2px solid #ff007e; color:#ff007e;}

.btn3_2         {background:#5f5f5f; border:2px solid #5f5f5f; min-width:200px; height:48px; line-height:48px;}
.btn3_2:hover   {background:none; border:2px solid #5f5f5f; color:#8f8f8f;}




.division1      {background:#888888; display:inline-block; text-align:center; min-width:100px; padding:6px 8px 6px 8px; line-height:12px;  color:#ffffff; font-size:12px; font-weight:500; border-radius:5px;margin-right: 10px;}
.division2      {background:#b090da; display:inline-block; text-align:center; min-width:100px; padding:6px 8px 6px 8px; line-height:12px;  color:#ffffff; font-size:12px; font-weight:500; border-radius:5px;margin-right: 10px;}
.division3      {background:#28ffbb; display:inline-block; text-align:center; min-width:80px; padding:9px 8px 9px 8px; line-height:12px;  color:#000000; font-size:14px; font-weight:500; border-radius:5px;margin-right: 0px;}

.icon_a1      {background:#ff63a7; display:inline-block; text-align:center; min-width:70px; padding:8px 8px 8px 8px; line-height:12px; color:#ffffff; font-size:12px; font-weight:500; border-radius:2px;}
.icon_a2      {background:#8863ff; display:inline-block; text-align:center; min-width:70px; padding:8px 8px 8px 8px; line-height:12px; color:#ffffff; font-size:12px; font-weight:500; border-radius:2px;}

.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%; font-size:12px}
	[class*="btn3_"] {min-width:100%; font-size:14px}
	.division1{min-width:60px;}
	.division2{min-width:60px;}
	.division3{min-width:60px; font-size:12px; padding:4px 8px 5px 8px;}

}

.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);
			opacity:0.6;
  }
  100% {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
			opacity:1;
  }
}



/*-------------------------------------------------------------------------------------*
 *  탭                                                                                 *
 *-------------------------------------------------------------------------------------*/
.tab_wrap {
	float: left;
	margin: 0 0 0 0;
	transition: all 0.5s;
	padding: 0 20px 0 20px;
	height: 36px;
	background: #333333;
	width: 100%;
}
.tab_wrap ul li {float:left; margin:2px 0 2px 0;}
.tab {
	background: #333333;
	min-width: 30px;
	height: 34px;
	line-height: 34px;
	padding: 0 20px 0 20px;
	text-align: center;
	display: inline-block;
	color: #fff;
	font-size: 16px;
	border-radius: 0px;
	font-family: 'EsaManru';
	font-weight: 300;
	white-space: nowrap;
}
.tab:hover      {background:none; color:#28ffbb;}
.tabon {
	background: none;
	min-width: 30px;
	height: 34px;
	line-height: 34px;
	padding: 0 20px 0 20px;
	text-align: center;
	display: inline-block;
	color: #28ffbb;
	font-size: 16px;
	border-radius: 0px;
	font-family: 'EsaManru';
	font-weight: 300;
	white-space: nowrap;
}
.tabon1 {
	background: #333333;
	width: 100%;
	min-width: 30px;
	/*height: 180px;*/
	line-height: 34px;
	padding: 20px 20px 20px 30px;
	text-align: left;
	display: inline-block;
	color: #fff;
	font-size: 16px;
	border-radius: 0px;
	font-family: 'EsaManru';
	font-weight: 300;
	white-space: normal;
	margin-top: 10px;
}

.tab_wrap2       {float:left; margin:0 0 0 0; transition:all 0.5s; padding:0;}
.tab_wrap2 ul li {float:left; margin:0 5px 3px 0;}
.tab2            {background:#ffffff; min-width:30px; height:38px; line-height:40px; padding:0 15px 0 15px; text-align:center; display:inline-block; color:#787878; font-size:13px; border-radius:0px; /*font-family:'EsaManru';*/ font-weight:300;  white-space:nowrap;}
.tab2:hover      {background:#dcdceb; color:#787878;}
.tabon2          {background:#5837ff; min-width:30px; height:38px; line-height:40px; padding:0 15px 0 15px; text-align:center; display:inline-block; color:#ffffff; font-size:13px; border-radius:0px; /*font-family:'EsaManru';*/ font-weight:300;  white-space:nowrap;}

.tv_tab_wrap       {float:left; margin:0 0 0 0; transition:all 0.5s; padding:0;}
.tv_tab_wrap ul li {float:left; margin:0 5px 3px 0;}
.tv_tab            {background:#ffffff; min-width:30px; height:44px; line-height:44px; padding:0 20px 0 20px; text-align:center; display:inline-block; color:#787878; font-size:14px; border-radius:0px; /*font-family:'EsaManru';*/ font-weight:300;  white-space:nowrap;}
.tv_tab:hover      {background:#ffffff; color:#5837ff;}
.tv_tabon          {background:#5837ff; min-width:30px; height:44px; line-height:44px; padding:0 20px 0 20px; text-align:center; display:inline-block; color:#ffffff; font-size:14px; border-radius:0px; /*font-family:'EsaManru';*/ font-weight:300;  white-space:nowrap;}

@media screen and (max-width:768px) {
	.tab_wrap{width:100%; margin:0; background:#333333; padding:0 5px 0 5px;}
	.tab_wrap ul li{width:auto; margin:0 0.5% 0.5% 0;}
	.tab_wrap ul li:nth-child(3n){margin:0 0 0.5% 0;}
	.tab{width:100%; border:none; font-weight:400; font-size:18px; letter-spacing:-1pt;  height:34px; line-height:34px; padding:0 5px 0 5px;}
	.tabon{width:100%; border:none; font-weight:400; font-size:18px; letter-spacing:-1pt;  height:34px; line-height:34px; padding:0 5px 0 5px;}

	.tab_wrap2{width:100%; margin:0; background:transparent; padding:0 5px 0 5px;}
	.tab_wrap2 ul li{width:24.625%; margin:0 0.5% 0.5% 0;}
	.tab_wrap2 ul li:nth-child(4n){margin:0 0 0.5% 0;}
	.tab2{width:100%; border:1px solid #ffffff; font-weight:400; font-size:12px; letter-spacing:-1pt;  height:44px; line-height:44px; padding:0 5px 0 5px;}
	.tabon2{width:100%; border:1px solid #b090da; font-weight:400; font-size:12px; letter-spacing:-1pt;  height:44px; line-height:44px; padding:0 5px 0 5px;}

	.tv_tab_wrap{width:100%;}
	.tv_tab_wrap ul li{width:23.5%; margin:0 2% 0.5% 0;}
	.tv_tab_wrap ul li:nth-child(4n){margin:0 0 0.5% 0;}
	.tv_tab{width:100%; border:1px solid #ffffff; font-weight:400; font-size:12px; letter-spacing:-1pt; padding:0 5px 0 5px;}
	.tv_tabon{width:100%; border:1px solid #5837ff; font-weight:400; font-size:12px; letter-spacing:-1pt; padding:0 5px 0 5px;}	
}

/*-------------------------------------------------------------------------------------*
 *  폰트                                                                               *
 *-------------------------------------------------------------------------------------*/
.font01 {color:#ffffff; font-weight:500;}
.font02 {color:var(--normal-color); font-weight:500;}
.font03 {color:#929292;}            
.font04 {color:#bfffcf;}            
.font05 {color:#fff600; font-weight:500;}
.font06 {color:#5837ff; font-weight:500;}
.font07 {color:#ffcd00; font-weight:500;}
.font08 {color:#828282; font-weight:500;}
.font09 {color:#0048ff; font-weight:500;}
.font10 {color:#fee900; font-weight:500;}

.font11 {color:#fff000; font-weight:700; font-size:20px; font-family:Arial; letter-spacing:-1pt;}
.font12 {color:#90ff00; font-weight:700; font-size:16px; font-family:Arial; letter-spacing:-1pt;}
.font13 {color:#ffffff; font-weight:700; font-size:16px;}
.font14 {color:#ff007e; font-weight:700; font-size:20px; font-family:'GmarketSans';}

/*-------------------------------------------------------------------------------------*
 *  인풋                                                                               *
 *-------------------------------------------------------------------------------------*/
.input1       {background-color:#333333; border:1px solid #484848; padding:4px 0 4px 15px; color:#fff; font-size:14px; border-radius:2px; height:60px; transition:all 0.5s;}
.input2       {background-color:#f2f2f7; border:1px solid #f2f2f7; padding:4px 0 4px 5px; color:#545454; font-size:14px; border-radius:2px; transition:all 0.5s;}
.input3       {background-color:#f2f2f7; border:1px solid #f2f2f7; padding:10px 5px 10px 5px; color:#ff007e; font-size:14px; border-radius:2px; transition:all 0.5s; width:100%; text-align:right;}
.input4 { border: 2px solid #222222; border-radius: 5px; text-align: center; margin: 2px 15px; height:30px; background-color: #fff !important; color: #28ffbb !important;}
.input5 {
	border: 2px solid #28ffbb;
	border-radius: 10px !important;
	text-align: center;
	margin: 10px 0;
	height: 50px;
	background-color: #28ffbb;
	color: #000;
	width: 100%;
	font-size: 20px;
	font-weight: 800;
}
	.input5:hover {
		background-color: #fff;
		border: 2px solid #fff;
	}
.input5:active{ box-shadow: 0 2px #666; transform: translateY(1px);}

.input6 {
	border: 2px solid #222222;
	border-radius: 10px !important;
	text-align: center;
	margin: 20px 0;
	height: 40px;
	background-color: #28ffbb;
	color: #fff;
	font-size: 14px;
	min-width:80px;
}

.input7 {
	border: 2px solid #fff;
	background: none;
	border-radius: 10px !important;
	text-align: center;
	margin: 0px 0px 25px 0px;
	height: 60px;
	color: #fff;
	width: 40%;
	font-size: 20px;
	font-weight: 300;
}

	.input7:focus {
		border: 2px solid #28ffbb;
	}

	.input7 > option {
		background-color:#444;
	}

	.input7::placeholder {
		font-size:14px;
		color: #fff;
		letter-spacing:1px;
	}

	.input7:focus::placeholder {
		visibility:hidden;
	}


@media screen and (max-width:768px) {
	.input7 {
		width:70% !important;
	}
	.input5 {
		width: 100% !important;
	}
}

.clearBoth::after {
	content: "";
	display: block;
	clear: both;
}

.w-box{
	border: 1px solid #484848;
	/*margin-bottom: 20px;*/
	background: #333333;
	padding: 15px;
}
.circle {
	width: 80px;
	height: 80px;
	background-color: #fff;
	border: 5px solid #9bc7fb;
	border-radius: 100px;
}
.circleLeft {
	margin-left: 10px;
}
.nickName {
}

.nickbar {
	border: 0;
	border-left: 1px solid #7a7979;
	height: 14px;
	overflow: hidden;
	display: inline-block;
	position: relative;
	top: 2px;
}

.nickgrade {
	font-size: 14px;
	color: #7a7979;
}

.circleMid {
	margin: 8px 0;
}

.pointStart {
	color: #0458ba;
	display: inline-block;
}

.pointText {
	font-size: 14px;
	color: #797979;
	display: inline-block;
}

.pointNum {
	font-size: 14px;
	color: #0458ba;
	font-weight: bold;
	display: inline-block;
}

.nickBotbar {
	border: 0;
	border-left: 1px solid #7a7979;
	height: 12px;
	overflow: hidden;
	display: inline-block;
	position: relative;
	top: 2px;
}

.nickgBot {
	font-size: 14px;
	color: #7a7979;
}

.loginLeft1 {
	float: left;
	width: 200px;
	display: flex;
	align-items: center;
	margin-bottom: 30px;
}

.loginRight2 {
	float: right;
	width: 20%;
	margin-left: 10px;
}

.btn1, .btn2, .btn3{
    font-weight: bold;
    font-size:12px;
    color:#fff;
    padding: 3px 8px;
    border: 0;
    border-radius: 5px !important;
    margin-bottom: 7px;
}

.btn1{background-color:#0458ba}
.btn2{background-color:#7c7b7b}
.btn3{background-color:#000000}
.Experience {
	width: 100%;
	height: 31px;
	background-color: #e7e9ea;
	border: 1px solid #d0d1d2;
}

.percent {
	width: 50%;
	background-image: url(../image/percent.jpg);
	height: 100%;
	display: flex;
	align-items: center;
	/*background: linear-gradient(to right, #1E90FF, #0000EE);*/
}

.percentLv {
	color: #fff;
	font-weight: bold;
	padding-left: 20px;
	font-size: 14px;
	white-space: nowrap;
}

.loginRight {
	float: left;
	width: 30%;
	margin-left: 10px;
}

	.loginRight button {
		width: 100%;
		height: 79px;
		background-image: url(../image/loginBg.jpg);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		color: #fff;
		border: 0;
	}

.loginRight2 {
	float: left;
	width: 20%;
	margin-left: 10px;
}

.loginBot {
	height: 34px;
}
.loginBot {
	display: flex;
	align-items: center;
}

	.loginBot::after {
		content: "";
		display: block;
		clear: both;
	}

.LBright::after {
	content: "";
	display: block;
	clear: both;
}

.loginBot > * {
	float: left;
	font-size: 13px;
}

@media screen and (max-width:768px) {
	.input1{height:50px;}
}

@media screen and (max-width:320px) {
.input1{height:40px;}
}

/*-------------------------------------------------------------------------------------*
 *  서치                                                                               *
 *-------------------------------------------------------------------------------------*/
.serch_wrap{float:left; width:100%;}
.serch_box{float:left; width:100%; height:56px; background:none; border:none; padding:10px; display:flex; justify-content: space-between; transition:all 0.5s;}

.serch_select{background-color:#333333; border:1px solid #484848; padding:4px 0 4px 5px; color:#fff; font-size:14px; border-radius:0px; width:15%; height:36px; transition:all 0.5s;}
.serch_input{background-color:#333333; border:1px solid #484848; padding:4px 0 4px 5px; color:#fff; font-size:14px; border-radius:0px; width:69%; height:36px; transition:all 0.5s;}
.serch_btn{display:block; text-align:center; background-color:#28ffbb; border:1px solid #28ffbb; color:#000000; font-size:14px; border-radius:0px; width:15%; height:36px; line-height:36px; transition:all 0.5s; display: flex; align-items: center; justify-content: center;}

@media screen and (max-width:1024px) {
.serch_box{width:100%;}
.serch_btn{font-size:14px;}
}
@media screen and (max-width:768px) {
.serch_select{font-size:12px;}
.serch_input{font-size:12px;}
.serch_btn{font-size:12px;}
.serch_btn img{display:none;}
}

/*-------------------------------------------------------------------------------------*
 *  코멘트                                                                               *
 *-------------------------------------------------------------------------------------*/
.comment_box{float:left; width:100%; background:#333333; padding:20px 20px 40px 20px; transition:all 0.5s;}

.comment_enter{display: flex; justify-content: space-between; align-items: center;}
.comment_input{width:calc(100% - 145px); padding:5px 5px 5px 10px; font-size:14px; background:#222222; height:60px; border:1px solid #484848; transition:all 0.5s; color:#bbb;border-radius: 10px;}
.comment_btn{display:inline-block; text-align:center; border-radius:0px; color:#000000; font-size:18px; letter-spacing:0pt; font-weight:; /*font-family:'EsaManru';*/ font-weight:300; background:#28ffbb; border:1px solid #28ffbb;border-radius: 10px; min-width:140px; height:57px; line-height:57px; transition:all 0.5s;}

.comment_view{float:left; width:100%; margin:10px 0 0 0;}
.comment_view_list{float:left; width:100%; margin:10px 0 0 0; background:none; padding:10px 10px 20px 10px; border-radius:5px; border-top: 1px solid #484848;}

.comment_po{background:none; color:var(--color1-basic); padding:0 5px 0 5px; line-height:32px; text-align:center; display:inline-block; font-size:16px; margin:0 5px 0 0; font-weight:300; border-radius:0px; transition:all 0.5s;}
.comment_view_text{float:left; width:100%; font-size:16px; color:var(--color1-basic); padding:15px 10px 10px 10px; line-height:22px; transition:all 0.5s;}

@media screen and (max-width:1440px) {
.comment_input{width:calc(100% - 105px); height:80px;}
.comment_btn{min-width:100px; height:80px; line-height:80px; font-size:16px;}
.comment_box{padding:10px 10px 20px 10px;}
.comment_po{font-size:16px; padding:0 10px 0 10px;}
.comment_view_text{font-size:16px;}
}

@media screen and (max-width:768px) {
.comment_box{padding:10px 5px 20px 5px;}
.comment_input{height:60px;}
.comment_btn{font-weight:400; font-size:18px; height:60px; line-height:60px;}
.comment_po{width:48%; margin:0 0.5% 0.5% 0; font-size:16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left;}
.comment_view_list{margin:0;padding:10px;}
.comment_view_text{padding: 7px 5px 0px 5px;}
}