@import url("reset.css");

* {  
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

a {
  text-decoration: none;
  color: inherit;
}


a:hover{
  text-decoration: none;
  color: inherit;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;
  padding: 0;}

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }



/* <!---------------------------- 變數 ----------------------------> */
:root {
  --lightblue: #36BDEF;/* logo淺藍 ç*/
  --darkblue: #0A558C;/*  深藍 */
  --orange: #e68200;/*  230 130 0 */
  --brown: #775742;
  --darkgray: #333333;
  --gray: #808080; /*  128 128 128 */
  --lightgray: #f0f0f0;
}

.text-orange {color: var(--orange);}
.text-brown {color: var(--brown);}
.text-darkblue {color: var(--darkblue);}
.text-lightblue {color: var(--lightblue);}
.text-gray {color: var(--gray);}
.text-darkgray {color: var(--darkgray) ;}
.text-lightgray {color: var(--lightgray);}


/* <!---------------------------- 字體 ----------------------------> */

body{ font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif !important;}


  .headline-2 {font-size: min(calc(18px + 1.1vw),36px); cursor: pointer;}

  .headline-2-en, .headline-2-jp {font-size: min(calc(14px + 0.8vw),28px); cursor: pointer;}

  .headline-2:hover { cursor: pointer; color: var(--orange) !important; background-color: white; }

  .h2-deco {padding: min(calc(6px + 0.4vw),12px)  min(calc(24px + 1.5vw),48px);
        border: 1px solid !important;  display: inline-block;}

  .headline-3 {font-size: min(calc(12px + 0.7vw),24px);}

  .headline-4 {font-size: min(calc(10px + 0.6vw),20px);}

  .para-word {font-size: min(calc(8px + 0.5vw),16px);}

  .sm-word {font-size: min(calc(6px + 0.4vw),12px);}

  .xs-word {font-size: 6px;}


  .text-justify { text-align: justify; }

  .text-shadow {text-shadow: 0px 0px 30px rgba(0, 0, 0, 1);}

/* <!---------------------------- 元件 ----------------------------> */



.container-m-width {width: 100%;}

@media (min-width: 576px)  {
  .container-m-width {width: 540px;}}

@media (min-width: 768px) {
  .container-m-width {width: 720px;}}

@media (min-width: 992px) {
  .container-m-width {width: 960px;}}

.row { padding-right: 0.5rem; padding-left: 0.5rem; }

.black-btn{
  color: black; cursor: pointer;
  background-color: transparent;
  border: 2px solid black;
  border-radius: 0.1rem;}

.black-btn:hover {
  color: white; 
  background-color:var(--orange);
  border: 2px solid var(--orange);
  box-shadow: none; 
   -moz-transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    
    -moz-transition-timing-function: cubic-bezier(0.2, 0.4, 0.7, 0.8);  
    -webkit-transition-timing-function: cubic-bezier(0.2, 0.4, 0.7, 0.8);  
    transition-timing-function: cubic-bezier(0.2, 0.4, 0.7, 0.8);}

.short-line-w {
  width: min(calc(22px + 1.3vw),45px); 
  height: 0;
  border-top: 1px solid white;
  display:inline-block;
}

.short-line-b {
  width: min(calc(22px + 1.3vw),45px); 
  height: 0;
  border-top: 1px solid black;
  display:inline-block;
}

.long-line-lg {
  width: 100%; 
  height: 0;
  border-top: 2px solid var(--lightgray);
}

.long-line-w {
  width: 100%; 
  height: 0;
  border-top: 2px solid white;
}

.long-line-b {
  width: 100%; 
  height: 0;
  border-top: 1px solid black;
}



.table {
  margin-bottom: 1rem;
  color: black;
  border-color: var(--lightgray);
}


  .table > :not(caption) > * > * {padding: 0.3rem 0.1rem;}

  @media (min-width: 576px)  {
   .table > :not(caption) > * > * {padding: 0.4rem 0.4rem;}}

@media (min-width: 768px) {
   .table > :not(caption) > * > * {padding: 0.5rem 0.5rem;}}

  .table-light { background-color: var(--lightgray);
   border-color: black; }

.bg-w { background-color: white;}

.bg-b { background-color: black;}

.bg-b-50 { background-color: rgba(0, 0, 0, 0.5);}

.bg-lg {background-color: var(--lightgray);}

.bg-g {background-color: var(--gray);}

.bg-orange {background-color: var(--orange);}

.text-nowrap {white-space: nowrap;} 

.border-b {border: 1px solid black;}

.border-lg {border: 1px solid var(--lightgray);}

/* <!---------------------------- 選單 ----------------------------> */

.navbar {background-color: black; color: white;}

.navbar-toggler {
  padding: 0.25rem 0.5rem;}


.fa-bars{color:white;}


.nav-item {padding: 1em 0rem;}

.nav-link {
  margin: 0px;
  display: inline-block;
  padding-right: 0px !important; 
  padding-left: 0px !important;
  line-height:1;  font-size: min(calc(14px + 0.5vw),18px);}


.nav-link:hover{
    -moz-transform:translateY(-2px);
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);

    -moz-transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    
    -moz-transition-timing-function: cubic-bezier(0.2, 0.4, 0.7, 0.8);  
    -webkit-transition-timing-function: cubic-bezier(0.2, 0.4, 0.7, 0.8);  
    transition-timing-function: cubic-bezier(0.2, 0.4, 0.7, 0.8);
    border-bottom: solid 3px;}

.nav-logo > img {height:2rem; padding-right: 1rem; padding-left: 0.5rem;}


.dropdown-menu {
   background-color: black;
  border: 0px solid rgba(0, 0, 0, 0);
  padding: 0px !important;
  border-radius: 0px;max-width: 10rem;}

.dropdown-item { cursor: pointer;  font-size: min(calc(14px + 0.5vw),18px);
 color: white; }

.dropdown-item:hover, .dropdown-item:focus {
  color: var(--orange);}

.dropdown-item.active, .dropdown-item:active {
  background-color: white;}


.navbar-nav .nav-link { color: inherit !important; }

.nav-link.disabled, .dropdown-item.disabled {color: var(--gray) !important;}


@media (min-width: 992px) { .nav-item {padding: 0rem 1rem;}}

/* <!--------------------------offcanvasTop--------------------------> */

#offcanvasTop {height:100vh; }

#offcanvasTop .fw-bold { margin-top:1rem; margin-bottom: -1rem; }

.offcanvas-body {  margin-top:-1rem; }

.canvas-link {font-size: min(calc(14px + 0.5vw),18px);}
.canvas-link:hover {color:var(--orange);}

#offcanvasTop .dropdown-item {background-color: white;
 border: 1px solid var(--lightgray);
 padding: 0px;}


#offcanvasTop .dropdown-item:hover {background: var(--lightgray);}

@media (min-width: 992px) {
  #offcanvasTop {height:75vh;}}

/* <!--------------------------image--------------------------> */
.image-100 { 
    display: block;
    width: 100%;
    height:100vh;
    background-size:  cover;
    overflow: hidden;
    background-position: center; background-repeat: no-repeat;}

.image-75 { 
    display: block;
    width: 100%;
    height: 75vh;
    background-size: cover;
    overflow: hidden;
    background-position: center; background-repeat: no-repeat;}


.image-50 { 
    display: block;
    width: 100%;
    height: 50vh;
    background-size: cover;
    overflow: hidden;
    background-position: center; background-repeat: no-repeat;}

.image-40 { 
    display: block;
    width: 100%;
    height: 40vh;
    background-size: cover;
    overflow: hidden;
    background-position: center; background-repeat: no-repeat;}

.image-35 { 
    display: block;
    width: 100%;
    height: 35vh;
    background-size: cover;
    overflow: hidden;
    background-position: center; background-repeat: no-repeat;}

.image-25 { 
    display: block;
    width: 100%;
    height: 25vh;
    background-size: cover;
    overflow: hidden;
    background-position: center; background-repeat: no-repeat;}

.image-auto { 
   display: block;
    width: 100%;
    height: auto;
    background-size: cover;
    overflow: hidden;
    background-repeat: no-repeat;}

/* <!--------------------------video--------------------------> */


/* <!--------------------------回到上面--------------------------> */

.goTop {
  position: fixed;
  width: 8vw;
  left: 0; 
  bottom: min(calc(18px + 1.1vw),36px); 
  transform: translateX(0);
  transition: transform 0.2s;
  text-align: center;
  font-size: min(calc(18px + 1.1vw),36px); 
  background-color: transparent;
}
.goTop a {color: var(--orange);}

.goTop.hide {transform: translateX(-8vw);}

.goTop .goTopBtn {
  border: none;
  outline: none;
  cursor: pointer;
}


/* <!---------------------------- com-info ----------------------------> */
#com-info { padding-top: 6vh; padding-bottom: 6vh; background-color: black;}

#com-info .logo { height: 5rem; }

#com-info img { height: 1.5rem;} 

#siteseal img { height: 1.2rem; margin-top: .6rem;} 

@media (min-width: 576px) {
 #com-info .logo { height: 6rem; }

#com-info img { height: 2rem;} 

#siteseal img { height: 1.6rem; margin-top: .8rem;} 
}
/* <!------------------------------------------index------------------------------------------> */

#index-video { margin-top: 4rem; }

#index-video {
  position: relative;
  height: 70vw;
  overflow: hidden;
}

#index-video video {height:70vw;}

@media (min-width: 768px) {
  #index-video {height: 56.25vw;}

#index-video  video{height: 56.25vw;}
}

#partners {padding-top: 8vh;}

#partners  img { border: 1px solid var(--lightgray);}

#contactus{ padding-top: 8vh; padding-bottom: 8vh;}


#mail-form .form-control {
  border: 1px solid var(--lightgray);
  border-radius: 0.1rem;
  background-color: transparent;
 color: black; outline:none;}

 #mail-form .form-control:focus {border: 1px solid var(--orange);}

 #carousel-product-01 .headline-2 { margin:2vh 15vw; padding: 4vw 0; color: white;
   display: block; text-align: center;}

@media (min-width: 768px) {  #carousel-product-01 .headline-2 { margin:2vh 10vw;  padding: 4vw 10vw; 
  display: inline-block;}}


#carousel-product-02 .headline-2 { margin-left: 1.25rem; margin-top:2vh;}

@media (min-width: 576px) { #carousel-product-01 .headline-2  {margin-top: 4vh;}}

@media (min-width: 768px) { #carousel-product-01 .headline-2  {margin-top: 6vh;}}

@media (min-width: 992px) { #carousel-product-01 .headline-2  {margin-top: 8vh;}}

 #carousel-product-01 img,  #carousel-product-01 video{height:70vw;}

  #carousel-product-01 .carousel-item {height:70vw;}


 @media (min-width: 768px) {  #carousel-product-01 img,  #carousel-product-01 video {width: 100vw;height:56.25vw;}
 

  #carousel-product-01 .carousel-item, #carousel-product-02 .carousel-item {height:56.25vw;}}

#carousel-product-01 .carousel-control-prev-icon, #carousel-product-01 .carousel-control-next-icon,
#carousel-product-02 .carousel-control-prev-icon, #carousel-product-02 .carousel-control-next-icon {
 color: var(--lightgray); font-size: min(calc(18px + 1.1vw),36px); }

#carousel-product-01 .carousel-indicators button { width: min(4vw, 2rem); height:0.25rem;}

#carousel-product-02 { padding: 4vh 8vw; }

 .fa-icon-prev { width:8vw;left:0; top:32vw; 
  text-align:center;font-size: min(calc(18px + 1.1vw),36px); color: var(--gray);}

 .fa-icon-next { width:8vw;right:0; top:32vw; 
  text-align:center;font-size: min(calc(18px + 1.1vw),36px); color: var(--gray);}

 @media (min-width: 992px) { .fa-icon-prev, .fa-icon-next {top:16vw; } }

.owl-nav button.owl-prev { 
  left: -6vw; }

.owl-nav button.owl-next {
  right: -6vw;}

.owl-dots {
  text-align: center;
  padding-top: 15px;
}
.owl-dots button.owl-dot {
  width: min(4vw, 2rem); height:0.25rem;
  display: inline-block;
  background: var(--lightgray) !important;
  margin: 0 3px;
}
.owl-dots button.owl-dot.active {
  background-color:var(--gray) !important;
}
.owl-dots button.owl-dot:focus {
  outline: none;
}
.owl-nav button {
  width: 6vw;
  position: absolute;
  top: 50%;
  background-color: transparent !important;
  color:transparent !important;
  margin: 0;
  transform: translateY(-50%);
  transition: all 0.3s ease-in-out;
}

#carousel-product-02 span {
  font-size: 70px;
  position: relative;
  top: -5px;
}
.owl-nav button:focus {
  outline: none;
}

 /* <!------------------------------------------product01------------------------------------------> */

#pro01-image-01 {background-image: url("../images/pro01-image-01.jpg");
  margin-top: 4rem;}

#pro01-image-02 {background-image: url("../images/pro01-image-02.jpg");}

#pro01-info-01A { padding-top: 8vh; padding-bottom: 8vh; }

#pro01-info-01B { padding-top: 8vh; padding-bottom: 8vh; }

#pro01-info-01C { padding-top: 8vh; padding-bottom: 8vh;}

#pro01-info-01D { padding-bottom: 8vh;}

#pro01-info-02 { padding-bottom: 8vh;}

#pro01-info-03A { padding-top: 8vh; padding-bottom: 8vh;}

#pro01-info-03B { padding-top: 8vh; padding-bottom: 8vh;}

#pro01-info-03C { padding-top: 8vh; padding-bottom: 8vh;}

#pro02-image-01 {background-image: url("../images/pro02-image-01-s.jpg");
  margin-top: 4rem; }

@media (min-width: 768px) {
  #pro02-image-01 {background-image: url("../images/pro02-image-01.jpg"); background-position: right;}}

#pro02-info-01 { padding-top: 8vh; padding-bottom: 8vh;}

@media (min-width: 1400px) {#pro02-info-01 { padding-top:0; padding-bottom: 8vh;}}

#pro02-info-02 { padding-top: 8vh; padding-bottom: 8vh;}

#pro02-info-03 { padding-top: 8vh; padding-bottom: 8vh;}

#pro02-info-04 { padding-top: 8vh; padding-bottom: 8vh;}

#pro02-info-05 { padding-top: 8vh; padding-bottom: 8vh;}

#pro02-info-06 { padding-top: 8vh; padding-bottom: 8vh;}

#pro02-info-07 { padding-top: 8vh; padding-bottom: 8vh;}

#pro02-info-08 { padding-top: 8vh; padding-bottom: 8vh;}

#pro02-info-09 { padding-top: 8vh; padding-bottom: 8vh;}

#pro02-info-10 { padding-top: 8vh; padding-bottom: 8vh;}

#pro03-image-01 {background-image: url("../images/pro03-image-01.jpg");
  margin-top: 4rem;background-position: right;}

#pro03-info-01 { padding-top: 8vh; padding-bottom: 8vh;}

#pro03-image-02 {background-image: url("../images/pro03-image-02.png");background-color: var(--lightgray);}


#pro03-info-02A { padding-top: 8vh; padding-bottom: 4vh;background-color: var(--lightgray);}

#pro03-info-02B { padding-top: 4vh; padding-bottom: 12vh;}

#pro03-image-03 {background-image: url("../images/pro03-image-03-s.png");background-color: var(--lightgray);}

#pro03-info-03 { padding-top: 4vh; padding-bottom: 8vh;}

@media (min-width: 768px) {
  #pro03-image-03 {background-image: url("../images/pro03-image-03.png");
   background-position: right;}}

#pro03-image-04 {background-image: url("../images/pro03-image-04.png"); background-position: left;}

#pro03-info-04 { padding-top: 8vh; padding-bottom: 12vh;}

#pro03-image-05 {background-image: url("../images/pro03-image-05.png");background-position: right;}

#pro03-info-05A { padding-top: 4vh; padding-bottom: 4vh;}
#pro03-info-05B { padding-top: 4vh; padding-bottom: 8vh;}

#pro03-info-06A { padding-top: 8vh; padding-bottom: 4vh;}
#pro03-info-06B { padding-top: 4vh; padding-bottom: 8vh;}

#pro03-image-07 {background-image: url("../images/pro03-image-07.png");}

#pro03-info-07 { padding-top: 8vh; padding-bottom: 8vh;}

#pro03-info-08 { padding-top: 8vh; padding-bottom: 8vh;}

#pro03-info-09 { padding-top: 8vh; padding-bottom: 8vh;}

#pro03-info-10A { padding-top: 8vh; padding-bottom: 4vh; }
#pro03-info-10B { padding-top: 4vh; padding-bottom: 8vh;}

#pro01-info-01A .row { max-width: 65rem;}
#pro01-info-01A .col-12 {max-width: 20rem;}

.headline-margin.headline-2, .headline-margin.headline-2-en, .headline-margin.headline-2-jp
 { margin-left: 0.5rem; margin-bottom: 4vh;}

 .headline-margin-2.headline-2
 { margin-left: 0.5rem; margin-bottom: 2vh;}

#pro03-info-01 .headline-2, #pro03-info-02A .headline-2 {margin-left: 0;}

#pro01-info-01C .headline-3, #pro01-info-01D .headline-3 { padding: 0.25rem 1rem ; margin-bottom: 1rem; 
background-color: var(--lightgray); display: inline-block;}

#pro01-info-03A .headline-3, #pro01-info-03B .headline-3, #pro01-info-03C .headline-3 { padding: 0.25rem 0 ; margin-bottom: 1rem; 
border:1px solid black; text-align: center;}

#pro01-info-03A .brand-logo, #pro01-info-03B .brand-logo, #pro01-info-03C .brand-logo { height:min(calc(18px + 1.1vw), 36px); 
margin-left:min(calc(8px + 0.5vw), 16px); padding-bottom: 5px; width:auto !important;}



#pro01-info-03A img, #pro01-info-03B img , #pro01-info-03C img,#pro03-info-05B img{ width:100%; max-width: 24rem;}

#pro01-info-03C .max-width { max-width: 32rem !important; }

#pro01-info-03A .ms-md-auto, #pro01-info-03B .ms-md-auto, #pro01-info-03C .ms-md-auto {margin-bottom: 4vh;}

@media (min-width: 768px) {
  #pro01-info-03A .col-12, #pro01-info-03B .col-12,#pro01-info-03C .col-12 {margin-bottom: 4vh;}}



#pro03-info-03 .max-width { max-width: 8rem; }

#pro03-info-03 .max-width-2 { max-width: 25rem; }

#pro03-info-05A .me-5 .para-word {padding: 0px  min(calc(24px + 1.5vw),48px); 
 margin-left:0.5rem ; margin-bottom: 4vh;}

 #pro03-info-05A .col-sm-4 {margin-bottom: 4vh;}

@media (min-width: 576x) {
  #pro03-info-05B .ms-md-auto {margin-top: -3rem;}}

@media (min-width: 768px) {
  #pro03-info-05B .ms-md-auto {margin-top: 1rem;}}

#pro03-info-06A .max-width { max-width: 25rem; }
#pro03-info-06A .max-width-2 { max-width: 20rem; }
#pro03-info-06A .max-width-3 { max-width: 12rem; }

#pro03-info-06A .box-margin { margin-top: 4vh !important; }

#pro03-info-06B .max-width { max-width: 7rem; }
#pro03-info-06B .max-width-2 { width:30vw; max-width:  10rem; }

#pro03-info-06B .icon-size { width: min(calc(8px + 0.5vw),16px); height: min(calc(8px + 0.5vw),16px);}

#pro03-info-06B .box-margin { margin-bottom: 4vh !important; }

#pro03-info-07 .max-width { max-width: 20rem; }
#pro03-info-07 .max-width-2 { max-width: 8rem; }
#pro03-info-07 .box-margin { margin-top: 4vh !important; }

#pro03-info-08 .max-width { max-width: 20rem; }

#pro03-info-09 .max-width { max-width: 12rem; }

#pro03-info-09 .max-width-2 { max-width: 40rem; }


#pro03-info-10B .box-line-1.border-b:not(.last) {height: min(8vw,4rem); border-top: 0px; border-right: 0px;}
#pro03-info-10B .box-line-1.last { height: min(8vw,4rem); border-top: 0px;}

#pro03-info-10B .box-line-2.border-b:not(.last) { height: min(8vw,4rem); border-bottom: 0px; border-right: 0px;}
#pro03-info-10B .box-line-2.last { height: min(8vw,4rem); border-bottom: 0px;}

#pro03-info-10B .img-width-1 { width: min(18vw,9rem);}
#pro03-info-10B .img-width-2 { width: min(20vw,10rem);}
#pro03-info-10B .headline-4  { padding: min(calc(6px + 0.4vw),12px)  min(calc(24px + 1.5vw),48px);}

#pro03-info-10B .pro-line-v { height: min(8vw,4rem); width: 0px; border: black solid 2px; }

@media (min-width: 992px) {
#pro03-info-10B .border-b:not(.last) { height: min(4vw,4rem);}
#pro03-info-10B .last { height: min(4vw,4rem);}

#pro03-info-10B .img-width-1 {width:min(9vw,9rem);}
#pro03-info-10B .img-width-2 {width:min(10vw,10rem);}

}
/* <!----------------pro-box----------------> */

.pro-box {background-color: white; padding-bottom:1rem ;}

.pro-box-tag { position: ralative; top: 0; left: 0; 
  background-color: var(--darkgray); display: inline-block;
  color:white; padding: 0.5rem 2rem !important;}

.pro-box .headline-3 {padding: 0.5rem 2rem 0rem;}

.pro-box .para-word {padding: 0rem 2rem;}

#pro01-info-02 .pro-box,#pro02-info-08 .pro-box { background-color: var(--lightgray);}

#pro02-info-01 .pro-box, #pro02-info-03 .pro-box, #pro02-info-05 .pro-box,
#pro02-info-07 .pro-box,#pro02-info-08 .pro-box,#pro02-info-09 .pro-box { border: 1px solid black;}

.pro-box img {padding: 0.25rem 12vw;}

.pro-box-2 img {padding: 0 12vw;}

@media (min-width: 576px) {
  .pro-box img {padding: 0.25rem 0.5rem;} 
  .pro-box-2 img {padding: 0rem 0.5rem;}
}

@media (min-width: 768px) {
  .pro-box img {padding: 0.25rem 0.5rem;} 
  .pro-box-2 img {padding: 0 0.5rem;}
}
/* <!----------------pro-box----------------> */


/* <!----------------pro-arrow----------------> */

#pro03-info-01 .pro-circle, #pro03-info-02B .pro-circle { width: 8px; height: 8px; 
    border: 1px solid var(--orange); border-radius: 50%; 
    position: ralative; background-color: white;}

#pro03-info-01 .pro-arrow-1 .pro-line { 
    width: min(50vw, 300px); height: 0px; display: inline-block; 
  border-top: 2px solid var(--orange); }

  #pro03-info-01 .pro-arrow-2 .pro-line { 
    width: min(56vw, 336px); height: 0px; display: inline-block; 
  border-top: 2px solid var(--orange); }

#pro03-info-01 .pro-arrow-1 .pro-line-en { 
    width: min(50vw, 300px); height: 0px; display: inline-block; 
  border-top: 2px solid var(--orange); }

  #pro03-info-01 .pro-arrow-2 .pro-line-en { 
    width: min(56vw, 336px); height: 0px; display: inline-block; 
  border-top: 2px solid var(--orange); }

#pro03-info-02B .pro-line-v { width: 0px; border-right: 2px solid var(--orange); margin-left:2px;}

#pro03-info-01 .pro-arrow-1 {left:min(26vw, 156px); top:min(4vw, 24px)}

#pro03-info-01 .pro-arrow-2 {left:min(20vw, 120px); top: min(24vw, 144px);}

#pro03-info-01 .pro-pic { height:min(40vw, 240px); background-image:url("../images/Zero_Nuts.png");
 background-size:auto min(40vw, 240px) ; background-repeat: no-repeat;} 

.pro03-02-01 .pro-line-v{ height: min(17vw,136px); }

.pro03-02-02 .pro-line-v{ height: min(6vw,48px); }

.pro03-02-03 .pro-line-v{ height: min(8vw, 64px); }

.pro03-02-01 .pro-arrow {left:min(32vw,256px); top:min(8vw,64px);}

.pro03-02-02 .pro-arrow {left:min(14.5vw,116px); bottom:min(14vw,112px);}

.pro03-02-03 .pro-arrow {left:min(16vw,128px); bottom:min(12vw, 96px);}

.pro03-02-02 .para-word {top:min(21vw,168px);}

.pro03-02-03 .para-word {top:min(21vw,168px);}


.pro03-02-01 {background-image:url("../images/Unichange.png"); margin-bottom: min(4vw,24px);
  background-repeat: no-repeat; min-height: min(25vw,200px); background-size: min(37.5vw,300px) min(25vw,200px);}

.pro03-02-02 {background-image:url("../images/For_ID_Thread.png");
  background-repeat: no-repeat; min-height: min(20vw,160px); width:min(40vw,320px) ;background-size: min(40vw,320px) min(20vw,160px);}

.pro03-02-03 {background-image:url("../images/For_OD_Thread.png");
  background-repeat: no-repeat; min-height: min(20vw,160px); width:min(40vw,320px) ;background-size: min(40vw,320px) min(20vw,160px);}



@media (min-width: 576px) {
#pro03-info-01 .pro-circle, #pro03-info-02B .pro-circle { width: 10px; height: 10px; border: 2px solid var(--orange);}
#pro03-info-01 .pro-line { border-top: 3px solid var(--orange); }
#pro03-info-02B .pro-line-v { border-right: 3px solid var(--orange); margin-left:3px;}}



@media (min-width: 768px) {
#pro03-info-01 .pro-arrow-1 .pro-line { width: min(34vw, 204px);}
#pro03-info-01 .pro-arrow-2 .pro-line { width: min(40vw, 240px);}

#pro03-info-01 .pro-arrow-1 .pro-line-en { width: min(38vw, 228px);}
#pro03-info-01 .pro-arrow-2 .pro-line-en { width: min(44vw, 264px);}

}


@media (min-width: 992px) {
  #pro03-info-01 .pro-arrow-1 .pro-line { width: 384px;}
   #pro03-info-01 .pro-arrow-2 .pro-line { width: 420px;}

   #pro03-info-01 .pro-arrow-1 .pro-line-en { width: 348px;}
   #pro03-info-01 .pro-arrow-2 .pro-line-en { width: 384px;}

  .pro03-02-01 .pro-line-v{ height: min(11vw,157px); }

  .pro03-02-02 .pro-line-v{ height: min(4vw,60px);}

  .pro03-02-03 .pro-line-v{ height: min(5vw,75px);}

  .pro03-02-01 .pro-arrow {left:min(20vw,300px); top:min(5.5vw,82px);}

  .pro03-02-02 .pro-arrow {left:min(9vw,135px); bottom:min(8.5vw,128px);}

  .pro03-02-03 .pro-arrow {left:min(9.5vw,143px);  bottom:min(7.5vw,113px);}

  .pro03-02-01 { min-height: min(16vw,240px); background-size: min(24vw,360px) min(16vw,240px); margin-bottom: min(4vw,60px);}

 .pro03-02-02 { min-height: min(12vw,180px); width:min(24vw,360px); background-size: min(24vw,360px) min(12vw,180px); margin-right: min(2vw,60px);}

 .pro03-02-03 { min-height: min(12vw,180px); width:min(24vw,360px); background-size: min(24vw,360px) min(12vw,180px);}

.pro03-02-02 .para-word {top:min(13vw,188px);}

.pro03-02-03 .para-word {top:min(13vw,188px);}
}
  /* <!----------------pro-arrow----------------> */

/* <!----------------collapse-button----------------> */

.collapse-button:not(.collapsed) {color: var(--orange);}

.collapse-button::after,
.collapse-button:not(.collapsed)::after {
content: "\f055";
font: var(--fa-font-solid);
font-weight: 900;
text-align: center; margin-left: 0.5rem;
color: var(--orange);}

.collapse-button:not(.collapsed)::after {content: "\f056";}

/* <!----------------collapse-button----------------> */


 /* <!------------------------------------------service------------------------------------------> */

#service-image-01 {background-image: url("../images/service-image-01.jpg");
  margin-top: 4rem;}

#service-info-01 { padding-top: 8vh; padding-bottom: 4vh;}

#service-cases { padding-top: 4vh; padding-bottom: 8vh;}

#service-info-01 .max-width {max-width: 16rem;}

#service-cases a {transition: border-color 0.15s ease-in-out;}

#service-cases a:hover , #service-cases a:focus { color: var(--orange) !important; }


 /* <!------------------------------------------news------------------------------------------> */

#news-image-01 {background-image: url("../images/news-image-01.jpg");
  margin-top: 4rem;}

#news-list { padding-top: 8vh; padding-bottom: 8vh;}

.news-box { border-bottom: 1px solid var(--lightgray); }

.news-box .news-pic {
    height: auto; flex-shrink: 0; width: min(60vw, 20rem);}

.news-box .news-pic  img{ border: 1px solid var(--lightgray);}

.news-more { background-color: var(--orange); color:}

/*Pagination CSS*/
#page_navigation {
  clear:both;margin: 20px 0;}

#page_navigation a{
  padding:3px 6px;
  margin: 0 6px;
  border:1px solid var(--lightgray);
  margin:2px 8px;
  color:var(--gray);
  text-decoration:none
}

.active_page{
  background:var(--orange);
  color:white !important;
}

 /* <!------------------------------------------aboutus------------------------------------------> */

#aboutus-image-01 {background-image: url("../images/aboutus-image-01.jpg");
  margin-top: 4rem;}

#aboutus-01 { padding-top: 8vh; padding-bottom: 4vh;}

#aboutus-02 { padding-top: 4vh; padding-bottom: 8vh;}

 /* <!------------------------------------------videos------------------------------------------> */

 #videos-image-01 {background-image: url("../images/videos-image-01.jpg");
  margin-top: 4rem;}

.modal-dialog {
      max-width: 800px;
      margin: 30px auto;}

.modal-body {
  position:relative;
  padding:0px;}

.video-btn-close {
  position:absolute;
  right:-30px;
  top:0;}

.video-btn{ box-shadow: none !important;}

#videos-list { padding-top: 8vh; padding-bottom: 8vh;}