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


/* Main Banner Start */
#mainVisualArea {position: relative; display: block; width: 100%; min-width: 320px; height: 100%; min-height: 568px; 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-slide {overflow: hidden;}
#mainVisualArea .swiper-container .swiper-pagination {bottom: 40px !important; height: 5px; font-size: 0; line-height: 0;}

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

.swiper-pagination-progressbar {top: auto !important; bottom: 40px !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-pagination-bullet {width: 30px !important; height: 5px !important; border-radius: 0 !important;}
#mainVisualArea .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {background-color: #eee !important; opacity: .9;}

#mainVisualArea .swiper-container ul.swiper-wrapper > li > .video-bg {width: 100%; height: 100%; object-fit: cover; /* 비율 유지하며 영역 채움 */ position: absolute; top: 0; left: 0; z-index: 0;}

#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 .mvLayerBox {position: absolute; top: 100px; left: calc((100% - 1200px) / 2); right: auto; bottom: 0; margin: auto 0; width: 100%; max-width: 660px; height: 300px; box-sizing: border-box; padding: 0 20px; z-index: 9; background-color: rgba(0,0,0,0.0); transition: all 0.3s;}
#mainVisualArea .mvLayerBox .textArea {position: relative; display: block; width: 100%; height: 100%; transition: all 0.3s;}
#mainVisualArea .mvLayerBox .textArea > p {text-shadow: 2px 2px 3px rgba(0,0,0,0.3); transition: all 0.3s;}
#mainVisualArea .mvLayerBox .textArea > p.slogan01 {display: block; width: 100%; height: auto; line-height: 80px; font-size: 72px; font-weight: 900; text-align: left; color: #fff; letter-spacing: -0.02em;}
#mainVisualArea .mvLayerBox .textArea > p.slogan02 {display: block; margin-top: 20px; width: 100%; height: auto; line-height: 50px; font-size: 42px; font-weight: 100; text-align: left; color: #fff; letter-spacing: -0.03em;}
#mainVisualArea .mvLayerBox .textArea > p.slogan02 > strong {font-weight: 700;}
#mainVisualArea .mvLayerBox .textArea > p.slogan03 {display: block; margin-top: 20px; width: 100%; height: auto; line-height: 40px; font-size: 24px; font-weight: 900; text-align: left; color: #fff; letter-spacing: -0.00em;}
#mainVisualArea .mvLayerBox .textArea > p.slogan04 {display: block; width: 100%; height: auto; line-height: 20px; font-size: 16px; font-weight: 400; text-align: left; color: #fff; letter-spacing: -0.00em;}

#mainVisualArea .mvLayerBox .textArea > p.slogan02 br {display: block;}
#mainVisualArea .mvLayerBox .textArea > p.slogan04 br {display: block;}

#mainVisualArea a.mbnLink {position: absolute; bottom: 60px; left: 0; right: 0; display: block; margin: 0 auto; width: 280px; height: 60px; box-sizing: border-box; border: 1px rgba(255,255,255,0.5) solid; border-radius: 0; line-height: 58px; font-size: 16px; font-weight: 500; text-align: center; color: #fff; letter-spacing: -0.03em; text-decoration: none; z-index: 10; transition: all 0.3s;}
#mainVisualArea a.mbnLink:hover {border: 1px rgba(0,77,169,1.0) solid; background-color: rgba(0,77,169,0.9);}

@media screen and (max-width: 1220px) {
	#mainVisualArea .mvLayerBox {left: 0; right: auto;}
}
@media screen and (max-width: 980px) {
	#mainVisualArea {}

	#mainVisualArea .mvLayerBox {top: 80px; left: 0; right: 0; margin: auto auto; max-width: 640px; height: 260px; padding: 0 10px;}

	#mainVisualArea .mvLayerBox .textArea > p.slogan01 {line-height: 70px; font-size: 64px;}
	#mainVisualArea .mvLayerBox .textArea > p.slogan02 {line-height: 40px; font-size: 32px;}
	#mainVisualArea .mvLayerBox .textArea > p.slogan03 {line-height: 30px; font-size: 20px;}
	#mainVisualArea .mvLayerBox .textArea > p.slogan04 {font-size: 15px;}

	#mainVisualArea .mvLayerBox .textArea > p[class^="slogan"] {text-align: center;}
	#mainVisualArea .mvLayerBox .textArea > p.slogan02 br {display: block;}
	#mainVisualArea .mvLayerBox .textArea > p.slogan04 br {display: block;}
}
@media screen and (max-width: 660px) {
	#mainVisualArea {}

	#mainVisualArea .mvLayerBox {height: 220px;} 
	#mainVisualArea .mvLayerBox .textArea > p.slogan01 {line-height: 60px; font-size: 50px; text-align: center;}
	#mainVisualArea .mvLayerBox .textArea > p.slogan02 {line-height: 30px; font-size: 24px; text-align: center;}
	#mainVisualArea .mvLayerBox .textArea > p.slogan03 {line-height: 20px; font-size: 18px; text-align: center;}
	#mainVisualArea .mvLayerBox .textArea > p.slogan04 {line-height: 20px; font-size: 14px; text-align: center;}

	#mainVisualArea a.mbnLink {width: 240px; height: 50px; line-height: 48px; font-size: 15px;}
}
@media screen and (max-width: 420px) {
	#mainVisualArea .mvLayerBox {min-width: 300px; height: 260px;} 
	#mainVisualArea .mvLayerBox .textArea > p.slogan01 {line-height: 50px; font-size: 50px; text-align: center;}
	#mainVisualArea .mvLayerBox .textArea > p.slogan02 {line-height: 25px; font-size: 20px; text-align: center;}
	#mainVisualArea .mvLayerBox .textArea > p.slogan03 {line-height: 20px; font-size: 17px; text-align: center;}
	#mainVisualArea .mvLayerBox .textArea > p.slogan04 {line-height: 20px; font-size: 13px; text-align: center;}
}
/* Main Banner End */

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

/* Main Common 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: 120px 0;}

.mcBox .titleArea {position: relative; display: block; margin: 0 auto; width: 100%; height: auto; min-height: 40px; box-sizing: border-box; padding-bottom: 20px;}
.mcBox .titleArea > .engTitle {width: 100%; padding: 10px 0; line-height: 20px; font-size: 18px; font-weight: 700; color: #003471; text-align: left; letter-spacing: 0.01em; transition: all 0.3s;}
.mcBox .titleArea > h2 {line-height: 60px; font-size: 48px; font-weight: 700; color: #222; text-align: left; 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%; padding: 0; line-height: 30px; font-size: 16px; font-weight: 300; color: #999; text-align: left; letter-spacing: 0em; 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: 20px;}
	.mcBox .titleArea > .engTitle {font-size: 16px;}
	.mcBox .titleArea > h2 {line-height: 50px; font-size: 42px;}
	.mcBox .titleArea > .subject {font-size: 16px;}
}

@media screen and (max-width: 660px) {
	.mcArea > .mcBox {padding: 60px 0;}
	.mcBox .titleArea {height: auto; padding-bottom: 20px;}
	.mcBox .titleArea > .engTitle {font-size: 14px;}
	.mcBox .titleArea > h2 {line-height: 40px; font-size: 32px;}
	.mcBox .titleArea > .subject {font-size: 14px;}
}

@media screen and (max-width: 420px) {
	.mcBox .titleArea {height: auto; padding-bottom: 10px;}
	.mcBox .titleArea > .engTitle {padding: 5px 0;  font-size: 14px;}
	.mcBox .titleArea > h2 {line-height: 35px; font-size: 24px;}
	.mcBox .titleArea > .subject {font-size: 13px;}
}





/* main Content Start */
#aboutArea {}
#aboutArea .mcBox {max-width: 100%; padding: 120px 0 60px;}
#aboutArea .mcBox .titleArea {max-width: 1200px;}
	.aboutResponse {position: relative; width: 100%; height: auto; margin: 0 auto; box-sizing: border-box; padding: 0; transition: all 0.3s;}
	.aboutResponse .rBox {position: relative; display: block; width: 100%; height: auto; margin: 0; padding: 0; transition: all 0.3s;}
	.aboutResponse .rBox .sectionGuide {position: relative; display: block; margin: 0 auto; width: 100%; max-width: 1200px; height: auto; box-sizing: border-box; padding: 0;}
	.aboutResponse .rBox .sectionGuide > p {box-sizing: border-box; padding: 0; line-height: 30px; font-size: 16px; font-weight: 300; color: #222; text-align: left; transition: all 0.3s;}
	.aboutResponse .rBox .sectionGuide > a {position: absolute; bottom: 0; right: 0; display: block; width: 180px; height: 40px; line-height: 40px; font-weight: 400; color: #fff; text-align: center; text-decoration: none; background-color: #003471; transition: all 0.3s;}
	.aboutResponse .rBox .sectionGuide > a:hover {background-color: rgba(246,174,0,1.0);}

	.aboutResponse .rBox .aboutVisualArea {position: relative; display: block; margin-top: 40px; width: 100%; height: 400px; box-sizing: border-box; padding: 0 0 0 calc((100% - 1200px) / 2);}
	.aboutResponse .rBox .aboutVisualArea .swiper-container {width: 100%; height: 100%; transition: all 0.3s;}
	.aboutResponse .rBox .aboutVisualArea .swiper-container .swiper-slide {overflow: hidden;}

	.aboutResponse .rBox .aboutVisualArea .swiper-container ul.swiper-wrapper > li > .sliderContent {display: block; width: 100%; height: 100%;}
	.aboutResponse .rBox .aboutVisualArea .swiper-container ul.swiper-wrapper > li > .img01 {background: url('../img/mImgAbout_slide01.jpg') right center no-repeat; background-size: cover;}
	.aboutResponse .rBox .aboutVisualArea .swiper-container ul.swiper-wrapper > li > .img02 {background: url('../img/mImgAbout_slide02.jpg') left center no-repeat; background-size: cover;}
	.aboutResponse .rBox .aboutVisualArea .swiper-container ul.swiper-wrapper > li > .img03 {background: url('../img/mImgAbout_slide03.jpg') left center no-repeat; background-size: cover;}

	.aboutResponse .rBox .aboutVisualArea .custom-nav {position: absolute; top: 0; left: 0; display: block; widtH: 120px; height: 60px; z-index: 10;}
	.aboutResponse .rBox .aboutVisualArea .custom-nav .swiper-button-prev,
	.aboutResponse .rBox .aboutVisualArea .custom-nav .swiper-button-next {float: left; margin: 0; display: block; width: 50%; height: 100%; cursor: pointer; background: url('../img/btPrev.png') center center no-repeat; background-color: rgba(0,0,0,0.2); transition: all 0.3s;}

	.aboutResponse .rBox .aboutVisualArea .custom-nav .swiper-button-prev {top: 0; left: 0; right: auto; background-image: url('../img/btPrev.png'); background-color: rgba(3,34,64,0.6);}
	.aboutResponse .rBox .aboutVisualArea .custom-nav .swiper-button-next {top: 0; right: 0; left: auto; background-image: url('../img/btNext.png'); background-color: rgba(3,34,64,0.4);}
	.aboutResponse .rBox .aboutVisualArea .custom-nav .swiper-button-prev:hover,
	.aboutResponse .rBox .aboutVisualArea .custom-nav .swiper-button-next:hover {background-color: rgba(246,174,0,0.8);}

	.aboutResponse .rBox .aboutVisualArea .custom-nav .swiper-button-prev:after,
	.aboutResponse .rBox .aboutVisualArea .custom-nav .swiper-button-next:after {content: '' !important;}


	@media screen and (max-width: 1220px) {
		.aboutResponse {padding: 0 0 0 20px;}

		.aboutResponse .rBox .sectionGuide > a {position: relative; bottom: auto; right: auto; margin: 20px 0 0; width: 180px; height: 40px;}
	}
	@media screen and (max-width: 980px) {
		.aboutResponse {padding: 0 0 0 20px;}
		.aboutResponse .rBox .sectionGuide > p {line-height: 25px; font-size: 15px;}

		.aboutResponse .rBox .aboutVisualArea {margin-top: 40px; height: 300px;}
	}
	@media screen and (max-width: 660px) {
		.aboutResponse {padding: 0 0 0 20px;}
		.aboutResponse .rBox .sectionGuide > p {line-height: 20px; font-size: 14px;}

		.aboutResponse .rBox .aboutVisualArea {margin-top: 30px; height: 200px;}
	}
	@media screen and (max-width: 420px) {
		.aboutResponse {padding: 0 0 0 10px;}
		.aboutResponse .rBox .sectionGuide > p {line-height: 20px; font-size: 13px;}
		.aboutResponse .rBox .aboutVisualArea {margin-top: 20px; height: 120px;}
	}


#productArea { background: url('../img/mBgProductArea.jpg') center bottom no-repeat;}
#productArea .mcBox {padding: 60px 0 120px;}
	.productResponse {position: relative; width: 100%; height: auto; margin: 0 auto; box-sizing: border-box; padding: 0; transition: all 0.3s;}
	.productResponse .rBox {position: relative; display: block; width: 100%; height: auto; margin: 0; padding: 0; transition: all 0.3s;}
	.productResponse .rBox .sectionGuide {position: relative; display: block; margin: 0 auto; width: 100%; height: auto; box-sizing: border-box; padding: 0;}
	.productResponse .rBox .sectionGuide > p {box-sizing: border-box; padding: 0; line-height: 30px; font-size: 16px; font-weight: 300; color: #222; text-align: left; transition: all 0.3s;}

	.productResponse .rBox .productGroup {position: relative; display: block; margin-top: 40px; width: 100%;}
	.productResponse .rBox .productGroup > li {float: left; position: relative; display: block; margin-bottom: 10px; width: 33.33333333%; height: 300px; box-sizing: border-box; padding: 20px 0 30px; overflow: hidden; transition: all 0.3s;}
	.productResponse .rBox .productGroup > li > .productBox {
		position: relative; display: block; width: 100%; height: 100%;
		box-sizing: border-box; padding: 0;
		background-repeat: no-repeat; background-position: center center; background-size: cover;
		transition: all 0.3s;
	}
	.productResponse .rBox .productGroup > li:nth-child(1) > .productBox {background-image: url('../img/mImgProduct01.jpg');}
	.productResponse .rBox .productGroup > li:nth-child(2) > .productBox {background-image: url('../img/mImgProduct02.jpg');}
	.productResponse .rBox .productGroup > li:nth-child(3) > .productBox {background-image: url('../img/mImgProduct03.jpg');}
	.productResponse .rBox .productGroup > li:nth-child(4) > .productBox {background-image: url('../img/mImgProduct04.jpg');}
	.productResponse .rBox .productGroup > li:nth-child(5) > .productBox {background-image: url('../img/mImgProduct05.jpg');}
	.productResponse .rBox .productGroup > li:nth-child(6) > .productBox {background-image: url('../img/mImgProduct06.jpg');}

	.productResponse .rBox .productGroup > li > .productBox .coverLayer {position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 0 20px; background-color: rgba(0,55,109,0.0); transition: all 0.3s;}
	.productResponse .rBox .productGroup > li > .productBox .coverLayer .pTitle {position: absolute; top: -20px; left: 0; right: 0; display: block; margin: 0 auto; width: 200px; height: 40px; line-height: 40px; font-size: 14px; font-weight: 700; color: #fff; text-align: center; background-color: rgba(246,174,0,0.9); transition: all 0.3s;}
	.productResponse .rBox .productGroup > li > .productBox .coverLayer .pTitle:before {position: absolute; bottom: 0; left: 0; right: 0; display: block; margin: 0 auto; width: 0; height: 1px; content: ""; line-height: 0; font-size: 0; background-color: rgba(255,255,255,0.0);}
	.productResponse .rBox .productGroup > li > .productBox .coverLayer .pContent {display: none; margin: 20px auto 0; width: 100%; line-height: 20px; font-size: 14px; font-weight: 400; color: #fff; text-align: center; letter-spacing: -0.02em;}
	.productResponse .rBox .productGroup > li > .productBox .coverLayer .pContent > span {font-size: 12px; letter-spacing: 0;}
	.productResponse .rBox .productGroup > li > .productBox .coverLayer a {position: absolute; bottom: 40px; left: 0; right: 0; display: none; margin: 0 auto; width: 200px; height: 40px; box-sizing: border-box; padding: 9px; border: 1px rgba(255,255,255,0.3) solid; line-height: 20px; font-size: 14px; font-weight: 400; color: #fff; text-align: center; text-decoration: none; letter-spacing: 0em; transition: all 0.3s;}

	.productResponse .rBox .productGroup > li:hover {padding: 0;}
	.productResponse .rBox .productGroup > li:hover > .productBox {padding: 60px 20px 40px;}
	.productResponse .rBox .productGroup > li:hover > .productBox .coverLayer {background-color: rgba(0,55,109,0.8);}
	.productResponse .rBox .productGroup > li:hover > .productBox .coverLayer .pTitle {position: absolute; top: 60px; left: 0; right: 0; display: block; margin: 0 auto; width: 100%; font-size: 18px; background-color: rgba(246,174,0,0.0);}
	.productResponse .rBox .productGroup > li:hover > .productBox .coverLayer .pTitle:before {width: 60px; background-color: rgba(255,255,255,1.0);}
	.productResponse .rBox .productGroup > li:hover > .productBox .coverLayer .pContent {display: block; margin: 120px auto 0;}
	.productResponse .rBox .productGroup > li:hover > .productBox .coverLayer a {display: block;}
	.productResponse .rBox .productGroup > li:hover > .productBox .coverLayer a:hover {background-color: rgba(246,174,0,0.9);}

	@media screen and (max-width: 1220px) {
		.productResponse {padding: 0 20px;}
	}
	@media screen and (max-width: 980px) {
		.productResponse {padding: 0 20px;}
		.productResponse .rBox .sectionGuide > p {line-height: 25px; font-size: 15px;}

		.productResponse .rBox .productGroup {margin-top: 40px;}
		.productResponse .rBox .productGroup > li {margin-bottom: 10px; width: 50%; height: 260px; padding: 20px 0 20px;}
		.productResponse .rBox .productGroup > li > .productBox .coverLayer .pTitle {width: 180px; font-size: 14px;}
		.productResponse .rBox .productGroup > li > .productBox .coverLayer .pContent {font-size: 13px;}
		.productResponse .rBox .productGroup > li > .productBox .coverLayer a {width: 180px;}

		.productResponse .rBox .productGroup > li:hover > .productBox {padding: 40px 20px 40px;}
		.productResponse .rBox .productGroup > li:hover > .productBox .coverLayer .pTitle {top: 40px; font-size: 16px;}
		.productResponse .rBox .productGroup > li:hover > .productBox .coverLayer .pContent {margin: 100px auto 0;}
	}
	@media screen and (max-width: 660px) {
		.productResponse {padding: 0 20px;}
		.productResponse .rBox .sectionGuide > p {line-height: 20px; font-size: 14px;}

		.productResponse .rBox .productGroup {margin-top: 30px;}
		.productResponse .rBox .productGroup > li {width: 50%; height: 200px; padding: 0;}
		.productResponse .rBox .productGroup > li:last-child {margin-bottom: 0;}
		.productResponse .rBox .productGroup > li > .productBox .coverLayer .pTitle {top: 0; left: 0; right: auto; margin: 0;}
		.productResponse .rBox .productGroup > li > .productBox .coverLayer a {bottom: 20px;}

		.productResponse .rBox .productGroup > li:hover > .productBox .coverLayer .pTitle {top: 10px; font-size: 15px;}
		.productResponse .rBox .productGroup > li:hover > .productBox .coverLayer .pContent {margin: 60px auto 0; line-height: 1.3em; font-size: 12px; font-weight: 300;}
	}
		
	@media screen and (max-width: 420px) {
		.productResponse {padding: 0 10px;}
		.productResponse .rBox .sectionGuide > p {line-height: 20px; font-size: 13px;}

		.productResponse .rBox .productGroup > li {float: none; width: 100%; height: 200px; padding: 0;}
		.productResponse .rBox .productGroup > li > .productBox .coverLayer {padding: 0 10px;}
		.productResponse .rBox .productGroup > li > .productBox .coverLayer .pTitle {font-size: 14px; font-weight: 500;}
		.productResponse .rBox .productGroup > li:hover > .productBox .coverLayer .pContent {margin: 60px auto 0; font-size: 11px;}
		.productResponse .rBox .productGroup > li:hover > .productBox .coverLayer .pContent span {display: none;}
	}


#supportArea {background: url('../img/mBgSupportArea.jpg') center center no-repeat; background-size: cover;}
#supportArea .mcBox {max-width: 100%;}
	.supportResponse {position: relative; width: 100%; height: auto; margin: 0 auto; box-sizing: border-box; padding: 0; transition: all 0.3s;}
	.supportResponse .rBox {position: relative; display: block; width: 100%; height: auto; margin: 0; padding: 0; transition: all 0.3s;}

	/*--  PR Youtube Start  --*/
	.supportResponse .rBox .prArea {display: block; margin: 0 auto; width: 100%; max-width: 1200px; box-sizing: border-box;}
	.supportResponse .rBox .prArea .titleArea {float: left; display: block; width: 500px;}
	.supportResponse .rBox .prArea .titleArea .subject {margin-top: 20px}
	.supportResponse .rBox .prArea .titleArea h2,
	.supportResponse .rBox .prArea .titleArea .subject {color: #fff;}
	.supportResponse .rBox .prArea .titleArea .engTitle {color:rgba(246,174,0,1.0);}
	.supportResponse .rBox .prArea .titleArea h2 > br,
	.supportResponse .rBox .prArea .titleArea .subject > br {display: block;}

	.supportResponse .rBox .prArea .titleArea a {display: block; margin-top: 40px; width: 200px; height: 40px; box-sizing: border-box; padding: 9px; border: 1px rgba(255,255,255,0.3) solid; line-height: 20px; font-size: 14px; font-weight: 400; color: #fff; text-align: center; text-decoration: none; letter-spacing: 0em; transition: all 0.3s;}
	.supportResponse .rBox .prArea .titleArea a:hover {background-color: rgba(246,174,0,0.9);}

	.supportResponse .rBox .prArea .youtubeArea {float: left; display: block; width: calc(100% - 500px); height: 400px;}
	.supportResponse .rBox .prArea .youtubeArea .youtubeBox {position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: #222;}
	.supportResponse .rBox .prArea .youtubeArea .youtubeBox > iframe,
	.supportResponse .rBox .prArea .youtubeArea .youtubeBox > img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
	/* JS가 width/height/top/left를 덮어씀 */
	.supportResponse .rBox .prArea .youtubeArea .youtubeBox iframe {position: absolute; top: 0; left: 0;}
	
	@media screen and (max-width: 1220px) {
		.supportResponse .rBox .prArea {padding: 0 20px;}

		.supportResponse .rBox .prArea .titleArea {width: 400px;}
		.supportResponse .rBox .prArea .titleArea a {margin-top: 30px;}

		.supportResponse .rBox .prArea .youtubeArea {width: calc(100% - 400px);}
	}
	@media screen and (max-width: 980px) {
		.supportResponse .rBox .prArea .titleArea {width: 360px;}
		.supportResponse .rBox .prArea .titleArea .subject {line-height: 25px; font-size: 15px;}
		.supportResponse .rBox .prArea .titleArea a {margin-top: 30px;}

		.supportResponse .rBox .prArea .youtubeArea {width: calc(100% - 360px); height: 300px;}
	}
	@media screen and (max-width: 660px) {
		.supportResponse .rBox .prArea .titleArea {float: none; width: 100%;}
		.supportResponse .rBox .prArea .titleArea .subject {line-height: 20px; font-size: 14px;}
		.supportResponse .rBox .prArea .titleArea h2 > br,
		.supportResponse .rBox .prArea .titleArea .subject > br {display: none;}

		/*
		.supportResponse .rBox .prArea .titleArea h2,
		.supportResponse .rBox .prArea .titleArea .engTitle,
		.supportResponse .rBox .prArea .titleArea .subject {text-align: center;}

		.supportResponse .rBox .prArea .titleArea a {margin: 20px auto 0;}
		*/
		.supportResponse .rBox .prArea .titleArea a {margin-top: 20px;  width: 180px; height: 40px;}

		.supportResponse .rBox .prArea .youtubeArea {float: none; width: 100%; height: auto;}
		.supportResponse .rBox .prArea .youtubeArea .youtubeBox iframe {position: static; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;}
	}
	@media screen and (max-width: 420px) {
		.supportResponse .rBox .prArea {padding: 0 10px;}

		.supportResponse .rBox .prArea .titleArea .subject {font-size: 13px;}
		.supportResponse .rBox .prArea .youtubeArea {height: 180px;}
	}
	/*--  PR Youtube End  --*/



	/*--  Contact Start  --*/
	.supportResponse .rBox .contactArea {display: flex; margin: 120px auto 0; width: 100%;}

	.supportResponse .rBox .contactArea .mapArea {/* float: left; */ display: block; width: calc((100% - 500px) - (100% - 1200px) / 2); height: 400px; overflow: hidden;}

	.supportResponse .rBox .contactArea .titleArea {/* float: left; */ display: block; margin: 0; width: 500px; box-sizing: border-box; padding: 0 0 0 60px;}
	.supportResponse .rBox .contactArea .titleArea .subject {margin-top: 20px}
	.supportResponse .rBox .contactArea .titleArea h2,
	.supportResponse .rBox .contactArea .titleArea .subject {color: #fff;}
	.supportResponse .rBox .contactArea .titleArea .engTitle {color:rgba(246,174,0,1.0);}
	.supportResponse .rBox .contactArea .titleArea h2 > br {display: none;}
	.supportResponse .rBox .contactArea .titleArea .subject > br {display: block;}

	.supportResponse .rBox .contactArea .titleArea .linkGroup {display: block; margin-top: 40px; width: 100%; height: 40px; line-height: 0; font-size: 0; text-align: left;}
	.supportResponse .rBox .contactArea .titleArea .linkGroup a {display: inline-block; text-align: left; margin-right: 10px; width: 160px; height: 40px; box-sizing: border-box; padding: 9px; border: 1px rgba(255,255,255,0.3) solid; line-height: 20px; font-size: 14px; font-weight: 400; color: #fff; text-align: center; text-decoration: none; letter-spacing: 0em; transition: all 0.3s;}
	.supportResponse .rBox .contactArea .titleArea .linkGroup a:hover {background-color: rgba(246,174,0,0.9);}

	@media screen and (max-width: 1220px) {
		.supportResponse .rBox .contactArea .mapArea {width: calc(100% - 400px); max-width: 700px;}
		.supportResponse .rBox .contactArea .titleArea {width: 400px;}
		.supportResponse .rBox .contactArea .titleArea h2 > br {display: block;}
		.supportResponse .rBox .contactArea .titleArea .linkGroup {margin-top: 40px;}
	}
	@media screen and (max-width: 980px) {
		.supportResponse .rBox .contactArea {margin: 100px auto 0;}
		.supportResponse .rBox .contactArea .mapArea {width: calc(100% - 360px); height: 300px;}

		.supportResponse .rBox .contactArea .titleArea {width: 360px; padding: 0 20px 0 40px;}
		.supportResponse .rBox .contactArea .titleArea .subject {line-height: 25px; font-size: 15px;}
		.supportResponse .rBox .contactArea .titleArea .linkGroup {margin-top: 30px;}
		.supportResponse .rBox .contactArea .titleArea .linkGroup a {margin-right: 5px; width: 140px;}
	}
	@media screen and (max-width: 660px) {
		.supportResponse .rBox .contactArea {flex-direction: column-reverse; margin: 80px auto 0;}

		.supportResponse .rBox .contactArea .mapArea {float: none; margin-top: 20px; width: 100%; height: 300px; box-sizing: border-box; padding: 0 20px 0 0;}

		.supportResponse .rBox .contactArea .titleArea {float: none; width: 100%; padding: 0 20px;}

		.supportResponse .rBox .contactArea .titleArea .engTitle,
		.supportResponse .rBox .contactArea .titleArea h2,
		.supportResponse .rBox .contactArea .titleArea .subject {text-align: right;}

		.supportResponse .rBox .contactArea .titleArea .subject {line-height: 20px; font-size: 14px;}
		.supportResponse .rBox .contactArea .titleArea h2 > br {display: none;}
		.supportResponse .rBox .contactArea .titleArea .subject > br {display: none;}
		.supportResponse .rBox .contactArea .titleArea .linkGroup {margin-top: 20px; text-align: right;}
		.supportResponse .rBox .contactArea .titleArea .linkGroup a { margin-right: 0; margin-left: 5px; width: 140px; height: 40px;}
	}
	@media screen and (max-width: 420px) {
		.supportResponse .rBox .contactArea {margin: 60px auto 0;}
		.supportResponse .rBox .contactArea .mapArea {height: 180px; padding: 0 10px 0 0;}
		.supportResponse .rBox .contactArea .titleArea {float: none; width: 100%; padding: 0 10px;}
	}
	/*--  Contact ENd  --*/