#block_02 {width:100%; }
#block_02 h3 {font-size:30px; font-weight:500; letter-spacing:-1px; padding:0 0 20px 16px; position:relative; color:#B9A07C; }
#block_02 h3::before {content:""; height:35px; width:4px; background-color:#B9A07C; position:absolute; top:6px;  left:0px; }
#block_02 p.txtP { line-height:30px; }
#block_02 div.icoBox {overflow:hidden; margin:10px 0 60px 0;}
#block_02 section a
{display:block; font-size:18px; letter-spacing:-1px; padding:40px 20px 40px 20px; text-align:center; border:8px solid #f0ebe3; 
border-radius:10px; margin:1% 1%; width:31%; box-sizing:border-box; float:left; }

#block_02 section a:hover span.detail{background-color:#333; color:#fff; box-sizing:border-box; }
#block_02 section a span.detail {display:block; background-color:#f0f0f0; color:#888; width:150px; margin:10px auto 0 auto; padding:2px 0 4px 0; font-size:12px;}
#block_02 div.icoBox2 {overflow:hidden; margin:10px 0; font-size:18px; letter-spacing:-1px;}

#block_02 div.icoBox2 section 
{display:block; padding:20px 20px; text-align:center; border:8px solid #f0ebe3;
border-radius:10px; margin:1% 1%; width:97%; box-sizing:border-box; float:left; }


#block_03 {width:100%; }
#block_03 h3 {font-size:30px; font-weight:500; letter-spacing:-1px; padding:0 0 20px 16px; position:relative; color:#B9A07C; }
#block_03 h3::before {content:""; height:35px; width:4px; background-color:#B9A07C; position:absolute; top:6px;  left:0px; }
#block_03 p.txtP { line-height:30px; }
#block_03 p.txtM { line-height:30px; font-size:23px; color:#38565F; font-weight:600; padding-bottom:2%;}
#block_03 div.icoBox {overflow:hidden; margin:10px 0 60px 0;}
#block_03 section a
{display:block; font-size:18px; letter-spacing:-1px; padding:40px 20px 40px 20px; text-align:left; border:2px solid #f0ebe3; 
border-radius:10px; margin:1% 1%; width:98%; box-sizing:border-box; float:left; }
#block_03 section img
{display:block; font-size:18px; letter-spacing:-1px; padding:0px; text-align:left; 
border-radius:10px; margin:0; width:50%; box-sizing:border-box; float:left; }

#block_03 section a:hover span.detail{background-color:#333; color:#fff; box-sizing:border-box; }
#block_03 section a span.detail {display:block; background-color:#f0f0f0; color:#888; width:150px; margin:10px auto 0 auto; padding:2px 0 4px 0; font-size:12px;}
#block_03 div.icoBox2 {overflow:hidden; margin:10px 0; font-size:18px; letter-spacing:-1px;}

#block_03 div.icoBox2 section 
{display:block; padding:20px 20px; text-align:center; border:8px solid #f0ebe3;
border-radius:10px; margin:1% 1%; width:97%; box-sizing:border-box; float:left; }



/* ÇÁ·Î¼¼½º */
.production-con02{margin-top: 120px;}
.production-line-con{position: relative; width: 100%; height: 719px; background: url("/bizdemo122501/img/hblock/etc/intro_01/img/production_line.png") 0 0 no-repeat;}
ul.production-down-list{}
ul.production-down-list li{position: absolute; width: 33.33%;}
ul.production-down-list li > div{position:relative; width: 100%; text-align:center;}

/* À§Ä¡ Á¶Á¤ */
ul.production-down-list li.li-01{top: 0; left: 15px;}
ul.production-down-list li.li-02{top: 0; left: 33.33%;}
ul.production-down-list li.li-03{top: 0; left: 66.66%;}
ul.production-down-list li.li-04{top: 355px; left: 15px;}
ul.production-down-list li.li-05{top: 355px; left: 33.33%;}
ul.production-down-list li.li-06{top: 359px; left: 66.66%;}
ul.production-down-list li.li-07{top: 718px; left: 15px;}
ul.production-down-list li.li-08{top: 718px; left: 33.33%;}

/* num */
.production-down-list li .num{position:absolute; top:-36px; left: 0; display:inline-block; text-align: center; width: 100%; width: 100%; font-size: 20px; color: #222; letter-spacing: -0.5px; -moz-transition: color 0.5s ease-out; -ms-transition: color 0.5s ease-out; -o-transition: color 0.5s ease-out; transition: color 0.5s ease-out;}

/* dot */
.production-down-list li .dot{
	display:block; position:absolute; top:0; margin-top: -4.5px; left:50%; width:9px; height:9px; margin-left:-4.5px; background-color: #b9a07c; border-radius:50%; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
.production-down-list li .dot:before{position: absolute; top: 50%; margin-top: -9.5px; left: 50%; margin-left: -9.5px; display: block; content: ''; width: 15px; height: 15px; border: 2px solid #22b1bc; border-radius:50%; opacity: 0; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}

/* dot¹Ø ÅØ½ºÆ®¿µ¿ª */
.production-down-list li .txt-con{padding-top: 40px;}
.production-down-list li .m-txt-con{display: none;}

/* ¾ÆÀÌÄÜ */
.production-down-list li .icon{display: inline-block; height: 47px;}
.production-down-list li .icon img{height: 100%;}

/* ÅØ½ºÆ® */
.production-down-list li .tit{padding-top: 20px; width: 100%; text-align: center; font-weight:400; bottom: 0; left: 0; color:#222; font-size:24px; letter-spacing:-0.5px;}
.production-down-list li .txt{padding-top: 10px; font-size: 18px; line-height: 25px; font-weight: 400; letter-spacing: -0.5px; color: #666;}

/* active */
.production-down-list li.active .dot{background-color:#0ba9b5;}
.production-down-list li.active .dot:before{opacity: 1;}



/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1023px) {
#block_02 section a {width:48%;}
#block_02 div.icoBox2 section {width:48%;}
.production-line-con{position: static; margin-left: 25px; width: calc(100% - 25px); height: auto; background: none;}
	ul.production-down-list li{position: relative; width: 100%;}
	ul.production-down-list li:before{position: absolute; top: 0; left: 0; display: block; content: ''; width: 1px; height: 100%; background-color: #ddd;}
	ul.production-down-list li > div{padding: 0 0 60px; position:static; width: 100%;}

	/* À§Ä¡ Á¶Á¤ */
	ul.production-down-list li.li-01, ul.production-down-list li.li-02, ul.production-down-list li.li-03, ul.production-down-list li.li-04, ul.production-down-list li.li-05, ul.production-down-list li.li-06, ul.production-down-list li.li-07, ul.production-down-list li.li-08{top: 0; left: 0;}

	/* dot */
	.production-down-list li .dot{display:block; position:absolute; top:0; margin-top: 0; left:0; width:9px; height:9px; margin-left:-4.5px;}

	/* dot¹Ø ÅØ½ºÆ®¿µ¿ª */
	.production-down-list li .txt-con{display: none;}
	.production-down-list li .m-txt-con{display: block;}

	/* num */
	.num-icon{display: inline-block; width: 120px; vertical-align: top;}
	.production-down-list li .num.pc-num{display: none;}
	.production-down-list li .num{position:static; display:inline-block; text-align: center; padding-bottom: 25px;}

	/* ¾ÆÀÌÄÜ */
	.production-down-list li .icon{display: inline-block; width: 120px; height: 47px;}

	/* ÅØ½ºÆ® */
	.tit-txt{display: inline-block; width: calc(100% - 150px); padding-left: 20px; vertical-align: top; text-align: left;}
	.production-down-list li .tit{padding-top: 0; width: 100%; text-align: left;}
	.production-down-list li .txt{padding-top: 10px; font-size: 15px; line-height: 25px; -ms-word-break: keep-all; word-break: keep-all;}
	.production-down-list li .txt br{display: none;}

	.production-down-list li.active .num{color:#0ba9b5;}


#block_03 section img {width:98%}

}
@media (max-width: 768px) {


}
@media (max-width: 640px) {
#block_02 section a {width:98%;}
#block_02 div.icoBox2 section {width:98%;}	

}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}

