@-webkit-keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@-webkit-keyframes marquee-r {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes marquee-r {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
.effect {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  color: rgba(var(--slate-400-rgb), 0.4);
  background: linear-gradient(to right, var(--slate-950), var(--slate-950)) no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 0%;
  transition: background-size cubic-bezier(.1,.5,.5,1) 0.5s;
}
.nodata-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	gap: 8px;
    cursor: auto;
    width: 100%;
    height: 300px;
}
.nodata-wrap i::before {
    left: calc(50% - 36px);
    content: "\e88f";
	line-height: 72px;
    color: var(--slate-300);
    font-family: "Material Icons Round";
    font-size: 72px;
    vertical-align: middle;
}
.nodata-wrap span {
    width: 100%;
	text-align: center;
    color: var(--slate-500);
}
.nodata-wrap .nodata-tip {
}
.nodata-wrap .nodata-tip ul {
	display: flex;
    flex-direction: column;
	gap: 12px;
	margin-top: 40px;
}
.nodata-wrap .nodata-tip li {
    position: relative;
	margin-left: 12px;
	word-break: keep-all;
	color: var(--slate-600);
    font-size: var(--font-small);
}
.nodata-wrap .nodata-tip li::after {
    content: '';
    position: absolute;
	top: 6px;
	left: -12px;
	width: 4px;
	height: 4px;
    border-radius: 99px;
    background-color: var(--primary);
}
.greeting {
	position:relative;
	width: 100%;
}
.greeting .title {
	width: 100%;
	padding-top: 120px;
	line-height: 1.4;
	border-radius: 8px;
    background-color: var(--slate-100);
} 
.greeting .title p {
	margin: 0 12px;
}
.greeting .title span {
	gap: 12px;
	width: 100%;
	word-break: keep-all;
	font-weight: 700;
	color: var(--slate-700);
	font-size: var(--font-40);
}
.greeting .title span:first-child {
	margin-right: 8px;
}
.greeting .title .fit-text {
	display: inline-block;
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	text-align: center;
	white-space: nowrap;
	word-break: keep-all;
	font-weight: 700;
	line-height: 1;
	color: var(--white);
}
.greeting .text {
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 100%;
	margin-top: 48px;
}
.greeting .text ul {
	display: flex;
	flex-direction: column;
	gap: 12px;
	word-break: keep-all;
	line-height: 1.4;
} 
.greeting .text .sign {
	display: flex;
    flex-direction: column;
	gap: 12px;
}
.greeting .text .sign span {
	font-size: var(--font-large);
	font-weight: 600;
}
.greeting .text .sign em {
	font-family: "Caveat", cursive;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-size: var(--font-40);
	color: var(--slate-800);
}
@media(min-width:768px) {
	.greeting .title {
		display: flex;
		flex-direction: column;
		gap: 16px;
		padding-top: 140px;
		border-radius: 16px;
	}
	.greeting .title p {
		display: flex;
		flex-direction: column;
		margin: 0 16px;
	}
	.greeting .text {
		margin-top: 56px;
	}
	.greeting .text ul {
		gap: 16px;
	}
	.greeting .text .sign {
		flex-direction: unset;
		align-items: center;
	}
}
@media(min-width:1024px) {
	.greeting .title {
		gap: 20px;
		padding-top: 160px;
		border-radius: 16px;
	}
	.greeting .title p {
		margin: 0 20px;
	}
	.greeting .text {
        position: relative;
		float: right;
		width: 70%;
		margin-top: 64px;
	}
	.greeting .text ul {
		gap: 20px;
	}
}
@media(min-width:1280px) {
	.greeting .title {
		gap: 24px;
		padding-top: 180px;
	}
	.greeting .title p {
		margin: 0 24px;
	}
	.greeting .text {
		gap: 40px;
		width: 65%;
		margin-top: 72px;
	}
	.greeting .text ul {
		gap: 24px;
	}
}
@media(min-width:1600px) {
	.greeting .title {
		gap: 28px;
		padding-top: 200px;
	}
	.greeting .title p {
		margin: 0 28px;
	}
	.greeting .text {
		gap: 48px;
		width: 70%;
		margin-top: 80px;
	}
	.greeting .text ul {
		gap: 28px;
	}
}
.history {
    width: 100%;
    position: relative;
    background-color: var(--white);
}
.history .history-wrap {
    position: relative;
	display: flex;
    flex-direction: column;
	gap : 60px;
    width: 100%;
    color: var(--slate-700);
    z-index: 10;
}
.history .history-wrap .sticky-wrap {
	display: none;
}
.history .history-wrap .sticky-wrap .sticky {
}
.history .history-wrap .sticky-wrap .sticky .year-list {
    position: absolute;
    top: -30px;
    width: 100%;
}

.history .history-wrap .sticky-wrap .sticky .year-list .year {
	display: flex;
	justify-content: space-between;
	width: 100%;
	color: var(--slate-700);
	font-weight: 700;
	font-size: 0;
	opacity: 0;
}
.history .history-wrap .sticky-wrap .sticky .year-list .year.is-active {
	opacity: 1;
	line-height: 1;
	font-weight: 700;
	font-size: 92px;
	color: var(--slate-200);
}
.history .history-wrap .month-list {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: calc(100% - 40px);
	margin-left: 40px;
    z-index: 2;
}
.history .history-wrap .month-list:before {
	content:"";
	position:absolute;
	bottom:-10px;
	left:-35px;
	width:10px;
	height:10px;
	border-radius:50%;
	background: var(--slate-200);
}
.history .history-wrap .month-list .month-item {
    position: relative;
    display: flex;
    flex-direction: column;
}
.history .history-wrap .month-list .month-item:before {
	content:"";
	position:absolute;
	top:0;
	left:-31px;
	right:0;
	bottom:0;
	width:1px;
	background:var(--slate-200);
}
.history .history-wrap .month-list .month-item:after {
	content:"";
	position:absolute;
	top:0;
	left:-38px;
	margin:0 auto;
	width:16px;
	height:16px;
	border:4px solid var(--primary);
	border-radius:50%;
	background: var(--white);
}
.history .history-wrap .month-list .month-item .year {
	line-height: 1;
	color: var(--slate-200);
	font-weight: 700;
	font-size: var(--font-h2);
}
.history .history-wrap .month-list .month-item .day-list {
    display: flex;
    flex-direction: column;
	gap: 24px;
}
.history .history-wrap .month-list .month-item .day-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
	gap: 24px;
	width: 100%;
}
.history .info {
    position: relative;
	display:flex;
    align-items: center;
	gap: 12px;
	margin-bottom:10px;
}
.history .info:before {
	content:"";
	position:absolute;
	top:calc(50% - 4px);
	left:-34px;
	margin:0 auto;
	width:8px;
	height:8px;
	border-radius:50%;
	background: var(--slate-200);
}
.history .info .date {
	line-height: 30px;
    color: var(--slate-700);
	font-size: var(--font-xx-large);
	font-weight:600;
	white-space: nowrap;
}
.history .icon {
	display: inline;
    width: 24px;
    height: 24px;
    text-align: center;
}
.history .icon i {
    cursor: pointer;
    color: var(--slate-400);
    transition: 0.2s ease-in-out;
}
.history .icon i:hover  {
    color: var(--primary);
}
.history .contents {
	display:flex;
    flex-direction: column;
	gap: 8px;
	width: 100%;
}
.history .contents li {
	display:flex;
    flex-direction: column;
	gap: 4px;
	width: 100%;
}
.history .contents .titletext {
	display:flex;
    flex-direction: column;
	gap: 4px;
	width: 100%;
}
.history .contents .title {
	word-break: keep-all;
	font-weight: 600;
    color: var(--slate-800);
	font-size: var(--font-large);
}
.history .contents .text {
	word-break: keep-all;
	font-size: var(--font-medium);
} 
.history .thumb-list {
	position:relative;
	width: 100%;
	margin: 40px 0;
}
.history .month-item:last-child .thumb-list {
	margin: 40px 0 0 0;
}
.history .thumb-list .f-carousel {
    --f-carousel-dots-top: 100%;
    --f-carousel-dots-bottom: auto;
    --f-carousel-dots-width: 24px;
    --f-carousel-dots-height: 36px;
    --f-carousel-dot-width: 12px;
    --f-carousel-dot-height: 12px;
    --f-carousel-dot-border-radius: 100%;
    --f-carousel-dot-bg: var(--slate-300);
    --f-carousel-dot-hover-bg: var(--slate-400);
    --f-carousel-dot-selected-bg: var(--primary);
    --f-carousel-dot-opacity: .4;
    --f-carousel-dot-hover-opacity: .8;
    --f-carousel-dot-selected-opacity: 1;
    --f-carousel-dot-transition: all .15s ease;
}
.history .thumb-item {
	display:flex;
    flex-direction: column;
	gap: 8px;
}
.history .thumb-item .thumb {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 60%;
    aspect-ratio: 4 / 2.4;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    border-radius: 8px;
}
.history .thumb-item .thumb-name {
	font-size:14px;
}
@media(min-width:768px) {
	.history .history-wrap {
		position: relative;
		display: flex;
		gap : 60px;
		width: 100%;
		color: var(--slate-700);
		z-index: 10;
	}
	.history .history-wrap .month-list .month-item {
		flex-direction: row;
		gap: 40px;
	}
	.history .history-wrap .month-list .month-item .day-list {
		gap: 28px;
		width: calc(100% - 260px);
	}
	.history .history-wrap .month-list .month-item:not(:last-child) .day-item:last-child {
		margin-bottom:60px;
	}
	.history .thumb-list {
		width: 220px;
		margin: 40px 0 0 0;
	}
	.history .month-item:not(:last-child) .thumb-list .thumb-item:last-child {
		margin-bottom: 60px;
	}
	.history .thumb-list .f-carousel {
		gap: 16px;
	}
	.history .thumb-list .f-carousel .f-carousel__viewport {
        display: flex;
		flex-direction: column;
        gap: 16px;
	}
}
@media(min-width:1024px) {
	.history .history-wrap .month-list .month-item .day-list {
		gap: 32px;
		width: calc(100% - 300px);
	}
	.history .history-wrap .month-list .month-item .day-list .day-item:first-child {
		margin-top: 40px;
	}
	.history .history-wrap .month-list .month-item:not(:last-child) .day-item:last-child {
		margin-bottom:80px;
	}
	.history .contents {
		gap: 12px;
	}
	.history .thumb-list {
		width: 260px;
	} 
	.history .month-item:not(:last-child) .thumb-list .thumb-item:last-child {
		margin-bottom: 80px;
	}
	.history .thumb-item {
		width: 220px;
		margin-right: 40px;
	}
	.history .thumb-item:nth-child(2n) {
		margin-right: 0;
		margin-left: 40px;
	}
}
@media(min-width:1280px) {
	.history .history-wrap {
		flex-direction: row;
	} 
	.history .history-wrap .sticky-wrap {
		display: block;
		position: relative;
		width: 220px;
		min-width: 220px;
	}
	.history .history-wrap .sticky-wrap .sticky {
		position: relative;
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	.history .history-wrap .month-list {
		width: calc(100% - 220px);
		margin-left: 0;
	}
	.history .history-wrap .month-list .month-item .year {
		display: none;
	} 
	.history .history-wrap .month-list .month-item .day-list {
		width: calc(100% - 340px);
		gap: 36px;
        margin-top: 30px;
	}
	.history .history-wrap .month-list .month-item:not(:last-child) .day-item:last-child {
		margin-bottom:100px;
	}
	.history .thumb-list {
		width: 300px;
	} 
	.history .month-item:not(:last-child) .thumb-list .thumb-item:last-child {
		margin-bottom: 100px;
	}
	.history .thumb-item {
		width: 260px;
	}
}
@media(min-width:1600px) {
	.history .history-wrap .month-list .month-item .day-list {
		gap: 42px;
		width: calc(100% - 380px);
	}
	.history .history-wrap .month-list .month-item:not(:last-child) .day-item:last-child {
		margin-bottom:120px;
	} 
	.history .contents {
		gap: 16px;
	}
	.history .thumb-list {
		width: 340px;
	} 
	.history .month-item:not(:last-child) .thumb-list .thumb-item:last-child {
		margin-bottom: 120px;
	} 
	.history .thumb-item {
		width: 300px;
	}
}
/* 조직도*/
.organigram {
	position:relative;
    display: flex;
    flex-direction: column;
    align-items: center;
	gap: 80px;
	width:100%;
} 
.organigram .executives {
	position:relative;
    display: flex;
    flex-direction: column;
    align-items: center;
	width: 100%;
}
.organigram .executives::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
	bottom: -40px;
    width: 1px;
    background: var(--slate-300);
    z-index: -1;
}
.organigram .executives::after {
    content: "";
    position: absolute;
    left: 0;
	bottom: -40px;
	width: 50%;
    height: 1px;
    background: var(--slate-300);
    z-index: -1;
}
.organigram .executives div:nth-child(1) {
	position: relative;
	width:100%;
	height:120px;
	line-height:120px;
	font-size:var(--font-x-large);
	color:var(--white);
	text-align: center;
	font-weight:700;
}
/*
.organigram .executives div:nth-child(1)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 50%;
    height: 1px;
    background: var(--slate-300);
    z-index: -1;
}
*/
.organigram .executives div:nth-child(1):after {
    content: '';
	position:absolute;
	left: 50%;
    top: 50%;
	width:120px;
	height:104px; /* 120 × 0.866 */
	background:var(--primary);
	clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    transform-origin: 50% 50%;
    transform: translate(-50%, -50%) rotate(30deg);
	z-index: -1;
}
.organigram .executives div:nth-child(2) {
	width:100px;
	height:100px;
	margin-left: calc(100% - 100px);
	line-height:100px;
	font-size:var(--font-large);
	color:var(--primary);
	text-align: center;
	font-weight:700;
    border-radius: 99px;
	border: 1px solid var(--primary-500);
	background:var(--primary-50);
}
.organigram .executives div:nth-child(2)::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50%;
    height: 1px;
    background: var(--slate-300);
    z-index: -1;
}
.organigram .executives div:nth-child(3) {
	position: relative;
	width:100px;
	height:100px;
	line-height:100px;
	font-size:var(--font-x-large);
	color:var(--white);
	text-align: center;
	font-weight:700;
    border-radius: 99px;
	background:var(--primary-500);
}
.organigram .chart {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	width: calc(100% - 12px);
	margin-left: 12px;
}
.organigram .chart::after {
	content: "";
	position: absolute;
	left: -12px;
	top: -40px;
	width: 1px;
	height: 90px;
	background: var(--slate-300);
}
.organigram .list {
	position: relative;
	display: flex;
    flex-direction: column;
	gap: 12px;
	width:100%;
	text-align:center;
}
.organigram .list h2 {
	position: relative;
	padding: 12px 12px;
	font-size:var(--font-large);
	color:var(--white);
    border-radius: 8px;
	background-color:var(--primary-500);
	font-weight:700;
}
.organigram .list::after {
	content: "";
	position: absolute;
	left: -12px;
	top: -40px;
	bottom: 0;
	width: 1px;
	background: var(--slate-300);
}
.organigram .list:last-child::after {
	display: none;
}
.organigram .list h2::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -12px;
	right: 100%;
	height: 1px;
	background: var(--slate-300);
	z-index: -1;
}
.organigram .list:last-child h2::after {
	content: "";
	position: absolute;
	left: -12px;
	top: -40px;
	bottom: 50%;
	width: 1px;
	background: var(--slate-300);
}
.organigram .list ul {
	display: flex;
    flex-direction: column;
	gap: 12px;
}
.organigram .list ul li {
	position: relative;
}
.organigram .list > ul > li::after {
    content: "";
    position: absolute;
    top: -12px;
    left: 50%;
    width: 1px;
	height: 12px;
    background: var(--slate-300);
}
.organigram .list ul li div {
	position: relative;
	width:100%;
	padding: 8px 12px;
    border-radius: 8px;
}
.organigram .list > ul > li > div {
	/*color: var(--slate-800);
	font-size:var(--font-medium);*/
	font-weight:600;
	border:1px solid var(--slate-300);
	background-color:var(--white);
}
/*
.organigram .list ul.level {
    margin-left: 24px;
}
.organigram .list > ul.level > li::after {
	content: "";
	position: absolute;
	top: -12px;
	left: -12px;
	bottom: 0;
	width: 1px;
	height: auto;
	background: var(--slate-300);
}
.organigram .list > ul.level > li:last-child::after {
  bottom: 50%;
}
.organigram .list > ul.level > li > div::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -12px;
	width: 12px;
	height: 1px;
	background: var(--slate-300);
}
.organigram .list ul ul {
	gap: 8px;
}
.organigram .list ul ul li {
	display: flex;
    flex-direction: column;
	gap: 8px;
}
.organigram .list ul ul li:first-child  {
	margin-top: 8px;
}
.organigram .list ul ul li div {
	color: var(--slate-800);
	font-size:var(--font-small);
	border:1px solid var(--slate-400);
	background-color:var(--white);
}
.organigram .list ul ul li div::after {
	content: "";
	position: absolute;
	top: -9px;
	left: 50%;
	width: 1px;
	height: 8px;
	background: var(--slate-300);
}
*/
.organigram-list {
	width:100%;
	margin-top: 100px;
}
.organigram-list .list-wrap {
    display: flex;
    flex-direction: column;
	gap: 40px;
	width:100%;
	margin-top: 20px;
}
.organigram-list .icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    text-align: center;
    vertical-align: middle;
}
.organigram-list .icon i {
    cursor: pointer;
    font-size: 24px;
    color: var(--slate-400);
    transition: 0.2s ease-in-out;
}
.organigram-list .icon i:hover  {
    color: var(--primary);
}
.organigram-list .list {
	position: relative;
	
    display: flex;
    flex-direction: column;
	gap: 12px;

	width:100%;
}
.organigram-list .list .subject {
	padding-bottom: 12px;
}
.organigram-list .list .subject span {
	font-weight:700;
    color: var(--primary);
	font-size:var(--font-large);
}
.organigram-list .list .subject2 span {
	font-weight:600;
    color: var(--slate-800);
	font-size:var(--font-large);
}
.organigram-list .list .subject3 span {
	font-weight:400;
    color: var(--slate-700);
	font-size:var(--font-middle);
}
.organigram-list .list .item {
    display: flex;
    justify-content: space-between;

    flex-direction: column;

	width:100%;
}
/*
.organigram-list .list2 {
	position: relative;
    display: flex;
    flex-direction: column;
	gap: 12px;
	width:100%;
}
.organigram-list .list2 .item2 {
    display: flex;
    flex-direction: column;
	width:100%;
}
.organigram-list .list2 .subject2 {
	padding-bottom: 8px;
}
.organigram-list .list2 .subject2 span {
	font-weight:600;
    color: var(--slate-800);
}
.organigram-list .list3 {
	position: relative;
    display: flex;
    flex-direction: column;
	gap: 12px;
	width:100%;
}
.organigram-list .list3 .item3 {
    display: flex;
    flex-direction: column;
	width:100%;
    height: 100%;
}
.organigram-list .list3 .subject3 {
	padding-bottom: 8px;
}
*/
.organigram-list .user-list {
    display: flex;
    flex-direction: column;
	width:100%;
	border-bottom:1px solid var(--slate-200);
}
.organigram-list .user-list .con {
    display: flex;
	flex-direction: column;
	gap: 8px;
	width:100%;
	padding: 8px 0;
	text-align: left;
    overflow: hidden;
	border-bottom:1px solid var(--slate-200);
}
	
.organigram-list .user-list .con > div {
	padding: 0 8px;
	word-wrap: break-word;
}
.organigram-list .user-list .con a {
	color: var(--slate-700);
	word-wrap: break-word;
}
.organigram-list .user-list .con a:hover {
	color: var(--primary);
}
.organigram-list .user-list .con:first-child {
	border-top:1px solid var(--slate-400);
}
.organigram-list .user-list .con:last-child {
	border-bottom:0;
}
@media (min-width:768px) {
	.organigram {
		gap: 80px;
	}
	/*
	.organigram .executives div:nth-child(1)::before {
		left: 50%;
		top: unset;
		bottom: -40px;
		width: 1px;
		height: 40px;
	}
	*/

	.organigram .executives::after {
		display: none;
	}
	.organigram .executives div:nth-child(2) {
		margin-left: 50%;
	}
	.organigram .executives div:nth-child(2)::before {
		width: 25%;
	}
	.organigram .chart {
		gap: 80px 40px;
		width: 100%;
		margin-left: 0
	}
	.organigram .chart::after {
		display: none;
	}
	.organigram .list {
		/*gap: 20px;*/
		width:100%;
		width: calc(33.33% - 27px);
	}
	.organigram .list::after,
	.organigram .list:first-child::after {
		left: 50%;
		top: -40px;
		bottom: 100%;
		height: 40px;
	}
	.organigram .list:last-child::after {
		display: block;
	}
	.organigram .list h2::before {
		top: -40px;
		left: -30px;
		right: -30px;
	}
	.organigram .list:first-child h2::before {
		left: 50%;
	}
	.organigram .list:last-child h2::before {
		right: 50%;
	}
	.organigram .list h2::after {
		display: none;
	}
	/*
	.organigram .list ul {
		gap: 16px;
	}
	.organigram .list > ul > li::after {
		top: -20px;
		height: 20px;
	}
	.organigram .list > ul.level > li::after {
		top: -20px;
	}
	*/
	.organigram-list .user-list .con {
	    flex-direction: row;
		justify-content: space-between;
		align-items: center;
		text-align: center;
		gap: 0;
		padding: 12px 0;
	}
	.organigram-list .user-list .con a {
		color: var(--slate-700);
	}
	.organigram-list .user-list .con a:hover {
		color: var(--primary);
	}
	.organigram-list .list3 .item3 .subject3 + .user-list .con {
		display: flex;
		align-items: center;
		width:100%;
		margin-left: 0;
	}
	
	.organigram-list .user-list .con > div {
		padding: 0 6px;
	}
	.organigram-list .user-list .con .name {
		min-width: calc(18% - 12px);
	}
	.organigram-list .user-list .con .rank {
		min-width: calc(15% - 12px);
	}
	.organigram-list .user-list .con .tel {
		min-width: calc(25% - 12px);
	}
	.organigram-list .user-list .con .mail {
		min-width: calc(42% - 12px);
	}
	.organigram .chart.addchart {
		width: calc(100% - 12px);
		margin-left: 12px;
	}
	.organigram .chart.addchart::after {
		display: block;
		top: -40px;
	}
	.organigram .chart.addchart .list:first-child::before {
		content: "";
		position: absolute;
		left: -12px;
		top: 0;
		bottom: -40px;
		width: 1px;
		background: var(--slate-300);
	}
	.organigram .chart.addchart .list:first-child h2::before {
		left: -12px;
	}
	.organigram .chart.addchart .list:nth-child(4n) h2::before{
		left: -12px;
	}
	.organigram .chart.addchart .list:nth-child(3n) h2::before {
		right: 50%;
	}
	.organigram .chart.center {
		justify-content: center;
	}
}
@media (min-width:1024px) {
	.organigram {
		gap: 80px;
	}
	.organigram .executives div:nth-child(1) {
		height:140px;
		line-height:140px;
	}
	.organigram .executives div:nth-child(1):after {
		width:140px;
		height:121px; /* 140 × 0.866 */
	}
	.organigram .executives div:nth-child(2) {
	    position: relative;
		width:120px;
		height:120px;
		margin-left: 360px;
		line-height:120px;
	}
	.organigram .executives div:nth-child(2)::before {
		left: -100%;
		width: 120px;
	}
	.organigram .executives div:nth-child(3) {
		width:120px;
		height:120px;
		line-height:120px;
	}
	.organigram .executives div:nth-child(3)::before {
		width: 120px;
	}
	.organigram .chart {
		justify-content: center;
		gap: 20px;
		width: 100%;
		margin-left: 0;
	}
	.organigram .list {
		width:calc(16.66% - 17px);
	}
	.organigram .list.one {
		width:240px;
	}
	.organigram .list.two {
		width:240px;
	}
	.organigram .list.three {
		width:240px;
	}
	.organigram .list.four {
		width:220px;
	}
	.organigram .list.five {
		width:calc(20% - 16px);
	}
	.organigram .chart.addchart {
		width: 100%;
		margin-left: 0;
	}
	.organigram .chart.addchart::after,
	.organigram .chart.addchart .list:first-child::before {
		display: none;
	}
	.organigram .chart.addchart .list:first-child h2::before {
		left: 50%;
	}
	.organigram .chart.addchart .list:nth-child(3n) h2::before {
        right: -30px;
	}
	.organigram .chart.addchart .list:nth-child(n+4) h2::before {
		left: -30px;
		right: -30px;
	}
	.organigram .chart.addchart .list:last-child h2::before {
		right: 50%;
	}
	.organigram-list .list {
		gap: 0;
	}
	.organigram-list .list .item {
		flex-direction: row;
		justify-content: flex-start;
	}
	.organigram-list .list .item .subject {
		min-width:180px;
		padding: 12px 12px;
		border-bottom:1px solid var(--slate-200);
	}
	.organigram-list .list .item .subject2 {
        border-left: 1px solid var(--slate-200);
	}
	.organigram-list .list .item .subject3 {
		border-left:1px solid var(--slate-200);
	}	
	.organigram-list .user-list .con {
		border-left: 1px solid var(--slate-200);
	}
	.organigram-list .user-list .con:first-child {
		border-top:none;
	}
}
@media (min-width:1280px) {
	.organigram .chart {
		justify-content: center;
		gap: 40px;
	}
	.organigram .list {
		width:calc(16.66% - 34px);
	}
	.organigram .list.one {
		width:320px;
	}
	.organigram .list.two {
		width:300px;
	}
	.organigram .list.three {
		width:280px;
	}
	.organigram .list.four {
		width:260px;
	}
	.organigram .list.five {
		width:calc(20% - 32px);
	}
	.organigram .list h2 {
		padding: 16px 16px;
	}
	.organigram .list ul li div {
		padding: 12px 16px;
	}
}
@media (min-width:1600px) {
	.organigram .executives div:nth-child(1) {
		height:140px;
		line-height:140px;
	}
	.organigram .executives div:nth-child(1)::before {
		bottom: -40px;
		height: 40px;
	}
	.organigram .executives div:nth-child(1):after {
		width:140px;
		height:121px; /* 140 × 0.866 */
	}
}



.partner {
	width:100%;
	margin-top: 32px;
	line-height:1.1;
}
.partner ul {
	position:relative;
	display:flex;
    flex-direction: column;
	gap: 24px;
	width:100%;
}
.partner li {
	position:relative;
	display:flex;
    flex-direction: column;
	gap: 4px;
	width:100%;
}
.partner .header {
	font-size: var(--font-60);
	font-weight: 700;
	line-height:1;
	color:var(--slate-200);
	transition: all 0.2s ease-in-out;
}
.partner .list {
	position:relative;
	display:flex;
	flex-direction: column;
    align-items: flex-start;
	gap: 12px;
	padding: 12px;
	height: 100%;
    border-radius: 8px;
    background-color: var(--slate-50);
	transition: all 0.2s ease-in-out;
}
.partner .list .thumb {
	width: 178px;
	padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--slate-200);
    background-color: var(--white);
	transition: all 0.2s ease-in-out;
}
.partner .list .thumb img {
	margin: 0 auto;
}
.partner .subject {
	width: 100%;
    font-weight: 600;
	color:var(--slate-700);
	font-size: var(--font-large);
}
.partner .list .article {
	width: 100%;
}
.partner .list .item {
	display: flex;
	flex-direction: row;
    align-items: center;
	gap: 8px;
}
.partner .list .check {
}
.partner .list .icon {
	width: 24px;
	height: 24px;
	text-align: center;
}
.partner .list .icon a {
    display: inline-block;
    height: 24px;
}
.partner .list i {
	cursor:pointer;
    color: var(--slate-400);
	transition: all 0.2s ease-in-out;
}
.partner .list i:hover  {
    color: var(--primary);
}
.partner li:hover .header {
	color:var(--primary);
}
.partner li:hover .list {
    background-color: var(--slate-100);
}
.partner li:hover .list .thumb {
    border: 1px solid var(--slate-300);
}
@media (min-width:768px) {
	.partner .list {
		flex-direction: row;
		align-items: center;
		gap: 12px;
		padding: 16px;
	}
	.partner .subject {
		width: 50%;
	}
	.partner .list .article {
		width: calc(50% - 178px);
	}
	.partner .list .item {
		gap: 8px;
	}
}
@media (min-width:1024px) {
	.partner .list {
		gap: 16px;
		padding: 20px;
	}
	.partner .list .thumb {
		width: 186px;
		padding: 12px;
	}
	.partner .list .item {
		gap: 12px;
	}
	.partner .list .article {
		width: calc(50% - 186px);
	}
}
@media (min-width:1280px) {
	.partner .list {
		gap: 20px;
		padding: 24px;
	}
}
@media (min-width:1600px) {
	.partner .list {
		gap: 24px;
		padding: 24px;
	}
}
.partner-marquee {
	position: relative;
	overflow: hidden;
	width: 100%;
	background-color: var(--white);
	z-index: 1;
}
.partner-marquee .track {
	display: flex;
	gap: clamp(60px, calc(60px + 100 * ((100vw - 360px) / 1560)), 160px);
	height: 100%;
	overflow: hidden;
	white-space: nowrap;
}
.partner-marquee .track .text {
	display: inline-flex;
	align-items: center;
	font-size: clamp(60px, calc(60px + 100 * ((100vw - 360px) / 1560)), 160px);
	font-weight: 700;
	color: var(--slate-100);
	-webkit-animation: marquee 48000ms linear infinite;
			animation: marquee 48000ms linear infinite;
	-webkit-animation-duration: 24000ms;
			animation-duration: 24000ms;
	will-change: transform;
}
.partner-marquee .track .text.-r {
	animation-name: marquee-r;
}  
.cert {
	display: flex;
    flex-direction: column;
	gap: 16px;
	width:100%;
	margin-top: 32px;
}
.cert .board-list-body {
	position:relative;
	width:100%;
}
.cert .board-list-body .header span {
	font-size: var(--font-60);
	font-weight: 700;
	line-height:1;
	color:var(--slate-200);
	transition: all 0.2s ease-in-out;
}
.cert .board-list-body .body {
	display:flex;
    flex-direction: column;
	gap: 8px;
}
.cert .board-list-body .list {
	position:relative;
	display:flex;
	flex-direction: column;
    align-items: flex-start;
	gap: 12px;
	padding: 12px;
	height: 100%;
    border-radius: 8px;
    background-color: var(--slate-50);
}
.cert .board-list-body .list:hover {
    background-color: var(--slate-100);
}
.cert .board-list-body .date {
	display: flex;
    flex-direction: column;
	min-width: 40px;    
	white-space: nowrap;
    font-weight: 600;
	color:var(--slate-500);
}
.cert .board-list-body .cate {
	white-space: nowrap;
	font-size: var(--font-medium);
	color:var(--primary);
}
.cert .board-list-body .subject {
	width: 100%;
    font-weight: 600;
	color:var(--slate-700);
	font-size: var(--font-large);
}
.cert .board-list-body .number {
	width: 100%;
	color:var(--slate-600);
}
.cert .board-list-body .company {
	width: 100%;
	color:var(--slate-600);
}
.cert .board-list-body .item {
	display: flex;
	flex-direction: row;
    align-items: center;
	gap: 12px;
}
.cert .board-list-body .check {
}
.cert .board-list-body .icon {
	width: 24px;
	height: 24px;
	text-align: center;
}
.cert .board-list-body .icon a {
    display: inline-block;
    height: 24px;
}
.cert .board-list-body i {
	cursor:pointer;
    color: var(--slate-400);
	transition: all 0.2s ease-in-out;
}
.cert .board-list-body i:hover  {
    color: var(--primary);
}
.cert .board-list-body:hover .header span  {
    color: var(--primary);
}
@media(min-width:768px) {
	.cert .board-list-body .list {
		flex-direction: row;
        align-items: stretch;
		padding: 16px;
	}
	.cert .board-list-body .date {
		text-align: center;
	}
	.cert .board-list-body .cate {
		width: 100px;
		text-align: center;
	}
	.cert .board-list-body .subject {
		width: 50%;
	}
	.cert .board-list-body .number {
		width: 25%;
	}
	.cert .board-list-body .company {
		width: 25%;
	}
	.cert .board-list-body .item {
		gap: 8px;
	}
}
@media(min-width:1024px) {
	.cert .board-list-body .list {
		padding: 20px;
	}
}
@media(min-width:1280px) {
	.cert .board-list-body .list {
		padding: 24px;
	}
}
@media(min-width:1600px) { 
	.cert {
		gap: 32px;
	}
	.cert .board-list-body .list {
		padding: 24px;
	}
}
.location {
	position:relative;
}
.location .location-text {
	width: 100%;
} 
.location .location-text .text {
	margin-bottom: 40px;
}
.location .location-text .text h2 {
	margin-bottom: 12px;
    font-size: var(--font-40);
	font-weight: 400;
    color: var(--slate-900);
}
.location .location-text .text span {
    font-size: var(--font-xx-large);
    color: var(--slate-500);
}
.location .location-text .info > ul {
	display: flex;
    flex-direction: column;
	gap: 20px;
}
.location .location-text .info > ul > li {
	display: flex;
    flex-direction: column;
	gap: 8px;
	width: 100%;
}
.location .location-text .info > ul > li h2 {
    font-size: var(--font-36);
	font-weight: 700;
    color: var(--slate-900);
}
.location .location-text .info > ul > li > span {
	display: block;
    font-size: var(--font-xx-large);
	font-weight: 400;
    color: var(--slate-700);
}
.location .location-text .info > ul > li > span:last-child {
}
.location .location-text .info > ul > li > span a {
    color: var(--slate-700);
}
.location .location-text .info > ul > li >  ul {
	display: flex;
    flex-direction: column;
	gap: 12px;
}
.location .location-text .info > ul > li > ul > li  {
    color: var(--slate-700);
}
.location li i {
	display:inline-block;
	font-style:normal;
	text-align:center;
	font-size:14px;
	color: var(--white);
	line-height:22px;
    border-radius: 4px;
}
.location .icon-subway {
	width:16px;
	height:16px;
	line-height:16px;
	border-radius:50%;
}  
.location .icon-subway1 {
	background-color:#0052A4;
}
.location .icon-subway2 {
	background-color:#009D3E;
}
.location .icon-subway3 {
	background-color:#EF7C1C;
}
.location .icon-subway4 {
	background-color:#00A5DE;
}
.location .icon-subway5 {
	background-color:#996CAC;
}
.location .icon-subway6 {
	background-color:#CD7C2F;
}
.location .icon-subway7 {
	background-color:#747F00;
}
.location .icon-subway8 {
	background-color:#EA545D;
}
.location .icon-subway9 {
	background-color:#BDB092;
}
.location .icon-bus {
	width:30px;
	background-color:#4ea031;
}
.location .icon-bus-local {
	background-color:#4ea031;
}
.location .icon-bus-town {
	background-color:#4ea031;
}
.location .icon-bus-air {
	background-color:#70b0e0;
}
.location .icon-bus-trunk {
	background-color:#395cb4;
}
.location .map-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 40px;
}
.location .map-list a {
    display: flex;
    align-items: center;
	gap: 8px;
	padding: 8px 16px;
    border-radius: 99px;
	background-color: var(--slate-100);
}
.location .map-list a span {
	position:relative;
    line-height: 24px;
	font-size: var(--font-small);
	color: var(--slate-800);
}
.location .map-list a i {
    display: inline-block;
	height: 24px;
}
.location .map-list a i::after {
    display: inline-block;
    content: "\f00f";
    font-family: "Material Icons";
    line-height: 24px;
    color: var(--slate-400);
    font-size: 24px;
    text-rendering: auto;
}
.location .map-list a:hover {
	background-color: var(--slate-200);
} 
.location .map-list a:hover span {
	color: var(--slate-900);
}
.location .map-list a:nth-child(1):hover i::after {
    color: #0064ff;
} 
.location .map-list a:nth-child(2):hover i::after {
    color: #00e56d;
} 
.location .map-list a:nth-child(3):hover i::after {
    color: #ffe100;
} 
.location .map-list a:nth-child(4):hover i::after {
    color: #1A73E8;
} 
.location .map-wrap {
    position: relative;
	width: 100%;
    margin-top: 50px;
	overflow: hidden;
    border-radius: 8px;
}
.location #map {
	width: 100%;
	height: 400px;
}
.location #map iframe {
    position: absolute;
}
.location #map .customoverlay {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.location #map .customoverlay i {
	color: var(--primary);
	font-size: 42px;
	animation: map 2s infinite;
}
.location #map .customoverlay div {
	padding: 8px 12px;
	color: var(--slate-700);
	font-weight: 500;
	line-height: 1.1;
    font-size: var(--font-small);
    border-radius: 8px;
	border: 1px solid var(--slate-300);
	background: var(--white);
	box-shadow: 3px 3px 3px 0 rgba(var(--slate-300-rgb), .6);
}
.location .custom_zoomcontrol {
    position: absolute;
    top: 12px;
	left: 12px;
	display: flex;
	width:72px;
	height:36px;
	overflow:hidden;
	border-radius:4px;
	border:1px solid var(--slate-300);
	background-color: var(--white);
    z-index: 1;
}
.location .custom_zoomcontrol span {
	display:block;
	width:36px;
	height:36px;
	text-align:center;
	cursor:pointer;
	display:flex;
	justify-content:center;
	align-items:center;
} 
.location .custom_zoomcontrol span i {
	color: var(--slate-400);
	transition:all .3s ease-in-out;
} 
.location .custom_zoomcontrol span:hover i {
	color: var(--primary);
}
.location .custom_zoomcontrol span:first-child {
	border-right: 1px solid var(--slate-300);
}
@-webkit-keyframes map {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}
@keyframes map {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}
@media(min-width:768px) {
	.location .location-text .text {
		margin-bottom: 44px;
	}
	.location .location-text .info > ul {	
		flex-wrap: wrap;
		flex-direction: unset;
		gap: 40px 28px;
	}
	.location .location-text .info > ul > li.col {
		width: calc(50% - 14px);
	}
	.location #map {
		height:350px;
	}
}
@media (min-width:1024px) {
	.location::before, .location::after {
	  content: ''
	}
	.location::after {
		clear: both;
		display: block
	}
	.location .location-text {
		float: left;
		width: 40%;
		padding-top: 0;
	} 
	.location .location-text .text {
		margin-bottom: 48px;
	}
	.location .location-text .info > ul {	
		flex-wrap: unset;
		flex-direction: column;
		gap: 40px;
	}
	.location .location-text .info > ul > li.col {
		width: 100%;
	}
	.location .map-wrap {
		position:sticky;
		position: -webkit-sticky;
		top: calc(var(--fixedheadHeight) + var(--asideHeight) + 20px);
		width: 55%;
		float: right;
		margin-top: 0;
		border-radius: 12px;
	}
	.location #map {
		height: calc(100vh - var(--fixedheadHeight) - var(--asideHeight) - 40px);
		height: calc(100dvh - var(--fixedheadHeight) - var(--asideHeight) - 40px);
		height: calc((var(--vh) * 100) - var(--fixedheadHeight) - var(--asideHeight) - 40px);
	}	
	.location .custom_zoomcontrol {
		top: 16px;
		left: 16px;
	}
}
@media (min-width:1280px) {
	.location .location-text .text {
		margin-bottom: 52px;
	}
	.location .custom_zoomcontrol {
		top: 20px;
		left: 20px;
	}
}
@media (min-width:1600px) {
	.location .custom_zoomcontrol {
		top: 24px;
		left: 24px;
	}
}
/*
.business {
    display: flex;
    flex-direction: column;
    align-items: center;
	--line: color-mix(in lch, canvasText 15%, transparent);
	--base: 0.4;
	--accent: hsl(8 100% 55%);
	--header-height: 100vh;
	--overlay: color-mix(in lch, canvas 70%, transparent);
	color-scheme: dark only;
}
.business [data-split] {
	font-size: 60px;
	font-weight: 600;
}
.business .title {
	position: sticky;
	position: -webkit-sticky;
	top: calc(var(--fixedheadHeight) + var(--asideHeight) + 20px);
	min-height: calc(100vh - var(--fixedheadHeight) - var(--asideHeight) - 40px);
	width: 60%;
	display: grid;
	place-items: center;
	text-align: center;
	margin: 0 auto;
	word-break: keep-all;
	line-height: 1.4;
}
.business .title span {
	font-weight: 700;
	opacity: calc(var(--base) + (var(--active)));
	transition: opacity 0.5s;
}
.business .reader {
	--thick: 0px;
	outline: var(--thick) dashed var(--accent);
	outline-offset: calc(var(--thick) * -1);
	height: calc(
		((var(--ppc) * var(--content-length) + (var(--pad) * var(--buffer))) * 1px) + 100vh
	);
}
@supports (animation-timeline: scroll()) {
	@property --active {
		inherits: true;
		initial-value: 0;
		syntax: '<number>';
	}
	.business .reader {
		view-timeline: --reader block;
	}
	.business .title span {
		-webkit-animation: activate both steps(1);
		        animation: activate both steps(1);
		animation-timeline: --reader;
		animation-range: contain calc(((var(--start, 0) * var(--ppc)) * 1px))
			contain calc(((var(--end, 0) * var(--ppc)) * 1px));
	}
	@-webkit-keyframes activate {
		to {
			--active: 1;
		}
	}
	@keyframes activate {
		to {
			--active: 1;
		}
	}
}
*/



.business-wrap {
	position:relative;
    display: flex;
    flex-direction: column;
    align-items: center;
	width: 100%;
}
.business-wrap .graphic-wrap {
    padding-top: 0px;
}
.business-wrap .graphic {
	position:relative;
	width: 100%;
	max-width: var(--content-max-width);
}
.business-wrap .graphic .text {
	width: 100%;
}
.business-wrap .graphic .text h3 {
	width: 100%;
	word-break: keep-all;
	font-size: var(--font-h3);
	color:var(--primary);
	font-weight:700;
}
.business-wrap .graphic .text span {
	display: inline-block;
	width: 100%;
	margin-top: 20px;
	word-break: keep-all;
	font-size: var(--font-xx-large);
	color:var(--slate-700);
	font-weight:600;
}
.business-wrap .graphic .text div {
	display: inline-block;
	width: 100%;
	margin-top: 20px;
	word-break: keep-all;
	font-size: var(--font-large);
	color:var(--slate-600);
}
.business-wrap .graphic .thumb {
	width: 100%;
	overflow: hidden;
	margin-top: 48px;
	border: 1px solid var(--slate-200);
	border-radius: 8px;
	transition: all 0.2s ease-in-out;
} 
.business-wrap .graphic .thumb a {
}
.business-wrap .graphic .thumb:hover {
	border-color: var(--slate-400);
}
.business-wrap img {
	width: 100%;
	height: auto;
}
.business-wrap .contents {
	width: 100%;
	background-color:var(--slate-50);
	transition: opacity 0.2s ease-in-out;
}
.business-wrap .contents.active {
	width: 100%;
	background-color:var(--primary-50);
}
.business-wrap .tab-nav {
    width: 100%;
    padding: 20px 0 40px 0;
	transition: all 0.2s ease-in-out;
}
.business-wrap .tab-nav ul {
	position:relative;
	display: flex;
    flex-direction: column;
    align-items: flex-start;
	gap: 12px;
}
.business-wrap .tab-nav li {
	display:inline-block;
}
.business-wrap .tab-nav li a {
	position:relative;
	display: flex;
    flex-direction: row;
    align-items: center;
	gap: 8px;
	padding:0;
	transition: all 0.4s ease-in-out;
}
.business-wrap .tab-nav li a em {
	display: inline-block;
	padding:4px 12px;
	color:var(--white);	
	font-size:var(--font-small);	
	border-radius:99px;
	background-color:var(--slate-400);
} 
.business-wrap .tab-nav li a span {
	display:block;
	color:var(--slate-600);
	font-size: var(--font-large);
}  
.business-wrap .tab-nav a:focus,.business-wrap .tab-nav a:hover {
	text-decoration:none;
}

.business-wrap .tab-nav li:hover a em {
	background-color:var(--primary-500);
} 
.business-wrap .tab-nav li:hover a span {
	color:var(--slate-900);
} 
.business-wrap .tab-nav li.active a em {
	color:var(--white);	
	background-color:var(--primary);
} 
.business-wrap .tab-nav li.active a span {
	color:var(--slate-800);
	font-weight:700;
}  
.business-wrap .business-list {
	display:none;
}
.business-wrap .business-list.active {
	display:block;
}
.business-wrap .business-list .contents-wrap {
	position:relative;
    display: flex;
    flex-direction: column;
	gap: 40px;
	width: 100%;
}
.business-wrap .business-list .sticky-wrap {
}
.business-wrap .business-list .title-wrap {
}
.business-wrap .business-list .text-wrap {
}  
.business-wrap .business-list .text-wrap em {
	word-break: keep-all;
    font-size: var(--small);
	font-weight: 700;
    color: var(--primary);
}
.business-wrap .business-list .text-wrap h3 {
	margin-top: 8px;
	word-break: keep-all;
    font-size: var(--font-36);
	font-weight: 700;
    color: var(--slate-800);
}
.business-wrap .business-list .text-wrap div {
	margin-top: 32px;
	word-break: keep-all;
    font-size: var(--font-xx-large);
	font-weight: 600;
    color: var(--slate-700);
}
.business-wrap .business-list .text-wrap span {
	display: inline-block;
	margin-top: 16px;
	word-break: keep-all;
    font-size: var(--font-large);
    color: var(--slate-600);
}
.business-wrap .business-list .cate-list {
	position:relative;
	display: flex;
    flex-wrap: wrap;
	gap: 8px 12px;
    width: 100%;
	margin-top: 20px;
    padding: 8px 0;
}
.business-wrap .business-list .cate-list a {
	display:block;
	position:relative;
	padding:8px 16px;
	line-height:var(--font-medium);
	font-size: var(--font-small);
	color:var(--slate-700);
	border:1px solid var(--slate-300);
	border-radius:99px;
	background-color:var(--white);
	transition: all 0.2s ease-in-out;
}
.business-wrap .business-list .cate-list a:hover {
	text-decoration:none;
	color:var(--primary);
	border-color: var(--primary);
}
.business-wrap .business-list .cate-list a.active {
	color:var(--white);
	border-color: var(--primary-500);
	background-color:var(--primary-500);
} 
.business-wrap .business-list .thumb-wrap {
	display: none;
    width: 100%;
}
.business-wrap .business-list .thumb-wrap .thumb-list .thumb-box {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;   
	overflow: hidden;
	background-color: var(--primary-50);
	transform: translateY(-50%);
}
.business-wrap .business-list .thumb-wrap .thumb-list .thumb-box .thumb {	
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: 12px;

	/* 구형 브라우저 */
	height: 0;
	padding-top: 75%;

	/* 신형 브라우저 */
	aspect-ratio: 4 / 3;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
    background-color: var(--primary-50);
}
.business-wrap .business-list .thumb-wrap .thumb-list .thumb-box:first-child {
	opacity: 100;
}
.business-wrap .business-list .thumb-wrap .thumb-list .thumb-box .title {
	position: absolute;
	bottom: 0;
	left: 0;
	width: calc(100% - 40px);
	padding: 12px 20px;
	word-break: keep-all;
	font-size: var(--font-x-large);
	font-weight: 700;
	color: var(--white);
}
.business-wrap .business-list .text-list {
    position: relative;
	display: flex;
	flex-direction: column;
	gap: 40px;
    width: 100%;
}
.business-wrap .business-list .text-list .text-box {
	display: flex;
	flex-direction: column;
	gap: 20px;
    width: 100%;
}
.business-wrap .business-list .text-list .text-box .text {
	display: flex;
	flex-direction: column;
	gap: 12px;
    width: 100%;
}
.business-wrap .business-list .text-list .thumb {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 75%;
    aspect-ratio: 4 / 3;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    border-radius: 8px;
}
.business-wrap .business-list .text-list .thumb .title {
	position: absolute;
	bottom: 0;
	left: 0;
	width: calc(100% - 24px);
	padding: 12px 12px;
	word-break: keep-all;
	font-size: var(--font-x-large);
	font-weight: 700;
	color: var(--white);
} 
.business-wrap .business-list .text-list .title {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.business-wrap .business-list .text-list .title h3 {
	display: inline-block;
	word-break: keep-all;
    font-size: var(--font-xx-large);
	font-weight: 700;
    color: var(--slate-800);
}
.business-wrap .business-list .text-list .title h4 {
	display: inline-block;
	word-break: keep-all;
	font-weight: 600;
    color: var(--slate-700);
}
.business-wrap .business-list .text-list p {
	word-break: keep-all;
    color: var(--slate-900);
}
.business-wrap .business-list .text-list ul {
    display: flex;
    flex-direction: column;
	gap: 4px;
}
.business-wrap .business-list .text-list li {
    position: relative;
    margin-left: 12px;
	word-break: keep-all;
    color: var(--slate-700);
    line-height: 1.2;
}
.business-wrap .business-list .text-list li:first-child {
    margin-top: 8px;
}
.business-wrap .business-list .text-list li::after {
    content: '';
    position: absolute;
	top: 6px;
	left: -12px;
	width: 4px;
	height: 4px;
    border-radius: 99px;
    background-color: var(--primary);
}
.business-wrap .service-wrap {
	position:relative;
    display: flex;
    flex-direction: column;
	gap: 16px;
    width: 100%;
    width: calc(100% - 40px);
    max-width: var(--content-max-width);
    margin: 0 20px;
    padding: 40px 0;
}
.business-wrap .service-wrap .box {
    display: flex;
    flex-direction: column;
    align-items: center;
	gap: 16px;
	width: 100%;
	padding: 16px;
	overflow: hidden;
	border-radius:8px;
	background-color:var(--green-50);
}
.business-wrap .service-wrap .box em {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	width: 60px;
	min-width: 60px;
	height: 60px;
	border-radius:99px;
	background-color:var(--white);
}
.business-wrap .service-wrap .box em i {
    font-size: 24px;
    color: var(--green-500);
}
.business-wrap .service-wrap .box:nth-child(2) {
	background-color:var(--blue-50);
}
.business-wrap .service-wrap .box:nth-child(2) em i {
    color: var(--blue-500);
}
.business-wrap .service-wrap .box:nth-child(3) {
	background-color:var(--violet-50);
}
.business-wrap .service-wrap .box:nth-child(3) em i {
    color: var(--violet-500);
}
.business-wrap .service-wrap .box .text-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
	gap: 12px;
}
.business-wrap .service-wrap .box .title {
	word-break: keep-all;
	font-size: var(--font-large);
	font-weight: 700;
	color: var(--slate-800);
}
.business-wrap .service-wrap .box .text {
	word-break: keep-all;
	font-size: var(--font-medium);
	color: var(--slate-700);
	text-align: center;
}
@media (min-width:768px) {
	.business-wrap .graphic .text span {
		margin-top: 38px;
	}
	.business-wrap .graphic .text div {
		margin-top: 20px;
	}
	.business-wrap .tab-nav {
		padding: 20px 0 48px 0;
	}
	.business-wrap .tab-nav li a {
		padding:0;
	}
	.business-wrap .business-list .contents-wrap {
		gap: 40px;
	}
	.business-wrap .business-list .sticky-wrap {
		width: 100%;
	}
	.business-wrap .business-list .title-wrap {
		width: 100%;
	}
	.business-wrap .business-list .thumb-wrap .thumb-list {
	}
	.business-wrap .business-list .text-list {
		gap: 40px;
		width: 100%;
	}
	.business-wrap .business-list .text-list .text-box {
		width: 100%;
	}
	.business-wrap .service-wrap {
		flex-direction: row;
		justify-content: space-between;
		gap: 16px;
		padding: 48px 0;
	}
	.business-wrap .service-wrap .box {
		padding: 28px 20px;
	}
	.business-wrap .service-wrap .box em i {
		font-size: 30px;
	}
}
@media (min-width:1024px) {
	.business-wrap .graphic {
	}
	.business-wrap .graphic::before, .business-wrap .graphic::after {
	  content: ''
	}
	.business-wrap .graphic::after {
		clear: both;
		display: block;
	}
	.business-wrap .graphic .text {
		position:sticky;
		position: -webkit-sticky;
		top: calc(var(--fixedheadHeight) + 40px);
		left:0;
		float: left;
		width: 38%;
		margin-top: 40px;
		word-break: keep-all;
		line-height: 1.4;
	}
	.business-wrap .graphic .text span {
		margin-top: 42px;
	}
	.business-wrap .graphic .thumb {
		width: 58%;
		float: right;
		margin-top: 0;
	}
	.business-wrap .content-wrap {
        padding: 80px 0 0 0;
	}
	.business-wrap .tab-nav {
		padding: 16px 0 36px 0;
		position: sticky;
		top: var(--fixedheadHeight);
		right: 0;
		left: 0;
		z-index: 1;
	}
	.business-wrap .contents.active .tab-nav {
		background: linear-gradient(to top, rgba(var(--primary-50-rgb), 0) 0%, rgba(var(--primary-50-rgb), 1) 60%);
	}
	.business-wrap .tab-nav ul {	        
		flex-direction: unset;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: center;
		gap: 0;
	}
	.business-wrap .tab-nav li {
		width: 16.66%;
		text-align: center;
	}
	.business-wrap .tab-nav li a {
		flex-direction: column;
	}
	.business-wrap .business-list .contents-wrap {
        flex-direction: row;
        align-items: flex-start;
		word-break: keep-all;
		gap: 40px;
	}
	.business-wrap .business-list .sticky-wrap {
		position:sticky;
		position: -webkit-sticky;
		left: 0;
        display: flex;
        flex-direction: row;
		gap: 40px;
		float: left;
		width: 66%;
		min-height: 380px;
	}
	.business-wrap .business-list .title-wrap {
		width: 50%;
	}
	.business-wrap .business-list .cate-list {
		margin-top: 28px;
        margin-bottom: 100px;
	}
	.business-wrap .business-list .thumb-wrap {
        position: relative;
		display: block;
		width: 50%;
		max-width: 600px;
	}  
	.business-wrap .business-list .thumb-wrap .thumb-list {
		position: relative;
        width: 100%;
	}
	.business-wrap .business-list .text-list {
		gap: 0;
		width: 34%;
		margin: 20vh 0;
		float: right;
	}
	.business-wrap .business-list .text-list .title {
		display: block;
	}
	.business-wrap .business-list .text-list .title h4 {
		margin-left: 4px;
	}
	.business-wrap .business-list .text-list .text-box {
		justify-content: center;
		width: 100%;
		margin-bottom: 60px;
	}
	.business-wrap .business-list .text-list .thumb {
		display: none;
	}	
	.business-wrap .business-list .text-list li::after {
		top: 8px;
	}
	.business-wrap .service-wrap {
		flex-direction: row;
		justify-content: space-between;
		gap: 32px;
		padding: 56px 0;
	}
	.business-wrap .service-wrap .box {
		align-items: center;
		flex-direction: row;
		gap: 20px;
		padding: 32px 24px;
		border-radius:12px;
	}
	.business-wrap .service-wrap .box .text-wrap {
		align-items: unset;
		height: 100%;
		text-align: left;
	}
	.business-wrap .service-wrap .box .text {
		text-align: left;
	}
}
@media (min-width:1280px) {
	.business-wrap .graphic .text {
		width: 40%;
	}
	.business-wrap .graphic .text span {
		margin-top: 48px;
	}
	.business-wrap .graphic .thumb {
		width: 56%;
	}
	.business-wrap .content-wrap {
        padding: 100px 0 0 0;
	}
	.business-wrap .tab-nav {
		padding: 20px 0 48px 0;
	}
	.business-wrap .business-list .contents-wrap {
		gap: 48px;
	}
	.business-wrap .business-list .sticky-wrap {
		width: 66%;
		gap: 48px;
	}
	.business-wrap .business-list .cate-list {
		margin-top: 32px;
        margin-bottom: 120px;
	}
	.business-wrap .business-list .text-list {
		width: 34%;
	}
	.business-wrap .business-list .text-list .text-box {
		margin-bottom: 100px;
	}
	.business-wrap .service-wrap {
		gap: 36px;
		padding: 64px 0;
	}
	.business-wrap .service-wrap .box {
		gap: 28px;
		padding: 36px 28px;
	}
	.business-wrap .service-wrap .box em {
		width: 80px;
		min-width: 80px;
		height: 80px;
	}
	.business-wrap .service-wrap .box em i {
		font-size: 36px;
	}
}
@media (min-width:1600px) {
	.business-wrap .graphic .text {
		width: 40%;
	}
	.business-wrap .graphic .text span {
		margin-top: 52px;
	}
	.business-wrap .graphic .thumb {
		width: 56%;
	}
	.business-wrap .content-wrap {
        padding: 120px 0 0 0;
	}
	.business-wrap .tab-nav {
		padding: 24px 0 60px 0;
	}
	.business-wrap .business-list .contents-wrap {
		gap: 56px;
	}
	.business-wrap .business-list .sticky-wrap {
		width: 66%;
		gap: 56px;
	}
	.business-wrap .business-list .cate-list {
		margin-top: 40px;
        margin-bottom: 140px;
	}
	.business-wrap .business-list .text-list {
		width: 34%;
	}
	.business-wrap .business-list .text-list .text-box {
		margin-bottom: 140px;
	}
	.business-wrap .business-list .text-list li::after {
		top: 10px;
	}
	.business-wrap .service-wrap {
		gap: 40px;
		padding: 72px 0;
	}
	.business-wrap .service-wrap .box {
		gap: 36px;
		padding: 40px 32px;
	}
	.business-wrap .service-wrap .box em i {
		font-size: 42px;
	}
}
.search-wrap {
	position:relative;
    display: flex;
    flex-direction: column;
    align-items: center;
	width: 100%;
    background-color: var(--primary-50);
}
.search-wrap .search-form {
	display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.search-wrap .search-form form {
	display: flex;
    flex-direction: column;
	gap: 16px;
    width: 100%;
	max-width: 740px;
}
.search-wrap .search-option {
	display: flex;
    flex-wrap: wrap;
	gap: 12px 20px;
}
.search-wrap .search-area {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
	border-radius:8px;
	border:1px solid var(--slate-500);
    background-color: var(--white);
}
.search-wrap .search-area input {
    width: 100%;
	height: 48px;
    padding: 0 8px;
	border: 0;
	border-radius:8px;
}
.search-wrap .search-area button {
}
.search-wrap .search-text {
	word-break: keep-all;
    font-size: var(--font-small);
}
@media (min-width:1024px) {
	.search-wrap .content {
        padding: 80px 0;
    }
	.search-wrap .search-form form {
		gap: 24px;
	}
	.search-wrap .search-area {
		border-radius:12px;
	}
	.search-wrap .search-area input {
		height: 60px;
		border-radius:12px;
	}
}

.search-category {
	margin-bottom:44px;
}
.search-category ul {
	position:relative;
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
	gap: 8px 12px;
}
.search-category li {
	display:inline-block;
}
.search-category li a {
	display:block;
	position:relative;
	padding:8px 16px;
	line-height:var(--font-medium);
	font-size: var(--font-medium);
	color:var(--slate-700);
	border:1px solid var(--slate-300);
	border-radius:99px;
	transition: all 0.2s ease-in-out;
}
.search-category a em {
	margin-left: 4px;
	font-size: var(--font-small);
}  
.search-category a:focus,.search-category a:hover {
	text-decoration:none;
	color:var(--primary);
	border:1px solid var(--primary);
}
.search-category a.active {
	border:1px solid var(--primary);
	background-color:var(--primary);
	color:var(--white);
	font-weight:700;
}
@media(min-width:768px) {
	.search-category {
		margin-bottom:48px;
	}
	.search-category li a {
		padding:12px 20px;
	}
}
@media(min-width:1024px) {
	.search-category {
		margin-bottom:52px;
	}
	.search-category li a {
		padding:12px 24px;
	}
}
@media(min-width:1280px) {
	.search-category {
		margin-bottom:56px;
	}
}
@media(min-width:1600px) {
	.search-category {
		margin-bottom:60px;
	}
}

.product-wrap {
    position: relative;
}
.product-category {
	margin-bottom:44px;
}
.product-category h2 {
	display: none;
}
.product-category ul {
	position:relative;
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
	gap: 8px 12px;
}
.product-category li {
	display:inline-block;
}
.product-category li a {
	display:block;
	position:relative;
	padding:8px 16px;
	line-height:1.1;
	font-size: var(--font-medium);
	color:var(--slate-700);
	border:1px solid var(--slate-300);
	border-radius:20px;
	transition: all 0.2s ease-in-out;
}
.product-category a:focus,
.product-category a:hover {
	text-decoration:none;
	color:var(--primary);
	border:1px solid var(--primary);
}
.product-category #bo_cate_on {
	border:1px solid var(--primary);
	background-color:var(--primary);
	color:var(--white);
	font-weight:700;
}
.product-category #bo_cate_on span {
	color:var(--white);
}  
.product-search-list-wrap .search-title {
	margin-bottom: 20px;
	word-break: keep-all;
    font-size: var(--font-x-large);
    color: var(--slate-500);
}
.product-search-list-wrap .search-title strong {
    font-size: var(--font-xx-large);
    color: var(--primary);
}
.product-search-list-wrap .search-title .title_total {
    font-size: var(--font-x-large);
    color: var(--slate-800);
}
.product-list-wrap .product-title {
	width: 100%;
	margin-bottom: 16px;
}
.product-list-wrap .product-title span {
	width: 100%;
	display: inline-block;
	margin-bottom: 12px;
	font-weight: 700;
    font-size: var(--font-40);
    color: var(--primary);
}
.product-list-wrap .product-title div {
	width: 100%;
	padding: 16px;
    word-break: keep-all;
	font-weight: 600;
	line-height: 1.43;
	border-radius:8px;
    background-color: var(--primary-50);
}
.product-list {
	position:relative;
}
.product-list ul {
	display: grid;
    grid-template-columns: 1fr;
    align-content: stretch;
    align-items: stretch;
	gap: 12px;
}
.product-list li {
	position:relative;
	height: 100%;
}
.product-list li a {
	position:relative;
	display: flex;
    flex-direction: column;
	height: 100%;
	border-radius:8px;
	border:1px solid var(--slate-300);
	transition:all 0.3s linear;
}
.product-list li:hover a {
	border-color:var(--slate-400);
}
.product-list li .thumb {
	padding: 12px;
}
.product-list li .thumb img {
	width: 100%;
	height: auto;
}
.product-list li .icon {
	position: absolute;
	top: 12px;
	right: 12px;
	padding: 4px 8px;
    font-size: var(--font-x-small);
    color: var(--white);
	border-radius: 4px;
    background-color: var(--green-500);
}
.product-list li .icon2 {
    background-color: var(--red-500);
}
.product-list li .item {
	position:relative;
	display: flex;
    flex-direction: column;
	gap: 12px;
	overflow: hidden;
    height: 100%;
	padding: 12px;
	border-radius: 0 0 7px 7px;
    background-color: var(--slate-50);
	transition:all 0.2s linear;
}
.product-list li .category {
	word-break: keep-all;
	font-weight: 600;
    font-size: var(--font-small);
    color: var(--primary);
}
.product-list li .title {
	word-break: keep-all;
    font-size: var(--font-xx-large);
	font-weight: 700;
    color: var(--slate-800);
}
.product-list li .product {
	word-break: keep-all;
    color: var(--slate-600);
}
@media (min-width:768px) {
	.product-category {
		margin-bottom:48px;
	}
	.product-category li a {
		padding:8px 20px;
		border-radius:20px;
	}
	.product-list ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
	.product-list li a {
		
	}
	.product-list li .thumb {
		padding: 12px;
	}
	.product-list li .item {
		padding: 12px;
	}
}
@media (min-width:1024px) {
	.product-category {
		margin-bottom:52px;
	} 
	.product-list-wrap .product-title {
		margin-bottom: 20px;
	}
	.product-list-wrap .product-title div {
		padding: 20px;
		border-radius:12px;
	}
	.product-list ul {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
	}
	.product-list li {
	}
	.product-list li a {
		border-radius:12px;
	}
	.product-list li a::before {
		content: "";
		position: absolute;
		bottom: -1px;
		right: -1px;
		border-radius: 12px 0 0 0;
		border-style: solid;
		border-color: var(--primary) var(--white);
		transition: border-width 0.3s linear;
		z-index:5;
	}
	.product-list li:hover a::before {
		box-shadow: -2px -2px 2px rgba(var(--slate-600-rgb), 0.3);
		border-width: 80px 80px 0 0;
		border-radius: 12px 0 0 0;
	}
	.product-list li a::after {
		display: flex;
		justify-content: center;
		align-items: center;
		position:absolute;
		bottom:0px;
		right:0px;
		width: 48px;
		height: 48px;
		content: "\e145";
		font-family: "Material Icons Outlined";
		color: var(--white);
		font-size: 24px;
		text-rendering: auto;
		opacity: 0;
		transform: rotate(0deg);
		transition: opacity 0.1s 0.2s linear, transform 0.3s 0.3s linear, bottom 0.3s linear, right 0.3s linear;
		z-index:5;
	}
	.product-list li a:hover::after {
		bottom:32px;
		right:32px;
		opacity: 1;
		transform: rotate(360deg);
	}
	.product-list li .thumb {
		padding: 16px;
	}
	.product-list li .item {
		padding: 16px;
		border-radius: 0 0 11px 11px;
	}
	.product-list li a:hover .item {
		background-color: var(--slate-100);
	}
}
@media (min-width:1280px) {
	.product-category {
		margin-bottom:56px;
	}
	.product-category li a {
		padding:8px 20px;
	}
	.product-list ul {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 28px;
	}
	.product-list li a {
	
	} 
	.product-list li .thumb {
		padding: 20px;
	}
	.product-list li .item {
		padding: 20px;
	}
}
@media (min-width:1600px) {
	.product-wrap::before, .product-wrap::after {
	  content: ''
	}
	.product-wrap::after {
		clear: both;
		display: block
	}
    .product-category {
        position: sticky;
        position: -webkit-sticky;
        top: calc(var(--fixedheadHeight) + var(--asideHeight) + 20px);
        float: left;
        width: 260px;
        padding-top: 0;
		margin-bottom: 0;
    } 
	.product-category h2 {
		display: block;
		margin-bottom:20px;
		font-size: var(--font-xx-large);
		font-weight: 700;
		color: var(--slate-700);
	}
	.product-category li {
		width: 100%;
	}
    .product-list-wrap {
        position: relative;
        float: right;
        width: calc(100% - 292px);
        margin-top: 0;
    }
	.product-list ul {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 32px;
	}
	.product-list li .thumb {
		padding: 24px;
	}
	.product-list li .item {
		padding: 24px;
	}
	.product-search-list-wrap {
		width: 100%;
	}
	.product-search-list-wrap ul {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 32px;
	}
}
.product-item {
	position:relative;
	width: 100%;
}
.body-fixed .product-item {
    margin-top: var(--fixedheadHeight);
}
.product-item .f-carousel {
	--f-arrow-pos: 10px;
	--f-arrow-width: 38px;
	--f-arrow-height: 38px;
	--f-arrow-svg-width: 16px;
	--f-arrow-svg-height: 16px;
	--f-arrow-svg-stroke-width: 5;
	--f-arrow-color: var(--slate-400);
	--f-arrow-border-radius: 50%;
	--f-arrow-bg: rgba(var(--white-rgb), .3);
	--f-arrow-hover-bg: rgba(var(--white-rgb), .4);
	--f-arrow-active-bg: rgba(var(--primary-rgb), 1);
    --f-carousel-dots-top: 100%;
    --f-carousel-dots-bottom: auto;
    --f-carousel-dots-width: 24px;
    --f-carousel-dots-height: 36px;
    --f-carousel-dot-width: 12px;
    --f-carousel-dot-height: 12px;
    --f-carousel-dot-border-radius: 100%;
    --f-carousel-dot-bg: var(--slate-300);
    --f-carousel-dot-hover-bg: var(--slate-400);
    --f-carousel-dot-selected-bg: var(--primary);
    --f-carousel-dot-opacity: .4;
    --f-carousel-dot-hover-opacity: .8;
    --f-carousel-dot-selected-opacity: 1;
    --f-carousel-dot-transition: all .15s ease;
    --f-thumbs-padding-x: 0;
    --f-thumbs-padding-y: 12px;
}
.product-item .f-html {
    display: flex;
    align-items: center;
    flex-direction: column;
}
.product-item .product-item-wrap {
	width: 100%;
}
.product-item .thumb a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
	height: 100%;
}
.product-item img { 
    width: auto;
    height: auto;
    max-width: 100%;
}
.product-item .img-wrap { 
    float: left;
	display: flex;
    justify-content: center;
	width: 100%;
	margin-bottom: 40px;
}
.product-item .img-wrap .thumb { 
	width: 100%;
}
.product-item .info-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
	margin-bottom: 40px;
}
.product-item .info-wrap .icon {
    display: inline-block;
	margin-bottom: 8px;
	padding: 4px 8px;
    font-size: var(--font-x-small);
    color: var(--white);
	border-radius: 4px;
    background-color: var(--green-500);
}
.product-item .info-wrap .icon2 {
    background-color: var(--red-500);
}
.product-item .info-wrap h1 {
	line-height: 1.1;
	font-size: var(--font-h2);
    color: var(--slate-800);
	word-break: keep-all;
}
.product-item .info-wrap .product {
	margin-top: 12px;
    color: var(--slate-700);
    font-size: var(--font-x-large);
	font-weight: 600;
	word-break: keep-all;
} 
.product-item .info-wrap ul {
	display: flex;
    flex-direction: column;
	gap: 12px;
	margin-top: 40px;
}
.product-item .info-wrap li {
    position: relative;
	word-break: keep-all;
}
.product-item .info-wrap .file-list {
    justify-content: flex-start;
	margin-top: 28px;
}
.product-item .detail-wrap {
	position:relative;
	display: flex;
    flex-direction: column;
	gap: 40px;
	width: 100%;
}
.product-item .detail-wrap h2 {
	position:relative;
    color: var(--slate-800);
    font-size: var(--font-h3);
	margin-bottom: 20px;
}
.product-item .detail-wrap .explan-wrap {    
	display: flex;
    flex-direction: column;
	gap: 60px;
	width: 100%;
	word-break: keep-all;
} 
.product-item .detail-wrap .explan-wrap ul {
	display: flex;
    flex-direction: column;
	gap: 20px;
}
.product-item .detail-wrap .explan-wrap li {
    position: relative;
	display: flex;
    flex-direction: column;
	gap: 8px;
	word-break: keep-all;
}
.product-item .detail-wrap .explan-wrap li h3 {
    color: var(--slate-700);
    font-size: var(--font-large);
}
.product-item .detail-wrap .explan-wrap img {   
	width: auto;
	max-width: 100%;
	height: auto;
}  
.product-item .detail-wrap .thumb-wrap {
	width: 100%;
}
.product-item .detail-wrap .thumb-wrap .thumb {

}
@media (min-width:768px) {
	.product-item .img-wrap { 
		margin-bottom: 80px;
	}
	.product-item .img-wrap .thumb { 
		max-width: 600px;
	}
	.product-item .detail-wrap .explan-wrap ul {
		gap: 24px;
	}
}
@media (min-width:1024px) {
	.product-item .img-wrap { 
		width: 53%;
		margin-bottom: 80px;
	}
	.product-item .img-wrap .thumb { 
		max-width: 760px;
	}
	.product-item .info-wrap {
		float: right;
		position: sticky;
		top: calc(var(--fixedheadHeight) + var(--asideHeight) + 20px);
		width: calc(47% - 60px);
		margin-bottom: 0;
	}
	.product-item .info-wrap .product {
		margin-top: 16px;
	} 
	.product-item .info-wrap li::after {
		top: 8px;
	}
	.product-item .detail-wrap {
		gap: 60px;
		width: 53%;
	} 
	.product-item .detail-wrap .explan-wrap ul {
		gap: 28px;
	}
}
@media (min-width:1280px) {
	.product-item .img-wrap { 
		width: 54%;
		margin-bottom: 80px;
	}
	.product-item .info-wrap {
		width: calc(46% - 70px);
	}
	.product-item .info-wrap .product {
		margin-top: 20px;
	} 
	.product-item .detail-wrap {
		gap: 70px;
		width: 54%;
	}
	.product-item .detail-wrap .explan-wrap ul {
		gap: 32px;
	}
}
@media (min-width:1600px) {
	.product-item .img-wrap { 
		width: 55%;
		margin-bottom: 80px;
	}
	.product-item .info-wrap {
		width: calc(45% - 80px);
	}
	.product-item .info-wrap .product {
		margin-top: 24px;
	} 
	.product-item .info-wrap li::after {
		top: 10px;
	}
	.product-item .detail-wrap {
		gap: 80px;
		width: 55%;
	}
	.product-item .detail-wrap .explan-wrap ul {
		gap: 36px;
	}
}

.contact {
	position:relative;
}
.contact .contact-text {
	width: 100%;
} 
.contact .contact-text .text {
	margin-bottom: 40px;
}
.contact .contact-text .text h2 {
	margin-bottom: 12px;
    font-size: var(--font-40);
	font-weight: 400;
    color: var(--slate-900);
}
.contact .contact-text .text span {
    font-size: var(--font-xx-large);
    color: var(--slate-500);
}
.contact .contact-text .info > ul {
	display: flex;
    flex-direction: column;
	gap: 20px;
}
.contact .contact-text .info > ul > li {
	display: flex;
    flex-direction: column;
	gap: 8px;
	width: 100%;
}
.contact .contact-text .info > ul > li h2 {
    font-size: var(--font-36);
	font-weight: 700;
    color: var(--slate-900);
}
.contact .contact-text .info > ul > li > span {
	display: block;
    font-size: var(--font-xx-large);
	font-weight: 400;
    color: var(--slate-700);
}
.contact .contact-text .info > ul > li > span:last-child {
}
.contact .contact-text .info > ul > li > span a {
    color: var(--slate-700);
}
.contact .contact-text .info .file-list {
    justify-content: flex-start;
}
.contact .contact-form {
	width: 100%;
    margin-top: 50px;
}
.contact .contact-form .form-wrap {
	display: flex;
    flex-direction: column;
	gap: 24px;
    width: 100%;
}
.contact .contact-form .form-group {
	display: flex;
    flex-direction: column;
	gap: 24px;
}
.contact .contact-form .form-group .col {
	position:relative;
	width:100%;
}
.contact .contact-form .form-group .col:hover {
	transition:all .3s ease-in-out !important;
}
.contact .contact-form .form-group .col label + span {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 48px;
	padding:8px;
	line-height:1.4;
	border-radius:8px;
	background-color:var(--slate-50);
} 
.contact .contact-form .form-group .col span em {
    vertical-align: middle;
}
.contact .contact-form .form-group .col span a {
    word-wrap: break-word;
	color:var(--slate-700);
}
.contact .contact-form label {
	position:relative;
	margin-bottom: 12px;
	font-weight: 700;
	color:var(--slate-800);
}
.contact .contact-form label.essential::before {
    content: '';
    position: absolute;
    top: -2px;
    right: -8px;
    width: 6px;
    height: 6px;
    border-radius: 99px;
    background-color: var(--primary);
}
.contact .contact-form input {
	width:100%;
	height:48px;
	padding:0 8px;
	line-height:48px;
	border:0;
	border-radius:8px;
	background-color:var(--slate-50);
}
.contact .contact-form input::placeholder {
	color:var(--slate-500);
}
.contact .contact-form select {
	width:100%;
	height:48px;
	padding:0 48px 0 8px !important;
	line-height:48px;
	border:0;
	border-radius:8px;
	background-color:var(--slate-50);
	background-position: calc(100% - 16px) 50%;
}
.contact .contact-form .form-textarea {
	width:100%;
	padding:0 8px;
	border:0;
	border-radius: 8px;
	background-color:var(--slate-50);
}
.contact .contact-form textarea {
	width:100%;
	height:200px;
	padding: 8px;
	line-height:1.4;
	border:0;
	background-color:var(--slate-50);
}
.contact .contact-form .file-wrap {
	position:relative;
    display: flex;
    flex-direction: column;
	gap: 12px;
}
.contact .contact-form .file-wrap .file-input-div {
	position:relative;
	min-width:120px;
	overflow:hidden;
}
.contact .contact-form .file-wrap button {
	position:relative;
	gap: 4px;
	width: 100%;
	height:48px;
	border-radius:8px;
	appearance:none;
}
.contact .contact-form .file-wrap .file-input-hidden {
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	opacity:0;
	filter:alpha(opacity=0);
}
.contact .contact-form .form-textarea:has(textarea:focus),
.contact .contact-form textarea:focus,
.contact .contact-form input:focus {
	border:0;
	outline:0;
	box-shadow:none;
	background-color:var(--slate-100);
} 
.contact .contact-form textarea:focus::-webkit-input-placeholder,
.contact .contact-form input:focus::-webkit-input-placeholder {
	color:transparent;
}
.contact .contact-form textarea:focus::-moz-placeholder,
.contact .contact-form input:focus::-moz-placeholder {
	color:transparent;
}
.contact .contact-form .help {
	display:block;
	width:100%;
	padding-top:8px;
	color:var(--slate-500);
	font-size:var(--font-small);
}
.contact .contact-form .help a {
	color:var(--slate-500);
	font-weight:400;
} 
.contact .contact-form .col-checkbox {
    display: flex;
	gap: 8px;
}
.contact .contact-form .col-checkbox label {
	margin-bottom:0;
}
.contact .contact-form .col-checkbox div {
	cursor:pointer;
	color:var(--slate-500);
}
.contact .contact-form .col-captcha div {
	margin-top: 8px;
    color: var(--slate-500);
    font-size: var(--font-small);
}
@media (min-width:768px) {
	.contact .contact-text .text {
		margin-bottom: 44px;
	}
	.contact .contact-text .info > ul {	
		flex-wrap: wrap;
		flex-direction: unset;
		gap: 40px 28px;
	}
	.contact .contact-text .info > ul > li.col {
		width: calc(50% - 14px);
	}
	.contact .contact-form .form-wrap {
		gap: 60px;
	}
	.contact .contact-form .form-group {
		flex-direction: row;
		gap: 40px;
	}
	.contact .contact-form .form-group .col label + span {
		min-height: 60px;
		padding:16px;
		border-radius:12px;
	}
	.contact .contact-form label {
		margin-bottom:16px;
	}
	.contact .contact-form input[type="text"] {
		height:60px;
		padding:0 16px;
		line-height:60px;
		border-radius:12px;
	}
	.contact .contact-form select {
		height:60px;
		padding:0 16px;
		line-height:60px;
		border-radius:12px;
		padding:0 60px 0 16px !important;
	}
	.contact .contact-form .form-textarea {
		border-radius:12px;
	}
	.contact .contact-form textarea {
		padding: 16px;
	}
	.contact .contact-form .file-wrap {
		flex-direction: row;
		gap: 16px;
	}
	.contact .contact-form .file-wrap .file-input-div {
		min-width:120px;
	}
	.contact .contact-form .file-wrap button {
		height:60px;
		border-radius:12px;
	}
	.contact .contact-form .help {
		padding-top:12px;
	}
	.contact .contact-form .agree {
		margin-bottom:0;
		font-size:18px;
	}
	.contact .contact-form .col-checkbox {
		align-items: center;
		flex-direction: row;
	}
}
@media (min-width:1024px) {
	.contact::before, .contact::after {
	  content: ''
	}
	.contact::after {
		clear: both;
		display: block
	}
	.contact .contact-text {
		position:sticky;
		position: -webkit-sticky;
		top: calc(var(--fixedheadHeight) + var(--asideHeight) + 40px);
		float: left;
		width: 40%;
		padding-top: 0;
	} 
	.contact .contact-text .text {
		margin-bottom: 48px;
	} 
	.contact .contact-text .info > ul {	
		flex-wrap: unset;
		flex-direction: column;
		gap: 40px;
	}
	.contact .contact-text .info > ul > li.col {
		width: 100%;
	}
	.contact .contact-form {
		position:relative;
		float: right;
		width: 55%;
		margin-top: 0;
	}
}
@media (min-width:1280px) {
	.contact .contact-text .text {
		margin-bottom: 48px;
	}
	.contact .contact-form .file-wrap .file-input-hidden {
		height: 60px;
		line-height: 60px;
	}
}

.has-html .f-html {
    display: flex;
    align-items: center;
    flex-direction: column;
	justify-content: center;
}
.f-thumbs__viewport {
	margin: 0;
}
.f-thumbs__slide img {
    width: auto;
    height: auto;
    max-width: 100%;
	max-height: 100%;
}
.f-panzoom__viewport {
    background-color: var(--white);
}
.dialog-wrap {
    display: inline-block;
	width: 100%;
	border-radius:8px;
}
.dialog-wrap .header {
    padding: 0 0 12px 0;
}
.dialog-wrap .header h4 {
	line-height:var(--font-xx-large);
	font-size:var(--font-large);
	color:var(--slate-900);
	font-weight:700;
}
.dialog-wrap .body {
}
@media (min-width:768px) {
}
@media (min-width:1024px) {
	.dialog-wrap {
		border-radius:12px;
	}
}
.dialog-privacy {
	max-width:800px;
}
.dialog-privacy .body .privacy {
	word-break:keep-all;
	font-size:var(--font-small);
	line-height: 1.3;
}
.dialog-privacy .body .privacy ul {
    display: flex;
    flex-direction: column;
	gap:4px;
	margin-top: 20px;
}
.dialog-privacy .body .privacy li {
	position:relative;
	line-height: 1.3;
}
.dialog-privacy .body .privacy li.title {
	font-weight:600;
	color:var(--slate-800);
}
.dialog-privacy .body .privacy li.bullet {
	margin-left: 12px;
}
.dialog-privacy .body .privacy li.bullet::before {
    content: '';
    position: absolute;
	top: 10px;
	left: -12px;
	bottom: 20px;
	width: 4px;
	height: 1px;
    background-color: var(--slate-500);
}
@media (min-width:768px) {
}
@media (min-width:1024px) {

}
.policy-wrap {
	position:relative;
}
.policy-wrap .text {
	width: 100%;
	text-align: center;
	font-size:30px;
	font-weight: 700;
	color:var(--slate-300);
}
.policy-wrap .rules-box {
	position:relative;
	padding: 80px 36px;
	text-align: center;
	word-break: keep-all;
	border-radius:12px;
	background-color:var(--slate-50);
	z-index:1;
}
.policy-wrap .privacy {
	padding: 40px 36px;
	text-align: left;
	line-height: 1.5;
	word-break: keep-all;
}
.policy-wrap .rules-text {
	width: 100%;
	margin: 0 auto;
}
.policy-wrap .rules-text h2 {
	display: block;
    width: 100%;
	margin-bottom: 40px;
	word-break: keep-all;
	line-height: 1.5;
	font-size:var(--font-xx-large);
}
.policy-wrap .rules-text h2 span {
	font-weight: 700;
	color:var(--primary);
}
.policy-wrap .rules-text div {
    width: 100%;
	word-break: keep-all;
	line-height: 1.5;
}
.policy-wrap .rules-privacy {
    margin-top: 40px;
	word-break: keep-all;
	line-height: 1.4;
}
.policy-wrap .rules-privacy .tt {
    margin: 40px 0 20px 0;
	word-break: keep-all;
    font-size: var(--font-large);
    color: var(--slate-800);
    font-weight: 700;
	scroll-margin-top: calc(var(--fixedheadHeight) + 40px);
}
.policy-wrap .rules-privacy .decimal-list {
	display: flex;
    flex-direction: column;
	gap: 4px;
}
.policy-wrap .rules-privacy .decimal-list li {
    position: relative;
	margin-left: 40px;
	word-break: keep-all;
	list-style-type: decimal;
}
.policy-wrap .rules-privacy a {
    color: var(--slate-800);
}
.policy-wrap .rules-privacy a:hover {
    color: var(--primary);
}
.policy-wrap .rules-privacy .dots-list {
	display: flex;
    flex-direction: column;
	gap: 4px;
}
.policy-wrap .rules-privacy .dots-list li {
    position: relative;
	margin-left: 28px;
	word-break: keep-all;
}
.policy-wrap .rules-privacy .dots-list li::after {
    content: '';
    position: absolute;
	top: 10px;
	left: -12px;
	width: 4px;
	height: 4px;
    border-radius: 99px;
    background-color: var(--slate-400);
}
.policy-wrap .rules-privacy p {
    margin-bottom: 12px;
	word-break: keep-all;
}
.policy-wrap .rules-privacy ul + p {
    margin-top: 12px;
}
@media (min-width:768px) {
	.policy-wrap .text {
		font-size:42px;
	}
	.policy-wrap .rules-text {
		width: 80%;
	}
}
@media (min-width:1024px) {
	.policy-wrap .text {
		font-size:72px;
	}
	.policy-wrap .rules-text {
		width: 60%;
	}
}