* {color: #333;}
#A_Wrap {max-width:100%; overflow-x: hidden;}


/* visual */
#visual {position:relative; height: 100vh; font-family: 'Noto Sans KR', sans-serif;}
#visual .slide_img01 {background:url(../images/visual.jpg) no-repeat center center / cover;}
#visual .slide_img02 {background:url(../images/slide02.jpg) no-repeat center center / cover;}
#visual .slide_img03 {background:url(../images/slide03.jpg) no-repeat center center / cover;}
#visual .slide .inner {position: relative; height: 100vh; width:1350px; margin:0 auto;}
#visual .slide .inner .txt_box {position: absolute; top: 50%; transform: translateY(-50%); left: 0; position: relative; text-align: center;;}

#visual .slide .inner .txt_box .title p {line-height: 80px;  font-size:84px; font-weight: 600; color: #fff;  font-family: 'Noto Sans KR', sans-serif;}
#visual .slide .inner .txt_box p {margin: 0; padding: 0 0 0 0; line-height: 1.8; color: #fff;  font-size: 28px; font-weight: 300; padding-top: 60px;}
#visual .slide .inner .txt_box p:nth-of-type(1) {}
#visual .slick-counter {position: absolute; right:15%; top:58%; transform: translateY(-50%);  width:150px;}
#visual .slick-counter:before {display: block; position: absolute; top: 30%; transform: translateY(-50%) rotate(25deg); left: 15%; right: 0; margin: 0 auto; width: 1px; height:30px; background-color: #fff; content: '';}
#visual .slick-counter span {display: block; line-height: 30px;  font-size: 37px; color: rgba(255,255,255,0.8);}
#visual .slick-counter .current {float: left; font-size:114px; font-weight: 700; color: rgba(255,255,255,1); margin-top: -30px; display: inline-block;}
#visual .slick-counter .total {float: right;}


.main_tit {text-align: center;}
.main_tit h2 {display: block; font-family: 'Noto Sans KR', sans-serif; font-weight: 700; font-size: 42px; color: #333; letter-spacing: -3px; margin-bottom: 40px;}
.main_tit p {margin:  0 0 0; font-size: 16px; color: #666; }

.slick-arrow {position:absolute; top:50%;  z-index: 1;}

.slick-next {right:0%; display:block !important; background: url(../images/arr_r.png) no-repeat; background-size: contain; width:85px; height:85px; font-size: 0;}
.slick-prev {left:0%; display:block !important; background: url(../images/arr_l.png) no-repeat; background-size: contain; width:85px; height:85px; font-size: 0;}
.slick-next:hover {opacity:0.6;}
.slick-prev:hover {opacity:0.6;}


#visual .slide .inner .txt_box p {font-size: 28px;}
#visual .slide .inner .txt_box p span {color: #c1c1c3;  display: inline-block; padding-left: 25px; margin-left: 25px; position: relative;}
#visual .slide .inner .txt_box p span:after {content: ''; position: absolute; width:1px;height:40px; background-color: #d9dbda; top:50%; left:0; transform: translateY(-50%);}
#visual .slide .inner .txt_box p:nth-of-type(2) {font-size: 24px;}


.section { position: relative;}
.section .inner {width:1350px; margin:0 auto; position: relative;}



/* font-size */
.fz14 {font-size: 14px;}
.fz15 {font-size: 15px;}
.fz60 {font-size: 60px;}
.fz26 {font-size: 26px;}
.fz48 {font-size: 48px;}
.fz30 {font-size: 30px;}
.fz20 {font-size: 20px !important;}
.fz18 {font-size: 18px;}
.fz42 {font-size: 42px;}
.fz44 {font-size: 44px;}
.fz28 {font-size: 28px;}
.fz38 {font-size: 38px;}

.tac {text-align: center;}

/* font-weight */
.fwbold {font-weight: 600; font-family: 'Noto Sans KR', sans-serif;}
.fw300 {font-weight: 300px;}

/* letter */
.ls-1 {letter-spacing: -1px;}

/* color */
.cf {color: #fff !important;}
.c3 {color: #333;}
.c6 {color: #666;}
.c9 {color: #999;}
.cfa {color: #fafafa !important;}
.cpoint {color: #197929;}
/* bg */
.bg01 {background: #1d6a48;}
.bg02 {background: #419b9a;}
.bg03 {background: #34779e;}

/* padding margin */
.pb20 {padding-bottom: 20px;}
.pb30 {padding-bottom: 30px;}
.pb40 {padding-bottom: 40px;}
.pb50 {padding-bottom: 50px;}
.pb90 {padding-bottom: 90px;}
.p110 {padding:110px 0;}
.p90 {padding: 90px 0;}
.p100 {padding: 100px 0;}
.pb170 {padding-bottom: 170px;}

/* line-height */
.lh1-8 {line-height: 1.8;}
.lh1-5 {line-height: 1.5;}

/* display */
.dib {display: inline-block;}
.dblock {display: block;}
.dflex {display: flex;}

/* border */

.bdbtw {border-bottom: 2px solid transparent;}
.bdbtw:hover {border-bottom: 2px solid #fff;}

/* opacity */
.opa4 { animation: opa4 1s linear !important; animation-fill-mode:both; opacity:0.4 !important; cursor:pointer;}
.opa4:hover {opacity: 1 !important;}
/* .txtBox:hover .opa4 {opacity:1 !important;}
.section.cnts ul li .overlay:hover .opa4 {opacity:1 !important;} */

@keyframes opa4 {
    0% {opacity: 0 !important;}
    100% {opacity: 0.4 !important;}
}

/* position */
.posA {position: absolute;}


.section {padding:100px 0;}
.main_tit h5 {padding-bottom: 40px; letter-spacing: 1.5px;}



/* section01 */
.section01 ul {display: flex;}
.section01 ul li {width:calc((100% - 34px) / 2); height:400px; padding:40px; position: relative; cursor:pointer;}
.section01 ul li:nth-of-type(1) {margin-right: 17px; background: url(../images/process01.jpg) no-repeat center;}
.section01 ul li:nth-of-type(2) {margin-left: 17px; background: url(../images/process02.jpg) no-repeat center;}
.section01 ul li .overlay {display:flex; display: none; position: absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(to right, #32c072c0, #046e34b6); justify-content: center; align-items: center; flex-direction: column;}
.section01 ul li .txt {display: flex; justify-content: start; align-items: end; height:100%;}
.section01 ul li:hover .txt {display: none;}
.section01 ul li:hover .overlay {display: flex;}
.section01 ul li .overlay  p img {vertical-align: middle; padding-left: 10px;}
.section01 ul li:hover .overlay:after {content: ''; position: absolute; width:90%; height:90%; border: 1px solid #ddd;}

/* section02 */
.section02 {background: url(../images/about_bg.png) no-repeat center; box-sizing: border-box; background-size: cover;}
.section02 ul {display: flex; width:100%;}
.section02 ul li {width:calc((100% - 300px) / 4);  margin-right: 100px; background: url(../images/bg_cir.png) no-repeat center; background-size: contain; height:240px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.section02 ul li:nth-of-type(4) {margin-right: 0;}

/* section03 */
.section03 ul { display: flex;}
.section03 ul li {width:calc((100% - 90px) / 4); margin-right: 30px; padding: 35px 30px; box-sizing: border-box; background-color: #fafafa; border-radius: 20px; transition:0.5s; cursor:pointer;}
.section03 ul li:nth-of-type(4) {margin-right: 0;}
.section03 ul li span {padding-bottom: 10px; display: block; }
.section03 ul li p {padding-bottom: 20px; display: block; overflow: hidden; text-overflow: ellipsis; white-space:nowrap}
.section03 ul li em {display:-webkit-box; overflow:hidden; text-overflow:ellipsis;  white-space: normal; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin-bottom: 30px;}
.section03 ul li:hover {background: linear-gradient(to right, #26aa61,#138848 ); box-shadow: 0 0 20px #ddd;}
.section03 ul li:hover span {color: #fff;}
.section03 ul li:hover p {color: #fff;}
.section03 ul li:hover em {color: #fff;}
.section03 ul li:hover b {color: #fff;}

/* section04 */
.section04 {background: url(../images/contact_bg.png) no-repeat center; box-sizing: border-box; background-size: cover;}
.section04 ul {display: flex;}
.section04 .leftright {display: flex; align-items: center;}
.section04 .leftright > div {width:calc((100% - 32px) / 2); }
.section04 .leftright .left {margin-right: 16px;}
.section04 .leftright .right {margin-left: 16px;}
.section04 .leftright .right ul li {width:calc((100% - 38px) / 2); height:200px; background-color: #ffffff25; border-radius: 15px; border: 1px solid #ddd; display: flex; flex-direction: column ; justify-content: center; align-items: center;}
.section04 .leftright .right ul li img {margin-bottom: 20px;}
.section04 .leftright .right ul li p {opacity:0.4; padding-bottom: 20px; }
.section04 .leftright .right ul li:nth-of-type(1) {margin-right: 19px;}
.section04 .leftright .right ul li:nth-of-type(2) {margin-left: 19px;}
.section04 .btn_go {display: block;margin:0 auto; margin-top: 60px; width:200px; height:60px; line-height: 60px; background-color: #53ad62; border-radius: 50px; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.section04 .btn_go:hover{color: #53ad62 !important; background-color: #fff;}
.section04 .leftright .left p {letter-spacing: -0.5px;}

@media screen and (max-width:1440px) {
    #visual .slide .inner {width:95%; margin: 0 auto;}
    .section .inner {width:95%; margin: 0 auto;}

    /* visual */
    #visual .slide .inner .txt_box .title p { font-size:64px; font-weight: 600; color: #fff; }
    #visual .slide .inner .txt_box p { line-height: 1.5; font-size: 22px; padding-top: 40px;}

    /* common */
    .section01 ul li .overlay {padding:10%;}
    .fz28 {font-size: 22px;}
    .fz18 {font-size: 16px;}
    .section01 ul li .overlay p img {width:30px;}
    .fz20 {font-size: 18px !important;}
}

@media screen and (max-width:1280px) {
    .section02 ul li img {height:60px;}
    .section02 ul li {width:calc((100% - 150px) / 3); margin-right: 50px;}

    .section04 .leftright .left p br {display: none;}
    .fz42 {font-size: 38px !important;}
    .fz38 {font-size: 36px !important;}
}


@media screen and (max-width:1024px) {
    .section03 ul { flex-wrap:wrap;}
    .section03 ul li {width:calc((100% - 20px) / 2); margin-right: 20px; margin-bottom: 20px;}
    .section03 ul li:nth-of-type(2n) {margin-right: 0;}

    .section04 .leftright {flex-direction: column; flex-wrap:wrap;}
    .section04 .leftright .left{width:100%; text-align: center; margin:0 auto; margin-bottom: 50px;}
    .section04 .leftright .right{width:80%; margin:0 auto;}
  
}


@media screen and (max-width:867px) {
    .section02 ul li {width:calc((100% - 60px) / 3); margin-right: 20px;}

  
    
}

@media screen and (max-width:768px) {
       /* visual */
       #visual .slide .inner .txt_box .title p { font-size:44px; color: #fff;  }
       #visual .slide .inner .txt_box p { font-size: 18px; padding-top: 40px; word-break: keep-all;}
       #visual .slide .inner .txt_box p  br { display: none;}

       /* common */
       .fz42 {font-size: 36px;}
       .section {padding:80px 0;}
       .fz28 {font-size: 18px;}
       .fz18 {font-size: 14px;}
       .section02 ul  {flex-wrap:wrap;}
       .section02 ul li {width:calc((100% - 120px) /2); margin-right: 30px; margin-left:30px; margin-bottom: 30px;}
       .section02 ul li:nth-of-type(4) {margin-right: 30px;}
       .section02 ul li {height:200px;}

       .fz38 {font-size: 30px !important; word-break: keep-all;}
       .section04 .leftright .left p {word-break: keep-all;}
       .section01 ul li .txt p {font-size: 22px !important;}

       
    .section04 .btn_go {height:50px; line-height: 50px; width:180px; margin-top:30px; font-size: 16px !important;}
}

@media screen and (max-width:640px) {
    .section01 ul {flex-wrap:wrap;}
    .section01 ul li {width:100%; margin-bottom: 30px; margin-right: 0; margin-left: 0;}
    .section01 ul li:nth-of-type(1) {margin-right: 0;}
    .section01 ul li:nth-of-type(2) {margin-left: 0;}
    .section01 ul li:last-of-type {margin-bottom: 0;}

    .fz20 {font-size: 16px !important;}
    .main_tit h5 {padding-bottom: 20px;}

    .section03 ul li em {font-size: 15px;}
    .section04 .leftright .right{width:100%;} 
  
}

@media screen and (max-width:480px) {
    .section02 ul li {margin-bottom: 10px;}
    .section02 ul li {margin-right: 15px; margin-left: 15px; width:calc((100% - 60px) / 2)}
    .section02 ul li:nth-of-type(4) {margin-right: 15px;}
    .fz20 {font-size: 14px !important;}
    .fz42 {font-size: 28px !important;}

    .section03 ul li em {font-size: 12px;}
    .fz14 {font-size: 10px;}
    .section03 ul li .fz14 {font-size: 12px !important;}
    .section04 .leftright .right ul li:nth-of-type(1){margin-right: 5px;}
    .section04 .leftright .right ul li:nth-of-type(2){margin-left: 5px;}
    .section04 ul {width:100%;}
    .section04 .leftright .right ul li {width:calc((100% - 10px) / 2)}

    .fz38 {font-size: 24px !important;}
    .fz15 {font-size: 14px;}
}

@media screen and (max-width:360px) {
    .section02 ul li {margin-right: 5px; margin-left: 5px; width:calc((100% - 20px) / 2)}
    .section02 ul li:nth-of-type(4) {margin-right: 5px;}

    .section03 ul li {width:100%; margin-right: 0; }
    .section04 ul {flex-direction: column;}
    .section04 .leftright .right ul li {width:100%;}
    .section04 .leftright .right ul li:nth-of-type(1) {margin-bottom:15px;}
    .section04 .leftright .right ul li:nth-of-type(2) {margin-left: 0;}
}