@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: 160px !important;}
:root {--swiper-theme-color: rgba(0,123,193,1.0) !important; --swiper-navigation-size: 20px;}
.swiper-button-next::after,
.swiper-button-prev::after {font-size: 20px !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-pagination-progressbar {top: auto !important; bottom: 80px !important; display: none; height: 2px !important; background-color: rgba(0,0,0,0.05) !important;}
.swiper-button-prev {left: 0 !important;}
.swiper-button-next {right: 0 !important;}
.swiper-button-prev,
.swiper-button-next {top: 80px !important; color: #fff !important; background-color: rgba(0,123,193,0.8);}
.swiper-button-disabled {background-color: rgba(0,0,0,0.3); opacity: 0.2 !important;}

.installationResponse .swiper-button-prev,
.installationResponse .swiper-button-next {top: 140px !important;}

@media screen and (max-width: 1220px) {
	.swiper-pagination-progressbar {display: block;}
}
.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 > .img202607_01 {background: url('../img/mbn202607_01_low.jpg') center center no-repeat; background-size: cover;}
.swiper-container ul.swiper-wrapper > li > .img202607_02 {background: url('../img/mbn202607_02_low.jpg') center center no-repeat; background-size: cover;}
.swiper-container ul.swiper-wrapper > li > .img202607_03 {background: url('../img/mbn202607_03_low.jpg') center center no-repeat; background-size: cover;}
.swiper-container ul.swiper-wrapper > li > .img202607_04 {background: url('../img/mbn202607_04_low.jpg') center center no-repeat; background-size: cover;}
.swiper-container ul.swiper-wrapper > li > .img202607_05 {background: url('../img/mbn202607_05_low.jpg') center center no-repeat; background-size: cover;}



#mainVisualArea .mvLayerBox {position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 100%; max-width: 1200px; min-width: 320px; height: 400px; box-sizing: border-box; padding: 100px 10px 0; 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; margin-top: 0px; width: 100%; height: 80px; line-height: 80px; font-size: 72px; font-weight: 200; text-align: left; color: #fff; letter-spacing: -2px; transition: all 0.3s;}
#mainVisualArea .mvLayerBox .textArea > p.slogan02 {display: block; margin-top: 0px; width: 100%; height: 40px; line-height: 40px; font-size: 32px; font-weight: 200; text-align: left; color: #fff; letter-spacing: -1.5px; transition: all 0.3s;}
#mainVisualArea .mvLayerBox .textArea > p.slogan01,
#mainVisualArea .mvLayerBox .textArea > p.slogan02 {text-shadow: 1px 1px 5px rgba(0,0,0,0.3);}
#mainVisualArea .mvLayerBox .textArea > p.slogan02 > span {font-weight: 700;}
#mainVisualArea .mvLayerBox .textArea > p.slogan03 {display: block; margin-top: 60px; width: 100%; height: 60px; line-height: 30px; font-size: 20px; font-weight: 300; text-align: left; color: #fff; letter-spacing: 0px; transition: all 0.3s;}
#mainVisualArea .mvLayerBox .textArea > .sloganLine {display: none; margin: 20px auto; width: 1px; height: 120px; background-color: #fff; transition: all 0.3s;}

#mainVisualArea .mvLayerBox .textArea > a {display: block; margin-top: 20px; width: 160px; height: 40px; box-sizing: border-box; border: 1px rgba(255,255,255,1.0) solid; line-height: 38px; font-size: 14px; font-weight: 300; text-align: center; color: #fff; letter-spacing: 0px; background-color: rgba(0,123,193,0.0); text-decoration: none;  transition: all 0.3s;}
#mainVisualArea .mvLayerBox .textArea > a:hover {border: 1px rgba(255,255,255,1.0) solid; background-color: rgba(0,123,193,1.0);} /* #ad997e */


#mainVisualArea .mvLayerBox .textArea > p.slogan01,
#mainVisualArea .mvLayerBox .textArea > p.slogan02,
#mainVisualArea .mvLayerBox .textArea > p.slogan03 {text-align: center;}
#mainVisualArea .mvLayerBox .textArea > a {margin: 20px auto 0;}


@media screen and (max-width: 980px) {
	#mainVisualArea .mvLayerBox .textArea > p.slogan01,
	#mainVisualArea .mvLayerBox .textArea > p.slogan02,
	#mainVisualArea .mvLayerBox .textArea > p.slogan03 {text-align: center;}
	#mainVisualArea .mvLayerBox .textArea > a {margin: 20px auto;} 
}
@media screen and (max-width: 660px) {
	#mainVisualArea {min-height: 480px;}
	#mainVisualArea .mvLayerBox {height: 330px; padding: 80px 0 0;}
	#mainVisualArea .mvLayerBox .textArea > p.slogan01 {height: 60px; line-height: 60px; font-size: 52px;}
	#mainVisualArea .mvLayerBox .textArea > p.slogan02 {height: 30px; line-height: 30px; font-size: 24px;}
	#mainVisualArea .mvLayerBox .textArea > p.slogan03 {height: 40px; line-height: 20px; font-size: 15px;}
}
@media screen and (max-width: 480px) {
	#mainVisualArea .mvLayerBox {height: 270px;}
	#mainVisualArea .mvLayerBox .textArea > p.slogan01 {height: 40px; line-height: 40px; font-size: 36px;}
	#mainVisualArea .mvLayerBox .textArea > p.slogan02 {height: 20px; line-height: 20px; font-size: 17px;}
	#mainVisualArea .mvLayerBox .textArea > p.slogan03 {height: 30px; line-height: 15px; font-size: 9px; margin-top: 40px;}
}

/* Main Banner End */

/* Main Quick Link Start */
#mainQuickLinkArea {position: relative; display: block; margin: 0 auto; width: 100%; max-width: 960px; min-width: 300px; height: 0; line-height: 0; font-size: 0;}
#mainQuickLinkArea .quickLink {position: absolute; top: -140px; display: block; width: 100%; height: 140px; box-shadow: 0 0 8px 3px rgba(0,0,0,0.1); z-index: 99;}
#mainQuickLinkArea .quickLink > .inquiryBox {position: relative; float: left; display: block; width: 600px; height: 100%; box-sizing: border-box; padding: 40px; background-color: rgba(255,255,255,0.8); transition: all 0.3s;}
#mainQuickLinkArea .quickLink > .inquiryBox:hover {background-color: rgba(255,255,255,1.0);}
#mainQuickLinkArea .quickLink > .inquiryBox p.brand {width: 100%; height: 20px; line-height: 20px; font-size: 14px; font-weight: 300; color: #999;}
#mainQuickLinkArea .quickLink > .inquiryBox p.brand > span {font-weight: 700; color: #222;}
#mainQuickLinkArea .quickLink > .inquiryBox p.inquiry {width: 100%; height: 40px; line-height: 40px; font-size: 30px; font-weight: 700; color: #222;}
#mainQuickLinkArea .quickLink > .inquiryBox a {position: absolute; bottom: 40px; right: 40px; z-index: 1; display: block; width: 160px; height: 40px; line-height: 40px; font-size: 14px; font-weight: 300; color: #fff; text-align: center; text-decoration: none; background-color: rgba(0,123,193,1.0); transition: all 0.3s;}
#mainQuickLinkArea .quickLink > .inquiryBox a:hover {background-color: rgba(0,0,0,1.0);}
#mainQuickLinkArea .quickLink > .phoneBox {position: relative; float: left; display: block; width: 360px; height: 100%; box-sizing: border-box; padding: 30px 40px 30px 120px; background-color: rgba(0,123,193,0.8); transition: all 0.3s;}
#mainQuickLinkArea .quickLink > .phoneBox .icon {position: absolute; top: 40px; left: 40px; z-index: 1; display: block; width: 60px; height: 60px; background: url('../img/iconVisualPhone.png') center center no-repeat; background-size: 90%; background-color: rgba(255,255,255,0.2); transition: all 0.3s;}
#mainQuickLinkArea .quickLink > .phoneBox a {position: absolute; top: 0; left: 0; z-index: 2; display: block; width: 100%; height: 100%;}
#mainQuickLinkArea .quickLink > .phoneBox dl {display: block; width: 100%; height: 40px;}
#mainQuickLinkArea .quickLink > .phoneBox dl > dt {display: block; width: 100%; height: 20px; line-height: 20px; font-size: 13px; font-weight: 200; color: #fff;}
#mainQuickLinkArea .quickLink > .phoneBox dl > dd {display: block; width: 100%; height: 20px; line-height: 20px; font-size: 13px; font-weight: 700; color: #fff;}
#mainQuickLinkArea .quickLink > .phoneBox p.phoneNumber {display: block; width: 100%; height: 40px; line-height: 40px; font-size: 36px; font-weight: bold; color: #fff; font-family: Georgia, "Times New Roman", Times, serif;}
#mainQuickLinkArea .quickLink > .phoneBox:hover {background-color: rgba(0,123,193,1.0);}
#mainQuickLinkArea .quickLink > .phoneBox:hover .icon {border-radius: 50%; background-color: rgba(0,0,0,0.9);}
@media screen and (max-width: 980px) {
	#mainQuickLinkArea {max-width: 640px;}
	#mainQuickLinkArea .quickLink {top: -120px; height: 120px;}
	#mainQuickLinkArea .quickLink > .inquiryBox {width: 50%; padding: 20px; }
	#mainQuickLinkArea .quickLink > .inquiryBox p.brand {font-size: 12px; text-align: center;}
	#mainQuickLinkArea .quickLink > .inquiryBox p.inquiry {height: 20px; line-height: 20px; font-size: 15px; text-align: center;}
	#mainQuickLinkArea .quickLink > .inquiryBox a {position: relative; top: 0; bottom: 0; left: 0; right: 0; margin: 10px auto 0; height: 30px; line-height: 30px;}
	#mainQuickLinkArea .quickLink > .phoneBox {width: 50%; padding: 20px 20px 20px 100px;}
	#mainQuickLinkArea .quickLink > .phoneBox .icon {top: 30px; left: 20px;}
}
@media screen and (max-width: 660px) {
	#mainQuickLinkArea {max-width: 300px;}
	#mainQuickLinkArea .quickLink {top: -120px; height: 240px;}
	#mainQuickLinkArea .quickLink > .inquiryBox,
	#mainQuickLinkArea .quickLink > .phoneBox {float: none; width: 100%; height: 120px;}
	#mainQuickLinkArea .quickLink > .phoneBox dl > dt {font-size: 11px;}
	#mainQuickLinkArea .quickLink > .phoneBox dl > dd {font-size: 12px; font-weight: 500;}
	#mainQuickLinkArea .quickLink > .phoneBox p.phoneNumber {font-size: 32px;}

}
/* Main Quick Link End */

/* Main Contants Start */
.mcArea {position: relative; width: 100%; min-width: 320px; margin: 0 auto; padding: 0;}
.mcArea > .decoArea {position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; z-index: 1; }
.mcArea > .mcBox {position: relative; width: 100%; min-width: 320px; max-width: 1200px; margin: 0 auto; box-sizing: border-box; padding: 0px 0; z-index: 2;}
@media screen and (max-width: 1220px) {
	.mcArea > .mcBox {max-width: 960px;}
}
@media screen and (max-width: 980px) {
	.mcArea > .mcBox {padding: 80px 10px;}
}

.mcBox .titleArea {width: 100%; height: auto; margin: 0 auto; padding-bottom: 40px;}
.mcBox .titleArea > h2 {display: block; width: 100%; height: 60px; padding: 0; line-height: 60px; font-size: 36px; font-weight: 200; color: #999; text-align: center; letter-spacing: -1px;}
.mcBox .titleArea > h2 > span {font-weight: 700; color: #222;}
.mcBox .titleArea > h2 > br {display: none;}
.mcBox .titleArea > .engTitle {display: block; width: 100%; height: auto; line-height: 40px; font-size: 20px; font-weight: 300; color: #999; text-align: center;}
.mcBox .titleArea > .subject {display: block; width: 100%; height: auto; box-sizing: border-box; padding: 10px 0; line-height: 20px; font-size: 16px; font-weight: 300; color: #999; text-align: center;}
.mcBox .titleArea > .subject > br {display: none;}
@media screen and (max-width: 980px) {
	.mcBox .titleArea {padding-bottom: 40px;}
	.mcBox .titleArea > h2 {height: 50px; line-height: 50px; font-size: 36px;}
	.mcBox .titleArea > .engTitle {line-height: 30px; font-size: 20px;}
	.mcBox .titleArea > .subject {font-size: 14px;}
}
@media screen and (max-width: 660px) {
	.mcBox .titleArea > h2 {height: auto; line-height: 40px; font-size: 32px;}
	.mcBox .titleArea > h2 > br {display: block;}
	.mcBox .titleArea > .subject > br {display: block;}
}
@media screen and (max-width: 500px) {
	.mcBox .titleArea > h2 {height: 60px; line-height: 30px; font-size: 28px;}
}
.sectionLine01top {position: absolute; top: -140px; left: 0; right: 0; margin: 0 auto; z-index: 1; display: block; width: 100%; height: 140px; background: url('../img/sectionLine01top.png') center bottom no-repeat; background-size: auto 100%;}
.sectionLine02top {position: absolute; top: -140px; left: 0; right: 0; margin: 0 auto; z-index: 1; display: block; width: 100%; height: 140px; background: url('../img/sectionLine02top.png') center bottom no-repeat; background-size: auto  100%;}
.sectionLine02bottom {position: absolute; bottom: -140px; left: 0; right: 0; margin: 0 auto; z-index: 1; display: block; width: 100%; height: 140px; background: url('../img/sectionLine02bottom.png') center bottom no-repeat; background-size: auto  100%;}
.sectionLine03top {position: absolute; top: -140px; left: 0; right: 0; margin: 0 auto; z-index: 1; display: block; width: 100%; height: 140px; background: url('../img/sectionLine03top.png') center bottom no-repeat; background-size: auto  100%;}
.sectionLine03bottom {position: absolute; bottom: -140px; left: 0; right: 0; margin: 0 auto; z-index: 1; display: block; width: 100%; height: 140px; background: url('../img/sectionLine03bottom.png') center bottom no-repeat; background-size: auto  100%;}

	@media screen and (max-width: 980px) {
		/*
		.sectionLine01top,
		.sectionLine02top {top: -100px; height: 100px;}
		.sectionLine02bottom {bottom: -100px; height: 100px;}
		*/
	}

#productArea {background: #f9f9f9;}
#productArea > .mcBox {padding: 40px 0 140px; transition: all 0.3s;}

	.productResponse {position: relative; width: 100%; height: auto; margin: 0 auto; box-sizing: border-box; padding: 0;}
	.productResponse > .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;}
	.productResponse > .rBox ul.productsArea {display: block; width: 100%;}
	.productResponse > .rBox ul.productsArea > li {float: left; display: block; width: 300px; box-sizing: border-box; padding: 0 10px;}
	.productResponse > .rBox ul.productsArea > li > .productBox {display: block; width: 100%; box-sizing: border-box; padding: 0; box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.05); transition: all 0.3s;}
	.productResponse > .rBox ul.productsArea > li > .productBox:hover {box-shadow: 2px 2px 8px 2px rgba(0,0,0,0.2);}
	.productResponse > .rBox ul.productsArea > li > .productBox .pImg {display: block; width: 100%; height: 260px; background-color: #f3f3f3; background-position: center center; background-size: cover;}
	.productResponse > .rBox ul.productsArea > li > .productBox ul.pInfo {display: block; width: 100%; box-sizing: border-box; padding: 40px 20px; background-color: #ffffff;}
	.productResponse > .rBox ul.productsArea > li > .productBox ul.pInfo > li.titleEng {width: 100%; height: 20px; line-height: 20px; font-size: 14px; font-weight: 400; color: #222; text-align: center;}
	.productResponse > .rBox ul.productsArea > li > .productBox ul.pInfo > li.titleKor {width: 100%; height: 40px; line-height: 40px; font-size: 24px; font-weight: 500; color: #222; text-align: center;}
	.productResponse > .rBox ul.productsArea > li > .productBox ul.pInfo > li.instrument {margin: 20px 0; width: 100%; height: 20px; line-height: 20px; font-size: 12px; font-weight: 400; color: rgba(0,123,193,1.0); text-align: center;}
	.productResponse > .rBox ul.productsArea > li > .productBox ul.pInfo > li.guide {width: 100%; height: 80px; line-height: 20px; font-size: 12px; font-weight: 300; color: #222; text-align: center;}
	.productResponse > .rBox ul.productsArea > li > .productBox ul.pInfo > li.link {margin-top: 20px; width: 100%; height: 40px;}
	.productResponse > .rBox ul.productsArea > li > .productBox ul.pInfo > li.link > a {display: block; margin: 0 auto; width: 160px; height: 40px; box-sizing: border-box; border: 1px rgba(0,0,0,0.1) solid; line-height: 38px; font-size: 13px; font-weight: 400; color: #fff; text-align: center; text-decoration: none; background-color: rgba(163,173,179,0.6); transition: all 0.3s;}
	.productResponse > .rBox ul.productsArea > li > .productBox ul.pInfo > li.link > a:hover {background-color: rgba(0,123,193,1.0);}

	/*
	@media screen and (max-width: 1220px) {
		.productResponse > .rBox {max-width: 960px;}
		.productResponse > .rBox ul.productsArea > li {width: 320px;}
		.productResponse > .rBox ul.productsArea > li > .productBox ul.pInfo {padding: 30px;}
		.productResponse > .rBox ul.productsArea > li > .productBox ul.pInfo > li.guide {font-size: 12px;}
	}
	*/
	@media screen and (max-width: 1220px) {
		#productArea > .mcBox {padding: 40px 0 100px;}
		.productResponse > .rBox {max-width: 960px;}
		.productResponse > .rBox ul.productsArea > li {float: none; display: block; width: 100%; box-sizing: border-box; padding: 10px;}
		.productResponse > .rBox ul.productsArea > li:first-child {padding-top: 0;}
		.productResponse > .rBox ul.productsArea > li:last-child {padding-bottom: 0;}
		.productResponse > .rBox ul.productsArea > li > .productBox .pImg {float: left; width: 40%; height: 260px;}
		.productResponse > .rBox ul.productsArea > li > .productBox ul.pInfo {float: left; width: 60%; padding: 30px;}

		.productResponse > .rBox ul.productsArea > li > .productBox ul.pInfo > li.titleEng,
		.productResponse > .rBox ul.productsArea > li > .productBox ul.pInfo > li.titleKor,
		.productResponse > .rBox ul.productsArea > li > .productBox ul.pInfo > li.instrument,
		.productResponse > .rBox ul.productsArea > li > .productBox ul.pInfo > li.guide {text-align: left;}

		.productResponse > .rBox ul.productsArea > li > .productBox ul.pInfo > li.titleKor {height: 30px; line-height: 30px;}
		.productResponse > .rBox ul.productsArea > li > .productBox ul.pInfo > li.instrument {margin: 10px 0 0;}
		.productResponse > .rBox ul.productsArea > li > .productBox ul.pInfo > li.guide {height: 60px;}
		/* .productResponse > .rBox ul.productsArea > li > .productBox ul.pInfo > li.guide > br {display: none;} */
		.productResponse > .rBox ul.productsArea > li > .productBox ul.pInfo > li.link {margin-top: 30px; height: 30px;}
		.productResponse > .rBox ul.productsArea > li > .productBox ul.pInfo > li.link > a {margin-left: 0; width: 120px; height: 30px; line-height: 28px; font-size: 12px;}
	}
	@media screen and (max-width: 660px) {
		#productArea > .mcBox {padding: 160px 0 100px;}
		.productResponse > .rBox ul.productsArea > li > .productBox .pImg {height: 250px;}

		.productResponse > .rBox ul.productsArea > li > .productBox .pImg {width: 40%;}
		.productResponse > .rBox ul.productsArea > li > .productBox ul.pInfo {width: 60%}
		.productResponse > .rBox ul.productsArea > li > .productBox ul.pInfo > li.titleEng {font-size: 12px;}
		.productResponse > .rBox ul.productsArea > li > .productBox ul.pInfo > li.titleKor {height: 20px; line-height: 20px; font-size: 18px;}

		.productResponse > .rBox ul.productsArea > li > .productBox ul.pInfo > li.instrument,
		.productResponse > .rBox ul.productsArea > li > .productBox ul.pInfo > li.guide {font-size: 10px;}
		.productResponse > .rBox ul.productsArea > li > .productBox ul.pInfo > li.guide {line-height: 18px;}
	}
	@media screen and (max-width: 500px) {
		.productResponse > .rBox ul.productsArea > li {margin: 0 auto; width: 100%; max-width: 400px; min-width: 300px;}
		.productResponse > .rBox ul.productsArea > li > .productBox .pImg {float: none; width: 100%; height: 240px;}
		.productResponse > .rBox ul.productsArea > li > .productBox ul.pInfo {float: none; width: 100%}
		.productResponse > .rBox ul.productsArea > li > .productBox ul.pInfo > li.titleEng,
		.productResponse > .rBox ul.productsArea > li > .productBox ul.pInfo > li.titleKor,
		.productResponse > .rBox ul.productsArea > li > .productBox ul.pInfo > li.instrument,
		.productResponse > .rBox ul.productsArea > li > .productBox ul.pInfo > li.guide {text-align: center;}
		.productResponse > .rBox ul.productsArea > li > .productBox ul.pInfo > li.link {margin-top: 10px;}
		.productResponse > .rBox ul.productsArea > li > .productBox ul.pInfo > li.link > a {margin: 0 auto;}
	}

#optionArea {background: #eeeeee;}
#optionArea > .mcBox {padding: 0 0 0; transition: all 0.3s;}

	.optionResponse {position: relative; width: 100%; height: auto; margin: 0 auto; box-sizing: border-box; padding: 0;}
	.optionResponse > .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;}
	.optionResponse > .rBox ul.optionArea {width: 100%;}
	.optionResponse > .rBox ul.optionArea li {display: block; width: 200px; box-sizing: border-box; padding: 0 10px;}
	.optionResponse > .rBox ul.optionArea li > .optionBox {display: block; width: 100%; box-sizing: border-box; padding: 0; transition: all 0.3s;}
	.optionResponse > .rBox ul.optionArea li > .optionBox .pImg {display: block; width: 100%; height: 160px; background-color: #ffffff; background-position: center center; background-size: cover;}
	.optionResponse > .rBox ul.optionArea li > .optionBox ul.pInfo {display: block; width: 100%; box-sizing: border-box; padding: 20px 0;}
/*	.optionResponse > .rBox ul.optionArea li > .optionBox ul.pInfo > li.title {width: 100%; height: 40px; box-sizing: border-box; padding-bottom: 10px; line-height: 30px; font-size: 18px; font-weight: 500; color: #222; text-align: left;} */
	.optionResponse > .rBox ul.optionArea li > .optionBox ul.pInfo > li.title {width: 100%; height: 40px; box-sizing: border-box; padding-bottom: 10px; line-height: 30px; font-size: 15px; font-weight: 500; color: #222; text-align: left;}
	.optionResponse > .rBox ul.optionArea li > .optionBox ul.pInfo > li.guide {width: 100%; height: 80px; line-height: 20px; font-size: 12px; font-weight: 300; color: #999; text-align: left;}
	.optionResponse > .rBox a.optionLink {display: block; margin: 40px auto 0; width: 160px; height: 40px; box-sizing: border-box; border: 1px rgba(0,0,0,0.1) solid; line-height: 38px; font-size: 13px; font-weight: 400; color: #fff; text-align: center; text-decoration: none; background-color: rgba(163,173,179,0.6); transition: all 0.3s;}
	.optionResponse > .rBox a.optionLink:hover {background-color: rgba(0,123,193,1.0);}

	@media screen and (max-width: 1220px) {
	}
	@media screen and (max-width: 980px) {
	}
	@media screen and (max-width: 660px) {
	}
	@media screen and (max-width: 500px) {
	}


#installationArea {background: url('../img/mBgInstallationArea.jpg') center center no-repeat; background-size: cover;}
#installationArea > .mcBox {padding: 140px 0; transition: all 0.3s;}
#installationArea > .mcBox h2,
#installationArea > .mcBox h2 span {color: #ffffff;}

	.installationResponse {position: relative; width: 100%; height: auto; margin: 0 auto; box-sizing: border-box; padding: 0;}
	.installationResponse > .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;}
	.installationResponse > .rBox ul.installationArea {width: 100%;}
	.installationResponse > .rBox ul.installationArea li {display: block; width: 240px; height: 280px; box-sizing: border-box; padding: 0; background-size: cover; background-position: center center; transition: all 0.3s;}
	.installationResponse > .rBox ul.installationArea li > .installationBox {position: relative; display: block; width: 100%; height: 0; line-height: 0; font-size: 0; box-sizing: border-box; padding: 0; overflow: hidden; background-color: rgba(0,0,0,0.0); transition: all 0.3s;}
	.installationResponse > .rBox ul.installationArea li > .installationBox > .title {position: absolute; bottom: -40px; left: 0; right: 0; margin: 0 auto; display: block; width: 100%; height: 40px; line-height: 40px; font-size: 14px; font-weight: 400; color: #fff; text-align: center; transition: all 0.3s;} 
	.installationResponse > .rBox ul.installationArea li:hover > .installationBox {height: 100%; background-color: rgba(0,0,0,0.9);}
	.installationResponse > .rBox ul.installationArea li:hover > .installationBox > .title {bottom: 40px;} 
	.installationResponse > .rBox a.installationLink {display: block; margin: 40px auto 0; width: 160px; height: 40px; box-sizing: border-box; border: 1px rgba(255,255,255,1.0) solid; line-height: 38px; font-size: 13px; font-weight: 400; color: #fff; text-align: center; text-decoration: none; background-color: rgba(0,123,193,0.0); transition: all 0.3s;}
	.installationResponse > .rBox a.installationLink:hover {background-color: rgba(0,123,193,1.0);}

	@media screen and (max-width: 1220px) {
		.installationResponse > .rBox {padding: 0 10px;}
		.installationResponse > .rBox ul.installationArea li {width: 220px;}
	}
	@media screen and (max-width: 980px) {
	}
	@media screen and (max-width: 660px) {
	}
	@media screen and (max-width: 500px) {
	}

#customerArea {background: #ffffff;}
#customerArea > .mcBox {padding: 0 0 0; transition: all 0.3s;}

	.customerResponse {position: relative; width: 100%; height: auto; margin: 0 auto; box-sizing: border-box; padding: 0;}
	.customerResponse > .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;}
	.customerResponse > .rBox .estimateArea {position: relative; display: block; width: 100%; max-width: 1200px; height: 300px; box-sizing: border-box; padding-top: 40px; transition: all 0.3s;}
	.customerResponse > .rBox .estimateArea ul.estimateBox {position: relative; z-index: 2; display: block; width: 100%; height: 100%;}
	.customerResponse > .rBox .estimateArea ul.estimateBox > li {float: left; display: block; width: 25%; height: 100%; box-sizing: border-box; padding: 40px;}
	.customerResponse > .rBox .estimateArea ul.estimateBox > li:nth-child(1) {background-color: rgba(0,123,193,0.9);}
	.customerResponse > .rBox .estimateArea ul.estimateBox > li:nth-child(2) {background-color: rgba(68,68,68,0.9);}
	.customerResponse > .rBox .estimateArea ul.estimateBox > li:nth-child(3) {background-color: rgba(25,72,129,0.9);}
	.customerResponse > .rBox .estimateArea ul.estimateBox > li > dl {display: block; width: 100%;}
	.customerResponse > .rBox .estimateArea ul.estimateBox > li > dl > dt {display: block; width: 100%; height: 40px; line-height: 40px; font-size: 24px; font-weight: 500; color: #fff;}
	.customerResponse > .rBox .estimateArea ul.estimateBox > li > dl > dd {display: block; margin: 20px 0; width: 100%; height: 60px; line-height: 20px; font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.6);}
	.customerResponse > .rBox .estimateArea ul.estimateBox > li > a {display: block; width: 120px; height: 40px; line-height: 40px; font-size: 14px; font-weight: 400; text-align: center; text-decoration: none; border-radius: 20px; background-color: #fff; transition: all 0.3s;}
	.customerResponse > .rBox .estimateArea ul.estimateBox > li:nth-child(1) > a {color: rgba(0,123,193,1.0);}
	.customerResponse > .rBox .estimateArea ul.estimateBox > li:nth-child(2) > a {color: rgba(68,68,68,1.0);}
	.customerResponse > .rBox .estimateArea ul.estimateBox > li:nth-child(3) > a {color: rgba(25,72,129,1.0);}
	.customerResponse > .rBox .estimateArea ul.estimateBox > li:nth-child(n) > a:hover {color: #fff; background-color: rgba(34,34,34,1.0);}
	.customerResponse > .rBox .estimateArea .estimateBg {position: absolute; top: 0; right: 0; z-index: 1; display: block; width: 400px; height: 300px; background: url('../img/mImgCustomer01.jpg') center center no-repeat; background-size: cover; transition: all 0.3s;}

	@media screen and (max-width: 980px) {
		.customerResponse > .rBox .estimateArea {height: auto;}
		.customerResponse > .rBox .estimateArea ul.estimateBox {margin: 0 auto; width: 100%; max-width: 960px; box-sizing: border-box; padding: 0 10px;}
		.customerResponse > .rBox .estimateArea ul.estimateBox > li {width: 50%;}
		.customerResponse > .rBox .estimateArea ul.estimateBox > li:nth-child(1) {width: 50%; margin-right: 50%;}
		.customerResponse > .rBox .estimateArea .estimateBg {top: 0; right: auto; left: 50%; width: calc(50% - 10px); height: 300px;}
	}
	@media screen and (max-width: 660px) {
		.customerResponse > .rBox .estimateArea ul.estimateBox > li {padding: 20px; height: auto;}
		.customerResponse > .rBox .estimateArea ul.estimateBox > li > dl > dt {height: 30px; line-height: 30px; font-size: 18px;}
		.customerResponse > .rBox .estimateArea ul.estimateBox > li > dl > dd {margin: 10px 0; height: 60px; line-height: 16px; font-size: 11px;}
		.customerResponse > .rBox .estimateArea ul.estimateBox > li > a {width: 100%; height: 30px; line-height: 30px; font-size: 13px; border-radius: 15px;}
		.customerResponse > .rBox .estimateArea .estimateBg {height: 220px;}
	}

	.customerResponse > .rBox .supportArea {position: relative; display: block; margin-top: 40px; width: 100%; max-width: 1200px; height: 300px; box-sizing: border-box; padding-bottom: 40px; transition: all 0.3s;}
	.customerResponse > .rBox .supportArea ul.supportBox {position: relative; z-index: 2; display: block; width: 100%; height: 100%;}
	.customerResponse > .rBox .supportArea ul.supportBox > li {float: left; display: block; width: 25%; height: 100%; box-sizing: border-box; padding: 40px;}
	.customerResponse > .rBox .supportArea ul.supportBox > li:nth-child(1) {margin-left: 25%; background-color: rgba(249,249,249,0.9);}
	.customerResponse > .rBox .supportArea ul.supportBox > li:nth-child(2) {background-color: rgba(244,244,244,0.9);}
	.customerResponse > .rBox .supportArea ul.supportBox > li:nth-child(3) {background-color: rgba(238,238,238,0.9);}
	.customerResponse > .rBox .supportArea ul.supportBox > li > dl {display: block; width: 100%;}
	.customerResponse > .rBox .supportArea ul.supportBox > li > dl > dt {display: block; width: 100%; height: 40px; line-height: 40px; font-size: 24px; font-weight: 500; color: #222;}
	.customerResponse > .rBox .supportArea ul.supportBox > li > dl > dd {display: block; margin: 20px 0; width: 100%; height: 60px; line-height: 20px; font-size: 13px; font-weight: 400; color: #999;}
	.customerResponse > .rBox .supportArea ul.supportBox > li > a {display: block; width: 120px; height: 40px; line-height: 40px; font-size: 14px; font-weight: 400; color: #999; text-align: center; text-decoration: none; border-radius: 20px; background-color: #fff; transition: all 0.3s;}
	.customerResponse > .rBox .supportArea ul.supportBox > li > a:hover {color: #fff; background-color: rgba(0,123,193,1.0);}
	.customerResponse > .rBox .supportArea .supportBg {position: absolute; top: 0; left: 0; z-index: 1; display: block; width: 400px; height: 300px; background: url('../img/mImgCustomer02.jpg') center center no-repeat; background-size: cover; transition: all 0.3s;}

	@media screen and (max-width: 980px) {
		.customerResponse > .rBox .supportArea {height: auto;}
		.customerResponse > .rBox .supportArea ul.supportBox {width: 100%; max-width: 960px; box-sizing: border-box; padding: 0 10px;}
		.customerResponse > .rBox .supportArea ul.supportBox > li {width: 50%;}
		.customerResponse > .rBox .supportArea ul.supportBox > li:nth-child(1) {width: 50%; margin: 0;}
		.customerResponse > .rBox .supportArea ul.supportBox > li:nth-child(3) {margin-left: 50%;}
		.customerResponse > .rBox .supportArea .supportBg {top: auto; bottom: 0; left: 10px; width: calc(50% - 10px); height: 300px;}
	}
	@media screen and (max-width: 660px) {
		.customerResponse > .rBox .supportArea {height: auto;}
		.customerResponse > .rBox .supportArea ul.supportBox > li {padding: 20px; height: auto;}
		.customerResponse > .rBox .supportArea ul.supportBox > li > dl > dt {height: 30px; line-height: 30px; font-size: 18px;}
		.customerResponse > .rBox .supportArea ul.supportBox > li > dl > dd {margin: 10px 0; height: 60px; line-height: 16px; font-size: 11px;}
		.customerResponse > .rBox .supportArea ul.supportBox > li > a {width: 100%; height: 30px; line-height: 30px; font-size: 13px; border-radius: 15px;}
		.customerResponse > .rBox .supportArea .supportBg {height: 220px;}
	}