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


/* Main Banner Start */
#mainVisualArea {position: relative; display: block; width: 100%; min-width: 320px; height: 100%; min-height: 760px; margin: 0 auto 0; box-sizing: border-box; overflow: hidden; transition: all 0.3s;}
/* .header + .mvLayerBox + .swiper-pagination : 120 + 340 + 120 = 580 */
#mainVisualArea .swiper-container {width: 100%; height: 100%; transition: all 0.3s;}
#mainVisualArea .swiper-container .swiper-pagination {bottom: 29.5px !important; height: 5px; font-size: 0; line-height: 0;}

:root {--swiper-theme-color: rgba(175,30,35,1.0) !important}
.swiper-button-next::after,
.swiper-button-prev::after {font-size: 20px !important;}
/* .swiper-pagination-bullet {width: 10px !important; height: 10px !important;} */
.swiper-pagination-bullet {width: 30px !important; height: 5px !important; border-radius: 0 !important;}
.swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {background-color: #bbb !important; opacity: .9;}

.swiper_type01 .swiper-pagination {font-size: 0; line-height: 0;}
.swiper_type01 .swiper-pagination-bullets {bottom: 0px !important;}
.swiper_type01 .swiper-pagination-bullet {width: 30px !important; height: 5px !important; border-radius: 0 !important;}
.swiper_type01 .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {background-color: rgba(180,190,200,1.0) !important; opacity: .9;}

.swiper_type02 .swiper-pagination {font-size: 0; line-height: 0;}
.swiper_type02 .swiper-pagination-bullets {bottom: 0 !important;}
.swiper_type02 .swiper-pagination-bullet {width: 5px !important; height: 5px !important; border-radius: 50% !important;}

.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: calc(50% - 40px) !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;}

#mainVisualArea .swiper-container ul.swiper-wrapper > li > .sliderContent {display: block; width: 100%; height: 100%;}
#mainVisualArea .swiper-container ul.swiper-wrapper > li > .img01 {background: url('../img/mbn01.jpg') center center no-repeat; background-size: cover;}
#mainVisualArea .swiper-container ul.swiper-wrapper > li > .img02 {background: url('../img/mbn02.jpg') center center no-repeat; background-size: cover;}
#mainVisualArea .swiper-container ul.swiper-wrapper > li > .img03 {background: url('../img/mbn03.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; height: 390px; box-sizing: border-box; padding: 0; z-index: 10;}
#mainVisualArea .mvLayerBox .textArea {position: relative; display: block; width: 780px; height: 100%; box-sizing: border-box; padding-left: 20px; transition: all 0.3s;}
#mainVisualArea .mvLayerBox .textArea > p {text-shadow: 2px 2px 5px rgba(0,0,0,0.3);}
#mainVisualArea .mvLayerBox .textArea > p.slogan01 {display: block; width: 360px; height: 50px; border-radius: 10px; line-height: 50px; font-size: 24px; font-weight: 200; text-align: center; color: #fff; letter-spacing: -0.03em; background-color: rgba(74,71,70,0.7); transition: all 0.3s;}
#mainVisualArea .mvLayerBox .textArea > p.slogan01 strong {font-weight: 700;}
#mainVisualArea .mvLayerBox .textArea > p.slogan02 {display: block; margin: 20px auto 0; width: 100%; height: 80px; box-sizing: border-box; padding: 0; line-height: 80px; font-size: 68px; font-weight: 700; text-align: left; color: #fff; letter-spacing: -0.03em; transition: all 0.3s;}
#mainVisualArea .mvLayerBox .textArea > p.slogan03 {display: block; width: 100%; height: 40px; line-height: 40px; font-size: 32px; font-weight: 700; text-align: left; color: #fff; letter-spacing: -0.03em; transition: all 0.3s;}
#mainVisualArea .mvLayerBox .textArea > p.slogan03 span {color: rgba(175,30,35,1.0);}
#mainVisualArea .mvLayerBox .textArea > p.slogan02,
#mainVisualArea .mvLayerBox .textArea > p.slogan03 {font-family: GmarketSans, 'Noto Sans KR', 'Nanum Gothic', 'Malgun Gothic', '맑은 고딕', sans-serif;}
#mainVisualArea .mvLayerBox .textArea > a {display: block; margin-top: 140px; width: 280px; height: 60px; box-sizing: border-box; border: 1px rgba(255,255,255,0.5) solid; border-radius: 10px; line-height: 58px; font-size: 18px; font-weight: 700; text-align: center; color: #fff; letter-spacing: -0.03em; text-decoration: none; z-index: 10; transition: all 0.3s;}
#mainVisualArea .mvLayerBox .textArea > a:hover {color: #fff; border: 1px rgba(175,30,35,1.0) solid; background-color: rgba(175,30,35,1.0);}
@media screen and (max-width: 980px) {
	#mainVisualArea .mvLayerBox {top: 80px; height: 340px;}
	#mainVisualArea .mvLayerBox .textArea {max-width: 100%;}
	#mainVisualArea .mvLayerBox .textArea > p.slogan01 {width: 300px; height: 50px; line-height: 50px; font-size: 20px; text-align: center;}
	#mainVisualArea .mvLayerBox .textArea > p.slogan02 {height: 70px; line-height: 70px; font-size: 58px; text-align: left;}
	#mainVisualArea .mvLayerBox .textArea > p.slogan03 {height: 30px; line-height: 30px; font-size: 28px;}
	#mainVisualArea .mvLayerBox .textArea > a {margin-top: 120px; width: 240px; height: 50px; line-height: 48px; font-size: 15px;}
}
@media screen and (max-width: 660px) {
	#mainVisualArea .mvLayerBox {height: 300px} 
	#mainVisualArea .mvLayerBox .textArea {margin: 0 auto; padding-left: 0;}
	#mainVisualArea .mvLayerBox .textArea > p {text-shadow: 1px 1px 3px rgba(0,0,0,0.2);}
	#mainVisualArea .mvLayerBox .textArea > p.slogan01 {margin: 0 auto; width: 260px; height: 40px; box-sizing: border-box; padding: 0 15px; line-height: 40px; font-size: 17px; text-align: center;}
	#mainVisualArea .mvLayerBox .textArea > p.slogan02 {height: 40px; padding: 0; line-height: 40px; font-size: 40px; text-align: center;}
	#mainVisualArea .mvLayerBox .textArea > p.slogan03 {margin: 0 auto 0; height: auto; line-height: 30px; font-size: 25px; text-align: center;}
	#mainVisualArea .mvLayerBox .textArea > a {margin: 120px auto 0; width: 200px; }
}
@media screen and (max-width: 420px) {
	#mainVisualArea {min-height: 667px;} /* iPhone SE 2nd */
	#mainVisualArea .mvLayerBox {height: 310px} 
	#mainVisualArea .mvLayerBox .textArea {max-width: 300px;}
	#mainVisualArea .mvLayerBox .textArea > p {text-shadow: 1px 1px 3px rgba(0,0,0,0.2);}
	#mainVisualArea .mvLayerBox .textArea > p.slogan01 {height: 40px; line-height: 40px; font-size: 16px;}
	#mainVisualArea .mvLayerBox .textArea > p.slogan02 {height: 40px; padding: 0; line-height: 40px; font-size: 30px;}
	#mainVisualArea .mvLayerBox .textArea > p.slogan03 {line-height: 25px; font-size: 21px; text-align: center;}
	#mainVisualArea .mvLayerBox .textArea > a {margin: 100px auto 0; width: 200px; }
}
@media screen and (max-width: 359px) {
	#mainVisualArea {min-height: 538px;} /* iPhone 5SE */
}
/* 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 {position: relative; display: block; margin: 0 auto;  width: 100%; height: auto; min-height: 40px; max-height: none; box-sizing: border-box; padding-bottom: 60px;}
.mcBox .titleArea > .engTitle {line-height: 40px; font-size: 14px; font-weight: 900; color: #222; text-align: center; letter-spacing: 0.2em; transition: all 0.3s;}
.mcBox .titleArea > h2 {line-height: 60px; font-size: 48px; font-weight: 700; color: #222; text-align: center; letter-spacing: -0.03em; transition: all 0.3s;}
.mcBox .titleArea > h2 br {display: none;}
.mcBox .titleArea > h2 strong {font-weight: 700;}
.mcBox .titleArea > .subject {position: relative; display: block; width: 100%; height: 40px; box-sizing: border-box; padding: 10px 0; line-height: 20px; font-size: 16px; font-weight: 300; color: #999; text-align: center; letter-spacing: -0.03em; transition: all 0.3s;}
.mcBox .titleArea > .subject br {display: none;}

@media screen and (max-width: 980px) {
	.mcArea > .mcBox {padding: 80px 0;}
	.mcBox .titleArea {height: auto; padding-bottom: 40px;}
	.mcBox .titleArea > .engTitle {line-height: 40px; font-size: 14px;}
	.mcBox .titleArea > h2 {line-height: 50px; font-size: 50px;}
}

@media screen and (max-width: 660px) {
	.mcArea > .mcBox {padding: 60px 0;}
	.mcBox .titleArea {height: auto; padding-bottom: 30px;}
	.mcBox .titleArea > .engTitle {line-height: 30px; font-size: 12px;}
	.mcBox .titleArea > h2 {line-height: 40px; font-size: 34px; transition: all 0.3s;}
}

@media screen and (max-width: 420px) {
	.mcBox .titleArea > .engTitle {line-height: 20px; font-size: 11px;}
	.mcBox .titleArea > h2 {line-height: 40px; font-size: 28px; transition: all 0.3s;}
	.mcBox .titleArea > h2 br {display: inline-block;}
}



#solutionArea {background-color: #fff;}
	.solutionResponse {position: relative; width: 100%; height: auto; margin: 0 auto; box-sizing: border-box; padding: 0; transition: all 0.3s;}
	.solutionResponse .solutionBox {position: relative; display: block; margin: 0 auto; width: 100%; height: auto; box-sizing: border-box; padding: 60px 20px; border-radius: 20px; overflow: hidden; background: url('../img/mBgSolutionArea.jpg') center center no-repeat; background-size: cover; transition: all 0.3s;}
	.solutionResponse .solutionBox p {color: #fff; transition: all 0.3s;}
	.solutionResponse .solutionBox p br, 
	.solutionResponse .solutionBox p.sSlogan span {display: none;}
	.solutionResponse .solutionBox .sTitle {display: block; width: 100%; height: 60px; line-height: 60px; font-size: 48px; font-weight: 700; text-align: center; letter-spacing: -0.03em;}
	.solutionResponse .solutionBox .sSubTitle {display: block; width: 100%; height: 20px; line-height: 20px; font-size: 17px; font-weight: 400; text-align: center; letter-spacing: -0.02em;}
	.solutionResponse .solutionBox .sSlogan {display: block; margin: 40px auto 0; width: auto; height: 60px; box-sizing: border-box; padding: 10px 40px; border-radius: 10px;  line-height: 40px; font-size: 24px; font-weight: 700; color: #fff; text-align: center; letter-spacing: -0.02em; background-color: rgba(13,10,9,0.6);}
	.solutionResponse .solutionBox .sSlogan {font-family: GmarketSans, 'Noto Sans KR', 'Nanum Gothic', 'Malgun Gothic', '맑은 고딕', sans-serif;}
	.solutionResponse .solutionBox a {display: block; margin: 40px auto 0; width: 280px; height: 60px; box-sizing: border-box; border: 1px rgba(255,255,255,0.5) solid; border-radius: 10px; line-height: 58px; font-size: 18px; font-weight: 700; text-align: center; color: #fff; letter-spacing: -0.03em; text-decoration: none; z-index: 10; transition: all 0.3s;}
	.solutionResponse .solutionBox a:hover {color: #fff; border: 1px rgba(175,30,35,1.0) solid; background-color: rgba(175,30,35,1.0);}

	@media screen and (max-width: 1220px) {
		.solutionResponse {padding: 0 20px;}
		.solutionResponse ..solutionBox .sSlogan {font-size: 20px;}
	}
	@media screen and (max-width: 980px) {
		.solutionResponse {padding: 0 20px;}
		.solutionResponse .solutionBox .sTitle {height: auto; line-height: 50px; font-size: 38px;}
		.solutionResponse .solutionBox .sSubTitle {height: 20px; line-height: 20px; font-size: 16px;}
		.solutionResponse .solutionBox .sSlogan {margin: 20px auto 0; height: auto; padding: 10px 20px; line-height: 30px; font-size: 20px;}
		.solutionResponse .solutionBox p.sSlogan > br,
		.solutionResponse .solutionBox p.sSlogan > span {display: inline-block;}
		.solutionResponse .solutionBox > a {width: 240px; height: 50px; line-height: 48px; font-size: 15px;}
	}
	@media screen and (max-width: 660px) {
		.solutionResponse {padding: 0 10px;}
		.solutionResponse .solutionBox p br, 
		.solutionResponse .solutionBox p.sSlogan span {display: block;}
		.solutionResponse .solutionBox .sTitle {height: auto; line-height: 40px; font-size: 32px;}
		.solutionResponse .solutionBox .sSubTitle {margin: 10px auto 0; height: auto; line-height: 20px; font-size: 15px;}
		.solutionResponse .solutionBox .sSlogan {margin: 20px auto 0; height: auto; padding: 10px 10px; line-height: 30px; font-size: 17px;}
		.solutionResponse .solutionBox p.sSlogan > br,
		.solutionResponse .solutionBox p.sSlogan > span {display: inline-block;}
		.solutionResponse .solutionBox > a {width: 200px;}
	}
	@media screen and (max-width: 420px) {
	}
	@media screen and (max-width: 359px) { /* iPhone 5SE */
		.solutionResponse .solutionBox .sTitle {line-height: 30px; font-size: 28px;}
		.solutionResponse .solutionBox .sSlogan {line-height: 25px; font-size: 15px;}
	}

#aboutArea {background: url('../img/mBgAboutArea.jpg') center center no-repeat; background-size: cover;}
#aboutArea > .mcBox {position: relative; margin: 0 auto; width: 100%; min-width: 320px; max-width: 100%; min-height: 800px; padding: 0; z-index: 0;}
#aboutArea > .mcBox:after {position: absolute; top: 0; left: 0; display: block; width: calc((100% - 1200px) / 2); height: 100%; content: ""; z-index: 1; background-color: rgba(43,33,33,0.6);}
#aboutArea > .mcBox:before {position: absolute; top: 0; right: 0; display: block; width: calc((100% - 1200px) / 2); height: 100%; content: ""; z-index: 1; background-color: rgba(43,33,33,0.6);}
	.aboutResponse {position: absolute; inset: 0 0 0 0; display: block; margin: 0 auto; width: 100%; height: 100%; box-sizing: border-box; padding: 0; z-index: 2; transition: all 0.3s;}
	.aboutResponse .aboutGroup {position: relative; display: block; margin: 0 auto; width: 100%; max-width: 1200px; height: 100%;}
	.aboutResponse .aboutGroup > li {float: left; display: block; width: 25%; height: 100%; background-color: rgba(43,33,33,0.6); transition: all 0.3s;}
	.aboutResponse .aboutGroup > li:hover {background-color: rgba(43,33,33,0.0);}
	.aboutResponse .aboutGroup > li > .aboutArticle {display: flex; flex-direction: column;  justify-content: center; align-items: center; height: 100%; box-sizing: border-box; border-left: 1px rgba(255,255,255,0.3) solid;}
	.aboutResponse .aboutGroup > li:first-child > .aboutArticle {border-left: 0;}
	.aboutResponse .aboutGroup > li > .aboutArticle > p {line-height: 30px; font-size: 24px; font-weight: 400; color: #fff; letter-spacing: -0.03em; text-align: center; transition: all 0.3s;}
	.aboutResponse .aboutGroup > li:hover > .aboutArticle > p { text-shadow: 2px 2px 5px rgba(0,0,0,0.5);}
	.aboutResponse .aboutGroup > li > .aboutArticle > p.aTitle {display: block; margin: 20px auto 0; width: 100%; line-height: 80px; font-size: 48px; font-weight: 700; color: #fff; letter-spacing: -0.03em; text-align: center;}
	.aboutResponse .aboutGroup > li > .aboutArticle > p.aTitle {font-family: GmarketSans, 'Noto Sans KR', 'Nanum Gothic', 'Malgun Gothic', '맑은 고딕', sans-serif;}
	.aboutResponse a {position: absolute; inset: 0 0 0 0; display: block; margin: auto; width: 280px; height: 60px; box-sizing: border-box; border: 1px rgba(255,255,255,0.5) solid; border-radius: 10px; line-height: 58px; font-size: 18px; font-weight: 700; text-align: center; color: #fff; letter-spacing: -0.03em; text-decoration: none; background-color: rgba(0,0,0,0.3); z-index: 10; transition: all 0.3s; transform: translateY(160px)}
	.aboutResponse a:hover {color: #fff; border: 1px rgba(175,30,35,1.0) solid; background-color: rgba(175,30,35,1.0);}

	@media screen and (max-width: 980px) {
		#aboutArea > .mcBox {min-height: 600px;}
		#aboutArea > .mcBox:after,
		#aboutArea > .mcBox:before {display: none;}
		.aboutResponse .aboutGroup > li {width: 50%; height: 50%;}
		.aboutResponse .aboutGroup > li > .aboutArticle {border: 0; border-top: 1px rgba(255,255,255,0.3) solid; border-left:  1px rgba(255,255,255,0.3) solid;}
		.aboutResponse .aboutGroup > li:nth-child(1) > .aboutArticle {border-top: 0; border-left: 0;}
		.aboutResponse .aboutGroup > li:nth-child(2) > .aboutArticle {border-top: 0;}
		.aboutResponse .aboutGroup > li:nth-child(3) > .aboutArticle {border-left: 0;}
		.aboutResponse .aboutGroup > li > .aboutArticle > p {line-height: 25px; font-size: 20px;}
		.aboutResponse .aboutGroup > li > .aboutArticle > p.aTitle {line-height: 60px; font-size: 36px;}
		.aboutResponse a {width: 240px; height: 50px; line-height: 48px; font-size: 15px; background-color: rgba(0,0,0,0.5); transform: translateY(0)}
	}
	@media screen and (max-width: 660px) {
		#aboutArea > .mcBox {min-height: 600px;}
		.aboutResponse .aboutGroup > li > .aboutArticle > p {line-height: 20px; font-size: 18px;}
		.aboutResponse .aboutGroup > li > .aboutArticle > p.aTitle {line-height: 40px; font-size: 32px;}
		.aboutResponse a {width: 200px;}
	}
	@media screen and (max-width: 420px) {
		#aboutArea > .mcBox {min-height: 600px;}
		.aboutResponse .aboutGroup > li > .aboutArticle > p {line-height: 20px; font-size: 17px;}
		.aboutResponse .aboutGroup > li > .aboutArticle > p.aTitle {line-height: 40px; font-size: 24px;}

	}
	@media screen and (max-width: 359px) { /* iPhone 5SE */
		#aboutArea > .mcBox {min-height: 500px;}
		.aboutResponse .aboutGroup > li > .aboutArticle > p {font-size: 15px;}
	}

#projectArea { background: url('../img/mBgProjectArea.jpg') center center no-repeat; background-size: cover;}
#projectArea > .mcBox {max-width: 100%;}

	.stars {--percent: 0%; position: relative; display: inline-block; font-size: 18px; line-height: 1; letter-spacing: 2px;}
	.stars::before {content: "★★★★★"; color: #ddd;}
	.stars::after {position: absolute; inset: 0; width: var(--percent); content: "★★★★★"; color: #f6c343; overflow: hidden; white-space: nowrap;}
	.stars--sm {font-size: 14px; vertical-align: middle; margin-left: 6px;}
	.stars-badge {position: absolute; top: 8px; right: 8px; padding: 6px 10px; border-radius: 14px; background: rgba(0,0,0,.55); backdrop-filter: saturate(120%) blur(2px);}
	.stars-badge .stars {font-size: 14px; letter-spacing: 1px;}
	.stars-badge .score {margin-left: 6px; color: #fff; font-weight: 700; font-size: 12px;}

	.projectResponse {position: relative; width: 100%; height: auto; margin: 0 auto; box-sizing: border-box; padding: 0; transition: all 0.3s;}
	.projectResponse .projectListArea {display: block; margin: 0 auto; width: 100%; height: auto; box-sizing: border-box; padding: 0;}
	.projectResponse .projectListArea .swiper_type01 {display: block; margin: 0 auto 0; width: 100%; height: auto; box-sizing: border-box; padding: 0 0 20px;}
	.projectResponse .projectListArea .swiper_type01 ul.projectList {width: 100%;}
	.projectResponse .projectListArea .swiper_type01 ul.projectList > li {width: 360px; box-sizing: border-box; padding: 0 10px;}
	.projectResponse .projectListArea .swiper_type01 ul.projectList > li .projectBox {display: block; width: 100%; height: 100%; background-color: #fff;}
	.projectResponse .projectListArea .swiper_type01 ul.projectList > li .projectBox > .picArea {display: block; width: 100%; height: 350px; background-size: cover; background-color: #bbb;}
	.projectResponse .projectListArea .swiper_type01 ul.projectList > li .projectBox > .infoArea {display: block; width: 100%; height: 210px; box-sizing: border-box; padding: 30px; background-color: #fff; background-position: center center; background-size: cover;}
	.projectResponse .projectListArea .swiper_type01 ul.projectList > li .projectBox > .infoArea > p.projectTitle {display: block; width: 100%; height: 40px; line-height: 20px; font-size: 17px; font-weight: 500; color: #222; letter-spacing: -0.02em;}
	.projectResponse .projectListArea .swiper_type01 ul.projectList > li .projectBox > .infoArea > p.projectSubTitle {display: block; margin: 20px auto 0; width: 100%; height: auto; line-height: 20px; font-size: 13px; font-weight: 300; color: #999; letter-spacing: -0.02em;}
	.projectResponse .projectListArea .swiper_type01 .swiper-slide-active .projectBox {box-shadow: 0 0 8px 3px rgba(0,0,0,0.1); background-color: #fff; transition: all 0.3s;}	

	.projectResponse .projectListArea > a {display: block; margin: 40px auto 0; width: 280px; height: 60px; box-sizing: border-box; border: 1px rgba(125,112,107,1.0) solid; border-radius: 10px; line-height: 58px; font-size: 18px; font-weight: 700; text-align: center; color: #fff; letter-spacing: -0.03em; text-decoration: none; background-color: rgba(125,112,107,1.0); transition: all 0.3s;}
	.projectResponse .projectListArea > a:hover {color: #fff; border: 1px rgba(66,57,53,1.0) solid; background-color: rgba(66,57,53,1.0);}

	@media screen and (max-width: 1220px) {
	}
	@media screen and (max-width: 980px) {
		.projectResponse .projectListArea .swiper_type01 ul.projectList > li {width: 320px; padding: 0 5px;}
		.projectResponse .projectListArea .swiper_type01 ul.projectList > li .projectBox > .picArea {height: 280px;}
		.projectResponse .projectListArea .swiper_type01 ul.projectList > li .projectBox > .infoArea > p.projectTitle {height: 40px; line-height: 20px; font-size: 16px;}
		.projectResponse .projectListArea .swiper_type01 ul.projectList > li .projectBox > .infoArea > p.projectSubTitle {font-size: 13px;}
		.projectResponse .projectListArea > a {width: 240px; height: 50px; line-height: 48px; font-size: 15px;}
	}
	@media screen and (max-width: 660px) {
		.projectResponse .projectListArea .swiper_type01 ul.projectList > li {width: 280px; padding: 0 5px;}
		.projectResponse .projectListArea .swiper_type01 ul.projectList > li .projectBox > .picArea {height: 240px;}
		.projectResponse .projectListArea .swiper_type01 ul.projectList > li .projectBox > .infoArea {padding: 20px;}
		.projectResponse .projectListArea .swiper_type01 ul.projectList > li .projectBox > .infoArea > p.projectTitle {height: 40px; line-height: 20px; font-size: 15px;}
		.projectResponse .projectListArea .swiper_type01 ul.projectList > li .projectBox > .infoArea > p.projectSubTitle {font-size: 12px;}
		.projectResponse .projectListArea > a {width: 200px;}
	}
	@media screen and (max-width: 420px) {
	}


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

	.supportResponse {position: relative; width: 100%; height: auto; margin: 0 auto; box-sizing: border-box; padding: 0; transition: all 0.3s;}

	.phoneBox {position: relative; display: block; margin: 0 auto; width: 340px; height: 60px; border-radius: 10px; overflow: hidden; background-color: rgba(255,255,255,0.3); transition: all 0.3s;}
	.phoneBox a {position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%;}
	.phoneBox .phoneTitle {float: left; display: block; width: 80px; height: 100%; box-sizing: border-box; padding: 20px 0; line-height: 20px; font-size: 16px; font-weight: 500; color: #fff; text-align: center; transition: all 0.3s;}
	.phoneBox .phoneNo {float: left; display: block; width: 260px; height: 100%; padding: 0; line-height: 60px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 28px; font-weight: 700; color: #fff; text-align: center; background-color: rgba(175,30,35,0.9); transition: all 0.3s;}
	.phoneBox:hover {background-color: rgba(255,255,255,1.0);}
	.phoneBox:hover .phoneTitle {color: #222;}
	.phoneBox:hover .phoneNo {background-color: rgba(198,33,37,1.0);}

	.supportResponse .supportBoxArea {position: relative; display: block; margin: 40px auto 0; width: 100%; height: 240px; border-radius: 10px; overflow: hidden; transition: all 0.3s;}
	.supportResponse .supportBoxArea li {position: relative; float: left; display: block; width: 25%; height: 100%; box-sizing: border-box; padding: 40px; transition: all 0.3s;}
	.supportResponse .supportBoxArea li:nth-child(1) {width: 50%; background: url('../img/mBgSupportInquery.jpg') left center no-repeat; background-size: cover;}
	.supportResponse .supportBoxArea li:nth-child(2) {background: url('../img/mIconSupportNews.png') top 40px right 40px no-repeat; background-color: #fff;}
	.supportResponse .supportBoxArea li:nth-child(3) {background: url('../img/mIconSupportFaq.png') top 40px right 40px no-repeat; background-color: rgba(246,245,241,1.0);}
	.supportResponse .supportBoxArea li h4 {display: block; margin: 0; width: 100%; height: 40px; line-height: 40px; font-size: 18px; font-weight: 700; color: #222; letter-spacing: -0.02em;}
	.supportResponse .supportBoxArea li p {display: block; margin: 0; width: 100%; height: auto; min-height: 80px; box-sizing: border-box; padding: 20px 0; line-height: 20px; font-size: 13px; font-weight: 300; color: #999;}	
	.supportResponse .supportBoxArea li a {display: block; width: 100%; max-width: 160px; height: 40px; border-radius: 5px; box-sizing: border-box; line-height: 40px; font-size: 13px; font-weight: 500; color: #fff; text-align: center; text-decoration: none; background-color: rgba(185,179,177,1.0); transition: all 0.3s;}
	.supportResponse .supportBoxArea li a:hover {background-color: rgba(125,112,107,1.0);}
	.supportResponse .supportBoxArea li:nth-child(1) h4 {font-size: 24px; color: #fff;}
	.supportResponse .supportBoxArea li:nth-child(1) p {color: #fff;}
	.supportResponse .supportBoxArea li:nth-child(1) a {background-color: rgba(0,0,0,0.4);}
	.supportResponse .supportBoxArea li:nth-child(1) a:hover {color: #222; background-color: rgba(255,255,255,1.0);}


	@media screen and (max-width: 1220px) {
		.supportResponse {padding: 0 20px;}
	}
	@media screen and (max-width: 980px) {
		.supportResponse {padding: 0 20px;}
		.supportResponse .supportBoxArea {height: auto;}
		.supportResponse .supportBoxArea li:nth-child(1) {width: 100%; height: 240px;}
		.supportResponse .supportBoxArea li:nth-child(2),
		.supportResponse .supportBoxArea li:nth-child(3) {width: 50%; height: 240px;}
	}
	@media screen and (max-width: 660px) {
		.supportResponse {padding: 0 10px;}
		.phoneBox {width: 300px;}
		.phoneBox .phoneTitle {font-size: 15px;}
		.phoneBox .phoneNo {width: 220px; font-size: 24px;}

		.supportResponse .supportBoxArea li {padding: 30px 20px;}
		.supportResponse .supportBoxArea li h4 {height: 30px; line-height: 30px; font-size: 18px;}
		.supportResponse .supportBoxArea li:nth-child(1) h4 {font-size: 20px;}
		.supportResponse .supportBoxArea li p {min-height: 60px; font-size: 12px; padding: 10px 0;}
		.supportResponse .supportBoxArea li:nth-child(n) {height: 190px;}
		.supportResponse .supportBoxArea li:nth-child(2),
		.supportResponse .supportBoxArea li:nth-child(3) {background-position: top 20px right 20px;}
	}
	@media screen and (max-width: 420px) {
		.phoneBox {width: 280px;}
		.phoneBox .phoneTitle {font-size: 14px;}
		.phoneBox .phoneNo {width: 200px; font-size: 20px;}

		.supportResponse .supportBoxArea li:nth-child(1) {height: auto;}
		.supportResponse .supportBoxArea li:nth-child(1) h4 {font-size: 17px;}
		.supportResponse .supportBoxArea li:nth-child(2),
		.supportResponse .supportBoxArea li:nth-child(3) {width: 100%; height: 170px;}
		.supportResponse .supportBoxArea li:nth-child(2) p,
		.supportResponse .supportBoxArea li:nth-child(3) p {min-height: 40px; font-size: 11px; }
	}
	@media screen and (max-width: 359px) { /* iPhone 5SE */
	}

#clientArea {background-color: rgba(59,50,47,1.0);}
#clientArea > .mcBox {max-width: 100%; padding: 60px 0;}
#clientArea .titleArea > .engTitle {color: #fff;}
#clientArea .titleArea {min-height: 30px; padding-bottom: 0 !important;}
	.clientResponse {position: relative; width: 100%; height: auto; margin: 0 auto; box-sizing: border-box; padding: 0; transition: all 0.3s;}
	.clientResponse .clientListArea {display: block; margin: 0 auto; width: 100%; height: auto; box-sizing: border-box; padding: 0;}
	.clientResponse .clientListArea .swiper_type02 {display: block; margin: 0 auto 0; width: 100%; height: auto; box-sizing: border-box; padding: 0 0 20px;}
	.clientResponse .clientListArea .swiper_type02 ul.clientList {width: 100%;}
	.clientResponse .clientListArea .swiper_type02 ul.clientList > li {width: 280px; box-sizing: border-box; padding: 0 10px; transition: all 0.3s;}
	.clientResponse .clientListArea .swiper_type02 ul.clientList > li .clientBox {display: block; width: 100%; height: 80px; border-radius: 20px; background-position: center center; background-repeat: no-repeat; background-size: cover; background-color: #fff; transition: all 0.3s;}
	.clientResponse .clientListArea .swiper_type02 .swiper-slide-active .clientBox {box-shadow: 0 0 8px 3px rgba(0,0,0,0.3); background-color: #fff; transition: all 0.3s;}	
	@media screen and (max-width: 660px) {
		.clientResponse .clientListArea .swiper_type02 ul.clientList > li {width: 240px; padding: 0 5px;}
		.clientResponse .clientListArea .swiper_type02 ul.clientList > li .clientBox {height: 70px; border-radius: 10px}

		.clientResponse .clientListArea .swiper_type02 .swiper-slide .clientBox {opacity: 0.7; filter: brightness(0.9) grayscale(0.05); transition: .3s}
		.clientResponse .clientListArea .swiper_type02 .swiper-slide-active .clientBox {opacity: 1.0; filter: none; background: #fff; box-shadow: 0 0 8px 3px rgba(0,0,0,0.3)}
		.clientResponse .clientListArea .swiper_type02 .swiper-slide:not(.swiper-slide-active) .clientBox:hover {opacity: 0.85; filter: brightness(0.98)}

	}
	@media screen and (max-width: 420px) {
		.clientResponse .clientListArea .swiper_type02 ul.clientList > li {width: 200px; padding: 0 5px;}
		.clientResponse .clientListArea .swiper_type02 ul.clientList > li .clientBox {height: 60px; border-radius: 10px}
	}