/* ---------------------------
Pretendard Font
--------------------------- */

@font-face{
	font-family:'Pretendard';
	src:url('/fonts/Pretendard-Regular.woff2') format('woff2');
	font-weight:400;
	font-style:normal;
	font-display:swap;
}

@font-face{
	font-family:'Pretendard';
	src:url('/fonts/Pretendard-Bold.woff2') format('woff2');
	font-weight:700;
	font-style:normal;
	font-display:swap;
}

/* ---------------------------
Reset
--------------------------- */

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

body{
	font-family:'Pretendard',sans-serif;
	color:#111;
}

ul{
	list-style:none;
}

a{
	text-decoration:none;
	color:inherit;
}

img{
	display:block;
	width:100%;
	height:auto;
}

/* ---------------------------
Header
--------------------------- */

.header{
	width:100%;
	background:#fff;
	border-bottom:1px solid #eee;
}

.header_inner{

	max-width:1640px;
	margin:auto;

	display:flex;
	align-items:center;
	justify-content:space-between;

	height:80px;

	padding:0 20px;
}

.logo{
	font-size:22px;
	font-weight:700;
}

/* ---------------------------
PC Menu
--------------------------- */
.gnb { padding-right:22%; }

.gnb > ul{

	display:flex;
	gap:100px;
}

.gnb > ul > li{
	position:relative;
}

.gnb > ul > li > a{

	font-size:20px;
	font-weight:600;
	padding:10px 0;
	display:block;
}

/* ---------------------------
Sub Menu
--------------------------- */

.gnb > ul > li{
	position:relative;
}

.gnb > ul > li .sub{

	position:absolute;
	top:50px;
	left:0;

	background:#fff;

	border:1px solid #eee;

	min-width:180px;

	display:none;

	box-shadow:0 5px 20px rgba(0,0,0,0.1);

	z-index:10;
}

.gnb > ul > li .sub li{
	border-bottom:1px solid #eee;
}

.gnb > ul > li .sub li:last-child{
	border:none;
}

.gnb > ul > li .sub a{

	display:block;
	padding:12px 15px;
	font-size:14px;
}

.gnb > ul > li:hover .sub{
	display:block;
}

/* ---------------------------
Keyvisual Slider
--------------------------- */

.keyvisual{
    position: relative;
    width: 100%;
    height: 92vh;
    overflow: hidden;
}

/* slider container */

.slider{

	width:100%;
	height:100%;
}

/* slide track */

.slides{

	display:flex;

	height:100%;

	transition:transform .8s ease;

	will-change:transform;

}

/* slide */

.slide{

	min-width:100%;
	height:100%;
}

/* image */

.slide img{

	width:100%;
	height:100%;

	object-fit:cover;
}

/* ---------------------------
Overlay
--------------------------- */

.overlay{

	position:absolute;

	top:0;
	left:0;

	width:100%;
	height:100%;

	background:rgba(0,0,0,0.6);

	z-index:2;
}

/* ---------------------------
Key Text
--------------------------- */

.key_text{

    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
    z-index: 3;
    width: 90%;
}

/* 상단 문구 */

.key_text h2{

	font-size:30px;

	font-weight:400;

	letter-spacing:2px;

	margin-bottom:15px;

	text-shadow:0 2px 10px rgba(0,0,0,0.6);
}

/* 메인 타이틀 */

.key_text h1{

	font-size:8vw;
	font-weight:700;
	background:linear-gradient(180deg,#fff,#f2f2f2);

	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
}

/* 날짜 */

.key_text p{

	font-size:2vw;

	font-weight:500;

	letter-spacing:1px;
	color: #ffff00;

	text-shadow:0 2px 10px rgba(0,0,0,0.6);
}

/* ---------------------------
Banner
--------------------------- */

.banner img{
	width:100%;
}

/* ---------------------------
Bottom Visual
--------------------------- */
.bottom_visual {
	margin-bottom: 80px;
}

.bottom_visual img{
	width:100%;
	max-width:1080px;
	margin:0 auto;
}

/* ---------------------------
Footer
--------------------------- */

.footer{

	background:#111;
	color:#fff;

	padding:40px;

	text-align:center;
}

/* ---------------------------
Hamburger
--------------------------- */

.hamburger{

	display:none;

	width:30px;
	cursor:pointer;
}

.hamburger span{

	display:block;

	height:3px;
	background:#111;

	margin:6px 0;
}

/* ---------------------------
Mobile Menu
--------------------------- */

.mobile_menu{

	position:fixed;
	top:0;
	right:-100%;

	width:280px;
	height:100%;

	background:#fff;

	z-index:1000;

	padding:80px 20px;

	transition:0.35s;

	overflow-y:auto;
}

.mobile_menu.active{
	right:0;
}

.mobile_menu li{

	margin-bottom:20px;
	font-size:20px;
}

.mobile_overlay{

	position:fixed;
	top:0;
	left:0;

	width:100%;
	height:100%;

	background:rgba(0,0,0,0.4);

	z-index:999;

	display:none;
}

.mobile_overlay.active{
	display:block;
}


/* 기본 서브메뉴 숨김 */
.gnb ul li .sub{
	display:none;
	position:absolute;
	background:#fff;
	padding:10px 0;
	min-width:180px;
	box-shadow:0 5px 20px rgba(0,0,0,0.1);
}

/* PC hover */
.gnb ul li:hover .sub{
	display:block;
}

/* 모바일 메뉴 */
.mobile_menu{
	position:fixed;
	top:0;
	right:-100%;
	width:280px;
	height:100%;
	background:#fff;
	z-index:1000;
	padding:80px 20px;
	transition:0.35s;
	overflow-y:auto;
}

.mobile_menu.active{
	right:0;
}

/* 메뉴 */
.mobile_menu ul{
	list-style:none;
}

.mobile_menu ul li{
	border-bottom:1px solid #eee;
}

.mobile_menu ul li a{
	display:block;
	padding:14px 5px;
	font-size:16px;
	text-decoration:none;
	color:#333;
}

/* 모바일 서브 */
.mobile_menu ul li .sub{
	display:none;
	padding-left:10px;
}

.mobile_menu ul li .sub li a{
	font-size:14px;
	color:#666;
	padding:10px 5px;
}


/* ---------------------------
Banner Slider
--------------------------- */

.banner{

	margin:80px 0;

	display:flex;
	justify-content:center;
}

.banner_slider{

	position:relative;

	width:100%;
	max-width:1080px;

	overflow:hidden;
}

.banner_slides{

	display:flex;

	transition:transform .6s ease;

}

.banner_slide{

	min-width:100%;
}

.banner_slide img{

	width:100%;
	display:block;
}

/* pagination */

.banner_pagination{

	position:absolute;

	bottom:12px;
	left:50%;

	transform:translateX(-50%);

	display:flex;
	gap:8px;

	z-index:5;
}

.banner_pagination span{

	width:10px;
	height:10px;

	border-radius:50%;

	background:rgba(255,255,255,0.5);

	cursor:pointer;
}

.banner_pagination span.active{

	background:#fff;
}


/* ---------------------------
Responsive
--------------------------- */

@media(max-width:640px){

	.gnb{
		display:none;
	}

	.hamburger{
		display:block;
	}

	.key_text h2{
		font-size:18px;
	}

	.key_text h1{
		font-size:36px;
	}

	.key_text p{
		font-size:16px;
	}
	
	.banner_slider{

		width:80%;
	}

}