@charset "utf-8";

html,body{  position:relative;  background:#f5f5f5; overflow-x:hidden   }
html.open,body.open{ overflow: hidden;  }

.sprite{ background-image:url("../images/common/sprite.png"); background-repeat: no-repeat; background-size:650px }
.container{ padding:15px; }

.info_main{ background:url("../images/info/bg_main.jpg") center no-repeat; background-size:cover; }
.info_main .logo{ margin-bottom:50px; }
.info_main .logo a{ display:block; width:153px; height:37px; text-indent: -9999px; background-size:600px; background-position:-155px 0;  transition: cubic-bezier(.2,.62,.51,.9) 0.3s ease 0.6s;  }
.info_main .slogan{ display:block; position:absolute; top:15px; right:15px; text-indent:-9999px; width:100px; height:32px; background-position:-103px -200px; background-size:350px; z-index: 100   }
.info_main .site_img{ text-align: center; margin-bottom:30px; }
.info_main .site_img img{ max-width:100%; }
.info_main .site_img .old{ width:45%; }
.info_main .site_img .new{ width:80%; }


.info_main > div > p{ font-family: 'Noto Serif KR'; font-weight:500;  text-align: center; color:#fff; line-height: 1.5}
.info_main > div > p.s_title{ font-size:16px; }
.info_main > div > p.title{ font-size:23px; margin-bottom:20px;  }
.info_main > div > p.title span{ color:#fff260; }

.process_ui li{ margin-bottom:15px; }
.process_ui li:before{ display:inline-block;  color:#e03939;  content:"\f354"; font-family:"Font Awesome 5 Pro"; font-weight:bold; font-size:30px; }
.process_ui li:first-child:before{ display:none; }
.process_ui li img{ box-shadow:rgba(0,0,0,0.4) 10px 10px 5px;  border:#424242 solid 1px; }

.process_ui_2 li{ margin-bottom:15px; }
.process_ui_2 li:before{ display:inline-block;  color:#e03939;  content:"\f354"; font-family:"Font Awesome 5 Pro"; font-weight:bold; font-size:30px; }
.process_ui_2 li:first-child:before{ display:none; }
.process_ui_2 li img{ box-shadow:rgba(0,0,0,0.4) 10px 10px 5px;  border:#424242 solid 1px; }

.site_num{ margin-bottom:30px; }
.site_num li{ background:#fff; border:#e4e4e4 solid 1px; border-radius: 15px; padding:25px 15px; text-align: center }
.site_num li:before{ display:none; }
.site_num li .title{ font-weight:500; margin-bottom:20px; font-size:18px;}
.site_num li .num{ display:block; color:#eb4141; font-size:45px; font-weight:bold; margin-bottom:20px; }
.site_num li .list{ font-size:14px; line-height:1.3; word-break:keep-all }

.tab_middle{ position:relative; transition: 0.3s;  }
.tab_middle.fixed{ position:fixed; top:0; left:0; width:100%; background:#fff;border-bottom:#ddd solid 1px; transition: 0.3s; z-index: 1000}
.tab_menu{ display:flex; justify-content: space-around; padding:15px 0;}
.tab_menu li a{ display:block; text-align: center; font-size:14px; font-weight:500; }
.tab_menu li a span{ display:flex; justify-content: center; align-items: center; font-size:25px; background:#eb4141; color:#fff; width:60px; height:60px; border-radius: 50%; margin:0 auto 10px auto; }
.tab_menu li a.active span{ background:#863a3a; }
.tab_menu li:nth-child(4) span{ transform: rotate(-45deg)}

.content_tab article.fixed{ padding-top:200px; }
.content_tab article h2{ font-family: 'Noto Serif KR'; font-weight:bold;  text-align: center; margin-bottom:40px;  }
.content_tab article{ display:none; }
.content_tab div article:first-child{ display:block; }
.content_tab article > p{ text-align: center; line-height: 1.5 }
.tab_content{ margin:40px 0; border-bottom:#ddd solid 1px; padding-bottom:40px; }
.tab_content .img_wrap img{ max-width:100%; }
.tab_content .img_wrap img.mw50{ display:block; margin:0 auto; max-width:50%; }
.tab_content h3{ font-family: 'Noto Serif KR'; font-weight:bold; text-align: center; margin:30px 0 15px; }
.tab_content p{ font-size:14px; line-height: 1.3; text-align: center; margin-bottom:20px; word-break: keep-all; }
.tab_content p br{ display:none }

.link_list li a:before{ display:inline-block; vertical-align: -2px; content:""; width:25px; font-size:20px; font-family:"Font Awesome 5 Pro"; font-weight:bold;  margin-right:5px; }
.link_list li:nth-child(1) a:before{ content:"\f85a"; }
.link_list li:nth-child(2) a:before{ content:"\f965"; }
.link_list li:nth-child(3) a:before{ content:"\f3b3"; }
.link_list li:nth-child(4) a:before{ content:"\f0fa"; }
.link_list li:nth-child(5) a:before{ content:"\f82c"; }
.link_list li:nth-child(6) a:before{ content:"\f53b"; }
.link_list li:nth-child(7) a:before{ content:"\f0e3"; }
.link_list li:nth-child(8) a:before{ content:"\f06c"; }
.link_list li:nth-child(9) a:before{ content:"\f72d"; }
.link_list li:nth-child(10) a:before{ content:"\f06d"; }
.link_list li:nth-child(11) a:before{ content:"\f7a6"; }

.site_wrap{ margin-bottom:20px; padding-bottom:20px; }
.site_wrap .site_title{ display:block; font-weight:500; margin-bottom:20px;  font-size:20px; }
.site_wrap .img_wrap img{ max-width:100%; }
.site_wrap .links { padding:15px 0; }
.site_wrap .links span{ display:inline-block; font-weight:500; color:#414141;   }
.site_wrap .links a{ display:inline-block; border:#e03939 solid 1px; border-radius: 3px; padding:5px 15px ; color:#e03939; font-size:14px; font-weight:500; margin-left:20px; }
.site_wrap .link_list{ display:flex; flex-wrap:wrap; justify-content: space-between;}
.site_wrap .link_list li{ margin-bottom:10px; width:48%; }
.site_wrap .link_list li a{ display:block; color:#e03939; border:#e03939 solid 1px; border-radius: 5px; padding:6px 10px; font-weight:500;  text-align: center; }

.site_slide_wrap{ position: relative; padding:0 25px; margin-bottom:20px;  }
.site_slide li{ float:left; background:#fff; width:300px; margin:0 15px; border-radius: 15px; overflow:hidden }
.site_slide li .thumb{ height:200px; background-size:cover; background-position:top center; }
.site_slide li .info{ height:60px; padding:0 15px; display:flex; justify-content: space-between; align-items: center; border-top:#ddd solid 1px; }
.site_slide li .info span{ display:inline-block; font-weight:500; }
.site_slide li .info a{ display:inline-block; border:#e03939 solid 1px; border-radius: 3px; padding:5px 15px ; color:#e03939; font-size:14px; font-weight:500; margin-left:0; }
.site_slide li .info a:hover{ color:#fff; background:#e03939 }
.site_ctrl{ position:absolute; top:50%; width:100%; left:0; right:0; }
.site_ctrl a{ position:absolute; color:#e03939; font-size:30px; transform:translateY(-100%); }
.site_ctrl a.prev{ left:0; }
.site_ctrl a.next{ right:0; }

.site_banner li{ border:#ddd solid 1px; padding:20px; border-radius: 15px; background:#fff; margin-bottom:20px; }
.site_banner li span{ font-weight:bold; display:block; margin-bottom:15px; }
.site_banner li p{ font-size:14px; line-height: 1.3 }
.site_banner li img{ max-width:100%; }

.service_list{ padding:0 30px; }
.service_list li{ text-align: center; }
.service_list li span{ display:block; font-weight:500; padding:15px 0 0; color:#666;  }
.service_list li img{ max-width:100%; }

#intro_footer{ background:#1e1e1e; color:#fff; text-align: center; padding:30px 15px;}
.logo_bottom{  display:inline-block; width:153px; height:37px; margin-bottom:20px;  text-indent: -9999px; background-size:600px; background-position:-155px 0; transition: cubic-bezier(.2,.62,.51,.9) 0.3s }
.copyright{ margin-bottom:10px; }
.copyright p{ font-size:14px; line-height: 1.3; color:#636363; }
.info_num p{ font-size:12px; color:#8c6d3d; line-height: 1.5 }

@media all and (min-width:768px) {
  .info_main > div > p.s_title{ font-size:18px; }
  .info_main > div > p.title{ font-size:25px; }

  .info_main .site_img{ display:flex; justify-content: center; align-items: center; }
  .info_main .site_img .old{ width:30%; margin-right:20px; }
  .info_main .site_img .new{ width:45%; }

  .process_ui{ display:flex; justify-content: space-between; }
  .process_ui li{ position:relative; width: 30%; margin-bottom:0; }
  .process_ui li:before{ position:absolute; left:0; top:50%; transform: translateX(-100%) translateY(-70%) rotate(-90deg); }
  .process_ui li:first-child:before{ display:none; }
  .process_ui li:nth-child(n+4){ margin-top:30px; }

  .process_ui_2 { display:flex; justify-content: space-between; }
  .process_ui_2 li{ position:relative; width: 50%; margin-bottom:0; }
  .process_ui_2 li:before{ position:absolute; left:0; top:50%; transform: translateX(-100%) translateY(-70%) rotate(-90deg); }
  .process_ui_2 li:first-child:before{ display:none; }
  .process_ui_2 li:nth-child(n+4){ margin-top:30px; }

  .tab_middle .tab_menu{ max-width:50%; margin:0 auto }

  .content_tab article{ padding:30px 0; }
  .content_tab article h2{ font-size:30px; }
  .tab_content{ overflow:hidden }
  .tab_content h3{ margin-bottom:40px; }
  .tab_content p{ margin-bottom:30px; }
  .tab_content p br{ display:block }
  .tab_content.con_left .img_wrap{ float:left; width:45%; margin-right:20px; }
  .tab_content.con_left h3,.tab_content.con_left p{ text-align:left }

  .tab_content.con_right .img_wrap{ float:right; width:45%; margin-left:20px; }
  .tab_content.con_right h3,.tab_content.con_right p{ text-align:right }

  .tab_content.con_center .img_wrap{ text-align: center; }
  .tab_content.con_center .img_wrap img{ max-width:400px; }

  .site_wrap{ overflow:hidden }
  .site_wrap .img_wrap{ float:left; width:45%; margin-right:30px;  }

  .site_wrap .link_list li{ width:24%;}

  .site_banner{ margin-top:40px; }
  .site_banner ul{ display:flex; justify-content: space-between; align-items: stretch;}
  .site_banner ul li{ width:48%; padding:30px; }
  .site_banner li span{ font-size:18px; margin-bottom:20px; }

  .service_list{ flex-wrap:wrap !important }
  .service_list li span{ padding-top:30px; color:#777; }

}

@media all and ( min-width:1024px){
  .container{ position:relative; max-width:1024px; margin:0 auto; padding:15px; }
}

@media all and ( min-width:1440px){
  .container{ position:relative; max-width:1400px; margin:0 auto; padding:40px 70px; }
  .info_main .logo{ margin-bottom:150px; }
  .info_main .logo a{ background-size:auto; width:155px; height:39px; background-position:-171px 0; }
  .info_main .slogan{ width:145px; height:48px; right:70px; top:45px; background-position:-125px -253px; background-size:450px; }

  .info_main > div > p.s_title{ font-size:35px; text-align: left; font-weight:bold; text-shadow:rgba(0,0,0,0.4) 1px 1px 1px;  }
  .info_main > div > p.title{ font-size:57px;  text-align: left;  font-weight:bold;  text-shadow:rgba(0,0,0,0.4) 1px 1px 1px; margin-bottom:50px; }

  .info_main .site_img .new,.info_main .site_img .old{ width:auto; }

  .site_num li{ padding:57px 30px; }
  .site_num li .title{ font-size:25px; }
  .site_num li .num{ font-size:67px; margin-bottom:45px; }
  .site_num li .list{ font-size:16px; line-height: 1.5; font-weight:300; }

  .process_ui li:before{ font-size:45px; }
  .process_ui_2 li:before{ font-size:45px; }

  .tab_menu li a{ font-size:20px; }
  .tab_menu li a span{ width:125px; height:125px; font-size:50px; transition:0.3s }
  .tab_middle.fixed .tab_menu{ max-width:40%; }
  .tab_middle.fixed .tab_menu li a{ font-size:16px; }
  .tab_middle.fixed .tab_menu li a span{ width:80px; height:80px; font-size:35px; transition:0.3s  }

  .content_tab article h2{ font-size:45px; margin-bottom:70px }

  .tab_content.con_center .img_wrap img{ max-width:100%; }

  .tab_content{ margin:70px 0; padding-bottom:70px; }
  .tab_content h3{ font-size:30px; }
  .tab_content p{ font-size:16px; color:#666; line-height: 1.5}

  .tab_content.con_right .img_wrap{ margin-left:50px; }
  .tab_content.con_left .img_wrap{ margin-right:50px; }

  .site_wrap{ margin-bottom:70px; }
  .site_wrap .site_title{ margin-bottom:30px; }
  .site_wrap .link_list{ justify-content: flex-start; }
  .site_wrap .link_list li{ width:16%; margin-right:0.8% }
  .site_wrap .link_list li:nth-child(6){ margin-right:0; }
  .site_wrap .link_list li a{ font-size:18px; padding:10px 0;  }
  .link_list li a:before{ vertical-align: 0px; }

  .site_slide li{ width:270px; }
  .site_slide li .info{ height:80px;  }
  .site_slide li .info span{ display:block; }

  .site_banner li span{ font-size:20px; }
  .site_banner li p{ font-size:16px; line-height: 1.5; word-break:keep-all }
  .site_banner li .links{float:left; }
  .site_banner li .links span{ display:block; }
  .site_banner li .links a{ margin-left:0; }
  .site_banner li img{ float: right; }

  #intro_footer .container{ margin:0 auto; padding:35px 70px;  overflow:hidden  }
  .logo_bottom{ float:left;margin:0 50px 0 0;width:157px;height: 37px;background-position: -158px 0;}
  .copyright{ float: left; }
  .copyright p{ text-align: left; line-height: 1.5}
  .copyright p br{ display:none; }
  .info_num{ float:right; text-align: right; }
  .info_num p{ font-size:14px; }
}