/**********************************************************
 main
***********************************************************/
* { margin: 0; padding: 0; }
html { width: 100%; height: 100%; }
body { font-family: "Noto Sans KR", sans-serif; top: 0; left: 0; position: fixed; width: 100%; height: 100%; -ms-scroll-chaining: none; overscroll-behavior: contain; overflow: hidden; transform: translate3d(0, 0, 0); -webkit-transform: translateZ(0); background-color: transparent; }
p, span { cursor: default; }
a p, a span { cursor: pointer; }
.hidden { display: none !important; }
.w-full { width: 100%; }

/* font */
.font-2xl { word-break: keep-all; font-size: 72px; }
.font-xl { word-break: keep-all; font-size: 36px; }
.font-md { word-break: keep-all; font-size: 22px; }
.font-ba { font-size: 18px; }
.font-sm { font-size: 14px; }
.font-bold { font-weight: bold; }
.font-semibold { font-weight: 500; }
.font-normal { font-weight: normal; }
.uppercase { text-transform: uppercase; }
.roboto { font-family: "Roboto", sans-serif; }

/* color */
.col-main { color: #02387a; }

/* content */
.content-size { max-width: 1460px; width: 100%; padding: 0 60px; }
.link-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 56px; height: 47px; font-size: 24px; border: 1px solid #ccc; -webkit-transition: 0.3s; transition: 0.3s; -webkit-transform-origin: left; transform-origin: left; }
.link-box:hover { border-color: #02387a; background-color: #02387a; color: #fff; }
#full_zone { position: fixed; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: 0.9s cubic-bezier(0.19, 0.6, 0.15, 0.99); transition: 0.9s cubic-bezier(0.19, 0.6, 0.15, 0.99); }
.section { background-color: #2b2b2b; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 100%; }
.btn_zone { position: fixed; right: 20px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.move_btn { cursor: pointer; margin: 1px 0; display: inline-block; width: 14px; height: 14px; border-radius: 50%; background-color: #fff; }
.mouse-whell { -webkit-animation: opening 1s linear both; animation: opening 1s linear both; cursor: default; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 2; }
.mouse { position: relative; width: 20px; height: 28px; border: 2px solid #fff; border-radius: 10px; margin-bottom: 10px; }
.mouse::after { content: ''; display: inline-block; width: 2px; height: 6px; border-radius: 30%; background-color: #fff; position: absolute; top: 5px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-animation: mouse 1s infinite; animation: mouse 1s infinite; }
.mouse-whell span { font-family: Roboto, sans-serif; font-size: 14px; font-weight: 500; color: #fff; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; }

@-webkit-keyframes mouse {
 0% { opacity: 0; top: 2px; }

 100% { opacity: 1; top: 10px; }
 }

@keyframes mouse {
 0% { opacity: 0; top: 2px; }

 100% { opacity: 1; top: 10px; }
 }

.top-btn { color: #fff; font-size: 24px; font-weight: bold; position: fixed; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 52px; height: 52px; background-color: #02387a; border-radius: 50%; bottom: 60px; right: 60px; }
.top-btn:hover { -webkit-animation: topBtn infinite 1s; animation: topBtn infinite 1s; }

@-webkit-keyframes topBtn { 0%, 75% { bottom: 60px; }

 15%, 45% { bottom: 55px; }

 30%, 60% { bottom: 65px; }
 }

@keyframes topBtn { 0%, 75% { bottom: 60px; }

 15%, 45% { bottom: 55px; }

 30%, 60% { bottom: 65px; }
 }

/* swiper */
.swiper { width: 100%; height: 100%; }
.swiper-slide { text-align: center; font-size: 18px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-size: cover; background-position: center; }

/* content-1 */
.content-swiper { overflow: hidden; }
.content-swiper-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; }
.content-swiper-bg.mo { display: none; }
.swiper-slide-active .content-swiper-bg { -webkit-animation: bgAni 2s ease-out both; animation: bgAni 2s ease-out both; }

@-webkit-keyframes bgAni {
 0% { -webkit-transform: scale(1.1); transform: scale(1.1); }

 100% { -webkit-transform: scale(1); transform: scale(1); }
 }

@keyframes bgAni {
 0% { -webkit-transform: scale(1.1); transform: scale(1.1); }

 100% { -webkit-transform: scale(1); transform: scale(1); }
 }

.content-swiper .content-swiper-box { -webkit-animation: opening 1s linear both; animation: opening 1s linear both; }

@-webkit-keyframes opening {
 0% { opacity: 0; }

 30% { opacity: 0; }

 100% { opacity: 1; }
 }

@keyframes opening {
 0% { opacity: 0; }

 30% { opacity: 0; }

 100% { opacity: 1; }
 }

.content-swiper .content-swiper-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; text-align: left; color: #fff; }
.content-swiper .content-swiper-logo { width: 162px; }
.content-swiper .content-swiper-title { line-height: 1.2; margin: 10px 0; font-weight: 500; }
.content-swiper .content-swiper-sub { line-height: 1.2; font-weight: 400; }
.content-swiper .content-swiper-nav { margin-top: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 24px; margin-bottom: 120px; }
.content-swiper .swiper-button-next,
.content-swiper .swiper-button-prev { position: static; width: 20px; height: 24px; margin: 0; }
.content-swiper .swiper-button-next::after,
.content-swiper .swiper-button-prev::after { content: "\f105"; font-family: fontawesome; color: #fff; font-size: 32px; font-weight: bold; }
.content-swiper .swiper-button-prev::after { content: "\f104"; }
.content-swiper .swiper-pagination { position: static; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.content-swiper .swiper-pagination .swiper-pagination-bullet { margin-right: 40px; background-color: #fff; opacity: 1; width: 10px; height: 10px; }
.content-swiper .swiper-pagination .swiper-pagination-bullet:first-of-type { margin-left: 40px; }
.content-swiper .swiper-pagination .swiper-pagination-bullet-active { background-color: transparent; border: 2px solid #fff; width: 18px; height: 18px; }
.content-swiper-detail { position: absolute; z-index: 3; left: 0; right: 0; margin: 0 auto; bottom: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.content-swiper-detail-box { -webkit-animation: opening 1s linear both; animation: opening 1s linear both; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 20px 40px; }
.content-swiper-detail-box:nth-of-type(2) { border-right: 1px solid rgba(255, 255, 255, 0.3); border-left: 1px solid rgba(255, 255, 255, 0.3); }
.content-swiper-detail-box>p { color: #fff; padding: 0 20px; line-height: 1.5; }
.content-swiper-detail-box>p>span { display: inline-block; margin-bottom: 10px; font-weight: bold; text-transform: uppercase; }

/* content-2 */
.content2 { position: relative; background-color: #fff; }
.company-box { line-height: 1.5; }
.company-box01 { opacity: 0; -webkit-transition: 1s; transition: 1s; }
.content2.active .company-box01 { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; opacity: 1; }
.company-box .link-box { margin-top: 60px; }
.company-back-box { top: 0; right: 0; position: absolute; width: 50%; height: 100%; overflow: hidden; }
.company-back-box img { -webkit-transition: 2s; transition: 2s; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.company-back-box:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); }

/* content-3 */
.content3 { background-color: #f8f8f8; }
.business { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; line-height: 1.5; width: 100%; height: 100%; }
.business-swiper { height: 50%; max-width: 1140px; width: 100%; max-height: 510px; margin: 50px auto 0; }
.business-swiper .swiper-wrapper { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; }
.business-swiper .swiper-slide { width: 33.333%; }
.business-box01 { max-width: 455px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; -webkit-transition: 0.3s; transition: 0.3s; }
.business-box01:hover { background-color: #fff; -webkit-box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc; }
.business-box01:first-of-type { margin-right: 20px; }
.business-box-img { width: 100%; height: calc(100% - 210px); }
.business-box-img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.business-box-content { -webkit-box-flex: 0; -ms-flex: none; flex: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; height: 210px; padding: 30px; }
.business-box-content .link-box { margin: 20px auto 0; }

/* content-4 */
.content4 { -webkit-transition: 1s; transition: 1s; opacity: 0; }
.content4.active { opacity: 1; }
.explain { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; }
.explain-box { overflow: hidden; -webkit-transition: 0.5s; transition: 0.5s; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: 1.5; width: 25%; background-size: cover; background-position: center; -webkit-filter: brightness(0.3); filter: brightness(0.3); background-color: rgba(0, 0, 0, 0.3); background-blend-mode: multiply; }
.explain-num { font-weight: bold; font-size: 36px; }
.explain-title { line-height: 1.2; margin-top: 40px; font-weight: bold; text-align: center; word-break: keep-all; font-size: 36px; width: 100%; }
.explain-sub { height: 24px; }
.explain-box .link-box { margin: 60px 0; }
.explain-sub, .explain-title,
.explain-box .link-box { text-align: center; word-break: keep-all; opacity: 0; z-index: -1; -webkit-transform: translateX(-100px); transform: translateX(-100px); }
.explain-box.bg1 { background-image: url(../images/main/content04_bg_01.png?ver=220513); }
.explain-box.bg2 { background-image: url(../images/main/content04_bg_02.png?ver=220513); }
.explain-box.bg3 { background-image: url(../images/main/content04_bg_03.png?ver=220513); }
.explain-box.bg4 { background-image: url(../images/main/content04_bg_04.png?ver=220609); }

/* active */
.explain-box.active { -webkit-filter: brightness(1); filter: brightness(1); -webkit-transition-delay: 0s; transition-delay: 0s; width: 30%; }
.explain-box .explain-num,
.explain-box .explain-title,
.explain-box .explain-sub,
.explain-box .link-box { -webkit-transition: 0.4s; transition: 0.4s; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; z-index: 1; -webkit-transform: translateX(0); transform: translateX(0); }
.explain-box .explain-num { font-size: 72px; }
.explain-box .explain-title { opacity: 1; }
.explain-box .explain-sub { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; opacity: 1; }
.explain-box .link-box { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; color: #fff; opacity: 1; }

/* customer */
.content5 { line-height: 1.5; background-color: #fff; }
.customer { overflow: hidden; background-image: url(../images/main/customer_bg.png); background-position: bottom -50px right; background-repeat: no-repeat; text-align: center; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
/*.customer-swiper { position: relative; margin-top: 40px; width: 100%; max-height: 50%; height: 360px; }
.customer-swiper .swiper-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.customer-swiper .swiper-slide { -webkit-transition: 0.3s; transition: 0.3s; width: calc(25% - 10px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-shadow: 2px 2px 10px #ccc; box-shadow: 2px 2px 10px #ccc; }
.customer-swiper .swiper-slide:hover { -webkit-transform: scale(1.05); transform: scale(1.05); }
.customer-swiper .swiper-slide .img-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 50%; width: 100%; }
.customer-swiper .swiper-slide .img-box img { max-width:100%; }
.customer-swiper .swiper-slide .text-box { width: 100%; height: 50%; padding: 30px 20px; background-color: #f9f9f9; text-align: left; font-size: 18px; }
.customer-swiper .swiper-slide .text-box p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; word-wrap: break-word; line-height: 1.4; height: 2.8em; }
.customer-swiper .swiper-pagination { bottom: -40px !important; }
.customer-swiper .swiper-pagination-bullet-active { background-color: #fff; border: 1px solid #0083a7; }*/
.customer.content-size {max-width: 1420px; margin: 0 auto; padding: 0 20px;}
.customer .contact-box { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; padding-bottom: 100px;  text-align: initial; margin-top: 90px;}
.customer .contact-item { margin-right: 30px; width: calc(33.333% - 10px); padding: 40px 0; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 3px solid var(--main-color); overflow: hidden; }
.customer .contact-item:nth-of-type(2) { border-color: var(--sub-color); }
.customer .contact-item:last-of-type { margin-right: 0; }
.customer .svg-box { position: absolute; top: 0; left: 0; width: 60px; height: 60px; background-color: var(--main-color); -webkit-transition: 0.3s; transition: 0.3s; }
.customer .contact-item:nth-of-type(2) .svg-box { background-color: var(--sub-color); }
.customer .svg-box svg { padding: 18px 20px; }
.customer .contact-item:hover .svg-box { width: 100%; height: 100%; }
.customer .contact-item>p { z-index: 2; margin: 0 54px; font-size: var(--text-md); font-weight: bold; -webkit-transition: 0.3s; transition: 0.3s; }
.customer .contact-item>span { z-index: 2; color: #333; letter-spacing: -0.9px; line-height: 1.6; -webkit-transition: 0.3s; transition: 0.3s; }
.customer .contact-item>span>b { margin-top:5px; display:inline-block; }
.customer .contact-item:hover>p,
.customer .contact-item:hover>span { color: #fff; }

/* news */
.content6 { background-color: #f8f8f8; }
.news { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; }
.news-title-box { line-height: 1.5; background-color: #f8f8f8; width: 400px; position: relative; z-index: 2; }
.news-title-box .link-box { margin-top: 50px; }
.news-swiper { position: relative; padding: 40px; width: calc(100% - 400px); max-height: 520px; height: 65%; }
.news-swiper .swiper-slide {width:100% !important; opacity: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-line-pack: justify; align-content: space-between; height: 100%; -webkit-transition: 0.3s; transition: 0.3s; }
.news-swiper .swiper-slide.swiper-slide-prev { -webkit-transition: 0.1s; transition: 0.1s; visibility: hidden; }
.news-swiper .swiper-slide.swiper-slide-next { opacity: 0.5; }
.news-swiper .swiper-slide.swiper-slide-active { opacity: 1; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; }
.newsbox { padding: 25px; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.08); box-shadow: 0 0 10px rgba(0, 0, 0, 0.08); background-color: #fff; height: calc(50% - 10px); -webkit-transition: all 0.3s; transition: all 0.3s; }
.newsbox-long { display: -webkit-box; display: -ms-flexbox; display: flex; width: calc(66.6% - 10px); }
.newsbox-short { width: calc(33% - 10px); }
.newsbox-long>.newsbox-img,
.newsbox-long>.newsbox-text { width: 50%; }
.newsbox-short>.newsbox-text { width: 100%; }
.newsbox-text { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; text-align: left; }
.newsbox-long>.newsbox-img { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.newsbox-long>.newsbox-img img { max-width: 90%; width: 100%; margin-right: 10%; }
.newsbox-text-date { font-size: 12px; color: #818186; }
.newsbox-text-title { font-size: 18px; font-weight: bold; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; line-height: 1.2; height: 2.4em; width: 100%; }
.newsbox-text-sub { font-size: 14px; color: #333; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; line-height: 1.2; height: 3.6em; width: 100%; }
.news-swiper .swiper-button-next,
.news-swiper .swiper-button-prev { top: 0; right: 80px; width: 20px; height: 24px; margin: 0; }
.news-swiper .swiper-button-prev { left: auto; right: 120px; }
.news-swiper .swiper-button-next::after,
.news-swiper .swiper-button-prev::after { content: "\f105"; font-family: fontawesome; color: #000; font-size: 28px; font-weight: bold; }
.news-swiper .swiper-button-prev::after { content: "\f104"; }

/**********************************************************
 responsive
***********************************************************/
/* height */
@media screen and (max-height: 600px) {
 /* font */
 .font-2xl { font-size: 42px; }
 .font-md { font-size: 20px; }
 .font-sm { font-size: 12px; }

 /* content */
 .content-swiper-detail { bottom: 10px; }
 .content-swiper-detail-box { padding: 5px 20px; }
 .content-swiper-detail-box img { width: 50px; }
 .content-swiper-detail-box>p>span { margin-bottom: 3px; }

 /* business */
 .business-swiper { margin: 20px auto; }
 .business-box-img { height: calc(100% - 150px); }
 .business-box-content { padding: 10px; height: 150px; }

 /* customer */
 .customer-swiper { margin-top: 20px; }
 .customer-swiper .swiper-slide .text-box { font-size: 16px; padding: 5px; }

 /* news */
 .news-swiper { height: 75%; padding: 30px 10px 10px; }
 .newsbox-text-sub { display: none; }
 .news-swiper .swiper-button-prev { right: 80px; }
 .news-swiper .swiper-button-next { right: 40px; }
 }

/* width */
@media screen and (min-width: 1024px){
 .news-swiper .swiper-slide.swiper-slide-active .newsbox:hover { -webkit-transform: scale(1.05); transform: scale(1.05); }
 }

@media screen and (max-width: 1280px){
 .content-swiper-detail-box { padding: 20px 20px; }
 .content-swiper-detail-box>p { padding: 0 10px; }

 /* news */
 .news-title-box { width: 300px; }
 .news-swiper { width: calc(100% - 300px); }
 }

@media screen and (max-width: 1023px){
 .mouse-whell { right: 10px; }
 .content-size { background-size: contain; background-position: bottom right; padding: 0 20px; }
 .content-swiper .content-swiper-box { padding: 0 40px 0 20px; }
 .customer-swiper .swiper-pagination { display: block; }
 .top-btn { width: 40px; height: 40px; bottom: 20px; right: 20px; -webkit-animation: none !important; animation: none !important; }

  .customer .contact-box { -ms-flex-wrap: wrap; flex-wrap: wrap; }
 .customer .contact-item:nth-of-type(1),
 .customer .contact-item:nth-of-type(2) { width: calc(50% - 15px); margin-bottom: 30px; }
 .customer .contact-item:nth-of-type(2) { margin-right: 0; }
 .customer .contact-item:nth-of-type(3) { width: 100%; }

 .customer .svg-box { position: absolute; top: 0; left: 0; width: 50px; height: 50px; }
.customer .svg-box svg { padding: 13px 15px; }
 }

@media screen and (max-width: 960px) {
 /* font */
 .font-2xl { font-size: 52px; }
 .font-xl { font-size: 28px; }
 .font-md { font-size: 18px; }
 .title-box-base { margin-top: 50px; line-height: 1.2; }

 /* content */
 .content-swiper-detail-box { display: none; }
 .content-swiper-detail-box:nth-of-type(2) { border: 0; }
 .content-swiper-detail-box.active { display: -webkit-box; display: -ms-flexbox; display: flex; }

 /* company */
 .company-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; padding: 0; }
 .content2 .company-box01 { padding: 20px; margin-top: 50px; height: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
 .company-box .link-box { margin-top: 40px; }
 .company-back-box { position: static; width: 100%; height: 50%; }

 /* explain */
 .explain-title { font-size: 24px; }
 .explain-box .explain-sub { font-size: 14px; }

 /* business */
 .business-swiper { margin: 20px auto; }

 /* customr */
 .customer-swiper { padding-bottom: 40px; }
 .customer-swiper .swiper-pagination { bottom: 0 !important; }


 /* news */
 .news { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
 .news-title-box { margin-top: 50px; }
 .news-swiper { width: 100%; padding: 40px 0 0 0; }
 .news-swiper .swiper-slide { opacity: 1; }
 .newsbox-text-date { font-size: 11px; }
 .newsbox-text-title { font-size: 14px; }
 .newsbox-text-sub { font-size: 12px; }
 .news-swiper .swiper-slide.swiper-slide-prev { -webkit-transition: 0.3s; transition: 0.3s; visibility: visible; }
 .news-title-box .link-box { margin-top: 20px; }
 .newsbox-long { width: calc(66.6%-5px); }
 .newsbox-short { width: calc(33.3% - 5px); }
 .newsbox { padding: 15px; height: calc(50% - 5px); }
 .news-swiper { height: calc(100% - 280px); }
 .newsbox-long>.newsbox-img img { max-width: 90%; margin-right: 10%; }
 }

@media screen and (max-width: 799px){
 .business-box01 { background-color: #fff; -webkit-box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc; }
 .content-swiper .content-swiper-box { position: relative; height: 270px; }
 .content-swiper .content-swiper-nav { margin: 0; position: absolute; bottom: 0; left: 20px; }
 .content-swiper-bg.mo { display: none; }
 .content-swiper-bg.mo { display: block; }

 /* explain */
 .explain { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
 .explain-box { width: 100%; height: 25%; }
 .explain-box.active { width: 100%; height: 30%; }
 .explain-box .link-box { margin: 25px 0; width: 36px; height: 36px; font-size: 14px; }
 }

@media screen and (max-width: 639px) {
 /* content1 */
 .content-swiper .content-swiper-logo { width: 84px; }

 /* business */
 .business br { display: none; }

 /* customer */
 .customer-swiper { max-width: 380px; padding-bottom: 0; }
 .customer-swiper .swiper-slide:hover { -webkit-transform: scale(1); transform: scale(1); }
 .customer-swiper .swiper-slide .text-box { font-size: 16px; }
 .customer .contact-box {margin-top: 30px; padding-bottom: 50px;}
 .customer .contact-item { width: 100% !important; margin-right: 0 !important; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center; padding:10px 0; margin-top:initial; }
 .customer .contact-item>p { margin: 10px 0; }
 .customer .contact-item>span>b { margin-top:initial; }
 .customer .svg-box { text-align: left; }
 .customer .contact-item:nth-of-type(1), .customer .contact-item:nth-of-type(2) {margin-bottom: 20px;}

 /* news */
 .news-swiper .swiper-button-next { right: 0; }
 .news-swiper .swiper-button-prev { right: 40px; }
 .customer-swiper .swiper-pagination { bottom: 10px !important; }
 }

@media screen and (max-width: 480px){
 .font-2xl { font-size: 36px; }
 .font-xl { font-size: 24px; }
 .font-md { font-size: 16px; }
 .content-swiper .content-swiper-box { padding: 0 40px 0 20px; }

 /* business */
 .business-box-content { padding: 15px; }

 /* explain */
 .explain-box .explain-title { padding: 0 5px; font-size: 20px; }
 .explain-box .explain-sub { display: block; text-align: center; padding: 0 5px; font-size: 12px; }

 /* news */
 .newsbox { padding: 10px; }
 }

@media screen and (max-width: 359px) { }

@media screen and (max-width: 960px) and (orientation: landscape){
 .font-2xl { font-size: 32px; }
 .font-xl { font-size: 20px; }
 .font-md { font-size: 14px; }

 /* content */
 .content-swiper .content-swiper-box { margin-bottom: 50px; height: auto; }
 .content-swiper .content-swiper-nav { position: static; }
 .content-swiper .swiper-slide { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
 .content-swiper .content-swiper-nav { margin-top: 10px; margin-bottom: 0; }
 .content-swiper .content-swiper-logo { width: 100px; }

 /* company */
 .company-box .link-box { margin-top: 10px; }

 /* customer */
 .customer-swiper .swiper-slide .img-box,
 .customer-swiper .swiper-slide .img-box img { max-height: 100%; }
 .customer-swiper .swiper-slide .text-box { font-size: 14px; }

 /* explain */
 .explain-title { margin-top: 0; }
 .explain-box .link-box { margin: 10px 0 0; width: 20px; height: 20px; font-size: 10px; -webkit-transition-delay: 0s !important; transition-delay: 0s !important; }
 .explain-box .explain-title { font-size: 10px; }
 .explain-box .explain-title,
 .explain-box .explain-sub { font-size: 10px; }

 /* news */
 .news { -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; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
 .news-title-box { width: 200px; }
 .news-swiper { overflow: hidden; width: calc(100% - 200px); height: 70%; }
 .news-swiper .swiper-slide,
 .news-swiper .swiper-slide.swiper-slide-next { opacity: 1; }
 }

@media screen and (max-width: 800px) and (orientation: landscape){
 .explain-box .explain-title { font-size: 14px; }
 .explain-box .explain-sub { display: none; }
 }