@charset "utf-8";
/* @charset "euc-kr"; */


/* Main Banner Start */
#mainVisualArea {position: relative; display: block; width: 100%; min-width: 320px; height: 100%; min-height: 580px; margin: 0 auto 0; box-sizing: border-box; overflow: hidden;}
/* .header + .mvLayerBox + .swiper-pagination : 120 + 340 + 120 = 580 */
#mainVisualArea .swiper-container {width: 100%; height: 100%;}
#mainVisualArea .swiper-container .swiper-pagination {bottom: 40px !important;}
:root {--swiper-theme-color: rgba(68,140,203,1.0) !important}
.swiper-pagination-bullet {width: 10px !important; height: 10px !important;}
.swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {background-color: #fff !important; opacity: .9;}
.swiper-container ul.swiper-wrapper > li > .sliderContent {display: block; width: 100%; height: 100%;}
.swiper-container ul.swiper-wrapper > li > .img01 {background: url('../img/mbn01.jpg') center center no-repeat; background-size: cover;}
.swiper-container ul.swiper-wrapper > li > .img02 {background: url('../img/mbn02.jpg') center center no-repeat; background-size: cover;}
.swiper-container ul.swiper-wrapper > li > .img03 {background: url('../img/mbn03.jpg') center center no-repeat; background-size: cover;}
.swiper-container ul.swiper-wrapper > li > .img04 {background: url('../img/mbn04.jpg') center center no-repeat; background-size: cover;}

#mainVisualArea .mvLayerBox {position: absolute; top: 100px; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; max-width: 1200px; min-width: 640px; height: 380px; box-sizing: border-box; padding: 0 20px; z-index: 10;}
#mainVisualArea .mvLayerBox .textArea {position: relative; display: block; width: 100%; height: 100%; transition: all 0.3s;}
#mainVisualArea .mvLayerBox .textArea > p.slogan01 {display: block; width: 100%; height: 40px; margin-top: 0; line-height: 40px; font-size: 30px; font-weight: 700; text-align: left; color: #fff; letter-spacing: -1px; transition: all 0.3s;}
#mainVisualArea .mvLayerBox .textArea > p.slogan02 {display: block; width: 100%; height: 60px; line-height: 60px; font-size: 48px; font-weight: 100; text-align: left; color: #fff; letter-spacing: -2px; transition: all 0.3s;}
#mainVisualArea .mvLayerBox .textArea > p.slogan03 {display: block; width: 100%; height: 80px; line-height: 80px; font-size: 80px; font-weight: 700; text-align: left; color: #fff; letter-spacing: -2px; transition: all 0.3s;}
#mainVisualArea .mvLayerBox .textArea > p.slogan04 {display: block; width: 100%; height: auto; margin-top: 60px; line-height: 20px; font-size: 16px; font-weight: 400; text-align: left; color: #fff; letter-spacing: 0; transition: all 0.3s;}

#mainVisualArea .mvLayerBox .textArea > a {display: block; width: 200px; height: 40px; margin-top: 60px; line-height: 40px; font-size: 14px; font-weight: 400; text-align: center; color: #fff; letter-spacing: 0px; background-color: rgba(68,140,203,1.0); text-decoration: none;  transition: all 0.3s;}
#mainVisualArea .mvLayerBox .textArea > a:hover {color: #fff; background-color: rgba(200,172,141,1.0);}
#mainVisualArea .mvLayerBox .textArea > .mbnCI {position: absolute; top: 0; bottom: 0; right: 0; margin: auto 0; display: block; width: 460px; height: 240px; z-index: 1; background: url('../img/mbnCI.png') center center no-repeat; background-size: cover; transition: all 0.3s;}

@media screen and (max-width: 980px) {
	#mainVisualArea {min-height: 500px;}
	#mainVisualArea .mvLayerBox {top: 80px; height: 300px;}
	#mainVisualArea .mvLayerBox .textArea > p.slogan01 {height: 30px; line-height: 30px; font-size: 22px;}
	#mainVisualArea .mvLayerBox .textArea > p.slogan02 {height: 50px; line-height: 50px; font-size: 40px;}
	#mainVisualArea .mvLayerBox .textArea > p.slogan03 {height: 70px; line-height: 70px; font-size: 68px;}
	#mainVisualArea .mvLayerBox .textArea > p.slogan04 {height: auto; margin-top: 40px; line-height: 20px; font-size: 15px;}

	#mainVisualArea .mvLayerBox .textArea > a {width: 160px; margin-top: 40px;}
	#mainVisualArea .mvLayerBox .textArea > .mbnCI {width: 380px; height: 198px;}
}
@media screen and (max-width: 660px) {
	#mainVisualArea {min-height: 440px;}
	#mainVisualArea .mvLayerBox {max-width: 640px; min-width: 320px; height: 440px} 
	#mainVisualArea .mvLayerBox .textArea {box-sizing: border-box; padding-top: 140px;}
	#mainVisualArea .mvLayerBox .textArea > p.slogan01 {height: 20px; line-height: 20px; font-size: 18px; text-align: center;}
	#mainVisualArea .mvLayerBox .textArea > p.slogan02 {height: 40px; line-height: 40px; font-size: 36px; text-align: center;}
	#mainVisualArea .mvLayerBox .textArea > p.slogan03 {height: 60px; line-height: 60px; font-size: 58px; text-align: center;}
	#mainVisualArea .mvLayerBox .textArea > p.slogan04 {font-size: 14px; text-align: center;}
	#mainVisualArea .mvLayerBox .textArea > a {margin: 20px auto 0;}
	#mainVisualArea .mvLayerBox .textArea > .mbnCI {top: 0; bottom: auto; left: 0; right: 0; margin: 0 auto; width: 230px; height: 120px;}
}
@media screen and (max-width: 420px) {
}

/* Main Banner End */

/* Main Quick Link Start */
/* Main Quick Link End */

/* Main Contants Start */
.mcArea {position: relative; width: 100%; min-width: 320px; margin: 0 auto; padding: 0;}
.mcArea > .mcBox {position: relative; width: 100%; min-width: 320px; max-width: 1200px; margin: 0 auto; padding: 100px 0;}

.mcBox .titleArea {width: 100%; height: auto; min-height: 60px; max-height: 160px; margin: 0 auto; padding-bottom: 60px;}
.mcBox .titleArea > .titleHI {display: block; width: 180px; height: 80px; margin: 0 auto; background-image: url('../img/titleHI.png'); background-position: 0px 0px; background-repeat: no-repeat;}
.mcBox .titleArea > .titleHI.white {background-position: 0px -80px;}

.mcBox .titleArea > h2 {line-height: 60px; font-size: 48px; font-weight: 700; color: #222; text-align: center; letter-spacing: -1px; transition: all 0.3s;}
.mcBox .titleArea > .subject {line-height: 40px; font-size: 16px; font-weight: 400; color: #999; text-align: center; transition: all 0.3s;}
/* .mcBox .titleArea > .engTitle {line-height: 40px; font-size: 18px; font-weight: normal; color: #999; text-align: center; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; letter-spacing: 5px; transition: all 0.3s;} */

@media screen and (max-width: 980px) {
	.mcBox .titleArea {height: auto;}
	.mcBox .titleArea > h2 {line-height: 40px; font-size: 38px; transition: all 0.3s;}
	.mcBox .titleArea > .engTitle {line-height: 30px; font-size: 14px; transition: all 0.3s;}
	.mcBox .titleArea > .subject {padding-top: 10px; line-height: 20px; font-size: 14px; transition: all 0.3s;}
}

@media screen and (max-width: 660px) {
	.mcBox .titleArea > h2 {line-height: 40px; font-size: 32px; transition: all 0.3s;}
	.mcBox .titleArea > .engTitle {line-height: 30px; font-size: 14px; transition: all 0.3s;}
	.mcBox .titleArea > .subject {padding-top: 10px; line-height: 20px; font-size: 14px; transition: all 0.3s;}
}



#businessArea {background-color: #fff;}

	.businessResponse {position: relative; width: 100%; height: auto; margin: 0 auto; box-sizing: border-box; padding: 0; transition: all 0.3s;}
	.businessResponse > .rBox {position: relative; float: left; display: block; width: 50%; height: auto; margin: 0; padding: 0; transition: all 0.3s;}
	#businessArea .bArticle {position: relative; width: 100%; height: auto; box-sizing: border-box; padding: 0; background-color: #fff; overflow: hidden;}
	#businessArea .bArticle > .titleImg {position: relative; width: 100%; max-width: 600px; height: 300px; box-sizing: content-box; border-right: 0; background-size: cover; background-position: center center; transition: all 0.3s;}
	#businessArea .bArticle:hover > .titleImg {transform: scale(1.2);}

	#businessArea .bArticle > .infoArea {position: relative; width: 100%; box-sizing: border-box; padding-bottom: 40px; background-color: #fff; transition: all 0.3s;}

	#businessArea .bArticle > .infoArea > ul {position: relative; width: 100%; box-sizing: border-box; padding-bottom: 20px; transition: all 0.3s;}
	#businessArea .bArticle > .infoArea > ul > li {width: 100%; list-style: none;}
	#businessArea .bArticle > .infoArea > ul > li.title {width: 100%; height: 40px; line-height: 40px; font-size: 30px; font-weight: 700; color: #333; text-align: center; padding-top: 40px; letter-spacing: -1px; transition: all 0.3s;}
	#businessArea .bArticle > .infoArea > ul > li.content {width: 100%; height: auto; min-height: 40px; box-sizing: border-box; padding: 20px 0 0; padding-bottom: 0px; line-height: 20px; font-size: 14px; font-weight: 300; color: #999; text-align: center; transition: all 0.3s;}
	#businessArea .bArticle > .infoArea > a.link {display: block; margin: 0 auto; width: 160px; height: 40px; line-height: 40px; font-size: 15px; font-weight: 400; color: #fff; text-align: center; background-color: rgba(68,140,203,1.0); background-color: rgba(0,0,0,0.3); text-decoration: none;  transition: all 0.3s;}
	#businessArea .bArticle:hover > .infoArea > ul > li.title {color: rgba(68,140,203,1.0);}
	#businessArea .bArticle:hover > .infoArea > a.link {color: #fff; background-color: rgba(200,172,141,1.0); background-color: rgba(68,140,203,1.0);}
	@media screen and (max-width: 1220px) {
		.businessResponse {padding: 0 20px;}
	}
	@media screen and (max-width: 980px) {
		.businessResponse > .rBox {width: 100% !important; transition: all 0.3s;}
		#businessArea .bArticle {height: 240px; box-sizing: content-box; padding: 0;}
		/*
		#businessArea .bArticle > .titleImg {position: absolute; top: 0; left: 0; display: block; width: 100%; min-width: 720px; max-width: 960px; height: 200px; box-sizing: border-box; border-right: 600px #fff solid; z-index: 1; transition: all 0.3s;}
		#businessArea .bArticle > ul {position: absolute; top: 0; right: 0; width: 100%; min-width: 600px; max-width: 600px; height: 200px; box-sizing: border-box; padding: 40px; z-index: 2; transition: all 0.3s;}
		*/
		#businessArea .bArticle > .titleImg {position: relative; float: left; width: 30%; min-width: 0; max-width: none; padding: 0; border: 0; transition: all 0.3s;}

		#businessArea .bArticle > .infoArea {position: relative; float: left; width: 70%; min-width: 0; max-width: none; height: auto; box-sizing: border-box; padding: 40px; transition: all 0.3s;}
		#businessArea .bArticle > .infoArea > ul {}
		#businessArea .bArticle > .infoArea > ul > li {}
		#businessArea .bArticle > .infoArea > ul > li.title {height: 30px; line-height: 30px; font-size: 26px; text-align: left; padding-top: 0px;}
		#businessArea .bArticle > .infoArea > ul > li.content {height: auto; min-height: 40px; font-size: 14px; box-sizing: content-box; padding: 20px 0 0; margin: 0; text-align: left;}
		#businessArea .bArticle > .infoArea > ul > li.content br {display: none;}
		#businessArea .bArticle > .infoArea > a.link {margin: 0 0;}
	}
	@media screen and (max-width: 660px) {
		.businessResponse {padding: 0 10px;}
		#businessArea .bArticle > .titleImg {position: relative; float: left; width: 30%; min-width: 0; max-width: none; padding: 0; border: 0; transition: all 0.3s;}
		#businessArea .bArticle > .infoArea {position: relative; float: left; width: 70%; min-width: 0; max-width: none; height: auto; box-sizing: border-box; padding: 40px; transition: all 0.3s;}
		#businessArea .bArticle > .infoArea > ul {}
		#businessArea .bArticle > .infoArea > ul > li.title {font-size: 24px; }
		#businessArea .bArticle > .infoArea > ul > li.content {padding: 0; margin: 20px 0 0; overflow: hidden;}
	}
	@media screen and (max-width: 500px) {
		#businessArea .bArticle {height: auto;}
		#businessArea .bArticle > .titleImg {width: 100%; min-width: 320px; height: 300px; transition: all 0.3s;}
		#businessArea .bArticle > .infoArea {width: 100%; min-width: 320px; padding: 40px 10px; transition: all 0.3s;}
		#businessArea .bArticle > .infoArea > ul {}
		#businessArea .bArticle > .infoArea > ul > li.title {height: 30px; line-height: 30px; font-size: 24px; text-align: center; transition: all 0.3s;}
		#businessArea .bArticle > .infoArea > ul > li.content {padding: 0; margin: 20px 0 0; text-align: center;  overflow: hidden;}
		#businessArea .bArticle > .infoArea > a.link {margin: 0 auto;}
	}


#middleVisualArea {width: 100%; height: auto; background-color: #fff; background: url('../img/mVisualAreaBg.jpg') center center no-repeat; background-size: cover;}

	#middleVisualArea 	> .titleArea {width: 100%; height: 400px; box-sizing: border-box; margin: 0 auto; padding: 160px 0 140px; transition: all 0.3s;}
	#middleVisualArea 	> .titleArea > .engTitle {line-height: 60px; font-size: 52px; font-weight: 700; color: #fff; text-align: center; transition: all 0.3s;}
	#middleVisualArea 	> .titleArea > .engTitle02 {line-height: 40px; font-size: 18px; font-weight: 400; color: #fff; text-align: center; transition: all 0.3s;}
	#middleVisualArea 	> .titleArea > .engTitle02 br {display: none;}
	@media screen and (max-width: 660px) {
		#middleVisualArea 	> .titleArea {width: 100%; height: 300px; box-sizing: border-box; margin: 0 auto; padding: 100px 0 100px;}
		#middleVisualArea 	> .titleArea > .engTitle {line-height: 50px; font-size: 42px; padding: 10px 0;}
		#middleVisualArea 	> .titleArea > .engTitle02 {line-height: 20px; font-size: 15px;}
		#middleVisualArea 	> .titleArea > .engTitle02 br {display: inline-block;}
	}
	@media screen and (max-width: 500px) {
		#middleVisualArea 	> .titleArea > .engTitle {line-height: 40px; font-size: 30px;}
		#middleVisualArea 	> .titleArea > .engTitle02 {line-height: 20px; font-size: 14px;}
	}


#expertArea {background-color: #fff;}

	.expertResponse {position: relative; width: 100%; height: auto; margin: 0 auto; box-sizing: border-box; padding: 0;}
	.expertResponse > .rBox {position: relative; float: left; display: block; width: 50%; height: auto; margin: 0; padding: 0; transition: all 0.3s;}
	#expertArea .bArticle {position: relative; width: 100%; min-height: auto; box-sizing: border-box; padding: 0;}
	#expertArea .bArticle > .titleImg {position: relative; width: 100%; max-width: 600px; height: 300px; box-sizing: content-box; border-right: 0; background-size: cover; background-position: center center;  transition: all 0.3s;}
	#expertArea .bArticle > .titleImg > .black {position: absolute; width: 100%; height: 100%; background-color: rgba(255,255,255,0.0); transition: all 0.3s;}
	#expertArea .bArticle:hover > .titleImg > .black {background-color: rgba(88,69,63,0.50);}

	#expertArea .bArticle > .infoArea {position: relative; width: 100%; box-sizing: border-box; padding-bottom: 40px; background-color: #fff; transition: all 0.3s;}
	#expertArea .bArticle > .infoArea > ul {position: relative; width: 100%; box-sizing: border-box; padding-bottom: 20px; transition: all 0.3s;}
	#expertArea .bArticle > .infoArea > ul > li {width: 100%; list-style: none;}
	#expertArea .bArticle > .infoArea > ul > li.title {width: 100%; height: 40px; line-height: 40px; font-size: 24px; font-weight: 700; color: #333; text-align: center; padding-top: 40px; transition: all 0.3s;}
	#expertArea .bArticle > .infoArea > ul > li.content {width: 100%; height: auto; min-height: 40px; box-sizing: border-box; padding: 20px 10px 0; padding-bottom: 0px; line-height: 20px; font-size: 14px; font-weight: 300; color: #777; text-align: center;  transition: all 0.3s;}
	#expertArea .bArticle > .infoArea > a.link {display: block; margin: 0 auto; width: 160px; height: 40px; line-height: 40px; font-size: 15px; font-weight: 400; color: #fff; text-align: center; background-color: rgba(68,140,203,1.0); background-color: rgba(0,0,0,0.3); text-decoration: none;  transition: all 0.3s;}
	#expertArea .bArticle:hover > .infoArea > ul > li.title {color: rgba(200,172,141,1.0);}
	#expertArea .bArticle:hover > .infoArea > a.link {color: #fff; background-color: rgba(200,172,141,1.0);}
	@media screen and (max-width: 1220px) {
		.expertResponse {padding: 0 20px;}
	}
	@media screen and (max-width: 980px) {
		.expertResponse > .rBox {width: 100% !important; transition: all 0.3s;}
		#expertArea .bArticle {height: 240px; min-height: 200px; box-sizing: content-box; padding: 0;}
		#expertArea .bArticle > .titleImg {position: relative; float: left; width: 30%; min-width: 0; max-width: none; padding: 0; border: 0; transition: all 0.3s;}

		#expertArea .bArticle > .infoArea {position: relative; float: left; width: 70%; min-width: 0; max-width: none; height: auto; box-sizing: border-box; padding: 40px; transition: all 0.3s;}
		#expertArea .bArticle > .infoArea > ul {}
		#expertArea .bArticle > .infoArea > ul > li {}
		#expertArea .bArticle > .infoArea > ul > li.title {height: 30px; line-height: 30px; font-size: 26px; text-align: left; padding-top: 0px;}
		#expertArea .bArticle > .infoArea > ul > li.content {height: auto; min-height: 40px; box-sizing: content-box; padding: 20px 0 0; margin: 0; text-align: left;}
		#expertArea .bArticle > .infoArea > ul > li.content br {display: none;}
		#expertArea .bArticle > .infoArea > a.link {margin: 0 0;}
	}
	@media screen and (max-width: 660px) {
		.expertResponse {padding: 0 10px;}
		#expertArea .bArticle > .titleImg {position: relative; float: left; width: 30%; min-width: 0; max-width: none; padding: 0; border: 0; transition: all 0.3s;}
		#expertArea .bArticle > .infoArea > ul {}
		#expertArea .bArticle > .infoArea > ul > li.title {font-size: 24px;}
		#expertArea .bArticle > .infoArea > ul > li.content {padding: 0; margin: 20px 0 0; overflow: hidden;}
	}
	@media screen and (max-width: 500px) {
		#expertArea .bArticle {height: auto;}
		#expertArea .bArticle > .titleImg {width: 100%; min-width: 320px; height: 300px; transition: all 0.3s;}
		#expertArea .bArticle > .infoArea {width: 100%; min-width: 320px; padding: 40px 10px; transition: all 0.3s;}
		#expertArea .bArticle > .infoArea > ul {}
		#expertArea .bArticle > .infoArea > ul > li.title {height: 30px; line-height: 30px; font-size: 24px; text-align: center; transition: all 0.3s;}
		#expertArea .bArticle > .infoArea > ul > li.content {padding: 0; margin: 20px 0; text-align: center;  overflow: hidden;}
		#expertArea .bArticle > .infoArea > a.link {margin: 0 auto;}
	}

#supportArea {background: url('../img/mBgSupportArea.jpg') center center no-repeat; background-size: cover;}
#supportArea > .mcBox .titleArea > h2,
#supportArea > .mcBox .titleArea > .engTitle,
#supportArea > .mcBox .titleArea > .subject {color: #fff;}

	.supportResponse {position: relative; width: 100%; height: auto; margin: 0 auto;}
	.supportResponse > .rBox {position: relative; display: block; width: 100%; max-width: 1200px; height: auto; margin: 0 auto; box-sizing: border-box; padding: 0; transition: all 0.3s;}
	.supportResponse > .rBox > .supportImg {float: left; display: block; width: 900px; height: 340px; background: url('../img/mImgSupport01.jpg') center center no-repeat; background-size: cover;}
	.supportResponse > .rBox > ul.supportGroup {float: left; display: block; width: 300px; height: 340px; box-sizing: border-box; padding: 20px 0 20px 40px; background-color: #fff;}
	.supportResponse > .rBox > ul.supportGroup > li {position: relative; display: block; width: 100%; height: 60px;}
	.supportResponse > .rBox > ul.supportGroup > li > a {display: block; width: 100%; height: 100%; box-sizing: border-box; padding: 20px 20px 19px; border-bottom: 1px #eee solid; line-height: 20px; font-size: 18px; font-weight: 400; color: #222; text-decoration: none; transition: all 0.3s;}
	.supportResponse > .rBox > ul.supportGroup > li:first-child > a {color: #fff; border-bottom: 1px #ff1738 solid; background-color: #ff1738;}
	.supportResponse > .rBox > ul.supportGroup > li:first-child > span {color: #fff;}
	.supportResponse > .rBox > ul.supportGroup > li > a:hover {color: #fff; border-bottom: 1px rgba(68,140,203,1.0) solid; background-color: rgba(68,140,203,1.0);}
	.supportResponse > .rBox > ul.supportGroup > li > span {position: absolute; top: 20px; right: 15px; width: 20px; height: 20px; line-height: 20px; font-size: 20px; font-weight: 300; color: #999; text-align: center; z-index: 1; transition: all 0.3s;}
	.supportResponse > .rBox > ul.supportGroup > li:hover > span {color: #fff;}

	@media screen and (max-width: 1220px) {
		.supportResponse > .rBox {max-width: 960px;}
		.supportResponse > .rBox > .supportImg {width: 700px; height: 340px;}
		.supportResponse > .rBox > ul.supportGroup {width: 260px; height: 340px; padding: 20px;}
	}
	@media screen and (max-width: 980px) {
		.supportResponse > .rBox {padding: 0 20px;}
		.supportResponse > .rBox > .supportImg {width: calc(100% - 260px);}
		.supportResponse > .rBox > ul.supportGroup {padding: 20px;}
	}
	@media screen and (max-width: 660px) {
		.supportResponse > .rBox {padding: 0 10px;}
		.supportResponse > .rBox > .supportImg {width: calc(100% - 200px);}
		.supportResponse > .rBox > ul.supportGroup {width: 200px; padding: 10px;}
		.supportResponse > .rBox > ul.supportGroup > li > a {font-size: 16px; padding: 20px 9px 20px 10px;}
		.supportResponse > .rBox > ul.supportGroup > li > span {right: 5px;}
	}
	@media screen and (max-width: 500px) {
		.supportResponse > .rBox > .supportImg {float: none; width: 100%; height: 140px;}
		.supportResponse > .rBox > ul.supportGroup {float: none; width: 100%; height: auto;}
		.supportResponse > .rBox > ul.supportGroup > li {width: 100%; height: 40px;}
		.supportResponse > .rBox > ul.supportGroup > li > a {font-size: 14px;  padding: 10px 9px 10px 10px; border: 0; border-bottom: 1px #eee solid;}
		.supportResponse > .rBox > ul.supportGroup > li:last-child > a {padding: 10px 10px 10px 10px; border: 0;}
		.supportResponse > .rBox > ul.supportGroup > li > a:hover {border: 0; border-bottom: 1px rgba(68,140,203,1.0) solid;}
		.supportResponse > .rBox > ul.supportGroup > li > span {top: 10px; right: 10px;}
	}

#contactArea {background-color: #fff;}

	.contactResponse {position: relative; width: 100%; height: auto; margin: 0 auto; padding: 0;}

	#contactArea ul.contactArea {position: relative; width: 100%; height: auto; padding-bottom: 0px; transition: all 0.3s;}
	#contactArea ul.contactArea > li {position: relative; float: left; list-style: none; box-sizing: border-box; padding-left: 80px; background-position: left 10px center; background-repeat: no-repeat; background-size: 60px; background-color: #fafafa; transition: all 0.3s;}
	#contactArea ul.contactArea > li > a {position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%;}
	#contactArea ul.contactArea > li:nth-child(1) {width: 33.333333%; background-image: url('../img/iconBottomLocation.png');}
	#contactArea ul.contactArea > li:nth-child(2) {width: 33.333334%; background-image: url('../img/iconBottomPhone.png');  background-color: #f7f7f4;}
	#contactArea ul.contactArea > li:nth-child(3) {width: 33.333333%; background-image: url('../img/iconBottomEmail.png');}

	#contactArea ul.contactArea > li > dl {width: 100%; height: 100px; box-sizing: border-box; padding: 10px;}
	#contactArea ul.contactArea > li > dl > dt {width: 100%; height: 30px; line-height: 30px; font-size: 20px; font-weight: 500; color: #333;}
	#contactArea ul.contactArea > li > dl > dt > span {font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; font-weight: 700;}
	#contactArea ul.contactArea > li > dl > dd {width: 100%; min-height: 20px; line-height: 20px; font-size: 15px; font-weight: 300; color: #777; padding: 10px 0 0;}
	#contactArea ul.contactArea > li > dl > dd.addr {font-size: 13px;}
	#contactArea ul.contactArea > li > dl > dd:first-of-type {letter-spacing: -0.5px;}
	#contactArea ul.contactArea > li > dl > dd > span {font-weight: 400; letter-spacing: 0.3px;}

	@media screen and (max-width: 1220px) {
		.contactResponse > .rBox {padding: 0 20px;}
		#contactArea ul.contactArea {height: auto;}
		#contactArea ul.contactArea > li {padding: 60px 0 10px 0; background-position: center top 10px; background-size: 50px;}
		#contactArea ul.contactArea > li > dl {padding: 0 10px;}
		#contactArea ul.contactArea > li > dl > dt {height: 40px; line-height: 40px; font-size: 18px; text-align: center;}
		#contactArea ul.contactArea > li > dl > dd {font-size: 13px; padding: 0; text-align: center;}
	}
	@media screen and (max-width: 980px) {
		.contactResponse > .rBox {padding: 0 10px;}
		#contactArea ul.contactArea {height: auto;}
		#contactArea ul.contactArea > li:nth-child(n) {float: none; width: 100%;}
	#contactArea ul.contactArea > li > dl {height: auto;}
	}