/* root */
:root{
  --PrimaryColor: #4A81FC;
  --SecondaryColor: #1C336A;
  --PointColor: #ff5722;
  --ContentColor: #F2F4F6;
  --Pastelcolor1: #F9E8E5;
  --Pastelcolor2: #F8E9DA;
  --Pastelcolor3: #E9EBF4;
  --Pastelcolor4: #DBEDF0;
  --Pastelcolor5: #FFFAE8;
  --GrayScale1: #121212;
  --GrayScale2: #333333;
  --GrayScale3: #929292;
  --MenuColor: #73696B;
}

/* header */
/* body가 부모태그 / snb, signature */
/* section1 */
/* body가 부모태그 / main_top */
/* section2 */
/* section3 */
#section3{
  position: absolute;
  top: 2160px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3000;
}
.sec3_wrap{
  width: 100%;
  height: 1080px;
  display: flex;
  flex-direction: column;
  gap: 60px;
  position: relative;
  z-index: 3000;
}
.sec3_top_inner{
  height: 520px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
  z-index: 3000;
}
/* sec3_notice */
.sec3_notice{
  width: 845px;
  height: 400px;
  position: relative;
  z-index: 3001;
}
.notice_title{
  margin-top: 28px;
  height: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 3002;
}
.notice_left_menu{
  width: 272px;
  height: 48px;
  position: relative;
  z-index: 3003;
}
.notice_tab{
  width: 130px;
  height: 100%;
  font-size: 20px; 
  font-family: "Pretendard GOV Variable", "Pretendard GOV", -apple-system;
  font-weight: 700;
  color:#121212;
  background: none;
  cursor: pointer;
  position: relative;
  z-index: 3004;
  pointer-events: auto;
}
.notice_tab.active{
  border-bottom: 4px solid var(--PointColor);
}
/* controls */
.notice_controls{
  width: 166px;
  position: relative;
  z-index: 3003;
  pointer-events: auto;
}
.notice_controls button{
  background: none;
  cursor: pointer;
  position: relative;
  z-index: 3004;
  pointer-events: auto;
}
.notice_next{
  margin-right: 30px;
}
.notice_controls button img{}
/* swiper */
.notice_content{
  margin-top: 28px;
  position: relative;
  z-index: 3001;
}
.notice_content_wrap{
  width: 845px;
  height: 265px;
  border: 1.5px solid #57595C;
  border-radius: 19px;
}
.notice_content_wrap > .swiper{
  width: 100%;
  height: 100%;
}
.notice_menu_list{
  display: none;
}
.notice_menu_list.active{
  display: block;
}
.notice_menu_list .swiper-container{
  width: 800px;
  height: 230px;
  margin: 12px auto;
  overflow: hidden;
}
.notice_menu_list > .swiper-container > .swiper-wrapper{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.notice_menu_list .swiper-container > .swiper-wrapper .swiper-slide{
  width: 100%;
  height: 60px;
  padding: 10px 20px;
  border-bottom: 1px solid #D8D8D8;
}
.notice_menu_list > .swiper-container > .swiper-wrapper > .swiper-slide > a{
  width: auto;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  white-space: nowrap;
}
.notice_menu_list > .swiper-container > .swiper-wrapper > .swiper-slide > a > h6{
  font-weight: 800;
}
.notice_menu_list > .swiper-container > .swiper-wrapper > .swiper-slide > a > .noticebox1{
  display: block;
  background-color: var(--Pastelcolor1);
  padding: 10px 15px;
  border-radius: 50px;
  border: 2px solid #f095a660;
}
.notice_menu_list > .swiper-container > .swiper-wrapper > .swiper-slide > a > .noticebox2{
  display: block;
  background-color: var(--Pastelcolor2);
  padding: 10px 15px;
  border-radius: 50px;
  border: 2px solid #F4AE7760;
}
.notice_menu_list > .swiper-container > .swiper-wrapper > .swiper-slide > a > .noticebox3{
  display: block;
  background-color: var(--Pastelcolor3);
  padding: 10px 15px;
  border-radius: 50px;
  border: 2px solid #D49DCC60;
}
.notice_menu_list > .swiper-container > .swiper-wrapper > .swiper-slide > a > .noticebox4{
  display: block;
  background-color: var(--Pastelcolor4);
  padding: 10px 15px;
  border-radius: 50px;
  border: 2px solid #74B0FF60;
}
.notice_menu_list > .swiper-container > .swiper-wrapper > .swiper-slide > a > .body_text{
  display: block;
  width: 550px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notice_menu_list > .swiper-container > .swiper-wrapper > .swiper-slide > a > .small_text{}
.notice_menu_list > .swiper-container > .swiper-wrapper > .swiper-slide > a > .body_text:hover{
  text-decoration: underline;
}
/* sec3_cardNews */
.sec3_cardNews{
  width: 400px;
  height: 400px;
  border-radius: 19px;
}
.cardBox{}
.cardBoxIn{
  width: 100%;
  height: 100%;
}
.cardBoxIn > .swiper-slide{}
.cardBoxIn > .swiper-slide > a{
  display: inline-block;
  width: 100%;
  height: 100%;
}
.cardBoxIn > .swiper-slide > a > img{
  width: 100%;
  height: 100%;
}
/* swiper-pagination */
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet  {
  margin-bottom: 5px;
  cursor: pointer;
}
.swiper-pagination > .swiper-pagination-bullet{
  background-color: #fff;
  opacity: 1;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
}
.swiper-pagination > .swiper-pagination-bullet-active{
  background-color: var(--PointColor);
  width: 20px;
  border-radius: 20px;
}
/* sec3_consumer */
.sec3_consumer{
  width: 100%;
  height: 505px;
  position: relative;
}
.sec3_consumer::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -100;
  background: url(../assets/images/section3_back.png) no-repeat 50% 20%;
}
.sec3_consumer_inner{
  position: relative;
}
.sec3_consumer_inner h3{
  margin-top: 25px;
  position: absolute;
}
/* swiper */
.consumerBox{
  width: 1210px;
  height: 450px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.consumerBoxIn{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.consumerBoxIn > .swiper-slide{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  font-family: "Pretendard GOV Variable", "Pretendard GOV", -apple-system;
  font-weight: 500;
  color:#121212;
  width: 230px;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), scale 0.3s ease; 
  transform: perspective(1000px) translateZ(0);
}
.consumerBoxIn > .swiper-slide > img{
  height: auto;
}
.consumerBoxIn > .swiper-slide > p{
  text-align: center;
  position: absolute;
  top: 60%;
  transform: translateY(-50%);
  line-height: 1.1;
  font-weight: 600;
  transition:  transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* active 이미지 */
.consumerBoxIn > .consumer-visual-active{
  transform: perspective(1000px) translateZ(100px) rotateY(0deg); 
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), margin 0.6s ease; 
}
.consumerBoxIn > .swiper-slide:not(.consumer-visual-active) {
  transform: perspective(1000px) translateZ(0) rotateY(-15deg); 
}
.consumerBoxIn > .consumer-visual-active > img{
  width: auto;
  height: auto;
}
.consumerBoxIn > .consumer-visual-active > p{
  top: 73%;
  font-weight: 800;
}
.consumerBoxIn > .consumer-visual-active::before{
  content: '';
  position: absolute;
  top: 70%;
  left: 105%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: url(../assets/images/notice-plus.svg) no-repeat 50% 50%;
  background-color: #fff;
  border-radius: 50%;
  z-index: 100;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}
.consumerBoxIn > .consumer-visual-active::after{
  content: '';
  position: absolute;
  width: 468px;
  height: 380px;
  top: 79%;
  left: 50%;
  z-index: -1;
  background: url(../assets/images/consumerNewsshadow.png) no-repeat 50% 50%;
  background-size: cover;
  transform: translate(-50%, -50%);
}
.consumer_controls{
  position: absolute;
  top: 55%;
  left: 50%;
  width: 380px;
  transform: translate(-50%, -50%);
  z-index: 100;
}
.consumer-next, .consumer-prev{
  width: 16px;
  height: 25px;
  cursor: pointer;
}
.consumer-next{
  position: absolute;
  right: 0;
}
/* section4 */
/* footer */