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

/* with03 버튼 */
a.bt {background:#EE2E35; padding:0 15px; line-height:37px; font-size:.93rem;   color:#fff !important; display:inline-block; border-radius:3px; border:1px solid #EE2E35; transition: all 0.3s ease-out; }
a.bt:hover {background-color:#fff; border:1px solid #EE2E35; color:#EE2E35 !important; }
a.bt.color2 {background-color:#333; border:1px solid #333}
a.bt.color2:hover {background-color:#fff; border:1px solid #333; color:#333 !important; }


img.rendering[src$=".gif"], img.rendering[src$=".png"], img.rendering[src$=".jpg"] {
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
}

  

.m_block {display:none}
.pc_none {display:none;}


.if_map {width:50%; float:left;}
.factory_img {width:50%; height:330px; background:#ddd; text-align:center; float:right;}

.sub_con_menu {width:100%; float:left; border-bottom:1px solid #ddd; box-sizing:border-box;}
.sub_con_menu ul{position:relative; width:100%; margin:0 auto; text-align:center;
overflow-x: auto; overflow-y: hidden; white-space: nowrap;
}
.sub_con_menu li {position:relative; display:inline-block; vertical-align:top; margin:0 10px}
.sub_con_menu li:last-child {margin-right:0}
.sub_con_menu li a {position:relative; font-weight:300; font-size:1.2em; letter-spacing:-0.5pt; color:#888; display:block;  line-height:65px; height:65px; text-align:center; padding:0 20px; box-sizing:border-box; transition: all 0.3s ease-out; display:flex; justify-content:center; align-items:center; box-sizing:border-box;}
.sub_con_menu li a:after{position:absolute;; display:block; bottom:-1px; left:0; content:""; overflow:hidden; width:0; height:2px; background:#c00; transition: all 0.3s ease-out;}
.sub_con_menu li a:hover{color:#c00; text-decoration: none; transition: all 0.3s ease-out;}
.sub_con_menu li a:hover:after{width:100%; transition: all 0.3s ease-out;}

#sub_con_menu_wrap { z-index:999 !important; width:100%; position:relative;  background:#fff; transition: all 0.2s ease-out;}
#sub_con_menu_wrap .ov{display:block; color:#c00 !important; font-weight:700 !important; text-decoration: none}
#sub_con_menu_wrap .ov:after{width:100% !important; transition: all 0.3s ease-out;}




.textbox1 {font-size:0.97rem; line-height:1.3em; color:#555; font-weight:400}
.textbox2 {font-size:1.02rem; line-height:1.4em;color:#555; font-weight:400}
.textbox3 {font-size:1.1rem; line-height:1.5em; color:#555;font-weight:400}
.textbox4 {font-size:1.1rem; line-height:1.5em;color:#555; font-weight:400}
.textbox4  b {font-size:1.2em; line-height:1.5em;}

.textbox5 {font-size:1.4rem !important; line-height:1.5em; color:#333 !important;}
.textbox6 {font-size:1.64rem !important; line-height:1.6em; color:#333 !important;}
.textbox7 {font-size:1.72rem !important; line-height:1.6em; color:#333 !important;}
.textbox22 {font-size:2.25rem !important; line-height:1.4em; color:#333 !important;}

.textbox3 b {font-size:1.3em;  line-height:1.3em; font-weight:500; color:#333}



.about_img {display:block;}
.m_about_img {display:none;}




 .t_c {text-align:center !important;}
.f500 {font-weight:500}
.color_wh {color:#fff !important}
.span_br {display:block}

.in {width:100%; max-width:1500px; margin:0 auto; }


/* pc에서 안보이고 모바일에서 모바일 이미지로 바뀌게 */
/*pc이미지 */
.pc_block_m_none {display:block}
/* 모바일이미지 */
.pc_none_m_block {display:none}





.sub_vi {position:relative;display:block;width:100%; display:inline-block; background-color:#f1f1f1; text-align:center; box-sizing:border-box;  height:330px; }


.sub_vi01 {background:url('/common/img/sub/sub01_vi.png') no-repeat center; }
.sub_vi02 {background:url('/common/img/sub/sub02_vi.jpg') no-repeat center; }
.sub_vi03 {background:url('/common/img/sub/sub03_vi.jpg') no-repeat center; }
.sub_vi04 {background:url('/common/img/sub/sub04_vi.jpg') no-repeat center; }


.sub_vi  div {width:100%; height:100%; position:absolute; top:0; left:0;}
.sub_vi p {font-size:1.35rem; font-weight:500;  color:#fff ; position:absolute; top:50%; left:50%; transform: translate(-50%, 0);  letter-spacing:0px;   width:100%; padding:0 5%; box-sizing:border-box; text-shadow:2px 2px 3px rgba(0,0,0,.4); }
.sub_vi p b {display:block; font-family: 'Montserrat'; margin-bottom:12px; color:#fff; font-size:2.5rem; font-weight:700;  letter-spacing:1px;  }

i.fa-home {font-size:20px}

h2.guide {width:100%;  font-size:2.4rem; font-weight:700; color:#333; display:inline-block; padding:80px 0 20px 0; border-bottom:0px solid #ddd; margin-bottom:40px; text-align:center;}

nav.sub_menu { width:100%;   background: #fff;  border-bottom:1px solid #ddd; border-top:1px solid #ddd;  box-sizing:border-box; float:left; margin-top:-5px}
nav.sub_menu div {max-width:1240px; width:100%; margin:0 auto;  box-sizing:border-box;  }
nav.sub_menu ul {font-size:0;padding:0;  border-left:1px solid #ddd;  box-sizing:border-box}

nav.sub_menu ul li {
  display: inline-block; width:200px; text-align:left;  vertical-align:top;
  position: relative;   height:48px; border-right:1px solid #ddd; box-sizing:border-box;
}

nav.sub_menu ul li a {
   display: inline-block;
  font-size: 1em; padding-left:20px;   box-sizing:border-box;
  line-height:48px; width:100%;
  transition: 0.3s linear;
}

nav.sub_menu ul li:hover { background: #c00;  }
nav.sub_menu ul li:hover a {color:#fff;}

nav.sub_menu ul li a span {float:right; font-size:6px; margin-right:15px; color:#ddd}
nav.sub_menu ul li:hover a span {color:#fff}

nav.sub_menu ul li ul {
   display: none;
   box-sizing:border-box;  border-bottom:1px solid #ddd;
  width: 100%;  position:relative; z-index:9999999999
}

nav.sub_menu ul li ul li {
 border-top:1px solid #ddd;  background: #fff;
  display: block; height:40px;
}

nav.sub_menu ul li ul li a {
  display:inline-block; font-size:1em; font-weight:400;
 line-height:40px; color:#777 !important;
}

nav.sub_menu ul li ul li:hover { background: #f9f9f9;  }
nav.sub_menu ul li ul li a:hover { background: #f9f9f9; color:#004274 !important; }

nav.sub_menu ul li.home {width:50px; text-align:Center; }
nav.sub_menu ul li.home a {padding-left:0;}


.content {width:100%; display:inline-block;  box-sizing:border-box; padding-bottom:5%}

.ceo div span b {font-size:2rem;     font-family: 'ROEHOE-CHAN';}
.t1 {font-size:1.5rem;  line-height:1.3em; color:#333; font-weight:700; }

.pc_block {display:block;}

/* 연혁 */
.history_ul {width:100%; float:left; border-top:1px solid #333; padding-top:30px;}
.history_ul li.year {width:15%; float:left;  }
.history_ul li.cont {width:85%; float:left;	border-bottom:1px solid #ddd; margin-bottom:22px; padding-bottom:22px; font-size:1.05em; font-weight:500; font-family:"Noto Sans KR" !important; color:#666}

.history_ul li h3{font-size:2em; font-weight:600}
.history_ul li .date{font-size:0.92em; background:#c00; color:#666; border-radius:20px; padding:5px 12px; color:#fff; display:inline-block; margin-right:10px}

/* 바이어 소개 */
.customer_ul  {width:100%; display:flex;   flex-wrap:wrap}
.customer_ul li {   text-align:center; margin-bottom:15px; border:1px solid #ddd;  box-sizing:border-box; margin-bottom:15px; box-sizing:border-box; padding:20px}
.customer_ul li img {width:100%;}

@media all and (min-width:800px) {
	.customer_ul li { width:15.5%;  margin-right:1.4%;  }
	.customer_ul li:nth-child(6n) {  margin-right:0}

}
@media all and (max-width:800px) {
	 .customer_ul li {width:32%; margin-right:2%}
     .customer_ul li:nth-child(3n) {  margin-right:0}

}

.h3_maptit {width:200px; float:left;  text-align:center; background:#333; color:#fff; line-height:42px; border-radius:10px 10px 0 0}
.map_line {width:35px; height:2px; background:#c00; margin-bottom:8px; }

.map_ul {width:100%;}
.map_ul li{width:49%; float:left; }
.map_ul li:last-child{ float:right; }
.map_ul li h4{ font-size:1.2em;}
.map_ul li b{ font-weight:600;}
.map_bg {padding:15px; box-sizing:border-box; width:100%;  border:1px solid #ddd; border-radius:5px}
.map_bg div {width:100%; border-bottom:1px solid #ddd; padding:8px 0; display:flex; align-items:center;   }
.map_bg div:first-child {  padding-top:0 }
.map_bg div:last-child {border-bottom:0;  padding-bottom:0 }
.map_bg div * {line-height:1.4em; }
.map_bg div p:nth-child(1) {width:95px; display:flex; align-items:Center; }
.map_bg div p:nth-child(1) i {width:30px}
.map_bg div p:nth-child(2) { width:calc(100% - 95px);   font-size:1rem; color:#444}
.map_bg div p:nth-child(2) b {font-weight:500}
.map_ul.type2  li {width:100%}

@media all and (min-width:1200px) {
  .map_ul.type2 .map_bg  {display:flex}
  .map_ul.type2 .map_bg div {border-bottom:none; padding:0; width:auto; padding-right:3%}
  .map_ul.type2 .map_bg div p {width:auto}
  .map_ul.type2  .map_bg div p:nth-child(1) {width:80px}

   }



@media all and (max-width:800px) {
   .map_ul li{width:100%; float:left;  }

   .map_ul li:nth-child(2){margin-top:30px }
   .map_bg div p:nth-child(2) { font-size:0.95rem;  }

  .map_ul li h4{ font-size:1.05em;}
  .root_daum_roughmap {height:200px !important}
 
 }

 

 .bus_icon {background:#50a232; padding:1px 10px;  color:#fff; display:inline-block; text-align:center; font-size:0.8em; font-weight:600;  border-radius:10px }



.product01_ul {width:100%;  display:flex; float:left; justify-content: space-between}
.product01_ul li {position:relative; width:32%;  text-align:center; padding:45px 30px; box-sizing:border-box; border-radius:30px 0; }
.product01_ul li img {background:#fff; border-radius:10%; padding:15px; box-sizing:border-box; margin-bottom:10px; transition: all 0.3s ease-out; border:1px solid #fff}
.product01_ul li:hover img {border:1px solid #0aa294 }
 .product01_ul li h3 {line-height:1.1em;  letter-spacing:-1.5px; transition: all 0.3s ease-out;  }
 .product01_ul li:hover h3 {color:#0aa294 }

.product01_ul li span {font-size:.70em; font-family: 'Montserrat'; color:#0aa294; letter-spacing:0}
.product01_ul .textbox2 {width:100%; display:inline-block; background:#fff; padding:30px 15px; box-sizing:border-box; color:#555; transition: all 0.3s ease-out; border-top:2px solid #0aa294 }

 .product01_ul li:hover .textbox2 {color:#333}

.product01_ul .line {width:1px; height:20px; margin:0;  background-color:#0aa294; display:inline-block; float:none; margin-bottom:-4px; margin-top:5px;  }
.product01_ul  li:nth-child(2) .line {background-color:#90c220}
.product01_ul  li:nth-child(3) .line {background-color:#ffa100}

.product01_ul  li:nth-child(2) span { color:#90c220;  }
.product01_ul  li:nth-child(3) span  {color:#ffa100; }

.product01_ul  li:nth-child(2):hover img {border:1px solid #90c220 }
.product01_ul  li:nth-child(3):hover img {border:1px solid #ffa100 }

.product01_ul  li:nth-child(2):hover h3 {color:#90c220 }
.product01_ul  li:nth-child(3):hover h3 {color:#ffa100 }

.product01_ul  li:nth-child(2) .textbox2 {border-top:2px solid#90c220 }
.product01_ul  li:nth-child(3) .textbox2 {border-top:2px solid#ffa100 }

/* .product01_ul li span {position:absolute;top:-15px;left:50%;
transform:translateX(-50%);background:#ddd; font-weight:500; font-size:1.2em; padding:5px 10px;}
 */
.product_bg1 {background:#e2f2f1}
.product_bg2 {background:#eef5dd}
.product_bg3 {background:#f8edd6}

.product_border1 {border:6px solid #0aa294}
.product_border2 {border:6px solid #60a10b}
.product_border3 {border:6px solid #e98c07}

.product_box {width:100%; float:left; position:relative}
.pd_line_1 {position:absolute; left:50%; bottom:0px; transform:translateX(-50%); background:#ddd; height:80px; width:2px; z-index:-5}

.product_ul_wrap  {width:100%; display:flex; float:left; justify-content: space-between; margin-top:40px;}
.product_ul_wrap>li {position:relative; width:31%; float:left;  box-sizing:border-box; }
.product_ul_wrap>li>ul>li:first-child{width:100%;  background:#0aa294; padding:15px 0; text-align:center; border-radius:10px 10px 0 0}
.product_ul_wrap>li>ul>li:first-child h3{color:#fff;}
.product_ul_wrap>li>ul>li:last-child{width:100%; float:left; background:#e2f2f1; padding:15px; box-sizing:border-box;}


.product_ul_wrap2  {width:100%; display:flex; float:left; justify-content: space-between; margin-top:40px;}
.product_ul_wrap2>li {position:relative; width:23%; float:left;  box-sizing:border-box; }
.product_ul_wrap2>li>ul>li:first-child{width:100%;  background:#60a10b; padding:15px 0; text-align:center; border-radius:10px 10px 0 0}
.product_ul_wrap2>li>ul>li:first-child h3{color:#fff;}
.product_ul_wrap2>li>ul>li:last-child{width:100%; float:left; background:#eef5dd; padding:15px; box-sizing:border-box;}



.garo_line {  position:relative; width:70%; display:block; margin:0 auto; height:2px; background:#ddd; }
.garo_line_sero_top { position:absolute; height:67px; margin-top:-68px; background:#ddd; width:2px; display:block; }
.garo_line_sero { position:absolute; height:40px; background:#ddd; width:2px; display:block; }


.product_tit_circle {width:300px; height:300px; border-radius:50%;display:block; text-align:center; margin:0 auto;  background:#fff;}
.product_tit_circle img {margin-top:80px}



.icons_box {width:100%; display:inline-block;    box-sizing:border-box;  margin-top:35px;}

.product02_ul {width:70%; display:block; float:right;}
.product02_ul>li {width:100%;}
.product02_div { box-sizing:border-box;}
.product02_div h3 { display:inline-block;padding:20px; text-align:center;}
.product02_div_tit {width:20%; float:left; background:#5ab0a1; padding:15px; color:#fff;}
.product02_div_text {width:80%; float:left; padding:15px; box-sizing:border-box; background:#f7f7f7}





/* 채용 */
.resize{ display:block; width:70%; left:15%;  padding-bottom:70%;   position:relative}
.resize .re{ position:absolute;   top:0; width:100%; height:100%; }
.pa100{ position:absolute; z-index:inherit;  left:0; top:0; width:100%; height:100%}
.page_step_list2 > .step_list{display:flex; }
.page_step_list2 > .step_list > li{ flex:1;   }
.page_step_list2 > .step_list > li > .inner{ position:relative;  }
.page_step_list2 > .step_list > li .shape{ transform:rotate(0); transition:all 3s ease-out;}
.page_step_list2 > .step_list > li .shape svg{ width:100%; height:100%;}
.page_step_list2 > .step_list > li .shape #polygon{ fill:#c00;}
.page_step_list2 > .step_list > li .con_wrap{ position:absolute; top:50%; left:0; width:100%; text-align:center; transform: translate(0, -50%); }
 .page_step_list2 > .step_list > li .con_wrap img {width:40%}
.page_step_list2 > .step_list > li .in_ac .con_wrap{ flex:1; min-height:80%;}
.page_step_list2 > .step_list > li:nth-child(2n+1) .shape #polygon{ fill:#333;}

.page_step_list2 > .step_list > li:hover .shape{ transform:rotate(360deg);}
.page_step_list2 > .step_list > li:hover .shape #polygon{ fill:#ed1c24; }
.page_step_list2 > .step_list.flexW4 > li:nth-child(n+5) > .inner:after{ left:0; right:auto; transform:translate(-50%,-50%) rotateY(-180deg);}

.carrer_text_wrap{display:flex; justify-content:center;  border:1px solid #ddd; margin-top:30px; padding:20px; font-size:1.2em;}
.carrer_text_wrap p{margin-right:2.5em;}
.carrer_text_wrap span{font-weight:600;}


.page_step_list2 > .step_list > li .con_wrap2{text-align:center; position:relative;}
.page_step_list2 > .step_list > li .con_wrap2:after{content:''; display:block; clear:both; }
.page_step_list2 > .step_list > li .con_wrap2 .step_tit{margin-top:5px}
.page_step_list2 > .step_list > li .con_wrap2 .step_num{margin-top:10px}
.page_step_list2 > .step_list > li .con_wrap2 span i{position:absolute; top:13px; right:-17px; font-size:2em; color:#ddd;}
.page_step_list2 > .step_list > li .step_num > .tt{font-size:1.5rem; color:#c00; font-weight:700;}
.page_step_list2 > .step_list > li .step_tit > .tt{font-size:1.2rem; font-weight:500;}




  @media all and (max-width:1300px) {
	.page_step_list2 > .step_list > li .step_num > .tt{font-size:1.2rem;  }
	.page_step_list2 > .step_list > li .step_tit > .tt{font-size:1em; }


   }

 @media all and (max-width:800px) {
    .page_step_list2 > .step_list{display:block;}
	.page_step_list2 > .step_list:after{content:''; display:block; clear:both;}
	.page_step_list2 > .step_list > li{width:50%; float:left}
	.page_step_list2 > .step_list > li:nth-child(n + 3) {margin-top:20px}
	.page_step_list2.line > .step_list > li > .inner:after{display:none;}

   .page_step_list2 > .step_list > li .step_num:after{height:0 !important;}
    .page_step_list2 > .step_list > li .step_tit > .tt{font-size:1.05rem !important;}
   .page_step_list2 > .step_list > li .step_num > .tt{font-size:1.05rem !important;}
   .page_step_list2 > .step_list > li .con_wrap2 span i {display:none}
}

  @media all and (max-width:600px) {
	/* 채용 */
 	.carrer_text_wrap{flex-direction:column}
 
 }


.career01_title{margin-bottom:3em; text-align:center;}
.career01_title h3{font-weight:600; color:#c00;}
/* .career01_title h3:after{content:''; display:block; clear:both; width:100%; height:1px;background:#ddd; margin:1em 0;} */
.career01_title p{color:#777; font-size:1.1rem;; margin-top:20px}
.carrer_text_wrap p i{margin-right:0.5em; vertical-align:middle; font-size:1.2em; color:#c00;}
.carrer_text_wrap1{background:#fcf3f1; margin-top:3em; padding:30px 30px 20px 30px; box-sizing:border-box; line-height:1.8}
.carrer_text_wrap1 p{color:#777; font-size:1rem; padding-bottom:7px;  line-height:1.3em; display:flex;}
.carrer_text_wrap1 p span{margin:0 .5em;}



/* 복리후생 */
 .flex{display:flex;}
.carrer02_box{max-width:100%; margin:0 auto;}
.carrer02_box ul{width:100%; /* display:flex; flex-wrap:wrap; overflow:auto;*/ display:flex; flex-wrap:wrap;
/*border-top: 5px solid rgb(2,0,36);*/
}
.carrer02_box ul:after{content:''; display:block; clear:both;}
.carrer02_box ul li{ margin-right:-1px; margin-bottom:-1px; border:1px solid #ddd;  width:33.38%; text-align:left; background:#fff; display:flex; padding:20px; box-sizing:border-box; align-items:center; }



.carrer02_box ul li img{width:80%; position:absolute; left:50%;transform: translate(-50%, -50%); top:50%}
.carrer02_box ul li > p {width:25%; padding-bottom:24%; text-align:Center; margin-right:20px; background-color:#f6f6f6;    border-radius:50%; position:relative}
.carrer02_box ul li .carrer02_box_text{width:75%;}
.carrer02_box ul li .carrer02_box_text p:first-child{font-size:1.3rem; font-weight:500;}
.carrer02_box ul li:nth-child(1) .carrer02_box_text p:first-child{color:#598C18}
.carrer02_box ul li:nth-child(2) .carrer02_box_text p:first-child{color:#7135AF}
.carrer02_box ul li:nth-child(3) .carrer02_box_text p:first-child{color:#962E09}
.carrer02_box ul li:nth-child(4) .carrer02_box_text p:first-child{color:#0c4da2}
.carrer02_box ul li:nth-child(5) .carrer02_box_text p:first-child{color:#7B7ABA}
.carrer02_box ul li:nth-child(6) .carrer02_box_text p:first-child{color:#B79A79}
.carrer02_box ul li .carrer02_box_text p:last-child{ color:#777; font-size:1.02rem;}
.top_txt{text-align:center;  font-size:1.02rem; color:#777; letter-spacing:-.5px; line-height:1.64;}
.top_txt h3 {color:#c00; font-size:1.3em; display:block; margin-bottom:10px }


@media screen and (max-width: 800px) {
   .carrer_text_wrap {flex-wrap:wrap; padding:10px;   }
   .carrer_text_wrap p {width:100%; text-align:left;   line-height:1.3em; margin:2px 0; }
  .carrer_text_wrap1{/* background:#f2f8ff;  */padding:20px 20px 10px 10px}
 }

 


.timeline {
  color: #fff;
  margin-bottom:30px;
}


.timeline .map_bg_box {background:#f7f7f7; padding:15px; box-sizing:border-box; border-radius:8px }
.timeline span.date  {font-size:1.2em; font-weight:700;  display:inline-block;  margin-bottom:10px; color:#c00}


.timeline h1,
.timeline ul li .content h2 {
}
.timeline h1 {
  background: #3d9e67;
  padding: 70px 0;
  font-size: 2.5em;
}
.timeline ul {
}
.timeline ul li {
  background: #ddd;
  position: relative;
  margin: 0 auto;
  width: 2px;
  padding-bottom: 40px;
  list-style-type: none;
  color:#333;
}
.timeline ul li:last-child {
  padding-bottom: 7px;
}
.timeline ul li:before {
  content: "";
  background: #fff;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border: 3px solid #c00;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
 }
.timeline ul li .hidden {
  opacity: 0;
}
.timeline ul li .content {
  background: #fff;
  position: relative;
  top: 0px;
  width: 465px;
/*  padding: 15px;*/
}
.timeline ul li .content h2 {
  color: #333;
  font-size:1.8em;
  padding-bottom: 10px;
  margin-top:-12px;
}


.timeline ul li .content p {
  text-align: left;
  font-size:1.05rem;
  line-height:1.4;
}


/* 동그라미 옆에 바 */
.timeline ul li .content:before {
  content: "";
  position: absolute;
  top: 8px;
  width: 18px;
  height: 1px;

}
.timeline ul li:nth-child(odd) .content {
  left: 52px;
  background: #fff;
  border:0px solid #ddd;
}
.timeline ul li:nth-child(odd) .content:before {
  left: -38px;
}
.timeline ul li:nth-child(even) .content {
  left: calc(-465px - 40px);
}

.timeline ul li:nth-child(even) .content h2 {
  text-align:right;
}

.timeline ul li:nth-child(even) .content .date {
  display:block;
  text-align:right !important;
}

.timeline ul li:nth-child(even) .content p {
  text-align:right;
}

.timeline ul li:nth-child(even) .content:before {
  right: -38px;
}





/* -------------------------
   ----- Media Queries -----
   ------------------------- */

@media screen and (max-width: 800px) {



.timeline {
  margin-left:15px;
}


.timeline ul li:nth-child(odd) .content {
  left: 35px;
  background: #fff;
  border:0px solid #ddd;
}


  .timeline ul li {
    margin-left: 0px;
  }
  .timeline ul li .content {
    width: calc(100vw - 100px);
  }
  .timeline ul li .content h2 {
  }

.timeline ul li .content p {
  text-align: left;
  font-size:1rem;
  line-height:1.6;
}



.timeline ul li:nth-child(even) .content h2 {
  text-align:left;
}

.timeline ul li:nth-child(even) .content .date {
  display:block;
  text-align:left !important;
}

.timeline ul li:nth-child(even) .content p {
  text-align:left;
}



  .timeline ul li:nth-child(even) .content {
    left: 35px;
  }


  .timeline ul li:nth-child(even) .content:before {
    left: -33px;
  }



}















/* 반응형 */
@media all and (max-width:1000px) {

  .carrer02_box ul li .carrer02_box_text p:first-child{font-size:1.02rem !important;}
  .carrer02_box ul li{  width:50%;}
     }

 @media all and (max-width:800px) {
   .carrer02_box ul li{    width:100%; padding:10px}
.carrer02_box ul li > p {width:20%; padding-bottom:20%;  }
.carrer02_box ul li .carrer02_box_text{width:80%; }

 }



 @media all and (max-width:1240px) {
	.content  {padding:0 4% 6% 4%}
 }
 

 @media all and (max-width:1000px) {
        
         .sub_vi p {font-size:1.3rem; line-height:1.4em ; }
         .sub_vi p  b {font-size:1.9rem; }
 
         .product01_ul {width:100%; display:flex; float:left; justify-content: space-between;  flex-wrap:wrap}
         .product01_ul li {position:relative; width:100%; float:left; margin-bottom:20px; }
         .product01_ul li img {background:#fff; border-radius:10%; padding:15px; box-sizing:border-box; margin-bottom:10px; width:90px}


		}






 @media all and (max-width:800px) {
				.content  {padding:0 4% 70px 4%}
					
				 h2.guide {width:100%;  font-size:1.6rem;  padding-top:55px; margin-bottom:20px; }

				.span_br {display:inline}

				/* pc에서 안보이고 모바일에서 모바일 이미지로 바뀌게 */
				/*pc이미지 */
				.pc_block_m_none {display:none !important}
				/* 모바일이미지 */
				.pc_none_m_block {display:block !important}



				.sub_vi {height:230px; }

				/* 모바일 VI */
				.sub_vi01 {background:url('/common/img/sub/sub01_vi_m.jpg') no-repeat center; }
				.sub_vi02 {background:url('/common/img/sub/sub02_vi_m.jpg') no-repeat center; }
				.sub_vi03 {background:url('/common/img/sub/sub03_vi_m.jpg') no-repeat center; }
				.sub_vi04 {background:url('/common/img/sub/sub04_vi_m.jpg') no-repeat center; }




				.sub_vi  div { background-color:rgba(0,0,0,.1)}
				.sub_vi p {font-size:1.1rem;  }
				nav.sub_menu ul li.home {display:none}
				 nav.sub_menu ul li {width:50%;}
				 nav.sub_menu ul li ul li  {width:100%;}

				.sub_con_menu ul{position:relative; width:100%; margin:0 auto; text-align:center; }
				.sub_con_menu li {margin:0 5px}
				.sub_con_menu li a {position:relative; font-weight:300; font-size:1em; letter-spacing:-0.5pt; color:#888; display:block;  line-height:45px; height:45px; text-align:center; padding:0 5px;}
				.sub_con_menu li a:hover{ text-decoration: none; transition: all 0.3s ease-out;}
				.sub_con_menu li a:hover:after{width:100%; transition: all 0.3s ease-out;}



				.product_ul_wrap  {width:100%; display:flex; float:left; justify-content: space-between; margin-top:40px; flex-wrap:wrap}
				.product_ul_wrap>li {position:relative; width:100%; float:left;  box-sizing:border-box; margin-bottom:30px;}

				.product_ul_wrap2  {width:100%; display:flex; float:left; justify-content: space-between; margin-top:40px; flex-wrap:wrap}
				.product_ul_wrap2>li {position:relative; width:100%; float:left;  box-sizing:border-box; margin-bottom:30px;}


				.garo_line {display:none}
				.garo_line_sero {display:none; }
				.garo_line_sero_top {height:60%;}

				/* 연혁 */
				.history_ul {width:100%; float:left; border-top:none;  padding-top:0;}
				.history_ul li.year {width:100%; float:left; font-size:1rem; font-weight:800; margin-bottom:5px  }
				.history_ul li.cont {width:100%; float:left;	border-bottom:1px solid #ddd; margin-bottom:10px; padding:10px; padding-top:0; box-sizing:border-box;  font-size:1em; font-weight:400; line-height:1.3em;  color:#666; border:1px solid #c00 }

				.history_ul li h3{font-size:2em; font-weight:600}
 
				 
}



/*프로덕트 추가*/

#product .product_wrap {width:100%; display:inline-block;   position:relative;  }
#product .product_wrap .box_wrap {width:100%;    display:flex; align-items:center; justify-content :space-between; }

#product .product_wrap .one_bg {width:46%; position:absolute; left:50%; top:25%; transform: translate(-50%, 0); }
#product .product_wrap .one_bg2 {width:46%; position:absolute; left:50%; top:19%; transform: translate(-50%, 0); }

#product .product_wrap .one {width:16%; padding-bottom:15.5%;  background-color:#fff;  box-sizing:border-box; text-align:center;  color:#333; border-radius:50%;   z-index:9999; position:Relative; font-size:0; line-height:0;}
 #product .product_wrap .one.one_tit {width:18%; padding-bottom:17.5%}

#product .product_wrap .one  div {position:absolute; width:100%; left:0; top:50%; transform: translate(0, -50%);  z-index:99999999999999;  font-size:1rem; line-height:1.3em;}
#product .product_wrap .one div img {width:40%; max-width:100px}
#product .product_wrap .one b {font-weight:600; font-family: 'Montserrat';font-size:1.2em; display:block;  line-height:1.3em; letter-spacing:.5px}
#product .product_wrap .one b.som{font-size:1.5em}
#product .product_wrap .one .one_line  {width:97%; height:97%; border:1px solid rgba(255,255,255,.8); border-radius:50%;  margin-left:1.5%; box-sizing:border-box;  }

.type_a .ani1,.type_a .ani2 { width:100%;  height:100%;  background-color:#fff; border:12px solid #30c0b4; box-sizing:border-box; text-align:center;  color:#333; border-radius:50%;   z-index:99; position:Relative; }
.type_b  .ani1,.type_b .ani2 { width:100%;  height:100%;  background-color:#fff; border:12px solid #65ac12; box-sizing:border-box; text-align:center;  color:#333; border-radius:50%;   z-index:99; position:Relative; }
.type_c  .ani1,.type_c .ani2 { width:100%;  height:100%;  background-color:#fff; border:12px solid #e68127; box-sizing:border-box; text-align:center;  color:#333; border-radius:50%;   z-index:99; position:Relative; }




.ani1{ animation: ani1 1.5s infinite; }
.ani2{ animation: ani2 1.5s infinite; }


 

	@keyframes ani1{
	  from{
	    transform:scale(1,1);
		opacity: 1; top:0;
		background-color:#fff;
	  }
	  to{
		transform:scale(1.15,1.15);
		opacity: 0; top:-.2%;
		background-color:#fff;
	  }
	}



	@keyframes ani2{
	  from{
	   transform:scale(1,1);
		opacity: 1; top:0;
		background-color:#fff;
	  }
	  to{
		transform:scale(1.27,1.27);
		opacity: 0; top:-.3%;
		background-color:#fff;
	  }
	}
 

#product .product_wrap .one.bg_color1 {background-color:#30c0b4; border:2px solid #30c0b4; color:#fff;  }
#product .product_wrap .one.bg_color2 {background-color:#36a096; border:2px solid #36a096; color:#fff;  }
#product .product_wrap .one.bg_color3 {background-color:#137d73; border:2px solid #137d73; color:#fff;  }
#product .product_wrap .one.bg_color1 b,.bg_color2 b,.bg_color3 b,.bg_color4 b {color:#fff}

#product .text_box  {width:20%; position:Relative; z-index:9999;color:#555; font-size:0; line-height:0}
#product .text_box b {font-size:1.5rem;display:inline-block; width:100%;  font-weight:600; line-height:1em;   }
#product .text_box span.line2 {width:20px; height:1px; margin:13px 0;  background-color:#333; display:inline-block  }
#product .text_box p {width:100%; display:inline-block;   font-size:1rem; line-height:1.4em;  }


#product .product_wrap  .li_box  {width:20%; }
#product .product_wrap  .li_box ul {width:100%;}
#product .product_wrap  .li_box li {font-size:0.95rem; text-align:left; line-height:1.2em; padding-bottom:10px; width:100%; color:#444;   }

#product .product_wrap  .li_box li:last-child {padding-bottom:0}

#product .product_wrap .box_wrap .li_box:nth-child(1) li {text-align:right}

#product .product_wrap .box_wrap2 {width:100%;    display:flex; align-items:center; justify-content :center;  margin-top:5%;  }
#product .product_wrap .box_wrap2 .text_box {font-size:1.05rem;   }
#product .product_wrap .box_wrap2 .text_box.r {width:43%; box-sizing:border-box; padding-right:8%  }
#product .product_wrap .box_wrap2 .text_box.l {width:42%; box-sizing:border-box; padding-left:4%    }
#product .product_wrap .box_wrap2 .li_box {left:50%; position:relative; transform: translate(-50%, 0);  }

#product .product_wrap .box_wrap3 {width:100%;  display:flex; align-items:center;  justify-content :space-between; }
 #product .product_wrap .box_wrap3  .text_box  {width:27%;}


#product .product_wrap.type_a .one_tit{border:5px solid #30c0b4;}
#product .product_wrap.type_b .one_tit{border:5px solid #65ac12;}
#product .product_wrap.type_c .one_tit{border:5px solid #e68127;}


#product .product_wrap.type_b  .bg_color1 {background:#9dd74f; border:5px solid #9dd74f}
#product .product_wrap.type_b  .bg_color2 {background:#91c849;border:5px solid #91c849}
#product .product_wrap.type_b  .bg_color3 {background:#81b141;border:5px solid #81b141}
#product .product_wrap.type_b  .bg_color4 {background:#648d2d; border:5px solid #648d2d; color:#fff;}



#product .product_wrap.type_c  .bg_color1 {background:#9dd74f; border:5px solid #9dd74f}
#product .product_wrap.type_c  .bg_color2 {background:#91c849;border:5px solid #91c849}
#product .product_wrap.type_c  .bg_color3 {background:#81b141;border:5px solid #81b141}
#product .product_wrap.type_c  .bg_color4 {background:#648d2d;border:5px solid #648d2d}

#product .product_wrap.type_c  .bg_color1 {background:#ecae4b; border:5px solid #ecae4b}
#product .product_wrap.type_c  .bg_color2 {background:#eb9c59;border:5px solid #eb9c59}
#product .product_wrap.type_c  .bg_color3 {background:#f0903a;border:5px solid #f0903a}
#product .product_wrap.type_c  .bg_color4 {background:#e68127;border:5px solid #e68127; color:#fff;}


@media all and (min-width:1500px) {
span.pc_br {display:block}
}

 @media all and (min-width:1200px) {
	 #product  .m_list {display:none}
  }

 @media all and (max-width:1200px) {
/* 	#product .product_wrap { z-index:-5} */
	#product .product_wrap .box_wrap .li_box {display:none; width:1px }
	#product .product_wrap .box_wrap2 .li_box {display:none;  width:1px }
	#product .product_wrap .box_wrap3 .li_box {display:none;  width:1px }
	#product .product_wrap .box_wrap .text_box {display:none; width:1px }
	#product .product_wrap .box_wrap2 .text_box {display:none;  width:1px }
	#product .product_wrap .box_wrap3 .text_box {display:none;  width:1px }
   #product .product_wrap .box_wrap3  {justify-content:center}

	#product .product_wrap .one {width:32%; margin:0 1%; float:left; padding-bottom:29.7%; }
   #product .product_wrap .one.one_tit {width:32%; padding-bottom:29.7%; }
	#product .product_wrap .box_wrap {width:100%; display:flex;    }

	#product .product_wrap .one_bg  {  width:90%;   }
	#product .product_wrap .one_bg2 { width:90%;   }

 
	#product .m_list {width:100%; float:left; margin-top:30px; font-size:0.95rem;  line-height:1.3em; color:#666;  }
	#product .m_list .li_box {width:100%; margin-bottom:20px; box-sizing:border-box; border:1px solid #ddd; border-radius:5px; padding:15px;  }
    #product .m_list .li_box:last-child {margin-bottom:0}

	#product .text_box  {width:100%; text-align:left;}
	#product .text_box b {font-size:1.1rem; text-align:left;}
	#product .text_box span.line2 {  margin:10px 0;  display:none  }
	#product .text_box p {  margin-top:10px; font-size:0.95rem;  color:#666;  }



	 #product .product_wrap.type_b .box_wrap:nth-child(2) {margin-top:10%}
  }

  @media all and (max-width:1000px) {
	/*  .type_a .ani1,.type_a .ani2 {display:none  }
	 .type_b  .ani1,.type_b .ani2 {display:none  }
	 .type_c  .ani1,.type_c .ani2 {display:none  } */
}

   @media all and (max-width:800px) {
	#product .product_wrap .one div {font-size:3.3vw }
	 #product .product_wrap .one  b {font-size:3.3vw; margin-bottom:0}
	 #product .product_wrap .one .one_line  {display:none}
	.textbox3 b {font-size:1.2em}
	.textbox3 {font-size:0.95rem;  }
	.textbox3 b {font-size:1.2em;  line-height:1.3em; font-weight:500; color:#333}

	.textbox4 {font-size:0.95rem; line-height:1.4em;color:#555; font-weight:400}
     .textbox4  b {font-size:1.1em}
	.textbox5 {font-size:1.3rem !important; line-height:1.5em; color:#333 !important;}
	.textbox6 {font-size:1.55rem !important; line-height:1.6em; color:#333 !important;}
	.textbox7 {font-size:1.6rem !important; line-height:1.6em; color:#333 !important;}
	.textbox22 {font-size:2.2rem !important; line-height:1.4em; color:#333 !important;}




	.if_map {width:100%; float:left;}
	.factory_img {width:100%; height:330px; background:#ddd; text-align:center; float:left; margin-top:10px; color:#fff; line-height:100px;}

	.about_img {display:none;}
	.m_about_img {display:block; max-width:900px; width:100%; }

	#product .product_wrap .one b.som{font-size:1em}

   }





/*본사소개 추가*/

.map_leftbox {width:20%; float:left;}
.map_rightbox {width:80%; float:right; margin-top:70px;}


.map_h4 {font-size: 1.5rem; padding:20px 0 15px 0;}
.map_h4 .map_sub_tit {color:#ccc; letter-spacing:-1px;font-size:1.1em; font-weight:400; margin-bottom:5px}

.map_h4 img {max-width:40px; vertical-align:-5px; margin-right:10px;}


.with_list {width:100%; display:flex; border:1px solid #ddd;  padding:15px;  box-sizing:border-box;   }
.with_list.type2  {flex-wrap:wrap}
.with_list li {width:50%; font-size:1rem; color:#444;}
.with_list li b {font-size:1.15rem; width:100%; display:block; margin-bottom:3px; font-weight:500; color:#333; }



.with_hr {/* border-top:1px dashed #ddd; */ margin-top:50px; padding-top:50px;}

 @media all and (min-width:1300px) {
		.with_list.type2 li  { border-bottom:1px solid #ddd; padding-bottom:10px}
		.with_list.type2 li:nth-child(n+3) {margin-top:10px; border-bottom:none; padding-bottom:0}

		 .with_list.type3  {flex-wrap:wrap}
		.with_list.type3 li  {width:33.33333%}
		.with_list.type3 li:last-child  {width:100%; border-top:1px solid #ddd; padding-top:10px; margin-top:13px }
}

 @media all and (max-width:1300px) {
	.map_leftbox {width:100%; float:left;}
	.map_rightbox {width:100%; float:left; margin-top:0px;}
	.map_h4 {font-size: 1.2rem;  }
	.with_list {flex-wrap:wrap;}
	.with_list li  {width:100%; font-size:.95rem; margin-top:10px}
	.with_list li:nth-child(1) {margin-top:0}
	.with_list li b {font-size:1.05rem;  }
 	  .with_hr {/* border-top:1px dashed #ddd; */ margin-top:30px; padding-top:30px;}

 
   }


/*연혁 new*/

.history {width:100%; position:relative; padding-top:20px}
.history p.one {width:100%; text-align:Center; position:relative; z-index:99 }
.history p.one:nth-child(n + 2) {margin-top:20px}
.history p.one span {
 
    background: #fff;
    display:inline-block;
     width: 10px;
    height: 10px;
    border: 3px solid #c00;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.history div.in_box {width:47%; margin-left:auto; margin-top:-30px}
.history div.in_box:nth-child(4n) {margin-right:auto; margin-left:0; text-align:right}
.history .year {color: #333; font-weight:800; display:block; margin-bottom:10px;   font-size: 2em; line-height:1em;  font-family:'Montserrat'}

.history div.in_box div {background: #f7f7f7;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 8px;
	font-size:1rem; color:#666;
	}

.history span.date {font-size: 1.2em;
    font-weight: 700;
    display: inline-block;
	margin-bottom:5px;
     color: #c00;
}
.history_line {width:1px;  background-color:#ddd; height:100%; position:absolute; left:50%; top:0}


 @media all and (max-width:1000px) {
	.history {padding-top:10px}
    .history p.one {text-align:left; }
	.history p.one:nth-child(n + 2) {margin-top:30px}


	.history div.in_box { width:calc(100% - 30px);  margin-left:auto; margin-top:-25px}
	.history div.in_box:nth-child(4n) { margin-left:auto;  margin-right:0; text-align:left}
	.history .year {font-size:1.4rem }
	.history span.date {font-size: 1.1rem}

	 .history_line {left:7px}

}


/*회사소개 추가*/
  
	   .bg_box {width:100%; display:inline-block; background:url('/common/img/sub/about01_bg.png') no-repeat center; padding-bottom:28%; background-size:35%; position:relative; margin-bottom:30px}
	   .bg_box div {width:80%;display:inline-block; margin-left:10%;  position:absolute;  height:100%}
	   .bg_box div p {width:26%; position:absolute; color:#54a3cd; font-size:1.2rem; }
	   .bg_box div p:nth-child(2) {color:#d03c14}
	   .bg_box div p:nth-child(3) {color:#f6c059}

	   @media all and (max-width:1200px) {
	   	   .bg_box {  background:url('/common/img/sub/about01_bg.png') no-repeat center;  background-size:45%; padding-bottom:36%;  position:relative }
          .bg_box div  {width:100%; margin-left:0}

      }
	   @media all and (max-width:900px) {

	   .bg_box {display:none}
	   }
	  .m_box {text-align:center; margin-bottom:30px;  font-size:1rem; line-height:1.3em; color:#555; width:100%;}
	  .m_box img {margin-bottom:20px; width:100%;}
	  .m_box p {margin-top:10px; border:1px solid #ddd; box-sizing:border-box; padding:13px 4% 10px 4%; border-radius:5px;}

	   .m_box b {font-size:1.3em; color:#54a3cd; display:block; margin-bottom:5px; font-weight:800}
	   .m_box  p:nth-child(2) b {color:#d03c14}
	   .m_box  p:nth-child(3) b {color:#f6c059}

      @media all and (min-width:1000px) {
      .m_box {display:none}
	  }