/* Reset*/
html, body, div, p {margin: 0; padding: 0; -moz-text-size-adjust: none; -ms-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none;}
body { font-family:'Noto Sans TC','Microsoft JhengHei', '微軟正黑體','MuseoModerno', cursive,sans-serif; overflow-x:hidden; margin:0; padding:0; line-height: 1.5;-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; background: transparent; }
h1, h2, h3, h4, h5, h6, p {font-size: 100%; font-weight: normal; margin: 0; padding: 0;  line-height: 1.35; font-family:'Noto Sans TC'; }
img {max-width:100%!important; height:auto!important; border-style: none;}
table, div, p, ul, li, ol, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, code {word-wrap:break-word;font-family:'Noto Sans TC'; }
input, button, textarea, select, optgroup, option {outline:none;}
p, td, li, label { font-size: 1rem;   line-height: 1.875rem; font-weight: 400; }
a { text-decoration: none!important; -moz-transition: color 0.25s ease, opacity 0.25s ease; -o-transition: color 0.25s ease, opacity 0.25s ease; -webkit-transition: color 0.25s ease, opacity 0.25s ease; transition: color 0.25s ease, opacity 0.25s ease }
img { max-width: 100%; height: auto; vertical-align: bottom; }
a img { border: none; }
article a { word-wrap: break-word; word-break: keep-all; }
strong { font-weight: 700; }
/* Reset ios*/
:focus, input:focus, select:focus, textarea:focus {outline: 0!important;}
* {-webkit-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
::-moz-selection {background:#91d8f5;}
::selection {background:#91d8f5;}
* {box-sizing: border-box; }
html { font-size: 100%;  overflow-x:hidden; }  
body::-webkit-scrollbar { -webkit-appearance: none;}
body::-webkit-scrollbar:vertical { width: 12px;}
body::-webkit-scrollbar:horizontal {  height: 12px;}
body::-webkit-scrollbar-thumb { background-color:#000; border-radius: 5px; border:solid 2px #dfe7eb;}
body::-webkit-scrollbar-track { border-radius: 0px;  background-color:#dfe7eb;}
img {max-width:100%;height: auto;}
.table_scroll { overflow-x: auto; } 
.table_scroll > table  { min-width: 1000px; } 
.txt-en{font-family: 'MuseoModerno', cursive;}
 /*----------------------------------------/
layout  
----------------------------------------*/
.cms-cpoy-box { position: absolute; right: 20%; bottom: 40px; width: auto;height: 30px;color:#8e8e8e;font-size: 14px; font-weight: 400;  }
.cms-main-social { position: absolute; right: 30px; bottom: 40px; width: 50px;    }
.cms-main-social .cms-social-icons { margin:auto;   height: auto;     }
.cms-social-icons li {  opacity:.35;margin:  5px; list-style: none; }
@media only screen and (max-width: 1440px){
.cms-cpoy-box {bottom: 10px; right: 18%; }
}
@media only screen and (max-width: 1280px){
.cms-cpoy-box {bottom: 10px; right: 18%; }
}
@media only screen and (max-width: 1024px){
.cms-cpoy-box { right:10%; text-align: center; margin: auto; }
}
@media only screen and (max-width: 840px){
.sjj_nav .cms-main-social {display: none;}   
.cms-cpoy-box { right:40%; text-align: center; margin: auto; }
}

@keyframes scroll {
0% { opacity: 0; }
10% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(10px); opacity: 0;}
}
/*end scroller mousey Styles====*/
 
.mobile{display:none; }
.pc{display: block;}
@media (max-width:840px) {
.mobile{display:block;max-width:100%;border:0; margin: auto;}
.pc{display:none;}
}

.menu {width:100%; position: relative; margin:0px auto;  padding:40px 0px 0px 0px; display: flex; flex-wrap: wrap; justify-content: space-between;}
@media (max-width:840px) {
.menu {  padding:20px 0px 0px 0px;  }
    
}
/* CSS Document */
.top-bar {position:relative; top:0; width:100%; background-color:transparent; z-index:9999; transition: all 0.25s ease 0s;}
.top-barC { margin:auto; height: 88px; padding: 0px; position: relative; background:rgba(255,255,255,0); transition: all 0.25s ease 0s;}
.cms-search { width: 100px; margin-top: -5px; vertical-align: middle; white-space: nowrap; position: relative;}
.cms-search input#search { width: 36px; height: 36px; padding-left: 15px; border:none;  border-radius: 25px;background-color:#f1f0f0; /*box-shadow: 2px 3px 5px rgba(0,0,0,.1); */  font-size: 0.75rem; float: right; color: #262626;  -webkit-transition: width .55s ease;-moz-transition: width .55s ease;-ms-transition: width .55s ease;-o-transition: width .55s ease; transition: width .55s ease;}
.cms-search .icon {color:#333;right: 0; margin-right:5px; margin-top: 5px; position: absolute;top: 0;z-index: 1;}
.cms-search input#search:focus, .cms-search input#search:active{ outline:none;  width: 160px; padding-left:15px;  margin-left: -100px; background-color:#fff;  border: solid 1px rgba(215,7,73,.5);box-shadow:0px 6px 6px rgba(215,7,73,.2);}
.cms-search:hover .icon{ color:#d70749;  }
.cms-search:hover input#search{width: 160px;padding-left: 15px; margin-left: -100px;  background-color:#fff; border: solid 1px #eee;}
.cms-search input::placeholder{font-size: 0; }
.cms-search:hover input::placeholder{font-size: 0.9rem;}

.links {position: relative;  padding: 0px; margin-right:60px;; top:0px; right: 60px; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-end; order: 3; z-index:99999; transition: all 0.25s ease 0s;}
.links i{ font-size: 1.1rem;  width:36px; height:36px;}
.links a:link, .links a:visited {text-decoration:none; color:#333; transition: all 0.25s ease 0s;}
.links a:hover, .links a:active, .links a:focus {text-decoration:none; color:#4b4948; cursor:pointer; transition: all 0.5s ease 0s;}
.links ul li{font-size: .9rem;}  
.links > div {position: relative;  width: 40px; height: 40px;  margin:0px 10px; display: flex; flex-wrap: wrap; align-items: center;  align-content: center; justify-content: center;   }
 
.links_cart {position: relative; width: 36px!important; }
.links_cart i{ font-size: 1.75rem; color: #fff;}
.links_cart span {width: 20px; height: 20px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; border-radius: 99rem; background-color:#f15921; box-shadow:0px 6px 6px rgba(0,0,0,.2);  color: #fff; font-size: 12px; font-weight: 700; position: absolute; top: -2px; right: -2px;}
.links_search {position: relative;}

#cms-main .logo img,#cms-main .links_cart i,#cms-main .links_search i{-webkit-filter:invert(1);}
.filter-invert{    }
.filter-invert .links_cart i,.filter-invert .links_search i{-webkit-filter:invert(0)!important;}

.filter-w{-webkit-filter:invert(1) brightness(100);  }
@media (max-width:840px) {
.filter-w{-webkit-filter:none;}
}

.links_lang { margin: auto 25px;}
.links_lang ul { position: absolute; top: 35px; right: 0px; left: auto; width: 180px; margin-left: -50px; padding: 0px; background-color: #fff; display: none; z-index: 100; box-shadow: 0 0 13px rgba(0, 0, 0, 0.13);}
.links_lang ul li { width: 100%; text-align: center; list-style: none; border-bottom: solid 1px #f5f5f5;}
.links_lang ul li::after { content: ''; display: block; height: 1px; width: calc(100% - 6px); margin: auto; background-color: rgba(255, 255, 255, 0.15);transition: all 0.25s ease 0s;}
.links_lang ul li a:hover, .links_lang ul li.current a {background-color: #264054;}
.links_lang ul li a { color: #4b4948 !important; padding: 10px 0; display: block; text-align: center;}
.links_lang ul li a:hover, .links_lang ul li.current a {color: #fff !important;}

.stick { position: fixed!important;  top:40px; z-index: 9999; }
@media (max-width: 840px) {
.stick { position: relative; top:20px; }
}

 
#cms-main .sp_nav span{border-color:#000}

.logo {position: relative; width:200px; height:57px; margin:0px 0px 20px 60px; display: flex;  line-height: 0; font-size: 0; z-index: 99; transition: all 0.25s ease 0s;}
.logo a { width:100%; height:auto; display: block;  transition: all 0.25s ease 0s;}
@media only screen and (min-width:1200px){
.top-barC {width: 100%; height: auto; padding: 0px;  position: relative; }
.links > div {  padding: 0px;}
 }
@media only screen and (min-width:841px){
.hideUp .logo {  transform: scale(0.8); margin-top: -15px; transition: all 0.25s ease 0s; }
.hideUp .top-bar { top: -40px!important;}
.hideUp .top-barC {position:fixed; top:-20px; width:100%;  z-index: 8888; transition: all 0.25s ease 0s; background: #fff; box-shadow: 0 0 13px rgba(0, 0, 0, 0.13); }
.hideUp .links{ top: -10px; } 
.hideUp .sp_header {top:30px; }
 }
@media only screen and (max-width: 840px){
.logo { width:120px; height:40px; margin: 0px 0px 0px 20px;}
.top-barC { width:100%;height: 70px; padding: 0 20px; background: #000; position: fixed;  top:0; transition: all 0.25s ease 0s;}
.links { margin-right:30px;  }
 #cms-main .logo img,#cms-main .links_cart i,#cms-main .links_search i{-webkit-filter:invert(0);}
/*#cms-main .sp_nav span{border-color:#fff}  
*/}
@media only screen and (max-width: 840px){
.logo{margin: 0px;  }   
.hideUp .top-bar {position:fixed; top:0; width:100%; background-color: #fff; box-shadow: 0 0 50px rgba(89, 77, 67, 0.09); z-index: 888; transition: all 0.25s ease 0s;}
.hideUp .sp_header{ position:fixed; width:40px; right:10px; top:17px; transition: all 0.5s ease 0s;}
.links {  margin-right:0px;} 
.links a:link, .links a:visited {text-decoration:none;  transition: all 0.25s ease 0s;}
.links a:active, .links a:hover {text-decoration:none; color:#4b4948; cursor:pointer; transition: all 0.5s ease 0s;}
.links > div {position: relative; min-width: 20px; min-height: 20px; margin-left: 5px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; box-shadow: none; }
.cms-search input#search { box-shadow: none;  }
.cms-search:hover input#search{border: solid 1px rgba(215,7,73,.3); box-shadow: 2px 3px 5px rgba(0,0,0,.1); }
.icon-wrap{width:24px; height: 24px;}    
}
 
.sjj_nav_ul > li > a {  font-size:1.875rem;  font-size: min(max(2vw, 1rem), 1.875rem);  font-weight:700; letter-spacing: 2.5px; line-height:36px; }


/* menu CSS Document */
@media only screen and (min-width:841px){
 *{box-sizing:border-box;}
.sp_nav_se { position: absolute; z-index:9999; right: 0px; top: 0px; }
.sp_nav_xjb::before {content: ''; height: 0; width: 0; border-color: #fff transparent transparent transparent; border-style: solid solid solid solid; border-width: 9px 6px; transition: all 0.25s ease 0s;}
.sjj_nav_i_se::before {content: ''; height: 0; width: 0; border-color: transparent #fff transparent transparent; border-style: solid solid solid solid; border-width: 6px 9px; transition: all 0.25s ease 0s;}
.sjj_nav{width: 100%; min-height:100vh; position:fixed;z-index: 999;/* display: flex; flex-wrap: wrap; align-items: center;*/ font-size:14px; line-height:40px;top:0px;right:-100%;overflow:auto;overflow-x:hidden;-webkit-overflow-scrolling: touch; transition:right ease 0.35s; transition: all 0.5s ease 0s; background:#1b1d1c;}
.nav_show{  height:100vh;  overflow: hidden; position: fixed; top: 0;right: 0px; z-index:999;} 
/*open menu then main.fix-main block can't scroll , js add .fix-show */
.fix-show {  overflow: hidden;  cursor: pointer;  } 
.fix-show::before {content: '';width: 100%; left: 0;top: 0; position: fixed; background-color: rgba(0,0,0,.85);z-index:999; overflow: hidden;transition: visibility .35s ease, opacity .35s ease;  pointer-events: auto; }  

.sjj_nav li{list-style:none; margin:0px; padding: 0; display: block;}
.sjj_nav a{text-decoration:none;/*display:block;*/-webkit-tap-highlight-color:rgba(255, 255, 255, 0);-webkit-user-select:none;-moz-user-focus:none;-moz-user-select:none;}
.sp_header{ width:40px;height:40px; right:60px; top:20px; position:absolute; z-index:99999; cursor: pointer; transition: all 0.5s ease 0s; }
.sp_nav{width:40px;height:40px; display: flex; flex-wrap: wrap; position:relative; cursor:pointer;  }
.sp_nav span{display:flex; width: 12px; height: 12px; margin: 3px; border: solid 2px #fff;border-radius: 50%; transition:all ease 0.35s;}
.sp_nav_se span:nth-of-type(1){ opacity: 0}
.sp_nav_se span:nth-of-type(2){ opacity: 0}
.sp_nav_se span:nth-of-type(3){ transform: translate(-1px, -15px);}
.sp_nav_se span:nth-of-type(4){ transform: translate(-1px, -15px);}   

.sjj_nav_ul{ width:35%; max-width: 700px; height: 100%;  z-index: 2; position: relative;    /*display: flex;flex-wrap: wrap; flex-direction: column;  align-content: flex-start;*/ order: 2; padding:8% 10% 10% 2%; }
.sjj_nav_ul > li {position: relative; width:auto;  padding:20px 0px 0px 0px; margin:0px;  display: block; transition: all 0.25s ease 0s; }
.sjj_nav_ul > li.current > a { background-image: linear-gradient( to right, #fff, #fff 50%, #f15921 50%)!important; }
.sjj_nav_ul > li.current > a:after{ content: ''; background:#f15921; display: block; position: absolute; bottom: -3px;  left: 0; width: 10%; height:3px; transition: all 0.3s ease-in-out;}
.sjj_nav_ul > li:after{ content: ''; background:rgba(255,255,255,.1); display: block; position: absolute; bottom: -3px;  left: 0; width: 100%; height: 1px; transition: all 0.3s ease-in-out;}
  
/*第一層hover 樣式 */
.sjj_nav_ul > li > a { padding:0px;/*font-size:1.875rem;  font-size: min(max(3vw, 1rem), 1.875rem); */ display: block;  position: relative;  transition: all 0.25s ease 0s;   }
.sjj_nav_ul > li > a{ background-image: linear-gradient( to right, #f15921, #f15921 50%, #fff 50%); background-size: 200% 100%; background-position: -100%; position: relative;  -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: all 0.3s ease-in-out;}
.sjj_nav_ul > li > a:before{ content: ''; background:#f15921; display: block; position: absolute; bottom: -3px;  left: 0; width: 0; height: 3px; transition: all 0.3s ease-in-out;}
   
.sjj_nav_ul > li > a:hover { background-position: 0 50%;}
.sjj_nav_ul > li > a:hover::before{ width: 100%;}
/*第一層hover 樣式 */
.sjj_nav_ul > li:hover > ul { opacity: 1; visibility: visible; margin: 0;  display: block!important; }
.sjj_nav_ul > li > ul { width: 218px;  height: auto;  overflow-y: scroll; overflow-x: hidden;  position: absolute; top: 0; left: calc(50% - 109px); opacity: 0;  visibility: hidden;text-align:left;  line-height:18px;  background: #fdc72b; box-shadow: 0 0 30px 0 rgb(0 0 0 / 20%); border-radius: 0px; transition: all 0.25s ease 0s; }
.sjj_nav_ul > li > ul::after { content: " "; width: 0; height: 0; border-style: solid; border-width: 12px 12.5px 0 12.5px; border-color:#fff transparent transparent transparent; position: absolute;top: -10px; left:42%;transform: rotate(180deg);}   
.sjj_nav_ul > li > ul > li { width: 100%; position: relative;}
.sjj_nav_ul > li > ul li a { padding:10px; width: 100%; color:#131212; display: block; font-size: 0.875rem;text-decoration:none; text-align: center;}
.sjj_nav_ul > li > ul li:hover { text-decoration: none;  }
.sjj_nav_ul > li > ul li:hover a {color:#00437c; text-decoration: none; }
.sjj_nav_ul > li > ul li ul li:hover a { background-color:#131212; color:#fff; text-decoration: none; }
 .sjj_nav_ul > li > ul li::after {content: ''; display: block; height: 1px; line-height: 0; background-color: rgba(0, 0, 0, 0.1); width: calc(100% - 10%); margin: auto; transition: all 0.25s ease 0s;}
 
.sp_nav_xjb {width: 8px; height: 6px; margin: 3px 0 0 7px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; display: none;}
.sp_nav_xjb::before {content: ''; height: 0; width: 0; border-color: #b1b1b1 transparent transparent transparent; border-style: solid solid solid solid; border-width: 6px 4px;}
.sjj_nav_ul li:hover .sp_nav_xjb::before {content: ''; height: 0; width: 0; border-color: #fff transparent transparent transparent; border-style: solid solid solid solid; border-width: 6px 4px;}
.sjj_nav_ul li:hover > ul > li .sp_nav_xjb::before {content: ''; height: 0; width: 0; border-color: transparent transparent transparent #b1b1b1; border-style: solid solid solid solid; border-width: 4px 6px; transition: all 0.25s ease 0s;}
.sjj_nav_ul > li > ul > li .sp_nav_xjb {width: 8px; height: 6px; margin: 15px 0 0 7px; position: absolute; right: 0px; top: 2px;}
.sjj_nav_ul > li > ul > li:hover > .sp_nav_xjb, .sjj_nav_ul > li > ul > li > ul > li > ul > li:hover > .sp_nav_xjb {width: 8px; height: 6px; margin: 15px 0 0 7px; position: absolute; right: 0px; top: 2px;}
.sjj_nav_ul > li > ul > li > ul > li:hover > .sp_nav_xjb, .sjj_nav_ul > li > ul > li > ul > li > ul > li > ul > li:hover > .sp_nav_xjb {width: 8px; height: 6px; margin: 15px 0 0 0px; position: absolute; left: -4px; right: auto; top: 2px;}
.sjj_nav_ul > li > ul > li:hover > .sp_nav_xjb::before, .sjj_nav_ul > li > ul > li > ul > li > ul > li:hover > .sp_nav_xjb::before {content: ''; height: 0; width: 0; border-color: transparent transparent transparent #fff; border-style: solid solid solid solid; border-width: 4px 6px; transition: all 0.25s ease 0s;}
.sjj_nav_ul > li > ul > li > ul > li:hover > .sp_nav_xjb::before, .sjj_nav_ul > li > ul > li > ul > li > ul > li > ul > li:hover > .sp_nav_xjb::before {content: ''; height: 0; width: 0; border-color: transparent #fff transparent transparent; border-style: solid solid solid solid; border-width: 4px 6px; transition: all 0.25s ease 0s;}
.sjj_nav_ul > li > ul > li:hover > ul, .sjj_nav_ul > li > ul > li > ul > li:hover > ul, .sjj_nav_ul > li > ul > li > ul > li > ul > li:hover > ul, .sjj_nav_ul > li > ul > li > ul > li > ul > li > ul > li:hover > ul { opacity: 1; visibility: visible; margin: 0; display: block!important; }
.sjj_nav_ul > li > ul > li ul { width: 100%; position: absolute; top: 20px; left: 100%; opacity: 0; visibility: hidden; background-color:#767676;  transition: margin .15s, opacity .15s;  text-align:left; line-height:20px; transition: all 0.25s ease 0s; z-index: 1; }
.sjj_nav_ul > li > ul > li > ul > li { }
.sjj_nav_ul > li > ul > li ul > li > ul, .sjj_nav_ul > li > ul > li ul > li > ul > li > ul > li > ul {left:auto; right: 100%; background-color:#131212;}
.sjj_nav_ul > li > ul > li ul > li > ul li:hover a {background-color:rgba(255, 255, 255, .2);}
.sjj_nav_ul > li > ul > li ul > li > ul li ul li:hover a {background-color:rgba(255, 255, 255, .4);}
.sjj_nav_ul > li > ul > li ul > li > ul li ul li ul li:hover a {background-color:rgba(255, 255, 255, .6);}
.sjj_nav_ul > li > ul > li ul > li > ul > li > ul {left: 100%;}
.hideUp .top-bar .links-social{display: none;}
}  

@media only screen and (min-width:841px){
.sp_header{  top:40px;  }
 }
 
 @media only screen and (min-width:1600px){
.sjj_nav_ul > li {  padding:40px 0px 0px 0px;  }
 }
 
.fadeInLeft {  -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft}
@-webkit-keyframes fadeInLeft {
  0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0);  transform: translate3d(-100%, 0, 0)  }
  to { opacity: 1; -webkit-transform: none; transform: none }
}
@keyframes fadeInLeft {
  0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0)  }
  to { opacity: 1;  -webkit-transform: none; transform: none }
}
/*end一pro-menu  */
/* #Slider
================================================== */
.section{ position: relative; width: 65%; display: flex;  height: 100vh; z-index: 9999;;order: 1; }

 
@media (max-width: 840px) {	
.section{  display: none; }
}

/* Case Study Showcase
================================================== */
.case-study-wrapper { position: absolute; top:0; right: 0; z-index: 10; width: auto; margin: 0; padding: 0; -webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);list-style: none;}
.case-study-wrapper .case-study-name a { position: relative; list-style: none; margin: 0; display: block; padding: 0; font-size: 28px; margin-top: 25px; margin-bottom: 25px; font-weight: 500; line-height: 1.3; letter-spacing: 2px;color: #8e8d9a; opacity: 0.5;text-decoration: none;-webkit-transition: all 300ms linear; transition: all 300ms linear; }	
.case-study-wrapper .case-study-name a:hover {text-decoration: none;}
.case-study-wrapper .case-study-name.active a {opacity: 1;color: #fff;}	
.case-study-images {position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin:0; z-index:0;}	
.case-study-images li { position: absolute; width: 100%; height: 100%; top: 0; left: 0;  list-style:none; -webkit-transition: all 300ms linear;transition: all 300ms linear; }
.case-study-images li .img-hero-background{ position: absolute; width: 100%; height: 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position:center center; background-repeat:no-repeat; top: 0; left: 0; overflow: hidden; list-style:none; opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); -webkit-transition: all 300ms linear;transition: all 300ms linear; }
.case-study-images li.show .img-hero-background {opacity: 1; -webkit-transform: translateY(0);transform: translateY(0);} 
.case-study-images li .hero-number-back{ position: absolute;right:-48%; bottom:20%;  -webkit-transform: translate(35%, -20%); transform: translate(35%, -20%);display: block; list-style:none;  pointer-events: none;opacity: 0; font-size: 130px;   font-size: min(max(10vw, 90px), 130px);  font-family: 'MuseoModerno', cursive; font-weight: 500; line-height: 1; color: rgba(255,255,255,1); z-index: 1; writing-mode: vertical-lr; transform:rotate(180deg);  -webkit-transition: all 300ms linear; transition: all 300ms linear; }
.case-study-images li .hero-number{ position: absolute; top:45%; left:50px; width: 40px;   display: block; letter-spacing: 2px; text-align: center; list-style:none; opacity: 0; font-size: 13px; font-family: 'MuseoModerno', cursive; font-weight:500; line-height: 1; color: #fff; z-index: 6; -webkit-transform: translateY(100%); transform: translateY(100%);-webkit-transition: all 300ms linear;transition: all 300ms linear; } 
.case-study-images li .hero-number-fixed{ position: absolute; top:50%;  left: 50px;  width: 40px; text-align: center; display: block; letter-spacing: 2px; list-style:none; font-size: 13px; font-family: 'MuseoModerno', cursive; font-weight: 500; line-height: 1;color: #fff;z-index: 6;}
.case-study-images li .hero-number-fixed:before{ position: absolute; content: ''; top: -28px; left: 20px; width: 1px; height: 20px; z-index: 1; background-color: rgba(255,255,255,.4);}
.case-study-images li.show .hero-number {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0);} 

.case-study-images li.show .hero-number-back {opacity: 1;  } 
.dark-over-hero{ position:absolute; width:100%; height:100%;   top:0; left:0; z-index:5; background-color: #050505; opacity: 0.2;}
.case-study-images li:nth-child(1) .img-hero-background{background-image: url("../images/index/n-1.jpg");}
.case-study-images li:nth-child(2) .img-hero-background{ background-image: url("../images/index/n-2.jpg");}
.case-study-images li:nth-child(3) .img-hero-background{ background-image: url("../images/index/n-3.jpg");}
.case-study-images li:nth-child(4) .img-hero-background{ background-image: url("../images/index/n-4.jpg");}
.case-study-images li:nth-child(5) .img-hero-background{ background-image: url("../images/index/n-5.jpg");}
.case-study-images li:nth-child(6) .img-hero-background{ background-image: url("../images/index/n-6.jpg");}
.case-study-images li:nth-child(7) .img-hero-background{ background-image: url("../images/index/n-7.jpg");}
.case-study-images li:nth-child(8) .img-hero-background{ background-image: url("../images/index/n-8.jpg");}
/* #Media
================================================== */
 @media (max-width: 1180px) { 
.case-study-images li .hero-number-back{  right:-44%; bottom:14%;  } 
}
@media (max-width: 1440px) { 
.case-study-images li .hero-number-back{   bottom:14%;  } 
}
@media (max-width: 1366px) { 
.case-study-images li .hero-number-back{   bottom:8%;  } 
}

@media (max-width: 1024px) {	
.case-study-images li .hero-number-back{ bottom:10%; right:-40%;   } 
}
@media only screen and (max-width:840px){
*{box-sizing:border-box;}
.sjj_nav img{/*display:block;max-width:100%;border:0*/}
.sjj_nav ul, .sjj_nav li{list-style:none; margin:0px; padding: 0; display: block;}
.sjj_nav a{text-decoration:none;/*display:block;*/-webkit-tap-highlight-color:rgba(255, 255, 255, 0);-webkit-user-select:none;-moz-user-focus:none;-moz-user-select:none;}
.nav_show { /*display:none;*/}
.sp_header{ width:40px;height:40px; right:20px; top:20px; position:absolute; z-index:99999; cursor: pointer; transition: all 0.5s ease 0s; }
.sp_nav{width:40px;height:40px; display: flex; flex-wrap: wrap; position:relative; cursor:pointer;  }
#cms-main .sp_nav span{border-color:#fff}
.sp_nav span{display:flex; width: 12px; height: 12px; margin: 3px; border: solid 2px #fff;border-radius: 50%; transition:all ease 0.35s;}
.sp_nav_se span:nth-of-type(1){ opacity: 0}
.sp_nav_se span:nth-of-type(2){ opacity: 0}
.sp_nav_se span:nth-of-type(3){ transform: translate(-1px, -15px);}
.sp_nav_se span:nth-of-type(4){ transform: translate(-1px, -15px);}       
.sjj_nav{position:fixed;z-index:9966; width:100%; height:calc(100% - 50px); background:url("../images/index/bg-nav.jpg") repeat; top:60px;right:-100%;overflow:auto;overflow-x:hidden;-webkit-overflow-scrolling: touch; transition:right ease 0.35s; transition: all 0.5s ease 0s;}
.nav_show{right:0px;}
.sjj_nav>ul>li:first-child{overflow:hidden;border-top:0}
.sjj_nav>ul>li:first-child>a{/*float:left;width:calc(100% - 70px)*/}
.sjj_nav>ul>li:first-child .language{float:right;width:70px;overflow:hidden;line-height:30px;margin-top:5px}
.sjj_nav>ul>li:first-child .language a{width:35px;float:left;border-left:1px #ddd solid;text-align:center;color:#999;}
.sjj_nav ul li i{position:absolute; top:0px; right:0px;  border-left:1px solid rgba(255, 255, 255, 0.23);  width:24px; height:100%; padding: 15px; cursor:pointer; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center;  }
.sjj_nav ul li i svg{transform:rotate(-90deg);transition:all ease 0.35s}
.sjj_nav ul li .sjj_nav_i_se svg{transform:rotate(0deg)}
.sjj_nav ul li {position:relative;line-height:120%;font-size:1rem; border-bottom: solid 1px rgba(255,255,255,.1);/*padding: 0 10%;*/}
.sjj_nav ul li:last-child {border-bottom: 0px solid rgba(255, 255, 255, 0.23);}
.sjj_nav>ul >li:last-child{/*border-bottom:1px #ddd solid;*/}
.sjj_nav ul li ul{display:none; margin-top: 0px; font-weight:normal !important;background-color:#f5f5f5;}
.sjj_nav ul li ul li i{position:absolute; top:8px; right:0px; border-left:0px solid rgba(255, 255, 255, 0.23); width:24px; height:24px; padding:0px 15px; cursor:pointer; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
.sjj_nav ul li ul li {position:relative;line-height:120%;  /*padding: 0 0 0 10%;*/}
.sjj_nav_ul > li > ul { width: 100%; position:relative; top:inherit; left: 0; z-index: 1; opacity: 1; visibility:visible; text-align:center; line-height:20px; margin-left: 0px!important; transition: all 0s ease 0s; background-color:rgba(12, 107, 187, 1); /* transition: margin .15s, opacity .15s;*/ }
.sjj_nav ul li a{   margin:0 0px; display:block; padding: 20px 0px; line-height: 1.5rem; }
.sjj_nav_ul > li > a{ background-image: linear-gradient( to right, #f15921, #f15921 50%, #fff 50%); background-size: 200% 100%; background-position: -100%; position: relative;  -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: all 0.3s ease-in-out;}
.sjj_nav_ul > li > a:before{ content: ''; background:#f15921; display: block; position: absolute; bottom: -3px;  left: 0; width: 0; height: 3px; transition: all 0.3s ease-in-out;}
.sjj_nav_ul > li > a:hover { background-position: 0 50%;}
.sjj_nav_ul > li > a:hover::before{ width: 20%;}
.sjj_nav ul li ul li a{color:#131212;display:block; text-align:left; font-weight: 700; text-decoration:none;}
.sjj_nav ul li i svg{width:20px;height:20px;fill:#fff;}
.sjj_nav ul li .sjj_nav_i_se svg{fill:#fff}
.sjj_nav ul li ul li > ul{ background:#fff6e4 }
.sjj_nav ul li ul li > ul li a{ color:#eb9924; }
.sp_nav_xjb {display:block;  }
.sjj_nav_ul > li > ul > li {width:auto;}
.sjj_nav_ul > li > ul li a {color:#eb9924; width:auto; padding: 10px 20px 10px 50px !important;}
.sjj_nav_ul > li > ul li a::after {content:none; display: block; height: 2px; background-color: #000; width: 100%; margin-top: 10px; transition: all 0.25s ease 0s;}
/*.sjj_nav_li_w {display: none!important;}*/
.sjj_nav_ul{ position:absolute; top:0px; right:0; height:100%; width:100%; overflow:auto;  padding: 40px!important;}
.sp_nav_se { position: absolute; z-index: 9999; right: 0px; top: 0px; }
.sp_nav_xjb::before {content: ''; height: 0; width: 0; border-color: #fff transparent transparent transparent; border-style: solid solid solid solid; border-width: 9px 6px; transition: all 0.25s ease 0s;}
.sjj_nav_i_se::before {content: ''; height: 0; width: 0; border-color: transparent #fff transparent transparent; border-style: solid solid solid solid; border-width: 6px 9px; transition: all 0.25s ease 0s;}
}

/* Top Search
=================================*/  
.input-group {position: relative;	display: table;	border-collapse: separate}
.input-group .form-control {position: relative;	z-index: 99999;	float: left;width: 100%;margin-bottom: 0; color:#00437c;}
.input-group .form-control:focus {z-index: 3}
.input-group .form-control, .input-group-addon, .input-group-btn {	display: table-cell}
.input-group-addon{	width: 1%;	white-space: nowrap;vertical-align: middle}
.input-group-addon {padding: 6px 12px;font-size: 14px;	font-weight: 400;line-height: 1;color: #555;text-align: center;	background-color: #eee;	border: 1px solid #ccc;	border-radius: 4px}
.top-search{background-image: linear-gradient(225deg,#555 0%, #1b1d1c 100%); padding:16px 30px; display: none; z-index: 9999; position: relative;    }
.top-search input.form-control{height:36px;padding: 0 15px; background-color: transparent;border: none;-moz-box-shadow: 0px 0px 0px;-webkit-box-shadow: 0px 0px 0px;-o-box-shadow: 0px 0px 0px;box-shadow: 0px 0px 0px;color: #fff; }
input.form-control::placeholder{color: #fff;}
.top-search .input-group-addon{ background-color: transparent;border: none;color: #fff;padding-left: 30px;padding-right: 30px;}
.top-search .input-group-addon.close-search{ cursor: pointer;}
.top-search .icon-search{ filter:grayscale(100%) brightness(500%);}

/* icon
=================================*/  
.icon-close{display: block;width: 24px;height: 24px;  margin: auto; background: url(../images/icon/icon-colse.svg) no-repeat left top ;}
.icon-search{display: block; width: 24px;height: 24px; margin: auto; background: url(../images/icon/search.svg) no-repeat left top}
.icon-cart{display: block; margin: auto;background:url(../images/icon/icon-shop.svg) no-repeat left top }
.icon-earth1{display: block; margin: auto;background:url(../images/icon/icon-earth.svg) no-repeat left top }
 /* load
=================================*/  
.loaderbg {background-color: #000;width: 100%;height: 100%; display: flex;justify-content: center; align-items: center;   overflow: hidden; position: fixed;left: 0;top: 0;z-index: 99999999}
.rolling-txt { width: 100%; margin: 0 auto; text-align: center;  position: relative; overflow: hidden;  }
.loading-logo{ width: 150px; height: auto; margin: auto auto 20px auto;}
.loading-txt{font-size: 1rem;font-weight: 500; color:#6d6d6d;  font-family: 'MuseoModerno', cursive;}
.loading-num{ width: 100%;  text-align: center;color:#6d6d6d;}
.count-num {  display: inline-block; font-size: 1rem;font-weight: 500; color:#6d6d6d;}