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

p{
	font-family: 'Noto Sans KR',sans-serif !important;
	font-weight: 100;
	line-height: 1.5;
	margin: 0;
	font-size: 1.1rem;
	color:white;
  text-align: justify;}


/* contants  */

.mainContent { width: 100%; }
.mainContent #com_box {
    width: 100%;
    padding-top: 3rem;
    paading-left: 3%;
    display: inline-block;
    font-family: 'Noto Sans KR',sans-serif !important;
    font-size: 16px;}

#com_box h2{
	font-family: 'Noto Sans KR',sans-serif !important;
	font-weight: 800;
	line-height: 1.5;
	margin: 0;}

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

#com_box p{



	font-family: 'Noto Sans KR',sans-serif !important;
	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: 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;
  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 > .active { display: block;}


/*  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 {	width: 55%; }
.span_2_of_2 {	width: 40%; margin-left: 4% }


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



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



@media screen and (max-width: 700px)
.mainContent #com_box {
    width: 100%;
    padding-top: 1rem;
    paading-left: 3%;
    display: inline-block;
    color: white;
    font-family: 'Noto Sans KR',sans-serif !important;
    font-size: 16px;
}

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

@media screen and (max-width:576px){
		.mainContent { width: 95%; margin: 0 auto; }
		.mainContent #com_box {
				width: 100%;
				padding-top: 0rem;
				paading-left: 3%;
				display: inline-block;
				color: white;
				font-family: 'Noto Sans KR',sans-serif !important;
				font-size: 16px;
			}

		#com_box h2{


			font-family: 'Noto Sans KR',sans-serif !important;
			font-weight: 300;
			line-height: 1.5;
			margin: 10px 0;
			font-size:1.2rem;
			color:#212529;

		}

			 p{


			font-family: 'Noto Sans KR',sans-serif !important;
			font-weight: 100;
			line-height: 1.5;
			margin-top: 0;
			font-size: 1.1rem;
			color:white;
			text-align: justify;
			word-wrap : break-word;

		}

		}



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

		@media screen and (max-width:576px){
			.title_l{ text-align: center;
		}
			.title_l h2{ color: white;
		}


			.title_l img{ width: 20px;}

			#com_box .section1 h2{ color:black;}

			#com_box h5{

			font-family: 'Noto Sans KR',sans-serif !important;
			line-height: 1;
			margin: 0;
			display: inline;
			border-bottom: 1px solid #353535;
			padding-bottom: 1px;
			font-size: 1rem;}

		.main_si #com_box h2{ text-align: center; font-weight: 800; }




		#com_box p{
				font-family: 'Noto Sans KR',sans-serif !important;
			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   ============================================================================= */


		.span_2_of_2 {
			width: 92%;
			margin-left: 3%;}

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


		.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;
			font-family: 'Noto Sans KR',sans-serif !important;
			text-align: justify;
			word-wrap : break-word;
			float: left;
			width: 50%;
			margin-right:16px;

		}

 }