@charset "utf-8";

/* main */

main {
	position: relative;
	z-index: 1;
}

	main section {
		position: relative;
	}

.sub_only {
	display: none;
}

.inner {
	width: 1400px;
	margin: 0 auto;
	position: relative;
}

.main_section {
	min-height: 100vh;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}

	.main_section .inner {
		padding-top: 90px;
	}

	.main_section.fp-auto-height {
		min-height: 0;
	}

.m_sec1 .main_bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

	.m_sec1 .main_bg li {
		position: relative;
		width: 100%;
		height: 100%;
	}

		.m_sec1 .main_bg li.video_wrap::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, .4);
			z-index: 1;
		}

	.m_sec1 .main_bg video {
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		width: 100%;
		height: 100vh;
		object-fit: cover;
		z-index: 0;
	}

.m_sec1 .main_title {
	position: absolute;
	top: 250px;
	left: 0;
	color: #fff;
	text-shadow: 0 0 10px rgba(0, 0, 0, .3);
}

	.m_sec1 .main_title h2 {
		font-size: 2.5rem;
		line-height: 1.4;
	}

		.m_sec1 .main_title h2 strong {
			font-size: 5.5rem;
			font-weight: 900;
		}

	.m_sec1 .main_title p {
		margin-top: 30px;
		font-size: 1.25rem;
	}

.swiper_ctrl {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	align-items: center;
	margin-top: 40px;
}
.m_sec1 .main_title{top:320px}
.m_sec1 .main_title h2{line-height:1.3;font-size:1.5rem}
.m_sec1 .main_title h2 strong{font-size:4.5rem}
.m_sec1 .main_title p{margin-top:20px}
.swiper_ctrl{margin-top:30px}

	.swiper_ctrl .toggle_btn {
		margin-left: 30px;
		z-index: 11;
	}

		.swiper_ctrl .toggle_btn button {
			display: none;
			position: relative;
			z-index: 0;
		}

		.swiper_ctrl .toggle_btn .stop {
			width: 15px;
			height: 23px;
			border-left: #fff 4px solid;
			border-right: #fff 4px solid;
		}

		.swiper_ctrl .toggle_btn .play {
			width: 15px;
			height: 23px;
			border-left: #fff 15px solid;
			border-top: transparent 11px solid;
			border-bottom: transparent 11px solid;
		}

			.swiper_ctrl .toggle_btn .stop.on,
			.swiper_ctrl .toggle_btn .play.on {
				display: inline-block;
				z-index: 5;
			}

	.swiper_ctrl .count {
		width: auto;
		margin: 1rem;
		font-size: 1.875rem;
		font-weight: 200;
	}

		.swiper_ctrl .count .swiper-pagination-current {
			font-weight: 500;
			color: #f7a600;
		}

	.swiper_ctrl .arrows {
		position: relative;
	}

		.swiper_ctrl .arrows::after {
			content: "";
			display: block;
			width: 1.25rem;
			height: 1.25rem;
			border-top: 3px solid #fff;
			border-right: 3px solid #fff;
		}

	.swiper_ctrl .prev {
		transform: rotate(-135deg);
	}

	.swiper_ctrl .next {
		transform: rotate(45deg);
	}
/*
.swiper_ctrl .prev::after{ left: 55%; transform: translate(-50%, -50%) rotate(-135deg); }
.swiper_ctrl .next::after{ left: 45%; transform: translate(-50%, -50%) rotate(45deg); }
*/
.m_sec1 .notice_box.active {
	overflow: hidden;
	position: absolute;
	top: 570px;
	right: 0;
	width: 620px;
	padding: 57px 60px 47px;
	background: rgba(0, 0, 0, .52);
	border-radius: 20px;
	color: #fff;
}

	.m_sec1 .notice_box .special_font {
		font-size: 1.5rem;
		font-weight: 900;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.m_sec1 .notice_box .article {
		margin: 15px 0;
		font-size: .94rem;
		font-weight: 300;
		color: #ccc;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

.m_sec1 .scroll_icon {
	position: absolute;
	top: 83%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 23px;
	height: 36px;
	background: url('../images/scroll_icon.png') no-repeat 50% 50%;
	z-index: 99;
	animation: float 2s infinite;
}

.sec_title {
	margin: 95px 0 35px;
	font-family: 'paybooc', 'Pretendard';
	font-size: 2.5rem;
}

	.sec_title strong {
		font-weight: 900;
	}

.m_sec2 .sec_nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

	.m_sec2 .sec_nav li {
		position: relative;
		width: 33.333%;
		height: 250px;
		padding-top: 55px;
		background: rgba(0, 0, 0, .4);
		text-align: center;
		transition: .3s;
		z-index: 0;
	}

		.m_sec2 .sec_nav li::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(135deg, #3aaa35, #314b9a);
			opacity: 0;
			transition: .3s;
		}

		.m_sec2 .sec_nav li a {
			background-image: url('../images/main_sec2_box_bg.png');
			background-repeat: no-repeat;
			opacity: 0;
			transition: .3s;
			z-index: 3;
		}

		.m_sec2 .sec_nav li p {
			position: relative;
			text-align: center;
			color: #fff;
			z-index: 2;
		}

		.m_sec2 .sec_nav li img {
			position: relative;
			z-index: 2;
		}

		.m_sec2 .sec_nav li p.big_text {
			margin-top: 15px;
		}

		.m_sec2 .sec_nav li p.small_text {
			margin-top: 13px;
			opacity: 0;
			transition: .3s;
		}

		.m_sec2 .sec_nav li:hover p.small_text {
			opacity: 1;
		}

		.m_sec2 .sec_nav li:hover a {
			opacity: 1;
		}

		.m_sec2 .sec_nav li:hover::after {
			opacity: 1;
		}

		.m_sec2 .sec_nav li:hover {
			padding-top: 50px;
		}

		.m_sec2 .sec_nav li:nth-child(1),
		.m_sec2 .sec_nav li:nth-child(2),
		.m_sec2 .sec_nav li:nth-child(3) {
			border-bottom: 1px solid rgba(255, 255, 255, .2);
		}

			.m_sec2 .sec_nav li:nth-child(2)::before,
			.m_sec2 .sec_nav li:nth-child(3)::before,
			.m_sec2 .sec_nav li:nth-child(5)::before,
			.m_sec2 .sec_nav li:nth-child(6)::before {
				content: "";
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
				width: 1px;
				height: 65%;
				background: rgba(255, 255, 255, .2);
			}


.m_sec3 .inner {
	background: url('../images/main_sec3_bg.png') no-repeat 100% 190px;
}

.m_sec3 .tab_wrap {
	width: 48.75%;
}

.m_sec3 .tab_btn_wrap {
	display: flex;
	flex-wrap: wrap;
}

	.m_sec3 .tab_btn_wrap li {
		position: relative;
	}

		.m_sec3 .tab_btn_wrap li::after {
			content: "";
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: -30px;
			width: 2px;
			height: 60%;
			background: #ccc;
		}

		.m_sec3 .tab_btn_wrap li + li {
			margin-left: 60px;
		}

		.m_sec3 .tab_btn_wrap li:last-child::after {
			display: none;
		}

		.m_sec3 .tab_btn_wrap li a {
			font-size: 1.875rem;
			transition: 0s;
		}

		.m_sec3 .tab_btn_wrap li.active a {
			font-weight: 900;
		}

		.m_sec3 .tab_btn_wrap li.active::before {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 50%;
			background: rgba(29, 58, 143, .15);
		}

.m_sec3 .tab_box_wrap {
	margin-top: 30px;
}

	.m_sec3 .tab_box_wrap > li > a {
		position: absolute;
		top: -60px;
		right: 0;
		color: #8f8f8f;
	}

.m_sec3 .notice_list {
	border-top: 2px solid #000;
	height: 446px;
}

	.m_sec3 .notice_list li {
		display: flex;
		gap: 30px;
		align-items: center;
		padding: 20px 0;
		border-bottom: 1px solid #ccc;
	}

		.m_sec3 .notice_list li .date {
			width: 80px;
			height: 70px;
			background: #1d3a8f;
			border-radius: 15px;
			font-size: 1rem;
			font-weight: 300;
			color: #fff;
			text-align: center;
			padding-top: 12px;
			line-height: 1.2;
		}

			.m_sec3 .notice_list li .date b {
				font-size: 1.2rem;
			}

		.m_sec3 .notice_list li > a {
			display: block;
			width: calc(100% - 110px);
		}

			.m_sec3 .notice_list li > a b {
				display: block;
				font-size: 1.25rem;
				font-weight: 600;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.m_sec3 .notice_list li > a span {
				display: block;
				margin-top: 4px;
				font-size: .94rem;
				font-weight: 300;
				color: #666;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

.m_sec3 .banner_wrap {
	width: 47.5%;
}

	.m_sec3 .banner_wrap > div {
		height: 210px;
		margin-top: 28px;
		padding: 40px 60px;
		border-radius: 15px;
		color: #fff;
		background-size: cover;
	}

		.m_sec3 .banner_wrap > div .special_font {
			font-size: 1.56rem;
			font-weight: 700;
		}

		.m_sec3 .banner_wrap > div .article {
			margin: 15px 0 20px;
		}

		.m_sec3 .banner_wrap > div .btn_style {
			margin: 0;
			padding: 10px 20px 8px;
			color: #fff;
		}

.m_sec4 .inner {
	height: 100%;
}

.m_sec4 .img_box {
	width: 100%;
	height: 580px;
	position: absolute;
	bottom: 0;
	z-index: -1;
}

.m_sec4 .orange_box {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 700px;
	padding: 50px 0;
	border-radius: 0 90px 0 0;
	background: #f7a600;
	color: #fff;
}

	.m_sec4 .orange_box .special_font {
		margin-bottom: 25px;
		padding-left: 70px;
		font-size: 2.5rem;
		font-weight: 900;
	}

	.m_sec4 .orange_box ul {
		display: flex;
		flex-wrap: wrap;
		position: relative;
	}

		.m_sec4 .orange_box ul::after {
			content: "";
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 50%;
			width: 1px;
			height: 85%;
			background: rgba(255, 255, 255, .3);
		}

		.m_sec4 .orange_box ul li {
			width: 50%;
			padding: 10px 0 10px 70px;
			display: flex;
			align-items: center;
			font-weight: 500;
		}

			.m_sec4 .orange_box ul li b {
				width: 60px;
				margin: 0 20px;
				font-weight: 500;
			}



@media screen and (max-width: 1600px) {
	.inner {
		width: 80%;
	}
	.m_sec1 .scroll_icon{top:93%}
}

@media screen and (max-width: 1400px) {
	.m_sec1 .main_title {
		left: 40px;
	}
	.m_sec1 .notice_box.active{width:500px;padding:30px}

	.m_sec3 .tab_wrap {
		width: 44%;
	}

	.m_sec3 .notice_list li {
		gap: 20px;
	}

	.m_sec3 .tab_btn_wrap li a {
		font-size: 1.4rem;
	}

	.m_sec3 .tab_btn_wrap li + li {
		margin-left: 36px;
	}

	.m_sec3 .tab_btn_wrap li::after {
		right: -18px;
	}

	.m_sec3 .tab_box_wrap {
		margin-top: 20px;
	}

		.m_sec3 .tab_box_wrap > li > a {
			top: -42px;
		}

	.m_sec3 .notice_list li {
		padding: 15px 0;
	}

		.m_sec3 .notice_list li .date {
			width: 63px;
			height: 55px;
			padding-top: 7px;
			border-radius: 10px;
		}

			.m_sec3 .notice_list li .date b {
				font-size: 1rem;
			}

		.m_sec3 .notice_list li > a {
			width: calc(100% - 100px);
		}

			.m_sec3 .notice_list li > a b {
				font-size: 1.1rem;
			}

	.m_sec3 .banner_wrap {
		width: 52%;
	}

		.m_sec3 .banner_wrap > div {
			padding: 35px 30px;
		}
}

@media screen and (max-width: 1024px) {
	.m_sec1 .inner {
	display:flex;flex-direction:column;justify-content:center;align-items:center;
	height:100%;
	}
	.main_section .inner{padding-top:60px}
	.swiper_ctrl{justify-content:center}
	.m_sec1 .main_title {
		position:static;
		width: 100%;
		transform:translate(0);
		text-align: center;
	}

	.m_sec1 .notice_box.active {
		position:static;
		right: auto;
		left: 0;
		width: calc(100% - 60px);
		padding: 5vw;
		margin-top:30px
	}
	.m_sec1 .scroll_icon{top:90%}

	.m_sec3 .tab_wrap {
		width: 100%;
	}

	.m_sec3 .notice_list {
		height: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

		.m_sec3 .notice_list li {
			width: 49%;
			gap: 15px;
			padding: 13px 0;
		}

			.m_sec3 .notice_list li .date {
				width: 60px;
				height: 52px;
			}

			.m_sec3 .notice_list li > a {
				width: calc(100% - 90px);
			}

	.m_sec3 .banner_wrap {
		width: 100%;
		margin-top: 45px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

		.m_sec3 .banner_wrap > div {
			width: 49%;
			height: auto;
			padding: 4.5vw 3vw 2vw 3vw;
			margin-top: 0;
		}

			.m_sec3 .banner_wrap > div .article {
				margin: 13px 0 10px;
			}

			.m_sec3 .banner_wrap > div .btn_style {
				margin: 5px 0;
			}

	.sec_title {
		font-size: 2.3rem;
		margin-top: 80px;
	}

	#fp-nav.left {
		left: 20px !important;
	}
}


@media screen and (max-width:800px) {
	.sec_title {
		font-size: 2rem;
	}

	.m_sec2 .sec_nav li {
		height: 190px;
		padding-top: 55px;
	}

		.m_sec2 .sec_nav li:hover {
			padding-top: 45px;
		}

		.m_sec2 .sec_nav li p.big_text {
			margin-top: 15px;
		}

		.m_sec2 .sec_nav li p.small_text {
			margin-top: 5px;
		}

	.big_text {
		font-size: 1.2rem;
	}


	.m_sec3 .notice_list li {
		gap: 10px;
	}

		.m_sec3 .notice_list li .date {
			width: 40px;
			height: 40px;
			padding-top: 5px;
			border-radius: 5px;
			font-size: .7rem;
		}

			.m_sec3 .notice_list li .date b {
				font-size: 1rem;
			}

		.m_sec3 .notice_list li > a {
			width: calc(100% - 50px);
		}

			.m_sec3 .notice_list li > a b {
				font-size: 1.1rem;
			}

			.m_sec3 .notice_list li > a span {
				margin-top: 0;
			}
}


@media screen and (max-width:640px) {
	.inner{width:90%}

	.m_sec1 .main_title h2 {
		font-size: 1.5rem;
	}

		.m_sec1 .main_title h2 strong {
			font-size: 4.5rem;
		}

	.m_sec1 .scroll_icon {
		top: 90%;
	}
	.m_sec1 .notice_box.active{width:100%;padding:20px}

	.sec_title {
		margin-top: 30px;
		font-size: 1.5rem;
	}

	.m_sec2 .sec_nav li {
		width: 50%;height:auto;padding-top:20px
	}
		.m_sec2 .sec_nav li:hover{
			padding-top:30px
		}
		.m_sec2 .sec_nav li p.big_text{margin-top:10px;font-size:1.3rem}

		.m_sec2 .sec_nav li:nth-child(4) {
			border-bottom: 1px solid rgba(255, 255, 255, .2);
		}

			.m_sec2 .sec_nav li:nth-child(4)::before {
				content: "";
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
				width: 1px;
				height: 65%;
				background: rgba(255, 255, 255, .2);
			}

	.m_sec3 .tab_btn_wrap li a {
		font-size: 1.1rem;
	}

	.m_sec3 .tab_btn_wrap li + li {
		margin-left: 28px;
	}

	.m_sec3 .tab_btn_wrap li::after {
		right: -14px;
	}

	.m_sec3 .notice_list li {
		width: 100%;
	}

	.m_sec3 .banner_wrap > div {
		padding: 20px 20px 10px 20px;
	}

		.m_sec3 .banner_wrap > div .special_font {
			font-size: 1.2rem;
		}

		.m_sec3 .banner_wrap > div .article {
			display: none;
		}

		.m_sec3 .banner_wrap > div .btn_style {
			margin-bottom: 0;
			padding: 5px 14px 3px;
		}


	#fp-nav.left {
		left: 0 !important;
	}

	#fp-nav ul li a.active {
		padding: 3px !important;
	}

	.fp-tooltip {
		display: none !important;
	}
	#footer .inner nav ul{gap:15px}
	#footer .inner nav ul li + li::after{left:-7px}
}

@media screen and (max-width: 480px) {
	.m_sec1 .main_title h2 {
		font-size: 1.5rem;
	}

	.m_sec1 .main_title p {
		max-width: 80%;
		margin: 20px auto;
		font-size: 1.1rem;
	}

	.m_sec1 .notice_box.active {
		padding: 8vw 5vw;
	}

		.m_sec1 .notice_box .special_font {
			font-size: 1.2rem;
		}

		.m_sec1 .notice_box .article {
			-webkit-line-clamp: 3;
		}

	.m_sec2 .sec_nav li {
		height: 140px;
		padding-top: 25px;
	}

		.m_sec2 .sec_nav li:hover {
			padding-top: 20px;
		}

		.m_sec2 .sec_nav li img {
			height: 30px;
		}
		

	.m_sec3 .banner_wrap {
		margin-top: 10px;
	}
	.m_sec3 .notice_list li{padding:8px 0}
	.m_sec3 .tab_btn_wrap li + li{margin-left:15px}
	.m_sec3 .tab_btn_wrap li::after{right:-9px}

	.m_sec3 .banner_wrap > div {
		width: 100%;
		margin-top: 10px;
		padding: 10px;
		border-radius: 10px;
	}
}


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