@charset "UTF-8";

/* 리셋 */

* {
	margin: 0;
	padding: 0;
	color: #333;
	font-size: 16px;
	font-family: 'Noto Sans KR', sans-serif;
}

em, address {
	font-style: normal;
}

li {
	list-style: none;
}

a {
	text-decoration: none;
}

img {
	display: block;
}

.ir_so {
	display: none;
}

.clearfix::before, .clearfix::after {
	clear: both;
	display: block;
	content: "";
}




/* 탑버튼 */

a#MOVE_TOP_BTN {
    position: fixed;
    right: 3%;
    bottom: 4%;
    display: none;
    z-index: 999;
	width: 60px;
	height: 60px;
}

a#MOVE_TOP_BTN img {
	width: 60px;
	height: 60px;
}


/* 전체 레이아웃 */

#wrap {
	width: 100%;
	margin: 0 auto;
}

#header {
	width: 100%;
	height: 120px;
	background-color: rgba(0,0,0,.9);
	position: fixed;
	opacity: 90%;
	z-index: 9999;
}

#banner {
	width: 100%;
	height: 850px;
}

#content1 {
	width: 100%;
}

#content2 {
	width: 100%;
}

#content3 {
	width: 100%;
}

#footer {
	width: 100%;
	height: 290px;
	background-color: #333;
}

.container {
	width: 1440px;
	margin: 0 auto;
}

.row {
	
}



/* 헤더 레이아웃 */

.header {
	width: 100%;

}

.header .logo {
	float: left;
	width: 348px;
	height: 120px;
	display: flex;
	align-items: center;
}

.header .logo a {
	display: block;
}

.header .logo a img {
	
}


.header .nav {
	float: right;
}

.header .nav ul {
	
}

.header .nav ul li {
	float: left;
	position: relative;
}

.header .nav ul li a {
	display: block;
	width: 182px;
	padding: 48px 0;
	text-align: center;
	color: rgba(255,255,255,.75);
	font-size: 17px;
	font-weight: 700;
	transition: all .25s ease-in-out;
	letter-spacing: 1.2px;
}

.header .nav ul li a:last-child {
	padding-right: 0;
}

.header .nav ul li a:hover {
	color: #c61818;
}

.header .nav ul li .submenu {
	display: none;
	position: absolute;
	top: 120px;
	left: 0;
	z-index: 1000;
	width: 100%;
	background-color: rgba(0,0,0,.5);
}

.header .nav ul li .submenu li {

}

.header .nav ul li .submenu li a {
	display: block;
	color: rgba(249,249,249,.95);
	font-size: 14.5px;
	padding: 18px 0;
	letter-spacing: 1.2px;
}

.header .nav ul li .submenu li a:hover {
	color: #ef5353;
	background-color: rgba(249,249,249,.7);
}

.header .nav ul li a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0px;
    height: 4px;
    background: #c61818;
    transition: all 0.25s ease-in-out;
}

.header .nav ul>li:hover>a::after {
	width: 100%;
	left: 0;
}



#barMenu {
	display: none;
	position: absolute;
	right: 25px;
	top: 48px;
	width: 40px;
	height: 25px;
	z-index: 100;
}

#barMenu .bar {
	width: 40px;
	height: 4px;
	border-radius: 3px;
	background-color: #fff;
	position: relative;
}

#barMenu .bar::before {
	content: "";
	position: absolute;
	top: 10px;
	right: 0;
	width: 80%;
	height: 4px;
	border-radius: 3px;
	background-color: #fff;
	opacity: 0.8;
	transition: all .3s ease-in;
}

#barMenu .bar::after {
	content: "";
	position: absolute;
	top: 20px;
	right: 0;
	width: 60%;
	height: 4px;
	border-radius: 3px;
	background-color: #fff;
	opacity: 0.8;
	transition: all .3s ease-in;
}

#barMenu:hover .bar::before {
	width: 100%;
	opacity: 1;
}

#barMenu:hover .bar::after {
	width: 100%;
	opacity: 1;
}

#barMenu .bar.active {
	width: 100%;
	background-color: transparent;
}

#barMenu .bar.active::before {
	width: 100%;
	transform: rotate(45deg);
	top: 10px;
}

#barMenu .bar.active::after {
	width: 100%;
	transform: rotate(-45deg);
	top: 10px;
}






/* 배너 레이아웃 */

#banner {
	width: 100%;
	height: 850px;
	padding-top: 120px;
	background-color: #000;
}

#banner .slide {

}

#banner .slide div {
	position: relative;
}

#banner .slide div p {
	position: absolute;
	bottom: 17.8%;
	left: 0;
	width: 100%;
	text-align: center;
}

#banner .slide div p span.title {
	display: block;
	font-size: 16px;
	letter-spacing: 0.6px;
	font-weight: 700;
	color: white;
	padding: 8px 10px;
	margin-bottom: 30px;
	text-align: center;
	position: relative;
}

#banner .slide div p span.title::after {
	content: "";
	position: absolute;
	bottom: -13px;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 3.2px;
	background-color: #fff;
}

#banner .slide div p em {
	display: block;
	font-size: 48px;
	font-weight: 900;
	color: white;
	transform: translate(80px);
	transition: all 0.7s;
	transition-delay: 0.15s;
	letter-spacing: 1.6px;
}

#banner .slide div p span {
	display: block;
	font-size: 18px;
	letter-spacing: 0.6px;
	transform: translate(80px);
	transition: all 0.7s;
	transition-delay: 0.5s;
	opacity: .3;
	padding-top: 50px;
	color: white;
}

#banner .slide div.slick-active p em {
	transform: translate(0);
	opacity: 0.98;
}

#banner .slide div.slick-active p span {
	transform: translate(0);
	opacity: 0.9;
}


#banner .slide div.img1 {
	background: url(../img/banner01.png) center center;
	background-size: cover;
	width: 100%;
	height: 100%;
}

#banner .slide div.img2 {
	background: url(../img/banner02.png) center center;
	background-size: cover;
	width: 100%;
	height: 100%;
}

#banner .slide div.img3 {
	background: url(../img/banner03.png) center center;
	background-size: cover;
	width: 100%;
	height: 100%;
}

#banner .slide .slick-dots {
	position: absolute;
	bottom: 6%;
	left: 50%;
	transform: translateX(-50%);
}

#banner .slide .slick-dots li {
	display: inline-block;
	margin: 12px;
	width: 10px;
	height: 10px;
}

#banner .slide .slick-dots li button {
	display: block;
	background-color: rgba(255,255,255,.5);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	font-size: 0;
	line-height: 0;
	margin-top: 4px;
	border:0
}

#banner .slide .slick-dots li.slick-active button {
	background-color: #ef5353;
}






/* 콘텐츠1 레이아웃 */

.content1 {
	width: 100%;
	margin: 77px 0;
	overflow: hidden;
}

.content1 .cont1 {
	float: left;
	margin-right: 16px;
}

.content1 .cont1 .pc {
	
}

.content1 .cont1 .pc img {
	
}

.content1 .cont1 .m1480 {
	display: none;
	width: 100%;
	background: url(../img/cont1_bg.png) no-repeat center center;
	height: 300px;
	margin-bottom: 20px;
}

.content1 .cont1 .m1480 h3.cont1_title {
	display: block;
	font-weight: 700;
	font-size: 23px;
	padding: 82px 0 50px;
	position: relative;
	color: #000;
}

.content1 .cont1 .m1480 h3.cont1_title::after {
	content: "";
	position: absolute;
	bottom: 25px;
	left: 50%;
	transform: translateX(-50%);
	width: 140px;
	height: 3px;
	background-color: #f00;
}

.content1 .cont1 .m1480 span {
	display: block;
	font-weight: 500;
	font-size: 16px;
	color: #333;
}

.content1 .cont2 {
	float: left;
	width: 712px;
}

.content1 .cont2 ul {
	overflow: hidden;
}

.content1 .cont2 ul li {
	float: left;
	width: 348px;
	height: 165.5px;
	margin-right: 16px;
	background-color: rgba(0,0,0,.8);
	display: flex;
	justify-content: center;
	align-items: center;
}

.content1 .cont2 ul li:first-child, .content1 .cont2 ul li:nth-child(2) {
	margin-bottom: 16px;
}

.content1 .cont2 ul li:nth-child(2n) {
	margin-right: 0;
}

.content1 .cont2 ul li a {
	display: block;
	text-align: center;
}

.content1 .cont2 ul li a:hover span i, .content1 .cont2 ul li a:hover strong {
	color: rgb(255,255,255);
}

.content1 .cont2 ul li a span {
	
}

.content1 .cont2 ul li a span i {
	display: block;
	color: rgba(255,255,255,.6);
	font-size: 30px;
	transition: all 0.25s ease-in-out;
}

.content1 .cont2 ul li a strong {
	display: block;
	color: rgba(255,255,255,.6);
	padding-top: 6px;
	transition: all 0.25s ease-in-out;
}

.content1 .cont2 ul li a em {
	display: block;
	font-size: 13.2px;
	color: rgba(255,255,255,.6);
	padding-top: 10px;
	font-weight: 200;
}



/* 콘텐츠2 레이아웃 */

#content2 {
	background-color: rgba(0,0,0,.02);
}

.content2 {
	padding: 77px 0;
	width: 100%;
	overflow: hidden;
}

.content2 .title {
	display: inline-block;
	font-size: 20px;
	width: 100%;
	text-align: center;
	font-weight: 700;
	position: relative;
}

.content2 .title em {
	display: inline-block;
	font-size: 20px;
	color: #c61818;
	padding-bottom: 104px;
	font-weight: 700;
}

.content2 .title::after {
	content: "";
	position: absolute;
	bottom: 77px;
	left: 50%;
	transform: translateX(-50%);
	width: 140px;
	height: 3px;
	background-color: #c61818;	
}


/*
.content2 .blog1 {}
.content2 .blog1 img {}
.content2 .blog1 .hover {}
.content2 .blog1 .hover img {}
.content2 .blog1 .hover p {}
.content2 .blog1 .hover p em {}
.content2 .blog1 .hover p span {}
.content2 .blog1 .hover p a {}
*/


.content2>div {
	float: left;
	margin-right: 16px;
	position: relative;
}

.content2>div:last-child {
	margin-right: 0;
}

.content2>div img {
	box-shadow: 0px 0px 20px rgba(0,0,0,.24);  
}

.content2>div p.hover {
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(198,24,24,.75);
	width: 348px;
	height: 480px;
	padding: 30px;
	box-sizing: border-box;
	display: none;
}

.content2>div p.hover img {
	
}

.content2>div p.hover em {
	display: block;
	color: #fff;
	font-size: 18px;
	width: 288px;
	padding: 26px 0 50px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	position: relative;
	padding-left: 5px;
}

.content2>div p.hover em::after {
	content: "";
	position: absolute;
	bottom: 26px;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: #fff;
	z-index: 9999;
}

.content2>div p.hover span {
	display: block;
	color: #fff;
	font-size: 14.5px;
	padding-left: 5px;
}

.content2>div p.hover a.more {
	display: block;
	color: #fff;
	font-weight: 400;
	font-size: 14px;
	padding: 5px 8px;
	width: 88px;
	text-align: center;
	border: thin solid #fff;
	position: absolute;
	bottom: 60px;
	left: 50%;
	transform: translateX(-50%);
}





/* 콘텐츠3 레이아웃 */

.content3 {
	padding: 77px 0;
	width: 100%;
	overflow: hidden;
}


.content3 .title {
	display: inline-block;
	font-size: 20px;
	width: 100%;
	text-align: center;
	font-weight: 700;
	position: relative;
}

.content3 .title em {
	display: inline-block;
	font-size: 20px;
	color: #c61818;
	padding-bottom: 104px;
	font-weight: 700;
}

.content3 .title::after {
	content: "";
	position: absolute;
	bottom: 77px;
	left: 50%;
	transform: translateX(-50%);
	width: 140px;
	height: 3px;
	background-color: #c61818;	
}


.content3>div {
	float: left;
	margin-right: 16px;
	position: relative;
}

.content3>div:last-child {
	margin-right: 0;
}

.content3>div .y_wrap img {
	box-shadow: 0px 0px 20px rgba(0,0,0,.24);  
}

.content3>div .y_wrap p.hover {
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(198,24,24,.75);
	width: 348px;
	height: 196px;
	box-sizing: border-box;
	display: none;
}

.content3>div .y_wrap p.hover a {
	width: 348px;
	height: 196px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.content3>div .y_wrap p.hover a i {
	font-size: 50px;
	color: rgba(255,255,255,.95);
	margin-right: 14px;
}

.content3>div .y_wrap p.hover a em {
	display: block;
	color: rgba(255,255,255,.95);
	font-weight: 500;
	font-size: 14px;	
}


.content3>div>.y_title {
	display: block;
	margin-top: 30px;
	text-align: center;
	font-weight: 700;
	font-size: 18px;
	width: 348px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}



/* 푸터 레이아웃 */


.footer {

}

.footer .foot1 {
	width: 100%;
	padding-top: 75px;
	overflow: hidden;
}

.footer .foot1 .sub_link {
	float: left;
}

.footer .foot1 .sub_link a {
	display: inline-block;
	color: rgba(255,255,255,.45);
	position: relative;
	margin-right: 45px;
	font-size: 16px;
}

.footer .foot1 .sub_link a:hover {
	color: rgba(255,255,255,.75);
}

.footer .foot1 .sub_link a:last-child {
	margin-right: 0;
}

.footer .foot1 .sub_link a::after {
	content: "";
	position: absolute;
	top: 6px;
	right: -25px;
	width: 2px;
	height: 14px;
	background-color: rgba(255,255,255,.25);
}

.footer .foot1 .sub_link a:last-child::after {
	width: 0;
	height: 0;
}


.footer .foot1 .familysite {
	float: right;
}

.footer .foot1 .familysite form {
	
}

.footer .foot1 .familysite form select {
	font-size: 14px;
	font-weight: 500;
	padding: 1px 16px 1px 10px;
}

.footer .foot1 .familysite form select option {
	
}



.footer .foot2 {
	padding-top: 52px;
}

.footer .foot2 .logo {
	float: left;
}

.footer .foot2 .logo img{
	
}

.footer .foot2 address {
	float: right;
	display: block;
	text-align: left;
	font-size: 16px;
	font-weight: 400;
	color: rgba(255,255,255,.45);
	height: 100px;
	line-height: 1.8;
	padding-top: 21px;
}


.footer .foot2 address.m860 {
	display: none;
}





@media(max-width:1480px){
	
	.container {
		width: 100%;
		text-align: center;
	}
	
	.row {
		width: 95%;
		margin: 0 auto;
	}
	
	.header .logo {
		width: 185px;
	}
	
	.content1 .cont1 .pc {
		display: none;
	}
	
	.content1 .cont1 .m1480 {
		display: block;
		margin-bottom: 50px;
	}
	
	.content1 .cont1 {
		width: 100%;
		margin-right: 0;
	}
	
	.content1 .cont2 {
		width: 100%;
	}
	
	.content1 .cont2 ul li {
		width: 23.5%;
		margin-right: 2%;
	}
	
	.content1 .cont2 ul li:last-child {
		margin-right: 0;
	}
	
	.content1 .cont2 ul li:nth-child(2) {
		margin-right: 2%;
	}
	
	.content2 {
		width: 100%;
	}
	
	.content2>div {
		display: block;
		width: 23.5%;
		margin-right: 2%;
	}

	.content2>div:last-child {
		margin-right: 0;
	}
	
	.content2>div>img {
		display: block;
		width: 100%;
	}
	
	.content2>div p.hover {
		width: 100%;
		height: 100%;
	}
	
	.content2>div p.hover em {
		display: none;
	}

	.content2>div p.hover em::after {
		width: 0;
		height: 0px;
	}

	.content2>div p.hover span {
		display: none;
	}
	
	.content2>div p.hover a.more {
		bottom: 43%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	
	
	.content3 {
		width: 100%;
	}
	
	.content3>div {
		display: block;
		width: 23.5%;
		margin-right: 2%;
	}

	.content3>div:last-child {
		margin-right: 0;
	}
	
	.content3>div>.y_wrap>img {
		display: block;
		width: 100%;;
	}
	
	.content3>div>.y_wrap>p.hover {
		width: 100%;
		height: auto;
		top: 0;
		left: 0;
		right: 0;
		bottom: 56px;
	}

	.content3>div>.y_wrap>p.hover a {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.content3>div .y_wrap p.hover a i {
		font-size: 50px;
		margin-right: 0;
	}

	.content3>div .y_wrap p.hover a em {
		display: none;	
	}
	
	.content3>div>.y_title {
		width: 100%;
	}
	
}


@media(max-width:1380px){
	


}


@media(max-width:1180px){
	
	.header .nav ul li a {
		width: 140px;
	}
	
	.footer .foot2 .logo {
		display: none;
	}
	
	.footer .foot1 .sub_link {
		width: 100%;
	}
	
	.footer .foot1 .familysite {
		display: none;
	}
	
	.footer .foot2 address {
		text-align: center;
		width: 100%;
		line-height: 2;
	}
	
}


@media(max-width:1080px){
	


}


@media(max-width:1000px){
	
	.content1 .cont2 ul li {
		width: 49%;
		margin-right: 2%;
	}
	
	.content1 .cont2 ul li:nth-child(2n) {
		margin-right: 0;
	}
	
	.content2>div {
		width: 49%;
		margin-right: 2%;
	}

	.content2>div:first-child {
		margin-right: 2%;
		margin-bottom: 6%
	}
	
	.content2>div:nth-child(2) {
		margin-left: 0;
		margin-bottom: 6%
	}
	
	.content2>div:nth-child(3) {
		margin-right: 0;
	}
	
	.content2>div:last-child {
		margin-right: 0;
	}
	
	.content2>div>img {
		display: block;
		width: 100%;
	}
	
	.content2>div p.hover a.more {
		font-weight: 700;
		font-size: 18px;
		padding: 15px 18px;
		width: 140px;
		height: 30px;
		text-align: center;
		border: 2px solid #fff;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	
	.content3>div {
		width: 49%;
		margin-right: 2%;
	}
	
	.content3>div:first-child {
		margin-right: 2%;
		margin-bottom: 6%
	}
	
	.content3>div:nth-child(2) {
		margin-left: 0;
		margin-bottom: 6%
	}
	
	.content3>div:nth-child(3) {
		margin-right: 0;
	}
	
	.content3>div:last-child {
		margin-right: 0;
	}
	
	.content3>div>img {
		display: block;
		width: 100%;
	}
	
	.content3>div .y_wrap p.hover a i {
		font-size: 80px;
	}

}



@media(max-width:960px){
	
	.header .nav {
		position: absolute;
		right: -250px;
		top: 120px;
		width: 250px;
		height: 90vh;
		background-color: rgba(0,0,0,.9);
		transition: all .5s ease;
	}	
	
	.header .nav.open {
		right: 0;
	}
	
	.header .nav>ul {
		
	}
	
	.header .nav>ul>li {
		border-top: 1px solid rgba(255,255,255,.2);
		border-bottom: 1px solid rgba(255,255,255,.2);
		width: 100%;
		position: relative;
	}
	
	.header .nav>ul>li::after {
		content: "+";
		position: absolute;
		top: 30px;
		right: 30px;
	}
	
	.header .nav>ul>li:hover::after {
		color: #fff;
	}
	
	.header .nav>ul>li.on::after {
		content: "-";
	}
	
	.header .nav>ul>li:first-child {
		border-top: 2px solid rgba(255,255,255,.2);
	}
	
	.header .nav>ul>li:last-child {
		border-bottom: 2px solid rgba(255,255,255,.2);
	}
	
	.header .nav>ul>li>a {
		display: block;
		font-size: 16px;
		font-weight: 700;
		padding: 30px 30px;
		transition: all .3s ease;
		text-align: left;
	}
	
	.header .nav>ul>li>.submenu {
		display: none;
		position: static;
		width: 100%;
	}
	
	.header .nav>ul>li>.submenu>li {
		padding: 0 30px;
		border-top: 1px solid rgba(255,255,255,.1);
		width: 100%;
		height: 100%;
	}
	
	.header .nav>ul>li>.submenu>li>a {
		font-size: 13px;
		font-weight: 700;
		text-align: left;
		width: 100%;
		color: rgba(255,255,255,.65);
	}
	
	.header .nav ul li .submenu li a:hover {
		color: #ef5353;
		background-color: transparent;
	}
	
	
	#barMenu {
		display: block;
	}
	
	#banner .slide div p span.title {
		font-size: 14px;
	}

	#banner .slide div p span.title::after {
		content: "";
		position: absolute;
		bottom: -13px;
		left: 50%;
		transform: translateX(-50%);
		width: 40px;
		height: 3.2px;
		background-color: #fff;
	}

	#banner .slide div p em {
		font-size: 42px;
	}

	#banner .slide div p span {
		font-size: 16px;
	}
	
	#footer {
		height: 380px;
	}
	
	.footer .foot1 {
		padding-top: 50px;
	}
	
	.footer .foot1 .sub_link a {
		width: 49%;
		height: 45px;
		margin-right: 1%;
		line-height: 45px;
		border: 1px solid rgba(255,255,255,.1);
	}
		
	.footer .foot1 .sub_link a:nth-child(2n) {
		margin-right: 0;
		margin-bottom: 12px;
	}
	
	.footer .foot1 .sub_link a::after {
		width: 0;
	}
	
	.footer .foot2 address {
		padding-top: 0;
	}

}

@media(max-width:860px){
	
	.footer .foot2 address {
		display: none;
	}
	
	.footer .foot2 address.m860 {
		display: block;
	}
	
}


@media(max-width:812px){
	
	.footer .foot1 .sub_link a {
		width: 45%;
	}
	
}


@media(max-width:640px){
	
	#banner .slide div p em {
		font-size: 32px;
		padding-top: 20px;
	}
	
	#footer {
		height: 100%;
	}
	
	.footer .foot1 .sub_link {
		margin-top: 26px;
	}
	
	.footer .foot1 .sub_link a {
		width: 85%;
		margin-bottom: 12px;
		margin-right: 0;
	}
	
}


@media(max-width:600px){
	
	#banner {
		height: 650px;
	}
	
}



@media(max-width:510px){

	#banner .slide div p em {
		font-size: 28px;
	}
	
	#banner .slide div p span {
		font-size: 14px;
	}	
	
}



@media(max-width:480px){
	
	#banner {
		height: 600px;
	}

	#banner .slide div p em {
		font-size: 26px;
	}
	
	#banner .slide div p span {
		font-size: 13.2px;
	}	
	
	.content1 .cont1 .m1480 h3.cont1_title {
		font-size: 18px;
		padding-top: 90px;
	}
	
	.content1 .cont1 .m1480 span {
		font-size: 13px;
		line-height: 1.8;
	}
	
	.content1 .cont2 ul li a em {
		font-size: 12px;
	}
	
	.footer .foot1 .sub_link a {
		height: 40px;
		line-height: 40px;
	}
	
}





@media(max-width:430px){

	#banner .slide div p em {
		font-size: 23.5px;
	}
	
}