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

/* Main Banner Start */
#mainVisualArea {position: relative; width: 100%; height: 600px; margin: 0 auto; background: url('../img/mbn01_2024.jpg') center center; background-size: cover;}
#mainVisualArea > .copyText {position: absolute; top: 360px; left: 50%; width: 960px; margin-left: -480px;}
#mainVisualArea > .copyText > p.copy01 {font-size: 28px; line-height: 40px; font-weight: bold; color: #fff; text-align: center; text-shadow: 0 0 10px #222;}
#mainVisualArea > .copyText > p.copy02 {font-size: 42px; line-height: 60px; font-weight: normal; color: #fff; text-align: center; text-shadow: 0 0 10px #222;}
/* Main Banner End */


#mainLinkArea {position: absolute; top: 600px; left: 50%; margin-left: -480px; width: 960px; height: 200px; z-index: 1; box-shadow: 0 0 5px 0 #ddd;}
#mainLinkArea > li {position: relative; float: left; width: 320px; height: 200px; background-color: rgba(255,255,255,0.95);}
#mainLinkArea > li > a {display: block; position: absolute; top: 0; height: 0; width: 100%; height: 100%; z-index: 2; text-decoration: none;}
#mainLinkArea > li > dl {width: 240px; height: 160px; padding: 20px 40px;}
#mainLinkArea > li > dl > dt {width: 100%; height: 40px; line-height: 40px; font-size: 18px; color: #222; text-align: center;}
#mainLinkArea > li > dl > dd {width: 100%; height: 40px; line-height: 20px; font-size: 13px; color: #777; text-align: center; padding: 10px 0;}
#mainLinkArea > li > dl > dd.icon {display: block; width: 60px; height: 60px; margin: 0 auto; padding: 0; background-image: url('../img/iconMainLink.png'); background-repeat: no-repeat;}
#mainLinkArea > li:nth-child(2) {background-color: #a28c61;}
#mainLinkArea > li:nth-child(2) > dl > dt,
#mainLinkArea > li:nth-child(2) > dl > dd {color: #fff;}
#mainLinkArea > li:nth-child(2) > dl > dt > span {font-weight: bold; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic;}
#mainLinkArea > li:nth-child(1) > dl > dd.icon {background-position: 0 0;}
#mainLinkArea > li:nth-child(2) > dl > dd.icon {background-position: -60px 0;}
#mainLinkArea > li:nth-child(3) > dl > dd.icon {background-position: -120px 0;}


#mainBusinessArea {position: relative; width: 100%; padding: 160px 0 100px;}
#mainBusinessArea p.eng {width: 960px; height: 40px; margin: 0 auto; font-size: 16px; line-height: 40px; text-align: center; color: #a28c61; font-weight: 500; letter-spacing: 10px; text-indent: 10px;}
#mainBusinessArea h2 {width: 960px; height: 60px; margin: 0 auto; font-size: 48px; line-height: 60px; text-align: center; color: #222; padding-bottom: 10px; font-weight: 300;}
#mainBusinessArea p.info {width: 960px; height: 40px; margin: 0 auto; font-size: 14px; color: #777; line-height: 40px; text-align: center; font-weight: 300; padding-bottom: 20px; }

#mainBusinessArea ul.pTitle {width: 840px; height: 60px; margin: 0px auto; padding: 0 120px;}
#mainBusinessArea ul.pTitle>li {float: left; width: 120px; height: 60px; background-color: #f9f9f9;}
#mainBusinessArea ul.pTitle>li>a {
	display: block; width: 120px; height: 60px; line-height: 58px; font-size: 16px; color: #666; font-weight: 300; text-align: center;
	box-sizing: border-box; border: 1px #ddd solid; border-left: 0;
	text-decoration: none;
	transition: all 0.3s;
}
#mainBusinessArea ul.pTitle>li:first-child>a {border-left: 1px #ddd solid;}
#mainBusinessArea ul.pTitle>li.on>a,
#mainBusinessArea ul.pTitle>li>a:hover {background-color: #a28c61; color: #fff; font-weight: 500; border-color: #a28c61;}

#mainBusinessArea ul.productList {width: 960px; height: 240px; padding-top: 40px; margin: 0 auto;}
#mainBusinessArea ul.productList > li {position: relative; float: left; width: 220px; height: 240px; margin: 0 10px; background-color: #32302c; transition: all 0.3s;}
#mainBusinessArea ul.productList > li > a {position: absolute; display: block; top: 0; left: 0; width: 100%; height: 240px; z-index: 1;}
#mainBusinessArea ul.productList > li:hover {background-color: #000;}

#mainBusinessArea ul.productList > li > .pic {float: left; width: 220px; height: 140px; overflow: hidden; margin-bottom: 20px; border-radius: 0; overflow: hidden;}
#mainBusinessArea ul.productList > li > .category {float: left; display: block; padding: 0 20px; width: 180px; height: 20px; line-height: 20px; font-size: 12px; color: #a28c61; text-align: left; overflow: hidden;}
#mainBusinessArea ul.productList > li > .subTitle {float: left; display: block; padding: 0 20px; width: 180px; height: 20px; line-height: 20px; font-size: 12px; color: #999; text-align: left;  overflow: hidden;}
#mainBusinessArea ul.productList > li > .title {float: left; display: block; padding: 0 20px; width: 180px; height: 20px; line-height: 20px; font-size: 14px; color: #fff; font-weight: 300; text-align: left;  overflow: hidden;}



#middleVisualArea {position: relative; width: 100%; height: 140px; padding: 80px 0 180px; margin: 0 auto; background: url('../img/mvbn.jpg') center top; background-size: cover;}
#middleVisualArea > p.slogan01 {width: 960px; height: 60px; line-height: 60px; font-size: 36px; font-weight: 200; color: #333; text-align: center; margin: 0 auto;}
#middleVisualArea > p.slogan02 {width: 960px; height: 80px; line-height: 80px; font-size: 72px; font-weight: 500; color: #3d342a; text-align: center; margin: 0 auto;}



#mainCustomArea {position: relative; width: 100%; padding: 100px 0; background-color: #fff;}
#mainCustomArea p.eng {width: 960px; height: 40px; margin: 0 auto; font-size: 16px; line-height: 40px; text-align: center; color: #a28c61; font-weight: 500; letter-spacing: 10px; text-indent: 10px;}
#mainCustomArea h2 {width: 960px; height: 60px; margin: 0 auto; font-size: 48px; line-height: 60px; text-align: center; color: #222; padding-bottom: 10px; font-weight: 300;}
#mainCustomArea p.info {width: 960px; height: 40px; margin: 0 auto; font-size: 14px; color: #777; line-height: 40px; text-align: center; font-weight: 300; padding-bottom: 40px; }
	.customBox {width: 960px; height: 300px; margin: 0 auto;}
	.customBox > li {float: left; width: 240px; height: 220px; padding: 40px;}
	.customBox > li:nth-child(1) {background: url('../img/bgContactIcon01.png') -40px 10px no-repeat #f9f9f9;}
	.customBox > li:nth-child(2) {background: url('../img/bgCustomNews.jpg') center center no-repeat;}
	.customBox > li:nth-child(3) {background: url('../img/bgContactIcon02.png') right -50px top 10px no-repeat #eee;}

	.customBox > li:nth-child(1) > h3 {width: 100%; height: 40px; line-height: 40px; font-size: 24px; font-weight: 500; color: #222; text-align: center;}
	.customBox > li:nth-child(1) > .phoneNo {width: 100%; height: 60px; line-height: 60px; font-size: 32px; font-weight: 700; color: #a28c61; text-align: center; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic;}
	.customBox > li:nth-child(1) > .phoneNoLink {display: block; width: 120px; height: 20px; font-size: 12px; font-weight: bold; color: #fff; text-align: center; margin: 0 auto; background-color: #a28c61;}
	.customBox > li:nth-child(1) > .phoneNoLink a {display: block; width: 100%; height: 100%; font-size: 12px; font-weight: bold; color: #fff; text-align: center;}
	.customBox > li:nth-child(1) > .line {display: block; width: 200px; height: 1px; line-height: 0; margin: 20px auto 19px; border-top: 1px #bbb dashed;}
	.customBox > li:nth-child(1) > h4 {width: 100%; height: 20px; line-height: 20px; font-size: 14px; font-weight: 500; color: #a28c61; text-align: center;}
	.customBox > li:nth-child(1) > .mobileNo {width: 100%; height: 40px; line-height: 40px; font-size: 26px; font-weight: 700; color: #222; text-align: center; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic;}

	.customBox > li:nth-child(2) > .logo {display: block; width: 80px; height: 80px; margin: 0 auto; background: url('../img/ciLogo2024.png') center center no-repeat;}
	.customBox > li:nth-child(2) > h3 {width: 100%; height: 40px; line-height: 40px; font-size: 30px; font-weight: 500; color: #fff; text-align: center;}
	.customBox > li:nth-child(2) > p {width: 100%; height: 40px; line-height: 20px; font-size: 14px; font-weight: 300; color: #fff; text-align: center; padding-bottom: 20px;}
	.customBox > li:nth-child(2) > a {display: block; width: 240px; height: 40px; line-height: 40px; font-size: 14px; font-weight: 300; color: #fff; text-align: center; background-color: #a28c61; transition: all 0.3s;}
	.customBox > li:nth-child(2) > a:hover {background-color: #222;}

	.customBox > li:nth-child(3) > h3 {width: 100%; height: 40px; line-height: 40px; font-size: 30px; font-weight: 500; color: #222; text-align: center;}
	.customBox > li:nth-child(3) > .icon {display: block; width: 60px; height: 60px; margin: 10px auto; background: url('../img/iconInquiry.png') center center no-repeat;}
	.customBox > li:nth-child(3) > p {width: 100%; height: 40px; line-height: 20px; font-size: 14px; font-weight: 300; color: #777; text-align: center; padding-bottom: 20px;}
	.customBox > li:nth-child(3) > a {display: block; width: 240px; height: 40px; line-height: 40px; font-size: 14px; font-weight: 300; color: #fff; text-align: center; background-color: #a28c61; transition: all 0.3s;}
	.customBox > li:nth-child(3) > a:hover {background-color: #222;}