@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&display=swap');

/* font-family: 'Noto Sans KR', sans-serif;*/

h1,h2,h3,h4,h5,h6{
  font-family: 'PB_B';
}
#intro{
   font-family: 'PB_R';
    font-weight:400;
    color:#496100;
    padding-top:130px;
}
#intro .container{
    width:1600px;
    margin:-50px auto 0;
    background:#fff;
}
#intro .container .wrap{
    width:1210px;
    margin:0 auto;
    padding-top:230px;
}
#intro .com_desc .top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:relative;
    z-index:1;
}
#intro .com_desc .top::after{
    content:'';
    width:545px;
    height:579px;
    background:url(../../img/sub/sub_back_logo.png) no-repeat center center/cover;
    position:absolute;
    top:-130px;
    right:-130px;
    z-index:-1;
}
#intro .intro_tt{
    font-size:32px;
    font-weight:500;
    letter-spacing:-0.006em;
    text-transform:capitalize;
}
#intro .intro_tt span{
    font-weight:700;    
    color: #85B400;
}
#intro .com_desc .top .hello{
    margin-bottom:50px;
}
#intro .com_desc .top .hello .intro_tt{
    margin-bottom:10px;
}
#intro .com_desc .top .hello > p{
    font-size:28px;
    font-weight:300;
    letter-spacing:-0.006em;
    word-break:keep-all;
}
#intro .com_desc .top .hello > p span{
    font-family: 'PB_B';
}
#intro .com_desc .top .img_wrap{
    padding-right:175px;
}
#intro .com_desc .bottom{
    background: #F9F9F9;
    width:1210px;
    padding:45px 50px;
    position:relative;
    z-index:1;
    margin: 0 auto;
    margin-bottom:50px;
    text-align: center;
}
#intro .com_desc .bottom p{
    font-size:20px;
    font-weight:350;
    letter-spacing:-0.005em;
    color:#496100;
    word-break:keep-all;
}
#intro .com_desc .bottom p + p{
    margin-top:30px;
}
#intro .com_desc .bottom p .bold{
    font-weight:500;
}
#intro .com_list .bottom{
    background:url(../img/main/company_bg.png) no-repeat center center/cover;
    padding:50px 0 100px;
    text-align:center;
    color:#fff;
}
#intro .com_list .bottom .company_list{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:50px;
}
#intro .com_list .bottom .company_list li{
    width:480px;
    height:106px;
    border-radius:53px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background: rgba(133, 180, 0, 0.5);
    margin:0 -53px;
    position:relative;
}
#intro .com_list .bottom .company_list li + li::before{
    content:'+';
    font-size:40px;
    font-weight:400;
    position:absolute;
    top:48%;
    left:42px;
    transform:translateY(-50%);
}
#intro .com_list .bottom .company_list li p{
    font-size:22px;
    font-weight:bold;
    color: #496100;
    letter-spacing:-0.005em;
}
#intro .com_list .bottom .company_list li p.small{
    font-size:18px;
    font-weight:normal;
}
#intro .com_list .bottom .text{
    font-size:30px;
    font-weight:bold;
    letter-spacing:-0.005em;
}
#intro .com_list .bottom .text p{
    word-break:keep-all;
    color: #496100;
}

#intro .exp{
    width: 100%;
    background-color: #eee;
}
#intro .exp .container{
    width: 69.27%;
    margin: 0 auto;
    padding: 105px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    flex-wrap: wrap;
}
#intro .exp .ex_img{
    width: 850px;
    filter: drop-shadow(-13px 13px 0px #121212);
}
#intro .exp .ex_img img{
    width: 100%; 
}
#intro .exp .right .heading .tt{
    font-weight: 700;
    font-size: 32px;
    letter-spacing: -0.06em;
    color: #496100;
    margin-bottom: 10px;
}

#intro .exp .right .heading .tt span{
    color: #85B400;
}

#intro .exp .right .heading .ss{
    font-weight: 400;
    font-size: 28px;
    letter-spacing: -0.06em;
    margin-bottom: 30px;
}

#intro .exp .right .cont li{
    font-weight: 350;
    font-size: 20px;
    letter-spacing: -0.05em;
    color: #496100;
    padding-left: 13px;
    margin-bottom: 10px;
    position: relative;
}
#intro .exp .right .cont li::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background-color: #4E4E4E;
}
#intro .suc_txt{
    text-align: center;
    padding: 100px 0;
}
#intro .suc_txt .txt{
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.06em;
    color: #496100;
    word-break: keep-all;
}

.slide_wrap {
  width: 100%;
  height: auto;
  background: #F9F9F9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide_wrap .inner {
  width: 100%;
  max-width: 1400px;
  height: auto;
  padding: 100px;
  position: relative;
}

.slide_wrap .inner .slide {
  width: 100%;
  max-width: 1100px;
  height: auto;
}

.slide_wrap .inner .slide .box {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.slide_wrap .inner .slide .box img {
  width: auto;
  height: auto;
}

.slide_wrap .inner .slide .box .text_box {
  width: 100%;
  max-width: 500px;
  height: auto;
}

.slide_wrap .inner .slide .box .text_box h3 {
  font-size: 30px;
  color: #85B400;
  margin-bottom: 10px;
}

.slide_wrap .inner .slide .box .text_box h4 {
  font-size: 20px;
  color: #496100;
  margin-bottom: 30px;
}

.slide_wrap .inner .slide .box .text_box ul {
  border-top: 1px solid #888;
  border-bottom: 1px solid #888;
  padding: 30px 0;
}

.slide_wrap .inner .slide .box .text_box ul li {
  list-style: disc;
  margin-left: 30px;
  font-family: 'PB_R';
  font-size: 20px;
  color: #496100;
  margin-bottom: 10px;
}

.slide_wrap .inner .slide .box .text_box ul li:last-of-type {
  margin-bottom: 0;
}

.slide_wrap .inner .slide .box .text_box h5 {
  margin-top: 30px;
  font-size: 22px;
  color: #85B400;
}

.slide_wrap .inner .slide .box .text_box ul.big_ul {
  border-top: 0;
}

.slide_wrap .inner .slide .box .text_box ul.big_ul li {
  font-family: 'PB_B';
}

.slide_wrap .inner .next_btn {
  position: absolute;
  width: auto;
  height: auto;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

/* --------------------------------- RESPONSIVE --------------------------------- */
@media (max-width:1800px){
    #intro .exp .container{
        width: 80%;
    }
    #intro .exp .ex_img{
        width: 750px;
    }
}
@media (max-width:1650px){
    #intro .container{
        width:90%;
    }
    #intro .container .wrap{
        width:90%;
    }
    #intro .exp .container{
        width: 90%;
    }

}

@media (max-width:1400px){
    #intro .com_desc .bottom{
        padding:30px;
        width:100%;
    }
    #intro .com_desc .top .img_wrap{
        padding-right:0;
    }
    #intro .com_desc .bottom p br{
        display:none;
    }
    #intro .exp .ex_img {
        width: 680px;
    }
}

@media (max-width:1200px){
    #intro .exp .ex_img {
        width: 600px;
    }
    #intro .exp .right .heading .tt{
        font-size: 22px;
    }
    #intro .exp .right .heading .ss{
        font-size: 18px;
        margin-bottom: 26px;
    }
    #intro .exp .right .cont li{
        font-size: 16px;
        margin-bottom: 10px;
    }

    .slide_wrap .inner .slide .box {
      flex-wrap: wrap;
      justify-content: center;
    }

    .slide_wrap .inner .slide .box .text_box {
      max-width: 100%;
    }

    .slide_wrap .inner .slide .box img {
      margin-bottom: 30px;
    }

    .slide_wrap .inner .next_btn {
      width: 70px;
      right: 20px;
    }
}

@media (max-width:1024px){
    #intro .container .wrap{
        padding-top:140px;
    }
    #intro .com_desc .top{
        flex-direction:column-reverse;
        align-items:start;
        gap:50px;
    }
    #intro .com_desc .top::after{
        top:40px;
    }
    #intro .exp .container {
        width: 95%;
    }
    #intro .com_list .bottom .company_list li p{
        font-size: 20px;
    }
    #intro .com_list .bottom .text p,
    #intro .com_list .bottom .company_list li p.small {
        font-size: 16px;
    }
    #intro .com_desc .bottom p{
        font-size: 18px;
    }
    #intro .intro_tt {
        font-size: 30px;
    }
    #intro .com_desc .top .hello > p {
        font-size: 24px;
    }
    #intro .com_list .bottom .company_list li {
        width: 350px;
    }
    #intro .suc_txt .txt{
        font-size: 28px;
    }
}

@media (max-width:950px){
    #intro .exp .container{
        flex-direction: column;
    }
    #intro .exp .ex_img{
        margin-bottom: 30px;
    }
    #intro .exp .ex_img {
        width: 100%;
    }
    #intro .com_list .bottom .company_list {
        flex-direction: column;
        gap: 50px;
    }
    #intro .com_list .bottom .company_list li {
        width: 70%;
    }
    #intro .com_list .bottom .company_list li + li::before {
        left: 50%;
        top: -55px;
        transform: translateX(-50%);
        color: #4E4E4E;
    }
    #intro .suc_txt .txt {
        font-size: 26px;
    }
}

@media (max-width:768px){
    #intro{
        padding-top:60px;
    }
    #intro .container .wrap {
        padding-top: 80px;
    }
    #intro .intro_tt {
        font-size: 28px;
    }
    #intro .com_desc .top .hello > p {
        font-size: 22px;
    }
    #intro .com_desc .bottom {
        padding: 25px;
        margin-bottom:80px;
    }
    #intro .com_desc .bottom p {
        font-size: 16px;
    }
    #intro .com_desc .bottom p + p {
        margin-top: 25px;
    }
    #intro .exp .ex_img {
        filter: drop-shadow(-6px 6px 0px #121212);
    }
    #intro .suc_txt .txt {
        font-size: 22px;
    }
}

@media (max-width: 700px) {
  .slide_wrap .inner .slide .box img {
    width: 100%;
    height: auto;
  }
}

@media (max-width:630px){
    #intro .com_desc .top .hello > p br{
        display:none;
    }
}
@media (max-width:500px){
    #intro .container .wrap {
        width: 95%;
    }
    #intro .container {
        margin: -55px auto 0;
    }
    #intro .com_desc .top{
        gap:30px;
    }
    #intro .com_desc .top .hello {
        margin-bottom: 30px;
    }
    #intro .com_desc .top .hello > p {
        font-size: 16px;
    }
    #intro .com_desc .top .img_wrap img{
        width:80%;
    }
    #intro .com_desc .bottom {
        padding:18px;
        margin-bottom:50px;
    }
    #intro .com_desc .bottom p {
        font-size: 14px;
    }
    #intro .com_list .bottom .company_list li {
        width: 100%;
    }

    .slide_wrap .inner .slide .box .text_box h3 {
      font-size: 20px;
    }

    .slide_wrap .inner {
      padding: 50px;
    }

    .slide_wrap .inner .slide .box .text_box h4 {
      font-size: 16px;
    }

    .slide_wrap .inner .slide .box .text_box ul li {
      margin-left: 20px;
      font-size: 14px;
    }

    .slide_wrap .inner .slide .box .text_box h5 {
      font-size: 18px;
    }

    .slide_wrap .inner .next_btn {
      width: 40px;
    }

    #intro .intro_tt {
      font-size: 20px;
    }

    #intro .com_desc .top::after {
      width: 300px;
      height: 320px;
    }
}

@media (max-width:425px){
    #intro .suc_txt .txt {
        font-size: 20px;
    }
    #intro .exp .right .heading .tt {
        font-size: 20px;
    }
    #intro .exp .right .heading .ss {
        font-size: 15px;
    }
    #intro .exp .right .cont li {
        font-size: 14px;
    }
}

@media (max-width: 400px) {
  .slide_wrap .inner {
    padding: 30px;
  }

  .slide_wrap .inner .slide .box .text_box h3 {
    font-size: 16px;
  }

  .slide_wrap .inner .slide .box .text_box h4 {
    font-size: 14px;
    margin-bottom: 15px;
  }

  .slide_wrap .inner .slide .box .text_box ul {
    padding: 15px 0;
  }

  .slide_wrap .inner .slide .box .text_box ul li {
    font-size: 12px;
    margin-bottom: 5px;
  }

  .slide_wrap .inner .slide .box .text_box h5 {
    font-size: 14px;
    margin-top: 15px;
  }


}