:root {
  --maincolor: #2ECC71 ;
  --subcolor: #ffc900;
  --formcolor: #fff;
  --inputselectcolor : #f5217e;
  --h2color : #000;
  --formbtn: #fff;
  --formheight: 45px;
}
* {box-sizing: border-box; word-break: keep-all; line-height: 1.5rem; -webkit-user-drag: none;}
.maincolor {color: var(--maincolor);}
html {overflow-x: hidden; font-size: 16px; font-weight: 500;}
.inner {width: 1200px; position: relative; margin: 0 auto;}
img {object-fit: cover; display: block;}
::placeholder {color: #000;}



header {padding: 1.25rem 0; z-index: 10000; width: 100%; top: 0; left: 0; padding: 30px 0; color: #000; transition: 0.6s; width: 100%; position: absolute;}
header.on {background: #fff; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
header .inner {display: flex; align-items: center; justify-content: space-between;}
header .inner a {font-size: 1rem; letter-spacing: -1px;}
header .inner a.logo_text {font-size: 1.6rem; font-weight: 800; letter-spacing: -2px; color: #fff;}
header .inner > a > img {width: 150px;}
header .inner nav {}
header .inner nav ul {display: flex; gap: 20px;}
header .inner nav ul li {font-size: 1rem; font-weight: 500;}
header .inner nav ul li:hover a {color: var(--maincolor);}
header .inner nav ul li a {color: #fff;}


main #section1, main #section2, main #section3, main #section4, main #section5, main #section6, #section7 {padding: 5rem 0; position: relative;}
main #section2 .inner h2, main #section3 .inner h2, main #section4 .inner h2, #section5 .inner h2 {font-weight: bold; color: #1a1a1a; font-size: 2rem; line-height: 2.5rem; margin-bottom: 35px; letter-spacing: -2px;}

.bottom_wrap ul li, footer ul li {letter-spacing: 0px;}
.mobul {position: absolute; left: 0; top: 86px; display: flex; flex-direction: column; width: 100%; display: none;}
.mobul li {font-size: 1.2rem; font-weight: bold; background: #fff; width: 100%; border-bottom: 1px solid #ccc;}
.mobul li.on {color: #000;}
.mobul li:first-child {border-top: 1px solid #ccc;}
.mobul li a {display: block; padding: 30px 20px;}
header i {cursor: pointer; font-size: 2rem; display: none !important; position: relative; z-index: 10000; color: #000;}
.mobbg {width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: fixed; left: 0; top:0; z-index: 9999; display: none;}

/***************************************************************************************/

main #section1 {
  position: relative;
  background: url(../img/mainbg.png) no-repeat center/cover;
  background-color: rgba(0, 0, 0, 0.3);
  background-blend-mode: multiply;
  padding: 8rem 0;
}

main #section1 .inner {display: flex; position: relative; flex-direction: column;}
main #section1 .txt {position: relative; z-index: 1; display: flex; flex-direction: column; text-align: left; margin-bottom: 50px; text-align: center;}

main #section1 .txt h3 {font-size: 1.8rem; line-height: 2.3rem; color: #000; margin-bottom: 25px; letter-spacing: -2px; font-weight: 600; position: relative; z-index: 1;}
main #section1 .txt h2 {font-size: 2.5rem; line-height: 3.2rem; font-weight: 600; letter-spacing: -2px; margin-bottom: 30px; position: relative; z-index: 1; color: #fff;}
main #section1 .txt h2 b {color: var(--maincolor);}
main #section1 .txt p {color: #fff; font-weight: 300; font-size: 1.2rem; line-height: 1.7rem; letter-spacing: -1px;}

main #section1 .txt img {width: 30%; height: 100%; opacity: 0.5; margin-bottom: 30px;}

main #section2 {position: relative;}
/* main #section2::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../img/dog2.png) no-repeat center/cover; opacity: 0.5;} */
main #section2 .inner {}
main #section2 .inner .txt {margin-bottom: 50px;}
main #section2 .inner .txt h2 {position: relative; width: fit-content; background: var(--maincolor); color: #fff; padding: 5px 30px; border-radius: 100px; font-size: 1.8rem;}
main #section2 .inner .txt pre {font-size: 1rem; line-height: 1.7rem; letter-spacing: -1px; font-weight: 300;}
main #section2 .inner ul {display: grid; grid-template-columns: repeat(1, 1fr); gap: 30px;}
main #section2 .inner ul li {position: relative; padding: 50px; border-radius: 10px; display: flex; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; flex-direction: column; transition: 0.5s;  justify-content: center;}
main #section2 .inner ul li a {}
main #section2 .inner ul li a .txt_wrap {}
main #section2 .inner ul li a .txt_wrap h3 {color: var(--maincolor); font-size: 1.5rem; font-weight: 700; margin-bottom: 30px; letter-spacing: -2px;}
main #section2 .inner ul li a .txt_wrap pre {color: #fff; font-weight: 400;  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; margin-bottom: 50px; letter-spacing: -1px;}
main #section2 .inner ul li a span {color: #fff; border: 1px solid var(--maincolor); width: fit-content; padding: 5px 30px; border-radius: 100px; transition: 0.5s;}
main #section2 .inner ul li .txt_wrap h3 {font-size: 1.5rem; margin-bottom: 20px; line-height: 2.2rem; font-weight: 600;}
main #section2 .inner ul li pre {font-weight: 400;}


main #section2 .inner ul li::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; transition: 0.5s;}

main #section2 .inner ul li:nth-child(1)::before { background: #E8F9F1; }
main #section2 .inner ul li:nth-child(2)::before { background: #F1F8E9;}
main #section2 .inner ul li:nth-child(3)::before { background: #E3F2FD;}

pre {white-space: pre-wrap;}









@media (max-width:1400px) {

}

@media (max-width:1300px) {


}

@media (max-width:1270px) {
  .inner{width: 90%;}
/***************************************************************************/
}



@media (max-width:1200px) {
}

@media (max-width:1100px) {

}


@media (max-width:1070px) {
  .mobimg {display: none;}
  .bottombg {display: none;}
/*****************************************************************************************/

}
@media (max-width:985px) {



}

@media (max-width:959px) {



}

@media (max-width:940px) {



}

@media (max-width:888px) {


}

@media (max-width:767px) {

  html {font-size: 14px;}
/*******************************************************************************************/
main #section2 .inner .txt h2 {text-align: center;}
main #section1 .txt {text-align: center; margin-bottom: 0;}
main #section1 .inner {gap: 50px;}
main #section1 .txt h2 {font-size: 2.2rem;}
.bohum_swiper {margin-bottom: 0 !important;}
}

@media (max-width:680px) {

}


@media (max-width:650px) {
  main #section2 .inner ul {grid-template-columns: repeat(1, 1fr);}
}





@media (max-width:586px) {


}

@media (max-width:470px) {



}
@media (max-width:430px) {

}
















@media (max-width:600px) {



}

/*마우스 올렸을때 PC*/
@media (min-width: 767px) {

}






/* @media (min-width:767px) {
  .mobul {display: none !important;}
  .mobbg {display: none !important;}
} */