@charset "utf-8";
/* CSS Document */

.mainContent {
  font-family: 'Noto Sans KR';
}

p{
	font-weight: 100;
	line-height: 1.5;
	margin: 0;
	font-size: 1.1rem;
	color:white;
  text-align: justify;}


/* contants  */
.mainContent #com_box {
    width: 100%;
    padding-top: 3rem;
    display: inline-block;
    font-size: 16px;}

#com_box h2{
	font-weight: 500 !important;
	line-height: 1.5;
	margin: 0;}

#com_box h5{
	line-height: 2;
	margin: 0;
  display: inline;
  border-bottom: 1px solid #353535;
  padding-bottom: 3px;
  font-weight: 600;
	transition: font-weight .1s ease;
}

#com_box h5:hover{
	font-weight: 800;
}

#com_box ul.box_ul {
	display:flex;
	flex-wrap: wrap;
	margin-bottom: 1px;
}
#com_box ul.box_ul > li {
	width: 25%;
	box-sizing: border-box;
	margin-left: 0px;
	margin: 0px;
	text-align: center;
}

#com_box ul li {
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
  margin-left: -1rem;
  color:#000000;
  line-height: 1.5;
  text-align: justify;
  word-break : break-all;
	/*font-weight: 300;*/
	font-weight: 500;
	hyphens: auto;
}

#com_box ul li::marker {
	font-size: 0.8125em;
}

#com_box p {
	font-weight: 100;
	line-height: 1.5;
	margin: 2px 0;
  color: black;
}

#com_box .bbb {
	border: #353535 20px solid;
}
#com_box img {
	max-width: 100%;
	height: auto;
}


.transformer-tabs ul {
  list-style: none;
  padding: 0;
  margin: 0;

}
.transformer-tabs li {

  display:inline-block;
  padding: 1px;
  vertical-align: bottom;
  text-align: center;



}
.transformer-tabs li:nth-child(1) .active {

}
.transformer-tabs li:nth-child(2) .active {

}
.transformer-tabs li:nth-child(3) .active {

}
.transformer-tabs li:nth-child(4) .active {

}

.transformer-tabs li:nth-child(5) .active {

}



.transformer-tabs a {
  display: block;
  /*display:inline-block;*/
  background: white;
  overflow: hidden;
  border: 5px solid white;


}
.transformer-tabs img { margin: -5px; }

.transformer-tabs a.active {
  border: 5px #fcad24 solid;
  position: relative;
  bottom: 0;
  margin: 0px;
}

.tabs > div {
  display: none;
	width: 100%;
  padding: 3rem;
  overflow: overlay;
}

.tabs > div:nth-of-type(1) { background: #fdba30;}
.tabs > div:nth-of-type(2) { background: #fdba30;}
.tabs > div:nth-of-type(3) { background: #fdba30;}
.tabs > div:nth-of-type(4) { background: #fdba30;}
.tabs > div:nth-of-type(5) { background: #fdba30;}
.tabs > div:nth-of-type(6) { background: #fdba30;}
.tabs > div:nth-of-type(7) { background: #fdba30;}
.tabs > div:nth-of-type(8) { background: #fdba30;}
.tabs > .active {
	display: block;
}

#com_box .pro_tit {
	font-family: 'Noto Sans KR',sans-serif !important;
	line-height: 2;
	margin: 0;
	display: inline;
	border-bottom: 1px solid #353535;
	padding-bottom: 3px;
	color: #212529;
	font-size: 1.25rem;
}

.btn_pro span {padding:0px 22px; }

.btn_pro .bg_link {
	background: url(../images/sales/ico_down.png) no-repeat right 8px;
	padding: 0px 25px 0px 0px;
	font-weight: 600;
	/*transition: all 0.2s ease; */
	transition: font-weight .02s ease;
}
.btn_pro .bg_link:hover { font-weight: 800; }


/*  SECTIONS  ============================================================================= */

.section1 {
	padding: 0px;
	margin: 0px;
}

.section1 h2{ color: black;}

/*  GROUPING  ============================================================================= */

.group1:before,
.group1:after {
    content:"";
    display:table;}
.group1:after {
    clear:both;}
.group1 {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */}

/*  GRID COLUMN SETUP   ==================================================================== */

.col1 {
  display: block;
	float:left;
	margin: 4% 0;}


.col2 {
	display: block;
	float:left;
	margin: 1% 0% ;
	font-color:black;}

.col2 p{

	color:black;
	font-weight:400;
	margin: 5% 0 0 0;
  text-align: left;}

.col2 h2{

	color:white;
	font-weight:400;}



.col2 a:hover {
	color: black;
	font-family: 'Noto Sans KR', sans-serif !important; }

.col2 a {
	color: black;
	font-size: 1.1rem;
	font-family: 'Noto Sans KR', sans-serif !important; }



.col1:first-child { margin-left: 0%; } /* all browsers except IE6 and lower */


.span_1_of_2 { }
.span_2_of_2 {	width: 45%; margin-left: 9%; }
.span_2_of_2 > div { text-align: center; }


.span3_of_2 {	width: 70%;}
.span32_of_2 {	width: 24%; margin-left: 4%; }



/*===============================================================================================*/


/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */

@media screen and (min-width: 320px) and (max-width:576px){

	div.row {
		width: 96%;
		margin: 0 auto;
	}

  .title_l { text-align: center; }
  .title_l h2 { color: white; }
  .title_l img { width: 20px; }

  #com_box .section1 h2 { color:black;}

  #com_box h5 {
		line-height: 1;
		margin: 0;
		display: inline;
		border-bottom: 1px solid #353535;
		padding-bottom: 1px;
		font-size: 1rem;
	}

  #com_box .pro_tit {
		line-height: 1;
		margin: 0;
		display: inline;
		border-bottom: 1px solid #353535;
		padding-bottom: 1px;
		font-size: 1.25rem;
		text-align: center;
	}

  .btn_pro .bg_link {
		background: url(../images/sales/ico_link.png) no-repeat right 5px; padding: 0px 30px 0px 0px;
	}

#com_box p {
	font-weight: 100;
	line-height: 0.5;
	margin: 2px 0;
	color: black;
	}

#com_box .bbb { border: #353535 10px solid;}


  .section1 {
		padding: 0px;
    margin-top: -10px;
	}

  .tabs > div {
  display: none;
  padding: 1rem;
    overflow: overlay;}

 .transformer-tabs img {
   max-width: 97%;
   margin: 0px;}

 .transformer-tabs li {
   float:left;

   list-style:none;
   width:50%;
   margin-bottom:-7px;
	}

 	.col1 {
		margin: 1%;
	}

/*  GRID OF TWO   ============================================================================= */

.col1:first-child { margin-left: unset; }
.col1 { float: none; text-align: left; }


.span_2_of_2 {
	width: 85%;
  margin: 0 auto;
	float: none;
}

.span_1_of_2 {
	width: 100%;
  margin-left: 0%;
	text-align: center;
}


.span_0_of_2 {
	width: 100%;
}

.span3_of_2 {
	width: 100%;
}
.span32_of_2 {
	width: 100%;

}

.span4_of_2 {
	height:auto;
	width: 100%;

}

.span4_of_2 {
	width: 100%;
}
.span5_of_2 {
	height:auto;
	width: 100%;

}

#sys li {
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
  margin-left: -1rem;
  color:#353535;
  line-height: 1.5;
  text-align: justify;
  word-break : break-word;
  float: left;
  width: 50%;
  margin-right:16px;
	hyphens: auto;
}

.mainContent {
		width: 100%;
		margin: 0 auto;
	}
	.mainContent #com_box {
			width: 100%;
			padding-top: 0rem;
			display: inline-block;
			color: white;
			font-size: 16px;
		}

  #com_box ul.box_ul {
		flex-wrap: wrap;
	}
  #com_box ul.box_ul > li {
		margin-bottom: 0px;
		margin-top:0px;
	}

	#com_box h2 {
		font-weight: 300;
		line-height: 1.5;
		margin: 10px 0;
		font-size:1.2rem;
		color:white;
	}

	p {
		font-weight: 100;
		line-height: 1.5;
		margin-top: 0;
		font-size: 1.1rem;
		color:white;
		text-align: justify;
		word-wrap : break-word;
	}

}

/*===============================================================================================*/

@media screen and (min-width: 577px) and (max-width: 767px){

	div.row {
		width: 96%;
		margin: 0 auto;
	}

	div.tabs > div { padding: 2vw; }

	.span_1_of_2 { margin: 0 auto; text-align: center; }
	.span_2_of_2 { width: 66%; margin: 30px auto; }
	/*.span_2_of_2 > div { text-align: left; }*/

	#com_box ul li { word-break: break-all; }
	#com_box .bbb { border-width: 10px; }

	.col1 { float: none; }
	.col1:first-child { margin-left: unset; }

}

/*===============================================================================================*/

@media screen and (min-width: 768px) and (max-width: 1199px){

	.span_1_of_2 { width: 50%; }
	.span_2_of_2 { width: 45%; margin-left: 5%; }

}