@charset "utf-8";
.sub_container_wrap>.sec01>.sec01_art{height: 260px;width: 920px;background: #fff;margin: 0 auto;margin-top: auto;border-top-left-radius: 50px;border-top-right-radius: 50px; background: url(./img/intro01_title.png) center bottom no-repeat; background-color: #fff;}
.sub_container_wrap>.sec01 ~ section{height: 400px;}

.sub_container_wrap>.sec01 ~ section >.art01{display: flex;padding: 0 360px;height: 100%; gap: 70px;}
.sub_container_wrap>.sec01 ~ section >.art01>.img_box{width: 50%; height: 100%;}
.sub_container_wrap>.sec01 ~ section >.art01>.txt_box{height: 100%;}
.sub_container_wrap>.sec02 >.art01>.img_box{background: url(../../img/sub/machine01.png) center center;}
.sub_container_wrap>.sec01 ~ section >.art01>.txt_box{display: flex; flex-direction: column; justify-content: center;}
.sub_container_wrap>.sec01 ~ section >.art01>.txt_box>h2{font-family: 'Pretendard-Bold'; font-size: 40px; padding-bottom: 84px; position: relative;}
.sub_container_wrap>.sec01 ~ section >.art01>.txt_box>h2>span{font-family: 'Pretendard-Bold';}
.sub_container_wrap>.sec01 ~ section >.art01>.txt_box>h2:after{content: ""; display: inline-block; position: absolute; width: 50px; height: 2px; background: #452e6a; transform: rotate(-60deg); bottom: 40px; left: -20px;}
.sub_container_wrap>.sec01 ~ section >.art01>.txt_box>p,.sub_container_wrap>.sec01 ~ section >.art01>.txt_box>p>span{font-family: 'Pretendard-ExtraLight'; font-size: 20px; line-height: 35px;}

.sub_container_wrap> .sec03 > .art01 >.img_box{background: url(../../img/sub/machine02.png) center center; background-size: cover; background-repeat: no-repeat;}
.sub_container_wrap> .sec04 > .art01 >.img_box{background: url(../../img/sub/machine03.png) center center; background-size: cover; background-repeat: no-repeat;}
.sub_container_wrap> .sec05 > .art01 >.img_box{background: url(../../img/sub/machine04.png) center center; background-size: 40%; background-repeat: no-repeat;}
.sub_container_wrap> .sec06 > .art01 >.img_box{background: url(../../img/sub/machine05.png) center center; background-size: cover; background-repeat: no-repeat;}
.sub_container_wrap> .sec07 > .art01 >.img_box{background: url(../../img/sub/machine06.png) center center; background-size: cover; background-repeat: no-repeat;}
.sub_container_wrap> .sec08 > .art01 >.img_box{background: url(../../img/sub/machine07.png) center center; background-size: cover; background-repeat: no-repeat;}
.sub_container_wrap> .sec09 > .art01 >.img_box{background: url(../../img/sub/machine08.png) center center; background-size: cover; background-repeat: no-repeat;}
.sub_container_wrap> .sec10 > .art01 >.img_box{background: url(../../img/sub/machine09.png) center center; background-size: cover; background-repeat: no-repeat;}
.sub_container_wrap> .sec11 > .art01 >.img_box{background: url(../../img/sub/machine10.png) center center; background-size: cover; background-repeat: no-repeat;}
.sub_container_wrap> .sec12 > .art01 >.img_box{background: url(../../img/sub/machine11.png) center center; background-size: cover; background-repeat: no-repeat;}
.sub_container_wrap> .sec03 > .art01 >.txt_box>p:first-of-type{font-family: 'Pretendard-Bold';}
.sub_container_wrap> .sec03 > .art01 >.txt_box>p:first-of-type>span{font-family: 'Pretendard-Bold';}

.sub_container_wrap> .sec03 > .art01 >.txt_box>p:last-of-type{white-space: nowrap; letter-spacing: -1.7px;}
.sub_container_wrap> .sec03 > .art01 >.txt_box>p:last-of-type>span{display: block;}
.sub_container_wrap>section:nth-child(2n-1){background: #f5f5f5;}
.sub_container_wrap>section:nth-child(2n-1)>.art01>.txt_box>h2:after{background: #a61d68;}
.sub_container_wrap>.sec05>.art01>.txt_box>p>span{display: block;}
@media screen and (max-width: 1800px){
  .sub_container_wrap>.sec01 ~ section >.art01{padding: 0 160px;}
  .sub_container_wrap> .sec05 > .art01 >.img_box{background-size: 200px; background-repeat: no-repeat;}
  .sub_container_wrap> .sec02 > .art01 >.img_box{background-size: contain; background-repeat: no-repeat;}
  .sub_container_wrap> .sec11 > .art01 >.img_box{background-size: 400px; background-repeat: no-repeat;}
  .sub_container_wrap> .sec03 > .art01 >.txt_box>p:last-of-type{white-space: normal;}
  .sub_container_wrap>.sec05>.art01>.txt_box>p>span,.sub_container_wrap> .sec03 > .art01 >.txt_box>p:last-of-type>span{display: inline;}
  .sub_container_wrap>.sec01 ~ section >.art01>.txt_box{width: 60%;}
  }
  @media screen and (max-width: 1200px){
    .sub_container_wrap> .sec08 > .art01 >.img_box{background-size: 400px;}
    .sub_container_wrap> .sec11 > .art01 >.img_box{background-size: cover;}
    .sub_container_wrap>.sec01 ~ section >.art01>.txt_box>h2{font-size: 28px;}
	.sub_container_wrap>.sec01 ~ section >.art01{padding: 0 50px;}
	.sub_container_wrap>.sec01 ~ section >.art01>.txt_box{width: 50%;}
	.sub_container_wrap>.sec01 ~ section >.art01>.txt_box>p, .sub_container_wrap>.sec01 ~ section >.art01>.txt_box>p>span{font-size: 18px; line-height: 30px;}
  }
    @media screen and (max-width: 900px){
	    .sub_container_wrap> .sec11 > .art01 >.img_box{background-size: contain;}
	}
  @media screen and (max-width: 700px){
    .sub_container_wrap> .sec08 > .art01 >.img_box{background-size: 400px;}
    .sub_container_wrap>.sec01 ~ section >.art01>.txt_box>h2{font-size: 35px;}
  .sub_container_wrap>.sec01 ~ section >.art01{padding: 0;}
  .sub_container_wrap>.sec01 ~ section >.art01>.txt_box{width: 50%;}
  .sub_container_wrap>.sec01 ~ section >.art01>.txt_box>p, .sub_container_wrap>.sec01 ~ section >.art01>.txt_box>p>span{font-size: 18px; line-height: 30px;}
  .sub_container_wrap>.sec01 ~ section >.art01{gap: 20px;}
  .sub_container_wrap>section>.art01>.txt_box>h2>span{display: block;line-height: 40px;}
  .sub_container_wrap> .sec03 > .art01 >.txt_box>p:first-of-type>span{display: block;}
  .sub_container_wrap> .sec03 > .art01 >.txt_box>p:last-of-type>span{display: block;}
  }
  @media screen and (max-width: 600px){
    .sub_container_wrap>.sec01 ~ section{height: 300px;}
    .sub_container_wrap>.sec01 ~ section >.art01>.txt_box>h2{font-size: 30px;}
    .sub_container_wrap>.sec01 ~ section >.art01>.txt_box>p, .sub_container_wrap>.sec01 ~ section >.art01>.txt_box>p>span{ letter-spacing: -1px; font-size: 14px; line-height: 20px;}
    .sub_container_wrap>.sec01 ~ section >.art01>.txt_box>p>span{display: block;}
  }
  @media screen and (max-width: 500px){
    .sub_container_wrap> .sec11 > .art01 >.img_box{background-size: cover;}
    .sub_container_wrap>.sec01 ~ section{height: 280px;}
    .sub_container_wrap>.sec01 ~ section >.art01{gap: 10px;}
    .sub_container_wrap>.sec01 ~ section >.art01>.txt_box>h2 {font-size: 25px; padding-bottom: 50px; letter-spacing: -1px;}
    .sub_container_wrap>.sec01 ~ section >.art01>.txt_box>p, .sub_container_wrap>.sec01 ~ section >.art01>.txt_box>p>span{font-size: 12px;letter-spacing: -1.5px;}
    .sub_container_wrap>.sec01 ~ section >.art01>.txt_box>h2:after{bottom: 25px;width: 40px;left: -10px;}
    .sub_container_wrap> .sec02 > .art01 >.img_box{background: url(../../img/sub/machine01_m.png) center center; background-size: 100%; background-repeat: no-repeat;}
    .sub_container_wrap> .sec03 > .art01 >.img_box{background: url(../../img/sub/machine02_m.png) center center; background-size: cover;}
    .sub_container_wrap> .sec04 > .art01 >.img_box{background: url(../../img/sub/machine03_m.png) center center; background-size: 60%; background-repeat: no-repeat;}
    .sub_container_wrap> .sec05 > .art01 >.img_box{background: url(../../img/sub/machine04_m.png) center center; background-size: contain; background-repeat: no-repeat;}
    .sub_container_wrap> .sec06 > .art01 >.img_box{background: url(../../img/sub/machine05_m.png) top left -30px; background-size: cover;}
    .sub_container_wrap> .sec07 > .art01 >.img_box{background: url(../../img/sub/machine06_m.png) center center; background-size: cover;}
    .sub_container_wrap> .sec08 > .art01 >.img_box{background: url(../../img/sub/machine07_m.png) center center; background-size: contain; background-repeat: no-repeat;}
    .sub_container_wrap> .sec09 > .art01 >.img_box{background: url(../../img/sub/machine08_m.png) center center; background-size: cover;}
    .sub_container_wrap> .sec10 > .art01 >.img_box{background: url(../../img/sub/machine09_m.png) center center; background-size: cover;}
    .sub_container_wrap> .sec11 > .art01 >.img_box{background: url(../../img/sub/machine10_m.png) center center; background-size: contain;  background-repeat: no-repeat;}
    .sub_container_wrap> .sec12 > .art01 >.img_box{background: url(../../img/sub/machine11_m.png) center center; background-size: cover;}
    }
  @media screen and (max-width: 400px){
    .sub_container_wrap>.sec01 ~ section{height: 280px;}
    .sub_container_wrap>.sec01 ~ section >.art01{gap: 10px;}
    .sub_container_wrap>.sec01 ~ section >.art01>.txt_box>h2 {font-size: 20px; padding-bottom: 50px; letter-spacing: -1px;}
    .sub_container_wrap>.sec01 ~ section >.art01>.txt_box>p, .sub_container_wrap>.sec01 ~ section >.art01>.txt_box>p>span{font-size: 10px;letter-spacing: -1.5px;}
    }