:root {
  --color-main: #006AAA;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-border: #e0e0e0;
  --th-background: #f9f9f9;
  --th-fontColor: #111;
  --th-fontSize: 1.7rem;
  --td-background: #f9f9f9;
  --td-fontColor: #222;
  --td-fontSize: 1.6rem;
}

.font56 {
  --fontsize: 5.6rem;
  font-size: var(--fontsize);
}

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

.font46 {
  --fontsize: 4.6rem;
  font-size: var(--fontsize);
}

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

.font40 {
  --fontsize: 4.0rem;
  font-size: var(--fontsize);
}

.font32 {
  --fontsize: 3.2rem;
  font-size: var(--fontsize);
}

@media (max-width: 1800px) {
  .w1760,
  .w1700 {
    padding: 0 20px;
  }
  .allMenu .depth3 > li > a {
    font-size: 1.6rem;
  }
}
@media (max-width: 1600px) {
  .font56 {
    font-size: calc(var(--fontsize) * 0.8);
  }
  .font48,
  .font46 {
    font-size: calc(var(--fontsize) * 0.86);
  }
  .font44,
  .font40 {
    font-size: calc(var(--fontsize) * 0.9);
  }
  header .depth1 > li > span a {
    padding: 0 40px;
  }
  .allMenu .inner {
    padding: 60px 0;
  }
  .allMenu .depth2 {
    margin: 40px 0 0;
  }
  .subContents .listBox .item {
    gap: 0 40px;
  }
  .subContents .listBox .text br {
    display: none;
  }
  .subContents .battery .process .itemBox {
    grid-template-columns: 22% 1.5% 22% 1.5% 22% 1.5% 22%;
  }
  .subContents .battery .process .circle .inner {
    padding: 40px 10px 20px;
  }
  .cookiePopup .inner {
    gap: 0 20px;
  }
}
@media (max-width: 1400px) {
  .font56 {
    font-size: calc(var(--fontsize) * 0.76);
  }
  .font48,
  .font46 {
    font-size: calc(var(--fontsize) * 0.8);
  }
  .font44,
  .font40 {
    font-size: calc(var(--fontsize) * 0.84);
  }
  header .headerBox > *:not(.navWrap) {
    flex-shrink: 0;
  }
  header .navWrap {
    margin: 0 auto;
    position: relative;
    top: auto;
    left: auto;
    transform: translate(0, 0);
  }
  header .depth1 > li > span a {
    padding: 0 35px;
  }
  header .online {
    margin: 0;
  }
  header .language {
    margin: 0 20px;
  }
  .allMenu .depth1 {
    gap: 0 10px;
  }
  .allMenu .depth1 > li > a {
    font-size: 2.4rem;
  }
  .allMenu .depth2 {
    gap: 25px 20px;
    margin: 40px 0 0;
  }
  .allMenu .depth2.wDepth3 > li {
    width: calc(50% - 10px);
  }
  .subContents .placeBox {
    gap: 0 60px;
  }
  .subContents .infoBox .text {
    padding: 40px;
  }
  .subContents .whyBox .item p {
    margin: 0 0 20px;
  }
  .subContents .listBox .img {
    width: 38%;
    padding: 12.35% 0;
  }
  .subContents .battery .whyBox .item {
    height: auto;
  }
  .subContents .battery .process .circle .off .icon {
    height: 60px;
  }
  .subContents .battery .process .circle .bottom {
    margin: 20px 0 0;
  }
  .subContents .stainless .spec .item {
    gap: 0 30px;
    padding: 30px;
  }
  .subContents .view .information {
    gap: 0 40px;
  }
  .subContents .view .inquiry .top {
    padding: 35px 30px;
  }
  .subContents .view .inquiry .top::after {
    width: calc(100% - 60px);
  }
  .subContents .view .inquiry .inner {
    padding: 30px 30px 60px;
  }
  .subContents .careers .top {
    padding: 120px 60px;
  }
}
@media (max-width: 1240px) {
  .w1200,
  .w1080 {
    padding: 0 20px;
  }
}
@media (max-width: 1200px) {
  html,
  body {
    font-size: 56.25%;
  }
  header nav {
    display: none;
  }
  header .online {
    margin: 0 0 0 auto;
  }
  .allMenu .inner {
    padding: 40px 0 0;
  }
  .allMenu .depth1 > li > a,
  .allMenu .depth2 > li > a {
    display: inline-block;
    width: calc(100% - 100px);
    position: relative;
  }
  .allMenu .depth1 > li > a span,
  .allMenu .depth2 > li > a span {
    display: inline-block;
    width: 100px;
    color: var(--color-main);
    text-align: right;
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
  }
  .allMenu .depth1 > li > a i,
  .allMenu .depth2 > li > a i {
    font-size: 2.4rem;
    font-weight: 600;
  }
  .allMenu .depth1 {
    grid-template-columns: inherit;
    gap: 30px 0;
  }
  .allMenu .depth1 > li.wDepth3 {
    grid-area: inherit;
  }
  .allMenu .depth2 {
    gap: 25px 0;
  }
  .allMenu .depth2.wDepth3 {
    max-height: inherit;
    position: relative;
  }
  .allMenu .depth2.wDepth3 > li {
    width: 100%;
  }
  .allMenu .depth2.wDepth3 > li > a {
    display: block;
  }
  .allMenu .depth2,
  .allMenu .depth3 {
    height: 0;
    margin: 0;
    overflow: hidden;
    visibility: visible;
  }
  .allMenu .depth2.on,
  .allMenu .depth3.on {
    height: auto;
  }
  .allMenu .depth2.on {
    margin: 30px 0 0;
  }
  .allMenu .depth3 {
    background: #f5f5f5;
  }
  .allMenu .depth3.on {
    padding: 20px;
    margin: 20px 0 0;
  }
  main .visual .bg {
    width: 120%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  main .online {
    margin: 80px 0;
  }
  .subContents .dropWrap {
    height: 70px;
  }
  .subContents .dropWrap .home {
    width: 70px;
  }
  .subContents .dropWrap .drop {
    width: 260px;
  }
  .subContents .dropWrap .drop button {
    padding: 0 20px;
  }
  .subContents .dropWrap .drop ul {
    padding: 22.5px 20px;
  }
  .subContents .message .flexBox {
    gap: 0 40px;
  }
  .subContents .placeBox {
    gap: 0 40px;
  }
  .subContents .placeBox .img {
    width: 45%;
  }
  .subContents .profile .information dl {
    gap: 0 20px;
    padding: 0 20px;
  }
  .subContents .philosophy .circle .inner {
    padding: 0 0 40px;
  }
  .subContents .news .searchBox .selectCustom {
    width: 200px;
  }
  .subContents .whyBox .itemBox {
    gap: 0 20px;
  }
  .subContents .zigzagBox .item {
    gap: 0 30px;
  }
  .subContents .products .gridBox {
    gap: 20px;
  }
  .subContents .products .item .text {
    padding: 20px;
  }
  .subContents .business .gridBox {
    gap: 40px 20px;
  }
  .subContents .battery .process .itemBox {
    width: 100%;
    max-width: 620px;
    grid-template-columns: calc(50% - 20px) calc(50% - 20px);
    gap: 40px;
    margin: 0 auto;
  }
  .subContents .battery .process .itemBox > .arrow {
    display: none;
  }
  .subContents .hydrogen .explain .itemBox {
    gap: 0 30px;
  }
  .subContents .hydrogen .cases .itemBox {
    gap: 0 10px;
  }
  .subContents .hydrogen .cases .item p {
    font-size: 1.5rem;
  }
  .subContents .liquid .information .flexBox {
    gap: 0 20px;
  }
  .subContents .stainless .brand .itemBox {
    gap: 20px;
  }
  .subContents .stainless .type .gridBox {
    gap: 40px 20px;
  }
  .subContents .stainless .stainlessSlide .buttonBox {
    width: calc(100% - 40px);
  }
  .subContents .stainless .spec .itemBox {
    gap: 20px;
  }
  .subContents .stainless .spec .text {
    flex-shrink: 0;
  }
  .subContents .constructions .brand .itemBox {
    gap: 10px;
  }
  .subContents .constructions .brand .text {
    padding: 0 20px 20px;
  }
  .subContents .view .information .list {
    width: 70px;
  }
  .subContents .view .information .thumb {
    width: calc(100% - 90px);
  }
  .subContents .view .detail .inner {
    padding: 30px 20px 0;
  }
  .subContents .view .inquiry .top {
    padding: 30px 20px;
  }
  .subContents .view .inquiry .top::after {
    width: calc(100% - 40px);
  }
  .subContents .view .inquiry .inner {
    padding: 30px 20px 40px;
  }
  .subContents .careers .application ul h6 {
    width: 160px;
  }
  .subContents .careers .process .circle .inner {
    padding: 15% 10px 30px;
  }
  .subContents .careers .process .circle .icon {
    height: 50px;
  }
  .subContents .recruit .entry ul {
    gap: 10px;
  }
  .subContents .recruit .entry ul li {
    font-size: 1.5rem;
    padding: 0 20px;
  }
  .subContents .recruit .entry ul .icon {
    width: 20px;
    height: 20px;
  }
  footer .contact.typeMain .title {
    flex-direction: column;
    align-items: flex-start;
  }
  footer .contact.typeBusiness .itemBox {
    gap: 0 20px;
  }
  footer .contact.typeBusiness .item {
    height: auto;
    padding: 40px 0;
  }
  footer .footerBox {
    padding: 40px 0;
  }
  footer .footerBox .top {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px 0;
  }
  .cookiePopup .inner {
    flex-wrap: wrap;
    gap: 20px;
  }
  .cookiePopup .text {
    width: 100%;
  }
  .cookiePopup .buttonBox {
    margin-left: auto;
  }
}
@media (max-width: 960px) {
  .font56 {
    font-size: calc(var(--fontsize) * 0.7);
  }
  .font48,
  .font46 {
    font-size: calc(var(--fontsize) * 0.74);
  }
  .font44,
  .font40 {
    font-size: calc(var(--fontsize) * 0.78);
  }
  .font32 {
    font-size: calc(var(--fontsize) * 0.8);
  }
  .gridBox.grid4 {
    grid-template-columns: repeat(3, 1fr);
  }
  .hoverButton.bottom {
    width: 220px;
  }
  main .gridBox {
    gap: 40px 15px;
  }
  main .news .more {
    margin: 0 0 0 auto;
  }
  main .news .item a,
  main .news .notice a {
    gap: 0 20px;
  }
  main .news .item a span,
  main .news .notice a span {
    width: 100px;
  }
  .subContents .dropWrap .drop {
    width: 220px;
  }
  .subContents .company .gridBox {
    gap: 40px 15px;
  }
  .subContents .message .flexBox {
    flex-direction: column;
    gap: 0;
  }
  .subContents .message .text .right {
    text-align: left;
    margin: 40px 0 0;
  }
  .subContents .message .img {
    text-align: right;
    margin-top: -80px;
  }
  .subContents .placeBox .text h6 {
    margin: 0 0 10px;
  }
  .subContents .placeBox .text .column {
    gap: 20px 0;
  }
  .subContents .placeBox .hoverButton {
    padding: 14px 24px;
  }
  .subContents .profile .information .itemBox {
    grid-template-columns: repeat(1, 1fr);
  }
  .subContents .profile .information dl {
    min-height: 70px;
  }
  .subContents .profile .information dl:nth-child(odd)::after {
    display: none;
  }
  .subContents .profile .list .gridBox {
    gap: 40px 15px;
  }
  .subContents .history .itemBox {
    gap: 0 60px;
  }
  .subContents .history .listBox span {
    width: calc(100% + 30px);
    left: -30px;
  }
  .subContents .history .listBox.reverse span {
    left: 0;
  }
  .subContents .philosophy .circle .inner .icon {
    height: 60px;
    margin: auto 0 30px;
  }
  .subContents .philosophy .circle .inner p {
    font-size: 1.9rem;
  }
  .subContents .philosophy .explain .item {
    gap: 0 40px;
    padding: 0 40px;
  }
  .subContents .news .searchBox {
    flex-wrap: wrap;
    gap: 10px;
  }
  .subContents .news .searchBox .textBox {
    width: calc(100% - 110px);
  }
  .subContents .news .boardBox .item > a {
    padding: 20px;
  }
  .subContents .partners .itemBox ul {
    gap: 10px;
  }
  .subContents .infoBox .itemBox {
    width: 100%;
    max-width: 635px;
    min-height: inherit;
    grid-template-columns: inherit;
    margin: 0 auto;
  }
  .subContents .infoBox .img {
    padding: 26.375% 0;
  }
  .subContents .infoBox .text {
    padding: 30px;
  }
  .subContents .infoBox .symbol {
    width: 200px;
    height: 205px;
  }
  .subContents .hoverShadow .item::before {
    border-radius: 50px;
    opacity: 1;
  }
  .subContents .whyBox .itemBox {
    flex-direction: column;
    gap: 20px 0;
  }
  .subContents .whyBox .item {
    width: 100%;
  }
  .subContents .listBox .itemBox {
    width: 100%;
    max-width: 565px;
    margin: 0 auto;
  }
  .subContents .listBox .item {
    flex-direction: column;
    gap: 40px 0;
    text-align: center;
  }
  .subContents .listBox .img {
    width: 100%;
    padding: 32.5% 0;
  }
  .subContents .zigzagBox .item {
    flex-direction: column;
    gap: 40px 0;
  }
  .subContents .zigzagBox .img,
  .subContents .zigzagBox .text {
    width: 100%;
  }
  .subContents .zigzagBox .img {
    order: 1;
  }
  .subContents .zigzagBox .text {
    order: 2;
  }
  .subContents .storageBox .flexBox {
    gap: 0 10px;
  }
  .subContents .storageBox .item {
    padding: 30px 10px;
  }
  .subContents .storageBox .item p {
    font-size: 1.6rem;
    margin: 20px 0 0;
  }
  .subContents .products .gridBox {
    gap: 10px;
  }
  .subContents .products .item .arrow {
    width: 35px;
    height: 35px;
  }
  .subContents .business .item .pBox {
    gap: 15px 0;
    padding: 30px 20px;
  }
  .subContents .business .item.blank .text br {
    display: none;
  }
  .subContents .battery .cases .gridBox,
  .subContents .battery .supply .gridBox {
    gap: 40px 15px;
  }
  .subContents .smart .fields .gridBox {
    gap: 40px 15px;
  }
  .subContents .liquid .information .flexBox {
    flex-direction: column;
    gap: 30px 0;
  }
  .subContents .liquid .cases .gridBox {
    gap: 20px 15px;
  }
  .subContents .mobile .customized .gridBox {
    gap: 40px 15px;
  }
  .subContents .stainless .type .gridBox {
    gap: 40px 15px;
  }
  .subContents .stainless .cases .gridBox {
    gap: 15px;
  }
  .subContents .stainless .stainlessSlide .buttonBox button {
    width: 50px;
    height: 50px;
  }
  .subContents .stainless .technical .gridBox {
    gap: 40px 15px;
  }
  .subContents .stainless .spec .item {
    flex-direction: column;
    justify-content: flex-start;
    gap: 30px 0;
  }
  .subContents .stainless .spec .text span br {
    display: none;
  }
  .subContents .stainless .colors .itemBox {
    gap: 40px 10px;
  }
  .subContents .constructions .brand .itemBox {
    grid-template-columns: repeat(3, 1fr);
  }
  .subContents .lifestyle .gallery .gridBox {
    gap: 15px;
  }
  .subContents .view .information {
    gap: 0 20px;
  }
  .subContents .view .information .imgBox {
    width: 50%;
    flex-direction: column;
    gap: 10px 0;
  }
  .subContents .view .information .list,
  .subContents .view .information .thumb {
    width: 100%;
  }
  .subContents .view .information .list {
    gap: 0 10px;
    grid-template-rows: inherit;
    grid-template-columns: repeat(5, 1fr);
  }
  .subContents .view .detail .inner {
    padding: 20px 10px;
  }
  .subContents .view .tableBox {
    overflow-x: scroll;
  }
  .subContents .view .tableBox table {
    width: 900px;
  }
  .subContents .view .itemBox .item {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px 0;
  }
  .subContents .view .itemBox .aBox {
    margin-left: auto;
  }
  .subContents .careers .top {
    padding: 120px 40px;
  }
  .subContents .careers .top p {
    font-size: 2.4rem;
  }
  .subContents .careers .process .itemBox {
    width: 100%;
    max-width: 620px;
    grid-template-columns: calc(50% - 20px) calc(50% - 20px);
    gap: 40px;
    margin: 0 auto;
  }
  .subContents .careers .process .itemBox > .arrow {
    display: none;
  }
  .subContents .careers .process .circle .inner {
    padding: 15% 10px 25%;
  }
	.subContents .recruit .information .item h4 {
		font-size: 2.4rem;
	}
  .subContents .contact .inquiry .inquiryBox dl dt br {
    display: none;
  }
  footer .contact .box {
    padding: 60px 0;
  }
  footer .footerBox .link a {
    font-size: 1.6rem;
  }
  footer .footerBox .affiliate {
    width: 260px;
  }
  footer .footerBox .affiliate button {
    padding: 0 20px;
  }
  footer .footerBox .affiliate ul {
    padding: 30px 20px 15px;
  }
  footer .footerBox .affiliate.on button::after {
    width: calc(100% - 40px);
  }
  .cookiePopup {
    padding: 30px 0;
  }
}
@media (max-width: 768px) {
  .font56 {
    font-size: calc(var(--fontsize) * 0.58);
  }
  .font48,
  .font46 {
    font-size: calc(var(--fontsize) * 0.64);
  }
  .font44,
  .font40 {
    font-size: calc(var(--fontsize) * 0.68);
  }
  .font32 {
    font-size: calc(var(--fontsize) * 0.7);
  }
  .title h5 {
    gap: 0 6px;
  }
  .title h5::before {
    width: 6px;
    height: 6px;
  }
  .circleMore {
    width: 90px;
    height: 90px;
  }
  .circleMore:hover .arrow::before {
    width: 50px;
    height: 50px;
  }
  .gridBox .item h5 {
    font-size: 1.7rem;
  }
  .col120 {
    gap: 80px 0;
  }
  .paddingBox {
    padding: 80px 0;
  }
  .hoverButton {
    padding: 12px 20px;
  }
  .hoverButton.bottom {
    width: auto;
    height: auto;
    padding: 15px 35px;
  }
  header {
    height: 80px;
  }
  header .logo {
    width: 160px;
  }
  header .online {
    padding: 6px 14px;
  }
  header .language {
    padding: 10px 0;
  }
  header .language button img {
    width: 24px;
  }
  header .menuButton {
    width: 26px;
    height: 20px;
  }
  .allMenu {
    height: calc(100vh - 80px);
    top: 80px;
  }
  main .paddingBox {
    padding: 60px 0;
  }
  main .visual .flexBox button {
    width: 50px;
    height: 50px;
  }
  main .visual .flexBox button img {
    width: 16px;
  }
  main .news .more {
    width: 24px;
    height: 24px;
  }
  main .news .itemBox {
    padding: 0 20px;
  }
  main .news .item a,
  main .news .notice a {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px 0;
  }
  main .news .item a span,
  main .news .notice a span {
    width: 100%;
    flex-shrink: inherit;
  }
  main .news .notice {
    height: auto;
    padding: 20px;
  }
  main .online {
    margin: 60px 0;
  }
  #sv {
    height: 220px;
    margin-top: 80px;
  }
  .subContents .dropWrap {
    display: none;
  }
  .subContents .placeBox {
    flex-direction: column;
    gap: 40px 0;
    align-items: flex-start;
  }
  .subContents .placeBox .img,
  .subContents .placeBox .text {
    width: 100%;
  }
  .subContents .placeBox .img {
    order: 1;
  }
  .subContents .placeBox .text {
    order: 2;
  }
  .subContents .history .bar {
    left: 10px;
  }
  .subContents .history .itemBox {
    gap: 40px 0;
    flex-direction: column;
    padding: 0 40px;
  }
  .subContents .history .itemBox .img {
    text-align: left;
  }
  .subContents .history .img {
    order: 1;
    transform: translateY(0);
  }
  .subContents .history .listBox {
    order: 2;
  }
  .subContents .philosophy .circle .inner .icon {
    height: 50px;
    margin: auto 0 20px;
  }
  .subContents .partners .itemBox ul {
    grid-template-columns: repeat(3, 1fr);
  }
  .subContents .listBox .hoverButton {
    margin: 30px 0 0;
  }
  .subContents .zigzagBox .text .pBox {
    margin: 20px 0 0;
  }
  .subContents .storageBox .flexBox {
    flex-wrap: wrap;
    gap: 20px;
  }
  .subContents .storageBox .item {
    width: calc(50% - 10px);
  }
  .subContents .products .gridBox {
    gap: 20px;
    grid-template-columns: repeat(2, 1fr);
  }
  .subContents .bottomSlide .buttonBox button {
    width: 18px;
  }
  .subContents .business .item h5 {
    font-size: 1.9rem;
  }
  .subContents .battery .process .itemBox {
    gap: 20px;
    grid-template-columns: calc(50% - 10px) calc(50% - 10px);
    justify-content: center;
  }
  .subContents .battery .supply .gridBox {
    gap: 40px 20px;
    grid-template-columns: repeat(2, 1fr);
  }
  .subContents .smart .fields .gridBox {
    gap: 40px 20px;
    grid-template-columns: repeat(2, 1fr);
  }
  .subContents .smart .handled .tabTitle {
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .subContents .smart .handled .tabTitle li {
    width: calc((100% - 20px) / 3);
    height: 50px;
  }
  .subContents .hydrogen .explain .itemBox {
    flex-direction: column;
    gap: 20px 0;
  }
  .subContents .hydrogen .explain .item {
    gap: 0 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .subContents .hydrogen .explain .item .img {
    width: 40%;
    flex-shrink: 0;
  }
  .subContents .hydrogen .explain .item dl {
    margin: 0;
  }
  .subContents .hydrogen .fuel .flexBox {
    gap: 0 10px;
  }
  .subContents .hydrogen .cases .itemBox {
    width: 100%;
    max-width: 595px;
    gap: 30px 20px;
    flex-wrap: wrap;
    margin: 0 auto;
  }
  .subContents .hydrogen .cases .item {
    width: calc((100% - 40px) / 3);
  }
  .subContents .mobile .customized .item p {
    margin: 20px 0 0;
  }
  .subContents .stainless .brand .itemBox {
    gap: 15px;
  }
  .subContents .stainless .brand .logo {
    height: 160px;
    padding: 0 20px;
  }
  .subContents .stainless .brand .text {
    padding: 30px 20px 20px;
  }
  .subContents .stainless .brand .item .hoverButton {
    width: calc(100% - 40px);
    padding: 15px;
  }
  .subContents .stainless .spec .item {
    padding: 30px 20px;
  }
  .subContents .stainless .colors .itemBox {
    grid-template-columns: repeat(4, 1fr);
  }
  .subContents .constructions .brand .logo {
    height: 50px;
    padding: 0;
  }
  .subContents .constructions .brand .text {
    padding: 0 20px 20px;
  }
  .subContents .view .information {
    flex-direction: column;
    gap: 40px 0;
  }
  .subContents .view .information .imgBox {
    width: 100%;
    flex-direction: row;
    gap: 0 10px;
  }
  .subContents .view .information .list {
    width: 80px;
    gap: 10px 0;
    grid-template-rows: repeat(5, 1fr);
    grid-template-columns: inherit;
  }
  .subContents .view .information .thumb {
    width: calc(100% - 90px);
  }
  .subContents .view .information .hoverButton {
    margin: 30px 0 0;
  }
  .subContents .view .detail > h5 {
    font-size: 2rem;
  }
  .subContents .view .inquiry .top h6 {
    font-size: 1.8rem;
  }
  .subContents .careers .process .itemBox {
    gap: 20px;
    grid-template-columns: calc(50% - 10px) calc(50% - 10px);
  }
  .subContents .recruit .information .item {
    padding: 30px 0;
  }
  .subContents .recruit .entry ul {
    grid-template-columns: repeat(1, 1fr);
    gap: 10px 0;
  }
  footer .contact.typeLink h5 {
    font-size: 1.9rem;
  }
  footer .contact.typeBusiness .itemBox {
    flex-direction: column;
    gap: 20px 0;
  }
  footer .footerBox {
    position: relative;
  }
  footer .footerBox .link {
    gap: 0 10px;
  }
  footer .footerBox .link span {
    width: 6px;
    height: 6px;
  }
  footer .footerBox .text {
    align-items: flex-start;
  }
  footer .footerBox .topButton {
    position: absolute;
    top: 20px;
    right: 20px;
  }
}
@media (max-width: 640px) {
  .title {
    margin: 0 0 30px;
  }
  .title p {
    font-size: 1.6rem;
  }
  .gridBox.grid3, .gridBox.grid4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .gridBox .item h5 {
    margin: 15px 0 0;
  }
  .hoverButton {
    padding: 10px 20px;
  }
  .hoverButton.bottom {
    margin-top: 40px;
  }
  .col120 {
    gap: 60px 0;
  }
  .paddingBox {
    padding: 60px 0;
  }
  header .online {
    padding: 4px 10px;
  }
  header .online span {
    font-size: 1.3rem;
  }
  header .language {
    margin: 0 15px;
  }
  header .language button img {
    width: 20px;
  }
  header .menuButton {
    width: 20px;
    height: 16px;
  }
  header .menuButton span {
    height: 2px;
  }
  header .menuButton.on span:nth-child(1) {
    transform: translate(0, 1px) rotate(-45deg);
  }
  header .menuButton.on span:nth-child(3) {
    transform: translate(0, -1px) rotate(45deg);
  }
  main .gridBox {
    gap: 25px 10px;
  }
  main .visual .bg {
    width: 160%;
  }
  main .visual .flexBox {
    justify-content: center;
    position: relative;
  }
  main .visual .flexBox button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  main .visual .flexBox .prevButton {
    left: 0;
  }
  main .visual .flexBox .nextButton {
    right: 0;
  }
  main .visual .contents span {
    bottom: 20px;
  }
  main .online dl dd {
    font-size: 1.7rem;
  }
  #sv {
    height: 180px;
  }
  .subContents .subPage h3 {
    margin: 0 0 30px;
  }
  .subContents .subPage h3.pageTitle {
    font-size: 2.6rem;
  }
  .subContents .pBox.blueDot {
    gap: 5px 0;
  }
  .subContents .pBox.blueDot .dot {
    gap: 0 5px;
  }
  .subContents .pBox.blueDot .dot::before {
    width: 3px;
    height: 3px;
  }
  .subContents .company .gridBox {
    gap: 25px 10px;
  }
  .subContents .message .flexBox {
    gap: 40px 0;
  }
  .subContents .message .img {
    text-align: left;
    margin-top: 0;
  }
  .subContents .placeBox .hoverButton {
    padding: 10px 20px;
  }
  .subContents .profile .information dl dt {
    width: 60px;
  }
  .subContents .profile .list .gridBox {
    gap: 25px 10px;
  }
  .subContents .history .list {
    gap: 20px 0;
  }
  .subContents .philosophy .circle .itemBox {
    grid-template-columns: repeat(2, calc(50% - 6px));
  }
  .subContents .philosophy .circle .item {
    margin: -12px;
  }
  .subContents .philosophy .circle .inner {
    padding: 0 0 20%;
  }
  .subContents .philosophy .circle .inner .icon {
    height: 60px;
    margin: auto 0 40px;
  }
  .subContents .philosophy .explain .item {
    height: auto;
    flex-direction: column;
    gap: 30px 0;
    text-align: center;
    padding: 40px;
  }
  .subContents .news .searchBox > * {
    height: 55px;
  }
  .subContents .news .searchBox .selectCustom {
    width: calc(50% - 5px);
  }
  .subContents .news .boardBox .item > a {
    padding: 20px 10px;
  }
  .subContents .infoBox .text {
    padding: 20px;
  }
  .subContents .whyBox .item {
    padding: 30px;
  }
  .subContents .listBox .text h5 {
    margin: 10px 0 20px;
  }
  .subContents .zigzagBox .text .hoverButton {
    margin: 30px 0 0;
  }
  .subContents .storageBox .flexBox {
    gap: 10px;
  }
  .subContents .storageBox .item {
    width: calc(50% - 5px);
  }
  .subContents .products h6 {
    font-size: 1.7rem;
    margin: 0 0 15px;
  }
  .subContents .products .gridBox {
    gap: 10px;
  }
  .subContents .products .item .text {
    padding: 15px 10px;
  }
  .subContents .products .item .text p {
    font-size: 1.5rem;
  }
  .subContents .products .item .arrow {
    width: 30px;
    height: 30px;
  }
  .subContents .bottomSlide .buttonBox button {
    width: 16px;
  }
  .subContents .business .gridBox {
    grid-template-columns: repeat(1, 1fr);
  }
  .subContents .business .item.blank .text br {
    display: block;
  }
  .subContents .battery .process .itemBox {
    grid-template-columns: 64%;
    gap: 20px 0;
  }
  .subContents .battery .cases .gridBox,
  .subContents .battery .supply .gridBox {
    gap: 25px 10px;
  }
  .subContents .battery .supply .item h6 {
    margin: 15px 0 10px;
  }
  .subContents .smart .fields .gridBox {
    width: 100%;
    max-width: 380px;
    gap: 30px 0;
    grid-template-columns: repeat(1, 1fr);
    margin: 0 auto;
  }
  .subContents .smart .fields .item h6 {
    margin: 15px 0 10px;
  }
  .subContents .smart .what .column > div > p {
    margin: 10px 0 0;
  }
  .subContents .smart .handled .tabTitle {
    gap: 5px;
  }
  .subContents .smart .handled .tabTitle li {
    width: calc((100% - 10px) / 3);
  }
  .subContents .hydrogen .explain .itemBox {
    width: 100%;
    max-width: 360px;
    gap: 30px 0;
    margin: 0 auto;
  }
  .subContents .hydrogen .explain .item {
    flex-direction: column;
    gap: 20px 0;
    align-items: flex-start;
  }
  .subContents .hydrogen .explain .item .img {
    width: 100%;
  }
  .subContents .hydrogen .fuel .flexBox {
    flex-direction: column;
    gap: 40px 0;
    align-items: center;
  }
  .subContents .hydrogen .cases .itemBox {
    column-gap: 5px;
  }
  .subContents .hydrogen .cases .item {
    width: calc((100% - 10px) / 3);
  }
  .subContents .hydrogen .cases .item p {
    margin: 15px 0 0;
  }
  .subContents .liquid .cases .gridBox {
    gap: 15px 10px;
  }
  .subContents .liquid .cases .gridBox p {
    padding: 15px 20px;
  }
  .subContents .mobile .customized .gridBox {
    gap: 25px 10px;
  }
  .subContents .mobile .customized .item p {
    margin: 15px 0 0;
  }
  .subContents .stainless .brand .itemBox {
    grid-template-columns: repeat(1, 1fr);
    gap: 30px 0;
  }
  .subContents .stainless .type .gridBox {
    gap: 25px 10px;
  }
  .subContents .stainless .cases .gridBox {
    gap: 10px;
  }
  .subContents .stainless .stainlessSlide .buttonBox {
    width: calc(100% - 20px);
  }
  .subContents .stainless .stainlessSlide .buttonBox button {
    width: 40px;
    height: 40px;
  }
  .subContents .stainless .stainlessSlide .pagination {
    gap: 0 5px;
    bottom: 10px;
  }
  .subContents .stainless .technical .gridBox {
    gap: 25px 10px;
  }
  .subContents .stainless .technical .item p {
    margin: 15px 0 0;
  }
  .subContents .stainless .spec .itemBox {
    gap: 10px;
  }
  .subContents .stainless .spec .item {
    gap: 20px 0;
    padding: 20px 10px;
  }
  .subContents .stainless .colors .itemBox {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 10px;
  }
  .subContents .constructions .brand .itemBox {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .subContents .lifestyle .gallery .gridBox {
    gap: 10px;
  }
  .subContents .view .information .imgBox {
    flex-direction: column;
    gap: 5px 0;
  }
  .subContents .view .information .list,
  .subContents .view .information .thumb {
    width: 100%;
  }
  .subContents .view .information .list {
    gap: 0 5px;
    grid-template-rows: inherit;
    grid-template-columns: repeat(5, 1fr);
  }
  .subContents .view .detail .text.column {
    gap: 20px 0;
  }
  .subContents .view .itemBox dl {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px 0;
  }
  .subContents .view .itemBox dl dt {
    width: 100%;
  }
  .subContents .view .itemBox .hoverButton {
    padding: 8px 20px;
  }
  .subContents .view .gridBox {
    gap: 25px 10px;
  }
  .subContents .view .inquiry .top {
    padding: 20px 10px;
  }
  .subContents .view .inquiry .top::after {
    width: calc(100% - 20px);
  }
  .subContents .view .inquiry .inner {
    padding: 20px 10px 40px;
  }
  .subContents .careers .top {
    padding: 80px 20px;
  }
  .subContents .careers .top p {
    font-size: 2.2rem;
  }
  .subContents .careers .application ul li {
    padding: 20px 0;
  }
  .subContents .careers .application ul h6 {
    width: 120px;
  }
  .subContents .careers .process .itemBox {
    gap: 10px;
    grid-template-columns: calc(50% - 5px) calc(50% - 5px);
  }
  .subContents .careers .process .circle .inner {
    padding: 15% 10px 15%;
  }
  .subContents .recruit .information .item h4 {
    font-size: 2.1rem;
    margin: 0 0 15px;
  }
  .subContents .recruit .entry ul li {
    height: 55px;
    gap: 0 8px;
    padding: 0 15px;
  }
  .subContents .recruit .entry ul .icon {
    width: 18px;
    height: 18px;
  }
  .subContents .contact .note {
    gap: 20px 0;
  }
  footer .contact .box {
    padding: 40px 0;
  }
  footer .contact.typeMain .box {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px 0;
  }
  footer .contact.typeBusiness .item {
    padding: 20px 0;
  }
  footer .contact.typeBusiness .inquiry h4 {
    font-size: 1.8rem;
    margin: 0 0 15px;
  }
  footer .contact.typeBusiness .info h6 {
    font-size: 1.7rem;
  }
  footer .contact.typeBusiness .info span {
    font-size: 3.2rem;
  }
  footer .footerBox .logo {
    width: 160px;
    height: 25px;
  }
}
@media (max-width: 570px) {
  footer .contact.typeLink .box {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 20px;
  }
  footer .contact.typeLink .map {
    width: 100%;
  }
  footer .contact.typeLink .map a {
    height: 280px;
  }
  footer .contact.typeLink .item {
    width: calc(50% - 10px);
  }
}
@media (max-width: 440px) {
  html,
  body {
    font-size: 50%;
  }
}