#sub {  color:#fff; width:100%;  }
#sub .bg {width:100%; height:100%; position:fixed; top:0; left:0; z-index:-9; background:url('/common/img/bg.png') no-repeat; background-size:cover }
 

.sub_con {width:calc(100% - 350px); padding-top:100px; box-sizing:border-box; padding-left:5%}
.sub_con  h2 {  font-family: 'Poppins'; font-size:6em; margin-bottom:30px; position:relative; width:auto; display:inline-block; }
.sub_con  h2:after {content:''; position:absolute; right:-25px;  z-index:-9; top:10px; width:60px; height:60px; background-color:#e5392f; display:block;
 animation-duration: 3s;
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-direction: alternate;

}
@keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
#company.sub_con h2 {margin-bottom:-10px;   }
#join.sub_con h2 {margin-bottom:-10px;   }

.menu {position: -webkit-sticky; position: sticky; top:0;  display:flex; z-index:999; margin-bottom:70px}
.menu li {width:100px}
.menu a {color:rgba(255,255,255,.8); font-size:1.5em;   font-family: 'Poppins','Pretendard'; font-weight:300; padding:50px 0; display:inline-block; transition: all 0.2s ease-out;}
.menu a:hover {font-size:1.6em; color:#fff;  font-weight:600 }
.menu .current a {font-size:1.6em;  color:#fff; font-weight:600}

.content { display:flex; font-size:18px; line-height:1.7; padding:150px 0; font-weight:200;  margin-top:-110px}
.content h3 { font-family: 'Poppins'; margin-bottom:50px; width:330px; flex-shrink:0; font-size:2em; font-weight:400}
.content h3 + div {margin-top:80px; width:100%}


@media all and (min-width:701px) and (max-width:1400px) {
	.content{display:block;}
	.sub_con{width:calc(100% - 200px)}
	.sub_con h2 {font-size:4em;}
}


@media all and (max-width:700px) {
		.sub_con {width:100%; padding:60px 5% 0 5%}
		.sub_con  h2 { font-size:2.5em;}
		.sub_con  h2:after {  right:-25px; top:0; width:35px; height:35px; }
		.content { display:inline-block;  margin-top:0;  padding:90px 0; margin-top:-100px; font-size: .95em;}
		.content h3 {  margin-bottom:20px; width:100%; font-size:1.5em;  }
		.content h3 + div {margin-top:30px;  }
		.menu {margin-bottom:70px}
		.menu li {width:auto; margin-right:20px}
		.menu a { font-size:1.4em; padding:20px 0  }
		.menu a:hover {font-size:1.4em  }
		.menu .current a {font-size:1.4em;  }

		#company.sub_con h2 {margin-bottom:20px;   }
		#join.sub_con h2 {margin-bottom:20px;   }

  
}




#company #section01 .text p {font-size:2.2em; font-weight:400}
#company #section01 .text p b {font-weight:800}
#company #section01 .text p + p {font-size:1.1em;  margin-top:20px;}

@media all and (max-width:700px) {
	#company #section01 .text p:first-child{line-height:1.4; font-size:1.8em;}
}

#company #section02 .flex {  gap:50px;}
#company #section02 .flex iframe {border:0; width:60%; flex-shrink:0}
#company #section02 .flex iframe + div {width:40%; margin:50px 0}
#company #section02 dl {display:flex; margin-bottom:18px; font-size:.98em }
#company #section02 dl dt {width:140px; font-weight:300; flex-shrink:0}
#company #section02 dl dd {}

@media all and (min-width:701px) and (max-width:1400px) {
	#company #section02 .flex{display:block;}
	#company #section02 .flex iframe{width:100%;height:350px;}
	#company #section02 .flex iframe + div{width:100%}
}
@media all and (max-width:700px) {
	 #company #section02 .flex {  gap:0px;}
	#company #section02 .flex iframe + div {width:100%; margin:50px 0;margin-bottom:0;}
	#company #section02 .flex  iframe {width:100%; height:200px}
	#company #section02 dl dt {width:80px;}
	#company #section02 dl dd br{display:none}

}



#company #section03 ul {display:flex; flex-wrap:wrap; width:68%;}
#company #section03 ul li  {width:calc(50% - 20px); cursor:pointer;}
#company #section03 ul li:nth-child(odd) {margin-right:40px;}
#company #section03 ul li:nth-child(n+3){margin-top:100px;}
#company #section03 ul li h4 {font-size:1.3em; line-height:1.3; font-weight:600; margin-top:10px}
#company #section03 ul li div {font-size:.95em; margin-top:15px; display:flex;gap:5px;}
#company #section03 ul li b {margin-right:10px}
#company #section03 ul li p {line-height:1.6}

@media all and (max-width:1000px) {
	#company #section03 ul {width:100%;}
}
@media all and (max-width:700px) {
	#company #section03 ul li  {width:calc(50% - 10px) }
	#company #section03 ul li:nth-child(odd) {margin-right:20px;}
	#company #section03 ul li:nth-child(n+3)  {margin-top:60px}
	#company #section03 ul li div{display:block;}
	#company #section03 ul li b {margin-right:0}

}


#company #section04 ul {display:flex; flex-wrap:wrap;  justify-content:center; width:70%;}
#company #section04 ul li {width:calc(50% - 20px); text-align:center; font-size:1.05em; font-family:'Poppins' , 'Pretendard'; font-weight:300 }
#company #section04 ul li:nth-child(odd) {margin-right:40px}
#company #section04 ul li:nth-child(n+3){margin-top:60px;}
#company #section04 ul li div {width:100%; margin-bottom:10px; line-height:0;  background-color:#fff; height:100px; display:flex; align-items:center; justify-content:center }
#company #section04 ul li img {max-width:70%}

@media all and (max-width:1000px) {
	#company #section04 ul {width:100%;}
}
@media all and (max-width:700px) {
	#company #section04 ul li  {width:calc(50% - 10px) }
	#company #section04 ul li:nth-child(odd) {margin-right:20px;}
	#company #section04 ul li:nth-child(n+3)  {margin-top:40px}
}

#company div.cresemble_one_wrap {width:100%; display:flex; justify-content:flex-start;   align-items:center; margin:60px 0 }
#company div.cresemble_one_wrap p {font-weight:400; width:13vw; border:5px solid rgba(255,255,255,.2);  height:13vw;  display:flex; align-items:center; justify-content :center; text-align:center;  font-size:1.6em; transition: all 0.5s ease-out;}
#company div.cresemble_one_wrap span.plus {font-size:3rem; line-height:10vw; margin:0 30px}
#company div.cresemble_one_wrap p:hover {border:5px solid rgba(255,255,255,.8)}


@media all and (max-width:700px) {
	#company div.cresemble_one_wrap{margin:30px 0;}
	#company div.cresemble_one_wrap p {flex:1; height:20vw; font-size:4vw;}
	#company div.cresemble_one_wrap span.plus{font-size:1.5rem; margin:0 7px;}
}

#contact iframe {margin-bottom:30px}
#contact dl {display:flex; margin-bottom:18px; }
#contact dl dt {width:140px; font-weight:600; flex-shrink:0}
#contact dl dd {font-weight:300}

@media all and (max-width:1400px) {
	#contact dl dt{width:60px;}
}


.tab { width:100%; display:flex; z-index:999; margin-bottom:30px}
.tab li { margin-right:40px}
.tab a {color:rgba(255,255,255,.8); font-size:1.5em;  font-family: 'Poppins','Pretendard'; font-weight:300; padding:50px 0; display:inline-block; transition: all 0.2s ease-out;}
.tab a:hover { color:#fff;  font-weight:600 }
.tab .current a {   color:#fff; font-weight:600}


@media all and (max-width:700px) {
	.tab a {font-size:1.3em;}
	.tab li { margin-right:25px}

	#works .tab {overflow-x:auto}
	#works .tab a{padding:15px 0; white-space:nowrap}
	#join .tab {overflow-x:auto}
	#join .tab a{padding:15px 0; white-space:nowrap}
}




#works .arche{display:flex; gap:5%;}
#works .arche:nth-of-type(n+2){margin-top:100px;}
#works .arche .thum{width:30%;}
#works .arche .thum .img{padding-bottom:130%;}
#works .arche .info{width:70%; font-size:1.4em; padding:2% 0; box-sizing:border-box;}
#works .arche .info h4{font-weight:600; display:flex; gap:10px; line-height:1.4; font-size:1.3em;}
#works .arche .info p{margin:15px 0 30px 0; display:flex; gap:10px; line-height:1.4; font-weight:200;}
#works .arche .info .imgbox{display:flex; flex-wrap:wrap; gap:20px; margin-top:10px;}
#works .arche .info .imgbox .img{width:calc(20% - 16px); padding-bottom:calc(20% - 16px); cursor:pointer;}



.needpopup .swiper {
      width: 100%;
      height: 100%;
}

.needpopup .swiper-slide {
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
}

.needpopup .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
	  max-width:80%;
	  padding:30px 0;
	  box-sizing:border-box;
}
.needpopup .swiper-wrapper{align-items:center;}
.needpopup .swiper-button-next, .swiper-button-prev{color:#fff; right:0;}
.needpopup .swiper-button-prev, .swiper-button-next{color:#fff; left:0;}
.needpopup .swiper-pagination-bullet{background:#fff; opacity:.3}
.needpopup .swiper-pagination-bullet-active{opacity:1}
.needpopup .swiper-pagination{bottom:0;}

@media all and (max-width:1000px) {
	#works .arche .info{font-size:1.3em}
}
@media all and (max-width:700px) {
	#works .arche{display:block;}
	#works .arche:nth-of-type(n+2){margin-top:80px;}
	#works .arche .thum{width:100%;}
	#works .arche .info{width:100%; font-size:1.1em; margin-top:20px;}
	#works .arche .info .imgbox{gap:18px}
	#works .arche .info .imgbox .img{width:calc(33.33% - 12px); padding-bottom:calc(33.33% - 12px);}
	#works .arche .info h4{font-size:1em;}
}