@charset "utf-8";
legend {display: none;}
.sub_content_wrap {}
.sub_content_wrap .sub_title { width: 100%; height: 260px; text-align: center; display: table; }
.sub_content_wrap .sub_title .tit_inner {display: table-cell; vertical-align: middle; }
.sub_content_wrap .sub_title h3 {font-size:5rem; color: #fff; font-family: 'Raleway', sans-serif;  }
.sub_content_wrap .sub_title h3:after {content:''; width: 70px; border-bottom: 1px solid #fff; display: block; margin:0 auto; margin-top: 3rem;}
.sub_content_wrap .sub_title p {color: #fff; margin-top: 3rem; font-size: 1.6rem; }
.sub_content_wrap .sub_title.tit_pr {background:url('../images/sub/tit_pr_bg.jpg') no-repeat center center;}
.sub_content_wrap .sub_title.tit_cs {background:url('../images/sub/tit_cs_bg.jpg') no-repeat center center;}
.sub_content_wrap .sub_title.tit_about {background:url('../images/sub/tit_about_bg.jpg') no-repeat center center;}
.sub_content_wrap .sub_title.tit_product {background:url('../images/sub/tit_product_bg.jpg') no-repeat center center;}
.sub_content_wrap .sub_tab_menu_wrap {width: 100%; background: #101938;  }
.sub_content_wrap .sub_tab_menu_wrap .sub_tab_menu {background: #101938; max-width: 1200px; margin:0 auto; overflow: hidden;}
.sub_content_wrap .sub_tab_menu_wrap .sub_tab_menu a:first-child {border-left: 1px solid #293048;}
.sub_content_wrap .sub_tab_menu_wrap .sub_tab_menu a {display: block; width: 20%; float: left; height: 6rem; line-height: 6rem; color: #fff; font-size: 1.6rem; text-align: center; border-right: 1px solid #293048;}
.sub_content_wrap .sub_tab_menu_wrap .sub_tab_menu a:hover, .sub_content_wrap .sub_tab_menu_wrap .sub_tab_menu a.active {background: #fff; color:#101938; font-weight: bold;}


.sub_content_wrap .sub_content { max-width: 1130px; margin:6rem auto 10rem auto; }
.sub_content_wrap .sub_content h4 { font-size:1.8rem; color: #20242d; font-weight: bold; margin-bottom: 3rem; line-height: 1.4; }
.sub_content_wrap .sub_content h4:before {content: ""; display: block; width: 55px; border-bottom: 2px solid #ccc; margin-bottom: 2rem;}
.sub_content_wrap .sub_content h4 span {font-size:1.8rem;  color:#999; }


/*회사소개*/
.sub_content_wrap .about_box img { max-width: 100%; }
.sub_content_wrap .about_box .top_img {margin-bottom: 3rem;}
.sub_content_wrap .about_box .section {margin-bottom: 6rem;}
.sub_content_wrap .about_box .section .about_intro {overflow: hidden;}
.sub_content_wrap .about_box .section .about_intro li {float: left; width: 26%; margin:0 10% 1% 0; position: relative;}
.sub_content_wrap .about_box .section .about_intro li:after {content: ''; display: inline-block; min-height: 300px; border-right: 1px solid #eee; position: absolute; top:0; right: -20%;}
.sub_content_wrap .about_box .section .about_intro li:last-child {margin-right: 0;}
.sub_content_wrap .about_box .section .about_intro li p {margin-top: 2rem;}
.sub_content_wrap .about_box .section .about_company {width: 100%; border-top: 1px solid #333;}
.sub_content_wrap .about_box .section .about_company tr td, .sub_content_wrap .about_box .section .about_company tr th {border-bottom: 1px solid #ddd; padding:1.5rem 2rem;}
.sub_content_wrap .about_box .section .about_company tr th {background: #eee; text-align: left; color: #000; width: 20%;}
.sub_content_wrap .about_box .section .about_vision {overflow: hidden;}
.sub_content_wrap .about_box .section .about_vision .img_box {float: left; width: 48%; text-align: center;}
.sub_content_wrap .about_box .section .about_vision .txt_box {float: right; width: 48%;}
.sub_content_wrap .about_box .section .about_vision .txt_box dl {margin-bottom: 3rem; border-bottom: 1px solid #eee; padding-bottom: 3rem;}
.sub_content_wrap .about_box .section .about_vision .txt_box dl dt {font-size: 1.6rem; color: #000; font-weight: bold; margin-bottom: 1rem;}
.sub_content_wrap .about_box .section .about_vision .txt_box dl dt:before {content: '●'; display: inline-block; font-size: 1.4rem; color: #1b2a5d; margin-right: 0.5rem; line-height: 1.4; vertical-align: top;}
.sub_content_wrap .about_box .section .about_vision .txt_box dl:nth-child(2) dt:before {color:#b1d34b; }
.sub_content_wrap .about_box .section .about_vision .txt_box dl:nth-child(3) {border:0; margin-bottom: 0; padding-bottom: 0;}
.sub_content_wrap .about_box .section .about_vision .txt_box dl:nth-child(3) dt:before {color:#f4992d; }

/*ceo인사말*/
.sub_content_wrap .ceo_box {position: relative; padding-bottom: 3rem;}
.sub_content_wrap .ceo_box img { max-width: 100%;  }
.sub_content_wrap .ceo_box .top_img {margin-bottom: 3rem;}
.sub_content_wrap .ceo_box .section {overflow: hidden; }
.sub_content_wrap .ceo_box .section .img_box {position: absolute; top:10%; right: 3%; text-align: center; width: 35%;}
.sub_content_wrap .ceo_box .section .img_box span {display: block; margin-top: 2rem;}
.sub_content_wrap .ceo_box .section .img_box span strong {vertical-align: middle; margin-left: 10px; display: inline-block;}
.sub_content_wrap .ceo_box .section .txt_box {float: left; width: 50%; }
.sub_content_wrap .ceo_box .section .txt_box p  { font-size:1.7rem; color: #20242d; font-weight: bold; margin-bottom: 3rem; line-height: 1.5; }

/*연혁*/
.sub_content_wrap .history_box { overflow: hidden; }
.sub_content_wrap .history_box img {max-width: 100%;}
.sub_content_wrap .history_box .img_box {float: left; width: 35%; text-align: center; }
.sub_content_wrap .history_box .txt_box {float: right; width: 65%; padding-left: 6%; border-left: 1px solid #eee;}
.sub_content_wrap .history_box .txt_box ul li { padding-bottom: 3rem; margin-bottom: 3rem; border-bottom: 1px solid #eee; }
.sub_content_wrap .history_box .txt_box ul li:before {content: '●'; display: inline-block; margin-right: 1rem; font-size: 1.2rem; color: #b1d34b;}
.sub_content_wrap .history_box .txt_box ul li span {color: #000; font-weight: bold; min-width: 100px;}

/*찾아오시는길*/
.sub_content_wrap .contact_box .map {margin-bottom: 3rem;}
.sub_content_wrap .contact_box h5 {font-size: 20px; color: #000; padding-bottom: 1.5rem; border-bottom: 1px solid #ddd; font-weight: bold; margin-bottom: 2rem;}
.sub_content_wrap .contact_box .info span {display: block; margin-bottom: 1.5rem;}
.sub_content_wrap .contact_box .info span strong {color: #000; width: 50px;}

/*나눔활동*/
.sub_content_wrap .support_box img {max-width: 100%;}

/*FAQ*/
.faq_box {border-top: 1px solid #ddd; margin-top: 4rem;}
.faq_box > ul > li {border-bottom: 1px solid #ddd; padding:1.5rem;}
.faq_box > ul > li .faq_tit {color: #000; cursor: pointer; font-size: 1.5rem; padding:10px 0;}
.faq_box > ul > li .faq_tit:before {content: 'Q'; font-size: 2rem; display: inline-block; margin-right: 2rem; font-weight: bold;}
.faq_box > ul > li .faq_txt {display: none;}
.faq_box > ul > li .faq_txt p:before {content: 'A'; font-size: 2rem; color: #d76446; display: inline-block; position: absolute; top:0; left: 0; font-weight: bold;}
.faq_box > ul > li .faq_txt p {line-height: 1.5; margin:1rem 0; padding-left: 3.5rem; position: relative;}

.faq_box .search_box {position: relative;}
.faq_box .search_box .search_area {position: absolute; top:-65px; right: 0px; background: #fff; padding-right: 10px; width: 250px; transition: all .5s ease-in-out;  border:1px solid #ccc; border-radius: 50px;}
.faq_box .search_box .search_area.on {top:0px;}
.faq_box .search_box .search_area input {border:0; background:none; height: 35px; padding-left:15px; width: 75%;}
.faq_box .search_box .search_area .search_btn {width: 35px; height: 35px; background: url('../images/search_ico.png') no-repeat right 5px; vertical-align: middle;}

/*제품소개*/
.sub_content_wrap .prodcut_box {}
.sub_content_wrap .prodcut_box h2{font-size: 2.6rem; color: #333; margin-bottom: 15px; font-weight: 600;}
.sub_content_wrap .prodcut_box h3 {font-size: 2rem; font-weight: bold; color: #333; margin-bottom: 20px; padding-top: 15px; border-top:3px solid #eee; position: relative;}
.sub_content_wrap .prodcut_box h3 span {font-size: 2rem; font-weight: normal; color: #000; }
.sub_content_wrap .prodcut_box h3:before {content: ''; display: inline-block; width:200px; border-top:3px solid #72a2cc; position: absolute; top:-3px; left: 0;}
.sub_content_wrap .prodcut_box .section {display: table; margin-bottom: 70px; background: #eee;}
.sub_content_wrap .prodcut_box .section .img_box img {width: 100%;}
.sub_content_wrap .prodcut_box .section .tit{background: #72a2cc; padding: 15px 0;}
.sub_content_wrap .prodcut_box .section .tit p{font-size: 2.4rem; color: #fff; font-weight: 600; text-align: center;}
.sub_content_wrap .prodcut_box .section .txt_box {background: #eee; padding: 20px;}
.sub_content_wrap .prodcut_box .section .txt_box ul li{position: relative; padding-left: 12px; margin-bottom: 5px; line-height: 1.5;}
.sub_content_wrap .prodcut_box .section .txt_box ul li:before{content: ""; width: 3px; height: 3px; border-radius: 20px; background: #333; position: absolute; left: 0; top: 8px;}
.sub_content_wrap .prodcut_box .section .txt_box h5 {font-size: 1.8rem; text-align: center; color: #333; margin-bottom: 10px; font-weight: 600;}
.sub_content_wrap .prodcut_box .section .txt_box p {font-size: 1.5rem; text-align: center; color: #333;}
.sub_content_wrap .prodcut_box .section .sec_left {display: table-cell; width: 50%; border:1px solid #ddd; border-right: 0; vertical-align: top;}
.sub_content_wrap .prodcut_box .section .sec_right {display: table-cell; width: 50%; border:1px solid #ddd; vertical-align: top; }

.sub_content_wrap .prodcut_box .section.max_sec{border:1px solid #ddd;}
.sub_content_wrap .prodcut_box .section.max_sec .txt_box{width: 100%; overflow: hidden;}
.sub_content_wrap .prodcut_box .section.max_sec .txt_box ul{float: left; width: 50%;}

.sub_content_wrap .prodcut_box .box {width: 100%;  margin-bottom: 70px; overflow: hidden;}
.sub_content_wrap .prodcut_box .box .img_box img {width: 100%;}
.sub_content_wrap .prodcut_box .box .txt_box {background: #eee; padding:20px; }
.sub_content_wrap .prodcut_box .box .txt_box ul li{position: relative; padding-left: 12px; margin-bottom: 8px; line-height: 1.5;}
.sub_content_wrap .prodcut_box .box .txt_box ul li:before{content: ""; width: 3px; height: 3px; border-radius: 20px; background: #333; position: absolute; left: 0; top: 8px;}
.sub_content_wrap .prodcut_box .box .txt_box p {font-size: 1.5rem; text-align: center; color: #333;}
.sub_content_wrap .prodcut_box .box .box_left {float:left; width: 47%; border:1px solid #ddd; vertical-align: top; margin-right: 6%;}
.sub_content_wrap .prodcut_box .box .box_right {float:left; width: 47%; border:1px solid #ddd; vertical-align: top;}

.sub_content_wrap .prodcut_box .section .sec_right.sec_middle{vertical-align: middle; background: #eee;}
.sub_content_wrap .prodcut_box .section .txt_box .box_tit{margin: 10px 0 20px;}
.sub_content_wrap .prodcut_box .section .txt_box .box_tit > h5{font-size: 1.8rem; color: #333; text-align: left;}
.sub_content_wrap .prodcut_box .section .txt_box .box_tit span{margin-top: 8px;}

.sub_content_wrap .prodcut_box .partner_link{margin-bottom: 10px; font-weight: 600;}
.sub_content_wrap .prodcut_box .partner_link p{font-size: 1.3rem; color: #000; display: inline-block;}
.sub_content_wrap .prodcut_box .partner_link a{font-size: 1.7rem; color: #000;}

.sub_content_wrap .prodcut_box .section_con {margin-bottom: 70px;}
.sub_content_wrap .prodcut_box .con_sec{overflow: hidden;}
.sub_content_wrap .prodcut_box .con_sec .con{float: left; width: 32%; margin-right: 2%;}
.sub_content_wrap .prodcut_box .con_sec .con:last-child{margin-right: 0;}
.sub_content_wrap .prodcut_box .con_sec .con .img_box img {width: 100%;}
.sub_content_wrap .prodcut_box .con_sec .txt_box {background: #eee; padding: 20px; width: 100%; min-height: 142px;}
.sub_content_wrap .prodcut_box .con_sec .txt_box h5 {font-size: 1.8rem; color: #333; margin-bottom: 10px; font-weight: 600; line-height: 1.5;}
.sub_content_wrap .prodcut_box .con_sec .txt_box p {font-size: 1.5rem; color: #333;}

/*ci소개*/
.ci_box { position: relative; margin-bottom: 200px;}
.ci_box img {max-width: 100%;}
.ci_box strong {font-weight: bold; color: #000; font-size: 16px; margin:20px 0 10px; display: block;}
.ci_box p {line-height: 1.6;}
.ci_box .ci_download {position: absolute; bottom:3px; right: 0;}
.ci_box .ci_download a {width: 140px; height: 40px; line-height: 40px; border:1px solid #ddd; text-align: center; }
.ci_box .ci_download a:before {content: ''; display: inline-block; width:18px; height: 20px;  background: url('../images/sub/ci_ico.png') no-repeat 0 0; margin-right: 10px; vertical-align: middle;}

@media all and (max-width: 1350px) {
  .sub_content_wrap .sub_content {margin-right: 20px; margin-left: 20px;}
}

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

@media all and (max-width: 980px) {
    .sub_content_wrap .ceo_box .section .img_box span strong img {width: 80px;}
    .sub_content_wrap .history_box .img_box {float: none; width: 100%; margin-bottom: 4rem; padding:0 3rem;}
    .sub_content_wrap .history_box .txt_box {float: none; width: 100%; padding-left: 0; border:0;}
    .ci_box .ci_download {position: relative; bottom:0; right: 0; margin-top: 20px;}
}

@media all and (max-width: 768px) {
  .sub_content_wrap .sub_tab_menu_wrap {display: none;}  
  .sub_content_wrap .sub_title {height: 180px;}
  .sub_content_wrap .sub_content {margin-top:2rem; margin-bottom: 1rem; margin-right: 1rem; margin-left: 1rem;}
  .sub_content_wrap .sub_tab_menu_wrap .sub_tab_menu a {width: 50%;}
    .sub_content_wrap .prodcut_box h2{font-size: 2.4rem; margin-bottom: 10px;}
  .sub_content_wrap .sub_title h3 {font-size: 4rem;}
  .sub_content_wrap .sub_title h3:after {margin-top: 2rem;}
  .sub_content_wrap .search_box .search_area {width: 125px;}
  .sub_content_wrap .search_box select {width: 80px;}
  .sub_content_wrap .prodcut_box .section  {display: block; background: none; margin-bottom: 40px;}
  .sub_content_wrap .prodcut_box .section .sec_left.bottom_no{margin-bottom: 0px; border-bottom: 0;}
  .sub_content_wrap .prodcut_box .section .sec_left {display: block; width: 100%; border:1px solid #ddd; vertical-align: top; margin-bottom: 20px;}
  .sub_content_wrap .prodcut_box .section .sec_right {display: block; width: 100%; border:1px solid #ddd; vertical-align: top; }
  .sub_content_wrap .prodcut_box .section .txt_box ul li{margin-bottom: 2px; padding-left: 8px}
  .sub_content_wrap .prodcut_box .section .txt_box ul li:before{top: 6px;}

  .sub_content_wrap .prodcut_box .box  {display: block; background: none; margin-bottom: 40px;}
  .sub_content_wrap .prodcut_box .box .box_left {display: block; width: 100%; vertical-align: top; margin-bottom: 20px;}
  .sub_content_wrap .prodcut_box .box .box_right {display: block; width: 100%; vertical-align: top; }
  .sub_content_wrap .prodcut_box .box .txt_box ul li{margin-bottom: 2px; padding-left: 8px}
  .sub_content_wrap .prodcut_box .box .txt_box ul li:before{top: 6px;}
    
  .sub_content_wrap .prodcut_box .con_sec .con{float: none; width: 100%; margin-right: 0; margin-bottom: 40px;}


}
@media all and (max-width: 640px) {
    .sub_content_wrap .about_box .section .about_intro li {float: none; width: 100%; margin:0 0 2rem 0; text-align: center; border:0;}
    .sub_content_wrap .about_box .section .about_intro li:last-child {margin-bottom: 0;}
    .sub_content_wrap .about_box .section .about_company tr td, .sub_content_wrap .about_box .section .about_company tr th {padding:1rem;}
    .sub_content_wrap .about_box .section {margin-bottom:4rem;}
    .sub_content_wrap .sub_content h4:before {margin-bottom: 1rem;}
    .sub_content_wrap .sub_content h4 {margin-bottom: 2rem;}
    .sub_content_wrap .about_box .section .about_vision .img_box, .sub_content_wrap .about_box .section .about_vision .txt_box {float: none; width: 100%;}
    .sub_content_wrap .about_box .section .about_vision .img_box {margin-bottom: 2rem; padding:2rem;}

    .sub_content_wrap .ceo_box .section .img_box {top:unset; bottom: 5%;}
    .sub_content_wrap .ceo_box .section .img_box > img {display: none;}
    .sub_content_wrap .ceo_box .section .txt_box {float: none; width:100%;}
    .sub_content_wrap .ceo_box .section .img_box span strong {margin-top: 1rem;}
    
    .sub_content_wrap .prodcut_box .section.max_sec .txt_box ul{width: 100%;}
}

@media all and (max-width: 480px) {   
    .sub_content_wrap .history_box .txt_box ul li:first-child {border-top: 1px solid #eee; padding-top: 2rem;}
    .sub_content_wrap .history_box .txt_box ul li span {display: block; margin:2rem 0; }


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

}