:root {
  --color-main: #00738D;
  --color-sub: #00B1A1;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --font-pretendard: 'Pretendard', sans-serif;
  --font-poppins: 'Poppins', sans-serif;
}

.font36 {
  --fontsize: 3.6rem;
  font-size: var(--fontsize);
}

.font38 {
  --fontsize: 3.8rem;
  font-size: var(--fontsize);
}

.font42 {
  --fontsize: 4.2rem;
  font-size: var(--fontsize);
}

.font44 {
  --fontsize: 4.4rem;
  font-size: var(--fontsize);
}

.font48 {
  --fontsize: 4.8rem;
  font-size: var(--fontsize);
}

.font52 {
  --fontsize: 5.2rem;
  font-size: var(--fontsize);
}

.font58 {
  --fontsize: 5.8rem;
  font-size: var(--fontsize);
}

.font64 {
  --fontsize: 6.4rem;
  font-size: var(--fontsize);
}

.font74 {
  --fontsize: 7.4rem;
  font-size: var(--fontsize);
}

.font84 {
  --fontsize: 8.4rem;
  font-size: var(--fontsize);
}

.font86 {
  --fontsize: 8.6rem;
  font-size: var(--fontsize);
}

@media (max-width: 1760px) {
  /* .w1720,
  .w1500 {
    padding: 0 20px;
  } */
  .w1720 {
	padding: 0 20px;
  }
  .about .brand .item p br {
    display: none;
  }
  .viewPage .info .item {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .viewPage .info .title p br {
    display: none;
  }
}

@media (max-width: 1600px) {
  .font86,
  .font84,
  .font80,
  .font74,
  .font70,
  .font64 {
    font-size: calc(var(--fontsize) * 0.74);
  }
  .font58,
  .font52,
  .font48,
  .font44,
  .font42 {
    font-size: calc(var(--fontsize) * 0.80);
  }
  .listPage h4 br:not(.block) {
    display: none;
  }
  .listPage .itemBox {
    gap: 100px 40px;
  }
  .viewPage .info .item {
    gap: 0 40px;
  }
  .viewPage .info .features ol {
    gap: 10px 0;
  }
  .viewPage .bottom dl dd br {
    display: none;
  }
}

@media (max-width: 1400px) {
  .w1500,
  .w1300 {
    padding: 0 5%;
	max-width:100%;
  }
  .font86,
  .font84,
  .font80,
  .font74,
  .font70,
  .font64 {
    font-size: calc(var(--fontsize) * 0.70);
  }
  .font58,
  .font52,
  .font48,
  .font44,
  .font42 {
    font-size: calc(var(--fontsize) * 0.74);
  }
  .font38,
  .font36 {
    font-size: calc(var(--fontsize) * 0.82);
  }
  .paddingBox {
    padding: 140px 0;
  }
  .paddingBox.topX {
    padding: 0 0 140px;
  }
  .paddingBox.bottomX {
    padding: 140px 0 0;
  }
  main .achievement .itemWrap {
    padding: 160px 0 0;
    margin: 140px 0 0;
  }
  main .achievement .itemBox .logo {
    height: 24px;
  }
  main .achievement .itemBox p {
    font-size: 1.8rem;
    margin: 40px 0 0;
  }
  main .work .slideWrap .view {
    width: 100px;
    height: 100px;
    top: -50px;
    left: 40.2%;
  }
  main .connect .flexBox {
    gap: 40px 80px;
  }
  main .connect a .icon {
    width: 110px;
    height: 110px;
  }
  main .notice .itemBox {
    gap: 0 28px; /*gap: 0 20px;*/
  }
  main .notice .text {
    padding: 30px 20px;
  }
  .about .column {
    gap: 100px 0;
  }
  .about .since h2 {
    margin: 60px 0;
  }
  .about .since .flexBox {
    gap: 0 10px;
  }
  .about .brand .itemBox {
    gap: 0 40px;
  }
  .about .history .swiper-slide.on dl dt {
    font-size: 5.4rem;
  }
  .about .certi .itemBox {
    -ms-grid-columns: (1fr)[3];
        grid-template-columns: repeat(3, 1fr);
    gap: 40px 20px;
  }
  .listPage .itemBox {
    margin: 100px 7% 0;
  }
  .listPage .item dl {
    margin: 40px 0 0;
  }
  .listPage .item dl dt {
    font-size: 2.7rem;
  }
  .listPage .item dl dt em {
    font-size: 2.1rem;
  }
  .viewPage .info .title h3 em {
    font-size: 2.4rem;
  }
  .viewPage .info .title p {
    font-size: 1.9rem;
  }
  .viewPage .info .features h5 {
    font-size: 2.4rem;
  }
  .viewPage .info .features ol li {
    gap: 0 10px;
  }
  .viewPage .info .features ol em {
    width: 22px;
    height: 22px;
    font-size: 1.3rem;
  }
  .viewPage .info .features p {
    font-size: 1.8rem;
  }
  .viewPage .bottom {
    margin: 100px 0 0;
  }
  .viewPage .bottom dl dt {
    font-size: 2.0rem;
  }
  .viewPage .bottom dl dd {
    font-size: 1.7rem;
  }
  .downloadPage .itemBox,
  .ad .itemBox
  .ad.ad2 .itemBox{
    gap: 60px 20px;
  }
}

@media (max-width: 1300px) {
	.w1500,
	.w1400,
	.w1300,
	.w1200
	{
		max-width: 100%;
		padding: 0 5%;
	}
}

@media (max-width: 1200px) {
    .w1500,
	.w1400,
	.w1300,
	.w1200
	{
		max-width: 100%;
		padding: 0 5%;
	}
  .font86,
  .font84,
  .font80,
  .font74,
  .font70,
  .font64 {
    font-size: calc(var(--fontsize) * 0.66);
  }
  .font58,
  .font52,
  .font48 {
    font-size: calc(var(--fontsize) * 0.70);
  }
  .font44,
  .font42 {
    font-size: calc(var(--fontsize) * 0.72);
  }
  html,
  body {
    font-size: 56.25%;
  }
  .paddingBox {
    padding: 100px 0;
  }
  .paddingBox.topX {
    padding: 0 0 100px;
  }
  .paddingBox.bottomX {
    padding: 100px 0 0;
  }
  .marginTop120 {
    margin-top: 70px;
  }
  header nav {
    display: none;
  }
  header .language.drop {
    margin: 0 20px 0 auto;
  }
  header.menuOn .language.hr {
    margin: 0 20px 0 auto;
  }
  .allMenu .depth2 {
    padding: 35px 0 0;
  }
  main .achievement .itemWrap {
    margin: 80px 0 0;
  }
  main .work .slideBox .text {
    left: 20px;
    bottom: 20px;
  }
  main .work .slideBox .text h5 {
    font-size: 2.3rem;
  }
  main .work .slideBox .text p br {
    display: none;
  }
  main .notice .end {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 20px 0;
  }
  main .notice .end ul {
    margin: 0 0 0 auto;
  }
  main .notice .itemBox {
    gap: 0 5px;
  }
  main .notice .text h5 {
    font-size: 2.1rem;
  }
  main .notice .text p {
    font-size: 1.7rem;
    margin: 10px 0 30px;
  }
  #sv .top {
    margin-bottom: 80px;
  }
  .subFlex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 40px 0;
  }
  .subFlex > *:first-child,
  .subFlex > *:last-child {
    max-width: 100%;
  }
  .about .column {
    gap: 70px 0;
  }
  .about .brand .item {
    padding: 60px 40px;
  }
  .about .brand .text,
  .about .brand .info {
    margin: 40px 0;
  }
  .about .certi .itemBox {
    -ms-grid-columns: (1fr)[4];
        grid-template-columns: repeat(4, 1fr);
  }
  .listPage .item .itemA {
    padding: 60px;
  }
  .listPage .item .itemA span {
    width: 50px;
    height: 50px;
    right: 20px;
    bottom: 20px;
  }
  .viewPage .info .img .swiper-slide {
    padding: 140px 80px;
  }
  .viewPage .info figcaption {
    bottom: 80px;
  }
  .viewPage .info .title h6 {
    font-size: 2.2rem;
  }
  .viewPage .info hr {
    margin: 25px 0;
  }
  .viewPage .info .features h5 {
    margin: 0 0 20px;
  }
  .viewPage .info .link {
    height: 65px;
  }
  .viewPage .bottom .itemA {
    padding: 40px;
  }
  .downloadPage .icon {
    width: 50px;
    height: 50px;
  }
  .ad .item button {
    width: 65px;
    height: 65px;
  }
  footer h3 {
    font-size: 4.2rem;
  }

  footer.footer_en h3 {
    font-size: 4.2rem;
  }
}

@media (max-width: 1024px) {
	.w1500,
	.w1400,
	.w1300,
	.w1200
	{
		max-width: 100%;
		padding: 0 20px;
	}
}

@media (max-width: 960px) {
	.w1500,
	.w1400,
	.w1300,
	.w1200
	{
		max-width: 100%;
		padding: 0 20px;
	}

  .font86,
  .font84,
  .font80,
  .font74,
  .font70,
  .font64 {
    font-size: calc(var(--fontsize) * 0.58);
  }
  .font58,
  .font52,
  .font48 {
    font-size: calc(var(--fontsize) * 0.60);
  }
  .font44,
  .font42 {
    font-size: calc(var(--fontsize) * 0.64);
  }
  .font38,
  .font36,
  .font34,
  .font32,
  .font30 {
    font-size: calc(var(--fontsize) * 0.74);
  }
  header {
    height: 80px;
  }
  header .logo {
    width: 101px;
    height: 33px;
  }
  header.menuOn {
    background: var(--color-main);
  }
  header.menuOn .headerBox > .logo {
    display: block;
	filter: brightness(0) invert(1);
  }
  .allMenu .flexBox {
    padding: 0 20px;
    margin: 80px 0 0;
  }
  .allMenu .flexBox::before {
    display: none;
  }
  .allMenu span {
    display: none;
  }
  .allMenu .depth1 {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: left;
    padding: 20px 0 0;
    margin: 0;
  }
  .allMenu .depth1 > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px 0;
  }
  .allMenu .depth1 > li > a {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    font-size: 2.4rem;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .allMenu .depth1 > li > a::after {
    display: none;
  }
  .allMenu .depth1 > li i {
    display: block;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
  }
  .allMenu .depth1 > li.on i {
    -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
  }
  .allMenu .depth2 {
    padding: 30px 20px 0;
    display: none;
  }
  .allMenu .depth2 > li > a {
    font-size: 1.8rem;
  }
  main .visual button::before {
    width: 100px;
  }
  main .achievement .itemWrap .top > p {
    font-size: 2.5rem;
  }
  main .work .flexBox {
    gap: 0;
    margin: 0 0 100px;
  }
  main .work .slideBox {
    width: 120%;
  }
  main .connect .flexBox {
    padding: 0 20px;
  }
  main .connect a .icon {
    width: 80px;
    height: 80px;
    padding: 30px;
  }
  main .notice .scrollBox {
	overflow-y: hidden;
    overflow-x: scroll;
  }
  main .notice .itemBox {
	display: flex;
	/* width: 920px; */
    /* -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
    gap: 30px; */
  }
  #sv .pathBox,
  #sv .top {
    padding: 60px 0 0;
	margin-top: 80px;
  }
  .about .tabTitle li:not(:last-child)::after {
    height: 15px;
    margin: 0 15px;
  }
  .about .tabTitle li button {
    font-size: 1.9rem;
  }
  .about .since p.top {
    font-size: 2.6rem;
  }
  .about .since .flexBox p {
    height: 70px;
    font-size: 2.4rem;
  }
  .about .sion .itemBox dl dt {
    font-size: 3.4rem;
    margin: 20px 0;
  }
  .about .brand .itemBox {
    gap: 0 20px;
  }
  .about .brand .item {
    padding: 40px 30px;
  }
  .about .brand .item p {
    font-size: 1.8rem;
  }
  .about .brand .item > a {
    height: 60px;
  }
  .about .history .itemBox .item p {
    font-size: 1.9rem;
  }
  .about .history .slideButtons button {
    width: 60px;
    height: 60px;
  }
  .about .history .swiper-slide dl dt {
    font-size: 3.0rem;
  }
  .about .history .swiper-slide dl p {
    font-size: 1.9rem;
  }
  .about .history .swiper-slide.on dl::before {
    left: 10%;
  }
  .about .history .swiper-slide.on dl::after {
    left: 12%;
  }
  .about .history .swiper-slide.on dl dt {
    font-size: 4.2rem;
  }
  .about .certi h5 {
    font-size: 2.7rem;
  }
  .about .certi .itemBox {
    -ms-grid-columns: (1fr)[3];
        grid-template-columns: repeat(3, 1fr);
  }
  .about .location .mapBox {
    height: 360px;
    margin: 0 0 40px;
  }
  .about .location .infoBox ul li {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .about .location .infoBox ul i {
    margin: 0.1rem 0 0;
  }
  .about .location .infoBox ul dl {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 5px 0;
  }
  .about .location .infoBox ul dl * {
    font-size: 1.9rem;
  }
  .listPage .itemBox {
    gap: 60px 20px;
    margin: 60px 0 0;
  }
  .listPage .item dl dd {
    font-size: 1.9rem;
  }
  .viewPage .info .item {
    width: 100%;
    max-width: 720px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 50px 0;
  }
  .viewPage .info .img,
  .viewPage .info .text {
    width: 100%;
  }
  .viewPage .info .title h3 em {
    font-size: 2.0rem;
  }
  .viewPage .bottom {
    margin: 60px 0 0;
  }
  .viewPage .bottom .list {
    -ms-grid-columns: (1fr)[3];
        grid-template-columns: repeat(3, 1fr);
    gap: 40px 20px;
  }
  .downloadPage .item p,
  .ad .item p {
    font-size: 2.1rem;
    margin-top: 20px;
  }
  .downloadPage .itemBox,
  .ad .itemBox,
  .ad.video .itemBox {
    gap: 40px 10px;
  }
  .ad .item p {
    margin-bottom: 10px;
  }
  .pTop {
    font-size: 2.4rem;
    margin: 30px 0 0;
  }
  .inquiry .bottom {
    margin: 80px 0 0;
  }

  .downloadPage .link {
    gap: 20px 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    flex-wrap: nowrap;
}

  .category-filter{
	width: 100%;
	display: flex;
	justify-content: flex-end;
	flex-wrap: nowrap;
	flex-direction: row;
	}
	.category-tabs {
		margin: 30px 0 20px;
	}
	.category-button {
		background-color: none;
		border: 1px solid #ccc;
		color:#111;
		padding: 10px 20px;
		margin-right: 10px;
		border-radius: 20px;
		cursor: pointer;
		font-weight: 300;
		font-size: 1.8rem;
	}

	.category-button:last-child {
		margin-right:0;
	}
	.category-button.active {
		background-color: var(--color-main);
		border:none;
		color: white;
	}

  footer .logo {
    width: 151px;
    height: 32px;
    margin: 60px 0 20px;
  }
  footer .info .flexBox {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 10px 0;
  }
  footer .topButton {
    width: 80px;
    height: 80px;
  }
  footer h3 {
    font-size: 3.4rem;
  }
  footer.footer_en h3 {
    font-size: 3.4rem;
  }
}

@media (max-width: 768px) {
  .font86,
  .font84,
  .font80,
  .font74,
  .font70,
  .font64 {
    font-size: calc(var(--fontsize) * 0.50);
  }
  .font58,
  .font52,
  .font48 {
    font-size: calc(var(--fontsize) * 0.54);
  }
  .font44,
  .font42 {
    font-size: calc(var(--fontsize) * 0.62);
  }

  .listPage .itemTitle {
    font-size: 2.3rem;
  }

  .button {
    padding: 15px 20px;
  }
  .button em {
    font-size: 1.6rem;
  }
  main .title h6 {
    font-size: 1.8rem;
  }
  main .visual .text em {
    font-size: 1.8rem;
  }
  main .achievement .itemBox {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: -2.5rem 0 0;
  }
  main .achievement .itemBox::before {
    width: 100%;
    height: 1px;
  }
  main .achievement .itemBox .logo {
    height: 20px;
  }
  main .work .slideWrap .view {
    left: 50%;
  }
  main .work .slideBox {
    width: 140%;
  }
  main .connect .flexBox {
    gap: 30px 40px;
  }
  main .connect a .icon {
    width: 70px;
    height: 70px;
  }
  #sv h6 {
    font-size: 1.9rem;
  }
  #sv .title p {
	font-size: 2.7rem;
  }
  #sv .top {
    margin-bottom: 60px;
  }
  .about .since p {
    font-size: 1.8rem;
  }
  .about .since p br {
    display: none;
  }
  .about .since p.top {
    font-size: 2.3rem;
  }
  .about .since h2 {
    margin: 30px 0;
  }
  .about .since .flexBox p {
    height: 60px;
    font-size: 2.0rem;
  }
  .about .sion .itemBox dl dt {
    font-size: 2.8rem;
  }
  .about .sion .itemBox dl dd {
    font-size: 1.9rem;
  }
  .about .sion .itemBox hr {
    height: 180px;
  }
  .about .brand .font44 {
    font-size: calc(var(--fontsize) * 0.54);
  }
  .about .brand .font44 br {
    display: none;
  }
  .about .brand .itemBox {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 30px 0;
  }
  .about .brand .text {
    gap: 20px 0;
  }
  .about .brand .info {
    gap: 15px 0;
  }
  .about .history .itemBox .item {
    padding: 30px 20px;
  }
  .about .history .slideBox {
    width: 120%;
  }
  .about .history .none768 {
	display: none;
  }
  .listPage .item .itemA {
    padding: 40px 60px;
	max-width: 100%;
  }
  .listPage .item .itemA span {
    width: 40px;
    height: 40px;
    right: 10px;
    bottom: 10px;
  }
  .listPage .item dl {
    margin: 20px 0 0;
  }
  .listPage .item dl dt {
    font-size: 2.3rem;
    margin: 0 0 10px;
  }
  .listPage .item dl dt em {
    font-size: 1.9rem;
  }
  .listPage .item dl dd {
    font-size: 1.7rem;
  }
  .viewPage .info .img .swiper-slide {
    padding: 100px 80px;
  }
  .viewPage .info figcaption {
    bottom: 60px;
  }
  .viewPage .info .title h6 {
    font-size: 1.8rem;
    margin: 10px 0;
  }
  .viewPage .bottom h4 {
    margin: 0 0 30px;
  }
  .viewPage .bottom .list {
    gap: 30px 10px;
  }
  .viewPage .bottom dl {
    margin: 20px 0 0;
  }
  .downloadPage .itemBox,
  .ad .itemBox {
    gap: 40px 20px;
  }
  .downloadPage .link a {
    font-size: 2.0rem;
  }
  .downloadPage .link hr {
    height: 14px;
  }
  .downloadPage .itemBox,
  .ad.ad2 .itemBox {
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
  }
  .pTop {
    font-size: 2.0rem;
    margin: 30px 0 0;
  }
  .inquiry .bottom {
    margin: 60px 0 0;
  }
  footer {
    padding: 60px 0;
  }
  footer .depth1 {
    gap: 15px 0;
    margin: 20px 0 0;
  }
  footer .depth1 li a {
    font-size: 2.2rem;
  }
  footer h3 {
    font-size: 2.8rem;
  }
  footer .topButton {
    position: absolute;
  }

  footer.footer_en h3 {
    font-size: 2.8rem;
  }
}

@media (max-width: 640px) {
  .font86,
  .font84,
  .font80,
  .font74,
  .font70,
  .font64 {
    font-size: calc(var(--fontsize) * 0.40);
  }
  .font58,
  .font52,
  .font48 {
    font-size: calc(var(--fontsize) * 0.44);
  }
  .font44,
  .font42 {
    font-size: calc(var(--fontsize) * 0.52);
  }

  .font38,
  .font36,
  .font34,
  .font32,
  .font30 {
    font-size: calc(var(--fontsize) * 0.60);
  }

  .listPage .itemTitle {
    font-size: 2.3rem;
  }

  .paddingBox {
    padding: 70px 0;
  }
  .paddingBox.topX {
    padding: 0 0 70px;
  }
  .paddingBox.bottomX {
    padding: 70px 0 0;
  }
  .marginTop120 {
    margin-top: 50px;
  }
  main .visual .text {
	top: 42%;
  }
  main .visual .slideButtons {
    top: auto;
    bottom: 100px;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  main .achievement .itemWrap {
    padding: 140px 0 0;
    margin: 40px 0 0;
  }
  main .achievement .itemWrap .top > p {
    font-size: 1.9rem;
  }
  main .achievement .itemBox {
    margin: -1.0rem 0 0;
  }
  main .work .flexBox {
    margin: 0 0 80px;
  }
  main .work .slideWrap .view {
    width: 70px;
    height: 70px;
    top: -35px;
    left: 0;
  }
  main .work .slideBox {
    width: 100%;
    left: 0;
  }
  main .work .slideBox .item {
    padding: 100% 0 0;
  }
  main .work .slideBox .img {
    height: 100%;
  }
  main .work .slideBox .img::before, main .work .slideBox .img::after {
    height: 100%;
    opacity: 1;
  }
  main .work .slideBox .img::after {
    -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;
  }
  main .work .slideBox .img img {
    -webkit-transform: scale(1.15);
            transform: scale(1.15);
  }
  main .work .slideBox .text h5 {
    font-size: 2.1rem;
    margin: 0 0 20px;
  }
  main .work .slideBox .text p {
    height: 3em;
    font-size: 1.6rem;
    opacity: 0.7;
  }
  main .connect .flexBox {
    gap: 20px 0;
  }
  main .connect .text {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    height: 12vw;
  }
  main .connect a {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    gap: 0 10px;
    margin: 0 0 0 auto;
  }
  main .connect a .icon {
    width: 50px;
    height: 50px;
    padding: 20px;
  }
  main .notice .itemBox {
    /* -ms-grid-columns: (1fr)[1];
        grid-template-columns: repeat(1, 1fr);
    gap: 20px 0; */
  }
  #sv .title .br640 {
	display: block;
  }
  #sv .title p {
	font-size: 2.2rem;
  }
  #sv .pathBox {
    margin-bottom: 0;
  }
  #sv .path {
    display: none;
  }
  #sv .top {
    margin-bottom: 50px;
  }
  .about .column {
    gap: 50px 0;
  }
  .about .since p.top {
    font-size: 2.0rem;
  }
  .about .since .flexBox {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .about .since .flexBox .xi-play {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .about .sion .itemBox {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 30px 0;
  }
  .about .sion .itemBox hr {
    width: 100%;
    height: 1px;
  }
  .about .history .itemBox {
    -ms-grid-columns: (1fr)[1];
        grid-template-columns: repeat(1, 1fr);
    margin: 40px 0 0;
  }
  .about .history .slideButtons button {
    width: 50px;
    height: 50px;
  }
  .about .history .slideBox {
    width: 100%;
  }
  .about .history .swiper-slide dl dt {
    font-size: 2.7rem;
  }
  .about .history .swiper-slide.on dl::before {
    left: 7.5%;
  }
  .about .history .swiper-slide.on dl::after {
    left: 9.5%;
  }
  .about .history .swiper-slide.on dl dt {
    font-size: 3.6rem;
  }
  .about .history .none640 {
	display: none;
  }
  .about .certi h5 {
    font-size: 2.2rem;
  }
  .about .certi .itemBox {
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
    gap: 30px 10px;
  }
  .about .certi .itemBox p {
    font-size: 1.7rem;
    margin: 15px 0 0;
  }
  .listPage .itemBox {
    -ms-grid-columns: (1fr)[1];
        grid-template-columns: repeat(1, 1fr);
    gap: 30px 0;
    margin: 40px 0 0;
  }
  .viewPage .info .slideButtons {
    width: calc(100% - 20px);
  }
  .viewPage .info .title h3 em,
  .viewPage .info .title p {
    font-size: 1.7rem;
  }
  .viewPage .info figcaption {
    font-size: 1.6rem;
  }
  .viewPage .info .features h5 {
    font-size: 1.9rem;
  }
  .viewPage .info .features ol em {
    width: 18px;
    height: 18px;
  }
  .viewPage .info .features p {
    font-size: 1.6rem;
  }
  .viewPage .info .link {
    height: 50px;
  }
  .viewPage .info .link span {
    font-size: 1.7rem;
  }
  .viewPage .bottom h4 {
    margin: 0 0 20px;
  }
  .viewPage .bottom .list {
    -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
  }
  .viewPage .bottom .itemA span {
    width: 34px;
    height: 34px;
    right: 10px;
    bottom: 10px;
  }
  .viewPage .bottom dl dt {
    font-size: 1.8rem;
  }
  .viewPage .bottom dl dd {
    font-size: 1.5rem;
  }
  .downloadPage .itemBox,
  .ad.ad2 .itemBox,
  .ad.video .itemBox,
  .ad .itemBox {
    -ms-grid-columns: (1fr)[1];
        grid-template-columns: repeat(1, 1fr);
    gap: 40px 0;
  }
  .downloadPage .item p,
  .ad .item p {
    font-size: 1.8rem;
  }
  .downloadPage .itemBox,
  .ad.ad2 .itemBox {
    margin: 30px 0 0;
  }
  .inquiry .contents > p {
    font-size: 1.5rem;
  }
  .inquiry .bottom {
    margin: 40px 0 0;
  }

  .downloadPage .link {
    gap: 20px 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    flex-wrap: wrap;
  }
  .downloadPage .link a{
  	font-size: 2.4rem;	
	color:#111;
  }

	.category-filter{
		width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        flex-direction: row;
	}
	.category-tabs {
		margin: 30px 0 20px;
	}
	.category-button {
		width:30%;
		background-color: none;
		border: 1px solid #ccc;
		color:#111;
		padding: 10px 10px;
		margin-right: 2%;
		border-radius: 20px;
		cursor: pointer;
		font-weight: 300;
		font-size: 1.3rem;
	}

	.category-button:last-child {
		margin-right:0;
	}
	.category-button.active {
		background-color: var(--color-main);
		border:none;
		color: white;
	}

  footer .copy {
	font-size: 12.2px;
  }
}