@import url('css2.css');
.boxOne,
.productBox,
.userAreaBox,
.newsBox{
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.05),
  0 0 0 1px rgba(0, 0, 0, 0.02),
  inset 0 -3px 0 0 rgba(0, 0, 0, 0);
  transition: box-shadow 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1), transform 0.25s ease;
}
.boxTwo,
.productBox:hover,
.userAreaBox:hover,
.newsBox:hover{
  transform: translateY(-6px);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.12),
  0 0 0 1px rgba(0, 0, 0, 0.05),
  inset 0 -4px 0 0 #e2001a;
}

.userAreaBox img{
  opacity: 0.6;
}
.userAreaBox img:hover{
  opacity: 1;
}


.boxThree{
  transform: translateY(-6px);
}

.categoryList>div>a:hover {
  color: #ef1812;
}

.timeLine{
  transform: translateX(5%);
}

.lineOne{
  flex: 1;
  justify-content: space-between;
  position: relative;
}

.timeLineText{
  position: relative;
  left: -5px;
  font-weight: bold;
}

.lineOne:nth-child(odd)>.timeLineText{
  transform: translateY(-4rem);
  top: -3px;
}

.timeLineText2{
  position: absolute;
  width: 100%;
  white-space: nowrap;

}
.lineOne:nth-child(even)>.timeLineText2{
  top: -16rem;
  left: -33%;
}

.lineOne:nth-child(odd)>.timeLineText2{
  top: 4rem;
  left: -33%;
}

.lineOne:before {
  content: "";
  position: absolute;
  height: 50px;
  border: 1px dashed #adadad;
  left: 24.5px;
}

.lineOne:nth-child(even):before{
  transform: translateY(-100%);
}

.lineOne:nth-child(odd):before{
  transform: translateY(25%);
}
.lineOne.lineColorRed>.timeLinePoint{
  box-shadow: 0 0 0 2px #e2001a, 0 0 0 4px #e2001a;
}
.lineOne.lineColorRed>.timeLineText,
.lineOne.lineColorRed>.timeLineText2{
  color: #e2001a;
}

.lineOne.lineColorRed:before{
  border-color: #e2001a;
}

.lineOne.lineColorNormal:before{
  border-color: #adadad;
}

.lineOne:not(:last-child)::after{
  content: "";
  position: absolute;
  width: 90%;
  border: 1px dashed #adadad;
  transform: translateX(15%);
  top: 4px;
}

.timeLinePoint{
  display: inline-block;
  vertical-align: top;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #adadad;
  margin: 0 7%;
  position: relative;
  cursor: pointer;
}
.timeLinePoint:active,
.timeLinePoint:hover{
  box-shadow: 0 0 0 2px #e2001a, 0 0 0 4px #e2001a;
}

.timeLineOn{
  box-shadow: 0 0 0 2px #e2001a, 0 0 0 4px #e2001a;
}

.timeLinePoint:active+.timeLineText,
.timeLinePoint:active+.timeLineText2{
  color: #e2001a;
}

.lineColorRed{
  border-color: #e2001a;
}

.lineColorNormal{
  border-color: #adadad;
}
.lineOneTextTitle,
.lineOneTextContent{
  width: 100%;
  text-align: center;
  white-space: normal;
}

.timeLineText2 {
  display: flex;
  flex-direction: column;
  height: 200px;
}
.lineOne:nth-child(even)>.timeLineText2{
  justify-content: flex-end;
}
.lineOne:nth-child(odd)>.timeLineText2{
  justify-content: flex-start;
}


.lineOneTextTitle,
.lineOneTextContent{
}

.timeLineText2 div{
  font-size: 14px;
}

.section-padding240{
  padding-bottom: 200px;
}

.userAreaTopBox{
  padding-bottom: 80px;
}
.useArea{
  position: relative;
}

.userAreaMark{
  position: absolute;
  top: 0px;
  display: flex;
}

.userAreaMark div{
  display: inline-block;
}
.useAreaPoint {
  width: 12px;
  height: 12px;
  background-color: #e2001a;
  border-radius: 50%;
  box-shadow: 0 0 0 2px white;
}

.useAreaMark{
  position: absolute;
  left: 20%;
  top: 30%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,0.5);
  padding: 5px 12px 5px 8px;
  border-radius: 30px;
  backdrop-filter: blur(4px);
  white-space: nowrap;
  color: #fff;
  pointer-events: none;
}