.sub-visual {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.sub-visual .bg-box,
.sub-visual .bg,
.sub-visual .flex-box {
  width: 100%;
  height: 100%;
}
.sub-visual .bg-box {
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-visual .bg-box::after {
  content: "";
  display: block;
  background: var(--color-white);
  transition: all 1.2s linear;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: auto;
  right: 0;
  transform: translateY(-50%);
}
.sub-visual .bg {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0.4;
  transform: translate(-50%, -50%) scale(1.06);
  transition: all 1.2s linear;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.sub-visual .flex-box {
  padding-top: 40px;
  opacity: 0;
  transition: all 1.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 35px;
  column-gap: 0;
}
.sub-visual .flex-box * {
  color: var(--color-white);
}
.sub-visual h2 {
  font-size: var(--font120);
  font-weight: 600;
  text-align: center;
}
.sub-visual h2.small{ 
	font-size: var(--font80);
}
.sub-visual p{
	font-size: var(--font40);
	font-weight: 400;
	line-height: 1.8;
	text-align: center;
	margin-top: 10px;
}
.sub-visual .path-box,
.sub-visual .path {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  row-gap: 0;
  column-gap: 15px;
}
.sub-visual .path-box li a {
  opacity: 0.5;
  transition: all 0.4s;
}
.sub-visual .path-box li:hover a, .sub-visual .path-box li.on a {
  opacity: 1;
}
.sub-visual .path-box.off {
  opacity: 0;
  pointer-events: none;
}
.sub-visual .path {
  column-gap: 15px;
  display: none;
}
.sub-visual .path::before {
  content: "";
  width: 15px;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
}
.sub-visual .path a {
  font-size: 2rem;
  font-weight: 700;
}
.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.sv08 .bg {
  background-image: url("/img/sub/bg_sub_08.jpg");
}
.sub-visual.sv09 .bg {
  background-image: url("/img/sub/bg_sub_09.jpg");
}

.sub-visual.sv020 .bg {
  background-image: url("/img/sub/bg_sub_010.jpg");
}
.sub-visual.on .bg-box::after {
  width: 0;
}
.sub-visual.on .bg {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  filter: inherit;
}
.sub-visual.on .flex-box {
  padding-top: 0;
  opacity: 1;
}

.sub-contents {
  background: var(--color-white);
  position: relative;
  z-index: 1;
}
.sub-contents .sub-margin {
  margin-top: 100vh;
}
.sub-contents .padding {
  padding: var(--gap150) 0 var(--gap200);
}
.sub-contents .padding.top-x {
  padding-top: 0;
}
.sub-contents .padding.bottom-x {
  padding-bottom: 0;
}
.sub-contents .contents {
  position: relative;
}
.sub-contents .left-box {
  width: 100%;
  max-width: 1100px;
}
.sub-contents .content-box {
  overflow: hidden;
}
.sub-contents .content-box > hr {
  width: 100%;
  height: 1px;
  background: var(--color-border);
}
.sub-contents .content-top {
  margin-bottom: 40px;
}
.sub-contents .content-top.between {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.sub-contents .content-top h4 {
  color: #111;
  font-size: var(--font48);
  font-weight: 600;
}
.sub-contents .page-title {
  text-align: center;
  margin-bottom: var(--gap120);
}
.sub-contents .page-title h3 {
  color: #111;
  font-size: var(--font64);
  font-weight: 600;
}
.sub-contents .page-title h3 b {
  font-family: var(--font-redhatdisplay);
}
.sub-contents .page-title p {
  color: #333;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.7;
  margin-top: 40px;
}
.sub-contents .dot-title {
  color: #111;
  font-size: 2.8rem;
  font-weight: 600;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  row-gap: 0;
  column-gap: 15px;
}
.sub-contents .dot-title::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background: var(--color-main);
  border-radius: 3px;
}
.sub-contents .member-box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 120px;
  column-gap: 40px;
}
.sub-contents .member-box.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 80px;
  column-gap: 25px;
}
.sub-contents .member-item {
  width: 100%;
  overflow: hidden;
}
.sub-contents .member-item .img {
  background: #E8E6E2;
  border-radius: 10px;
  padding: 60.815% 0;
  position: relative;
  overflow: hidden;
  transition: all 0.6s;
}
.sub-contents .member-item .img img {
  max-height: calc(100% - 35px);
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  transition: all 0.6s;
}
.sub-contents .member-item .bottom {
  margin-top: 40px;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  row-gap: 0;
  column-gap: 10px;
}
.sub-contents .member-item dl {
  margin-bottom: 30px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  row-gap: 0;
  column-gap: 15px;
}
.sub-contents .member-item dl * {
  color: #111;
  line-height: 1;
}
.sub-contents .member-item dl dt {
  font-size: 3.2rem;
  font-weight: 700;
}
.sub-contents .member-item dl dd {
  font-size: 2rem;
  font-weight: 600;
}
.sub-contents .member-item ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: 10px;
  column-gap: 0;
}
.sub-contents .member-item ul li {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}
.sub-contents .member-item ul li * {
  font-size: 1.8rem;
  font-family: var(--font-redhatdisplay);
}
.sub-contents .member-item ul b {
  width: 40px;
  flex-shrink: 0;
  color: var(--color-main);
}
.sub-contents .member-item ul p {
  color: #555;
  word-break: break-all;
}
.sub-contents .member-item .arrow {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background: var(--color-main);
  border-radius: 50%;
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.4s;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: auto;
  left: auto;
  right: 0;
  bottom: 0;
}
.sub-contents .member-item:hover .img {
  border-radius: 60px;
}
.sub-contents .member-item:hover .img img {
  transform: translateX(-50%) scale(1.1);
}
.sub-contents .member-item:hover .arrow {
  opacity: 1;
  transform: translateX(0);
}
.sub-contents .list-box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 80px;
  column-gap: 30px;
}
.sub-contents .hyphen {
  display: flex;
  column-gap: 5px;
}
.sub-contents .hyphen::before {
  content: "-";
  flex-shrink: 0;
}
.sub-contents .quick-right {
  width: 1600px;
  height: 2px;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, 0);
  transition: all 0.8s;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
}
.sub-contents .quick-right .inner {
  width: 100%;
  max-width: 320px;
}
.sub-contents .quick-right .logos-button {
  width: 100%;
  margin-top: 20px;
}
.sub-contents .quick-right.fixed {
  position: fixed;
  top: 150px;
}
.sub-contents .main-category {
  width: 100%;
  background: #f8f8f8;
  border-radius: 10px;
  padding: 35px 30px;
  position: relative;
  transition: all 0.6s;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: 25px;
  column-gap: 0;
}
.sub-contents .main-category button {
  width: 100%;
  border-bottom: 2px solid var(--color-black);
  padding: 0 15px 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.sub-contents .main-category button span {
  color: #111;
  font-size: 1.8rem;
  font-weight: 700;
}
.sub-contents .main-category button i {
  color: var(--color-black);
  font-size: 2rem;
  font-weight: 600;
  transition: all 0.4s;
}
.sub-contents .main-category button.on i {
  transform: rotateX(180deg);
}
.sub-contents .related-tab {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
.sub-contents .related-tab li {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.sub-contents .related-tab li:not(:first-child)::before {
  content: "";
  display: block;
  width: 1px;
  height: 15px;
  background: var(--color-border);
  margin: 0 20px;
}
.sub-contents .related-tab li button {
  color: #ccc;
  font-size: 1.8rem;
  font-weight: 700;
  transition: all 0.4s;
}
.sub-contents .related-tab li:hover button, .sub-contents .related-tab li.on button {
  color: var(--color-main);
}
.sub-contents .area .item-wrap {
  display: flex;
  column-gap: 40px;
}
.sub-contents .area .item-box {
  width: calc(50% - 20px);
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}
.sub-contents .area .item,
.sub-contents .area .item ul {
  border-radius: 10px;
}
.sub-contents .area .item {
  width: 100%;
  background: #f8f8f8;
  padding: 30px 40px;
  opacity: 0;
  cursor: pointer;
}
.sub-contents .area .item button,
.sub-contents .area .item a {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  row-gap: 0;
  column-gap: 20px;
}
.sub-contents .area .item button span,
.sub-contents .area .item button img,
.sub-contents .area .item a span,
.sub-contents .area .item a img {
  transition: all 0.4s;
}
.sub-contents .area .item button span,
.sub-contents .area .item a span {
  color: #ccc;
  color: #111;
  font-weight: 600;
  font-family: var(--font-pretendard);
}
.sub-contents .area .item a span {
  color: #333;
}
.sub-contents .area .item button img,
.sub-contents .area .item a img {
  filter: grayscale(1) brightness(3);
}
.sub-contents .area .item button span {
  font-size: 2.2rem;
}
.sub-contents .area .item div {
  display: none;
}
.sub-contents .area .item ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 20px;
  column-gap: 40px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  padding: 40px;
  margin-top: 30px;
}
.sub-contents .area .item ul li,
.sub-contents .area .item ul li a {
  width: 100%;
}
.sub-contents .area .item ul li a span {
  font-size: 1.8rem;
}
.sub-contents .area .item ul li a img {
  width: 5px;
}
.sub-contents .area .item ul li:hover span {
  color: var(--color-main);
}
.sub-contents .area .item ul li:hover img {
  filter: inherit;
}
.sub-contents .area .item.on button span {
  color: var(--color-main);
}
.sub-contents .area .item.on button img {
  transform: rotateX(180deg);
  filter: inherit;
}
.sub-contents .area-view .info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: 30px;
  column-gap: 0;
}
.sub-contents .area-view .info p {
  color: #555;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.5;
}
/* 2024-08-23 업무분야 상세 내 주요업무분야 css 추가 */
.sub-contents .area-view .info h3.area_view_title {
  color: #333;
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.5;
}
.sub-contents .area-view .content h4.area_view_title {
  color: #333;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.5;
}
.sub-contents .area-view .content ul.area_view_list {
  color: #555;
  font-size: 1.7rem;
  font-weight: 300;
  line-height: 1.5;
  margin: 10px 0 30px;
}
.sub-contents .area-view .content ul.area_view_list:last-of-type {
  margin-bottom: 0;
}
.sub-contents .area-view .content ul.area_view_list li {
  padding-left: 20px;
  margin-bottom:20px;
}
.sub-contents .area-view .content ul.area_view_list.gap30 li {
  margin: 0 0 30px;
}
.sub-contents .area-view .content ul.area_view_list dl dt {
  font-weight: 600;	
  font-size: 1.75rem;
}
.sub-contents .area-view .content ul.area_view_list dl dd {  
  margin: 5px 0;
  line-height:1.5;
}
.sub-contents .area-view .content ul.area_view_list dl dd.btn_link{
	margin:15px 0 0;
}
.sub-contents .area-view .content ul.area_view_list dl dd.btn_link span {
	display:inline-block;
	font-size: 1.6rem;
}
.sub-contents .area-view .content ul.area_view_list dl dd.btn_link span a {
	color:#555;
	display:inline-block;
	padding:15px 20px;
	background:#f4f4f4;
	border-radius:30px;
}
.sub-contents .area-view .content ul.area_view_list dl dd.btn_link span a img {
	display:inline-block;
	margin-left:10px;
	opacity:0.5;
}
/* 2024-08-23 추가 끝 */
.sub-contents .professional .item-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 35px;
  column-gap: 35px;
}
.sub-contents .professional .item {
  position: relative;
}
.sub-contents .professional .item .img {
  border-radius: 10px;
  padding: 33.335% 0;
  position: relative;
  overflow: hidden;
}
.sub-contents .professional .item .img img {
  transition: all 0.6s;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .professional .item .text {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .professional .item .text h5 {
  color: var(--color-white);
  font-size: 3.6rem;
  font-weight: 500;
  margin-bottom: 10px;
}
.sub-contents .professional .item .text .view-more {
  opacity: 0.4;
}
.sub-contents .professional .item:hover img {
  transform: translate(-50%, -50%) scale(1.1);
}
.sub-contents .startup .introduction {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 80px;
  column-gap: 25px;
}
.sub-contents .startup .introduction .item {
  width: 100%;
}
.sub-contents .startup .introduction .text {
  margin-top: 30px;
}
.sub-contents .startup .introduction .text dl dt {
  color: #111;
  font-size: 2.4rem;
  font-weight: 600;
  margin-bottom: 20px;
}
.sub-contents .startup .introduction .text dl dd {
  color: #222;
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 1.7;
}
.sub-contents .startup .introduction .text hr {
  width: 100%;
  height: 1px;
  background: var(--color-border);
  margin: 20px 0;
}
.sub-contents .startup .introduction .text ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: 10px;
  column-gap: 0;
}
.sub-contents .startup .introduction .text ul li {
  color: #555;
  font-size: 1.7rem;
  font-weight: 300;
}
.sub-contents .member-view .point-box {
  top: -64%;
}
.sub-contents .member-view .point-box .diagonal span {
  opacity: 0.05;
}
.sub-contents .member-view .information {
  width: 100%;
  height: 820px;
  background: #142343;
  position: relative;
  overflow: hidden;
}
.sub-contents .member-view .information .item-box {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
}
.sub-contents .member-view .information .text {
  padding-bottom: 80px;
}
.sub-contents .member-view .information .text * {
  color: var(--color-white);
}
.sub-contents .member-view .information .text dl {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  row-gap: 0;
  column-gap: 30px;
}
.sub-contents .member-view .information .text dl dt,
.sub-contents .member-view .information .text dl dd {
  font-weight: 600;
  line-height: 1;
}
.sub-contents .member-view .information .text dl dt {
  font-size: 9.2rem;
}
.sub-contents .member-view .information .text dl dd {
  font-size: 2.4rem;
}
.sub-contents .member-view .information .text > p {
  font-size: 2.4rem;
  font-weight: 300;
  margin: 20px 0 40px;
}
.sub-contents .member-view .information .text ul {
  margin: 80px 0 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: 10px;
  column-gap: 0;
}
.sub-contents .member-view .information .text ul * {
  font-size: 2rem;
  font-family: var(--font-redhatdisplay);
}
.sub-contents .member-view .information .text ul li {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.sub-contents .member-view .information .text ul b {
  display: inline-block;
  width: 100px;
}
.sub-contents .member-view .information .img {
  width: 31.25%;
  padding: 20.95% 0;
  position: relative;
}
.sub-contents .member-view .information .img img {
  position: absolute;
  top: auto;
  left: 50%;
  right: auto;
  bottom: 0;
  transform: translateX(-50%);
}
.sub-contents .member-view .information .logos-button.download {
  border: 1px solid #ffffff;
  opacity: 0.3;
  z-index: 1;
  transition: all 0.4s;
}
.sub-contents .member-view .information .logos-button.download em {
  color: var(--color-white);
}
.sub-contents .member-view .information .logos-button.download:hover {
  border-color: transparent;
  opacity: 1;
}
.sub-contents .member-view .fixed-box {
  width: 100%;
  background: var(--color-white);
  position: relative;
  z-index: 1;
}
.sub-contents .member-view .fixed-box .inner {
  position: relative;
}
.sub-contents .member-view .fixed-box.fixed {
  position: fixed;
  top: 0;
  left: 0;
}
.sub-contents .member-view .scroll-tab,
.sub-contents .member-view .scroll-tab li {
  position: relative;
}
.sub-contents .member-view .scroll-tab::after,
.sub-contents .member-view .scroll-tab li::after {
  content: "";
  display: block;
}
.sub-contents .member-view .scroll-tab {
  height: 80px;
  background: var(--color-white);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.sub-contents .member-view .scroll-tab::after {
  width: 100vw;
  height: 1px;
  background: var(--color-border);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.sub-contents .member-view .scroll-tab li,
.sub-contents .member-view .scroll-tab li button {
  width: 100%;
  height: 100%;
}
.sub-contents .member-view .scroll-tab li {
  position: relative;
}
.sub-contents .member-view .scroll-tab li::after {
  width: 0;
  height: 2px;
  background: var(--color-main);
  transition: all 0.4s;
  position: absolute;
  top: calc(100% - 2px);
  left: 50%;
  transform: translateX(-50%);
}
.sub-contents .member-view .scroll-tab li button {
  color: #ccc;
  font-size: 2rem;
  font-weight: 700;
  transition: all 0.4s;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.sub-contents .member-view .scroll-tab li:hover::after, .sub-contents .member-view .scroll-tab li.on::after {
  width: 100%;
}
.sub-contents .member-view .scroll-tab li:hover button, .sub-contents .member-view .scroll-tab li.on button {
  color: var(--color-main);
}
.sub-contents .member-view .contents .content .column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: 40px;
  column-gap: 0;
}
.sub-contents .member-view .contents .content h6 {
  color: #111;
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 20px;
}
.sub-contents .member-view .contents .list-cover:not(.x) {
  max-height: 145px;
  position: relative;
  overflow: hidden;
  transition: all 0.6s;
}
.sub-contents .member-view .contents .list-cover::after {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  transition: all 0.6s;
  position: absolute;
  top: auto;
  left: 50%;
  right: auto;
  bottom: 0;
  transform: translateX(-50%);
}
.sub-contents .member-view .contents .list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: 15px;
  column-gap: 0;
}
.sub-contents .member-view .contents .list li {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}
.sub-contents .member-view .contents .list li * {
  font-size: 1.7rem;
}
.sub-contents .member-view .contents .list b {
  width: 150px;
  flex-shrink: 0;
  color: #111;
  font-weight: 600;
  font-family: var(--font-redhatdisplay);
}
.sub-contents .member-view .contents .list p {
  font-weight: 300;
  color: #555;
}
/* 2024-08-23 최근 업무사례 본문 내 css 추가 */
.sub-contents .member-view .contents .list h4.memCase_title {
  font-size: 2.0rem;
  font-weight: 600;
  color: #333;
}
.sub-contents .member-view .contents .list p.memCase_subTitle {
  font-weight:600;
  color: #333;
}
.sub-contents .member-view .contents .list ul.memCase_subList {
  margin-bottom: 30px;
}
.sub-contents .member-view .contents .list ul.memCase_subList li {
  color: #666;
  margin-bottom: 5px;
}
/* 2024-08-23 최근 업무사례 추가 끝 */
.sub-contents .member-view .contents .list-cover.off::after {
  height: 100%;
  opacity: 1;
}
.sub-contents .member-view .contents .all-button {
  width: 100%;
  max-width: 45.45%;
  height: 65px;
  background: #eee;
  border-radius: 100px;
  margin: 60px auto 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  row-gap: 0;
  column-gap: 10px;
}
.sub-contents .member-view .contents .all-button * {
  color: #aaa;
  line-height: 1;
}
.sub-contents .member-view .contents .all-button span {
  font-size: 1.6rem;
  font-weight: 600;
}
.sub-contents .member-view .contents .all-button i {
  font-size: 2rem;
  font-weight: 500;
}
.sub-contents .talent .feature .item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  row-gap: 0;
  column-gap: 80px;
}
.sub-contents .talent .feature .img,
.sub-contents .talent .feature .text {
  width: calc(50% - 40px);
}
.sub-contents .talent .feature .text {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 40px;
  column-gap: 0;
}
.sub-contents .talent .feature .text dl dt {
  color: #111;
  font-size: 4.2rem;
  font-weight: 600;
  margin-bottom: 40px;
}
.sub-contents .talent .feature .text dl dd {
  color: #555;
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 1.5;
}
.sub-contents .talent .feature .text ul {
  flex-wrap: wrap;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  row-gap: 5px;
  column-gap: 5px;
}
.sub-contents .talent .feature .text ul li {
  border-radius: 100px;
  font-weight: 700;
  padding: 10px 30px;
}
.sub-contents .talent .feature .text ul.gray li {
  background: #eee;
  color: #aaa;
}
.sub-contents .talent .feature .text ul.navy li {
  background: var(--color-main);
  color: #fff;
}
.sub-contents .talent .feature .logos-button {
  margin: 0 auto;
}
.sub-contents .talent .banner {
  text-align: center;
  padding: var(--gap150) 0;
  margin-top: 200px;
  position: relative;
}
.sub-contents .talent .banner * {
  color: var(--color-white);
}
.sub-contents .talent .banner::before {
  content: "";
  display: block;
  width: 100vw;
  height: 100%;
  background: url("/img/sub/bg_talent.jpg") no-repeat center/cover;
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .talent .banner h4 {
  display: inline-flex;
  flex-direction: column;
  row-gap: 10px;
  font-size: var(--font48);
}
.sub-contents .talent .banner h4 br {
  display: none;
}
.sub-contents .talent .banner h4 em {
  font-weight: 300;
}
.sub-contents .talent .banner h4 b {
  font-weight: 600;
}
.sub-contents .talent .banner .info,
.sub-contents .talent .banner .info div {
  display: flex;
  align-items: center;
}
.sub-contents .talent .banner .info {
  justify-content: center;
  column-gap: 40px;
  margin-top: 30px;
}
.sub-contents .talent .banner .info * {
  font-family: var(--font-redhatdisplay);
}
.sub-contents .talent .banner .info div {
  column-gap: 15px;
}
.sub-contents .talent .banner .info b {
  width: 35px;
  height: 35px;
  flex-shrink: 0;
  background: var(--color-main);
  border-radius: 50%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.sub-contents .talent .banner .info p {
  font-size: 1.8rem;
  font-weight: 500;
}
.sub-contents .welfare .item-box {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  row-gap: 20px;
  column-gap: 20px;
}
.sub-contents .welfare .item {
  background: #f8f8f8;
  border: 2px solid #eee;
  border-radius: 10px;
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: 60px;
  column-gap: 0;
}
.sub-contents .welfare .item em {
  color: var(--color-main);
  font-size: 2rem;
  font-weight: 700;
  font-family: var(--font-redhatdisplay);
}
.sub-contents .welfare .item dl dt {
  color: #111;
  font-size: 2.2rem;
  font-weight: 600;
  margin-bottom: 20px;
}
.sub-contents .welfare .item dl dd {
  color: #555;
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 1.5;
}
.sub-contents .recruit .application {
  width: 100%;
  overflow: hidden;
}
.sub-contents .recruit .application .list {
  height: 240px;
  background: linear-gradient(155deg, #208EF3 2.01%, #18479F 84.28%);
  border-radius: 20px;
}
.sub-contents .recruit .application .list a {
  padding: 30px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
.sub-contents .recruit .application .list a * {
  color: var(--color-white);
}
.sub-contents .recruit .application .list .arrow {
  margin-left: auto;
}
.sub-contents .recruit .application .list dl > * {
  height: 1.3em;
  -webkit-line-clamp: 1;
  overflow: hidden;
  word-wrap: break-word;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.sub-contents .recruit .application .list dl dt {
  font-size: 2.4rem;
  font-weight: 500;
  margin-bottom: 10px;
}
.sub-contents .recruit .application .list dl dd {
  font-size: 1.8rem;
  font-weight: 300;
  opacity: 0.8;
}
.sub-contents .recruit .recruit-tab,
.sub-contents .recruit .recruit-tab li {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.sub-contents .recruit .recruit-tab {
  margin: 0 auto 60px;
}
.sub-contents .recruit .recruit-tab li:not(:first-child)::before {
  content: "";
  display: block;
  width: 1px;
  height: 15px;
  background: var(--color-border);
  margin: 0 20px;
}
.sub-contents .recruit .recruit-tab li a {
  color: #ccc;
  font-size: 2rem;
  font-weight: 700;
  transition: all 0.4s;
}
.sub-contents .recruit .recruit-tab li:hover a, .sub-contents .recruit .recruit-tab li.on a {
  color: var(--color-main);
}
.sub-contents .counsel {
  padding-bottom: 0;
}
.sub-contents .counsel .map-box {
  width: 100vw;
  height: 525px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.sub-contents .counsel .root_daum_roughmap,
.sub-contents .counsel .root_daum_roughmap .wrap_map {
  width: 100%;
  height: 100%;
}
.sub-contents .counsel .root_daum_roughmap .map_border {
  display: none;
}
.sub-contents .counsel .flex-box {
  display: flex;
  justify-content: space-between;
}
.sub-contents .counsel .info-box,
.sub-contents .counsel .form-box {
  width: 100%;
}
.sub-contents .counsel .info-box {
  max-width: 620px;
}
.sub-contents .counsel .title h4 {
  color: #111;
  font-size: var(--font48);
  font-weight: 600;
  margin-bottom: 20px;
}
.sub-contents .counsel .title p {
  color: #333;
  font-size: 2rem;
  font-weight: 300;
}
.sub-contents .counsel .info {
  background: #f8f8f8;
  border-radius: 20px;
  padding: 60px;
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: 40px;
  column-gap: 0;
}
.sub-contents .counsel .info *:not(.address dd) {
  font-family: var(--font-redhatdisplay);
}
.sub-contents .counsel .info dl * {
  font-size: 1.8rem;
}
.sub-contents .counsel .info dl dt {
  color: var(--color-main);
  font-weight: 700;
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  row-gap: 0;
  column-gap: 10px;
}
.sub-contents .counsel .info dl dd {
  color: #333;
  font-weight: 400;
}
.sub-contents .counsel .info dl dd a {
  display: flex; 
  align-items: center;
  font-weight: 600;
  color: #262626;
}
.sub-contents .counsel .info dl dd a i{ 
  display: inline-block;
  width: 18px; 
  height: 19px; 
  background: url("/img/svg/icon_blank_arrow.svg") no-repeat center center / contain;
  margin-left: 2px;
}
.sub-contents .counsel .info dl dd br {
  display: none;
}
.sub-contents .counsel .info dl.address dd {
  font-weight: 300;
}
.sub-contents .counsel .info dl.flex{
  display: flex;
  align-items: center;
}
.sub-contents .counsel .info dl.flex dt{
  margin-bottom: 0 !important;
}
.sub-contents .counsel .info dl.flex dd{
  padding-left: 15px;
}
.sub-contents .counsel .form-box {
  max-width: 840px;
}
.sub-contents .counsel .form-box dl dt {
  width: 200px;
}
.sub-contents .counsel .form-box .captcha div {
  width: 255px;
  height: var(--form-height);
  display: flex;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
}
.sub-contents .counsel .form-box .captcha div > * {
  height: 100%;
}
.sub-contents .counsel .form-box .captcha div figure {
  width: 100%;
}
.sub-contents .counsel .form-box .captcha div figure img {
  width: 100%;
  height: 100%;
}
.sub-contents .counsel .form-box .captcha div button {
  flex-shrink: 0;
  width: var(--form-height);
  background: var(--color-main);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.sub-contents .counsel .form-box .bottom {
  margin-top: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.sub-contents .counsel .form-box .bottom .policy-text {
  display: inline-flex;
  align-items: center;
  column-gap: 15px;
}
.sub-contents .counsel .form-box .bottom .policy-text button {
  color: #111;
  font-size: 1.6rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-position: under;
}
.sub-contents .introduce .item .img {
  border-radius: 20px;
  padding: 15% 0;
  position: relative;
  overflow: hidden;
}
.sub-contents .introduce .item .img img {
  max-width: inherit;
  min-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .introduce .item .text {
  margin-top: 40px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: 0;
  column-gap: 40px;
}
.sub-contents .introduce .item .text h5 {
  width: 480px;
  flex-shrink: 0;
  color: #111;
  font-size: 3.6rem;
  font-weight: 600;
}
.sub-contents .introduce .item .text h5 em {
  color: var(--color-main);
}
.sub-contents .introduce .item .text p {
  color: #555;
  font-size: 1.9rem;
  font-weight: 300;
  line-height: 1.7;
}
.sub-contents .value .diagram {
  position: relative;
  margin: 0 auto;
}
.sub-contents .value .diagram .icon-box {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  row-gap: 200px;
  column-gap: 7.5px;
  position: relative;
  z-index: 1;
}
.sub-contents .value .diagram .icon-box .icon {
  width: 175px;
  height: 175px;
  background: var(--color-white);
  border: 2px solid var(--color-main);
  border-radius: 50%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.sub-contents .value .diagram .icon-box .item {
  display: inline-flex;
  row-gap: 30px;
  column-gap: 30px;
  position: relative;
}
.sub-contents .value .diagram .icon-box p {
  color: #111;
  font-size: 2.6rem;
  font-weight: 600;
  white-space: nowrap;
}
.sub-contents .value .diagram .icon-box .top {
  align-items: center;
}
.sub-contents .value .diagram .icon-box .left {
  margin-left: auto;
}
.sub-contents .value .diagram .icon-box .right {
  grid-area: 1/3/1/3;
}
.sub-contents .value .diagram .icon-box .bottom {
  flex-direction: column;
  grid-area: 2/2/2/2;
  margin: 0 auto;
}
.sub-contents .value .diagram .logo-box::before,
.sub-contents .value .diagram .inner,
.sub-contents .value .diagram .inner::after {
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .value .diagram .logo-box {
  width: 60.185%;
  padding: 30.0925% 0;
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
}
.sub-contents .value .diagram .logo-box::before {
  content: "";
  display: block;
  border: 1px dashed var(--color-border);
  width: 100%;
  height: 100%;
}
.sub-contents .value .diagram .logo-box .inner {
  width: 80%;
  background: rgba(24, 71, 159, 0.05);
  padding: 40% 0;
}
.sub-contents .value .diagram .logo-box .inner::after {
  content: "";
  display: block;
  width: 87.5%;
  background: rgba(24, 71, 159, 0.1);
  box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.1);
  padding: 43.75% 0;
}
.sub-contents .value .diagram .logo-box .logo {
  width: 210px;
  height: 65px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .value .diagram .logo-box .logo-cls {
  fill: var(--color-main);
}
.sub-contents .value .detail .item {
  width: 100%;
}
.sub-contents .value .detail .text {
  background: #f8f8f8;
  border-radius: 10px;
  padding: 60px 40px;
}
.sub-contents .value .detail .text * {
  font-size: 1.9rem;
}
.sub-contents .value .detail .text p {
  color: #555;
  font-weight: 300;
  line-height: 1.7;
}
.sub-contents .value .detail .inner {
  padding: 0 20px;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: 30px;
  column-gap: 0;
}
.sub-contents .value .detail .inner dt {
  color: #333;
  font-weight: 500;
  margin-bottom: 10px;
}
.sub-contents .value .detail .inner p {
  line-height: 1.3;
}
.sub-contents .history .history-tab {
  width: 100%;
  display: flex;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 1;
}
.sub-contents .history .history-tab::before {
  content: "";
  display: block;
  width: 100vw;
  height: var(--gap120);
  background: var(--color-white);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.sub-contents .history .history-tab li {
  width: 100%;
  position: relative;
}
.sub-contents .history .history-tab li::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #f5f5f5;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.4s;
}
.sub-contents .history .history-tab li button {
  width: 100%;
  color: #ccc;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  padding: 20px 0;
  transition: all 0.4s;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.sub-contents .history .history-tab li:hover::after, .sub-contents .history .history-tab li.on::after {
  height: 2px;
  background: var(--color-main);
  top: calc(100% - 1px);
}
.sub-contents .history .history-tab li:hover button, .sub-contents .history .history-tab li.on button {
  color: var(--color-main);
}
.sub-contents .history .timeline {
  width: 100%;
  display: grid;
  grid-template-columns: 0.384375fr 0.5fr;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  z-index: 0;
}
.sub-contents .history .img-wrap,
.sub-contents .history .text-wrap {
  width: 100%;
}
.sub-contents .history .img-wrap {
  padding: 60.165% 0;
  position: sticky;
  top: 120px;
  z-index: 1;
}
.sub-contents .history .img-box,
.sub-contents .history .img-box .img,
.sub-contents .history .img-box .img img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-contents .history .img-box,
.sub-contents .history .img-box .img {
  width: 100%;
  height: 100%;
}
.sub-contents .history .img-box .img {
  border-radius: 20px;
  overflow: hidden;
}
.sub-contents .history .img-box .img img {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.1);
  transition: all 1s;
}
.sub-contents .history .img-box span {
  color: var(--color-white);
  font-size: 6.4rem;
  font-weight: 600;
  text-align: right;
  font-family: var(--font-redhatdisplay);
  opacity: 0;
  position: absolute;
  top: 50px;
  right: 90px;
}
.sub-contents .history .img-box.on .img img {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.sub-contents .history .img-box.on span {
  opacity: 1;
  right: 50px;
  transition: all 1s 0.4s;
}
.sub-contents .history .text-wrap {
  flex-shrink: 0;
  margin-top: -80px;
}
.sub-contents .history .text-box dl {
  border-bottom: 1px solid var(--color-border);
  padding: 80px 0;
}
.sub-contents .history .text-box dl dt {
  color: #111;
  font-size: 2.8rem;
  font-weight: 700;
  font-family: var(--font-redhatdisplay);
  margin-bottom: 30px;
}
.sub-contents .history .text-box dl dd,
.sub-contents .history .text-box dl .p-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: 15px;
  column-gap: 0;
}
.sub-contents .history .text-box dl dd * {
  font-size: 1.9rem;
}
.sub-contents .history .text-box dl dd > div {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: 0;
  column-gap: 20px;
}
.sub-contents .history .text-box dl span {
  display: block;
  flex-shrink: 0;
  width: 100px;
  color: #ccc;
  font-weight: 700;
  font-family: var(--font-redhatdisplay);
}
.sub-contents .history .text-box dl p {
  color: #555;
  font-weight: 300;
}
.sub-contents .history .cover {
  position: absolute;
  top: 0;
}
.sub-contents .history .cover::after {
  content: "";
  display: block;
  width: 100%;
  height: var(--gap200);
  background: var(--color-white);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.sub-contents .public .item-box .text-box {
  margin: -150px 0 0 80px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  row-gap: 0;
  column-gap: 40px;
}
.sub-contents .public .item-box .text {
  background: var(--color-main);
  border-radius: 20px;
  font-size: 4.2rem;
  padding: 80px;
}
.sub-contents .public .item-box .text * {
  color: var(--color-white);
  line-height: 1.5;
}
.sub-contents .public .item-box .text h5 {
  font-size: 0.905em;
  font-weight: 200;
}
.sub-contents .public .item-box .text h4 {
  font-weight: 600;
}
.sub-contents .public .item-box .view-more {
  margin-bottom: 20px;
}
.sub-contents .location .item {
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 40px;
}
.sub-contents .location .map-box {
  width: 100%;
  height: 580px;
}
.sub-contents .location .map-box iframe {
  width: 100%;
  height: 100%;
}
.sub-contents .location .info-box,
.sub-contents .location .info-box h4,
.sub-contents .location .info,
.sub-contents .location .info dl {
  display: flex;
  align-items: center;
}
.sub-contents .location .info-box {
  column-gap: 40px;
}
.sub-contents .location .info-box h4 {
  width: 410px;
  flex-shrink: 0;
  column-gap: 20px;
  color: #111;
  font-size: 4.2rem;
  font-weight: 500;
}
.sub-contents .location .info {
  column-gap: 60px;
}
.sub-contents .location .info dl {
  column-gap: 20px;
}
.sub-contents .location .info dl * {
  font-size: 2rem;
}
.sub-contents .location .info dl dt {
  color: #111;
  font-weight: 600;
  font-family: var(--font-redhatdisplay);
}
.sub-contents .location .info dl dd {
  color: #555;
  font-weight: 300;
}
.sub-contents .location .info dl:not(.address) dd {
  font-weight: 400;
  font-family: var(--font-redhatdisplay);
}
.sub-contents .location .column {
  display: flex;
  flex-direction: column;
}
.sub-contents .subscribe .interests {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  row-gap: 30px;
  column-gap: 20px;
}
.sub-contents .subscribe .interests input[type=checkbox] {
  width: 20px;
  height: 20px;
}
.sub-contents .subscribe .interests .check-box {
  column-gap: 20px;
}
.sub-contents .subscribe .interests .check-box span {
  color: #333;
  font-size: 2rem;
  font-weight: 300;
}
.sub-contents .subscribe .bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 30px;
  column-gap: 0;
}
.sub-contents .subscribe .bottom .policy-text {
  display: inline-flex;
  align-items: center;
  column-gap: 15px;
}
.sub-contents .subscribe .bottom .policy-text button {
  color: #111;
  font-size: 1.6rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-position: under;
}


/* 공공부문 민원대응 & 직원보호 프로그램 */
.complaint{ padding-top: 0 !important; }
.complaint .sticky{ background: #FFF; position: sticky; position: -webkit-sticky; top: 0; left: 0; z-index: 5; margin-bottom: var(--gap150); }
.complaint .sec-title{ text-align: center; margin-bottom: var(--gap80); }
.complaint .sec-title::before{ content: ""; display: block; height: 30px; background: url("/img/svg/sec_title_before.svg") no-repeat center center / contain; margin-bottom: 22px; }
.complaint .sec-title h4{ font-size: var(--font60); font-weight: 700; color: #262626; letter-spacing: -0.02em; }

.complaint section:not(:last-of-type){ margin-bottom: 200px; }
.complaint .sec-box > div{ margin-top: 200px; }
.complaint .dot-tit{ padding-left: 32px; margin-bottom: 50px; }
.complaint .dot-tit h5{ font-size: 4.2rem; font-weight: 700; color: var(--color-main); position: relative; }
.complaint .dot-tit h5::before{ content: ""; width: 12px; height: 12px; background: var(--color-main); border-radius: 4px; position: absolute; top: calc(1.3em / 2); left: -32px; transform: translateY(-50%); }
.complaint .dot-tit p{ font-size: 3.2rem; font-weight: 400; color: #262626; letter-spacing: -0.02em; line-height: 1.5; margin-top: 20px; }
.complaint .dot-tit p strong{ font-weight: 700; }

.complaint .gray-list{ background: #F8F8F8; border-radius: 10px; padding: 40px; }
.complaint .gray-list ul li{ font-size: 3.0rem; font-weight: 400; color: #262626; letter-spacing: -0.02em; line-height: 1.5; padding-left: 25px; position: relative; }
.complaint .gray-list ul li:not(:last-of-type){ margin-bottom: 20px; }
.complaint .gray-list ul li::before{ content: ""; width: 11px; height: 11px; background: url("/img/svg/dia_list.svg") no-repeat center left / contain; position: absolute; top: calc(1.5em / 2); left: 0; transform: translateY(-50%); }
.complaint .gray-list ul li span{ font-size: 2.4rem; font-weight: 400; color: #999; line-height: 1.8; }
.complaint .gray-list ul li strong{ font-weight: 600; }


.complaint .response  .gray-list ul li span{ display: block; }

.complaint .response .sec01 .dot-tit p{ font-size: 2.8rem; color: #999; letter-spacing: -0.02em; line-height: 1.3; margin-top: 15px; }
.complaint .response .sec01 .graph{ background: #FCF3DD; padding: 60px 80px; }
.complaint .response .sec01 .graph .center{ text-align: center; }
.complaint .response .sec01 .graph p{ font-size: 2.8rem; font-weight: 400; color: #999; letter-spacing: -0.02em; }
.complaint .response .sec01 .graph p span{ color: #BE8919; }
.complaint .response .sec01 .graph figure{ margin: 60px 0 20px; }

.complaint .response .sec02 .figure figure{ margin: var(--gap80) 0; }
.complaint .response .sec02 .figure p{ font-size: 3.0rem; font-weight: 500; color: #666; letter-spacing: -0.02em; line-height: 1.6; text-align: center; }
.complaint .response .sec02 .figure p strong{ display: block; font-size: 4.8rem; font-weight: 700; color: #262626; margin-bottom: 20px; }

.complaint .response .sec03 h5{ font-size: 4.2rem; font-weight: 700; color: #262626; letter-spacing: -0.02em; text-align: center; margin-bottom: var(--gap80); }
.complaint .response .sec03 h5 em{ color: var(--color-main); }
.complaint .response .sec03 figure{ margin-bottom: 40px; }


.complaint .legal .sec02 .gray-list ul li span{ margin-left: 20px; }

.complaint .legal .sec03 figure{ margin-bottom: var(--gap80); }
.complaint .legal .sec03 .dot-tit p span{ font-size: 2.4rem; color: #999; margin-left: 20px; }
.complaint .legal .table-box{ overflow-x: auto; }
.complaint .legal .table-box *{ font-size: 3.0rem; font-weight: 500; color: #262626; letter-spacing: -0.02em; text-align: center; }
/* .complaint .legal .table-box table{ min-width: 880px; } */
.complaint .legal .table-box .br{ border-right: 1px dashed var(--color-main) !important; }
.complaint .legal .table-box colgroup col{ width: 10%; }
.complaint .legal .table-box colgroup col.th01{ width: calc((50% / 4) * 3); }
.complaint .legal .table-box colgroup col.th02{ width: calc(50% / 4); }
.complaint .legal .table-box thead th{ background: var(--color-main); border: 1px solid var(--color-main); color: #FFF; padding: 10px; }
.complaint .legal .table-box tbody th,
.complaint .legal .table-box tbody td{ border: 1px dashed var(--color-main); padding: 20px 10px; }
.complaint .legal .table-box tbody th{ background: #EEEDF2; color: var(--color-main); }
.complaint .legal .table-box tbody tr:not(.pblock) > *{ padding-block: 40px; }
.complaint .legal .table-box tbody tr > *{ border-left: none; }
.complaint .legal .table-box tbody tr > *:last-child:not(:only-child){ border-right: none; }
.complaint .legal .table-box tbody tr:first-of-type > *{ border-top: none; }
.complaint .legal .table-box tbody td p{ color: var(--color-main); }


.complaint .logos .navyBox{ background: #142343; padding: 100px 0; margin-top: 100px; text-align: center; }
.complaint .logos .navyBox *{ color: #FFF; }
.complaint .logos .navyBox h4{ font-size: var(--font60); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 100px; }
.complaint .logos .navyBox h4::before{ content: ""; display: block; height: 30px; background: url("/img/svg/dia_tit.svg") no-repeat center center / contain; margin-bottom: 20px; }
.complaint .logos .diagram{ max-width: 840px; width: 100%; margin: 0 auto; }
.complaint .logos .diagram .flex{ display: flex; justify-content: center; align-items: center; }
.complaint .logos .diagram .item{ width: calc((100% + 60px) / 3); border: 3px dashed #BE8919; border-radius: 50%; margin-right: -30px; position: relative; }
.complaint .logos .diagram .item:last-of-type{ margin-right: 0; }
.complaint .logos .diagram .item::before{ content: ""; display: block; padding-bottom: 100%; }
.complaint .logos .diagram .item div{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); }
.complaint .logos .diagram .item p{ font-family: var(--font-redhatdisplay); font-size: 5.2rem; font-weight: 700; color: #BE8919; margin-bottom: 5px; }
.complaint .logos .diagram .item span{ font-family: var(--font-redhatdisplay); font-size: 2.4rem; font-weight: 300; }
.complaint .logos .p-box{ margin-top: 60px; }
.complaint .logos .p-box *{ font-size: 3.0rem; font-weight: 200; color: rgba(255, 255, 255, 0.8); letter-spacing: -0.02em; line-height: 1.4; }
.complaint .logos .p-box p:not(:last-of-type){ margin-bottom: 40px; }

.complaint .logos .sec02 .grid-box{ display: grid; grid-template-columns: repeat(2, 50%); margin: -15px; }
.complaint .logos .sec02 .grid-box > *{ margin: 15px; }
.complaint .logos .sec02 .item{ display: grid; grid-template-columns: 200px calc(100% - 200px); background: #F8F8F8; border-radius: 10px; padding: 30px; }
.complaint .logos .sec02 .item figure{ display: block; position: relative; overflow: hidden; padding-bottom: 150%; border-radius: 10px; }
.complaint .logos .sec02 .item figure img{ width: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.complaint .logos .sec02 .item dl{ padding-inline: 45px 10px; padding-top: 15px; }
.complaint .logos .sec02 .item dl *{ font-size: 2.4rem; font-weight: 400; letter-spacing: -0.02em; }
.complaint .logos .sec02 .item dl dt{ color: #999; }
.complaint .logos .sec02 .item dl dt::after{ content: ""; display: block; height: 1px; background: #BE8919; margin: 30px 0; }
.complaint .logos .sec02 .item dl dt strong{ font-size: 3.2rem; font-weight: 600; color: #BE8919; margin-right: 15px; }
.complaint .logos .sec02 .item ul li{ color: #262626; padding-left: 25px; position: relative; }
.complaint .logos .sec02 .item ul li:not(:last-of-type){ margin-bottom: 15px; }
.complaint .logos .sec02 .item ul li::before{ content: ""; width: 11px; height: 11px; background: url("/img/svg/dia_list.svg") no-repeat center left / contain; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }


.complaint .form-box > .column{ flex: 1 0 auto; }
.complaint .form-box textarea{ height: 150px; }
.complaint .counsel .info dl.flex{ flex-direction: row; }

@media (max-width: 1600px){
	.complaint section:not(:last-of-type){ margin-bottom: 160px; }
	.complaint .sec-box > div{ margin-top: 160px; }

	.complaint .sec-title::before{ height: 25px; }

	.complaint .dot-tit{ margin-bottom: 40px; }
	.complaint .dot-tit h5{ font-size: 3.2rem; }
	.complaint .dot-tit p{ font-size: 2.4rem; }

	.complaint .gray-list{ padding: 30px; }
	.complaint .gray-list ul li{ font-size: 2.6rem; }
	.complaint .gray-list ul li span{ font-size: 2.2rem; }

	.complaint .response .sec01 .dot-tit p{ font-size: 2.2rem; }
	.complaint .response .sec01 .graph{ padding: 40px 60px; }
	.complaint .response .sec01 .graph p{ font-size: 2.4rem; }
	.complaint .response .sec01 .graph figure{ margin: 40px 0 20px; }

	.complaint .response .sec02 .figure p{ font-size: 2.6rem; }
	.complaint .response .sec02 .figure p strong{ font-size: 4.0rem; }

	.complaint .response .sec03 h5{ font-size: 3.2rem; }


	.complaint .legal .sec03 .dot-tit p span{ font-size: 2.0rem; }
	.complaint .legal .table-box *{ font-size: 2.6rem; }
	.complaint .legal .table-box tbody tr:not(.pblock) > *{ padding-block: 30px; }

	
	.complaint .logos .navyBox h4::before{ height: 25px; }
	.complaint .logos .navyBox h4{ margin-bottom: 70px; }
	.complaint .logos .diagram .item p{ font-size: 4.2rem; }
	.complaint .logos .diagram .item span{ font-size: 2.0rem; }
	.complaint .logos .p-box *{ font-size: 2.6rem; }

	.complaint .logos .sec02 .item{ grid-template-columns: 170px calc(100% - 170px); padding: 20px; }
	.complaint .logos .sec02 .item dl *{ font-size: 2.0rem; }
	.complaint .logos .sec02 .item dl dt::after{ margin: 20px 0; }
	.complaint .logos .sec02 .item dl dt strong{ font-size: 2.8rem; }
}

@media (max-width: 1400px){
	.complaint .sec-title::before{ height: 20px; }

	.complaint .legal .sec02 .gray-list ul li span{ display: block; margin-left: 0; margin-top: 7px: }

	.complaint .logos .sec02 .item{ grid-template-columns: 140px calc(100% - 140px); }
	.complaint .logos .sec02 .item dl{ padding-inline: 30px 10px; }

	.complaint .logos .navyBox h4::before{ height: 20px; }
}

@media (max-width: 1200px){
	.complaint section:not(:last-of-type){ margin-bottom: 120px; }
	.complaint .sec-box > div{ margin-top: 120px; }

	.complaint .logos .navyBox{ padding: 60px 0; }
}

@media (max-width: 960px){
	.complaint .sec-title::before{ height: 17px; margin-bottom: 15px; }

	.complaint .dot-tit{ padding-left: 22px; margin-bottom: 20px; }
	.complaint .dot-tit h5{ font-size: 2.7rem; }
	.complaint .dot-tit h5::before{ width: 8px; height: 8px; border-radius: 3px; left: -22px; }
	.complaint .dot-tit p{ font-size: 2.0rem; margin-top: 10px; }

	.complaint .gray-list{ padding: 20px; }
	.complaint .gray-list ul li{ font-size: 2.2rem; padding-left: 20px; }
	.complaint .gray-list ul li:not(:last-of-type){ margin-bottom: 10px; }
	.complaint .gray-list ul li::before{ width: 9px; height: 9px; }
	.complaint .gray-list ul li span{ font-size: 1.9rem; }

	.complaint .response .sec01 .dot-tit p{ font-size: 1.9rem; margin-top: 10px; }
	.complaint .response .sec01 .graph{ padding: 20px 30px; }
	.complaint .response .sec01 .graph p{ font-size: 2.0rem; }
	.complaint .response .sec01 .graph figure{ margin: 30px 0 10px; }

	.complaint .response .sec02 .figure p{ font-size: 2.2rem; }
	.complaint .response .sec02 .figure p strong{ font-size: 3.6rem; margin-bottom: 10px; }

	.complaint .response .sec03 h5{ font-size: 2.7rem; }


	.complaint .legal .sec03 .dot-tit p span{ font-size: 1.8rem; }
	.complaint .legal .table-box *{ font-size: 2.2rem; }
	.complaint .legal .table-box tbody th, 
	.complaint .legal .table-box tbody td{ padding: 10px; }
	.complaint .legal .table-box tbody tr:not(.pblock) > *{ padding-block: 20px; }

	.complaint .logos .navyBox h4::before{ height: 17px; margin-bottom: 10px; }
	.complaint .logos .navyBox h4{ margin-bottom: 40px; }
	.complaint .logos .diagram{ max-width: 700px; }
	.complaint .logos .diagram .item p{ font-size: 3.5rem; }
	.complaint .logos .diagram .item span{ font-size: 1.8rem; }
	.complaint .logos .p-box{ margin-top: 40px; }
	.complaint .logos .p-box *{ font-size: 2.2rem; }
	.complaint .logos .p-box p:not(:last-of-type){ margin-bottom: 20px; }

	.complaint .logos .sec02 .grid-box{ grid-template-columns: repeat(1, 100%); margin: -10px; }
	.complaint .logos .sec02 .grid-box > *{ margin: 10px; }
	.complaint .logos .sec02 .item{ padding: 15px; }
	.complaint .logos .sec02 .item dl{ padding-top: 10px; padding-left: 25px; }
	.complaint .logos .sec02 .item dl *{ font-size: 1.8rem; }
	.complaint .logos .sec02 .item dl dt::after{ margin: 10px 0 15px; }
	.complaint .logos .sec02 .item dl dt strong{ font-size: 2.2rem; margin-right: 10px; }
	.complaint .logos .sec02 .item ul li{ padding-left: 18px; }
	.complaint .logos .sec02 .item ul li:not(:last-of-type){ margin-bottom: 10px; }
	.complaint .logos .sec02 .item ul li::before{ width: 9px; height: 9px; }
}

@media (max-width: 768px){
	.complaint section:not(:last-of-type){ margin-bottom: 100px; }
	.complaint .sec-box > div{ margin-top: 100px; }

	.complaint .sec-title::before{ height: 15px; }

	.complaint .legal .sec03 .dot-tit p span{ display: block; margin-left: 0; margin-top: 3px; }

	.complaint .logos .navyBox h4::before{ height: 15px; }
}

@media (max-width: 700px){
	.complaint .logos .p-box br{ display: none; }
}

@media (max-width: 640px){
	.complaint .sec-title::before{ height: 13px; }

	.complaint .dot-tit{ padding-left: 18px; }
	.complaint .dot-tit h5{ font-size: 2.3rem; }
	.complaint .dot-tit h5::before{ width: 6px; height: 6px; border-radius: 2px; left: -18px; }
	.complaint .dot-tit p{ font-size: 1.9rem; }

	.complaint .gray-list ul li{ font-size: 1.9rem; }
	.complaint .gray-list ul li span{ font-size: 1.7rem; }

	.complaint .response .sec01 .dot-tit p{ font-size: 1.7rem; }
	.complaint .response .sec01 .graph p{ font-size: 1.8rem; }

	.complaint .response .sec02 .figure p{ font-size: 2.0rem; }
	.complaint .response .sec02 .figure p strong{ font-size: 2.8rem; }

	.complaint .response .sec03 h5{ font-size: 2.3rem; }

	
	.complaint .legal .sec03 .dot-tit p span{ font-size: 1.7rem; }
	.complaint .legal .table-box *{ font-size: 1.5rem; }
	.complaint .legal .table-box colgroup col.th01{ width: calc((40% / 4) * 3); }
	.complaint .legal .table-box colgroup col.th02{ width: calc(40% / 4); }
	.complaint .legal .table-box tbody th, 
	.complaint .legal .table-box tbody td{ padding: 10px 5px; }
	.complaint .legal .table-box tbody tr:not(.pblock) > *{ padding-block: 10px; }
	/* .complaint .legal .table-box table{ min-width: 800px; } */

	.complaint .logos .diagram{ max-width: 350px; }
	.complaint .logos .diagram .flex{ flex-wrap: wrap; }
	.complaint .logos .diagram .item{ width: calc((100% + 30px) / 2); margin-bottom: -14.5%; }
	.complaint .logos .diagram .item:nth-of-type(even){ margin-right: 0; }
	.complaint .logos .diagram .item:last-of-type{ margin-bottom: 0; }
	.complaint .logos .diagram .item p{ font-size: 3.0rem; }
	.complaint .logos .diagram .item span{ font-size: 1.7rem; }
	.complaint .logos .p-box *{ font-size: 1.9rem; }

	.complaint .logos .sec02 .item dl *{ font-size: 1.7rem; }
}