@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap');

.mtb-10 { margin-top: 10px; margin-bottom: 10px;}
.mtb-20 { margin-top: 20px; margin-bottom: 20px;}
.mtb-30 { margin-top: 30px; margin-bottom: 30px;}
.mt-10 { margin-top: 10px;}
.mt-20 { margin-top: 20px;}
.mt-30 { margin-top: 30px;}
.ma-0 { margin: 0px;}
.mb-0 { margin-bottom: 0px;}
.mb-10 { margin-bottom: 10px;}
.mb-20 { margin-bottom: 20px;}
.mb-30 { margin-bottom: 30px;}
.mr-10 {margin-right: 10px;}
.mr-20 {margin-right: 20px;}
.ml-10 {margin-left: 10px;}
.ml-20 {margin-left: 20px;}
.pa-1 { padding: 1rem;}
.pa-2 { padding: 2rem;}
.pt-10 { padding-top: 10px;}
.pt-20 { padding-top: 20px;}
.pt-30 { padding-top: 30px;}
.pl-20 { padding-left: 20px;}
.img-full {width: 100%}
.md-show { display: none;}
.md-hide { display: block;}
.sm-show { display: none;}
.sm-hide { display: block;}
.form-padding { padding-top: 33px;}
.mh-250 { min-height: 250px;}
input[type="text"].form-control { height: 40px}

.text-white { color:#FFFFFF;}
.image-container { width: 100%;height: 0; padding-bottom: 60%; overflow: hidden;}
.image-container img { width: 100%; }
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.video-container iframe, 
.video-container object, 
.video-container embed { position: absolute; top: 0;left: 0; width: 100%; height: 100%; }
.ellipsis { overflow:hidden; white-space: nowrap; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal;}
.section_pages.minHeight { position: relative; min-height: calc(100vh - 219px); }
.img-shadow { position: relative; z-index: 5; margin-bottom: 50px;}
.img-shadow::after{ content: ""; position: absolute; width: 90%; height: 50px; background: transparent; display: block;  margin: auto; box-shadow: 0 20px 40px rgb(0 0 0 / 50%); bottom: 0;  transform: translateX(5%); z-index: -1; }

.section-title {margin-bottom: 5rem!important; font-size: 35px; letter-spacing: 2px; font-weight: bold;}
.line-bottom {color:#231918; padding: 10px 0; letter-spacing: 1px; border-bottom: 1px solid #1e3b59; margin-bottom: 10px; font-size: 23px; font-weight: bold;}

.md-order { order: -1;}
.border-bottom { border-bottom:2px solid #dddddd;}
.anchor::before { content:""; display:block; width: 2px; height:80px; margin:-80px 0 0; }
.required { color:#ff5722;}

.table ul { padding-left: 30px;}

/*---------------------------
         fck
----------------------------*/
.fck { overflow:auto;}
.fck table { min-width:800px; }
.fck table thead th:first-child { background:#231918; color:#FFFFFF; text-align: center; vertical-align: middle;}
.fck table thead th { background: #1e3c5a; color:#FFFFFF; text-align: center; vertical-align: middle;}
.fck table thead td { background: #F3F3F3; text-align: center; vertical-align: middle;}


/*---------------------------
         TONO Background 
----------------------------*/
.gradient-bg {
background: #231918; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #231918 25%, #1e3c5a 50%, #1d4974 75%, #1d4974 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #231918 25%, #1e3c5a 50%, #1d4974 75%, #1d4974 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #231918 25%, #1e3c5a 50%, #1d4974 75%, #1d4974 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#231918', endColorstr='#1d4974',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.light-bg { background:#FFFFFF url(../../images/mega-bg.png)left top; background-repeat: no-repeat;}
.triangle-bg{ background:#F2F2F2 url(../../images/triangle-bg.png) right top; background-repeat: no-repeat;  }
.gray-bg { background: #F2F2F2;}
.text-gray { color:#777777;}

/*---------------------------
          flex
----------------------------*/
.d-flex { display: flex; flex-wrap: wrap;}
.justify-end { justify-content: end;}
.justify-center { justify-content:center;}
.items-center { align-items:center;}
.items-end { align-items: flex-end;}
.justify-between {justify-content:space-between;}
.justify-around {justify-content:space-around;}
.d-flex  [class*="col"]  {flex-grow: 0; flex-shrink: 1;} 

/*---------------------------
         navbar-nav
----------------------------*/
.original-logo { position: fixed; top:20px; z-index: 999; }
.original-logo img { max-width: 175px; width:100%;}
/*.original-logo::after { content: "" ; position:absolute; top:auto; bottom:0; right:-60px; width: 60px; height: 18px; background: url(../../images/footer-ESG-top.png) center center no-repeat; background-size: 100%; }*/

.navbar-mini .container .row { display: flex; align-items: center; justify-content: flex-end;}
.navbar-mini .nav  { width: 100%; justify-content: flex-end;}
.navbar-nav .navbar-form .form-control,
.navbar-mini .nav > li > a {color:#CCCCCC;}
.navbar-mini .input-group > .form-control { background: #EFEFEF;}

.scroll-css div.mega-menu-fullwidth .mega-dropdown .mega-menu:after { top:88px;}
.navbar-main .navbar-nav > li > .dropdown-menu.mega-menu {background: transparent; box-shadow:none; }
.service-mega { display: flex;  justify-content: end; align-items: stretch;  list-style: none; width: 100%; margin: 0; padding: 0;}
.service-mega ul { list-style: none; width: 100%;  margin: 0; padding: 0;}
.service-mega ul li h3 { border-bottom: 1px solid #85a0ad; color: #85a0ad!important; margin-bottom: 10px; font-size: 20px; padding: 10px 0;}
.service-mega ul li a { color: #dddddd!important; padding: 5px 10px; border-radius: 3px; white-space: normal;}
.service-mega ul li a:hover { background: rgba(255,255,255,0.3);}

.navbar-main:not(.navbar-middle) .navbar-nav:not(.lan-menu) > li.dropdown:hover a::after,
.navbar-main:not(.navbar-middle) .navbar-nav:not(.lan-menu) > li.dropdown.open > a::after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    bottom: 0;
    right: 50%;
    border-style: solid;
    border-width: 0 7.5px 7px 7.5px;
    border-color: transparent transparent #1e3c58 transparent;
    z-index: 999;
}
.navbar-main:not(.navbar-middle) .navbar-nav:not(.lan-menu) > li.dropdown li a::after{ display: none;}
.navbar-mini + .navbar-main.navbar .navbar-nav > li > a:before { top: 0px;  height: 100%;}

/*
.navbar-main .navbar-nav > li > .dropdown-menu::before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    top: -7px;
    right: calc(100% - 60px);
    border-style: solid;
    border-width: 0 7.5px 7px 7.5px;
    border-color: transparent transparent #1e3c58 transparent;
}
*/
.navbar-main .navbar-nav > li > .dropdown-menu {  background:  #1e3c58;}
.navbar-main .navbar-nav > li > .dropdown-menu li a { color:#FFFFFF!important;}
.navbar-main .navbar-nav > li > .dropdown-menu li a:hover {  background: #888888!important;}
.navbar-main .navbar-nav .navbar-form .btn-default i
.navbar-main .navbar-nav .navbar-form .btn-default:hover i { color:red!important;}

.navbar-main .navbar-nav > li > .dropdown-menu li a.service-mega-title { border-bottom: 1px solid #85a0ad; color: #85a0ad!important; margin-bottom: 10px; font-size: 20px; padding: 10px 0; cursor: default;}
.navbar-main .navbar-nav > li > .dropdown-menu li a.service-mega-title:hover { background:transparent!important; }


 .navbar-mini .lan-menu ul.dropdown-menu::before {
     content: "";
    position: absolute;
    top: -30px;
    right: -35px;
    background: transparent;
    width: 150px;
    height: 150px;
}

/*---------------------------
         index
----------------------------*/

/*----Banner----*/
.section-empty.slides-banner { box-shadow: 0 5px 30px rgb(0 0 0 / 30%);  }
.section-empty.slides-banner .tono-cover {
    position: absolute;
    background: url(../../images/tono-cover.png)right bottom;
    z-index: 99;
    width: 33%;
    height: 100%;
    top:0x;
    left: 0;
}

.section-empty.slides-banner .tono-cover h1 { 
    position: absolute;
    font-size: 35px;
    color: #FFFFFF;
    width: 100%;
    text-align: right;
    left: -70px;
    bottom: 9px;
}

.section-empty.slides-banner .flexslider { padding: 0;}
.flexslider .slides > li img { width: 100%; height: auto;}
.section-empty.slides-banner .flexslider .slides > li .slides-info {position: absolute; z-index: 10; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.section-empty.slides-banner .flexslider .slides > li .slides-info h1 { margin-bottom: 0.5rem;}
.section-empty.slides-banner .flexslider .slides > li .slides-info p { margin: 0;}

/*----marquee-----*/
.section-marquee { height: 100%;}
.section-marquee .row { display: flex; justify-content:end; align-items: center; }
.section-marquee ul.marquee {padding: 0;margin: 10px 0;list-style: none;position: relative;overflow: hidden;width: 65%;   height: 30px; }
.section-marquee ul.marquee li {position: absolute;top: -999em;left: 0;display: block;white-space: nowrap;}
ul.marquee li a { display: block; color:#777777;display: block; font-size: 15px; padding: 0; margin: 0; ;height: 30px;  overflow:hidden; white-space: nowrap; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; white-space: normal; line-height: 2;}
ul.marquee li a span { margin-right: 50px; color:#999999;}
ul.marquee li a:hover { color: #1e3b59; }

/*----News-----*/
.news-section .caption-bottom { background: #FFFFFF; margin-top: 20px; border:1px solid #888888;}
.news-section .caption-bottom .date { text-align: right; height: auto;}
.news-section .caption-bottom h2 { height: 26px; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; white-space: normal; margin: 10px 0;}
.news-section .caption-bottom p { height: 88px; text-align: left; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; white-space: normal; margin: 0; padding: 0;}
.img-box.adv-img.adv-img-down-text:hover img{ transform: scale(1.2);}
.img-box.adv-img.adv-img-down-text:hover .caption { background: rgba(2, 2, 2, 0.3);}
.img-box.adv-img.adv-img-down-text .img-box { border:1px solid #FFFFFF;}


/*----catalog-----*/
.catalog {position: relative;}
.triangle::before { position: absolute; content: ""; width: 150px; height: 150px; background:url(../../images/triangle-bg.png); background-repeat: no-repeat;z-index: 11; transition: all 0.3s; }
.catalog h2 { margin-bottom: 10px;}
.catalog h3 {margin-bottom: 10px; color:#1e3c58;}
.catalog.L { text-align: left; padding-right: 10px; }
.catalog.L .triangle::before{  left:0; top:40px; transform: rotate(-90deg);}
.catalog.L img { margin-top: 40px; }
.catalog img { transition: all 0.3s;}
.catalog.R { text-align: right; padding-left: 10px; }
.catalog.R .triangle::before{  right:0; bottom:0; transform: rotate(90deg);}
.catalog.L:hover .triangle::before{ left:-30px; top:20px; width: 300px; height: 300px; opacity:0;}
.catalog.R:hover .triangle::before{ right:-30px; bottom:-30px; width: 300px; height: 300px; opacity:0;}
.catalog.L:hover img,
.catalog.R:hover img{ transform: scale(1.1); }


/*----footer-----*/
.footer-base { background: #241a19 url(../../images/footer-bg.jpg) right top no-repeat;}
.footer-base .attest-img img { display: block;}
.footer-base .attest-img img:first-child { max-width: 120px;}
.footer-base .attest-img img:last-child{ max-width: 300px;}
.footer-base .footer-info { text-align: right;}
.footer-base .footer-info img { max-width: 80px; margin-bottom: 15px;}
.footer-base .footer-info ul { list-style: none; margin: 0; padding: 0;}
.footer-base .footer-info ul li { color:#FFFFFF; margin-bottom: 8px; font-size: 16px; line-height: 1; }
.footer-base .footer-info ul li:nth-child(1) { letter-spacing: 1px; color:#dddddd;}
.footer-base .footer-info ul li:nth-child(2) { letter-spacing: 1.1px; color:#dddddd;}
.footer-base .footer-info ul li:nth-child(3) { letter-spacing: 1.4px;  color:#dddddd;}
.footer-base .footer-info ul li:last-child { line-height: 1.5; font-size: 12px; margin-bottom: 0;}

.footer-base .footer-info .footer-social { display: flex; justify-content: flex-end; gap: 20px; font-size: 32px; margin: 28px 0;}
.footer-base .footer-info .footer-social a { color: #fff;}
.footer-base .footer-info .footer-social a:hover { color: #ffffffcf;}



/*---------------------------
         about
----------------------------*/
.TONO-breadcrumb { font-size: 14px; list-style: none; margin: 20px 0!important; padding: 0;}
.TONO-breadcrumb li { display: inline-block; position: relative; margin:0 15px;}
.TONO-breadcrumb li::after { position: absolute; content: ">"; right:-17px;}
.TONO-breadcrumb li:last-child::after { display: none;}
.TONO-breadcrumb li a{ color:#777777;}
.TONO-breadcrumb li a:hover{ color:#000000;}
.easy-frame { list-style: none; margin: 30px 0; padding: 0;}
.easy-frame li { margin-bottom: 15px; padding: 0 15px 0 0;}
.easy-frame li h3 {
color:#FFFFFF;
text-align: center;
font-size: 15px;
padding: 15px;
display: block;
background: #231918; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #231918 25%, #1e3c5a 50%, #1d4974 75%, #1d4974 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #231918 25%, #1e3c5a 50%, #1d4974 75%, #1d4974 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #231918 25%, #1e3c5a 50%, #1d4974 75%, #1d4974 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#231918', endColorstr='#1d4974',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.easy-frame li a h3 i { opacity: 0; color:#FFFFFF; font-size: 20px; transition: all 0.3s; }
.easy-frame li a:hover h3 i { opacity: 1; margin-left: 50px; }


.hexagon { background: url(../../images/hexagon.svg)center center;  background-size: 100%; background-repeat: no-repeat; text-align: center; padding: 30px; width: 240px; height: 240px; display: block; margin: auto;}
.hexagon h1 {font-family: 'Noto Serif TC', serif; margin: 15px 0; padding-bottom: 10px; border-bottom:2px solid #000000; color:#000000;font-size: 30px;} 
.hexagon p { font-size: 14px; margin: 0;  line-height: 1.3; height: 55px; }
.hexagon img { max-width: 50px; margin-top: 10px;}

.easy-frame-table.table {border-top:2px solid #dddddd;border-bottom:2px solid #dddddd;}
.easy-frame-table.table > thead > tr > th,
.easy-frame-table.table > tbody > tr > th,
.easy-frame-table.table > tfoot > tr > th { color:#FFFFFF; text-align: left; border-right:1px solid #FFFFFF; border-top: 1px solid #FFFFFF;}
.easy-frame-table.table > thead > tr > td,
.easy-frame-table.table > tbody > tr > td,
.easy-frame-table.table > tfoot > tr > td { color:#FFFFFF; text-align: center; border-right:1px solid #FFFFFF; border-top: 1px solid #FFFFFF;}
.easy-frame-table.table > thead > tr > th:last-child,
.easy-frame-table.table > tbody > tr > th:last-child,
.easy-frame-table.table > tfoot > tr > th:last-child,
.easy-frame-table.table > thead > tr > td:last-child,
.easy-frame-table.table > tbody > tr > td:last-child,
.easy-frame-table.table > tfoot > tr > td:last-child { border-right:0;}
.easy-frame-table.table > thead > tr > td.name,
.easy-frame-table.table > tbody > tr > td.name,
.easy-frame-table.table > tfoot > tr > td.name { background:#FFFFFF; color:#000000;}
.easy-frame-table.table > thead > tr > td.active,
.easy-frame-table.table > tbody > tr > td.active,
.easy-frame-table.table > tfoot > tr > td.active { background:#dddddd; color:#000000;}
.easy-frame-table.table h3 {font-family: 'Noto Serif TC', serif; font-size: 25px; letter-spacing: 1.5px;} 

.series { background: #b3b3b3; padding: 10px; max-width: 240px; margin: auto;}
.series h1 { text-transform:uppercase; text-align: center; color:#FFFFFF;font-family: 'Noto Serif TC'; letter-spacing: 1px; font-size: 60px; margin-bottom: 3rem; }
.series h1 span {font-size: 25px;}
.series table { color:#FFFFFF; font-size: 14px; margin-top: 3rem;}
.series table td{ padding: 0!important;}

.product-section .caption-bottom { background: #FFFFFF; margin-bottom: 30px;}
.product-section .caption-bottom h2 { height: 26px; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; white-space: normal; margin: 10px 0;}
.product-section .caption-bottom p { height: 88px; text-align: left; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; white-space: normal; margin: 0; padding: 0;}

.enterprise-table tr th { text-align: center; border-top-color: transparent!important; border-bottom-width: 0!important; }
.enterprise-table tr th img { margin-bottom: 8px;}
.enterprise-table tbody { border-top:2px solid #000;  border-bottom:2px solid #000;}
.enterprise-table tr:nth-of-type(even) { background-color: #e6e6e6;}

.qut-up .icon-box {margin:0 auto 20px; }
.qut-up .section-title { margin-top: 50px;}
.qut-up .icon-box .label { font-size: 20px;}
.icon-box-cell.ct-img {  width: 75px; height: 75px; flex: 0 0 auto; }

@media only screen and (min-width: 991px)  {
   .qut-up .icon-box P { width: 230px;} 
   .qut-up .icon-box { min-height: 135px; }
}
/*-------------------------
          product
---------------------------*/
#catalog { width: 100%; display: block; background: #FFFFFF;  border-radius: 0; border:0; padding:15px 20px; margin: 0;}
#catalog i { margin: 0 20px;}
.tono-accordion-list { border:1px solid #000000;}
.tono-accordion-list h4 { margin-bottom: 0;}
.tono-accordion-list h4 i { display: none;}
.tono-accordion-list.accordion-list .list-group-item { border-top:1px solid  #000000; padding:0 20px; border-bottom:0;}
.tono-accordion-list.accordion-list .list-group-item:hover > a:not(.active),
.tono-accordion-list.accordion-list .list-group-item > a { padding: 0 0 0 15px; border-left: 2px solid  #000000; margin: 10px 0;}
.tono-accordion-list.accordion-list .list-group-item > a:before { left:auto; top:21px; right:30px;border-color: #000000;  }
.tono-accordion-list.accordion-list .list-group-item:before {display: none;}
.tono-accordion-list.accordion-list .list-group-item > a:after { left: auto; right:0; background: transparent;}
.tono-accordion-list.accordion-list .list-group-item .inner { padding-left: 15px; list-style: none;}
.tono-accordion-list.accordion-list .list-group-item .inner li a { font-size: 16px; color:#777777; text-decoration: none; width: 100%; display: block;  padding: 5px;}
.tono-accordion-list.accordion-list .list-group-item .inner li a:hover,
.tono-accordion-list.accordion-list .list-group-item .inner li a.active { color:#000000; font-weight: bold; background: #EFEFEF;}
.open > .catalog-list.dropdown-menu { position: relative; display: block;  width: 100%; margin-top:0; border:1px solid #000000;}

.product-table {width: 100%;}
.product-table tr th,
.product-table tr td { padding: 2px 2px 2px 20px !important;}
.product-download { border-bottom: 1px solid #bbbbbb;  border-top: 1px solid #bbbbbb; width: 100%; padding: 0; margin-top: 15px;}
.product-download li {display: flex; justify-content: space-between; align-items: center; margin: 10px 0;}
.product-download li p { margin: 0;}
.product-download li p:nth-child(1){ width:80px; text-align:center;}
.product-download li p:nth-child(2){ background: #dddddd; width: 100%; padding: 0 10px;}
.product-download li a{ width: 40px; background: #000000; color:#FFFFFF;text-align:center;}
.product-download li a:hover{ opacity: 0.6;}
.product-tab .nav.nav-pills { border-bottom: 2px solid #dddddd;}
.product-tab .nav-pills > li > a { border-radius: 0; border:0; line-height: 1.5;}
.product-tab .nav-pills > li.active > a, 
.product-tab .nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus { border:0; border-bottom: 5px solid #1e3c58; }

.product-list [class*="col-"]{ padding: 0 15px;}
.product-list .caption-bottom { background: #F2F2F2; margin-bottom: 30px;}
.product-list .adv-img-down-text h2  { font-size: 18px; padding: 0; color:#222222;}

.quantity { display: flex; border:1px solid #222222;}
.quantity .plus,
.quantity .minus,
.quantity .qty { background-color: #dddddd; border: none; box-shadow: none; outline: none; font-size: 14px; line-height: 1; border-radius: 0;}
.quantity .plus,
.quantity .minus { width: 26px; height: 26px; text-align: center;}
.quantity .qty { width: 40px; height: 26px; text-align: center;}
.cart-qty .btn.btn-primary { padding: 1px 15px 6px 15px; margin-left: 10px; font-size: 18px; line-height: 1; }
.quantity input[type=number]::-webkit-outer-spin-button,
.quantity input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none;margin: 0;}
.quantity input[type=number] { -moz-appearance: textfield;}

.cart-table tr th,.cart-table tr td {text-align: center;}

.category-item { margin: 0; padding: 0;}
.accordion-list.category-item  .list-group-item:last-child { border-bottom: 0;}

.category-lightbox { padding: 25px;}
.category-lightbox .nav-tabs img { width: 150px;}
.category-lightbox .nav-tabs > li > a { padding: 10px;}

#category-pro .proporzional-row { display: flex!important; flex-wrap: wrap; width: 100%; margin: auto;}
#category-pro .proporzional-row h2 { font-size: 23px; margin-bottom: 20px; }
#category-pro .proporzional-row .col-md-4 {  margin-bottom: 60px; }
#category-pro .proporzional-row .col-md-4 ul {min-height: 180px;}
#category-pro .proporzional-row .col-md-4.boxed-inverse { background: #EFEFEF;}
#category-pro .proporzional-row .col-md-4.boxed { background:url(../../images/footer-bg.jpg) right top; }

#category-type .category-type-item { margin-bottom: 20px;}
#category-type .category-type-item .icon-box { display: flex; align-content:flex-start; align-items: center; background: #FFFFFF; padding: 10px;}
#category-type .category-type-item .icon-box a { display: block;}
#category-type .category-type-item .icon-box img { width: 35px;}
#category-type .category-type-item .icon-box i { position: absolute; right:80px; font-size: 50px; color:#1e3c58; transition: all 0.3s; opacity: 0;}
#category-type .category-type-item .icon-box:hover i  { right:25px; opacity: 1; }

/*-------------------------
         equipment
---------------------------*/

.equ-process { list-style: none; padding: 0; margin: 0;}
.equ-process li { height: 40px; color:#FFFFFF; font-size: 18px; display: flex;justify-content: center; align-items: center; padding: 10px; position: relative; margin-bottom: 10px; width: 95%;}
.equ-process li span {font-size: 15px; margin: 0 5px;}
.equ-process li::after{position: absolute; right:-20px; content: "";width: 0;height: 0;border-style: solid;border-width: 20px 0 20px 20px;border-color: transparent transparent transparent #1e3c58;} 
.equ-process li i { font-size: 40px; position: absolute;right: 10px; /*bottom: -20px;*/ color: #75b44e; text-shadow: 2px 2px 5px rgba(0,0,0.5); }
.equ-process li:last-child i{display: none;}

.equipment-info .icon-box { padding: 5px 0; margin-bottom: 15px; }
.equipment-info{ display: flex; justify-content: center; align-items: center;}

.foundry-row { display: flex;  justify-content: space-between; align-items: stretch;}
.foundry-list { list-style: none; padding: 5px 10px 10px; background: #FFFFFF url(../../images/recruit-S.png) right center; background-repeat: no-repeat; margin-bottom: 20px; border: 1px solid #cccccc; display: flex; flex-wrap: wrap; flex: 0 1 49%;}
.foundry-list li { margin: 5px; display: inline-block;}
.foundry-box { margin-top: 30px;}
.foundry-box .advs-box-content .tag { margin-top: 10px; min-height: 60px; text-align: left;}
.foundry-list li a ,
.foundry-box .advs-box-content .tag a { background: #ebeeef; padding: 2px 6px; border: 1px solid #9d9d9d; font-size: 12px; color: #1e3c58; transition: all .3s ease-out; display: inline-block;}
.foundry-list li a.active,
.foundry-list li a:hover,
.foundry-box .advs-box-content .tag a:hover { background:#1e3c58; color: #FFFFFF; }
.foundry-item { margin-bottom: 30px;;}
.foundry-list li.foundry-title {display: block; width: 100%; font-size: 20px; position: relative; padding-left: 45px; line-height: 2;}
.foundry-list li.foundry-title::before {  position: absolute; content: "";  width: 30px; height: 30px;  background: url(../../images/category-type.png)center center;left: 8px; top: 5px; background-size: 100%;}
.foundry-sidebar { padding: 0; position: relative; }
.foundry-sidebar::after { position: absolute; content: "";width: 1px; height: 100% ; background: #1e3c58; left:40px; top:0; z-index: -1;}
.foundry-sidebar li { color:#FFFFFF; margin-bottom: 20px; padding:10px; letter-spacing: 2px;}
.foundry-sidebar li span { border-radius: 30px; color: #ddf300; width: 50px; text-align: center; font-size: 16px;}

/*---------------------------
          contacts
----------------------------*/
.contact-section .boxed-inverse i { margin-right: 10px; color:#1e3c58;}
.contact-section .boxed-inverse p { font-size: 15px; margin: 5px;}
.contact-section .boxs {box-shadow: 0px 0 2px 0 rgb(0 0 0 / 16%), 0 0 2px 0 rgb(0 0 0 / 16%), 0 3px 2px 0 rgb(0 0 0 / 23%); padding-top: 15px; padding-bottom: 15px;} 
.file-upload { padding: 10px; background: #F2F2F2;}
.file-upload  input {outline: none; border:0;}

/*---------------------------
         menber
----------------------------*/
.member-sidebar.accordion-list .list-group-item > a:before { opacity: 0; }
.member-sidebar.accordion-list .list-group-item > a.active:before {  opacity: 1; transform: rotate(45deg);}

/*---------------------------
         news
----------------------------*/
.news-list .maso-item > .img-box {background: #FFFFFF;}
.news-list .maso-list .navbar-inner .nav.inner { display: flex!important; flex-wrap: wrap; }
.news-list .maso-list .navbar-inner .nav.inner li.active,
.news-list .maso-list .navbar-inner .nav.inner li { text-align: center!important; border:1px solid #000;}
.news-list .maso-list .navbar-inner .nav.inner li.active a { background:#1e3c58!important; color:#FFFFFF!important; }
.news-list .maso-list .navbar-inner .nav.inner li a {border:1px solid #000; padding: 5px 10px; margin: 10px; font-size: 14px;}

/*---------------------------
     Investors
----------------------------*/
.company-info .accordion-list .list-group-item a { font-size: 18px;  margin-bottom: 0;  padding: 10px 45px;  display: flex; justify-content: space-between; align-items: center; border-bottom:1px solid #000; flex-wrap: wrap; background: #F2F2F2;}
.company-info .accordion-list .list-group-item a:hover { }
.company-info .accordion-list .list-group-item a span {font-size: 14px; font-weight: normal; display: block; }
.company-info .accordion-list .list-group-item:last-child { border-bottom: 0;}
.company-info .accordion-list .list-group-item > .panel > .inner { padding: 15px; background: #F2F2F2; 
    border-bottom: 5px solid #DADADA;}
.company-info table.bg-white > thead > tr > th { background:#1e3c58; color:#FFF; text-align: center; vertical-align: middle; font-weight: bold; }

aside.sidebar { background: #FFFFFF;}
.company-info h3 { position: relative; padding-left: 40px;}
.company-info h3::before { position: absolute; content: ""; width: 30px; height: 30px; background: url(../../images/category-type.png)center center; left:0; top:0; background-size: 100%; }
.company-info h3.line-bottom { padding-left: 0;}
.company-info h3.line-bottom::before { display: none;}

.company-info .advs-box p { font-size: 16px;  height: auto;  overflow: visible; text-overflow:clip; -webkit-line-clamp:10;}

.inv-table { background: #FFFFFF;}
.inv-table > thead > tr {   background-color: #1e3c58; color:#FFFFFF; }
.inv-table > thead > tr > th { text-align: center;  vertical-align: middle;}


/*---------------------------
    recruit
----------------------------*/
ul.recruit { list-style: none; padding: 0; margin: 0;}
ul.recruit li {margin:0 10px 10px 0;}
ul.recruit li p {border:1px solid #ffffff; padding: 5px; }
.btn-white { background-color: #ffffff; color: #000000; border: 1px solid #ffffff; padding: 5px 30px; font-size: 18px; font-weight: bold; transition: all 0.3s; letter-spacing: 1px;}
.btn-white:hover { background-color:transparent; color: #FFFFFF; }


/*---------------------------
    2024-07-24 Evezone Setting
----------------------------*/
/* Background */
.illus-white-bg1 { background: #E7E6E6 url('../../images/sec-illus-white-bg1.png') no-repeat right 60px;}
.illus-white-bg2 { background: #E7E6E6 url('../../images/sec-illus-white-bg2.png') no-repeat right top;}
.illus-white-mixed { background-color: #E7E6E6; background-image: url('../../images/sec-illus-white-bg1.png'),  url('../../images/sec-illus-white-bg2.png'); background-position: right 240px, right top; background-repeat: no-repeat; background-size: 320px auto, auto 320px;}
.illus-light-bg1 { background: white url('../../images/sec-illus-light-bg1.png') no-repeat right top;}
.illus-light-bg2 { background: white url('../../images/sec-illus-light-bg2.png') no-repeat right top;}
.illus-light-mixed { background-color: white; background-image: url('../../images/sec-illus-light-bg1.png'),  url('../../images/sec-illus-light-bg2.png'); background-position: right 240px, right top; background-repeat: no-repeat; background-size: 320px auto, auto 320px;}
.sec-img-bg1 { position: relative; background: #E7E6E6 url('../../images/sec-img-bg1.png'); background-position: center right; background-repeat: no-repeat; }
.sec-img-bg1:after { display: block; content: ""; position: absolute; z-index: 0; right: 0; bottom: 10%; width: 320px; height: 593px; background-image: url('../../images/sec-illus-white-bg1.png'); background-size: cover;} 
.sec-img-bg2 { background: #E7E6E6 url('../../images/sec-img-bg3.png') no-repeat right center / cover;}
.sec-img-bg3 { background: url('../../images/sec-img-bg4.png') no-repeat center top / cover;}
.sec-img-bg4 { background: #E7E6E6 url('../../images/sec-img-bg5.png') no-repeat center top / cover;}
.bg-dark-blue { background-color: #1E3C5A;}

/* Section Content */
.sec-title { display: flex; gap: 20px; margin-bottom: 50px !important;}
.sec-title.hori { flex-direction: row; align-items: flex-end;}
.sec-title.vert { flex-direction: column;}
.sec-title .title { font-size: 42px; color: #1E3C5A; font-weight: bold;}
.sec-title .title.text-white { color: white;}
.sec-title .title small { margin-left: 10px; color: #CCCCCC;}
.sec-title .metas { display: flex; gap: 10px; flex: 1 1 0%;}
.sec-title .metas.vert { flex-direction: column;}
.sec-title .metas p { margin: 0; padding: 5px 10px 6px 10px; background-color: #1E3C5A; color: #E6E500; font-size: 18px; line-height: 1;}
.sec-content .title { margin-bottom: 15px; font-size: 24px;}
.sec-content .metas { display: flex; gap: 10px;}
.sec-content .metas p { margin: 0; padding: 5px 10px 6px 10px; background-color: #1E3C5A; color: #E6E500; font-size: 18px; line-height: 1;}
.sec-content .metas p.bordered { background-color: transparent; color: #1E3C5A; border: 1px dashed #1E3C5A;}
.sec-content p { font-size: 18px;}
.sec-content p b { color: #1E3C5A;}
.sec-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px;}
.sec-divider { position: relative; margin: 50px 0; width: 140px; height: 1px; background-color: #1E3C5A;}
.sec-divider:before { display: block; content: ""; width: 30%; height: 3px; background-color: #1E3C5A; transform: translateY(-1px);}
    
.illus-spacing { margin-top: 20px;}

.machine-box {
    display: grid;
    grid-template-columns: 30% 40% 30%;
    grid-template-areas:
    'info-l info-p info-r'
    'info-b info-b info-r';
    margin-top: 60px;
}
.machine-box .items { display: flex; flex-wrap: wrap; gap: 30px; padding: 30px; background-color: #ffffffad;}
.machine-box .items.thumb { grid-area: info-p; position: relative; margin: -30px -60px -45px; padding: 0; background-color: transparent; }
.machine-box .items.thumb img { border-radius: 4rem; box-shadow: 0 2rem 3rem -1.5rem rgba(0,0,0,0.5); }
.machine-box .items dl { margin: 0;}
.machine-box .items dl dt{ margin: 0 0 10px;}
.machine-box .items dl dd { margin: 0;}
.machine-box .items dl { flex: 1;}
.machine-box .items dl dt { font-size: 24px; color: #1E3C5A; font-weight: 700;}
.machine-box .items dl dt b { margin: 0 2px; color: #00B4B6;}
.info-left {
    grid-area: info-l;
    flex-direction: column;    
    border-bottom: 15px solid #E7E6E6;
}
.info-right {
    grid-area: info-r;
    flex-direction: column;
    padding-left: 60px !important;
    border-left: 30px solid #E7E6E6;
}
.info-bottom {
    grid-area: info-b;
    flex-direction: row;
    padding-top: 60px !important;
    border-top: 15px solid #E7E6E6;
}
.sec-tips { margin-top: 20px; text-align: right;}
.sec-tips span { display: inline-block;}

.sec-equipment {
    display: flex;
    gap: 30px;
    padding: 30px;
    background-image: linear-gradient(to right, white , transparent 60%);
    border-left-width: 10px;
}
.sec-equipment h4 { font-size: 24px; }
.sec-equipment ul,
.sec-equipment ul li { margin: 0; list-style: none;}
.sec-equipment ul { display: flex; flex-direction: column; align-items: flex-start; gap: 15px;}
.sec-equipment ul li { display: flex; align-items: center;}
.sec-equipment ul li label { margin: 0;  padding: 5px 30px; border-width: 1px; border-style: solid; border-radius: 3rem;}
.sec-equipment ul li span { position: relative; display: flex; align-items: center; font-size: 30px; line-height: 1;}
.sec-equipment ul li span:before { display: block; content: ""; margin-right: -2px; width: 160px; height: 1px;}

.sec-equipment.color-green,
.sec-equipment.color-green ul li label { border-color: #00B4B6;}
.sec-equipment.color-green h4,
.sec-equipment.color-green ul li { color: #00B4B6;}
.sec-equipment.color-green ul li span:before { background-color: #00B4B6;}
.sec-equipment.color-green ul li:nth-child(2) { transform: translateX(100px);}
.sec-equipment.color-green ul li:nth-child(3) { transform: translateX(-60px);}

.sec-equipment.color-blue,
.sec-equipment.color-blue ul li label { border-color: #1D4974;}
.sec-equipment.color-blue h4,
.sec-equipment.color-blue ul li { color: #1D4974;}
.sec-equipment.color-blue ul li span:before { background-color: #1D4974;}
.sec-equipment.color-blue ul li:nth-child(2) { transform: translateX(-60px);}
.sec-equipment.color-blue ul li:nth-child(3) { transform: translateX(60px);}
.sec-equipment.color-blue ul li:nth-child(4) { transform: translateX(-80px);}

.sec-equipment.color-dark,
.sec-equipment.color-dark ul li label { border-color: #000;}
.sec-equipment.color-dark h4,
.sec-equipment.color-dark ul li { color: #000;}
.sec-equipment.color-dark ul li span:before { background-color: #000;}

.sec-top-bg { height: 60vh;}
.sec-top-bg span { display: block; height: 100%; overflow: hidden;}
.sec-top-bg span img { width: 100%; height: 100%; object-fit: cover; object-position: top;}
.img-translate { margin-bottom: -20px; transform: translateY(-80px);}
.text-yellow { color: #E6E500 !important;}
.text-blue { color: #1E3C5A !important;}
.text-green { color: #00B4B6 !important;}

.sec-system .container.content { padding: 0;}
.sec-system .con-system { display: flex; padding: 0 15px;}
.sec-system .con-system .img-translate { flex: 0 0 35%;}
.sec-system .con-system .sys-info { padding: 80px 0 80px 60px;}
.sec-system .con-system .text-yellow { font-size: 22px;}
.sec-system .con-system .sys-left,
.sec-system .con-system .sys-right { flex: 1 1 50%; }
.sec-system .con-system .sys-left { position: relative; z-index: 2; padding: 80px 80px 80px 0; background-color: #FFFFFF;}
.sec-system .con-system .sys-right { position: relative; z-index: 1; padding: 80px 0 80px 80px; background-color: #E7E6E6;}
.sec-system .con-system .sys-right:before { display: block; content: ''; position: absolute; left: -20px; top: 0; bottom: 0; width: 40px; background-image: radial-gradient(closest-side at 50% 50%, #0000002c, transparent);}
.sec-system .con-system .sys-right:after { display: block; content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: #E7E6E6; transform: translateX(100%);}

.sec-system .con-system .sys-left .title { margin-bottom: 20px; font-weight: bold;}
.sec-system .con-system .sys-left .detail:not(:last-child) { margin-bottom: 50px;}

.card-advantage { display: flex; gap: 0 15px; margin-bottom: 40px;}
.card-advantage dt { display: flex; justify-content: center; align-items: center; padding: 15px; font-size: 24px; color: #1E3C5A; border: 1px solid #1E3C5A; border-radius: 1rem;}
.card-advantage dd.metas { display: flex; flex-direction: column; gap: 10px; flex: 1 1 0%; margin: 0;}
.card-advantage dd.metas p { margin: 0; padding: 7px 10px 10px 10px; background-color: #1E3C5A; color: #E6E500; font-size: 18px; line-height: 1; text-align: center;}

.sec-system .sec-table p { text-align: right;}
.sec-system .sec-table table { margin-top: 15px; width: 100%; border-collapse: collapse; border: 1px solid #FFFFFF; box-shadow: 0 20px 40px -20px rgb(0 0 0 / 50%)}
.sec-system .sec-table table thead { background-color: #1D4974; color: #FFFFFF;}
.sec-system .sec-table table thead tr th,
.sec-system .sec-table table tbody tr th { font-weight: bold; font-size: 20px; }
.sec-system .sec-table table tbody tr:nth-child(even) { background-color: #E7E9EC;}
.sec-system .sec-table table tbody tr:nth-child(odd) { background-color: #CCCFD6;}
.sec-system .sec-table table th, .sec-system .sec-table table td { padding: 8px 10px; text-align: center; border: 1px solid #FFFFFF;}

.sec-system .sys-steps { display: flex;}
.sec-system .sys-steps .items { flex: 1; padding: 80px 20px;}
.sec-system .sys-steps .items:nth-child(even) { background-color: #E7E6E6;}
.sec-system .sys-steps .items:nth-child(odd) { color: white;}
.sec-system .sys-steps .items img { margin: 0 auto 40px; width: 120px;}
.sec-system .sys-steps .items h3 { margin-bottom: 15px; font-size: 32px; font-weight: bold;}
.sec-system .sys-steps .items h3 small { font-size: 20px; color: inherit;}
.sec-system .sys-steps .items h4 { text-transform: unset;}
.sec-system .sys-steps .items p:not(:last-child) { margin-bottom: 15px;}

.sec-system .sys-apply { display: flex; gap: 80px; padding: 0 15px; }
.sec-system .sys-apply .apply-left,
.sec-system .sys-apply .apply-right { flex: 1; padding: 80px 0; }
.sec-system .sys-apply .apply-left .sec-title, .sec-system .sys-apply .apply-right .sec-title { justify-content: center;}
.sec-system .sys-apply ul.apply-info { margin: 0; padding: 0 20px;}
.sec-system .sys-apply ul.apply-info li { display: flex; gap: 10px;}

.sec-service .sec-content .metas p { font-size: 20px;}
.sec-service .ser-info { display: flex; gap: 60px;}
.sec-service .ser-info .ser-left { flex: 0 0 30%;}
.sec-service .ser-info .ser-right { flex: 1 1 0%;}
.sec-service .ser-info ul.ser-metas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none;}
.sec-service .ser-info ul.ser-metas li { padding: 15px; text-align: center; font-size: 18px; border: 1px solid white;}
.sec-service .ser-info ul.ser-metas li u { font-weight: bold;}

.ability-flex { display: flex; }
.sec-service ul.ability-metas { display: flex; color: white; margin-bottom: 20px; padding: 0; list-style: none;}
.sec-service dl.ability-metas { display: flex; flex-direction: column; justify-content: flex-start; flex: 1; margin: 0;}
.sec-service ul.ability-metas li { flex: 1 1 auto; display: flex; justify-content: space-between; align-items: center; height: 50px; line-height: 1;}
.sec-service dl.ability-metas dt { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; height: 50px; line-height: 1;}
.sec-service ul.ability-metas li:not(:first-child):before,
.sec-service ul.ability-metas li:after,
.sec-service dl.ability-metas dt:before,
.sec-service dl.ability-metas dt:after { display: block; content: "";}
.sec-service dl.ability-metas:first-child dt:before { opacity: 0;}
.sec-service ul.ability-metas li:before,
.sec-service dl.ability-metas dt:before { width: 15px; height: 50px; background: url('../../images/caret-s.svg') no-repeat center / cover;}
.sec-service ul.ability-metas li:after,
.sec-service dl.ability-metas dt:after { width: 15px; height: 50px; background: url('../../images/caret-e.svg') no-repeat center / cover;}
.sec-service ul.ability-metas li label,
.sec-service dl.ability-metas dt label { flex: 1 1 0%; margin: 0; font-weight: normal; text-align: center; color: white;}
.sec-service .metas-green li { background-color: #00B4B6; font-size: 22px;}
.sec-service .metas-blue dt { margin: 0; background-color: #1E3C5A; font-size: 28px; box-shadow: 0 20px 30px -20px rgba(0,0,0,1);}
.sec-service .metas-blue dd { margin: 0; flex: 1 1 0%; display: flex; padding: 80px 15px 15px;}
.sec-service .metas-blue:nth-child(2) dd { padding-top: 15px;}
.sec-service .ability-metas .info h3 { padding: 15px; color: #1E3C5A; font-size: 22px;}
.sec-service .ability-metas .desc { padding: 15px; font-size: 18px;}
.sec-service .ability-metas .desc.border { position: relative; border: 1px solid #1E3C5A;}
.sec-service .ability-metas .desc.border .line-arrow { position: absolute; top: 50%; width: 30px; transform: translateY(-50%);}

.sec-service .ability-metas .desc.border .line-arrow.pos-left { left: -30px;}
.sec-service .ability-metas .desc.border .line-arrow.pos-right { right: -30px;}

.sec-service .ability-metas .desc ul { padding: 0; list-style: none;}
.sec-service .ability-metas .desc .desc-metas { display: flex; flex-direction: column; gap: 10px; position: relative;}
.sec-service .ability-metas .desc .desc-metas:before { position: absolute; z-index: 0; left: -15px; right: -15px; top: 35px; bottom: 50px; border: 1px solid #1E3C5A; display: block; content: '';}
.sec-service .ability-metas .desc .desc-metas li { position: relative; z-index: 1; padding: 10px; background-color: #C5DBF0; text-align: center; box-shadow: 0 5px 10px -5px rgba(0,0,0,0.5);}
.sec-service .ability-metas .desc .desc-metas li h4 { margin: 0 0 5px; font-size: 22px;}

.ser-type { display: flex; justify-content: space-between; position: relative; margin-bottom: 30px; }
.ser-type:after { display: block; content: ""; width: 14px; height: 40px; background: url('../../images/caret-e.svg') no-repeat center / cover;}
.ser-type label { flex: 1 1 0%; display: flex; align-items: center; margin: 0; padding: 0 15px; font-size: 22px; line-height: 1;}
.ser-type span { position: absolute; left: 0; bottom: -20px; display: block; height: 20px;}
.ser-type span img { height: 100%;}
.ser-client { background-color: #E6E500; color: #1E3C5A;}
.ser-company { margin-left: 15%; background-color: #1E3C5A; color: #E6E500;}
.sec-service .ser-process { display: flex; flex-direction: column;}
.sec-service .ser-process .icons { display: flex; flex-direction: row; justify-content: space-between; align-items: center; position: relative; padding: 15px;}
.sec-service .ser-process .icons:before { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0; display: block; content: ""; border: 2px dashed #1E3C5A; border-radius: 10rem;}
.sec-service .ser-process .circle label { display: flex; justify-content: center; align-items: center; margin: 0; width: 140px; height: 140px; background-color: #1e3c58; color: #E6E500; font-size: 22px; font-weight: bold; text-align: center; line-height: 1.4; border: 1px solid #1E3C5A; border-radius: 100%;}
.sec-service .ser-process .circle.yellow label { background-color: #E6E500; color: #1E3C5A;}

.sec-service .ser-process .p-desc {
    display: grid;
    grid-gap: 15px;
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
        'd1 d1 d3 d4 d5 d6'
    ;
    margin-top: 30px;
    font-size: 18px;
}
.sec-service .ser-process .p-desc .info { position: relative;}
.sec-service .ser-process .p-desc .info.d1 { grid-area: d1; text-align: center;}
.sec-service .ser-process .p-desc .info .border { padding: 5px 10px; text-align: left; border: 1px solid #1E3C5A;}
.sec-service .ser-process .p-desc .info .border:not(:last-child) { margin-bottom: 5px;}
.sec-service .ser-process .p-desc .info h4 { margin: 0 0 5px; color: #1E3C5A;}
.sec-service .ser-process .p-desc .info ol { margin: 0; padding-left: 20px;}
.sec-service .ser-process .p-desc .info.d1 .border { display: inline-block; margin-left: auto;}
.sec-service .ser-process .p-desc .info .arrow { position: absolute; left: 50%; top: -40px; transform: translateX(-50%);}

.sec-service .sec-content .p-desc { margin-top: 30px;}
.sec-service .sec-content .p-desc h4 { font-size: 24px;}
.sec-service .sec-content .metas + .detail { margin-top: 20px;}
.sec-service .sec-divider { margin: 30px 0; opacity: 0;}
.sec-service .sec-chart { display: flex; align-items: flex-end; width: 100%;}
.sec-service .sec-chart .chart-left { position: relative; margin-bottom: 40px; padding: 77px 20px 77px 0; width: 40px; font-size: 20px; line-height: 1; color: #00B4B6;}
.sec-service .sec-chart .chart-left::after { position: absolute; z-index: 0; left: 10px; top: 0; display: block; content: ""; height: 100%; border-left: 1px dashed #00B4B6;}
.sec-service .sec-chart .chart-left .bi,
.sec-service .sec-chart .chart-left label { position: relative; z-index: 1;; background-color: #E7E6E6;}
.sec-service .sec-chart .chart-right { flex: 1 1 0%;}
.sec-service .sec-chart .chart-right .items { display: grid; gap: 10px;}
.sec-service .sec-chart .chart-right .items:not(:last-child) { grid-template-columns: 30% 30% 40%;}
.sec-service .sec-chart .chart-right .items:last-child { grid-template-columns: 30% 70%;}
.sec-service .sec-chart .items div { padding: 10px; border-bottom: 1px solid #E7E6E6;}
.sec-service .sec-chart .items div:nth-child(2) { display: flex; justify-content: center; align-items: center;}
.sec-service .sec-chart .items div:nth-child(2) h5 { margin: 0; font-size: 18px; line-height: 1; text-align: center;}
.sec-service .sec-chart .items div:not(:first-child) { background-color: white;}
.sec-service .sec-chart .items:last-child div { background-color: transparent;}
.sec-service .sec-chart .items.top div:not(:first-child) { border-radius: 10px 10px 0 0;}
.sec-service .sec-chart .items.end div:not(:first-child) { border-radius: 0 0 10px 10px;} 
.sec-service .sec-chart .items.last div:nth-child(2) { justify-content: flex-start;}
.sec-service .sec-chart .items.last div:nth-child(2) p { font-size: 18px;}

.sec-service .sec-chart .items.top { color: #00B4B6; text-align: center;}
.sec-service .sec-chart .items.top h3 { margin: 0; padding: 5px; width: 100%; font-size: 22px; line-height: 1; font-weight: bold; border: 2px solid transparent;}
.sec-service .sec-chart .items.top h4 { margin: 0; padding: 5px; width: 100%; font-size: 20px; line-height: 1; border: 2px solid #00B4B6; border-radius: 5px;}
.sec-service .sec-chart .items div:first-child { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 10px 0; text-align: center;}
.sec-service .sec-chart .items div:first-child .sub { position: relative; width: 100%;}
.sec-service .sec-chart .items div:first-child h4 { position: relative; margin: 0; padding: 10px; width: 100%; background-color: #00B4B6; font-size: 20px; color: white; border-radius: 10rem;}
.sec-service .sec-chart .items div:first-child h4:after { position: absolute; left: 0; right: 0; top: 100%; display: block; content: ""; width: 100%; height: 40px; background-image: linear-gradient(180deg, #00B4B6, transparent 40%); border-radius: 2rem 2rem 0 0; opacity: 0.2;}
.sec-service .sec-chart .items div:first-child .bi { position: absolute; left: 50%; top: 44px; transform: translateX(-50%); font-size: 24px; color: #00B4B6;}
.sec-service .sec-chart .items p { font-size: 16px; }
.sec-service .sec-chart .items p b { font-size: 18px; }
.sec-service .sec-chart .items h4.line:before { position: absolute; top: 50%; right: 100%; display: block; content: ''; width: 30px; border: 1px dashed #00B4B6;}

.sec-service .sec-slogan { margin-bottom: 40px;}
.sec-service .sec-slogan h3 { font-size: 36px;}
.sec-service .sec-content .desc h4.text-blue { font-size: 24px; font-weight: bold; text-decoration: underline;}

.sec-service .sec-flow .items { display: grid; grid-template-columns: 55% 45%;}
.sec-service .sec-flow .items .border { position: relative; z-index: 10; flex: 1; padding: 10px; width: 100%; background-color: white; font-size: 22px; text-align: center; border: 2px solid #1E3C5A;}

.sec-service .sec-flow .items.top .base { position: relative; display: flex; gap: 30px; padding: 30px 0;}
.sec-service .sec-flow .items.top .rec { position: absolute; z-index: 0; left: 25%; right: 25%; top: 15px; bottom: 15px; border: 2px dotted #1E3C5A; }
.sec-service .sec-flow .items.top .line { position: absolute; z-index: 0; left: 50%; width: 1px; height: 15px; border-left: 2px dotted #1E3C5A; }
.sec-service .sec-flow .items.top .line.pos-top { top: 0;}
.sec-service .sec-flow .items.top .line.pos-bottom { bottom: 0;}
.sec-service .sec-flow .items.top .f-desc { position: relative; display: flex; justify-content: center; align-items: center; gap: 30px; font-size: 20px; color: #1E3C5A;}
.sec-service .sec-flow .items.top .f-desc .line { position: absolute;}
.sec-service .sec-flow .items.top .f-desc .line.pos-top { left: 0; top: 28px; width: 50%; border-top: 2px dotted #1E3C5A; border-left: 0;}
.sec-service .sec-flow .items.top .f-desc .line.pos-top img { position: absolute; left: 0; top: -8px; width: 10px; height: 14px;}
.sec-service .sec-flow .items.top .f-desc .line.pos-center { left: 50%; top: 28px; bottom: 0; width: 14px; height: calc(100% - 28px); border-top: 0; border-left: 2px dotted #1E3C5A;}
.sec-service .sec-flow .items.top .f-desc .line.pos-center img { position: absolute; left: -7px; bottom: 0; width: 14px; height: 10px;}

.sec-service .sec-flow .items.bottom .base { display: flex; flex-direction: column; align-items: center;}
.sec-service .sec-flow .items.bottom .line { width: 1px; height: 30px; border-left: 2px dotted #1E3C5A;}
.sec-service .sec-flow .items .flow-info { padding: 20px;}
.sec-service .sec-flow .items .flow-info.bg-dark-blue { display: flex; flex-direction: column; justify-content: center; align-items: center;}
.sec-service .sec-flow .items .flow-info.bg-dark-blue .logo { margin: 10px 0; width: 60%;}
.sec-service .sec-flow .items .flow-info.bg-dark-blue h3 { margin-bottom: 5px; font-size: 28px; font-weight: bold;}
.sec-service .sec-flow .items .flow-info.bg-dark-blue h4 { margin: 0;}
.sec-service .sec-flow .items .flow-info.bg-dark-blue ul { margin-top: 5px; padding: 0; list-style: none;}
.sec-service .sec-flow .items .flow-info.bg-white { display: flex; flex-direction: column; justify-content: center; gap: 30px; border: 2px solid #1E3C5A; border-radius: 0 30px 30px 0;}
.sec-service .sec-flow .items .flow-info.bg-white .d-flex { align-items: flex-start; gap: 10px;}
.sec-service .sec-flow .items .flow-info.bg-white .d-flex .b-icon { width: 30px;}
.sec-service .sec-flow .items .flow-info.bg-white .d-flex h4 { flex: 1 1 0%; font-size: 24px;}

/* English - Section Content */
.section-en .sec-title.hori { justify-content: space-between;}
.section-en .sec-title .metas.vert { flex: 0 0 40%; gap: 6px;}
.section-en .sec-title .metas.vert p { padding: 2px 10px 4px; text-align: center;}
.section-en .sec-content p { font-size: 16px; font-weight: 300;}

.section-en .machine-box .info-left { padding-right: 60px;}d
.section-en .sec-equipment.color-green ul li label { padding: 4px 15px; }
.section-en .sec-equipment.color-green ul li:nth-child(1) span:before { width: 40px;}
.section-en .sec-equipment.color-green ul li:nth-child(2) span:before { width: 80px;}
.section-en .sec-equipment.color-green ul li:nth-child(2) span:before { width: 100px;}
.section-en .sec-equipment.color-green ul li:nth-child(2) { transform: translateX(100px);}
.section-en .sec-equipment.color-green ul li:nth-child(3) { transform: translateX(40px);}

.section-en .sec-equipment.color-blue ul li:nth-child(1) span:before { width: 180px;}
.section-en .sec-equipment.color-blue ul li:nth-child(2) span:before { width: 80px;}
.section-en .sec-equipment.color-blue ul li:nth-child(3) span:before { width: 60px;}
.section-en .sec-equipment.color-blue ul li:nth-child(4) span:before { width: 40px;}
.section-en .sec-equipment.color-blue ul li:nth-child(2) { transform: translateX(-20px);}
.section-en .sec-equipment.color-blue ul li:nth-child(3) { transform: translateX(-100px);}
.section-en .sec-equipment.color-blue ul li:nth-child(4) { transform: translateX(-140px);}

.section-en .sec-equipment.color-dark { align-items: center;}

.section-en.sec-system .con-system .sys-info { padding: 50px 0 50px 60px;}
.section-en.sec-system .sys-info .sec-title { margin-bottom: 30px !important;}
.section-en.sec-system .con-system .text-yellow { font-size: 18px; line-height: 1.4;}
.section-en.sec-system .card-advantage { flex-direction: column; align-items: start; gap: 10px; margin-bottom: 30px;}
.section-en.sec-system .card-advantage dt { padding: 2px 20px; font-size: 20px; font-weight: bold;}
.section-en.sec-system .card-advantage dd { width: 100%; gap: 5px; }
.section-en.sec-system .card-advantage dd.metas p { font-size: 15px;}
.section-en.sec-system .con-system .sys-left .title { margin-bottom: 5px;}
.section-en.sec-system .con-system .sys-left .detail:not(:last-child) { margin-bottom: 30px;}
.section-en.sec-system .sec-table table th, .section-en.sec-system .sec-table table td { padding: 15px 10px;}
.section-en.sec-system .sys-steps .items h3 small { display: block;}

.section-en.sec-service .sec-flow .items .flow-info.bg-white .d-flex h4 { font-size: 18px;}
.section-en.sec-service .sec-flow .items .flow-info.bg-white .d-flex h4 b { font-size: 24px;}
.section-en.sec-service .sec-flow .items .flow-info.bg-dark-blue ul li { display: flex; gap: 8px; }
.section-en.sec-service .sec-flow .items .flow-info.bg-dark-blue ul li:before { display: block; content: "✓";}
.section-en.sec-service .sec-flow .items.top .f-desc div:first-child { position: relative; z-index: 10; background-color: white; font-size: 16px; }
.section-en.sec-service .sec-chart { margin-top: 30px;}
.section-en.sec-service .sec-chart .chart-right .items { gap: 20px;}
.section-en.sec-service .sec-chart .chart-left label { writing-mode: vertical-rl; transform: rotate(180deg); }
.section-en.sec-service .sec-chart .chart-left { padding: 80px 20px 80px 0; width: 56px; font-size: 18px; text-align: center;}
.section-en.sec-service .sec-chart .chart-left::after { left: 18px;}
.section-en.sec-service .sec-chart .items h4.line:before { width: 38px;}
.section-en.sec-service .sec-chart-img { display: none;}

.section-en.sec-service .ser-info { align-items: center;}
.section-en.sec-service .ser-info .ser-left { flex: 0 0 40%;}
.section-en.sec-service .ser-info .sec-title .title { font-size: 32px;}
.section-en.sec-service .ser-info .sec-title .title small {font-size: 16px;}
.section-en.sec-service .ser-info ul.ser-metas { display: flex;  flex-direction: column; gap: 10px;}
.section-en.sec-service .ser-info ul.ser-metas li { padding: 5px; font-size: 16px; }
.section-en.sec-service .ability-metas .desc ul,
.section-en.sec-service .metas-green li,
.section-en.sec-service .ser-process .p-desc .info ol,
.section-en.sec-service .ser-process .p-desc .info { font-size: 16px;}
.section-en.sec-service .metas-blue dt { font-size: 18px;}
.section-en.sec-service .ability-metas .desc .desc-metas li h4,
.section-en.sec-service .ser-process .p-desc .info h4,
.section-en.sec-service .sec-content .desc h4.text-blue { font-size: 20px;}
.section-en.sec-service .sec-slogan h3 { font-size: 26px; font-weight: bold;}


/* Japanese - Section Content */
.section-jp .sec-title .metas p { padding: 5px;}
.section-jp .machine-box .items dl { flex: 1 1 auto;}
.section-jp .machine-box .info-left { padding-right: 60px; border-right: 30px solid transparent;}

.section-jp .sec-equipment ul { padding-left: 0;}
.section-jp .sec-equipment.color-green ul li label { padding: 4px 15px; }
.section-jp .sec-equipment.color-green ul li:nth-child(1) span:before { width: 20px;}
.section-jp .sec-equipment.color-green ul li:nth-child(2) span:before { width: 200px;}
.section-jp .sec-equipment.color-green ul li:nth-child(2) span:before { width: 200px;}
.section-jp .sec-equipment.color-green ul li:nth-child(2) { transform: translateX(0);}
.section-jp .sec-equipment.color-green ul li:nth-child(3) { transform: translateX(-40px);}

.section-jp .sec-equipment.color-blue ul li:nth-child(1) span:before { width: 160px;}
.section-jp .sec-equipment.color-blue ul li:nth-child(2) span:before { width: 300px;}
.section-jp .sec-equipment.color-blue ul li:nth-child(3) span:before { width: 160px;}
.section-jp .sec-equipment.color-blue ul li:nth-child(4) span:before { width: 100px;}
.section-jp .sec-equipment.color-blue ul li:nth-child(1) { transform: translateX(40px);}
.section-jp .sec-equipment.color-blue ul li:nth-child(2) { transform: translateX(0);}
.section-jp .sec-equipment.color-blue ul li:nth-child(3) { transform: translateX(100px);}
.section-jp .sec-equipment.color-blue ul li:nth-child(4) { transform: translateX(-100px);}

.section-jp .sec-equipment.color-dark ul li span:before { width: 240px;}

.section-jpsec-system .sec-title.text-blue .title b {display: block;}
.section-jp.sec-system .sec-table table th, .section-jp.sec-system .sec-table table td { padding: 15px 10px;}
.section-jp.sec-system .sys-steps .items h3 { display: flex; align-items: center;}
.section-jp.sec-system .sys-steps .items h3 small { font-size: 16px;}

.section-jp.sec-service .ser-info ul.ser-metas { display: flex; flex-wrap: wrap; gap: 10px;}
.section-jp.sec-service .ser-info ul.ser-metas li { padding: 5px 10px; }
.section-jp.sec-service .metas-green li,
.section-jp.sec-service .ser-process .circle label,
.section-jp.sec-service .ser-process .p-desc .info h4,
.sec-service .ability-metas .info h3 { font-size: 20px;}
.section-jp.sec-service .metas-blue dt { font-size: 24px;}
.section-jp.sec-service .sec-chart .chart-left { padding: 98px 20px 99px 0;}


@media only screen and (max-width: 480px) {
    .illus-white-bg1 { background-size: 160px auto; }
    .illus-white-bg2 { background-size: auto 160px; }
    .illus-white-mixed { background-position: right 80px, right top; background-size: 160px auto, auto 160px; }
    .illus-light-bg1 { background-size: 160px auto; }
    .illus-light-bg2 { background-size: auto 160px; }
    .illus-light-mixed { background-position: right 80px, right top; background-size: 160px auto, auto 160px;}
    .sec-img-bg1 { background-attachment: fixed; background-position: center; background-size: auto 100vh;}
    .sec-img-bg1:after { display: none;}

    .container.content { position: relative; z-index: 10;}

    .sec-title { margin-bottom: 30px !important;}
    .sec-title.hori,
    .sec-title.vert { flex-direction: column; align-items: start;}
    .sec-title .metas { flex-wrap: wrap;}
    .sec-title .title { font-size: 32px;}
    .sec-content p { font-size: 16px;}
    
    .illus-spacing { margin-top: 20px;}
    .sec-tips br { display: none;}

    .machine-box {
        margin-top: 30px;
        gap: 15px;
        grid-template-columns: 100%;
        grid-template-areas:
        'info-l'
        'info-p'
        'info-r'
        'info-b';
    }
    .machine-box .items { gap: 15px;}
    .machine-box .items.thumb { margin: 0;}
    .machine-box .items.thumb img { border-radius: 20px;}
    .info-left, .info-right, .info-bottom { flex-direction: column; padding: 20px !important; border: 0;}

    .sec-equipment { flex-direction: column; margin-bottom: 15px; background-image: linear-gradient(to right, white, rgba(255, 255, 255, 0.493));}
    .sec-equipment ul { padding-left: 0;}
    .sec-equipment ul li { transform: unset !important;}
    .sec-equipment ul li label { border-radius: 1.5rem;}
    .sec-equipment ul li span { display: none;}

    .sec-top-bg { height: 50vh;}
    .sec-system .container.content { padding: 30px 15px;}
    .sec-system .con-system .sys-info { padding: 40px 0 0;}
    .sec-system .con-system { flex-direction: column; align-items: center; margin: 0 -15px; padding: 40px 15px 0;}
    .sec-system .con-system .img-translate { width: 70%; margin-bottom: -120px; transform: translateY(-120px);}
    .sec-system .con-system .text-yellow { font-size: 20px;}

    .sec-system .con-system .sys-left { margin-top: -40px; padding: 0 0 40px 0;}
    .sec-system .con-system .sys-right { margin: 0 -15px -30px; padding: 40px 15px;}
    .sec-system .con-system .sys-right:before,
    .sec-system .con-system .sys-right:after { display: none;}
    .sec-system .con-system .sys-left .detail:not(:last-child) { margin-bottom: 30px;}

    .sec-system .sys-steps,
    .sec-system .sys-apply { flex-direction: column; margin: -30px -15px !important;}

    .sec-system .sys-steps .items { padding: 40px 15px;}
    .sec-system .sys-apply { gap: 0;}
    .sec-system .sys-apply .apply-left, .sec-system .sys-apply .apply-right { padding: 40px 0;}

    .sec-service .ser-info { flex-direction: column-reverse; gap: 30px;}
    .sec-service .ser-info .ser-left img { margin: 0 auto; max-width: 80%;}
    .sec-service .ser-info ul.ser-metas { grid-template-columns: repeat(2, 1fr);}

    .sec-service .ser-process { flex-direction: row; gap: 30px;}
    .sec-service .ser-process .icons { flex-direction: column; padding: 10px; }
    .sec-service .ser-process .p-desc {
        margin-top: 0;
        grid-template-columns: unset;
        grid-template-rows: repeat(6, 1fr);
        grid-template-areas: 'd1''d1''d3''d4''d5''d6';
    }
    .sec-service .ser-process .circle label { width: 100px; height: 100px; font-size: 18px;}
    .sec-service .ser-process .p-desc .info .arrow { left: 0; top: 50%; transform: translate(-35px, -20px) rotate(-90deg);}
    .sec-service .ser-process .p-desc .info { display: flex; flex-direction: column; justify-content: center;}
    
    .sec-service .sec-chart .chart-left { margin-bottom: 20px; padding: 53px 4px 53px 0; width: 20px;}
    .sec-service .sec-chart .chart-left:after { left: 8px;}
    .sec-service .sec-chart .chart-left .bi { font-size: 16px;}
    .sec-service .sec-chart .items.top h3,
    .sec-service .sec-chart .items.top h4,
    .sec-service .sec-chart .items div:first-child h4,
    .sec-service .sec-chart .items div:nth-child(2) h5,
    .sec-service .sec-chart .chart-left label,
    .sec-service .sec-chart .items p b { font-size: 16px;}
    .sec-service .sec-chart .items p { font-size: 14px;}
    .sec-service .sec-chart .chart-right .items { gap: 3px;}
    .sec-service .sec-chart .chart-right .items:not(:last-child) { grid-template-columns: 25% 30% 45%;}
    .sec-service .sec-chart .chart-right .items:last-child { grid-template-columns: 25% 75%;}
    .sec-service .sec-chart .items h4.line:before { width: 10px;} 
    .sec-service .sec-chart .items div:first-child .bi { top: 40px; font-size: 20px;}
    .sec-service .sec-chart .items div { padding: 5px;}
    .sec-service .sec-chart .items div:first-child { padding: 5px 0 0;}
    .sec-service .sec-chart .items.top div:not(:first-child) { padding: 5px 5px 0;}

    .sec-service ul.ability-metas { flex-wrap: wrap; row-gap: 10px;}
    .sec-service ul.ability-metas li { flex: 0 0 calc(50% - 5px); font-size: 18px;}

    .sec-service .ability-flex { flex-direction: column;}
    .sec-service .metas-blue dd { padding: 0 15px 15px;}
    .sec-service dl.ability-metas { flex-direction: row;}
    .sec-service dl.ability-metas:first-child dd { padding-bottom: 40px;}
    .sec-service dl.ability-metas:last-child dd { padding-top: 30px;}
    .sec-service dl.ability-metas:last-child dd .info { display: flex; flex-direction: column-reverse; width: 100%;}
    .sec-service dl.ability-metas dt { flex-direction: column; width: 50px; height: auto;}
    .sec-service dl.ability-metas dt label { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 24px; font-size: 24px;}
    .sec-service dl.ability-metas dt:before {
        width: 50px;
        height: 15px;
        background: url(../../images/caret-t.svg) no-repeat center / cover;
    }
    .sec-service dl.ability-metas dt:after {
        width: 50px;
        height: 15px;
        background: url(../../images/caret-b.svg) no-repeat center / cover;
    }    
    .sec-service .ability-metas .info h3 { padding: 0 0 15px;}
    .sec-service dl.ability-metas:last-child dd .info h3 { padding: 15px 0 0;}
    .sec-service .ability-metas .desc { padding: 0;}
    .sec-service .ability-metas .desc.border { padding: 15px;}
    .sec-service .ability-metas .desc .desc-metas:before { left: 15px; right: 15px; top: -20px; bottom: -20px;}
    .sec-service .ability-metas .desc.border .line-arrow.pos-left,
    .sec-service .ability-metas .desc.border .line-arrow.pos-right { left: 50%;}
    .sec-service .ability-metas .desc.border .line-arrow.pos-right { top: unset; transform: translate(-50%, 18px) rotate(90deg);}
    .sec-service .ability-metas .desc.border .line-arrow.pos-left { top: 0; transform: translate(-50%, -28px) rotate(-90deg);}

    .sec-service .sec-flow .items .border,
    .sec-service .sec-flow .items.top .f-desc { font-size: 16px;}
    .sec-service .sec-flow .items .flow-info.bg-white { gap: 15px;}
    .sec-service .sec-flow .items .flow-info.bg-white .d-flex { flex-direction: column;}
    .sec-service .sec-flow .items .flow-info.bg-white .d-flex h4 { font-size: 18px;}    
    .sec-service .sec-content .metas p { font-size: 18px;}

    /* English - Section Content */
    .section-en .sec-title.hori { align-items: stretch;}
    .section-en .sec-content .metas { flex-wrap: wrap; }
    .section-en.sec-system .con-system .sys-left, .section-en.sec-system .con-system .sys-right { flex: 1; width: auto;}
    .section-en.sec-system .con-system .sys-info { padding: 0;}
    .section-en.sec-system .con-system .sys-right { margin: 0 -15px -30px;}
    .section-en.sec-service .sec-chart-img { display: block; margin-top: 20px;}
    .section-en.sec-service .sec-chart { display: none;}
    .section-en.sec-service dl.ability-metas dt label b { writing-mode: vertical-lr; transform: translateX(2px);}

    /* Japanese - Section Content */
    .section-jp .sec-content .metas { flex-wrap: wrap;}
    .section-jp.sec-service .sec-chart .items.top h4 { display: flex; justify-content: center; align-items: center; height: 100%;}
    .section-jp.sec-service .sec-chart .chart-left { padding: 83px 20px 83px 0;}
    .section-jp.sec-service .sec-chart .items.last div:nth-child(2) p { font-size: 16px;}
    .section-jp.sec-service .sec-slogan h3 { font-size: 24px;}
    .section-jp.sec-service dl.ability-metas dt label,
    .section-jp.sec-service .ability-metas .desc .desc-metas li h4 { font-size: 20px;}
    .section-jp.section-jp.sec-service .metas-green li,
    .section-jp.section-jp.sec-service .ser-process .circle label,
    .section-jp.sec-service .ability-metas .desc .desc-metas li p,
    .section-jp.sec-service .ability-metas .info h3,
    .section-jp.sec-service .ability-metas .desc.border p,
    .section-jp.sec-service .ser-info ul.ser-metas li { font-size: 16px;}
    .section-jp.sec-service .ser-info ul.ser-metas li { padding: 5px; text-align: left;}
    .section-jp.sec-service .ser-info .ser-right .sec-title small { display: block; margin: 0;}

}


/*---------------------------
          responsive
----------------------------*/

@media only screen and (min-width: 1200px)  {
.tab-box.left .nav-tabs, .tab-box.right .nav-tabs { padding-right: 38px; }
.original-logo::after { top:0; bottom:auto; right:-90px; }
.original-logo img { max-width: 250px;}
.navbar .navbar-nav > li a { font-size: 14px;}
.navbar-main:not(.navbar-middle) .navbar-nav:not(.lan-menu) > li > a { padding: 10px 15px;}
.navbar-mini::before { width: 55%}
.navbar-main {top: 85px;height: 45px; }
.scroll-css .navbar-main {top: 45px;}
.md-order { order: 1;}
.col-right { padding-left: 5rem;}
.scroll-css div.mega-menu-fullwidth .mega-dropdown .mega-menu:after { top:85px;}
div.mega-menu-fullwidth .mega-dropdown .mega-menu:after {top: 125px;}
.original-logo img { max-width: 220px;}
.original-logo::after {width: 80px; height: 24px;}
header .navbar {  min-height: 140px;}
}


@media only screen and (max-width: 992px)  { 
.md-show { display: block;}
.md-hide { display: none;}
.d-flex [class*="col-md"] { width: 100%;}
.form-padding { padding-top: 0;}
.fixed-top { height: 90px;}
header .navbar { min-height: 90px;}
.TONO-breadcrumb { font-size: 12px; margin: 10px 0!important;}
.col-md-12 { -ms-flex: 0 0 100% !important;  flex: 0 0 100% !important;   max-width: 100% !important;}
.scroll-css .navbar-main { position: fixed !important;}
.navbar .navbar-nav > li a { font-size: 15px;}
.original-logo { top:65px;}
.navbar-main .d-flex { display: block; flex: 1 1 100%;}
div.mega-menu-fullwidth .mega-dropdown .mega-menu:after { display: none;}
.navbar-main .navbar-nav > li > .dropdown-menu.mega-menu::before,
.navbar-main .navbar-nav > li > .dropdown-menu::before { display: none;}
.service-mega { flex-direction: column;}
.service-mega .col-md-3 { float: none; width: 100%; display: block;}
.nav .service-mega li:hover > ul {display: block;}

.original-logo { top:15px;}    
.original-logo.scroll-css{ top:45px; }
.original-logo img { width: 200px}
.navbar-default .navbar-collapse{ border: 0;  background: #FFFFFF;}
header.scroll-css .navbar {  min-height: 110px;}
.navbar-main .navbar-nav > li > .dropdown-menu.mega-menu { background: #1e3c58;  overflow: scroll;}
.navbar-main:not(.navbar-middle) .navbar-nav:not(.lan-menu) > li > a { padding: 15px;}
.navbar-main:not(.navbar-middle) .navbar-nav:not(.lan-menu) > li { border-bottom: 1px solid #dddddd;}
.navbar-main:not(.navbar-middle) .navbar-nav:not(.lan-menu) > li:last-child { border-bottom: 0;}
header .navbar {  min-height: 110px;}
.section-empty.slides-banner .tono-cover { width: 28%;}
.section-empty.slides-banner .tono-cover h1 {font-size: 30px; left: -50px; bottom: 11px;}
.footer-base .footer-info ul li:last-child {margin-top: 30px; }
.tono-accordion-list h4 i { display: inline-block;}
.catalog-list .list-group-item .panel{ display: block!important;  }
.tono-accordion-list.accordion-list .list-group-item > a:before {display: none;}
.product-tab .nav-pills > li > a { background: #EFEFEF; margin-bottom: 5px;}
.product-tab .nav-pills > li.active > a,
.product-tab .nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus { background: #1e3c58; color:#FFFFFF;}
.maso-list .navbar-inner .nav.inner li { flex: 0 0  49.99%!important;  max-width: 49.99%!important }
.navbar-main:not(.navbar-middle) .navbar-nav:not(.lan-menu) > li.dropdown a::after {display: none;}
.equipment-info { flex-direction: column;}
.equipment-info .col-md-6 { width: 100%;}
.equipment-info .col-md-6.anima{ text-align: center;}
.equipment-info .order{ order: 1;}
.foundry-row { flex-direction: column;}
.foundry-list { flex: 1 1 100%;}
}

@media only screen and (max-width: 767px)  { 
.sm-show { display: block;}
.sm-hide { display: none;}
.original-logo { top:50px;}
.section-empty.slides-banner .tono-cover h1 { font-size: 20px; bottom: 15px;}

.service-mega ul li h3 { font-size: 18px;}
.container.content, .section-empty > .content, .section-bg-image > .content, .section-bg-video > .content, .section-bg-animation > .content, .section-slider > .content, .section-two-blocks .content { padding-top: 30px; padding-bottom: 30px;}
.footer-base .footer-info ul li:nth-child(4) {margin-top: 15px;}
footer .content.container{ padding:  30px 15px;}
.footer-base .footer-info {text-align: left;  margin-top: 30px; display: flex; align-items: flex-start;}
.footer-base .footer-info img { flex: 0 0 100px; margin-right: 20px; max-width:100%;}
.footer-base .footer-info ul li:nth-child(4) br { display: none;}   
.catalog.R,.catalog.L { padding-left:15px; padding-right: 15px;}
.triangle::before {  width: 150px; height: 150px;}
.navbar-mini .container .row { justify-content: center;}
.navbar-mini::before { display: none;}   
.original-logo.scroll-css{ top:50px; }
.section-marquee ul.marquee { width: 75%;}
.cart-table tr th,.cart-table tr td {font-size: 12px;}
}

@media only screen and (max-width: 580px)  { 
table.table { font-size: 12px;}
.navbar-mini .input-group > .form-control { max-width: 120px;}
.navbar-mini .container.justify-end { justify-content: center;}
.navbar-mini::before ,
.navbar-mini .lan-menu li::after { display: none;}
.navbar-mini .lan-menu li {margin: 0; border-right:1px solid #666666;}
.navbar-mini .lan-menu li a {padding: 10px;}
.section-empty.slides-banner .tono-cover { display: none;}
.section-marquee ul.marquee { margin: 0; padding:10px 10px 10px 150px; width: 100%; height: 50px;}
.section-marquee ul.marquee::after { content: "WHAT'S NEWS" ; position:absolute; left: 0; top:0; font-size: 16px; color:#FFFFFF; background: #1e3c58; height: 50px;padding: 10px;}
.section-marquee ul.marquee li { padding: 10px 10px 10px 140px;}
.section-marquee ul.marquee li a span { margin-right: 10px;}

header .navbar,
header.scroll-css .navbar {  min-height: 100px;}
button.navbar-toggle { top: 35px; z-index: 9999;}
.original-logo { top:50px;}
.original-logo img { width: 150px}   
.navbar-mini span  { display: none;}
.navbar-mini i {font-size: 20px!important; }
.navbar-mini .lan-menu .dropdown.open .dropdown-menu, .navbar-mini .lan-menu ul.dropdown-menu { left:-20px;}
.maso-list .navbar-inner .nav.inner li { flex: 0 0 100%!important;  max-width: 100%!important }

.footer-base .footer-info .footer-social { justify-content: flex-start;}
}

.slides-banner-img img {
  animation-name: slidein;
  animation-duration: 6s;
  animation-iteration-count:infinite;
}

@keyframes slidein  {
    from {
     transform: scale(1.5);
    }

    to {
     transform: scale(1);
    }
  }