@charset "utf-8";

/* English translated*/
html[lang="en"] .main-slogan .inner{max-width: 100rem; padding-right: 5rem;}
html[lang="en"] .main-slogan .t-1{display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
html[lang="en"] .main-slogan .t-2{display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; overflow: hidden;}
html[lang="en"] .main-slogan .t-3{display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;}
html[lang="en"] .main-slogan .t-4{display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;}
html[lang="en"] .quick-menu .t-2{display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical; overflow: hidden;}
html[lang="en"] .service-tit .info p{display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical; overflow: hidden;}
html[lang="en"] .wrap-photo li .title button{}
html[lang="en"] .wrap-photo li .title button font{max-width: 14rem;  display: -webkit-box;  -webkit-line-clamp: 1;  -webkit-box-orient: vertical; overflow: hidden;}

@media screen and (max-width:1400px) {
  html[lang="en"] .wrap-photo ul > li .title::after{display:none;}
}

/* main layout */
._objWidget:hover ._fnctAdmin{display:block;}


/************************************************
section01 - visual slogan
************************************************/
._contentBuilder .multipleDiv:nth-child(1){position:relative; }
._contentBuilder .multipleDiv:nth-child(1) ._objHtml{position:absolute;top: 25rem;left: 0;z-index:1;}

.main-slogan {color:#fff;line-height:1.3;max-width: 170rem;margin: 0 auto;}
.main-slogan .inner{}
.main-slogan .link-btn {display: flex;justify-content: center;align-items: center;margin-top: 8rem;color: #fff;width: 20rem;height: 5.6rem;font-size: 1.7rem;font-weight: 400;border: 1px solid #fff;transition: .25s;background: transparent;}
.main-slogan .link-btn:hover {border: 1px solid #000;color: #fff;background: #000;}

.main-slogan .t-1{font-size:3rem;margin-bottom: .5rem;display: block;font-weight: 500;}
.main-slogan .t-2{font-size: 6.5rem;font-weight: 200;color: #fff;}
.main-slogan .t-2 em {font-weight: 800;}
.main-slogan .t-3{font-size: 6.5rem;font-weight: 800;color: #efc718;}
.main-slogan .t-4 {margin-top: 1rem;font-size: 2rem;color: #fff;font-weight: 400;line-height: 3rem;}

@media screen and (max-width:1279px) {
  ._contentBuilder .multipleDiv:nth-child(1) ._objHtml {left: 6rem;top: 13.5rem;}
  .main-slogan .t-1 {margin-bottom: 2rem;font-size: 4rem;}
  .main-slogan .t-2 {font-size: 2rem;}
  .main-slogan .link-btn {width: 16rem;height: 4.8rem;font-size: 1.6rem;margin-top: 6rem;}
}

@media screen and (max-width:768px) {
  .main-slogan .t-3 {font-size:  4rem;}
  .main-slogan .t-4 {display: none;}
  ._contentBuilder .multipleDiv:nth-child(1) ._objHtml {top: 23.8rem;left:2rem;}
}

@media screen and (max-width:650px) {
  .main-slogan .t-1 {font-size: 2rem;}
  .main-slogan .t-2 {font-size: 3.5rem;}
  .main-slogan .t-3 {font-size:  3.5rem;}
}

/************************************************
section03 - Service
************************************************/
._contentBuilder > div:nth-child(3) {background: #d6e5f6 url(./../../images/main/bg-service.jpg) no-repeat center top;}
#multipleContentsDiv_template14_12 {max-width: 170rem;padding: 26rem 0 8rem;}

@media screen and (max-width: 1750px) {
  #multipleContentsDiv_template14_12 {padding: 26rem 5rem 8rem;}
}
@media screen and (max-width: 900px) {
  #multipleContentsDiv_template14_12 {padding: 26rem 5rem 8rem;}
}
@media screen and (max-width: 768px) {
  #multipleContentsDiv_template14_12 {padding: 7rem 5rem 8rem;}
}


/************************************************************************
Service
************************************************************************/
.service-tit {position: absolute;left: 50%;transform: translateX(-50%);top: -18rem;width: 100%;;z-index: 1;color: #fff;text-align: center;}
.service-tit .tit {font-size: 5.5rem;color: #fff;}
.service-tit .info p {font-size: 2rem;font-weight: 400;color: #fff;}
.wrap-service .frame {width: 100%;height: 48rem;}
.wrap-service .right {position: relative;width: 100%;height: 100%;background: url(./../../images/main/img-service2.png) no-repeat center / cover;}
.wrap-service .right > a {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;}
.wrap-service .right > a::before {content:'';position: absolute;left: 3.6rem;top:3.6rem;bottom:3.6rem;right: 3.6rem;border: 1px solid #fff;opacity: .3;transition: opacity .25s;}
.wrap-service .right strong {position: relative;padding-top: 9rem;color: #fff;font-size: 2.6rem;font-weight: 500;}
.wrap-service .right strong::before {content: '';position: absolute;left: 50%;top: 0;margin-left: -4.2rem;width: 8.4rem;height: 7.3rem;background: url(./../../images/icon/ic-service4.png) no-repeat center;}
.wrap-service .right > a:hover strong::before {animation: updown infinite 1s ease-in-out;}
.wrap-service .right > a:hover::before {opacity: 1;}

@keyframes updown {
  50% {transform: translateY(-1.5rem);}
}

@media screen and (max-width: 768px) {
  .service-tit{position:initial;transform:none;margin-bottom:30px;}
  .service-tit .tit{font-size:4rem;}
  .service-tit .info p{font-siz:1.6rem;}
  .wrap-service .frame{height:28rem;}
  .wrap-service .right strong{font-size:1.9rem;padding-top: 65px;}
  .wrap-service .right strong::before{width:60px;height:53px;background-size:contain;margin-left: -30px;}
  .wrap-service .right > a::before{left: 3rem;top: 3rem;bottom: 3rem;right: 3rem;}
}