@charset "UTF-8";

/* Page Title */

h2.guide {width:1240px; margin:0 auto;    text-align:Center; margin-top:80px; font-size:35px; font-weight:700; color:#333; border-bottom:1px solid #ddd; padding-bottom:10px; margin-bottom:10px; }

#sub section.wrap {width:1240px; margin:0 auto; padding:0px 0 ;   }
/*#sub section.company  {  margin-top:-20px; }*/

#sub  .img_box {width:100%; height:400px; overflow:hidden;}

@font-face {
    font-family: 'Jal_Onuel';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/Jal_Onuel.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.box_100 {width:100%; float:left;}
div.text h3 {font-size:32px; text-transform:uppercase ; font-weight:800; color:#333; width:100%;  }
div.text h4 {font-size:28px; line-height:1.35em;  font-weight:700; color:#333; width:100%;  }
div.text h5 {font-size:20px;  line-height:1.3em; font-weight:600; color:#333; width:100%;  }
div.text  {font-size:17px; font-weight:400; color:#555; width:100%;  display:inline-block; margin:30px 0; }
div.text b  {font-weight:600 !important; color:#333; }

.text_01 {font-size:17px; color:#555; font-weight:400; line-height:1.35em;}


.text_02 {font-size:18px; color:#444; font-weight:400; line-height:1.4em;}
.text_03 {font-size:20px; color:#333; font-weight:400; line-height:1.45em;}

.span_tit {font-weight:600; color:#333; font-size:18px;}

.f_500 {font-weight:500}
.f_600 {font-weight:600; color:#333;}

/*회사소개 company*/
ul.company_ul {width:100%; display:inline-block;  margin-top:20px;}
ul.company_ul li {text-align:Center; width:32.3%; margin-right:1%;box-sizing:border-box; padding:30px 2%; height:210px;  display:inline-block; border:1px solid #ddd; vertical-align:top; font-size:1em}
ul.company_ul li b {font-size:1.25em; color:#333; font-weight:600; width:100%; display:inline-block; margin-bottom:5px;}
ul.company_ul li:last-child {float:right; margin:0;}


/* 연혁 */
.history_ul { width:100%; float:left; margin-top:30px; border-top:1px solid #333;}
.history_ul li ul li:first-child { width:25%; float:left; padding:16px 0; font-size:24px; line-height:1.05em; background:#d0e3b7; border-bottom:1px dashed #ddd;}
.history_ul li ul li:last-child  { width:75%; float:right;   padding:16px 0;font-size:17px; color:#555; border-bottom:1px dashed #ddd; text-align:left; padding-left:30px; box-sizing:border-box;}


/* 동글 이미지 */
.circle_img_ul {width:75%;  display:block; }
.circle_img_ul li{ float:left; width:25%; text-align:center; }
.circle_img_ul li img{ border-radius:50%; }

/* 사각 이미지 */
.ract_img_ul {width:90%;  display:block; }
.ract_img_ul li {width:30%; float:left; margin-right:3.8%;}
.ract_img_ul li img {width:100%; border:1px solid #ddd;   box-sizing:border-box;}
.ract_img_ul li:last-child {margin-right:0;}



/*회사연혁*/
.accordion .tab-label:hover, .accordion input:checked + .tab-label:hover {
    background: #2891ed;
	width:100%;
    color: #fff;
}

/* Accordion styles */
.accordion {
    overflow: hidden;
}

.accordion .tab ~ .tab {

}

.accordion .tab {
    width: 100%;
    overflow: hidden;
}

.accordion .tab-label {
    counter-increment: accordion;
    display: flex;
    ajustify-content: space-between;
    padding: 1em;
    cursor: pointer;
    transition: all 0.3s;
	width:100%;
}

.accordion .tab-label span {
    flex-grow: 1;
	font-size:22px;
	font-weight:600
}

.accordion .tab-label::before {
    /*content: counter(accordion) ".";
    font-weight: bold;
    margin-right: 0.5em;
    color: #1177d1;*/
}

.accordion .tab-label:hover::before {
    color: #000;
}

.accordion .tab-label::after {
    content: "\276F";
    width: 1em;
    height: 1em;
    flex-basis: 3em;
    text-align: center;
    transition: all 0.3s;
}

.accordion .tab-content {
    max-height: 0;
    padding: 0 1em;
    background: #fff;
    transition: all 0.3s;
    overflow: auto;
}

.accordion input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.accordion input:checked + .tab-label {
    background: #1177d1;
    color: #fff;

}

.accordion input:checked + .tab-label::before {
    color: #000;
}

.accordion input:checked + .tab-label::after {
    transform: rotate(90deg);
}

.accordion input:checked ~ .tab-content {
    max-height: 100vh;
    padding: 1em;
}



.news_list{
	list-style:none;
	padding:0;
	margin-top:20px;
}
.news_list li{
	float:left;
	width:32%;
	padding-left:24px;
	padding-bottom:20px;
}

.news_list li:nth-child(1), .news_list li:nth-child(4){
	float:left;
	width:32%;
	padding-left:0;
}

.news_list li .news-background{background:#f9f9f9; box-shadow:1px 2px 5px rgba(0,0,0,0.1); height:600px;}
.news_list li .news-content{padding:30px; box-sizing:border-box; position:relative; }
.news_list li .news-content p{color:#666}

button.b3 {
   display:block;
   width:100%;
   font-weight:500;
   border:solid 1px #ddd;
	border-radius:6px;
	padding:12px 0;
	display:block;
	text-align:center;
	margin-top:20px;
	color: #666;
	background:#fff;
	border-radius: 5px;
	cursor: pointer;
	font-size:16px;
	position: relative;
	z-index: 1;
}


.b3:before {
  content: "";
  width: 0;
  height: 100%;
  position: absolute;
  background-color: #555;
  right: 0;
  top: 0;
  transition: 0.5s;
  z-index: -1;
}
.b3:hover:before {
  width: 100%;
  right: auto;
  left: 0;
}


.b3:hover span{color:#fff;}

.news_list li .news-content h2 a{
	color:#555;
	margin-bottom:10px;
	display:block;
	line-height:1.2em;
	font-size:20px;
}
.news_list li .news-content h2 a:hover{
	color:#333; text-decoration:underline;
}

.news_list li .blog-thumb{
	height:300px;
	background:#fff;
}