.w50 {width: 50px !important;}
.w100 {width: 100px !important;}
.w200 {width: 200px !important;}
.w300 {width: 300px !important;}
.wfull {width: 100% !important;}

.event {
	width:100%;
	margin: 20px auto;
}


.list-selector-wrap {
	position: relative;
	height: 55px;
	background-color: #f1f1f1;
	padding: 10px;
	margin-bottom: 10px;
}
.list-selector-wrap select{height: 35px;}
.list-selector-wrap .search {
	position: absolute;
	right: 10px;
	top: 10px;
}
.list-selector-wrap input[type=text]{    padding: 8px 0.5rem;}
.list-selector-wrap .date {width: 100px;}

@media only screen and (max-width: 900px) {
.list-selector-wrap .search {
    position: absolute;
    left:10px;
    top: 53px;
    width: 97%;
    box-sizing: border-box;
}
	.list-selector-wrap .search1{width: 77%;}
	.list-selector-wrap .search input[type=submit]{width: 20%;
    padding: 6px 15px;
    vertical-align: bottom;
    height: 35px;}
	.list-selector-wrap input[type=text]{    padding: 8px 0.5rem; }
	.list-selector-wrap {
    position: relative;
    height: 98px;
    background-color: #f1f1f1;
    padding: 10px;
    margin-bottom: 10px;
}
	
	.list-selector-wrap .types{    position: absolute;
    float: left;
    top: 10px;}
	
}

@media only screen and (max-width: 790px) {
.list-selector-wrap input[type=text]{    padding: 8px 0.5rem;}
}
@media only screen and (max-width: 735px) {
.list-selector-wrap input[type=text]{    padding: 8px 0.5rem;}
}
@media only screen and (max-width: 687px) {
.list-selector-wrap input[type=text]{    padding: 8px 0.5rem; }
}
@media only screen and (max-width: 645px) {
.list-selector-wrap input[type=text]{    padding: 8px 0.5rem;vertical-align: sub;
    height: 35px;}
.list-selector-wrap {
    position: relative;
    height: 145px;
    background-color: #f1f1f1;
    padding: 10px;
	margin-bottom: 10px;	}
	.list-selector-wrap select{height: 35px; margin-top:5px; }
	.list-selector-wrap .search {
    position: absolute;
    left:10px;
    top: 95px;
    width: 97%;
    box-sizing: border-box;
}
	
}
@media only screen and (max-width: 609px) {
.list-selector-wrap input[type=text]{    padding: 8px 0.5rem;vertical-align: sub;
    height: 35px; }
}
@media only screen and (max-width: 579px) {
.list-selector-wrap .search1{    padding: 8px 0.5rem; }
.list-selector-wrap {
    position: relative;
    height: 100px;
    background-color: #f1f1f1;
    padding: 10px;
    margin-bottom: 10px;}
}
@media only screen and (max-width: 600px) {
	.list-selector-wrap input[type=text]{    padding: 8px 0.5rem;  margin-right: 4px!important;}
.list-selector-wrap .date{width: 48.5%;
    margin: 0 0.5%;
    height: 35px;
    float: left;
	margin-bottom: 5px;}
}

@media only screen and (max-width: 600px) {
	.list-selector-wrap select {
    width: 48.5%;
		margin:0 0.5%;
    height: 35px;
    float: left;
		margin-bottom: 5px;
}
	.list-selector-wrap {
    position: relative;
    height: 175px;
    background-color: #f1f1f1;
    padding: 10px;
    margin-bottom: 10px;}

.list-selector-wrap .search {
  position: absolute;
    left: 12px;
    top: 130px;
  width:96%;
    box-sizing: border-box;
}
	.list-selector-wrap .time1{width:98%;}
}
@media only screen and (max-width: 532px) {
.list-selector-wrap select {
    width: 48.8%;
		margin:0 0.5%;
    height: 35px;
    float: left;
		margin-bottom: 5px;
}
}

@media only screen and (max-width: 531px) {
.list-selector-wrap select {
    width: 48.7%;
		margin:0 0.5%;
    height: 35px;
    float: left;
		margin-bottom: 5px;
}
}

@media only screen and (max-width: 526px) {
.list-selector-wrap select {
    width: 48.6%;
		margin:0 0.5%;
    height: 35px;
    float: left;
		margin-bottom: 5px;
}
}
@media only screen and (max-width: 523px) {
.list-selector-wrap select {
    width: 48.5%;
		margin:0 0.5%;
    height: 35px;
    float: left;
		margin-bottom: 5px;
}
}
@media only screen and (max-width: 520px) {
.list-selector-wrap select {
    width: 48.3%;
		margin:0 0.5%;
    height: 35px;
    float: left;
		margin-bottom: 5px;
}
	.list-selector-wrap input[type=text]{    padding: 8px 0.5rem;  margin-right: 4px!important;}
}
@media only screen and (max-width: 410px) {
.list-selector-wrap select {
    width: 48%;
		margin:0 0.5%;
    height: 35px;
    float: left;
		margin-bottom: 5px;
}
	.list-selector-wrap input[type=text]{    padding: 8px 0.5rem; margin-right: 4px!important;}
}
.write-btn {
	position: relative;
	text-align: right;
}
.write-btn .listtype {
	position: absolute;
	left: 10px;
	bottom: 0;
}
.write-btn .listtype img {
	width:30px;
	    cursor: pointer;
}
.list-wrap {
	border-top: 2px #d7d7d7 solid;
	border-bottom: 1px #d7d7d7 solid;
	margin: 5px 0;
	overflow:hidden;
}

/* 목록형 */
.ul-event-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ul-event-list > li {
	padding: 10px 0;
	border-bottom: 1px #d7d7d7 solid;
	width:49%; float:left;
}
.ul-event-list > li:nth-child(2n){margin-left:2%;}

@media only screen and (max-width: 680px){
.ul-event-list > li {
	padding: 10px 0;
	border-bottom: 1px #d7d7d7 solid;
	width:100%; float:left;
}
	.ul-event-list > li:nth-child(2n){margin-left:0%;}
}

.ul-event-list .img {
	width: 200px;
    margin-right: 20px;
    float: left;
    height: 275px;
    overflow: hidden;
}


.ul-event-list .img img {
	    width: 100%;
	
}
.ul-event-list .event-info {
	width: calc(100% - 220px);
	float: left;
	line-height: 2;
}
.ul-event-list .event-info .event-title {
	font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    height: 30px;
	margin-bottom: 5px;
}
.ul-event-list .event-info .event-date {
	
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    
	
}
.ul-event-list .event-info label {
	display: inline-block;
	width: 60px;
	color: #000;
}
.ul-event-list .event-info span {
	color: #929292;
}

/* grid 형 */
.ul-event-grid {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ul-event-grid > li {
	 width: 24%;
    display: inline-block;
    vertical-align: top;
    margin: 10px 0.3%;
}
.ul-event-grid .item-wrap {
	margin: 0px;
	border: 1px #d7d7d7 solid;
	padding: 10px;
}
.ul-event-grid .img {
padding-top: 124%;

    margin-bottom: 5px;
    overflow: hidden;
}
.ul-event-grid .img img {
	width: 100%;
    max-width: 100%;
}
.ul-event-grid .event-info {

}
.ul-event-grid .event-info .event-title {
	font-weight: bold;
	    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    height: 30px;
}

.ul-event-grid .event-info .event-date{height: 30px;}
.ul-event-grid .event-info label {
	display: inline-block;
	width: 60px;
	color: #000;
}
.ul-event-grid .event-info .btminfo {
	text-align: center;
}
.ul-event-grid .event-info .btminfo span{
	display: inline-block;
	width: 31.9%;;
	padding: 8px 0;
	background-color: #eee;
	border: 1px #ccc solid;
	border-radius: 4px;
}
.ul-event-grid .event-info .btminfo .info1{	width: 20%;}
.ul-event-grid .event-info .btminfo .info2{	width: 20%;}
.ul-event-grid .event-info .btminfo .info3{	width: 55.9%;}
@media only screen and (max-width: 1100px) {
.ul-event-grid .event-info .btminfo .info3{	width: 54.9%;}

}
@media only screen and (max-width: 1014px) { .ul-event-grid > li{ width: 23.99%;}
	
}

@media only screen and (max-width: 991px) {.ul-event-grid > li {
	width: 23.98%;}
}
@media only screen and (max-width: 988px)
	{.ul-event-grid .event-info .btminfo .info3{width: 54%;}
}
@media only screen and (max-width: 965px) {.ul-event-grid > li {
	width: 23.97%;}
}
@media only screen and (max-width: 965px) {.ul-event-grid > li {
	width: 23.96%;}
}
@media only screen and (max-width: 925px) {
.ul-event-grid > li {
    width: 32.3%;
	}}
@media only screen and (max-width: 833px) {
.ul-event-grid > li {
    width: 32.2%;
	}}
@media only screen and (max-width: 680px) {
.ul-event-grid > li {
    width: 32%;
	}}
@media only screen and (max-width: 988px)
	{.ul-event-grid .event-info .btminfo .info3{width: 53%;}
}

@media only screen and (max-width: 720px)
{.ul-event-grid .img{height: 200px;}
}
@media only screen and (max-width: 603px) {
.ul-event-grid > li {
   width: 48.8%;
	}}
@media only screen and (max-width: 519px) {
.ul-event-grid > li {
   width: 48.7%;
	}}
@media only screen and (max-width: 500px){
	.ul-event-grid .event-info .btminfo .info1{width: 48%;}
	.ul-event-grid .event-info .btminfo .info2{width: 48%;}
	.ul-event-grid .event-info .btminfo .info3{width: 100%; margin-top:5px;}
}
@media only screen and (max-width: 450px) {
.ul-event-grid > li {
   width: 48.6%;
	}}
@media only screen and (max-width: 394px) {
.ul-event-grid > li {
   width: 48.5%;
	}}
@media only screen and (max-width: 377px) {
.ul-event-grid > li {
   width: 100%;
	}}

/* write, edit */

.event-write {
	width: 100%;
	border-spacing: 0;
	border-top: 1px #d7d7d7 solid;
}
.event-write th {
	padding: 10px 5px;
	border-bottom: 1px #d7d7d7 solid;
	background-color: #f1f1f1;
	font-weight: normal;
}
.event-write td {
	padding: 10px 5px;
	border-bottom: 1px #d7d7d7 solid;
	text-align: left;
}
.event-write .addr-input {
	margin: 3px 0;
}


.input-date {
	width: 100px;
}

.event-imageinput {
	width: 100%;
	border-spacing: 0;
}
.event-imageinput td {
	padding: 10px 5px;
	border-top: 1px #d7d7d7 solid;
	border-bottom: 1px #d7d7d7 solid;
	text-align: left;
}

.event .stitle {
	margin-top: 20px;
	margin-bottom: 5px;
	font-weight: bold;
}




/* view */

.event-view .base-info {

}
.event-view .content{margin-top:20px;}

.event-view .base-info .imgwrap {
	width: 24%;
	float: left;
	
}

.event-view .base-info .info {
	width: 76%;
	float: left;
}

.event-view .base-info .imgwrap .mainimg {
	margin-right: 20px;
	padding: 10px;
	border: 1px #d7d7d7 solid;
	line-height: 100%;
}
.event-view .base-info .imgwrap .mainimg img {
	height: 400px;
	max-width: 100%;
}
@media only screen and (max-width: 970px) {
.event-view .base-info .imgwrap .mainimg img {
	height: 345px;
	max-width: 100%;
}
}
@media only screen and (max-width: 600px) {
.event-view .base-info .imgwrap .mainimg img {
	height: 345px;
	max-width: 100%;
}
}

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

	.event-view .base-info .info{
    width: 63%;
    float: left;
		max-width:
}
}
@media only screen and (max-width: 851px) {

	.event-view .base-info .info{
    width: 62%;
    float: left;
		max-width:
}
}
@media only screen and (max-width: 829px) {

	.event-view .base-info .info{
    width: 61%;
    float: left;
		max-width:
}
}
@media only screen and (max-width: 808px) {

	.event-view .base-info .info{
    width: 60%;
    float: left;
		max-width:
}
}
@media only screen and (max-width: 788px) {

	.event-view .base-info .info{
    width: 59%;
    float: left;
		max-width:
}
}
@media only screen and (max-width: 769px) {

	.event-view .base-info .info{
    width: 58%;
    float: left;
		max-width:
}
}
@media only screen and (max-width: 751px) {

	.event-view .base-info .info{
    width: 57%;
    float: left;
		max-width:
}
}
@media only screen and (max-width: 735px) {

	.event-view .base-info .info{
    width: 56%;
    float: left;
		max-width:
}
}
@media only screen and (max-width: 718px) {

	.event-view .base-info .info{
    width: 55%;
    float: left;
		max-width:
}
}
@media only screen and (max-width: 702px) {

	.event-view .base-info .info{
    width: 54%;
    float: left;
		max-width:
}
}
@media only screen and (max-width: 688px) {

	.event-view .base-info .info{
    width: 53%;
    float: left;
		max-width:
}
}
@media only screen and (max-width: 688px) {

	.event-view .base-info .info{
    width: 53%;
    float: left;
		max-width:
}
}
@media only screen and (max-width: 674px) {
.event-view .base-info .imgwrap {
    width: 100%;
    float: left;
    
}
	.event-view .base-info .info{
    width: 100%;
    float: left;
		max-width:
}
	.event-view .base-info .imgwrap .mainimg img {
    height: 650px;
    max-width: 100%;
}
	.event-view .base-info .imgwrap .mainimg {
    margin-right: 0px;
    padding: 10px;
    border: 1px #d7d7d7 solid;
    line-height: 100%;
}
}


.event-view .base-info .imgwrap img {
	width: 100%;
	height: auto;
}

.event-view .base-info .imgwrap .thumbs {
	margin-top: 5px;
}
.event-view .base-info .imgwrap .thumbs .thumbimg {
	width: 70px;
}

.event-view .base-info .info ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px #d7d7d7 solid;
}
.event-view .base-info .info ul li {
	padding: 15px;
	border-bottom: 1px #d7d7d7 solid;
}

.event-view .base-info .info ul li label {
	display: inline-block;
	width: 70px;
	color: #000;
}
.event-view .base-info .info ul li span {
	display: inline-block;
	color: #929292;
}



.view-stitle {
	margin: 30px 0 5px 0;
	font-weight: bold;
}