@charset "utf-8";
@media (max-width:740px){html{font-size:3.7vw;}}
@media (min-width:741px) and (max-width:959px){html{font-size:1.7vw;}}
@media (min-width:960px) and (max-width:1799px){html{font-size:18px;}}
@media (min-width:1800px){html{font-size:18px;}}


@font-face {
    font-family: 'Paperozi';
    src: url('../css/font/Paperlogy-1Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('../css/font/Paperlogy-2ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('../css/font/Paperlogy-3Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('../css/font/Paperlogy-4Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('../css/font/Paperlogy-5Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('../css/font/Paperlogy-6SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('../css/font/Paperlogy-7Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('../css/font/Paperlogy-8ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('../css/font/Paperlogy-9Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

:root{
    /* font size */
    --font-size-36:2rem;
    --font-size-30:1.67rem;
    --font-size-24:1.33rem;
    --font-size-20:1.1rem;
    --font-size-18:1rem;
    --font-size-16:0.9rem;
    --r: 2.78rem; /* 모서리 파임 크기 */
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,p,button,iframe,th,td,a,select,input,textarea{margin:0;padding:0;font-family:'Pretendard';font-weight:400;color:#303030;line-height:1.2;font-size:inherit;box-sizing:border-box}

html, body {
  /* 스마트폰 방향 전환이나 시스템 설정에 따른 글자 크기 강제 확대를 방지합니다 */
  -webkit-text-size-adjust: none;  /* 사파리, 크롬, 구형 안드로이드 브라우저 */
  -moz-text-size-adjust: none;     /* 파이어폭스 */
  -ms-text-size-adjust: none;      /* 익스플로러 */
  text-size-adjust: none;          /* 표준 속성 */
}


.mo{display: none;}

.event-overview *{
    box-sizing: border-box;
}

.event-overview img{
    max-width: 100%;
}

.event-overview > section{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
}

.event-overview > section.sec-1{
	background-image: url(../images/overview/sec1_bg.png);
	background-size: cover;
	height: 68.76rem;
	background-position: center;
}

.event-overview > section.sec-1 h1{
	margin-top: 9.28rem;
}

.event-overview > section.sec-1 h3{
	font-size: 1.89rem;
	font-weight: 400;
}

.event-overview > section.sec-1 h4{
	font-size: 2.17rem;
	font-weight: 700;
}

.event-overview > section.sec-1 .r1{
	display: flex;
	flex-direction: row;
	gap:1rem;
	width: 100%;
	max-width: 960px;
	align-items: stretch;
	justify-content: center;
	margin-top: 1.7rem;
}

.event-overview > section.sec-1 .r1 > div{
	flex:1 1 calc( (100% - 1rem) / 2);
	background-color: #fff;
	border-radius: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding:1.33rem;
}

.event-overview > section.sec-1 .r1 > div h4{
	font-family:'Paperozi';
	font-size: 1.67rem;
	color:#2db0e8 ;
	font-weight: 700;
	text-align: center;
}

.event-overview > section.sec-1 .r1 > div h5{
	font-family:'Paperozi';
	font-size: 1.11rem;
	color:#000 ;
	font-weight: 500;
	text-align: center;
}

.event-overview > section.sec-1 .r1 > div > div{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	row-gap: 0.5rem;
}

.event-overview > section.sec-1 h6{
	font-family:'Paperozi';
	font-size: 1.17rem;
	color:#fff ;
	font-weight: 700;
	text-align: center;
	background-color: #2db0e8;
	width: 100%;
	max-width: 960px;
	border-radius: 50px;
	padding: 1rem;
	margin-top: 1rem;
}

.event-overview > section.sec-2{
	padding:4.44rem 2rem;
}

.event-overview > section.sec-2 h1{
	font-family:'Paperozi';
	font-size: 2.22rem;
	color:#339dca ;
	font-weight: 700;
	text-align: center;
	background-color:#f1f1f1;
	padding: 0.5rem 5rem;
	border-radius: 50px;
}

.event-overview > section.sec-2 ul{
	display: flex;
	width: 100%;
	max-width: 1024px;
	flex-direction: row;
	column-gap: 4px;
	margin-top: 1rem;
} 

.event-overview > section.sec-2 ul > li{
	flex:1 1 calc( (100% - 8px) / 4);
	height: 20.28rem;
	border:1px solid #e4e4e4;
	border-radius: 1rem;
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
	align-items: center;
	justify-content: flex-start;
	padding-top: 2.22rem;
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: contain;
}

.event-overview > section.sec-2 ul > li > div{
	width: 100%;
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
	align-items: center;
	justify-content: flex-start;
	flex:1 1 0;
}

.event-overview > section.sec-2 ul > li h3{
	font-size: 1.33rem;
	color: #2284be;
	font-weight: 800;
}

.event-overview > section.sec-2 ul > li.c2 h3{
	color:#f68e32 ;
}

.event-overview > section.sec-2 ul > li.c3 h3{
	color:#83bee1 ;
}

.event-overview > section.sec-2 ul > li.c4 h3{
	color:#87bf50 ;
}

.event-overview > section.sec-2 ul > li h4{
	font-size: 1rem;
	font-weight: 400;
}

.event-overview > section.sec-2 ul > li.c1{
	background-image: url(../images/overview/sec2_01.png);
}

.event-overview > section.sec-2 ul > li.c2{
	background-image: url(../images/overview/sec2_02.png);
}

.event-overview > section.sec-2 ul > li.c3{
	background-image: url(../images/overview/sec2_03.png);
}

.event-overview > section.sec-2 ul > li.c4{
	background-image: url(../images/overview/sec2_04.png);
}

.event-overview > section.sec-3{
	padding:4.44rem 0;
	background-image: url(../images/overview/sec3_bg.png);
	background-size: cover;
	height: 78.17rem;
	background-position: center;
	background-color: #00bfe9;
}

.event-overview > section.sec-3 h1{
	font-family:'Paperozi';
	font-size: 2.22rem;
	color:#339dca ;
	font-weight: 700;
	text-align: center;
	background-color:#fff;
	padding: 0.5rem 5rem;
	border-radius: 50px;
}

.event-overview > section.sec-3 .cus-map{
	display: flex;
	width: 100%;
	max-width: 40.22rem;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
	margin-top: 1rem;
}

area {
  outline: none;
}

@media screen and (max-width:1024px){
	.event-overview > section{
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

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

	.mo{
		display: initial;
	}
	.event-overview > section.sec-1{
		background-image: url(../images/overview/m_sec1_bg.png);
		aspect-ratio: 0.52 / 1;
		background-position: top center;
		padding-top: 8rem;
		height: auto;
	}

	.event-overview > section.sec-1 h1{
		max-width: 23rem;
		margin-top: 0;
	}

	.event-overview > section.sec-3{
		background-image: url(../images/overview/m_sec3_bg.png);
		background-size: contain;
		background-position: bottom center;
		background-repeat: no-repeat;
	}
	.event-overview > section.sec-1 h3{
		font-size: 0.9rem;
	}

	.event-overview > section.sec-1 h4 {
		font-size: 1rem;
		line-height: 1.5em;
	}

	.event-overview > section.sec-1 .r1{
		flex-direction: column;
		margin-top: 3rem;
	}

	.event-overview > section.sec-1 .r1 > div{
		flex:1 1 100%;
		flex-direction: row;
		padding: 1rem 0.5rem;
		align-items: center;
		justify-content: flex-start;
	}

	.event-overview > section.sec-1 .r1 > div h4{
		flex-basis: 4.7rem;
		line-height: 1.3em;
		font-size: 1.3rem;
	}

	.event-overview > section.sec-1 .r1 > div h5{
		flex-basis: calc(100% - 5rem);
		text-align:left;
	}

	.event-overview > section.sec-1 h6{
		font-size: 0.9rem;
		padding: 0.5rem;
		max-width: 100%;
		border-radius: 1rem;
	}

	.event-overview > section.sec-2{
		padding: 3rem 2rem;
	}
	.event-overview > section.sec-2 h1{
		font-size: 1.4rem;
		padding: 0.5rem 4rem;
	}

	.event-overview > section.sec-2 ul{
		flex-wrap: wrap;
		row-gap: 4px;
	}

	.event-overview > section.sec-2 ul > li{
		flex: 1 1 calc( (100% - 4px) / 2);
		height: 16.32rem;
		padding-top: 1.5rem;
	}

	.event-overview > section.sec-2 ul > li h3{
		font-size: 1.24rem;
	}

	.event-overview > section.sec-2 ul > li h4{
		text-align: center;
	}

	.event-overview > section.sec-2 ul > li > div{
		row-gap: 0.5rem;
	}

	.event-overview > section.sec-3{
		padding: 3rem 2rem;
		height: 53rem;
	}

	.event-overview > section.sec-3 h1 {
		font-size: 1.4rem;
		padding: 0.5rem 4rem;
	}
}