/*
가이드 명칭 : YG CSS 가이드
가이드 내용 : 사이트 레이아웃
최초 제작자 : YG WDT
최종 제작일 : 2020.04.
수정 / 배포 : 담당자 문의 후 수정 가능. 재배포 절대 불가
*/

/* ------------------------------- */

/* IE6.0 Hack CSS 연결 ----------- */

/* ------------------------------- */

@charset "utf-8";
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 * Common
 //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

 * {
 	font-family: "noto-sans", sans-serif;
	font-weight: 700;
	font-style: normal;
 }


 html * {
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: lightscale;
 }

 *,
 *:after,
 *:before {
 	-webkit-text-size-adjust: none;
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 }

 html, body { width: 100%; }
 html, body, p, h1, h2, h3, h4, h5, h6, ul, li, dl, dt, dd {
 	margin: 0;
 	padding: 0;
 	word-wrap: break-word;
 }

 body {
 	font-size: 62.5%;
 	-webkit-overflow-scrolling: touch;
 	-webkit-user-select: none;
 	-webkit-touch-callout: none;
 	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }

 h1, h2, h3, h4, h5, h6 {
 }

 h1 { 
 	font-size: 8em; 
 	color: #000;
 	letter-spacing: 0.02em;
 }

 h2 {
 	font-size: 4em;
 	color: #fff;
 	letter-spacing: 0.02em;
 }

 h3 { 
 	display: inline-block;
 	font-size: 3.5em;
 }


 ul,ol,dl { list-style: none; }
 table { border-collapse: collapse; }
 img {
 	max-width: 100%;
 	border: 0;
 	vertical-align: middle;
 }

 a {
 	display: inline-block;
 	overflow: visible;
 	cursor: pointer;
 	padding: 0;
 	border-radius: 0px;
 	-moz-border-radius: 0px;
 	-webkit-border-radius: 0px;
 	vertical-align: middle;
 	text-align: center;
 	box-sizing: border-box;
 	onfocus: blur;
 }

 a,
 a:link {
 	text-decoration: none;
 }

 a:hover,
 a:active,
 a:focus {}


 .hidden {
 	display: none;
 }

 #wrap {
 	position: relative;
 	width: 100%;
 	margin: 0 auto;
 	background-color: #000;
 	text-align: center;
 }

 .container {
 	text-align: center;
 }

 .top{
 	max-width: 100%;
 }

.left{
	float: left;
	margin-top: 2%;
	margin-left: 2%;
}

.right{
	float: right;
	margin-top: 3%;
	margin-right: 2%;
}

.main{

}

.info{
	margin-top: 8%;
	margin-bottom: 8%;
	
}
.infoimg{
	margin-bottom: 2%;
}

.infobtn{
	width: 20%;
 	font-size: 3em;
 	color: #000;
 	border: 2px solid;
 	outline-color: #f08439;
 	background-color: #f08439;
 	display: inline-block;
 	line-height: 1.4em;
 	border-radius: 100px;
 	padding-top: 1%;
 	padding-bottom: 1%;
 }
 .infobtn:hover{
 	color: #f08439;
 	background-color: #000;
 	outline-color: #f08439;
 }

 .ticket{
 	margin-bottom: 2%;
 }

 .buy {
 	margin: auto;
 	text-align: center;
 	padding-bottom: 8%;

 }



 .buy-button {
 }




 .auc1 {
 	width: 20%;
 	font-size: 3em;
 	color: #666;
 	border: 2px solid;
 	outline-color: #666;
 	display: inline-block;
 	line-height: 1.4em;
 	border-radius: 100px;
 	text-align: center;
 	padding-top: 1%;
	padding-bottom: 1%;
	margin: 1%;
}


.auc2 {
	width: 20%;
 	font-size: 3em;
 	color: #666;
 	border: 2px solid;
 	outline-color: #666;
 	display: inline-block;
 	line-height: 1.4em;
 	border-radius: 100px;
 	text-align: center;
 	padding-top: 1%;
	padding-bottom: 1%;
	margin: 1%;
}

.auc2:hover{

 }

.spon{
	padding-bottom: 2%;
}
.btm {
	padding-bottom: 5%;
}









/* ------------------------------
---------------------------------
[ Desktops only ]
---------------------------------
------------------------------ */

@media (min-width: 970px) {
}

/* ------------------------------
---------------------------------
[ Phones & Tablets only ]
<Tablets> Large screens
---------------------------------
------------------------------ */

@media (max-width: 969px) {
	h1 { 
		font-size: 5em; 
		color: #fff;
		letter-spacing: 0.02em;
	}
	.right{
		width: 10%;
	}
	.left{
		width: 20%;

	}
	.info{
		margin-left: 10%;
		margin-right: 10%;
	}
	.infoimg{
		margin-bottom: 5%;
		margin-left: 10%;
		margin-right: 10%;
		text-align: center;
	}
	.infobtn
	{
		width: 80%;
		padding: 1%;
		font-size: 2em;
	}

	.ticket {
		margin-left: 10%;
		margin-right: 10%;
		

	}

	.buy {
		margin: auto;
		width: 80%
	}

	.buy-button{

		font-size: 2em;
		line-height: 1.3em;
		border: 1px solid;
		text-align: center;

	}
	

	.title{
		width: 90%;
		padding-bottom: 4%;
	}


	.inc {
		width: 100%;
		padding:4%;
	}
	.btm{
				margin-left: 10%;
		margin-right: 10%;

	}
	.spon{
				margin-left: 10%;
		margin-right: 10%;
	}

	.buy-button {
		width: 100%;

		}

 /*
	.button:hover {
		width: 100%;
		background-color: #022170;
		color: #ffffff;
		}*/

	}

	@media (max-width: 320px) {
		#wrap {
			min-width: 320px;
			width: 320px;
		}


	}