#idx_wrapper {
	height: 100vh;
	z-index: 4;
}

/* 메인슬라이더 */
#visual {
	position: relative;
	width: 60%;
	height: 100vh;
	float: left;
	overflow: hidden;
}

body.on #visual {
	position: fixed;
}

a {
	cursor: pointer
}

#visual .sliderbx {
	z-index: 1;
	width: 100% !important;
	height: 100vh;
	position: absolute;
}

#visual .sliderbx li {
	width: 100% !important;
	height: 100%;
	position: relative;
}

#visual .sliderbx li::after {
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	display: inline-block;
	background: #444;
	opacity: 0.6;
	width: 100%;
	height: 100%;
}

#visual .sliderbx li.mv01 {
	background: url(../img/main/mvisual01.jpg);
	background-repeat: no-repeat;
	background-position: left;
	background-size: cover;
}

#visual .sliderbx li.mv02 {
	background: url(../img/main/mvisual02.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

#visual .sliderbx li.mv03 {
	background: url(../img/main/mvisual03.jpg);
	background-repeat: no-repeat;
	background-position: center right 15%;
	background-size: cover;
}

#visual .txt {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	transform: translate(-50%, -50%);
	color: #fff;
}

#visual .txt > h3 {
	font-size: 2em;
	font-weight: 400;
	line-height: 1em;
}

#visual .txt > h2 {
	font-size: 4em;
	font-weight: 600;
	line-height: 1.3em;
	padding: 20px 0 0;
}

#visual .txt > p {
	display: block;
	padding: 20px 0 0;
	font-size: 18px;
	font-weight: 300;
	line-height: 1.5em;
}

#visual .txt > p > span {
	position: relative;
	z-index: 1;
}

/*#visual .txt > p > span::after{ position: absolute; content: ''; top: -5px; left: -15px; width: calc(100% + 30px); height: calc(20px + 10px); background: #1b2d5a; z-index: -1; padding: 5px; border-radius: 30px;}*/

#visual .area_bn_wrap {
	position: absolute;
	width: 1400px;
	height: 100%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 14;
}

#visual .area_bn_wrap .area_bn {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	box-shadow: 4.589px 6.553px 22.75px 12.25px rgba(0, 0, 0, 0.3);
	z-index: 13;
	width: 560px;
}

#visual .area_bn_wrap .area_bn .area_img {
	width: 100%;
	height: auto;
}

#visual .area_bn_wrap .area_bn .area_img img {
	width: 100%;
	height: 100%;
}

#visual .area_bn_wrap .area_bn a {
	position: relative;
	display: block;
	padding: 27px 25px;
	box-sizing: border-box;
	background: #fff;
	font-size: 15px;
	font-weight: 400;
	color: #333;
}

#visual .area_bn_wrap .area_bn a > i {
	position: absolute;
	right: 0;
	bottom: 0;
	display: block;
	width: 75px;
	height: 75px;
	background: #1C2D5A url(../img/main/icon_arrow.svg)no-repeat center;
	background-size: 7px 12px;
}

#visual .bx-controls {}

#visual div.bx-pager {
	z-index: 50;
	position: absolute;
	top: 50%;
	left: 50px;
	transform: translateY(-50%);
}

#visual div.bx-pager div {
	margin: 0 0 30px;
}

#visual div.bx-pager div:last-child {
	margin: 0;
}

#visual div.bx-pager div a {
	position: relative;
	font-size: 12px;
	font-weight: 400;
	color: #fff;
	transition: all 0.3s ease;
	opacity: 0.4;
}

#visual div.bx-pager div a.active {
	opacity: 1;
	font-weight: 600;
}

/*#visual div.bx-pager div a:after{content:''; position:absolute; left:50%; bottom:-25px; width:5px; height:5px; background:#fff; border-radius:50%; transform:translateX(-50%); opacity:0.4;}*/
#visual div.bx-pager div a:before {
	content: '0';
	display: inline;
	width: auto;
	height: auto;
}

#visual div.bx-pager div:last-child a:after {
	display: none;
}

#visual .bx-controls-direction {
	display: none;
}

.scrolldown {
	position: absolute;
	bottom: 30px;
	right: 0;
	transform: translate(0px, -50px) rotate(-90deg);
	z-index: 52;
	font-weight: 500;
	color: #fff;
	text-align: center;
	-webkit-animation: floating 4s -1s ease-out infinite;
	animation: floating 4s -1s ease-out infinite;
}

@keyframes floating {
	50% {
		transform: translate(0px, -100px) rotate(-90deg);
		opacity: 0.5
	}

	0,
	100% {
		transform: translate(0px, -50px) rotate(-90deg);
		opacity: 0.6;
	}
}

.scrolldown a {
	position: relative;
	display: block;
	position: relative;
	padding: 39px 5px;
	box-sizing: border-box;
}

.scrolldown a > i {
	position: relative;
	font-style: normal;
	font-weight: 200;
	font-size: 12px;
	color: #fff;
}

.scrolldown a > i:before {
	content: "";
	position: absolute;
	top: 5px;
	left: -30px;
	width: 14px;
	height: 9px;
	margin-top: -4.5px;
	background: url(../img/main/icon_b_arrow.svg) no-repeat 50% 50%;
	background-size: cover;
	transform: rotate(90deg);
}

.scrolldown a:before {
	display: none;
	content: "";
	position: absolute;
	top: 50%;
	left: 35px;
	width: 14px;
	height: 9px;
	margin-top: -4.5px;
	background: url(../img/main/icon_b_arrow.svg) no-repeat 50% 50%;
	background-size: cover;
}



@media (max-width: 1600px) {
	.inr {
		width: 1050px;
	}

	#visual .area_bn_wrap {
		width: 1050px;
	}

	#visual .area_bn_wrap .area_bn {
		width: 560px;
		left: 50%;
		transform: translate(-50%, -10%);
		margin: 0 auto;
	}

	#visual .bx-controls {
		left: calc(50% - 500px);
		left: -webkit-calc(50% - 500px);
	}

	#visual .txt > h2 {
		font-size: 3.5em;
	}

	.scrolldown {}

	.line .left {
		left: calc(50% - 500px);
		left: -webkit-calc(50% - 500px);
	}

	.line .right {
		right: calc(50% - 500px);
		right: -webkit-calc(50% - 500px);
	}

	/* #visual .txt{min-width:1050px;} */
	/*	#visual .txt{top:43%; text-align:center; transform:translate(-50%, -100%);}*/
	#visual .txt > h3 {
		font-size: 1.8em;
		line-height: 1.3em;
	}
}

@media (max-width: 1500px) {
	.inr {
		width: 90%;
	}

	#visual .area_bn_wrap {
		width: 90%;
	}

	#visual .bx-controls {
		left: calc(50% - 40%);
		left: -webkit-calc(50% - 40%);
	}

	.scrolldown {}

	.line .left {
		left: calc(50% - 40%);
		left: -webkit-calc(50% - 40%);
	}

	.line .right {
		right: calc(50% - 40%);
		right: -webkit-calc(50% - 40%);
	}

	#visual .txt {}
}

@media (max-width: 1400px) {
	.inr {
		width: 100%;
	}

	#visual .line {
		display: none;
	}

	.scrolldown {}

	#visual .bx-controls {
		left: 200px;
	}

	#visual .txt {
		left: 80px;
		transform: translate(0, -50%);
	}

	#visual div.bx-pager {
		top: unset;
		bottom: 100px;
		left: 80px;
		transform: unset;
	}

	#visual div.bx-pager div {
		margin: 0 25px 0 0;
		display: inline-block;
	}

}

@media (max-width: 1400px) {
	/*
	#visual .txt > h3{font-size:3.4em;}
	#visual .txt > h2{font-size:5.8em;}
*/
	/*	#visual .txt > p{font-size:16px;}*/

}

@media (max-width:1100px) {
	#visual .txt > h2 {
		font-size: 3em;
	}
}

@media (max-width: 1024px) {
	#visual .txt {
		min-width: 40%;
	}

	#visual .txt > h3 {
		font-size: 1.5em;
		line-height: 1.3em;
	}

	#visual .txt > h2 {}

	/*	#visual .txt > p{font-size:15px;}*/
}

@media (max-width:900px) {
	#visual .txt {
		min-width: 50%;
		padding: 0
	}

	#visual .area_bn_wrap .area_bn a {
		padding: 22px 20px;
	}

	#visual .area_bn_wrap .area_bn a > i {
		width: 67px;
		height: 67px;
	}

	.scrolldown a {
		padding: 32px 5px;
	}

	#visual .bx-controls {
		width: 150px;
		height: 86px;
	}

	#visual div.bx-pager div {
		margin: 0 27px 0 0;
		display: inline;
	}
}

@media (max-width:768px) {
	#visual {
		width: 100%;
	}

	body.on #visual {
		position: relative;
	}

	#visual .txt {
		left: 50px;
	}

	#visual div.bx-pager {
		left: 50px;
	}

	#visual .area_bn_wrap .area_bn {
		width: 560px;
		left: 50%;
		transform: translate(-50%, -10%);
		margin: 0 auto;
	}

	.scrolldown {
		width: 70px;
		height: 70px;
		transform: translate(0px, 0px) rotate(0deg);
	}


	@keyframes floating {
		50% {
			transform: translate(0px, -50px) rotate(0deg);
			opacity: 0.5
		}

		0,
		100% {
			transform: translate(0px, 0px) rotate(0deg);
			opacity: 0.6;
		}
	}

	.scrolldown a > i {
		display: none;
	}

	.scrolldown a {
		height: 100%;
		padding: 5px;
	}

	.scrolldown a:before {
		display: block;
		left: 50%;
		margin-left: -7px;
	}

	#visual .bx-controls {
		left: 70px;
		height: 70px;
	}

	#visual div.bx-pager div a {
		width: 6px;
		height: 6px;
	}

	#visual div.bx-pager div a:after {
		width: 26px;
		height: 26px;
		margin-top: -10px;
		margin-left: -10px;
	}

	#visual .sliderbx li::after {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #333;
		opacity: 0.4;
		content: '';
		transition: all 3s;
	}

	#visual .sliderbx li.mv01,
	#visual .sliderbx li.mv02,
	#visual .sliderbx li.mv03 {
		background-position: 80% top;
	}
}

@media (max-width:500px) {
	#visual .txt {
		min-width: 70%;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	#visual .sliderbx li.mv01 {
		background-position: center;
		background-size: cover;
	}

	#visual .sliderbx li.mv02 {
		background-position: center;
		background-size: cover;
	}

	#visual .sliderbx li.mv03 {
		background-position: center;
		background-size: cover;
	}

	#visual .sliderbx li.mv04 {
		background-position: center;
		background-size: cover;
	}

	#visual .sliderbx li.mv05 {
		background-position: center;
		background-size: cover;
	}

	#visual .sliderbx li.mv06 {
		background-position: center;
		background-size: cover;
	}

	#visual .sliderbx li.mv07 {
		background-position: center;
		background-size: cover;
	}

	#visual .txt > h3 {
		font-size: 1.5em;
	}

	#visual .txt > h2 {
		font-size: 2em;
	}

	#visual .txt > p {
		word-break: keep-all;
		font-size: 15px;
	}

	#visual .area_bn_wrap .area_bn {
		width: 90%;
	}

	#visual .area_bn_wrap .area_bn a {
		padding: 19px;
	}

	#visual .area_bn_wrap .area_bn a > i {
		width: 59px;
		height: 59px;
	}

	.scrolldown {
		width: 60px;
		height: 60px;
		right: unset;
		left: 50%;
		transform: translate(-50%, 0px) rotate(0deg);
	}

	@keyframes floating {
		50% {
			transform: translate(-50%, -50px) rotate(0deg);
			opacity: 0.5
		}

		0,
		100% {
			transform: translate(-50%, 0px) rotate(0deg);
			opacity: 0.6;
		}
	}

	#visual .bx-controls {
		left: 60px;
		width: 100px;
		height: 60px;
	}

	#visual div.bx-pager {
		left: 50%;
		bottom: 20%;
		transform: translate(-50%, -50%);
	}

	#visual div.bx-pager div {
		margin: 0 20px 0 0;
	}

	#visual div.bx-pager div a {
		width: 5px;
		height: 5px;
	}

	#visual div.bx-pager div a:after {
		width: 24px;
		height: 24px;
		margin-top: -9px;
	}


}

@media (max-width:450px) {
	#visual .txt {
		min-width: 85%;
		text-align: center;
	}

	#visual .txt > p > span {
		display: table;
		margin: 15px auto 0;
	}

	/*
	#visual .txt > h3{font-size:1.2em;}
	#visual .txt > h2{font-size:2.5em;}
	#visual .txt > p{font-size:14px; padding:5px 0 0;}
*/
	/*	#visual .area_bn_wrap .area_bn{width:190px;}*/
	#visual .area_bn_wrap .area_bn a {
		padding: 15px;
		font-size: 14px;
	}

	#visual .area_bn_wrap .area_bn a > i {
		width: 51px;
		height: 51px;
	}

}

#content {
	clear: both;
	position: relative;
	background: #fff;
	z-index: 5;
}

/* 제품소개 */
#area_product {
	position: relative;
}

#area_product .inr {
	z-index: 1;
}

#area_product .list {}

#area_product .list li {
	float: left;
	width: calc(100% / 3);
	width: -webkit-calc(100% / 3);
	height: 390px;
	background: transparent;
	box-sizing: border-box;
	transition: all 0.3s ease;
}

#area_product .list li > a {
	display: block;
	padding: 70px 50px;
	box-sizing: border-box;
}

#area_product .list li > a > em {
	font-style: normal;
	font-size: 14px;
	font-weight: bold;
	color: #1C2D5A;
	line-height: 1.5em;
	transition: all 0.3s ease;
}

#area_product .list li > a > h2 {
	display: block;
	padding: 1px 0 6px;
	font-size: 19px;
	font-weight: 500;
	color: #333;
	line-height: 1.5em;
	transition: all 0.3s ease;
}

#area_product .list li > a > .area_icon {
	width: 31px;
	height: 31px;
	transition: all 0.3s ease;
}

#area_product .list li:nth-child(1) > a > .area_icon {
	width: 31px;
	height: 31px;
	background: url(../img/main/icon_product01.svg)no-repeat center;
	background-size: cover;
}

#area_product .list li:nth-child(2) > a > .area_icon {
	width: 32px;
	height: 31px;
	background: url(../img/main/icon_product02.svg)no-repeat center;
	background-size: cover;
}

#area_product .list li:nth-child(3) > a > .area_icon {
	width: 39px;
	height: 29px;
	background: url(../img/main/icon_product03.svg)no-repeat center;
	background-size: cover;
}

#area_product .list li > a > span {
	display: block;
	padding: 120px 0 0;
	font-style: normal;
	font-size: 15px;
	font-weight: 400;
	color: #999;
	line-height: 1.5em;
	transition: all 0.3s ease;
}

#area_product .list li:hover {
	background: url(../img/main/product_on01.jpg)no-repeat center;
	background-size: cover;
}

#area_product .list li:hover > a > em {
	color: #fff;
}

#area_product .list li:hover > a > h2 {
	color: #fff;
}

#area_product .list li:hover > a > span {
	color: #fff;
}

#area_product .list li:hover:nth-child(1) > a > .area_icon {
	width: 31px;
	height: 31px;
	background: url(../img/main/icon_product01_on.svg)no-repeat center;
	background-size: cover;
}

#area_product .list li:hover:nth-child(2) > a > .area_icon {
	width: 32px;
	height: 31px;
	background: url(../img/main/icon_product02_on.svg)no-repeat center;
	background-size: cover;
}

#area_product .list li:hover:nth-child(3) > a > .area_icon {
	width: 39px;
	height: 29px;
	background: url(../img/main/icon_product03_on.svg)no-repeat center;
	background-size: cover;
}


@media (max-width: 1024px) {
	#area_product .list li {
		height: 320px;
	}

	#area_product .list li > a {
		padding: 50px;
	}

	#area_product .list li > a > span {
		padding: 80px 0 0;
	}
}

@media (max-width: 900px) {
	#area_product .list li > a {
		padding: 40px;
	}
}

@media (max-width: 768px) {
	#area_product .list li {
		width: 100%;
		height: auto;
		background: #fff;
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	}
}

@media (max-width: 550px) {
	#area_product .list li > a {
		padding: 30px;
	}

	#area_product .list li > a > span {
		padding: 40px 0 0;
	}
}

@media (max-width: 400px) {
	#area_product .list li > a {
		padding: 20px;
	}
}

/*회사소개*/
#area_company {
	position: relative;
	float: right;
	width: 40%;
	height: auto;
	padding: 200px 80px;
	text-align: left;
	top: 0;
	right: 0;
	background: linear-gradient(125deg, #5655bb, #0137a1);
	box-sizing: border-box;
}

#area_company .area_txt {
	padding: 100px 65px;
	box-sizing: border-box;
	width: 1400px;
	color: #333;
	background: #fff;
	margin: 0 auto;
}

#area_company .area_txt > span {
	display: block;
	font-size: 20px;
	font-weight: 500;
	color: #333;
	text-align: center;
}

#area_company .area_txt > h3 {
	display: block;
	padding: 10px 0 25px;
	font-size: 40px;
	font-weight: bold;
	color: #333;
	text-align: center;
}

#area_company .area_txt p {
	font-size: 16px;
	font-weight: 400;
	color: #333;
	line-height: 1.7em;
	word-break: keep-all;
}

#area_company .area_btn {
	display: inline-block;
	padding: 27px 0px;
	box-sizing: border-box;
	font-size: 15px;
	font-weight: 400;
	color: #333;
}

#area_company .area_btn > i {
	position: absolute;
	right: 0;
	bottom: 0;
	display: block;
	width: 75px;
	height: 75px;
	background: #1C2D5A url(../img/main/icon_arrow.svg)no-repeat center;
	background-size: 7px 12px;
}


#area_company .lt_more {}

#area_company .lt_more a {}

/* tab  */
.tabs {
	margin: 40px auto 0;
	width: auto;
	display: table;
}

.tabs:after {
	content: '';
	display: block;
	clear: both;
}

.tabs li {
	float: left;
	margin: 0 10px 0 0;
	padding: 0 11px;
	height: 40px;
	line-height: 40px;
	background: #ddd;
	box-sizing: border-box;
	border-radius: 50px;
	transition: all 0.3s ease 0s;
	cursor: pointer;
	text-align: center;
}

.tabs li span {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.3em;
}

.tabs li.active {
	background: #EA5A4F;
	color: #fff;
	box-shadow: 0px 3px 7.36px 0.64px rgba(25, 36, 72, 0.32);
}

.tabs li.active span {
	color: #fff;
}

.tabs li:hover {
	background: #EA5A4F;
	color: #fff;
}

.tab_content:after {
	content: '';
	display: block;
	clear: both;
}

@media (max-width: 1600px) {
	#area_company .area_img {
		width: calc(50% + 500px);
		width: -webkit-calc(50% + 500px);
	}

	#area_company .area_txt {
		width: calc(100% - 166px);
		width: -webkit-calc(100% - 166px);
	}

	#area_company .area_btn {
		width: calc(50% - 500px);
		width: -webkit-calc(50% - 500px);
	}
}

@media (max-width: 1500px) {
	#area_company .area_img {
		width: 95%;
	}

	#area_company .area_txt {
		width: calc(100% - 15%);
		width: -webkit-calc(100% - 15%);
		min-height: 355px;
		padding: 66px 50px;
	}

	#area_company .area_txt p br {
		display: none;
	}

	#area_company .area_btn {
		width: 240px;
		border-top: none;
	}
}

@media (max-width: 1400px) {

	#area_company {}

	#area_company .area_img {
		width: 100%;
	}

	#area_company .area_txt {
		padding: 66px 50px;
	}
}

@media (max-width: 1400px) {
	#area_company .area_tit {
		width: 90%;
	}

	#area_company .area_txt {
		width: 100%;
		padding: 53px 50px;
		position: relative;
	}
}

@media (max-width: 1100px) {
	#area_company {
		padding: 150px 50px;
	}
}

@media (max-width: 1024px) {
	#area_company .area_txt {
		padding: 50px 40px;
	}

	#area_company .area_btn {
		width: 22%;
		padding: 27px 20px;
		padding-left: 0;
	}
}

@media (max-width: 850px) {
	#area_company .area_txt {
		padding: 40px;
	}

	#area_company .area_txt h3 {
		font-size: 35px;
	}

	#area_company .area_btn {
		width: 33.33%;
	}
}

@media (max-width: 768px) {
	#area_company {
		width: 100%;
		padding: 100px 50px;
	}

	#area_company .area_img {
		height: 0;
		padding-bottom: 50%;
	}

	#area_company .area_txt {
		position: relative;
		width: 100%;
		padding: 50px 40px;
		min-height: auto;
	}

	#area_company .area_txt p {
		margin: 0 0 0;
	}

	#area_company .area_btn {
		width: 33.33%;
		top: unset;
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	}

	#area_company .area_txt p br {
		display: block;
	}

	#area_company .area_btn > i {
		bottom: -1px;
		height: 76px;
		border-bottom: 1px solid #1f2756;
	}
}

@media (max-width: 650px) {
	#area_company .area_btn {
		width: 200px;
		padding: 21px 20px 40px 0;
	}

	#area_company .area_btn > i {
		width: 64px;
		height: 64px;
	}

	#area_company .area_tit h3 {
		font-size: 33px;
	}
}

@media (max-width: 550px) {
	#area_company {}

	#area_company .area_txt {
		padding: 40px 30px;
	}

	#area_company .area_txt h3 {
		padding: 10px 0 15px;
		font-size: 30px;
	}

	#area_company .area_txt p {
		font-size: 15px;
	}

	#area_company .area_txt p br {
		display: none;
	}

	.tabs {
		width: 51%;
	}

	.tabs li {
		margin: 0 10px 20px 0;
	}

	.tabs li:nth-child(3n) {
		margin-right: 0;
	}
}

@media (max-width: 500px) {
	#area_company {
		padding: 60px 30px 160px;
	}

	.area_location > h2 {
		font-size: 22px;
	}
}

@media (max-width: 450px) {
	#area_company .area_txt h3 {
		font-size: 28px;
	}
}

@media (max-width: 400px) {
	#area_company .area_txt {
		padding: 30px 20px;
	}

	#area_company .area_txt h3 {
		font-size: 25px;
	}

	.tabs {
		width: 61%;
	}

	.tabs li {
		margin: 0 8px 20px 0;
	}
}


.fa-angle-right {
	margin-left: 10px;
	font-size: 15px;
}


/* 제품소개 */
.tab_content .list {
	width: 100%;
	margin: 40px auto 0;
	display: table;
}

.tab_content .list li {
	float: left;
	width: calc(100%/2 - 20px);
	margin: 0 40px 20px 0;
	background: transparent;
	box-sizing: border-box;
	transition: all 0.3s ease;
}

.tab_content .list li:nth-child(2n) {
	margin-right: 0;
	position: relative;
	top: 100px;
}

.tab_content .list li > a {
	display: block;
	box-sizing: border-box;
	transform: translateY(0);
	transition: all 1s;
}

.tab_content .list li:hover > a {
	transform: translateY(-15px);
	transition: all 1s;
}


.tab_content .list li .img_wrap {
	height: auto;
	overflow: hidden;
	box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
}

.tab_content .list li img {
	width: 100%;
	height: auto;
	transform: scale(1);
	transition: all 1s;
	opacity: 0.6;
}

.tab_content .list li:hover img {
	transform: scale(1.05);
	transition: all 1s;
	opacity: 1;
}

.tab_content .list li em {
	display: block;
	padding: 15px 0 0;
	line-height: 1em;
	font-style: normal;
	font-size: 15px;
	font-weight: 400;
	color: #5654A2;
}

.tab_content .list li h2 {
	font-size: 17px;
	font-weight: 300;
	padding: 20px 10px;
}

.tab_content .list li h2 > span {
	font-weight: 400;
}

.tab_content .list li > a > .area_icon {
	font-size: 31px;
	transition: all 0.3s ease;
}

/*
.tab_content .list li:nth-child(1) > a > .area_icon{width:31px; height:31px; background:url(../img/main/icon_product01.svg)no-repeat center; background-size:cover;}
.tab_content .list li:nth-child(2) > a > .area_icon{width:32px; height:31px; background:url(../img/main/icon_product02.svg)no-repeat center; background-size:cover;}
.tab_content .list li:nth-child(3) > a > .area_icon{width:39px; height:29px; background:url(../img/main/icon_product03.svg)no-repeat center; background-size:cover;}
*/
.tab_content .list li > a > img {
	width: 100%;
	opacity: 0.6;
	transition: all 2s;
}

.tab_content .list li:hover > a > img {
	opacity: 1;
	transition: all 2s;
}

.tab_content .list li > a > span {
	display: block;
	padding: 11.5px 0 0;
	font-style: normal;
	font-size: 15px;
	font-weight: 400;
	color: #999;
	line-height: 1.5em;
	transition: all 0.3s ease;
}

/*.tab_content .list li:hover{background:url(../img/main/product_on01.jpg)no-repeat center; background-size:cover;}*/
/*
.tab_content .list li:hover > a > em{color:#fff;padding:40px 0 0;}
.tab_content .list li:hover > a > h2{color:#fff;}
.tab_content .list li:hover > a > span{color:#fff;}
*/
/*
.tab_content .list li:hover:nth-child(1) > a > .area_icon{width:31px; height:31px; background:url(../img/main/icon_product01_on.svg)no-repeat center; background-size:cover;}
.tab_content .list li:hover:nth-child(2) > a > .area_icon{width:32px; height:31px; background:url(../img/main/icon_product02_on.svg)no-repeat center; background-size:cover;}
.tab_content .list li:hover:nth-child(3) > a > .area_icon{width:39px; height:29px; background:url(../img/main/icon_product03_on.svg)no-repeat center; background-size:cover;}
*/
@media (max-width:1400px) {
	.tab_content .list li h2 {
		font-size: 15px;
		padding: 20px 0;
	}
}

@media (max-width: 1100px) {
	.tab_content .list li {
		width: calc(100%/2 - 10px);
		margin: 0 20px 20px 0;
	}
}

@media (max-width: 1024px) {
	.tab_content .list li {}

	.tab_content .list li > a {}

	.tab_content .list li > a > span {
		padding: 30px 0 0;
	}

	.tab_content .list li > a > img {
		opacity: 1;
	}
}

@media (max-width: 900px) {
	.tab_content .list li > a {
		padding: 0;
	}
}

@media (max-width: 768px) {
	.tab_content .list li {
		width: calc(50% - 10px);
		height: auto;
	}

	.tab_content .list li > a > span {
		padding: 30px 0;
	}

	.tab_content .list li h2 {
		font-size: 18px;
	}

	.tab_content .list li img {
		opacity: 1;
	}
}

@media (max-width: 550px) {
	.tab_content .list li {}

	.tab_content .list li > a {
		padding: 0;
	}

	.tab_content .list li > a > span {
		padding: 20px 0 30px;
	}

}

@media (max-widtH: 500px) {
	.tab_content .list li h2 {
		font-size: 13px;
		padding: 10px 0 0;
	}

}

@media (max-width: 400px) {
	.tab_content .list {
		/*        margin: 0 auto;*/
	}

	.tab_content .list li {}

	.tab_content .list li > a {
		padding: 0;
	}
}


#gall_board {
	width: 100%;
	padding: 100px 0;
	background: #ebebed;
	overflow: hidden;
}

.area_gall {
	width: 100%;
}

#area_board {
	width: 100%;
	padding: 100px 0;
	background: #fff;
}

#area_board .line.gray {
	z-index: 0;
}

#area_board .line.gray i:first-child {
	border-right: none;
}

.area_board:after {
	content: '';
	display: block;
	clear: both;
}

#area_board .area_btn {
	border: 1px solid #eee;
	padding: 15px 30px;
	border-radius: 30px;
	margin: 40px 0 0;
	display: inline-block;
	color: #999;
}

#area_board .area_btn:hover {
	font-weight: 600;
	color: #444
}

#area_board .img_wrap img {
	width: 100%;
	height: auto;
}

.area_location {
	color: #fff;
}

.greet {
	text-align: center;
}

.greet > em {
	color: #aaa;
	display: block;
	font-size: 20px;
	font-weight: 500;
	font-style: normal;
}

.greet > h2 {
	color: #444;
	padding: 0;
	display: block;
	font-size: 29px;
	font-weight: bold;
	line-height: 1.5em;
}

.greet > .img_wrap {
	margin: 40px 0 0;
}

.greet > .area_icon {
	color: #444;
}

.greet .info_location span {
	color: #444;
}

.area_location .info_location em,
.area_location .info_location b {
	color: #444;
}

@media (max-width: 1600px) {
	.area_notice {
		width: calc(100% - 334px);
		width: -webkit-calc(100% - 334px);
	}

	.area_location {
		margin: 80px 0 0;
		height: auto;
	}

	.area_location > a {
		padding: 34px 40px;
	}
}

@media (max-width: 1500px) {
	.area_notice {
		width: calc(100% - 33.33%);
		width: -webkit-calc(100% - 33.33%);
	}

	.area_location {
		margin: 80px 0 0;
	}

	.area_location > a {
		padding: 60px 40px;
	}
}

@media (max-width: 1400px) {
	#gall_board {
		padding: 53px 50px;
	}
}

@media (max-width: 1400px) {
	#area_board {
		padding: 53px 0;
	}

	#gall_board {
		margin: 0;
	}

}

@media (max-width:850px) {}

@media (max-width: 768px) {
	.area_notice {
		width: 100%;
	}

	.area_notice .area_btn > i {
		width: 75px;
		height: 74px;
	}

	.news_text {
		width: 100%;
	}
}

@media (max-width: 650px) {
	.area_notice .area_btn > i {
		width: 64px;
		height: 64px;
	}
}

@media (max-width: 550px) {
	.greet > h2 {
		font-size: 20px;
		padding: 0 0 20px;
	}

	.greet > em {
		font-size: 20px;
		line-height: 1.3em;
	}

	.greet > .img_wrap {
		margin: 40px 0;
	}
}

@media (max-width:500px) {}

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


#contants_wrap {
	width: 100%;
	height: auto;
	background: url(../img/main/chari.svg) no-repeat 90% center, #fff;
	padding: 200px 0 160px;
	transition: all 3s;
/*
	-webkit-animation: floating2 8s -1s ease-out infinite;
	animation: floating2 8s -1s ease-out infinite;
*/
}

#contants_wrap .con_text {
}
#contants_wrap .con_text li{
	padding-left: 20px;
	position: relative;
	margin: 5px 0 0;
}
#contants_wrap .con_text li::before{
	content: '';
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 5px;
	transform: translateY(-50%);
	width: 4px;
	height: 4px;
	background: #0137a1;
}

@keyframes floating2 {
	50% {
		background-position: 90% center;
	}

	0,
	100% {
		background-position: 90% top;
	}
}

.bg_wrap {
	position: relative;
	width: 100%;
	height: auto;
	background: url(../img/main/contacts_bg.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.bg_wrap::after {
	content: '';
	display: inline-block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #333;
	opacity: 0.6;
}

#contants_wrap h2 {
	color: #444;
	font-size: 40px;
	line-height: 1.5em;
	display: block;
	margin: 0 0 40px;
}

#contants_wrap em {
	color: #888;
	font-size: 18px;
	font-weight: 300;
	line-height: 1.5em;
	display: block;
	font-style: normal;
}

#contants_wrap em.sub_tit {
	margin: 0 0 40px;
	color: #5353b5;
}

#contants_wrap b {
	color: #0137a1;
	font-weight: 600;
}

#contants_wrap .color_point {
	color: #666;
}

#contants_wrap .lt_more {
	margin: 40px 0 0;
	display: table;
	float: right;
}

#contants_wrap .lt_more a {
	color: #888;
}

@media (max-width:1400px) {
	#contants_wrap {
		padding: 160px 80px;
		box-sizing: border-box;
	}
}

@media (max-width:1100px) {
	#contants_wrap {
		padding: 150px 80px;
	}

	#contants_wrap h2 {
		font-size: 35px;
	}
}

@media (max-width:768px) {
	#contants_wrap {
		padding: 100px 50px;
		background: #fff;
	}
}

@media (max-width:500px) {
	#contants_wrap {
		padding: 80px 30px;
/*		background: url(../img/main/chari.svg) no-repeat 100% top/60%, #fff;*/
	}

	#contants_wrap h2 {
		font-size: 20px;
	}

	#contants_wrap em {
		font-size: 15px;
		word-break: break-all;
	}
	#contants_wrap em.sub_tit{
		margin: 0 0 20px;
	}
	
	#contants_wrap .con_text li{
		padding-left: 18px;
	}
}

/*서비스*/
.area_location {
	position: relative;
	margin: 0 0 0;
	float: left;
	width: 100%;
	transition: all 0.3s ease;
	text-align: left;
}

.area_location em {
	font-style: normal;
	font-size: 15px;
	font-weight: 300;
	transition: all 0.3s ease;
}

.area_location h2 {
	display: flex;
	align-items: center;
	padding: 20px 0 0;
	font-size: 28px;
	font-weight: 400;
	color: #fff;
	line-height: 1.5em;
	transition: all 0.3s ease;
}

.area_location .area_icon {
	font-size: 31px;
	transition: all 0.3s ease;
}

.area_location .info_location {
	padding: 40px 0 0;
	text-align: left;
	overflow: hidden;
}

.area_location .info_location span {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
}

.area_location .info_location em {
	display: block;
	padding: 5px 0 0;
	font-style: normal;
	font-size: 15px;
	font-weight: 400;
	color: #555;
}

.area_location {
	color: #fff;
}

.area_location > em {
	color: #a4c3ff;
	display: block;
	font-size: 16px;
	font-weight: 500;
}

.area_location > h2 {
	color: #fff;
	padding: 20px 0;
}

.area_location > .area_icon {
	color: #fff;
}

.area_location .info_location span {
	color: #fff;
}

.area_location .info_location em,
.area_location .info_location b {
	color: #fff;
}

.area_location .info_location > ul > li {
	width: calc(100%/3);
	float: left;
	text-align: center;
	display: table;
	height: 250px;
}

.area_location .info_location > ul > li:last-child {
	margin: 0 0 0;
}

.area_location .info_location > ul > li > img {
	height: 95px;
	margin: 2.5px;
	transform: scale(1);
	transition: all 1s;
}

.area_location .info_location > ul > li:hover > img {
	transform: scale(1.05);
	transition: all 1s;
}

.area_location .info_location > ul > li:nth-child(1) > img,
.area_location .info_location > ul > li:nth-child(3) > img {
	width: 95px;
	height: auto;
}

.area_location .info_location > ul > li > em {
	display: block;
	padding: 5px 0 0;
	line-height: 1.4em;
	font-style: normal;
	font-size: 14px;
	font-weight: 400;
	color: #E0E6F5;
}

.area_location .info_location > ul > li > b {
	display: block;
	font-size: 25px;
	font-weight: 600;
	color: #444;
}

.area_location .info_location > ul > li > h2 {
	color: #444;
	font-size: 17px;
	font-weight: 500;
}


@media (max-width:850px) {
	.area_location > h2 {
		font-size: 20px;
	}
}

@media (max-width: 768px) {

	.area_location > h2 {
		font-size: 32px;
	}

	.area_location {
		margin: 0;
		width: 100%;
		height: auto;
	}

	.area_location .area_icon {}


	.area_location .info_location {
		padding: 40px 40px 0;
	}

	.area_location .info_location > ul > li {
		width: calc(100%/2);
		height: 250px;
		display: inline-block;
	}
}

@media (max-width: 650px) {}

@media (max-width: 550px) {
	.area_location > em{
		font-size: 14px;
	}
	.area_location > a {
		padding: 50px 30px;
	}

	.area_location > a .info_location {
		padding: 60px 0 0;
	}
}

@media (max-width:500px) {
	.area_location > h2 {
		padding: 20px 0 0;
		font-size: 20px;
	}

	.area_location .info_location {
		padding: 40px 30px 0;
	}
}

@media (max-width: 400px) {
	.area_location > a {
		padding: 40px 20px;
	}
}


/*hoverBOX*/
.block_over {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.9;
	z-index: 2;
}

.block_over .drawborder {
	display: block;
	background: #0137a1;
	position: absolute;
}

.block_over .drawborder-top {
	width: 0%;
	height: 8px;
	left: 0;
	top: 0;
	transition-delay: 0s;
}

.block_over .drawborder-left {
	width: 8px;
	height: 0%;
	top: 0;
	right: 0;
	transition-delay: 0s;
}

.block_over .drawborder-bottom {
	width: 0%;
	height: 8px;
	right: 0;
	bottom: 0;
	transition-delay: 0s;
}

.block_over .drawborder-right {
	width: 8px;
	height: 0;
	left: 0;
	bottom: 0;
	transition-delay: 0s;
}

.block_over:hover .drawborder {
	transition: all 0.25s;
}

.block_over:hover .drawborder-top {
	width: 100%;
	transition-delay: 0s;
}

.block_over:hover .drawborder-left {
	height: 100%;
	transition-delay: 0.1s;
}

.block_over:hover .drawborder-bottom {
	width: 100%;
	transition-delay: 0.2s;
}

.block_over:hover .drawborder-right {
	height: 100%;
	transition-delay: 0.3s;
}