@charset "utf-8"; 

/********Sub Layout & Common ********/
.sub {width:100%; overflow-x:hidden;}


/*  �� */
.quick {position:Absolute; right:0px; top:90px;  width:380px;  height:380px; z-index:50; transform:rotate(90deg); }
.quick li {display:block; width:172px;    float:left;  background:#13a1a9 url('../images/common/icn_quick01.png') no-repeat 10px center ; -moz-transition:all 300ms; -o-transition:all 300ms; -ms-transition:all 300ms;transition:all 300ms; }
.quick li.btn02 { margin-left:1px;  background:#0eaf96 url('../images/common/icn_quick01.png') no-repeat 10px center ;}
.quick li a {display:block;  height:50px; line-height:50px;color:#fff; padding-left:60px; }
.quick li:hover {opacity:0.8; -moz-transition:all 300ms; -o-transition:all 300ms; -ms-transition:all 300ms;transition:all 300ms; }

.chatbot {position:fixed; right:10px; bottom:20px;   z-index:50;  }


@media all and (max-width:768px){
	/*  �� */
	.quick {position:Absolute; right:0px; top:57px;  z-index:10;  }
	.chatbot {position:fixed; right:10px; bottom:20px;   z-index:10;  }
}

@media all and (max-width:768px){
	.sub:after {height:300px; line-height:30px; width:300px; text-align:center;  left:0; top:5%; color:#fff; z-index:10;   transform:rotate(-90deg); opacity:0.5;  font-size:0.7em;}
}

/******************************* ���� ����� *******************************/
/* ���� :: ���־� */
.visual_section {position:Relative; border:0px solid red;   width:95%; height:345px;   padding:0px; margin:90px auto 0 auto; overflow-y:hidden;}

.visual-img {position:relative; width:100%; height:100%; overflow:hidden;  padding:0px; margin:0; }
.visual-img .slick-list  .slick-slide {position:Relative; width:100%; height:345px;  padding:0px; margin:0px; }
.visual-img .visual-item {position:relative; width:100%; height:345px;  padding:0px;  overflow:hidden;   display:block;  margin:0px; }
.visual-img .visual-item > .img-area {z-index:1; position:absolute; left:0px; top:0px; width:100%; height:100%; display:block;}
.visual-img .visual-item > .img-area.m_bg01 {background: url('../images/sub/sub_visual01.jpg') no-repeat center; background-size:cover; } 
.visual-img .visual-item > .img-area.m_bg02 {background: url('../images/sub/sub_visual02.jpg') no-repeat center; background-size:cover; } 
.visual-img .visual-item > .img-area.m_bg03 {background: url('../images/sub/sub_visual03.jpg') no-repeat center; background-size:cover; } 
.visual-img .visual-item > .img-area.m_bg04 {background: url('../images/sub/sub_visual04.jpg') no-repeat center; background-size:cover; } 
.visual-img .visual-item > .img-area.m_bg05 {background: url('../images/sub/sub_visual05.jpg') no-repeat center; background-size:cover; } 

.visual-top {position:Absolute; top:50%; transform:translateY(-50%);  left:10%; width:80%; z-index:10; height:345px; display:table;  text-align:Center; }
.visual-inner-txt{ color:#fff;  display:table-cell; vertical-align:middle; }
.visual-inner-txt h2,.visual-img .visual-inner-txt  p {display:block;  -moz-transition:all 0.5s;	-ms-transition:all 0.5s;	transition:all 0.5s;}
.visual-inner-txt h2 { transition-delay:0.2s; font-family:'GmarketSansBold'; font-size:2.8em; line-height:1em; }
.visual-inner-txt p {transition-delay:0.4s; padding:20px 0 0; font-size:1.2em; word-break:keep-all;}


@media all and (max-width:1100px){
	.visual-inner-txt p {font-size:1.1em;}
	.visual-inner-txt p br {display:none; }

}
@media all and (max-width:1000px){
	/* ���� :: ���־� */
	.visual_section {position:Relative; border:0px solid red;   width:100%; height:345px;   padding:0px; margin-top:57px; overflow-y:hidden;}

	.visual-top {position:Absolute; top:50%; transform:translateY(-50%);  left:5%; width:80%; z-index:10; height:345px; display:table;   }
	.visual-inner-txt h2 { transition-delay:0.2s; font-family:GmarketSansBold; font-size:2.2em; line-height:1em; }
	.visual-inner-txt p {transition-delay:0.4s;  padding:15px 0 0; font-size:1em; }

}


/******************************* ���� ���̾ƿ� *******************************/
#subBody {margin:4em 0;  min-height:500px;}
.wrap {margin:0 auto; width:94%; max-width:1500px;}
#contents {position:relative; margin-top:40px;}
.sub_menu {position:relative;float:left;width:260px;z-index:1;margin-top: -140px;}
.inner_container {position:relative;float:right;width:calc(100% - 309px);padding:0 0 40px 0;z-index:10;overflow:hidden;}

@media all and (max-width:1200px) {
	.inner_container { position:relative; float:none; width:100%; }
	#subBody {margin:2em 0;  min-height:500px;}
}



/*====================�����޴�==================== */

/* == 1�� �޴� == */
.lm_tt {position:relative;width:100%;height: 170px;padding-top: 60px;background: url("../images/sub/side_title.gif") no-repeat;background-size:cover;color:#fff;}
.lm_tt strong { display:block; text-align:Center; font-weight:600; font-size:2em;}

/* == 2�� �޴� == */
.lm_1d { position:relative;  }
.lm_1d > li {position:relative;min-height:54px;border-bottom:1px solid #cccccc;}
.lm_1d > li > a { display:block; padding:16px 18px 16px 22px; line-height:24px; }
.lm_1d > li a[onclick="leftToggle(this);"]:hover {background:#0eaf96; color:#fff; font-weight:500;  transition: all 300ms ease-in-out; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out;  }
.lm_1d > li.on a {position:relative;background:#0eaf96;  color:#fff; }
.lm_1d > li a[onclick="leftToggle(this);"]:before {content:'';display:block;position:absolute;top:20px;right:18px;width:12px;height:12px;background:url("../images/sub/tm_depth.png") no-repeat left -240px;}
.lm_1d > li.on {border-bottom:1px solid #0eaf96;}
.lm_1d > li a[onclick="leftToggle(this);"]:hover:before,
.lm_1d > li.on a[onclick="leftToggle(this);"]:before {content:'';display:block;position:absolute;top:20px;right:18px;width:12px;height:12px;background:url("../images/sub/tm_depth.png") no-repeat left -260px;}

/* == 3�� �޴� == */
.lm_1d > li > .lm_2d {background: 0;padding: 15px;border-bottom: 0;border-left: 0;border-right: 0;}
.lm_1d > li > .lm_2d > li { position:relative; padding:3px 0; }
.lm_1d > li > .lm_2d > li > a { display:block; margin:0 2px; padding:2px 0 2px 12px; color:#828282; font-size:16px; line-height:24px; border:0; }
.lm_1d > li > .lm_2d > li > a:before{content:''; position:absolute; left:3px; top:11px; background:#3d3d3d; width:4px; height:4px; border-radius:20px;}
.lm_1d > li > .lm_2d > li > a:hover{ background:none !important; color:#0eaf96;  }
.lm_1d > li.on > .lm_2d > li > a {background:none;  color:#000; }
.lm_1d > li.on > .lm_2d > li > a:hover{ color:#0eaf96; font-weight:500;}
.lm_1d > li > .lm_2d > li.on > a {border:0;}
.lm_1d > li > .lm_2d > li.on > a,
.lm_1d > li > .lm_2d > li.on > a:hover { color:#0eaf96; font-weight:500;}
.lm_1d > li.on > .lm_2d > li > a:hover:before,
.lm_1d > li > .lm_2d > li.on > a:before{content:''; position:absolute; left:3px; top:11px; background:#0eaf96; width:4px; height:4px; border-radius:20px;}
.lm_1d > li > a:hover,
.lm_1d > li > .lm_2d > li > a:hover { text-decoration:none; }

/* == 4�� �޴� == */
.lm_1d > li > .lm_2d > li > .lm_3d { margin:5px 0; padding:6px 16px; background:#fff; border:1px solid #e0e0e0; }
.lm_1d > li > .lm_2d > li > .lm_3d > li { position:relative; padding:4px 0; }
.lm_1d > li > .lm_2d > li > .lm_3d > li > a { display:block; line-height:22px; font-size:15px; padding:0 0 0 12px; border:0; word-break:keep-all;  }
.lm_1d > li > .lm_2d > li > .lm_3d > li > a:hover { background:none !important; color:#000; }

.lm_1d > li > .lm_2d > li > .lm_3d > li > a:before {content:''; position:absolute; left:0; top:12px; background:url("../images/sub/lm_3d_icon_off.png") no-repeat center left; width:7px; height:7px; }
.lm_1d > li > .lm_2d > li > .lm_3d > li.on > a,
.lm_1d > li > .lm_2d > li > .lm_3d > li.on > a:hover{ background:none !important; color:#000; font-weight:500;}



@media screen and (max-width:1200px){
	.sub_menu {float:none; width:100%;margin-bottom:1em;  display:none;}
	.lm_tt  {display:none;}
	.lm_1d {float:left;  width:100%; }
	.lm_1d > li {display:block; width:33.3%; float:left; min-height:auto; margin-right:-1px; box-sizing:border-box;}
	.lm_1d > li > a {padding:10px 0px; text-align:center;  font-size:1em; }
}






/* =========== 1.���������� Ÿ��Ʋ �� �׺���̼� =========== */
.title_w { position:relative; width:100%; padding:0; z-index:10; }
.title_w .title { position:relative; padding:0px 0 13px 0px; color:#121212; font-size:2em; font-weight:600; line-height:42px; }
.title_w .title span {position:relative; }

.location_w { position:absolute; right:0; top:10px; width:50%; }
.location_w .location { float:right; }
.location_w span { display:block; float:left; padding:10px 6px;  font-size:15px; line-height:20px; }
.location_w .home { width:40px; padding:10px 0; background:#13a1a9 url("../images/common/ico_home.png") no-repeat center; color:transparent; text-indent:-99999px;  border-radius:40px;}
.location_w .last { color:#121212; }
.location_w span em.arr { float:right; display:inline-block; margin-left:19px; width:19px; height:19px; background:url("../images/common/next.gif") no-repeat right top; background-size:auto 15px; }
.location_w .home em.arr { display:none; }

h3 {position:relative; font-size:1.8em; font-weight:600; line-height:1em; color:#222; margin-top:1.5em; margin-bottom:0.5em; padding-left:20px;}
h3:before {position:Absolute; display:block; width:40px; height:30px; left:0; top:0; content:""; background:url("../images/sub/title_icn.gif") no-repeat;}
h3.first {margin-top:0;}

	@media all and (max-width:640px) {
		h3 {font-size:20px;}
	}

h4 {position:relative; font-size:18px; font-weight:500; line-height:24px; color:#2099b5; margin-top:1.5em; margin-bottom:0.5em; padding-left:15px;}
h4:before {position:Absolute; display:block; width:40px; height:30px; left:0; top:4px; content:""; background:url("../images/sub/title_icn01.png") no-repeat;}
h4.first {margin-top:0;}

h5 {position:relative; font-size:18px; font-weight:500; line-height:24px; color:#000; margin-top:1.5em; margin-bottom:0.5em; padding-left:15px;}
h5:before {position:Absolute; display:block; width:3px; height:15px; left:0; top:4px; content:""; background:#3d3d3d;}
h5.first {margin-top:0;}

.conlist01 {position:relative; margin:20px 0 0 10px;}
.conlist01 li {position:relative; margin-bottom:10px; padding-left:10px;}
.conlist01 li:before {content:''; position:absolute; left:0; top:9px; width:5px; height:5px; background:#13a1a9; border-radius:5px;}


.conlist02 {position:relative; margin:20px 0 0 10px;}
.conlist02 li {position:relative; margin-bottom:10px; padding-left:15px;}
.conlist02 li:before {content:''; position:absolute; left:0; top:9px; width:8px; height:2px; background:#545454;}

.conlist03 {position:relative; margin:20px 0 0 50px;}
.conlist03 li {position:relative; margin-bottom:10px; padding-left:10px;}
.conlist03 li:before {content:''; position:absolute; left:0; top:9px; width:5px; height:5px; background:#13a1a9; border-radius:5px;}

.line {border-bottom:1px dashed #d4d4d4; padding-bottom:20px;}
.indent {margin:30px 0 0 20px; }

.st_text {background:#003d7c; padding:3px 10px; color:#fff; margin-top:20px; display:inline-block; border-radius:5px;}

@media all and (max-width:1200px) {
	.title_w { position:relative; width:100%; padding:0; z-index:10; text-align:center;}
	.title_w .title { position:relative; padding:20px 0 13px 30px; font-size:2em; }

	.location_w { position:relative; right:0; top:0; width:100%;  height:30px; text-align:center;}
	.location_w .location { float:none;  width:auto;}
	.location_w .home {display:none;}
	.location_w span { display:inline-block; float:none; padding:5px 6px;  font-size:15px; line-height:20px; }
	

}



/*====================������ ==================== */
/***** ������� �Ұ� view ������ *****/
 .cate label {padding:5px 10px;  display:inline-block; margin-bottom:3px; font-size:0.9em;}

/** ������� �Ұ�  ������&ȸ���ּ� **/
.board_com_title {position:Relative; margin-bottom:3em; }
.board_com_title .com_img {position:Relative; width:100%; height:30em; overflow:hidden;  display:block;  text-indent:-9999em; background-size:cover !important; }
.board_com_title .com_txt {position:Absolute; bottom:-50px; right:30px;  width:400px;  background-color:#fff; padding:40px; box-shadow:1px 5px 15px rgba(0,0,0, 0.1); }
.board_com_title .com_txt h1 {font-size:1.8em; font-weight:600; margin-bottom:1em;  color:#13a1a9;}
.board_com_title .com_txt p {position:relative; margin-left:30px; margin-bottom:5px; font-size:0.9em; line-height:1.5em; word-break:keep-all;}
.board_com_title .com_txt p i {position:Absolute; left:-30px; display:block;   opacity:0.5; font-size:1.4em; }

/** ������� �Ұ�  ������� �� **/
.board_com_info dl {float:left; width:21%; padding:30px 2%; text-align:Center;  }
.board_com_info dl dt {font-weight:500; font-size:1.2em; color:#222; }
.board_com_info dl dt i {display:block; margin:0 auto 20px auto;; width:70px; height:70px; line-height:70px; background-color:#4cb66f; border-radius:50%; color:#fff; }
.board_com_info dl:nth-child(2n) dt i {background-color:#13a1a9;}
.board_com_info dl dd {margin-top:1em; word-break:keep-all;}
.board_com_info video {position:relative; background-color:#000;  max-height:400px;}

/** ������� �ֿ���ǰ �����̵� **/
.com_product_list {position:relative; width:100%; padding-top:30px; }
.com_product_list .visual-item {position:Relative; border:1px solid #ededed; padding:25px 20px; box-sizing:border-box;   transition: all 300ms ease-in-out; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out;  }
.com_product_list .visual-item:hover {box-shadow:1px 5px 15px rgba(0,0,0, 0.2);  transition: all 300ms ease-in-out; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out;  }
.com_product_list .visual-item .cate {position:Relative; height:30px; display:block; }
.com_product_list .visual-item .p_name {position:Relative; margin-top:0.5em; font-size:1.4em; height:60px; font-weight:600; color:#222;   line-height:30px;  overflow:hidden;   text-overflow:ellipsis;   white-space:nowrap;}
.com_product_list .visual-item .img {position:Relative; width:100%; height:240px; overflow:hidden; background-color:#ededed;  }
.com_product_list .visual-item img {max-width:100%; min-height:100%;}
.com_product_list .visual-item .txt {position:Relative; margin-top:1em; font-size:1.1em; height:30px; line-height:30px;  overflow:hidden;   text-overflow:ellipsis;   white-space:nowrap;}

.com_product  .in  {position: relative; margin:0px auto; max-width: 1500px; }
.com_product  .in .control_box  {position:Absolute; left:10px; top:10px; }
.com_product  .in .control_box  .btn_stop  {position:Absolute; left:70px; top:0px;}
.com_product  .in .control_box  .btn_play  {position:Absolute; left:70px; top:0px;}
.com_product  .btn_stop  { width:20px; height:20px;     background: url(../images/main/slick_btn.png) no-repeat -100px -2px ; font-size:0px;}
.com_product  .btn_play  { width:20px; height:20px;     background: url(../images/main/slick_btn.png) no-repeat -150px -2px ; font-size:0px;}
.com_product_list  .slick-prev  {position:Absolute; left:60px; top:10px; width:20px; height:20px;    background: url(../images/main/slick_btn.png) no-repeat -75px -2px ; }
.com_product_list  .slick-next  {position:Absolute; left:100px; top:10px; width:20px; height:20px;    background: url(../images/main/slick_btn.png) no-repeat -125px -2px ; }




@media all and (max-width:768px) {
	/***** ������� �Ұ� view ������ *****/
	/** ������� �Ұ�  ������&ȸ���ּ� **/
	.board_com_title {position:Relative; margin-bottom:3em; }
	.board_com_title .com_img {position:Relative; width:100%;  height:20em; }
	.board_com_title .com_txt {position:relative; bottom:0; right:0;  width:90%;  background-color:#fff; padding:30px 5%; box-shadow:1px 5px 15px rgba(0,0,0, 0.1); }
	.board_com_title .com_txt h1 {font-size:1.8em; font-weight:600; margin-bottom:1em;  color:#13a1a9;}
	.board_com_title .com_txt p.info {font-size:0.9em; line-height:1.5em; text-align:justify;}

	/** ������� �Ұ�  ������� �� **/
	.board_com_info dl {float:left; width:48%; padding:15px 1%; }
}


@media all and (max-width:500px) {
	/** ������� �Ұ�  ������� �� **/
	.board_com_info dl {float:none; width:100%; padding:15px 0; }

|