@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.sbnNo01 {background: url('../img/sbn01.jpg') center center no-repeat; background-size: cover;}
#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.sbnNo05 {background: url('../img/sbn05.jpg') center center no-repeat; background-size: cover;}

#bnSubArea > .subVisualArea > .sbn {position: relative; width: 100%; max-width: 1200px; height: 100%; box-sizing: border-box; padding: 0; margin: 0 auto; transition: all 0.3s}
#bnSubArea > .subVisualArea > .sbn > h2 {position: absolute; bottom: 80px; left: 20px; display: block; width: 100%; height: 80px; line-height: 80px; font-size: 72px; 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 > .sbn .sbnSlogan {position: absolute; bottom: 0; left: 0; display: block; margin: 0 auto; width: 100%; max-width: 300px; height: 40px; line-height: 40px; font-size: 16px; font-weight: 200; text-align: center; color: #fff; letter-spacing: 0.4em; background-color: rgba(0,104,158,0.7); transition: all 0.3s;}
#bnSubArea > .subVisualArea > .sbn .sbnSlogan  > strong {font-weight: 700;}

#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 .sbnSlogan {left: 10px; max-width: 240px; font-size: 13px;}
}
@media screen and (max-width: 980px) {
	#bnSubArea > .subVisualArea {height: 340px; padding-top: 80px;}
	#bnSubArea > .subVisualArea > .sbn > h2 {top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 60px; line-height: 60px; font-size: 56px; text-align: center;}
	#bnSubArea > .subVisualArea > .sbn .sbnSlogan {top: 60px; left: 0; right: 0; bottom: auto; margin: 0 auto; width: 200px; height: 30px; line-height: 30px; font-size: 10px;}
	#bnSubArea > .subVisualArea > .subPageing {top: 80px;}
}
@media screen and (max-width: 660px) {
	#bnSubArea > .subVisualArea {height: 300px;}
	#bnSubArea > .subVisualArea > .sbn .sbnSlogan {top: 60px; left: 0; right: 0; bottom: auto; margin: 0 auto; width: 160px; height: 20px; line-height: 20px; font-size: 8px;}
	#bnSubArea > .subVisualArea > .sbn > h2 {top: 10px; bottom: 0; left: 0; right: 0; margin: auto; height: 50px; 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 {width: 100%; height: 100%; z-index: 100; border-radius: 0; overflow: visible; }

#subHeader .subMenuArea {width: 100%; max-width: 1200px; min-width: 320px; height: 100%; margin: 0 auto; transition: all 0.3s;}
/*
background-color: rgba(0,0,0,0.4);
box-shadow: 0 0 0 0 rgba(0,0,0,0.3);
*/

#subHeader .subMenuArea .subMenuNavi {margin-left: auto; margin-right: 0; display: flex; justify-content: center; width: 100%; max-width: 700px; height: 60px; box-sizing: border-box; transition: all 0.3s;}
/* #subHeader .subMenuArea .subMenuNavi>li {float: left;} */
#subHeader .subMenuArea .subMenuNavi>li > a {display: block; width: 100%; height: 100%; box-sizing: border-box; border-top: 1px rgba(255,255,255,0.3) solid; text-align: center; font-size: 14px; line-height: 59px; font-weight: 400; color: #FFF; letter-spacing: -0.00em; text-decoration: none; background-color: rgba(47,43,59,0.7); transition: all 0.3s;}
#subHeader .subMenuArea .subMenuNavi>li:first-child > a {border-left: 1px rgba(255,255,255,0.3) solid;}
#subHeader .subMenuArea .subMenuNavi>li:last-child > a {border-right: 1px rgba(255,255,255,0.3) solid;}
#subHeader .subMenuArea .subMenuNavi>li a:hover {color: #fff;}
#subHeader .subMenuArea .subMenuNavi>li.on,
#subHeader .subMenuArea .subMenuNavi>li.on>a {font-weight: 500; background-color: rgba(0,104,158,0.8);}
#subHeader .subMenuArea .subMenuNavi>li a:hover {color: #fff; background-color: rgba(0,104,158,0.7);}
#subHeader .subMenuArea .subMenuNavi>li.on > a:hover {color: #fff; background-color: rgba(0,104,158,1.0);}

#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.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: 1440px) {
	#subHeader .subMenuArea .subMenuNavi {padding-right: 10px;}
}
@media screen and (max-width: 1220px) {
	#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 10px;}
	#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; background-color: #f4f4f4;}
	table tr {background-color: #fff;}
	table th,
	table td {font-size: 15px; font-weight: 300; 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;}

	.mBox .mText p.slideTableGuide01,
	.mBox .mText p.slideTableGuide02 {display: none; width: 100%; padding: 0; line-height: 16px; font-size: 12px; font-weight: 400; color: #ffa10e; text-align: center;}

	@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;}
		.mBox .mText p.slideTableGuide01 {display: inline-block;}
	}
	@media screen and (max-width: 660px) {
		.shortTable {overflow-x: scroll;}
		.shortTable table {min-width: 360px;}
		.mBox .mText p.slideTableGuide02 {display: inline-block;}

		table th br.onOff,
		table td br.onOff {display: inline-block;}
		table th,
		table td {font-size: 14px;}
		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 {font-weight: 700; background-color: #f2f4f9;}
	table.subTable01 tbody td {font-weight: 400;}
	@media screen and (max-width: 980px) {
		table.subTable01 {max-width: 960px; min-width: 640px;}
		table.subTable01 th,
		table.subTable01 td {font-size: 13px !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;}
	/* 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: 19px 9px; line-height: 20px; font-size: 14px; font-weight: 400; color: #777; text-align: left; letter-spacing: -0.03em; background: url('../img/iconWhereisDown.png') right center no-repeat; background-size: 14px; transition: all 0.3s;}
	.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 > .depthMenu {position: absolute; display: none; top: 59px; left: 0; right: auto; width: 140px; 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 {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: 15px 10px; line-height: 20px; font-size: 13px; font-weight: 300; color: #444; text-align: left; letter-spacing: -0.03em; text-decoration: none; transition: all 0.3s;}
	ul.whereIs > li > .depthMenu > li:hover {background-color: rgba(33,30,62,0.1);}
	ul.whereIs > li > .depthMenu > li.on {background-color: rgba(19,159,224,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(33,30,62,0.8);} /* 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 10px;}
	}
	@media screen and (max-width: 980px) {
		.cBoxArea {max-width: none; padding: 0 10px;}
	}
	@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.05em; 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; line-height: 40px; font-size: 18px; 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: 28px;}
		.subTitleArea h3:before {width: 80px;}
		.subTitleArea .h3Eng {height: 30px; line-height: 30px; font-size: 14px;}
	}
	/* 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; 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: #efecfd; 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; 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 h5 {line-height: 40px; font-size: 26px; padding: 10px 0 10px; font-weight: 500; text-align: center;} */
	.cBox h6 {margin-top: 10px; padding: 10px 0 10px; line-height: 30px; font-size: 18px; font-weight: 500; text-align: left;}

	.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 {font-size: 20px;}
		.cBox h5 {line-height: 30px; font-size: 18px;}
		.cBox h6 {line-height: 1.6em; 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: 60px; 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,1.0); z-index: 2;}
	ul.tabMenuArea > li {float: left; display: block; width: 100%; max-width: 180px; height: 60px; 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: 60px; font-size: 17px; font-weight: 500; color: #444; text-align: center; letter-spacing: -0.05em; 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; margin-top: 20px;}
	@media screen and (max-width: 1220px) {
		/*
		ul.tabMenuArea > li > a {font-size: 16px;}
		*/
	}
	@media screen and (max-width: 980px) {
		.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: 16px; font-weight: 700; color: #fff; text-align: left; letter-spacing: -0.05em; 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: 16px; font-weight: 300; padding: 0 0 30px 0; color: #777; transition: all 0.3s; text-align: left; }
		.mBox .mText p.small {line-height: 20px; font-size: 13px; color: #999;}

		.mBox .mText .parGroup {position: relative; width: 100%; height: auto; padding: 30px 0;}
		.mBox .mText .parGroup .paragraph {padding: 10px 0;}
	/* for sub page end */



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



	/* for about01 start */
	#about01Wrap {}
	#about01Wrap {}
	.about01Section01 {}
	.about01Section01 .messageVisual {display: block; margin: 0 auto; width: 100%; height: 520px; background: url('../img/imgAbout01_01.jpg') center center no-repeat; background-size: cover;}
	.about01Section01 .messageArea {display: block; margin: 60px auto 0; width: 100%;}
	.about01Section01 .messageArea p {margin: 0; padding: 0; letter-spacing: -0.02em; transition: all 0.3s;}
	.about01Section01 .messageArea .welcome {display: block; width: 100%; box-sizing: border-box; padding: 10px 0; line-height: 40px; font-size: 38px; font-weight: 300; color: #222;}
	.about01Section01 .messageArea .welcome  strong {font-weight: 500;}
	.about01Section01 .messageArea .message {display: block; margin-top: 40px; width: 100%; line-height: 1.6em; font-size: 18px; font-weight: 300; color: #777;}
	.about01Section01 .messageArea .position {display: block; margin-top: 120px; width: 100%; line-height: 1.6em; font-size: 30px; font-weight: 200; color: #222;}
	.about01Section01 .messageArea .position strong {font-weight: 700; letter-spacing: 0.5em;}
	@media screen and (max-width: 980px) {
		.about01Section01 .messageVisual {height: 280px;}
		.about01Section01 .messageArea .welcome {line-height: 40px; font-size: 32px;}
		.about01Section01 .messageArea .message {font-size: 15px;}
		.about01Section01 .messageArea .position {margin-top: 80px; font-size: 24px;}
	}
	@media screen and (max-width: 660px) {
		.about01Section01 .messageVisual {height: 190px;}
		.about01Section01 .messageArea .welcome {line-height: 30px; font-size: 26px;}
	}
	@media screen and (max-width: 420px) {
		.about01Section01 .messageVisual {height: 140px;}
		.about01Section01 .messageArea .welcome {line-height: 30px; font-size: 22px;}
		.about01Section01 .messageArea .message {font-size: 14px;}
		.about01Section01 .messageArea .position {margin-top: 80px; font-size: 20px;}
	}

	.about01Section02 {}
	.about01Section02 ul.coreValueArea {display: block; width: 100%; box-sizing: border-box; padding: 10px; border-radius: 20px; background-color: #eee;}
	.about01Section02 ul.coreValueArea > li {float: left; display: block; width: 33.333333%; height: 440px; box-sizing: border-box; padding: 10px;}
	.about01Section02 ul.coreValueArea > li > .valueBox {display: block; width: 100%; height: 100%; box-sizing: border-box; padding: 40px 20px; border-radius: 10px; background-color: #fff;}
	.about01Section02 ul.coreValueArea > li > .valueBox p {text-align: center; padding: 0; margin: 0;}
	.about01Section02 ul.coreValueArea > li > .valueBox .titleEng {height: 20px; line-height: 20px; font-size: 14px; font-weight: 400; color: #777;}	
	.about01Section02 ul.coreValueArea > li > .valueBox .titleKor {height: 60px; line-height: 60px; font-size: 30px; font-weight: 700; color: #222; letter-spacing: -0.03em;}	
	.about01Section02 ul.coreValueArea > li > .valueBox .iconBox {display: block; margin: 10px auto 20px; width: 120px; height: 120px; box-sizing: border-box; padding: 20px; border-radius: 50%; background-color: rgba(238,238,238,0.5); background-position: center center; background-size: auto; background-repeat: no-repeat;}
	.about01Section02 ul.coreValueArea > li:nth-child(1) > .valueBox .iconBox {background-image: url('../img/iconAbout01_01.png');}
	.about01Section02 ul.coreValueArea > li:nth-child(2) > .valueBox .iconBox {background-image: url('../img/iconAbout01_02.png');}
	.about01Section02 ul.coreValueArea > li:nth-child(3) > .valueBox .iconBox {background-image: url('../img/iconAbout01_03.png');}
	.about01Section02 ul.coreValueArea > li > .valueBox .titleValue {height: 30px; line-height: 30px; font-size: 17px; font-weight: 500; color: #222; letter-spacing: -0.03em;}	
	.about01Section02 ul.coreValueArea > li > .valueBox .valueText {margin-top: 20px; height: 60px; line-height: 20px; font-size: 13px; font-weight: 300; color: #777; letter-spacing: -0.03em;}	
	@media screen and (max-width: 1220px) {
		.about01Section02 ul.coreValueArea {padding: 5px;}
		.about01Section02 ul.coreValueArea > li {padding: 5px;}
		.about01Section02 ul.coreValueArea > li > .valueBox {padding: 40px 10px;}
		.about01Section02 ul.coreValueArea > li > .valueBox .titleValue {font-size: 15px;}
		.about01Section02 ul.coreValueArea > li > .valueBox .valueText {font-size: 12px;}
	}
	@media screen and (max-width: 980px) {
		.about01Section02 ul.coreValueArea {margin: 0 auto; max-width: 640px;}
		.about01Section02 ul.coreValueArea > li {width: 100%; padding: 5px;}
		.about01Section02 ul.coreValueArea > li > .valueBox {padding: 40px 20px;}
		.about01Section02 ul.coreValueArea > li > .valueBox .titleValue {}
		.about01Section02 ul.coreValueArea > li > .valueBox .valueText {}
	}
	@media screen and (max-width: 660px) {
		.about01Section02 ul.coreValueArea {margin: 0 auto; max-width: 400px;}
		.about01Section02 ul.coreValueArea > li {float: none; margin: 0 auto; width: 100%; height: 360px; padding: 5px;}
		.about01Section02 ul.coreValueArea > li > .valueBox {padding: 40px 20px;}
		.about01Section02 ul.coreValueArea > li > .valueBox .titleKor {height: 40px; line-height: 40px; font-size: 24px;}
		.about01Section02 ul.coreValueArea > li > .valueBox .iconBox {width: 100px; height: 100px; background-size: 60px;}
		.about01Section02 ul.coreValueArea > li > .valueBox .titleValue {height: 20px; line-height: 20px; font-size: 14px;}	
		.about01Section02 ul.coreValueArea > li > .valueBox .valueText {margin-top: 20px; height: auto; line-height: 1.4em; font-size: 11px;}
	}
	@media screen and (max-width: 420px) {
	}
	/* for about01 end */

	/* for about02 start */
	#about02Wrap {}
	.about02Section01 {}

	#historyArea {position: relative; display: block; width: 100%;}
	#historyArea .historyImg {position: relative; display: block; width: 100%; height: 360px; background: url('../img/imgAbout02_01.jpg') center center no-repeat; background-size: cover; transition: all 0.3s;}

	#historyArea .historyGroup {position: relative; display: block; margin: 0 auto; width: 100%; max-width: 960px; box-sizing: border-box; transition: all 0.3s;}
	#historyArea .historyGroup .historyLine {position: absolute; top: 30px; left: calc(240px - 10px); margin-left: -1px; width: 1px; height: calc(100% - 30px); padding: 0; background-color: #eee; transition: all 0.3s;}
	#historyArea .historyGroup .historyLine:before {position: absolute; bottom: 0; left: -10px; width: 20px; height: 20px; content: ""; background: url('../img/dotTypeBase.png') right center no-repeat;}

	#historyArea .historyGroup > ul {position: relative; display: block; margin: 60px auto 0; width: 100%; box-sizing: border-box; padding-left: 0; transition: all 0.3s;}
	#historyArea .historyGroup > ul > li {position: relative; margin: 0 auto;}
	#historyArea .historyGroup > ul > li > dl {display: block; width: 100%; height: auto; box-sizing: border-box; padding: 0 0 20px;}
	#historyArea .historyGroup > ul > li:last-child > dl {padding: 0;}
	#historyArea .historyGroup > ul > li > dl dt {float: left; display: block; width: 240px; box-sizing: border-box; padding: 0; line-height: 70px; font-size: 60px; font-weight: 200; color: rgba(0,104,158,1.0); font-style: italic; font-family: Georgia, "Times New Roman", Times, serif;}
	#historyArea .historyGroup > ul > li > dl dt {background: url('../img/dotType04.png') right center no-repeat;}
	#historyArea .historyGroup > ul > li:first-child > dl dt {background-image: url('../img/dotType03.png');}
	#historyArea .historyGroup > ul > li > dl dd {float: left; display: block; width: calc(100% - 240px); height: auto; box-sizing: border-box; padding: 15px 10px;}
	#historyArea .historyGroup > ul > li > dl dd > .year {margin: 0; width: 100%; padding: 20px 0 10px; line-height: 30px; font-size: 24px; font-weight: 700; color: #999; font-family: Georgia, "Times New Roman", Times, serif;}
	#historyArea .historyGroup > ul > li > dl dd > .year:first-of-type {padding-top: 0;}
	#historyArea .historyGroup > ul > li > dl dd > .highlight {display: block; margin: 0; width: 100%; padding: 0;}
	#historyArea .historyGroup > ul > li > dl dd > .highlight > .month {float: left; display: block; width: 40px; padding: 5px 0; line-height: 20px; font-size: 16px; font-weight: 900; color: #222; text-align: right;}
	#historyArea .historyGroup > ul > li > dl dd > .highlight > ul {float: left; display: block; width: calc(100% - 40px); box-sizing: border-box; padding: 5px 0;}
	#historyArea .historyGroup > ul > li > dl dd > .highlight > ul > li {list-style: disc outside; margin-left: 20px; line-height: 20px; font-size: 14px; font-weight: 300; color: #222; letter-spacing: -0.03em;}
	@media screen and (max-width: 1220px) {
	}
	@media screen and (max-width: 980px) {
		#historyArea {}
		#historyArea .historyImg {height: 260px;}
		#historyArea .historyGroup {float: none; width: 100%; padding: 0 20px;}
		#historyArea .historyGroup .historyLine {left: calc(180px - 10px);}
		#historyArea .historyGroup > ul > li > dl dt {width: 160px; line-height: 60px; font-size: 42px;}
		#historyArea .historyGroup > ul > li > dl dd {width: calc(100% - 160px); padding: 10px 10px;}
	}
	@media screen and (max-width: 660px) {
		#historyArea .historyImg {height: 180px;}
		#historyArea .historyGroup {padding: 0 0;}
		#historyArea .historyGroup .historyLine {left: 10px;}
		#historyArea .historyGroup > ul {margin: 40px auto 0;}
		#historyArea .historyGroup > ul > li > dl dt {float: none; width: 100%; box-sizing: border-box; padding-left: 30px; line-height: 40px; font-size: 32px;}
		#historyArea .historyGroup > ul > li > dl dt {background: url('../img/dotType04.png') left center no-repeat;}
		#historyArea .historyGroup > ul > li > dl dd {float: none; width: 100%; box-sizing: border-box; padding-left: 30px; }
		#historyArea .historyGroup > ul > li > dl dd > .year { padding: 20px 0 10px; line-height: 20px; font-size: 18px;}
		#historyArea .historyGroup > ul > li > dl dd > .highlight > .month {width: 30px; padding: 0; line-height: 20px; font-size: 14px;}
		#historyArea .historyGroup > ul > li > dl dd > .highlight > ul {width: calc(100% - 30px); padding: 0;}
		#historyArea .historyGroup > ul > li > dl dd > .highlight > ul > li {line-height: 20px; font-size: 12px;}
	}
	@media screen and (max-width: 420px) {
		#historyArea .historyImg {height: 140px;}
		#historyArea .historyGroup > ul > li > dl dd > .highlight > ul > li {font-size: 11px; letter-spacing: -0.02em;}
	}
	/* for about02 end */

	/* for about03 start */
	#about03Wrap {}
	.about03Section01 {}
	.about03Section01 .subTitle01 {margin-top: 20px; font-size: 20px; font-weight: 300; color: #666; letter-spacing: -0.02em;}
	.about03Section01 .subTitle01 span {font-weight: 700; color: #222;}
	.about03Section01 .subTitle02 {margin-top: 0; font-size: 14px; font-weight: 300; color: #666;}
	#organizationArea {position: relative; display: block; margin-top: 40px; width: 100%; box-sizing: border-box; padding: 79px; border: 1px #eee solid; background-color: #fdfdfd; transition: all 0.3s;}
	#organizationArea h5 {position: absolute; top: 120px; left: 79px; display: block; margin: 0; width: 220px; height: 60px; padding: 0; line-height: 60px; font-size: 36px; font-weight: lighter; letter-spacing: -0.02em; font-family: Georgia, "Times New Roman", Times, serif; color: #dddddd; text-align: left; z-index: 1; transition: all 0.3s;}
	#organizationArea h5:before {display: none;}
	#organizationArea ul.flowBox {position: relative; display: block; width: 100%;}
	#organizationArea ul.flowBox > li.ceoLine {position: relative; display: block; width: 100%;}
	#organizationArea ul.flowBox > li.ceoLine > .ceoBox {position: relative; display: block; margin: 0 auto; width: 140px; height: 140px; border-radius: 50%; background-color: #998675; transition: all 0.3s;}
	#organizationArea ul.flowBox > li.ceoLine > .ceoBox p.positionNameEng {padding-top: 40px; line-height: 20px; font-size: 14px; font-weight: 300; color: #fff; text-align: center;}
	#organizationArea ul.flowBox > li.ceoLine > .ceoBox p.positionNameKr {padding-top: 0; line-height: 30px; font-size: 24px; font-weight: 700; color: #fff; text-align: center;}

	#organizationArea ul.flowBox > li.boardLine {position: relative; display: block; margin-top: 20px; width: 100%; box-sizing: border-box; padding: 0;}
	#organizationArea ul.flowBox > li.boardLine > ul.boardGroup {position: relative; display: block; width: 100%; height: 60px; box-sizing: border-box; padding: 0;}
	#organizationArea ul.flowBox > li.boardLine > ul.boardGroup > li.advisorsBox {position: absolute; top: 0; left: calc(50% - 240px); display: block; width: 200px; height: 100%; line-height: 60px; font-size: 18px; font-weight: 700; color: #fff; text-align: center; background-color: #211e3e; transition: all 0.3s;}
	#organizationArea ul.flowBox > li.boardLine > ul.boardGroup > li.directorsBox {position: absolute; top: 0; left: calc(50% + 40px); display: block; width: 200px; height: 100%; line-height: 60px; font-size: 18px; font-weight: 700; color: #fff; text-align: center; background-color: #211e3e; transition: all 0.3s;}

	#organizationArea ul.flowBox > li.departLine {position: relative; display: block; margin-top: 40px; width: 100%; box-sizing: border-box; padding: 0;}
	#organizationArea ul.flowBox > li.departLine > ul.departGroup {position: relative; display: block; width: 100%; box-sizing: border-box; padding: 0px;}
	#organizationArea ul.flowBox > li.departLine > ul.departGroup > li {float: left; position: relative; display: block; width: 25%; box-sizing: border-box; padding: 0 10px; transition: all 0.3s;}
	#organizationArea ul.flowBox > li.departLine > ul.departGroup > li > .departName {display: block; width: 100%; height: 60px; line-height: 60px; font-size: 18px; font-weight: 700; color: #211e3e; text-align: center; background-color: #ebebeb; transition: all 0.3s;}
	#organizationArea ul.flowBox > li.departLine > ul.departGroup > li > ul.departList {display: block; width: 100%; box-sizing: border-box; padding: 20px 0; background-color: #f9f9f9; transition: all 0.3s;}
	#organizationArea ul.flowBox > li.departLine > ul.departGroup > li > ul.departList > li {display: block; width: 100%; height: 40px; line-height: 40px; font-size: 15px; font-weight: 400; color: #222; text-align: center; letter-spacing: -0.02em; transition: all 0.3s;}
	#organizationArea ul.flowBox > li.departLine > ul.departGroup > li > ul.departList > li span {font-size: 13px; color: #999;}

	#organizationArea ul.flowBox > li.ceoLine > .ceoBox:before {position: absolute; bottom: -100px; left: 0; right: 0; display: block; margin: 0 auto; width: 1px; height: 100px; line-height: 0; font-size: 0; content: ""; background-color: #eee; z-index: 1; transition: all 0.3s;}
	#organizationArea ul.flowBox > li.boardLine > ul.boardGroup:before {position: absolute; top: 30px; left: 0; right: 0; display: block; margin: 0 auto; width: 80px; height: 1px; line-height: 0; font-size: 0; content: ""; background-color: #eee; z-index: 1; transition: all 0.3s;}
	#organizationArea ul.flowBox > li.departLine:before {position: absolute; top: -20px; left: 0px; right: 0; display: block; margin: 0 auto; width: 75%; height: 1px; line-height: 0; font-size: 0; content: ""; background-color: #eee; z-index: 1; transition: all 0.3s;}
	#organizationArea ul.flowBox > li.departLine > ul.departGroup > li:before {position: absolute; top: -20px; left: 0; right: 0; display: block; margin: 0 auto; width: 1px; height: 20px; line-height: 0; font-size: 0; content: ""; background-color: #eee; z-index: 1; transition: all 0.3s;}
	@media screen and (max-width: 1220px) {
		#organizationArea {padding: 79px 59px;}
		#organizationArea h5 {left: 59px; font-size: 32px;}
		#organizationArea ul.flowBox {position: relative; display: block; width: 100%;}
		#organizationArea ul.flowBox > li.boardLine > ul.boardGroup > li.advisorsBox,
		#organizationArea ul.flowBox > li.boardLine > ul.boardGroup > li.directorsBox {width: 180px; font-size: 17px;}
		#organizationArea ul.flowBox > li.boardLine > ul.boardGroup > li.advisorsBox {left: calc(50% - 200px);}
		#organizationArea ul.flowBox > li.boardLine > ul.boardGroup > li.directorsBox {left: calc(50% + 20px);}
		#organizationArea ul.flowBox > li.departLine > ul.departGroup > li > .departName {font-size: 17px;}

		#organizationArea ul.flowBox > li.boardLine > ul.boardGroup:before {width: 40px;}
	}
	@media screen and (max-width: 980px) {
		#organizationArea {padding: 59px 39px;}
		#organizationArea h5 {left: 39px; font-size: 28px;}
		#organizationArea ul.flowBox > li.boardLine > ul.boardGroup > li.advisorsBox,
		#organizationArea ul.flowBox > li.boardLine > ul.boardGroup > li.directorsBox {width: 140px; font-size: 17px;}
		#organizationArea ul.flowBox > li.boardLine > ul.boardGroup > li.advisorsBox {left: calc(50% - 160px);}
		#organizationArea ul.flowBox > li.boardLine > ul.boardGroup > li.directorsBox {left: calc(50% + 20px);}
		#organizationArea ul.flowBox > li.departLine > ul.departGroup > li {padding: 0 5px;}
		#organizationArea ul.flowBox > li.departLine > ul.departGroup > li > .departName {font-size: 16px;}
		#organizationArea ul.flowBox > li.departLine > ul.departGroup > li > ul.departList > li {font-size: 13px;}
		#organizationArea ul.flowBox > li.departLine > ul.departGroup > li > ul.departList > li span {font-size: 11px;}
	}
	@media screen and (max-width: 660px) {
		#organizationArea {padding: 59px 39px;}
		#organizationArea h5 {top: 260px; left: calc(50% + 20px); height: 40px; line-height: 40px; font-size: 20px; text-align: left;}
		#organizationArea ul.flowBox > li.ceoLine > .ceoBox {width: 120px; height: 120px;}
		#organizationArea ul.flowBox > li.ceoLine > .ceoBox p.positionNameEng {padding-top: 35px; line-height: 20px; font-size: 14px;}
		#organizationArea ul.flowBox > li.ceoLine > .ceoBox p.positionNameKr {padding-top: 0; line-height: 25px; font-size: 20px;}
		#organizationArea ul.flowBox > li.boardLine {margin-top: 20px; padding: 0 10px;}
		#organizationArea ul.flowBox > li.boardLine > ul.boardGroup {padding-left: 20px;}
		#organizationArea ul.flowBox > li.boardLine > ul.boardGroup > li.rndBox {width: 180px; height: 40px; line-height: 40px; font-size: 16px;}
		#organizationArea ul.flowBox > li.departLine {margin-top: 40px; padding: 0 10px;}
		#organizationArea ul.flowBox > li.departLine > ul.departGroup {}
		#organizationArea ul.flowBox > li.departLine > ul.departGroup > li {float: none; width: 100%; padding: 0px 0px 20px 20px;}
		#organizationArea ul.flowBox > li.departLine > ul.departGroup > li:last-child {padding-bottom: 0;}
		#organizationArea ul.flowBox > li.departLine > ul.departGroup > li > .departName {float: left; width: 34%; height: 100px; line-height: 100px; font-size: 15px;}
		#organizationArea ul.flowBox > li.departLine > ul.departGroup > li > ul.departList {float: left; width: 66%; height: 100px;  padding: 11px 20px;}
		#organizationArea ul.flowBox > li.departLine > ul.departGroup > li > ul.departList > li {height: auto; line-height: 26px; font-size: 13px; text-align: left;}

		#organizationArea ul.flowBox > li.ceoLine > .ceoBox:before {bottom: -100px; height: 100px;}
		#organizationArea ul.flowBox > li.boardLine:before {position: absolute; bottom: -20px; left: 10px; display: block; width: calc(50% - 10px); height: 1px; line-height: 0; font-size: 0; content: ""; background-color: #eee; z-index: 1; transition: all 0.3s;}
		#organizationArea ul.flowBox > li.departLine:before {top: -20px; left: 10px; right: auto; margin: 0; width: 1px; height: calc(100% - 30px);}
		#organizationArea ul.flowBox > li.departLine > ul.departGroup > li:before {top: 50px; bottom: auto; left: 0; right: auto; margin: 0; width: 20px; height: 1px;}
	}
	@media screen and (max-width: 420px) {
		#organizationArea {padding: 59px 19px;}
		#organizationArea ul.flowBox > li.boardLine > ul.boardGroup > li.advisorsBox,
		#organizationArea ul.flowBox > li.boardLine > ul.boardGroup > li.directorsBox {width: 120px; font-size: 15px;}
		#organizationArea ul.flowBox > li.boardLine > ul.boardGroup > li.advisorsBox {left: calc(50% - 140px);}
		#organizationArea ul.flowBox > li.boardLine > ul.boardGroup > li.directorsBox {left: calc(50% + 20px);}
	}
	/* for about03 end */


	/* for about04 start */
	#about04Wrap {}
	.about04Section01 {}
	.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%; max-width: 640px; height: auto; padding-bottom: 40px;}
	.contactInfo > ul > li {position: relative; padding-bottom: 20px;}
	.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: 30px; 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: 980px) {
	}
	@media screen and (max-width: 660px) {
	}
	@media screen and (max-width: 420px) {
	}
	/* for about04 start */


	/* for product01 ~ 06 start */
	#productCommonWrap {}

	.product01Section01 {}
	/* for text detail view  start
	.product01Section01 .productTitleArea {display: block; width: 100%;}
	.product01Section01 .productTitleArea h4 {display: block; margin: 0 auto; width: 100%; height: 80px; box-sizing: border-box; padding: 0; line-height: 80px; font-size: 72px; font-weight: 900; color: #222; text-align: center; letter-spacing: -0.03em;}
	.product01Section01 .productTitleArea h4:before {display: none;}
	.product01Section01 .productTitleArea .productSubTitle {display: block; margin: 20px auto 0; width: 100%; height: 60px; box-sizing: border-box; padding: 0; line-height: 60px; font-size: 48px; font-weight: 900; color: #5cb0cc; text-align: center; letter-spacing: -0.03em;}
	.product01Section01 .productTitleArea .productSubInfo {display: block; margin: 0 auto; width: 100%; height: 40px; box-sizing: border-box; padding: 0; line-height: 40px; font-size: 30px; font-weight: 700; color: #aeb4bb; text-align: center; letter-spacing: -0.03em;}
	
	.product01Section01 .productImg {display: block; margin: 40px auto; width: 100%; max-width: 960px; box-sizing: border-box; border-radius: 30px; overflow: hidden;}
	.product01Section01 .productImg > img {display: block; width: 100%; height: auto; vertical-align: top;}

	.product01Section01 .productInfoBox {display: block; margin: 0 auto; width: 100%; max-width: 960px; box-sizing: border-box; padding: 40px 240px 40px 40px; border-radius: 30px; overflow: hidden; background: url('../img/ci_color.png') right 40px center no-repeat; background-color: #f9f9f9;}
	.product01Section01 .productInfoBox > p {margin: 0; padding: 0; letter-spacing: -0.03em; transition: all 0.3s;}
	.product01Section01 .productInfoBox > .infoTitle {width: 100%; line-height: 60px; font-size: 42px; font-weight: 700; color: rgba(0,104,158,1.0);}
	.product01Section01 .productInfoBox > .infoComment {margin-top: 10px; width: 100%; line-height: 30px; font-size: 18px; font-weight: 400; color: #777;}
	.product01Section01 .productInfoBox > .infoComment > strong {font-weight: 900; color: #222;}

	.product01Section01 .productBenefitsBox {display: block; margin: 40px auto 0; width: 100%; max-width: 960px; box-sizing: border-box; padding: 40px; border-radius: 30px; overflow: hidden; background-color: #f9f9f9; transition: all 0.3s;}
	.product01Section01 .productBenefitsBox > p {margin: 0; padding: 0; letter-spacing: -0.03em; transition: all 0.3s;}
	.product01Section01 .productBenefitsBox > .benefitsTitle {width: 100%; line-height: 40px; font-size: 32px; font-weight: 700; color: rgba(31,188,211,1.0);}
	.product01Section01 .productBenefitsBox > .benefitsComment {margin-top: 10px; width: 100%; line-height: 25px; font-size: 16px; font-weight: 400; color: #777;}
	.product01Section01 .productBenefitsBox > .benefitsComment > strong {font-weight: 900; color: #222;}
	.product01Section01 .productBenefitsBox > .benefitsComment > span {font-weight: 900; color: rgba(31,188,211,1.0);}

	.product01Section01 .productBenefitsBox > .productBenefitsGroup {display: block; margin-top: 20px; width: 100%;}
	.product01Section01 .productBenefitsBox > .productBenefitsGroup > li {float: left; width: 33.333333%; box-sizing: border-box; padding: 10px;}
	.product01Section01 .productBenefitsBox > .productBenefitsGroup > li > .benefitBox {display: block; width: 100%; border-radius: 10px; overflow: hidden; box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.2); background-color: #fff;}
	.product01Section01 .productBenefitsBox > .productBenefitsGroup > li > .benefitBox dl {display: block; width: 100%;}
	.product01Section01 .productBenefitsBox > .productBenefitsGroup > li > .benefitBox dl > dt {display: block; width: 100%; box-sizing: border-box; padding: 20px; line-height: 40px; font-size: 20px; font-weight: 900; text-align: center; color: #373f49; letter-spacing: -0.03em;}
	.product01Section01 .productBenefitsBox > .productBenefitsGroup > li > .benefitBox dl > dd {display: block; width: 100%; height: auto; min-height: 160px; box-sizing: border-box; padding: 20px; line-height: 20px; font-size: 15px; font-weight: 400; text-align: center; color: #fff; letter-spacing: -0.03em; background-color: #eeb63f; background-color: #c5b58f;}
	for text detail view  start */

	.product01Section01 h5 {margin: 40px auto 0 !important; max-width: 960px; padding: 0;}
	.product01Section01 h6 {margin: 20px auto 0; max-width: 960px;}
	.product01Section01 table {max-width: 1200px;}
	.product01Section01 table td {text-align: center;}

	.product02Section01 {}
	.product03Section01 {}
	.product04Section01 {}
	.product05Section01 {}
	.product06Section01 {}

	@media screen and (max-width: 980px) {
		/* for text detail view  start
		.product01Section01 .productTitleArea h4 {height: 60px; line-height: 60px; font-size: 48px;}
		.product01Section01 .productTitleArea .productSubTitle {margin: 10px auto 0; height: 40px; line-height: 40px; font-size: 32px;}
		.product01Section01 .productTitleArea .productSubInfo {height: auto; line-height: 20px; font-size: 17px;}

		.product01Section01 .productImg {margin: 20px auto; border-radius: 20px;}

		.product01Section01 .productInfoBox {padding: 30px 30px 110px; border-radius: 20px; background-position: center bottom 40px;}
		.product01Section01 .productInfoBox > .infoTitle {line-height: 40px; font-size: 32px; text-align: center;}
		.product01Section01 .productInfoBox > .infoComment {line-height: 1.6em; font-size: 15px; text-align: center;}

		.product01Section01 .productBenefitsBox {margin: 20px auto 0; padding: 30px; border-radius: 20px;}
		.product01Section01 .productBenefitsBox > .benefitsTitle {line-height: 30px; font-size: 24px; text-align: center;}
		.product01Section01 .productBenefitsBox > .benefitsComment {line-height: 1.6em; font-size: 14px; text-align: center;}

		.product01Section01 .productBenefitsBox > .productBenefitsGroup > li {float: left; width: 50%;}
		.product01Section01 .productBenefitsBox > .productBenefitsGroup > li > .benefitBox dl > dt {line-height: 20px; font-size: 18px;}
		.product01Section01 .productBenefitsBox > .productBenefitsGroup > li > .benefitBox dl > dd {min-height: 140px; font-size: 14px;}
		for text detail view  end */
	}
	@media screen and (max-width: 660px) {
		/* for text detail view  start
		.product01Section01 .productTitleArea h4 {height: 50px; line-height: 50px; font-size: 42px;}
		.product01Section01 .productTitleArea .productSubTitle {height: 30px; line-height: 30px; font-size: 24px;}
		.product01Section01 .productTitleArea .productSubInfo {height: auto; line-height: 20px; font-size: 15px;}

		.product01Section01 .productBenefitsBox > .productBenefitsGroup > li {float: none; width: 100%; padding: 5px;}
		.product01Section01 .productBenefitsBox > .productBenefitsGroup > li > .benefitBox dl > dt {padding: 10px; line-height: 20px; font-size: 18px;}
		.product01Section01 .productBenefitsBox > .productBenefitsGroup > li > .benefitBox dl > dd {padding: 10px; min-height: 0; font-size: 13px;}
		for text detail view  end */
	}
	/* for product01 ~ 06 end */






	/* for facilities01 start */
	#facilities01Wrap {}
	.facilities01Section01 {}
	.facilities01Section01 .asiaMapArea {display: block; margin: 20px auto; width: 100%; height: auto; box-sizing: border-box; border: 1px #eee solid; padding: 39px;}
	.facilities01Section01 .asiaMapArea img {width: 100%;}
	.facilities01Section01 .subTitle01 {margin-top: 20px; font-size: 20px; font-weight: 300; color: #666; letter-spacing: -0.02em;}
	.facilities01Section01 .subTitle01 span {font-weight: 700; color: #222;}
	.facilities01Section01 .subTitle02 {margin-top: 0; font-size: 14px; font-weight: 300; color: #666;}

	.facilities01Section01 .processGroup {display: block; margin: 0 auto; width: 100%;}
	.facilities01Section01 .processGroup > li {display: block; width: 100%; box-sizing: border-box; padding: 10px 0;}
	.facilities01Section01 .processGroup > li .processBox {position: relative; display: block; width: 100%; box-sizing: border-box; padding: 39px 39px 39px 139px;; border: 1px #eee solid; border-radius: 30px; overflow: hidden; background-color: #fff;}
	.facilities01Section01 .processGroup > li .processBox .stepBox {position: absolute; top: 0; left: 0; width: 80px; height: 80px; line-height: 80px; font-size: 32px; font-weight: 500; font-family: Georgia, "Times New Roman", Times, serif; color: #fff; text-align: center; background-color: #ddd;}
	.facilities01Section01 .processGroup > li .processBox dl.stepInfo {width: calc(100% - 440px);} 
	.facilities01Section01 .processGroup > li .processBox dl.stepInfo dt {width: 100%; line-height: 40px; font-size: 30px; font-weight: 700; color: #222; letter-spacing: -0.03em;}
	.facilities01Section01 .processGroup > li .processBox dl.stepInfo dd {margin-top: 20px; width: 100%; line-height: 1.6em; font-size: 15px; font-weight: 300; color: #999; letter-spacing: -0.03em;}
	.facilities01Section01 .processGroup > li .processBox .stepImg {position: absolute; bottom: 0; right: 40px; width: 440px; height: 200px; background-position: center center; background-size: cover; background-repeat: no-repeat;}
	.facilities01Section01 .processGroup > li:nth-child(1) .processBox .stepImg {background-image: url('../img/imgProcess01_step01.jpg');}
	.facilities01Section01 .processGroup > li:nth-child(2) .processBox .stepImg {background-image: url('../img/imgProcess01_step02.jpg');}
	.facilities01Section01 .processGroup > li:nth-child(3) .processBox .stepImg {background-image: url('../img/imgProcess01_step03.jpg');}
	.facilities01Section01 .processGroup > li:nth-child(4) .processBox .stepImg {background-image: url('../img/imgProcess01_step04.jpg');}
	.facilities01Section01 .processGroup > li:nth-child(5) .processBox .stepImg {background-image: url('../img/imgProcess01_step05.jpg');}

	.facilities01Section01 .processGroup > li:nth-child(1) .processBox .stepBox {background-color: rgba(125,167,217,1.0);}
	.facilities01Section01 .processGroup > li:nth-child(2) .processBox .stepBox {background-color: rgba(68,140,203,1.0);}
	.facilities01Section01 .processGroup > li:nth-child(3) .processBox .stepBox {background-color: rgba(0,114,188,1.0);}
	.facilities01Section01 .processGroup > li:nth-child(4) .processBox .stepBox {background-color: rgba(0,74,128,1.0);}
	.facilities01Section01 .processGroup > li:nth-child(5) .processBox .stepBox {background-color: rgba(0,54,99,1.0);}

	@media screen and (max-width: 980px) {
		.facilities01Section01 .processGroup > li .processBox {padding: 39px 39px 39px 89px;}
		.facilities01Section01 .processGroup > li .processBox .stepBox {width: 60px; height: 80px; line-height: 80px; font-size: 24px;}
		.facilities01Section01 .processGroup > li .processBox dl.stepInfo {width: calc(100% - 330px);}
		.facilities01Section01 .processGroup > li .processBox dl.stepInfo dt {font-size: 24px;}
		.facilities01Section01 .processGroup > li .processBox dl.stepInfo dd {font-size: 14px;}
		.facilities01Section01 .processGroup > li .processBox .stepImg {right: 20px; width: 330px; height: 150px;}
	}
	@media screen and (max-width: 820px) {
		.facilities01Section01 .processGroup > li .processBox dl.stepInfo {width: calc(100% - 220px);}
		.facilities01Section01 .processGroup > li .processBox .stepImg {top: 0; bottom: 0; right: 20px; margin: auto 0; width: 220px; height: 100px;}
	}
	@media screen and (max-width: 660px) {
		.facilities01Section01 .processGroup > li .processBox {padding: 29px 29px 29px 89px;}
		.facilities01Section01 .processGroup > li .processBox .stepBox {width: 60px; height: 60px; line-height: 60px; font-size: 24px;}
		.facilities01Section01 .processGroup > li .processBox dl.stepInfo {width: 100%;}
		.facilities01Section01 .processGroup > li .processBox dl.stepInfo dt {font-size: 24px;}
		.facilities01Section01 .processGroup > li .processBox dl.stepInfo dd {font-size: 13px;}
		.facilities01Section01 .processGroup > li .processBox .stepImg {position: relative; top: auto; bottom: auto; left: auto; right: auto; margin: 20px auto 0; width: 100%; max-width: 440px; height: auto; aspect-ratio: 440 / 200;}
	}
	@media screen and (max-width: 420px) {
		.facilities01Section01 .processGroup > li .processBox {padding: 19px 19px 19px 59px;  border-radius: 20px;}
		.facilities01Section01 .processGroup > li .processBox .stepBox {width: 40px; height: 50px; line-height: 50px; font-size: 20px;}
		.facilities01Section01 .processGroup > li .processBox dl.stepInfo dt {font-size: 20px;}
		.facilities01Section01 .processGroup > li .processBox dl.stepInfo dd {margin-top: 10px; font-size: 12px;}
	}






	/* for recipes01 start */
	#recipesCommonWrap {}
	#recipes01Wrap ul.tabMenuArea {margin-top: 60px;}
	#recipes01Wrap .subTitleArea {margin-top: 40px;}

	.recipes01Section01 {}

	@media screen and (max-width: 980px) {
		#recipes01Wrap ul.tabMenuArea {margin-top: 0;}
		#recipes01Wrap .selectTab {margin-top: 60px;}
	}
	/* for recipes01 end */

	/* for support01 ~ 02 start */
	#supportCommonWrap {}
	.support01Section01 {}
	.support02Section01 {}
	@media screen and (max-width: 660px) {
	}

	/* for support01 ~ 02 end */