@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;500;700&family=Roboto:wght@300;500;700&display=swap');

/*===========================================================================
	CSS 초기화
============================================================================*/
* {font-family: 'Roboto', 'Noto Sans','Noto Sans KR', 'Open Sans' ,sans-serif; box-sizing:border-box; margin:0; padding:0; }
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, em, img, strong, b, i, dl, dt, dd, ol, ul, li, 
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, 
menu, nav, section, video, a {border:0; outline:0; font-size:100%; color:#222; line-height:1.2;}
body {line-height:1;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}
ul, ol, li {list-style:none;}
strong {display: inline-block;}
a {margin:0; padding:0; font-size:100%; }
table {border-collapse:collapse; border-spacing:0;}
input, select {vertical-align:middle;}
p {line-height:1.5; word-break:keep-all;}
img {width: 100%}
input {outline:none;}
button {cursor:pointer;}
a {text-decoration: none;}
textarea {resize: none;}
.container {width: 100%; max-width: 1200px; height: auto; margin: 0 auto;}
.flex {display: flex;}
.bg_red {background: rgba(237, 33, 58, 0.1);}
.bg_gray {background: #fafafa;}
.bg_pink {background: #ffedec;}
.mt_0 {margin-top: 0 !important;}
.mb_0 {margin-bottom: 0 !important;}
.pt_0 {padding-top: 0 !important;}
.pb_0 {padding-bottom: 0 !important;}

.mb{display: none;}

/* 헤더 */
header {
	z-index: 9;
	position: fixed;
	width: 100%;
	height: 80px;
	background-color: white;
}
header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 0;
}
header .login a{
	background-color: #F84241;
}
nav ul {
	display: flex;
}
nav ul li {
	position: relative;
}
nav ul li div {
	display: none;
	z-index: 1;
	position: absolute;
    top: 18px;
    left: -7px;
    width: 200px;
    height: auto;
    background-color: white;
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 4px;
	box-shadow: 1px 1px 7px lightgrey;
}
nav ul li div.on {
	display: block;
}
nav ul li div a {
	display: block;
	padding: 0.5rem 0;
}
nav a:hover {
	color: #F84241;
}
nav a {
	padding: 1rem;
}
nav a.on  {
	color: #F84241;
	border-bottom: 1px solid #F84241
}
.main, .sub, .notice, .review, .ticket {
	padding-top: 80px;
}
footer {
	padding-top: 40px;
}
footer .container {
	height: auto;
}
footer .top {
	padding-bottom: 40px;
}
footer .top a {
	margin-right: 1.5rem;
}
footer .flex {
	padding: 40px 0;
	gap: 42px;
	border-top: 1px solid #e7e7e7;
}
footer .flex .logo{
	width: 222px;
} 
footer .flex div{
	width: calc(100% - 222px);
} 
footer .flex p{
	color: #8a8a8a;
} 
footer .flex p i{
	color: #8a8a8a;
	margin-right: 0.5rem;
} 
.fixed {
	z-index: 9;
	position: fixed;
	bottom: 20px;
	right: 20px;
}
.fixed a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background-color: white;
	box-shadow: 1px 1px 7px #222;
	border-radius: 100%;
}
@media ( max-width: 768px ) {
	.pc{display: none;}
	.mb{display: block;}

	br {
		display: none;
	}
	.btns a {padding: 0.5rem;}
    .btns {
        gap: 1rem;
    }
    #wrap {
        width: 100%;
        height: 100%;
        overflow-x: hidden;
    }
    .container, .read .sec .container {
        width: 100%;
        height: 100%;
        padding: 20px;
    }
	header {
		height: 60px;
	}
	header .container {
        padding: 0.5rem;
    }
    header .logo {
        width: 148px;
    }
	header nav {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%; 
		flex-direction: column;
		background-color: rgba(0,0,0,0.8)
	}
	header nav.on {
		display: block;
	} 
	header nav ul{
		padding: 60px 20px;
		flex-direction: column;
	}
	header nav ul li{
		display: flex;
    	flex-direction: column;
		border-bottom: 1px solid #3c3c3c;
	}
	header nav ul div {
		position: initial;
		background-color: initial;
		width: 100%;
		height: auto;
		box-shadow: none;
		margin: 0;
		padding: 0 1rem 1rem 1rem;

	}
	header nav ul div a {
		font-size: 18px;
		color: #aaaaaa;
	}
	header nav a {
		width: 100%;
		color: white;
		font-size: 28px;
	}
	header nav a.on {
		border: none;
		color: white;
	}
	nav ul li div {
		display: block;
	}
	header nav .btn_close {
		position: absolute;
		right: 20px;
		top: 20px;
		width: 32px;
		height: 32px;
		border: 0;
		background-color: initial;
	}
	header nav .btn_close i {
		color: white;
    	font-size: 32px;
	}
	header .menu {
		width: 32px;
		height: 32px;
		border: 0;
		background-color: initial;
	}
	header .menu i {
		font-size: 32px;
		color: #aaaaaa;
	}
	footer {

	}
	footer .flex {
		flex-direction: column;
		padding: 20px 0;
		gap: 20px;
	}
	footer .flex div {
		width: 100%;
	}
	footer .top {
		padding: 0;
	}
	footer .top a{
		display: block;
		padding-bottom: 0.5rem;
	}
}