@charset "utf-8";

#subVisual {display:flex; align-items: center; justify-content: center; height:500px; background-color:#000; background-image:url('../img/sub/sub01Bg.jpg'); background-position:center; background-size:cover; color:#fff; padding-top:100px;}
#subVisual h2 {font-size:50px; letter-spacing:-0.05em; font-family:'JejuMyeongjo',sans-serif; text-align:Center;}
#subVisual.sub01 {background-image:url('../img/sub/sub01Bg.jpg');}
#subVisual.sub02 {background-image:url('../img/sub/sub02Bg.jpg');}
#subVisual.sub03 {background-image:url('../img/sub/sub03Bg.jpg');}
#subVisual.sub04 {background-image:url('../img/sub/sub04Bg.jpg');}
#subVisual.sub05 {background-image:url('../img/sub/sub05Bg.jpg');}
#subVisual.sub06 {background-image:url('../img/sub/sub06Bg.jpg');}

	@media screen and (max-width:1419px){
	}

	@media screen and (max-width:1199px){
		#subVisual {height:400px;}
		#subVisual h2 {font-size:44px;}
	}

	@media screen and (max-width:999px){
		#subVisual {height:300px; padding-top:80px;}
		#subVisual h2 {font-size:220%;}
	}

	@media screen and (max-width:799px){
		#subVisual {height:250px;}
		#subVisual h2 {font-size:200%;}
	}

	@media screen and (max-width:499px){
		#subVisual h2 {font-size:180%;}
	}

#subContent {margin-top:90px;}
#subContent .container {display:flex; align-items: flex-start;}

	@media screen and (max-width:999px){
		#subContent {margin-top:70px;}
		#subContent .container {flex-direction: column;}
	}

	@media screen and (max-width:799px){
		#subContent {margin-top:50px;}
	}

	@media screen and (max-width:499px){
		#subContent {margin-top:30px;}
	}


/* ====================== 왼쪽 메뉴 ====================== */
#subLeftMenu {width:300px; background:url('../img/sub/wave02.png') #0c6153 right calc(100% - 10px) no-repeat; margin-right:40px; padding-bottom:140px;}
#subLeftMenu h2 {padding:61px 0; text-align:center; background:url('../img/sub/wave01.png') rgba(0,0,0,0.25) left calc(100% - 10px) no-repeat;}

#subLeftMenu ul.leftMenu {color:#fff;}
#subLeftMenu ul.leftMenu > li > a.nav-button {display:block; padding:22px 30px; font-size:20px; font-weight:600; cursor:pointer;}

	@media screen and (max-width:1199px){
		#subLeftMenu ul.leftMenu > li > a.nav-button {font-size:18px;}
	}

/* =========== 2차 메뉴 =========== */
#subLeftMenu ul.leftMenu > li {}
#subLeftMenu ul.leftMenu > li > ul.subMenu {display:none;}
#subLeftMenu ul.leftMenu > li > ul.subMenu > li > a {display:block; padding:8px 30px; font-size:16px;}
#subLeftMenu ul.leftMenu > li > ul.subMenu > li > a:before {position:relative; display:inline-block; margin-right:5px; opacity:0; content:'-';}

	@media screen and (max-width:1199px){
		#subLeftMenu ul.leftMenu > li > ul.subMenu > li > a {font-size:14px;}
	}


/* active */
#subLeftMenu ul.leftMenu > li.active {background:rgba(0,0,0,0.1);}
#subLeftMenu ul.leftMenu > li.active > a.nav-button {background:rgba(0,0,0,0.2);}
#subLeftMenu ul.leftMenu > li.active > ul.subMenu > li {}
#subLeftMenu ul.leftMenu > li.active > ul.subMenu {display:block; padding:10px 0;}
#subLeftMenu ul.leftMenu > li.active > ul.subMenu > li.active > a:before {opacity:1;}

/* =========== 3차 메뉴 =========== */
#subLeftMenu ul.leftMenu > li > ul.subMenu > li > ul.subMenu2 {display:none !important; margin-top:10px; padding:0 18px;}
#subLeftMenu ul.leftMenu > li > ul.subMenu > li > ul.subMenu2 > li {padding:0 30px; font-size:14px; margin:8px 0;}
#subLeftMenu ul.leftMenu > li > ul.subMenu > li > ul.subMenu2 > li > a:before {position:relative; display:inline-block; margin-right:5px; opacity:0; content:'·';}
#subLeftMenu ul.leftMenu > li > ul.subMenu > li > ul.subMenu2 li.active {background:none;}

/* active */
#subLeftMenu ul.leftMenu > li > ul.subMenu > li.active > ul.subMenu2 {display:block !important;}
#subLeftMenu ul.leftMenu > li > ul.subMenu > li.active > ul.subMenu2 li {padding:0;}
#subLeftMenu ul.leftMenu > li > ul.subMenu > li.active > ul.subMenu2 li.active > a:before {opacity:1;}

/* =========== 제품소개 메뉴 =========== */
#subLeftMenu ul.leftMenu > li.submenu02 > ul.subMenu {padding:10px 0;}
#subLeftMenu ul.leftMenu > li.submenu02 > ul.subMenu > li:nth-child(1).active {margin-top:-10px; margin-bottom:10px;}
#subLeftMenu ul.leftMenu > li.submenu02 > ul.subMenu > li:nth-child(2).active {margin-top:10px;  margin-bottom:10px;}
#subLeftMenu ul.leftMenu > li.submenu02 > ul.subMenu > li:nth-child(3).active {margin-top:10px; margin-bottom:-10px;}

/* active */
#subLeftMenu ul.leftMenu > li.submenu02.active > ul.subMenu > li.active {padding:20px 30px; background:rgba(0,0,0,0.3);}
#subLeftMenu ul.leftMenu > li.submenu02.active > ul.subMenu > li.active > a {padding:0;}

	@media screen and (max-width:1619px){
		#subLeftMenu {width:250px;}
	}

	@media screen and (max-width:1199px){
		#subLeftMenu {width:220px;}
	}

	@media screen and (max-width:999px){
		#subLeftMenu {display:none;}
	}

#subRightCont {width:calc(100% - 340px); background:#f8f8f8; padding:85px 60px 150px; min-height:900px;}

	@media screen and (max-width:1619px){
		#subRightCont {width:calc(100% - 250px); padding:85px 3% 150px;}
	}

	@media screen and (max-width:1199px){
		#subRightCont {width:calc(100% - 220px);}
	}

	@media screen and (max-width:999px){
		#subRightCont {width:100%; padding:65px 5%; min-height:inherit;}
	}


#subTab1Box {width:100%; display:none;}
#subTab1Box .subTabUl {display:flex; margin-bottom:15px;}
#subTab1Box .subTabUl li {display:flex; align-items: center; justify-content: center; font-size:17px; color:#999; font-weight:500; text-align:center; min-width:120px; height:40px; border:1px solid; border-color:rgba(153,153,153, 0.25); border-radius:20px; overflow:hidden; margin:0 5px; word-break:keep-all;}
#subTab1Box .subTabUl li:first-child {margin-left:0;}
#subTab1Box .subTabUl li a {display:block; width:100%; padding:0 15px;}
#subTab1Box .subTabUl li.on {background:#0d6e5e; border-color:rgba(13,110,94, 0.25); color:#fff;}
#subTab1Box .subTabUl li.on a {}

	@media screen and (max-width:1199px){
		#subTab1Box .subTabUl li {font-size:16px;}
	}

	@media screen and (max-width:999px){
		#subTab1Box {display:flex; justify-content: center;}
		#subTab1Box .subTabUl li {font-size:103%;}
	}

	@media screen and (max-width:799px){
		#subTab1Box .subTabUl li {font-size:98%;}
	}

	@media screen and (max-width:499px){
		#subTab1Box .subTabUl li {font-size:93%;}
	}

#subContent h3#contentTitle {position:relative; font-size:32px; font-weight:600; color:#000; margin-bottom:60px; text-align:center;}
#subContent h3#contentTitle:after {position:relative; display:block; width:60px; height:1px; margin:0 auto; margin-top:20px; background:#0c6153; content:'';}
#subContent .contentWrap {}
#subContent .contentWrap #bo_gall {animation:fadeInDown 1s both;}

	@media screen and (max-width:1419px){
	}

	@media screen and (max-width:1199px){
		#subContent h3#contentTitle {font-size:28px;}
	}

	@media screen and (max-width:999px){
		#subContent h3#contentTitle {font-size:160%; margin-bottom:50px;}
	}

	@media screen and (max-width:799px){
		#subContent h3#contentTitle {font-size:140%; margin-bottom:40px;}
	}

	@media screen and (max-width:499px){
		#subContent h3#contentTitle {font-size:120%; margin-bottom:30px;}
	}