@charset "UTF-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline }
html { line-height: 1 }
ol, ul { list-style: none }
table { border-collapse: collapse; border-spacing: 0 }
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle }
q, blockquote { quotes: none }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none }
a img { border: 0 }
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block }
@font-face { font-family: 'Open Sans'; font-weight: 300; font-style: normal; src: url("http://www.starpointcomm.com/css/fonts/Open-Sans-300/Open-Sans-300.eot"); src: url("http://www.starpointcomm.com/css/fonts/Open-Sans-300/Open-Sans-300.eot?#iefix") format("embedded-opentype"), local("Open Sans Light"), local("Open-Sans-300"), url("http://www.starpointcomm.com/css/fonts/Open-Sans-300/Open-Sans-300.woff2") format("woff2"), url("http://www.starpointcomm.com/css/fonts/Open-Sans-300/Open-Sans-300.woff") format("woff"), url("http://www.starpointcomm.com/css/fonts/Open-Sans-300/Open-Sans-300.ttf") format("truetype"), url("http://www.starpointcomm.com/css/fonts/Open-Sans-300/Open-Sans-300.svg#OpenSans") format("svg") }
@font-face { font-family: 'Open Sans'; font-weight: 400; font-style: normal; src: url("http://www.starpointcomm.com/css/fonts/Open-Sans-regular/Open-Sans-regular.eot"); src: url("http://www.starpointcomm.com/css/fonts/Open-Sans-regular/Open-Sans-regular.eot?#iefix") format("embedded-opentype"), local("Open Sans"), local("Open-Sans-regular"), url("http://www.starpointcomm.com/css/fonts/Open-Sans-regular/Open-Sans-regular.woff2") format("woff2"), url("http://www.starpointcomm.com/css/fonts/Open-Sans-regular/Open-Sans-regular.woff") format("woff"), url("http://www.starpointcomm.com/css/fonts/Open-Sans-regular/Open-Sans-regular.ttf") format("truetype"), url("http://www.starpointcomm.com/css/fonts/Open-Sans-regular/Open-Sans-regular.svg#OpenSans") format("svg") }
@font-face { font-family: 'Open Sans'; font-weight: 600; font-style: normal; src: url("http://www.starpointcomm.com/css/fonts/Open-Sans-600/Open-Sans-600.eot"); src: url("http://www.starpointcomm.com/css/fonts/Open-Sans-600/Open-Sans-600.eot?#iefix") format("embedded-opentype"), local("Open Sans Semibold"), local("Open-Sans-600"), url("http://www.starpointcomm.com/css/fonts/Open-Sans-600/Open-Sans-600.woff2") format("woff2"), url("http://www.starpointcomm.com/css/fonts/Open-Sans-600/Open-Sans-600.woff") format("woff"), url("http://www.starpointcomm.com/css/fonts/Open-Sans-600/Open-Sans-600.ttf") format("truetype"), url("http://www.starpointcomm.com/css/fonts/Open-Sans-600/Open-Sans-600.svg#OpenSans") format("svg") }
#nav>ul>li ul>li>a strong:before, #nav>ul>li ul .title:before, #nav>ul>li ul .link-title:before, #nav .hassub:after, #nav .hassub .plus-link:after, .btn-search:before, .footer-contact .contact-way a.icon-email, .footer-contact .contact-way a.icon-form, .footer-contact .contact-way a.icon-apacer, .breadcrumb span:after, .form input[type="radio"]+label:before, .form input[type="checkbox"]+label:before, .slick-prev, .slick-next, .filter-btn:after, .view-mode .view-block, .view-mode .view-list, .goback:before, .gotop:before, .content-pro-ov .btn-add:before, .header-megasearch .mglogo:before, .header-megasearch li span, .no-result:before, .edit .spec.download li a:before, .compare-wrap a.back:before, .compare-wrap a.pdf:before, .compare-wrap a.xls:before, .privacy-policy .icon-close, .type-ii .download a:before, .linkto:after { background-image: url("http://www.starpointcomm.com/img/layout/iconset.svg"); background-repeat: no-repeat; font-size: 0; content: "" }
#nav * { box-sizing: border-box }
#nav>ul>li ul>li>a strong:before { content: "" }
#js-rwd { display: block; width: 0; height: 0; background: transparent; visibility: hidden }
.lang-mobile { box-sizing: border-box; padding: 8%; padding-bottom: 45px }
.lang-mobile span { padding: 0; width: 100% }
.lang-mobile a { font-size: .8125rem; border: 1px solid #666; border-radius: 2px; margin-right: 10px; padding: 5px }

@media(min-width:0) and (max-width:1290px) {
body { height: 100%; width: 100%; overflow-x: hidden }
#nav-toggle { display: block; overflow: hidden; position: absolute; cursor: pointer; box-sizing: border-box; width: 60px; height: 45px; padding: 0; left: 0; top: 0; z-index: 888; -moz-transition: -moz-transform .3s; -o-transition: -o-transform .3s; -webkit-transition: -webkit-transform .3s; transition: transform .3s }
#nav-toggle span, #nav-toggle:before, #nav-toggle:after { height: 2px; width: 22px; top: 47%; left: 50%; margin-left: -11px; background: white; position: absolute; display: block; content: ''; text-indent: -9999px; background-color: #0b8974; transition: all 300ms ease-in-out }
#nav-toggle:before { margin-top: -6px }
#nav-toggle:after { margin-top: 6px }
#nav-toggle.show span { opacity: 0 }
#nav-toggle.show:before { margin-top: 0; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg) }
#nav-toggle.show:after { margin-top: 0; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg) }
html.show, body.show { overflow: hidden; height: 100vh; width: 100%; position: fixed; -webkit-overflow-scrolling: auto; -webkit-transform: translateZ(0) }
#page { transition: transform .3s ease-out; overflow: hidden }
#page.show { -webkit-transform: translateX(280px); transform: translateX(280px); width: 100vw; height: 100vh; margin: 0; padding: 0 }
#nav .wrap { width: 100% }
.dskshow { display: none }
#nav { position: fixed; left: -280px; top: 0; margin: 0; width: 280px; height: 100vh; -webkit-overflow-scrolling: touch; background-color: #ddd; z-index: 990; overflow-y: auto; font-family: "Open Sans", "PingFangSC-Regular", "Microsoft YaHei", sans-serif; -moz-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition: transform .3s ease-out; transition: transform .3s ease-out }
#nav.show { -webkit-transform: translateX(280px); transform: translateX(280px) }
#nav>ul { padding-bottom: 0 }
#nav>ul>li { width: 100%; margin: 0; float: left; text-align: left; line-height: 45px; border-bottom: 1px solid #eee }
#nav>ul>li:last-of-type { margin-bottom: 3rem }
#nav>ul>li>a, #nav>ul>li>span { font-family: "Open Sans", "PingFangSC-Regular", "Microsoft YaHei", sans-serif; font-weight: 400; display: block; color: #333; font-weight: normal; width: 92%; padding-left: 8%; line-height: 45px; height: 45px; margin-bottom: 0 }
#nav>ul>li.lang-mobile a { color: #666 }
#nav>ul>li.lang-mobile a:active { background-color: #666; color: #FFF }
#nav>ul>li ul { display: block; background-color: #efefef }
#nav>ul>li ul.hasthird { height: 45px; overflow: hidden; background-color: #fff }
#nav>ul>li ul.hasthird.current { background-color: #fff; color: #666 }
#nav>ul>li ul.hasthird.current li { border-color: #efefef; position: relative }
#nav>ul>li ul.hasthird.current li:before { content: ""; display: block; height: 100%; width: 3px; background-color: #56d4ad; position: absolute; left: 0 }
#nav>ul>li ul.hasthird.current .title { background-color: #56d4ad; color: #fff; font-weight: 600 }
#nav>ul>li ul.hasthird.current .title a { color: #fff }
#nav>ul>li ul.hasthird.current .title:before { display: block; background-size: auto 48px; width: 24px; height: 24px; background-position: -480px -24px; background-repeat: no-repeat; position: absolute; left: 3%; top: 50%; margin-top: -10px }
#nav>ul>li ul.hasthird .title { transition: background-color .25s ease }
#nav>ul>li ul.hasthird .title:before { display: block; background-size: auto 40px; width: 20px; height: 20px; background-position: -400px 0; background-repeat: no-repeat; position: absolute; left: 3%; top: 50%; margin-top: -10px }
#nav>ul>li ul>li { padding-left: 18%; width: 100%; height: 45px; line-height: 45px; border: 0; border-bottom: 1px solid #ccc }
#nav>ul>li ul>li:last-of-type { border: 0 }
#nav>ul>li ul>li>a { color: #333; display: block; width: 100%; box-sizing: border-box; font-size: .9375rem }
#nav>ul>li ul>li>a strong:before { content: "" }
#nav>ul>li ul>li>a img, #nav>ul>li ul>li>a span, #nav>ul>li ul>li>a p { display: none }
#nav>ul>li ul .title, #nav>ul>li ul .link-title { color: #333; font-size: .9375rem; background-color: #efefef; font-weight: normal; position: relative }
#nav>ul>li ul .title:before, #nav>ul>li ul .link-title:before { content: ""; position: absolute; left: 0; top: 50%; margin: -12px 0 0 12px }
#nav>ul>li ul .link-title { padding-left: 0 }
#nav>ul>li ul .link-title a { padding-left: 18% }
#nav .hassub { position: relative }
#nav .hassub:after { position: absolute; right: 15px; top: 7px; z-index: 26; display: block; background-size: auto 60px; width: 30px; height: 30px; background-position: -480px 0; background-repeat: no-repeat }
#nav .hassub.open:after { background-position: -480px -30px }
#nav .hassub .plus-link { display: none }
#nav .submenu { display: none }
.mask { height: 100vh; width: 100vw; background-color: rgba(0,0,0,0.7); position: fixed; z-index: 900; left: 0; top: 0 }
}

@media(min-width:680px) {
#nav-toggle { width: 64px; height: 64px }
#nav>ul>li { line-height: 50px }
#nav>ul>li>ul>li { height: 50px; line-height: 50px }
#page.show { -webkit-transform: translateX(360px); transform: translateX(360px) }
#nav { left: -360px; width: 360px }
#nav.show { -webkit-transform: translateX(360px); transform: translateX(360px) }
}

@media(min-width:1290px) {
#nav-toggle { display: none }
#nav { position: absolute; left: 50%; top: 0; margin: 0 0 0 -400px; padding: 0; height: 70px; width: 800px; z-index: 900; overflow: hidden; transition: none; background-color: transparent }
#nav:hover { overflow: visible }
#nav>ul { display: block; text-align: center; margin: 0 auto; padding: 0; height: auto; font-size: 0 }
#nav>ul.wrap { width: 100% }
#nav>ul>li { display: inline-block; text-align: center; width: auto; margin: 0; padding: 0; float: none; border: 0; height: auto; vertical-align: top }
#nav>ul>li.mobileshow { display: none }
#nav>ul>li>a { display: block; text-align: center; width: auto; height: 70px; line-height: 70px; margin: 0; padding: 0 1vw; color: #333; font-size: .9375rem; position: relative; outline: 0 }
#nav>ul>li>a:after { content: ""; position: absolute; width: 100%; height: 0; background-color: #0b8974; bottom: 0; left: 0; border-left: 1vw solid #fff; border-right: 1vw solid #fff; box-sizing: border-box; transition: height .1s; -webkit-transition: height .1s }
#nav>ul>li ul { display: block; background: 0; color: #999; float: left; margin: 1rem 0 0 8% }
#nav>ul>li ul>li { padding-left: 0; height: auto; box-sizing: border-box }
#nav>ul>li ul>li>a { color: #777; display: block; text-align: left; padding: 0 40px; box-sizing: border-box; line-height: 1.75em; margin: 0; transition: color .3s ease; outline: 0; font-size: .875rem }
#nav>ul>li ul>li>a:hover { color: #0b8974 }
#nav>ul>li ul .title, #nav>ul>li ul .link-title { display: block; text-align: left; font-size: .875rem; line-height: 2em; color: #333; font-weight: 600; vertical-align: text-top; background-color: transparent; position: relative }
#nav>ul>li ul .title:before, #nav>ul>li ul .link-title:before { display: inline-block; background-size: auto 48px; width: 24px; height: 24px; background-position: 0 -24px; background-repeat: no-repeat; content: ""; position: absolute; left: 0; margin: -12px 0 0 -12px; top: 50% }
#nav>ul>li ul .title>a, #nav>ul>li ul .link-title>a { line-height: 2em; font-size: .875rem; color: #333; font-weight: 600 }
#nav>ul>li ul .title>a:hover, #nav>ul>li ul .link-title>a:hover { color: #0b8974 }
#nav>ul>li:hover>a { position: relative; color: #0b8974 }
#nav>ul>li:hover>a:after { height: 3px }
#nav>ul>li:hover.hassub a:before { border-color: transparent transparent #fff transparent }
#nav>ul>li:hover .submenu { visibility: visible; opacity: 1 }
#nav .hassub { position: static }
#nav .hassub>a { height: 70px; cursor: default }
#nav .hassub>a:before { content: ""; display: block; position: absolute; border-style: solid; border-width: 0 8px 6px 8px; border-color: transparent; left: 50%; bottom: 0; margin-left: -8px; transition: border-color .2s ease }
#nav .hassub:after { display: none }
#nav .hassub:hover:before { content: ""; display: block; overflow: hidden; position: absolute; z-index: 9990; width: 40px; height: 240px; margin: -125px 0 0 270px; -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -o-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: rotate(-80deg); -moz-transform: rotate(-80deg); -o-transform: rotate(-80deg); -ms-transform: rotate(-80deg); transform: rotate(-80deg); background: transparent }
#nav .hassub:hover:after { content: ""; display: block; overflow: hidden; position: absolute; z-index: 9991; width: 40px; height: 240px; margin: -180px 0 0 -200px; right: auto; top: 0; -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -o-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: rotate(83deg); -moz-transform: rotate(83deg); -o-transform: rotate(83deg); -ms-transform: rotate(83deg); transform: rotate(83deg); background: transparent }
#nav .hassub:hover.big:before { margin: -130px 0 0 300px }
#nav .hassub:hover.big:after { margin: -170px 0 0 -200px }
#nav .submenu { display: block; visibility: hidden; opacity: 0; position: absolute; background: 0; top: 70px; transition: top .3s ease; width: 100%; left: 0; z-index: 9600; background-color: transparent; background-color: #f9f9f9; border-bottom: 2px solid #0b8974; padding-bottom: 50px; border-radius: 0 0 10px 10px; transition: visibility 0s }
#nav .submenu.no-pdbt { padding-bottom: 0 }
#nav .submenu>ul { float: left }
#nav .submenu li { margin: 0; border: 0 }
#nav .submenu li a { width: 100%; height: 100%; display: block; padding: 0; text-align: left }
#nav .submenu li a img, #nav .submenu li a span, #nav .submenu li a p { display: block; margin: 0 auto; padding: 0; width: 100%; line-height: 1.25em }
#nav .submenu:after { content: ""; display: none; width: 100%; background-color: transparent; left: 0; top: 0; z-index: -10; height: 140px; background-color: #f9f9f9; *zoom:1;
filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF9F9F9', endColorstr='#FFFFFFFF');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIvPjxzdG9wIG9mZnNldD0iNjAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, #f9f9f9), color-stop(60%, #fff)); background-image: -moz-linear-gradient(top, #f9f9f9 0, #fff 60%); background-image: -webkit-linear-gradient(top, #f9f9f9 0, #fff 60%); background-image: linear-gradient(to bottom, #f9f9f9 0, #fff 60%); position: absolute; border-bottom: 2px solid #0b8974 }
#nav .submenu.multi-ul ul { width: 23%; margin-left: 0 }
#nav .submenu.multi-ul ul:nth-of-type(4n+1) { clear: both; margin-left: 8% }
#nav .submenu.multi-ul .title:before, #nav .submenu.multi-ul .link-title:before { display: block; background-size: auto 48px; width: 24px; height: 24px; background-position: 0 -24px; background-repeat: no-repeat; margin: -12px 0 0 -24px }
#nav .submenu.single-ul .col-triple { width: 90% }
#nav .submenu.single-ul .col-triple>li { display: block; float: left; width: 33.33%; margin-bottom: 1rem; box-sizing: border-box; padding-right: 6% }
#nav .submenu.single-ul .col-triple>li p { font-size: .8125rem }
#nav .submenu.single-ul .fourfold { width: 88% }
#nav .submenu.single-ul .fourfold li { width: 25%; float: left; display: block; margin-bottom: 1rem }
#nav .submenu.ssd:after { height: 300px }
#nav .submenu.dram:after { height: 350px }
#nav .submenu .plus-link { display: block; width: 100%; overflow: hidden; margin-top: 30px; border-radius: 0 0 10px 10px; float: left; vertical-align: text-bottom }
#nav .submenu .plus-link a { display: block; box-sizing: border-box; float: left; width: 50%; height: 60px; line-height: 60px; overflow: hidden; color: #888; text-align: center; background-color: #fff; border-top: 1px solid #eee; transition: background-color .3s ease, color .3s ease; -webkit-transition: background-color .3s ease, color .3s ease; font-style: italic }
#nav .submenu .plus-link a:nth-of-type(1) { background-color: #0b7764; color: #fff }
#nav .submenu .plus-link a:nth-of-type(1):before { background-image: url("http://www.starpointcomm.com/img/layout/iconset.svg"); background-repeat: no-repeat; font-size: 0; content: ""; vertical-align: middle; display: inline-block; background-size: auto 96px; width: 48px; height: 48px; background-position: -1056px 0; background-repeat: no-repeat }
#nav .submenu .plus-link a:nth-of-type(1):hover { background-color: #0c816c }
#nav .submenu .plus-link a:nth-of-type(2) { background-color: #333; color: #fff }
#nav .submenu .plus-link a:nth-of-type(2):before { background-image: url("http://www.starpointcomm.com/img/layout/iconset.svg"); background-repeat: no-repeat; font-size: 0; content: ""; vertical-align: middle; display: inline-block; background-size: auto 96px; width: 48px; height: 48px; background-position: -240px 0; background-repeat: no-repeat }
#nav .submenu .plus-link a:nth-of-type(2):hover { background-color: #404040 }
#nav .submenu .plus-link img { display: block; height: 70px; width: auto; border-radius: 5px }
#js-rwd { width: 10px }
}

@media(min-width:1400px) {
#nav { height: 70px; margin: 0 0 0 -430px; width: 860px }
#nav .hassub>a { height: 70px; line-height: 70px }
#nav .submenu { top: 70px }
#nav .submenu:after { top: 0 }
}

@media(min-width:1600px) {
#nav>ul { width: 1280px; margin: 0 auto; float: none }
}

@media(min-width:1620px) {
#nav { height: 75px }
#nav>ul>li { vertical-align: top }
#nav>ul>li>a { height: 75px; line-height: 75px; padding: 0 15px; font-size: 1rem }
#nav>ul>li>a:after { border-left: 15px solid #fff; border-right: 15px solid #fff }
#nav>ul>li ul>li>a { font-size: .875rem }
#nav>ul>li ul .title, #nav>ul>li ul .link-title { font-size: 1rem; line-height: 2em }
#nav>ul>li ul .title>a, #nav>ul>li ul .link-title>a { font-size: 1rem; line-height: 2em }
#nav .hassub>a { height: 75px; line-height: 75px }
#nav .submenu { top: 75px }
#nav .submenu.single-ul .col-triple>li p { font-size: .875rem; line-height: 1.375em }
}
body { line-height: 1.5em; font-size: .9375rem; font-size: 100%; font-family: "Open Sans", "PingFangSC-Regular", "Microsoft YaHei", sans-serif, Helvetica, Arial, sans-serif; font-weight: 400 }
h1 { font-size: 1.75em; font-weight: 400; color: #000 }
h2 { font-size: 1.375em; font-weight: 400; color: #000 }
h3, h4 { font-size: 1.125em; font-weight: 400; color: #000 }
h5, h6, .title { font-size: 1.125em; font-weight: 400 }
h1, h2, h3, h4, h5, h6, p, span, .others { display: block; width: 88%; margin: 0 auto .5rem auto }
h1, h2, h3, h4, h5, h6, .title { font-family: "Open Sans", "PingFangSC-Regular", "Microsoft YaHei", sans-serif; line-height: 1.25em }
p, li { color: #777; line-height: 1.5em; font-weight: 400 }
span { line-height: 1.5em }
p span { display: inline-block; width: auto; margin: 0 }
img { -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0) scale(1, 1) }
img.icon { display: block; width: 96px; height: auto; margin: 0 auto }
select::-ms-expand {
display:none
}
.item>img { display: inline-block; width: 100%; height: auto }
.bg img { display: block; width: 100%; height: auto }
.mobile-show { display: block }
.desktop-show { display: none }
.bg-gradient { color: #fff; background: #1e957e; background: -moz-linear-gradient(top, #1e957e 23%, #6ae0b2 100%); background: -webkit-linear-gradient(top, #1e957e 23%, #6ae0b2 100%); background: linear-gradient(to bottom, #1e957e 23%, #6ae0b2 100%) }
.bg-gradient * { color: #fff }
.sub-p { display: block; overflow: hidden; margin-top: 1rem; font-size: .875rem }
.sub-p a { display: inline-block; width: auto; margin: 0 5px; border-bottom: 1px dotted #0b8974; font-weight: bold }
.header { height: 45px; background-color: #fff }
.header.wrap-fs { overflow: visible }
.searchbar { display: none; position: absolute; top: 45px; left: 0; background-color: #eee; height: 56.25px; z-index: 9908; transform: scale(1) scaleZ(1) rotateX(180deg); -webkit-transform: scale(1) scaleZ(1) rotateX(180deg); transform-origin: 0 0; -webkit-transform-origin: 0 0; perspective: 200; -webkit-perspective: 200; perspective-origin: 50% 50%; -webkit-perspective-origin: 50% 50%; opacity: 0; visibility: hidden; transition: visibility 0s ease .4s, transform .4s ease, opacity .4s ease; -webkit-transition: visibility 0s ease .4s, transform .4s ease, opacity .4s ease }
.searchbar input { background: transparent; outline: 0; border: 0; text-align: center; display: block; box-sizing: border-box; height: 56.25px; line-height: 56.25px; padding: 0 6%; font-size: 1.125rem; color: #333; font-family: "Open Sans", "PingFangSC-Regular", "Microsoft YaHei", sans-serif; font-weight: 300 }
.searchbar input::-ms-clear {
display:none
}
.searchbar ::-webkit-input-placeholder {
color:#ccc
}
.searchbar ::-moz-placeholder {
color:#ccc
}
.searchbar :-ms-input-placeholder {
color:#ccc
}
.searchbar :-moz-placeholder {
color:#ccc
}
.searchbar.open { visibility: visible; transition-delay: 0s; opacity: 1; transform: scale(1) scaleZ(1) rotateX(0) }
.header-top { min-height: 40vh; box-sizing: border-box; padding-top: 2rem }
.header-top .subtitle { font-size: .9375rem; line-height: 1.375em; opacity: .8; font-weight: 400 }
.logo { display: block; margin: 0 auto; background: transparent url("http://www.starpointcomm.com/img/layout/apacer-industrial.svg") center center no-repeat; background-size: auto 32px; width: 200px; height: 45px }
.logo>a { text-indent: -9999px; display: block; width: 100%; height: 100% }
.btn-search { display: block; width: 45px; height: 45px; position: absolute; right: 2%; top: 0; cursor: pointer }
.btn-search:before { display: block; background-size: auto 70px; width: 35px; height: 35px; background-position: -490px 0; background-repeat: no-repeat; margin: 5px }
.section-nav { display: none }
.pos-middle { display: none }
.footer { padding-top: 2rem; background-color: #888 }

@media(min-width:0) and (max-width:1289px) {
.sitemap ul { display: none }
.sitemap ul:last-of-type { display: block; margin-bottom: 1rem }
.sitemap li { text-align: center }
.sitemap li.title { font-weight: 400; font-size: 1rem; color: #fff; opacity: 1 }
.sitemap li.title+li { margin-top: 1rem }
.sitemap li.title+.title { margin-top: 0 }
.sitemap li.title a { font-size: 1rem; opacity: 1 }
.sitemap li.title a:hover { opacity: .7 }
.sitemap li.title span { font-size: 1rem; opacity: 1 }
.sitemap li.title span:hover { opacity: 1 }
.sitemap a, .sitemap span { font-size: .8125rem; color: #fff; opacity: .7; line-height: 1.875em }
.sitemap a:hover, .sitemap span:hover { opacity: 1 }
}
.footer-contact { float: left; box-sizing: border-box; width: 100%; text-align: center }
.footer-contact .business-title { font-size: .9375rem; color: #fff; font-family: "Open Sans", "PingFangSC-Regular", "Microsoft YaHei", sans-serif; margin-bottom: 12px; position: relative; text-align: center }
.footer-contact .tel { font-size: 2rem; font-family: "Open Sans", "PingFangSC-Regular", "Microsoft YaHei", sans-serif; color: #fff; text-decoration: none; outline: 0 }
.footer-contact .tel a { text-decoration: none; outline: 0; border: 0; color: #fff }
.footer-contact .tel:after { content: ''; display: inline-block; width: 100% }
.footer-contact .contact-way { overflow: hidden; text-align: center }
.footer-contact .contact-way a { text-indent: -9999px; font-size: 0; vertical-align: text-top }
.footer-contact .contact-way a.icon-email { display: inline-block; background-size: auto 100px; width: 50px; height: 50px; background-position: -200px 0; background-repeat: no-repeat }
.footer-contact .contact-way a.icon-form { display: inline-block; background-size: auto 100px; width: 50px; height: 50px; background-position: -250px 0; background-repeat: no-repeat }
.footer-contact .contact-way a.icon-apacer { display: inline-block; background-size: auto 140px; width: 70px; height: 50px; background-position: -1050px -10px; background-repeat: no-repeat }
.copyright { float: left; width: 100%; margin-top: 10px; margin-bottom: 15px; text-align: center; font-size: .75rem; color: rgba(255,255,255,0.5) }
.copyright h6 { text-indent: -9999px; background-size: auto 24px; height: 24px; width: 160px }
.copyright a { color: rgba(255,255,255,0.5) }
.copyright a:hover { color: white }
.copyright li { color: #ccc }
.wrap, .wrap-xs, .wrap-s, .wrap-fs, .wrap-fs-p { width: 100%; display: block; overflow: hidden; background-size: cover; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; z-index:80; }
.wrap.desktop-show, .wrap-xs.desktop-show, .wrap-s.desktop-show, .wrap-fs.desktop-show, .wrap-fs-p.desktop-show { display: none }
.wrap .wrap, .wrap-xs .wrap, .wrap-s .wrap { width: 100%; max-width: 100% }
.head-padding { padding-top: 5vh }
.area { padding: 5vw 0 }
.area-top { padding: 5vw 0 0 0 }
.middle { display: inline-block; vertical-align: middle; height: 100% }
.middle>span, .middle>div, .middle>h1, .middle>h2, .middle>h3, .middle>h4, .middle>h5, .middle>h6, .middle>p, .middle>.wrap-fs, .middle>.wrap-s, .middle>.wrap-xs, .middle>.wrap { display: inline-block; vertical-align: middle; width: auto; max-width: auto }
.middle:before { content: ""; height: 100%; display: inline-block; vertical-align: middle; width: 0; overflow: hidden }
.center { text-align: center; margin-left: auto; margin-right: auto }
.inline { display: inline-block; width: auto; vertical-align: middle }
.line-title { display: block; text-align: center; font-size: 1rem; font-weight: normal; margin: 2rem auto }
.line-title span { display: inline-block; width: 30%; min-width: 80px; vertical-align: middle }
.line-title:before, .line-title:after { content: ""; display: inline-block; height: 1px; width: 35%; background-color: #eee; vertical-align: middle }
.edit h2 .engsub, .edit h3 .engsub, .edit h4 .engsub, .edit h5 .engsub, .edit h6 .engsub { font-size: .875rem; padding: 0; font-weight: lighter; margin: 0; color: #284193 }
.col-1 { width: 100% }
.col-2, .col-2-p, .col-3, .col-3-p, .col-4, .col-4-p, .col-5, .col-5-p, .col-f, .col-f-p { box-sizing: border-box; display: block; width: 100%; float: left }
.col-2 h1, .col-2 h2, .col-2 h3, .col-2 h4, .col-2 h5, .col-2 h6, .col-2 p, .col-2 span, .col-2-p h1, .col-2-p h2, .col-2-p h3, .col-2-p h4, .col-2-p h5, .col-2-p h6, .col-2-p p, .col-2-p span, .col-3 h1, .col-3 h2, .col-3 h3, .col-3 h4, .col-3 h5, .col-3 h6, .col-3 p, .col-3 span, .col-3-p h1, .col-3-p h2, .col-3-p h3, .col-3-p h4, .col-3-p h5, .col-3-p h6, .col-3-p p, .col-3-p span, .col-4 h1, .col-4 h2, .col-4 h3, .col-4 h4, .col-4 h5, .col-4 h6, .col-4 p, .col-4 span, .col-4-p h1, .col-4-p h2, .col-4-p h3, .col-4-p h4, .col-4-p h5, .col-4-p h6, .col-4-p p, .col-4-p span, .col-5 h1, .col-5 h2, .col-5 h3, .col-5 h4, .col-5 h5, .col-5 h6, .col-5 p, .col-5 span, .col-5-p h1, .col-5-p h2, .col-5-p h3, .col-5-p h4, .col-5-p h5, .col-5-p h6, .col-5-p p, .col-5-p span, .col-f h1, .col-f h2, .col-f h3, .col-f h4, .col-f h5, .col-f h6, .col-f p, .col-f span, .col-f-p h1, .col-f-p h2, .col-f-p h3, .col-f-p h4, .col-f-p h5, .col-f-p h6, .col-f-p p, .col-f-p span { display: block; width: 88%; margin: 0 auto }
.col-2>img, .col-2-p>img, .col-3>img, .col-3-p>img, .col-4>img, .col-4-p>img, .col-5>img, .col-5-p>img, .col-f>img, .col-f-p>img { display: block; width: 100%; height: auto }
.fs { width: 100% }
.imgblock { display: block; width: 100%; height: auto }

@media(min-width:680px) and (max-width:1024px) {
.edit .wrap { padding-left: 5vw; padding-right: 5vw }
.edit .wrap .wrap-5 { width: 100%; padding-left: 0; padding-right: 0; margin-left: 0 }
}
.edit h1, .edit h2, .edit h3, .edit h4, .edit h5, .edit h6 { margin-top: 1rem; margin-bottom: 1rem }
.edit p { display: block; width: 88%; margin: 0 auto; padding-bottom: 1rem; box-sizing: border-box }
.edit p.summary { font-size: 1.125em; font-weight: lighter }
.edit strong { font-weight: bold; color: #666 }
.edit em { font-style: italic }
.edit blockquote { width: 88%; display: block; margin: 0 auto }
.edit blockquote>p { font-size: 1.25rem; line-height: 1.375em; font-weight: lighter; width: 100% }
.edit ul, .edit ol { width: 88%; margin: 0 auto 1rem auto; padding: 0 0 0 22px; box-sizing: border-box }
.edit ul li, .edit ol li { box-sizing: border-box; padding: 0 0 0 6%; margin-bottom: .5em }
.edit ul { padding: 0; list-style: none }
.edit ul li { background-image: url("http://www.starpointcomm.com/img/layout/list-style.svg"); background-position: left 6px; background-repeat: no-repeat; padding: 0 0 0 32px }
.edit ul li ul { margin-top: .5em }
.edit ul li ul li { background-image: url("http://www.starpointcomm.com/img/layout/second-list-style.svg") }
.edit ul.slick-dots li { background: 0; padding-left: 0 }
.edit ul.nostyle { list-style: none; padding: 0 }
.edit ol { list-style: decimal }
.edit ol.nostyle { list-style: none; padding: 0 }
.edit img { display: block; width: 100%; height: auto; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0) scale(1, 1) }
.edit img.w75 { width: 75%; margin: 0 auto }
.edit img.w50 { width: 50%; margin: 0 auto }
.edit img.w25 { width: 25%; margin: 0 auto }
.edit img.icon { display: block; width: 72px; height: auto; margin: 0 auto }
.edit .upside-down { -webkit-transform: scaleY(-1); transform: scaleY(-1); border: 0 }
.edit .upside-down>img, .edit .upside-down>div { -webkit-transform: scaleY(-1); transform: scaleY(-1) }
.edit .upside-down>div { padding-top: 1rem; padding-top: 1rem }
.gradient-b { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjcyJSIgc3RvcC1jb2xvcj0iIzBhMGEwYSIgc3RvcC1vcGFjaXR5PSIwLjciLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwYTBhMGEiIHN0b3Atb3BhY2l0eT0iMC44NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, rgba(0,0,0,0)), color-stop(72%, rgba(10,10,10,0.7)), color-stop(100%, rgba(10,10,10,0.85))); background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 0, rgba(10,10,10,0.7) 72%, rgba(10,10,10,0.85) 100%); background-image: -webkit-linear-gradient(top, rgba(0,0,0,0) 0, rgba(10,10,10,0.7) 72%, rgba(10,10,10,0.85) 100%); background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(10,10,10,0.7) 72%, rgba(10,10,10,0.85) 100%) }
.pagination { overflow: hidden; margin: 30px auto; padding: 0; text-align: center }
.pagination>div { display: inline-block; text-align: center; border-radius: 6px }
.pagination a { display: inline-block; box-sizing: border-box; padding: 0 15px; height: 40px; line-height: 40px; vertical-align: top; color: #333; overflow: hidden; transition: all .3s ease }
.pagination a span { font-size: 1.25em; display: inline-block; height: 40px; line-height: 40px }
.pagination a:hover, .pagination a:active, .pagination a:focus { color: #fff; background-color: #0b8974 }
.pagination a.current { color: #FFF; cursor: default }
.pagination .unavailable, .pagination .unavailable:hover, .pagination .unavailable:active, .pagination .unavailable:focus { cursor: default; border: 0; padding: 10px 0; color: #666; background-color: transparent }
.pagination .pre { border-right: 1px solid #ddd; border-radius: 5px 0 0 5px }
.pagination .next { border-left: 1px solid #ddd; border-radius: 0 5px 5px 0 }
.jump-menus { display: inline-block; height: 40px; vertical-align: top; line-height: 40px; font-size: 1rem; padding: 0 25px 0 0; box-sizing: border-box }
.jump-menus select { box-sizing: border-box; font-size: 1.125rem; font-weight: bold; padding: 0 15px; outline: 0; border: 0; line-height: 40px; height: 40px; margin: 0; display: inline-block; background: 0 }
.jump-menus select:hover, .jump-menus select:active, .jump-menus select:focus { border-color: #AAA }
.jump-menus select:hover, .jump-menus select:active, .jump-menus select:focus { border-color: #AAA }

@media(min-width:0) and (max-width:500px) {
.btn { margin: .5rem .5rem .5rem 6% }
.btn.center { margin: .5rem }
a.more { margin: .5rem .5rem .5rem 6% }
a.more.center { margin: .5rem }
}

@media(min-width:0) and (max-width:860px) {
h1.wrap, h1.wrap-xs, h1.wrap-s, h1.wrap-fs, h1.wrap-fs-p, h2.wrap, h2.wrap-xs, h2.wrap-s, h2.wrap-fs, h2.wrap-fs-p, h3.wrap, h3.wrap-xs, h3.wrap-s, h3.wrap-fs, h3.wrap-fs-p, h4.wrap, h4.wrap-xs, h4.wrap-s, h4.wrap-fs, h4.wrap-fs-p, h5.wrap, h5.wrap-xs, h5.wrap-s, h5.wrap-fs, h5.wrap-fs-p, h6.wrap, h6.wrap-xs, h6.wrap-s, h6.wrap-fs, h6.wrap-fs-p, p.wrap, p.wrap-xs, p.wrap-s, p.wrap-fs, p.wrap-fs-p, span.wrap, span.wrap-xs, span.wrap-s, span.wrap-fs, span.wrap-fs-p, .others.wrap, .others.wrap-xs, .others.wrap-s, .others.wrap-fs, .others.wrap-fs-p { width: 88% }
.edit .center { text-align: left }
.edit .center h1, .edit .center h2, .edit .center h3, .edit .center h4, .edit .center h5, .edit .center h6, .edit .center p, .edit .center span { text-align: left }
}

@media(min-width:500px) and (max-width:680px) {
h1 { font-size: 2rem }
h2 { font-size: 1.5rem }
h3, h4 { font-size: 1.125rem }
.header-top .subtitle { font-size: 1rem }
.col-2, .col-3, .col-4, .col-5, .col-f { width: 50% }
.col-2.readable, .col-3.readable, .col-4.readable, .col-5.readable, .col-f.readable { width: 100% }
.col-2:nth-of-type(2n+1), .col-3:nth-of-type(2n+1), .col-4:nth-of-type(2n+1), .col-5:nth-of-type(2n+1), .col-f:nth-of-type(2n+1) { clear: both }
.col-2-p, .col-3-p, .col-4-p, .col-5-p, .col-f-p { width: 42%; margin: 0 6% 2vw 2% }
.col-2-p *, .col-3-p *, .col-4-p *, .col-5-p *, .col-f-p * { display: block; width: 100%; margin: 0 auto }
.col-2-p:nth-of-type(2n+1), .col-3-p:nth-of-type(2n+1), .col-4-p:nth-of-type(2n+1), .col-5-p:nth-of-type(2n+1), .col-f-p:nth-of-type(2n+1) { margin: 0 2% 2vw 6%; clear: both }
.col-2-p.readable, .col-3-p.readable, .col-4-p.readable, .col-5-p.readable, .col-f-p.readable { width: 88%; margin: 0 auto; float: none }
.col-2-p h1, .col-2-p h2, .col-2-p h3, .col-2-p h4, .col-2-p h5, .col-2-p h6, .col-2-p p, .col-2-p span, .col-2-p div, .col-2-p ul, .col-2-p li, .col-3-p h1, .col-3-p h2, .col-3-p h3, .col-3-p h4, .col-3-p h5, .col-3-p h6, .col-3-p p, .col-3-p span, .col-3-p div, .col-3-p ul, .col-3-p li, .col-4-p h1, .col-4-p h2, .col-4-p h3, .col-4-p h4, .col-4-p h5, .col-4-p h6, .col-4-p p, .col-4-p span, .col-4-p div, .col-4-p ul, .col-4-p li, .col-5-p h1, .col-5-p h2, .col-5-p h3, .col-5-p h4, .col-5-p h5, .col-5-p h6, .col-5-p p, .col-5-p span, .col-5-p div, .col-5-p ul, .col-5-p li, .col-f-p h1, .col-f-p h2, .col-f-p h3, .col-f-p h4, .col-f-p h5, .col-f-p h6, .col-f-p p, .col-f-p span, .col-f-p div, .col-f-p ul, .col-f-p li { width: 100% }
.edit .col-2-p p, .edit .col-3-p p, .edit .col-4-p p, .edit .col-5-p p, .edit .col-f-p p { width: 100% }
}

@media(min-width:680px) {
body { line-height: 1.5em; font-size: .9375rem }
h1 { font-size: 2.5em; font-weight: 300 }
h2 { font-size: 1.875em; font-weight: 300 }
h3, h4 { font-size: 1.25em }
h5, h6, .title { font-size: 1.25em }
.edit p { box-sizing: border-box; width: 100%; padding: 0 6% 2rem; font-size: .9375rem }
.edit p.summary { font-size: 1.375em }
.edit .col-2-p p, .edit .col-3-p p, .edit .col-4-p p, .edit .col-5-p p, .edit .col-f-p p { padding: 0 0 2rem }
.edit .subtitle { font-size: 2rem }
.edit blockquote, .edit blockquote>p { width: 100%; font-size: 1.5rem; margin-bottom: .5em; line-height: 1.375em }
.edit .upside-down>div { padding-top: 2rem; padding-top: 2rem }
.edit .sidefont { box-sizing: border-box; padding-left: 12% }
.edit .sidefont p, .edit .sidefont span, .edit .sidefont ul, .edit .sidefont li { font-size: .875rem }
.edit .sidefont>h3, .edit .sidefont>h4, .edit .sidefont>p, .edit .sidefont>span { margin-top: 0 }
.wrap-5 { width: 100%; box-sizing: border-box; padding: 0 6% }
.wrap-5>div { margin: 0; padding: 0; box-sizing: border-box }
.wrap-5>div h1, .wrap-5>div h2, .wrap-5>div h3, .wrap-5>div h4, .wrap-5>div h5, .wrap-5>div h6, .wrap-5>div p, .wrap-5>div span { padding: 0 }
.col-3-5 { width: 58%; float: left }
.col-3-5.pdl { padding-left: 3rem }
.col-3-5.pdr { padding-right: 3rem }
.col-2-5 { width: 42%; float: left }
.col-2-5.pdl { padding-left: 3rem }
.col-2-5.pdr { padding-right: 3rem }
.col-1, .col-2, .col-3, .col-4, .col-5, .col-f { width: 50% }
.col-1.eq-height, .col-2.eq-height, .col-3.eq-height, .col-4.eq-height, .col-5.eq-height, .col-f.eq-height { display: table-cell; height: auto; float: none }
.col-1:nth-of-type(2n+1), .col-2:nth-of-type(2n+1), .col-3:nth-of-type(2n+1), .col-4:nth-of-type(2n+1), .col-5:nth-of-type(2n+1), .col-f:nth-of-type(2n+1) { clear: none }
.col-2-p *, .col-3-p *, .col-4-p *, .col-5-p *, .col-f-p * { width: 100% }
.col-2-p h1, .col-2-p h2, .col-2-p h3, .col-2-p h4, .col-2-p h5, .col-2-p h6, .col-2-p p, .col-2-p span, .col-2-p div, .col-2-p ul, .col-2-p li, .col-3-p h1, .col-3-p h2, .col-3-p h3, .col-3-p h4, .col-3-p h5, .col-3-p h6, .col-3-p p, .col-3-p span, .col-3-p div, .col-3-p ul, .col-3-p li, .col-4-p h1, .col-4-p h2, .col-4-p h3, .col-4-p h4, .col-4-p h5, .col-4-p h6, .col-4-p p, .col-4-p span, .col-4-p div, .col-4-p ul, .col-4-p li, .col-5-p h1, .col-5-p h2, .col-5-p h3, .col-5-p h4, .col-5-p h5, .col-5-p h6, .col-5-p p, .col-5-p span, .col-5-p div, .col-5-p ul, .col-5-p li, .col-f-p h1, .col-f-p h2, .col-f-p h3, .col-f-p h4, .col-f-p h5, .col-f-p h6, .col-f-p p, .col-f-p span, .col-f-p div, .col-f-p ul, .col-f-p li { width: 100% }
.col-2-p.eq-height, .col-3-p.eq-height, .col-4-p.eq-height, .col-5-p.eq-height, .col-f-p.eq-height { display: table-cell; height: auto; float: none }
.col-2-p:nth-of-type(2n+1), .col-3-p:nth-of-type(2n+1), .col-4-p:nth-of-type(2n+1), .col-5-p:nth-of-type(2n+1), .col-f-p:nth-of-type(2n+1) { clear: none }
.col-2 { width: 50% }
.col-2-p, .col-4-p { width: 42%; margin-left: 4%; margin-bottom: 3vw }
.col-3, .col-f { width: 33.33% }
.col-3-p, .col-f-p { width: 26.66667%; margin-left: 4%; margin-bottom: 3vw }
.col-2:nth-of-type(2n+1), .col-3:nth-of-type(3n+1), .col-4:nth-of-type(2n+1), .col-f:nth-of-type(3n+1) { margin-left: 0; clear: both }
.col-2-p:nth-of-type(2n+1), .col-4-p:nth-of-type(2n+1), .col-3-p:nth-of-type(3n+1), .col-f-p:nth-of-type(3n+1) { margin-left: 6%; clear: both }
.header-top .subtitle { font-size: 1.125rem }
.wrap-fs-p { box-sizing: border-box; width: 100%; padding: 0 5% }
.head-padding { padding-top: 50px }
.header { height: 64px }
.logo { margin: 0 auto; background-size: auto 40px; background-position: center center; height: 64px }
.btn-search { width: 64px; height: 64px; right: 2% }
.btn-search:before { background-size: auto 80px; background-position: -560px 0; margin: 12px; width: 40px; height: 40px }
.searchbar { top: 64px; height: 80px }
.searchbar input { height: 80px; line-height: 80px; font-size: 1.125rem }
.line-title { margin: 2rem auto }
.line-title span { width: 12% }
.line-title:before, .line-title:after { width: 44% }
.btn { height: 45px; line-height: 45px; font-size: .9375rem }
}

@media(min-width:860px) and (max-width:1025px) {
.wrap-5 { padding: 0; margin-left: 6%; width: 88% }
}

@media(min-width:860px) {
.wrap-s { width: 75%; margin: 0 auto }
.wrap-xs { width: 75%; margin: 0 auto }
.wht * { color: #fff }
.wrap.desktop-show, .wrap-xs.desktop-show, .wrap-s.desktop-show, .wrap-fs.desktop-show, .wrap-fs-p.desktop-show { display: block }
.edit .wht h1, .edit .wht h2, .edit .wht h3, .edit .wht h4, .edit .wht h5 { color: #fff }
.col-4-p, .col-f-p, .col-f-p:nth-of-type(3n+1), .col-4-p:nth-of-type(2n+1) { width: 20%; margin-left: 4%; clear: none }
.col-4, .col-f, .col-f:nth-of-type(3n+1), .col-4:nth-of-type(2n+1) { width: 25%; margin-left: 0; clear: none }
.col-4:nth-of-type(4n+1), .col-f:nth-of-type(4n+1) { margin-left: 0; clear: both }
.col-4-p:nth-of-type(4n+1), .col-f-p:nth-of-type(4n+1) { clear: both }
.bg { background-size: cover; background-position: 50% 50%; background-repeat: no-repeat }
.bg img { display: none }
.center-all * { text-align: center; margin-left: auto; margin-right: auto }
.center-all img { display: block; margin: 0 auto }
.center-all .btn { margin-top: .5rem; margin-bottom: .5rem }
.mobile-show { display: none }
.desktop-show { display: block }
.edit>.wrap.line { border-bottom: 1px solid #eee }
.edit p { padding: 0 0 2rem }
.edit p.wrap-s { width: 75% }
.edit p.wrap-xs { width: 75% }
.edit ul, .edit ol { width: 100% }
.edit h1, .edit h2, .edit h3, .edit h4, .edit h5, .edit h6, .edit .title { width: 100% }
.edit .right img, .edit .right>div, .edit .left img, .edit .left>div { display: inline-block; vertical-align: middle; box-sizing: border-box }
.edit .right img { width: 32%; margin-left: 6% }
.edit .right>div { width: 55%; padding: 5vw 0 5vw 5%; margin-left: 38% }
.edit .right img+div { width: 55%; padding: 0 0 0 5%; margin-left: 0 }
.edit .left img { width: 32%; margin-left: 61% }
.edit .left>div { width: 55%; padding: 5vw 0 5vw 6% }
.edit .left img+div { width: 55%; padding: 0 5% 0 0; margin-left: -87% }
.edit .center.bottom { border-top: 1px solid #eee; border-bottom: 1px solid #eee }
.edit .center>div h3, .edit .center>div h4, .edit .center>div p { text-align: left; width: 75%; margin-left: auto; margin-right: auto }
.edit .bg { background-size: cover; background-position: center center }
.edit .bg img { display: none }
.edit .bg>div { margin: 33vh auto 33vh }
.edit .bg.short { background-position: top center }
.edit .bg.short>div { margin: 0 auto }
.edit .bg.top { background-position: bottom center }
.edit .bg.top>div { margin: 8vh auto 66vh; min-height: 300px }
.edit .bg.bottom { background-position: top center }
.edit .bg.bottom>div { margin: 66vh auto 8vh }
}

@media(min-width:1025px) {
h1 { font-size: 3em }
h2 { font-size: 2.25em }
h3, h4 { font-size: 1.25em }
h5, h6, .title { font-size: 1.25em }
.col-2-p { width: 48% }
.col-2-p:nth-of-type(2n+1) { margin-left: 0 }
.col-4-p, .col-f-p, .col-f-p:nth-of-type(3n+1), .col-4-p:nth-of-type(2n+1) { width: 22%; margin-bottom: 30px }
.col-3-p { width: 30%; margin-left: 5%; margin-bottom: 35px }
.col-3-p:nth-of-type(3n+1), .col-4-p:nth-of-type(4n+1), .col-f-p:nth-of-type(4n+1) { margin-left: 0 }
.col-5 { width: 20% }
.area { padding: 40px 0 }
.area-top { padding: 40px 0 0 0 }
.wrap { width: 90%; max-width: 1280px; margin: 0 auto }
.wrap-5 { padding: 0 }
.header-top { padding-top: 64px; min-height: 45vh }
.header-top .subtitle { font-size: 1.25rem }
.searchbar { top: 64px; height: 80px }
.searchbar input { height: 80px; line-height: 80px; font-size: 1.25rem }
.btn { height: 45px; line-height: 45px }
.footer { text-align: center; padding: 50px 0 30px 0; border: 0 }
.footer>.wrap { position: relative }
.slide h1, .slide h2, .slide h3, .slide h4, .slide h5, .slide h6, .slide p, .slide span { display: block; width: 100%; height: auto }
h1, h2, h3, h4, h5, h6, p, span, .others { width: auto }
.edit .right img { width: 40%; margin-left: 0 }
.edit .right>div { width: 59%; padding: 5vw 3px 5vw 5.1%; margin-left: 40% }
.edit .right img+div { width: 59% }
.edit .left img { width: 40%; margin-left: 59% }
.edit .left>div { width: 59%; padding: 5vw 5% 5vw 3px }
.edit .left img+div { width: 59%; padding: 0 5% 0 0; margin-left: -99% }
}

@media(min-width:1290px) {
body { line-height: 1.5em }
.area { padding: 50px 0 }
.area-top { padding-top: 50px 0 0 0 }
.wrap { width: 80% }
.header { height: 70px; width: 100%; background-color: transparent }
.header.fixed { height: 55px; background-color: rbga(255, 255, 255, 0.9) }
.header .wrap { position: relative }
.header-top { padding-top: 128px; min-height: 50vh }
.logo { margin: 0; height: 70px }
.searchbar { top: 70px; height: 87.5px }
.searchbar input { height: 87.5px; line-height: 87.5px; font-size: 1.5rem; padding: 0 }
.btn-search { width: 70px; height: 70px; right: 0 }
.btn-search:before { background-size: auto 90px; background-position: -630px 0; margin: 12.5px; width: 45px; height: 45px }
.btn { height: 50px; line-height: 50px; font-size: 1rem; padding: 0 1.5rem }
.section-nav { display: block; right: 0; top: 50%; width: 100px; position: fixed; z-index: 100; background-color: #60dab2; *zoom:1;
filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF60DAB2', endColorstr='#FF0D9F8C');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYwZGFiMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBkOWY4YyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, #60dab2), color-stop(100%, #0d9f8c)); background-image: -moz-linear-gradient(top, #60dab2 0, #0d9f8c 100%); background-image: -webkit-linear-gradient(top, #60dab2 0, #0d9f8c 100%); background-image: linear-gradient(to bottom, #60dab2 0, #0d9f8c 100%); box-sizing: border-box; padding: 0; margin-top: -60px }
.section-nav:hover { background-color: white }
.section-nav a { display: block; border-bottom: 2px solid #fff; text-align: left; padding: .5em .75em; color: rgba(255,255,255,0.8); font-size: .8125rem }
.section-nav a:hover { color: white }
.pos-middle { display: block; right: 0; top: 50%; position: fixed; z-index: 100 }
p, li, span { font-size: .9375rem }
.edit p, .edit li, .edit span { font-size: .9375rem }
.edit .upside-down>div { padding-top: 3rem; padding-bottom: 3rem }
.sitemap { width: 70%; float: left; display: block; text-align: left }
.sitemap ul { margin-bottom: 2rem; float: left; margin-right: 3rem; margin-right: 3rem }
.sitemap ul.border-left { border-left: 1px solid #999; padding-left: 50px }
.sitemap ul:last-of-type { margin-right: 0 }
.sitemap li.title { font-weight: 400; font-size: 1rem; color: #fff; opacity: 1 }
.sitemap li.title+li { margin-top: 1rem }
.sitemap li.title+.title { margin-top: 0 }
.sitemap li.title a { font-size: 1rem; opacity: 1 }
.sitemap li.title a:hover { opacity: .7 }
.sitemap li.title span { font-size: 1rem; opacity: 1 }
.sitemap li.title span:hover { opacity: 1 }
.sitemap a, .sitemap span { font-size: .8125rem; color: #fff; opacity: .7; line-height: 1.875em }
.sitemap a:hover, .sitemap span:hover { opacity: 1 }
.footer-contact { display: block; width: 30%; margin-left: 0; padding-left: 5%; text-align: right }
.footer-contact .copyright { text-align: right }
.footer-contact .copyright li, .footer-contact .copyright a, .footer-contact .copyright span { font-size: .75rem }
.footer-contact .contact-way { text-align: right }
.footer-contact .contact-way a { opacity: .7; transition: opacity .3s }
.footer-contact .contact-way a:hover { opacity: 1 }
.footer-contact .business-title { text-align: right }
}

@media(min-width:1400px) {
h1 { font-size: 3.25em }
h2 { font-size: 2.5em }
h3, h4 { font-size: 1.375em }
h5, h6, .title { font-size: 1.375em }
.area { padding: 60px 0 }
.area-top { padding: 60px 0 0 0 }
.header { height: 70px }
.header.fixed { height: 55px; background-color: rbga(255, 255, 255, 0.9) }
.logo { background-size: auto 40px; height: 70px; width: 200px }
.searchbar { top: 70px; height: 87.5px }
.searchbar input { height: 87.5px; line-height: 87.5px; font-size: 1.75rem; padding: 0 }
.btn-search { width: 70px; height: 70px; right: 0 }
.btn-search:before { background-size: auto 90px; background-position: -630px 0; margin: 12.5px; width: 45px; height: 45px }
.col-f-p, .col-f-p:nth-of-type(3n+1), .col-f-p:nth-of-type(4n+1) { width: 18%; margin-left: 2.5%; margin-bottom: 25px; clear: none }
.col-f, .col-f:nth-of-type(3n+1), .col-f:nth-of-type(4n+1) { width: 20%; margin-left: 0; clear: none }
.col-f:nth-of-type(5n+1), .col-f-p:nth-of-type(5n+1) { margin-left: 0; clear: both }
.wrap-xs { width: 60% }
.edit p.wrap-xs { width: 60% }
.edit p.summary { font-size: 1.5em }
.edit .upside-down>div { padding-top: 5rem; padding-top: 5rem }
.edit .center>div h3, .edit .center>div h4, .edit .center>div p { width: 60% }
.sitemap { width: 76% }
.footer-contact { width: 24%; padding-left: 0 }
}

@media(min-width:1620px) {
h1 { font-size: 4rem }
h2 { font-size: 2.5rem }
h3 { font-size: 1.75rem }
.area { padding: 70px 0 }
.area-top { padding: 70px 0 0 0 }
.header { height: 75px }
.logo { height: 75px; background-size: auto 42px; width: 210px }
.btn-search { width: 70px; height: 70px; right: 0 }
.btn-search:before { background-size: auto 90px; background-position: -630px 0; margin: 15px; width: 45px; height: 45px }
.header-top { padding-top: 150px }
.header-top .subtitle { font-size: 1.375rem }
.searchbar { top: 75px; height: 93.75px }
.searchbar input { height: 93.75px; line-height: 93.75px; font-size: 2rem }
div, p, li, span { font-size: 1rem }
.edit p, .edit li, .edit span { font-size: 1rem }
.sitemap a { font-size: .875rem }
}
.icp:before { content: ""; width: 16px; height: 19px; background: url("http://www.starpointcomm.com/img/layout/icons_icp.png") no-repeat center center; display: inline-block; vertical-align: middle; background-size: contain; margin-right: 8px }
.copyright li { margin-bottom: 5px }
.breadcrumb { background-color: #f4f4f4; *zoom:1;
filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF4F4F4', endColorstr='#FFFFFFFF');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI0OCUiIHN0b3AtY29sb3I9IiNmNGY0ZjQiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(48%, #f4f4f4), color-stop(100%, #fff)); background-image: -moz-linear-gradient(top, #f4f4f4 48%, #fff 100%); background-image: -webkit-linear-gradient(top, #f4f4f4 48%, #fff 100%); background-image: linear-gradient(to bottom, #f4f4f4 48%, #fff 100%); box-sizing: border-box; padding: 1rem 6% }
.breadcrumb span { color: #888; vertical-align: text-top; font-size: .875rem; display: inline-block; font-weight: bold; width: auto; margin-bottom: 0 }
.breadcrumb span:after { content: ""; display: inline-block; background-size: auto 34px; width: 17px; height: 17px; background-position: -204px 0; background-repeat: no-repeat; vertical-align: text-top; margin: 0 14px; opacity: .5 }
.breadcrumb span a { color: #888 }
.breadcrumb span a:hover { color: #0b8974 }
.breadcrumb span:last-of-type { color: #333 }
.breadcrumb span:last-of-type:after { display: none }
.header-global p { font-size: .8125rem }
.header-short { min-height: 100px; vertical-align: middle; height: 1vh; border-bottom: 1px solid #eee }
.header-short img { display: block; width: 100%; height: auto }
.header-short .wrap { box-sizing: border-box; padding-top: 10px; padding-bottom: 10px }

@media(min-width:680px) {
.header-short { min-height: 180px }
}

@media(min-width:860px) {
.header-short { min-height: 200px; background-size: cover; background-position: center center; border: 0; text-align: center }
.header-short img { display: none }
.header-short>.wrap { vertical-align: middle; display: inline; padding-top: 0; padding-bottom: 0 }
.header-short>.wrap:after { content: ""; display: inline-block; height: 100%; width: 1px; overflow: hidden; vertical-align: middle }
.header-short>.wrap h1, .header-short>.wrap h2, .header-short>.wrap h3 { display: inline-block; width: 80%; height: auto; margin: 0; vertical-align: middle; position: static }
}

@media(min-width:1025px) {
.header-short { min-height: 200px }
}

@media(min-width:1290px) {
.header-short { min-height: 220px }
}

@media(min-width:1400px) {
.header-short { min-height: 240px }
}

@media(min-width:1620px) {
.header-short { min-height: 300px }
}
.index { background-color: #eee; overflow: hidden; height: 130vw }
.index a { display: block; overflow: hidden; width: 100%; position: relative; color: #333 }
.index a img { display: block; width: 100%; height: auto }
.index a h2 { position: absolute; bottom: 30px; font-size: 1.125rem; width: 100%; z-index: 99 }
.index a h2 span { line-height: .875em; width: 100%; padding: 0 6%; box-sizing: border-box }
.index a h2 span:nth-of-type(2) { font-size: 1.375em; line-height: 1.125em; font-weight: 400 }
.index a.nowords h2 { display: none }
.index a.wht { color: #fff }
.index a.main { color: #0b8974 }
.index a.light { color: #56d4ad }
.shortcut { overflow: hidden }
.shortcut a { position: relative; height: 25vw }
.shortcut a img { display: block; width: 101%; height: auto }
.shortcut a h3 { position: absolute; width: 100%; color: #fff; box-sizing: border-box; padding: 0 4vw; text-align: right; font-size: .9375rem; z-index: 99 }

@media(min-width:0) and (max-width:499px) {
.shortcut a h3 { top: 50%; transform: translateY(-50%); right: 0; width: 56% }
}
.shortcut a p { display: none }
.shortcut a.bk * { color: #333 }
.solution-index { padding-top: 2rem }
.solution-index a { box-sizing: border-box; padding: 0 0 3rem 0 }
.solution-index img { width: 50%; height: auto; margin: 0 auto 1rem auto }
.solution-index .info { text-align: center; padding: 0 }
.solution-index h3 { display: block; line-height: 1.25em; font-size: 1.375rem; color: #333; margin-bottom: 1rem; overflow: hidden; padding: 0; font-weight: 300 }
.solution-index p { display: block; color: #888; font-size: .9375rem; margin-bottom: 1rem }
.solution-index span { color: #56d4ad; line-height: 1.5em; vertical-align: text-top; opacity: .5 }
.news-index { background-color: #f9f9f9 }
.news-index img { float: left; width: 25% }
.news-index .news-info { float: left; width: 70%; margin-left: 5%; overflow: hidden }
.news-index .news-info * { width: 100% }
.news-index h4 { font-size: .9375rem; color: #555 }
.news-index .date { font-size: .75rem; line-height: 2em }
.news-index .link { height: 40px; line-height: 40px; box-sizing: border-box; overflow: hidden; font-weight: normal }

@media(min-width:0) and (max-width:860px) {
.news-index { text-align: center }
.news-index .title { margin-top: 2rem }
.news-index .title h3 { display: inline-block; width: auto }
.news-index .title .link { display: none }
.news-index .link { margin: 2rem auto; display: inline-block; width: auto; border: 1px solid #0b8974; border-radius: 20px; padding: 0 25px; text-align: center }
.news-index .col-3-p { width: 100%; border-bottom: 1px solid #eee; margin: 0; padding: 6% }
.news-index .col-3-p * { text-align: left }
.news-index h4 { font-size: .875rem }
.header-global { position: relative }
.header-global>.wrap { position: absolute; width: 100%; height: 100%; overflow: hidden; top: 0; left: 0; text-align: center; box-sizing: border-box; vertical-align: middle; display: inline-block }
.header-global>.wrap h2 { display: inline-block; box-sizing: border-box; vertical-align: middle; width: 98.5% }
.header-global>.wrap:before { content: ""; display: inline-block; height: 100%; vertical-align: middle }
}

@media(min-width:500px) {
.index a h2 { background-color: transparent }
.shortcut a { height: 35vw }
.shortcut a h3 { text-align: center; font-size: 1rem; line-height: 1.5em; padding-top: 2rem }
.news-index img { width: 16% }
.news-index .news-info { width: 79%; margin-left: 5% }
}

@media(min-width:680px) {
.index { height: 50vw }
.index a h2 { font-size: 1.5rem; letter-spacing: -0.75px }
.index a h2 span:nth-of-type(1) { font-size: .875em }
.index a.right h2 { right: 6%; width: 50%; top: 18vw; text-align: right }
.index a.left h2 { left: 6%; width: 50%; top: 18vw }
.index a.center h2 { left: 50%; text-align: center; width: 64%; margin-left: -32%; top: 20vw }
.index .slick-dots { bottom: 10px }
.shortcut { overflow: hidden }
.shortcut a { height: 27vw; overflow: hidden }
.shortcut a img { margin-top: -8vw }
.shortcut a h3 { font-size: 1.25rem; padding-top: 1rem }
.header-global p { font-size: .9375rem }
}

@media(min-width:860px) {
.index { height: 65vh }
.index a { height: 65vh }
.index a .slide-title { width: 100%; height: 100%; position: absolute; z-index: 150 }
.index a .wrap { height: 100%; overflow: hidden }
.index a .wrap:after { content: ""; width: 0; height: 100%; display: inline-block; vertical-align: middle; overflow: hidden }
.index a h2 { font-size: 1.75rem; display: inline-block; vertical-align: middle; position: static; box-sizing: border-box }
.index a h2 span { padding: 0; margin: 0; width: 100% }
.index a h2 span:first-of-type { margin-bottom: .5em }
.index a.right h2 { width: 45%; margin-left: 54%; text-align: right; padding-right: 6% }
.index a.left h2 { padding-left: 6% }
.index a.center h2 { margin: 0 auto }
.index a picture, .index a img { display: none }
.index .slick-dots { bottom: 15px }
.shortcut a { height: 27vh; min-height: 150px; background-repeat: no-repeat; background-size: cover; background-position: center bottom }
.shortcut a img { display: none }
.shortcut a h3 { position: static; text-align: center; width: 92%; top: 0; height: auto; margin: 2rem auto 5px auto; padding: 0; font-size: 1rem }
.solution-index { padding-top: 3rem; margin-bottom: 2rem }
.solution-index .wrap { width: 88%; margin: 0 auto; overflow: visible }
.solution-index .slick-prev { left: -50px }
.solution-index .slick-next { right: -50px }
.news-index .title { margin: 2rem auto; padding: .25em 0; border-bottom: 1px solid #eee }
.news-index .title h3 { float: left; width: 50%; margin-left: 6% }
.news-index .title .link { float: right; display: block; font-size: .8125rem; margin-right: 6% }
.news-index .link { display: none }
.news-index img { width: 25% }
.news-index .news-info { width: 70%; margin-left: 5% }
.header-global { height: 45vw; overflow: hidden; position: relative }
.header-global>.center-all { position: absolute; width: 100%; left: 0; top: 26vw; box-sizing: border-box }
}

@media(min-width:1025px) {
.index { height: 60vh }
.index a { height: 60vh }
.index a h2 { font-size: 2rem }
.index a.right h2 { padding-right: 0 }
.index a.left h2 { padding-left: 0 }
.shortcut a { height: 32vh; min-height: 260px }
.shortcut a h3 { font-size: 1.125rem }
.solution-index a { padding: 20px; padding-bottom: 3rem }
.solution-index img { margin-bottom: 2rem }
.news-index .title h3 { margin-left: 0 }
.news-index .title .link { margin-right: 0 }
.breadcrumb { padding: 1rem 0 }
}

@media(min-width:1290px) {
.index .slick-dots { bottom: 20px }
.shortcut a p { display: block; color: #fff; text-align: center; font-size: .8125rem; line-height: 1.25em; opacity: .8; width: 80%; margin: 0 auto }
.header-global { height: 32vw }
.header-global>.center-all { top: 15vw }
.header-global p { font-size: .9375rem }
}

@media(min-width:1400px) {
.index { height: 59vh; min-height: 450px }
.index a { height: 59vh; min-height: 450px }
.index a h2 { font-size: 2.25rem }
.shortcut a { min-height: 280px }
.shortcut a h3 { font-size: 1.375rem }
.solution-index a h3 { font-size: 1.5rem }
.header-global { height: 34vw }
}

@media(min-width:1620px) {
.index { height: 64vh; min-height: 600px }
.index a { height: 64vh; min-height: 600px }
.index a h2 { font-size: 2.75rem }
.shortcut a { height: 29vh }
.shortcut a h3 { font-size: 1.5rem }
.solution-index a h3 { font-size: 1.75rem }
.header-global { height: 30vw }
.header-global p { font-size: 1.125rem }
}
.fixbar-after { padding-top: 1rem }

@media(min-width:680px) {
.fixbar-after { padding-top: 5rem }
}
.form { box-sizing: border-box; overflow: hidden; padding: 0 6% 6% }
.form input, .form select, .form textarea, .form .form-cell { box-sizing: border-box; display: block; width: 100%; outline: 0; border: 0; float: left; font-family: "Open Sans", "PingFangSC-Regular", "Microsoft YaHei", sans-serif; padding: 0 6%; margin: 0; min-height: 45px; background-color: #fff; border-bottom: 1px solid #ccc; transition: color .3s ease, background-color .3s ease, border-color .3s ease }
.form input:focus, .form select:focus, .form textarea:focus, .form .form-cell:focus { background-color: white; color: #333; border-color: #f30054; font-weight: bold }
.form input.policy-check, .form select.policy-check, .form textarea.policy-check, .form .form-cell.policy-check { padding-top: 10px; padding-bottom: 5px; font-size: .8125rem }
.form input.policy-check label, .form select.policy-check label, .form textarea.policy-check label, .form .form-cell.policy-check label { padding: 0; height: 30px; margin-bottom: 0 }
.form input.policy-check span, .form select.policy-check span, .form textarea.policy-check span, .form .form-cell.policy-check span { line-height: 30px; margin-bottom: 0 }
.form input input.inline, .form select input.inline, .form textarea input.inline, .form .form-cell input.inline { width: auto }
.form input.last, .form select.last, .form textarea.last, .form .form-cell.last { border: 0; background-color: transparent; margin-top: 1rem; margin-bottom: 1rem }
.form select::-ms-expand {
display:none
}
.form input::-ms-clear {
display:none
}
.form .verify img { margin-top: 11px }
.form textarea { padding: 6% }
.form select { line-height: 45px; height: 45px; vertical-align: middle; -moz-appearance: none; -webkit-appearance: none; text-indent: 1px; text-overflow: ''; position: relative; background: #fff url("http://www.starpointcomm.com/img/contact/select.svg") right 15px center no-repeat; background-size: auto 26px }
.form .group-title { padding: 0; width: 100%; margin-top: .5em; line-height: 1.5em }
.form input[type="radio"], .form input[type="checkbox"] { display: none }
.form input[type="radio"]+label, .form input[type="checkbox"]+label { box-sizing: border-box; padding: 5px 0; display: block; float: left; cursor: pointer; vertical-align: middle; margin-bottom: 3vw; color: #666; -moz-transition: color .2s ease, background-color .2s ease; -o-transition: color .2s ease, background-color .2s ease; -webkit-transition: color .2s ease, background-color .2s ease; transition: color .2s ease, background-color .2s ease }
.form input[type="radio"]+label:before, .form input[type="checkbox"]+label:before { display: inline-block; background-size: auto 100px; width: 30px; height: 30px; background-position: -310px -10px; background-repeat: no-repeat }
.form input[type="radio"]:nth-of-type(2n+1)+label, .form input[type="checkbox"]:nth-of-type(2n+1)+label, .form div:nth-of-type(2n+1) { margin-right: 4% }
.form input[type="radio"]:nth-of-type(2n+1)+label.gentleman, .form input[type="checkbox"]:nth-of-type(2n+1)+label.gentleman, .form div:nth-of-type(2n+1).gentleman { margin-right: 0 }
.form input[type="radio"]:checked+label:before, .form input[type="checkbox"]:checked+label:before { background-position: -310px -60px; background-color: #fff }
.form .form-cell>input, .form .form-cell>select, .form .form-cell>textarea { margin-bottom: 0; padding: 0; background-color: transparent }
.form .f-3-1 { width: 48% }

@media(min-width:0) and (max-width:680px) {
.form .f-3-1.full { width: 100% }
}

@media(min-width:480px) {
.form { margin: 0 auto }
.group-title { font-weight: bold }
}

@media(min-width:680px) {
.form { padding: 0; margin-bottom: 3rem }
.form input, .form select, .form textarea, .form .form-cell { font-family: "Open Sans", "PingFangSC-Regular", "Microsoft YaHei", sans-serif; font-size: 14px; background-color: rgba(255,255,255,0.85); border-color: #eee; padding: 0 15px; margin-bottom: 1vw }
.form textarea { padding: 15px }
.form .form-cell.policy-check span { padding-left: 40px; font-size: .875rem }
.form .f-left, .form .f-right { width: 49%; margin-left: 2% }
.form .f-left { margin-left: 0 }
.form input[type="radio"]+label, .form input[type="checkbox"]+label { padding: .5rem 0; border: 0; margin-bottom: 0; background-color: transparent }
.form input[type="radio"]:nth-of-type(2n+1)+label, .form input[type="checkbox"]:nth-of-type(2n+1)+label, .form div:nth-of-type(2n+1) { margin-right: 0 }
.form input[type="radio"]:hover+label, .form input[type="checkbox"]:hover+label { color: #000 }
.form .f-3-1 { width: 33% }
}

@media(min-width:1290px) {
.form { padding: 0; margin-bottom: 3rem }
.form input, .form select, .form textarea, .form .form-cell { margin-bottom: 1vw }
}

@media(min-width:1400px) {
.form { margin-bottom: 3rem }
.form input, .form select, .form textarea, .form .form-cell { margin-bottom: 15px }
}
.tb-wrap { position: relative; background-color: #fff; margin: 1rem auto; width: 92% }
.tb-content { width: 100%; overflow-x: scroll; -webkit-overflow-scrolling: touch }
table { border-collapse: collapse }
table tr { width: 100%; padding: 10px 0 }
td { width: 33.33%; min-width: 33.33vw; box-sizing: border-box; padding: 6px 4vw; border-bottom: 1px solid #ececec; font-size: .875rem; min-width: 150px; background-color: #fff }
td img { display: inline-block; width: 90%; height: auto }
td:first-of-type { padding-left: 0; text-align: left; min-width: 150px; color: #878787 }
tr:nth-of-type(even) td { background-color: #f7f9f9 }
tr>td:last-of-type { border-right: 0 }
tr:last-of-type td { border-bottom: 0 }
.tb-col-2 td { width: 50% }
.tb-col-2 table { width: 100% }
.fix-left { position: absolute; left: 0; top: 0; box-sizing: border-box; -moz-box-sizing: border-box }
.fix-left span { display: inline-block; vertical-align: middle; padding: 0; margin: 0; overflow: hidden; border: 0; width: 1px }
.fix-left td { background-color: #fff; vertical-align: middle; padding-left: 0; padding-right: 0; color: #878787; font-weight: normal }

@media(min-width:680px) {
td { width: 25vw; min-width: 25vw; padding: 8px 20px }
.tb-col-3 td { width: 33.33% }
.tb-col-2 td, .tb-col-2 td:first-of-type { width: 50% }
}

@media(min-width:860px) {
td:first-of-type { min-width: 150px }
.tb-col-2 td, .tb-col-2 td:first-of-type { width: 50% }
}

@media(min-width:1025px) {
.tb-wrap { width: 100% }
.tb-content { overflow: hidden }
.tb-content.tb-col-8, .tb-content.tb-col-9, .tb-content.tb-col-10, .tb-content.tb-col-11, .tb-content.tb-col-12 { overflow-x: scroll }
td { width: auto; min-width: auto }
.tb-col-2 td, .tb-col-2 td:first-of-type { width: 50% }
.tb-col-4 td { width: auto }
.tb-col-4 td:nth-of-type(2), .tb-col-4 td:nth-of-type(3), .tb-col-4 td:nth-of-type(4) { width: 25% }
.tb-col-4 td:first-of-type { min-width: auto; width: auto }
.tb-col-5 td { width: auto }
.tb-col-6 td { width: 16.66% }
.tb-col-7 td { width: 14.28% }
.tb-col-3 table, .tb-col-4 table, .tb-col-5 table { width: 100% }
.tb-col-8 td, .tb-col-9 td, .tb-col-10 td, .tb-col-11 td, .tb-col-12 td { width: 15% }
td:first-of-type { min-width: 180px }
table td:first-of-type { width: auto; padding: 15px 0 }
.tb-col-2 table td, .tb-col-2 table td:first-of-type { width: 50% }
}

@media(min-width:1400px) {
td { font-size: .9375rem }
.tb-col-3 td:first-of-type { min-width: 300px }
}
.slick-slider { position: relative; display: block; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent }
.slick-slider * { outline: 0 }
.slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0 }
.slick-list:focus { outline: 0 }
.slick-list.dragging { cursor: pointer; cursor: hand }
.slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
.slick-track { position: relative; left: 0; top: 0; display: block }
.slick-track:before, .slick-track:after { content: ""; display: table }
.slick-track:after { clear: both }
.slick-loading .slick-track { visibility: hidden }
.slick-slide { float: left; height: 100%; min-height: 1px; display: none }
[dir="rtl"] .slick-slide { float: right }
.slick-slide img { display: block }
.slick-slide.slick-loading img { display: none }
.slick-slide.dragging img { pointer-events: none }
.slick-initialized .slick-slide { display: block }
.slick-loading .slick-slide { visibility: hidden }
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent }
.slick-arrow.slick-hidden { display: none }
.slick-prev, .slick-next { position: absolute; width: 60px; height: 60px; background-color: transparent; border-radius: 50%; display: block; overflow: hidden; top: 50%; margin-top: -30px; outline: 0; border: 0; text-indent: -9999px }
.slick-prev { left: -30px; z-index: 21; cursor: pointer; display: block; background-size: auto 120px; width: 60px; height: 60px; background-position: -660px 0; background-repeat: no-repeat }
.slick-prev:hover { background-size: auto 120px; background-position: -660px -60px }
.slick-next { right: -30px; z-index: 23; cursor: pointer; display: block; background-size: auto 120px; width: 60px; height: 60px; background-position: -600px 0; background-repeat: no-repeat }
.slick-next:hover { background-size: auto 120px; background-position: -600px -60px }
.slick-dots { position: absolute; bottom: 10px; list-style: none; display: block; text-align: center; padding: 0; width: 100%; z-index: 1005 }
.slick-dots li { display: inline-block; height: 10px; width: 10px; margin: 0 5px 10px 5px; padding: 0; cursor: pointer; background: 0 }
.slick-dots li button { border: 0; background: transparent; display: block; height: 4px; width: 4px; outline: 0; line-height: 0; font-size: 0; padding: 0; margin: 3px; cursor: pointer; background-color: #666; border-radius: 50%; opacity: .6; transition: width .2s ease, height .2s ease, margin .2s ease; -webkit-transition: width .2s ease, height .2s ease, margin .2s ease }
.slick-dots li.slick-active button { border: 0; background: transparent; display: block; border: 1px solid #666; height: 8px; width: 8px; padding: 0; margin: 1px; border-radius: 50%; background-color: transparent; opacity: 1 }
.slide-nav { width: 100%; margin: 0 auto; max-height: 85px; padding: 1rem 0; box-sizing: border-box }
.slide-nav .slick-prev { width: 10%; left: -15% }
.slide-nav .slick-next { width: 10%; right: -15% }

@media(min-width:680px) {
.slick-dots li { height: 20px; width: 20px; margin: 0 5px }
.slick-dots li button { height: 6px; width: 6px; margin: 7px }
.slick-dots li.slick-active button { height: 12px; width: 12px; margin: 4px }
.slick-prev { left: -80px }
.slick-next { right: -80px }
}

@media(min-width:860px) {
.slick-prev { left: -50px }
.slick-next { right: -50px }
}

@media(min-width:1025px) {
.slick-prev { left: -60px }
.slick-next { right: -60px }
}

@media(min-width:1400px) {
.slick-prev { left: -80px }
.slick-next { right: -80px }
}
.header-pro-ov h1 { font-weight: 600 }
.header-pro-ov img { display: block; width: 100%; height: auto }
.filter { width: 76%; float: left; box-sizing: border-box }
.filter select { display: block; position: relative; line-height: 42px; height: 42px; width: 33.33%; box-sizing: border-box; outline: 0; border: 1px solid #e9e9e9; border-left: 0; color: #666; padding: 0 10px; float: left; background: 0; -webkit-appearance: none; background: #fff url("http://www.starpointcomm.com/img/contact/select.svg") right 15px center no-repeat; background-size: auto 26px }
.filter select:focus::-ms-value {
background-color:#fff;
color:#666
}
.filter select:nth-of-type(3n+1) { border-left: 1px solid #e9e9e9 }
.filter-btn { display: none }
.filter-btn:after { content: "" }
.visible { overflow: visible }
.view-mode { box-sizing: border-box; width: 22%; float: left; margin-left: 2%; overflow: visible }
.view-mode.bottom { display: none }
.view-mode a, .view-mode span { line-height: 42px; height: 42px; float: left; margin-left: 5px }
.view-mode .view-block { display: inline-block; background-size: auto 120px; width: 42px; height: 42px; background-position: -129px -9px; background-repeat: no-repeat; display: none }
.view-mode .view-list { display: inline-block; background-size: auto 120px; width: 42px; height: 42px; background-position: -189px -9px; background-repeat: no-repeat; display: none }
.view-mode .compare { background-color: #ccc; color: #fff; cursor: pointer; border-radius: 4px; box-sizing: border-box; padding: 0; width: 60%; float: right; font-size: .9375rem; font-weight: 300; color: #fff; cursor: default; text-align: center; transition: border-color .3s ease, color .3s ease, background-color .3s ease; position: relative; overflow: visible }
.view-mode .compare em { font-weight: 600; margin-left: 5px; display: none }
.view-mode .compare:before { content: "请选择产品来比较"; font-size: .9375rem; height: 32px; line-height: 31px; display: inline-block; visibility: visible; opacity: 1; transition: visibility 0s, opacity .3s ease; position: absolute; top: 0; left: 50%; margin: 60px 0 0 -110px; width: 220px; color: #999; font-weight: 400; border-radius: 5px; background-color: rgba(255,255,255,0.9) }
.view-mode .compare.selected { background-color: #0b8974; color: #fff; cursor: pointer }
.view-mode .compare.selected em { display: inline-block }
.view-mode .compare.selected:before { font-size: .9375rem; font-weight: 300; visibility: hidden; opacity: 0 }
.view-mode .clean { float: right; font-size: .9375rem; font-weight: 300; color: #fff; background-color: #999; transition: background-color .3s ease; border-radius: 4px; padding: 0 10px; width: auto; box-sizing: border-box; cursor: pointer }
.view-mode .clean.hide { display: none }
.view-mode .clean:hover { background-color: #000 }
.sbyt { display: block; width: 80px; height: 180px; background: url("http://www.starpointcomm.com/img/layout/btn-search.svg") no-repeat right center; background-size: 100% auto; box-sizing: border-box; text-indent: -9999px; padding: 0; opacity: 1; transition: width .3s, height .3s }
.sbyt:hover { width: 100px; height: 220px }
.goback:before { display: inline-block; background-size: auto 40px; width: 20px; height: 20px; background-position: -420px -20px; background-repeat: no-repeat; vertical-align: bottom; margin-right: 8px; border-radius: 50%; background-color: #ddd; transition: background-color .15s }
.goback:hover:before { background-color: #fff }
.gotop:before { display: inline-block; background-size: auto 40px; width: 20px; height: 20px; background-position: -420px 0; background-repeat: no-repeat; vertical-align: bottom; margin-right: 8px; border-radius: 50%; background-color: #ddd; transition: background-color .15s }
.gotop:hover:before { background-color: #fff }
.content-pro-ov .btn-add { display: block; overflow: hidden; border-top: 1px solid #EEE; line-height: 40px; width: 100%; font-size: .9375rem; color: #999; text-align: left; transition: background-color .3s ease; -webkit-transition: background-color .3s ease; margin-top: 1rem }
.content-pro-ov .btn-add:before { content: ""; display: inline-block; background-size: auto 80px; width: 40px; height: 40px; background-position: -240px 0; background-repeat: no-repeat; vertical-align: middle }
.content-pro-ov .btn-add:after { content: "添加到比较"; display: inline-block; vertical-align: middle; transition: color .3s ease }
.content-pro-ov .col-f-p { outline: 0 }
.content-pro-ov .col-f-p div p { font-size: .8125rem; word-break: normal }
.content-pro-ov .col-f-p h3 { margin-bottom: .5em }
.content-pro-ov .col-f-p.add .btn-add:before { background-position: -240px -40px }
.content-pro-ov .col-f-p.add .btn-add:after { color: #0b8974 }
.content-pro-ov .col-f-p.new-icon h3:after { content: "New"; font-size: .75rem; font-family: "Open Sans", "PingFangSC-Regular", "Microsoft YaHei", sans-serif; margin-left: 10px; background-color: #0b8974; box-sizing: border-box; padding: 0 5px 0 5px; color: #fff; display: inline-block; line-height: 1.5em; border-radius: 4px; margin-top: -2px; margin-bottom: .2em; vertical-align: bottom }
.header-pro-detail { border-top: 1px solid #eee }
.header-pro-detail .wrap { overflow: visible }
.header-pro-detail .slide { padding-bottom: 30px; box-sizing: border-box; padding-left: 20px; padding-right: 20px }
.header-pro-detail .intro { padding-bottom: 25px }
.header-pro-detail .intro ol, .header-pro-detail .intro ul { list-style: none; padding: 0 }
.header-pro-detail .intro li { color: #333; background-image: url("http://www.starpointcomm.com/img/layout/list-style.svg"); background-position: left 6px; background-repeat: no-repeat; padding: 0 0 0 32px }
.header-pro-detail .intro li ul { margin-top: .5em }
.header-pro-detail .intro li ul li { background-image: url("http://www.starpointcomm.com/img/layout/second-list-style.svg") }
.header-pro-detail h2 { color: #666; margin-top: 0; margin-bottom: 0; font-size: .9375rem }
.header-pro-detail h1 { margin-top: 0; margin-bottom: .25em }
.header-pro-detail li { font-size: .9375rem; color: #777 }
.header-megasearch { background-color: #f0f0f0; padding: 2rem 0 0 0 }
.header-megasearch .mglogo { float: left; width: 24%; overflow: hidden; background-color: #eee; text-align: center }
.header-megasearch .mglogo:before { content: ""; display: inline-block; background-size: auto 300px; width: 150px; height: 150px; background-position: -1800px -150px; background-repeat: no-repeat }
.header-megasearch ul { display: block; box-sizing: border-box; float: left; width: 100% }
.header-megasearch li { display: block; width: 30.6%; margin-left: 2%; margin-bottom: 10px; padding: 3px 15px; float: left; text-align: left; position: relative; box-sizing: border-box; border-radius: 5px; cursor: pointer; background-color: rgba(255,255,255,0.5) }
.header-megasearch li span { display: block; background-size: auto 60px; width: 36px; height: 36px; background-position: -267px -27px; background-repeat: no-repeat; position: absolute; top: 50%; right: 4%; margin: -18px 0 0 0; z-index: 56; display: block; visibility: hidden; opacity: 0; transition: visibility 0s, opacity .15s }
.header-megasearch li.select { color: #0b8974; background-color: white }
.header-megasearch li.select strong { font-weight: 500 }
.header-megasearch li.select span { visibility: visible; opacity: 1 }
.header-megasearch li img { display: inline-block; vertical-align: middle; width: 20%; height: auto; margin: 0 }
.header-megasearch li strong { width: 72%; margin-left: 5%; display: inline-block; vertical-align: middle; font-weight: 400 }
.header-megasearch li p { width: 100%; margin: 0 0 5px 0; display: block; float: left; box-sizing: border-box; visibility: hidden; opacity: 0; height: 0; transition: visibility 0s, opacity .3s, height .3s }
.header-megasearch:after { content: ""; width: 100%; display: block; height: 20px }
.tech-tags a { display: inline-block; width: 48px; height: 48px; margin-right: 10px }
.tech-tags img { display: block; width: 100%; height: auto }
.rel-products { border-top: 1px solid #eee; padding-top: 1rem; overflow: visible }
.rel-products .slick-slider { padding-bottom: 50px }
.rel-products img { display: block; width: 100%; height: auto }
.rel-products h5 { color: #666; text-align: center; font-size: .8125rem }
.no-result { margin: 1rem auto 5rem auto; color: #0b8974; vertical-align: middle; border: 1px solid #0b8974; border-radius: 5px; display: table; width: auto; font-weight: bold; padding: 20px 20px; box-sizing: border-box; max-width: 90%; text-align: center }
.no-result:before { display: inline-block; background-size: auto 100px; width: 50px; height: 50px; background-position: -750px -50px; background-repeat: no-repeat; vertical-align: middle; display: block; margin: 0 auto }
.no-result:after { content: "." }
.edit .spec { border: 0; margin-bottom: 2rem }
.edit .spec ul { display: block; width: 88%; margin: 0 auto }
.edit .spec li { display: block; overflow: hidden; line-height: 1.25em; padding: .75em 0; margin-bottom: 0; border-bottom: 1px solid #eee; color: #666; background: 0 }
.edit .spec li span { display: block; float: left; width: 50%; padding: 0; margin: 0 }
.edit .spec .btn-open { display: none }
.edit .spec.download li { position: relative; overflow: hidden }
.edit .spec.download li span { display: inline-block; width: auto; box-sizing: border-box; vertical-align: text-bottom }
.edit .spec.download li span:nth-of-type(1) { color: #999; width: 100%; margin: 0 }
.edit .spec.download li span:nth-of-type(2) { font-weight: 600; color: #333; width: auto }
.edit .spec.download li span:nth-of-type(3) { display: block; width: auto; margin: 0 0 0 10px; font-size: .875rem; border: 1px solid #ccc; border-radius: 3px; color: #999; padding: 0 5px }
.edit .spec.download li a { display: block; width: 100%; text-indent: -9999px; position: absolute; right: 0; top: 10px; width: 60px; height: 40px; overflow: hidden; font-size: 0 }
.edit .spec.download li a:before { display: block; background-size: auto 100px; width: 40px; height: 40px; background-position: -905px -5px; background-repeat: no-repeat; float: right; margin-right: 3px }
.edit .spec.download li a:active:before { background-size: auto 100px; background-position: -905px -55px }

@media(min-width:0) and (max-width:859px) {
.edit .spec.area-top { padding-top: 0 }
}
.edit .spec .select-btn { text-align: center; vertical-align: middle; margin-bottom: .75em; font-size: 0; position: relative }
.edit .spec .select-btn:after { content: ""; display: block; width: 100%; height: 1px; background-color: #0b8974; z-index: -1; position: absolute; bottom: 0 }
.edit .spec .select-btn a { display: inline-block; vertical-align: bottom; box-sizing: border-box; color: #999; height: 38px; line-height: 36px; padding: 0 20px; margin: 0; border: 1px solid #ddd; border-radius: 5px 5px 0 0; border-bottom: 1px solid transparent; font-size: 1rem; transition: border-color .3s ease, font-size .3s ease, height .3s ease }
.edit .spec .select-btn a.current { height: 45px; line-height: 43px; font-weight: bold; font-size: 1.25rem; color: #0b8974; border: 1px solid #0b8974; border-bottom: 1px solid #fff }
.edit .spec .select-spec ul { display: none }
.edit .spec .select-spec ul.current { display: block }
.compare-wrap { padding-top: 0; border-top: 1px solid #eee; opacity: 0; transition: opacity .5s ease }
.compare-wrap:after { content: "Loading"; display: block; position: absolute }
.compare-wrap.show { opacity: 1 }
.compare-wrap.show:after { display: none }
.compare-wrap .compare-title { background-color: #eee; padding: 5px 0 }
.compare-wrap .output { float: right; width: 50%; margin: 0; text-align: right }
.compare-wrap a.back { float: left }
.compare-wrap a.back span { width: auto; display: inline-block; vertical-align: middle; margin: 0; font-size: .875rem }
.compare-wrap a.back:before { display: inline-block; background-size: auto 52px; width: 26px; height: 32px; background-position: -286px -23px; background-repeat: no-repeat; vertical-align: middle; margin-left: 10px }
.compare-wrap a.pdf { margin-right: 15px }
.compare-wrap a.pdf span { width: auto; display: inline-block; vertical-align: middle; margin: 0; font-size: .875rem }
.compare-wrap a.pdf:before { display: inline-block; background-size: auto 90px; width: 32px; height: 32px; background-position: -321.5px -6.5px; background-repeat: no-repeat; vertical-align: middle }
.compare-wrap a.xls { margin-right: 15px }
.compare-wrap a.xls span { width: auto; display: inline-block; vertical-align: middle; margin: 0; font-size: .875rem }
.compare-wrap a.xls:before { display: inline-block; background-size: auto 90px; width: 32px; height: 32px; background-position: -366.5px -6.5px; background-repeat: no-repeat; vertical-align: middle }

@media(min-width:0) and (max-width:499px) {
.content-pro-ov .btn-add { border: 0; width: 13%; position: absolute; left: 6%; top: 0; right: 0; height: 100%; overflow: hidden; left: auto; bottom: auto; padding: 0; margin: 0; border-left: 1px solid #eee }
.content-pro-ov .btn-add:before { display: block; background-size: auto 80px; width: 40px; height: 40px; background-position: -240px 0; background-repeat: no-repeat; border: 0; padding: 0; margin-top: -20px; position: absolute; top: 50% }
.content-pro-ov .btn-add:after { display: none }
.content-pro-ov .col-f-p { border-bottom: 1px solid #eee; padding-top: 1rem; padding-bottom: 1rem; position: relative }
.content-pro-ov .col-f-p:nth-of-type(1) { border-top: 1px solid #eee }
.content-pro-ov .col-f-p img { width: 32%; height: auto; float: left }
.content-pro-ov .col-f-p div { float: left; width: 58% }
.content-pro-ov .col-f-p div p { line-height: 1.25em; font-size: .75rem }
.content-pro-ov .col-f-p div * { padding: 0; margin: 0; width: 100% }
}

@media(min-width:0) and (max-width:680px) {
.header-megasearch { padding: 0; background-color: #fff }
.header-megasearch li { width: 100%; padding: 3px 6%; margin: 0; border-radius: 0; border: 0; border-bottom: 1px solid #eee; font-size: .9375rem; box-sizing: border-box }
.header-megasearch li:first-of-type { border-top: 1px solid #eee }
}

@media(min-width:0) and (max-width:680px) and (min-width:500px) and (max-width:680px) {
.header-megasearch li { width: 50% }
.header-megasearch li:nth-of-type(2) { border-top: 1px solid #eee }
.header-megasearch li:nth-of-type(2n+1) { border-right: 1px solid #eee; clear: left }
}

@media(min-width:0) and (max-width:680px) {
.header-megasearch li.select { background-color: transparent; border-color: #eee }
.header-megasearch img { max-width: 36px }
}

@media(min-width:0) and (max-width:859px) {
.header-pro-ov .wrap-xs { display: none }
.header-pro-ov .wrap { position: absolute; height: 100%; width: 100%; z-index: 88 }
.header-pro-ov .wrap h1 { display: inline-block; vertical-align: middle }
.filter-wrap { position: static; z-index: 900; height: 41px; background-color: #fff; border-bottom: 1px solid #0b8974; padding-top: 0; transition: height .25s ease; -webkit-transition: height .25s ease }
.filter-wrap>div { display: none }
.filter-wrap .filter-btn { display: block; cursor: pointer; height: 40px; line-height: 40px; width: 100%; color: #0b8974; text-align: center; overflow: hidden; top: 0; left: 0; vertical-align: middle }
.filter-wrap .filter-btn:after { display: inline-block; background-size: auto 50px; width: 25px; height: 25px; background-position: -25px 0; background-repeat: no-repeat; vertical-align: middle }
.filter-wrap.fixed { position: fixed; top: 0 }
.filter-wrap.open { height: 120px }
.filter-wrap.open>div { display: block; padding-top: 15px; padding-bottom: 15px }
.filter-wrap.open .filter-btn:after { background-size: auto 50px; background-position: -25px -25px }
.filter-wrap.dram.open { height: 160px }
.filter { width: 88%; margin-left: 6% }
.header-pro-detail .intro { padding-bottom: 25px }
.header-pro-detail h2 { color: #666; margin-top: 0; margin-bottom: 0; font-size: .9375rem }
.header-pro-detail h1 { margin-top: 0; margin-bottom: .25em }
.header-pro-detail p { font-size: 1rem; line-height: 1.375em }
.view-mode { width: 88%; display: none }
.view-mode.bottom { margin: 0; width: 100%; padding: 0 6%; display: block; position: fixed; bottom: 0; z-index: 998 }
.view-mode.bottom .clean { width: 30%; display: block; float: left; text-align: center }
.view-mode.bottom .compare { width: 65% }
.view-mode.bottom .compare:before { display: none }
.edit .spec { border-top: 1px solid #0b8974; margin-bottom: 0; position: relative }
.edit .spec ul { display: none; font-size: .875rem }
.edit .spec ul.open { display: block }
.edit .spec h3 { cursor: pointer; margin-top: 0; margin-bottom: 0; height: 45px; line-height: 45px; font-size: 1.125rem }
.edit .spec .btn-open { cursor: pointer; display: block; width: 45px; height: 45px; overflow: hidden; position: relative; font-size: 0; position: absolute; right: 6%; top: 0 }
.edit .spec .btn-open:before { display: block; position: absolute; content: ""; width: 45px; height: 45px; background-image: url("http://www.starpointcomm.com/img/layout/iconset.svg"); background-repeat: no-repeat; background-size: auto 60px; background-position: -22.5px 7.5px }
.edit .spec .btn-open.open:before { background-size: auto 60px; background-position: -22.5px -22.5px }
}

@media(min-width:500px) and (max-width:679px) {
.header-pro-detail .slide { padding-left: 100px; padding-right: 100px }
}

@media(min-width:680px) {
.header-pro-detail h2 { font-size: 1.125rem }
.header-pro-detail h1 { font-size: 2.5rem }
.header-pro-detail .slide { padding-left: 150px; padding-right: 150px }
.compare-wrap { padding-top: 0 }
.compare-wrap a.back:before { display: inline-block; background-size: auto 64px; width: 32px; height: 40px; background-position: -352px -28px; background-repeat: no-repeat; margin-left: 15px }
.compare-wrap a.pdf { margin-right: 30px }
.compare-wrap a.pdf:before { display: inline-block; background-size: auto 96px; width: 40px; height: 40px; background-position: -340px -4px; background-repeat: no-repeat }
.compare-wrap a.xls { margin-right: 30px }
.compare-wrap a.xls:before { display: inline-block; background-size: auto 96px; width: 40px; height: 40px; background-position: -388px -4px; background-repeat: no-repeat }
.header-megasearch li img { max-width: 40px }
}

@media(min-width:860px) {
.header-pro-ov { box-sizing: border; min-height: 150px; height: 20vh; background-repeat: no-repeat; background-position: center center; background-size: cover }
.header-pro-ov img { display: none }
.header-pro-ov .wrap { height: 100% }
.header-pro-ov .wrap:after { content: ""; display: inline-block; vertical-align: middle; height: 100% }
.header-pro-ov h1 { content: ""; display: inline-block; vertical-align: middle; width: 99% }
.dram .filter select { width: 16.66% }
.filter-wrap { position: absolute; margin-top: 30px; padding: 0; transition: background-color .3s ease }
.filter-wrap .wrap { padding: 0 5%; box-sizing: border-box; overflow: visible }
.filter-wrap.fixed { position: fixed; height: 64px; top: 0; border-bottom: 1px solid #eee; background-color: #eee; margin-top: 0; padding-bottom: 10px; padding-top: 10px; overflow: visible; z-index: 999 }
.header-pro-detail { padding-top: 2rem; padding-bottom: 2rem }
.header-pro-detail .slide { width: 32.8%; float: left; margin-left: 6%; padding-right: 0; padding-left: 0 }
.header-pro-detail .intro { width: 49.2%; float: left; margin-left: 6% }
.header-pro-detail h2 { font-size: 1.25rem }
.header-pro-detail h1 { font-size: 3rem }
.header-pro-detail li { padding-left: 6%; margin-bottom: .375em }
.header-pro-detail li:before { margin: .5rem .5rem 0 0 }
.content-pro-ov { margin-top: 30px }
.content-pro-ov.megasearch { margin-top: 30px }
.content-pro-ov .col-f-p { padding: 1rem; border: 1px solid #fff; transition: border-color .3s ease; -webkit-transition: border-color .3s ease }
.content-pro-ov .col-f-p.add { border: 1px solid #0b8974 }
.edit .spec { margin-bottom: 3rem }
.edit .spec ul { width: 100% }
}

@media(min-width:1025px) {
.btn-add:hover { background-color: #eee }
.header-pro-detail .slide { width: 38%; margin-left: 0; padding: 0 3% }
.header-pro-detail .intro { width: 56%; margin-left: 6% }
.edit .spec li { transition: background-color .05s; -webkit-transition: background-color .05s }
.edit .spec li:hover { background-color: #f9f9f9 }
.filter-wrap .wrap { padding: 0 }
.compare-wrap { padding-top: 10px }
.compare-wrap .compare-title { background-color: transparent; padding-bottom: 10px; border-bottom: 1px solid #0b8974 }
.compare-wrap a.back span { font-size: .9375rem }
.compare-wrap a.back:before { margin-left: 0 }
.compare-wrap a.pdf { margin-right: 30px }
.compare-wrap a.pdf span { font-size: .9375rem }
.compare-wrap a.xls { margin-right: 0 }
.compare-wrap a.xls span { font-size: .9375rem }
.header-megasearch { overflow: visible }
.header-megasearch .wrap { overflow: visible }
.header-megasearch:after { height: 30px; clear: both }
.header-megasearch li { width: 23.5%; margin-left: 2%; transition: background-color .2s, opacity .2s; position: relative }
.header-megasearch li:before { content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 0 8px 8px 8px; border-color: transparent transparent #0b8974 transparent; position: absolute; left: 50%; margin-left: -8px; top: 45px; visibility: hidden; opacity: 0; transition: visibility 0s, opacity .1s ease }
.header-megasearch li:after { content: attr(data-info); display: block; position: absolute; z-index: 988; width: 100%; margin-top: 8px; left: 0; font-size: .8125rem; line-height: 1.5em; overflow: hidden; background-color: #fff; border: 1px solid #eee; border-top: 3px solid #0b8974; color: #666; box-sizing: border-box; padding: 20px; border-radius: 6px; visibility: hidden; opacity: 0; transition: visibility 0s, opacity .2s }
.header-megasearch li:hover { background-color: white }
.header-megasearch li:hover:after { visibility: visible; opacity: 1 }
.header-megasearch li:hover:before { visibility: visible; opacity: 1 }
.header-megasearch li:nth-of-type(4n+1) { margin-left: 0; clear: left }
}

@media(min-width:1290px) {
.content-pro-ov .col-f-p.new-icon h3:after { margin-bottom: .4em }
.header-pro-ov { min-height: 200px; font-size: 1rem }
.header-pro-detail li { padding-bottom: .375em }
.filter-wrap.fixed { height: 70px; padding-bottom: 15px; padding-top: 15px }
}

@media(min-width:1400px) {
.header-pro-detail { padding-top: 3rem }
.header-pro-detail .slide { width: 45%; padding-left: 6%; padding-right: 6% }
.header-pro-detail .intro { width: 50%; margin-left: 5% }
.header-pro-detail h2 { font-size: 1.375rem }
.header-pro-detail h1 { font-size: 3.25rem }
.compare-wrap { padding-top: 10px }
.compare-wrap .compare-title { background-color: transparent; padding-bottom: 10px; border-bottom: 1px solid #0b8974 }
.compare-wrap a.back:before { display: inline-block; background-size: auto 72px; width: 36px; height: 45px; background-position: -396px -31.5px; background-repeat: no-repeat }
.compare-wrap a.pdf:before { display: inline-block; background-size: auto 108px; width: 45px; height: 45px; background-position: -382.5px -4.5px; background-repeat: no-repeat }
.compare-wrap a.xls:before { display: inline-block; background-size: auto 108px; width: 45px; height: 45px; background-position: -436.5px -4.5px; background-repeat: no-repeat }
.filter select { width: 33.33% }
.rel-products { padding-top: 2rem }
.rel-products .wrap { margin-bottom: 2rem; overflow: visible }
.rel-products h5 { font-size: 1rem }
}

@media(min-width:1400px) {
.header-pro-ov { min-height: 240px }
.content-pro-ov h3 { font-size: 1.375rem }
.header-pro-detail li { font-size: .9375rem; line-height: 1.5em }
}
.app-ov { box-sizing: border-box }
.app-ov h3 { font-weight: 300 }
.header-app-detail { border-bottom: 1px solid #eee }
.header-app-detail .wrap { box-sizing: border-box; padding-top: 10px; padding-bottom: 10px }
.header-app-detail p { font-style: italic }

@media(min-width:680px) {
.app-wrap { background: #f2f6f8; background: -moz-linear-gradient(top, #f2f6f8 15%, #f2f6f8 15%, white 100%); background: -webkit-linear-gradient(top, #f2f6f8 15%, #f2f6f8 15%, white 100%); background: linear-gradient(to bottom, #f2f6f8 15%, #f2f6f8 15%, #fff 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f6f8', endColorstr='#ffffff', GradientType=0)
}
}

@media(min-width:1025px) {
.app-ov { padding-top: 2rem; padding-bottom: 2rem }
.app-ov .col-3-p { width: 32%; margin: 0 0 2% 2% }
.app-ov .col-3-p:nth-of-type(3n+1) { margin: 0 0 2% 0 }
.app-ov a { position: relative; overflow: hidden }
.app-ov a:hover img { transform: scale(1.5); -webkit-transform: scale(1.5) }
.app-ov a:hover p { visibility: visible; height: auto; opacity: 1; transform: translateY(10px) }
.app-ov a:hover h3 { transform: translateY(-20px); font-size: 1.5rem }
.app-ov a:hover div { background-color: rgba(0,0,0,0.8) }
.app-ov div { background-color: rgba(0,0,0,0.2); left: 0; top: 0; position: absolute; width: 100%; height: 100%; color: #fff; transition: background-color .3s ease; -webkit-transition: background-color .3s ease }
.app-ov p { box-sizing: border-box; padding: 0 30px; position: absolute; top: 45%; visibility: hidden; display: block; height: 0; opacity: 0; text-align: center; color: #fff; transform: translateY(100px); transition: visibility 0s, height .3s ease, opacity .3s ease, transform .3s ease; -webkit-transition: visibility 0s, height .3s ease, opacity .3s ease, transform .3s ease }
.app-ov h3 { box-sizing: border-box; text-align: center; padding: 0 30px; position: absolute; bottom: 50%; color: #fff; transform: translateY(30px); display: block; font-size: 1.75rem; text-shadow: 0 0 10px rgba(10,10,10,0.9); transition: color .3s ease, font-size .3s ease, transform .3s ease; -webkit-transition: color .3s ease, font-size .3s ease, transform .3s ease }
.app-ov img { transition: transform .5s ease; -webkit-transition: transform .5s ease }
.header-app-detail { border: 0 }
.header-app-detail .wrap { padding-top: 0; padding-bottom: 0 }
.header-app-detail h1, .header-app-detail h2, .header-app-detail h3, .header-app-detail p { color: #fff }
}

@media(min-width:1400px) {
.app-ov a:hover h3 { font-size: 1.75rem }
.app-ov h3 { padding: 0 30px; font-size: 2.25rem }
}

@media(min-width:1620px) {
.app-ov h3 { padding: 0 50px }
.app-ov p { padding: 0 50px }
}
.tech-ov { box-sizing: border-box }
.tech-ov h3 { font-weight: 300 }
.tech-ov img { display: block; width: 100%; height: auto }
.tech-ov .more { border: 1px solid #0b8974; width: auto; padding: 2px 6px; border-radius: 3px; display: inline-block; font-size: .8125rem; margin-top: 10px }
.header-tech { background: #009687; background: -moz-linear-gradient(45deg, #009687 0, #6de4b7 81%); background: -webkit-linear-gradient(45deg, #009687 0, #6de4b7 81%); background: linear-gradient(45deg, #009687 0, #6de4b7 81%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#009687', endColorstr='#6de4b7', GradientType=1)
}
.header-tech img { display: block; width: 100%; height: auto; margin: -26vw auto 0 }
.title-tech-detail { color: #fff }
.title-tech-detail h1 { color: #fff }
.title-tech-detail p { color: #fff; opacity: .8 }
.tech-wrap { background: #f2f6f8; background: -moz-linear-gradient(top, #f2f6f8 15%, #f2f6f8 15%, white 100%); background: -webkit-linear-gradient(top, #f2f6f8 15%, #f2f6f8 15%, white 100%); background: linear-gradient(to bottom, #f2f6f8 15%, #f2f6f8 15%, #fff 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f6f8', endColorstr='#ffffff', GradientType=0)
}
.filter-note { margin-top: 1rem; color: #0b8974; font-style: italic }
.filter-note.hide { display: none }
.filter-note span { border-bottom: 1px dotted #666; display: inline-block; width: auto; text-align: center; line-height: 1.5em }

@media(min-width:0) and (max-width:860px) {
.title-tech-detail { margin-top: -80px; margin-bottom: 15px }
}

@media(min-width:0) and (max-width:1025px) {
.ov .col-3-p { padding-bottom: 1.25em }
.ov .col-3-p h3 { padding-top: .75em; line-height: 1.25em; font-weight: 400; padding-bottom: .5em }
.ov .col-3-p p { font-size: .9375rem; line-height: 1.375em }
}

@media(min-width:500px) {
.ov .col-3-p h3 { text-align: center }
}

@media(min-width:680px) {
.header-tech img { width: 60%; max-width: 720px; margin: -16vw auto 0 }
}

@media(min-width:860px) {
.header-tech { position: relative }
.tech-ov .more { padding: 4px 8px; border-radius: 4px; font-size: .875rem }
}

@media(min-width:1025px) {
.tech-ov h3 { line-height: 1.25em; padding-bottom: .75em }
.tech-ov h3:after { content: ""; display: block; width: 20px; height: 1px; background-color: #ccc; overflow: hidden; margin: .75em auto 0 }
.tech-ov .more { transition: background-color .25s, color .25s }
.tech-ov .more:hover { background-color: #0b8974; color: #fff }
}

@media(min-width:1290px) {
.header-tech img { width: 40%; margin: -9vw auto 0 }
.header-tech.header-global>.center-all { top: 17vw }
}

@media(min-width:1400px) {
.header-tech img { width: 40% }
.demo img { max-width: 1500px; margin: 0 auto }
}

@media(min-width:1620px) {
.header-tech img { width: 36% }
}
.header-contact { box-sizing: border-box; margin: 2rem auto; height:140px; background:none;}
.contact { background: transparent url("../image/bg-contact.jpg") center center no-repeat; background-size: cover }
.subtitle { font-size: 1.5rem; line-height: 1.5rem }
.remark { text-decoration: underline; font-size: 1.25rem }
.privacy-policy { position: fixed; visibility: hidden; opacity: 0; bottom: -100vh; width: 100%; height: 100%; transition: visibility 0s linear .4s, opacity .3s ease, transform .3s ease; z-index: 9999 }

@media(min-width:860px) {
.privacy-policy { background-color: rgba(0,0,0,0.8) }
}
.privacy-policy.show { visibility: visible; opacity: 1; transform: translateY(-100vh); -webkit-transform: translateY(-100vh); overflow: hidden; overflow-y: auto; transition-delay: 0s }
.privacy-policy .wrap-s { box-sizing: border-box; padding: 50px 25px 0 25px; background-color: rgba(255,255,255,0.9); margin-top: 0; margin-bottom: 0; position: relative }

@media(min-width:680px) {
.privacy-policy .wrap-s { padding: 50px 50px 20px 50px }
}

@media(min-width:860px) {
.privacy-policy .wrap-s { background-color: #fff; border-radius: 10px; margin-top: 50px; margin-bottom: 50px }
}

@media(min-width:1290px) {
.privacy-policy .wrap-s { padding: 70px 70px 30px 70px }
}
.privacy-policy h2 { font-size: 1.375rem }
.privacy-policy p { font-size: .875rem; line-height: 1.25em }
.privacy-policy .icon-close { display: block; background-size: auto 100px; width: 50px; height: 50px; background-position: -600px -50px; background-repeat: no-repeat; position: absolute; right: 30px; top: 20px; cursor: pointer }
.privacy-policy .btn { margin: 0 auto; cursor: pointer }
.privacy-policy .center { text-align: center }
html.fixed, body.fixed { overflow-y: hidden }

@media(min-width:500px) and (max-width:1025px) {
.contact .wrap-s { width: 100%; padding: 0 6% }
.contact h1, .contact p, .contact span { width: 100% }
}
.header-news { background-color: #eee }
.title-news { border-bottom: 2px solid #eee }
.headline div { padding-top: 10px; padding-bottom: 20px }
.headline img { display: block; width: 100%; height: auto }
.headline p { display: none }
.headline .date { font-size: .875rem }
.news-list { margin-top: 2rem }
.news-list a { display: block; overflow: hidden; border-bottom: 1px solid #eee; box-sizing: border-box; padding-top: .5em; padding-bottom: .5em }
.news-list img { display: inline-block; width: 27%; vertical-align: middle }
.news-list div { width: 69%; margin-left: 2%; display: inline-block; vertical-align: middle }
.news-list p { font-size: .8125rem }
.news-list span { font-size: .8125rem; font-style: italic }
.news-catagory { text-align: center; border-bottom: 1px solid #0b8974; padding-bottom: 1rem }
.news-catagory a { display: inline-block; margin: 0 15px; line-height: 1.5em; color: #888; box-sizing: border-box; padding: 5px 15px }
.news-catagory a.current { color: #0b8974; border: 1px solid #0b8974; border-radius: 6px }
.news-article { background-color: #efefef }
.news-article .edit a { text-align: center; padding: 0 1rem; margin: .5rem 1rem .5rem 0; height: 40px; line-height: 40px; background-color: #0b8974; color: #fff; font-family: "Open Sans", "PingFangSC-Regular", "Microsoft YaHei", sans-serif; font-weight: 400; font-size: .875rem; box-sizing: border-box; border-radius: 5px; display: inline-block; transition: background-color .25s ease }
.news-article .edit a:hover, .news-article .edit a:active { color: #fff; background-color: #56d4ad }
.news-article .edit a:visited { color: #fff }
.date { font-family: Georgia, Times, "Times New Roman", serif; font-style: italic }
.rel-news h3 { line-height: 1.375em; margin-bottom: .5em; font-weight: 400 }
.rel-news p { line-height: 1.375em; margin-bottom: .5em }

@media(min-width:0) and (max-width:860px) {
.news-list h3 { font-size: .9375rem }
.rel-news img { width: 26%; float: left }
.rel-news .col-3-p { padding: 0; width: 100%; border-bottom: 1px solid #eee; box-sizing: border-box; padding: .5em 0 }
.rel-news .news-content { width: 70%; margin-left: 4%; float: left }
.rel-news h3 { font-size: .9375rem }
.rel-news p { font-size: .8125rem }
.rel-news span { font-size: .75rem }
}

@media(min-width:500px) and (max-width:860px) {
.rel-news .col-3-p { margin: 0; padding: 3% 6% }
.rel-news h3 { font-size: 1rem }
}

@media(min-width:680px) {
.news-list { margin-top: 0 }
.news-list a { padding-top: .75em; padding-bottom: .75em }
.news-list img { border-radius: 50%; width: 20% }
.news-list div { width: 76% }
.headline { padding-bottom: 3rem; box-sizing: border-box }
.headline a { display: block; width: 49%; float: left; margin-left: 2%; position: relative; overflow: hidden; background-size: cover; background-position: center center }
.headline a img { opacity: 0 }
.headline a:first-of-type { margin-left: 0 }
.headline a:nth-of-type(2), .headline a:nth-of-type(3) { height: 280px }
.headline div { position: absolute; background-color: rgba(0,0,0,0.5); left: 0; bottom: 0; box-sizing: border-box; padding: 15px 25px; height: auto; overflow: hidden; width: 100% }
.headline div * { color: #fff }
.headline img { display: block; width: 100%; height: auto }
.headline p { display: none }
}

@media(min-width:860px) {
.news-article h2, .news-article span { width: 100% }
.news-article .date { font-style: italic }
.rel-news img { margin-bottom: .75em }
.rel-news h3 { line-height: 1.25em }
.rel-news h3:after { content: ""; display: block; width: 10%; background-color: #ddd; height: 1px; overflow: hidden; margin-top: .75em; margin-bottom: .75em }
}

@media(min-width:1025px) {
.headline div { transition: padding .3s ease }
.headline a:hover div { padding-bottom: 50px }
}

@media(min-width:1400px) {
.news-list a { padding-top: 1em; padding-bottom: 1em }
.news-list img { width: 15% }
.news-list div { width: 79%; margin-left: 4% }
.headline div { padding: 30px }
}
.header-download { background-color: #47c597; color: #fff; position: absolute }
.header-download img { display: block }
.header-download h2 { color: #fff }
.content-downloads img { margin: 50px auto; float: none; display: block }
.content-downloads .subtitle { line-height: 1.5em; font-weight: 600 }
.content-downloads.fixbar-after { padding-top: 30px }
.type-i { border-bottom: 1px solid #eee; overflow: hidden; background-color: #efefef; padding: 1rem 6% }
.type-i>div { float: left; width: 100%; box-sizing: border-box }
.type-i>div+div { width: 100%; box-sizing: border-box }
.type-i .category h2 { font-size: 2rem; line-height: 1.125em; font-weight: 300; width: 100%; color: #555 }
.type-i .category span { font-size: .875rem; line-height: 1em; width: 100%; color: #999 }
.type-i .category span:after { content: " > " }
.type-i ul { display: block; overflow: hidden; box-sizing: border-box; border-bottom: 1px dashed #eee; padding: 0; background-color: #fff; border-radius: 5px }
.type-i ul:last-of-type { border: 0 }
.type-i li { display: block; float: left; width: 100%; background-color: #fff }
.type-i li+li { width: 100%; background-color: #fff }
.type-i .subtitle { padding: 1em 1em .5em; line-height: 1.5em }
.type-i a { display: inline-block; width: auto; box-sizing: border-box; font-size: .875rem; margin: 0 0 .5em 1em; line-height: 1.5em; transition: background-color .25s ease, color .25s ease; background-color: transparent }
.type-ii { position: relative; padding: 1rem 6%; border-bottom: 1px solid #ddd; color: #777; font-size: .875rem }
.type-ii:last-of-type { border: 0 }
.type-ii li { display: inline-block; vertical-align: middle }
.type-ii .subtitle { color: #333 }
.type-ii .download { text-align: center }
.type-ii .download a { display: block; width: 100%; padding: 0; margin: 0 }
.type-ii .download a:before { display: inline-block; background-size: auto 100px; width: 40px; height: 40px; background-position: -905px -5px; background-repeat: no-repeat }

@media(min-width:0) and (max-width:1290px) {
.header-download { display: block; height: 45px; min-height: 45px; background-color: #fff }
.header-download.fixed { position: fixed; top: 0; left: 0 }
.header-download .area { padding: 0; display: none }
.header-download .category { margin-top: 7px; display: none }
.header-download h2 { display: none }
.header-download img { display: none }
.category-select { width: 100%; height: 45px }
.category-select select { box-sizing: border-box; padding: 0 6%; width: 100%; height: 45px; -webkit-appearance: none; outline: 0; border-color: #eee; background: #fff url("http://www.starpointcomm.com/img/contact/select.svg") right 5% center no-repeat; background-size: auto 26px }
}

@media(min-width:0) and (max-width:860px) {
.type-ii { padding: 1rem 30% 1rem 6% }
.type-ii:first-of-type { display: none }
.type-ii li { width: 98% }
.type-ii li:before { color: #999 }
.type-ii .download { position: absolute; width: 30%; height: 100%; right: 0; top: 5px }
.type-ii .download a { display: block; width: 100%; height: 100%; padding: 0; margin: 0 }
.type-ii .download a:before { display: inline-block; background-size: auto 128px; width: 64px; height: 64px; background-position: -1152px 0; background-repeat: no-repeat }
.type-ii .size { position: absolute; width: 22%; right: 5%; top: 5rem; box-sizing: border-box; border: 1px solid #eee; border-radius: 4px; text-align: center }
.type-ii .version:before { content: "version : " }
.type-ii .lanuage:before { content: "lanuage : " }
.type-ii .os:before { content: "os : " }
.type-ii .update:before { content: "update : " }
.type-ii .subtitle { width: 98% }
}

@media(min-width:680px) and (max-width:860px) {
.type-ii .download { width: 20%; top: 0 }
.type-ii .download a:before { vertical-align: middle }
.type-ii .download a:after { display: inline-block; height: 100%; vertical-align: middle; content: ""; width: 1px; overflow: hidden }
.type-ii .size { right: 20%; width: 20%; top: 40% }
}

@media(min-width:680px) {
.header-download { max-height: 260px }
.type-i { background-color: transparent; margin-top: 1rem }
.type-i:first-of-type { margin-top: 2rem }
.type-i:last-of-type { border-bottom: 0 }
.type-i>div { width: 30% }
.type-i>div+div { width: 70%; border-left: 1px solid #eee; padding-left: 5% }
.type-i .category span { font-size: .9375rem; color: #999 }
.type-i ul { padding: 1rem 0 }
.type-i ul:first-of-type { padding-top: 0 }
.type-i li { width: 20% }
.type-i li+li { width: 80% }
.type-i .subtitle { padding: 0 }
.type-ii:first-of-type { margin-top: 2rem }
.type-ii:last-of-type { margin-bottom: 2rem }
.type-ii li { width: auto; margin-right: 4% }
}

@media(min-width:860px) {
.header-download { max-height: 260px }
.header-download.fixed { height: 50px; min-height: 50px; position: fixed; top: 0 }
.header-download.fixed .area { padding: 0 }
.header-download.fixed .category { margin-top: 7px }
.header-download.fixed h2 { display: none }
.header-download.fixed img { display: none }
.category { margin-top: 3px }
.category a { vertical-align: text-top; width: auto; display: inline-block; text-align: center; margin: 0 12px; text-align: center }
.category a img { opacity: .6; transition: opacity .2s, transform .2s ease; margin: 0 auto; display: block; width: 64px; height: auto }
.category a span { font-size: .875rem; color: #fff; text-align: center; margin-top: .5em; opacity: .7; transition: font-size .2s ease, opacity .2s ease; font-size: .875rem }
.category a.current img { opacity: 1; transform: scale(1.25) }
.category a.current span { opacity: 1 }
.category a:hover img { opacity: 1; transform: scale(1.25) }
.category a:hover span { opacity: 1 }
.type-ii li { display: inline-block; width: 10%; margin-right: 0 }
.type-ii .update { width: 12% }
.type-ii .subtitle { width: 35% }
}

@media(min-width:1025px) {
.type-i { padding: 1rem 0 }
.type-i .subtitle { font-size: 1.125rem }
.type-i a { display: inline-block; padding: .25em .75em; margin: 0 0 .125em 1em; border-radius: 5px }
.type-i a:hover { background-color: #0b8974; color: #fff }
.type-ii { padding: 1rem 0; transition: background-color .1s }
.type-ii:hover { background-color: #f7f7f7 }
}

@media(min-width:1290px) {
.category-select { display: none }
.header-download.fixed { height: 52px; min-height: 52px; background-color: #eee; top: 0 }
.header-download.fixed .category { margin-top: 0 }
.header-download.fixed .category a span { padding-top: 15px; padding-bottom: 15px; margin-top: 0; color: #666 }
.header-download.fixed .category a.current { color: #0b8974; font-weight: bold }
.header-download.fixed .category a.current span { color: #0b8974 }
.header-download.fixed .category a:hover img { transform: none }
.content-downloads.fixbar-after { padding-top: 260px }
}

@media(min-width:1400px) {
.category a { margin: 0 15px }
.header-download .category a span { font-size: 1rem }
.header-download.fixed { height: 64px; min-height: 64px }
.header-download.fixed .category { margin-top: 0 }
.header-download.fixed .category a span { padding-top: 20px; padding-bottom: 20px; font-size: 1rem }
.type-i { padding: 1.5rem 0 }
.type-i>div { width: 25% }
.type-i>div+div { width: 75% }
.type-i .category h2 { font-size: 2.5rem; line-height: 1.25em }
.type-i .category span { font-size: 1rem }
.type-i .subtitle { font-size: 1.25rem }
.type-i a { font-size: .9375rem; line-height: 1.5em }
}

@media(min-width:1620px) {
.header-download { max-height: 300px }
.content-downloads.fixbar-after { padding-top: 300px }
.type-i .category h2 { font-size: 2.75rem }
}
.category-nav { background-color: #fff; border-bottom: 1px solid #eee; box-sizing: border-box; position: absolute; white-space: nowrap; z-index: 120; -webkit-overflow-scrolling: touch }
.category-nav.fixed { position: fixed; top: 0; background-color: #eee }
.category-nav>.wrap { overflow-x: auto }
.category-nav a { display: inline-block; color: #666; margin: 0; padding: 10px 20px; box-sizing: border-box }
.category-nav a.current { color: #0b8974; font-weight: 600 }
.list-wtb { box-sizing: border-box; padding: 0 6%; margin-bottom: 2rem; margin-top: 2rem }
.list-wtb h2 { width: 100% }
.list-wtb li { border-bottom: 1px solid #eee; padding: 10px 0 }
.list-wtb li>div { overflow: hidden; font-size: .9375rem; margin-bottom: .375em }
.list-wtb li>div:first-of-type { font-weight: 600; color: #333; margin-bottom: .375em }
.list-wtb li>div:first-of-type img[style] { width: 80% !important; height: auto !important }
.list-wtb li>div:first-of-type img { display: block; width: 80%; height: auto; max-width: 150px; -webkit-backface-visibility: visible; -webkit-transform: none }
.list-wtb li:first-of-type { display: none }
.linkto { background-color: #efefef; border-radius: 5px; box-sizing: border-box; padding: 2px 15px 3px 15px }
.linkto:after { display: inline-block; background-size: auto 52px; width: 24px; height: 24px; background-position: -443px -27px; background-repeat: no-repeat; vertical-align: middle }
.area-select select { box-sizing: border-box; outline: 0; border: 0; line-height: 45px; height: 45px; vertical-align: middle; -moz-appearance: none; -webkit-appearance: none; text-indent: 1px; text-overflow: ''; position: relative; background: #fff url("http://www.starpointcomm.com/img/contact/select.svg") right 15px center no-repeat; background-size: auto 26px; border-bottom: 1px solid #eee; width: 50%; padding: 0 6%; display: block; float: left }
.area-select select:first-of-type { border-right: 1px solid #eee }

@media(min-width:680px) {
.list-wtb { margin-top: 0 }
.list-wtb li { border-bottom: 1px solid #eee; padding: 10px 0; position: relative }
.list-wtb li:first-of-type { padding: 5px 0 }
.list-wtb li:first-of-type>div { color: #999 }
.list-wtb li:first-of-type>div:first-of-type { font-weight: 400; color: #999; font-size: .9375rem; line-height: 1.5em }
.list-wtb li>div { display: inline-block; vertical-align: text-top }
.list-wtb li>div:first-of-type { width: 99%; min-height: 40px }
.list-wtb li>div:nth-of-type(2) { width: 49% }
.list-wtb li>div:nth-of-type(3) { width: 49% }
.list-wtb li>div:last-of-type { width: 20%; position: absolute; right: 6%; top: 15px }
.list-wtb li:nth-of-type(2) { border-top: 1px solid #0b8974; margin-top: .5em }
.linkto { float: right }
.area-select { position: absolute; width: 360px; border: 1px solid #eee; border-radius: 5px; right: 6% }
.area-select select { border-bottom: 0; line-height: 35px; height: 35px; background-size: auto 20px }
.area-select select:first-of-type { border-right: 1px solid #eee }
}

@media(min-width:860px) {
.list-wtb li>div { display: inline-block; vertical-align: text-top }
.list-wtb li>div:first-of-type { width: 30%; min-height: auto }
.list-wtb li>div:nth-of-type(2) { width: 25% }
.list-wtb li>div:nth-of-type(3) { width: 30% }
.list-wtb li>div:last-of-type { width: 13%; position: static }
.list-wtb li:first-of-type { display: block; border-bottom: 1px solid #0b8974 }
.list-wtb li:nth-of-type(2) { border-top: 0; margin-top: 0 }
}

@media(min-width:1025px) {
.category-nav a { padding: 15px 20px }
.category-nav a:first-of-type { padding-left: 0 }
.list-wtb { margin-bottom: 3rem; padding: 0 }
.list-wtb li { padding: 15px 0 }
.list-wtb li>div { width: 30% }
.list-wtb li>div:nth-of-type(2) { width: 26% }
.list-wtb li>div:last-of-type { width: 11% }
}

@media(min-width:1400px) {
.category-nav a { padding: 20px 20px; font-size: 1rem }
.area-select { position: static; float: right }
}

@media(min-width:1620px) {
.list-wtb { margin-bottom: 5rem; padding: 0 }
}
.result-header { border-top: 1px solid #eee; border-bottom: 1px solid #eee; margin-bottom: 1rem; color: #666; font-size: .875rem }
.result-header .wrap { padding: .5em 6% }
.result-header span, .result-header strong { display: inline }
.result-header strong { font-size: 1.25em; color: #0b8974; margin: 0 .25em }
.result-header span { color: #000; font-size: 1.25em; margin: 0 .25em }

@media(min-width:1025px) {
.result-header { border-bottom: 0 }
.result-header .wrap { padding: .75em 0 0 0 }
}
.result a { display: block; overflow: hidden; width: 100%; margin-bottom: 1rem; border-bottom: 1px solid #eee }

@media(min-width:1400px) {
.result a { padding-top: .75em; padding-bottom: .75em }
}
.result img { display: block; width: 20%; margin-left: 6%; height: auto; float: left }

@media(min-width:680px) {
.result img { width: 15% }
}

@media(min-width:860px) {
.result img { width: 12% }
}

@media(min-width:1025px) {
.result img { width: 10%; margin-left: 0 }
}

@media(min-width:1400px) {
.result img { width: 8%; margin-left: 0 }
}
.result .result-info { width: 72%; margin-left: 2%; float: left }
.result .result-info h3 { color: #0b8974; vertical-align: middle; font-size: 1rem }
.result .result-info h3 strong { color: #666; margin-right: .5em; font-size: .875rem; border: 1px solid #ccc; border-radius: 3px; padding: 0 8px }
.result .result-info .date { font-size: .875rem; color: #888 }

@media(min-width:680px) {
.result .result-info { width: 76%; margin-left: 0 }
.result .result-info h3 { font-size: 1.125rem }
}

@media(min-width:860px) {
.result .result-info { width: 74% }
}

@media(min-width:1025px) {
.result .result-info { width: 87%; margin-left: 3% }
}

@media(min-width:1400px) {
.result .result-info { width: 87% }
}

@media(min-width:1620px) {
.result .result-info { width: 87% }
.result .result-info h3 { font-size: 1.25rem }
}
.result p { font-size: .8125rem; line-height: 1.375em }