@charset "utf-8";

@import url('default.css'); /* 기본설정 */
@import url('layout.css'); /* 사이트 세부설정 */

.quick-top { display: none !important; }

#sidenav { position: absolute; top:50%; left: 80px; transform: translatey(-50%); z-index: 111; }
#sidenav li { position: relative; }
#sidenav li ~ li { margin-top: 30px; }
#sidenav li a { display: block; width: 8px; height: 8px; border-radius: 10px; background-color: #fff; }
#sidenav li.active a { width: 24px; }
#sidenav li.nav2 a { border: 1px solid #aaa; background: none; }
#sidenav li.nav3 a { background-color: #13193f; }

#header.dark { transform: translatey(-50%); background-color: #111; }
#sidenav.dark a { background-color: #111; }

.sec1 { position: relative; }
.sec1 .cont { position: absolute; top: 35%; left: 0; width: 100%; z-index: 333; }
.sec1 .cont .text { width: 100%; font-size: 50px; font-weight: 700; color: #fff; line-height: 69px; text-align: center; }
.sec1 .cont .search { display: flex; width: 790px; margin: 70px auto 0 auto; border: 5px solid #b1c2f5; }
.sec1 .cont .search input { width: calc(100% - 88px); height: 68px; padding-left: 40px; font-size: 25px; color: #fff; border: none; background: none; }
.sec1 .cont .search a { display: block; padding: 15px 25px; font-size: 0; line-height: 0; }
.sec1 .cont .search button { display: block; padding: 15px 25px; font-size: 0; line-height: 0; border: none; }
.sec1 .scroll { position: absolute; bottom: 100px; left: 50%; font-size: 11px; font-weight: 500; color: #fff; line-height: 20px; transform: translatex(-50%); animation: ani1 2s Infinite; z-index: 777; }
.sec1 .scroll span { display: block; margin-top: 10px; font-size: 0; line-height: 0; text-align: center; }
.sec1 .video { overflow: hidden; position: relative; height: 100%; }
.sec1 .video .dark { position: absolute; top: 0; left: 0; width: 100%; min-height: 100%; background: rgba(0,0,0,0.6); z-index: 222; }
.sec1 .video video { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%); z-index: 111; }

@keyframes ani1 {
	0% { margin-bottom: 0; }
	50% { margin-bottom: 50px; }
	100% { margin-bottom: 0; }
}

.sec2 { position: relative; }
.sec2 .cont { position: absolute; top: 25%; left: 50%; width: 1400px; z-index: 333; transform: translatex(-50%); }
.sec2 h2 { position: relative; padding-bottom: 20px; font-size: 24px; font-weight: 400; color: #000; line-height: 33px; }
.sec2 h2:before { content: ''; position: absolute; bottom: 0; left: 2px; width: 40px; height: 2px; background: rgba(0,0,0,0.6); }
.sec2 .page { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 190px; z-index: 1; }
.sec2 .page p { font-size: 14px; font-weight: 800; color: #333; line-height: 19px; }
.sec2 .page p span { color: #b7265c; }
.sec2 .page .line { position: relative; width: 220px; height: 3px; margin: 0 20px; background-color: rgba(0,0,0,0.36); }
.sec2 .page .line span { position: absolute; top: 0; left: 0; width: 20%; height: 3px; background-color: #b7265c; }
.sec2 .page .btn { font-size: 0; line-height: 0; }
.sec2 .page .btn a { display: inline-block; margin-left: 20px; }
.sec2 .video { overflow: hidden; position: relative; height: 100%; }
.sec2 .video video { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%); z-index: 111; }

.swiper { position: relative; }
.swiper-slide { }
.swiper-slide .text { display: flex; flex-wrap: wrap; justify-content: center; width: 80%; margin: 75px auto 0 auto; }
.swiper-slide .text h3 { width: 100%; font-size: 60px; font-weight: 800; color: #000; line-height: 65px; text-align: center; }
.swiper-slide .text p { margin-top: 80px; font-size: 30px; font-weight: 300; color: #000; line-height: 44px; }
.swiper-slide .img { width: 650px; font-size: 0; line-height: 0; } 
.swiper-button-prev { top: 300px !important; left: 0 !important; width: 58px; font-size: 24px; font-weight: 300; color: #282828 !important; line-height: 58px; text-align: center; border-radius: 50%; border: 1px solid rgba(78,78,78,0.44); z-index: 999; }
.swiper-button-next { top: 300px !important; right: 0 !important; width: 58px; font-size: 24px; font-weight: 300; color: #282828 !important; line-height: 58px; text-align: center; border-radius: 50%; border: 1px solid rgba(78,78,78,0.44); z-index: 999; }

.sec3 { position: relative; width: 100%; background: #f6f6f6; }
.sec3 .top { position: absolute; top: 20px; left: 50%; width: 500px; margin-left: -700px; z-index: 999; }
.sec3 .top h2 { position: relative; padding-bottom: 20px; font-size: 24px; font-weight: 400; color: #000; line-height: 33px; }
.sec3 .top h2:before { content: ''; position: absolute; bottom: 0; left: 2px; width: 40px; height: 2px; background: rgba(0,0,0,0.6); }
.sec3 .text { margin-top: 70px; font-size: 38px; font-weight: 800; color: #000; line-height: 52px; z-index: 222; }
.sec3 .list { display: flex; margin-left: calc(50% - 220px); }
.sec3 .list li { width: 468px; margin-right: 20px; padding: 20px; }
.sec3 .list li a { display: block; padding: 45px 40px; border-radius: 20px; border: 1px solid #eee; box-shadow: 0 0 20px rgba(0,0,0,0.1); }
.sec3 .list li a:hover { border: 1px solid #b7265c; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.sec3 .list li a .classify { height: 29px; font-size: 20px; font-weight: 700; color: #b7265c; line-height: 29px; overflow: hidden; display: block; white-space: nowrap; text-overflow: ellipsis; }
.sec3 .list li a .tit { height: 74px; margin-top: 30px; font-size: 28px; font-weight: 700; color: #020202; line-height: 37px; overflow: hidden; display: -webkit-box; white-space: initial; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.sec3 .list li a .txt { height: 200px; margin-top: 50px; font-size: 16px; font-weight: 300; color: #808080; line-height: 25px; overflow: hidden; display: -webkit-box; white-space: initial; text-overflow: ellipsis; -webkit-line-clamp: 8; -webkit-box-orient: vertical; word-break: break-word; }
.sec3 .list li a .date { margin-top: 30px; font-size: 16px; font-weight: 600; color: #808080; line-height: 25px; }

.sec4 { position: relative; width: 100%; background: url('../images/main/sec4_bg.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.sec4 .wrap { display: flex; justify-content: space-between; }
.sec4 .contact { width: 500px; }
.sec4 .contact h2 { font-size: 40px; font-weight: 800; color: #fff; line-height: 45px; }
.sec4 .contact .infor { margin-top: 45px; padding: 40px 20px 0 20px; border-top: 1px solid rgba(255,255,255,0.35); }
.sec4 .contact .infor li { display: flex; }
.sec4 .contact .infor li ~ li { margin-top: 15px; }
.sec4 .contact .infor li .tit { width: 110px; font-size: 18px; color: #fff; line-height: 41px; }
.sec4 .contact .infor li .inp { width: calc(100% - 110px); }
.sec4 .contact .infor li .inp input { width: 100%; height: 41px; padding-left: 15px; font-size: 16px; color: #fff; border: none; background: rgba(255,255,255,0.4); }
.sec4 .contact .infor li .inp input::placeholder { color: #fff; }
.sec4 .contact .infor li .inp textarea { width: 100%; height: 111px; padding: 8px 15px; font-size: 16px; font-weight: 400; color: #fff; line-height: 25px; border: none; background: rgba(255,255,255,0.4); }
.sec4 .contact .consent { margin: 25px 0 0 20px; font-size: 16px; font-weight: 300; color: #fff; line-height: 25px; }
.sec4 .contact .consent span { display: block; margin-bottom: 10px; }
.sec4 .contact .consent input { width: 21px; height: 21px; margin: 2px 10px 2px 0; border: none; vertical-align: top; }
.sec4 .contact .consent a { display: inline-block; margin-left: 10px; color: #fff; line-height: 25px; }
.sec4 .contact .consent a:hover { text-decoration: underline; }
.sec4 .contact .btn { margin-top: 35px; }
.sec4 .contact .btn a { display: block; font-size: 24px; font-weight: 700; color: #fff; line-height: 73px; text-align: center; background-color: #b7265c; }
.sec4 .contact .btn button { display: block; width: 100%; font-size: 24px; font-weight: 700; color: #fff; line-height: 73px; text-align: center; background-color: #b7265c; border: none; }
.sec4 .map { width: 660px; margin-top: 90px; }
.sec4 .map .img { overflow: hidden; font-size: 0; line-height: 0; border-radius: 10px; }
.sec4 .map .cont { margin-top: 35px; font-size: 20px; font-weight: 300; color: #fff; line-height: 29px; }
.sec4 .map .cont span { display: block; margin-bottom: 10px; font-size: 28px; font-weight: 600; color: #9fb8ff; line-height: 37px; }

@media screen and (max-width: 1400px) {
	.wrap { width: 1200px; margin: 0 auto; }

	#sidenav { display: none; }

	.sec2 .cont { width: 1200px; }

	.sec3 .top { margin-left: -600px; }
	.sec3 .list { margin-left: calc(50% - 120px); }

	.sec4 .map { width: 600px; }
	.sec4 .map .img img { width: 100%; }
}

@media screen and (max-width: 1200px) {
	.wrap { width: 980px; margin: 0 auto; }

	.sec2 .cont { width: 980px; }

	.swiper-slide .text h3 { font-size: 45px; line-height: 54px; }
	.swiper-slide .text p { margin-top: 65px; font-size: 24px; line-height: 38px; }

	.sec3 .top { margin-left: -490px; }
	.sec3 .list { margin-left: calc(50% - 10px); }

	.sec4 .contact { width: 450px; }
	.sec4 .map { width: 450px; }
}

@media screen and (max-width: 980px) {
	.wrap { width: 750px; margin: 0 auto; }

	.sec1 .cont .search { width: 740px; }

	.sec2 .cont { width: 750px; }

	.swiper-button-prev { display: none !important; }
	.swiper-button-next { display: none !important; }

	.sec3 .top { position: static; width: auto; margin-left: 0; }
	.sec3 .text { margin-top: 75px; font-size: 30px; line-height: 41px; }
	.sec3 .text br { display: none; }
	.sec3 .list { margin-left: calc(50% - 395px); margin-top: 50px; }
	.sec3 .list li a .txt { margin-top: 30px; -webkit-line-clamp: 4; }

	.sec4 .contact { width: 100%; }
	.sec4 .map { display: none; }
}

@media screen and (max-width: 768px) {
	.wrap { width: auto; margin: 0 20px; }

	.sec1 .cont { top: 33%; }
	.sec1 .cont .text { width: auto; padding: 0 30px; font-size: 30px; line-height: 39px; }
	.sec1 .cont .search { width: auto; margin: 45px 20px 0 20px; border: 3px solid #b1c2f5; }
	.sec1 .cont .search input { width: calc(100% - 55px); height: 49px; padding-left: 20px; font-size: 18px; }
	.sec1 .cont .search a { padding: 12px 15px; }
	.sec1 .cont .search a img { height: 25px; }
	.sec1 .cont .search button { padding: 12px 15px; }
	.sec1 .cont .search button img { height: 25px; }
	.sec1 .scroll { bottom: 40px; }

	@keyframes ani1 {
		0% { margin-bottom: 0; }
		50% { margin-bottom: 40px; }
		100% { margin-bottom: 0; }
	}

	.sec2 .cont { left: 20px; right: 20px; width: auto; transform: translatex(0); }
	.sec2 h2 { padding-bottom: 15px; font-size: 18px; line-height: 27px; }
	.sec2 h2:before { width: 30px; }
	.sec2 .page { margin-top: 75px; }
	.sec2 .page p { font-size: 13px; line-height: 16px; }
	.sec2 .page .line { width: 120px; height: 2px; margin: 0 15px; }
	.sec2 .page .line span { height: 2px; }
	.sec2 .page .btn a { margin-left: 15px; }
	.sec2 .page .btn a img { height: 10px; }

	.swiper-slide .text { margin-top: 55px; }
	.swiper-slide .text h3 { font-size: 20px; line-height: 29px; }
	.swiper-slide .text p { margin-top: 30px; font-size: 14px; line-height: 21px; }
	.swiper-slide .img { margin: 20px 0 0 0; }
	.swiper-slide .img img { max-width: 250px; }

	.sec3 .top h2 { margin-top: 40px; padding-bottom: 15px; font-size: 18px; line-height: 27px; }
	.sec3 .top h2:before { width: 30px; }
	.sec3 .text { margin-top: 25px; font-size: 18px; line-height: 27px; }
	.sec3 .list { margin-left: 0; margin-top: 25px; }
	.sec3 .list li { width: 238px; margin-right: -20px; padding: 20px; }
	.sec3 .list li a { padding: 15px 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
	.sec3 .list li a .classify { height: 20px; font-size: 13px; line-height: 20px; }
	.sec3 .list li a .tit { height: 44px; margin-top: 10px; font-size: 15px; line-height: 22px; }
	.sec3 .list li a .txt { height: 160px; margin-top: 10px; font-size: 13px;line-height: 20px; }
	.sec3 .list li a .date { margin-top: 10px; font-size: 13px; line-height: 20px; }

	.sec4 .contact h2 { margin-top: 40px; font-size: 18px; font-weight: 400; line-height: 27px; }
	.sec4 .contact .infor { margin-top: 15px; padding: 20px 10px 0 10px; }
	.sec4 .contact .infor li ~ li { margin-top: 10px; }
	.sec4 .contact .infor li .tit { width: 80px; font-size: 14px; line-height: 33px; }
	.sec4 .contact .infor li .inp { width: calc(100% - 80px); }
	.sec4 .contact .infor li .inp input { height: 33px; padding-left: 10px; font-size: 14px; }
	.sec4 .contact .infor li .inp textarea { height: 80px; padding: 5px 10px; font-size: 14px; line-height: 23px; }
	.sec4 .contact .consent { margin: 25px 0 0 10px; font-size: 14px; line-height: 23px; }
	.sec4 .contact .consent span { display: block; margin-bottom: 5px; }
	.sec4 .contact .consent input { width: 17px; height: 17px; margin: 3px 10px 3px 0; }
	.sec4 .contact .consent a { margin-left: 10px; line-height: 23px; }
	.sec4 .contact .btn { margin-top: 25px; }
	.sec4 .contact .btn a { font-size: 16px; line-height: 49px; }
	.sec4 .contact .btn button { font-size: 16px; line-height: 49px; }
}

@media screen and (max-width: 480px) {
	.wrap { width: auto; margin: 0 20px; }

	.swiper-slide .text p { height: auto; max-width: 320px; text-align: center; }
	.swiper-slide .text p br { display: none; }
}