@import url(https://use.fontawesome.com/releases/v5.15.2/css/all.css);
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@charset "utf-8";

/* Reset CSS  */
html { height: 100%; overflow-y:scroll;}
body { font-size: 13px; color:#000;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, th, td, p { margin: 0px; padding:0px;  list-style:none;  font-family:"Pretendard", sans-serif;}
fieldset{ border: 0px; }
a{font-style:normal; text-decoration:none; color:#000;}
hr, legend {height: 0; left: -5000px; line-height: 0; overflow-x: hidden; overflow-y: hidden; position: absolute; visibility: hidden;width: 0;}
caption {font-size: 0; height: 0; line-height: 0; visibility: hidden; width: 0;}
* {-webkit-text-size-adjust:none;}
* { margin:0; padding:0; border:0; outline:0;  }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
img, video { max-width:100%; border:0; height:auto; vertical-align:top; }
table { border-collapse:collapse; border-spacing:0; border: 0px solid #E5E5E5; }
input, select { vertical-align:middle; }
label { cursor:pointer; }
.blind,legend,hr,caption { display:block; overflow:hidden; position:absolute; top:0; left:-1000em; }
i,em,address { font-style:normal; font-weight:normal; }
td,th {vertical-align: middle;line-height: 1.6;}
td strong {font-weight: 100;	font-size: 5px;vertical-align: bottom;}
a:hover{text-decoration:none;}
ul:after{content:""; display:block; clear:both;}

.container { max-width: 1410px; width:100%; margin: 0 auto; position: relative; box-sizing: border-box; padding:0 15px;}
.container:after {content: ""; display: block; clear: both;}

/*formmail*/
#select-form{border:1px solid #ddd; width:100%; padding:15px 10px; font-size:15px}
.fields{position:relative; margin-top:30px; border-top:1px solid #ddd;}
.fields li{display:flex;border-bottom:1px solid #ddd;  align-items:center; padding:15px;}
.fields .lbl{width:200px;font-size:15px; cursor:text}
.fields .desc{width:100%;}
.fields .input{border:1px solid #ddd; padding:15px 10px; box-sizing:border-box; width:100%}
.fields .input.full{width:100%}
.fields .btn-group{margin-top:34px; text-align:center}
.fields .btn-group span{font-size:16px; color:#999;}
.fields .btn-group a{font-size:16px; color:#000; font-weight:bold;}
.fields .btn-group a:hover{text-decoration:underline}
input[id="agree-check"] + label {display: inline-block; width: 20px; height: 20px; border: 1px solid #bbb; cursor: pointer;margin: 0 4px 4px 0;}
input[id="agree-check"]:checked + label {border-color:#0b4ea2; background:url('../img/agree_check.png') no-repeat center center;}
input[id="agree-check"] {display: none;}
.fields .btn-submit{background:#0b4ea2; color:#fff; font-size:16px; font-weight:bold; padding: 15px 47px; border:none; outline:none; margin-top:35px;}

#header {height: 70px;}
#header .gnb_bg{width: 100%; height: 240px; background: rgba(255,255,255,0.99); position: absolute; top:70px; left:0; display: none; *border-top: 1px solid #37702f; border-radius: 0 0 20px 20px; box-shadow: 0 0px 20px 0 #efefef; z-index: 2;}
#header .header_wrap {position: relative; margin: 0 auto; height: 100%;}
#header .header_wrap .header_wrap2 {max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 100%;}
#header .logo {padding: 5px;}
#header .logo img {width: 65%;}
#header .gnb {width: 70%;}
#header .gnb > ul {height: 70px; display: flex; align-items: center;}
#header .gnb > ul > li {float: left; padding: 0 30px; font-size: 18px; position: relative;}
#header .gnb > ul > li > a {display: block; position: relative;}
#header .gnb > ul > li > ul {display: none; position: absolute; z-index: 99; top: 25px; left: 50%; transform: translate(-50%); text-align: center;}
#header .gnb > ul > li > ul li a {padding-bottom: 30px; display: block;}
#header .gnb > ul > li > ul li:first-child a {padding-top: 45px;}
#header .gnb > ul > li > a:after {content: ""; width: 0; height: 2px; background: #37702f; position: absolute; bottom: -10px; left: 0; transition: all 0.3s;}
#header .gnb > ul > li > a:hover:after {width: 100%;}
#header .gnb .lnb li a {transition: all 0.3s; white-space: nowrap;}
#header .gnb .lnb li a:hover {color: #37702f;}

#header .menu_btn {background: #37702f; color: #fff; height: 70px; display: flex; align-items: center; position: absolute; right: 0; top: 0; cursor: pointer; width: 15%; padding-left: 30px;}
/* #header .menu_btn:before {content: ""; position: absolute; left: -50px; background: #37702f; height: 100%; width: 400px; z-index: -1;} */
#header .menu_btn .btn_span {display: inline-block; width: 40px; height: 70px; z-index: 9999;}
#header .menu_btn .btn_span span {width: 40px; height: 2px; background: #fff; display: block; position: absolute; transition: all 0.3s;}
#header .menu_btn .btn_span span:nth-child(1) {top: 30%;}
#header .menu_btn .btn_span span:nth-child(2) {top: 50%;}
#header .menu_btn .btn_span span:nth-child(3) {bottom: 25%;}
#header .menu_btn .btn_span.active span:nth-child(1) {-webkit-transform: translateY(14px) rotate(-45deg); transform: translateY(14px) rotate(-45deg);}
#header .menu_btn .btn_span.active span:nth-child(2) {opacity: 0;}
#header .menu_btn .btn_span.active span:nth-child(3) {-webkit-transform: translateY(-16px) rotate(45deg);transform: translateY(-16px) rotate(45deg);}
#header .menu_btn p {font-size: 16px; margin-left: 15px; line-height: 70px;}
#header .mobile_menu {display: none; background: rgba(0, 0, 0, 0.9); width: 100%; height: 100%; position: fixed; top: 0; z-index: 999; padding-top: 40px ;}
#header .mobile_menu .m_gnb {max-width: 1400px; height: 100%; margin: 0 auto; position: relative;}
#header .mobile_menu .m_gnb > ul {display: flex; justify-content: space-between; text-align: center; position: absolute; width: 100%; left: 0; top: 20%;}
#header .mobile_menu .m_gnb > ul:after {display: none;}
#header .mobile_menu .m_gnb > ul > li > a {font-size: 22px; font-weight: 600;}
#header .mobile_menu .m_gnb .lnb li a {font-size: 18px; margin: 30px 0; display: block; font-weight: 300;}
#header .mobile_menu .m_gnb .lnb li a:after {content: ""; width: 0; height: 2px; background: #37702f; display: block; margin-top: 5px; transition: all 0.3s;}
#header .mobile_menu .m_gnb .lnb li a:hover:after {content: ""; width: 100%; height: 2px; background: #37702f; display: block;}
#header .mobile_menu .m_gnb a {color: #fff; text-align: all 0.3s;}
#header .mobile_menu .m_gnb a:hover {color: #37702f;}


#main {overflow: hidden;}
#main .swiper-slide .title {position: absolute; color: #fff; top: 30%; left: 13%;}
#main .swiper-slide .title h3 {font-size: 62px;}
#main .swiper-slide .title h4 {font-size: 24px; font-weight: 200; margin-top: 20px;}


/*sub*/
.container {max-width: 1400px; margin: 150px auto;}


/*sub0101*/
#sub0101 .con01 .container {display: flex; justify-content: space-between;}
#sub0101 .con01 .left {}
#sub0101 .con01 .left > div {width: 300px;}
#sub0101 .con01 .left .up {height: 300px; background: url(../img/sub0101_01.png) no-repeat center center; display: flex; align-items: center; justify-content: center; color: #fff;}
#sub0101 .con01 .left .up p {font-size: 36px; width: 80%; text-align: center; word-break: keep-all;}
#sub0101 .con01 .left .down {background: #37702f; margin-top: 5%; text-align: center; color: #fff; padding: 30px; font-size: 20px; font-weight: 300; line-height: 30px; display: flex; flex-direction: column; justify-content: center;}
#sub0101 .con01 .left .down p:first-child:after {content: ""; display: block; margin: 45px auto; width: 2px; height: 90px; background: #fff;}
#sub0101 .con01 .right {color: #37702f; margin-left: 20px;}
#sub0101 .con01 .right h3 {font-size: 32px; word-break: keep-all;}
#sub0101 .con01 .right p {font-size: 20px; margin-top: 20px; line-height: 37px; max-width: 950px; word-break: keep-all;}

/*sub0102*/
#sub0102 {max-width: 90%; margin: 100px auto 0;}
#sub0102 h3 {font-size: 32px; margin-bottom: 20px;}
#sub0102 p {font-size: 16px; line-height: 36px;}

/*sub0103*/
#sub0103 .con01 .container {display: flex; justify-content: space-between;}
#sub0103 .con01 .map {width: 75%;}
#sub0103 .con01 .info {width: 20%; position: relative;}
#sub0103 .con01 .info h3 {font-size: 32px;}
#sub0103 .con01 .info ul {margin-top: 30px;}
#sub0103 .con01 .info ul li {margin-bottom: 50px; position: relative;}
#sub0103 .con01 .info ul li:before {content: ""; width: 3px; height: 100%; background: #37702f; position: absolute; border-radius: 10px;}
#sub0103 .con01 .info ul li b {font-size: 20px; margin-bottom: 10px; margin-left: 10px; display: block;}
#sub0103 .con01 .info ul li p {font-size: 16px; margin-left: 10px;}
#sub0103 .con01 .info .img_box {position: absolute; bottom: 0;}
#sub0103 .con01 .info .img_box img:first-child {margin-bottom: 10px;}

/*sub0601*/
#sub0601 .mail_title {margin-bottom: 30px;}
#sub0601 .mail_title h3 {font-size: 26px; text-align: center;}
#sub0601 .mail_title h3 b {color: #37702f;}
#sub0601 .fields li {padding: 25px 15px;}
#sub0601 .fields .lbl {width: 150px; text-align: center; background: #d0e0cd; padding: 10px 20px; border-radius: 40px; color: #105b05; margin-right: 30px; font-weight: 600;}
#sub0601 .fields .desc {border: 1px solid #ddd;}
#sub0601 .fields .desc input {min-height: 40px; padding: 10px; width: 100%;}
#sub0601 .fields .desc textarea {width: 100%;}
#sub0601 .btn-group button {background: #a9a9a9; padding: 14px 50px; border-radius: 50px; font-weight: 600; color: #565656; transition: all 0.3s;}
#sub0601 .btn-group button:hover {background: #37702f; color: #fff; }


/*Footer*/
#footer {height: 150px; display: flex; justify-content: center; align-items: center; color: #d8d9d8; font-size: 16px;}



/*Mobile*/
@media (max-width: 1500px) {
  #header .gnb {display: none;}
  #header .mobile_menu .m_gnb {width: 70%;}
}

@media (max-width: 1200px) {
  #header .mobile_menu .m_gnb {width: 80%;}

  #sub0101 .con01 .container {flex-direction: column;}
  #sub0101 .con01 .left {display: flex; justify-content: space-between; margin-bottom: 50px;}
  #sub0101 .con01 .left .down {font-size: 18px; font-weight: 200; line-height: 25px; width: 100%; margin-top: 0; margin-left: 20px;}
  #sub0101 .con01 .left .down p:first-child:after {margin: 15px auto; height: 60px;}
  #sub0101 .con01 .right {margin-left: 0;}
  #sub0101 .con01 .right p {max-width: none;}

  #sub0103 .con01 .container {flex-direction: column;}
  #sub0103 .con01 .map {width: 100%; height: 500px; overflow: hidden;}
  #sub0103 .con01 .info {width: 100%; margin-top: 30px;}
  #sub0103 .con01 .info ul {display: flex; justify-content: space-between;}
  #sub0103 .con01 .info ul li {width: 33.3333%}
  #sub0103 .con01 .info .img_box {display: none;}

  .fields .desc {width: 95%;}
  #sub0601 .fields .lbl {width: 95%; display: block;}
  #sub0601 .fields .desc {width: 95%;}
}

@media (max-width: 870px) {
#header .menu_btn p {display: none;}
#main .swiper-slide .title h3 {font-size: 42px;}
#main .swiper-slide .title h4 {font-size: 20px;}
}

@media (max-width: 768px) {
  #header .menu_btn {width: 20%; padding-left: 20px;}
  #header .mobile_menu .m_gnb {width: 95%; overflow-y: scroll;}
  #header .mobile_menu .m_gnb > ul {top: 0; flex-direction: column;}

  #main {height: 500px;}
  #main .swiper {height: 100%;}
  #main .swiper .swiper-slide {height: 100%;}
  #main .swiper .swiper-slide img {display: none;}
  #main .swiper .slide01 {background:url('../img/banner_01.png') no-repeat center center;}
  #main .swiper .slide02 {background:url('../img/banner_01.png') no-repeat center center;}
  #main .swiper .slide03 {background:url('../img/banner_01.png') no-repeat center center;}
  #main .swiper-slide .title {left: 5%;}
  #main .swiper-slide .title h3 {font-size: 28px;}
  #main .swiper-slide .title h4 {font-size: 18px;}

  .container {margin: 70px auto;}

  #sub0101 .con01 .left {flex-direction: column;}
  #sub0101 .con01 .left .up {width: 100%;}
  #sub0101 .con01 .left .down {margin-left: 0; margin-top: 20px; padding: 15px;}
  #sub0101 .con01 .right h3 {font-size: 24px;}
  #sub0101 .con01 .right p {font-size: 16px; line-height: 28px;}

  #sub0103 .con01 .info ul {flex-direction: column;}
  #sub0103 .con01 .info ul li {width: 100%;}
  #sub0103 .con01 .info ul li b {font-size: 24px;}
  #sub0103 .con01 .info ul li p {font-size: 18px;}

  #sub0601 .fields li {flex-direction: column;}
  #sub0601 .fields .lbl {width: 100%; margin-bottom: 10px; margin-right: 0;}
  #sub0601 .fields .desc {width: 100%;}
}