/* CSS Document */
@charset "utf-8";
*{margin:0; padding:0; font-family: 'Roboto', Arial, 微软雅黑, Microsoft YaHei; }
a { color: #000; text-decoration: none; }
a:hover { text-decoration: none; }
p { margin-bottom: 0; }
ul, ol { list-style-type: none; margin-bottom: 0; }
img { border: 0; max-width: 100%; object-fit: cover;}
.clear { clear: both; }
html { overflow-x: hidden; font-size: 62.5%;}
body { overflow: hidden; height:100%; position: relative; font-size: 1em; }
/* html.on { overflow: hidden; height: 100%; } */
.h60 { height: 60px; clear: both; }
.h120 { height: 120px; clear: both; background: #eee; }
input, buttom, textarea { -webkit-appearance: none; outline: none; }
input[type=radio], input[type=checkbox] { border: none !important; }
select { outline: none }
.fl { float: left; }
.fr { float: right; }
*:focus{ border:none; outline:none;box-shadow: none;}

@font-face {
    font-family: Quantico;
    src: url(../fonts/Quantico-Regular.ttf);
}
@font-face {
    font-family: Roboto;
    src: url(../fonts/Roboto-Regular.ttf);
}

.header{ height: 152px; background: #0c0c0c url(../images/header-home-new.png) repeat-x center top; position: relative; z-index: 999;}
.header-top{ background: url(../images/top-nav.png) repeat-x center top; border: 1px solid rgba(255, 255, 255, .08); display: flex; justify-content: space-between; height: 40px;}
.header-top .container{ display: flex; flex-wrap: wrap; justify-content: space-between;}
.header-top .container::before, .header-top .container::after{ display: none;}
/* .header-top .header-top-nav{ width: 342px;} */
.header-top .header-top-nav ul{ display: flex; flex-wrap: wrap;}
.header-top .header-top-nav ul li{ border-right: 1px solid rgba(255, 255, 255, .08); display: flex; flex-wrap: wrap; align-items: center; height: 40px; padding: 0 7px; }
.header-top .header-top-nav ul li a{ font-size: 1.2em; color: #fff; text-shadow: 0px 2px 1px rgb(0 0 0 / 15%); font-weight: 700; text-transform: uppercase; font-family: 'Quantico'; white-space: nowrap;    overflow: hidden;    text-overflow: ellipsis; }
.header-top .header-top-nav ul li:first-child{ border-left: 1px solid rgba(255, 255, 255, .08);}
.header-top .header-top-nav ul li.npm a:hover, .header-top .header-top-nav ul li.npm.on a{ color: #D40917;}
.header-top .header-top-nav ul li.nes a:hover, .header-top .header-top-nav ul li.nes.on a{ color: #F0691F;}
.header-top .header-top-nav ul li a:hover, .header-top .header-top-nav ul li.on a{ color: #F4CB2E;}
.header-top .header-top-search{ padding: 4px 5px 0;}
.header-top .header-top-search .box{ border: 1px solid #575757; border-radius: 2px; display: flex; flex-wrap: wrap; padding: 4px 10px 3px;}
.header-top .header-top-search .box input[type="submit"]{ width: 20px; height: 20px; background: url(../images/ico-search.svg) no-repeat center; background-size: cover; border: none;}
.header-top .header-top-search .box input[type="text"]{ width: 120px; border: none; background: transparent; font-size: 1.3em; color: #fff; padding-left: 10px; transition: all .5s ease;}
.header-top .header-top-search .box input[type="text"]::placeholder{ color: #fff;}
.header-top .header-top-search .box input[type="text"]::-moz-placeholder{ color: #fff;}
.header-top .header-top-search .box input[type="text"]::-webkit-input-placeholder{ color: #fff;}
.header-top .header-top-search.on .box input[type="text"]{ width: 160px;}

.header .language{ margin-left: 30px; padding-right: 40px; background: url(../images/language-icon.svg) no-repeat center right; background-size: 30px;}
.header .language a{ font-size: 1.5em; font-family: 'Quantico'; color: #fff;}
.header .language a:hover{ color: #F4CB2E; border-bottom: 1px solid #F4CB2E;}
.header.search-on .language{ display: none;}

.header-box{ padding-top: 37px;}
.header-box .container{ display: flex; flex-wrap: wrap; align-items: center;}
.header-box .container::before, .header-box .container::after{ display: none;}
.header-box .logo{ margin-left: 14px; flex: 1; display: flex; flex-wrap: wrap; align-items: center;}
.header-box .logo .img{ margin-right: 18px; width: 300px;}
.header-box .logo .text a, .header-box .logo .text span{ font-size: 2em; color: #fff; text-transform: uppercase; font-family: 'Quantico'; font-weight: 700; letter-spacing: 1px;}
.header-box .pc-tel{ font-weight: 700; color: #979797; font-size: 15px; font-family: 'Quantico'; }

.header .chat-mobile{ padding: 0; margin-right: 5px; text-align: center;}
.header .nav-btn { height: 75px; line-height: 75px; position:relative; z-index:999; float:right; padding:0;}
.header .nav-btn .nav-icon { width: 26px; height: 18px; overflow: hidden; position: relative; top: 50%; float: right; transform:translateY(-50%); z-index: 9; }
.header .nav-btn .nav-icon span { display: inline-block; width: 26px; height: 2px; background: #fff; border-radius: 6px; position: absolute; left: 0; transition: all 0.3s linear 0s;}
.header .nav-btn .nav-icon span:nth-child(1) { top: 0; }
.header .nav-btn .nav-icon span:nth-child(2) { top: 8px; }
.header .nav-btn .nav-icon span:nth-child(3) { top: 16px }
.header .nav-active .nav-icon span:nth-child(1){ top: 9px; transform: rotate(45deg);}
.header .nav-active .nav-icon span:nth-child(2) { display: none; }
.header .nav-active .nav-icon span:nth-child(3){ top: 8px; transform: rotate(-45deg);}
.header .nav-active .nav-icon span { background: #fff; }

.nav { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: transparent; transition: all 0.2s linear 0s; z-index:99; display: none;}
.nav.on { display: block; }
.nav .nav-top { background: transparent; font-size: 1.6em; color: #fff; padding: 0 20px; text-align:left; height: 75px; line-height: 75px;}
.nav ul{ overflow-x:hidden; height: 92vh; background: #000;}
.nav li{ width: 100%; border-bottom: 1px solid #4A4A4A; position: relative; display: flex; flex-direction: column;}
.nav li.mobile-search{ background: url(../images/ico-search.svg) no-repeat 30px center;  padding: 10px 15px; padding-left: 80px;}
.nav li.mobile-search .m-search{ display: none; width: 100%;}
.nav li.mobile-search .m-search input[type="text"]{ width: 80%; height: 60px; float: left; border: none; font-size: 2em; font-family: 'Quantico'; font-weight: 700; background: transparent; color: #fff;}
.nav li.mobile-search .m-search input[type="submit"]{ width: 20%; height: 60px; float: left; border: none; background: url(../images/arrow-right-white.svg) no-repeat center right transparent; text-indent: 99999px;}
.nav li.mobile-search span{ display: inline-block; line-height: 60px; width: 100%; font-size: 2em; color: #fff; font-family: 'Quantico'; font-weight: 700; text-transform: uppercase;}
.nav li.npm-nav > a, .nav li.nes-nav > a, .nav li.nxp-nav > a{ background: transparent url(../images/ico-plus.svg) no-repeat 30px center; width: 100%;}
.nav li.npm-nav.on > a, .nav li.nes-nav.on > a, .nav li.nxp-nav.on > a{ background: none;}

.nav li.about-nav > a{ background: transparent url(../images/ico-about.svg) no-repeat 30px center; width: 100%;}
.nav li.contact-nav > a{ background: transparent url(../images/ico-contact.svg) no-repeat 30px center; width: 100%;}

.nav li.npm-nav > a{ color: #D40917;}
.nav li.nes-nav > a{ color: #F0691F;}
.nav li.nxp-nav > a{ color: #F4CB2E;}
.nav li>a { display: inline-block; width: 100%; line-height: 60px; font-size: 2em; color: #fff; padding: 10px 15px; padding-left: 80px; font-family: 'Quantico'; font-weight: 700; text-transform: uppercase;}
.nav li .nav-box{ display: none; }
.nav li dl { margin-bottom: 30px; }
.nav li dd { position: relative;}
.nav li dd a, .nav li dt a { display: inline-block; width: 100%; line-height: 35px; padding-left: 80px; font-size: 1.75em; color: #D8D8D8; font-family: 'Quantico'; font-weight: 700; }
.nav li dt.npm-icon1 a{ background: url(../images/npm_category_icon_fabrics.png) no-repeat 30px center; background-size: 32px;}
.nav li dt.npm-icon2 a{ background: url(../images/npm_category_icon_coatings.png) no-repeat 30px center; background-size: 32px;}
.nav li dt.npm-icon3 a{ background: url(../images/npm_category_icon_tapes.png) no-repeat 30px center; background-size: 32px;}
.nav li dt.npm-icon4 a{ background: url(../images/npm_category_icon_other.png) no-repeat 30px center; background-size: 32px;}
.nav li dt.nxp-icon1 a{ background: url(../images/nxp_category_icon_gloves-mitts.png) no-repeat 30px center; background-size: 32px;}
.nav li dd.on > a{ color: #13418e;}
.nav-bg{ position: fixed; width: 100%; height: 100%; background: rgba(0,0,0,.35); left: 0; top: 75px; display:none;}
.nav-bg.on{ display:block;}

.header-nav{ position: absolute; width: 100%; bottom: 0; transform: translateY(50%);}
.header-nav .pc-nav{ height: 38px; width: 100%; background: url(../images/nav-bg.png) repeat-x left -42px;  position: relative;}
.header-nav .pc-nav ul{ display: flex; flex-wrap: wrap;}
.header-nav .pc-nav li{ width: 20%; height: 38px; background: url(../images/main-nav-line.png) no-repeat left top;}
.header-nav .pc-nav li:first-child{ background: none;}
.header-nav .pc-nav li > a{ display: block; height: 38px; font-size: 1.6em; line-height: 38px; color: #fff; text-shadow: 0 1px 3px #000; text-transform: uppercase; font-family: 'Quantico'; font-weight: 700; text-align: center; cursor: pointer;}
.header-nav .pc-nav li:hover > a, .header-nav .pc-nav li.on > a{background: url(../images/nav-bg.png) repeat-x left -90px; box-shadow: inset 0px 2px 5px rgb(0 0 0 / 45%);}
.header-nav .pc-nav li .nav-box{ position: absolute; top: 100%; left: 0; width: 100%; background: url(../images/mega-nav-pattern.png); display: none; z-index: 1;}
.header-nav .pc-nav li:hover .nav-box{ display: flex; flex-wrap: wrap;}
.header-nav .pc-nav li .nav-box .nav-img{ width: 81px; background: transparent url(../images/mega-nav-left.png) no-repeat left top; text-align: center;}
.header-nav .pc-nav li .nav-box .nav-img img{ margin-top: 15px;}
.header-nav .pc-nav li .nav-box .nav-list{ flex: 1; padding-right: 15px;}
.header-nav .pc-nav li .nav-box .nav-list dl{ display: flex; flex-wrap: wrap; margin-bottom: 0; padding-bottom: 25px;}
.header-nav .pc-nav li .nav-box .nav-list dd{ width: 25%; padding: 20px 0 0 20px; margin-bottom: 10px;}
.header-nav .pc-nav li .nav-box .nav-list dd .t{ color: #fff;  font-size: 1.6em; font-family: 'Quantico'; font-weight: bold;}
.header-nav .pc-nav li .nav-box .nav-list dd .p{ color: #d5d2d2; font-size: 1.2em; font-weight: bold; margin-top: 12px;}
.header-nav .pc-nav li .nav-box .nav-list dd:hover .t{ color: #D40917;}

.header-nav .pc-nav li .nav-box .nav-search{ padding: 20px 30px; width: 100%;}
.header-nav .pc-nav li .nav-box .nav-search .box{ border: 1px solid #696969; background: #434343; display: flex; flex-wrap: wrap; align-items: center; padding: 0 15px;}
.header-nav .pc-nav li .nav-box .nav-search .box .icon{ width: 25px; height: 25px; background: url(../images/icon.png) no-repeat left top; background-position: -199px -130px;}
.header-nav .pc-nav li .nav-box .nav-search .box input{ height: 55px; flex: 1; padding: 10px 15px; border: none; background: transparent; color: #fff; font-size: 2.5em; font-family: "Quantico"; font-weight: bold;}
.header-nav .pc-nav li .nav-box .nav-search .box input::placeholder{ color: #fff;}
.header-nav .pc-nav li .nav-box .nav-search .box input::-moz-placeholder{ color: #fff;}
.header-nav .pc-nav li .nav-box .nav-search .box button{ width: 50px; height: 55px; position: relative; border: none; background: transparent;}
.header-nav .pc-nav li .nav-box .nav-search .box button::before{ content: ""; position: absolute; width: 21px; height: 27px; background: url(../images/icon.png) no-repeat left top; background-position: -707px -0px; right: 0; top: 50%; transform: translateY(-50%);}
.header-nav .pc-nav li .nav-box .sep-title{ margin-top: 20px; padding: 0 45px; width: 100%; display: flex; flex-wrap: wrap; align-items: center;}
.header-nav .pc-nav li .nav-box .sep-title .title{ font-family: "Quantico"; font-size: 2.4em; color: #fff; font-weight: bold; letter-spacing: 1px; width: 290px;}
.header-nav .pc-nav li .nav-box .sep-title .title span{ font-size: 2.8rem; font-family: inherit; color: #d60003; margin-right: 10px;}
.header-nav .pc-nav li .nav-box .sep-title .line{ flex: 1; height: 20px; border-bottom: 1px solid #333333;}
.header-nav .pc-nav li .nav-box .mega-list{ margin-top: 18px; padding: 0 45px 5px;}
.header-nav .pc-nav li .nav-box .mega-list dl{ display: flex; flex-wrap: wrap;}
.header-nav .pc-nav li .nav-box .mega-list dd{ width: calc((100% - 40px) / 3); margin-left: 20px;}
.header-nav .pc-nav li .nav-box .mega-list dd:nth-child(3n-2){ margin-left: 0;}
.header-nav .pc-nav li .nav-box .mega-list dd a{ display: flex; flex-wrap: wrap;}
.header-nav .pc-nav li .nav-box .mega-list dd .icon{ width: 50px; height: 60px; margin-right: 10px;}
.header-nav .pc-nav li .nav-box .mega-list dd .text{ flex: 1;}
.header-nav .pc-nav li .nav-box .mega-list dd .text .t{ font-size: 1.6em; color: #fff; font-family: "Quantico"; font-weight: bold;}
.header-nav .pc-nav li .nav-box .mega-list dd .text .p{ margin-top: 12px; font-size: 1.2em; color: #d5d2d2; font-weight: bold;}
.header-nav .pc-nav li .nav-box .mega-list dd:hover .text .t{ color: #d60003;}

.header-nxp-nav .pc-nav{ background: url(../images/nav-bg.png) repeat-x left top;}
.header-nxp-nav .pc-nav li:hover > a, .header-nxp-nav .pc-nav li.on > a{ background: url(../images/nav-bg.png) repeat-x left -140px;}
.header-nxp-nav .pc-nav li .nav-box .nav-list dd:hover .t{ color: #F4CB2E;}

.header-nxp-nav .pc-nav li .nav-box .nav-search .box button::before{ background-position: -665px -0px;}
.header-nxp-nav .pc-nav li .nav-box .sep-title .title span{ color: #F4CB2E;}
.header-nxp-nav .pc-nav li .nav-box .mega-list dl{ margin-bottom: 0;}
.header-nxp-nav .pc-nav li .nav-box .mega-list dd{ width: calc((100% - 20px) / 2); margin-bottom: 20px;}
.header-nxp-nav .pc-nav li .nav-box .mega-list dd:nth-child(3n-2){ margin-left: 20px;}
.header-nxp-nav .pc-nav li .nav-box .mega-list dd:nth-child(2n-1){ margin-left: 0;}
.header-nxp-nav .pc-nav li .nav-box .mega-list dd:hover .text .t{ color: #F4CB2E;}

.header-page-nav .pc-nav{ background: url(../images/nav-bg.png) repeat-x left top;}
.header-page-nav .pc-nav li{ width: 33.3333%;}
.header-page-nav .pc-nav li:hover > a, .header-page-nav .pc-nav li.on > a{ background: url(../images/nav-bg.png) repeat-x left -140px;}
.header-page-nav .pc-nav li .nav-box .nav-list dd:hover .t{ color: #F4CB2E;}

.page-banner{ position: relative; z-index: 0; overflow: hidden;}
.page-banner .swiper-slide{ position: relative; height: 450px;}
.page-banner .swiper-slide > img{ position: absolute; z-index: 0; max-width: none; width: 100%; height: 100%; top: 0;}
.page-banner .swiper-slide a{ position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(20%,-50%); width: 540px; height: 300px;}
.page-banner .swiper-slide a.left{ transform: translate(-110%,-50%);}
.page-banner .swiper-pagination{ width: auto; left: 79%; bottom: 0; background: url(../images/search-form-bg.png) repeat center top; padding: 4px 2px; border-radius: 2px 2px 0 0;}
.page-banner .swiper-pagination .swiper-pagination-bullet{ width: 14px; height: 14px; border-radius: 2px; border: 1px solid #d2d2d2; background: #000;}
.page-banner .swiper-pagination .swiper-pagination-bullet-active{ background: #D40917;}
.nes-page-banner .swiper-pagination .swiper-pagination-bullet-active{ background: #F0691F;}
.nxp-page-banner .swiper-pagination .swiper-pagination-bullet-active{ background: #F4CB2E;}

.nes-page-banner-nav{ width: 330px; background: url(../images/search-form-bg.png) repeat center top; padding: 15px; position: absolute; top: 50%; transform: translateY(-50%); z-index: 9; height: 80%;}
.nes-page-banner-nav .list{ box-shadow: 0 1px 3px rgb(0 0 0 / 31%); background: #f26900 url(../images/nes-nav-back.png) repeat left top; border-radius: 2px; height: 100%; overflow-x: hidden;}
.nes-page-banner-nav .list::-webkit-scrollbar-track{background-color:#f26900}
.nes-page-banner-nav .list::-webkit-scrollbar{width:10px; height: 10px;}
.nes-page-banner-nav .list::-webkit-scrollbar-thumb{background-color:#ac4b00}
.nes-page-banner-nav .list ul{ width: 300px; background: transparent url(../images/nes-nav-gradient.png) repeat-x left bottom;}
.nes-page-banner-nav .list li{ border-top: 1px solid #ac4b00;}
.nes-page-banner-nav .list li:first-child{ border-top: none; box-shadow: inset 0 3px 3px rgb(255 255 255 / 35%); border-radius: 2px 2px 0px 0px;}
.nes-page-banner-nav .list li:last-child{ border-radius: 0 0 2px 2px;}
.nes-page-banner-nav .list li a{ display: block; padding: 10px 20px; font-size: 1.6em; color: #fff; font-family: 'Quantico'; font-weight: bold; text-transform: uppercase; text-shadow: 0 1px 3px #000;}
.nes-page-banner-nav .list li:hover a{ background: #333333 url(../images/nes-nav-over.png) repeat-x left top !important; box-shadow: inset 0px 2px 5px rgb(0 0 0 / 45%);}



.page-box{ background: #efefef url(../images/content-bg.png) repeat-x left top; padding: 54px 0 38px;}
.npm-box{ overflow: hidden;}
.npm-box h1{ font-size: 3.2em; margin: 0 0 18px; text-transform: uppercase; font-family: 'Quantico'; font-weight: 700;}
.npm-box .box{ display: flex; flex-wrap: wrap;}
.npm-box .box .left{ flex: 1; padding-right: 25px; font-size: 1.6em; line-height: 22px;}
.npm-box .box .right{ width: 298px;}

.nes-box{ overflow: hidden; padding: 0 15px;}
.nes-box h1{ font-size: 3.2em; margin: 0 0 18px; text-transform: uppercase; font-family: 'Quantico'; font-weight: 700;}
.nes-box .box{ display: flex; flex-wrap: wrap; margin: 0 -10px;}
.nes-box .box .text{ width: 50%; padding: 0 10px;}
.nes-box .box .text h2{ font-size: 1.8em; color: #999; margin: 0; padding-bottom: 8px; font-family: 'Quantico';}
.nes-box .box .text .p{ font-size: 1.6em; padding-bottom: 24px; line-height: 22px;}
.nes-box .box .text ul{ margin-bottom: 10px;}
.nes-box .box .text li{ position: relative; font-size: 1.6em; padding-left: 20px; margin-bottom: 5px;}
.nes-box .box .text li a{ color: inherit; border-bottom: 1px solid #d60003;}
.nes-box .box .text li::before{ content: ""; position: absolute; width: 5px; height: 5px; background: #212121; left: 0; top: 7px;}
.nes-box .box .text li a:hover{ border-bottom: 1px dotted #d60003;}

.nxp-box{ overflow: hidden;}
.nxp-box h1{ font-size: 3.2em; margin: 0 0 18px; text-transform: uppercase; font-family: 'Quantico'; font-weight: 700;}
.nxp-box .box{ display: flex; flex-direction: column;}
.nxp-box .box .text{ font-size: 1.6em; line-height: 22px; color: #212121;}

.pages-box{ overflow: hidden;}
.pages-box h1{ font-size: 3.2em; margin: 0 0 18px; text-transform: uppercase; font-family: 'Quantico'; font-weight: 700;}
.pages-box .box{ display: flex; flex-direction: column;}
.pages-box .box .text{ font-size: 1.6em; line-height: 22px; color: #212121;}

.npm-catalog{ margin-top: 40px; overflow: hidden;}
.npm-catalog .top{ background: #d60003; height: 57px; box-shadow: 0 1px 3px rgb(0 0 0 / 45%); margin-bottom: 15px; border-radius: 2px; padding: 0 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;}
.npm-catalog .top span{ font-size: 1.6em; color: #fff; font-family: 'Quantico'; font-weight: 700; text-shadow: 0 1px 3px rgb(0 0 0 / 58%);}
.npm-catalog .top a{ display: inline-block; width: 130px; height: 26px; line-height: 26px; text-align: center; box-shadow: 0 1px 3px rgb(0 0 0 / 29%); border: solid 1px #000; font-size: 1.2em; background: linear-gradient(to bottom, #303030 0%,#202020 100%); font-weight: bold; color: #fff; border-radius: 2px;}
.npm-catalog .top a:hover{ color: #d60003;}
.npm-catalog .list{ margin: 0 -10px;}
.npm-catalog .list li{ width: 33.3333%; padding: 20px 10px 0; float: left;}
.npm-catalog .list li .img{ width: 100%; overflow: hidden;}
.npm-catalog .list li .img img{ width: 100%; border-radius: 2px; box-shadow: 0 1px 3px rgb(0 0 0 / 45%); transition: all .5s ease;}
/* .npm-catalog .list li .img:hover img{ transform: scale(1.1);} */
.npm-catalog .list li h2{ font-size: 2em; color: #212121; text-transform: uppercase; font-weight: bold;}
/* .npm-catalog .list li h2:hover{ color: #d60003;} */
.npm-catalog .list li h2 a{ color: inherit;}
.npm-catalog .list li h2 span{ display: inline-block; padding-right: 20px; position: relative; font-family: 'Quantico';}
.npm-catalog .list li h2 span::before{ content: ""; position: absolute; right: 0; top: 56%; transform: translateY(-50%); width: 12px; height: 12px; background: url(../images/icon.png) no-repeat left top; background-position: -240px -71px;}
.npm-catalog .list li .p{ font-size: 1.6em; line-height: 22px; color: #212121;}
.npm-catalog .list li .p a{ border-bottom: 1px solid #d60003; color: #212121;}
.npm-catalog .list li .p a:hover{ border-bottom: 1px dotted #d60003;}

.nxp-catalog{ margin-top: 40px; overflow: hidden;}
.nxp-catalog .list li{ width: 33.3333%; padding: 20px 10px 0; float: left;}
.nxp-catalog .list li .img{ width: 100%; overflow: hidden;}
.nxp-catalog .list li .img img{ width: 100%; border-radius: 2px; box-shadow: 0 1px 3px rgb(0 0 0 / 45%); transition: all .5s ease;}
/* .nxp-catalog .list li .img:hover img{ transform: scale(1.1);} */
.nxp-catalog .list li h2{ font-size: 2em; color: #212121; text-transform: uppercase; font-weight: bold;}
.nxp-catalog .list li h2:hover{ color: #F4CB2E;}
.nxp-catalog .list li h2 a{ color: inherit;}
.nxp-catalog .list li h2 span{ display: inline-block; padding-right: 20px; position: relative; font-family: 'Quantico';}
.nxp-catalog .list li h2 span::before{ content: ""; position: absolute; right: 0; top: 56%; transform: translateY(-50%); width: 12px; height: 12px; background: url(../images/icon.png) no-repeat left top; background-position: -120px -19px;}

.footer{ background: url(../images/red-footer-bg-01.jpg) repeat-x left top; background-size: contain; height: 252px;}
.footer-bg{ background: url(../images/red-footer-bg-02.jpg) no-repeat center top; background-size: contain; height: 100%; padding: 53px 10px 0;}
.footer-bg .container{ display: flex; flex-wrap: wrap; justify-content: center;}
.footer-bg .foot-social{ width: 270px; padding-right: 30px;}
.footer-bg .foot-social .t{ font-size: 2.4em; font-family: 'Quantico'; color: #fff; font-weight: bold; text-transform: uppercase; letter-spacing: .8px;}
.footer-bg .foot-social .list{ margin-top: 10px;}
.footer-bg .foot-social .list ul{ display: flex; flex-wrap: wrap; background: #1e1e1e; border-radius: 2px; box-shadow: inset 0 0 5px rgb(0 0 0 / 26%), 0 0 0 1px #323131;}
.footer-bg .foot-social .list li{ width: 25%; border-left: 1px solid #323232; height: 65px; padding: 20px 14px 0; text-align: center;}
.footer-bg .foot-social .list li:first-child{ border-left: none;}
.footer-bg .foot-social .list li a{ display: inline-block; width: 31px; height: 27px; background: url(../images/icon.png) no-repeat;}
.footer-bg .foot-social .list li.tw a{ background-position: 2px -101px;}
.footer-bg .foot-social .list li.fb a{ background-position: -38px -101px;}
.footer-bg .foot-social .list li.yt a{ background-position: -78px -100px;}
.footer-bg .foot-social .list li.in a{ background-position: -117px -100px;}
.footer-bg .foot-social .list li.tw a:hover{ background-position: 2px -41px !important;}
.footer-bg .foot-social .list li.fb a:hover{ background-position: -38px -40px !important;}
.footer-bg .foot-social .list li.yt a:hover{ background-position: -78px -40px !important;}
.footer-bg .foot-social .list li.in a:hover{ background-position: -117px -40px !important;}
.footer-bg .footer-contact .t{ font-size: 2.4em; font-family: 'Quantico'; color: #fff; font-weight: bold; text-transform: uppercase; letter-spacing: .8px;}
.footer-bg .footer-contact .box{ margin-top: 10px; display: flex; flex-wrap: wrap;}
.footer-bg .footer-contact .box ul{ display: flex; flex-wrap: wrap; background: #1e1e1e; border-radius: 2px; box-shadow: inset 0 0 5px rgb(0 0 0 / 26%), 0 0 0 1px #323131;}
.footer-bg .footer-contact .box .contact-phone li{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; height: 65px; min-width: 60px; padding: 0 50px; border-left: 1px solid #323232; font-size: 1.4em; color: #909090; font-family: 'Quantico'; font-weight: bold; text-transform: uppercase; letter-spacing: .8px;}
.footer-bg .footer-contact .box .contact-phone li:first-child{ border-left: none;}
.footer-bg .footer-contact .box .contact-phone li span{ color: #fff; margin-left: 5px; max-width: 240px; }
.footer-bg .footer-contact .box .contact-phone li span.phone{ display: inline-block; background: url(../images/icon.png) no-repeat left top; background-position: -40px 0; width: 16px; height: 32px; margin-left: 0;}
.footer-bg .footer-contact .box .contact-form{ margin-left: 8px;}
.footer-bg .footer-contact .box .contact-form li{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; height: 65px; min-width: 60px; padding: 0 50px; font-size: 1.4em; font-family: 'Quantico'; font-weight: bold; text-transform: uppercase; letter-spacing: .8px;}
.footer-bg .footer-contact .box .contact-form li a{ display: flex; flex-wrap: wrap; align-items: center; color: #909090; font-family: 'Quantico';}
.footer-bg .footer-contact .box .contact-form li a:hover{ color: #fff;}
.footer-bg .footer-contact .box .contact-form li span{ display: inline-block; background: url(../images/icon.png) no-repeat left top; background-position: -160px -105px; width: 28px; height: 18px; margin-right: 10px;}
.footer-bg .footer-contact .box .sgs{ width: 65px; height: 65px; background: url(../images/sgs-logo.png) no-repeat left top; background-size: cover; margin-left: 30px;}
.footer-bg .footer-contact .box .sgs a{ display: block; width: 100%; height: 100%;}
.footer-bg .footer-contact .box .sgs:hover{ background: url(../images/sgs-logo.png) no-repeat left -70px; background-size: cover;}
.footer-bg .footer-copy{ display: flex; flex-wrap: wrap; width: 100%; align-items: center; justify-content: center; margin-top: 14px;}
.footer-bg .footer-copy p{ font-size: 1.2em; line-height: 40px; color: #a6a6a6; margin-right: 175px;}
.footer-bg .footer-copy ul{ display: flex; flex-wrap: wrap;}
.footer-bg .footer-copy ul li{ padding: 0 17px;}
.footer-bg .footer-copy ul li a{ font-size: 1.2em; font-weight: bold; color: #a6a6a6;}
.footer-bg .footer-copy ul li a:hover{ color: #fff;}

.nes-footer{ background: url(../images/orange-footer-bg-01.jpg) repeat-x left top; background-size: contain;}
.nes-footer .footer-bg{ background: url(../images/orange-footer-bg-02.jpg) no-repeat center top; background-size: contain;}
.nes-footer .footer-bg .foot-social .list li.tw a{ background-position: 2px -131px;}
.nes-footer .footer-bg .foot-social .list li.fb a{ background-position: -38px -131px;}
.nes-footer .footer-bg .foot-social .list li.yt a{ background-position: -78px -130px;}
.nes-footer .footer-bg .foot-social .list li.in a{ background-position: -117px -130px;}
.nes-footer .footer-bg .footer-contact .box .contact-form li span{ background-position: -160px -130px;}

.nxp-footer{ background: url(../images/yellow-footer-bg-01.jpg) repeat-x left top; background-size: contain;}
.nxp-footer .footer-bg{ background: url(../images/yellow-footer-bg-02.jpg) no-repeat center top; background-size: contain;}
.nxp-footer .footer-bg .foot-social .list li.tw a{ background-position: 2px -70px;}
.nxp-footer .footer-bg .foot-social .list li.fb a{ background-position: -38px -70px;}
.nxp-footer .footer-bg .foot-social .list li.yt a{ background-position: -78px -69px;}
.nxp-footer .footer-bg .foot-social .list li.in a{ background-position: -117px -69px;}
.nxp-footer .footer-bg .footer-contact .box .contact-form li span{ background-position: -160px -40px;}

.page-footer{ background: url(../images/yellow-footer-bg-01.jpg) repeat-x left top; background-size: contain;}
.page-footer .footer-bg{ background: url(../images/yellow-footer-bg-02.jpg) no-repeat center top; background-size: contain;}
.page-footer .footer-bg .foot-social .list li.tw a{ background-position: 2px -70px;}
.page-footer .footer-bg .foot-social .list li.fb a{ background-position: -38px -70px;}
.page-footer .footer-bg .foot-social .list li.yt a{ background-position: -78px -69px;}
.page-footer .footer-bg .foot-social .list li.in a{ background-position: -117px -69px;}
.page-footer .footer-bg .footer-contact .box .contact-form li span{ background-position: -160px -40px;}

.mbx{ overflow: hidden;}
.mbx ul{ display: flex; flex-wrap: wrap;}
.mbx li{ position: relative; margin-right: 8px;}
.mbx li a{ font-size: 1.6em; text-decoration: underline; color: #212121; font-family: 'Quantico'; font-weight: bold; text-transform: uppercase; position: relative; padding-right: 15px;}
.mbx li a:hover{ text-decoration: none;}
.mbx li a::before{ content: ""; width: 6px; height: 6px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: url(../images/icon.png) no-repeat left top; background-position: -80px -30px;}
.mbx li span{  font-size: 1.6em; color: #212121; font-family: 'Quantico'; font-weight: bold; text-transform: uppercase; position: relative; padding-right: 15px;}

.class-box{ margin-top: 22px;}
.product-page-title{ font-size: 3em; color: #141414; font-family: 'Quantico'; font-weight: bold; text-transform: uppercase;}
.product-page-text{ font-size: 1.6em; line-height: 22px; color: #212121; margin: 20px 0 22px;}
.product-page-text p{ margin-bottom: 22px;}
.product-page-text a{ border-bottom: 1px solid #d60003; color: #212121;}
.product-page-text a:hover{ border-bottom: 1px dotted #d60003;}
.product-page-text.nxp a{ border-bottom: 1px solid #F4CB2E; color: #212121;}
.product-page-text.nxp a:hover{ border-bottom: 1px dotted #F4CB2E;}
.product-page-text li{  margin-bottom: 5px; position: relative;}
.product-page-text li::before{ content: ""; position: absolute; width: 5px; height: 5px; background: #212121; left: -16px; top: 8px;}

.crosssell-bar{ height: 57px; padding: 15px 20px; margin-top: 20px; background: url(../images/nes-bar.png) no-repeat left 0; display: flex; align-items: center;}
.crosssell-bar:hover{ box-shadow: 0 0 6px rgb(242 105 0);}
.crosssell-bar a{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%;}
.crosssell-bar .t{ font-size: 1.6em; color: #fff; font-family: 'Quantico'; font-weight: bold; letter-spacing: 1px;}
.crosssell-bar .btns{ width: 115px; height: 28px; border-radius: 2px; background-color: #000; box-shadow: 0 1px 3px rgb(0 0 0 / 29%); border: 1px solid #000; font-weight: bold; font-size: 1.2em; line-height: 26px; color: #fff; background: linear-gradient(to bottom, #2d2d2d 0%,#1d1d1d 100%); text-align: center;}
.crosssell-bar .btns span{ padding-left: 25px; display: inline-block; position: relative;}
.crosssell-bar .btns span::before{ content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 18px; height: 14px; background: url(../images/icon.png) no-repeat left top; background-position: -320px -70px;}

.crosssell-bar.npm{ background-position: left -148px; margin-bottom: 10px;}
.crosssell-bar.npm:hover{ box-shadow: 0 0 6px rgb(214 0 3);}
.crosssell-bar.npm .btns span::before{ background-position: -320px -100px;}

.class-frame{ margin-top: 24px; display: flex; flex-wrap: wrap; background: url(../images/thermal-bg.png) left top;}
.class-info{ width: 140px; background: url(../images/thermal-left-bg.png) no-repeat center top; padding: 25px 13px 0;}
.class-info .icon{ text-align: center;}
.class-info .p{ font-size: 1.2em; color: #b4b3b3; text-align: center;}
.class-list{ flex: 1; padding-bottom: 20px; }
.class-list ul{ margin: 0 10px; display: flex; flex-wrap: wrap;}
.class-list li{ width: 33.3333%; padding: 20px 10px 0; border-bottom: 1px solid #141414;}
.class-list li .img{ width: 100%; overflow: hidden;}
.class-list li .img img{ width: 100%; border-radius: 2px; box-shadow: 0 1px 3px rgb(0 0 0 / 45%); transition: all .5s ease;}
/* .class-list li .img:hover img{ transform: scale(1.1);} */
.class-list li h2{ font-size: 1.7em; color: #fff; text-transform: uppercase; font-weight: bold;}
.class-list li h2 a{ color: inherit;}
.class-list li h2 span{ display: inline-block; padding-right: 20px; position: relative; font-family: 'Quantico';}
.class-list li h2 span::before{ content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; background: url(../images/icon.png) no-repeat left top; background-position: -240px -71px;}
.class-list li .p{ font-size: 1.3em; line-height: 18px; color: #d4d4d4; padding-bottom: 22px;     -webkit-line-clamp: 4;
    text-overflow: ellipsis;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical; max-height: 72px; }
/* .class-list li h2:hover{ color: #d60003;} */

.class-list.nxp li h2 span::before{ background-position: -120px -19px;}
/* .class-list.nxp li h2:hover{ color: #F4CB2E;} */




.class-content{ margin-top: 15px;}

.class-content-nav{ margin-top: 28px; height: 535px; overflow: hidden; position: relative; border-radius: 2px; box-shadow: 0 1px 3px rgb(0 0 0 / 45%);}
.class-content-nav .class-nav{ position: absolute; z-index: 1; left: 20px; top: 50%; transform: translateY(-50%); width: 30%; background: #fff; border-radius: 2px; box-shadow: 0 2px 5px rgb(0 0 0 / 40%), inset 0 5px 7px rgb(197 197 197 / 35%), inset 0 -25px 30px rgb(197 197 197 / 35%);}
.class-content-nav .class-nav li{ height: 40px; line-height: 40px; border-bottom: 1px solid #616163; overflow: hidden;}
.class-content-nav .class-nav li:last-child{ border-bottom: none;}
.class-content-nav .class-nav li a{ display: block; font-size: 1.5em; font-family: 'Quantico'; font-weight: bold; color: #777; text-transform: uppercase; position: relative; padding: 0 15px;}
.class-content-nav .class-nav li.on a::before{ content: ""; position: absolute; width: 4px; height: 100%; background: #d60003; left: 0; top: 0;}
.class-content-nav .class-nav li.on a{ color: #d60003 !important;}
.class-content-nav .class-nav li:hover a{ color: #212121;}
.class-content-nav img{ width: 100%; position: relative; z-index: 0;}

.class-content-nav.nxp .class-nav li.on a::before{ content: ""; position: absolute; width: 4px; height: 100%; background: #F4CB2E; left: 0; top: 0;}
.class-content-nav.nxp .class-nav li.on a{ color: #F4CB2E !important;}

.class-content-line{ width: 100%; height: 1px; background: #d60003; margin: 36px 0;}
.class-content-line.nxp{ width: 100%; height: 1px; background: #F4CB2E; margin: 36px 0;}

.product-page-content{ display: flex; flex-wrap: wrap;}
.product-info{ width: 300px;}
.product-info .call-action{ background: url(../images/call-bg-01.jpg) repeat-x left top; border-radius: 2px; box-shadow: 0 1px 3px rgb(0 0 0 / 45%); margin: 5px 0 15px; padding: 18px 17px 20px;}
.product-info .call-action .t{ font-size: 1.6em; text-shadow: 0 1px 3px rgb(0 0 0 / 58%); color: #fff; font-family: 'Quantico'; font-weight: bold; letter-spacing: .8px;}
.product-info .call-action .btns{ margin-top: 20px;}
.product-info .call-action .btns a{ display: inline-block; border: solid 1px #000; background: linear-gradient(to bottom, #303030 0%,#202020 100%); font-size: 1.2em; width: 130px; height: 26px; line-height: 24px; border-radius: 2px; font-weight: bold; text-align: center; color: #d60003;}
.product-info .call-action .btns a:hover{ box-shadow: 0 0 6px rgb(214 0 3 / 50%);}
.product-info.nxp .call-action{ background: url(../images/sidebar_K5703_300_212_s_c1.jpg) repeat-x left top;}
.product-info.nxp .call-action .btns a{ color: #F4CB2E;}

.product-info .contact-action{ background: #d60003; border-radius: 2px; box-shadow: 0 1px 3px rgb(0 0 0 / 45%); margin: 5px 0 15px; padding: 18px 17px 20px;}
.product-info .contact-action .t{ font-size: 1.6em; text-shadow: 0 1px 3px rgb(0 0 0 / 58%); color: #fff; font-family: 'Quantico'; font-weight: bold; letter-spacing: .8px;}
.product-info .contact-action .btns{ margin-top: 20px;}
.product-info .contact-action .btns a{ display: inline-block; border: solid 1px #000; background: linear-gradient(to bottom, #303030 0%,#202020 100%); font-size: 1.2em; width: 130px; height: 26px; line-height: 24px; border-radius: 2px; font-weight: bold; text-align: center; color: #d60003;}
.product-info .contact-action .btns a:hover{ box-shadow: 0 0 6px rgb(214 0 3 / 50%);}
.product-info.nxp .contact-action{ background: url(../images/call-bg-01.jpg) repeat-x left top; }
.product-info.nxp .contact-action .btns a{ color: #F4CB2E;}

.product-article{ flex: 1; padding-left: 20px;}
.product-article .title{ margin: 0; padding-bottom: 15px; font-size: 3.2em; color: #212121; font-family: 'Quantico'; font-weight: bold;}
.product-article .text{ font-size: 1.6em; line-height: 22px; color: #212121;}
.product-article .text p{ padding-bottom: 22px;}
.product-article .text p a{ border-bottom: 1px solid #d60003;}
.product-article .other{ margin-top: 22px; }
.product-article h2{ margin: 15px 0 7px; font-size: 2.4rem; font-weight: bold; font-family: 'Quantico'; color: #212121; letter-spacing: 1px;}
.product-article h3{ margin: 15px 0 7px; font-size: 2.4rem; font-weight: bold; font-family: 'Quantico'; color: #212121; letter-spacing: 1px;}
.product-article .other ul{ margin: 10px 0 10px 17px; padding-bottom: 10px;}
.product-article .other li{ font-size: 1.6em; margin-bottom: 5px; position: relative;}
.product-article .other li::before{ content: ""; position: absolute; width: 5px; height: 5px; background: #212121; left: -16px; top: 8px;}
.product-article .other li a{ color: inherit; border-bottom: 1px solid #d60003;}
.product-article .other li a:hover{ border-bottom: 1px dotted #d60003;}
.product-article .typical{ margin-top: 24px; padding: 33px 0 20px; background: url(../images/shadow-block.jpg) no-repeat left top;}
.product-article .typical .t{ margin: 5px 0 7px; font-size: 2.4em; font-weight: bold; font-family: 'Quantico'; color: #807f7f; letter-spacing: 1px;}
.product-article .typical .p{ font-size: 1.4em; color: #212121; font-style: italic; line-height: 22px;}
.product-article .typical .p a{ color: inherit; border-bottom: 1px solid #d60003;}
.product-article .typical .p a:hover{ border-bottom: 1px dotted #d60003;}

.product-article.nxp .text p a{ border-bottom: 1px solid #F4CB2E;}
.product-article.nxp .text p img{ float: right; width: 200px; margin-left: 20px;}
.product-article.nxp .other li a{ color: inherit; border-bottom: 1px solid #F4CB2E;}
.product-article.nxp .other li a:hover{ border-bottom: 1px dotted #F4CB2E;}

.product-other{ overflow: hidden; display: flex; flex-wrap: wrap; margin-top: 46px;}
.product-other .list{ width: 50%; padding: 0 10px;}
.product-other .list h3{ margin: 5px 0 7px; font-size: 2.4em; font-weight: bold; font-family: 'Quantico'; color: #212121; letter-spacing: 1px;}
.product-other .list .p{ font-size: 1.6em; margin-bottom: 22px; line-height: 22px;}
.product-other .list ul{ margin: 10px 0 10px 17px; padding-bottom: 10px;}
.product-other .list li{ font-size: 1.6em; margin-bottom: 5px; position: relative;}
.product-other .list li::before{ content: ""; position: absolute; width: 5px; height: 5px; background: #212121; left: -16px; top: 8px;}
.product-other .list li a{ color: inherit; border-bottom: 1px solid #d60003;}
.product-other .list li a:hover{ border-bottom: 1px dotted #d60003;}

.product-other.nxp .list li a{ color: inherit; border-bottom: 1px solid #F4CB2E;}
.product-other.nxp .list li a:hover{ border-bottom: 1px dotted #F4CB2E;}

.bottom-bar{ background-image: none; padding: 10px 0 46px;}

.product-con-tj{ padding-bottom: 24px; background: #e6e6e6 url(../images/nes-chunking-list-bg.jpg) repeat-x left top;}
.product-con-tj .tabs{ padding-top: 25px; display: flex; flex-wrap: wrap; justify-content: flex-end;}
.product-con-tj .tabs ul{ display: flex; flex-wrap: wrap;  width: 128px; height: 30px; border-radius: 2px; box-shadow: inset 0 0 5px rgb(0 0 0 / 24%); border: 1px solid #868686; padding: 2px; background: #adadad; position: relative;}
.product-con-tj .tabs li{ width: 50%; height: 100%; text-align: center; cursor: pointer; line-height: 24px; position: relative; z-index: 1; font-weight: bold;}
.product-con-tj .tabs ul::before{ content: ""; position: absolute; width: 61px; height: 24px; background: linear-gradient(to bottom, #ffffff 0%,#f0f0f0 5%,#f0f0f0 50%,#e4e4e4 68%,#f5f5f5 100%); border-radius: 2px; box-shadow: 0 1px 3px rgb(0 0 0 / 29%); top: 2px; left: 2px; transition: all .3s;}
.product-con-tj .tabs.active ul::before{ left: 63px;}
.product-con-tj .list{ overflow: hidden; margin-top: 15px;}
.product-con-tj .list li{ display: flex; flex-wrap: wrap; border: 1px solid #c2c2c2; border-radius: 2px; margin-bottom: 10px; background: #f0f0f0 url(../images/nxp-chunking-listing-bg.jpg) repeat-x left top;}
.product-con-tj .list li .frame{ padding: 14px 14px 0; flex: 1; display: flex; flex-wrap: wrap;}
.product-con-tj .list li .frame .img{ width: 80px; height: 80px; margin-right: 15px;}
.product-con-tj .list li .frame .text{ flex: 1;}
.product-con-tj .list li .frame .text .t{ font-size: 3.2em; font-weight: bold; font-family: "Quantico"; text-transform: uppercase; color: #212121; line-height: 1; padding: 0 8px;}
.product-con-tj .list li .frame .text .p{ margin-top: 14px;}
.product-con-tj .list li .frame .text .p dl{ display: flex; flex-wrap: wrap; margin-bottom: 0;}
.product-con-tj .list li .frame .text .p dd{ width: 50%; padding: 4px 8px; font-size: 1.2em; color: #212121;}
.product-con-tj .list li .frame .text .p dd:nth-child(2n){ border-left: 1px solid #dadada;}
.product-con-tj .list li .frame .text .p dd span{ font-weight: bold;}
.product-con-tj .list li .btns{ width: 140px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; background: linear-gradient(to bottom, #ebebeb 0%,#d7d7d7 100%); padding: 48px 0;}
.product-con-tj .list li .btns .a{ display: inline-block; width: 75px; height: 20px; margin: 5px auto; font-size: 1.2em; line-height: 20px; font-weight: bold; color: #212121; text-align: center; text-decoration: none; border-radius: 2px; border: 1px solid #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 29%); background: linear-gradient(to bottom, #ffffff 0%,#f0f0f0 5%,#f0f0f0 50%,#e4e4e4 68%,#f5f5f5 100%);}
.product-con-tj .list li .btns .a.btn-quote{ background: #d60003; border: 1px solid #AB0002; color: #fff;}
.product-con-tj .list li .btns .a:hover{ background: #d9d8d8 url(../images/but-05-bg.jpg) repeat-x left top;}
.product-con-tj .list li .btns .a.btn-quote:hover{ background: #AB0002; border: 1px solid #d60003;}

.product-con-tj.nxp .list li .btns a.btn-quote{ background: #f5cc00; border: 1px solid #C4A300; color: #333;}
.product-con-tj.nxp .list li .btns a.btn-quote:hover{ background: #C4A300; border: 1px solid #f5cc00;}

.us { display: none; }
.para-list dd:nth-child(n+7) { display: none; }

.nes-solutions{ margin-top: 26px; height: 158px; display: flex; flex-wrap: wrap;}
.nes-solutions .t{ width: 280px; height: 100%; display: flex; align-items: center; justify-content: center; background: url(../images/soltuion-slider-title.png) no-repeat left top; font-size: 3.2em; font-weight: bold; text-transform: uppercase; font-family: 'Quantico'; color: #fff;}
.nes-solutions .box{ flex: 1; background: url(../images/solution-slider-bg.png) repeat-x left top; width: 50%; display: flex; align-items: center;}
.nes-solutions .box .mySwiper{ padding: 0 65px;}
.nes-solutions .box .mySwiper .list{ overflow: hidden;}
.nes-solutions .box .swiper-slide{ width: 33.3333%;}
.nes-solutions .box .swiper-slide .img{ text-align: center;}
.nes-solutions .box .swiper-slide .p{ font-size: 1.6em; color: #fff; text-align: center; font-family: 'Quantico'; margin-top: 10px;}
.nes-solutions .box .swiper-button-next, .nes-solutions .box .swiper-button-prev{ width: 65px;}
.nes-solutions .box .swiper-button-next::after, .nes-solutions .box .swiper-button-prev::after{ display: none;}
.nes-solutions .box .swiper-button-next::before, .nes-solutions .box .swiper-button-prev::before{ content: ""; position: absolute; width: 25px; height: 30px; top: 50%; left: 50%; transform: translate(-50%,-50%); background: url(../images/icon.png) no-repeat;}
.nes-solutions .box .swiper-button-next{ right: 0;}
.nes-solutions .box .swiper-button-next::before{ background-position: -200px -70px;}
.nes-solutions .box .swiper-button-prev{ left: 0;}
.nes-solutions .box .swiper-button-prev::before{ background-position: -160px -70px;}


.case-content-top{ margin-top: 24px; display: flex; flex-wrap: wrap;}
.case-content-top .case-content-nav{ width: 300px;}
.case-content-top .case-content-nav .list{ box-shadow: 0 1px 3px rgb(0 0 0 / 31%); background: #f26900 url(../images/nes-nav-back.png) repeat left top; border-radius: 2px; width: 100%;}
.case-content-top .case-content-nav ul{ background: transparent url(../images/nes-nav-gradient.png) repeat-x left bottom;}
.case-content-top .case-content-nav li{ border-top: 1px solid #ac4b00;}
.case-content-top .case-content-nav li:first-child{ border-top: none; box-shadow: inset 0px 2px 5px rgb(255 255 255 / 35%);}
.case-content-top .case-content-nav li a{ padding: 10px 20px; text-shadow: 0 1px 3px #000; color: #fff; text-transform: uppercase; font-size: 1.6em; font-family: 'Quantico'; font-weight: bold; display: inline-block; width: 100%;}
.case-content-top .case-content-nav li.on a, .case-content-top .case-content-nav li:hover a{ color: #fff; background: #333333 url(../images/nes-nav-over.png) repeat-x left top; box-shadow: inset 0px 2px 5px rgb(0 0 0 / 45%);}
.case-content-top .case-content-nav li dl{ margin-bottom: 0;}
.case-content-top .case-content-nav li dd a{ font-size: 1.4rem; font-weight: normal; box-shadow: none !important; border-top: 1px solid #ac4b00;  text-transform: none;}
.case-content-top .case-content-nav li dd.on a{ color: #f26900; }
.case-content-top .case-content-nav li dd:hover a{ box-shadow: inset 0px 2px 5px rgb(0 0 0 / 45%) !important;}
.case-content-top .case-content-nav li dd.active a{ color: #f26900;}
.case-content-top .case-content-img{ flex: 1; padding-left: 20px;}
.case-content-top .case-content-img .img{ height: 350px; width: 100%; overflow: hidden; position: relative;}
.case-content-top .case-content-img .img img{ position: absolute; width: 100%; height: 100%;}
.case-content-top .case-content-img .line{ width: 100%; height: 1px; background: #f26900; margin: 36px 0;}

.case-content-frame{ display: flex; flex-wrap: wrap;}
.case-info{ width: 300px;}
.case-info .call-action{ background: url(../images/sidebar_ZBlock.jpg) repeat-x left top; border-radius: 2px; box-shadow: 0 1px 3px rgb(0 0 0 / 45%); margin: 5px 0 15px; padding: 18px 17px 20px;}
.case-info .call-action .t{ font-size: 1.6em; text-shadow: 0 1px 3px rgb(0 0 0 / 58%); color: #fff; font-family: 'Quantico'; font-weight: bold; letter-spacing: .8px;}
.case-info .call-action .btns{ margin-top: 20px;}
.case-info .call-action .btns a{ display: inline-block; border: solid 1px #000; background: linear-gradient(to bottom, #303030 0%,#202020 100%); font-size: 1.2em; width: 130px; height: 26px; line-height: 24px; border-radius: 2px; font-weight: bold; text-align: center; color: #f26900;}
.case-info .call-action .btns a:hover{ box-shadow: 0 0 6px rgb(214 0 3 / 50%);}

.case-info .contact-action{ background: url(../images/search-form-bg.png) repeat center top; border-radius: 2px; box-shadow: 0 1px 3px rgb(0 0 0 / 45%); margin: 5px 0 15px; padding: 18px 17px 20px;}
.case-info .contact-action .t{ font-size: 1.6em; text-shadow: 0 1px 3px rgb(0 0 0 / 58%); color: #fff; font-family: 'Quantico'; font-weight: bold; letter-spacing: .8px;}
.case-info .contact-action .btns{ margin-top: 20px;}
.case-info .contact-action .btns a{ display: inline-block; border: solid 1px #000; background: linear-gradient(to bottom, #303030 0%,#202020 100%); font-size: 1.2em; width: 130px; height: 26px; line-height: 24px; border-radius: 2px; font-weight: bold; text-align: center; color: #f26900;}
.case-info .contact-action .btns a:hover{ box-shadow: 0 0 6px rgb(214 0 3 / 50%);}

.case-article{ flex: 1; padding-left: 20px;}
.case-article .title{ margin: 0; padding-bottom: 15px; font-size: 3.2em; color: #212121; font-family: 'Quantico'; font-weight: bold;}
.case-article .text{ font-size: 1.6em; line-height: 22px; color: #212121;}
.case-article .text p{ padding-bottom: 22px;}
.case-article .text p a{ border-bottom: 1px solid #d60003;}
.case-article .other{ overflow: hidden;}
.case-article .other h3{ margin: 5px 0 7px; font-size: 2.4em; font-weight: bold; font-family: 'Quantico'; color: #212121; letter-spacing: 1px;}
.case-article .other ul{ margin: 10px 0 10px 17px; padding-bottom: 10px;}
.case-article .other li{ font-size: 1.6em; margin-bottom: 5px; position: relative;}
.case-article .other li::before{ content: ""; position: absolute; width: 5px; height: 5px; background: #212121; left: -16px; top: 8px;}
.case-article .other li a{ color: inherit; border-bottom: 1px solid #d60003;}
.case-article .other li a:hover{ border-bottom: 1px dotted #d60003;}

.case-other{ overflow: hidden; display: flex; flex-wrap: wrap; margin-top: 46px;}
.case-other .list{ width: 50%; padding: 0 10px;}
.case-other .list h3{ margin: 5px 0 7px; font-size: 2.4em; font-weight: bold; font-family: 'Quantico'; color: #212121; letter-spacing: 1px;}
.case-other .list ul{ margin: 10px 0 10px 17px; padding-bottom: 10px;}
.case-other .list li{ font-size: 1.6em; margin-bottom: 5px; position: relative;}
.case-other .list li::before{ content: ""; position: absolute; width: 5px; height: 5px; background: #212121; left: -16px; top: 8px;}
.case-other .list li a{ color: inherit; border-bottom: 1px solid #d60003;}
.case-other .list li a:hover{ border-bottom: 1px dotted #d60003;}

.product-list{ margin-top: 46px;}
.product-list .top{ font-size: 3.2em; color: #212121; text-transform: uppercase; font-family: 'Quantico'; font-weight: bold;}
.product-list .list{ margin-bottom: 24px;}
.product-list .list ul{ display: flex; flex-wrap: wrap; margin: 0 -10px;}
.product-list .list li{ width: 33.3333%; padding: 20px 10px 0; float: left;}
.product-list .list li .img{ width: 100%; overflow: hidden;}
.product-list .list li .img img{ width: 100%; border-radius: 2px; box-shadow: 0 1px 3px rgb(0 0 0 / 45%); transition: all .5s ease;}
/* .product-list .list li .img:hover img{ transform: scale(1.1);} */
.product-list .list li h2{ font-size: 1.7em; color: #212121; font-weight: bold;}
/* .product-list .list li h2:hover{ color: #d60003;} */
.product-list .list li h2 a{ color: inherit;}
.product-list .list li h2 span{ display: inline-block; padding-right: 20px; position: relative; font-family: 'Quantico';}
.product-list .list li h2 span::before{ content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; background: url(../images/icon.png) no-repeat left top; background-position: -60px -19px;}
.product-list .list li .p{ font-size: 1.6em; line-height: 22px; color: #212121;}

.about{ overflow: hidden;}
.about .frame{ overflow: hidden;}
.about h1{ font-size: 3em; color: #141414; margin-bottom: 18px; text-transform: uppercase; font-family: 'Quantico'; font-weight: bold;}
.about .p{ font-size: 1.6em; line-height: 22px; margin-bottom: 10px;}
.about h2{ font-size: 3.2em; color: #494848; margin-bottom: 10px; text-transform: uppercase; font-family: 'Quantico'; font-weight: bold;}
.about h2 img{ max-width: none; float: right; width: 500px; border: 10px solid #ffffff; border-radius: 2px; box-shadow: 0 1px 3px rgb(0 0 0 / 29%); margin-left: 30px;}
.about .p a{ font-size: 1.6rem; border-bottom: 1px solid #F4CB2E;}
.about .p a:hover{ border-bottom: 1px dotted #F4CB2E;}

.careers-box{ overflow: hidden;}
.careers-box h3{ font-size: 2.4rem; color: #807f7f; margin: 10px 0 12px; font-family: 'Quantico'; font-weight: bold;}
.careers-box .job{ overflow: hidden;}
.careers-box .job li{ display: flex; flex-wrap: wrap; background: url(../images/listing-bg-01.jpg) repeat-x left top; border: 1px solid #c2c2c2; margin-bottom: 3px; border-radius: 2px;}
.careers-box .job li h4{ display: flex; flex-wrap: wrap; justify-content: space-between; height: 70px; align-items: center; margin: 0; padding: 0 22px; border-right: 1px solid #c2c2c2; width: 70%;}
.careers-box .job li h4 a{ border-bottom: 1px solid #f5cc00; font-family: 'Quantico'; color: #0b0b0b;}
.careers-box .job li h4 a:hover{ border-bottom: 1px dotted #f5cc00;}
.careers-box .job li h4 i{ font-family: 'Quantico'; color: #0b0b0b;}
.careers-box .job li .p{ width: 18%; height: 70px; display: flex; flex-wrap: wrap; align-items: center; font-size: 1.4em; padding: 0 22px; border-right: 1px solid #c2c2c2;}
.careers-box .job li .p i{ margin-left: 5px;}
.careers-box .job li .btns{ width: 12%; background: #e1e1e1; box-shadow: inset 1px 0 5px rgb(0 0 0 / 20%); display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
.careers-box .job li .btns a{ display: inline-block; text-align: center; border-radius: 2px; box-shadow: 0 1px 3px rgb(0 0 0 / 29%); border: 1px solid #000; width: 96px; height: 26px; line-height: 26px; background: linear-gradient(to bottom, #303030 0%,#202020 100%); font-size: 1.2em; color: #fff;}
.careers-box .job li .btns span{ display: inline-block; padding-left: 16px; position: relative;}
.careers-box .job li .btns span::before{ content: ""; position: absolute; width: 13px; height: 9px; background: url(../images/icon.png) no-repeat left top; background-position: -400px -70px; left: 0; top: 50%; transform: translateY(-50%);}
.careers-box .job li .btns a:hover{ color: #f5cc00;}

.job-content{ font-size: 1.6em; line-height: 22px; color: #212121; margin: 30px 0 22px;}
.job-content h2{ margin: 10px 0 12px; font-size: 2.4rem; color: #807f7f; font-family: 'Quantico'; font-weight: bold;}
.job-content h3{ margin: 10px 0 12px; font-size: 2rem; color: #999; font-family: 'Quantico'; font-weight: bold;}
.job-content p{ margin-bottom: 22px;}
.job-content a{ border-bottom: 1px solid #F4CB2E; color: #212121;}
.job-content a:hover{ border-bottom: 1px dotted #F4CB2E;}
.job-content ul{ margin-bottom: 20px;}
.job-content li{ margin-bottom: 5px; position: relative; padding-left: 16px;}
.job-content li::before{ content: ""; position: absolute; width: 5px; height: 5px; background: #212121; left: 0; top: 8px;}

.news-list{ overflow: hidden;}
.news-list li{ margin-bottom: 30px;}
.news-list li .date{ margin: 10px 0; font-size: 3.2em; font-weight: bold; text-transform: uppercase; font-family: 'Quantico'; line-height: 1;}
.news-list li .t{ margin: 15px 0 12px;}
.news-list li .t a{ color: #212121; border-bottom: 1px solid #f5cc00; font-size: 2.4rem; font-weight: bold; font-family: 'Quantico';}
.news-list li .t a span{ display: inline-block; width: 12px; height: 12px; margin-left: 8px; background: url(../images/icon.png) no-repeat left top; background-position: -120px -19px;}
.news-list li .p{ font-size: 1.6em; margin-bottom: 10px; line-height: 22px; margin-top: 20px;}
.news-list li .t a:hover{ border-bottom: 1px dotted #f5cc00;}

.news-con{ font-size: 1.6rem; line-height: 22px; margin-top: 20px; margin-bottom: 40px;}
.news-con p{ margin-bottom: 10px;}
.news-con p a{ border-bottom: 1px solid #F4CB2E;}

.news-con-about{ padding: 30px 0; border-top: 1px solid #F4CB2E;}
.news-con-about .p{ font-size: 1.6em; line-height: 22px;}

.video-list{ overflow: hidden; margin-bottom: 30px;}
.video-list .list{ margin: 0 -10px;}
.video-list .list li{ width: 33.3333%; padding: 20px 10px 0; float: left;}
.video-list .list li .img{ width: 100%; overflow: hidden;}
.video-list .list li .img img{ width: 100%; border-radius: 2px; box-shadow: 0 1px 3px rgb(0 0 0 / 45%); transition: all .5s ease;}
/* .video-list .list li .img:hover img{ transform: scale(1.1);} */
.video-list .list li h2{ font-size: 2em; color: #212121; font-weight: bold;}
/* .video-list .list li h2:hover{ color: #d60003;} */
.video-list .list li h2 a{ color: inherit; border-bottom: 1px solid #F4CB2E;}
.video-list .list li h2 a:hover{ border-bottom: 1px dotted #F4CB2E;}
.video-list .list li h2 span{ display: inline-block; padding-right: 20px; position: relative; font-family: 'Quantico';}
.video-list .list li h2 span::before{ content: ""; position: absolute; right: 0; top: 56%; transform: translateY(-50%); width: 12px; height: 12px; background: url(../images/icon.png) no-repeat left top; background-position: -120px -19px;}
.video-list .list li .p{ font-size: 1.6em; line-height: 22px; color: #212121;}
.video-list .list li .p p{ margin-bottom: 10px;}

.contact-box{ display: flex; flex-wrap: wrap;}
.contact-box .contact{ flex: 1; padding: 0 20px 0 10px;}
.contact-box .contact h2{ margin: 0 0 18px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; font-size: 3rem;  color: #141414; text-transform: uppercase; font-weight: bold; font-family: 'Quantico';}
.contact-box .contact h2 span{ font-size: 1.4rem; color: #d60003; font-family: inherit;}
.contact-box .contact .text{ padding-top: 12px; font-size: 1.6em; line-height: 22px; font-weight: bold; color: #212121;}
.contact-box .contact .message{ display: flex; flex-direction: column; margin-top: 30px;}
.contact-box .contact .message .line{ width: 100%; height: 1px; background: #a3a3a3; margin: 10px 0 20px;}
.contact-box .contact .message li{ margin-bottom: 15px; position: relative;}
.contact-box .contact .message li label{ font-size: 1.4em; font-weight: bold; width: 100%;}
.contact-box .contact .message li label span{ color: #d60003; font-size: 1.2rem; font-weight: normal;}
.contact-box .contact .message li input{ height: 30px; padding: 0 10px; box-shadow: inset 0 0 2px rgb(0 0 0 / 33%); border: 1px solid #c3c3c3; width: 100%; font-size: 1.4em; color: #333;}
.contact-box .contact .message li select{ width: 100%; height: 30px; border: none; padding: 0 10px; font-size: 1.4em; color: #333; appearance: none; background: linear-gradient(to bottom, #ffffff 0%,#f0f0f0 5%,#f0f0f0 50%,#e4e4e4 82%,#f5f5f5 100%); box-shadow: 0 1px 3px rgb(0 0 0 / 29%);}
.contact-box .contact .message li select + i{ position: absolute; width: 30px; height: 30px; background: url(../images/select-arrow.png) right top no-repeat; right: 15px; bottom: 0; pointer-events: none; background-position: 0 2px;}
.contact-box .contact .message li textarea{ width: 100%; height: 140px; padding: 5px 10px; box-shadow: inset 0 0 2px rgb(0 0 0 / 33%); border: 1px solid #c3c3c3; font-size: 1.4em; color: #333;}
.contact-box .contact .message li .upload{ width: 300px; height: 42px; position: relative;}
.contact-box .contact .message li .upload input{ width: 100%; height: 100%; border: 1px solid #c3c3c3; border-radius: 2px; font-size: 1.4em; padding: 0 10px; box-shadow: inset 0 0 2px rgb(0 0 0 / 33%); position: relative; z-index: 0;}
.contact-box .contact .message li .upload button{ position: absolute; z-index: 1; width: 82px; height: 26px; border-radius: 2px; right: 5px; top: 50%; transform: translateY(-50%); background: linear-gradient(to bottom, #303030 0%,#202020 100%); font-size: 1.2em; color: #fff; font-weight: bold; text-align: center; border: none;}
.contact-box .contact .message li .upload button span{ padding-left: 16px; position: relative;}
.contact-box .contact .message li .upload button span::before{ content: ""; position: absolute; width: 11px; height: 14px; background: url(../images/icon.png) no-repeat left top; background-position: -600px -40px; left: 0; top: 50%; transform: translateY(-50%);}
.contact-box .contact .message li:last-child button{ width: 100%; height: 48px; background: linear-gradient(to bottom, #303030 0%,#202020 100%); border-radius: 2px;  box-shadow: 0 1px 3px rgb(0 0 0 / 29%); border: 1px solid #000; font-size: 1.8em; color: #fff; font-weight: bold;}
.contact-box .contact .message li:last-child button span{ padding-left: 36px; position: relative;}
.contact-box .contact .message li:last-child button span::before{ content: ""; position: absolute; width: 28px; height: 20px; background: url(../images/icon.png) no-repeat left top; background-position: -260px -100px; left: 0; top: 50%; transform: translateY(-50%);}


.contact-box .locations{ width: 300px; padding: 4px 0 0 27px; background: url(../images/shadow-03.png) no-repeat left top;}
.contact-box .locations h2{ margin: 10px 0 0; font-size: 3.2em; font-weight: bold; color: #494848; font-family: 'Quantico'; text-transform: uppercase;}
.contact-box .locations dl{ margin-top: 28px; margin-bottom: 0;}
.contact-box .locations dt{ margin-bottom: 10px;}
.contact-box .locations dt a{ font-size: 1.8em; color: #212121; font-weight: bold; font-family: 'Quantico'; border-bottom: 1px solid #F4CB2E;}
.contact-box .locations dd{ font-size: 1.4em; color: #212121;}


.search-box{ margin-top: 20px;}
.search-box .search-top{ width: 100%; box-shadow: inset 0 0 4px rgb(0 0 0 / 33%); border: 1px solid #c3c3c3; background: #fff; border-radius: 2px; height: 35px; display: flex; flex-wrap: wrap; overflow: hidden;}
.search-box .search-top button{ width: 45px; height: 100%; border: none; background: transparent; position: relative;}
.search-box .search-top button::before{ content: ""; position: absolute; background: url(../images/icon.png) no-repeat left top; background-position: -200px -105px; width: 21px; height: 24px; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.search-box .search-top input{ flex: 1; width: 100%; height: 100%; border: none; background: transparent; padding: 0 15px; font-size: 2.4em; font-weight: bold; color: #212121; font-family: 'Quantico'; text-transform: uppercase; letter-spacing: .8px;}
.search-box .search-top input::placeholder{ color: #212121;}
.search-box .search-top input::-moz-placeholder{ color: #212121;}
.search-box .search-top input::-webkit-input-placeholder{ color: #212121;}

.result-bar{ margin: 24px 0 37px; background: url(../images/result-bar-bg.jpg) repeat left top; border-radius: 2px; height: 42px; border: 1px solid #ababab; font-size: 1.6em; display: flex; padding: 0 15px; align-items: center; justify-content: space-between; position: relative;}
.result-bar select{ width: 130px; height: 30px; line-height: 30px; border: none; padding: 0 10px; font-size: 1.2rem; color: #212121; appearance: none; background: linear-gradient(to bottom, #ffffff 0%,#f0f0f0 5%,#f0f0f0 50%,#e4e4e4 82%,#f5f5f5 100%); box-shadow: 0 1px 3px rgb(0 0 0 / 29%); font-weight: bold;}
.result-bar select + span{ position: absolute; width: 30px; height: 30px; background: url(../images/select-arrow.png) top center no-repeat; pointer-events: none; right: 15px; top: 50%; transform: translateY(-50%); background-position: 0 2px;}

.product-search-box{ display: flex; flex-direction: column; margin-bottom: 30px;}
.product-search-box h2{ margin: 0 0 20px; font-size: 3.2em; color: #494949; font-weight: bold; font-family: 'Quantico'; text-transform: uppercase; width: 100%;}
.product-search-box .box{ background: #bfbfbf; padding: 0 30px 16px; border-radius: 2px; border: 1px solid #c2c2c2; margin-bottom: 4px;}  
.product-search-box .box .top{ position: relative; padding-right: 15%;}
.product-search-box .box .top .ripon{ position: absolute; top: 50%; transform: translateY(-50%); left: -58px;}
.product-search-box .box .top h3{ font-size: 1.8em; padding-top: 15px; margin: 0; font-weight: bold; font-family: 'Quantico'; color: #0b0b0b;}
.product-search-box .box .top p{ font-size: 1.4em; padding: 6px 0 10px; color: #212121;}
.product-search-box .box .top a{ position: absolute; display: inline-block; padding-right: 15px; font-size: 1.2em; color: #212121; font-weight: bold; right: 30px; top: 50%; transform: translateY(-50%);}
.product-search-box .box .top a::before{ content: ""; position: absolute; width: 10px; height: 10px; background: url(../images/icon.png) no-repeat left top; background-position: -240px -100px; top: 50%; transform: translateY(-50%); right: 0;}
.product-search-box .box .top a:hover{ border-bottom: 1px solid #f5cc00;}
.product-search-box .box .frame{ margin-top: 16px; background: #e6e6e6; padding: 16px;}
.product-search-box .box .frame h3{ margin: 16px 0 32px; text-transform: uppercase; font-size: 1.8em; font-weight: bold; color: #212121; font-family: 'Quantico';}
.product-search-box .box .frame li{ background: #f7f7f7; border-radius: 2px; border: 1px solid #c2c2c2; display: flex; flex-wrap: wrap; height: 42px; line-height: 40px; margin-bottom: 4px; display: none;}
.product-search-box .box .frame ul li:nth-child(-n+3){ display: block !important;}
.product-search-box .box .frame li h4{ width: 80%; padding: 0 30px; font-weight: bold; color: #212121; font-family: 'Quantico'; margin: 0; line-height: 40px; float: left; overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;}
.product-search-box .box .frame li .btns{ background: #dbdbdb; width: 20%; text-align: center; float: left;}
.product-search-box .box .frame li .btns a{ display: inline-block; border: 1px solid #AB0002; background: #d60003; font-size: 1.2em; color: #fff; width: 75px; height: 20px; line-height: 20px; border-radius: 2px; box-shadow: 0 1px 3px rgb(0 0 0 / 29%);}
.product-search-box .box .frame .show-more{ text-align: right; margin-top: 15px;}
.product-search-box .box .frame .show-more a{ display: inline-block; font-size: 1.4em; color: #212121; font-weight: bold; padding-right: 20px; position: relative;}
.product-search-box .box .frame .show-more a::before{ content: ""; width: 11px; height: 10px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: url(../images/icon.png) no-repeat left top; background-position: -280px -40px;}
.product-search-box .box .frame .show-more.on a strong{ display: none;}
.product-search-box .box .frame .show-more.on a::after{ content: "Show Less Results";}
.product-search-box .box .frame .show-more.on a::before{ background-position: -260px -40px;}

.product-search-box .box.orange .frame li .btns a{ border: 1px solid #F0691F; background: #f26900;}
.product-search-box .box.yellow .frame li .btns a{ border: 1px solid #F4CB2E; background: #f5cc00; color: #212121;}

.product-search-box .list{ overflow: hidden;}
.product-search-box .list li{ border-radius: 2px; border: 1px solid #c2c2c2; background: linear-gradient(to bottom, #ededed 0%,#d7d7d7 100%); height: 70px; width: 100%; display: flex; flex-wrap: wrap; align-items: center; padding-left: 30px; margin-bottom: 5px; overflow: hidden;}
.product-search-box .list li h4{ flex: 1; position: relative; margin: 0; padding: 10px 0 10px 35px; font-weight: bold; color: #212121; font-family: 'Quantico';}
.product-search-box .list li.pdf h4{ background: url(../images/doc-01.png) no-repeat center left; background-size: 24px;}
.product-search-box .list li a{ display: inline-block; width: 80px; height: 70px; line-height: 70px; border-left: 1px solid #a8a8a8; font-size: 1.2em; color: #212121; text-align: center;}
.product-search-box .list li a:hover{ border-bottom: 1px solid #f5cc00;}


.product-selection{ margin-top: 62px;}
.product-selection .top-title{ padding-top: 10px; display: flex; flex-wrap: wrap; justify-content: space-between;}
.product-selection .top-title h1{ font-size: 3em; color: #141414; font-family: "Quantico"; text-transform: uppercase; margin: 8px 0 16px; font-weight: bold;}
.product-selection .top-title .cart-div{ margin-top: 8px; height: 36px; display: flex; flex-wrap: wrap; align-items: center;}
.product-selection .top-title .cart-div p{ display: flex; flex-wrap: wrap; align-items: center;}
.product-selection .top-title .cart-div .cart-title{ font-size: 1.4em; font-weight: 600; color: #545454; margin-right: 10px;}
.product-selection .top-title .cart-div .cart-info{ border: 1px solid #bababa; border-radius: 2px; background: #EEEEEE; display: inline-block; padding: 0 17px; height: 36px; line-height: 36px; font-size: 1.4em; color: #545454;}
.product-selection .top-title .cart-div .cart{ margin-left: 15px; display: inline-block; background: linear-gradient(to bottom, #303030 0%,#202020 100%); font-size: 1.6em; font-weight: bold; text-align: center; box-shadow: 0 1px 3px rgb(0 0 0 / 29%); border: 1px solid #000; border-radius: 2px; height: 35px; line-height: 35px; width: 170px; color: #fff;}
.product-selection .top-title .cart-div .cart .icon{ padding-right: 22px; display: inline-block; height: 35px; line-height: 35px; transform: translateY(-1px); position: relative;}
.product-selection .top-title .cart-div .cart .icon::before{ content: ""; position: absolute; width: 15px; height: 18px; background: url(../images/icon.png) no-repeat left top;     background-position: -707px -31px; right: 0; top: 50%; transform: translateY(-50%);}
.product-selection .top-title .cart-div .cart:hover{ color: #d60003;}

.keyword-searched{ margin-bottom: 10px;}
.keyword-term{ font-size: 1.6em; height: 40px; display: flex; flex-wrap: wrap; align-items: center;}
.keyword-term a{ display: inline-block; height: 24px; line-height: 1.2; border-radius: 2px; box-shadow: inset 0 0 5px rgb(0 0 0 / 24%); border: 1px solid #868686; background: #adadad; padding: 4px 10px; margin-left: 10px; font-weight: bold; color: #212123; font-size: 1.4rem;}

.quote-frame{ display: flex; flex-wrap: wrap;}
.quote-nav-btn{ display: none;}
.category-filters{ width: 300px; margin-bottom: 22px; border-radius: 2px; background: url(../images/sub-nav-bg1.png) repeat left top;}
.nav_categories{ width: 300px;}
.nav_categories li > label{ border-bottom: 1px solid #1a1a1a; display: block; font-size: 1.6em; font-weight: bold; font-family: "Quantico"; text-transform: uppercase; color: #fff;     padding: 15px 16px 13px 15px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; cursor: pointer; margin-bottom: 0;}
.nav_categories li > label input[type="checkbox"]{ display: none;}
.nav_categories li > label span{ font-size: 1.2rem; color: #999; text-transform: none; font-weight: normal; display: none;}
.nav_categories li > label:hover{ color: #d60003;}
.nav_categories li dl{ margin-bottom: 0; padding: 0 9px;}
.nav_categories li > dl{ display: none; border-bottom: 1px solid #1a1a1a;}
.nav_categories li dd{ margin-top: 9px;}
.nav_categories li dd label{ display: flex; flex-wrap: wrap; color: #fff; margin-bottom: 0; font-size: 1.4em; font-weight: normal; cursor: pointer;}
.nav_categories li dd label input[type="checkbox"]{ display: none;}
.nav_categories li dd label span{ display: inline-block; width: 15px; height: 16px; margin-right: 5px; background: url(../images/icon.png) top left no-repeat; background-position: -460px -105px; margin: 1px 5px 0;}
.nav_categories li dd label span.checkbox-checked{ background-position: -440px -105px;}
.nav_categories li dd > ol{ padding: 9px 9px 9px 20px;}
.nav_categories li dd > ol > dd{ margin-top: 2px;}
.nav_categories li dd > ol > dd label{ color: #8B8B8B;}
.nav_categories li dd > ol > dd label span{ background: url(../images/icon.png) top left no-repeat; background-position: -460px -105px;}

.nav_categories li.open > label span{ display: block;}
.nav_categories li.open > label{ border-bottom: 1px solid #d60003;}
.nav_categories li dd > ol > dd label span.checkbox-checked{ background-position: -440px -129px;}

.refine-box{ padding-left: 20px;}
.refine-box h2{ font-size: 2.4em; font-family: "Quantico"; font-weight: bold; text-transform: uppercase; color: #212121; margin: 0;}

.tapes-list{ overflow: hidden;}
.tapes-list p{ font-size: 1.4em; margin-top: 15px; color: #404040; font-weight: bold;}
.tapes-list label{ display: flex; flex-wrap: wrap; align-items: center; font-size: 1.4em; color: #404040; font-weight: normal; margin-bottom: 0; margin-top: 10px; }
.tapes-list label input[type="checkbox"]{ display: none;}
.tapes-list label span{ margin: -4px 10px 0 0; display: inline-block; width: 14px; height: 14px; background: url(../images/icon.png) -580px 0 no-repeat;}
.tapes-list label input[type="checkbox"]:checked + span{ background-position: -580px -20px;}

.quote-right{ flex: 1; margin-left: 20px;}
.quote-list{ background: url(../images/quote-list-bg.png) repeat left top; border-radius: 2px; border: 1px solid #ababab; padding: 10px 7px 10px 10px;}
.quote-seclet{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; background: #bdbdbd; border-bottom: 1px solid #ababab; padding: 10px 7px 10px 10px; margin: -10px -7px 0 -10px;}
.quote-seclet .tabs{ display: flex; flex-wrap: wrap; width: 128px; height: 30px; border-radius: 2px; box-shadow: inset 0 0 5px rgb(0 0 0 / 24%); border: 1px solid #868686; padding: 2px; background: #adadad; position: relative;}
.quote-seclet .tabs li{ width: 50%; height: 100%; text-align: center; cursor: pointer; line-height: 24px; position: relative; z-index: 1; font-weight: bold;}
.quote-seclet .tabs::before{ content: ""; position: absolute; width: 61px; height: 24px; background: linear-gradient(to bottom, #ffffff 0%,#f0f0f0 5%,#f0f0f0 50%,#e4e4e4 68%,#f5f5f5 100%); border-radius: 2px; box-shadow: 0 1px 3px rgb(0 0 0 / 29%); top: 2px; left: 2px; transition: all .3s;}
.quote-seclet .tabs.active::before{ left: 63px;}
.quote-seclet .quote-other{ display: flex; flex-wrap: wrap; height: 28px;}
.quote-seclet .quote-other .sort{ position: relative;}
.quote-seclet .quote-other .sort select{ appearance: none; background: linear-gradient(to bottom, #ffffff 0%,#f0f0f0 5%,#f0f0f0 50%,#e4e4e4 82%,#f5f5f5 100%); box-shadow: 0 1px 3px rgb(0 0 0 / 29%); width: 160px; height: 28px; padding: 0 30px 0 15px; font-size: 1.4em; font-weight: bold; border-radius: 2px; border: none; position: relative; z-index: 0;}
.quote-seclet .quote-other .sort i{ position: absolute; width: 30px; height: 30px; background: url(../images/select-arrow.png) right top no-repeat; right: 0; bottom: 0; pointer-events: none; background-position: 0 2px;}
.quote-seclet .quote-other .view-all{ margin-left: 15px;}
.quote-seclet .quote-other .view-all button{ font-weight: bold; width: 72px; line-height: 28px; border-radius: 2px; text-align: center; box-shadow: 0 1px 3px rgb(0 0 0 / 29%); font-size: 1.2em; background: linear-gradient(to bottom, #ffffff 0%,#f0f0f0 5%,#f0f0f0 50%,#e4e4e4 82%,#f5f5f5 100%); border: none;}
.quote-seclet .quote-other .view-all button:hover{ background: url(../images/but-06-bg.png) repeat-x left top; }

.quote-content{ margin-top: 8px; display: flex; flex-wrap: wrap; justify-content: space-between;}
.quote-content .quote-bar{ overflow: hidden; padding-top: 5px;}
.quote-content .quote-bar a{ position: relative; width: 192px; height: 26px; font-size: 1.2em; font-weight: bold; line-height: 26px; text-align: center; color: #212121; border-radius: 2px; background: #efefef; border: 1px solid #868686; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
.quote-content .quote-bar a .icon{ width: 12px; height: 15px; background: url(../images/icon.png) no-repeat left top; background-position: -320px -130px; margin: -2px 5px 0 0;}
.quote-content .quote-pagin{ margin-top: 5px;}
.quote-content .quote-pagin .pagination{ margin: 0; display: flex; flex-wrap: wrap; align-items: center;}
.quote-content .quote-pagin .pagination li{ float: left; padding: 5px;}
.quote-content .quote-pagin .pagination li a{ display: inline-block; width: 12px; height: 12px; text-indent: -99999px; padding: 0; border: none; background: url(../images/icon.png) repeat left top;}
.quote-content .quote-pagin .pagination li.prev-all a{ background-position: -360px -105px;}
.quote-content .quote-pagin .pagination li.prev-page a{ background-position: -381px -105px;}
.quote-content .quote-pagin .pagination li.next-page a{ background-position: -400px -105px;}
.quote-content .quote-pagin .pagination li.next-all a{ background-position: -420px -105px;}
.quote-content .quote-pagin .pagination li.echo{ font-weight: bold; margin: 0 5px;}

.search-results{ overflow: hidden;}
.search-results li{ margin-top: 14px; border-radius: 2px; display: flex; flex-wrap: wrap; overflow: hidden;}
.search-results li .check-btn{ position: relative; z-index: 0; width: 25px; background: #d2d0d1;}
.search-results li .check-btn input{ display: none;}
.search-results li .check-btn label span{ width: 15px; height: 75px; background: url(../images/icon.png) no-repeat -480px 0; position: absolute; top: 10px; left: 55%; transform: translateX(-50%); cursor: pointer;}
.search-results li .check-btn label input[type="checkbox"]:checked + span{ background-position: -460px 0;}

.search-results li .quote-items-box{ flex: 1; min-height: 190px; background: #e4e2e3; box-shadow: 0 0 5px rgb(0 0 0 / 34%); position: relative; z-index: 1; padding: 15px 10px 0;}
.search-results li .quote-items-box .top{ display: flex; flex-wrap: wrap;}
.search-results li .quote-items-box .top .img{ width: 85px; height: 85px; margin-right: 15px; border-radius: 2px; overflow: hidden;}
.search-results li .quote-items-box .top .text{ flex: 1;}
.search-results li .quote-items-box .top .text .t{ margin: 0; font-size: 2.4em; color: #0b0b0b; font-family: "Quantico"; font-weight: bold; margin-bottom: 10px;}
.search-results li .quote-items-box .top .text .btns{ display: flex; flex-wrap: wrap;}
.search-results li .quote-items-box .top .text .btns button, .search-results li .quote-items-box .top .text .btns a{ display: inline-block; height: 20px; margin: 0 4px 0 0; padding: 0 10px; font-size: 1.2em; line-height: 20px; font-weight: bold; text-decoration: none; color: #212121; text-align: center; border-radius: 2px; background: linear-gradient(to bottom, #ffffff 0%,#f0f0f0 5%,#f0f0f0 50%,#e4e4e4 82%,#f5f5f5 100%); box-shadow: 0 1px 3px rgb(0 0 0 / 29%); border: 1px solid #fff;}
.search-results li .quote-items-box .top .text .btns button:hover, .search-results li .quote-items-box .top .text .btns a:hover{ background: url(../images/but-06-bg.png) repeat-x left top;}
.search-results li .quote-items-box .info{ margin-top: 15px;}
.search-results li .quote-items-box .info dl{ display: flex; flex-wrap: wrap;}
.search-results li .quote-items-box .info dd{ width: 50%; font-size: 1.4em; line-height: 22px; color: #4f4e4e;}
.search-results li .quote-items-box .info dd:nth-child(n+7){ display: none; }

.search-results li .quantity{ width: 128px; position: relative; z-index: 0; background: #d8d6d7;}
.search-results li .quantity .box{ position: absolute; top: 15px; left: 50%; transform: translateX(-50%); border-radius: 2px; background: #8b8b8b; box-shadow: inset 0 0 5px rgb(0 0 0 / 26%); width: 104px; text-align: center;}
.search-results li .quantity .box .t{ font-size: 1.2em; padding-top: 9px; color: #fff; font-weight: bold; text-align: center;}
.search-results li .quantity .box input{ font-size: 2.4em; font-weight: bold; font-family: "Quantico"; margin: 3px 0 0; width: 80px; height: 41px; line-height: 41px; text-align: center; color: #fff; border-radius: 2px; box-shadow: inset 0 0 5px rgb(0 0 0 / 34%); border: 1px solid #929292; background: #7d7d7d; border: 1px solid #929292;}
.search-results li .quantity .box .add-btn{ width: 78px; height: 26px; margin: 6px 0 13px; font-size: 1.2em; line-height: 26px; font-weight: bold; color: #fff; text-align: center; border-radius: 2px; box-shadow: 0 1px 3px rgb(0 0 0 / 29%); border: 1px solid #000; background: linear-gradient(to bottom, #303030 0%,#202020 100%);}
.search-results li .quantity .box .add-btn .icon{ display: inline-block; width: 12px; height: 12px; margin-right: 2px; margin-left: -7px; background: url(../images/icon.png) no-repeat left top; background-position: -439px 1px;}

div.zoomDiv{z-index:999;position:absolute;top:0px;left:0px;width:200px;height:200px;background:#ffffff;border:1px solid #CCCCCC;display:none;text-align:center;overflow:hidden;}
div.zoomDiv img{ max-width: none;}
div.zoomMask{position:absolute; cursor:move;z-index:1; width: 45px !important; height: 45px !important;     border: 1px solid #aaa; border-color: rgba(170,170,170,0.7); box-shadow: 0 0 5px rgb(0 0 0 / 30%);}


.iframe{ width: 100%; position: relative;}
.iframe-header{ position: fixed; left: 0; height: 124px; right: 0; top: 0; background: #2c2c2c; width: 100%;}
.iframe-header .other-top{ padding: 10px 20px 0; display: flex; flex-wrap: wrap;}
.iframe-header .other-top .print{ margin-right: 20px;}
.iframe-header .other-top .print a{ background: linear-gradient(to bottom, #303030 0%,#202020 100%); display: block; position: relative; width: 65px; height: 26px; cursor: pointer; font-size: 1.2em; font-weight: bold; line-height: 26px; text-decoration: none; text-align: center; color: #fff; margin-top: 4px; border-radius: 2px; box-shadow: 0 1px 3px rgb(0 0 0 / 29%); border: solid 1px #000; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
.iframe-header .other-top .print a .icon{ display: inline-block; width: 17px; height: 16px; margin-right: 5px; background: url(../images/icon.png) no-repeat left top; background-position: -600px -130px;}
.iframe-header .other-top .share{ margin-right: 20px;}
.iframe-header .other-top .share li{ background: linear-gradient(to bottom, #303030 0%,#202020 100%); position: relative; width: 102px; height: 26px; cursor: pointer; margin-top: 4px; border-radius: 2px; box-shadow: 0 1px 3px rgb(0 0 0 / 29%); border: solid 1px #000; display: flex; flex-wrap: wrap;}
.iframe-header .other-top .share li > a{ display: flex; flex-wrap: wrap; padding: 4px 11px 6px 8px; font-size: 12px; line-height: 17px; font-weight: bold; text-decoration: none; color: #fff; border-right: 1px solid #3f3f3f;}
.iframe-header .other-top .share li > a span{ display: block; margin-right: 5px; width: 15px; height: 15px; background: url(../images/icon.png) no-repeat left top; background-position: -320px -40px;}
.iframe-header .other-top .share li > span{ position: absolute; width: 11px; height: 10px; background: url(../images/icon.png) no-repeat left top; background-position: -280px -40px; top: 50%; transform: translateY(-50%); right: 9px;}
.iframe-header .other-top .share li:hover > span{ background: url(../images/select-arrow.png) no-repeat -11px -177px;}
.iframe-header .other-top .share li dl{ position: absolute; width: 100%; top: 105%; margin-bottom: 0; display: none;}
.iframe-header .other-top .share li dd{ background: #460707; border-bottom: 1px solid #350c05;}
.iframe-header .other-top .share li dd a{ padding-left: 8px; line-height: 26px; font-size: 1.2em; color: #fff; font-weight: bold; text-shadow: 0 1px 3px rgb(0 0 0 / 75%); display: flex; flex-wrap: wrap; align-items: center;}
.iframe-header .other-top .share li dd a span{ display: inline-block; width: 17px; height: 14px; background: url(../images/icon.png) no-repeat left top; margin-right: 5px;}
.iframe-header .other-top .share li dd a span.mail{ background-position: -633px -130px;}
.iframe-header .other-top .share li dd a span.tw{ background-position: -560px -81px;}
.iframe-header .other-top .share li dd a span.fb{ background-position: -560px -105px;}
.iframe-header .other-top .share li dd a span.ld{ background-position: -560px -130px;}

.iframe-header .other-top .share li dd:hover a{ color: #d60003;}
.iframe-header .other-top .share li.on{ border: 1px solid #ad0a0c; background: #d60003;}
.iframe-header .other-top .share li.on > a{ color: #232323; border-right: 1px solid #a4191b;}
.iframe-header .other-top .share li.on > a span{ background-position: -340px -40px;}
.iframe-header .other-top .share li.on > span{ background: url(../images/icon.png) no-repeat -468px -85px;}

.iframe-header .pop-header{ display: flex; flex-wrap: wrap; align-items: center; padding: 32px 20px 0;}
.iframe-header .pop-header img{ width: 140px;}
.iframe-header .pop-header h1{ margin: 0; margin-left: 30px; font-size: 2.4em; font-weight: bold; font-family: "Quantico"; color: #d60003; text-transform: uppercase; line-height: 24px;}
.iframe-header .pop-header h1 span{ color: #fff;}

.pop-table{ padding: 145px 40px 40px 40px;}
.pop-table .top{ display: flex; flex-wrap: wrap; margin-bottom: 20px;}
.pop-table .top .img{ width: 100px; height: 100px; margin: 10px 20px 0 0;}
.pop-table .top .text{ flex: 1;}
.pop-table .top .text .t{ font-size: 2.4em; font-family: "Quantico"; color: #212121; margin-bottom: 20px; font-weight: bold;}
.pop-table .top .text .p{ font-size: 1.4em; margin-bottom: 10px; color: #212121;}

.w50{ width: 50%; padding: 0 10px;}
.w25{ width: 25%; padding: 0 10px;}

.pop-table .list ul{ display: flex; flex-wrap: wrap;}
.pop-table .list li .t{ font-size: 1.8em; color: #d60003; font-weight: bold; padding: 10px 10px 10px 0; font-family: "Quantico"; border-bottom: 1px solid #d60003;}
.pop-table .list li .p{ overflow: hidden;}
.pop-table .list li .p dd{ display: flex; flex-wrap: wrap; background: #fff;}
.pop-table .list li .p dd:nth-child(2n-1){ background: #E6E7E8;}
.pop-table .list li .p dd .th{ padding: 10px; font-size: 1.3em; color: #212121; font-weight: bold;}
.pop-table .list li .p dd .td{ padding: 10px; font-size: 1.3em; color: #212121; text-align: center;}

.pop-table .list2{ margin-top: 20px;}
.pop-table .list2 li{ display: flex; flex-wrap: wrap; align-items: center;}
.pop-table .list2 li.title{ border-bottom: 1px solid #d60003;}
.pop-table .list2 li .t.w50{ font-size: 1.8em; color: #d60003; font-weight: bold; padding: 10px 10px 10px 0; font-family: "Quantico";}
.pop-table .list2 li .w25{ text-align: center;}
.pop-table .list2 li.title .w25{ color: #d60003; padding: 10px; font-size: 1.4em; font-weight: bold;}
.pop-table .list2 li:nth-child(2n){ background: #E6E7E8;}
.pop-table .list2 li .th{ padding: 10px; font-size: 1.3em; color: #212121; font-weight: bold;}
.pop-table .list2 li .td{ padding: 10px; font-size: 1.3em; color: #212121; text-align: center;}

.pop-table .list3{ margin-top: 20px;}
.pop-table .list3 dl{ margin-bottom: 0;  padding: 10px;}
.pop-table .list3 dt{ font-size: 1.8em; color: #d60003; font-weight: bold; padding-bottom: 10px; font-family: "Quantico"; border-bottom: 1px solid #d60003; margin-left: -10px; margin-bottom: 10px;}
.pop-table .list3 dd{ margin-bottom: 5px; font-size: 1.3em; color: #212121; position: relative; padding-left: 24px;}
.pop-table .list3 dd::before{ content: ""; position: absolute; width: 4px; height: 4px; background: #212121; border-radius: 100%; top: 6px; left: 10px;}

.pop-table .foot{ padding: 10px; border-top: 1px solid #212121; border-bottom: 1px solid #212121; text-align: center; font-size: 1.3em; color: #212121; margin-bottom: 10px; margin-top: 20px;}

.table-db{ overflow: hidden;}
.table-db tr.compare_element:first-child{ border-bottom: 1px solid #d60003;}
.table-db tr:nth-child(2n){ background: #E6E7E8;}
.table-db th, .table-db td{ padding: 10px; color: #212121; font-size: 1.3em; font-weight: bold; line-height: 30px;}
.table-db .compare_element{ text-align: center;}
.table-db .compare_element .centered{ width: 80px; height: 80px; margin-bottom: 15px;}
.table-db .compare_element .title{ overflow: hidden;}
.table-db .compare_element .title h2{ margin: 0; font-size: 1.8rem; color: #d60003; font-weight: bold; font-family: "Quantico"; margin-bottom: 10px;}
.table-db .compare_element .title .btn{     display: inline-block; width: auto; height: 19px; padding: 0 10px; font-size: 1.2rem; line-height: 19px; font-weight: bold; text-decoration: none; color: #212121; text-align: center; border-radius: 2px; background-color: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 29%); border: 1px solid #fff; background: linear-gradient(to bottom, #ffffff 0%,#f0f0f0 5%,#f0f0f0 50%,#e4e4e4 82%,#f5f5f5 100%);}
.table-db .compare_element td.compare_element{ padding-bottom: 20px;}

.quote-sidebar{ width: 300px;}
.quote-sidebar .box{ margin: 105px 0 0; padding: 0px; background: #DDDDDD; border: 2px solid #ffffff; border-radius: 2px; position: relative; box-shadow: 0 3px 3px rgb(0 0 0 / 26%);}
.quote-sidebar h2{ text-transform: uppercase; text-align: center; padding: 20px 15px; border-bottom: 2px solid #ffffff; font-size: 1.8em; font-family: "Quantico"; background: #272727; margin: 0; color: #d60003;}
.quote-sidebar .list{ overflow: hidden;}
.quote-sidebar .list li{ padding: 12px 10px; border-bottom: 2px solid #ffffff; display: flex; flex-wrap: wrap;}
.quote-sidebar .list li .img{ width: 40px; height: 40px; margin-right: 14px; border-radius: 2px; box-shadow: 0 1px 3px rgb(0 0 0 / 45%);}
.quote-sidebar .list li .text{ flex: 1; width: 80%;}
.quote-sidebar .list li .text .t{ font-size: 1.6em; font-weight: bold; color: #0b0b0b; font-family: "Quantico"; margin-bottom: 6px; line-height: 18px;}
.quote-sidebar .list li .text .other{ font-size: 1.3em; display: flex; flex-wrap: wrap; align-items: center;}
.quote-sidebar .list li .text .other .btns{ display: flex; flex-wrap: wrap; margin-left: 10px;}
.quote-sidebar .list li .text .other .btns input{ width: 30px; height: 19px; margin: 0px; padding: 0px; font-size: 1.4rem; font-weight: bold; font-family: "Quantico"; line-height: 14px; text-align: center; color: #fff; border-radius: 2px 0px 0px 2px; box-shadow: inset 0 0 2px rgb(0 0 0 / 34%); border: none; background: #7d7d7d;}
.quote-sidebar .list li .text .other .btns button{ height: 19px; margin: 0 4px 0 0; padding: 0 5px; font-size: 1.2rem; line-height: 17px; font-weight: bold; text-decoration: none; color: #212121; text-align: center; border-radius: 0px 2px 2px 0px; background: #efefef; box-shadow: 0 1px 3px rgb(0 0 0 / 29%); border: 1px solid #fff;}
.quote-sidebar .list li .text .other a{ display: flex; flex-wrap: wrap; align-items: center;  height: 19px; padding: 1px 10px 0px 10px; font-size: 1.2rem; line-height: 16px; font-weight: bold; text-decoration: none; color: #212121; text-align: center; border-radius: 2px; background: #efefef; box-shadow: 0 1px 3px rgb(0 0 0 / 29%); border: 1px solid #fff; width: 80px;}
.quote-sidebar .list li .text .other .btns button:hover, .quote-sidebar .list li .text .other a:hover{ background: #d9d8d8; }
.quote-sidebar .list li .text .other a .icon{ display: inline-block; width: 10px; height: 10px; background: url(../images/icon.png) no-repeat left top; background-position: -500px -70px; margin-right: 3px; margin-top: 0;}
.quote-sidebar .add-btn{ width: 100%; height: 93px; padding: 22px; background: #d60003;}
.quote-sidebar .add-btn a{ width: 100%; height: 46px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; background: linear-gradient(to bottom, #303030 0%,#202020 100%); font-weight: bold; color: #fff; border-radius: 2px; box-shadow: 0 1px 3px rgb(0 0 0 / 29%); border: 1px solid #000; font-size: 1.6rem;}
.quote-sidebar .add-btn a .icon{ display: inline-block; width: 12px; height: 12px; background: url(../images/icon.png) no-repeat left top; background-position: -439px 1px; margin-right: 5px; margin-top: -4px;}
.quote-sidebar .add-btn a:hover{ color: #d60003;}

.quote-sidebar.yellow h2{ color: #f5cc00;}
.quote-sidebar.yellow .add-btn{ background: #f5cc00;}
.quote-sidebar.yellow .add-btn a:hover{ color: #f5cc00;}
.quote-sidebar.yellow .add-btn a .icon{ background-position: -439px -23px;}



.poptrox-popup{ padding: 10px !important;}
.caption{ display: none !important;}

.article-content img { height: auto; }


@media (min-width: 1366px){
.container{ width: 1300px; padding: 0;}
    
}
@media (max-width:1365px) and (min-width: 1200px){
.footer-bg .footer-contact .box .contact-phone li{ padding: 0 38px;}
.footer-bg .footer-contact .box .contact-form li{ padding: 0 38px;}

.class-content-nav{ height: 468px;}

.nes-page-banner .swiper-slide a{ transform: translate(0%,-50%);}



}
@media (max-width:1199px) and (min-width:992px){
.page-banner .swiper-slide{ height: 390px;}
.page-banner .swiper-slide a{ transform: translate(-20%,-50%);}
.page-banner .swiper-slide a.left{ transform: translate(-80%,-50%);}

.footer{ height: auto; padding-bottom: 40px;}
.footer-bg .foot-social{ padding-right: 0;}
.footer-bg .footer-contact{ margin-top: 40px;}
.footer-bg .footer-contact .box .contact-phone li{ padding: 0 40px;}
.footer-bg .footer-contact .box .contact-form li{ padding: 0 40px;}
.footer-bg .footer-copy p{ margin-right: 30px;}

.class-content-nav img{ position: absolute; height: 100%;}

.careers-box .job li h4{ width: 65%;}
.careers-box .job li .p{ width: 20%;}
.careers-box .job li .btns{ width: 15%;}

}
@media (max-width:991px) and (min-width: 601px){
.header-nav .pc-nav li > a{ font-size: 1.2em;}

.page-banner .swiper-slide{ height: 300px;}
.page-banner .swiper-slide a{ transform: translate(-20%,-50%);}
.page-banner .swiper-slide a.left{ transform: translate(-80%,-50%);}
.nes-page-banner .swiper-slide a{ width: 330px; height: 170px; transform: translate(0%,-50%);}

.footer{ height: auto; padding-bottom: 40px;}
.footer-bg .foot-social{ padding-right: 0;}
.footer-bg .footer-contact{ margin-top: 40px;}
.footer-bg .footer-contact .box .contact-phone li{ padding: 0 20px;}
.footer-bg .footer-contact .box .contact-form li{ padding: 0 15px;}
.footer-bg .footer-copy p{ margin-right: 30px;}

.class-content-nav{ height: 500px;}
.class-content-nav .class-nav{ width: 40%;}
.class-content-nav img{ position: absolute; height: 100%;}
.product-article .title{ font-size: 2.6em;}
.product-article .typical .t{ font-size: 2em;}

.case-article .title{ font-size: 2.4em;}
.product-list .top{ font-size: 2.4em;}

.about h2 img{ width: 350px;}

.careers-box .job li h4{ width: 55%; font-size: 1.6em; padding: 5px 22px;}
.careers-box .job li h4 i{ display: inline-block; width: 100%; text-align: right; font-size: 1.4rem;}
.careers-box .job li .p{ width: 25%;}
.careers-box .job li .btns{ width: 20%;}

.news-list li .date{ font-size: 2.4em;}
.news-list li .t a{ font-size: 2rem;}

.video-list .list li{ width: 50%;}

.quote-frame{ overflow: hidden; position: relative;}
.quote-nav-btn{ display: block; padding: 5px 15px; font-size: 1.2em; font-weight: bold; cursor: pointer; border-radius: 2px; box-shadow: 0 1px 3px rgb(0 0 0 / 29%); background: linear-gradient(to bottom, #ffffff 0%,#f0f0f0 5%,#f0f0f0 50%,#e4e4e4 82%,#f5f5f5 100%); margin-bottom: 15px;}
.quote-nav-btn.on{ background: #d60003; color: #fff;}
.quote-left{ position: absolute; top: 42px; left: -300px; width: 300px; z-index: 1; transition: all .3s; background: #fff;}
.quote-frame.on .quote-left{ left: 0;}
.quote-right{ flex: none; margin-left: 0; width: 100%; position: relative; z-index: 0;}

.quote-sidebar{ width: 100%;}
.quote-sidebar .box{ margin-top: 15px;}

}
@media (max-width: 768px){
.header{ background: #212121; height: 75px; position: fixed; top: 0; width: 100%; }
.header-top, .header-box .pc-tel, .header-nav{ display: none;}
.header-box{ padding-top: 0;  }
.header-box .logo{ margin-left: 0; flex: 1; padding-right: 30px;}
.header-box .logo .text{ max-width: 120px;}
.header-box .logo .text a{ max-width: 120px; font-size: 1.3em;}

.header .language{ margin-left: 0; margin-right: 10px; padding-right: 6px;}
.header .language a{ display: inline-block; text-indent: -9999px; width: 20px;}

.page-banner{ margin-top: 75px;}
.page-banner .swiper-slide{ height: 39vw;}
.page-banner .swiper-slide a{ width: 48vw; height: 30vw; transform: translate(0%,-50%);}
.page-banner .swiper-slide a.left{ transform: translate(-100%,-50%);}
.page-banner .swiper-pagination{ left: 75vw;}
.nes-page-banner .nes-page-banner-nav{ display: none;}
.nes-page-banner-nav{ position: relative; top: 0; transform: translateY(0); width: 100%;}
.nes-page-banner-nav .list ul{ width: auto;}
.nes-page-banner-nav .list li a{ font-size: 1.4em;}

.page-box{ padding: 105px 0 30px;}

.mbx li a, .mbx li span{ font-size: 1.4em;}

.npm-box h1{ font-size: 2.4em;}
.npm-box .box .left{ padding-right: 0; font-size: 1.45em; width: 100%; flex: none;}
.npm-box .box .right{ margin: 30px auto 0;}

.nxp-box h1{ font-size: 2.4em;}

.npm-catalog .top{ height: auto; padding: 15px 20px;}
.npm-catalog .top span{ width: 65%; font-size: 1.4em;}
.npm-catalog .top a{ width: 100px;}
.npm-catalog .list li{ width: 100%;}

.nxp-catalog .list li{ width: 100%;}

.footer{ height: auto; padding-bottom: 30px;}
.footer-bg{  padding: 35px 10px 0;}
.footer-bg .foot-social{ padding-right: 0; width: 100%;}
.footer-bg .foot-social .t{ font-size: 1.8em;}
.footer-bg .footer-contact{ margin-top: 20px;}
.footer-bg .footer-contact .t{ font-size: 1.8em;}
.footer-bg .footer-contact .box ul{ width: 100%;}
.footer-bg .footer-contact .box .contact-phone li{ width: 100%; border-left: none;}
.footer-bg .footer-contact .box .contact-form{ margin-left: 0; width: 100%; margin-top: 15px; justify-content: center;}
.footer-bg .footer-contact .box .contact-form li{ padding: 0 15px;}
.footer-bg .footer-contact .box .sgs{ margin: 15px auto 0;}

.footer-bg .footer-copy p{ margin-right: 0;}
.footer-bg .footer-copy ul{ justify-content: center;}
.footer-bg .footer-copy ul li{ padding: 0 20px; margin-top: 10px;}

.class-box{ margin-top: 0;}
.product-page-title{ font-size: 2em;}
.product-page-text{ font-size: 1.4em;}

.crosssell-bar{ padding: 10px 20px;}
.crosssell-bar .t{ width: 48%; font-size: 1.2em; letter-spacing: 0;}

.class-frame{ background-position: top right;}
.class-info{ display: none;}
.class-list li{ width: 50%;}

.class-content{ margin-top: 0;}
.class-content-nav{ height: auto; box-shadow: none; display: flex; flex-direction: column; overflow: initial;}
.class-content-nav .class-nav{ width: 90%; position: relative; order: 2; margin-top: 20px; top: 0; transform: translateY(0);}
.class-content-nav .class-nav ul { display: none; }
.product-page-content { display: block; }
.class-content-nav img{ box-shadow: 0 1px 3px rgb(0 0 0 / 45%); order: 1;}
.class-content-line{ margin: 22px 0 18px;}
.product-info{ width: 100%;}
.product-article{ padding-left: 0; margin-top: 10px;}
.product-article .title{ font-size: 2em;}
.product-article .text{ font-size: 1.4em;}
.product-article .other h3{ font-size: 1.8em;}
.product-article .other li{ font-size: 1.4em;}
.product-article .typical{ margin-top: 15px; padding: 20px 0;}
.product-article .typical .t{ font-size: 1.8em;}

.class-content-line.nxp{ margin: 22px 0 18px;}
.product-article.nxp .text p img{ width: 120px;}
.product-other .list h3{ font-size: 1.8em;}
.product-other .list li{ font-size: 1.4em;}

.product-other .list{ width: 100%;}

.bottom-bar{ padding: 0 0 30px;}

.nes-box h1{ font-size: 2.4em;}
.nes-box .box .text{ width: 100%;}
.nes-box .box .text .p{ font-size: 1.4em;}
.nes-box .box .text li{ font-size: 1.4em;}

.nes-solutions{ height: 188px;}
.nes-solutions .t{ width: 100%; height: 40px; text-align: center; font-size: 1.8em; background-size: cover;}
.nes-solutions .box{ flex: none; width: 100%; height: 148px;}
.crosssell-bar.npm{ margin-bottom: 0;}

.case-content-top .case-content-nav{ width: 100%;}
.case-content-top .case-content-nav li a{ font-size: 1.4em;}
.case-content-top .case-content-nav li dd a{ font-size: 1.2rem;}
.case-content-top .case-content-img{ padding-left: 0; flex: none; width: 100%; margin-top: 20px;}
.case-content-top .case-content-img .img{ height: 230px;}
.case-content-top .case-content-img .line{ margin: 20px 0;}

.case-article .title{ font-size: 1.8em;}
.case-info{ width: 100%;}
.case-article{ padding-left: 0; margin-top: 0;}
.case-article .title{ font-size: 2em;}
.case-article .text{ font-size: 1.4em;}
.case-article .other h3{ font-size: 1.8em;}
.case-article .other li{ font-size: 1.4em;}

.case-other{ margin-top: 16px;}
.case-other .list{ width: 100%;}
.case-other .list h3{ font-size: 1.8em;}
.case-other .list li{ font-size: 1.4em;}

.product-list{ margin-top: 16px;}
.product-list .top{ font-size: 2em;}
.product-list .list li{ width: 100%;}

.about h1{ font-size: 2em; margin-top: 10px;}
.about h2{ font-size: 2em;}
.about h2 img{ width: 100%; margin: 15px 0;}
.about .p{ font-size: 1.4em;}

.careers-box h3{ font-size: 1.8em;}
.careers-box .job .list{ overflow-y: hidden; padding-bottom: 20px;}
.careers-box .job .list ul{ width: 710px;}
.careers-box .job li h4{ width: 55%; font-size: 1.6em; padding: 5px 22px;}
.careers-box .job li h4 i{ display: inline-block; width: 100%; text-align: right; font-size: 1.4rem;}
.careers-box .job li .p{ width: 25%;}
.careers-box .job li .btns{ width: 20%;}

.job-content{ font-size: 1.4em;}
.job-content h2{ font-size: 1.8rem;}
.job-content h3{ font-size: 1.6rem;}
.job-content li::before{ top: 6px;}

.news-list li{ margin-bottom: 20px;}
.news-list li .date{ font-size: 2em;}
.news-list li .t{ margin: 10px 0 8px;}
.news-list li .t a{ font-size: 1.8rem;}
.news-list li .p{ font-size: 1.4em;}

.news-con{ font-size: 1.4rem; margin-bottom: 25px;}
.news-con-about{ padding: 20px 0;}
.news-con-about .p{ font-size: 1.4em;}

.video-list .list li{ width: 100%;}

.contact-box .contact{ padding: 0; flex: none; width: 100%;}
.contact-box .contact h2{ font-size: 2.4em;}
.contact-box .locations{ width: 100%; padding-bottom: 30px;}
.contact-box .locations h2{ font-size: 2.4em; }

.search-box{ margin-top: 0;}
.search-box .search-top input{ font-size: 1.6em; padding: 0;}
.result-bar{ font-size: 1.4em;}

.product-search-box:last-child{ margin-bottom: 0;}
.product-search-box h2{ font-size: 2.4em;}
.product-search-box .box{ padding: 0 15px 16px; margin-left: 20px;}
.product-search-box .box .top{ padding-right: 25%; padding-left: 15px;}
.product-search-box .box .top a{ right: 15px;}
.product-search-box .box .top .ripon{ left: -43px;}
.product-search-box .box .frame{ margin-top: 5px;}
.product-search-box .box .frame h3{ margin: 5px 0 20px; font-size: 1.6em;}
.product-search-box .box .frame li h4{ padding: 0 15px; font-size: 1.4em; width: 76%;}
.product-search-box .box .frame li .btns{ width: 24%;}
.product-search-box .box .frame li .btns a{ width: 80%;}

.product-search-box .list li h4{ font-size: 1.4em;}

.product-selection{ margin-top: 0;}
.product-selection .top-title{ padding-top: 0;}
.product-selection .top-title h1{ font-size: 1.8em; margin: 0 0 10px;}
.product-selection .top-title .cart-div{ margin-top: 0;}
.product-selection .top-title .cart-div .cart{ font-size: 1.4em;}
.keyword-searched{ margin-top: 10px;}
.keyword-term{ font-size: 1.4em;}

.quote-frame{ overflow: hidden; position: relative;}
.quote-nav-btn{ display: block; padding: 5px 15px; font-size: 1.2em; font-weight: bold; cursor: pointer; border-radius: 2px; box-shadow: 0 1px 3px rgb(0 0 0 / 29%); background: linear-gradient(to bottom, #ffffff 0%,#f0f0f0 5%,#f0f0f0 50%,#e4e4e4 82%,#f5f5f5 100%); margin-bottom: 15px;}
.quote-nav-btn.on{ background: #d60003; color: #fff;}
.quote-left{ position: absolute; top: 42px; left: -300px; width: 300px; z-index: 1; transition: all .3s; background: #fff;}
.quote-frame.on .quote-left{ left: 0;}
.quote-right{ flex: none; margin-left: 0; width: 100%; position: relative; z-index: 0; overflow-y: hidden;}
.quote-list{ width: 514px;}
.search-results li .quote-items-box .top .text .t{ font-size: 1.8em;}
.search-results li .quote-items-box .info dd{ font-size: 1.3em;}

.quote-sidebar{ width: 100%;}
.quote-sidebar .box{ margin-top: 15px;}

.product-con-tj .list li .frame .text .t{ font-size: 1.8em;}
.product-con-tj .list li .frame .text .p{ margin-top: 5px; margin-bottom: 10px;}
.product-con-tj .list li .frame .text .p dd{ width: 100%; padding: 2px 8px;}
.product-con-tj .list li .frame .text .p dd:nth-child(2n){ border-left: none;}
.product-con-tj .list li .btns{ width: 110px; padding: 65px 0;}

}
@media (max-width: 500px){
.header-box .logo .img{ flex: 1; width: auto;}

}