@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap");
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: "U+00-024F";
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: "U+00-024F";
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: "U+00-024F";
}
.FtColor_Main {
  color: #009995 !important;
}

.FtColor_Wh {
  color: #FFFFFF !important;
}

.FtColor_Green {
  color: #00B47D !important;
}

.FtEn {
  font-family: "early-sans-variable", "serif";
}

.FtTw {
  font-family: "Noto Sans TC", "Microsoft JhengHei";
}

.FtXL, h2 {
  font-size: 55px;
  line-height: 60px;
}

.FtL, h3 {
  font-size: 26px;
  line-height: 32px;
}

.FtML, h4, .ProjectBox .ProjectItem .TxtBox .ProjectTitle {
  font-size: 20px;
  line-height: 32px;
}

.FtM, body, h5, .ClassTabInner .ClassTab .TabTxt, .GoogleMapBtn span, .Btn01, a.Btn01, button.Btn01, .Btn02, a.Btn02, button.Btn02, input:not([type="checkbox"]):not([type=radio]):not([type=button]), select, textarea, .CommonFormBg .CommonForm .FieldGroup {
  font-size: 16px;
  line-height: 30px;
}

.FtS, .FooterGridBox .FooterGrid.Info .CompanyInfo, .CommonFormBg .CommonForm .FieldGroup .FieldContent label.error, .CommonFormBg .CommonForm .FieldGroup .FieldContent .PlaceHolderTxt {
  font-size: 14px;
  line-height: 26px;
}

@media screen and (max-width: 1024px) {
  .FtXL, h2 {
    font-size: 50px;
    line-height: 55px;
  }

  .FtL, h3 {
    font-size: 22px;
    line-height: 33px;
  }

  .FtML, h4, .ProjectBox .ProjectItem .TxtBox .ProjectTitle {
    font-size: 20px;
    line-height: 30px;
  }

  .FtM, body, h5, .ClassTabInner .ClassTab .TabTxt, .GoogleMapBtn span, .Btn01, a.Btn01, button.Btn01, .Btn02, a.Btn02, button.Btn02, input:not([type="checkbox"]):not([type=radio]):not([type=button]), select, textarea, .CommonFormBg .CommonForm .FieldGroup {
    font-size: 16px;
    line-height: 30px;
  }

  .FtS, .FooterGridBox .FooterGrid.Info .CompanyInfo, .CommonFormBg .CommonForm .FieldGroup .FieldContent label.error, .CommonFormBg .CommonForm .FieldGroup .FieldContent .PlaceHolderTxt {
    font-size: 14px;
    line-height: 26px;
  }
}
@media screen and (max-width: 767px) {
  .FtXL, h2 {
    font-size: 42px;
    line-height: 48px;
  }

  .FtL, h3 {
    font-size: 20px;
    line-height: 28px;
  }

  .FtML, h4, .ProjectBox .ProjectItem .TxtBox .ProjectTitle {
    font-size: 18px;
    line-height: 28px;
  }

  .FtM, body, h5, .ClassTabInner .ClassTab .TabTxt, .GoogleMapBtn span, .Btn01, a.Btn01, button.Btn01, .Btn02, a.Btn02, button.Btn02, input:not([type="checkbox"]):not([type=radio]):not([type=button]), select, textarea, .CommonFormBg .CommonForm .FieldGroup {
    font-size: 15px;
    line-height: 27px;
  }

  .FtS, .FooterGridBox .FooterGrid.Info .CompanyInfo, .CommonFormBg .CommonForm .FieldGroup .FieldContent label.error, .CommonFormBg .CommonForm .FieldGroup .FieldContent .PlaceHolderTxt {
    font-size: 13px;
    line-height: 20px;
  }
}
.CommonInner, .AboutTxtBox, .IntroBg .IntroBox, .PlanBox {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.CommonEndBlock {
  height: 120px;
}

@media screen and (max-width: 1440px) {
  .CommonInner, .AboutTxtBox, .IntroBg .IntroBox, .PlanBox {
    width: 70%;
  }
}
@media screen and (max-width: 1024px) {
  .CommonInner, .AboutTxtBox, .IntroBg .IntroBox, .PlanBox {
    width: 84%;
    max-width: 824px;
  }
}
@-webkit-keyframes loading-bg {
  0% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(0.1, 0.1);
  }
}
@-moz-keyframes loading-bg {
  0% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(0.1, 0.1);
  }
}
@-ms-keyframes loading-bg {
  0% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(0.1, 0.1);
  }
}
@keyframes loading-bg {
  0% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(0.1, 0.1);
  }
}
@-webkit-keyframes loading-bg-s {
  0% {
    transform: scale(1, 1) translate(0, 0);
  }
  100% {
    transform: scale(0.2, 0.2) translate(0, -60%);
  }
}
@-moz-keyframes loading-bg-s {
  0% {
    transform: scale(1, 1) translate(0, 0);
  }
  100% {
    transform: scale(0.2, 0.2) translate(0, -60%);
  }
}
@-ms-keyframes loading-bg-s {
  0% {
    transform: scale(1, 1) translate(0, 0);
  }
  100% {
    transform: scale(0.2, 0.2) translate(0, -60%);
  }
}
@keyframes loading-bg-s {
  0% {
    transform: scale(1, 1) translate(0, 0);
  }
  100% {
    transform: scale(0.2, 0.2) translate(0, -60%);
  }
}
@-webkit-keyframes menus-in {
  0% {
    left: 100%;
  }
  100% {
    left: calc( 100% - 375px );
  }
}
@-moz-keyframes menus-in {
  0% {
    left: 100%;
  }
  100% {
    left: calc( 100% - 375px );
  }
}
@-ms-keyframes menus-in {
  0% {
    left: 100%;
  }
  100% {
    left: calc( 100% - 375px );
  }
}
@keyframes menus-in {
  0% {
    left: 100%;
  }
  100% {
    left: calc( 100% - 375px );
  }
}
@-webkit-keyframes menus-out {
  0% {
    left: calc( 100% - 375px );
  }
  100% {
    left: 100%;
  }
}
@-moz-keyframes menus-out {
  0% {
    left: calc( 100% - 375px );
  }
  100% {
    left: 100%;
  }
}
@-ms-keyframes menus-out {
  0% {
    left: calc( 100% - 375px );
  }
  100% {
    left: 100%;
  }
}
@keyframes menus-out {
  0% {
    left: calc( 100% - 375px );
  }
  100% {
    left: 100%;
  }
}
@-webkit-keyframes square-act {
  0% {
    transform: rotate(0deg);
  }
  33% {
    transform: rotate(45deg);
  }
  66% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-45deg);
  }
}
@-moz-keyframes square-act {
  0% {
    transform: rotate(0deg);
  }
  33% {
    transform: rotate(45deg);
  }
  66% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-45deg);
  }
}
@-ms-keyframes square-act {
  0% {
    transform: rotate(0deg);
  }
  33% {
    transform: rotate(45deg);
  }
  66% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-45deg);
  }
}
@keyframes square-act {
  0% {
    transform: rotate(0deg);
  }
  33% {
    transform: rotate(45deg);
  }
  66% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-45deg);
  }
}
@-webkit-keyframes op1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes op1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-ms-keyframes op1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes op1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes op0 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes op0 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-ms-keyframes op0 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes op0 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes width100to0 {
  0% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}
@-moz-keyframes width100to0 {
  0% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}
@-ms-keyframes width100to0 {
  0% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}
@keyframes width100to0 {
  0% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}
@-webkit-keyframes width0to100 {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@-moz-keyframes width0to100 {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@-ms-keyframes width0to100 {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes width0to100 {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@-webkit-keyframes schOpen {
  0% {
    width: 0;
  }
  100% {
    width: 670px;
  }
}
@-moz-keyframes schOpen {
  0% {
    width: 0;
  }
  100% {
    width: 670px;
  }
}
@-ms-keyframes schOpen {
  0% {
    width: 0;
  }
  100% {
    width: 670px;
  }
}
@keyframes schOpen {
  0% {
    width: 0;
  }
  100% {
    width: 670px;
  }
}
@-webkit-keyframes schClose {
  0% {
    width: 670px;
  }
  100% {
    width: 0;
  }
}
@-moz-keyframes schClose {
  0% {
    width: 670px;
  }
  100% {
    width: 0;
  }
}
@-ms-keyframes schClose {
  0% {
    width: 670px;
  }
  100% {
    width: 0;
  }
}
@keyframes schClose {
  0% {
    width: 670px;
  }
  100% {
    width: 0;
  }
}
@-webkit-keyframes close-rot {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(11deg);
  }
}
@-moz-keyframes close-rot {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(11deg);
  }
}
@-ms-keyframes close-rot {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(11deg);
  }
}
@keyframes close-rot {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(11deg);
  }
}
@-webkit-keyframes close-in {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-10px);
  }
}
@-moz-keyframes close-in {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-10px);
  }
}
@-ms-keyframes close-in {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-10px);
  }
}
@keyframes close-in {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-10px);
  }
}
@-webkit-keyframes rot180 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
@-moz-keyframes rot180 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
@-ms-keyframes rot180 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
@keyframes rot180 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
@-webkit-keyframes rot0 {
  0% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@-moz-keyframes rot0 {
  0% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@-ms-keyframes rot0 {
  0% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes rot0 {
  0% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@-webkit-keyframes topbtn-hover {
  0% {
    top: 0;
  }
  50% {
    top: 8px;
  }
  100% {
    top: 0;
  }
}
@-moz-keyframes topbtn-hover {
  0% {
    top: 0;
  }
  50% {
    top: 8px;
  }
  100% {
    top: 0;
  }
}
@-ms-keyframes topbtn-hover {
  0% {
    top: 0;
  }
  50% {
    top: 8px;
  }
  100% {
    top: 0;
  }
}
@keyframes topbtn-hover {
  0% {
    top: 0;
  }
  50% {
    top: 8px;
  }
  100% {
    top: 0;
  }
}
body {
  font-family: "early-sans-variable", "Noto Sans TC", "Microsoft JhengHei";
  color: #333333;
  background-color: #FFFFFF;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
}

div, input, select, button, section, textarea, a, ol, ul, li {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: "early-sans-variable", "Noto Sans TC", "Microsoft JhengHei";
}

img {
  vertical-align: middle;
}

a, a:hover, a:link, a:visited {
  cursor: pointer;
  color: inherit;
}

a:hover {
  text-decoration: none;
}

input, select, button, textarea {
  outline: none;
  vertical-align: middle;
}

button, input[type="submit"] {
  border: 0;
}

button {
  background-color: transparent;
  cursor: pointer;
}

select:disabled {
  cursor: default;
}

p {
  font-weight: 400;
  margin: 0;
}

::selection {
  color: #FFFFFF;
  background-color: #EFAF00;
}

article {
  margin: 20px auto;
}

strong, b {
  font-weight: 700;
}

.FwB {
  font-weight: bold;
}

.FsI {
  font-style: italic;
}

.Fw4 {
  font-weight: 400;
}

.Fw5 {
  font-weight: 500;
}

.Fw7 {
  font-weight: 700;
}

.Fw9 {
  font-weight: 900;
}

.TaL {
  text-align: left !important;
}

.TaC {
  text-align: center !important;
}

.TaR {
  text-align: right !important;
}

.MarginXL {
  margin: 50px 0 !important;
}

.MarginL {
  margin: 30px 0 !important;
}

.MarginM {
  margin: 20px 0 !important;
}

.MarginS {
  margin: 10px 0 !important;
}

.Discell {
  display: table-cell;
}

.DisiB {
  display: inline-block;
}

.DisB {
  display: block;
}

.DisF {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

.DisN {
  display: none;
}

.DisNI {
  display: none !important;
}

.FtBreak {
  word-break: break-all;
}

.AutoImg {
  width: 100%;
  height: auto;
}

.HasPicAuto img {
  width: 100% !important;
  height: auto !important;
}

.WordBreak {
  word-break: break-all;
}

hr.Line01 {
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  margin: 20px 0;
  border: 0 !important;
  background-color: #CCCCCC;
}

ol {
  padding: 0 0 0 1.9rem;
  margin-left: -0.2rem;
}
ol li::marker {
  font-size: 1rem;
  color: inherit;
}

ul {
  text-align: left;
}

ul.FlexliBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 3px 0;
}
ul.FlexliBox li {
  width: calc( 50% - 16px );
}

ul.Circle {
  padding: 0 0 0 1em;
}
ul.Circle li {
  list-style: none;
  position: relative;
  margin: 2px 0;
  font-weight: bold;
}
ul.Circle li::before {
  display: block;
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 100%;
  position: absolute;
  top: 0.7em;
  left: -1em;
  background-color: #054984;
}
ul.Circle.White li::before {
  background-color: #FFFFFF;
}

.TxtIndent01 {
  text-indent: 30px;
  background: #fcf;
}

.LineH1 {
  line-height: 1 !important;
}

.LineH13 {
  line-height: 1.3 !important;
}

.LineH15 {
  line-height: 1.5 !important;
}

.LineH18 {
  line-height: 1.8 !important;
}

.LineH2 {
  line-height: 2 !important;
}

.TxtUnderLine {
  text-decoration: underline;
}

.ALink {
  text-decoration: underline !important;
}

.Clear {
  clear: both;
  height: 0;
}

.OutFrame {
  width: 100%;
  max-width: 1920px;
  min-width: 360px;
  margin: 0 auto;
  overflow: hidden;
  background-color: #FFFFFF;
  text-align: center;
}

.OutFrame.PopOpen {
  position: fixed;
}

.InnerFrame {
  display: inline-block;
  width: 100%;
  margin: 0 auto;
  text-align: left;
}

.InnerFrame.PopOpen {
  position: fixed;
}

@media screen and (max-width: 767px) {
  .PhoneNone {
    display: none;
  }

  ul.Circle li::before {
    width: 5px;
    height: 5px;
    top: 0.6em;
  }

  ul.FlexliBox li {
    width: 100%;
  }
}
.IndexMainShow {
  position: relative;
  width: 100%;
}
.IndexMainShow .MainShowBox {
  position: relative;
  width: 100%;
}
.IndexMainShow .MainShowBox .ShowTxt {
  width: 25%;
  max-width: 480px;
  position: absolute;
  left: 5.5%;
  top: 19vw;
  z-index: 9;
}
.IndexMainShow .MainShowBox .ShowTxt img {
  width: 100%;
  height: auto;
}
.IndexMainShow .MainShowBox .ShowImg {
  position: relative;
  width: 100%;
  max-height: 914px;
  z-index: 0;
  line-height: 1;
  overflow: hidden;
  background-color: #D9E4ED;
}
.IndexMainShow .MainShowBox .ShowImg img, .IndexMainShow .MainShowBox .ShowImg video {
  width: 102%;
  height: auto;
  max-width: 1932px;
  object-fit: cover;
}
.IndexMainShow .MainShowBox .ShowImg::after {
  display: block;
  content: "";
  width: 100%;
  height: 6px;
  position: absolute;
  bottom: -3px;
  background-color: #D9E4ED;
}

.IndexProducts {
  width: 100%;
  position: relative;
  padding: 145px 0 140px 0;
  margin: 0 auto;
  background-color: #D9E4ED;
}
.IndexProducts .GridBox {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  position: relative;
  width: 88%;
  max-width: 1248px;
  margin: 0 auto;
  z-index: 2;
}
.IndexProducts .GridBox .ImgBox {
  position: relative;
  width: 56%;
  padding: 42px 0 80px 0;
}
.IndexProducts .GridBox .ImgBox picture {
  position: relative;
}
.IndexProducts .GridBox .ImgBox::before {
  display: inline-block;
  content: "";
  width: 1200px;
  height: 100%;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: #054984;
  position: absolute;
  top: 0;
  left: 528px;
  z-index: 0;
  transform: translate(-100%, 0);
}
.IndexProducts .GridBox .TxtBox {
  position: relative;
  width: 40%;
  padding: 80px 0 0 0;
}
.IndexProducts .GridBox .TxtBox .BtnBox {
  margin: 35px 0 0 0;
}

.IndexTitle {
  display: inline-block;
  margin: 0 0 35px 0;
}
.IndexTitle h2 {
  display: inline-block;
  margin: 0 30px 0 0;
}
.IndexTitle h4 {
  display: inline-block;
  position: relative;
  padding: 0 0 0 20px;
  font-weight: bold;
  color: #009995;
}
.IndexTitle h4::before {
  display: inline-block;
  content: "";
  width: 1px;
  height: 25px;
  position: absolute;
  left: 0px;
  bottom: 3px;
  background-color: #999999;
}

.IndexContact {
  min-height: 400px;
  padding: 130px 0;
  position: relative;
  background-image: url("../images/index/pic03.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  background-attachment: fixed;
}
.IndexContact::before {
  display: inline-block;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
}
.IndexContact .FlexBox {
  display: flex;
  justify-content: space-between;
  width: calc( 100% - 240px );
  max-width: 1200px;
  position: relative;
  margin: 0 auto;
  z-index: 9;
  color: #FFFFFF;
}
.IndexContact .FlexBox .Grid:nth-child(1) {
  flex: 1;
  padding: 0 20px 0 0;
}
.IndexContact .FlexBox .Grid:nth-child(2) {
  width: 302px;
  text-align: center;
}

.AboutTxtBox {
  padding: 0 50px;
}
.AboutTxtBox .FlexBox {
  display: flex;
  justify-content: space-between;
}
.AboutTxtBox .FlexBox .Grid:nth-child(1) {
  width: 35%;
}
.AboutTxtBox .FlexBox .Grid:nth-child(1) img {
  max-width: 100%;
}
.AboutTxtBox .FlexBox .Grid:nth-child(1) .SubTitle h3 {
  margin-bottom: 4px;
}
.AboutTxtBox .FlexBox .Grid:nth-child(2) {
  width: 60%;
}

.IntroBg {
  padding: 100px 0;
  background-color: #D9E4ED;
  text-align: center;
}
.IntroBg .IntroCut {
  display: none;
}
.IntroBg .IntroCut.On {
  display: block;
}
.IntroBg .IntroBox {
  text-align: left;
}
.IntroBg .IntroBox .LineBox {
  width: 100%;
  height: 70px;
  position: relative;
  pointer-events: none;
}
.IntroBg .IntroBox .LineBox i {
  display: inline-block;
  width: calc( 100% - 35px - 5px );
  height: calc( 250px - 34px - 5px );
  position: absolute;
  top: 34px;
  left: 5px;
  border-top-left-radius: 25px;
  border-top: 2px solid #FFFFFF;
  border-left: 2px solid #FFFFFF;
}
.IntroBg .IntroBox .LineBox::before {
  display: block;
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 12px;
  position: absolute;
  top: calc( 250px - 12px );
  left: 0;
  z-index: 9;
  background-color: #FFFFFF;
}
.IntroBg .IntroBox .LineBox::after {
  display: block;
  content: "";
  width: 70px;
  height: 70px;
  position: absolute;
  top: 0;
  right: 0;
  background-image: url("../images/bg03.svg");
  background-repeat: no-repeat;
  background-position: center top;
}
.IntroBg .IntroBox .LineBox.Reverse i {
  width: calc( 100% - 35px - 7px );
  height: calc( 250px - 34px - 5px );
  left: 35px;
  border-top-left-radius: 0px;
  border-top-right-radius: 25px;
  border-left: none;
  border-right: 2px solid #FFFFFF;
}
.IntroBg .IntroBox .LineBox.Reverse::before {
  top: calc( 250px - 12px );
  left: calc( 100% - 12px );
}
.IntroBg .IntroBox .LineBox.Reverse::after {
  right: calc( 100% - 70px );
  background-position: left bottom;
}
.IntroBg .IntroBox .LineBox.End i {
  width: calc( 100% - 35px - 7px );
  height: calc( 250px - 34px - 5px );
  top: calc( -250px + 72px );
  left: 35px;
  border-top-left-radius: 0px;
  border-top: none;
  border-left: none;
  border-bottom-right-radius: 25px;
  border-right: 2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
}
.IntroBg .IntroBox .LineBox.End::before {
  top: calc( -250px + 70px );
  left: calc( 100% - 12px );
}
.IntroBg .IntroBox .LineBox.End::after {
  right: calc( 100% - 70px );
  background-position: left bottom;
}
.IntroBg .IntroBox .IntroDetail {
  width: calc( 100% - 140px );
  padding: 30px 0 35px 0;
  margin: 0 auto;
  text-align: center;
}
.IntroBg .IntroBox .IntroDetail p {
  text-align: left;
}
.IntroBg .IntroBox .IntroFlex:not(:last-child) {
  margin: 0 0 30px 0;
}
.IntroBg .IntroBox .IntroFlex {
  display: flex;
  justify-content: space-between;
  text-align: left;
}
.IntroBg .IntroBox .IntroFlex .IntroImg {
  width: 40%;
  max-width: 550px;
}
.IntroBg .IntroBox .IntroFlex .IntroImg img {
  width: 100%;
  max-width: 380px;
  height: auto;
}
.IntroBg .IntroBox .IntroFlex .IntroTxt {
  width: 55%;
  text-align: left;
  margin: 0;
}
.IntroBg .IntroBox .IntroFlex .IntroTxt h4 {
  font-weight: bold;
}
.IntroBg .IntroBox .IntroFlex .IntroTxt .IntroTable {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
  margin: 10px 0 0 0;
}
.IntroBg .IntroBox .IntroFlex .IntroTxt .IntroTable .Td {
  position: relative;
  width: calc( 50% - 10px );
}
.IntroBg .IntroBox .IntroFlex .IntroTxt .IntroTable .TableLine {
  width: 1px;
  height: 100%;
  margin: 0 8px 0 9px;
  background-color: #FFFFFF;
}
.IntroBg .IntroBox .CaptionBox {
  display: block;
  margin: 0 auto 35px auto;
  text-align: center;
}
.IntroBg .IntroBox .CaptionBox h4 {
  font-weight: bold;
  color: #054984;
  line-height: 1.2 !important;
}
.IntroBg .IntroBox .CaptionBox h5 {
  font-weight: 900;
  color: #FFFFFF;
}

.BatteryImgBox {
  position: relative;
  width: 100%;
  margin: 15px auto 10px auto;
}
.BatteryImgBox img {
  width: 100%;
  height: auto;
}
.BatteryImgBox .BatteryImg {
  position: absolute;
  top: 0;
  left: 0;
}
.BatteryImgBox #Battery01 {
  position: relative;
  z-index: 9;
}
.BatteryImgBox #Battery02 {
  z-index: 0;
}
.BatteryImgBox #Battery03 {
  z-index: 9;
}

.CoolingImgBox {
  position: relative;
  width: calc( 100% - 160px );
  margin: 0 80px;
}
.CoolingImgBox img {
  width: 100%;
  height: auto;
}
.CoolingImgBox .CoolingImg {
  position: absolute;
  top: 0;
  left: 0;
}
.CoolingImgBox #Cooling01 {
  position: relative;
  z-index: 9;
}
.CoolingImgBox #Cooling02, .CoolingImgBox #Cooling03 {
  z-index: 5;
}

.PlanBox {
  position: relative;
  margin: 30px auto 150px auto;
}
.PlanBox::before {
  display: inline-block;
  content: "";
  width: 1920px;
  height: 69.4%;
  position: absolute;
  left: 0;
  top: 13.8%;
  z-index: 0;
  background-color: #E4E4E4;
}
.PlanBox .PlanFlex {
  display: flex;
  justify-content: space-between;
  text-align: center;
  position: relative;
}
.PlanBox .PlanFlex .PlanItem {
  position: relative;
  width: 29.46%;
  padding: 0;
  list-style: none;
  cursor: pointer;
}
.PlanBox .PlanFlex .PlanItem .ItemImg {
  display: block;
  position: relative;
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
  z-index: 1;
}
.PlanBox .PlanFlex .PlanItem .ItemImg::before {
  display: inline-block;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 9;
  background-color: #000;
  opacity: 0.1;
}
.PlanBox .PlanFlex .PlanItem .ItemImg img {
  position: relative;
  width: 100%;
  height: auto;
}
.PlanBox .PlanFlex .PlanItem .TitleBox {
  display: inline-block;
  width: 90%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
  font-weight: bold;
  color: #FFFFFF;
}
.PlanBox .PlanFlex .PlanItem .BtnBox {
  display: inline-block;
  width: 100%;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  z-index: 9;
  opacity: 0;
}
.PlanBox .PlanFlex .PlanItem:hover, .PlanBox .PlanFlex .On.PlanItem {
  transform: translate(0, 30px);
  transition: transform 0.4s cubic-bezier(0.28, 0.29, 0.06, 0.88) 0s;
}
.PlanBox .PlanFlex .PlanItem:hover .ItemImg::before, .PlanBox .PlanFlex .On.PlanItem .ItemImg::before {
  opacity: 0.6;
  transition: opacity 0.2s ease-out 0s;
}
.PlanBox .PlanFlex .PlanItem:hover .BtnBox, .PlanBox .PlanFlex .On.PlanItem .BtnBox {
  opacity: 1;
  transition: opacity 0.3s ease-out 0s;
}

.ProjectBox {
  position: relative;
  width: 100%;
}
.ProjectBox .ProjectGrid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  position: relative;
}
.ProjectBox .ProjectItem:nth-child(3n-1) {
  margin-left: 3.8%;
  margin-right: 3.8%;
}
.ProjectBox .ProjectItem:nth-child(4n+1) {
  border-bottom: 8px solid #054984;
}
.ProjectBox .ProjectItem:nth-child(4n+2) {
  border-bottom: 8px solid #999999;
}
.ProjectBox .ProjectItem:nth-child(4n+3) {
  border-bottom: 8px solid #009995;
}
.ProjectBox .ProjectItem:nth-child(4n) {
  border-bottom: 8px solid #000000;
}
.ProjectBox .ProjectItem {
  width: 30.8%;
  padding: 0 0 40px 0;
  margin-bottom: 60px;
  background-color: #E9E9E9;
  list-style: none;
  text-align: center;
}
.ProjectBox .ProjectItem .ImgBox {
  width: 68%;
  max-width: 220px;
  margin: 0 auto 20px auto;
}
.ProjectBox .ProjectItem .ImgBox img {
  width: 100%;
  height: auto;
}
.ProjectBox .ProjectItem .TxtBox {
  width: 82%;
  margin: 0 auto;
}
.ProjectBox .ProjectItem .TxtBox .ProjectTitle {
  margin: 4px 0 10px 0;
  height: 60px;
  font-weight: 500;
  color: #333333;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ContactBox {
  position: relative;
  margin: 60px 0 0 0;
  background-color: #D9E4ED;
}
.ContactBox .ContactInfo {
  position: relative;
  width: 100%;
  max-width: 700px;
  margin: 0 0 80px 0;
  color: #FFFFFF;
}
.ContactBox .ContactInfo .ContactInfoBg {
  position: relative;
  width: 100%;
  min-height: 192px;
  padding: 36px 25px 32px 0;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: #054984;
  z-index: 1;
}
.ContactBox .ContactInfo::before {
  display: block;
  content: "";
  width: 800px;
  height: 100%;
  position: absolute;
  left: -800px;
  top: 0;
  background-color: #054984;
}
.ContactBox .ContactInfo::after {
  display: block;
  content: "";
  width: 1000px;
  height: 50%;
  position: absolute;
  right: -990px;
  top: 0;
  background-color: #FFFFFF;
  z-index: 0;
}
.ContactBox .ContactInfo h4 {
  font-weight: bold;
  margin: 0 0 18px 0;
}
.ContactBox .ContactInfo .InfoGrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 650px;
}
.ContactBox .ContactInfo .InfoGrid li:nth-child(odd) {
  width: 42%;
}
.ContactBox .ContactInfo .InfoGrid li:nth-child(odd) .Fields {
  width: 56px;
}
.ContactBox .ContactInfo .InfoGrid li:nth-child(even) {
  width: 58%;
}
.ContactBox .ContactInfo .InfoGrid li:nth-child(even) .Fields {
  width: 66px;
}
.ContactBox .ContactInfo .InfoGrid li {
  display: flex;
  list-style: none;
  min-width: 222px;
  margin: 3px 0 2px 0;
}
.ContactBox .ContactInfo .InfoGrid li .Fields {
  display: inline-block;
  position: relative;
  color: #D9E4ED;
}
.ContactBox .ContactInfo .InfoGrid li .Fields::before {
  display: block;
  content: "";
  width: 1px;
  height: 16px;
  position: absolute;
  right: 0;
  top: 8px;
  background-color: #999999;
}
.ContactBox .ContactInfo .InfoGrid li .Txt {
  flex: 1;
  padding: 0 0 0 12px;
}
.ContactBox .ContactForm {
  padding: 0 60px;
}
.ContactBox .PointLine {
  position: relative;
}
.ContactBox .PointCircleBox {
  width: 70px;
  height: 70px;
  border-radius: 70px;
  position: absolute;
  right: 20px;
  top: -35px;
  z-index: 9;
}
.ContactBox .PointCircle {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 12px;
  position: absolute;
  top: calc( 50% - 6px );
  left: calc( 50% - 6px );
  background-color: #00B47D;
}
.ContactBox .CircleflickerBox {
  height: 70px;
}

.LinkListBg {
  width: 100%;
  max-width: 1400px;
}
.LinkListBg .LinkListBox {
  text-align: center;
}
.LinkListBg .LinkListGrid {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin: 40px 0 45px 0;
  text-align: left;
}
.LinkListBg .LinkListGrid .LinkItem:nth-child(3n-1) {
  margin: 0 59px 30px 59px;
}
.LinkListBg .LinkListGrid .LinkItem {
  position: relative;
  width: calc( (100% - 118px)/3 );
  min-width: 28%;
  max-width: 400px;
  margin: 0 0 30px 0;
  padding: 0 24px 18px 24px;
  text-align: center;
  border-bottom: 6px solid #009995;
}
.LinkListBg .LinkListGrid .LinkItem::after {
  display: inline-block;
  content: "";
  width: 100%;
  height: 180px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
  background-color: #C4363E;
}
.LinkListBg .LinkListGrid .LinkItem::before {
  display: inline-block;
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  bottom: 140px;
  z-index: 1;
  border-style: solid;
  border-width: 110px 110px 0 0;
  border-color: #FFFFFF transparent transparent transparent;
}
.LinkListBg .LinkListGrid .LinkItem .ImgBox, .LinkListBg .LinkListGrid .LinkItem .TxtBox {
  position: relative;
  z-index: 2;
}
.LinkListBg .LinkListGrid .LinkItem .ImgBox {
  position: relative;
  max-width: 352px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid #E6E6E6;
}
.LinkListBg .LinkListGrid .LinkItem .ImgBox img {
  width: 100%;
  height: auto;
}
.LinkListBg .LinkListGrid .LinkItem .TxtBox {
  max-width: 352px;
  margin: 0 auto;
  padding: 15px 0 0 0;
  text-align: left;
}
.LinkListBg .LinkListGrid .LinkItem .TxtBox h5 {
  display: block;
  height: 60px;
  color: #009995;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.LinkListBg .LinkListGrid .LinkItem .BtnBox {
  position: absolute;
  width: 70px;
  text-align: right;
  bottom: 4px;
  right: 23px;
  z-index: 9;
  background-color: #C4363E;
}
.LinkListBg .LinkListGrid .LinkItem i {
  display: inline-block;
  width: 0;
  height: 6px;
  position: absolute;
  bottom: -6px;
  left: 0;
  z-index: 9;
  background-color: #D6681D;
}
.LinkListBg .LinkListGrid .LinkItem:hover i {
  animation: width0to100 0.18s ease-in 0s forwards;
}

@media screen and (min-width: 1921px) {
  .IndexMainShow .MainShowBox .ShowTxt {
    left: 106px;
    top: 368px;
  }
}
@media screen and (max-width: 1440px) {
  .IndexProducts .GridBox {
    align-items: center;
    width: 86%;
  }
  .IndexProducts .GridBox .ImgBox {
    width: 54%;
  }
  .IndexProducts .GridBox .ImgBox picture img {
    width: 100%;
    height: auto;
  }
  .IndexProducts .GridBox .ImgBox::before {
    width: 45vw;
    top: 0;
    left: calc( -7vw - 10px );
    transform: translate(0, 0);
  }
  .IndexProducts .GridBox .TxtBox {
    width: 42%;
    padding: 0px 0 0 0;
  }
  .IndexProducts .GridBox .TxtBox .BtnBox {
    margin: 30px 0 0 0;
  }

  .IndexContact .FlexBox {
    width: 83.4%;
  }

  .AboutTxtBox {
    padding: 0 2.6%;
  }
  .AboutTxtBox .FlexBox .Grid:nth-child(1) {
    width: 36.5%;
  }
  .AboutTxtBox .FlexBox .Grid:nth-child(2) {
    width: 59%;
  }

  .IntroBg .IntroBox .IntroFlex .IntroTxt .IntroTable .Td {
    width: 100%;
  }
  .IntroBg .IntroBox .IntroFlex .IntroTxt .IntroTable .TableLine {
    width: 100%;
    height: 1px;
    margin: 8px 0;
  }
}
@media screen and (max-width: 1024px) {
  .IndexMainShow .MainShowBox .ShowTxt {
    width: 46.8%;
    left: 10.5%;
    top: 38vw;
  }

  .IndexProducts {
    padding: 100px 0 90px 0;
  }
  .IndexProducts .GridBox {
    flex-wrap: wrap;
    width: 100%;
  }
  .IndexProducts .GridBox .ImgBox {
    width: 100%;
    padding: 42px 96px 52px 96px;
    text-align: center;
  }
  .IndexProducts .GridBox .ImgBox picture {
    width: 80%;
  }
  .IndexProducts .GridBox .ImgBox picture img {
    width: 100%;
    height: auto;
    max-width: 575px;
    margin: 0 auto;
  }
  .IndexProducts .GridBox .ImgBox::before {
    width: 65vw;
    left: 0;
  }
  .IndexProducts .GridBox .TxtBox {
    width: 80%;
    margin: 45px auto 0 auto;
  }
  .IndexProducts .GridBox .TxtBox .BtnBox {
    margin: 25px 0 0 0;
    text-align: center;
  }

  .IndexTitle h2 {
    margin: 0 25px 0 0;
  }
  .IndexTitle h4 {
    padding: 0 0 0 18px;
  }

  .IndexContact {
    min-height: 216px;
    padding: 60px 0 50px 0;
    background-image: url("../images/index/pic03_m.jpg");
  }
  .IndexContact .FlexBox {
    width: 80%;
    align-items: center;
    flex-wrap: wrap;
  }
  .IndexContact .FlexBox .Grid:nth-child(2) {
    width: 272px;
  }

  .AboutTxtBox {
    padding: 0 0px;
  }
  .AboutTxtBox .FlexBox .Grid:nth-child(1) {
    width: 37%;
  }
  .AboutTxtBox .FlexBox .Grid:nth-child(2) {
    width: 59%;
  }

  .IntroBg {
    padding: 70px 0;
  }
  .IntroBg .IntroBox .LineBox {
    width: 100%;
    height: 60px;
  }
  .IntroBg .IntroBox .LineBox i {
    width: calc( 100% - 30px - 5px );
    height: calc( 250px - 29px - 5px );
    top: 29px;
  }
  .IntroBg .IntroBox .LineBox::after {
    width: 60px;
    height: 60px;
    background-size: 60px auto;
  }
  .IntroBg .IntroBox .LineBox.Reverse i {
    width: calc( 100% - 30px - 7px );
    height: calc( 250px - 29px - 5px );
    left: 30px;
  }
  .IntroBg .IntroBox .LineBox.Reverse::after {
    right: calc( 100% - 60px );
  }
  .IntroBg .IntroBox .LineBox.End i {
    width: calc( 100% - 30px - 7px );
    height: calc( 250px - 29px - 5px );
    top: calc( -250px + 62px );
    left: 30px;
  }
  .IntroBg .IntroBox .LineBox.End::before {
    top: calc( -250px + 60px );
  }
  .IntroBg .IntroBox .LineBox.End::after {
    right: calc( 100% - 60px );
  }
  .IntroBg .IntroBox .IntroDetail {
    width: calc( 100% - 120px );
  }
  .IntroBg .IntroBox .IntroFlex:not(:last-child) {
    margin: 0 0 30px 0;
  }
  .IntroBg .IntroBox .IntroFlex .IntroImg {
    width: 40%;
    max-width: 550px;
  }
  .IntroBg .IntroBox .IntroFlex .IntroImg img {
    width: 100%;
    max-width: 380px;
    height: auto;
  }
  .IntroBg .IntroBox .IntroFlex .IntroTxt {
    width: 54%;
    text-align: left;
    margin: 0;
  }
  .IntroBg .IntroBox .CaptionBox {
    margin: 0 auto 40px auto;
  }

  .CoolingImgBox {
    width: 100%;
    margin: 0 auto;
    max-width: 700px;
  }

  .PlanBox {
    margin: 30px auto 150px auto;
  }

  .ProjectBox .ProjectItem {
    padding: 0 0 25px 0;
    margin-bottom: 50px;
  }

  .ContactBox .ContactInfo {
    width: 74vw;
    max-width: 760px;
  }
  .ContactBox .ContactInfo .ContactInfoBg {
    padding: 36px 35px 32px 0;
  }
  .ContactBox .ContactInfo .InfoGrid {
    width: 100%;
  }
  .ContactBox .ContactInfo .InfoGrid li:nth-child(odd) {
    width: 39%;
  }
  .ContactBox .ContactInfo .InfoGrid li:nth-child(even) {
    width: 58%;
  }
  .ContactBox .ContactForm {
    padding: 0 0px;
  }
}
@media screen and (max-width: 767px) {
  .IndexMainShow .MainShowBox .ShowTxt {
    width: 53.2%;
    left: 11.4%;
    top: 53.2vw;
  }

  .IndexProducts {
    padding: 88px 0 60px 0;
  }
  .IndexProducts .GridBox .ImgBox {
    width: 100%;
    padding: 42px 50px 52px 50px;
  }
  .IndexProducts .GridBox .TxtBox {
    margin: 40px auto 0 auto;
  }
  .IndexProducts .GridBox .TxtBox .BtnBox {
    margin: 20px 0 0 0;
  }

  .IndexTitle {
    margin: 0 0 30px 0;
  }
  .IndexTitle h2 {
    margin: 0 19px 0 0;
  }
  .IndexTitle h4 {
    padding: 0 0 0 13px;
  }
  .IndexTitle h4::before {
    height: 20px;
    bottom: 4px;
  }

  .IndexContact {
    background-image: url("../images/index/pic03_s.jpg");
  }
  .IndexContact .FlexBox .Grid:nth-child(2) {
    width: 232px;
  }

  .IntroBg {
    padding: 50px 0;
  }
  .IntroBg .IntroBox .LineBox {
    width: 100%;
    height: 50px;
  }
  .IntroBg .IntroBox .LineBox i {
    width: calc( 100% - 25px - 5px );
    height: calc( 250px - 24px - 5px );
    top: 24px;
  }
  .IntroBg .IntroBox .LineBox::after {
    width: 50px;
    height: 50px;
    background-size: 50px auto;
  }
  .IntroBg .IntroBox .LineBox.Reverse i {
    width: calc( 100% - 25px - 7px );
    height: calc( 250px - 24px - 5px );
    left: 25px;
  }
  .IntroBg .IntroBox .LineBox.Reverse::after {
    right: calc( 100% - 50px );
  }
  .IntroBg .IntroBox .LineBox.End i {
    width: calc( 100% - 25px - 7px );
    height: calc( 250px - 24px - 5px );
    top: calc( -250px + 52px );
    left: 25px;
  }
  .IntroBg .IntroBox .LineBox.End::before {
    top: calc( -250px + 50px );
  }
  .IntroBg .IntroBox .LineBox.End::after {
    right: calc( 100% - 50px );
  }
  .IntroBg .IntroBox .IntroDetail {
    width: calc( 100% - 60px );
    padding: 20px 0 35px 0;
  }
  .IntroBg .IntroBox .IntroFlex:not(:last-child) {
    margin: 0 0 0px 0;
  }
  .IntroBg .IntroBox .IntroFlex {
    text-align: center;
    flex-wrap: wrap;
  }
  .IntroBg .IntroBox .IntroFlex .IntroImg {
    width: 100%;
    order: 1;
    margin: 0 0 30px 0;
  }
  .IntroBg .IntroBox .IntroFlex .IntroImg img {
    width: 100%;
    max-width: 380px;
    height: auto;
  }
  .IntroBg .IntroBox .IntroFlex .IntroTxt {
    width: 100%;
    order: 2;
  }
  .IntroBg .IntroBox .CaptionBox {
    margin: 0 auto 30px auto;
  }

  .CoolingImgBox {
    max-width: 461px;
  }

  .PlanBox {
    margin: 0px auto 85px auto;
  }
  .PlanBox::before {
    height: 71%;
    top: 14.5%;
  }
  .PlanBox .PlanFlex {
    flex-wrap: wrap;
    max-width: 500px;
    margin: 0 auto;
  }
  .PlanBox .PlanFlex .PlanItem:not(:last-child) {
    margin-bottom: 55px;
  }
  .PlanBox .PlanFlex .PlanItem {
    width: 60%;
    margin: 0 auto;
    max-width: 260px;
  }
  .PlanBox .PlanFlex .PlanItem:hover {
    transform: translate(0, 0px);
    transition: none;
  }
  .PlanBox .PlanFlex .PlanItem:hover .ItemImg::before {
    opacity: 0.6;
    transition: opacity 0.2s ease-out 0s;
  }
  .PlanBox .PlanFlex .PlanItem:hover .BtnBox {
    opacity: 1;
    transition: opacity 0.3s ease-out 0s;
  }

  .ProjectBox .ProjectItem:nth-child(3n-1) {
    margin-left: 0;
    margin-right: 0;
  }
  .ProjectBox .ProjectItem:nth-child(2n) {
    margin-left: 5.4%;
  }
  .ProjectBox .ProjectItem {
    width: 47.3%;
    padding: 0 0 20px 0;
    margin-bottom: 40px;
  }

  .ContactBox .ContactInfo {
    width: 74vw;
    margin: 0 0 50px 0;
  }
  .ContactBox .ContactInfo .InfoGrid li:nth-child(odd) {
    width: 100%;
  }
  .ContactBox .ContactInfo .InfoGrid li:nth-child(odd) .Fields {
    width: 64px;
  }
  .ContactBox .ContactInfo .InfoGrid li:nth-child(even) {
    width: 100%;
  }
  .ContactBox .ContactInfo .InfoGrid li:nth-child(even) .Fields {
    width: 64px;
  }
  .ContactBox .ContactInfo .InfoGrid li {
    margin: 2px 0;
  }
}
@media screen and (max-width: 680px) {
  .IndexContact .FlexBox .Grid:nth-child(1) {
    flex: none;
    padding: 0 0px 0 0;
    width: 80%;
    min-width: 300px;
    margin: 0 auto;
    text-align: center;
  }
  .IndexContact .FlexBox .Grid:nth-child(1) .IndexTitle {
    margin: 0 auto 30px auto;
  }
  .IndexContact .FlexBox .Grid:nth-child(2) {
    width: 80%;
    min-width: 300px;
    margin: 25px auto 0 auto;
  }
}
@media screen and (max-width: 576px) {
  .AboutTxtBox {
    padding: 0 0px;
  }
  .AboutTxtBox .FlexBox {
    flex-wrap: wrap;
  }
  .AboutTxtBox .FlexBox .Grid:nth-child(1) {
    width: 100%;
    text-align: center;
  }
  .AboutTxtBox .FlexBox .Grid:nth-child(2) {
    width: 100%;
  }

  .ProjectBox .ProjectItem:nth-child(3n-1) {
    margin-left: auto;
    margin-right: auto;
  }
  .ProjectBox .ProjectItem:nth-child(2n) {
    margin-left: auto;
  }
  .ProjectBox .ProjectItem {
    width: 84%;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }
}
.LoadingBg {
  width: 100vw;
  height: 100%;
  max-width: 1920px;
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 9999;
  overflow: hidden;
  transform: translate(-50%, 0);
  background-color: #FFFFFF;
}
.LoadingBg .LoadingBox.On::before {
  animation: loading-bg 1.2s cubic-bezier(0.19, 1, 0.22, 1) 1 1.3s forwards;
}
.LoadingBg .LoadingBox {
  width: 100%;
  max-width: 1920px;
  height: 100%;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
}
.LoadingBg .LoadingBox::before {
  display: block;
  content: "";
  width: 2812px;
  height: 1480px;
  position: absolute;
  top: -1px;
  left: -1px;
  z-index: 0;
  background-image: url("../images/bg01.svg");
  background-repeat: no-repeat;
  background-position: left top;
  transform-origin: left top;
}
.LoadingBg .LoadingInner {
  width: 0px;
  height: 0px;
  position: relative;
  left: 0;
  top: 50%;
  margin: 0 auto;
  z-index: 9;
}
.LoadingBg .LoadingInner .LoadingGIf, .LoadingBg .LoadingInner .LoadingLottie {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
}

.HeaderBg {
  position: fixed;
  width: 100%;
  max-width: 1920px;
  height: 94px;
  top: 0;
  z-index: 999;
  border-bottom: 1px solid #FFFFFF;
}
.HeaderBg .HeaderBox {
  width: 100%;
  height: 100%;
  padding: 0 60px 0 0;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0.5);
}
.HeaderBg .HeaderGrid {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0 auto;
  z-index: 9;
}
.HeaderBg .HeaderGrid .LogoBox {
  width: 35%;
  position: relative;
  text-align: left;
  display: flex;
  align-items: flex-start;
}
.HeaderBg .HeaderGrid .LogoBox img {
  width: 100%;
  height: auto;
  max-width: 300px;
}
.HeaderBg .HeaderGrid .NavBox {
  flex: 1;
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: #FFFFFF;
}
.HeaderBg .MenuBox {
  flex: 1;
  position: relative;
}

.UnitShowBg {
  position: relative;
  width: 100%;
  height: 500px;
  margin: 0 auto 100px auto;
}
.UnitShowBg .UnitShowBox {
  position: relative;
  height: 100%;
}
.UnitShowBg .UnitShowBox .GifBox01 {
  width: 220px;
  position: absolute;
  bottom: -105px;
  left: 0;
  z-index: 5;
}
.UnitShowBg .UnitShowBox .GifBox02 {
  width: 126px;
  height: 96px;
  position: absolute;
  right: 0;
  top: 153px;
  z-index: 5;
}
.UnitShowBg .UnitShowBox .UnitShowTxt {
  display: inline-block;
  width: 346px;
  height: auto;
  position: absolute;
  bottom: -2px;
  right: 80px;
  z-index: 5;
  text-align: right;
}
.UnitShowBg .UnitShowBox .ShowPic {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
}
.UnitShowBg .UnitShowBox .ShowPic img {
  transform: translate(-50%, 0);
}
.UnitShowBg .UnitShowBox::before {
  display: inline-block;
  content: "";
  width: 900px;
  height: 500px;
  position: absolute;
  right: 0;
  top: 0;
  background-image: url("../images/bg02.png");
  z-index: 3;
}

.UnitContentBox {
  position: relative;
  padding-top: 45px;
}

.UnitTitleBox {
  position: relative;
  width: 100%;
  height: 77px;
  margin: 20px auto 60px auto;
}
.UnitTitleBox::before, .UnitTitleBox::after {
  display: inline-block;
  content: "";
  position: absolute;
  height: 2px;
  bottom: 0;
}
.UnitTitleBox::before {
  width: calc( 100% - 20px );
  left: 0;
  background-color: #333333;
}
.UnitTitleBox::after {
  width: 15px;
  right: 0;
  background-color: #009995;
}
.UnitTitleBox .UnitTitle {
  display: flex;
  align-items: flex-end;
}
.UnitTitleBox .UnitTitle h2 {
  margin: 0 25px 0 0;
}
.UnitTitleBox .UnitTitle h4 {
  position: relative;
  padding: 0 0 0 20px;
  font-weight: bold;
  color: #009995;
}
.UnitTitleBox .UnitTitle h4::before {
  display: inline-block;
  content: "";
  width: 1px;
  height: 25px;
  position: absolute;
  left: 0px;
  bottom: 3px;
  background-color: #999999;
}

.SubTitle {
  display: inline-block;
  position: relative;
  padding: 0 0 25px 0;
  margin: 10px auto 60px auto;
  font-weight: bold;
}
.SubTitle::before {
  display: inline-block;
  content: "";
  width: 40px;
  height: 5px;
  position: absolute;
  bottom: 0;
  background-color: #EFAF00;
}
.SubTitle.TaC::before {
  left: calc( 50% - 20px );
}

.CommonToolsBg {
  display: block;
  position: fixed;
  width: 100%;
  height: 1px;
  right: 0;
  top: 232px;
  z-index: 9994;
}
.CommonToolsBg .CommonToolsBox {
  width: 100%;
  max-width: 1920px;
  height: 1px;
  margin: 0 auto;
  text-align: right;
}
.CommonToolsBg .CommonTools {
  display: inline-block;
  width: 52px;
  padding: 5px 0 5px 0;
  position: relative;
  right: 40px;
  top: 0px;
}
.CommonToolsBg .ToolsBox {
  width: 100%;
  padding: 0;
  text-align: center;
}
.CommonToolsBg .ToolsBox img {
  display: block;
  margin: 0 auto 12px auto;
}
.CommonToolsBg .ToolsBox .ToolsBtn {
  display: inline-block;
  position: relative;
  width: 38px;
  height: 38px;
  margin: 2px auto;
  border-radius: 68px;
  overflow: hidden;
  background-color: #FFFFFF;
}
.CommonToolsBg .ToolsBox .ToolsBtn:before {
  display: inline-block;
  content: "";
  width: 38px;
  height: 38px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background-image: url("../images/i03.svg");
  background-repeat: no-repeat;
  background-position: -152px 0;
  background-size: auto 38px;
}
.CommonToolsBg .ToolsBox .ToolsBtn:after {
  display: inline-block;
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 6px;
  position: absolute;
  left: calc( 50% - 3px );
  top: calc( 50% - 3px );
  opacity: 0;
  z-index: 1;
  background-color: #999999;
}
.CommonToolsBg .ToolsBox .ToolsBtn svg {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 5;
}
.CommonToolsBg .ToolsBox .ToolsBtn path {
  fill: #555B6F;
  transition: fill 0.3s;
}
.CommonToolsBg .ToolsBox .ToolsBtn:hover {
  background-color: transparent;
}
.CommonToolsBg .ToolsBox .ToolsBtn:hover:before {
  animation: op0 0.4s ease-out 0s forwards;
}
.CommonToolsBg .ToolsBox .ToolsBtn:hover:after {
  animation: zoom-in 0.6s ease-out 0s forwards;
}
.CommonToolsBg .ToolsBox .ToolsBtn:hover path {
  fill: #ffffff;
}
.CommonToolsBg .ToolsBox .MailBtn {
  display: block;
  position: relative;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 50px;
  overflow: hidden;
  margin: 28px auto 3px auto;
}
.CommonToolsBg .ToolsBox .MailBtn::before {
  display: inline-block;
  content: "";
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: #009995;
}
.CommonToolsBg .ToolsBox .MailBtn::after {
  display: inline-block;
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 6px;
  position: absolute;
  left: calc( 50% - 3px );
  top: calc( 50% - 3px );
  opacity: 0;
  z-index: 2;
  background-color: #999999;
}
.CommonToolsBg .ToolsBox .MailBtn svg {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 5;
}
.CommonToolsBg .ToolsBox .MailBtn:hover::before {
  animation: op0 0.4s ease-out 0s forwards;
}
.CommonToolsBg .ToolsBox .MailBtn:hover::after {
  animation: zoom-in 0.6s ease-out 0s forwards;
}

.testBox {
  width: 80%;
  max-width: 500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 0fr 0fr 0fr;
  grid-column-gap: 20px;
  border: 1px solid #FC0;
}
.testBox li {
  color: #00f;
  text-align: center;
  padding: 30px;
}
.testBox .Box01 {
  background-color: green;
  grid-row: 1;
  grid-column: 1;
}
.testBox .Box02 {
  background-color: red;
  grid-row: 1;
  grid-column: 3;
}
.testBox .orange {
  background-color: orange;
  grid-row: 4;
  grid-column: 1;
}
.testBox .yellow {
  background-color: yellow;
  grid-row: 4;
  grid-column: 4;
}

.FooterBg {
  width: 100%;
  position: relative;
  background-color: #333333;
}

.FooterBox {
  position: relative;
  width: calc( 100% - 240px );
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 0 50px 0;
}
.FooterBox ::selection {
  color: #FFFFFF;
  background-color: #009995;
}

.FooterGridBox {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  min-height: 208px;
  margin: 0 auto;
}
.FooterGridBox .FooterGrid {
  position: relative;
}
.FooterGridBox .FooterGrid.Info {
  flex: 7;
  padding: 15px 0 0 0;
  text-align: left;
}
.FooterGridBox .FooterGrid.Info .CompanyInfo {
  position: absolute;
  width: 100%;
  bottom: 5px;
  list-style: none;
  color: #999999;
}
.FooterGridBox .FooterGrid.Nav {
  flex: 5;
  margin: 0 0 0 25px;
}
.FooterGridBox .InfoItem {
  display: flex;
}
.FooterGridBox .InfoItem .Fields {
  position: relative;
  width: 50px;
  margin-right: 10px;
}
.FooterGridBox .InfoItem .Fields::after {
  display: inline-block;
  content: "";
  width: 1px;
  height: 12px;
  position: absolute;
  right: 0;
  top: 7px;
  background-color: #707070;
}
.FooterGridBox .UnitNav {
  display: flex;
  width: 100%;
}
.FooterGridBox .UnitNav .UnitBox {
  width: 100%;
  text-align: left;
  list-style: none;
}
.FooterGridBox .UnitNav .UnitBox .UnitItem:last-child {
  border-bottom: 1px solid #777777;
}
.FooterGridBox .UnitNav .UnitBox .UnitItem {
  position: relative;
  padding: 5px 20px;
  border-top: 1px solid #777777;
}
.FooterGridBox .UnitNav .UnitBox .UnitItem a {
  display: inline-block;
  width: 100%;
  height: 50px;
  line-height: 50px;
  color: #FFFFFF;
  text-decoration: none;
}
.FooterGridBox .UnitNav .UnitBox .UnitItem::after {
  display: inline-block;
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 8px;
  position: absolute;
  right: 20px;
  top: calc( 50% - 4px );
  background-color: #009995;
}
.FooterGridBox .UnitNav .UnitBox .UnitItem small {
  display: inline-block;
  margin: 0 0 0 8px;
  font-family: "early-sans-variable", "serif";
  font-weight: 300;
}
.FooterGridBox .UnitNav .UnitBox .UnitItem:hover a {
  color: #009995;
}
.FooterGridBox .UnitNav .UnitBox .UnitItem:hover::after {
  background-color: #FFFFFF;
}

.FooterUpBtn {
  position: absolute;
  right: 4.2%;
  bottom: 47px;
  z-index: 9;
}

.CommonKanban {
  width: 100%;
  padding: 16px 40px;
  border-radius: 6px;
  background-color: #009995;
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  color: #FFFFFF;
}
.CommonKanban ul.Circle li {
  font-weight: 500 !important;
}

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
  opacity: 0 !important;
}

.SeriesBox .swiper-button-prev, .SeriesBox .swiper-button-next, .PromoBg .swiper-button-prev, .PromoBg .swiper-button-next {
  width: 72px;
  height: 72px;
  top: calc( 50% - 36px );
  margin-top: 0;
  z-index: 99;
}
.SeriesBox .swiper-button-prev:after, .SeriesBox .swiper-button-next:after, .PromoBg .swiper-button-prev:after, .PromoBg .swiper-button-next:after {
  display: none;
}

.PageInTabBox {
  display: inline-block;
  width: 100%;
  max-width: 1320px;
  position: relative;
  top: 0;
  text-align: center;
  margin: 0px auto 20px auto;
}

.PageInTab {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  font-family: "early-sans-variable", "serif";
  line-height: 22px !important;
  color: #707070;
}

.PageInView {
  display: flex;
  height: 30px;
  padding: 0;
  margin: 0 auto;
}

.PageInPrev, .PageInNext {
  display: inline-block;
  position: relative;
  width: 26px;
  height: 26px;
  margin: 0 8px;
}

.PageInPrev a.Disabled, .PageInNext a.Disabled {
  opacity: 0.4 !important;
  cursor: default !important;
}

.PageInPrev a, .PageInNext a {
  display: inline-block;
  width: 100%;
  height: 100%;
  text-align: center;
}
.PageInPrev a::after, .PageInNext a::after {
  display: inline-block;
  content: "";
  width: 24px;
  height: 24px;
  background-image: url("../images/i01.svg");
  background-repeat: no-repeat;
}

.PageInPrev a:not(.Disabled):hover {
  color: #00B47D;
}
.PageInPrev a:not(.Disabled):hover::after {
  background-position: -24px 0;
}

.PageInNext a::after {
  transform: scaleX(-1);
}

.PageInNext a:not(.Disabled):hover {
  color: #00B47D;
}
.PageInNext a:not(.Disabled):hover::after {
  background-position: -24px 0;
}

.PageFirst {
  position: relative;
  padding: 0 0 0 12px;
  border-bottom: 1px solid #333333;
  cursor: pointer;
  color: #333333;
}
.PageFirst::after {
  display: inline-block;
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 100%;
  position: absolute;
  left: 0px;
  top: calc( 50% - 2px );
  background-color: #333333;
}

.PageLast {
  position: relative;
  padding: 0 12px 0 0;
  border-bottom: 1px solid #333333;
  cursor: pointer;
  color: #333333;
}
.PageLast::after {
  display: inline-block;
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 100%;
  position: absolute;
  right: 0;
  top: calc( 50% - 2px );
  background-color: #333333;
}

.PageFirst:not(.Disabled):hover, .PageLast:not(.Disabled):hover {
  border-bottom: 1px solid #009995;
  color: #009995;
}
.PageFirst:not(.Disabled):hover::after, .PageLast:not(.Disabled):hover::after {
  background-color: #009995;
}

.PageFirst.Disabled, .PageLast.Disabled {
  color: #CCCCCC;
  cursor: default !important;
  border-bottom: 1px solid #CCCCCC;
}
.PageFirst.Disabled a, .PageLast.Disabled a {
  cursor: default !important;
}
.PageFirst.Disabled::after, .PageLast.Disabled::after {
  background-color: #CCCCCC;
}

.PageInMark {
  display: inline-block;
  position: relative;
  flex: 1;
  font-family: "early-sans-variable", "serif";
  color: #707070;
  text-align: center;
}
.PageInMark .PageInNum {
  display: inline-block;
  margin: 0 7px;
  font-weight: bold;
  color: #707070;
}
.PageInMark .PageInTotal {
  display: inline-block;
  margin: 0 7px;
}
.PageInMark .BackList {
  font-weight: bold;
  color: #333333;
  position: relative;
  top: 1px;
}
.PageInMark .BackList span, .PageInMark .BackList i {
  display: inline-block;
}
.PageInMark .BackList i {
  width: 16px;
  height: 16px;
  position: relative;
  top: 2px;
  margin: 0 4px 0 0;
  background-image: url("../images/i02.svg");
  background-repeat: no-repeat;
  filter: brightness(0);
  opacity: 0.9;
}
.PageInMark .BackList:hover {
  color: #00B47D;
}
.PageInMark .BackList:hover i {
  filter: brightness(1);
  opacity: 1;
}

.PopUpBg.DetailsPop .PopUpBox {
  width: 100%;
  height: auto;
  padding: 80px 0 20px 0;
  background-color: #FFFFFF;
}

.PopUpBg.Open {
  display: block;
}

.PopUpBg {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  text-align: center;
  z-index: 9999;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.PopUpCloseBg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 1;
  background: white;
}

.PopUpBox {
  display: inline-block;
  width: auto;
  height: auto;
  position: relative;
  z-index: 2;
  vertical-align: middle;
  text-align: center;
}

.PopUpContent {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
}

.In.PopUpCut {
  display: block;
}

.PopUpCut {
  display: none;
}
.PopUpCut img {
  margin: 0 auto;
}

.DetailsPop .PopUpCloseBtn {
  display: inline-block;
}

.PopUpCloseBtn {
  width: 40px;
  height: 40px;
  cursor: pointer;
  position: absolute;
  top: 25px;
  right: 50px;
  text-align: center;
  z-index: 9;
}

.ClassTabWrapper {
  width: 100%;
  height: 36px;
  position: relative;
  margin: 0px auto 0px auto;
  overflow: hidden;
}

.ClassTabOuter {
  position: absolute;
  top: 0px;
  right: 0;
  z-index: 2;
}

.ClassTabInner {
  white-space: nowrap;
}
.ClassTabInner .ClassTab {
  display: inline-block;
  height: 36px;
  vertical-align: top;
  position: relative;
  white-space: pre-wrap;
  padding: 0px 11px 0px 11px;
  margin: 0 0 0 16px;
  cursor: pointer;
}
.ClassTabInner .ClassTab .TabTxt {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  padding: 0;
  line-height: 35px;
  color: #999999;
}
.ClassTabInner .In.ClassTab .TabTxt, .ClassTabInner .ClassTab:hover .TabTxt {
  color: #FFFFFF;
}
.ClassTabInner .In.ClassTab:nth-child(1), .ClassTabInner .ClassTab:nth-child(1):hover {
  background-color: #EFAF00;
}
.ClassTabInner .In.ClassTab:nth-child(2), .ClassTabInner .ClassTab:nth-child(2):hover {
  background-color: #00B47D;
}
.ClassTabInner .In.ClassTab:nth-child(3), .ClassTabInner .ClassTab:nth-child(3):hover {
  background-color: #054984;
}
.ClassTabInner .In.ClassTab:nth-child(4), .ClassTabInner .ClassTab:nth-child(4):hover {
  background-color: #C4363E;
}

@media screen and (max-width: 1600px) {
  .FooterUpBtn {
    right: 35px;
  }
}
@media screen and (max-width: 1440px) {
  .HeaderBg {
    height: 88px;
  }
  .HeaderBg .HeaderBox {
    padding: 0 50px 0 0;
  }
  .HeaderBg .HeaderGrid .LogoBox img {
    max-width: 260px;
  }

  .FooterBox {
    width: 80%;
  }

  .FooterGridBox .FooterGrid.Info {
    flex: 7;
  }
  .FooterGridBox .FooterGrid.Nav {
    flex: 5;
  }

  .FooterUpBtn {
    right: 5%;
    transform: translate(50%, 0);
  }
}
@media screen and (max-width: 1024px) and (orientation: portrait) {
  /* 在這裡寫直式螢幕專用的 CSS 樣式 */
  .LoadingBg .LoadingBox.On::before {
    animation: loading-bg-s 1.4s cubic-bezier(0.19, 1, 0.22, 1) 1 1.3s forwards;
  }
  .LoadingBg .LoadingBox::before {
    width: 1024px;
    height: 1080px;
    background-image: url("../images/bg01_s.svg");
    background-position: right bottom;
  }
}
@media screen and (max-width: 1024px) {
  .HeaderBg {
    height: 80px;
  }
  .HeaderBg .HeaderBox {
    padding: 0;
  }
  .HeaderBg .HeaderGrid .LogoBox {
    width: 30%;
  }
  .HeaderBg .HeaderGrid .LogoBox img {
    width: 100%;
    max-width: 240px;
    min-width: 220px;
  }

  .UnitShowBg {
    height: auto;
    margin: 0 auto 100px auto;
  }
  .UnitShowBg .UnitShowBox {
    position: relative;
    height: 100%;
  }
  .UnitShowBg .UnitShowBox .GifBox01 {
    width: 18vw;
    bottom: -75px;
  }
  .UnitShowBg .UnitShowBox .GifBox02 {
    width: 12vw;
    top: calc( 50% - 70px );
  }
  .UnitShowBg .UnitShowBox .GifBox01 img, .UnitShowBg .UnitShowBox .GifBox01 video, .UnitShowBg .UnitShowBox .GifBox02 img, .UnitShowBg .UnitShowBox .GifBox02 video {
    width: 100%;
    height: auto;
  }
  .UnitShowBg .UnitShowBox .UnitShowTxt {
    width: 30.2vw;
    height: auto;
    bottom: -1px;
    right: 62px;
  }
  .UnitShowBg .UnitShowBox .UnitShowTxt img {
    width: 100%;
    height: auto;
  }
  .UnitShowBg .UnitShowBox .ShowPic {
    position: relative;
    top: 0;
    left: 50%;
    z-index: 0;
    width: 100%;
  }
  .UnitShowBg .UnitShowBox .ShowPic img {
    width: 168.8%;
    height: auto;
    max-width: 1728px;
  }
  .UnitShowBg .UnitShowBox::before {
    width: 900px;
    height: 100%;
    right: -300px;
  }

  .SubTitle {
    margin: 10px auto 40px auto;
  }

  .FooterBox {
    width: 75%;
  }

  .FooterGridBox .FooterGrid.Info {
    flex: 1;
    padding: 10px 0 0 0;
  }
  .FooterGridBox .FooterGrid.Info .LogoBox img {
    width: 86%;
    height: auto;
    max-width: 250px;
  }
  .FooterGridBox .FooterGrid.Nav {
    flex: 1.2;
  }

  .FooterUpBtn {
    right: 6.25%;
  }

  .CommonKanban {
    padding: 16px 32px;
  }
}
@media screen and (max-width: 832px) {
  .HeaderBg {
    height: 78px;
  }
}
@media screen and (max-width: 767px) {
  .HeaderBg {
    height: 68px;
  }
  .HeaderBg .HeaderGrid .LogoBox {
    width: 50%;
  }
  .HeaderBg .HeaderGrid .LogoBox img {
    width: 196px;
    max-width: 196px;
    min-width: 196px;
    position: relative;
  }

  .UnitShowBg {
    margin: 0 auto 80px auto;
  }
  .UnitShowBg .UnitShowBox .GifBox01 {
    width: 22.8vw;
    bottom: -60px;
  }
  .UnitShowBg .UnitShowBox .GifBox02 {
    width: 11.2vw;
    top: calc( 50% - 60px );
  }
  .UnitShowBg .UnitShowBox .UnitShowTxt {
    width: 36vw;
    right: 32px;
  }
  .UnitShowBg .UnitShowBox .ShowPic img {
    width: 240%;
    max-width: 1300px;
    min-width: 960px;
  }
  .UnitShowBg .UnitShowBox::before {
    width: 900px;
    height: 100%;
    right: -400px;
  }

  .UnitTitleBox .UnitTitle h2 {
    margin: 0 22px 0 0;
  }
  .UnitTitleBox .UnitTitle h4 {
    padding: 0 0 0 12px;
  }
  .UnitTitleBox .UnitTitle h4::before {
    height: 20px;
    bottom: 4px;
  }

  .CommonKanban {
    padding: 10px 22px;
    font-size: 14px;
    line-height: 20px;
  }

  .PageInTab {
    width: 90%;
    max-width: 330px;
  }

  .PageFirst, .PageLast {
    top: -2px;
  }

  .FooterBox {
    width: 75%;
  }

  .FooterGridBox .FooterGrid.Info {
    flex: 1;
    padding: 5px 0 0 0;
  }
  .FooterGridBox .FooterGrid.Nav {
    flex: none;
    margin: 0 0 0 20px;
    width: 200px;
  }
  .FooterGridBox .UnitNav .UnitBox .UnitItem small {
    display: none;
  }

  .FooterUpBtn {
    right: 6.25%;
  }
}
@media screen and (max-width: 576px) {
  .UnitShowBg .UnitShowBox .GifBox02 {
    top: calc( 50% - 30px );
  }

  .SubTitle {
    margin: 10px auto 30px auto;
  }
  .SubTitle::before {
    left: calc( 50% - 20px );
  }

  .FooterBox {
    width: 80%;
    padding: 50px 0 35px 0;
  }

  .FooterGridBox .FooterGrid.Info {
    flex: none;
    padding: 40px 0 0 0;
    text-align: center;
    width: 100%;
    order: 2;
  }
  .FooterGridBox .FooterGrid.Info .CompanyInfo {
    position: relative;
    margin: 48px 0 0 0;
    line-height: 22px !important;
  }
  .FooterGridBox .FooterGrid.Info .LogoBox {
    text-align: center;
  }
  .FooterGridBox .FooterGrid.Info .LogoBox img {
    width: 66%;
    max-width: 240px;
    margin: 0 auto;
  }
  .FooterGridBox .FooterGrid.Nav {
    margin: 0 0 0 0px;
    width: 100%;
    order: 1;
  }
  .FooterGridBox .InfoItem {
    display: flex;
    justify-content: center;
    margin: 2px 0;
  }
  .FooterGridBox .UnitNav .UnitBox .UnitItem small {
    display: inline-block;
  }

  .FooterUpBtn {
    right: 20px;
    bottom: 120px;
    transform: translate(0, 0);
  }
}
@media screen and (max-width: 400px) {
  .FooterUpBtn {
    bottom: 120px;
  }
}
.BasicBtnBox {
  display: inline-block;
  width: 100%;
  text-align: center;
  margin: 18px auto;
  line-height: 1;
  vertical-align: middle;
}

.GoogleMapBtn:hover {
  background-color: transparent;
}
.GoogleMapBtn:hover .Inner {
  transform: translate(6px, 0);
}
.GoogleMapBtn:hover .Inner::after {
  background-position: -36px 0;
}
.GoogleMapBtn:hover span {
  color: #FFFFFF;
}

.GoogleMapBtn {
  display: inline-block;
  padding: 9px 18px 9px 18px;
  background-color: #FFFFFF;
}
.GoogleMapBtn .Inner {
  display: inline-block;
  position: relative;
  transition: all 0.1s ease 0s;
}
.GoogleMapBtn .Inner::after {
  display: inline-block;
  content: "";
  width: 36px;
  height: 12px;
  position: relative;
  vertical-align: middle;
  background-image: url("../img/icon04.svg");
  background-repeat: no-repeat;
  top: -3px;
}
.GoogleMapBtn span {
  display: inline-block;
  margin: 0 8px;
  position: relative;
  top: 2px;
  font-weight: 700;
  color: #333333;
}

.Btn01.Green {
  border: 1px solid #009995;
  background-color: #009995;
}

.Btn01.Green:hover, a.Btn01.Green:hover, button.Btn01.Green:hover {
  background-color: transparent;
  color: #009995;
}
.Btn01.Green:hover::after, a.Btn01.Green:hover::after, button.Btn01.Green:hover::after {
  background-color: #009995;
}

.Btn01, a.Btn01, button.Btn01 {
  display: inline-block;
  position: relative;
  min-width: 300px;
  height: 80px;
  margin: 10px 0 10px 0;
  padding: 0 36px;
  border-radius: 80px;
  border: 1px solid #EFAF00;
  background-color: #EFAF00;
  text-align: left;
  line-height: 78px;
  color: #FFFFFF;
  font-weight: bold;
}
.Btn01::after, .Btn01::before, a.Btn01::after, a.Btn01::before, button.Btn01::after, button.Btn01::before {
  display: block;
  content: "";
  position: absolute;
}
.Btn01::after, a.Btn01::after, button.Btn01::after {
  width: 8px;
  height: 8px;
  border-radius: 8px;
  top: calc( 50% - 4px );
  right: 40px;
  background-color: #FFFFFF;
}

.Btn01:hover, a.Btn01:hover, button.Btn01:hover {
  background-color: transparent;
  color: #EFAF00;
  transition: color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
}
.Btn01:hover::after, a.Btn01:hover::after, button.Btn01:hover::after {
  background-color: #EFAF00;
  transition: all 0.5s cubic-bezier(0.28, 0.29, 0.06, 0.88) 0s;
}

.Btn02, a.Btn02, button.Btn02 {
  display: inline-block;
  position: relative;
  width: 78%;
  max-width: 250px;
  height: 70px;
  margin: 0 auto;
  padding: 0 30px;
  border-radius: 70px;
  background-color: #FFB400;
  text-align: left;
  line-height: 58px;
  color: #FFFFFF;
  font-weight: bold;
}
.Btn02::after, .Btn02::before, a.Btn02::after, a.Btn02::before, button.Btn02::after, button.Btn02::before {
  display: block;
  content: "";
  position: absolute;
}
.Btn02::after, a.Btn02::after, button.Btn02::after {
  width: 8px;
  height: 8px;
  border-radius: 8px;
  top: calc( 50% - 4px );
  right: 30px;
  background-color: #FFFFFF;
}

.Btn03, a.Btn03, button.Btn03 {
  display: block;
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  cursor: pointer;
}
.Btn03::before, a.Btn03::before, button.Btn03::before {
  z-index: 2;
  background-image: url("../images/btn05.svg");
}
.Btn03::after, a.Btn03::after, button.Btn03::after {
  opacity: 0;
  z-index: 1;
  border-radius: 50%;
  background-color: #fc0;
}
.Btn03::after, .Btn03::before, a.Btn03::after, a.Btn03::before, button.Btn03::after, button.Btn03::before {
  display: inline-block;
  content: "";
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  top: 0;
  left: 0;
}

.Btn04, a.Btn04, button.Btn04 {
  display: block;
  position: relative;
  width: 44px;
  height: 44px;
  text-align: center;
  cursor: pointer;
  border-radius: 50%;
}
.Btn04:before, a.Btn04:before, button.Btn04:before {
  z-index: 2;
  background-image: url("../images/btn05.svg");
}
.Btn04:after, a.Btn04:after, button.Btn04:after {
  opacity: 0;
  z-index: 1;
  border-radius: 50%;
  background-color: #fc0;
}
.Btn04:after, .Btn04:before, a.Btn04:after, a.Btn04:before, button.Btn04:after, button.Btn04:before {
  display: inline-block;
  content: "";
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  position: absolute;
  top: 0;
  left: 0;
}

.Btn04:hover::before, a.Btn04:hover::before, button.Btn04:hover::before {
  filter: brightness(0);
  transform: translate(4px, 4px);
  transition: all 0.3s ease-in 0s;
}
.Btn04:hover::after, a.Btn04:hover::after, button.Btn04:hover::after {
  opacity: 1;
  transition: all 0.35s cubic-bezier(0.28, 0.29, 0.06, 0.88) 0s;
}

.QuickBtnBox {
  position: fixed;
  width: 50%;
  max-width: 960px;
  height: 10px;
  margin: 0 auto;
  left: 50%;
  top: 85%;
  z-index: 9990;
  display: none;
}
.QuickBtnBox .QuickInner {
  position: absolute;
  right: 8%;
  top: 0px;
}

.ScrollBtnBox {
  padding: 4px 1px;
  cursor: pointer;
}
.ScrollBtnBox .ScrollBtn {
  color: #FFFFFF !important;
  background-color: transparent;
}
.ScrollBtnBox .ScrollBtn:after {
  display: block;
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 8px;
  position: relative;
  margin: 16px auto 0 auto;
  background-color: #FFFFFF;
}
.ScrollBtnBox:hover .ScrollBtn {
  animation: ball 1.1s linear 1 forwards;
  color: #FFFFFF !important;
}

@media screen and (max-width: 1024px) {
  .Btn01, a.Btn01, button.Btn01 {
    min-width: 270px;
    height: 70px;
    line-height: 68px;
  }

  .Btn02, a.Btn02, button.Btn02 {
    width: 78%;
    height: 54px;
    padding: 0 20px;
    line-height: 54px;
  }
  .Btn02::after, a.Btn02::after, button.Btn02::after {
    right: 20px;
  }
}
@media screen and (max-width: 767px) {
  .Btn01, a.Btn01, button.Btn01 {
    min-width: 230px;
    height: 60px;
    line-height: 60px;
  }
}
@media screen and (max-width: 576px) {
  .Btn02, a.Btn02, button.Btn02 {
    width: 80%;
    height: 45px;
    padding: 0 20px;
    line-height: 45px;
  }
  .Btn02::after, a.Btn02::after, button.Btn02::after {
    width: 7px;
    height: 7px;
    right: 20px;
  }

  .QuickBtnBox .QuickInner {
    right: 20px;
  }

  .ScrollBtn:after {
    width: 7px;
    height: 7px;
    border-radius: 7px;
    margin: 14px auto 0 auto;
  }
}
input:not([type="checkbox"]):not([type=radio]):not([type=button]), select, textarea {
  display: inline-block;
  min-height: 45px;
  padding: 7px 15px 7px 15px;
  box-sizing: border-box;
  margin: 0px 0px 0px 0px;
  border-radius: 5px;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border: 1px solid #FFFFFF;
  background-color: #FFFFFF;
  line-height: 1.3;
  color: #333333;
}

input:read-only {
  background-color: #054984;
}

input:not([type="checkbox"]):not([type=radio]):not([type=button]).Err {
  border: 1px solid #EFAF00;
}

textarea.Err {
  border: 1px solid #EFAF00;
}

.SelectBox.HasMargin {
  margin: 5px 10px 5px 0;
}

.SelectBox {
  display: inline-block;
  position: relative;
  left: 0;
  top: 0;
  margin: 5px 0px 5px 0px;
}
.SelectBox label, .SelectBox select {
  display: inline-block;
}
.SelectBox select {
  width: 100%;
  padding: 8px 25px 8px 15px;
  background-color: #FFFFFF;
  color: #333333;
  border: 1px solid #CCCCCC;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}
.SelectBox select::-ms-expand {
  display: none;
}
.SelectBox::after {
  display: inline-block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: calc( 50% - 12px );
  right: 7px;
  content: "";
  pointer-events: none;
  background-image: url("../images/form/select_pic01.png");
  background-repeat: no-repeat;
  background-position: 1px 1px;
  z-index: 9;
}

.BasicRadioBox {
  display: inline-block;
  position: relative;
  text-align: center;
  margin: 5px 15px 5px 0px;
}
.BasicRadioBox input[type="radio"] {
  display: none;
}
.BasicRadioBox input[type="radio"] + label {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  margin: 0px 0;
  cursor: pointer;
}
.BasicRadioBox input[type="radio"] + label i {
  display: inline-block;
  width: 30px !important;
  height: 30px !important;
  margin: 0px 0px 0px 0;
  vertical-align: top;
  background-image: url("../images/form/radio_pic01.png");
  background-repeat: no-repeat;
  background-position: left top;
  cursor: pointer;
}
.BasicRadioBox input[type="radio"]:checked + label i {
  background-image: url("../images/form/radio_pic01.png");
  background-repeat: no-repeat;
  background-position: -30px top;
}
.BasicRadioBox input[type="radio"] + label span {
  display: inline-block;
  margin: 0 0 0 0px;
  line-height: 26px;
}

.BasicCheckBox {
  display: inline-block;
  position: relative;
  margin: 5px 15px 5px 0px;
}
.BasicCheckBox .Label {
  display: flex;
  cursor: pointer;
  align-items: center;
}
.BasicCheckBox .CheckPic {
  display: inline-block;
  width: 26px;
  height: 26px;
  position: relative;
  margin: 0 5px 0 0;
  vertical-align: top;
}
.BasicCheckBox .CheckPic input[type="checkbox"] {
  opacity: 0;
}
.BasicCheckBox .CheckPic input[type="checkbox"] ~ i {
  display: inline-block;
  width: 24px !important;
  height: 24px !important;
  position: absolute;
  top: 2px;
  left: 0;
  z-index: 2;
  vertical-align: top;
  background-image: url("../images/form/checkbox_pic01.png");
  background-repeat: no-repeat;
  background-position: left top;
  cursor: pointer;
}
.BasicCheckBox .CheckPic input[type="checkbox"]:checked ~ i {
  background-position: -24px top;
}
.BasicCheckBox .CheckPic input[type="checkbox"].Err ~ i {
  background-position: -48px top;
}
.BasicCheckBox .TxtBox {
  display: inline-block;
  line-height: 22px;
  padding: 1px 0;
}

.FormXL {
  width: 100%;
}

.FormL {
  width: 50%;
}

.FormM {
  width: 200px;
}

.FormS {
  width: 225px;
}

.FormXS {
  width: 180px;
}

.FormF {
  flex: 1;
}

.CustomRadioBox {
  display: inline-block;
  position: relative;
  text-align: center;
  margin: 7px 6px 8px 0px;
}
.CustomRadioBox > label {
  display: inline-block;
  min-width: 133px;
  height: 44px;
  border: 1px solid #777777;
  background-color: #FFFFFF;
  color: #666666;
  border-radius: 3px;
  line-height: 42px;
  cursor: pointer;
}
.CustomRadioBox > input[type=radio] {
  display: none !important;
  width: 0;
  height: 0px;
}
.CustomRadioBox > input[type="radio"]:checked + label {
  border: 1px solid #00B47D;
  background-color: #00B47D;
  color: #FFFFFF;
}
.CustomRadioBox > input[type="radio"]:checked + label i {
  display: inline-block;
  content: "";
  width: 24px;
  height: 24px;
  position: absolute;
  right: 1px;
  bottom: 1px;
  background-image: url("../images/form/form_pic01.png");
  background-repeat: no-repeat;
}

.CustomRadioBox.Disabled > label {
  border: 1px solid #777777;
  background-color: #CCCCCC;
  cursor: not-allowed;
}
.CustomRadioBox.Disabled > input[type="radio"] + label i {
  display: inline-block;
  content: "";
  width: 24px;
  height: 24px;
  position: absolute;
  right: 1px;
  bottom: 1px;
  background-image: none;
  background-repeat: no-repeat;
}

@media screen and (max-width: 575px) {
  .HideXS {
    display: none !important;
  }

  .VisXS {
    display: block !important;
  }
}
@media screen and (max-width: 767px) {
  .HideS {
    display: none !important;
  }

  .VisS {
    display: block !important;
  }
}
@media screen and (max-width: 992px) {
  .HideM {
    display: none !important;
  }

  .VisM {
    display: block !important;
  }
}
@media screen and (max-width: 1440px) {
  .HideL {
    display: none !important;
  }

  .VisL {
    display: block !important;
  }
}
.DisN {
  display: none;
}

.Px-S {
  padding-left: 6px;
  padding-right: 6px;
}

.Px-M {
  padding-left: 12px;
  padding-right: 12px;
}

.Px-L {
  padding-left: 18px;
  padding-right: 18px;
}

.Px-XL {
  padding-left: 22px;
  padding-right: 22px;
}

.Py-S {
  padding-top: 5px;
  padding-bottom: 5px;
}

.Py-M {
  padding-top: 10px;
  padding-bottom: 10px;
}

.Pt-S {
  padding-top: 5px;
}

.CommonFormBg .CommonFormBox:first-child {
  margin: 0px 0 20px 0;
}
.CommonFormBg .CommonFormBox {
  margin: 0px 0 0px 0;
}
.CommonFormBg .CommonForm .FieldGroup.NotFlex {
  display: block;
}
.CommonFormBg .CommonForm .FieldGroup.NotFlex .FieldName {
  min-height: 28px;
  padding: 4px 8px 0px 0px;
}
.CommonFormBg .CommonForm .FieldGroup:not(:last-child) {
  margin: 0 0 10px 0;
}
.CommonFormBg .CommonForm .FieldGroup {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  width: 100%;
}
.CommonFormBg .CommonForm .FieldGroup .FieldName {
  display: inline-block;
  width: 100px;
  padding: 12px 10px 6px 0;
  align-self: stretch;
}
.CommonFormBg .CommonForm .FieldGroup .FieldName small {
  color: #009995;
}
.CommonFormBg .CommonForm .FieldGroup .HasGrid {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.CommonFormBg .CommonForm .FieldGroup .FieldContent {
  flex: 1;
  min-height: 55px;
  align-self: center;
  padding: 5px 0;
}
.CommonFormBg .CommonForm .FieldGroup .FieldContent input.Err {
  border: 1px solid #EFAF00;
}
.CommonFormBg .CommonForm .FieldGroup .FieldContent label.error {
  color: #F15A24;
}
.CommonFormBg .CommonForm .FieldGroup .FieldContent .PlaceHolderTxt {
  width: 100%;
  margin: 2px 0 4px 0px;
  vertical-align: middle;
  color: #F15A24;
}
.CommonFormBg .CommonForm .FieldGroup .FieldContent .HasMargin, .CommonFormBg .CommonForm .FieldGroup .FieldContent .FieldGrid, .CommonFormBg .CommonForm .FieldGroup .FieldContent .PercentageBox {
  margin: 14px 0px 14px 0;
}
.CommonFormBg .CommonForm .FieldGroup .FieldContent .HasMargin:first-child, .CommonFormBg .CommonForm .FieldGroup .FieldContent .FieldGrid:first-child, .CommonFormBg .CommonForm .FieldGroup .FieldContent .PercentageBox:first-child {
  margin: 0px 0px 14px 0;
}
.CommonFormBg .CommonForm .FieldGroup .FieldContent .HasMargin:last-child, .CommonFormBg .CommonForm .FieldGroup .FieldContent .FieldGrid:last-child, .CommonFormBg .CommonForm .FieldGroup .FieldContent .PercentageBox:last-child {
  margin: 14px 0px 0px 0;
}
.CommonFormBg .CommonForm .FieldGroup .FieldContent:hover .UseAnnotationBox {
  display: block;
}
.CommonFormBg .CommonForm .FieldGroup .CaptchaField {
  position: relative;
  margin-bottom: 27px;
}
.CommonFormBg .CommonForm .FieldGroup #captcha-error {
  display: block;
  width: 100%;
  position: absolute;
  bottom: -21px;
}
.CommonFormBg .CommonForm .FieldGroup #chkcodePic {
  height: 50px;
  padding: 0px 0px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.CommonFormBg .CommonForm .FieldGroup .FieldGrid10 {
  width: 10%;
}
.CommonFormBg .CommonForm .FieldGroup .FieldGrid20 {
  width: 20%;
}
.CommonFormBg .CommonForm .FieldGroup .FieldGrid30 {
  width: 30%;
  background: rgba(255, 102, 0, 0.7);
}
.CommonFormBg .CommonForm .FieldGroup .FieldGrid40 {
  width: 40%;
}
.CommonFormBg .CommonForm .FieldGroup .FieldGrid50 {
  width: 50%;
}
.CommonFormBg .CommonForm .FieldGroup .FieldGrid60 {
  width: 60%;
}
.CommonFormBg .CommonForm .FieldGroup .FieldGrid70 {
  width: 70%;
}
.CommonFormBg .CommonForm .FieldGroup .FieldGrid80 {
  width: 80%;
}
.CommonFormBg .CommonForm .FieldGroup .FieldGrid90 {
  width: 90%;
}
.CommonFormBg .CommonForm .FieldGroup .FieldGrid100 {
  width: 100%;
  background: #cff;
}
.CommonFormBg .CommonForm .FieldGroup .FieldGrid0 {
  flex: 0;
}
.CommonFormBg .CommonForm .FieldGroup .FieldGrid1 {
  flex: 1;
}
.CommonFormBg .CommonForm .FieldGroup .FieldGrid2 {
  flex: 2;
}
.CommonFormBg .CommonForm .FieldGroup .FieldGrid3 {
  flex: 3;
}
.CommonFormBg .CommonForm .FieldGroup .FieldGrid4 {
  flex: 4;
}
.CommonFormBg .CommonForm .FieldGroup .FieldGrid5 {
  flex: 5;
}
.CommonFormBg .CommonForm .FieldGroup .FieldGrid6 {
  flex: 6;
}
.CommonFormBg .CommonForm .FieldGroup .FieldGrid7 {
  flex: 7;
}
.CommonFormBg .CommonForm .FieldGroup .FieldGrid8 {
  flex: 8;
}
.CommonFormBg .CommonForm .FieldGroup .FieldGrid9 {
  flex: 9;
}
.CommonFormBg .CommonForm .FieldGroup .SpaceW.XL {
  display: inline-block;
  width: 32px;
}
.CommonFormBg .CommonForm .FieldGroup .SpaceW.L {
  display: inline-block;
  width: 22px;
  text-align: center;
}
.CommonFormBg .CommonForm .FieldGroup .SpaceW.M {
  display: inline-block;
  width: 15px;
}
.CommonFormBg .CommonForm .FieldGroup .SpaceW.S {
  display: inline-block;
  width: 10px;
}
.CommonFormBg .CommonForm .FieldGroup .SpaceW.XS {
  display: inline-block;
  width: 5px;
}
.CommonFormBg .CommonForm .FieldGroup .SpaceW.Free {
  display: inline-block;
  flex: 1;
  background: #FFC;
}
.CommonFormBg .CommonForm .FieldGroup .SpaceH.XL {
  display: block;
  width: 100%;
  height: 40px;
}
.CommonFormBg .CommonForm .FieldGroup .SpaceH.L {
  display: block;
  width: 100%;
  height: 31px;
}
.CommonFormBg .CommonForm .FieldGroup .SpaceH.M {
  display: block;
  width: 100%;
  height: 15px;
}
.CommonFormBg .CommonForm .FieldGroup .SpaceH.S {
  display: block;
  width: 100%;
  height: 12px;
}
.CommonFormBg .CommonForm .FieldGroup .SpaceH.XS {
  display: block;
  width: 100%;
  height: 9px;
}
.CommonFormBg .CommonForm .FieldGrid {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
  max-width: 450px;
}

.UseAnnotationBox {
  display: none;
  position: relative;
  width: 100%;
  z-index: 9999;
}
.UseAnnotationBox .UseAnnotation {
  position: absolute;
  width: 70vw;
  max-width: 500px;
  color: #FFF;
  background: #444444;
}

@media screen and (max-width: 992px) {
  .FormL {
    width: 50%;
  }

  .FormM {
    width: 180px;
  }

  .CommonFormBg .CommonForm .FieldGroup:not(:last-child) {
    margin: 0 0 6px 0;
  }
  .CommonFormBg .CommonForm .FieldGroup .FieldName {
    width: 90px;
  }
  .CommonFormBg .CommonForm .FieldGroup .FieldContent .PlaceHolderTxt {
    display: block;
  }
}
@media screen and (max-width: 576px) {
  input:not([type="checkbox"]):not([type=radio]):not([type=button]), select, textarea {
    min-height: 42px;
  }

  .FormM {
    width: 138px;
    max-width: 138px;
  }

  .FormS {
    width: 160px;
  }

  .FormXS {
    width: 106px;
  }

  .CommonFormBg {
    padding: 10px 0 0px 0;
  }
  .CommonFormBg .FormTitleBox {
    margin: 0 0 4px 0;
  }
  .CommonFormBg .CommonForm .FieldGroup {
    display: block;
    margin: 0 0 5px 0;
  }
  .CommonFormBg .CommonForm .FieldGroup .FieldName {
    width: 100%;
    min-height: 22px;
    padding: 2px 8px 2px 0px;
    align-self: center;
  }
  .CommonFormBg .CommonForm .FieldGroup .FieldName.HasSpacing {
    padding: 2px 8px 2px 0;
  }
  .CommonFormBg .CommonForm .FieldGroup .FieldContent {
    flex: none;
    width: 100%;
    min-height: 40px;
    padding: 0 0px 4px 0px;
  }
  .CommonFormBg .CommonForm .FieldGroup .FieldContent .PlaceHolderTxt {
    display: block;
    margin: 0 0 4px 0px;
  }
  .CommonFormBg .CommonForm .FieldGroup .FieldContent .InputOnlineBox {
    display: block;
  }
  .CommonFormBg .CommonForm .FieldGroup .FieldContent .InputOnlineBox input {
    width: 100%;
    margin: 8px 12px 8px 0 !important;
  }
  .CommonFormBg .CommonForm .FieldGroup #chkcodePic {
    height: 42px;
    padding: 0px 0px 0px 0px;
    margin: 0;
    background-color: #CCCCCC;
  }
  .CommonFormBg .CommonForm .FieldGroup .RefreshBtn {
    width: 21px;
    height: 21px;
  }
  .CommonFormBg .CommonForm .FieldGroup .FieldGrid10 {
    width: 100%;
  }
  .CommonFormBg .CommonForm .FieldGroup .FieldGrid20 {
    width: 100%;
  }
  .CommonFormBg .CommonForm .FieldGroup .FieldGrid30 {
    width: 100%;
  }
  .CommonFormBg .CommonForm .FieldGroup .FieldGrid40 {
    width: 100%;
  }
  .CommonFormBg .CommonForm .FieldGroup .FieldGrid50 {
    width: 100%;
  }
  .CommonFormBg .CommonForm .FieldGroup .FieldGrid60 {
    width: 100%;
  }
  .CommonFormBg .CommonForm .FieldGroup .FieldGrid70 {
    width: 100%;
  }
  .CommonFormBg .CommonForm .FieldGroup .FieldGrid80 {
    width: 100%;
  }
  .CommonFormBg .CommonForm .FieldGroup .FieldGrid90 {
    width: 100%;
  }
  .CommonFormBg .CommonForm .FieldGroup .FieldGrid100 {
    width: 100%;
  }
}
.MenuBox a, .MenuBox a:hover {
  text-decoration: none;
}
.MenuBox li {
  list-style: none !important;
}
.MenuBox .MenuInner {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}
.MenuBox .MenuLv01 {
  position: relative;
  height: 74px;
  display: flex;
  align-items: center;
  padding: 0 2px;
  margin: 0 26px;
}
.MenuBox .MenuLv01 .MenuLv01Btn {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  position: relative;
}
.MenuBox .MenuLv01 .MenuLv01Btn h5 {
  display: inline-block;
  width: 100%;
  margin: 0 auto;
  font-weight: bold;
}
.MenuBox .MenuLv01 .MenuLv01Btn::after {
  display: inline-block;
  content: "";
  width: 8px;
  height: 0px;
  border-radius: 8px;
  margin: 0px auto 0 auto;
  background-color: #EFAF00;
}
.MenuBox .MenuLv01 .MenuLine {
  display: block;
  width: 1px;
  height: 15px;
  background-color: #fff;
}
.MenuBox .MenuLv01:hover .MenuLv01Btn {
  animation: ball 1.1s linear 1 forwards;
}
.MenuBox .MenuLv01:hover .MenuLv01Btn::after {
  height: 8px;
  margin: 12px auto 0 auto;
}

.MenuSwitchBox {
  display: none;
  width: 38px;
  height: 37px;
  position: fixed;
  right: 30px;
  top: 16px;
  z-index: 9995;
}

.MenuSwitchBtn {
  display: inline-block;
  width: 32px;
  height: 100%;
  position: relative;
  text-align: center;
}
.MenuSwitchBtn i {
  display: block;
  width: 100%;
  height: 3px;
  margin: 0 auto;
  border-radius: 3px;
  position: absolute;
  right: 0;
  transform-origin: 100% 100%;
  transition: all 0.4s cubic-bezier(0.5, 0, 0.1, 1);
}
.MenuSwitchBtn i:nth-child(1), .MenuSwitchBtn i:nth-child(2) {
  background-color: #FFFFFF;
}
.MenuSwitchBtn i:nth-child(1) {
  top: 7px;
}
.MenuSwitchBtn i:nth-child(2) {
  top: 17px;
  opacity: 1;
  transition-delay: 0.2s;
}
.MenuSwitchBtn i:nth-child(3) {
  top: 27px;
}
.MenuSwitchBtn i:nth-child(3) span {
  display: inline-block;
  position: absolute;
  background-color: #FFFFFF;
}
.MenuSwitchBtn i:nth-child(3) span:nth-child(1) {
  width: 25px;
  height: 3px;
  border-radius: 3px;
  left: 0;
  top: 0;
}
.MenuSwitchBtn i:nth-child(3) span:nth-child(2) {
  width: 4px;
  height: 4px;
  border-radius: 4px;
  top: -1px;
  right: 0;
}

.On.MenuSwitchBtn i {
  position: absolute;
  right: 0px;
  transform-origin: 100% 100%;
  transition: all 0.4s cubic-bezier(0.39, 0.22, 0.21, 0.86) 0s;
}
.On.MenuSwitchBtn i:nth-child(1) {
  top: 6px;
  right: 4px;
  transform: rotate(-45deg);
  transition-delay: 0.2s;
}
.On.MenuSwitchBtn i:nth-child(2) {
  opacity: 0;
}
.On.MenuSwitchBtn i:nth-child(3) {
  top: 28px;
  right: 5px;
  transform: rotate(45deg);
  transition-delay: 0.2s;
}

.MenuSBg.On {
  display: block;
}

.MenuSBg {
  display: none;
  width: 100%;
  max-width: 1920px;
  min-height: 100vh;
  position: fixed;
  top: 0;
  z-index: 9991;
  background-color: #054984;
}
.MenuSBg a, .MenuSBg a:hover {
  text-decoration: none;
  color: #FFFFFF;
}
.MenuSBg .MenuSLogo {
  position: absolute;
  top: 0;
  left: 0;
  width: 194px;
  height: auto;
}
.MenuSBg .LangBox {
  position: absolute;
  right: calc( 30px + 65px );
  top: 22px;
  font-size: 16px;
  font-weight: 500;
}
.MenuSBg .MenuSInner {
  position: relative;
  left: 100%;
  width: 375px;
  height: 100vh;
  padding: 25px 15px 25px 48px;
  z-index: 9;
  background-color: #253A5C;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  text-align: left;
  pointer-events: auto;
}
.MenuSBg .MenuSInner .MenuSClose {
  width: 60px;
  height: 60px;
  position: absolute;
  top: 25px;
  right: 15px;
}
.MenuSBg .MenuSInner .MenuSClose img {
  width: 100%;
  height: auto;
}
.MenuSBg .MenuSBox {
  width: 80%;
  max-width: 800px;
  margin-top: calc(120px + 4vh);
  margin-left: auto;
  margin-right: auto;
}
.MenuSBg .MenuSBox li {
  list-style: none;
}
.MenuSBg .MenuSBox::-webkit-scrollbar-thumb {
  background-color: transparent;
}
.MenuSBg .MenuSBox::-webkit-scrollbar-track {
  background-color: transparent;
}
.MenuSBg .MenuSBox::-webkit-scrollbar {
  width: 2px;
}
.MenuSBg .MenuSLv01:last-child {
  border-bottom: 1px solid #FFFFFF;
}
.MenuSBg .MenuSLv01 {
  position: relative;
  width: 100%;
  padding: 5px 20px;
  border-top: 1px solid #FFFFFF;
  text-align: left;
  list-style: none;
}
.MenuSBg .MenuSLv01 .MenuSLv01Btn {
  display: inline-block;
  width: 100%;
  height: 54px;
  position: relative;
  vertical-align: middle;
  color: #FFFFFF;
  line-height: 54px;
}
.MenuSBg .MenuSLv01::after {
  display: inline-block;
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 8px;
  position: absolute;
  right: 20px;
  top: calc( 50% - 4px );
  background-color: #009995;
}
.MenuSBg .MenuSLv01 small {
  display: inline-block;
  margin: 0 0 0 8px;
  font-family: "early-sans-variable", "serif";
}
.MenuSBg .MenuSLv01:hover {
  color: #EFAF00;
}
.MenuSBg .MenuSLv01:hover .MenuSLv01Btn {
  color: #EFAF00;
}
.MenuSBg .MenuSLv01:hover::after {
  background-color: #EFAF00;
}

@media screen and (max-width: 1440px) {
  .MenuBox .MenuLv01 {
    margin: 0 21px;
  }
}
@media screen and (max-width: 1024px) {
  .MenuBox .MenuLv01 {
    height: 60px;
    margin: 0 4%;
  }
}
@media screen and (max-width: 832px) {
  .MenuBox .MenuLv01 {
    margin: 0 20px;
  }
}
@media screen and (max-width: 767px) {
  .MenuBox {
    display: none;
  }

  .MenuSBg .MenuSBox {
    -webkit-overflow-scrolling: touch;
  }
  .MenuSBg .MenuSLv01Btn.HasLv2::after {
    top: 4px;
  }
  .MenuSBg .MenuSLv02Btn {
    display: block;
    width: 100%;
    margin: 6px 0;
  }

  .MenuSwitchBox {
    display: block;
  }
}
@media screen and (max-width: 576px) {
  .MenuSBg .LangBox {
    right: calc( 20px + 65px );
  }

  .MenuSwitchBox {
    right: 20px;
  }
}