.sub-visual {
  width: 100%;
  height: 600px;
  position: relative;
  overflow: hidden;
}
.sub-visual.sv01 .bg {
  background-image: url("/img/sub/bg_sub_01.jpg");
}
.sub-visual.sv02 .bg {
  background-image: url("/img/sub/bg_sub_02.jpg");
}
.sub-visual.sv03 .bg {
  background-image: url("/img/sub/bg_sub_03.jpg");
}
.sub-visual.sv04 .bg {
  background-image: url("/img/sub/bg_sub_04.jpg");
}
.sub-visual.sv05 .bg {
  background-image: url("/img/sub/bg_sub_05.jpg");
}
.sub-visual.sv06 .bg {
  background-image: url("/img/sub/bg_sub_06.jpg");
}
.sub-visual.sv07 .bg {
  background-image: url("/img/sub/bg_sub_07.jpg");
}
.sub-visual .bg,
.sub-visual .column {
  width: 100%;
  height: 100%;
}
.sub-visual .bg {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  transform: translate(-50%, -50%) scale(1.2);
  transition: all 1.2s linear;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.sub-visual .text {
  row-gap: 30px;
  text-align: center;
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sub-visual .text * {
  color: var(--color-white);
}
.sub-visual h2 {
  font-size: var(--font80);
  font-weight: 700;
}
.sub-visual .path-box,
.sub-visual .path {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  row-gap: 0;
  column-gap: 10px;
}
.sub-visual .path-box .home {
  flex-shrink: 0;
}
.sub-visual .path::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url("/img/sub/angle_path.png") no-repeat center/100%;
}
.sub-visual .path a {
  opacity: 0.8;
  font-size: 1.8rem;
  font-weight: 500;
}
.sub-visual .path.on a {
  opacity: 1;
}
.sub-visual .depth1,
.sub-visual .depth1 a {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.sub-visual .depth1 {
  background: var(--color-white);
  border-bottom: 1px solid #eee;
}
.sub-visual .depth1 li {
  width: 100%;
  height: 80px;
}
.sub-visual .depth1 li a {
  color: #999;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  position: relative;
  transition: all 0.6s;
  width: 100%;
  height: 100%;
}
.sub-visual .depth1 li a::after {
  content: "";
  display: block;
  width: 0;
  height: 3px;
  background: var(--color-main);
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  transition: all 0.6s;
}
.sub-visual .depth1 li:hover a, .sub-visual .depth1 li.on a {
  color: #111;
  font-weight: 600;
}
.sub-visual .depth1 li:hover a::after, .sub-visual .depth1 li.on a::after {
  width: 100%;
}
.sub-visual.on .bg {
  transform: translate(-50%, -50%) scale(1);
}

.sub-contents .padding {
  padding: var(--gap140) 0 var(--gap180);
}
.sub-contents .padding.top-x {
  padding-top: 0;
}
.sub-contents .padding.bottom-x {
  padding-bottom: 0;
}
.sub-contents .sub-page h4 {
  color: var(--color-black);
  font-size: var(--font60);
  font-weight: 700;
  text-align: center;
}
.sub-contents .sub-page p {
  color: #333;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.6;
  font-family: var(--font-pretendard);
}
.sub-contents .sub-page .top-img {
  width: 100vw;
  padding: 16.6675% 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
}
.sub-contents .sub-page .top-img img {
  max-width: inherit;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .bg-gray,
.sub-contents .bg-img {
  position: relative;
}
.sub-contents .bg-gray {
  padding: var(--gap140) 0;
}
.sub-contents .bg-img {
  padding: var(--gap140) 20px;
}
.sub-contents .bg-gray::before,
.sub-contents .bg-img::before {
  content: "";
  display: block;
  width: 100vw;
  height: 100%;
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .bg-gray::before {
  background: #f8f8f8;
}
.sub-contents .bg-img {
  height: 800px;
}
.sub-contents .bg-img::before {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.sub-contents .bg-img * {
  color: var(--color-white);
}
.sub-contents .bg-img p {
  font-size: 2.4rem;
}
.sub-contents .bg-img p b {
  font-weight: 600;
}
.sub-contents .title {
  display: flex;
  flex-direction: column;
  row-gap: 30px;
}
.sub-contents .title h3 {
  color: #111;
  font-size: var(--font72);
  font-weight: 700;
  line-height: 1.4;
  font-family: var(--font-pretendard);
}
.sub-contents .title .p-box {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
}
.sub-contents .point-rhombus,
.sub-contents .small-rhombus {
  display: inline-flex;
  column-gap: 10px;
}
.sub-contents .point-rhombus {
  align-items: flex-start;
}
.sub-contents .small-rhombus {
  align-items: center;
}
.sub-contents .small-rhombus::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  background: url("/img/sub/small_rhombus.png") no-repeat center;
}
.sub-contents .en-title h6 {
  color: #111;
  font-size: 2.4rem;
  font-weight: 500;
}
.sub-contents .grid-box {
  display: grid;
  column-gap: 20px;
}
.sub-contents .grid-box.grid4 {
  grid-template-columns: repeat(4, 1fr);
}
.sub-contents .grid-box.grid3 {
  grid-template-columns: repeat(3, 1fr);
}
.sub-contents .tab-title {
  column-gap: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.sub-contents .tab-title li {
  width: 100%;
}
.sub-contents .tab-title li > * {
  min-height: 100px;
  row-gap: 10px;
  background: transparent;
  border: 2px solid #ddd;
  border-radius: 20px;
  color: #999;
  font-size: 2.4rem;
  font-weight: 600;
  text-align: center;
  font-family: var(--font-pretendard);
  padding: 20px 0;
  transition: all 0.6s;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sub-contents .tab-title li .icon {
  transition: all 0.6s;
  filter: grayscale(1) brightness(2.5);
}
.sub-contents .tab-title li:hover > *, .sub-contents .tab-title li.on > * {
  background: rgba(230, 0, 45, 0.05);
  border-color: var(--color-main);
  color: #111;
}
.sub-contents .tab-title li:hover .icon, .sub-contents .tab-title li.on .icon {
  filter: inherit;
}
.sub-contents .button-box.between {
  width: 100%;
  max-width: calc(100% - 60px);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .button-box.between button {
  display: inline-block;
  width: 18px;
  height: 35px;
}
.sub-contents .gallery .item-box {
  margin-top: var(--gap60);
}
.sub-contents .gallery .slide-wrap {
  position: relative;
}
.sub-contents .gallery .slide-box {
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
  overflow: hidden;
}
.sub-contents .gallery .slide-box figure {
  border-radius: 20px;
  padding: 70% 0;
  position: relative;
  overflow: hidden;
}
.sub-contents .gallery .slide-box figure img {
  min-width: 100%;
  max-width: inherit;
  min-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .overview .mean .item-box {
  justify-content: space-between;
}
.sub-contents .overview .mean .title p {
  font-size: 2.4rem;
}
.sub-contents .overview .mean .img-box {
  display: flex;
  align-items: flex-start;
}
.sub-contents .overview .mean .img-box .text {
  padding: 30px 50px;
  position: relative;
  z-index: 1;
}
.sub-contents .overview .mean .img-box .text * {
  color: var(--color-white);
}
.sub-contents .overview .mean .img-box .text h4 {
  text-align: left;
  margin-bottom: 5px;
}
.sub-contents .overview .mean .img-box .text p {
  font-weight: 500;
}
.sub-contents .overview .mean .img-box .js {
  background: #333;
  border-radius: 20px 5px 20px 20px;
  margin: auto 0 35px;
}
.sub-contents .overview .mean .img-box .integer {
  background: var(--color-main);
  border-radius: 20px 20px 20px 5px;
  margin: 35px 0 0;
}
.sub-contents .overview .mean .img-box .img {
  margin: 0 -170px 0 -150px;
}
.sub-contents .overview .explanation .item-box {
  row-gap: 40px;
}
.sub-contents .overview .explanation .item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.sub-contents .overview .explanation .item > * {
  width: 50%;
}
.sub-contents .overview .explanation .text:nth-child(2) {
  padding-left: 100px;
}
.sub-contents .overview .explanation .text h3,
.sub-contents .overview .explanation .text h3 em {
  line-height: 1.1;
}
.sub-contents .overview .explanation .text h3 {
  color: var(--color-black);
  font-size: calc(var(--font72) - 0.2rem);
  font-weight: 700;
  margin-bottom: 30px;
}
.sub-contents .overview .strengths {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.sub-contents .overview .strengths .item-box {
  width: 100%;
}
.sub-contents .overview .strengths .item {
  width: 100%;
  aspect-ratio: 1 / 1.46875;
  position: relative;
  overflow: hidden;
}
.sub-contents .overview .strengths .bg,
.sub-contents .overview .strengths .bg::after,
.sub-contents .overview .strengths .text {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .overview .strengths .bg {
  height: 100%;
  z-index: -1;
  overflow: hidden;
  transition: all 0.6s;
  filter: grayscale(1);
}
.sub-contents .overview .strengths .bg::after {
  content: "";
  display: block;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  transition: all 0.6s;
}
.sub-contents .overview .strengths .bg img {
  min-width: 100%;
  max-width: inherit;
  min-height: 100%;
  max-height: inherit;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .overview .strengths .text {
  text-align: center;
}
.sub-contents .overview .strengths .text * {
  color: var(--color-white);
}
.sub-contents .overview .strengths .text em {
  font-size: 2.4rem;
  font-weight: 600;
  opacity: 0.8;
}
.sub-contents .overview .strengths .text h3 {
  font-size: var(--font80);
  font-weight: 700;
  margin: 40px 0 60px;
}
.sub-contents .overview .strengths .text dl dt {
  font-size: 2.8rem;
  font-weight: 600;
  margin-bottom: 15px;
}
.sub-contents .overview .strengths .text dl p {
  line-height: 1.5;
  opacity: 0.8;
}
.sub-contents .overview .strengths .item:hover .bg {
  filter: grayscale(0);
}
.sub-contents .overview .strengths .item:hover .bg::after {
  background: rgba(0, 0, 0, 0.3);
}
.sub-contents .leadership .title {
  display: inline-flex;
  background: url("/img/sub/point_leadership.png") no-repeat right bottom;
  padding: 0 80px 40px 0;
}
.sub-contents .leadership .item-box {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
}
.sub-contents .leadership .text-box {
  width: 50%;
  flex-shrink: 0;
  padding-top: 80px;
}
.sub-contents .leadership .text-box .p-box {
  display: flex;
  flex-direction: column;
  row-gap: 25px;
  margin-bottom: 100px;
}
.sub-contents .leadership .text-box p:has(img) {
  column-gap: 20px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
}
.sub-contents .leadership .text-box p:has(img) b {
  color: #111;
  font-weight: 500;
}
.sub-contents .leadership .img {
  width: 58.6675%;
  flex-shrink: 0;
  position: relative;
  left: 90px;
  display: none;
}
.sub-contents .history .item-box {
  display: flex;
}
.sub-contents .history .img-box {
	width: 43.75%;
	height: 100vh;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}
.sub-contents .history .img {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}
.sub-contents .history .img img {
	min-width: 100%;
	max-width: inherit;
	min-height: 100%;
	max-height: inherit;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.sub-contents .history .text-box {
  padding: 110px 0 0 110px;
}
.sub-contents .history .year {
  color: #ddd;
  font-size: 18rem;
  font-weight: 700;
}
.sub-contents .history .bar-box {
  height: 1px;
  background: #eee;
  position: absolute;
	top: 50%;
  right: 0;
}
.sub-contents .history .bar-box .bar {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  position: absolute;
  top: 0;
  left: 0;
}
.sub-contents .history .bar-box span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-main);
}
.sub-contents .history .bar-box .point {
	width: 30px;
	height: 30px;
	position: relative;
}
.sub-contents .history .bar-box .point > div {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.sub-contents .history .bar-box .big {
	width: 30px;
	height: 30px;
}
.sub-contents .history .bar-box .small {
	width: 10px;
	height: 10px;
}
.sub-contents .history .bar-box .big::before {
	background: rgba(230, 0, 45, 0.1);
	border-radius: 6px;
}
.sub-contents .history .bar-box .small::before {
	background: var(--color-main);
	border-radius: 2px;
}
.sub-contents .history .list-box {
  margin-top: var(--gap140);
  position: relative;
}
.sub-contents .history .lists,
.sub-contents .history .lists > div {
  display: flex;
  column-gap: 140px;
}
.sub-contents .history .lists {
  position: absolute;
}
.sub-contents .history .lists * {
  white-space: nowrap;
}
.sub-contents .history .lists dl dt {
	color: #111;
	font-size: 2.0rem;
	font-weight: 600;
	margin-bottom: 10px;
}
.sub-contents .history .lists dl dd {
	display: flex;
	flex-direction: column;
	row-gap: 10px;
}
.sub-contents .history .lists dl p {
	display: flex;
	column-gap: 10px;
	font-size: 1.8rem;
}
.sub-contents .history .lists dl p::before {
	content: "-";
	flex-shrink: 0;
}
.sub-contents .ci .title p {
  text-align: center;
}
.sub-contents .ci .item-box {
  margin-top: var(--gap60);
}
.sub-contents .ci .logo-grid {
  width: 100%;
  background-color: var(--color-white);
  background-image: linear-gradient(90deg, #f8f8f8 10%, rgba(0, 0, 0, 0) 10%), linear-gradient(#f8f8f8 10%, rgba(0, 0, 0, 0) 10%);
  background-size: 10px 10px;
  border: 1px solid #f8f8f8;
  border-radius: 70px;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.sub-contents .ci .logo-grid::before {
  content: "";
  display: block;
  background: #EEE;
  z-index: -1;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .ci .mark .logo-grid {
  height: 300px;
}
.sub-contents .ci .mark .logo-grid svg {
  width: 140px;
  height: 140px;
}
.sub-contents .ci .mark .logo-grid .symbol-cls {
  fill: var(--color-main);
}
.sub-contents .ci .mark .download-box {
  column-gap: 20px;
  margin-top: 20px;
}
.sub-contents .ci .mark .hover-rhombus {
  width: 100%;
  height: 70px;
  column-gap: 10px;
  border: 1px solid #eee;
  border-radius: 10px;
  transition: all 0.6s;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.sub-contents .ci .mark .hover-rhombus * {
  transition: all 0.6s;
}
.sub-contents .ci .mark .hover-rhombus::before {
  width: 100%;
  border-radius: 10px;
  padding: 50% 0;
  left: -125%;
}
.sub-contents .ci .mark .hover-rhombus:hover::before {
  left: 0;
}
.sub-contents .ci .mark .hover-rhombus span {
  color: #111;
  font-size: 1.8rem;
  font-weight: 600;
}
.sub-contents .ci .mark .hover-rhombus:hover {
  border-color: transparent;
}
.sub-contents .ci .mark .hover-rhombus:hover img {
  filter: brightness(0) invert(1);
}
.sub-contents .ci .mark .hover-rhombus:hover span {
  color: var(--color-white);
}
.sub-contents .ci .color .item-box {
  display: flex;
  column-gap: 10px;
}
.sub-contents .ci .color .item {
  width: 100%;
  height: 180px;
  border-radius: 20px;
  padding: 30px;
}
.sub-contents .ci .color .item * {
  color: var(--color-white);
}
.sub-contents .ci .color .item.red {
  background: #E6002D;
}
.sub-contents .ci .color .item.black {
  background: #231916;
}
.sub-contents .ci .color .item.gray {
  background: #848484;
}
.sub-contents .ci .color .item h5 {
  font-size: 3.2rem;
  font-weight: 600;
  text-align: right;
}
.sub-contents .ci .color .column {
  row-gap: 5px;
}
.sub-contents .ci .color .column dl {
  column-gap: 10px;
  font-size: 1.7rem;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.sub-contents .ci .color .column dt {
  width: 52px;
  opacity: 0.5;
}
.sub-contents .ci .type .item-box {
  row-gap: 60px;
}
.sub-contents .ci .type .item-box > div {
  width: 100%;
}
.sub-contents .ci .type h6 {
  color: #333;
  font-size: 2.4rem;
  font-weight: 500;
  margin-bottom: 10px;
}
.sub-contents .ci .type .row {
  column-gap: 20px;
}
.sub-contents .ci .type .logo-grid {
  height: 320px;
}
.sub-contents .directions .text-box {
  display: flex;
  margin-top: 50px;
}
.sub-contents .directions .text-box dl {
  width: 50%;
  padding-left: 60px;
}
.sub-contents .directions .text-box dl dt {
  color: #111;
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 30px;
}
.sub-contents .directions .text-box dl dd {
  display: flex;
  flex-direction: column;
}
.sub-contents .directions .information .slide-wrap {
  position: relative;
}
.sub-contents .directions .information .slide-box {
  width: calc(200% + 20px);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.sub-contents .directions .information .img {
  border-radius: 20px;
  padding: 20.6675% 0;
  position: relative;
  overflow: hidden;
  opacity: 0.1;
  transition: all 0.6s;
}
.sub-contents .directions .information .img img {
  min-width: 100%;
  max-height: inherit;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.2);
  transition: all 1s;
}
.sub-contents .directions .information .swiper-slide-active .img {
  opacity: 1;
}
.sub-contents .directions .information .swiper-slide-active .img img {
  transform: translate(-50%, -50%) scale(1);
}
.sub-contents .directions .information .button-box {
  width: calc(100% - 70px);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .directions .information .button-box img {
  height: 36px;
  filter: brightness(0) invert(1);
}
.sub-contents .directions .information .text-box dl dd {
  row-gap: 10px;
}
.sub-contents .directions .information .text-box dl dd * {
  color: #333;
  font-size: 2rem;
}
.sub-contents .directions .information .text-box dl dd p {
  display: flex;
  column-gap: 20px;
}
.sub-contents .directions .information .text-box dl dd b {
  display: inline-block;
  width: 85px;
  flex-shrink: 0;
  font-weight: 600;
}
.sub-contents .directions .information .text-box dl dd span.address {
  font-weight: 300;
  font-family: var(--font-pretendard);
}
.sub-contents .directions .location .map-box {
  margin-top: var(--gap60);
}
.sub-contents .directions .location .map-box > span {
  display: block;
  color: #999;
  font-size: 1.8rem;
  font-weight: 300;
  text-align: right;
  margin-top: 10px;
}
.sub-contents .directions .location .map-box .row {
  column-gap: 20px;
}
.sub-contents .directions .location .map-box .map,
.sub-contents .directions .location .map-box .img {
  height: 620px;
  border-radius: 20px;
  overflow: hidden;
}
.sub-contents .directions .location .map-box .map {
  width: 100%;
}
.sub-contents .directions .location .map-box .img {
  flex-shrink: 0;
}
.sub-contents .directions .location .map-box .root_daum_roughmap,
.sub-contents .directions .location .map-box .root_daum_roughmap .wrap_map {
  width: 100%;
  height: 100%;
}
.sub-contents .directions .location .map-box .root_daum_roughmap .map_border {
  display: none;
}
.sub-contents .directions .location .text-box dl dd {
  row-gap: 15px;
}
.sub-contents .directions .location .text-box dl dd .row {
  align-items: center;
  column-gap: 20px;
}
.sub-contents .directions .location .text-box dl dd .bus-number {
  row-gap: 5px;
  align-items: flex-start;
}
.sub-contents .directions .location .text-box dl dd .bus-number span,
.sub-contents .directions .location .text-box dl dd .bus-number em {
  border-radius: 20px;
  font-family: var(--font-pretendard);
}
.sub-contents .directions .location .text-box dl dd .bus-number span {
  display: inline-flex;
  align-items: center;
  column-gap: 5px;
  border: 1px solid #3DAF00;
  color: #333;
  font-size: 1.8rem;
  padding-right: 15px;
}
.sub-contents .directions .location .text-box dl dd .bus-number em {
  display: inline-block;
  background: #3DAF00;
  color: #fff;
  padding: 5px 15px;
}
.sub-contents .directions .location .text-box dl dd p b {
  font-weight: 600;
}
.sub-contents .total .service .item-wrap {
  position: relative;
}
.sub-contents .total .service .item-box {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 20px;
  margin-top: var(--gap60);
}
.sub-contents .total .service .arrow-ani {
  width: 100%;
  height: 40px;
  background: #f5f5f5;
  border-radius: 100px;
  position: absolute;
  top: 215px;
  left: 0;
  overflow: hidden;
}
.sub-contents .total .service .arrow-ani .to-right {
  height: 100%;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}
.sub-contents .total .service .arrow-ani ul {
  display: flex;
}
.sub-contents .total .service .arrow-ani ul li {
  width: 42px;
  margin: 0 70px;
}
.sub-contents .total .service .icon-box {
  text-align: center;
}
.sub-contents .total .service .icon-box figure {
  transition: all 0.6s;
  filter: grayscale(1) brightness(3);
}
.sub-contents .total .service .icon-box h5 {
  color: #111;
  font-size: var(--font36);
  font-weight: 700;
  margin: 20px 0 5px;
}
.sub-contents .total .service .icon-box em {
  color: #bbb;
  font-size: 1.8rem;
  font-weight: 500;
}
.sub-contents .total .service .text-box {
  min-height: 160px;
  display: grid;
  grid-template-rows: repeat(3, 1.3em);
  grid-template-columns: repeat(2, auto);
  align-items: flex-start;
  row-gap: 15px;
  column-gap: 20px;
  border-radius: 20px;
  padding: 30px;
  margin-top: 100px;
  position: relative;
}
.sub-contents .total .service .text-box::before {
  width: 140%;
  border-radius: 40px;
  padding: 70% 0;
  left: -170%;
}
.sub-contents .total .service .text-box::after {
  content: "";
  display: block;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border: 1px solid #eee;
  border-radius: 20px;
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .total .service .text-box p {
  align-items: flex-start;
  font-size: 1.8rem;
  line-height: 1.3;
  transition: all 0.6s;
}
.sub-contents .total .service .text-box p::before {
  transform: translateY(0.4em);
}
.sub-contents .total .service .text-box:hover::after {
  border-color: transparent;
}
.sub-contents .total .service .text-box:hover p {
  color: var(--color-white);
}
.sub-contents .total .service .text-box:hover p::before {
  filter: brightness(0) invert(1);
}
.sub-contents .total .service .item:hover figure {
  filter: inherit;
}
.sub-contents .total .service .item:hover .text-box::before {
  left: 0;
}
.sub-contents .total .service .item:hover .text-box::after {
  border-color: transparent;
}
.sub-contents .total .service .item:hover .text-box p {
  filter: brightness(0) invert(1);
}
.sub-contents .total .association .item-box {
  width: 100vw;
  max-width: 1740px;
  left: 50%;
  transform: translateX(-50%);
}
.sub-contents .total .association .item-box::before {
  background: url("/img/sub/bg_total_02.jpg") no-repeat center/cover;
}
.sub-contents .total .association .item-box h4 {
  text-align: left;
  margin: 50px 0 30px;
  color:#fff; 
}
.sub-contents .total .association .item-box p{
  color:#fff; 
  font-weight: 300;
}
.sub-contents .smart .item-box {
  margin-top: var(--gap60);
}
.sub-contents .smart .factory .item-box {
  position: relative;
}
.sub-contents .smart .factory .circle-box {
  width: 54.26%;
  padding: 27.13% 0;
  margin: 0 auto;
  position: relative;
}
.sub-contents .smart .factory .circle-box .circle,
.sub-contents .smart .factory .circle-box span {
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .smart .factory .circle-box .dashed {
  border: 1px dashed #999;
}
.sub-contents .smart .factory .circle-box .big {
  width: 100%;
  border-color: rgba(153, 153, 153, 0.3);
  padding: 50% 0;
}
.sub-contents .smart .factory .circle-box .small {
  width: 73.2186%;
  border-color: rgba(153, 153, 153, 0.5);
  padding: 36.6093% 0;
}
.sub-contents .smart .factory .circle-box .inner {
  width: 63.64%;
  background: var(--color-white);
  padding: 31.82% 0;
}
.sub-contents .smart .factory .circle-box .inner::before {
  content: "";
  display: block;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .smart .factory .circle-box span {
  color: #ddd;
  font-size: 4.4rem;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}
.sub-contents .smart .factory .text-box {
  width: 100%;
  max-width: 700px;
  display: grid;
  grid-template-columns: repeat(3, 200px);
  justify-content: center;
  padding-top: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .smart .factory .text-box .item {
  width: 100%;
  border-radius: 50%;
  padding: 50% 0;
  position: relative;
}
.sub-contents .smart .factory .text-box .item * {
  color: var(--color-white);
}
.sub-contents .smart .factory .text-box .item em {
  font-size: 1.8rem;
  font-weight: 500;
  opacity: 0.5;
}
.sub-contents .smart .factory .text-box .item h5 {
  font-size: var(--font36);
  font-weight: 700;
}
.sub-contents .smart .factory .text-box .item p {
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  font-family: "Montserrat", "Pretendard";
  opacity: 0.8;
}
.sub-contents .smart .factory .text-box .inner {
  row-gap: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .smart .factory .text-box .item2,
.sub-contents .smart .factory .text-box .item5 {
  grid-row-start: 2;
  margin-top: 20px;
}
.sub-contents .smart .factory .text-box .item3,
.sub-contents .smart .factory .text-box .item4 {
  grid-row-start: 3;
  margin-top: 50px;
}
.sub-contents .smart .factory .text-box .item1 {
  grid-column-start: 2;
  background: #C80027;
}
.sub-contents .smart .factory .text-box .item2 {
  grid-column-start: 3;
  background: #E6002D;
  transform: translateX(50px);
}
.sub-contents .smart .factory .text-box .item3 {
  grid-column-start: 3;
  background: #FF0032;
  transform: translateX(-60px);
}
.sub-contents .smart .factory .text-box .item4 {
  grid-column-start: 1;
  background: #FF2651;
  transform: translateX(60px);
}
.sub-contents .smart .factory .text-box .item5 {
  background: #FF3C62;
  transform: translateX(-50px);
}
.sub-contents .smart .systematic h4 {
  font-size: calc(var(--font60) - 1.2rem);
  line-height: 1.6;
  font-family: var(--font-pretendard);
  text-align: left;
}
.sub-contents .smart .systematic .item-box {
  border-top: 1px solid #ddd;
}
.sub-contents .smart .systematic .text,
.sub-contents .smart .systematic .text div {
	display: flex;
	column-gap: 100px;
}
.sub-contents .smart .systematic .text {
  height: 185px;
  border-bottom: 1px solid #ddd;
  padding: 30px 0;
}
.sub-contents .smart .systematic .text em {
  display: block;
  width: 35px;
  color: #ddd;
  font-size: 2.4rem;
  font-weight: 700;
}
.sub-contents .smart .systematic .text h5 {
  width: 650px;
  color: #333;
  font-size: 3rem;
  font-weight: 700;
  font-family: var(--font-pretendard);
  flex-shrink: 0;
}
.sub-contents .smart .systematic .text p {
  color: #555;
}
.sub-contents .smart .diagram figure {
  text-align: center;
}
.sub-contents .patents .grid-box {
  row-gap: 60px;
  margin-top: var(--gap60);
}
.sub-contents .patents .item figure {
  border: 2px solid #eee;
  border-radius: 20px;
  padding: 68.8855% 0;
  position: relative;
  overflow: hidden;
}
.sub-contents .patents .item figure img {
  min-width: 100%;
  max-height: inherit;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .patents .item p {
  color: #555;
  font-weight: 500;
  text-align: center;
  margin-top: 20px;
}
.sub-contents .machines .equipment .item-box {
  row-gap: 20px;
  margin-top: var(--gap60);
}
.sub-contents .machines .equipment .item {
  width: 100%;
  display: flex;
  flex-direction: column;
  border: 2px solid #eee;
  border-radius: 20px;
  text-align: center;
  padding: 50px 40px 45px;
}
.sub-contents .machines .equipment .item span {
  width: 100px;
  height: 32px;
  background: var(--color-main);
  border-radius: 20px;
  color: var(--color-white);
  font-size: 1.7rem;
  font-weight: 500;
  font-family: var(--font-pretendard);
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.sub-contents .machines .equipment .item h5 {
  color: var(--color-black);
  font-size: 3.2rem;
  font-weight: 600;
  margin-top: 20px;
}
.sub-contents .machines .equipment .item .img {
  border-radius: 20px;
  margin: 30px 0;
  overflow: hidden;
}
.sub-contents .machines .equipment .item .img img {
  transform: scale(1);
  transition: all 0.6s;
}
.sub-contents .machines .equipment .item:hover .img img {
  transform: scale(1.2);
}
.sub-contents .parts .information .tab-contents {
  margin-top: 30px;
  position: relative;
}
.sub-contents .parts .information .slide-box {
  overflow: hidden;
}
.sub-contents .parts .information .grid-box {
  width: 100%;
  max-width: 1260px;
  row-gap: 20px;
  column-gap: 20px;
  background: var(--color-white);
  margin: 0 auto;
}
.sub-contents .parts .information .grid-box figure {
  padding: 37.45% 0;
  position: relative;
  overflow: hidden;
}
.sub-contents .parts .information .grid-box figure img {
  min-width: 100%;
  max-width: inherit;
  min-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .parts .service * {
  color: var(--color-white);
}
.sub-contents .parts .service .item-box::before {
  background: url("/img/sub/bg_parts_02.jpg") no-repeat center/cover;
}
.sub-contents .parts .service p {
  text-align: center;
  margin-top: 60px;
}
.sub-contents .custom .information .tab-contents {
  margin-top: 30px;
}
.sub-contents .custom .information .item-box {
  column-gap: 80px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.sub-contents .custom .information .img-box {
  width: 100%;
  max-width: 910px;
  display: grid;
  grid-template-columns: calc(80.76925% - 5px) calc(20.32975% - 5px);
  column-gap: 10px;
}
.sub-contents .custom .information .img-box figure {
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}
.sub-contents .custom .information .img-box figure img {
  min-width: 100%;
  min-height: 100%;
  max-height: inherit;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .custom .information .thumb {
  width: 100%;
}
.sub-contents .custom .information .thumb figure {
  padding: 34.725% 0;
}
.sub-contents .custom .information .img-list {
  width: 100%;
  max-width: 180px;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  row-gap: 10px;
}
.sub-contents .custom .information .img-list figure {
  cursor: pointer;
}
.sub-contents .custom .information .img-list figure::after {
  content: "";
  display: block;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border: 3px solid var(--color-main);
  border-radius: 20px;
  opacity: 0;
  transition: all 0.4s;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .custom .information .img-list figure:hover::after, .sub-contents .custom .information .img-list figure.on::after {
  opacity: 1;
}
.sub-contents .custom .information .text em {
  color: var(--color-main);
  font-size: 2.4rem;
  font-weight: 600;
}
.sub-contents .custom .information .text h4 {
  text-align: left;
  margin: 40px 0 20px;
}
.sub-contents .custom .cost .title p {
  text-align: center;
}
.sub-contents .custom .cost .item-box {
  display: flex;
  column-gap: 10px;
  margin-top: var(--gap60);
}
.sub-contents .custom .cost .item {
  position: relative;
}
.sub-contents .custom .cost .item .text {
  padding: 30px 35px;
  position: absolute;
  left: 0;
  bottom: 0;
}
.sub-contents .custom .cost .item .text h5 {
  color: var(--color-white);
  font-size: var(--font36);
  font-weight: 700;
  margin-top: 20px;
}
.sub-contents .water .item-box {
  margin-top: var(--gap60);
}
.sub-contents .water .award .slide-wrap {
  position: relative;
}
.sub-contents .water .award .slide-box {
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
  overflow: hidden;
}
.sub-contents .water .award .slide-box figure {
  border-radius: 20px;
  padding: 70% 0;
  position: relative;
  overflow: hidden;
}
.sub-contents .water .award .slide-box figure::after {
  content: '';
  display: block;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border: 2px solid #eee;
  border-radius: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .water .award .slide-box figure img {
  min-width: 100%;
  max-width: inherit;
  min-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .water .award .slide-box p {
  color: #555;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  margin-top: 20px;
}
.sub-contents .water .award .button-box {
  top: calc(50% - 1.3em - 20px);
}
.sub-contents .water .information {
  position: relative;
}
.sub-contents .water .information > span {
  display: block;
  color: #eee;
  font-size: var(--font300);
  font-weight: 700;
  line-height: 1;
  text-align: right;
  position: absolute;
  right: -120%;
  bottom: -0.12em;
  z-index: -1;
  transition: all 1.2s;
}
.sub-contents .water .information.on > span {
  right: -20rem;
}
.sub-contents .water .information .p-box {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  text-align: center;
}
.sub-contents .water .production .item-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
}
.sub-contents .water .production .item {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: center;
  padding: 77.875% 0;
  position: relative;
  transition: all 0.4s;
}
.sub-contents .water .production .item::before {
  content: "";
  display: block;
  width: 100%;
  height: calc(100% - 40px);
  border: 2px solid #eee;
  border-radius: 20px;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  transition: all 0.8s;
}
.sub-contents .water .production .item .inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}
.sub-contents .water .production .item figure {
  transition: all 0.8s;
}
.sub-contents .water .production .item .more {
  opacity: 0;
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  transition: all 0.6s;
}
@media screen and (hover: hover) and (min-width: 1024px) {
  .sub-contents .water .production .item:hover::before {
    height: 100%;
    border-color: var(--color-main);
  }
  .sub-contents .water .production .item:hover figure {
    transform: translateY(-40px);
  }
  .sub-contents .water .production .item:hover .more {
    opacity: 1;
  }
  .sub-contents .water .production .item:hover .more span {
    color: var(--color-main);
  }
  .sub-contents .water .production .item:hover .more .rhombus,
  .sub-contents .water .production .item:hover .more .rhombus img {
    transform: scale(1);
  }
  .sub-contents .water .production .item:hover .more .rhombus::before {
    background: var(--color-main);
  }
}
.sub-contents .project .item-box {
  margin-top: var(--gap60);
}
.sub-contents .project .production .slide-wrap {
  position: relative;
}
.sub-contents .project .production .slide-box {
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
}
.sub-contents .project .production .slide-box figure {
  border-radius: 20px;
  padding: 51.65% 0;
  position: relative;
  overflow: hidden;
}
.sub-contents .project .production .slide-box figure img {
  min-width: 100%;
  max-width: inherit;
  min-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .project .production .slide-box p {
  color: #111;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  margin-top: 20px;
}
.sub-contents .project .production .button-box {
  top: calc(50% - 20px);
}
.sub-contents .product .box {
  position: relative;
}
.sub-contents .product .anchors {
  row-gap: 10px;
  position: absolute;
  top: 80px;
  right: 80px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
}
.sub-contents .product .anchors button {
  display: inline-flex;
  align-items: center;
  column-gap: 10px;
}
.sub-contents .product .anchors button * {
  transition: all 0.6s;
}
.sub-contents .product .anchors button span {
  color: #999;
  font-size: 1.8rem;
  font-weight: 500;
}
.sub-contents .product .anchors button .rhombus {
  width: 18px;
  height: 18px;
}
.sub-contents .product .anchors button .rhombus::before {
  background: #ddd;
  border-radius: 2px;
}
.sub-contents .product .anchors button.on span {
  color: var(--color-main);
  font-size: 2rem;
  font-weight: 600;
}
.sub-contents .product .anchors button.on .rhombus::before {
  background: var(--color-main);
}
.sub-contents .product .anchors.fixed {
  position: fixed;
}
.sub-contents .product .img-box.half {
  width: 50vw;
  height: 100vh;
  background: #F8F8F8;
  margin-left: -50vw;
  left: calc(-50vw + 50%);
  position: sticky;
  top: 0;
  left: 0;
}
.sub-contents .product .slide-wrap,
.sub-contents .product .slide-box {
  height: 100%;
}
.sub-contents .product .slide-wrap {
  position: relative;
}
.sub-contents .product .swiper-slide {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.sub-contents .product .img-box .img {
  width: 62.5%;
  display: inline-block;
  padding: 41.665% 0;
  overflow: hidden;
  position: relative;
}
.sub-contents .product .img-box .img img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .product .list-box.half {
  width: 50%;
  padding-left: 80px;
  margin-left: auto;
}
.sub-contents .product .title h3 {
  line-height: 1.3;
}
.sub-contents .product .title h3 span {
  display: block;
  font-size: 0.5555em;
  font-weight: 400;
}
.sub-contents .product .title .point-rhombus > img {
  transform: translateY(0.4em);
}
.sub-contents .product .title p {
  color: #555;
  font-weight: 500;
}
.sub-contents .product .information {
  display: flex;
  align-items: flex-start;
}
.sub-contents .product .information .img-box {
  position: sticky;
  top: 0;
  overflow: hidden;
}
.sub-contents .product .information .img-box .swiper-pagination {
  column-gap: 15px;
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.sub-contents .product .information .img-box .swiper-pagination button {
  width: 12px;
  height: 12px;
  background: #ddd;
  border-radius: 50%;
}
.sub-contents .product .information .img-box .swiper-pagination .swiper-pagination-bullet-active {
  background: var(--color-main);
}
.sub-contents .product .information .hover-rhombus {
  width: 100%;
  height: 70px;
  column-gap: 10px;
  border-radius: 100px;
  transition: all 0.6s;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.sub-contents .product .information .hover-rhombus * {
  transition: all 0.6s;
}
.sub-contents .product .information .hover-rhombus::before {
  width: 100%;
  border-radius: 25px;
  padding: 50% 0;
  left: -125%;
}
.sub-contents .product .information .hover-rhombus:hover::before {
  left: 0;
}
.sub-contents .product .information .hover-rhombus::after {
  border-radius: 100px;
}
.sub-contents .product .information .hover-rhombus img {
  filter: brightness(0) invert(1);
}
.sub-contents .product .information .hover-rhombus span {
  color: var(--color-white);
  font-size: 2rem;
  font-weight: 600;
}
.sub-contents .product .information .hover-rhombus:hover img {
  filter: inherit;
}
.sub-contents .product .information .hover-rhombus:hover span {
  color: var(--color-main);
}
.sub-contents .product .information .list-box {
  padding-top: 90px;
  padding-bottom: var(--gap140);
}
.sub-contents .product .information .title .point-rhombus {
  margin: 20px 0 30px;
}
.sub-contents .product .information .info-box .text {
  margin-top: 30px;
}
.sub-contents .product .information .info-box .text em {
  color: var(--color-main);
  font-size: 2rem;
  font-weight: 700;
}
.sub-contents .product .information .info-box .text h5 {
  color: var(--color-black);
  font-size: calc(var(--font36) - 0.2rem);
  font-weight: 700;
  margin: 15px 0 30px;
}
.sub-contents .product .information .info-box .text .p-box {
  row-gap: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.sub-contents .product .information .info-box .text .p-box p {
  color: #555;
  line-height: 1.4;
}
.sub-contents .product .information .info-box .text .dl-box {
  column-gap: 10px;
  margin-top: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.sub-contents .product .information .info-box .text .dl-box dl {
  width: calc(50% - 5px);
  height: 100px;
  row-gap: 10px;
  border: 2px solid var(--color-main);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sub-contents .product .information .info-box .text .dl-box dl dt {
  color: #111;
  font-size: 2rem;
  font-weight: 700;
}
.sub-contents .product .information .info-box .text .dl-box dl dd {
  color: #555;
  font-weight: 500;
}
.sub-contents .product .information .info-box .video-box {
  width: 100%;
  border-radius: 20px;
  padding: 28.125% 0;
  position: relative;
  overflow: hidden;
}
.sub-contents .product .information .info-box .video-box iframe,
.sub-contents .product .information .info-box .video-box button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .product .information .info-box .video-box iframe {
  min-width: 100%;
  min-height: 100%;
}
.sub-contents .product .information .info-box .video-box button {
	display: none;
}
.sub-contents .product .information .info-box .info-text ol li {
  display: flex;
  column-gap: 80px;
  border-top: 1px solid #ddd;
  padding: 40px 0 60px;
}
.sub-contents .product .information .info-box .info-text ol em,
.sub-contents .product .information .info-box .info-text ol p {
  font-size: 2.4rem;
}
.sub-contents .product .information .info-box .info-text ol em {
  display: inline-block;
  width: 35px;
  flex-shrink: 0;
  color: #999;
  font-weight: 500;
}
.sub-contents .product .information .info-box .info-text ol p {
  font-weight: 700;
}
.sub-contents .product .information .info-box .info-text ol p span {
  color: var(--color-main);
}
.sub-contents .product .information .info-box .spec-box .spec {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 10px;
}
.sub-contents .product .information .info-box .spec-box dl {
  width: 100%;
  row-gap: 20px;
  background: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 20px;
  text-align: center;
  padding: 30px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sub-contents .product .information .info-box .spec-box dl dt {
  color: var(--color-main);
  font-size: 1.8rem;
  font-weight: 600;
}
.sub-contents .product .information .info-box .spec-box dl span {
  color: #111;
  font-size: 4rem;
  font-weight: 600;
}
.sub-contents .product .information .info-box .spec-box dl em {
  color: #555;
}
.sub-contents .product .information .info-box .spec-box p {
  color: #555;
  font-weight: 500;
  margin-top: 40px;
}
.sub-contents .product .information .info-box .spec-box p em {
  color: var(--color-main);
}
.sub-contents .product .details .img-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.sub-contents .product .details .img-box .inner {
  width: 62.5%;
  position: relative;
}
.sub-contents .product .details .img-box .inner .img {
	width: 100%;
  padding: 70% 0;
}
.sub-contents .product .details .img-box .bottom {
	width: 100%;
  column-gap: 10px;
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.sub-contents .product .details .img-box .bottom img {
  flex-shrink: 0;
}
.sub-contents .product .details .img-box .bottom p {
  color: #555;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
}
.sub-contents .product .details .pins {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .product .details .pins.on .pin-big, .sub-contents .product .details .pins.on .pin-small {
  fill: var(--color-main);
}
.sub-contents .product .details .detail-box {
  position: relative;
  width: 100%;
  height: 100%;
}
.sub-contents .product .details .detail {
  width: 100%;
  text-align: center;
  opacity: 0;
  transition: all 0s, opacity 0.6s;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
}
.sub-contents .product .details .detail figure {
  width: 80.75%;
  margin: 0 auto;
}
.sub-contents .product .details .detail .text {
  margin-top: 20px;
}
.sub-contents .product .details .detail h2 {
  color: #111;
  font-size: var(--font72);
  font-weight: 700;
  font-family: var(--font-pretendard);
}
.sub-contents .product .details .detail p {
  font-size: 2.4rem;
  margin-top: 30px;
}
.sub-contents .product .details .detail.on {
  opacity: 1;
}
.sub-contents .product .table-wrap h5 {
  color: var(--color-black);
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 25px;
}
.sub-contents .product .table-box table {
  border-top: 1px solid var(--color-main);
}
.sub-contents .product .table-box table th,
.sub-contents .product .table-box table td {
  height: 80px;
  border: 1px solid #e0e0e0;
  border-top: none;
  font-size: 1.8rem;
}
.sub-contents .product .table-box table th {
  background: #f5f5f5;
  color: #111;
  font-weight: 600;
}
.sub-contents .product .table-box table td {
  color: #333;
  font-weight: 300;
  padding: 0 30px;
}
.sub-contents .product .gallery {
  padding-top: var(--gap140);
}
.sub-contents .product .note .item-box {
  height: auto;
  text-align: center;
  padding: 155px 0;
}
.sub-contents .product .note .item-box::before {
  content: "";
  background-image: url("/img/sub/bg_accu.jpg");
}
.sub-contents .product .note .item-box * {
  color: var(--color-white);
  line-height: 1.5;
  font-family: var(--font-pretendard);
}
.sub-contents .product .note .item-box h4 {
  font-size: calc(var(--font36) + 0.6rem);
  font-weight: 700;
  margin: 40px 0 15px;
}
.sub-contents .product .note .item-box span {
  font-size: 2rem;
  font-weight: 300;
}
.sub-contents .product .type .swiper-pagination {
  display: flex;
  height: 80px;
  border-bottom: 1px solid #eee;
}
.sub-contents .product .type .swiper-pagination button {
  width: 50%;
  width: 100%;
  height: 100%;
  color: #999;
  font-size: 2rem;
  font-weight: 500;
  font-family: var(--font-pretendard);
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.sub-contents .product .type .swiper-pagination button::after {
  content: "";
  display: block;
  width: 0;
  height: 3px;
  background: var(--color-main);
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  transition: all 0.6s;
}
.sub-contents .product .type .swiper-pagination button.swiper-pagination-bullet-active {
  color: #111;
  font-weight: 600;
}
.sub-contents .product .type .swiper-pagination button.swiper-pagination-bullet-active::after {
  width: 100%;
}
.sub-contents .product .type .img-box {
  background: var(--color-white);
  overflow: hidden;
}
.sub-contents .product .type .img-box .img {
  padding: 37.5% 0;
}
.sub-contents .product .type .info {
  padding-top: 80px;
}
.sub-contents .product .type .info > span {
  display: inline-block;
  color: #f5f5f5;
  font-size: calc(var(--font300) - 10rem);
  font-weight: 700;
  margin-bottom: -0.2em;
  position: relative;
  right: -150%;
  transition: all 0.8s;
}
.sub-contents .product .type .info.on > span {
  right: 2%;
}
.sub-contents .product .type .title {
  row-gap: 20px;
}
.sub-contents .product .type .note {
  font-family: var(--font-pretendard);
  margin-top: 10px;
  display: none;
}
.sub-contents .accu .item-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.sub-contents .accu .item {
  width: 100%;
  padding: 48.95% 0;
  position: relative;
}
.sub-contents .accu .item:nth-child(1) a {
  background-image: url("/img/sub/bg_accu_01_1.jpg");
}
.sub-contents .accu .item:nth-child(2) a {
  background-image: url("/img/sub/bg_accu_01_2.jpg");
}
.sub-contents .accu .item a,
.sub-contents .accu .item .text {
  width: 100%;
  height: 100%;
}
.sub-contents .accu .item a {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .accu .item .logo {
  width: 260px;
  z-index: 1;
  transition: all 0.8s;
  filter: inherit;
  position: absolute;
  top: 50px;
  left: 50px;
}
.sub-contents .accu .item .logo img {
  width: 100%;
  transition: all 0.8s;
}
.sub-contents .accu .item .text {
  row-gap: 60px;
  text-align: center;
  padding: 14% 0 0;
  position: relative;
  opacity: 0;
  transition: all 0.8s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sub-contents .accu .item .text::before {
  content: "";
  display: block;
  width: 100%;
  height: calc(100% + 2px);
  background: rgba(17, 17, 17, 0.7);
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .accu .item .text h3 {
  color: var(--color-white);
  font-size: calc(var(--font72) + 0.2rem);
  font-weight: 700;
}
@media screen and (hover: hover) and (min-width: 1024px) {
  .sub-contents .accu .item:hover .logo {
    width: 320px;
    top: 28%;
    left: 50%;
    transform: translateX(-50%);
    filter: brightness(0) invert(1);
  }
  .sub-contents .accu .item:hover .text {
    opacity: 1;
  }
}
.sub-contents .news .gallery-box .thumbnail {
  padding: 41.65% 0;
}
.sub-contents .news .gallery-box .thumbnail figure {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .news .gallery-box .thumbnail figure img {
  min-width: 100%;
  max-width: inherit;
  min-height: 100%;
}
.sub-contents .tab-pr {
  margin-bottom: 60px;
}
.sub-contents .catalog h6,
.sub-contents .video h6 {
  text-align: center;
}
.sub-contents .catalog .gallery-box .thumbnail {
  padding: 57.285% 0;
}
.sub-contents .catalog .gallery-box .thumbnail figure {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .catalog .gallery-box .thumbnail figure img {
  min-width: 100%;
  max-width: inherit;
  min-height: 100%;
}
.sub-contents .catalog .gallery-box .a-box {
  display: inline-flex;
  column-gap: 25px;
  position: absolute;
  right: 35px;
  bottom: 30px;
}
.sub-contents .catalog .gallery-box .a-box a {
  display: block;
  width: 36px;
  height: 36px;
}
.sub-contents .video .gallery-box .thumbnail {
  padding: 32.285% 0;
  padding: 28.125% 0;
}
.sub-contents .video .gallery-box .thumbnail iframe {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .video .gallery-box button {
  display: block;
  width: 72px;
  height: 72px;
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: none;
}
.sub-contents .recruit .item-box {
  margin-top: var(--gap60);
}
.sub-contents .recruit .information {
  display: flex;
  flex-direction: column;
  row-gap: 100px;
  background: url("/img/sub/bg_recruit_01.png") no-repeat center/100%;
}
.sub-contents .recruit .information .item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.sub-contents .recruit .information .img,
.sub-contents .recruit .information .text-box {
  width: 50%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.sub-contents .recruit .information .text h4 {
  font-size: calc(var(--font60) - 1rem);
  text-align: left;
  margin-bottom: 30px;
}
.sub-contents .recruit .talent .item-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 40px;
  column-gap: 40px;
}
.sub-contents .recruit .talent .item {
  background: var(--color-white);
  border-radius: 20px;
  text-align: center;
  padding: 100px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sub-contents .recruit .talent .item dl {
  margin-top: 50px;
}
.sub-contents .recruit .talent .item dl dt {
  color: #111;
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 20px;
}
.sub-contents .recruit .talent .item dl dd {
  color: #333;
  font-size: 2rem;
  font-weight: 300;
  font-family: var(--font-pretendard);
}
.sub-contents .popup {
  width: 100%;
  z-index: 4;
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .popup .inner {
  width: 100%;
  max-height: calc(100vh - 120px);
  background: var(--color-white);
  border: 1px solid #ddd;
  border-radius: 40px;
  padding: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .popup .close {
  flex-shrink: 0;
  color: #333;
  margin-left: auto;
}
.sub-contents .popup .close i {
  font-size: 3rem;
}
.sub-contents .popup.contact {
  max-width: 600px;
  text-align: center;
}
.sub-contents .popup.contact .text {
  width: 100%;
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sub-contents .popup.contact h3 {
  color: #111;
  font-size: var(--font52);
  font-weight: 700;
}
.sub-contents .popup.contact p {
  color: #555;
  font-size: 1.7rem;
  font-weight: 400;
  margin: 20px 0 30px;
}
.sub-contents .popup.contact input[type=password],
.sub-contents .popup.contact .submit {
  width: 100%;
  max-width: 420px;
}
.sub-contents .popup.contact input[type=password] {
  height: 70px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 20px;
  font-size: 2rem;
  padding: 0 20px;
}
.sub-contents .popup.contact .submit {
  height: 60px;
  background: var(--color-main);
  border-radius: 100px;
  color: var(--color-white);
  font-size: 2rem;
  font-weight: 500;
  margin-top: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.sub-contents .popup.inquiry {
  max-width: 1000px;
}
.sub-contents .popup.inquiry .policy {
  height: 100%;
  overflow-y: scroll;
}
.sub-contents .popup.inquiry .policy::-webkit-scrollbar {
  width: 22px;
}
.sub-contents .popup.inquiry .policy::-webkit-scrollbar-track {
  background: #fff;
}
.sub-contents .popup.inquiry .policy::-webkit-scrollbar-thumb {
  background: #dbdbdb;
  border: 10px solid #fff;
  border-radius: 10px;
}
.sub-contents .popup.inquiry .text {
  margin-top: 0;
}
.sub-contents .popup.inquiry .text * {
  font-size: 1.8rem;
  line-height: 1.6;
}