@charset "utf-8";

#main-sec-2,
.m-main-sec,
.main-container .most-viewed .container .inn-history .item img.m-item{
  display: none;
}

.main-container.intro-company #navTab{
  max-width: 1280px;
}

.main-container .title-sec{
  position: relative;
  display: flex;
  padding: 0px 320px;
  width: 100%;
  /*height: 484px;*/
  flex-direction: column;
  align-items: center;
  gap: 10px;

}

.main-container .title-sec.bg{
	background: url(../images/gwdbuilding-01.png) 66% 50%;
	width: 100%;
	height: 484px;
}

.main-container .title-sec .txtarea{
  position: absolute;
  bottom: 60px;
  display: flex;
  width: 100%;
  max-width: 1280px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.main-container .title-sec h3{
  color: #fff;
  font-family: "Pretendard Variable";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 26px; /* 162.5% */
}

.main-container .title-sec h4{
  padding-bottom: 10px;
  color: #fff;
  font-family: "Pretendard Variable";
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: 56px; /* 140% */
}

.main-container .title-sec p{
  color: #fff;
  font-family: "Pretendard Variable";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
}

.main-container.intro-company .container .tab-area .nav-tabs{
  border-bottom: 0px;
}

.main-container .container .tab-area .nav-tabs .nav-item button{
  color: #8a8a8a;
}

.main-container .container .tab-area .nav-tabs .nav-item button.active{
  color: #212529;
  border-bottom: 3px solid #212529;
}

.main-container .most-viewed{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  align-self: stretch;
  padding-top: 80px;
  width: 100%;
}

/* .main-container.intro-company .container{
  max-width: 1920px !important;
  margin: 0 auto;
  width: 200% !important;
} */

.main-container.intro-company .most-viewed .container{
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  gap: 20px;
  padding-bottom: 100px;
  width: 100%;
  max-width: 1280px !important;
}

.main-container .most-viewed .container .inn-sec{
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 20px;
}

.main-container .most-viewed .container:nth-child(1){
  padding-top: 60px;
}

.main-container .most-viewed .container .inn-title{
  display: flex;
  padding-bottom: 20px;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}
.main-container .most-viewed .container  img.inn-img{
	border-radius: 8px;
}
.main-container .most-viewed .container.b-line img{
	border-radius: 8px;
}

.main-container .most-viewed .container .inn-title h3{
  color: #000;
font-family: "Pretendard Variable";
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 46px;
}

.main-container .most-viewed .container .txtarea{
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.main-container .most-viewed .container .txtarea p{
  color: #495057;
  font-family: "Pretendard Variable";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.main-container .most-viewed .container .inn-content{
  display: flex;
  width: 100%;
  gap: 20px;
  flex-direction: column;
}

.main-container .most-viewed .container .inn-content ul{
  display: flex;
  margin: 0;
  padding: 0;
  width: 100%;
  align-items: flex-start;
  gap: 210px;
}

.main-container .most-viewed .container .inn-content ul li{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.main-container .most-viewed .container .inn-content ul li p:nth-child(1){
  color: #212529;
  font-family: "Pretendard Variable";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 171.429% */
}

.main-container .most-viewed .container .inn-content ul li p:nth-child(2){
  color: #000;
  font-family: "Pretendard Variable";
  font-size: 28px;
  font-style: normal;
  font-weight: 500;
  line-height: 40px; /* 142.857% */
}

.main-container .most-viewed .container .inn-content div{
  color: #495057;
  font-family: "Pretendard Variable";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 171.429% */
}

.main-container .most-viewed .container .inn-way{
  display: flex;
  flex-direction: column;
  padding-bottom: 60px;
  width: 100%;
}

.main-container .most-viewed .container .inn-way ul{
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 28px;
  flex-wrap: wrap;
}

.main-container .most-viewed .container .inn-way ul li{
  display: flex;
  max-width: 299px;
  /* flex-basis: 299px; */
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex-shrink: 0;
}

.main-container .most-viewed .container .inn-way ul li p:nth-child(1){
  color: #212529;
  font-family: "Pretendard Variable";
  font-size: 50px;
  font-style: normal;
  font-weight: 500;
  line-height: 58px; /* 116% */
}

.main-container .most-viewed .container .inn-way ul li p:nth-child(2){
  color: #212529;
  font-family: "Pretendard Variable";
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 36px; /* 150% */
}

.main-container .most-viewed .container .inn-way ul li p:nth-child(3){
  color: #495057;
  font-family: "Pretendard Variable";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.main-container .most-viewed .container .inn-btn{
  display: flex;
  align-items: flex-start;
  gap: 20px;
  align-self: stretch;
}

.main-container .most-viewed .container .inn-btn button.btn-down{
  display: flex;
  padding: 8px 20px;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  border: 1px solid #212529;
  color: #212529;
  font-family: "Pretendard Variable";
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 38px; /* 211.111% */
  background-color: #fff;
}

#slidelist-4-pane .most-viewed .contain{
  display: flex;
  flex-direction: column;
  max-width: 1062px;
  padding: 60px 0px;
  align-items: flex-start;
  gap: 28px;
}

#slidelist-4-pane .most-viewed .container.b-line{
  padding-bottom: 80px;
  border-bottom: 1px solid #E9ECEF;
}

#slidelist-4-pane .most-viewed .contain:nth-child(4){
  width: 200% !important;
  max-width: 1920px !important;
  background: #F9FAFB;
}

.main-container .most-viewed .contain .contents{
  display: flex;
  /* max-width: 1062px; */
  width: 100%;
  /* padding: 60px 0px; */
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
}

.main-container .most-viewed .contain .contents .inn-title{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  align-self: stretch;
}

.main-container .most-viewed .contain .contents .inn-title h4{
  color: #212529;
  text-align: center;
  font-family: "Pretendard Variable";
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 36px; /* 150% */
}

.main-container .most-viewed .contain .contents .inn-title h5{
  color: #000;
  text-align: center;
  font-family: "Pretendard Variable";
  font-size: 36px;
  font-style: normal;
  font-weight: 600;
  line-height: 48px; /* 133.333% */
}

.main-container .most-viewed .contain .contents .item{
  display: flex;
  /* width: 100%; */
  /* justify-content: space-between; */
  gap: 28px;

}

.main-container .most-viewed .contain .contents .item .box,
.main-container .most-viewed .contain .contents .item .box2{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  align-self: stretch;
}

.main-container .most-viewed .contain .contents .item .box img{
	width: 626px;
	background-size: contain;
	border-radius: 8px;
}


.main-container .most-viewed .contain .contents .item .box.group,
.main-container .most-viewed .contain .contents.info .item .box:nth-child(1){
  width: 408px;
  padding: 0px 30px 20px 0px;
}

.main-container .most-viewed .contain .contents .item .box.txt{
  width: 408px;
  padding: 0px 0px 20px 30px;
}

.main-container .most-viewed .contain .contents .item .box h6{
  color: #000;
  font-family: "Pretendard Variable";
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 46px;
}

.main-container .most-viewed .contain .contents .item .box .txtarea{
  display: flex;
  width: 100%;
  gap: 10px;
  flex-direction: column;
}

.main-container .most-viewed .contain .contents .item .box p{
  color: #495057;
  font-family: "Pretendard Variable";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.main-container .most-viewed .contain .contents .item .box p.s-txt{
  padding-top: 14px;
  color: #8A8A8A;
  font-family: "Pretendard Variable";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 166.667% */
}

.main-container .most-viewed .contain .contents .item .box button{
  display: flex;
  width: 190px;
  padding: 5px 20px;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
  background: #212529;
  border: 0px;
}

.main-container .most-viewed .contain .contents .item .box button span{
  color: #FFF;
  font-family: "Pretendard Variable";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 26px; /* 185.714% */
}

.main-container .most-viewed .contain .contents .item .box button i{
  color: #fff;
  font-size: 14px;
}

.main-container .most-viewed .contain .contents.info{
  overflow: hidden;
}

.main-container .most-viewed .contain .contents.info .item:last-child{
  border-bottom : 0px;
}

.main-container .most-viewed .contain .contents.info .item{
  margin: 0 auto;
  padding: 60px 0px;
  border-bottom: 1px solid #8A8A8A;
}

.main-container .most-viewed .contain .contents .item .slide-area{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 517px;
}

.main-container .most-viewed .contain .contents .item .slide-area .swiper-container{
  display: flex;
  width: 100%;
}

.main-container .most-viewed .contain .contents .item .slide-area .swiper-container .swiper-slide img{
	width: 517px;
	border-radius: 8px;
}

.main-container .most-viewed .contain .contents .item .slide-area .swiper{
  display: flex;
  align-items: center;
  justify-content: center;
}

.slidelist-1 .swiper-pagination,
.slidelist-2 .swiper-pagination,
.slidelist-3 .swiper-pagination{
  bottom: 15px !important;
  left: 45% !important;
}

.main-container .most-viewed .contain .contents .item .go-area{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.main-container .most-viewed .contain .contents .item ul{
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  align-self: stretch;
}

.main-container .most-viewed .contain .contents .item ul li:nth-child(1){
  color: #000;
  font-family: "Pretendard Variable";
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 32px; /* 133.333% */
}

.main-container .most-viewed .contain .contents .item ul li:nth-child(2){
  color: #495057;
  font-family: "Pretendard Variable";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 175% */
}

.main-container .most-viewed .container.t-line{
  padding-top: 60px;
  border-top: 1px solid #E9ECEF;
}

.main-container .most-viewed .container .inn-history{
  display: flex;
  padding-top: 65px;
  width: 100%;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.main-container .most-viewed .container .inn-history .item{
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 24px;
}

.main-container .most-viewed .container .inn-history .item .box{
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  padding-bottom: 20px;
  align-items: flex-start;
  gap: 111px;
  flex-shrink: 0;
}

.main-container .most-viewed .container .inn-history .item ul{
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  /* gap: 10px; */
}

.main-container .most-viewed .container .inn-history .item  h6{
  color: #000;
  font-family: "Pretendard Variable";
  font-size: 30px;
  font-style: normal;
  font-weight: 500;
  line-height: 50px; /* 140% */
}

.main-container .most-viewed .container .inn-history .item ul li{
  display: flex;
  width: 100%;
  height: 50px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
}

.main-container .most-viewed .container .inn-history .item ul li:nth-child(1){
    border-top: 1px solid #E9ECEF;
}

.main-container .most-viewed .container .inn-history .item ul li p{
  color: #495057;
  font-family: "Pretendard Variable";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px; /* 175% */
}


.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    background: #fff;
    opacity: 0.9;
}
.swiper-pagination-bullet-active {
    opacity: 1;
    background: #007aff;
}

/* 사이즈 변경 구간 1097px */
@media screen and (max-width: 1097px){

  .main-container.intro-company .container,
  #slidelist-4-pane .most-viewed .contain,
  #slidelist-4-pane .most-viewed .contain:nth-child(4){
    width: 100% !important;
  }

  .main-container .most-viewed .container .inn-title{
    padding: 0px 20px 20px;
  }

  .main-container .most-viewed .container .inn-content,
  .main-container .most-viewed .container .inn-btn{
    padding: 0px 20px;
  }

  .main-container .most-viewed .container .inn-way{
    padding: 0px 20px 60px;
  }

  /* .main-container .most-viewed .contain .contents .item .box.group{
    padding: 0px;
  } */

  .main-container .most-viewed .contain .contents.info .item .box:nth-child(1){
    width: auto;
  }

  .main-container .most-viewed .contain .contents .item .box img{
    width: 100%;
    background-size: contain;
  }

  .main-container .most-viewed .contain .contents.into .item,
  .main-container .most-viewed .contain .contents.info .item{
    padding: 60px 20px;
    width: 100%;
  }

  .main-container .most-viewed .container .inn-history{
    padding: 60px 20px 0px;
  }

  .main-container .most-viewed .container .inn-history .item .box{
    width: 93%;
  }
  
  .main-container .most-viewed .contain .contents .item .slide-area img{
    width: 100%;
    background-size: contain;
  }
}

/* 사이즈 변경 구간 768px */
@media screen and (max-width: 768px){

  .main-container .title-sec h3{
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
  }

  .main-container .title-sec h4{
    font-size: 24px;
    line-height: 34px;
  }

  .main-container .title-sec p{
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
  }

  #slidelist-4-pane .most-viewed .container.b-line{
    padding-bottom: 40px;
    gap: 10px;
    border-bottom: 0px;
  }

  .main-container .most-viewed .container .inn-title,
  .main-container .most-viewed .container .inn-sec,
  .main-container .most-viewed .container .txtarea{
    gap: 20px;
  }

  .main-container .most-viewed .container .inn-title h3{
    font-size: 24px;
    font-weight: 600;
    line-height: 34px;
  }

  .main-container .most-viewed .container .inn-title .txtarea p{
    font-size: 14px;
    line-height: 22px;
  }

  .main-container .most-viewed .container .inn-content ul{
    gap: 110px;
  }

  .main-container .most-viewed .container .inn-content ul li p:nth-child(1){
    font-size: 12px;
    line-height: 24px;
  }

  .main-container .most-viewed .container .inn-content ul li p:nth-child(2){
    font-size: 22px;
    line-height: 28px;
  }

  .main-container .most-viewed .container .inn-way ul{
    gap: 16px;
  }

  .main-container .most-viewed .container .inn-way ul li{
    max-width: 205px;

  }

  .main-container .most-viewed .container .inn-way ul li p:nth-child(1){
    font-size: 30px;
    font-weight: 500;
    line-height: 32px;
  }

  .main-container .most-viewed .container .inn-way ul li p:nth-child(2){
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
  }

  .main-container .most-viewed .container .inn-way ul li p:nth-child(3){
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
  }

  .main-container .most-viewed .container .inn-btn button.btn-down{
    padding-left: 10px 15px;
    font-size: 12px;
    line-height: 20px;
  }

  .main-container .most-viewed .contain .contents .inn-title h4{
    font-size: 18px;
    line-height: 22px;
  }

  .main-container .most-viewed .contain .contents .inn-title h5{
    font-size: 24px;
    line-height: 34px;
  }

  .main-container .most-viewed .contain .contents .item .box h6{
    font-size: 22px;
    line-height: 32px;
  }

  .main-container .most-viewed .contain .contents .item .box p,
  .main-container .most-viewed .contain .contents .item ul li:nth-child(2){
    font-size: 14px;
    line-height: 22px;
  }

  .main-container .most-viewed .contain .contents .item ul li:nth-child(1){
    font-size: 18px;
    line-height: 28px;
  }

  .main-container .most-viewed .contain .contents .item{
    flex-direction: column;
    width: 100%;
  }

  .main-container .most-viewed .contain .contents .item.reverse{
    flex-direction: column-reverse;
    width: 100%;
  }

  .main-container .most-viewed .contain .contents.info .inn-title{
    padding-top: 40px;
  }

  .main-container .most-viewed .contain .contents.info .item{
    padding: 0px 20px;
    border-bottom: 0px;
  }

  .main-container .most-viewed .contain .contents .item .box.txt{
    padding: 0px 0px 20px 0px;
  }

  .main-container .most-viewed .container .inn-history .item h6{
    font-size: 24px;
    /* line-height: 34px; */
  }

  .main-container .most-viewed .container .inn-history .item ul li p{
    font-size: 14px;
    line-height: 22px;
  }

  .main-container .most-viewed .contain .contents .item .slide-area{
    width: 100%;
  }
}

/* 사이즈 변경 구간 500 px */
@media screen and (max-width: 500px){
.main-container .m-main-sec.m-item .title-sec.bg{
	background: url(../images/gwdbuilding-01.png) 72% 50%;
	width: 100%;
	height: 360px;
}


  .main-container.intro-company .container{
    padding-bottom: 0px;
  }

  .main-sec.d-item,
  .main-container .most-viewed .container .inn-history .item img.d-item{
    display: none;
  }

  .m-main-sec.m-item,
  .main-container .most-viewed .container .inn-history .item img.m-item{
    display: block;
  }

  .main-container .most-viewed{
    padding-top: 30px;
    gap: 40px;
  }

  .main-container.intro-company .most-viewed .container{
    padding-top: 0px;
    padding-bottom: 40px;
    gap: 10px;
    border-bottom: 0px;
  }
  
  .main-container.intro-company .most-viewed .container img.inn-img{
  	height: 197px;
  	background-size: contain;
  }

  .main-container .most-viewed .container:nth-child(5){
    padding-bottom: 0px;
  }

  .m-main-sec{
    width: 100%;
  }

  .main-container .title-sec{
    padding: 0px 20px;
	height: auto;
  }

	.main-container .title-sec img{
		height: 360px;
	}

  .main-container .title-sec .txtarea{
    padding: 0px 20px;
  }

  .main-container .most-viewed .container .inn-content ul{
    gap: 45px;
  }

  .main-container .most-viewed .container .inn-content ul li{
    gap: 5px;
  }

  .main-container .most-viewed .container .inn-way{
    padding: 0px 20px 0px;
  }

  .main-container .most-viewed .container .inn-way ul{
    padding-bottom: 40px;
  }

  .main-container .most-viewed .container .inn-way ul li{
    display: flex;
    padding: 15px;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    flex-shrink: 0;
  }

  .main-container .most-viewed .container .inn-content div,
  .main-container .most-viewed .container .inn-title.d-item{
    display: none;
  }

  #slidelist-4-pane .most-viewed .contain{
    padding: 0px 20px 0px;
  }

  .main-container .most-viewed .contain .contents{
    padding: 0px;
    gap: 40px;
  }

  .main-container .most-viewed .contain .contents.into .item,
  .main-container .most-viewed .contain .contents.info .item,
  .main-container .most-viewed .contain .contents .item .box.txt{
    padding: 0px;
  }

  .main-container .most-viewed .contain .contents .item,
  .main-container .most-viewed .contain .contents .item .box.group,
  .main-container .most-viewed .contain .contents .item .box.txt{
  	width: 100%;
    gap: 20px;
  }

  .main-container .most-viewed .contain .contents.info .item .box:nth-child(1){
    gap: 14px;
  }

  .main-container .most-viewed .contain .contents .inn-title,
  .main-container .most-viewed .contain .contents .item ul{
    gap: 10px;
  }

  .main-container .most-viewed .contain .contents.info .item{
    border-bottom: 0px;
  }

  .main-container .most-viewed .contain .contents .item .box .txtarea{
    gap: 14px;
    padding-bottom: 6px;
  }

  .main-container .most-viewed .contain .contents .item .go-area,
  .main-container .most-viewed .contain .contents .item .box{
    gap: 14px;
  }

  .main-container .most-viewed .contain .contents.info .item:last-child{
    padding-bottom: 40px;
  }

  #slidelist-4-pane .most-viewed .contain:nth-child(5) .item{
    padding-bottom: 40px;
    border-bottom: 1px solid #E9ECEF;
  }

  .main-container .most-viewed .container.t-line{
    border-top: 0px;
  }

  .main-container .most-viewed .contain .contents .item .box p.s-txt{
    padding-top: 0px;
  }

  .main-container .most-viewed .container .inn-history{
    padding: 0px 20px;
  }

  .main-container .most-viewed .container .inn-history .item img.m-item{
    background-size: cover;
  }

  .main-container .most-viewed .container .inn-history .item .box{
    flex-direction: column;
    gap: 8px;
  }

  .main-container .most-viewed .container .inn-history .item ul{
    gap: 8px;
  }

  .main-container .most-viewed .container .inn-history .item ul li{
    gap: 0px;
    padding-top: 14px;
    height: auto;
  }

  .main-container .most-viewed .container .inn-history .item h6{
    line-height: 34px;
  }
  
  .main-container .most-viewed .contain .contents .item .slide-area .swiper-container .swiper-slide img{
  	width: 100%;
  }
}

/* 사이즈 변경 구간 499px */
@media screen and (max-width: 499px){
  .main-container .most-viewed .container .inn-way ul li{
    max-width: 165px;
  }
  
  .main-container .most-viewed .container .inn-content ul li p:nth-child(2){
  	font-size: 20px;
  	line-height: 24px;
 }
}