@charset 'UTF-8';
/*===========================================
reset.css
!!!!! Do not edit !!!!!
===========================================*/

v\:line, v\:rect, v\:fill, v\:image, v\:stroke{ behavior: url(#default#VML); }

/*--------------------------------------------
  HTML5 Reset ::style.css
  -------------------------
  We have learned much from/been inspired by/taken code where offered from:
  Eric Meyer:http://ericmeyer.com
  HTML5 Doctor:http://html5doctor.com
  and the HTML5 Boilerplate:http://html5boilerplate.com
---------------------------------------------*/

/* Let's default this puppy out
--------------------------------*/
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd,
q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    font-family: Helvetica, Arial, Tahoma, "思源黑体", "microsoft yahei", "微软雅黑", sans-serif;
}
p{
  margin-bottom:10px;
}

html {
    scroll-behavior: smooth;
}

.module-title {
    color: #004098;
}
article, aside, figure, footer, header, hgroup, nav, section{display:block;}

/* Responsive images and other embedded objects
   Note:keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed{max-width:100%;}

html{overflow-y:scroll;}
.header-top ul, #breadCrumb ul, #sidebar ul{list-style:none;padding:0;}
ol.list-bracket {
  counter-reset: list;
}
ol.list-bracket > li {
  list-style: none;
}
ol.list-bracket li:before{
  content: "("counter(list) ") ";
  counter-increment: list;
}
/*li{
  padding:9px 0;
}*/
blockquote, q{quotes:none;}
blockquote:before,
blockquote:after,
q:before,
q:after{content:''; content:none;}
a{margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent;}
del{text-decoration:line-through;}
abbr[title], dfn[title]{border-bottom:1px dotted #000; cursor:help;}
table{border-collapse:collapse; border-spacing:0;}
th{font-weight:bold; vertical-align:top;}
td{font-weight:normal; vertical-align:top;padding:10px 15px;}
hr{display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0;}
input, select{vertical-align:top;}
pre{
  white-space:pre; /* CSS2 */
  white-space:pre-wrap; /* CSS 2.1 */
  white-space:pre-line; /* CSS 3 (and 2.1 as well, actually) */
  word-wrap:break-word; /* IE */
}
input[type="radio"]{vertical-align:middle;}
input[type="checkbox"]{vertical-align:middle; *vertical-align:baseline;}
input[type="button"],
input[type="submit"]{-webkit-appearance:none; -webkit-border-radius:0;}

select, input, textarea{font:99% sans-serif;}
table{font-size:inherit; width:100%;}
a:hover, a:active{outline:none;}
small{font-size:85%;}
strong, th{font-weight:bold;}
td, td img{vertical-align:top;} 
sub, sup{font-size:75%; line-height:0; position:relative;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
pre, code, kbd, samp{font-family:monospace, sans-serif;}
.clickable,
label, 
input[type=button], 
input[type=submit], 
button{cursor:pointer;font-size:90%;}
button, input, select, textarea{margin:0;}
button{width:auto; overflow:visible;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
h1{
  font-size:2.8rem;
  line-height: 1.2;
  padding:43px 0;
  font-weight: 600;
}
h2{
    font-size: 2.4rem;
    line-height: 1.2;
    color: #000;
    /*margin-bottom:15px;*/
    font-weight: 600;
}
h3{
  font-size:1.8rem;
  font-weight: normal;
  color:#333;
  /*margin-bottom: 27px;*/
}
footer h3 {
    font-weight: bold;
    max-height: 21px;
    margin-bottom: 25px;
}
h4{
  font-size:20px;
  font-weight: bold;
  line-height: 23px;
}
img{
}
em{font-style:normal;}

.hidden{
    color: transparent !important;
    padding: 0 20px !important;
    line-height: 0 !important;
}
.center{
  text-align:center;
}
/*===========================================
base.css
!!!!! Do not edit !!!!!

* Base Setting
* wrapper
* header
* header [media queries]
* breadCrumb
* contents
* footer
* popup page
* clearfix
===========================================*/

/*-------------------------------------------
Base Setting
-------------------------------------------*/
html{font-size:62.5%;}
body,select,input,textarea{
  font-size:100%;
  -webkit-text-size-adjust:none;
}
a{
  color:#014099;
  text-decoration:none;
  -webkit-tap-highlight-color:rgba(0,0,255,0.2)!important;
}
a:link{-webkit-tap-highlight-color:#014099;}
a:hover{text-decoration:underline;}
a:visited{color:#004eb6; text-decoration:none;}
caption{margin-bottom:5px; text-align:left;}
ins{background-color:#fcd700; color:#000; text-decoration:none;}
mark{background-color:#fcd700; color:#000; font-style:italic; font-weight:bold;}
select{height:1.8em;}
input{padding:0 2px;}
textarea{padding:2px;resize:vertical;width:98%;}

@media screen and (max-width:767px){
  a:hover{opacity:1!important;}
}

/*********************
Editable Properties [header]
*********************/
body,select,input,textarea{
    font: 1.6rem Helvetica, Arial, Tahoma, sans-serif;
    font-weight: 300;
    line-height: 1.8;
    color: #333;
}
.black{
  color:#000 !important;
}
.white{
  color:#fff !important;
}
.blue{
  color:#014099 !important;
}
.green{
  color:#1f8131 !important;
}
.greybg{
  background: #f2f2f3;
}
.lightblue {
    color: #0879df !important;
}
.parallax{
  padding:40px 0;
  margin: 40px 0;
}
.responsive{
  display:none;
}
.antiresponsive{
  display:block;
}
/*-------------------------------------------
wrapper
-------------------------------------------*/
#wrapper{ margin: 0 auto; width: 100%; max-width: 1100px; }
#skipLink{position:absolute; left:-9999px;}


/*-------------------------------------------
header
-------------------------------------------*/
#headerWrap{display:flex;width:100%;}
/*#headerWrap{position:fixed; z-index:101; background-color:#fff; width:1280px; height: 110px; margin-left:-100px;}*/

/* logo
---------------------------------*/
/*header #logo{position:absolute; top:20px; left:100px; z-index:105;}*/
header #logo p{
    display: inline-block;
    vertical-align: middle;
}
header #spMenuBtn{display:none;}
header #logo .groupLogo img{vertical-align: top;}
header #logo .siteLogo a{display:inline-block; height: auto;}
header #logo .siteLogo a img{}
header #logo .siteLogo{padding:14px 0 0 25px;}
header #logo .originalLogo{padding:14px 0 0 0;}
header #logo .groupLogo img{width:192px;}

/* language nav 
---------------------------------*/
.lang-nav {
    /*right: -7px;
    top: 35px;
    position: absolute;*/
}
.lang-nav-ul {
    text-align: right;
}
.lang-nav-li {
    padding: 0px 5px;
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
}
.lang-nav-li a {
    color:black;
}
.lang-nav-li a img{
    width:20px;
    height:20px;
    vertical-align: middle;
}

/* siteFunctions
---------------------------------*/
#siteFunctions{
  /*position:fixed;
  z-index:99;
  width:1080px;
  left:50%;
  margin-left:-540px;
  background-color:#fff;*/
  margin-left: auto;
}
#siteFunctions a{color:#333;}
#siteFunctions a:hover{text-decoration:none; color:#999;}
#siteFunctions.hideGnavHeader{height:110px;}

/* searchSet
---------------------------------*/
#searchSet{position:absolute; top: 151px; width:100%; background-color: #fff; display: none;}
#drawer.current #searchSet,
#drawer.noGnav #searchSet{top: 110px;}
#searchSet form input{display:inline-block; outline:none; font-size:2rem;}
#searchSet form input[type="text"]{
  width:85%;
  height:45px;
  box-sizing: border-box;
  border:#e5e5e5 1px solid;
  line-height: 45px;
  padding:5px 20px;
  background-color: #fff;
}
#searchSet form input.focusOff{color:#ccc;}
#searchSet form input[type="submit"]{
  width:15%;
  height: 45px;
  background-color:#014099;
  border:none;
  color:#fff;
}
#searchSet form input[type="submit"]:hover{opacity: 0.8;}

/* globalNav
---------------------------------*/
/*#gnavOverlay {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 98;
  top: 0px;
  background-color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
}
#gnavOverlay.current,
#gnavOverlay.noGnav{top: 110px;}

#gNavSP{display: none;}
#globalNav{*/
  /*position:fixed;
  z-index:999;
  width:1280px;
  top:110px;
  height: 41px;
  background-color: #fff;
  margin-left: -100px;*/
/*}
#globalNav.hideGnav{display:none;}
#globalNav ul.parentNav{margin:0;}
#globalNav ul.parentNav > li > a{font-weight: 600;}
#globalNav ul li{float:left;padding:0;}
#globalNav ul li a{
    padding: 5px 15px;
    font-size: 1.4rem;
    color: inherit;
}
#globalNav ul li:first-child a{padding-left:0;}
#globalNav ul li:last-child a {
    padding-right: 5px;
}
#globalNav ul li.lowerOpen a{color:#014099;}
#globalNav ul li a.current{color:#014099;}
#globalNav ul li a.off{color:#ccc;}
#globalNav ul li a.off:hover,
#globalNav ul li a:hover{text-decoration:none; color:#014099;}
#globalNav ul li a.menuToggle{display:none;}
#globalNav > p{
  position:relative;
  display:none;
  width:1200px;
  height:42px;
  margin:-60px auto 0;
  text-align:center;
  overflow:hidden;
}
#globalNav.close p{display:block; padding-bottom:18px;}*/

/* subGnav */
/*#globalNav ul li .subGnav {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
}
#globalNav ul li .subGnav .subInner{display:table; position:relative; width: 100%;}
#globalNav ul li .subGnav .category{
  display:table-cell;
  position:relative;
  width:21%;
  padding:37px 30px 30px;
  background:#014099;
  color:#fff;
  vertical-align: top;
  box-sizing: border-box;
}*/
/*#globalNav ul li .subGnav .category:before{content:''; float:left; min-height:130px;}*/
/*#globalNav ul li .subGnav a.category:hover{background-color:#034bb1;}
#globalNav ul li .subGnav .category a{color:#fff;}
#globalNav ul li .subGnav .category .heading{font-size:2rem; font-weight:bold; line-height:1.2;}
#globalNav ul li .subGnav .category .outline{margin-top:10px;}
#globalNav ul li .subGnav .menus{
  display: table-cell;
  width:79%;
  padding:30px 30px 30px 0;
  vertical-align: middle;
  box-sizing: border-box;
}
#globalNav ul li .subGnav .menus a{font-size: 1.6rem; padding:3px 10px;}
#globalNav ul li .subGnav .menus ul{display:table-cell; vertical-align:top; box-sizing: border-box; padding-left:30px; width: 40%;}
#globalNav ul li .subGnav .menus ul:last-child li{border:none;}
#globalNav ul li .subGnav .menus ul li{float:none;}
#globalNav ul li .subGnav .menus ul li a{display:inline-block;}
#globalNav ul li .subGnav .menus ul li.blank a{position: relative;}
#globalNav ul li .subGnav .menus ul li.blank a::after{display: inline-block;}
#globalNav ul li .subGnav .menus p.top{ font-size: 1.8rem; font-weight: bold;}*/

/* regionLang
---------------------------------*/
#selectRegion {
  display: none;
  position: absolute;
  top: 151px;
  z-index: 103;
  width:100%;
}
#drawer.current #selectRegion,
#drawer.noGnav #selectRegion{top: 110px;}
#selectRegion nav{display: table; width:100%;}
#selectRegion .regionHead {
  display: table-cell;
  box-sizing: border-box;
  width:21%;
  padding: 37px 30px 30px;
  vertical-align:top;
  background-color:#014099;
  color:#fff;
  font-size:2rem;
  font-weight: bold;
}
#selectRegion .regionList{
  display: table-cell;
  vertical-align: top;
  width: 79%;
  padding: 30px 30px 30px 40px;
  box-sizing: border-box;
  background-color: #fff;
}
#selectRegion .regionList ul{vertical-align: top; float:left; margin-left:100px;}
#selectRegion .regionList ul:nth-of-type(1){margin-left: 0;}
#selectRegion .regionList ul li{ margin-bottom:10px;}
#selectRegion .regionList ul li a{font-weight: bold;}

#subFunctions{position:absolute; top:10px; right:0; font-size:1.2rem;}
#subFunctions .langSelect{float:left; position:relative; font-family:Helvetica,Arial,sans-serif;}
#subFunctions .langSelect a{padding:1px 7px; line-height:1.2; color:#b2b2b2; border-left:#ccc 1px solid;}
#subFunctions .langSelect span + a{background:none;}
#subFunctions .langSelect span{padding-right:10px;}
#subFunctions .langSelect a.active{color:#333; font-weight:bold;}

#subFunctions .otherLink{float:right; margin:0 0 0 20px; padding-left:20px; border-left:#dcdcdc 1px solid; height: 20px;}
#subFunctions .otherLink:last-child{border:none;}
#subFunctions .otherLink a{display:block;}

/* funcBtns
---------------------------------*/
#funcBtns{display: flex;align-items:center;padding:0 5px;}
/*#funcBtns li{display:inline-block; height:20px; margin-left:30px;}*/
#funcBtns li span{display:block; width:20px; height: 20px; cursor: pointer;}
#funcBtns li span:hover{opacity:0.7;}
#funcBtns li#searchOpen{}
#funcBtns li#contactLink{
  /*width:auto;
  height:auto;*/
}
#funcBtns li#contactLink a{font-size:1.4rem;}
#funcBtns li#contactLink a:hover{text-decoration: none; opacity:0.7;}
#funcBtns #gnavTrigger {
  width: 20px;
  height: 20px;
  position: relative;
  cursor: pointer;
}
#funcBtns #gnavTrigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
#funcBtns #gnavTrigger span,
#funcBtns #gnavTrigger::before,
#funcBtns #gnavTrigger::after {
  position: absolute;
  left: 0;
  display: inline-block;
  width: 20px;
  height: 2px;
}
#funcBtns #gnavTrigger::before,
#funcBtns #gnavTrigger::after{content: '';}
#funcBtns #gnavTrigger::before {top: 1px;}
#funcBtns #gnavTrigger span{top: 9px;}
#funcBtns #gnavTrigger::after {top: 17px;}
[class^="icon-"], [class*=" icon-"], #funcBtns li#searchOpen span::before, #funcBtns li#regionOpen span::before, ul.iconLink li.newWindow a::after, a.newWindow::after, span.newWindow::after, .listBox.linkBlank::after, .productDetail .toBrandSite a::after, .linksWrap ul li.icon a::after, #searchSet form::before, #globalNav ul li .subGnav .menus ul li.blank a::after, #gNavSP ul li .subGnav .menus ul li.blank a::after {
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#funcBtns li {
    /*width: 20px;
    height: 20px;*/
    cursor: pointer;
    font-size: 20px;
    color: #83979d;
    margin-left: 30px;
}
#funcBtns li:hover {
    opacity: 0.7;
}
.homepage-banner {
    max-width: 1200px;
    height: auto;
    max-height: 520px;
    margin: 0 auto;
    overflow: hidden;
}
.homepage-banner img {
    width: 100%;
}

/*-------------------------------------------
header media queries
-------------------------------------------*/
  @media screen and (min-width:768px){
    /*#wrapper{width:1080px!important;}*/
    /*#drawer{height:auto!important;}*/
  }

  @media screen and (max-width:767px){
    /*body,select,input,textarea{font-size:13px;}*/
    .hidden{
      line-height: 1.8 !important;
      color: #014099 !important;
      padding:10px 20px !important;
    }
    .responsive{
      display:block;
    }

    .antiresponsive{
      display:none;
    }
    td{
      font-size:60% !important;
    }
    /*#wrapper{width:100%; min-width:320px;}*/
    .content-banner{
      width:100% !important;
    }
    /*#headerWrap{width:100%; height:auto; margin: 0;}*/
    #headerWrap.hideGnavHeader{height:42px;}
    /*#globalNav.hideGnav{display:block;}*/
    /*header #logo{display:block; position:relative; top:inherit; left:0; display:block; height: 50px; padding-left:12.5px; overflow:hidden;}*/
    /*header #logo .groupLogo{ padding-top:15px;}*/
    header #logo .groupLogo img{width:73px;}
    /*header #logo .siteLogo{ margin:0; padding:0;width:50%;}
    header #logo .siteLogo img{vertical-align:middle;}*/
    header #logo .originalLogo img{width:110px; height:12px;}
    
    /* spMenuBtn
    ---------------------------------*/
    /*header #logo #spMenuBtn{position: absolute; top:3px; right: 0; display: block;}*/
    /*.lang-nav{
      display: none;
    }
    #siteFunctions .lang-nav{
      display: block;
      position: initial;
      text-align: center;
    }*/
    #siteFunctions .lang-nav a{
      color:#fff;
    }
    header #logo #spMenuBtn span {
      display: inline-block;
      -webkit-transition: all .4s;
      transition: all .4s;
      box-sizing: border-box;
    }
    header #logo #spMenuBtn a {
      position: relative;
      display:block;
      width: 45px;
      height: 45px;
      box-sizing: border-box;
    }
    header #logo #spMenuBtn span {
      position: absolute;
      right:10px;
      width: 20px;
      height: 2px;
      background-color: #014099;
    }
    header #logo #spMenuBtn span:nth-of-type(1) {top: 13px;}
    header #logo #spMenuBtn span:nth-of-type(2) {top: 20px;}
    header #logo #spMenuBtn span:nth-of-type(3) {top: 27px;}
    header #logo #spMenuBtn .active span:nth-of-type(1) { -webkit-transform: translateY(8px) rotate(-45deg); transform: translateY(8px) rotate(-45deg); }
    header #logo #spMenuBtn .active span:nth-of-type(2) {opacity: 0;}
    header #logo #spMenuBtn .active span:nth-of-type(3) { -webkit-transform: translateY(-6px) rotate(45deg); transform: translateY(-6px) rotate(45deg); }

    /*#siteFunctions {
      display: none;
      position: fixed;
      z-index: inherit;
      width: 100%;
      height: 100%;
      top:50px; right:0; bottom:0; left: 0;
      margin-left: 0;
      padding:0;
      box-sizing: border-box;
      background-color: #014099;
    }*/
    #siteFunctions a:hover{color:#fff!important;}
    /*#drawer{
      display: block;
      position: relative;
      padding:10px 20px;
      overflow-y:scroll;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
    }*/
    #siteFunctions.hideGnavHeader {height: inherit;}

    #searchSet,
    #contactLink,
    #regionLang,
    #funcBtns,
    #subFunctions,
    #selectRegion{display:block!important; position: relative; top:inherit!important;}
    #gnavOverlay{display:none!important;}

    /* searchSet
    ---------------------------------*/
    #searchSet{display:block; position:relative; top:0!important; padding:10px 0; background-color: inherit; border-bottom:#0a53bb 1px solid;}
    #searchSet form{float:none;}
    #searchSet form{width:100%; margin:0; height:inherit;}
    #searchSet form::before{
      display: block;
      width: 17px;
      height: 17px;
      position:absolute;
      top:22px;
      left:10px;
      font-size:17px;
    }
    #searchSet form input[type="text"]{
      font-size:16px;
      width: 78%;
      height:40px;
      line-height: 35px;
      padding: 5px 5px 5px 35px;
      border:none;
      border-radius:0;
    }
    #searchSet form input[type="submit"] {
      width: 22%;
      height: 40px;
      background-color: #022b66;
      border: none;
      border-radius:0;
      font-size:1.4rem;
    }

    /* globalNav
    ---------------------------------*/
    /*#gnavTrigger,
    #globalNav{display: none!important;}
    #gNavSP{position:relative; display: block;}
    #gNavSP ul li a{*//*padding:5px 15px; font-size:1.4rem;*//*}
    #gNavSP ul li a.menuToggle{
      position:absolute;
      display:inline-block;
      top:10px;
      right:3%;
      margin:0;
      padding:0;
      width:24px;
      height:24px;
      cursor:pointer;
    }
    #gNavSP ul li a.menuToggle::before{
      content:'';
      display:inline-block;
      width:8px;
      height:8px;
      border-top:#fff 2px solid;
      border-right: #fff 2px solid;
      -ms-transform: rotate(135deg);
      -webkit-transform: rotate(135deg);
      transform: rotate(135deg);
      margin: -5px 0 0 5px;
      vertical-align: middle;
    }
    #gNavSP ul li.noList a.menuToggle{display:none;}
    #gNavSP ul li a.menuToggle.open::before{
      -ms-transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }
    #gNavSP>ul>li{border-bottom:#0a53bb 1px solid;}
    #gNavSP ul>li{position:relative;}
    #gNavSP ul li a{display:inline-block; color:#fff; padding:10px; font-size:15px;}
    #gNavSP ul li a:hover{text-decoration:none;}
    #gNavSP>ul.parentNav>li.lang-nav-li-y{display: none;}
    .lang-nav li.lang-nav-li-y{float:none !important;display:inline-block !important;}*/
    /* subGnav */
    /*#gNavSP ul li .subGnav{display:none; position:relative;}
    #gNavSP ul li.lowerOpen .subGnav{display:block;}
    #gNavSP ul li .subGnav .category{display:none;}
    #gNavSP ul li .subGnav .menus{padding:0 0 10px 20px;}
    #gNavSP ul li .subGnav .menus ul li a,
    #gNavSP ul li .subGnav .menus p.top a{display:block; padding:3px 10px;}
    #gNavSP ul li .subGnav .menus ul li a:hover{text-decoration:none; color:#999;}
    #gNavSP ul li .subGnav .menus ul li.blank a{position: relative;}
    #gNavSP ul li .subGnav .menus ul li.blank a::after{
      position: absolute;
      top:5px; right: 5%;
      display: block;
      width: 14px;
      height: 14px;
    }
    #gNavSP #noSubGnav .menuToggle,
    #gNavSP #noSubGnav .subGnav{display: none;}*/
    
    /* contactLink
    ---------------------------------*/
    #searchOpen,
    #regionOpen{display: none!important;}
    #funcBtns{right:inherit;}
    #funcBtns li#contactLink{
      display: block;
      height: auto;
      padding: 0;
      margin:20px 0;
    }
    #funcBtns li#contactLink a{
      display:block;
      padding:10px;
      text-align:center;
      color:#000;
      background-color:#fff;
    }
    #funcBtns li#contactLink a:hover{text-decoration:none; color:#000!important;}
    
    /* langSelect
    ---------------------------------*/
    #regionLang{margin:0; padding:0;}
    #subFunctions .langSelect{float:none; margin:15px 0; overflow:hidden;}
    #subFunctions .langSelect a,
    #subFunctions .langSelect span + a{
      display:block;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      width:32%;
      float:left;
      padding:7px;
      margin:0 0 0 2%;
      color:#fff;
      background:#022b66;
      border:none;
      text-align:center;
      line-height:inherit;
      font-size:1.4rem;
    }
    #subFunctions .langSelect a:hover{text-decoration:none;}
    #subFunctions .langSelect span + a{margin:0;}
    #subFunctions .langSelect span{clear:both; display:block; margin-bottom:7px; font-size:1.4rem; color:#fff;}
    #subFunctions .langSelect a.active{color:#fff;}

    #subFunctions .otherLink{margin:10px 0 0 0; float:none; height: auto; padding:0; border:none;}
    #subFunctions .otherLink a,
    #subFunctions .otherLink a:hover{
      display:block;
      padding:10px;
      text-align:center;
      color:#fff;
      background:none;
      background-color:#022b66;
    }

    /* selectRegion
    ---------------------------------*/
    #selectRegion nav{display: block; min-height: 0; margin-top:20px;}
    #selectRegion .regionHead {
      display: block;
      width:100%;
      margin-bottom:7px;
      padding:0;
      font-size: 1.4rem;
      font-weight: normal;
    }
    #selectRegion .regionList{
      display: block;
      width:100%;
      padding:0;
      background-color: inherit;
      overflow:hidden;
      box-sizing: border-box;
    }
    #selectRegion .regionList ul{display:inline; margin:0; float:none;}
    #selectRegion .regionList ul li{margin-bottom:10px; background-color:#022b66; width:32%; margin:0 0 2% 0; text-align:center; float:left; display: block; box-sizing: border-box;}
    #selectRegion .regionList ul:nth-of-type(1) li:nth-of-type(2),
    #selectRegion .regionList ul:nth-of-type(3) li,
    #selectRegion .regionList ul:nth-of-type(4) li:nth-of-type(3n+3){margin:0 2% 2%;}
    #selectRegion .regionList ul li a{display:block; font-size:1.4rem; font-weight: normal; padding:7px; color:#fff;}
    #selectRegion .regionList ul li a span{display: none;}
    #selectRegion .regionList ul li a:before{content:attr(data-jis);color:#fff;}
    .homepage-banner {
        width: 100%;
        height: auto;
        margin: 0 auto;
    }
  }



/*-------------------------------------------
breadCrumb
-------------------------------------------*/
#breadCrumb{ margin:20px 0; font-size:1.2rem; clear:both;}
#headerWrap + #breadCrumb{padding-top:121px;}
#breadCrumb ul{
  padding:0;
}
#breadCrumb li{
  float:left; white-space:nowrap;
  margin-right:5px;
  padding-top:3px;
  color:#999;
  line-height:1.2;
  white-space:normal;
}
#breadCrumb li::before{content:'>'; font-family: verdana,sans-serif; padding:0 3px;}
#breadCrumb li:first-child::before{padding-left:0; content:'';}
#breadCrumb li a{color:#999;}
#breadCrumb li a:hover{text-decoration:none;opacity: 0.7;}

  @media screen and (max-width:767px){
    #breadCrumb{margin:10px 0;font-size:85%;}
    #breadCrumb ul{padding:0 5px;}
/*    .fixedPadding,
    .hideGnavPadding{padding-top:42px!important;}*/
  }


/*-------------------------------------------
transparent button
-------------------------------------------*/
a.el_btn.-transparent {
    border: 1px solid white;
    color: white;
    background: transparent;
    transition: all 0.4s ease;
}

    a.el_btn.-transparent:hover,
    a.el_btn.-transparent:focus {
        border-color: #004098;
        color: #004098;
        background: white;
    }

/*-------------------------------------------
contents
-------------------------------------------*/
#contents {
    clear: both;
   /* padding: 0 1rem;*/
}
#headerWrap + #contents{padding-top:120px;}
/*#globalNav + #contents{padding-top:151px;}*/
#contents #main{float:left; width:800px;}

/* sidebar
---------------------------*/
#sidebar{float:right; width:260px;}
#sidebar dl dt{color:#fff; line-height:1.3; font-size:1.8rem;}
#sidebar dl dt a{display:block; padding:15px; background-color:#014099; color:#fff;}
#sidebar dl dt a:hover{background-color:#666; text-decoration:none;}
#sidebar dl > dd > ul{border-bottom:#e5e5e5 1px solid;}
#sidebar dl dd li{border-left:#e5e5e5 1px solid; border-right:#e5e5e5 1px solid; background-color:#fff; font-size:1.4rem;}
#sidebar dl > dd > ul > li:nth-of-type(1){padding-top:5px;}
#sidebar dl dd li a{display:block; padding:7px 20px; line-height:1.4; color:#000; text-decoration:none;}
#sidebar dl dd li a:hover{background-color:#eef4f9;}
#sidebar dl dd li.active a{font-weight:bold; color:#004097;}
#sidebar dl dd li.active li a{font-weight:normal; color:#5c5c5c;}

#sidebar dl dd li ul{margin:-5px 0 0 0;}
#sidebar dl dd li li{border:none;}
#sidebar dl dd li li.active a,
#sidebar dl dd li li li.active li.active a{font-weight:bold; color:#004097;}
#sidebar dl dd li li.active li a,
#sidebar dl dd li li li.active li a{font-weight:normal; color:#5c5c5c;}
#sidebar dl dd li li li.active a{font-weight:bold; color:#004097;}

#sidebar dl dd li li a{padding:5px 10px 5px 40px; background-position:23px 13px;}
#sidebar dl dd li ul ul{padding:0 0 5px;}
#sidebar dl dd li li li a{padding-left:60px; background-position:36px 13px;}
#sidebar dl dd li li li li a{padding-left:66px; background-position:36px 13px;}
#sidebar dl dd li a span.subname{display:block; padding:3px 0 0 0; background:none; font-size:1.2rem;}
#sidebar dl dd li.appear{display:none;}


/* sidebar [contact]
---------------------------*/
#sidebar .contact{margin-top:15px;}
#sidebar .contact a{
  display:block;
  text-align:center;
  padding:18px 10px;
  background-color:#fff;
  border:#eaeaea 1px solid;
  color:#333;
  font-size:14px;
}
#sidebar .contact a:hover{
  color:#fff;
  background-color:#004097;
  text-decoration:none!important;
}

/* sidebar [localNav]
---------------------------*/
#sidebar #localNav{margin-top:15px; border-bottom: none; border-top:#eaeae8 1px solid;}
#sidebar #localNav li{width:auto; border:#eaeae8 1px solid; border-top:none;}
#sidebar #localNav li:nth-of-type(1){padding-top:0px;}
#sidebar #localNav li a{padding:10px 15px;}
#sidebar #localNav li a:hover{background-color:#eef4f9;}


/* ------------------------------------------
footer
--------------------------------------------- */
footer{padding:77px 0 20px; clear:both; font-size:1.2rem; text-align: center;}
footer .footLinks li{display:inline-block; border-right:#e5e5e5 1px solid; line-height:1.5;}
footer .footLinks li:first-child{border-left:#e5e5e5 1px solid;}
footer .footLinks li a{padding:0 30px; color:#000;}
footer #copyright{width:auto; margin:0 auto;}
footer #groupLogo{margin:30px auto 15px;}
footer #groupLogo img{width:194px; margin:0 auto;}

/* footerNav
---------------------------*/
body#sitemap #footerNav{display: none;}
#footerNav{text-align: left; padding:0 30px;}
.footLinks{margin-top:30px;}
#footerNav a{color:#000;}
#footerNav > ul.parentNav > li{float:left; margin-left:50px;}
#footerNav > ul.parentNav > li > a{display: none;}
#footerNav .menus .top{display: none;}
#footerNav .menus a{color:#5e5e5e; font-size: 1.4rem;line-height:1.4rem;}
ul.menus{list-style: none;padding:0;}
#footerNav ul li{
  padding:5px 0;
}
/* pagetop
---------------------------*/
.pagetop{
  position: fixed;
  bottom: 50px;
  right: 50px;
}
.pagetop > a {
  display: block;
  position: relative;
  width: 50px;
  height: 50px;
  background-color: #999;
}
.pagetop > a:hover{background-color: #aaa;}
.pagetop > a::before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 40%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

  @media screen and (max-width:767px){
    footer{padding:20px 0 10px; text-align: left;}
    footer #footerInner p#copyright{color:#999;}
    footer #footerNav{display: none;}
    #footerNav + .footLinks{margin-top:0;}
    footer .footLinks{margin:0; padding:0 20px;}
    footer .footLinks li{display:block; border:none; margin-bottom: 5px;}
    footer .footLinks li:first-child{border:none;}
    footer .footLinks li a{padding:2px;}
    footer #copyright{width:auto; font-size:71%; margin:0 0 0 20px;}
    footer #groupLogo {margin: 20px 0 0; padding: 10px 20px; border-top: #e5e5e5 1px solid; }
    footer #groupLogo img{width:175px;}
    .pagetop {bottom: 20px; right: 0; }
  }


/*-------------------------------------------
popup page
-------------------------------------------*/
/* wrapper
---------------------------*/
/*body.popup #wrapper{
  width:1080px;
  margin:0 auto;
  text-align:left;
}*/

/* header
---------------------------*/
/*body.popup header{position:fixed; z-index:101; background-color:#fff; width:1080px; padding:20px 0; top:0; border-bottom:#eaeaea 1px solid;}*/
/*body.popup header p{float:left;}*/
/*body.popup header .siteLogo{padding:14px 0 0 25px;}*/
body.popup header .siteLogo a img{vertical-align: top;}
body.popup header .offleft{float:right; margin:10px 0 0;}
body.popup header .offleft a:hover{opacity:0.7;}
body.popup header .groupLogo img{width:192px;}

/* content
---------------------------*/
/*body.popup #contents{padding-bottom:20px;}
body.popup header + #contents{padding:103px 0 20px;}
body.popup header + #breadCrumb{padding:123px 0 0;}*/
body.popup h1{
  border:none;
  padding:0;
  color:#014099;
  font-weight:bold;
  margin:50px 0 15px;
  line-height:1;
  text-align:center;
}
body.popup .conBlock{ margin:0 auto 20px; text-align:center;}
body.popup .conBlock02{ margin:0 auto 20px;}
body.popup .conBlock02 ul{padding:25px 30px; border:1px solid #e7e7e7; text-align:left;}
body.popup .conBlock02 li{padding-left:1em; text-indent:-1em;}
body.popup .conBlock03{padding-bottom:265px; text-align:center;}
body.popup .conBlock03 .inqBtn a{display:inline-block; padding:8px 20px; background-color:#014099; color:#fff; font-size:1.8rem; font-weight:bold;}
body.popup .conBlock03 .inqBtn a:hover{text-decoration:none; background-color:#00265b;}
body.popup .pageTop{text-align:right;}

@media screen and (max-width:767px){
  body.popup #wrapper{width:100%; background-color:#fff;}
  body.popup header{width:100%; padding:0 0 0 12.5px; box-sizing: border-box;}
  /*body.popup header .groupLogo{float:left; padding-top:15px;}
  body.popup header .groupLogo img{width: 73px; vertical-align: top;}
  body.popup header .siteLogo{float:left; margin:0; padding:20px 0 0 8px;}
  body.popup header .siteLogo img{vertical-align:middle;}
  body.popup header .offleft{margin:10px 10px 0 0; width:16px; height:19px;}*/
  body.popup #contents{padding:0 10px;}
  body.popup header + #contents{padding:50px 10px 20px;}
  body.popup header + #breadCrumb{padding:50px 0 0;}
  body.popup h1{margin:20px 0 15px;}
  body.popup .conBlock{width:100%;}
  body.popup .conBlock02{width:100%;}
  body.popup .conBlock02 ul{padding:15px;}
  body.popup .conBlock03{padding-bottom:30px;}
  body.popup .conBlock03 a{display:block; width:80%; margin:0 auto; padding:10px; background-color:#013e94; color:#fff; font-size:1.8rem;}
  body.popup .conBlock03 a img{display:none;}
}


/*-------------------------------------------
clearfix
-------------------------------------------*/
.clearfix:after,
header:after,
header #logo:after,
#regionLang:after,
#globalNav ul:after,
#breadCrumb ul:after,
#contents:after,
footer:after,
footer ul:after{content:''; display:block; clear:both; height:0; overflow:hidden;}
.clearfix{clear:both;}
.intro{
  background: #014099;
  padding:30px;
  /*margin-top:-60px;*/
  position:relative;
  margin: 0 1rem;
}
.intro .readmore-btn:hover {
    background: white;
    color: #014099 !important;
}
.header-top {
    /*min-height:150px;*/
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    padding: 15px 1rem 5px 1rem;
}


/* columns */
.one_half, .one_third, .one_fourth, .two_third, .three_fourth, .one_fifth, .one_sixth, .five_sixth {
  position: relative;
  margin-right: 4%;
  float: left;
}
.one_full {
  width: 100%;
}
.one_half {
  width: 48%;
}
#toray_toyolac .linksWrap .one_half{
  width:50%;
}
#toray_toyolac .one_half.first-intro{
  margin-bottom:0 !important;
}
.one_third {
  width: 30.650%;
}
.pdf-link.one_third{
  width: 34.65%;
}
.one_fourth {
  width: 22%;
}
.one_fifth {
  width: 16.800%;
}
.one_sixth{
  width:7.5%;
}
.two_third {
  width: 65.350%;
}
.three_fourth {
  width: 74%;
}
.five_sixth{
  width: 88%;
}
.last {
  margin-right: 0 !important;
  clear: right;
}
.readmore-btn{
    border: #fff 2px solid;
    padding: 10px 35px;
    color: #fff !important;
    text-transform: uppercase;
    display:inline-block;
    min-width: 210px;
    margin-bottom:10px;
    text-align:center;
}
.readmore-btn.grey{
    border: 2px solid #91ce44;
    color: #91ce44 !important;
    background: #fff;
}
.readmore-btn:hover{
    text-decoration: none;
    opacity: 1;
}
.readmore-btn i{
  font-size:20px;
  font-weight: bold;
}
a.box{
  display:block;
  background-color: #eff4fa;
}
a.box:hover{
  opacity: 0.7;
  text-decoration: none;
}
a.box-blue{
  background:#014099;
}
a.box-blue h3{
  color:#fff;
  text-align:right;
}
.box{
  width:100%;
  text-align:center;
}
.box .box-img, .box .box-desc{
  display:inline-block;
  vertical-align: middle;
}
.box .box-img{
  width:65%;
}
    .box .box-desc {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 10px 25px;
        width: 35%;
        text-align: justify;
    }
.box-desc h2{
  color:#fff;
  margin-bottom: 1rem;
}
.box.box-desc-green{
  color:#fff;
  background: #91ce44;
}
.box-desc-green .readmore-btn:hover {
    color: #91ce44 !important;
    background: #fff;
}
.box.box-desc-grey{
  color:#fff;
  background: #83979d;
}
.box-desc-grey .readmore-btn:hover {
    color: #83979d !important;
    background: #fff;
}
.mission_box{
  display:inline-block;
  vertical-align: top;
  width:50%;
  border-right:1px solid #d8d8d8;
  margin-right:-5px;
}
.mission_box:last-child{
  border:0;
}
.mission_desc{
  padding:20px;
}
.mission_desc:first-child{
  border-bottom:1px solid #d8d8d8;
}
.biz-banner{
  margin-top:-6%;
  text-align:right;
  padding-right:30px;
}
.pdf-type{
  width:20%;
  padding-right:0 !important;
}
.pdf-process{
  width:15%;
  padding-right:0 !important;
}
.pdf-feature{
  padding-right:0 !important;
}
.automotive{}
.automotive tr{
  border-bottom:1px solid #d8d8d8;
}
.automotive td{
  border-right:1px solid #d8d8d8;
  padding:5px;
}
.automotive td:first-child{
  width:29%;
}
.automotive td:last-child{
  border-right:0;
}
@media only screen and (min-width: 480px) and (max-width: 767px){
  .one_half, .one_third, .one_fourth, .two_third, .three_fourth, .one_fifth, .one_sixth, .five_sixth {
      margin-right: 0%;
    }
    .one_half {
      width: 100%;
      /*margin-bottom: 40px;*/
    }
    #toray_toyolac .linksWrap .one_half{
      width:100%;
    }
    .one_third {
      width: 100%;
      /*margin-bottom: 40px;*/
    }
    .one_fourth {
      width: 100%;
      /*margin-bottom: 40px;*/
    }
    .one_fifth {
      width: 100%;
      /*margin-bottom: 40px;*/
    }
    .one_sixth{
      width:100%;
      /*margin-bottom:40px;*/
    }
    .five_sixth{
      width:100%;
      /*margin-bottom:40px;*/
    }
    .two_third {
      width: 100%;
      /*margin-bottom: 40px;*/
    }
    .pdf-link.one_third{
      width:100%;
    }
    .three_fourth {
      width: 100%;
      /*margin-bottom: 40px;*/
    }
    .linksWrap .pdf-link .pdf-download{
      width:100%;
    }
}
@media only screen and (max-width: 480px){
  .one_half, .one_third, .one_fourth, .two_third, .three_fourth, .one_fifth, .one_sixth, .five_sixth {
      margin-right: 0%;
    }
    .one_half {
      width: 100%;
      margin-bottom: 40px;
    }
    #toray_toyolac .linksWrap .one_half{
      width:100%;
    }
    .one_third {
      width: 100%;
      margin-bottom: 40px;
    }
    .one_sixth{
      width:100%;
      margin-bottom:40px;
    }
    .five_sixth{
      width:100%;
      margin-bottom:40px;
    }
    .pdf-link.one_third{
      width:100%;
    }
    .one_fourth {
      width: 100%;
      margin-bottom: 40px;
      /*text-align: center;*/
    }
    .one_fifth {
      width: 100%;
      margin-bottom: 40px;
    }
    .two_third {
      width: 100%;
      margin-bottom: 40px;
    }
    .three_fourth {
      width: 100%;
      margin-bottom: 40px;
    }
    .linksWrap .pdf-link .pdf-download{
      /*width:100%;*/
    }   
  /*.header-top{
    min-height:50px;
  }*/
  /*.row{
    margin-top:25px;
  }*/
  .intro{
    margin-top:0;
  }
}

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

    html, body, body div, span, object, iframe, h3, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video{
      /*font-size:90%;*/
    }
    #sidebar dl dt a{
      font-size:20px;
    }
    .box-desc{
      padding: 10px 15px 15px 30px;
    }
    /*#contents{margin:0 10px;}*/
    /*.row{margin:25px 10px 0 10px;}*/
    #headerWrap + #contents,
    #globalNav + #contents{padding-top:50px!important;}
    #contents #main{float:none; width:100%;}
    #contents #sidebar{float:none; width:100%; margin-top:30px;}
    #sidebar dd ul li{display:none;}
    #sidebar dd ul li.appear{display:block!important;}
    #sidebar dd ul li.appear li{display:block!important;}
    #sidebar #localNav li{display:block;}
    #sidebar dl dd li a span.subname{display:inline; padding-left:5px;}
    #sidebar nav{padding:10px; background-color:#f0f0f0; border:#eaeaea 1px solid;}
    #sidebar .contact a{padding:10px; height:auto;}
    #sidebar .contact a:hover{background-color:#014099; color:#fff;}
    .abtus_content .box .box-desc{
      width:100%;
      padding:15px 15px 0 30px;
    }
    .biz-banner{
      margin-top:-15%;
    }
    .box .box-img{
      width:100%;
    }
    .box .box-desc{
      width:100%;
    }
    .readmore-btn{
      float:none !important;
    }
  }

.home-page-blog {
    padding: 80px 0;
    background: #eff2f6;
}
.home-page-blog .blog-content {
    margin: 0 auto;
    width: 95%;
}
.home-page-blog .bi-content {
    padding: 20px;
    background: #fff;
    box-shadow: 0 1px rgba(0,0,0,.15);
    text-align: left;
}
.home-page-blog .post-date {
    display: block;
    margin: 0 0 5px;
    color: #9aa6b7;
}
.home-page-blog ul{
  padding:0;
}
.home-page-blog ul li{
  list-style: none;
  position: relative;
  z-index: 9;
  margin-bottom: 15px;
}
.home-page-blog .blog-list {
    position: relative;
    overflow: hidden;
    padding: 30px 0 50px;
}
.home-page-blog .blog-content {
    text-align: center;
}
.home-page-blog .blog-list:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1px;
    width: 1px;
    background: #c6d1de;
    content: "";
    z-index: 1
}
@media (min-width: 769px){
.home-page-blog .blog-item:nth-child(2n+1) {
    float: left;
    padding: 0 25px 0 0;
}
.home-page-blog .blog-item:nth-child(2n) {
    float: right;
    padding: 0 0 0 25px;
}
.home-page-blog .blog-item:first-child {
    margin: 0;
}
.home-page-blog .blog-item {
    position: relative;
    clear: both;
    margin: -25px 0 0;
    width: 50%;
}
.home-page-blog .blog-item:nth-child(2n+1):before {
    right: 16px;
    border-width: 9px 0 9px 9px;
    border-color: transparent transparent transparent #fff;
}
.home-page-blog .blog-item:nth-child(2n):before {
    left: 16px;
    border-width: 9px 9px 9px 0;
    border-color: transparent #fff transparent transparent;
}
.home-page-blog .blog-item:before {
    position: absolute;
    top: 25px;
    width: 0;
    height: 0;
    border-style: solid;
    content: "";
}
.home-page-blog .blog-item:nth-child(2n+1) .bi-content {
    text-align: right;
}
.home-page-blog .blog-item:nth-child(2n+1):after {
    right: -4px;
}
.home-page-blog .blog-item:nth-child(2n):after {
    left: -5px;
}
.home-page-blog .blog-item:after {
    position: absolute;
    top: 29px;
    width: 9px;
    height: 9px;
    border: 2px solid #c6d1de;
    border-radius: 50%;
    background: #e9eff6;
    content: "";
}
}
.welcome #wrapper{
  background: url('../images/bg-leaf.jpg') no-repeat;
  background-position:right;
  background-size:90%;
  margin-top: -60px;
  margin-bottom:40px;
}
.welcome #contents {
    padding: 0;
}
.pressBlock {
    text-align: justify;
    padding: 15px 15px;
}
    .pressBlock .readmore-btn:hover {
        background: #91ce44;
        color: #fff !important;
    }

.content-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    color: #fff;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  /*  height: 300px;*/
}
/*#product .content-banner, #socialresponsibility .content-banner{
  display: block;
}*/
.socialres{
  background: url('../images/banner-sr.jpg') no-repeat;
  position:relative;
}
.abtus{
  background: url('../images/banner-abtus.jpg') no-repeat;
  position:relative;
}
.ourbiz{
  background: url('../images/banner-ourbiz.jpg') no-repeat;
  position:relative;
}
.ourbiz h2 {
    color: #fff;
}
.banner-title{
  width: 100%;
  font-size:14px;
}
.banner-title h1{
  font-size:3rem;
  padding:0;
}

.topic {
    position: relative;
    transition: 0.4s;
    margin-bottom: 10px;
}
.topic:hover{
  opacity: 0.6;
}
    .topic a {
        display: flex;
        text-decoration: none;
    }
.topic-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    padding: 15px 50px;
    min-height: 200px;
}
.topic-title h2 {
    margin-bottom: 15px;
}

.for-csr .topic-title{
  top:26%;
}
.topic-title h1{
  font-weight: normal;
  letter-spacing: 3px;
  padding:0;
}
@media (max-width: 769px) {
    .topic-title {
        font-size: 0.8rem;
        min-height: 120px;
        padding: 15px 25px;
    }
    .topic-title h1{
        font-size:1rem;
    }
}
.white a{
  color:#fff;
}
.black a{
  color:#000;
}
.right .topic-title {
    /*right: 5%;*/
    text-align: right;
    padding-left: 30%;
}
.left .topic-title {
    /*left:5%;*/
    text-align: left;
    padding-right: 30%;
}
.topic-banner {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 20px;
}
.topic-banner-title{
  position:absolute;
  z-index: 9;
  /*bottom:45%;*/
  width: 100%;
  color: white;
  text-align: center;
}
.topic-banner-title-top{
  position:absolute;
  z-index: 9;
  top:20%;
  width: 100%;
}
.topic-banner-title.text-right{
  right:3%;
}
.topic-banner-title.text-left{
  left:3%;
}
.topic-banner-title.white{
  text-shadow: 2px 3px 0px rgba(0,0,0,0.8);
}
.topic-banner-title.black{
  color:#000;
  text-shadow: 2px 1px 0px rgba(0,0,0,0.2);
}
.topic-banner-title h1{
  padding:0;
  text-transform: uppercase;
  font-size: 40px;
  letter-spacing: 7px;
}

.topic.white .topic-title h2 {
    color: #fff;
}

@media (max-width: 769px) {
    .topic-banner-title h1{
        font-size: 2rem;
    }
    .topic-banner-title h2{
    /*font-size: 1rem;*/
    }
}
.topic-banner-title.mdmsg, .topic-banner-title.introduction{
  bottom:45%;
}
.topic-bg {
    width: 100%;
    height: 100%;
    margin-bottom: 0;
}
.topic .topic-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    margin-bottom: 0;
    z-index: -1;
}
    .topic-bg img {
        width: 100%;
        height: 100%;
    }
    .topic-bg.topic-bg-chairman img {
        object-fit: cover;
        object-position: left;
    }
ul.cert-inline{
  padding:0;
}
ul.cert-inline li{
  list-style: none;
  display: inline-block;
  vertical-align: top;
}
.sustain_icon h2{
  margin:0;
  font-weight: normal;
}
.sustain_icon{
  margin-bottom:20px;
}

.accordion {
    color: #7bc9ef;
    cursor: pointer;
    transition: 0.4s;
    padding:50px;
}
.accordion:hover{
  opacity:0.5;
}
.w3-container:after, .w3-container:before, .w3-panel:after, .w3-panel:before, .w3-row:after, .w3-row:before, .w3-row-padding:after, .w3-row-padding:before, .w3-cell-row:before, .w3-cell-row:after, .w3-clear:after, .w3-clear:before, .w3-bar:before, .w3-bar:after {
    content: "";
    display: table;
    clear: both;
}
.w3-container, .w3-panel {
    padding: 0 16px;
    max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow: hidden;
}
.w3-container ul{
  list-style: none;
  padding:0;
}
.w3-container ul li{
  display: inline-block;
  padding-right:10px;
  padding-bottom:5px;
}
.w3-container ul li a{
  background:#7dc8ef;
  color:#fff;
  text-align: center;
  padding:5px 15px;
  font-size:12px;
}
.w3-container ul li a:hover{
  text-decoration: none;
  background: #a7a7a7;
}
.w3-hide {
    /*display: none!important;*/
}
@-webkit-keyframes slide-down {
      0% { opacity: 0; -webkit-transform: translateY(-100%); }   
    100% { opacity: 1; -webkit-transform: translateY(0); }
}
@-moz-keyframes slide-down {
      0% { opacity: 0; -moz-transform: translateY(-100%); }   
    100% { opacity: 1; -moz-transform: translateY(0); }
}
.w3-show-block, .w3-show {
    /*display: block!important;
    -webkit-animation: slide-down .5s ease-out;
    -moz-animation: slide-down .5s ease-out;*/
    max-height: 1500px;
    transition: max-height 0.25s ease-in;
}
button, input {
    overflow: visible;
}
.w3-btn, .w3-button {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.w3-block {
    display: block;
    width: 100%;
}

.tab{
  border-bottom:1px solid #dcddde;
  margin-bottom:15px;
}
.tab button:focus{
  outline:0 !important;
}
.tab button.tablinks{
  text-transform: uppercase;
  background:none;
  border:0;
  font-size:18px;
  padding:5px 24px;
  letter-spacing: 1px;
  border-bottom:1px solid #dcddde;
  margin-bottom:-1px;
  background: #fff;
}
.tab button.tablinks.active{
  color:#000;
  border:1px solid #dcddde;
  border-bottom:0;
  border-bottom:1px solid #fff;
}

.product-info {
    margin-bottom: 10px;
    transition: 0.4s;
    background-size: cover !important;
}
.product-info h1, .product-info p{
  color:#fff;
  padding:0;
  letter-spacing: 2px;
  font-weight: normal;
}
.product-info-content{
  background: #000;
  color:#fff;
  padding:20px;
  margin-bottom:40px;
}
.product-info-content p{
  letter-spacing: 0;
  color:#fff;
}
.product-heavyweight{
  background:#000 center;
  background-image: url('../images/HeavyWeight.jpg');
}
.product-lightweight{
  background:#000 center;
  background-image: url('../images/light_weight_bg.jpg');
}
.product-yarndyed{
  background:#000;
  background-image: url('../images/yarn_dyed_bg.jpg');
}
.product-printedfabric{
  background:#000;
  background-image: url('../images/printed_fabric_bg.jpg');
}
.product-grey{
  background:#000;
  background-image: url('../images/grey_bg.jpg');
}
.product-cordura{
  background:#000;
  background-image: url('../images/cordura_bg.jpg');
  background-repeat: no-repeat;
}
.product-workwear{
  background:#000 center;
  background-image: url('../images/workwear_bg.jpg');
}
.product-dobby{
  background:#000;
  background-image: url('../images/dobby_bg.jpg');
}
.product-prints{
  background:#000;
  background-image: url('../images/prints_bg.jpg');
}
.product-comfort{
  background:#000;
  background-image: url('../images/comfort_bg.jpg');
}
.product-comfort h1, .product-comfort p, .product-gogreen h1, .product-gogreen p{

}
.product-gogreen{
  background:#000;
  background-image: url('../images/gogreen_bg.jpg');
}
.history{
  text-align: center !important;
}
.history .inline{
  width:14%;
  margin-bottom:20px;
}
@media screen and (max-width: 767px){
  .history .inline{
    width:100%;
  }
}
.history .lower{
  margin-top:5%;
}
.history p{
  margin:0;
  font-size: 100%;
  line-height: 20px;
  padding:0 5px;
  text-align:left;
}
.history-line{
  position: absolute;
}
ul#csr_menu{
  padding:0;
  color:#000;
}
ul#csr_menu li{
  list-style: none;
}
ul#csr_menu a.year{
  font-weight: bold;
  cursor:pointer;
  display: block;
}
ul#csr_menu li ul li{
  padding:0;
  width:100%;
}
ul#csr_menu .nav-tabs{
  border:0;
  padding:0;
}

ul#csr_menu li ul li a:before{
  display: inline-block;
  content:"•";
  padding-right: 10px;
}
ul#csr_menu li ul li a{
  padding:10px 20px;
  display: block;
}
ul#csr_menu li ul li a:hover, ul#csr_menu li ul li a.active{
  background: #dcdddf;
  text-decoration: none;
}
ul#csr_menu .nav-tabs .nav-link{
  border:0;
  color:#000;
}
.tab-pane-block{
  /*border-top:1px solid #dcddde;*/
  padding:10px 20px;
  background: #fff;
}
.tab-pane-block:nth-child(even){
  background: #dcddde
}

/*product lang tab*/
.tabWrapper {
    position:relative;
}
.tabWrapper input[type=radio] {
    display:none;
}
.tabWrapper .tab {
    display:none;
    border:1px solid black;
    padding:0 1em;
    box-shadow:inset 0.2ex 0.2ex 1ex 0.2ex rgba(0,0,0,0.66);
    float: right;
    width: 100%;
}
.tabWrapper input[type=radio]:checked+label+.tab+.tab,
.tabWrapper input[type=radio]:checked+label+input+label+.tab {
    display:block;
}
.tabWrapper input[type=radio]+label {
    display:inline-block;
    padding:0 12px;
    border:1px solid black;
    border-bottom:none;
    white-space:pre;
    float:right; 
}
.tabWrapper input[type=radio]:checked+label {
    font-weight:bold;
    background:black;
    color:white;
}

p.hist {
    text-align: center;
}

.content_photo1{
 width:50px;
 height:50px;    
}

.content-banner.toraytc {
    background: url(../images/torayTC.png) no-repeat;
    position: relative;
}
.content-banner.innovation {
    background: url(../images/innovation.png) no-repeat;
    position: relative;
}
.content-banner.aboutus{
    background: url(../images/aboutus-banner.jpg) no-repeat;
    position:relative;
}
.date {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 50px;
    text-align: center;
}
.date_month {
    display: block;
    background-color: #0080e5;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    padding: 5px 0;
}
.date_year {
    display: block;
    background-color: #222222;
    color: #fff;
    font-size: 14px;
}
p.toray{
    text-align:center;
}
p.torayb{
    text-align:center;
    font-weight:bold;
}
img.toray{
   /* padding-left:85px;*/
}
img.toraytc {
    /*padding-left: 55px;
    padding-bottom:10px;*/
}
img.tc {
    /*padding-left: 145px;*/
}
h1.top {
    padding-bottom: 50px;
    padding-right: 50px;
}
.separator {
    border-left: 2px solid lightgrey;
    height: 90%;
    position: absolute;
    left: 50%;
    margin-left: -3px;
    top: 0;
    margin-top: 33%;
}
.lang-nav-li-y {
    padding: 0px 5px;
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
    float: right !important;
}
.lang-nav-li-y a img {
    width: 20px;
    height: 20px;
}
.lang-nav li.lang-nav-li-y{
    display: none;
}


/** -----------------------------------
    250603
    Fix Responsive/Remove Hardcode
------------------------------------ **/
.fs-1 {
    font-size: 2.5rem !important;
}

.fs-2 {
    font-size: 2rem !important;
}

.fs-3 {
    font-size: 1.75rem !important;
}

.fs-4 {
    font-size: 1.5rem !important;
}

.fs-5 {
    font-size: 1.25rem !important;
}

.fs-6 {
    font-size: 1rem !important;
}

.ws-pre-line {
    white-space: pre-line !important;
}


#wrapper.page-header, .page-header {
    width: 100%;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 999;
    max-width: unset !important;
}

#drawer {
    display: flex;
    flex-direction: column-reverse;
    max-height: fit-content;
}

h3.blue {
    margin-bottom: 2.5rem;
}
.paragraph-point li, .paragraph-image-point li {
    padding: 9px 0;
}
    .paragraph-image-point li img {
        margin: 0 5px;
    }

.topic-banner-title-line {
    margin-bottom: 15px;
    padding: 0 15px;
}
.topic-banner-title-line:last-child {
    margin: 0;
}



/**-- aboutus/index.html --**/
.content-banner {
    display: flex;
    align-items: flex-end;
    padding-bottom: 40px;
}

    .content-banner #wrapper {
        display: flex;
        align-items: baseline;
        justify-content: center;
        flex-wrap: wrap;
        padding: 0 15px;
    }

        .content-banner #wrapper div:first-child {
            min-width: 25%;
            margin-right: 15px;
        }

        .content-banner #wrapper div:last-child {
            flex: 1;
        }

    .content-banner.content-banner-center {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
        .content-banner.content-banner-center #wrapper {
            justify-content: center;
        }

            .content-banner.content-banner-center #wrapper div {
                min-width: 25%;
                margin: 0;
                text-align: center;
            }


/**-- aboutus/toraytc.html --**/
.toraytc-item-group {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.toraytc-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1rem;
    width: 50%;
}
    .toraytc-item img {
        margin-bottom: 1rem;
        padding: 0 15px;
    }

/**-- social_responsibility/society.html --**/
.section-w-seperator .section-w:first-child {
    border-right: 1px solid #ccc;
}

/**-- product page --**/
.targeted-product {
    scroll-margin-top: 155px;
}



/**----------------- PHASE 2 ---------------------**/
/*--   local nav--*/

.local-nav {
    background-color: #F2F2F2;
    padding: 0 1.5%;
    margin-bottom:10px;
}

.menuLv4 {
    display: block !important;
}

.ly_localNav .menuLv2 .menuLv3 .parent > a::after{
    display:none !important;
}

.local-nav-list {
    display: flex;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 40px;
    align-items: center;
}

.local-nav-item a {
    font-size: 1.5rem;
    color: black;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background 0.3s ease;
}

    .local-nav-item a:hover {
        background-color: rgba(255, 255, 255, 0.2);
    }

.local-nav-item.active a {
    color: #004098;
    font-weight: bold;
}

@media (max-width: 960px) {
    .local-nav {
        background-color: #F2F2F2;
        padding: 0 1.5%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .local-nav-list {
        display: flex;
        flex-wrap: nowrap;
        gap: 15px;
        overflow-x: auto;
        padding-bottom: 10px;
    }

    .local-nav-item {
        flex: 0 0 auto;
    }

        .local-nav-item a {
            font-size: 1.3rem;
            white-space: nowrap;
            padding: 6px 10px;
            border-radius: 20px;
            color: black;
        }
}

@media print, screen and (min-width: 960px){

    body:not(.is_noGnav):not(.is_scrolled) .ly_header .logo .siteLogo img {
        height: 40px !important;
    }

    body:not(.is_noGnav).is_scrolled .ly_header .logo .siteLogo img{
        height: 26px !important;
    }
}


@media print, screen and (max-width: 959px){

    .ly_header .logo .siteLogo img {
        height: 25px !important;
    }
}

@media only screen and (max-width: 768px) {
    .ly_header .logo .siteLogo img {
        height: 18px !important;
    }
}


/**-- index.html --**/
.video-container {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    color: white;
}

.bg-video {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    z-index: 0;
}

.video-overlay {
    position: absolute;
    top: 23%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    text-align: center;
    padding: 0 20px;
    width: 100%
}

    .video-overlay h2 {
        font-size: 8.5rem;
        font-weight: bold;
        color: white;
    }

    .video-overlay h3 {
        font-size: 2.5rem;
        color: white;
    }

    .video-overlay .el_btn {
        font-size: 12px;
    }

.banner-main-title {
    text-align: center;
    color: black;
    margin-bottom: 10px !important;
    padding-bottom: 50px;
}

.scroll-section-container {
    display: flex;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.bg-darken-layer {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 2;
    pointer-events: none;
}

.bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.8s ease-in-out;
    z-index: 1;
}

.scroll-section-side-nav {
    flex: 0 0 200px;
    background: none;
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    padding-left: 100px;
}

    .scroll-section-side-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;
    }

    .scroll-section-side-nav li {
        display: inline-block;
        padding: 5px 0;
        margin: 10px 20px;
        color: white;
        cursor: pointer;
        transition: border-bottom 0.3s, color 0.3s;
        border-bottom: 2px solid transparent;
        width: auto;
        white-space: nowrap;
    }

        .scroll-section-side-nav li:hover {
            border-bottom: 2px solid rgba(255,255,255,0.5);
        }

        .scroll-section-side-nav li.active {
            background: none;
            border-bottom: 2px solid white;
        }

.scroll-section-content-area {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    z-index: 3;
}

.scroll-section-content {
    margin: 30px;
    text-align: left;
    color: white;
    max-width: 600px;
    display: none;
}

    .scroll-section-content.active {
        display: block;
    }

    .scroll-section-content p {
        font-size: 1.6rem;
        margin: 0px 30px 30px 0px;
    }

.partners-section {
    background: linear-gradient(to bottom, #d6e6f9, #ffffff);
    padding: 60px 40px;
}

.partners-container {
    display: grid;
    grid-template-columns: 1.5fr 2fr;
    gap: 40px;
    align-items: start;
    margin: 30px 100px;
}

.partners-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.logo-box {
    background: #fff;
    border-radius: 16px;
    flex: 1 1 calc(33.333% - 20px);
    max-width: calc(33.333% - 20px);
    min-width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .logo-box img {
        max-width: 80%;
        max-height: 80px;
        object-fit: contain;
        transition: transform 0.3s ease;
    }

    .logo-box:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    }

        .logo-box:hover img {
            transform: scale(1.2);
        }


.main-banner-animation {
    float: right;
    margin-top: 10%;
    width: 55%;
    max-width: 690px;
}

.box {
    display: flex;
    flex-wrap: wrap;
}

.banner-shadow {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}


@media (max-width: 1110px) {
    .video-container {
        height: auto;
    }

    .bg-video {
        position: relative;
        width: 100%;
        height: auto;
    }

    .video-overlay h2 {
        font-size: 4.5rem;
    }

    .scroll-section-container {
        height: fit-content !important;
        min-height: 50vh;
    }
}

@media (max-width: 760px) {

    .el_btn {
        font-size: 12px !important;
        margin-top: 0 !important;
        padding: 3px 6px !important;
    }

    .partners-container {
        grid-template-columns: 1fr;
        text-align: center;
        margin: 0px;
    }

    .partners-logos {
        justify-items: center;
    }
}

@media(max-width:700px) {
    .scroll-section-container {
        flex-direction: column;
        height: auto;
    }

    .scroll-section-side-nav {
        flex: 0 0 auto;
        padding-left: 20px;
        width: 100%;
        overflow-x: auto;
        z-index: 3;
    }

        .scroll-section-side-nav ul {
            display: flex;
            flex-wrap: wrap;
        }

        .scroll-section-side-nav li {
            white-space: normal;
            margin: 5px 10px;
        }

    .scroll-section-content-area {
        flex: 1;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        z-index: 3;
    }
}

@media(max-width: 750px) {

        .video-overlay h2 {
            font-size: 2.2rem;
        }

        .video-overlay h3 {
            font-size: 1.2rem;
            margin-bottom: 3px !important;
        }

        .video-overlay .el_btn {
            font-size: 12px;
            margin-top: 0 !important;
            padding: 3px 6px !important;
        }

}

@media(max-width: 450px) {
    .video-overlay {
        position: absolute;
        top: 25%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        padding: 0 10px;
    }

        .video-overlay h2 {
            font-size: 1.3rem;
            margin: 2px 0;
        }

        .video-overlay h3 {
            font-size: 1rem;
            margin-bottom: 0 !important;
        }

        .video-overlay .el_btn {
            font-size: 12px;
            margin-top: 0 !important;
            padding: 3px 6px !important;
        }

    .banner-title h1 {
        font-size: 2rem;
        margin: 20px 20px 0px !important;
    }

    .banner-title p {
        font-size: 1.6rem;
    }
}


/**-- contact_us.html --**/

.map-address-section {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center; 
    align-items: center;
    padding: 40px;
    background: #004098;
}

.map-image {
    flex: 0 1 auto;
    max-width: 600px;
}

    .map-image img {
        width: 100%;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

.address-list {
    flex: 0 1 auto;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.address-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .address-heading i {
        font-size: 24px;
        color: white;
    }

    .address-heading h2 {
        margin: 0;
        font-size: 25px;
        font-weight: bold;
        color: white;
    }


.address-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    flex-direction: column;
}

.address-text p {
    margin: 0;
    line-height: 1.5;
    font-size: 1.6rem;
    color: white;
}

.inq-banner {
    background: #004098 url('/shared/images/bluebg.jpg') no-repeat center;
    background-size: cover;
    color: white;
    color: white;
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

    .inq-banner h2 {
        font-size: 40px;
        font-weight: bold;
        margin-bottom: 10px;
        color: white;
    }

    .inq-banner p {
        font-size: 1.6rem;
        line-height: 1.6;
        color: white;
    }

.know-btn {
    margin-top: auto;
    white-space: nowrap;
}

.contact-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 15px;
}

    .contact-title h1 {
        color: #004098;
        padding: 30px 0px 0px 0px;
        margin: 0;
        flex: 1;
    }

    .contact-title p {
        flex: 1 1 auto;
        max-width: 70%;
        margin: 0;
        padding: 0px; /*dont change*/
        color: #004098;
        font-size: 1.6rem;
    }

    .contact-title .el_btn {
        flex-shrink: 0;
        white-space: nowrap;
        margin-top: 30px;
    }


/**-- ourstory/index.html --**/

.carousel {
    position: relative;
    overflow: hidden;
    height: 110vh;
    color: white;
}

.carousel-header {
    background: #004098;
    position: relative;
    z-index: 2;
    height: 35%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
}

.header-inner {
    width: 100%;
    max-width: 1200px;
    position: relative;
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 80px 0;
}

.carousel-title {
    font-size: 40px;
    font-weight: bold;
    margin-left: 20px;
    width: 80%;
    color:white;
}

.arrows {
    display: flex;
    gap: 10px;
}

.arrow-btn {
    background-color: white;
    border: none;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: transform 0.2s ease, background-color 0.3s ease;
}

    .arrow-btn:hover {
        background-color: #f0f0f0;
        transform: scale(1.1);
    }

    .arrow-btn i {
        font-size: 15px;
        color: #004098;
    }

.progress-line {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    display: flex;
    gap: 5px;
    padding: 0 20px;
}

.segment {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,0.4);
    transition: background 0.3s;
}

    .segment.active {
        background: #fff;
    }


.slides {
    position: relative;
    height: calc(100% - 70px);
}

.slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    display: none;
    transition: transform 0.5s ease;
}

    .slide.active {
        display: block;
    }

    .slide::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0);
        transition: background 0.3s ease;
        z-index: 1;
    }

    .slide:hover::before {
        background: rgba(0,0,0,0.4);
    }

    .slide:hover {
        transform: scale(1.05);
    }

.slide-content {
    position: absolute;
    bottom: 50%;
    left: 10%;
    right: 10%;
    z-index: 2;
}

    .slide-content h2 {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .slide-content p {
        max-width: fit-content;
        line-height: 1.5;
        margin-bottom: 1rem;
    }

.btn {
    background: #fff;
    color: #004098;
    padding: 0.5em 1.2em;
    text-decoration: none;
    border-radius: 3px;
    font-weight: bold;
}

.hover-card {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

.card-image {
    position: relative;
    overflow: hidden;
}

    .card-image img {
        width: 100%;
        height: auto;
        display: block;
        transition: transform 0.5s ease;
    }

    .card-image:hover img {
        transform: scale(1.1);
    }

.overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.4s ease;
    z-index: 1;
}

.card-image:hover .overlay {
    background: rgba(0, 0, 0, 0.5);
}

.card-text {
    position: absolute;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: white;
    z-index: 2;
    opacity: 0;
    transition: bottom 0.5s ease, opacity 0.5s ease; 
    width: 70%;
}

    .card-text p {
        font-size: 1.6rem;
    }

.reveal-on-scroll.active .card-text {
    bottom: 50%;
    transform: translate(-50%, 50%);
    opacity: 1;
}

.card-image:hover .card-text {
    bottom: 50%;
    transform: translate(-50%, 50%);
    opacity: 1;
}

.info-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.info-image {
    flex: 0 0 230px;
    height: 24vh;
    object-fit: fill; 
    object-position: center; 
    border-radius: 12px;
    width:0;
}


.info-text {
    flex: 1;
}

    .info-text h2 {
        font-size: 3rem;
        font-weight: bold;
        margin-bottom: 0.5rem;
        color: #004098;
    }

    .info-text p {
        font-size: 1.6rem;
        line-height: 1.5;
        color: #004098;
    }


.heading-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}


.career-content {
    max-width: 700px;
    padding-bottom:10px;
}

.info-sections {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
    gap: 30px;
}

.info-box {
    flex: 1 1 280px;
    max-width: 400px; 
    padding: 40px 30px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
}

    .info-box.education {
        background-color: #FEFBDC;
    }

        .info-box.education i {
            color: #FFC56E;
        }

    .info-box.community {
        background-color: #FFE6F0;
    }

        .info-box.community i {
            color: #FF8DCD;
        }

    .info-box.environment {
        background-color: #E6F5E6;
    }

        .info-box.environment i {
            color: #AEDE33;
        }

    .info-box i {
        font-size: 60px;
        margin-bottom: 15px;
    }

    .info-box h2 {
        color: #004098;
        margin-bottom: 10px;
        font-weight: bold;
        font-size: 2.5rem;
    }

    .info-box p {
        color: #004098;
        font-size: 1.6rem;
    }


@media (max-width: 500px) {
    .overlay {
        background: rgba(0, 0, 0, 0.3);
    }

    .hover-card {
        min-height: 30vh;
        height: fit-content;
    }

    .card-text {
        position: absolute;
        bottom: 50%;
        left: 50%;
        transform: translate(-50%, 50%);
        opacity: 1;
        z-index: 2;
        transition: none;
        text-align: center;
        padding: 0 20px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        word-wrap: break-word;
        font-size: 1.6rem;
    }

    .card-image {
        height: 30vh;
    }

        .card-image img {
            height: 30vh;
        }

        .card-image:hover img {
            transform: none;
        }

        .card-image:hover .overlay {
            background: rgba(0, 0, 0, 0.5);
        }

        .card-image:hover .card-text {
            bottom: 50%;
            transform: translate(-50%, 50%);
            opacity: 1;
        }

    .info-row {
        flex-direction: column !important;
        align-items: center;
        text-align: center;
        margin: 20px;
    }

    .info-image {
        width: 100%;
        height: 30vh;
        border-radius: 12px;
    }

    .info-text {
        width: 100%;
        padding: 1rem 0;
        order: -1;
    }

        .info-text h2 {
            font-size: 2.4rem;
        }

        .info-text p {
            font-size: 1.6rem;
        }
}


/*history.html*/

.timeline-wrapper {
    position: relative;
    height: 70vh;
    overflow: hidden;
    background: #fff;
    box-sizing: border-box;
}

.timeline-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: #004098;
    z-index: 0;
    transform: translateY(-50%);
    pointer-events: none;
}

.timeline-scroll {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    scroll-behavior: smooth;
    overflow-x: auto;
    overflow-y: hidden;
    z-index: 1;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
    min-width: 0;
    padding: 0 8px;
}

    .timeline-scroll::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }

.timeline-event {
    position: relative;
    flex: 0 0 auto;
    min-width: 140px;
    text-align: left;
    z-index: 1;
    height: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.4s;
    box-sizing: border-box;
}

    .timeline-event.up {
        display: flex;
        flex-direction: column-reverse; /* content comes first, connector second */
        align-items: center;
        transform: translateY(-36px);
    }

    .timeline-event.down {
        display: flex;
        flex-direction: column;
        align-items: center;
        transform: translateY(36px);
    }

.timeline-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: auto !important;
    transform: none;
}

.timeline-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

    .timeline-circle img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

.timeline-year {
    color: #00BAFF;
    font-size: 3.6rem;
}

.timeline-step {
    color: #0089FF;
    font-size: 1.6rem;
    font-weight: bold;
    text-decoration: underline;
}

.timeline-desc {
    font-size: 1.5rem;
    text-align: left;
    max-width: 150px;
}

.timeline-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.timeline-connector {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 1.5px;
    background: #004098;
    z-index: 0;
}

.timeline-event.down .timeline-connector {
    top: calc(50% - 35px);
    height: 4rem;
}

.timeline-event.up .timeline-connector {
    bottom: calc(50% - 35px);
    height: 4rem;
}

.timeline-header {
    align-items: center;
}

.timeline-nav {
    display: flex;
    gap: 10px;
    padding: 0px 10px 3px;
    justify-content: flex-end;
}

.section-blue {
    height: 50vh;
    background-color: #e6eef6;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 7%;
}

.section-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.section-text {
    flex: 1;
    font-size: 4rem;
    font-weight: bold;
    color: #004098;
    opacity: 0;
    transform: translateX(-100px);
    transition: all 0.8s ease;
}

.section-image {
    flex: 1;
    display: flex;
    justify-content: center;
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.8s ease;
}

    .section-image img {
        max-width: 100%;
        height: 45vh;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

.reveal-on-scroll.active .section-text {
    opacity: 1;
    transform: translateX(0);
}

.reveal-on-scroll.active .section-image {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 700px) {
    .timeline-wrapper {
        height: 60vh;
    }

    .timeline-scroll {
        flex-direction: row;
        align-items: center;
        gap: 6px;
        padding: 0 4px;
    }

    .timeline-event {
        flex: 0 0 110px;
        transform: none;
    }

        .timeline-event.up {
            transform: translateY(-35px);
        }

        .timeline-event.down {
            transform: translateY(36px);
        }

    .timeline-circle {
        width: 40px;
        height: 40px;
    }

    .timeline-year {
        font-size: 1.6rem;
    }

    .timeline-step {
        font-size: 1.4rem;
    }

    .timeline-desc {
        font-size: 1.4rem;
        max-width: 300px;
    }

    .timeline-connector {
        width: 1px;
        background: #004098;
    }


    .timeline-content.up {
        margin-bottom: 10px;
    }

    .timeline-content.down {
        margin-top: 10px;
    }

    .section-blue {
        height: auto;
        padding: 40px 5%;
    }

    .section-container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 24px;
        text-align: center;
    }

    .section-text {
        font-size: 2rem;
        transform: translateY(40px);
    }

    .section-image {
        transform: translateY(40px);
    }

        .section-image img {
            height: auto;
            max-height: 30vh;
            width: 100%;
        }

    .reveal-on-scroll.active .section-text,
    .reveal-on-scroll.active .section-image {
        transform: translateY(0);
        opacity: 1;
    }
}

 /**-- know_how --**/
.image-banner-container {
    position: relative;
    height: 60vh;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.image-banner-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s ease;
    z-index: 1;
}

.image-banner-container:hover .image-banner-background-image {
    transform: scale(1.1);
}

.foreground-banner {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.95);
    padding: 30px;
    text-align: left;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    max-width: 80%;
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.mini-foreground-banner {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.95);
    padding: 30px;
    text-align: left;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    max-width: 50%;
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    border-radius: 20px;
    bottom: 40px;
    right: 90px;
}

.page-title {
    padding: 30px;
}
    
.content-title {
    margin: 0px !important;
    color: #1492E6;
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}

.content-desc {
    font-size: 1.6rem;
    text-align: center;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
}

.process-grid-card {
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: background-position 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
    overflow: hidden;
}

    .process-grid-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 1;
        transition: background 0.5s ease;
    }

    .process-grid-card:hover::before {
        background: rgba(0, 0, 0, 0.5);
    }

    .process-grid-card:hover .process-grid-card-content .btnfade {
        transform: translateY(10px);
        display:none;
    }

.process-grid-card-content {
    position: relative;
    z-index: 2;
    text-align: left;
    color: white;
    transition: transform 0.5s ease;
}
    .process-grid-card-content h2,
    .process-grid-card-content .el_btn {
        transition: transform 5s ease, opacity 0.5s ease;
        will-change: transform, opacity;
    }

    .process-grid-card-content h2 {
        margin: 0px !important;
        padding: 0px 0px 10px 0px !important;
        color: white;
        transform: translateY(0);
    }

    .process-grid-card-content .el_btn {
        transform: translateY(0);
    }

.process-grid-card:hover .process-grid-card-content h2 {
    transform: translateY(-10px);
}

.process-grid-card:hover .process-grid-card-content .el_btn {
    transform: translateY(10px);
    opacity: 1;
}

.process-grid-card:hover .grid-description {
    transition-delay: 0.15s;
}

.grid-description {
    height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: height 0.5s ease, opacity 0.4s ease;
    padding-bottom: 10px;
    font-size: 1.6rem;
}

.process-grid-card:hover .grid-description {
    height: auto;
    opacity: 1;
    pointer-events: auto;
}

.process-grid-card:hover {
    background-position: right center;
}

.mini-card-section {
    display: flex;
    min-height: 70vh;
    height:fit-content;
    overflow: hidden;
    column-gap: 30px;
}

.mini-card-image {
    flex: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
    transition: transform 0.6s ease, filter 0.6s ease;
    will-change: transform;
}

.mini-card-image2 {
    flex: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
    transition: transform 0.6s ease, filter 0.6s ease;
    will-change: transform;
}

    .mini-card-image2 .btn-wrapper {
        position: absolute;
        bottom: 20px;
        left: 28%;
        z-index: 2;
    }

.scroll-card-description .mini-card-section {
    margin: 20px auto 0;
}

.mini-card-section:hover .mini-card-image2 {
    transform: scale(1.05);
}
.mini-card-section:hover .mini-card-image {
    transform: scale(1.05);
}
.mini-card-content {
    flex: 1;
    background-color: #004098;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 20px;
}

    .mini-card-content h2 {
        margin: 0px !important;
        padding: 0px 0px 10px 0px !important;
        color: white
    }

    .mini-card-content .el_btn {
        align-self: flex-start;
        width: auto;
    }

.mini-card-inner-content {
    padding: 40px;
}

    .mini-card-inner-content p {

        margin: 0;
        font-size: 1.6rem;
    }

.fiber-tags {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 10px;
    justify-content: center;
    margin-top: 15px;
}

.fiber-tag {
    background-color: #E0F2FA;
    color: #004098;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 1.6rem;
    text-align: center;
    transition: background 0.3s ease;
}

.process-title {
    color: #1492E6;
    font-weight: bold;
    margin-bottom: 5px;
}

.process-subtitle {
    font-size: 1.6rem;
}

.process-row {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}

.process-left,
.process-right {
    flex: 1;
    min-width: 0;
}

.process-flow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 1110px){
    .mini-card-section {
        min-height: 30vh;
        height:fit-content !important;
    }
}

@media (max-width: 1150px) {

    .dyeing {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

        .dyeing .process-row,
        .dyeing > div {
            width: 100%;
            max-width: 1000px;
        }
}

@media (max-width: 1000px){
    .fiber-tags {
        grid-template-columns: repeat(2, auto);
    }

}

@media (max-width: 830px) {
    .process-left,
    .process-right {
        flex: 0 0 100%;
        max-width: 100%;
    }
}
@media (max-width: 600px) {
    /* change from 450px stop 600px*/
    .mini-card-section {
        flex-direction: column;
        height: auto !important;
        row-gap: 10px;
    }

    .mini-card-image {
        display: none;
    }

    .mini-card-image2 {
        display: block;
        min-height: 200px;
        border-radius: 12px;
        position: relative;
    }

        .mini-card-image2 .btn-wrapper {
            position: absolute;
            bottom: 20px;
            left: 17%;
            z-index: 2;
        }

    .mini-card-content {
        position: relative;
        background-color: transparent;
        background-size: cover;
        background-position: center;
        color: white;
        border-radius: 12px;
        overflow: hidden;
        padding: 0;
        min-height: 40vh;
    }

        .mini-card-content::before {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.4);
            z-index: 0;
        }

    .mini-card-inner-content {
        position: relative;
        z-index: 1;
        padding: 20px;
    }

    .mini-card-content .el_btn {
        align-self: flex-start;
        width: auto;
        margin-top: 20px;
    }

    .mini-card-inner-content p {
        margin: 0;
        font-size: 1.6rem;
    }
}

@media (max-width: 450px) {

    .page-title {
        padding: 0px 30px 20px 30px;
    }

    .contact-title p {
        flex: 1 1 auto;
        max-width: 70%;
        margin: 0;
        padding: 0px; /*dont change*/
        color: #004098;
        font-size: 1.6rem;
    }

    .foreground-banner {
        height: auto;
        max-width: 95%;
        padding: 0 20px;
        box-sizing: border-box;
    }

        .foreground-banner h1 {
            width: 100% !important;
            font-size: 2rem;
            padding: 0 0 0 10px !important;
        }

        .foreground-banner p {
            font-size: 1.6rem;
            padding-left: 10px;
        }

    .contact-title p {
        flex: 1 1 auto;
        max-width: 100%;
        margin: 0;
        padding: 10px !important;
        color: #004098;
        font-size: 1.6rem;
    }

    .heading-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
        padding: 10px;
    }

    .text-overlay h1 {
        font-size: 3rem !important;
    }

    .image-banner-container {
        height: fit-content;
        flex-direction: column;
        align-items: center;
    }

    .mini-foreground-banner {
        height: auto;
        max-width: 95%;
        padding: 20px;
        box-sizing: border-box;
        bottom: 0px;
        right: 0px;
    }

    .btnfade {
        display: none !important;
    }

    .process-grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
        height: auto !important;
        padding: 0;
        row-gap: 10px;
    }

    .process-grid-card {
        height: auto;
        min-height: 300px;
        padding: 20px;
        align-items: flex-start;
        background-position: center top;
    }

    .process-grid-card-content {
        text-align: left;
        width: 100%;
    }

        .process-grid-card-content h1 {
            font-size: 1.8rem;
            line-height: 1.3;
            padding-bottom: 8px;
        }

    .grid-description {
        font-size: 1.6rem;
        line-height: 1.5;
        opacity: 1;
        height: auto;
        pointer-events: auto;
        max-height: none;
        transition: none;
    }

    /* Disable hover-based animations on mobile */
    .process-grid-card:hover .process-grid-card-content h1,
    .process-grid-card:hover .process-grid-card-content .el_btn,
    .process-grid-card:hover .grid-description {
        transform: none;
        opacity: 1;
        height: auto;
    }

    .process-grid-card::before {
        background: rgba(0, 0, 0, 0.4);
    }

    .process-grid-card:hover::before {
        background: rgba(0, 0, 0, 0.4);
    }
}


/*qc.html*/
.scroll-card-image {
    position: relative;
    width: 100%;
    height: auto;
}

.scroll-card-image {
    position: relative;
    width: 100%;
    height: 55vh; 
    overflow: hidden;
}

.main-img {
    width: 100%;
    display: block;
    transition: filter 1.0s ease;
}

.scroll-card-image .main-img {
    width: 100%;
    height: 100%; 
    object-fit: cover; 
    display: block;
}

.image-darken-layer {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.3); 
    opacity: 0;
    transition: opacity 1.0s ease;
    z-index: 1;
}

.scroll-card-overlay-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    opacity: 0;
    transition: opacity 1.0s ease;
    z-index: 2;
}

    .scroll-card-overlay-content h1,
    .scroll-card-overlay-content h2,
    .scroll-card-overlay-content h3,
    .scroll-card-overlay-content p {
        color: white !important;
    }

.scroll-card-description {
    background-color: #004098;
    color: white;
    padding: 1.5rem;
    font-size: 1.6rem;
    height: 30vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.0s ease, transform 1.0s ease;
}

.fade-text {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.0s ease, transform 1.0s ease;
}

.reveal-on-scroll.active .scroll-card-overlay-content {
    opacity: 1;
}

.reveal-on-scroll.active .image-darken-layer {
    opacity: 1;
}

.reveal-on-scroll.active .scroll-card-description {
    opacity: 1;
    transform: translateY(0);
}

.reveal-on-scroll.active .fade-text {
    opacity: 1;
    transform: translateY(0);
}


 @media (max-width: 1110px){
    .scroll-card-description {
        min-height: 20vh;
        height:fit-content !important;
    }

    .scroll-card-image {
        min-height: 30vh;
        height: fit-content;
    }
 }

@media (max-width: 450px) {
    /*change from 768*/ 
    .scroll-card-image {
        height: 20vh;
    }

    .bl_headingLv1 {
        padding: 0 !important; /*dont change
        padding: 10px !important;*/
        margin: 0 !important;
    }

    .scroll-card-overlay-content h2,
    .scroll-card-overlay-content .bl_headingLv1 {
        font-size: 2rem;
    }

    .scroll-card-overlay-content .el_btn,
    .scroll-card-overlay-content button {
        font-size: 0.9rem;
        padding: 0.4rem 0.8rem;
    }

    .scroll-card-description {
        font-size: 1.6rem;
        min-height: auto;
        padding: 1rem;
    }

    .fade-text {
        font-size: 1.6rem;
    }
}

/*dye_finishing.html */

.image-banner-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s ease;
    z-index: 1;
}

.image-banner-container:hover .image-banner-bg-image {
    transform: scale(1.1);
}

.text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    text-align: center;
}

    .text-overlay h1 {
        font-size: 6rem;
        font-weight: bold;
        margin-bottom: 10px;
        color: white
    }

    .text-overlay h2 {
        font-size: 2.6rem;
        font-weight: bold;
        margin-bottom: 10px;
        color: white
    }

.image-stack-section {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto auto;
    gap: 10px;
    position: relative;
    padding: 50px 20px;
    overflow: hidden;
}

.image-stack-image1 {
    grid-column: 2 / span 2;
    grid-row: 1;
    display: flex;
    justify-content: center;
}

    .image-stack-image1 img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

.image-stack-text1 {
    grid-column: 4 / span 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
}

.image-stack-image2 {
    grid-column: 3 / span 2;
    grid-row: 2;
    display: flex;
    justify-content: center;
}

    .image-stack-image2 img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

.image-stack-text2 {
    grid-column: 1 / span 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 20px;
    text-align: left;
}

    .image-stack-text2 .el_btn {
        display: inline-block;
        align-self: flex-end;
        width: auto;
        margin-top: 10px;
    }

.image-stack-title {
    font-size: 5rem;
    font-weight: bold;
    color: #004098;
    margin: 0;
}

.image-stack-desc {
    font-size: 1.6rem;
}

.image-stack-ampersand {
    position: absolute;
    top: 38.5%;
    left: 48%;
    transform: translate(-50%, -50%);
    font-size: 5em;
    font-weight: bold;
    color: #004098;
    opacity: 0;
}

.image-stack-hidden {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s ease;
}

.image-stack-show {
    opacity: 1;
    transform: translateY(0);
}

.image-stack-slide-top {
    transform: translateY(-100px);
}

.image-stack-slide-bottom {
    transform: translateY(100px);
}

.image-stack-slide-left {
    transform: translateX(-100px);
}

.image-stack-slide-right {
    transform: translateX(100px);
}

.image-stack-show.image-stack-slide-top,
.image-stack-show.image-stack-slide-bottom,
.image-stack-show.image-stack-slide-left,
.image-stack-show.image-stack-slide-right {
    transform: translate(0,0);
}

@media (max-width: 760px) {
    /*change from 450px to 760px*/

    .image-banner-bg-image {
        position: relative;
        width: 100%;
        min-height: 20vh;
    }

    .image-stack-section {
        display: flex;
        flex-direction: column;
        padding: 10px 30px;
    }

    .image-stack-text1 {
        order: 1;
        text-align: center;
        padding: 10px;
    }

    .image-stack-image1 {
        order: 2;
        justify-content: center;
    }

    .image-stack-ampersand {
        order: 3;
        display: block !important;
        font-size: 3rem;
        text-align: center;
        position: relative; 
        top: auto;
        left: auto;
        transform: none;
        opacity: 1;
    }

    .image-stack-text2 {
        order: 4;
        text-align: center;
        padding: 10px;
    }

    .image-stack-image2 {
        order: 5;
        justify-content: center;
    }

    .image-stack-text2 .el_btn {
        display: inline-block;
        align-self: center;
        width: auto;
        margin-top: 10px;
    }

    .image-stack-image1 img,
    .image-stack-image2 img {
        width: 100%;
        height: auto;
    }

    .image-stack-title {
        font-size: 2rem;
        margin-bottom:10px;
    }

    .image-stack-desc {
        font-size: 1.6rem;
        padding-bottom:10px;
    }


    
}

/*yarn_printed.html*/

.text-overlay-box {
    padding: 2rem 3rem;
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(1px);
    display: inline-block;
}

.carousel2-container {
    position: relative;
    background: #004098;
    color: white;
    padding: 20px;
    overflow: hidden;
    height: auto;
}

.carousel2-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding-bottom: 40px;
}

.carousel2-text {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.carousel2-image {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

    .carousel2-image img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
    }

.carousel2-text {
    font-size: 1.6rem;
    line-height: 1.6;
    text-align: left;
}

.carousel2-slide {
    display: none;
    animation: fade 0.6s ease-in-out;
}

    .carousel2-slide.active {
        display: block;
    }

@keyframes fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.title-box {
    background-color: #004098;
    color: #fff;
    padding: 40px 30px;
    font-size: 40px;
    font-weight: bold;
}

.image-wrapper {
    position: relative;
    overflow: hidden;
}

    .image-wrapper img {
        width: 100%;
        height: 50vh;
        transition: transform 0.3s ease;
    }

.image-text {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.5);
    color: #fff;
    padding: 15px;
    font-size: 1.6rem;
    line-height: 1.4;
    transition: font-size 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
}


.printing-card:hover img {
    transform: scale(1.05);
}

.printing-card:hover .image-text {
    font-size: calc(1.6rem + 0.2rem);
}

@media (max-width: 760px) {
    .carousel2-container {
        height: auto;
        padding: 15px;
    }

    .carousel2-content {
        flex-direction: column;
        gap: 15px;
        padding-bottom: 20px;
    }

    .carousel2-image,
    .carousel2-text {
        flex: 1 1 100%;
        justify-content: center;
        text-align: center;
    }

        .carousel2-image img {
            max-width: 100%;
            height: auto;
        }

    .carousel2-text {
        line-height: 1.4;
    }

        .carousel2-text p {
            margin: 0;
        }

    .text-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        text-align: center;
    }

        .text-overlay h2 {
            font-size: 1.8rem;
            font-weight: bold;
            margin-bottom: 10px;
            color: white;
        }

    .text-overlay-box {
        padding: 1rem 1.5rem;
        background-color: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(2px);
    }

        .text-overlay-box h1 {
            font-size: 1.4rem;
            line-height: 1.2;
        }

        .text-overlay-box .el_btn {
            display: inline-block;
            margin-top: 0.8rem;
            font-size: 0.9rem;
            padding: 0.5rem 1rem;
        }
}

@media (max-width: 450px) {
    .title-box {
        font-size: 2rem;
        padding: 8px 15px;
    }

    .image-wrapper img {
        height: auto;
        object-fit: cover;
    }

    .image-text {
        line-height: 1.4;
        padding: 10px;
        text-align: left;
        flex-direction: column;
    }

    .printing-card:hover img {
        transform: none;
    }

}


/*our_esg*/
.image-boxes {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.image-card {
    position: relative;
    width: 200px;
    height: 260px;
    border-radius: 10px;
    overflow: hidden;
    padding-bottom: 10px;
}

    .image-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
    }

    .image-card .overlay2 {
        position: absolute;
        bottom: 15px;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
    }


.env-image {
    position: relative;
    overflow: hidden;
}

    .env-image img {
        width: 100%;
        height: auto;
        display: block;
    }

.env-title {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    color: #fff;
    font-size: 8rem;
    font-weight: bold;
    line-height: 0.7;
}

.env-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 0;
}

    .env-content p {
        color: #004098;
        font-size: 1.6rem;
        line-height: 1.5;
        margin: 10px;
        justify-content: center;
        text-align: justify;
    }

.env-top-text {
    position: absolute;
    top: 7%;
    left: 20%;
    width: 60%;
    padding: 15px 20px;
    color: black;
    text-align: center;
    box-sizing: border-box;
}

    .env-top-text h1 {
        margin: 0 0 5px;
        font-size: 6rem;
        font-weight: bold;
    }

    .env-top-text p {
        margin: 0;
        font-size: 1.6rem;
        line-height: 1.4;
    }

.four-grid2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.grid-item2 {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
}

    .grid-item2 img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

    .grid-item2 .el_btn {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        background: #fff;
        color: #000;
        padding: 8px 16px;
        border: 1px solid #000;
        text-decoration: none;
        font-size: 14px;
        transition: all 0.3s ease;
    }

.grid-item2 .el_btn:hover {
    background: #004098;
    color: #fff;
}

.banner4 {
    position: relative;
    width: 100%;
    height: 50vh;
    overflow: hidden;
}

.banner4-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner4-overlay {
    position: absolute;
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: none;
    width: 70%;
}

.banner4-img-left,
.banner4-img-right {
    width: 30%;
    height: auto;
    opacity: 0;
    transform: translateX(0);
    transition: all 0.6s ease;
}

.banner4-symbol {
    font-size: 1.8rem;
    color: white;
    opacity: 0;
    transform: translateX(0);
    transition: all 0.6s ease;
}

.banner4.active .banner4-img-left {
    opacity: 1;
    transform: translateX(-20px);
}

.banner4.active .banner4-img-right {
    opacity: 1;
    transform: translateX(20px);
}

.banner4.active .banner4-symbol {
    opacity: 1;
    transform: translateX(0);
}

.two-section {
    display: flex;
    width: 100%;
    height: 60vh;
    overflow: hidden;
    column-gap: 10px;
}

.split-image {
    flex: 1;
    position: relative;
}

    .split-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.banner3 {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 40 / 9;
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.banner3-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.banner3-overlay {
    display: flex;
    align-items: center;
    padding-left: 10%;
    pointer-events: none;
}

.mini-card-top-logo {
    display: flex;
    align-items: center;
    padding-left: 40px;
}

    .mini-card-top-logo img {
        max-width: 45%;
        height: auto;
    }

.img-sect-flex {
    margin: 0% 7%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
}

    .img-sect-flex img {
        flex: 1 1 calc(25% - 20px); /* max 4 per row */
        max-width: calc(25% - 20px);
        height: auto;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        transition: transform 0.3s ease;
    }

        .img-sect-flex img:hover {
            transform: scale(1.05);
        }

@media (max-width: 1130px) {

    .env-content p {
        margin: 10px 30px;
    }

    .env-top-text {
        top: 5%;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        padding: 10px;
        background: rgba(255, 255, 255, 0.6);
        color: #000;
        text-align: center;
    }

        .env-top-text h1 {
            font-size: 2rem;
            line-height: 1.2;
        }

        .env-top-text p {
            font-size: 1.6rem;
            line-height: 1.4;
        }
}

@media (max-width: 1110px) {
    .banner4 {
        min-height: 20vh;
        height: fit-content !important;
    }
}

@media (max-width: 900px) {
    .banner4-overlay {
        gap: 20px;
        transform: translate(-50%, -50%) scale(1.2);
    }

    .banner4-symbol {
        font-size: 2.4rem;
    }

    .banner3-overlay {
        width: 30% !important;
        padding-left: 10%;
        transform: scale(1.2);
    }

    .banner3-bg {
        object-fit: cover;
        height: auto;
    }
}
@media (max-width: 760px) {
    
    .env-title {
        font-size: 3rem;
    }

    .four-grid2 {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .grid-item2 {
        aspect-ratio: auto;
    }

        .grid-item2 img {
            object-fit: contain;
        }

        .grid-item2 .el_btn {
            font-size: 12px;
            padding: 6px 10px;
            max-width: 80%;
            white-space: nowrap;
            margin-bottom:7%;
        }

    .img-sect-flex img {
        flex: 1 1 45%;
    }
}

@media (max-width: 480px) {
    .img-sect-flex img {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

@media (max-width: 450px) {
    .env-image {
        min-height: 47vh;
    }

        .env-image img {
            min-height: 47vh;
        }

    .two-section {
        flex-direction: column;
        gap: 15px;
    }
}

/*fashion module*/

.four-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.grid-item {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
}

    .grid-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.feature-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 0 auto;
}

.feature-card {
    flex: 1 1 calc(33.333% - 20px); /* max 3 per row */
    max-width: calc(33.333% - 20px);
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    box-shadow: 0 4px 12px rgba(0, 64, 152, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .feature-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 16px rgba(0, 64, 152, 0.5);
    }

.feature-icon {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .feature-icon i {
        font-size: 30px;
        color: #fff;
        background-color: #000;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .feature-icon img {
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 20%;
    }

.feature-card p {
    font-size: 1.6rem;
    line-height: 1.4;
    margin: 0;
    text-align: left;
}

.two-card-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.two-card {
    display: flex;
    align-items: center;
    background-color: #F2F2FD;
    border-radius: 12px;
    padding: 15px;
    flex: 0 0 calc(50% - 20px);
    box-sizing: border-box;
}

    .two-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 16px rgba(0, 64, 152, 0.5);
    }

.two-card-image img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 20%;
    margin: 0px 15px 0px 15px;
}

.two-card-image i {
    font-size: 45px;
    color: #004098;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.two-card-text h2 {
    padding: 10px 0px 0px 20px;
    margin: 0 0 5px;
    font-size: 1.8rem;
    color: #000;
    font-weight: bold
}

.two-card-text p {
    padding: 10px 0px 0px 20px;
    margin: 0 0 5px;
    font-size: 1.6rem;
    line-height: 1.2;
    color: #000;
}

.carousel3-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.carousel3-section {
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

.carousel3-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.carousel3-arrows {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}


.carousel3-swiper {
    width: 100%;
    overflow: hidden;
}

.carousel3-card {
    position: relative;
    height: 350px;
    max-width: none;
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease;
}

.swiper-slide {
    display: flex;
}

.carousel3-card:hover {
    transform: scale(1.03);
}

.in_btn {
    display: inline-block;
    background: #fff;
    padding: 0px 10px 1px;
    border-radius: 6px;
    text-decoration: none;
    margin-top: 12px;
    font-size: 1.6rem;
    white-space: nowrap;
    transition: background 0.25s ease;
}

.carousel3-card-content {
    position: absolute;
    inset: 0;
    padding: 18px 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.38);
    transition: background 0.3s ease;
}

.carousel3-card-logo {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    object-fit: contain;
    margin-bottom: 10px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.carousel3-card-content h2 {
    color: white;
    font-size: 2.2rem;
    letter-spacing: 0.5px;
    font-weight: 700;
}

.carousel3-card-content h3 {
   /* margin: 9px 0 3px 0;*/
    color: white;
    font-size: 1.6rem;
    letter-spacing: 0.5px;
    font-weight: 700;
}

.carousel3-card-content h4 {
    margin: 0 0 8px 0;
    color: white;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.carousel3-desc {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease, margin 0.3s ease;
    margin: 0;
    line-height: 1.4;
    font-size: 1.4rem;
    text-align: left;
}

.carousel3-card:hover .carousel3-desc {
    opacity: 1;
    max-height: 100%;
    margin: 10px 0;
}

.carousel3-card:hover .carousel3-card-logo {
    display: none;
}

.swiper-slide {
    display: flex;
}

.swiper-scrollbar {
    width: 100%;
    background: rgba(0,0,0,0.1);
    height: 6px;
    border-radius: 3px;
    margin-top: 10px;
}

.swiper-scrollbar-drag {
    background: #004098;
    border-radius: 3px;
}

@media (max-width: 1093px) {
    .carousel3-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 760px) {

    .feature-card {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .two-card {
        flex: 0 0 100%;
        align-items: center;
    }

        .two-card:has(.two-card-image i) {
            display: block;
        }

    .two-card-flex {
        padding: 0 20px;
    }
    .two-card-image img {
        flex-shrink: 0;
        margin: 0 15px 0 0;
    }

    .two-card-text h2 {
        padding: 10px 0px 0px 10px;
    }

    .two-card-text p {
        padding: 10px 0px 0px 10px;
    }
}

@media (max-width: 600px) {
    .carousel3-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 450px) {

    .two-card-flex {
        padding: 0px;
    }

    .four-grid {
        gap: 10px;
    }

    .carousel3-header {
        display: flow;
    }

    .carousel3-arrows {
        justify-content: flex-end;
    }

    .carousel3-desc {
        opacity: 1 !important;
        max-height: none !important;
        margin: 10px 0 !important;
        overflow: visible !important;
    }

    .carousel3-card:hover .carousel3-desc {
        opacity: 1;
        max-height: none;
        margin: 10px 0;
    }

    .carousel3-card-logo {
        display: none;
    }
}


/*performance module*/

.mini-image-banner-container {
    position: relative;
    height: 20vh;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.image-banner-container-ov {
    position: relative;
    height: 65vh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

    .image-banner-container-ov:hover .image-banner-background-image {
        transform: scale(1.03);
    }

.image-banner-box {
    bottom: 190px;
    right: 200px;
    background: #fff;
    padding: 30px;
    width: 500px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    border-radius: 12px;
    /*min-height: 25vh;*/
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: -80px auto 0;
    position: relative;
    z-index: 2;
}

    .image-banner-box h1 {
        margin-top: 0;
        font-size: 3.5rem;
        color: #004098;
        font-weight: 600;
        line-height: 1.2;
    }

    .image-banner-box p {
        font-size: 1.6rem;
        line-height: 1.5;
        margin: 10px 0px 20px 0px;
        color: #000000;
    }

.fixedbtn {
    display: inline-block;
    width: auto;
    align-self: flex-start;
}

.app-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.app-card {
    background-color: #f5f5f5;
    padding: 20px;
    text-align: center;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .app-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .app-card i {
        font-size: x-large;
        object-fit: contain;
        margin-bottom: 15px;
        color: #fff;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .app-card h2 {
        text-align: left;
        font-size: 2rem;
        font-weight: bold;
        color: #004098;
        margin: 0;
    }

@media (max-width: 1000px) {


    .image-banner-box {
        width: 90% !important;
        height: auto !important;
        padding: 20px;
        margin: -50px auto 20px;
        right: auto;
        bottom: auto;
    }

        .image-banner-box h1 {
            font-size: 2rem;
        }

        .image-banner-box p {
            font-size: 1.6rem;
        }
}

@media (max-width: 768px) {
    .app-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 10px;
    }
}

@media (max-width: 480px) {
    .app-grid {
        grid-template-columns: 1fr;
        padding: 10px;
    }
}

/* Uniform */

.split-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.split-text {
    background: #fff;
    padding: 30px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    border-radius: 12px;
    height: 440px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .split-text h1 {
        margin-top: 0;
        font-size: 3.5rem;
        color: #004098;
        font-weight: 600;
        line-height: 1.2;
    }

    .split-text p {
        font-size: 1.6rem;
        line-height: 1.5;
        margin: 10px 0px 20px 0px;
        color: #000000;
    }

.split-image {
    position: relative;
}

    .split-image img {
        width: 100%;
        height: 390px;
        display: block;
    }

    .split-image video {
        width: 100%;
        height: auto;
        display: block;
    }

.two-image-grid {
    display: flex;
    gap: 10px;
    width: 700px;
    margin: 0 auto;
}

.image-box {
    flex: 1;
    display: flex;
    justify-content: center;
}

    .image-box img {
        display: block;
        max-width: 70%;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 6px 16px rgba(0, 64, 152, 0.5);
    }

.tech-equation {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    margin: 0 auto;
    padding: 20px;
}

.tech-item {
    background: #f5f5f5;
    border-radius: 10px;
    padding: 20px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 150px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .tech-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    }

.tech-icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
    margin-bottom: 12px;
}

.tech-item h2 {
    margin: 0;
    font-size: 2rem;
    font-weight: bold;
    color: #222;
    letter-spacing: 0.3px;
}

.tech-sep {
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 3.6rem;
    color: #004098;
}

.tech-result {
    background: #eef6ff;
    box-shadow: 0 6px 18px rgba(0,64,152,0.12);
    border: 1px solid #cfe0ff;
}

@media (max-width: 1070px) {

    .two-section {
        height: auto !important;
    }

    .split-section {
        grid-template-columns: 1fr;
        padding: 20px 10px;
        gap: 20px;
    }

    .split-image {
        order: -1;
        display: flex;
        justify-content: center;
    }

        .split-image img {
            width: 100%;
            max-width: 350px;
            height: auto;
        }

    .split-text {
        height: auto;
        padding: 20px;
    }

        .split-text h1 {
            font-size: 2rem;
            line-height: 1.3;
        }

        .split-text p {
            font-size: 1.6rem;
            line-height: 1.4;
        }
}

@media (max-width: 900px) {
    .tech-equation {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        max-width: 560px;
        margin: 0 auto;
    }

    .tech-sep {
        margin: 0;
    }
}

@media (max-width: 760px) {

    .two-image-grid {
        flex-direction: column;
        width: 100%;
        gap: 15px;
    }

    .image-box {
        justify-content: center;
    }

        .image-box img {
            max-width: 70%;
            height: auto;
        }
}

/* evotruth.html */

.evotruth-container {
    position: relative;
    padding: 10px 20px;
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    color: #fff;
    overflow: hidden;
}

.evotruth-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: brightness(0.6);
    z-index: -1;
}

.evotruth-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.evotruth-text {
    flex: 1;
    margin: 1% 0% 0% 10%;
}

    .evotruth-text h1 {
        font-size: 2.7rem;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .evotruth-text p {
        font-size: 1.6rem;
        line-height: 1.4;
        max-width: 600px;
    }

.evotruth-media {
    flex-shrink: 0;
    padding-top: 30px;
}

    .evotruth-media video {
        max-width: 460px;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    }

.evotruth-cards {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-top: auto;
}

.evotruth-card {
    position: relative;
    flex: 0 0 150px;
    height: 170px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

    .evotruth-card img {
        width: 85%;
        object-fit: contain;
    }

    .evotruth-card.active {
        z-index: 10;
    }

.evotruth-3d {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    width: 135px;
    display: none;
    pointer-events: none;
    animation: popupFade 0.3s ease forwards;
}

    .evotruth-3d img {
        width: 100%;
        height: auto;
    }

@keyframes popupFade {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(-10px) scale(1);
    }
}

@media (min-width: 761px) and (max-width: 1239px) {
    .evotruth-cards {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        gap: 20px;
    }
}

@media (max-width: 760px) {
    .evotruth-container {
        height: auto;
        padding: 12px;
    }

    .evotruth-text {
        margin: 0 0 12px 0;
        text-align: center;
        width: 100%;
    }

        .evotruth-text h1 {
            font-size: 2rem;
        }

        .evotruth-text p {
            font-size: 1.6rem;
        }

    .evotruth-cards {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-top: 8px;
    }

    .evotruth-card {
        width: 92%;
        max-width: 420px;
        height: 180px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
        border-radius: 10px;
        box-sizing: border-box;
    }

        .evotruth-card img {
            height: 170px !important;
            width: auto;
            transition: transform .2s ease;
        }

        .evotruth-card .evotruth-3d {
            display: none;
            position: static !important;
            transform: none !important;
            animation: none !important;
            width: 170px;
            margin-left: 10px;
            pointer-events: none;
        }

            .evotruth-card .evotruth-3d img {
                width: 100%;
                height: auto;
                display: block;
            }

        .evotruth-card.active {
            justify-content: center;
            gap: 10px;
        }

            .evotruth-card.active .evotruth-3d {
                display: block;
            }

    .evotruth-media {
        display: none !important;
    }

    .evotruth-mobile-panel {
        display: none;
        width: 92%;
        max-width: 420px;
        margin: 10px auto 24px;
        text-align: center;
        box-sizing: border-box;
    }

        .evotruth-mobile-panel.show {
            display: block;
        }

        .evotruth-mobile-panel video {
            width: 100%;
            height: 210px;
            border-radius: 8px;
            padding-top: 10px;
        }


    .mobile-evotruth-title {
        font-weight: bold;
        font-size: 2rem;
        margin: 8px 0 6px;
        color: #fff;
    }

    .mobile-evotruth-desc {
        font-size: 1.6rem;
        line-height: 1.4;
        color: #e6e6e6;
        text-align: left;
        padding: 0 6px;
    }

    .introtext {
        font-weight: bold;
        font-size: 2.6rem !important;
    }
}




/*PAGE CUSTOM*/
#os_why_penang .scroll-card-image .main-img, #lm_1 .scroll-card-image .main-img {
    min-height: 30vh;
}

#df_2 .two-card {
    display: flex !important;
}

#higg_2 .banner4-bg {
    min-height: 20vh;
}

#higg_2 .banner4-overlay {
    left: 50%;
    flex-direction: column;
    width: 40%;
}

#higg_2 .banner4-img-top {
    width: 50%;
    height: auto;
}

#higg_2 .banner4-img-bottom {
    width: 30%;
    height: auto;
    margin-left: 114px;
}


@media (max-width: 1150px) {
    #df_2 {
        margin: 0 10px;
    }
}

@media (max-width: 1130px) {
    #esg_2, #esg_3 {
        margin: 0px 30px 0px 30px
    }

        #esg_2 .scroll-card-image {
            height: 30vh;
        }

    #esg_4 .grid-item2 .el_btn {
        bottom: 1px;
        padding: 5px 2.5px;
    }
}

@media (max-width: 1110px) {
    #os_history, #os_why_penang, #os_social, #os_title, #hst_1, #hst_2, #hst_3, #hst_5, #hst_7,
    #pen_1, #pen_2, #pen_3, #df_2, #kh_3, #lm_1, #qc_2, #qc_3, #qc_4, #qc_5, #wv_2, #yp_2, #yp_3,
    #co_3, #gr_5, #gr_8, #gr_1, #gr_6, #gr_3, #fs_2, #fs_3, #pr_2, #pr_4, #pr_11, #st_3, #st_4,
    #op_3, #op_4, #uv_3, #uv_4, #br_3, #br_4, #ps_2, #wr_2, #wr_3, #cw_2, #cw_3, #uf_2,
    #ak_2, #ak_3, #cr_2, #cr_3, #eco_2, #eco_3, #eco_4, #eco_5 {
        margin: 0px 30px 0px 30px
    }

    #env_2, #env_3, #env_4, #env_5 {
        margin: 0px 50px 0px 50px
    }

    #pen_2 .card-image img {
        min-height: 70vh;
        /*height: fit-content !important;*/
    }

    #pen_2 .hover-card {
        height: 70vh;
    }

    #pen_2 .card-image {
        height: 70vh;
    }

    #df_1 .image-banner-container {
        min-height: 30vh;
        height: fit-content;
    }

    #yp_1 .image-banner-container {
        min-height: 40vh;
        height: fit-content;
    }

    #uv_2 .image-banner-container, #br_2 .image-banner-container {
        height: 30vh;
    }

    #yp_3 .image-wrapper img {
        min-height: 50vh;
    }

    #kh_1 .image-banner-container-ov, #qc_1 .image-banner-container-ov, #wv_1 .image-banner-container-ov, #fs_1 .image-banner-container-ov,
    #ps_1 .image-banner-container-ov, #wr_1 .image-banner-container-ov, #cw_1 .image-banner-container-ov, #uf_1 .image-banner-container-ov,
    #ak_1 .image-banner-container-ov {
        height: 30vh;
    }

    #env_1 .image-banner-container-ov {
        height: 36vh;
    }

    #higg_2 .banner4-overlay {
        gap: 12px;
        transform: translate(-50%, -50%) scale(1.1);
    }

    #higg_2 .banner4-img-bottom {
        width: 37%;
        margin-left: 20px;
    }

    #fs_31, #fs_32, #ps_21, #ps_22, #uf_21, #uf_22, #ak_31, #ak_32 {
        min-height: 30vh;
        height: fit-content !important;
    }
}

@media (max-width: 1070px) {
    #rc_2 .image-banner-container, #rc_4 .image-banner-container {
        min-height: 15vh;
        height: fit-content !important;
    }
}

@media (max-width: 1000px) {

    #fs_1, #ps_1, #uf_1, #ak_1, #wr_1, #cw_1, #kh_1, #qc_1, #wv_1 {
        margin-bottom: 0px !important;
    }

    #df_3 .image-stack-ampersand {
        top: 34.5% !important
    }

    #lm_2 .image-stack-ampersand {
        top: 36% !important;
    }

    #env_1 .image-banner-box {
        height: 500px;
    }
}

@media (max-width: 768px) {
    #cu_1 .mb-5 {
        margin-left: 10px;
    }

    #gr_5 .mini-card-inner-content {
        margin: 0 7px !important;
    }

        #gr_5 .mini-card-inner-content p {
            font-size: 1.6rem;
        }
}

@media (max-width: 760px) {
    #os_history .card-image img {
        height: 40vh;
    }

    #os_history .hover-card {
        height: 40vh;
    }

    #os_history .card-image {
        height: 40vh;
    }

    #hst_1 .card-image img {
        height: 53vh;
    }

    #hst_1 .hover-card {
        height: 53vh;
    }

    #hst_1 .card-image {
        height: 53vh;
    }

    #df_1 .image-banner-container, #yp_1 .image-banner-container {
        min-height: 20vh;
    }

    #rc_2 .image-banner-bg-image, #rc_4 .image-banner-bg-image {
        min-height: 10vh;
        height: fit-content;
    }

    #pr_2 .card-image img {
        content: url("/shared/images/fashion.jpg");
        height: 70vh;
    }

    #pr_2 .hover-card {
        height: 70vh;
    }

    #pr_2 .card-image {
        height: 70vh;
    }
}

@media (max-width: 500px) {
    #pen_2 .card-image img {
        height: auto !important;
        width: 100%;
        object-fit: cover;
    }
}

@media (max-width: 450px) {
    #cu_1 .card-image {
        padding: 30px 10px 0px 0px;
    }

    #pen_1 .foreground-banner {
        padding: 10px 20px;
    }

    #khqc {
        background-image: url('/shared/images/QCLab_Phot_mobile.jpg') !important;
    }

    #khpr {
        background-image: url('/shared/images/print_kh_mobile.jpg') !important;
    }

    #lm_1 .bl_headingLv1 {
        padding: 10px !important;
        margin: 0 !important;
    }

    #fs_31, #fs_32 {
        height: auto !important;
    }

    #fs_2 .contact-title p {
        padding: 10px 0 0 !important;
    }

    #fs_2 .arrows {
        padding: 10px 0 0 0 !important;
        justify-content: right;
    }

    #fs_31, #ps_21, #uf_21, #ak_31 {
        padding-bottom: 10px;
    }

    #st_2 #wrapper {
        width: 100% !important;
    }

    #uf_1 .image-banner-container-ov {
        height: 20vh;
    }

    #ak_4 .content-title {
        padding: 0px 30px 15px !important;
    }

    #ak_4 .two-card {
        display: block;
    }

    #ak_4 .two-card-image img {
        margin: 0 15px 0 10px;
    }
}

#hst_3 .timeline-wrapper {
    height: 23em;
}

@media (max-width: 1030px) {
    #hst_3 .timeline-wrapper {
        height: 27em;
    }
}

@media (max-width: 850px) {
    #hst_3 .timeline-wrapper {
        height: 23em;
    }
}

@media (max-width: 450px) {
    #hst_3 .timeline-wrapper {
        height: 19em !important;
    }
}

#hst_5 .timeline-wrapper {
    height: 25em;
}

@media (max-width: 1300px) {
    #hst_5 .timeline-wrapper {
        height: 30em;
    }
}

@media (max-width: 450px) {
    #hst_5 .timeline-wrapper {
        height: 26em !important;
    }
}

#hst_7 .timeline-wrapper {
    height: 32em;
}

@media (max-width: 1030px) {
    #hst_7 .timeline-wrapper {
        height: 33em;
    }
}

@media (max-width: 768px) {
    #hst_7 .timeline-wrapper {
        height: 31em;
    }
}

@media (max-width: 450px) {
    #hst_7 .timeline-wrapper {
        height: 36em !important;
    }
}

/* NISA */



/**----------------- END OF PHASE 2 ---------------------**/


@media screen and (max-width: 767px) {
    .targeted-product {
        scroll-margin-top: 70px;
    }
}

/**-- Around iPad Size --**/
@media screen and (max-width: 767px) {
  /*  .header-top {
        padding-top: 5px;
    }*/

    header #logo {
        display: flex;
        align-items: center;
        width: 100%;
    }
        header #logo .groupLogo {
            margin: 0;
        }
        header #logo .siteLogo {
            margin: 0 15px;
            padding: 0;
        }
            header #logo .siteLogo img {
                vertical-align: middle;
                width: 120px;
            }

        header #logo #spMenuBtn {
            margin: 0;
            margin-left: auto;
        }

    #siteFunctions {
        background-color: #014099;
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
    }

    #drawer {
        display: block;
        padding: 0px 20px;
        overflow: auto;
        max-height: unset;
    }

    .lang-nav-ul {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .lang-nav li.lang-nav-li-y {
        line-height: 1;
    }

    #funcBtns li {
        margin-left: 0px;
    }
    .search-button {
        display:none;
        /*display: inline-block;*/
        font-weight: 400;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        border: 1px solid transparent;
        padding: 0.375rem 0.75rem;
        font-size: 18px;
        line-height: 1.5;
        border-radius: 0.25rem;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        background-color: #f8f9fa;
        border-color: #f8f9fa;
    }
        .search-button:hover {
            color: #212529;
            background-color: #e2e6ea;
            border-color: #dae0e5;
        }
    .search-button i {
        color: #000 !important;
    }

    .topic-banner-title-line h2 {
        font-size: 1.75rem;
    }

    /**-- index.html --**/
    .main-banner-animation {
        float: unset;
        margin-top: 10%;
        width: 100%;
        max-width: unset;
    }
    /**-- index.html --**/
    .welcome #wrapper {
        margin-bottom: 0px;
    }
    .pressBlock {
        margin: 0;
    }

    /**-- aboutus/index.html --**/
    .content-banner #wrapper div {
        width: 100%;
        margin-right: 0 !important;
    }

    /**-- aboutus/sustainability.html --**/
    .sustain_icon .one_sixth {
        margin-bottom: 10px;
    }
    .sustain_icon .five_sixth {
        margin-bottom: 0px;
    }

    /**-- aboutus/toraytc.html --**/
    .toraytc-item {
        width: 100%;
    }

}

/**-- Around Mobile Size --**/
@media screen and (max-width: 480px) {
    .welcome #wrapper {
        margin-top: 0px;
    }

    .topic-banner-title-line {
        margin-bottom: 5px;
    }

        .topic-banner-title-line h2 {
            font-size: 1.25rem;
        }

    .paragraph-image-point li img {
        width: 100%;
        height: auto;
    }
}

/**-- boostrap sm --**/
@media (max-width: 576px) {
    .section-w-seperator .section-w:first-child {
        border-right: none;
    }
}