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: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

:root { --vw:0px; }

@font-face { font-family: 'Gill Sans MT'; src: url("https://www.benq.com/content/dam/bb/en/campaign/pdp-corporate/fonts/GillSansMT.woff2") format("woff2"), url("https://www.benq.com/content/dam/bb/en/campaign/pdp-corporate/fonts/GillSansMT.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; }

@font-face { font-family: 'Gill Sans MT'; src: url("https://www.benq.com/content/dam/bb/en/campaign/pdp-corporate/fonts/GillSansMT-Bd.woff2") format("woff2"), url("https://www.benq.com/content/dam/bb/en/campaign/pdp-corporate/fonts/GillSansMT-Bd.woff") format("woff"); font-weight: bold; font-style: normal; font-display: swap; }

html { font-size: 75%; }

body { font-family: 'Gill Sans MT', 'Arial'; font-size: 1.25rem; line-height: 1.5; -webkit-text-size-adjust: 100%; }

* { -webkit-box-sizing: border-box; box-sizing: border-box; max-height: 99999px; }

.wrapper { position: relative; width: 100%; overflow: hidden; padding-top: 50px; }

@media (min-width: 768px) { .wrapper { padding-top: 106px; } }

.site-header { position: fixed; left: 0; top: 0; width: 100%; height: 50px; background: #fff; z-index: 30; }

.site-header .d-flex { display: -webkit-box; display: -ms-flexbox; display: flex; }

.site-header .justify-content-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }

.site-header .justify-content-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.site-header .align-items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.site-header .hd-container, .site-header .hd-container .hd-row { height: 100%; }

.site-header .hd-container { width: 100%; max-width: 1200px; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }

.site-header .hd-row { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; }

.site-header .hd-row:after { position: absolute; left: 50%; bottom: 0; width: 100vw; height: 1px; background: #ccc; margin-left: -50vw; content: ""; }

.site-header .hd-row:nth-child(1) { padding-top: 11px; padding-bottom: 13px; }

.site-header .hd-row:nth-child(1) ul li { padding: 0 24px; border-left: 1px solid #ccc; }

.site-header .hd-row:nth-child(1) ul li a, .site-header .hd-row:nth-child(1) ul li span { font-size: 12px; line-height: 1.3; letter-spacing: .02em; color: #000; }

.site-header .hd-row:nth-child(1) ul li a { text-decoration: none; }

.site-header .hd-row:nth-child(1) ul li a.official { color: #492582; }

.site-header .hd-row:nth-child(1) ul li a.official img { width: 8px; height: auto; margin: 0 12px 5px 0; display: inline-block; vertical-align: middle; }

.site-header .hd-row:nth-child(1) ul li:nth-child(1) { padding-left: 0; padding-right: 43px; border: none; }

.site-header .site-logo { position: relative; width: 65px; height: 20px; }

.site-header .site-logo a { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; text-indent: -9999px; background: url(https://www.benq.com/content/dam/bb/en/campaign/pdp-corporate/img/benq-business-logo.svg) 0 0/100% no-repeat; }

.site-header a.menu { position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 54px; height: 50px; display: block; float: right; margin: 0; z-index: 999; }

.site-header a.menu .inner { position: absolute; left: 50%; top: 50%; margin: -9px 0 0 -14px; width: 24px; height: 20px; }

.site-header a.menu .ui { position: absolute; right: 0; width: 24px; height: 4px; background: #4D4F52; -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; }

.site-header a.menu .top { top: 0px; }

.site-header a.menu .mid { top: calc(50% - 2px); }

.site-header a.menu .bot { bottom: 0px; }

.site-header a.menu.active .top { top: 0px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; transform-origin: 100% 0%; }

.site-header a.menu.active .mid { opacity: 0; }

.site-header a.menu.active .bot { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; bottom: 0px; }

.site-header .d-none { display: none; }

@media (min-width: 768px) { .site-header { height: auto; }
  .site-header .site-logo { width: 65px; height: 20px; }
  .site-header .hd-row { height: auto; padding-left: 25px; padding-right: 25px; }
  .site-header .hd-row:nth-child(2) { padding-top: 22px; padding-bottom: 18px; -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
  .site-header .hd-row:nth-child(2):after { background: #F2F2F2; }
  .site-header .d-md-flex { display: -webkit-box; display: -ms-flexbox; display: flex; }
  .site-header .justify-content-md-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
  .site-header .justify-content-md-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
  .site-header .align-items-md-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
  .site-header .d-md-block { display: block; }
  .site-header .d-md-none { display: none !important; } }

.site-nav { position: absolute; left: 0; top: 50px; width: 100%; background: #fff; padding: 0 24px 15px; visibility: hidden; opacity: 0; -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; -webkit-transform: translateX(-50px); -ms-transform: translateX(-50px); transform: translateX(-50px); }

.site-nav.active { visibility: visible; opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }

.site-nav > ul > li { padding: 15px 0; }

.site-nav > ul > li.b { border-bottom: 1px solid #ccc; padding: 0; }

.site-nav > ul > li.last { margin-bottom: 15px; }

.site-nav > ul > li > a { font-size: 18px; color: #000; line-height: 52px; letter-spacing: .04em; }

.site-nav > ul > li > a.official { line-height: 1; color: #492582; }

.site-nav > ul > li > a.official img { width: 12px; height: auto; margin: 0 12px 5px 0; display: inline-block; vertical-align: middle; }

.site-nav > ul > li span { font-size: 14px; line-height: 1; letter-spacing: .02em; }

.site-nav > ul > li ul { padding: 0 0 15px 0; }

.site-nav > ul > li ul li { margin-bottom: 10px; padding-left: 10px; }

.site-nav > ul > li ul li a { color: #000; font-size: 14px; }

@media (min-width: 768px) { .site-nav { position: relative; left: auto; top: auto; width: auto; margin: -22px 0 -20px 0; padding: 0; opacity: 1 !important; visibility: visible !important; -webkit-transform: translateX(0) !important; -ms-transform: translateX(0) !important; transform: translateX(0) !important; }
  .site-nav > ul { padding-left: 53px; }
  .site-nav > ul > li { position: relative; display: inline-block; padding: 0 25px !important; margin: 0 !important; border: none !important; }
  .site-nav > ul > li > a { position: relative; display: block; -webkit-transition: color .4s; -o-transition: color .4s; transition: color .4s; font-size: 14px; font-weight: bold; }
  .site-nav > ul > li > a:after { position: absolute; left: 50%; bottom: -2px; width: 0%; height: 4px; background: #0050C7; opacity: 0; -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; content: ""; }
  .site-nav > ul > li ul { position: absolute; left: 0px; top: 54px; background: #fff; width: 264px; -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.15); box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.15); padding: 43px 0; visibility: hidden; opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; }
  .site-nav > ul > li ul li { padding: 0; }
  .site-nav > ul > li ul li a { line-height: 1.5; padding-left: 25px; }
  .site-nav > ul > li ul li:last-child { margin: 0; }
  .site-nav > ul > li:hover > a { text-decoration: none; color: #0050C7; }
  .site-nav > ul > li:hover > a:after { left: 0%; width: 100%; opacity: 1; }
  .site-nav > ul > li:hover ul { visibility: visible; opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } }

.site-footer .col { position: relative; width: 100%; padding-left: 15px; padding-right: 15px; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; }

.site-footer .col-12 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }

.site-footer .ft-row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; }

.site-footer .d-flex { display: -webkit-box; display: -ms-flexbox; display: flex; }

.site-footer .justify-content-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }

.site-footer .justify-content-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.site-footer .align-items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.site-footer .ft-container { max-width: 1533px; width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }

.site-footer .ft-row:nth-child(1) { padding: 30px 25px; border-bottom: 1px solid #ccc; }

.site-footer .ft-row:nth-child(1) small { display: block; font-size: 18px; line-height: 1.53; letter-spacing: .01em; margin-bottom: 14px; }

.site-footer .ft-row:nth-child(1) ul { width: 100%; padding: 0 -16px; }

.site-footer .ft-row:nth-child(1) ul li { margin: 0 16px; }

.site-footer .ft-row:nth-child(2) { padding: 15px 25px; }

.site-footer .ft-row:nth-child(2) .col { padding: 0; }

.site-footer .ft-row:nth-child(2) ul { margin-bottom: 11px; }

.site-footer .ft-row:nth-child(2) ul li { display: inline-block; }

.site-footer .ft-row:nth-child(2) ul li:first-child { border-right: 1px solid #000; padding-right: 9px; }

.site-footer .ft-row:nth-child(2) ul li:last-child { padding-left: 6px; }

.site-footer .ft-row:nth-child(2) ul li a { font-size: 12px; color: #000; letter-spacing: .02em; line-height: 1; display: block; }

.site-footer .ft-row:nth-child(2) p { font-size: 12px; line-height: 1.3; letter-spacing: .02em; color: #9E9E9E; }

@media (min-width: 768px) { .site-footer .col-md-6 { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
  .site-footer .d-md-flex { display: -webkit-box; display: -ms-flexbox; display: flex; }
  .site-footer .justify-content-md-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
  .site-footer .justify-content-md-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
  .site-footer .justify-content-md-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
  .site-footer .align-items-md-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
  .site-footer .d-md-block { display: block; }
  .site-footer .d-md-none { display: none !important; }
  .site-footer .text-md-right { text-align: right; }
  .site-footer .ft-row:nth-child(1) { padding: 16px 25px; }
  .site-footer .ft-row:nth-child(1) small { margin: 0; }
  .site-footer .ft-row:nth-child(1) ul { width: auto; }
  .site-footer .ft-row:nth-child(2) { padding: 17px 25px 15px; }
  .site-footer .ft-row:nth-child(2) ul { margin: 0; }
  .site-footer .ft-row:nth-child(2) ul li a { line-height: 1.3; } }

section.index { padding: 30px 0; }

section.index .row:nth-child(2) { padding: 0 25px 20px; }

section.index .container-fluid { padding: 0 39px; margin: 0 auto; }

section.index .container-fluid:nth-child(1) { max-width: 1200px; padding: 0 15px; }

section.index .container-fluid:nth-child(2) { max-width: 1840px; }

section.index h1.tit { font-size: 24px; line-height: 1.2; color: #0050C7; text-align: center; margin-bottom: 40px; padding: 0 25px; display: block; width: 100%; }

section.index p.desc { font-size: 14px; line-height: 1.5; padding: 0 25px; }

section.index dl { padding: 30px 25px 15px; border-bottom: 1px solid #ccc; width: 100%; }

section.index dl.last { border: none; }

section.index dl dt { font-weight: bold; font-size: 20px; margin-bottom: 15px; color: #4D4F52; }

section.index dl dt img { width: 25px; height: auto; display: inline-block; vertical-align: middle; margin: 0 10px 0 0; }

section.index dl dd { margin-bottom: 15px; }

section.index dl dd a { display: block; font-size: 18px; color: #4D4F52; text-align: center; text-decoration: none; line-height: 35px; border-radius: 8px; border: 1px solid #4D4F52; background: rgba(204, 204, 204, 0.1); -webkit-transition: color .4s, background .4s; -o-transition: color .4s, background .4s; transition: color .4s, background .4s; }

section.index dl dd a:hover, section.index dl dd a.active { border: 1.5px solid #0050C7; color: #0050C7; background: #fff; }

section.index dl dd a.disable { border: 1px solid rgba(77, 79, 82, 0) !important; background: #F2F2F2 !important; color: #9E9E9E !important; cursor: default; }

section.index dl:nth-child(4) dt img { width: 18px; margin-left: 2px; margin-right: 15px; }

section.index .item { padding: 0; width: 100%; margin-bottom: 10px; }

section.index .item a { position: relative; width: 100%; display: block; overflow: hidden; }

section.index .item a:after { padding-top: 66.66667%; display: block; content: ""; }

section.index .item a .photo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

section.index .item a p.info { position: absolute; left: 0; bottom: 0; width: 100%; min-height: 36px; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(black)); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, black 100%); background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, black 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 100%); font-family: "Arial"; font-size: 12px; line-height: 1.2; color: #fff; font-weight: bold; padding: 0 5px 5px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

section.index .item-enter-active, section.index .item-leave-active { -webkit-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }

section.index .item-enter, section.index .item-leave-to { opacity: 0; -webkit-transform: scale(0.95); -ms-transform: scale(0.95); transform: scale(0.95); }

section.index .item-enter-to, section.index .item-leave { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }

@media (min-width: 768px) { section.index { padding: 59px 0 44px; }
  section.index .container-fluid { padding: 0 20px; }
  section.index h2.tit { font-size: 32px; margin-bottom: 15px; }
  section.index p.desc { font-size: 16px; margin-bottom: 15px; }
  section.index .item { padding: 0 5px; } }

@media (min-width: 992px) { section.index .container-fluid:nth-child(2) { padding: 0 calc(20 * (var(--vw) / 1200)); }
  section.index dl { padding: 14px 0 14px 25px; height: 67px; }
  section.index dl dt { font-size: calc(20 * (var(--vw) / 1200)); width: calc(200 * (var(--vw) / 1200)); margin-bottom: 0; white-space: nowrap; }
  section.index dl dt img { width: calc(25 * (var(--vw) / 1200)); margin: 0 calc(10 * (var(--vw) / 1200)) 0 0; }
  section.index dl dd { width: calc(239 * (var(--vw) / 1200)); padding: 0 calc(5 * (var(--vw) / 1200)); margin-bottom: 0; }
  section.index dl dd a { font-size: calc(18 * (var(--vw) / 1200)); line-height: calc(35 * (var(--vw) / 1200)); border-radius: calc(8 * (var(--vw) / 1200)); }
  section.index dl.last { margin-bottom: 25px; }
  section.index dl:nth-child(4) dt img { width: calc(18 * (var(--vw) / 1200)); margin-left: calc(2 * (var(--vw) / 1200)); margin-right: calc(15 * (var(--vw) / 1200)); } }

@media (min-width: 1200px) { section.index dl dt { font-size: 20px; width: 200px; }
  section.index dl dt img { width: 25px; margin: 0 10px 0 0; }
  section.index dl dd { width: 239px; padding: 0 5px; }
  section.index dl dd a { font-size: 18px; line-height: 35px; border-radius: 8px; }
  section.index dl:nth-child(4) dt img { width: 18px; margin-left: 2px; margin-right: 15px; }
  section.index .item { padding: 0 5px; }
  section.index .item a .photo { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; }
  section.index .item a p.info { min-height: 80px; font-size: 18px; padding: 17px 10px 11px; visibility: hidden; opacity: 0; -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; }
  section.index .item a p.info span { -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; }
  section.index .item a:hover .photo { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }
  section.index .item a:hover p.info { visibility: visible; opacity: 1; }
  section.index .item a:hover p.info span { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } }