#sec1 {
  padding-top: 128px;
}
#sec1 .tit_area {
  flex-direction: column;
  background-image: url(../img/centerinfo1_bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: clamp(470px, 32.29vw, 620px);
}
#sec1 .tit_area h2 {
  color: #fff;
  line-height: 1.3;
  padding-top: clamp(120px, 7.81vw, 150px);
}
#sec1 .tit_area p {
  color: #fff;
  font-weight: 200;
  font-size: clamp(22px, 1.46vw, 28px);
}
#sec1 .icon_area {
  background-color: #fff;
  margin-top: calc(clamp(80px, 6.25vw, 120px) * -1);
  transition-delay: 0.3s;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding-top: clamp(80px, 6.25vw, 120px);
  position: relative;
  z-index: 10;
}
#sec1 .icon_area .icon_tit_area h3 {
	font-size: clamp(38px, 2.81vw, 54px);
	font-weight: 700;
}
#sec1 .icon_area .icon_tit_area p {
	font-size: clamp(20px, 1.46vw, 28px);
	line-height: 1.5;
}
#sec1 .icon_area li {
	flex-direction: column;
}
#sec1 .icon_area li::before {
  content: "";
  width: clamp(76px, 5.73vw, 110px);
  height: clamp(76px, 5.73vw, 110px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  margin-bottom: clamp(20px, 2.08vw, 40px);
}
#sec1 .icon_area li .txt {
  font-size: clamp(20px, 1.46vw, 28px);
}
#sec1 .icon_area li .txt p {
  font-weight: 700;
  line-height: 1.5;
}
#sec1 .icon_area .item1::before {
  background-image: url(../img/centerinfo1_icon1.svg);
}
#sec1 .icon_area .item2 {
	transition-delay: 0.1s
}
#sec1 .icon_area .item2::before {
  background-image: url(../img/centerinfo1_icon2.svg);
}
#sec1 .icon_area .item3 {
  transition-delay: 0.2s
}
#sec1 .icon_area .item3::before {
  background-image: url(../img/centerinfo1_icon3.svg);
}
#sec1 .icon_area .item4 {
  transition-delay: 0.3s
}
#sec1 .icon_area .item4::before {
  background-image: url(../img/centerinfo1_icon4.svg);
}
#sec1 .cont_area .top_tit h3, #sec1 .cont_area .middle_tit h3, #sec1 .cont_area .bottom_tit h3 {
  font-size: clamp(38px, 2.81vw, 54px);
  font-weight: 700;
  line-height: 1.3;
}
#sec1 .cont_area .top_tit p, #sec1 .cont_area .middle_tit p, #sec1 .cont_area .bottom_tit p {
  font-size: clamp(20px, 1.46vw, 28px);
  line-height: 1.4;
  color: #444;
}
#sec1 .cont_area .cont_top {
	background-color: #F9F9F9;
}
#sec1 .cont_area .cont_top .left {
	position: sticky;
	left: 0;
	top: 120px;
	width: clamp(400px, 28.65vw, 550px);
	height: fit-content;
}
#sec1 .cont_area .cont_top .left ul li:not(:last-child) {
	margin-bottom: clamp(16px, 1.25vw, 24px);
}
#sec1 .cont_area .cont_top .left ul li a {
	font-size: clamp(20px, 1.15vw, 22px);
	font-weight: 500;
	color: #999;
}
#sec1 .cont_area .cont_top .left ul .on a {
	color: var(--color-point);
	font-weight: 700;
}
#sec1 .cont_area .cont_top .right {
	width: clamp(540px, 38.54vw, 740px);
	overflow: hidden;
}
#sec1 .cont_area .cont_top .right ul li {
	scroll-margin-top: clamp(100px, 5.21vw, 100px);
}
#sec1 .cont_area .cont_top .right ul li:not(:last-child) {
	margin-bottom: clamp(60px, 5.21vw, 100px);
}
#sec1 .cont_area .cont_top .right .img_wrapper {
	height: clamp(300px, 21.88vw, 420px);
	border-radius: 10px;
	overflow: hidden;
}
#sec1 .cont_area .cont_top .right .img_wrapper img {
	height: 100%;
	object-fit: cover;
}
#sec1 .cont_area .cont_top .right .txt_wrapper h4 {
	font-size: clamp(22px, 1.46vw, 28px);
	font-weight: 700;
	color: var(--color-point);
}
#sec1 .cont_area .cont_top .right .txt_wrapper p {
	font-size: clamp(16px, 1.04vw, 20px);
	color: #444;
	line-height: 1.7;
}
#sec1 .cont_area .cont_middle {
	background-image: url(../img/centerinfo1_bg2.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
#sec1 .cont_area .cont_middle .container {
	width: 100%;
	max-width: 100%;
}
#sec1 .cont_area .cont_middle .middle_tit h3, #sec1 .cont_area .cont_middle .middle_tit p {
	color: #fff;
}
#sec1 .cont_area .cont_middle .center_success_swiper {
	margin-left: max(calc((100% - 1400px) / 2), 2%);
	overflow: hidden;
}
#sec1 .cont_area .cont_middle .center_success_swiper .swiper-pagination {
	width: clamp(215px, 11.20vw, 215px);
	position: relative;
}
#sec1 .cont_area .cont_middle .center_success_swiper .swiper-pagination .current, #sec1 .cont_area .cont_middle .center_success_swiper .swiper-pagination .total {
	font-size: clamp(18px, 0.94vw, 18px);
	font-weight: 700;
	color: #fff;
}
#sec1 .cont_area .cont_middle .center_success_swiper .swiper-pagination .autoplay-progress {
	width: clamp(150px, 7.81vw, 150px);
	height: 2px;
	background-color: rgba(255, 255, 255, 0.2);
}
#sec1 .cont_area .cont_middle .center_success_swiper .swiper-pagination .autoplay-progress .progress-fill {
	height: 100%;
	width: 0;
	background-color: #fff;
	transition: width 4s linear;
}
#sec1 .cont_area .cont_middle .center_success_swiper .swiper-slide a {
	background-color: #fff; 
	padding: clamp(20px, 2.08vw, 40px);
	border-radius: 8px;
	transition: 0.4s;
}
#sec1 .cont_area .cont_middle .center_success_swiper .swiper-slide a dl {
	min-height: clamp(192px, 12.19vw, 234px);
}
#sec1 .cont_area .cont_middle .center_success_swiper .swiper-slide a dl span {
	font-size: clamp(18px, 1.04vw, 20px);
	font-weight: 700;
	color: var(--color-point);
}
#sec1 .cont_area .cont_middle .center_success_swiper .swiper-slide a dl dt {
	font-size: clamp(20px, 1.25vw, 24px);
	font-weight: 700;
	word-break: break-all;
    -webkit-line-clamp: 2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
	line-height: 1.5;
}
#sec1 .cont_area .cont_middle .center_success_swiper .swiper-slide a dl dd {
	font-size: clamp(16px, 0.94vw, 18px);
	color: #444;
	word-break: break-all;
    -webkit-line-clamp: 4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
	line-height: 1.5;
}
#sec1 .cont_area .cont_middle .center_success_swiper .swiper-slide a:hover {
	background-color: var(--color-point);
}
#sec1 .cont_area .cont_middle .center_success_swiper .swiper-slide a:hover dl span,
#sec1 .cont_area .cont_middle .center_success_swiper .swiper-slide a:hover dl dt,
#sec1 .cont_area .cont_middle .center_success_swiper .swiper-slide a:hover dl dd {
	color: #fff;
}
#sec1 .cont_area .cont_bottom ul li {
  width: calc((100% - clamp(50px, 4.17vw, 80px)) / 3);
  border: 1px solid #bbb;
  margin-bottom: 16px;
}
#sec1 .cont_area .cont_bottom ul li:not(:nth-child(3n)) {
  margin-right: clamp(25px, 2.08vw, 40px);
}
#sec1 .cont_area .cont_bottom ul li a {
  padding: clamp(18px, 1.2vw, 23px) clamp(20px, 1.56vw, 30px);
  transition: background-color 0.3s;
}
#sec1 .cont_area .cont_bottom ul li a .txt span {
  font-size: clamp(16px, 0.94vw, 18px);
  color: #999;
  font-weight: 300;
  transition: color 0.3s;
}
#sec1 .cont_area .cont_bottom ul li a .txt p {
  font-size: clamp(22px, 1.46vw, 28px);
  font-weight: 700;
  transition: color 0.3s;
}
#sec1 .cont_area .cont_bottom ul li a > span {
  width: clamp(30px, 2.08vw, 40px);
  height: clamp(30px, 2.08vw, 40px);
  border-radius: 50%;
  border: 1px solid #222;
  transition: border-color 0.3s;
}
#sec1 .cont_area .cont_bottom ul li a > span::after {
  content: "";
  width: 5px;
  height: 10px;
  background-image: url(../img/right_arrow_b.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  transition: all 0.3s;
}
#sec1 .cont_area .cont_bottom ul li:hover a {
  background-color: var(--color-point);
}
#sec1 .cont_area .cont_bottom ul li:hover a .txt span {
  color: #fff;
}
#sec1 .cont_area .cont_bottom ul li:hover a .txt p {
  color: #fff;
}
#sec1 .cont_area .cont_bottom ul li:hover a > span {
  border-color: #fff;
}
#sec1 .cont_area .cont_bottom ul li:hover a > span::after {
  background-image: url(../img/right_arrow_w.svg);
}

@media (max-width: 1000px) {
	#sec1 .icon_area ul {
		flex-wrap: wrap;
		justify-content: center;
	}
	#sec1 .icon_area ul li {
		width: 45%;
		flex-direction: row;
		justify-content: flex-start;
	}
	#sec1 .icon_area ul li:first-child, #sec1 .icon_area ul li:nth-child(2) {
		margin-bottom: 50px;
	}
	#sec1 .icon_area li::before {
		margin-bottom: 0;
		margin-right: clamp(15px, 3.00vw, 30px);
		width: clamp(62px, 7.60vw, 76px);
		height: clamp(62px, 7.60vw, 76px);
	}
	#sec1 .icon_area li .txt {
		text-align: left;
		font-size: clamp(18px, 2.00vw, 20px)
	}
	#sec1 .cont_area .cont_top .container {
		flex-direction: column;
	}
	#sec1 .cont_area .cont_top .top_tit {
		text-align: center;
	}
	#sec1 .cont_area .cont_top .left {
		position: unset;
		width: 100%;
	}
	#sec1 .cont_area .cont_top .left ul {
		display: none;
	}
	#sec1 .cont_area .cont_top .right {
		width: 100%;
	}
	#sec1 .cont_area .cont_top .right ul li:not(:last-child) {
		margin-bottom: clamp(60px, 8.00vw, 80px);
	}
	#sec1 .cont_area .cont_top .right .img_wrapper {
		height: clamp(360px, 42.00vw, 420px);
	}
	#sec1 .cont_area .cont_top .right .txt_wrapper h4 {
		font-size: 26px;
	}
	#sec1 .cont_area .cont_top .right .txt_wrapper p {
		font-size: 20px;
	}
	#sec1 .cont_area .cont_bottom ul li {
    width: calc((100% - 25px) / 2);
  }
  #sec1 .cont_area cont_bottom ul li:nth-child(3n) {
    margin-right: 25px;
  }
  #sec1 .cont_area .cont_bottom ul li:nth-child(2n), #sec1 .cont_area .cont_info .info_bottom ul li:nth-child(6n) {
    margin-right: 0;
  }
}

@media (max-width: 750px) {
  #sec1 {
    padding-top: clamp(60px, 17.07vw, 128px);
  }
  #sec1 .tit_area {
    height: clamp(330px, 88.00vw, 660px);
  }
  #sec1 .tit_area h2 {
	padding-top: clamp(70px, 23.33vw, 175px);
	font-size: clamp(28px, 7.07vw, 53px);
  }
  #sec1 .tit_area p {
	font-size: clamp(16px, 3.73vw, 28px);
  }
  #sec1 .icon_area {
    margin-top: calc(clamp(40px, 10.67vw, 80px) * -1);
	padding-top: clamp(50px, 13.33vw, 100px);
  }
  #sec1 .icon_area .icon_tit_area h3 {
	font-size: clamp(28px, 7.07vw, 53px);
	line-height: 1.3;
  }
  #sec1 .icon_area .icon_tit_area p {
	font-size: clamp(15px, 3.73vw, 28px);
  }
  #sec1 .icon_area ul {
	width: 100%;
	flex-wrap: wrap;
	justify-content: center;
  }
  #sec1 .icon_area ul li {
	flex-direction: row;
	justify-content: flex-start;
	width: 82%;
  }
  #sec1 .icon_area ul li:not(:last-child) {
    margin-bottom: clamp(35px, 9.33vw, 70px);
  }
  #sec1 .icon_area ul li::before {
    width: clamp(60px, 16vw, 120px);
    height: clamp(60px, 16vw, 120px);
    margin-right: clamp(20px, 5.33vw, 40px);
	margin-bottom: 0;
  }
  #sec1 .icon_area ul li .txt {
	width: calc(100% - clamp(80px, 21.33vw, 160px));
    font-size: clamp(20px, 4.53vw, 34px);
	text-align: left;
  }
  #sec1 .cont_area .top_tit h3, #sec1 .cont_area .middle_tit h3, #sec1 .cont_area .bottom_tit h3 {
	font-size: clamp(28px, 7.07vw, 53px);
  }
  #sec1 .cont_area .top_tit p, #sec1 .cont_area .middle_tit p, #sec1 .cont_area .bottom_tit p {
	font-size: clamp(15px, 3.73vw, 28px);
  }
  #sec1 .cont_area .cont_top .right .img_wrapper {
	height: clamp(190px, 50.67vw, 380px);
  }
  #sec1 .cont_area .cont_top .right .txt_wrapper h4 {
	font-size: clamp(22px, 5.07vw, 38px);
  }
  #sec1 .cont_area .cont_top .right .txt_wrapper p {
	font-size: clamp(16px, 4.00vw, 30px);
  }
  #sec1 .cont_area .cont_middle .middle_tit {
	text-align: center;
  }
  #sec1 .cont_area .cont_middle .center_success_swiper {
	  margin-left: 6.13vw;
  }
  #sec1 .cont_area .cont_middle .center_success_swiper .swiper-pagination {
	width: clamp(200px, 53.33vw, 400px);
  }
  #sec1 .cont_area .cont_middle .center_success_swiper .swiper-pagination .current, #sec1 .cont_area .cont_middle .center_success_swiper .swiper-pagination .total {
	  font-size: clamp(14px, 3.20vw, 24px);
  }
  #sec1 .cont_area .cont_middle .center_success_swiper .swiper-pagination .autoplay-progress {
	  width: clamp(150px, 40.00vw, 300px);
	  height: clamp(2px, 0.53vw, 4px)
  }
  #sec1 .cont_area .cont_middle .center_success_swiper .swiper-slide a {
	  padding: clamp(25px, 6.67vw, 50px);
  }
  #sec1 .cont_area .cont_middle .center_success_swiper .swiper-slide a dl span {
	  font-size: clamp(18px, 4.27vw, 32px);
  }
  #sec1 .cont_area .cont_middle .center_success_swiper .swiper-slide a dl dt {
	  font-size: clamp(20px, 5.07vw, 38px);
  }
  #sec1 .cont_area .cont_middle .center_success_swiper .swiper-slide a dl dd {
	  font-size: clamp(16px, 4.00vw, 30px);
  }
  #sec1 .cont_area .cont_bottom ul li {
    width: 100%;
    margin-right: 0 !important;
    margin-bottom: clamp(10px, 2.67vw, 20px);
  }
  #sec1 .cont_area .cont_bottom ul li a {
    padding: clamp(15px, 4vw, 30px) clamp(20px, 5.33vw, 40px);
  }
  #sec1 .cont_area .cont_bottom ul li a .txt span {
    font-size: clamp(12px, 3.2vw, 24px);
  }
  #sec1 .cont_area .cont_bottom ul li a .txt p {
    font-size: clamp(18px, 4.53vw, 34px);
  }
  #sec1 .cont_area .cont_bottom ul li a > span {
    width: clamp(30px, 8vw, 60px);
    height: clamp(30px, 8vw, 60px);
  }
  #sec1 .cont_area .cont_bottom ul li a > span::after {
    width: clamp(5px, 1.33vw, 10px);
    height: clamp(8px, 2.13vw, 16px);
  }
}
@media (max-width: 450px) {
  #sec1 .icon_area ul li {
    flex-direction: column;
  }
  #sec1 .icon_area ul li::before {
    margin-right: 0;
  }
  #sec1 .icon_area ul li .txt {
    width: 100%;
    text-align: center;
    margin-top: clamp(10px, 4.44vw, 20px);
  }
}