@charset "utf-8";
/* CSS Document */

	*{
		font-family: 'Roboto','Noto Sans KR', sans-serif;
		margin:0;
		padding:0;
		box-sizing: border-box;
		-webkit-text-size-adjust : none;
		-ms-text-size-adjust : none;
		-moz-text-size-adjust : none;
		-o-text-size-adjust : none;
	}
	a{
		text-decoration: none;
		color: #FFFFFF;
	}
	ul,ol{
		list-style:none;
	}
	body{
		background: url("../img/list_bg.png")no-repeat top center;
	}
    table {
      margin-left: auto;
      margin-right: auto;
    }	
	.main_top{
		max-width:1280px;
		height: 190px;
		margin: 0 auto;
		margin-bottom: 20px;
		padding: 15px;
		border-radius: 10px;
		background-color: #404040; 
		margin-top: 30px;
		box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
	}
	.flex{
		display:flex;
		justify-content:space-between;
		width: 100%;
	}
	.main_top h1{
		width:100px;
		font-size: 0;
	}
	.main_top h1 img.logo{
		width: 100%;
	}
	.main_top select{
		width: 150px;
		height: 40px;
		border: 1px solid #e2e2e2;
		border-radius: 10px;
		background-color: transparent;
		padding-left: 8px;
		font-size: 15px;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		background: url(../images/select_bg.png);
		color: #6a6d6a;
	}
	.main_top h2{
		color: #FFFFFF;
	}
	.main_top h3{
		color: #FFFFFF;
	}
	.main_top p{
		font-size: 37px;
		color: #FFFFFF;
		font-weight: 500;
	}
	.main_top .flex:nth-child(2){
		margin-top: 20px;
		align-items: flex-end; 
	}
	
	.main_item_total{
		max-width:1280px;
		height: 157px;
		margin: 0 auto;
		margin-bottom: 20px;
		padding: 15px;
		border-radius: 10px;
		background-color: orange; /*#02A4A6;*/
		margin-top: 30px;
		box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
	}	
	.main_item_total h1{
		width:100px;
		font-size: 0;
	}
	.main_item_total h1 img.logo{
		width: 100%;
	}
	.main_item_total select{
		width: 150px;
		height: 40px;
		border: 1px solid #e2e2e2;
		border-radius: 10px;
		background-color: transparent;
		padding-left: 8px;
		font-size: 15px;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		background: url(../img/select_bg.png);
		color: #6a6d6a;
	}
	.main_item_total h2{
		font-size: 32px;
		color: #FFFFFF;
	}
	.main_item_total h3{
		font-size: 24px;
		color: #000000;
	}
	.main_item_total p{
		font-size: 50px;
		color: #FFFFFF;
		font-weight: 500;
	}
	.main_item_total .flex:nth-child(2){
		margin-top: 20px;
		align-items: flex-start; 
	}	
	.container{
		display: grid;
		grid-template-columns: repeat(2,minmax(50%, auto));
		grid-auto-rows:minmax(200px,auto);
		max-width:1280px;
		width:100%;
		margin: 0 auto;
	}
	.item{
		margin: 0 5px 10px 5px;
		padding: 20px;
		position: relative;
		border-radius: 10px;
		background-color: #fff;
		box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
	}
	.item:nth-child(2n) span.view{
		background-color: #c3daaa;
	}
	.item:nth-child(2n) a{
		color:#5fa87d;
	}
	p.session_name{
		margin-bottom: 15px;
		font-size: 17px;
		font-weight: 500;
		color: #2d3e50;
	}
	p.attendees{
		font-weight: 500;
		font-size: 26px;
		margin-top: -2px;
		color: #494949;
	}
	p.cum_num{
		color: #818181;
		margin-top: 2px;
	}
	p.cum_num span{
		color:#6eca9b;
		font-weight: 500;
		font-size: 30px;
	}
	span.session_id{
		margin-left: 20px;
		color: gray;
		font-weight: 500;
		font-size: 24px;		
	}
	span.view{
		background-color: #b4e7db;
		border-radius: 15px 0 0 15px;
		padding: 4px 8px 4px 15px;
	}
	.position{
		position: absolute;
		bottom: 21px;
		font-size: 15px;
		right: 0;
	}
	.position a{
		color:#5eaf7f;
	} 
	.item_total{
		margin: 0 5px 10px 5px;
		padding: 20px;
		position: relative;
		border-radius: 10px;
		background-color: #C0FFC0;
		box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
	}
	.search{
		display: inline-block;
		margin-top: 60px;
		position: relative; /*absolute;*/
		right: 50px;
	}
	.button_pre{
		display: inline;
		width: 100px;
		height: 40px;
		margin-top: 70px;
		position: relative;
		left:50px;
		border:0px solid #eaf0f6;
		border-radius: 5px;
		background: #78c591;
		color: #FFFFFF;
		font-size: 18px;
		font-weight: 500;
		text-align: center;
		line-height: 40px;
	}
	.button_pre:hover {
		color: #FFFFFF;
		background: orange;
	}
	.button1{
		display: inline;
		width: 100px;
		height: 40px;
		margin-top: 70px;
		position: relative;
		left: 0;
		border:0px solid #eaf0f6;
		border-radius: 5px;
		background: #78c591;
		color: #FFFFFF;
		font-size: 18px;
		font-weight: 500;
		text-align: center;
		line-height: 40px;
	}
	.button1:hover {
		color: #FFFFFF;
		background: orange;
	}
	button.button_green1 {
		height: 28px;
		padding: 0px 10px;
		font-size: 10px;
		background: #78c591;
		border: none;
		color: #000;
		border-radius: 5px;
		margin: 0 auto 5px;
		cursor: pointer;
	}

	button.button_green1:hover {
		color: white;
		background: orange;
	}
	button.button_gray1 {
/*		width: 50px;		*/
		height: 28px;
		padding: 0px 10px;
		font-size: 10px;
		background: #ECECEC;
	/*	border:1px solid;  */
		border: none;
		color: #000;
		border-radius: 5px;
		margin: 0 auto 5px;
		cursor: pointer;
	}

	button.button_gray1:hover {
		color: white;
		background: orange;
	}
	@media screen and (min-width:900px)  and (max-width:1200px){
		.container{
			grid-template-columns: repeat(auto-fill, minmax(50%, auto));
		}
	}
	@media screen and (min-width:768px)  and (max-width:900px){
		body{
			padding: 0 2%;
		}
		.container{
			grid-template-columns: repeat(auto-fill, minmax(50%, auto));
		}
	}
	@media screen and (min-width:401px)  and (max-width:767px){
		body{
			padding: 0 2%;
		}
		.container{
			grid-template-columns: repeat(auto-fill, minmax(50%, auto));
		}
		.main_top{
			min-height: 200px;
			height: 100%;
		}
		.main_top p{
			text-align: right;
		}
		.main_top .flex:nth-child(2){
			display: block;
		}
		span.view{
			padding: 4px 5px 4px 10px;
			font-size:14px;
		}
	}
	@media screen and (min-width:320px)  and (max-width:400px){
		body{
			padding: 0 2%;
		}
		.container{
			grid-template-columns: repeat(auto-fill, minmax(50%, auto));
			grid-auto-rows:minmax(300px,auto);
		}
		.main_top{
			min-height: 200px;
			height: 100%;
		}
		.main_top p{
			text-align: right;
		}
		.main_top .flex:nth-child(2){
			display: block;
		}
		span.view{
		padding: 4px 5px 4px 10px;
		font-size:14px;
		}
		span.session_id{
			display: block;
			text-align: left;
			margin-bottom: 10px;
		}
		.position{
			text-align: right;
			display: block;
		}
		.position a{
			margin: 0 0 0 auto;
		} 
	
	}