@charset "utf-8";
/* @charset "euc-kr"; */
#bnSubArea {position: relative; width: 100%; height: auto;}

#bnSubArea > .subVisualArea {position: relative; width: 100%; height: 400px; box-sizing: border-box; padding-top: 100px; background: url('../img/sbn01.jpg') center center no-repeat; background-size: cover; overflow: hidden; transition: all 0.3s;}
#bnSubArea > .subVisualArea.sbnNo02 {background: url('../img/sbn02.jpg') center center no-repeat; background-size: cover;}
#bnSubArea > .subVisualArea.sbnNo03 {background: url('../img/sbn03.jpg') center center no-repeat; background-size: cover;}
#bnSubArea > .subVisualArea.sbnNo04 {background: url('../img/sbn04.jpg') center center no-repeat; background-size: cover;}

#bnSubArea > .subVisualArea > .sbn {position: relative; width: 100%; height: 100%; box-sizing: border-box; padding: 0; margin: 0 auto; transition: all 0.3s}
#bnSubArea > .subVisualArea > .sbn > h2 {position: absolute; bottom: 80px; left: calc(50% - (1200px / 2)); display: block; width: 100%; max-width: 600px; height: 80px; line-height: 80px; font-size: 68px; font-weight: 700; color: #fff; text-align: left; letter-spacing: -0.03em;  text-shadow: 2px 2px 7px rgba(0,0,0,0.3); z-index: 1; transition: all 0.3s} /* text-transform: lowercase; */
#bnSubArea > .subVisualArea > .sbn > h2::first-letter {text-transform: uppercase;}

#bnSubArea > .subVisualArea > .subPageing {position: absolute; top: 100px; bottom: 0; left: 0; margin: auto 0; width: 100%; height: 60px; z-index: 1; transition: all 0.3s;}
#bnSubArea > .subVisualArea > .subPageing .logoGold {position: absolute; top: -50px; left: 0; right: 0; display: block; margin: 0 auto; width: 60px; height: 45px; z-index: 1;}
#bnSubArea > .subVisualArea > .subPageing .waveGold {position: absolute; bottom: -30px; left: 0; right: 0; display: block; margin: 0 auto; width: 40px; height: 20px; z-index: 1;}
#bnSubArea > .subVisualArea > .subPageing > .pageLink {position: absolute; top: 0; display: block; width: 40px; height: 60px;}
#bnSubArea > .subVisualArea > .subPageing > .pageLink > a {display: block; width: 100%; height: 100%; transition: all 0.3s;}
#bnSubArea > .subVisualArea > .subPageing > .pageLink > a.btNext {border-radius: 0; background: url('../img/btNext.png') left -5px center no-repeat; background-color: rgba(0,0,0,0.2);}
#bnSubArea > .subVisualArea > .subPageing > .pageLink > a.btPrev {border-radius: 0; background: url('../img/btPrev.png') right -5px center no-repeat; background-color: rgba(0,0,0,0.2);}
#bnSubArea > .subVisualArea > .subPageing > .pageLink > a:hover {background-color: rgba(0,0,0,0.6); transition: all 0.3s;}
#bnSubArea > .subVisualArea > .subPageing > .prev {left: 0;}
#bnSubArea > .subVisualArea > .subPageing > .next {right: 0;}
@media screen and (max-width: 1220px) {
	#bnSubArea > .subVisualArea > .sbn > h2 {left: 0; width: 100%; box-sizing: border-box; padding-left: 40px;}
}
@media screen and (max-width: 980px) {
	#bnSubArea > .subVisualArea {height: 340px; padding-top: 80px;}
	#bnSubArea > .subVisualArea > .sbn > h2 {height: 60px; line-height: 60px; font-size: 56px;}
	#bnSubArea > .subVisualArea > .subPageing {top: 80px;}
}
@media screen and (max-width: 660px) {
	#bnSubArea > .subVisualArea {height: 300px;}
	#bnSubArea > .subVisualArea > .sbn > h2 {top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 50px; padding-left: 0; line-height: 50px; font-size: 48px; text-align: center;}
}

#subHeader {position: absolute; top: 340px; left: 0; width: 100%; height: 60px; z-index: 1; transition: all 0.3s;}
#subHeader .subHeaderFix {position: absolute; left: auto; right: 0; width: calc((100% - 1200px) / 2 + 1200px); height: 100%; box-sizing: border-box; border-top: 1px rgba(255,255,255,0.2) solid; z-index: 100; border-radius: 0; overflow: visible; background-color: rgba(178,175,165,0.8); transition: all 0.3s;}

#subHeader .subMenuArea {position: relative; display: block; margin: 0; width: 100%; max-width: 1200px; height: 100%; box-sizing: border-box; padding: 0; transition: all 0.3s;}

#subHeader .subMenuArea .subMenuNavi {display: block; width: 100%; height: 100%; box-sizing: border-box; transition: all 0.3s;}

#subHeader .subMenuArea .subMenuNavi>li {float: left; width: 200px; height: 100%; transition: all 0.3s;}
#subHeader .subMenuArea .subMenuNavi>li > a {display: block; width: 100%; height: 100%; text-align: center; font-size: 15px; line-height: 59px; font-weight: 400; color: #eee; letter-spacing: 0em; text-decoration: none; transition: all 0.3s;}
#subHeader .subMenuArea .subMenuNavi>li a:hover {color: #fff; background-color: rgba(178,175,165,1.0);}
#subHeader .subMenuArea .subMenuNavi>li.on,
#subHeader .subMenuArea .subMenuNavi>li.on > a {color: #fff; font-weight: 500; background-color: rgba(78,148,229,1.0);}
#subHeader .subMenuArea .subMenuNavi>li.on > a:hover {color: #fff; background-color: rgba(51,112,184,1.0);}

/* for Product Menu Only Start */
#subHeader .subMenuArea .subMenuNavi.tab5>li {width: 20%; border-left: none;}
@media screen and (max-width: 980px) {
	#subHeader .subMenuArea .subMenuNavi>li > a {font-size: 13px;}
	#subHeader .subMenuArea .subMenuNavi.tab5>li:nth-child(1) {width: 20%;}
	#subHeader .subMenuArea .subMenuNavi.tab5>li:nth-child(2) {width: 16%;}
	#subHeader .subMenuArea .subMenuNavi.tab5>li:nth-child(3) {width: 25.5%;}
	#subHeader .subMenuArea .subMenuNavi.tab5>li:nth-child(4) {width: 14%;}
	#subHeader .subMenuArea .subMenuNavi.tab5>li:nth-child(5) {width: 24.5%;}
}
/* for Product Menu Only End */

/*
#subHeader .subMenuArea .subMenuNavi.tab1>li {width: 100%; border-left: none;}
#subHeader .subMenuArea .subMenuNavi.tab2>li {width: 50%; border-left: none;}
#subHeader .subMenuArea .subMenuNavi.tab3>li {width: 33.333333%; border-left: none;}
#subHeader .subMenuArea .subMenuNavi.tab4>li {width: 25%; border-left: none;}
#subHeader .subMenuArea .subMenuNavi.tab5>li {width: 20%; border-left: none;}
#subHeader .subMenuArea .subMenuNavi.tab6>li {width: 16.5%; border-left: none;}
#subHeader .subMenuArea .subMenuNavi.tab6>li:nth-child(1),
#subHeader .subMenuArea .subMenuNavi.tab6>li:nth-child(2) {width: 17%; border-left: none;}

#subHeader .subMenuArea .subMenuNavi.tab6>li:nth-child(1) {width: 20%; border-left: none;}
#subHeader .subMenuArea .subMenuNavi.tab6>li:nth-child(2) {width: 14%; border-left: none;}
#subHeader .subMenuArea .subMenuNavi.tab6>li:nth-child(3) {width: 14%; border-left: none;}
#subHeader .subMenuArea .subMenuNavi.tab6>li:nth-child(4) {width: 20%; border-left: none;}
#subHeader .subMenuArea .subMenuNavi.tab6>li:nth-child(5) {width: 12%; border-left: none;}
#subHeader .subMenuArea .subMenuNavi.tab6>li:nth-child(6) {width: 20%; border-left: none;}

#subHeader .subMenuArea .subMenuNavi.tab7>li {width: 14%; border-left: none;}
#subHeader .subMenuArea .subMenuNavi.tab7>li:nth-child(1),
#subHeader .subMenuArea .subMenuNavi.tab7>li:nth-child(5),
#subHeader .subMenuArea .subMenuNavi.tab7>li:nth-child(6),
#subHeader .subMenuArea .subMenuNavi.tab7>li:nth-child(7) {width: 15%; border-left: none;}
#subHeader .subMenuArea .subMenuNavi.tab7>li:nth-child(2) {width: 10%; border-left: none;}
#subHeader .subMenuArea .subMenuNavi.tab7>li:nth-child(3) {width: 18%; border-left: none;}
#subHeader .subMenuArea .subMenuNavi.tab7>li:nth-child(4) {width: 12%; border-left: none;}
#subHeader .subMenuArea .subMenuNavi.tab8>li {width: 12%; height: 60px; border-left: none;}
#subHeader .subMenuArea .subMenuNavi.tab8>li:nth-child(odd) {width: 13%; border-left: none;}
#subHeader .subMenuArea .subMenuNavi.tab9>li {width: 11%; border-left: none;}
#subHeader .subMenuArea .subMenuNavi.tab10>li {width: 10%; border-left: none;}
*/

@media screen and (max-width: 1220px) {
	#subHeader .subHeaderFix {left: 40px; right: auto; width: calc(100% - 40px);}
	#subHeader .subMenuArea .subMenuNavi>li > a {font-size: 14px;}
}
@media screen and (max-width: 980px) {
	#subHeader {top: 280px;}
	#subHeader .subMenuArea {box-sizing: border-box; padding: 0;}
	#subHeader .subMenuArea .subMenuNavi {max-width: 100%; padding: 0;}
	#subHeader .subMenuArea .subMenuNavi>li> a {font-size: 14px;}
}
@media screen and (max-width: 660px) {
	#subHeader,
	#subHeader .subHeaderFix,
	#subHeader .subMenuArea {
	  animation-name: slideHidden;
	  -webkit-animation-name: slideHidden;
	  animation-duration: 1.0s;
	  -webkit-animation-duration: 1.0s;
	  visibility: hidden;
	}
	@keyframes slideHidden{
		0% {
		  opacity: 1;
		  transform: translateY(0%);
		} 
		100% {
		  opacity: 0;
		  transform: translateY(70%);
		}
	}
	@-webkit-keyframes slideHidden{
		0% {
		  opacity: 1;
		  -webkit-transform: translateY(0%);
		} 
		100% {
		  opacity: 0;
		  -webkit-transform: translateY(70%);
		}
	}
}

#subContainer {width: 100%; min-height: 600px; padding-bottom: 60px; background-color: #fff; overflow: hidden;}

	/* Table Sub Style Start */
	/* Table Base Style Start */
	table {table-layout: fixed; width: 100%; margin: 0 auto; padding: 0; border-collapse: collapse; border-top: 2px solid #222; border-bottom: 1px solid #999; font-size: 13px;}
	table th {text-align: center; font-weight: 500 !important; color: #222; background-color: #f4f4f4;}
	table tr {background-color: #fff;}
	table th,
	table td {font-size: 15px; font-weight: 400; line-height: 1.67em; color: #444; padding: 20px 10px; border: 1px solid #eee;}
	table tr:first-child th {border-top: 0;}
	table tr:first-child td {border-top: 0;}
	table tbody th:last-of-type,
	table tbody tr:last-child th,
	table tbody tr:last-child td,
	table tr.noBottom th,
	table tr.noBottom td,
	table th.noBottom,
	table td.noBottom {border-bottom: 0;}
	table tr th:first-child,
	table tr td:first-child {border-left: 0;}
	table tr th:last-child,
	table tr td:last-child {border-right: 0;}
	table a.bt {display: block; width: 100%; max-width: 160px; height: 30px; box-sizing: border-box; padding: 5px; line-height: 20px; font-size: 13px; font-weight: 400; color: #fff; text-align: center; background-color: #3163b4;}
	table a.bt:hover {color: #fff;}
	table a {display: inline-block; width: 100%; height: 30px; box-sizing: border-box; padding: 5px 0; line-height: 20px; font-size: 13px; font-weight: 400; color: #3163b4; text-align: left;}
	table a:hover {color: #222;}
	table th br.onOff,
	table td br.onOff {display: none;}
	table td span.btCancel {font-size: 13px; font-weight: 400; color: #606c7c; text-align: center;}
	table td span.btClose {font-size: 13px; font-weight: 400; color: #e8456b; text-align: center;}
	table td a.blankLink {font-size: 15px; font-weight: 500; color: #222; text-align: inherit;}
	table td a.blankLink span {display: inline-block; width: 20px; height: 20px; padding-left: 10px; vertical-align: top; background: url('../img/iconNewWin.png') center center no-repeat;}


	p.slideTableGuide01, 
	p.slideTableGuide02 {display: none; margin-top: 10px; width: 100%; line-height: 20px !important; font-size: 13px !important; font-weight: 300 !important; color: #458fce !important; text-align: left !important;}

	@media screen and (max-width: 980px) {
		.longTable {display: block; margin: 0 auto; width: 100%; max-width: 960px; overflow-x: scroll;}
		.longTable table {min-width: 720px;}
		p.slideTableGuide01 {display: inline-block;}
	}
	@media screen and (max-width: 660px) {
		.shortTable {overflow-x: scroll;}
		.shortTable table {min-width: 360px;}
		p.slideTableGuide02 {display: inline-block;}

		table th br.onOff,
		table td br.onOff {display: inline-block;}
		table th,
		table td {font-size: 15px;}
		table td br {display: block;}
	}


	/* 980 scroll */
	table.subTable01 {margin: 0 auto; border-top: 2px solid #1e2b4b;}
	table.subTable01 th,
	table.subTable01 td {text-align: center;}
	table.subTable01 tbody th {background-color: #f2f4f9;}
	@media screen and (max-width: 980px) {
		table.subTable01 {width: 960px;}
		table.subTable01 th,
		table.subTable01 td {font-size: 14px !important;}
	}
	table.subTable01 h1 {line-height: 40px; font-size: 24px; text-align: center;}
	table.subTable01 h2 {line-height: 30px; font-size: 20px; text-align: center;}
	table.subTable01 h3 {line-height: 30px; font-size: 18px; text-align: center;}
	table.subTable01 h1,
	table.subTable01 h2,
	table.subTable01 h3 {font-weight: 500; color: #222;}

	/* 660 scroll */
	table.subTable02 {margin: 0 auto; border-top: 2px solid #1e2b4b;}
	table.subTable02 th,
	table.subTable02 td {text-align: center;}
	table.subTable02 tbody th {background-color: #f2f4f9;}
	@media screen and (max-width: 660px) {
		table.subTable02 {width: 620px;}
		table.subTable02 th,
		table.subTable02 td {font-size: 14px !important;}
	}
	table.subTable02 h1 {line-height: 40px; font-size: 24px; text-align: center;}
	table.subTable02 h2 {line-height: 30px; font-size: 20px; text-align: center;}
	table.subTable02 h3 {line-height: 30px; font-size: 18px; text-align: center;}
	table.subTable02 h1,
	table.subTable02 h2,
	table.subTable02 h3 {font-weight: 500; color: #222;}
	/* Table Base Style End */

	/* Where is Start */
	.whereIsLine {width: 100%; height: 60px; box-sizing: border-box; padding: 0; border-top: 1px #f4f4f4 solid; border-bottom: 1px #f4f4f4 solid; background-color: #f9f9f9; transition: all 0.3s;}
	.whereIsLine ul.whereIs {width: 100%; max-width: 1200px; height: 58px; margin: 0 auto; transition: all 0.3s;}
	.whereIsLine ul.whereIs > li {position: relative; float: left; display: block; width: 140px; height: 58px; box-sizing: border-box; border-left: 1px #e8e8e8 solid; border-right: 1px #e8e8e8 solid; padding: 22px 9px; line-height: 16px; font-size: 13px; font-weight: 300; color: #777; text-align: left; letter-spacing: -0.00em; background: url('../img/iconWhereisDown.png') right center no-repeat; background-size: 14px; transition: all 0.3s;}
	.whereIsLine ul.whereIs > li {
	    display: flex; /* Flexbox로 텍스트 정렬 */
	    align-items: center; /* 세로 중간 정렬 */
	    justify-content: start; /* 왼쪽 정렬 */
	    box-sizing: border-box; /* 패딩 포함 크기 계산 */
	    padding: 0 9px; /* 기본 패딩 */
	    line-height: 1.2; /* 줄 간격 */
	    white-space: normal; /* 줄바꿈 허용 */
	    text-align: left; /* 텍스트 왼쪽 정렬 */
	    /* z-index: 1; /* 메뉴 위로 배치 */
	    transition: padding 0.3s ease; /* 패딩 변경 애니메이션 */
	}
	ul.whereIs > li:nth-child(2) {width: 120px;}
	ul.whereIs > li:nth-child(3) {width: 160px;}

	.whereIsLine ul.whereIs > li:nth-child(1) {width: 40px; background: url('../img/iconWhereIsHome.png') center center no-repeat; background-size: 14px;}
	.whereIsLine ul.whereIs > li:nth-child(1) > a {position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}
	.whereIsLine ul.whereIs > li:nth-child(n+2) {border-left: 0;}
	.whereIsLine ul.whereIs > li:hover {color: #222; background-color: #fff;}
	/* .whereIsLine ul.whereIs > li:last-child {color: rgba(119,119,119,1); } */

	/* ul.whereIs > li:hover > .depthMenu,*/
	ul.whereIs > li.on > .depthMenu {
		display: block; /* 하위 메뉴 표시 */
	}

	ul.whereIs > li > .depthMenu {position: absolute; display: none; top: 59px; left: 0; right: auto; width: 100%; height: auto; min-height: 60px;  max-height: 460px; border-top: 0px #777 solid; background-color: rgba(247,247,247,1.0); box-shadow: 0 0 0 0 #ddd; z-index: 100;}

	ul.whereIs > li > .depthMenu > li {display: flex; align-items: center; width: 100%; height: 50px; box-sizing: border-box; transition: all 0.3s;}
	ul.whereIs > li > .depthMenu > li > a {display: block; width: 100%; /* height: 50px; */ box-sizing: border-box; padding: 0px 10px; line-height: 1.2em; font-size: 13px; font-weight: 300; color: #444; text-align: left; letter-spacing: -0.00em; text-decoration: none; transition: all 0.3s;}
	ul.whereIs > li > .depthMenu > li:hover {background-color: rgba(51,112,184,0.1);}
	ul.whereIs > li > .depthMenu > li.on {background-color: rgba(78,148,229,1.0);} /* rgba(0,0,0,0.8) */
	ul.whereIs > li > .depthMenu > li.on > a {color: #fff;}
	ul.whereIs > li > .depthMenu > li.on:hover {background-color: rgba(51,112,184,1.0);} /* rgba(0,0,0,0.9) */

	@media screen and (max-width: 1220px) {
		/* .whereIsLine ul.whereIs {max-width: 960px;} */
	}
	@media screen and (max-width: 660px) {
		.whereIsLine ul.whereIs > li {font-size: 13px;}
	}
	/* Where is End */

	.cBoxArea {position: relative; width: 100%; max-width: 1200px; min-height: 600px; margin: 0 auto; box-sizing: border-box; padding: 0 20px; background-color: #fff; border-radius: 0;  transition: all 0.3s;}

	@media screen and (max-width: 1220px) {
		/* .cBoxArea {max-width: 960px;} */
		.cBoxArea {max-width: none; padding: 0 20px;}
	}
	@media screen and (max-width: 980px) {
		.cBoxArea {max-width: none; padding: 0 20px;}
	}
	@media screen and (max-width: 660px) {
		.cBoxArea {max-width: none; padding: 0 10px;}
	}

	/* in cBoxArea Sub Title Start */
	.subTitleArea {position: relative; margin-top: 60px; display: block; width: 100%; height: 100px; box-sizing: border-box; padding: 0;}
	.subTitleArea h3 {position: relative; display: block; margin: auto 0; width: 100%; height: 60px; box-sizing: border-box; padding: 0; line-height: 60px; font-size: 42px; font-weight: 700; color: #222; text-align: left; letter-spacing: -0.02em; z-index: 1; transition: all 0.3s;}
	.subTitleArea h3:before {position: absolute; bottom: 0; left: 0; display: block; width: 120px; height: 1px; line-height: 0; font-size: 0; content: ""; background-color: rgba(0,104,158,0.3); z-index: -1; transition: all 0.3s;}
	.subTitleArea .h3Eng {display: block; width: 100%; height: 40px; box-sizing: border-box; padding: 10px 0; line-height: 20px; font-size: 17px; font-weight: 200; color: #999;}
	
	@media screen and (max-width: 980px) {
		.subTitleArea {height: auto;}
		.subTitleArea h3 {position: relative; top: auto; bottom: auto; margin: 0; width: 100%;}
	}
	@media screen and (max-width: 660px) {
		.subTitleArea {margin-top: 40px;}
		.subTitleArea > h3 {height: 40px; line-height: 40px; font-size: 26px;}
		.subTitleArea h3:before {width: 80px;}
		.subTitleArea .h3Eng {height: auto; font-size: 14px;}
	}
	@media screen and (max-width: 660px) {
		.subTitleArea > h3 {height: 30px; line-height: 30px; font-size: 22px;}
		.subTitleArea .h3Eng {height: auto; font-size: 12px;}
	}

	/* in cBoxArea Sub Title End */

	.cBox {position: relative; display: block; margin: 0 auto; width: 100%; max-width: 1200px; min-height: 0; box-sizing: border-box; padding: 40px 0 20px; z-index: 2;}
	.cBox .cBoxLine {display: block; width: 100%; height: 39px; font-size: 0; line-height: 0; box-sizing: border-box; border-bottom: 1px #bbb dashed; margin: 0 auto;}
	.cBox:last-child .cBoxLine {height: 40px; font-size: 40px; line-height: 40px; border-bottom: 0;}

	.cBox h4 {position: relative; display: block; margin: 0 auto; line-height: 40px; font-size: 24px; padding: 40px 0 20px; font-weight: 700; text-align: left; letter-spacing: -0.02em; z-index: 0;}
	.cBox h4:before {position: absolute; bottom: 20px; left: 0; display: inline-block; width: 60px; height: 20px; box-sizing: border-box; padding: 0 10px; z-index: -1; content: ""; background-color: rgba(215,234,248,0.6); transition: all 0.3s;}

	.cBox h5 {position: relative; display: block; margin: 40px 0 0; width: 100%; line-height: 40px; font-size: 20px; padding: 0 0 20px; font-weight: 700; text-align: left;  letter-spacing: -0.02em; z-index: 0;}
	.cBox h5:before {position: absolute; top: 20px; left: 0; display: inline-block; width: 60px; height: 20px; text-align: left; box-sizing: border-box; padding: 0 10px; z-index: -1; content: ""; background-color: rgba(231,232,255,0.6); transition: all 0.3s;}
	.cBox h5:first-of-type {margin-top: 0;}
	.cBox .mBox .mText .h5subTitle {display: block; width: 100%; height: 40px; box-sizing: border-box; padding: 10px 0; line-height: 20px; font-size: 16px; font-weight: 500; color: #444;}

	/* .cBox h5 {line-height: 40px; font-size: 26px; padding: 10px 0 10px; font-weight: 500; text-align: center;} */
	.cBox h6 {position: relative; display: block; margin-top: 20px; width: 100%; padding: 0 0 10px; line-height: 30px; font-size: 16px; font-weight: 500; text-align: left; letter-spacing: -0.02em;}
	.cBox h6:before {position: absolute; bottom: 10px; left: 0; display: inline-block; width: 60px; height: 20px; text-align: left; box-sizing: border-box; padding: 0 10px; z-index: -1; content: ""; background-color: rgba(228,238,255,0.6); transition: all 0.3s;}
	.cBox h6:first-of-type {margin-top: 0;}

	.cBox h4:first-child,
	.cBox h5:first-child,
	.cBox h6:first-child {padding-top: 0;}

	@media screen and (max-width: 980px) {
		.cBox {padding-left: 0px;}
	}
	@media screen and (max-width: 660px) {
		.cBox h4 {line-height: 30px; font-size: 19px;}
		.cBox h5 {line-height: 30px; font-size: 17px;}
		.cBox h6 {line-height: 30px; font-size: 15px;}
	}

	.noticeBox {display: block; width: 100%; height: auto; margin: 20px auto; box-sizing: border-box; padding: 4px; border: 1px #ddd solid; background-image: url('../img/bgTableBorder01.png');}
	.noticeBox > .noticeText {display: block; width: 100%; height: 100%; box-sizing: border-box; padding: 20px; background-color: #faf9f5;}
	@media screen and (max-width: 660px) {
		.noticeBox > .noticeText {padding: 10px; background-position: center top 20px;}
		h4 {line-height: 30px; font-size: 20px;}
		h4:before {top: auto; bottom: 5%; left: 0; height: 80%;}
	}

	ul.listType01 {list-style: none; padding: 0;}
	ul.listType01 > li {position: relative; list-style: none; width: 100%; height: auto; line-height: 1.67em; font-size: 16px; font-weight: 300; color: #444; text-align: left; box-sizing: border-box;  padding-left: 10px;}
	ul.listType01 > li:before {position: absolute; top: 0; left: -10px; display: block; width: 20px; height: 30px; content: ""; background: url('../img/dotType03.png') left center no-repeat;}

	ul.listType02 {list-style: none; padding: 0;}
	ul.listType02 > li {position: relative; list-style: none; width: 100%; height: auto; line-height: 1.67em; font-size: 16px; font-weight: 300; color: #444; text-align: left; box-sizing: border-box; padding-left: 20px;}
	ul.listType02 > li:before {position: absolute; top: 0; left: -5px; display: block; width: 20px; height: 30px; content: ""; background: url('../img/dotType01.png') left center no-repeat;}

	ul.listType03 {list-style: none; padding: 0;}
	ul.listType03 > li {position: relative; list-style: none; width: 100%; height: auto; line-height: 1.67em; font-size: 16px; font-weight: 300; color: #444; text-align: left; box-sizing: border-box; padding-left: 20px;}
	ul.listType03 > li:before {position: absolute; top: 0; left: -5px; display: block; width: 20px; height: 30px; content: ""; background: url('../img/dotType04.png') left center no-repeat;}

	ul.listTypeDec {list-style: decimal; padding: 0;}
	ul.listTypeDec > li {position: relative; list-style: decimal outside; width: calc(100% - 20px); height: auto; line-height: 1.67em; font-size: 16px; font-weight: 400; color: #222; text-align: left; margin-left: 20px;}

	ul.secondType {list-style: none; padding: 0;}
	ul.secondType > li {position: relative; list-style: none; width: 100%; height: auto; line-height: 1.67em; font-size: 15px; font-weight: 300; color: #444; text-align: left; box-sizing: border-box; padding-left: 20px;}
	ul.secondType > li:before {position: absolute; top: -2px; left: 0; display: block; width: 20px; height: 30px; content: "\203A"; color: #6273ae;  font-size: 24px; font-weight: 700; }

	ul.thirdType {list-style: none; padding: 0;}
	ul.thirdType > li {position: relative; list-style: none; width: 100%; height: auto; line-height: 1.67em; font-size: 14px; font-weight: 300; color: #999; text-align: left; box-sizing: border-box; padding-left: 20px;}
	ul.thirdType > li:before {position: absolute; top: 0px; left: 0; display: block; width: 20px; height: 30px; content: "\2666"; color: #849fdd;  font-size: 12px; font-weight: 700; }

	@media screen and (max-width: 660px) {
		ul.listType01 > li,
		ul.listType02 > li,
		ul.listType03 > li {font-size: 14px;}
		ul.secondType > li {font-size: 13px;}
		ul.thirdType > li {font-size: 12px;}		
	}

	.cBox ul > li > .small {font-size: 13px; color: #7e889b;}

	.selectTab {display: none; width: 100%;}
	.selectTab > span {text-indent: -9999px;}
	.selectTabGuide {display: none; width: 100%; line-height: 20px; font-size: 12px; font-weight: 400; color: #ffa10e; text-align: center;}

	ul.tabMenuArea {position: relative; display: block; width: 100%; min-width: 300px; height: 50px; box-sizing: border-box; z-index: 1;}
	ul.tabMenuArea:before {position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 1px; line-height: 0; font-size: 0; content: ""; background-color: rgba(33,30,62,0.3); z-index: 2;}
	ul.tabMenuArea > li {float: left; display: block; width: 100%; max-width: 180px; height: 100%; background-color: #f7f7f7; overflow: hidden; transition: all 0.3s;}
	ul.tabMenuArea > li:first-child {border-radius: 0 0 0 0;}
	ul.tabMenuArea > li:last-child {border-radius: 0 0 0 0;}
	ul.tabMenuArea > li > a {display: block; width: 100%; height: 100%; box-sizing: border-box; line-height: 50px; font-size: 15px; font-weight: 500; color: #444; text-align: center; letter-spacing: -0.02em; text-decoration: none; transition: all 0.3s;}
	ul.tabMenuArea > li:hover {background-color: rgba(33,30,62,0.6);}
	ul.tabMenuArea > li:hover a {color: #fff;}
	ul.tabMenuArea > li.on {background-color: rgba(33,30,62,0.8);}
	ul.tabMenuArea > li.on > a {color: #fff;}
	ul.tabMenuArea > li.on:hover {background-color: #000;}
	.tabMenuArea.tab1 > li {width: 100%;}
	.tabMenuArea.tab2 > li {width: 50%;}
	.tabMenuArea.tab3 > li {width: 33.3333%;}
	.tabMenuArea.tab3 > li:nth-child(2) {width: 33.3334%;}
	.tabMenuArea.tab4 > li {width: 25%;}
	.tabMenuArea.tab5 > li {width: 20%;}
	.tabMenuArea.tab5 > li {width: 120px;}

	.tabMenuArea.tab6 > li {width: 16.5%;}
	.tabMenuArea.tab6 > li:nth-child(2),
	.tabMenuArea.tab6 > li:nth-child(5) {width: 17%;}
	.tabMenuArea.tab7 > li:nth-child(odd) {width: 14.5%;}
	.tabMenuArea.tab7 > li:nth-child(even) {width: 14%;}
	.tabMenuArea.tab8 > li {width: 12.5px;}
	.tabMenuArea.tab11 > li {width: 16.666666%;}

	/*
	ul.tabMenuArea {position: relative; display: block; width: 100%; height: auto; box-sizing: border-box; padding: 2px; border: 0; background-color: #fafafa; z-index: 2;}
	ul.tabMenuArea > li {float: left; display: block; height: 60px; box-sizing: border-box; padding: 2px; transition: all 0.3s;}
	ul.tabMenuArea > li > a {display: block; width: 100%; height: 100%; box-sizing: border-box; border: 1px #eee solid; line-height: 54px; font-size: 14px; font-weight: 500; color: #444; text-align: center; letter-spacing: -0.5px; text-decoration: none; background-color: #fff; transition: all 0.3s;}
	ul.tabMenuArea > li > a:hover {color: #fff; background-color: rgba(172,187,199,0.7);}
	ul.tabMenuArea > li.on > a {color: #fff; border: 1px rgba(68,140,203,1.0) solid; background-color: rgba(68,140,203,1.0);}
	ul.tabMenuArea > li.on > a:hover {border: 1px #222 solid; background-color: #222;}
	*/

	.parGroup {display: none; padding-top: 40px;}
	@media screen and (max-width: 1220px) {
		/*
		ul.tabMenuArea > li > a {font-size: 16px;}
		*/
	}
	/* @media screen and (max-width: 980px) { */

	@media screen and (max-width: 660px) {
		ul.tabMenuArea > li {max-width: 140px;}
	/* common.js 와 함께 수정해야함.
		.selectTabGuide {display: block;}
		.selectTab {position: relative; display: block; cursor: pointer; width: 100%; height: 58px; box-sizing: border-box; padding: 19px; border: 1px rgba(33,30,62,0.8) solid; line-height: 20px; font-size: 14px; font-weight: 500; color: #fff; text-align: left; letter-spacing: -0.02em; background: url('../img/selectDown.png') right 20px center no-repeat rgba(33,30,62,0.8); overflow: hidden; z-index: 2; transition: all 0.3s;}
		ul.tabMenuArea {display: none; max-width: 960px; height: auto; border: 1px rgba(33,30,62,0.1) solid; padding: 0; background-color: #fff;}
		ul.tabMenuArea {display: none;}
		ul.tabMenuArea > li {float: none; width: 100% !important; min-width: 0; max-width: 100%; height: 40px; box-sizing: border-box; padding: 0px; border-bottom: 1px rgba(33,30,62,0.6) solid; background-color: #fff;}
		ul.tabMenuArea > li:last-child {border: 0;}
		ul.tabMenuArea > li > a {height: 100%; padding: 0 0 0 20px; border: 0; line-height: 39px; font-size: 13px; text-align: left; letter-spacing: 0px;}
		ul.tabMenuArea > li.on > a {border: 1px rgba(33,30,62,0.8) solid; background-color: rgba(33,30,62,0.8);}
	*/
	}
	/* for sub page start */
	.module {position: relative; clear: both; width: 100%; margin-bottom: 0; word-break: keep-all;}

	.module .mType01 > .mBox {position: relative; float: left; display: block; width: 100%; margin: 0; padding: 0;}
	.module .mType02 > .mBox {position: relative; float: left; display: block; width: 50%; margin: 0; padding: 0;}
	.module .mType03 > .mBox {position: relative; float: left; display: block; width: 33.33%; margin: 0; padding: 0;}
	.module .mType04 > .mBox {position: relative; float: left; display: block; width: 25%; margin: 0; padding: 0;}

	.mBox .mBg {position: relative; width: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover;}
	.mBox .mImg,
	.mBox .mImgObject {position: relative; width: 100%;}
	.mBox .mImg > img {display: block; float: left; max-width: 100%;}
	.mBox .mImgObject > img {display: block; vertical-align: top; margin: 0 auto; max-width: 100%;}

	.mBox .mText {position: relative; width: 100%; max-width: 1200px; box-sizing: border-box;  margin: 0 auto;}
	.mBox .mImgAdd {padding: 30px;}
	.mBox .mText .engTitle {line-height: 30px; font-size: 28px; font-weight: bold; color: #999; text-align: center;  margin-top: 50px; }

	.mBox .mText p {line-height: 1.6em; font-size: 15px; font-weight: 300; padding: 0 0 30px 0; color: #555; transition: all 0.3s; text-align: left; }
	.mBox .mText p.middle {font-size: 14px; color: #666;}
	.mBox .mText p.small {font-size: 12px; color: #999;}

	.mBox .mText .parGroup {position: relative; width: 100%; height: auto; padding: 30px 0;}
	.mBox .mText .parGroup .paragraph {padding: 10px 0;}
	@media screen and (max-width: 660px) {
		.mBox .mText p {padding: 0 0 20px 0; font-size: 13px;}
		.mBox .mText p.small {font-size: 11px;}
	}

	/* for sub page end */

	/* Sub Page Common Layout 01 Start */
	/* Sub Page Common Layout 01 Start */

	/* for about01 start */
	#about01Wrap {}
	.about01Section01 {}
	.about01Section01 h4 {display: block; margin: 0; width: 200px; height: auto;}
	.about01Section01 h4:before {display: none;}
	.about01Section01 h4 > img {display: block; width: 100%; vertical-align: top;}
	.about01Section01 p.introduction01 {display: block; margin: 0; box-sizing: border-box; padding: 10px 0; width: 100%; line-height: 20px; font-size: 18px; font-weight: 700; color: #222; letter-spacing: 0em;}
	.about01Section01 .facadeImg {display: block; width: 100%;}
	.about01Section01 .facadeImg > img {float: left; display: block; width: 50%; vertical-align: top;}
	.about01Section01 p.introGuide {display: block; margin: 20px auto 0; box-sizing: border-box; padding: 20px; width: 100%; line-height: 25px; font-size: 15px; font-weight: 700; color: #222; letter-spacing: 0em; text-align: center; background-color: #f9f9f9;}
	.about01Section01 p.introGuide > br {display : none;}
	@media screen and (max-width: 1220px) {
	}
	@media screen and (max-width: 980px) {
		.about01Section01 p.introGuide {line-height: 25px; font-size: 15px;}
		.about01Section01 p.introGuide > br {display : block;}
	}
	@media screen and (max-width: 660px) {
		.about01Section01 p.introGuide {line-height: 20px; font-size: 14px;}
		.about01Section01 p.introGuide > br {display : none;}
	}
	@media screen and (max-width: 420px) {
		.about01Section01 p.introGuide {padding: 15px; font-size: 13px;}
	}
	/* for about01 end */

	/* for about02 start */
	#about02Wrap {}
	.about02Section01 {}
	.about02Section01 .globalMapArea {display: block; width: 100%;}
	.about02Section01 .globalMapArea #mapBox {position: relative; display: block; margin: 0 auto; width: 100%; height: 600px; background: url('../img/imgAbout02_worldMapBg.png') center center no-repeat; background-size: cover;}
	#mapBox .circle {position: absolute; display: flex; flex-direction: column;  align-items: center; justify-content: center; box-sizing: border-box; color: #fff; text-align: center;  transform:translate(-50%, -50%); transition: all 0.3s;}
	#mapBox .circle:before {position: absolute; inset: 0; border-radius: 50%; content: ""; z-index: 2;}
	#mapBox .ch:before {background-color: rgba(211,0,0,1.9);}
	#mapBox .us:before {background-color: rgba(31,83,190,1.9);}
	#mapBox .jp:before {background-color: rgba(246,174,0,1.9);}
	#mapBox .vn:before {background-color: rgba(146,0,0,1.9);}
	#mapBox .tw:before {background-color: rgba(241,21,21,1.9);}
	#mapBox .my:before {background-color: rgba(23,35,111,1.9);}

	#mapBox .ch {width: 180px; height: 180px;}
	#mapBox .us {width: 150px; height: 150px;}
	#mapBox .jp {width: 120px; height: 120px;}
	#mapBox .vn {width: 100px; height: 100px;}
	#mapBox .tw {width: 90px; height: 90px;}
	#mapBox .my {width: 90px; height: 90px;}

	/* 지도 위 좌표(대략 %) — 중앙 기준 배치 */
	#mapBox .ch { top: 22%; left: 55%; }
	#mapBox .us { top: 30%; left: 10%; }
	#mapBox .jp { top: 22%; left: 83%; }
	#mapBox .vn { top: 72%; left: 75%; }
	#mapBox .tw { top: 52%; left: 84%; }
	#mapBox .my { top: 52%; left: 67%; }

	#mapBox .circle p {position: relative; color: #fff; padding: 0; z-index: 2;}
	#mapBox .circle .country {line-height: 1.3em; font-size: 24px; font-weight: 700;}
	#mapBox .circle .area {line-height: 1.3em; font-size: 15px; font-weight: 400;  opacity: .95;}
	#mapBox .ch .country {font-size: 30px;}
	#mapBox .us .country {font-size: 26px;}
	#mapBox .jp .country {font-size: 20px;}
	#mapBox .vn .country {font-size: 18px;}
	#mapBox .tw .country {font-size: 16px;}
	#mapBox .my .country {font-size: 16px;}

	#mapBox .circle ul.listArea {position: absolute; display: block; width: 220px; min-height: 50px; box-sizing: border-box; padding: 19px 10px 20px; border-top: 1px #222 solid; box-shadow: 1px 1px 3px 5px rgba(0,0,0,0.05); background-color: rgba(255,255,255,0.80); z-index: 1;}
	#mapBox .ch ul.listArea { top: 50%; left: -200px; width: 240px;}
	#mapBox .us ul.listArea { top: 85%; left: 50%; width: 200px;}
	#mapBox .jp ul.listArea { top: 50%; left: -140px; width: 160px;}
	#mapBox .vn ul.listArea { top: 80%; left: 50%; width: 140px;}
	#mapBox .tw ul.listArea { top: 80%; left: 50%; width: 180px;}
	#mapBox .my ul.listArea { top: 80%; right: 50%; width: 140px;}
	#mapBox .circle ul.listArea > li {list-style: disc outside; margin-left: 15px; line-height: 15px; padding-bottom: 5px; font-size: 11px; font-weight: 300; color: #666; text-align: left; letter-spacing: -0.01em;}
	#mapBox .circle ul.listArea > li:last-child {padding-bottom: 0;}
	@media screen and (max-width: 1220px) {
		.about02Section01 .globalMapArea #mapBox {max-width: 960px; height: 480px;}
		#mapBox .ch {width: 140px; height: 140px;}
		#mapBox .us {width: 120px; height: 120px;}
		#mapBox .jp {width: 100px; height: 100px;}
		#mapBox .vn {width: 90px; height: 90px;}
		#mapBox .tw {width: 80px; height: 80px;}
		#mapBox .my {width: 80px; height: 80px;}

		#mapBox .ch .country {font-size: 24px;}
		#mapBox .us .country {font-size: 22px;}
		#mapBox .jp .country {font-size: 18px;}
		#mapBox .vn .country {font-size: 14px;}
		#mapBox .tw .country {font-size: 13px;}
		#mapBox .my .country {font-size: 13px;}
		#mapBox .circle .area {font-size: 12px;}

		#mapBox .circle ul.listArea > li {font-size: 10px;}
		#mapBox .ch ul.listArea { top: 50%; left: -160px; width: 200px;}
		#mapBox .us ul.listArea { top: 87%; left: 20%; width: 180px;}
		#mapBox .jp ul.listArea { top: 50%; left: -100px; width: 140px;}
		#mapBox .vn ul.listArea { top: 80%; left: 50%; width: 100px;}
		#mapBox .tw ul.listArea { top: 80%; left: 50%; width: 160px;}
		#mapBox .my ul.listArea { top: 80%; right: 50%; width: 120px;}
	}
	@media screen and (max-width: 980px) {
		.about02Section01 .globalMapArea #mapBox {height: 520px; background-position: center top; background-size: 100% auto;}
		#mapBox .circle {border-radius: 20px; transform: translate(0);}
		#mapBox .circle:before {border-radius: 20px 20px 0 0;}
		#mapBox .ch,
		#mapBox .us,
		#mapBox .jp,
		#mapBox .vn,
		#mapBox .tw,
		#mapBox .my {width: calc(25% - 10px); height: 60px; padding: 10px 0;}

		#mapBox .circle .country {line-height: 20px; font-size: 17px;}
		#mapBox .circle .area {line-height: 20px; font-size: 13px;}

		#mapBox .ch {top: 20px; left: 5px;}
		#mapBox .us {top: 20px; left: calc(25% + 5px);}
		#mapBox .jp {top: 20px; left: calc(50% + 5px);}
		#mapBox .vn {top: 200px; left: calc(50% + 5px);}
		#mapBox .tw {top: 20px; left: calc(75% + 5px);}
		#mapBox .my {top: 180px; left: calc(75% + 5px);}

		#mapBox .circle ul.listArea {border-radius: 0 0 20px 20px; padding: 09px 10px 10px; border-top: 1px #222 solid; box-shadow: 1px 1px 3px 5px rgba(0,0,0,0.05); background-color: rgba(255,255,255,0.80); z-index: 1;}
		#mapBox .ch ul.listArea,
		#mapBox .us ul.listArea,
		#mapBox .jp ul.listArea,
		#mapBox .vn ul.listArea,
		#mapBox .tw ul.listArea,
		#mapBox .my ul.listArea {top: 60px; left: 0; right: auto; width: 100%;}
	}
	@media screen and (max-width: 660px) {
		.about02Section01 .globalMapArea #mapBox {min-width: 300px; height: auto; padding: 50% 0 0; background-image: url('../img/imgAbout02_worldMapBgColor.png');}
		#mapBox .circle {position: relative; margin: 10px auto 0; width: 100%; max-width: 360px; border-radius: 12px;}
		#mapBox .circle:before {border-radius: 12px 12px 20px 20px;}
		#mapBox .circle:nth-of-type(1) {margin: 0 auto;}
		#mapBox .ch,
		#mapBox .us,
		#mapBox .jp,
		#mapBox .vn,
		#mapBox .tw,
		#mapBox .my {width: 100%; height: auto; padding: 0;}

		#mapBox .circle .country {padding-top: 10px; line-height: 20px; font-size: 17px;}
		#mapBox .circle .area {padding-bottom: 10px; line-height: 20px; font-size: 13px;}

		#mapBox .ch,
		#mapBox .us,
		#mapBox .jp,
		#mapBox .vn,
		#mapBox .tw,
		#mapBox .my {inset: 0;}

		#mapBox .circle ul.listArea {position: relative; width: 100px; border-radius: 0 0 12px 12px; box-shadow: none; background-color: #f9f9f9; z-index: 3;}
		#mapBox .ch ul.listArea,
		#mapBox .us ul.listArea,
		#mapBox .jp ul.listArea,
		#mapBox .vn ul.listArea,
		#mapBox .tw ul.listArea,
		#mapBox .my ul.listArea {top: 0; left: 0; right: auto; width: 100%;}


	}
	/* for about02 end */

	/* for about03 start */
	#about03Wrap {}
	.about03Section01 {}
	.mapResponse {display: block; margin: 0 auto 0; width: 100%; height: 400px;}
	.mapResponse {-webkit-filter: grayscale(30%); overflow: hidden;}
	.contactInfo {display: block; margin: 40px auto 0; width: 100%;}
	.contactInfo > ul {width: 100%; height: auto; padding-bottom: 20px;}
	.contactInfo > ul > li {position: relative; padding-bottom: 10px;}
	.contactInfo > ul > li > a {position: absolute; top: 0; left: 0; right: 0; display: block; margin: 0 auto; width: 100%; height: 100%;}
	.contactInfo > ul > li > dl {width: 100%; height: auto; padding: 0;}
	.contactInfo > ul > li > dl > dt {line-height: 20px; font-size: 14px; font-weight: 200; color: #222; letter-spacing: -0.5px;}
	.contactInfo > ul > li > dl > dd {line-height: 20px; font-size: 15px; font-weight: 700; color: #222; box-sizing: border-box; padding-left: 20px; transition: all 0.3s;}
	.contactInfo > ul > li:hover > dl > dd {color: rgba(200,172,141,1.0); text-decoration-line: underline; text-decoration-color: #eee;}
	.contactInfo > .linkArea {display: block; margin: 0 auto; width: 100%;}    
	.contactInfo > .linkArea > a {display: block; width: 200px; height: 40px; border-radius: 0px; line-height: 40px; font-size: 14px; font-weight: 400; color: #fff; text-align: center; text-decoration: none; background-color: rgba(200,172,141,1.0); transition: all 0.3s;} /* rgba(81,118,240,1.0) */
	.contactInfo > .linkArea > a:hover {background-color: #222;}
	@media screen and (max-width: 660px) {
		.contactInfo > ul > li > dl > dt {font-size: 12px;}
		.contactInfo > ul > li > dl > dd {font-size: 13px;}
	}
	/* for about03 end */

	/* for product01 ~ 04 start */
	#productCommonWrap {}
	.productSection01 {}
	.productSection01 .productArea {position: relative; display: block; width: 100%;}
	.productSection01 .productArea .productImg {float: left; display: block; width: 50%; box-sizing: border-box; padding-right: 60px;}
	.productSection01 .productArea .productImg > img {display: block; width: 100%; vertical-align: top;}
	.productSection01 .productArea .productInfoArea {float: left; display: block; width: 50%; box-sizing: border-box; padding: 0;}
	.productSection01 .productArea .productInfoArea > .infoBox {display: block; width: 100%; box-sizing: border-box; padding: 19px 0 20px; border-top: 1px #eee dashed;}	
	.productSection01 .productArea .productInfoArea > .infoBox:nth-of-type(1) {padding: 0 0 20px; border: 0;}
	.productSection01 .productArea .productInfoArea h5 {display: block; width: 100%;}
	.productSection01 .productArea .productInfoArea p {display: block; width: 100%; padding: 0; line-height: 1.4em; font-size: 17px; font-weight: 300; color: #222;}
	.productSection01 .productArea .productInfoArea h6 {display: block; width: 100%;}
	.productSection01 .productArea .productInfoArea h6 span.material-symbols-outlined {
		vertical-align: -0.25em;      /* 베이스라인 살짝 내리기(상황에 따라 -0.10em~-0.20em) */
		font-weight: 400;
		font-variation-settings: 
		'FILL' 0,
		'wght' 400,
		'GRAD' 0;
	}
	.productSection01 .productArea .productInfoArea ul,
	.productSection01 .productArea .productInfoArea dl {display: block; width: 100%;}
	.productSection01 .productArea .productInfoArea ul > li,
	.productSection01 .productArea .productInfoArea dl > dt,
	.productSection01 .productArea .productInfoArea dl > dd {box-sizing: border-box; padding-bottom: 10px; line-height: 1.4em; font-size: 17px; font-weight: 300; color: #222; letter-spacing: -0.02em; transition: all 0.3s;}
	.productSection01 .productArea .productInfoArea ul > li {width: 100%; list-style: disc outside; margin-left: 20px; }
	.productSection01 .productArea .productInfoArea ul > li strong {font-weight: 700;}
	.productSection01 .productArea .productInfoArea dl > dt {float: left; width: 140px; font-weight: 700;}
	.productSection01 .productArea .productInfoArea dl > dd {float: left; width: calc(100% - 140px); font-weight: 300;}
	.productSection01 .productArea .productInfoArea ul > li > span.small {display: block; line-height: 1.2em; font-size: 14px; color: #999;}

	.productSection01 .productArea .productInfoArea ul.imgType {display: block; width: 100%; border-radius: 20px; box-sizing: border-box; padding: 5px; background-color: #f9f9f9;}
	.productSection01 .productArea .productInfoArea ul.imgType > li {float: left; list-style: none; display: block; margin: 0; box-sizing: border-box; padding: 5px;}
	.productSection01 .productArea .productInfoArea ul.imgType.split4 > li {width: 25%;}
	.productSection01 .productArea .productInfoArea ul.imgType.split3 > li {width: 33.333333%;}
	.productSection01 .productArea .productInfoArea ul.imgType.split2 > li {width: 50%;}
	.productSection01 .productArea .productInfoArea ul.imgType > li > .imgBox {width: 100%; height: auto; vertical-align: top; border-radius: 9px; box-sizing: border-box; border: 1px #eee solid; background-color: #fff; transition: all 0.3s;}
	.productSection01 .productArea .productInfoArea ul.imgType > li > .imgBox:hover {box-shadow: 2px 2px 3px 2px rgba(0,0,0,0.2);}
	.productSection01 .productArea .productInfoArea ul.imgType > li > .imgBox > img {width: 100%; height: auto; vertical-align: top;}
	.productSection01 .productArea .productInfoArea ul.imgType > li > .imgBox > span {display: block; margin-bottom: 5px; line-height: 20px; font-size: 12px; font-weight: 500; color: #222; text-align: center;}

	.productSection01 .productArea .productInfoArea .specGuide{display: flex; justify-content: center; align-items: center;}
	.productSection01 .productArea .productInfoArea p.guideText {padding: 0; line-height: 1.2em; font-size: 13px; font-weight: 500; color: #6198ca; text-align: center;}
	.productSection01 .productArea .productInfoArea p.guideText span.material-symbols-outlined {vertical-align: -0.25em; font-size: 16px;}
	.productSection01 .productArea .productInfoArea p.guideEtcList {display: block; margin: 10px auto 0; width: 100%; line-height: 20px; font-size: 13px; font-weight: 700; color: #222; text-align: center; letter-spacing: -0.02em;}
	.productSection01 .productArea .productInfoArea p.guideEtcList > span {display: inline-block; margin: 0 2px; box-sizing: border-box; padding: 0 5px; line-height: 20px; font-size: 11px; font-weight: 400; color: #fff; border-radius: 4px; letter-spacing: 0em; background-color: #bbb; transition: all 0.3s;}
	.productSection01 .productArea .productInfoArea p.guideEtcList > span:hover {background-color: #6198ca;}
	.productSection01 .productArea .productInfoArea table.miniTable {margin: 10px auto 0;}
	.productSection01 .productArea .productInfoArea table.miniTable thead th {color: #fff; background-color: #6198ca;}
	.productSection01 .productArea .productInfoArea table.miniTable th,
	.productSection01 .productArea .productInfoArea table.miniTable td {padding: 5px;}
	.productSection01 .productArea .productInfoArea table.miniTable tbody * {font-size: 12px; text-align: center;}
	.productSection01 .productArea .productInfoArea table.miniTable span.material-symbols-outlined {vertical-align: -0.28em;}

	@media screen and (max-width: 980px) {
		.productSection01 .productArea .productImg {width: 45%; padding-right: 20px;}
		.productSection01 .productArea .productInfoArea {width: 55%;}
		.productSection01 .productArea .productImg {padding-right: 40px;}
		.productSection01 .productArea .productInfoArea p {font-size: 16px;}
		.productSection01 .productArea .productInfoArea ul > li,
		.productSection01 .productArea .productInfoArea dl > dt,
		.productSection01 .productArea .productInfoArea dl > dd {font-size: 15px;}
		.productSection01 .productArea .productInfoArea dl > dt {width: 100%;}
		.productSection01 .productArea .productInfoArea dl > dd {width: 100%; box-sizing: border-box; padding-left: 5px;}
		.productSection01 .productArea .productInfoArea ul > li > span.small {font-size: 13px;}
	}
	@media screen and (max-width: 660px) {
		.productSection01 .productArea .productImg {float: none; position: relative; width: 100%; aspect-ratio: 16 / 10; padding: 0; overflow: hidden;}
		.productSection01 .productArea .productImg > img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
		.productSection01 .productArea .productInfoArea {float: none; margin: 40px auto 0; width: 100%;}
		.productSection01 .productArea .productInfoArea p {font-size: 15px;}
		.productSection01 .productArea .productInfoArea ul > li,
		.productSection01 .productArea .productInfoArea dl > dt,
		.productSection01 .productArea .productInfoArea dl > dd {font-size: 14px;}
		.productSection01 .productArea .productInfoArea dl > dt {width: 120px;}
		.productSection01 .productArea .productInfoArea dl > dd {width: calc(100% - 120px);}
		.productSection01 .productArea .productInfoArea ul > li > span.small {font-size: 12px;}
	}
	@media screen and (max-width: 420px) {
		.productSection01 .productArea .productInfoArea p {font-size: 14px;}
		.productSection01 .productArea .productInfoArea ul > li,
		.productSection01 .productArea .productInfoArea dl > dt,
		.productSection01 .productArea .productInfoArea dl > dd {font-size: 13px;}
		.productSection01 .productArea .productInfoArea dl > dt {width: 100%;}
		.productSection01 .productArea .productInfoArea dl > dd {width: 100%;}
	}
	/* for product01 ~ 04 end */





	/* for project01 start */
	#projectCommonWrap {}
	.projectSection01 {}
	@media screen and (max-width: 980px) {
	}
	@media screen and (max-width: 660px) {
	}
	/* for project01 end */

	/* for support01 ~ 03 start */
	#supportCommonWrap {}
	.supportSection01 {}
	.supportSection02 {}
	.supportSection03 {}
	@media screen and (max-width: 660px) {
	}
	/* for support01 ~ 03 end */