html {
  color:#000;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {
  margin:0;
  padding:0;
}
table {
  border-collapse:collapse;
  border-spacing:0;
}
img {
  max-width:100%;
  height:auto;
  border:0;
  vertical-align:middle;
}
address,caption,cite,code,dfn,em,strong,th,var {
  /*font-style:normal;*/
  font-weight:normal;
}
li {
  list-style:none;
}
caption,th {
  text-align:left;
}
h1,h2,h3,h4,h5,h6 {
  font-size:100%;
  font-weight:normal;
}
q:before,q:after {
  content:'';
}
abbr,acronym {
  border:0;
  font-variant:normal;
}
sup {
  vertical-align:text-top;
}
sub {
  vertical-align:text-bottom;
}
input,textarea,select {
  font-family:inherit;
  font-size:inherit;
  font-weight:inherit;
}input,textarea,select {
   font-size:100%;
 }
del,ins {
  text-decoration:none;
}
/*@font-face {*/
  /*font-family: "Colfax";*/
  /*src: url("/sims/css/colfax/Colfax-Light.woff") format('woff');*/
  /*font-weight: 300;*/
/*}*/
/*@font-face {*/
  /*font-family: "Colfax";*/
  /*src: url("/sims/css/colfax/Colfax-Regular.woff") format('woff');*/
  /*font-weight: 400;*/
/*}*/
/*@font-face {*/
  /*font-family: "Colfax";*/
  /*src: url("/sims/css/colfax/Colfax-Bold.woff") format('woff');*/
  /*font-weight: 700;*/
/*}*/
/*@font-face {*/
  /*font-family: "Colfax";*/
  /*src: url("/sims/css/colfax/Colfax-Black.woff") format('woff');*/
  /*font-weight: 800;*/
/*}*/

.homeCaseStudiesSection{
  padding: 5rem 0 7rem 0;
  text-align: center;
}

.caseStudies {
  width: 80%;
  height: 548px;
  margin: 5rem 0 0 0;
}
.caseStudiesContent{
  display: flex;
  flex-direction: row;
  height: 510px;
}
.caseStudiesTextSection{
  width: 30%;
  height: 82%;
  display: grid;
  align-content: center;
}
.caseStudiesTextSectionMargin{
  margin-bottom: 4rem;
}
.caseStudiesTextSection>div{
  text-align: left;
  margin-left: 4rem;
  margin-right: 4rem;
}
.caseStudiesTextSection h3{
  font-size: 36px;
  color: #FA3E3E;
  opacity: 1;
  margin-bottom: 3px;
}
.caseStudiesTextSection span{
  color: #000000;
  font-size: 15px;
  opacity: 1;
}
.caseStudiesImageSection{
  width: 70%;
  height: 100%;
}
.caseStudiesImageSection>img{
  aspect-ratio: 923 / 510;
  width: 100%;
}
.caseStudiesBottom{
  display: flex;
  width: auto;
  height: 130px;
  position: absolute;
  bottom: 0;
}
.caseStudiesBottomContent{
  display: flex;
}
.caseStudiesRedBox{
  background-color: #D50E0E;
  width: auto;
  max-width: 70%;
  padding: 2rem 4rem;
  margin-right: 1rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  cursor: pointer;
  flex-direction: column;
}
.caseStudiesRedBox h2{
  text-align: left;
  font-weight: 700;
  font-size: 28px;
  line-height: 48px;
  letter-spacing: 0px;
  color: #FFFFFF;
  opacity: 1;
}
.caseStudiesReadArticle{
  display: none;
  align-items: flex-end;
  color: #FFFFFF;
  text-decoration: underline;
  margin: 8px 0;
}
.swiper-pagination-bullet-active{
  background-color: #8BBEFF!important;
}
.swiper-pagination{
  display:flex;
  justify-content:right;
  height: 0px;
}
@media (max-width: 1230px) {
  .swiper-pagination{
    display:flex;
    justify-content:right;
  }
  .homeCaseStudiesSection{
    padding: 5rem 0;
  }
  .caseStudies {
    width: 100%;
    height: auto;
    margin: 0 0;
  }
  .caseStudiesContent{
    flex-direction: column;
    height: auto;
    justify-content: center;
    justify-items: center;
  }
  .caseStudiesTextSection{
    width: 100%;
    height: auto;
    min-height: 28rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1rem;
    justify-content: center;
  }
  .caseStudiesTextSection>div{
    width: 60%;
    margin: 2rem 4rem 2rem 4rem;
    display: grid;
    justify-content: center;
  }
  .caseStudiesTextSection h3{
    text-align: center;
  }
  .caseStudiesTextSection span{
    text-align: center;
  }
  .caseStudiesImageSection{
    width: 100%;
  }
  .caseStudiesImageSection img{
    aspect-ratio: 585 / 414;
    width: 100%;
    max-width: 585px;
  }
  .caseStudiesBottom{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    height: auto;
  }
  .caseStudiesRedBox{
    padding: 1rem 2rem;
    margin: 0;
    max-width: none;
  }
  .caseStudiesRedBox h2{
    text-align: left;
    font-weight: 600;
    font-size: 15pt;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
  }
  .caseStudiesReadArticle{
    width: 80%;
    margin: 5px 0 0 5px;
  }
  .caseStudiesBottomContent{
    width: 80%;
    flex-direction: column;
    justify-content: space-between;
  }
}

.demo-video {
  padding: 70px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: white;
}

.lblock{
float:left;
width:100%;
}
.lblock2{
float:left;
padding:2rem 0 1rem 0;
width:100%;
}
.lblock5{
float:left;
text-align:center;
width:100%;
}
.lblock5In div{
line-height:100%;
}
.pricingBlock{
height: 100%;
background:#ffffff;
border:1px solid #d8d8d8;
border-radius:10px;
padding: 3rem 0 2.2rem 0;
}
.pricing_calHeader{
  display: flex;
  justify-content: center;
  align-items: center;
}
.pricing_choosePlanButton{
  background-color: #FF6F71;
  border-radius: 5px;
  color: white;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
}
#pricingWindow {
  max-width: 70%;
  margin: auto;
  position: relative;
  background-color: #FFFFFF;
  border-radius: 10px;
  padding: 40px 90px;
  background-color: #FFFFFF;
  transform: scale(0);
  opacity: 0;
  animation: zoomIn 0.5s ease-out forwards;
}

@keyframes zoomIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
#pricingWindow .closeWindowButton{
  padding: 16px;
  text-align: end;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
}
#overlay:has(#pricingWindow) {
  display: flex;
  align-items: center;
}
.getQuotationWindowContainer {
  display: flex;
  justify-content: center;
  gap: 7rem;
  padding: 2rem 0;
}
.getQuotationInfo {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.getQuotationInfoTitle {
  border-bottom: 1px solid #AAAAAA;
  font-size: 20px;
  font-weight: bold;
  padding: 1rem 0;
}
.getQuotationInfo input {
  width: 322px;
  height: 34px;
  border: 1px solid #AAAAAA;
  padding: 0 8px;
}
#getQuotationButton {
  background-color: #D50E0E;
  color: #FFFFFF;
  border: none;
  border-radius: 5px;
  text-align: center;
  padding: 7px 30px;
  margin: 1rem auto;
  cursor: pointer;
}
.getQuotationImg {
  width: 425px;
}
.pricingFlowImg {
  display: none;
}
.pricing_calContentContainer {
  display: flex;
  justify-content: center;
  margin: 6rem auto 0 !important;
}
.pricing_calContentCol {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: center;
}
.pricing_calContentPriority{
  display: flex;
  position: relative;
  align-items: start;
}
.pricing_bracket {
  font-size: 30px;
  color: #8BBEFF;
  font-weight: 300;
  line-height: 35px;
}
.calBlock A:link {
  color: #0088cc;
}

.calBlock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: max-content;
  margin: 0 0 5rem 0;
  font-size: 20px;
}
.calBlock select {
  min-width: 180px;
  height: 35px;
  border: 1px solid #B3B3B3;
  border-radius: 5px;
  color: #707070;
  padding: 0 5px;
  background-image: url("/sims/img/chevron-down-regular.svg");
  background-repeat: no-repeat;
  background-position-x: calc(100% - 5px);
  background-position-y: 50%;
  background-size: 15px;
  -webkit-appearance: none;
  appearance: none;
}
.calBlock input {
  width: 168px;
  height: 33px;
  text-align: end;
  border: 1px solid #B3B3B3;
  border-radius: 5px;
  color: #707070;
  padding: 0 5px;
}
.calBlock input[type=number]::-webkit-inner-spin-button,
.calBlock input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.calBlock input[type=number] {
  -moz-appearance:textfield;
}
.calBlockTitle {
  min-height: 32px;
  margin-bottom: 15px;
  color: #707070;
}
.calOperator {
  width: 57px;
  height: 39px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 4px;
  position: relative;
}
.calBlockText {
  font-size: 14px;
  color: #B3B3B3;
  margin-top: 1rem;
  max-width: 180px;
  word-wrap: break-word;
  text-align: center;
}

.totalPriceBox {
  border: 2px solid #FFCCCC;
  padding: 3rem 8rem;
  text-align: center;
}
.totalPriceTitle {
  margin-bottom: 1rem;
  font-size: 20px;
  color: #707070;
}
.calBlockPrice {
  color: red;
  font-size: 20px;
}
.calGetQuotationButton {
  margin-top: 1rem;
  color: #FFFFFF;
  background-color: #FF6F71;
  border-radius: 5px;
  min-height: 42px;
  padding: 0 20px;
  font-size: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.currentPlan2{
position:absolute;width:100%;background:#ddd;color:#555;
border-radius:10px 10px 0 0;
top:-25px;padding:5px 0;left:-1px;
border:1px solid #ddd;
}
.actionBlock{
border:1px solid #f4d3d2;
border-radius:10px;
cursor:pointer;
font-size:16px;
background:#E70E0E;
color:#ffffff;
font-weight:600;
padding:1.3rem 0.5rem;
transition:background-color .15s ease;
}
.actionBlock:hover{
background:#ff0000;
color:#ffffff;
}
.actionBlock:link{color: #fff;}
.actionBlock:visited{color: #fff;}
.actionBlock:active{color: #fff;}
.disabledActionBlock{
background:#cccccc;
color:#ffffff;
border:1px solid #cccccc;
cursor:default;
}
.disabledActionBlock:hover{
background:#cccccc;
color:#ffffff;
border:1px solid #cccccc;
cursor:default;
}
.darkActionBlock{
background:#606060;color:#fff;
font-weight:400;
border:1px solid #909090;
}
.darkActionBlock:hover{
background:#909090;color:#fff;
}
.descBlock{
width: 87%;
font-size:14px;
text-align: left;
padding:2.3rem 0 0 0;
margin: 1.5rem auto 0 auto;
border-top: 1px solid #d8d8d8;
}
.pricingQuote{
  font-size:1.4rem;
  font-weight:600;
  margin:0 0 1.5rem 1.5rem;
  line-height:150% !important;
  text-align:left;
}
.pricingQuoteLists {
  padding-left: 0.5rem;
}
.faiconsmall{
color:#ccc;
font-size:6px !important;
margin:0 5px 0 0;
line-height: 14px;
}
.lblockSmall,.lblockLarge{
float:left;
padding:1rem 0 1rem 0;
width:100%;
}
.lblockIn{
width:85%;
max-width:70rem;
margin:4rem auto;
}
.lblockIn.blogHome{
max-width:90rem;
}
.lblockInLarge{
width:85%;
max-width:128rem;
margin:4rem auto;
}
.lblockInLarge.mobileLeft{
width:100%;
}
.lblock2In{
width:95%;
margin:2.5rem auto 5rem auto;
}

.lblockTitle{
font-size:3.5rem;
font-weight:600;
}
.lblockTitleSmall{
font-size:3rem;
}
.lblockText{
font-size:3rem;
line-height: 130%;
font-weight:300;
margin:0 0 2rem 2.5rem;
}
.lblockTextSmall{
font-size:2rem;
line-height: 150%;
font-weight:300;
width:85%;
}
.lblockQuote1{
margin:0 auto;
font-size:2rem;
line-height: 150%;
font-weight:300;
}
.lblockQuote2{
margin:1rem auto;
font-size:1.5rem;
line-height: 150%;
font-weight:400;
color:#aaa;
}

.lblockTable{
margin: 0 auto;
}
.lblockTable tr:hover{
background-color: #f5f5f5;
}
.lblockTable td, .lblockTable th{
padding: 15px 20px;
max-width: 300px;
border-bottom: 1px solid #e4e4e4;
text-align: center;
}
.lblockTable .category{
background-color: #ffefef;
}
.lblockTable .category-sticky-top {
  position: sticky;
  top: 6rem; /* 6rem is height of fixedCTA */
}
.lblockTable img{
max-width: 200px;
}

.lblockImg, .lblockVideo{
width:100%;
margin:2rem 0 2rem 0;
}
.lblockArticle{
font-size:1.6rem;
line-height: 180%;
font-weight:400;
}
.lblockArticle p,.lblockArticle h1,.lblockArticle h2,.lblockArticle h3,.lblockArticle h4,.lblockArticle ol{
max-width:70rem;
}
.lblockArticle p{
margin:2rem auto;
}
.lblockArticle h1{
margin:5rem auto 3rem auto;
font-size:3.8rem;
line-height: 150%;
font-weight: 700;
}
.lblockArticle h2{
margin:5rem auto 3rem auto;
font-size:3rem;
line-height: 150%;
font-weight: 700;
}
.lblockArticle h3{
margin:5rem auto 3rem auto;
font-size:2.2rem;
line-height: 150%;
font-weight: 700;
}
.lblockArticle h4{
margin:5rem auto 3rem auto;
font-size:1.6rem;
line-height: 150%;
font-weight: 700;
}
.lblockArticle img{
height:auto;
}
.lblockArticle img,.lblockArticle embed,.lblockArticle video,.lblockArticle iframe{
  max-width:100%;
  margin:1rem auto 1rem auto;
  border:1px solid #ccc;
  box-shadow: rgba(0,0,0,0.15) 0 1px 3px;
  cursor: zoom-in;
}
.lblockArticle table{
width:100%;
border-collapse: collapse;
margin:5rem auto;
}
.lblockArticle .blogTableDiv{
  max-width:100%;
  margin:5rem auto;
}
.lblockArticle td,.lblockArticle th{
border:1px solid #ccc;
padding: 10px 10px;
font-size:16px;
}
.lblockArticle td{
max-width:200px;
}
.lblockArticle th{
max-width:200px;
background:#f2f2f2;
}
.lblockArticle pre{
background:#ddd;
padding:2rem 3rem;
overflow-x: auto;
max-width: 600px;
word-wrap: normal;
font-size: 12px;
}
.lblockArticle ol{
margin: 1rem 0 1rem 5rem;
}
.lblockArticle ol li{
list-style: decimal;
margin: 1rem 0 1rem 0;
}
.carouselArrowLeft, .carouselArrowRight {
  font-size: 300%;
  cursor: pointer;
  width: 3rem;
  height: 3rem;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.carouselProgressDot{
  height:10px;
  width:10px;
  background-color:#ccc;
  border-radius:50%;
  margin-right:8px;
  cursor:pointer;
}
.carouselProgressDot.active{
  background-color:transparent;
  border:2px solid #E70E0E;
}
.lblockIn.lblockArticle.docContent {
  padding:0;
}
.homeFooter a:link,.homeFooter a:hover,.homeFooter a:active,.homeFooter a:visited{
  color:#06c;
  margin:0 15px 0 0;
}
.homeFooter{
  color:#333;
  display: flex;
  justify-content: center;
  margin-bottom: 3rem !important;
}
.homeFooter div{
  float:left;
  margin:0 7rem 5rem 0;
}
.homeFooter .hide{
  display: none;
}
.homeFooter>.homeFooterRegisterDiv{
  margin-right: 11rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.homeFooter>.homeFooterURLDiv{
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  margin:0 0 5rem 0;
}
.homeFooterRegisterDiv>#footerTitle {
  max-width: 300px;
}
.homeFooterAdditionalInfo {
  margin: 3rem 0;
  text-align: center
}
div>.homeFooterDivBlock{
  margin:0 0 5rem 0;
}
.withoutMarginRight{
  margin-right: 0 !important;
}
.footerRegisterButtonDiv{
  display: grid;
  justify-content: space-between;
  margin-top: 2rem !important;
}
.mobileHomeRegister{
  display: grid;
  justify-items: center;
}
.createAccountButton {
  background-color:#F70E0E;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  border:1px solid #F70E0E;
  display:inline-block;
  color:#ffffff !important;
  font-size:17px;
  font-weight:600;
  padding:14px 30px;
  text-decoration:none;
  text-shadow:1px 1px 0 #b23e35;
}
.registerButtonTemplate:visited,.registerButtonTemplate:hover,.registerButtonTemplate:active,.registerButtonTemplate:link{
  color:white;
  text-decoration:none;
  cursor:pointer;
}
.docTable {
  width: 100%;
  table-layout: fixed;
}
.faqqwrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-radius: 1rem;
  cursor: pointer;
  user-select: none;
}
.faqqwrap:hover, .faqqwrap.active{
  background-color: #eee;
}
.faqqwrap.active{
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.faqqwrap:not(.active) .fa-minus-circle{
  display: none;
}
.faqqwrap.active .fa-plus-circle{
  display: none;
}
.faqq{
  font-weight:400;
  font-size:20px;
  margin: 0 0.5rem 0 0;
}
.faqans{
background:#ffffff;
padding:1rem 2rem;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
line-height: 1.5;
}
.faqans p{
font-weight:400;
font-size:15px;
color:#000;
margin:1.5rem 0;
max-width: 95%;
}
.pricingQ, .articleQ{
position:relative;
font-weight:700;
  margin-left: 3px;
}
.pricingQ div, .articleQ div{
color:black;
font-weight:400;
}
@media (max-width: 991px) {
  #comparePlans .lblockInLarge {
    width: 100%;
    padding: 0 24px;
    margin-top: 50px;
  }
}
@media (max-width: 767px) {
  #comparePlans .lblockInLarge {
    padding: 0 12px;
  }
}
@media (max-width: 767px) {
  .pricingTableContainer {
    overflow-x: auto;
  }
}
.pricingTable tr:not(.nohover):hover{
background:#efefef;
}
.pricingTable tr:not(.nohover):hover .sticky-left {
  background:#efefef;
}
.pricingTable .header{
background:#f5f5f5;
width: 120px;
padding:1.5rem 0;
text-align: center;
font-size:18px;
border-bottom:none;
font-weight:600;
}
.pricingTable .header:first-child {
  font-size: 16px;
}
.pricingTable .sticky-header {
position: sticky;
top: 60px;
z-index: 2;
}
@media (max-width: 800px) {
  .pricingTable .sticky-header {
    top: 46px;
  }
  .pricingTable .header {
    font-size: 14px;
  }
  .pricingTable .header:first-child {
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .pricingTable .sticky-header {
    position: relative;
    top: 0;
    z-index: 2;
  }
}
.pricingTable .sticky-left {
  position: sticky;
  left: 0;
}
.pricingTable .side{
font-weight:600;
height:6.8rem;
vertical-align: bottom;
padding:0 0 0.8rem 3px;
border-bottom:1px solid #aaa;
}
.pricingTable .has-side {
  border-bottom:1px solid #aaa;
}
.pricingTable th{
position:relative;
border-bottom:1px solid #efefef;
height:6rem;
font-weight:200;
background-color: #fff;
padding:0 0 0 3px;
}
.pricingTable td{
border-bottom:1px solid #efefef;
height:6rem;
font-size:14px;
font-weight:200;
text-align:center;
color:#555;
padding:10px;
}
.pricingTableShadow {
display: none;
position: absolute;
top: 0;
width: 10px;
height: 100%;
box-shadow: 6px 0 5px -1px rgb(63 83 114 / 20%);
z-index: 2;
}
#pricingTableShadowEnd {
  right: -10px;
  box-shadow: -6px 0 5px -1px rgb(63 83 114 / 20%);
}
.pricingBubble{
  position:absolute;
  border-radius:5px;
  background:#fff;
  min-width:25rem;
  padding:2.5rem 2rem 3rem 2.5rem ;
  font-size:14px;
  line-height:150% !important;
  font-weight: 400;
  color: #737373;
  z-index: 1000;
  filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.3));
  will-change: filter;
}

.pricingBubble.withoutDiamond #pricingBubbleDiamond{
  display: none !important;
}

/*情境1: 正常無className*/
.pricingBubble #pricingBubbleDiamond{
  content: '';
  display: block;
  position:absolute;
  height:15px;
  width:15px;
  background:#fff;
  transform: skewX(-40deg) rotate(45deg);
  bottom: -8px;
  left: 20px;
}

/*情境2: 超出右邊reverseX*/
.pricingBubble.reverseX{
  transform: translateY(-20px);
}
.pricingBubble.reverseX.withoutDiamond{
  transform: translateY(-10px);
}
.pricingBubble.reverseX #pricingBubbleDiamond{
  transform: scaleX(-1) skewX(-40deg) rotate(45deg);
  right: 20px;
  left: auto;
}

/*情境3: 超出上面reverseY*/
.pricingBubble.reverseY{
  transform: translateY(0px);
}
.pricingBubble.reverseY #pricingBubbleDiamond{
  top: -8px;
  transform: scaleY(-1) skewX(-40deg) rotate(45deg);
}

/*情境4: 超出右邊與上面reverseX、reverseY*/
.pricingBubble.reverseX.reverseY{
  transform: translateY(0px);
}
.pricingBubble.reverseX.reverseY #pricingBubbleDiamond{
  top: -8px;
  transform: scale3d(-1, -1, 1) skewX(-40deg) rotate(45deg);
}

/*情境5: 貼著上緣offsetY*/
.pricingBubble.offsetY{
  transform: translateX(10px);
}
.pricingBubble.offsetY #pricingBubbleDiamond{
  left: 0;
  top: 0;
  bottom: auto;
  transform: translateX(-50%) rotate(135deg);
}

/*情境6: 超出右邊與貼著上緣reverseX、offsetY*/
.pricingBubble.reverseX.offsetY{
  transform: translateX(-30px);
}
.pricingBubble.reverseX.offsetY #pricingBubbleDiamond{
  right: 0;
  left: auto;
  top: 0;
  bottom: auto;
  transform: translateX(50%) rotate(-45deg);
}
/*情境7: 貼著左側offsetX*/
.pricingBubble.offsetX{
  transform: translateY(-20px);
}
.pricingBubble.offsetX #pricingBubbleDiamond{
  left: 0;
  transform: translateX(50%) rotate(-45deg);
}

.pricingSecurityItem {
  width: 33.3333%;
  padding: 45px 40px;
}
@media (max-width: 991px) {
  .pricingSecurityItem {
    padding: 45px 30px;
  }
}
@media (max-width: 767px) {
  .pricingSecurityItem {
    width: 100%;
    padding: 25px;
  }
}

#topBanner{
  display: flex;
  align-items: center;
padding:10vw 0 15vw;
    width: 75%;
    box-sizing: border-box;
}
#topSlogan1{
margin:5rem 0 2rem 0;
font-size:6rem;
}
#topSlogan2{
margin:0 0 2rem 0;
font-size:2.5rem;
color:#fff;
line-height: 150%;
font-weight:300;
letter-spacing: 0;
}
#topSlogan3{
margin:5rem 0 0 0;
}
#frontSignupForm{
display:none;
}
@media (max-width: 1279px) {
#topSlogan1{
margin:0 5rem 2rem 0;
font-size:3rem;
}
#topSlogan2{
margin:0 5rem 2rem 0;
font-size:1.6rem;
}
#topSlogan3{
margin:5rem 0 0 2rem;
display:inline;
}
}
@media (max-width: 500px) {
#topSlogan1{
margin:0 0 2rem 0;
}
#topSlogan2{
margin:0 0 2rem 0;
}
}

.price{
  display:inline-block;
  font-size:4.2rem;
}

.versionTitle{
  font-size:2rem;
}
[lang=en] .versionTitle, [lang=es] .versionTitle, [lang=ja] .versionTitle, [lang=fr] .versionTitle{
  height: 4rem;
}
@media (min-width: 1600px) {
  [lang=en] .versionTitle, [lang=ja] .versionTitle{
    height: auto;
  }
}

@media (max-width: 1050px) and (min-width: 800px){
  .price {
    font-size:2.69rem;
  }
  .versionTitle{
    font-size:1.4rem;
  }
  [lang=es] .versionTitle, [lang=ja] .versionTitle, [lang=fr] .versionTitle{
    height: 2.8rem;
  }
  [lang=en] .versionTitle{
    height: auto;
  }
  .priceBtn{
    font-size:1.2rem;
  }
}

.priceOuter{
  font-weight:300;
  margin:1.4rem 0;
}
@media (max-width: 1176px){
  [lang=ja] .priceOuter{
    height: 57px;
  }
}
@media (max-width: 1050px){
  [lang=ja] .priceOuter{
    height: auto;
  }
}
@media (max-width: 930px){
  [lang=ja] .priceOuter{
    height: 42px;
  }
}

[lang=es] .pricePerUser, [lang=fr] .pricePerUser {
  height: 2.8rem;
}
@media (max-width: 1599px) {
  [lang=en] .pricePerUser {
    height: 2.8rem;
  }
}
@media (max-width: 1439px) {
  [lang=ja] .pricePerUser {
    height: 2.8rem;
  }
}
@media (max-width: 1024px) {
  .pricePerUser {
    height: 2.8rem;
  }
}
@media (max-width: 800px) {
  .pricePerUser {
    height: auto !important;
  }
}

.priceBtn{
  display: inline-block;
  width: 87%;
  margin:1.2rem auto;
}

.pricingBuyOp{
  font-size: 12px;
}
[lang=zh-TW] .pricingBuyOp, [lang=zh-CN] .pricingBuyOp{
  height: 16px;
}
[lang=en] .pricingBuyOp, [lang=es] .pricingBuyOp, [lang=ja] .pricingBuyOp{
  height: 32px;
}

#priceOR{
  margin: 0.7rem 40%;
  font-size:20px;
}

.d-block {
  display: block !important;
}
.d-flex {
  display: flex !important;
}
.d-none { display: none !important; }
.overflow-hidden {
  overflow: hidden !important;
}
@media (max-width: 767px) {
  .d-sm-none {
    display: none !important;
  }
  .d-sm-block { display: block !important; }
}
.flex-wrap {
  flex-wrap: wrap !important;
}
@media (max-width: 991px) {
  .flex-md-wrap { flex-wrap: wrap !important; }
}
.align-items-center {
  align-items: center !important;
}
.justify-content-center {
  justify-content: center !important;
}
.justify-content-end {
  justify-content: end !important;
}
.flex-column {
  flex-direction: column !important;
}
.max-w-100 {
  max-width: 100% !important;
}
.w-30 { width: 30% !important; }
.w-40 { width: 40% !important; }
.w-50 { width: 50% !important; }
.w-60 { width: 60% !important; }
.w-70 { width: 70% !important; }
@media (max-width: 991px) {
  .w-md-100 { width: 100% !important; }
}
.pointer-events-none {
  pointer-events: none !important;
}
.text-center {
  text-align: center !important;
}
.flex-center-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (min-width: 800px) {
#priceOR {
  margin: 0.8rem 3rem;
}

#blogTypesIconContent {
display: none;
}
.lblockInLarge{
margin:7rem auto;
}
.lblockInLarge.mobileLeft{
width:85%;
}
.lblockIn{
margin:4rem auto;
}
.lblockText{
font-size:5rem;
margin:0 0 5rem 0;
}
.lblockTextSmall{
font-size:2.6rem;
}
.lblockTitle{
font-size:4.5rem;
}

.lblockImg, .lblockVideo{
width:80%;
}
.lblockImg.blogHome{
width:87%;
}

.lblock2{
width:50%;
}
.lblock3{
width:30%;
float:left;
}
.lblock5{
width:19%;
/*max-width:16rem;*/
margin:0 0.35% 0 0.35%;
}
.lblock5In{
display:inline-block;
width:87%;
}
.lblock3In{
display:inline-block;
width:40rem;
margin:0 5rem 5rem 0;
vertical-align: top;
}

.lblockSmall{
width:33%;
}
.lblockLarge{
width:67%;
}
.lblockSmall.blogHome{
width:45%;
}
.lblockLarge.blogHome{
width:55%;
}

.carousel .slide {
  animation: fadein 0.3s;
  -webkit-animation: fadein 0.3s; /* Safari and Chrome */
}

.carouselArrowLeft, .carouselArrowRight {
  font-size: 450%;
  width: 7rem;
  height: 7rem;
}

.carouselArrowLeft:hover, .carouselArrowRight:hover {
  background-color: #efefef;
}

.lblockIn.lblockArticle.docContent {
  padding: 5rem 15rem;
}

.majorTypes {
  display: block;
}
.mobileMajorTypes {
  display: none;
  z-index: -100;
}
}

#bgvid {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -2;
  height: 100%;
}
#bgvidarea{
  position: absolute;
  left: 0;
  top: 0;
  z-index: -2;
  width: 100%;
  height: calc(100% / 16 * 9);
  min-height: 60rem;
}
#homeOverlay {
background:url(/intl/common/img/homev2.jpg);
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
z-index: -2;
}
#bgvid, #homeOverlay {
  filter: brightness(64%);
}
a.CTALink {
  display: inline-block;
  padding: 1rem;
}
a.CTALink:link,a.CTALink:visited,a.CTALink:hover,a.CTALink:active{
font-weight:400;
color:#000;
font-size:16px;
}
.fixedCTA {
position: sticky;
top: 0;
left:0;
display: flex;
justify-content: space-between;
align-items: center;
background:#f8f8f8;
border-bottom:1px solid #e8e8e8;
z-index:3; /* higher than pricing table sticky header */
box-sizing: border-box;
}
#fixedCTA{
height:8rem;
box-shadow: 0 0 3px #ddd;
}
#fixedCTA.blogNavbar {
  position:fixed;
  top:-47px;
  left:0;
  width:100%;
  height:45px;
  background:#f8f8f8;
  border-bottom:1px solid #e8e8e8;
  transition:all 0.3s linear;
  z-index:3;
}
/*
Mobile
*/
@media (max-width:800px) {
  .descBlock {
    display: flex;
    justify-content: center;
  }
  .pricingQuoteLists {
    margin: 0 0 0 1.1rem;
  }
  .priceBtn {
    width: 88%;
    margin-top: 2rem;
  }

  #fixedCTA {
    display: none;
  }
  .registerBanner {
    display: none;
  }
  #blogTypesIconContent {
    display: inline-block;
  }
  .majorTypes {
    display: none;
  }
  .mobileMajorTypes {
    display: none;
    max-height: 0;
    width: 60%;
    position: absolute;
    background-color: #fafafa;
    border-radius: 0 0 5px 5px;
    text-align: left;
    z-index: 100;
    -moz-transition: max-height 1s ease-out;
    -o-transition: max-height 1s ease-out;
    transition: max-height 1s ease-out;
    -webkit-box-shadow: 0 2px 5px 0 #aaa;
    -moz-box-shadow: 0 2px 5px 0 #aaa;
    box-shadow: 0 3px 10px 0 #aaa;
    overflow: hidden;
  }
  .mobileMajorType {
    padding: 6px 80px 6px 30px;
  }
  .homeFooter {
    color: #333;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
  }
  .homeFooter div {
    float: left;
    clear: left;
    margin: 0 5rem 2.5rem 0;
  }
  .homeFooter > .homeFooterRegisterDiv {
    margin-right: 11rem;
    box-sizing: border-box;
    align-items: center;
  }
  .homeFooterRegisterDiv > #footerTitle {
    max-width: fit-content;
  }
  .homeFooter > .homeFooterURLDiv {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    margin: 0 0 2.5rem 0;
  }
  .footerRegisterButtonDiv {
    margin-top: 4rem !important;
  }
  .homeFooterDisplayGrid {
    display: grid !important;
    justify-items: center;
  }
  div > .homeFooterDivBlock {
    margin: 0 0 2.5rem 0;
  }
  .pricingFlowImg{
    display: block;
  }
  .pricing_calHeader, .pricing_calContentContainer {
    display: none;
  }
}

/*
Desktop
*/
#fixedCTAMobile{
  display:none;
}
@media (max-width:800px) {
  #fixedCTAMobile{
    display:flex;
  }
}
@media (max-width:500px) {
  #topRight {
    flex-direction: column;
  }
}
/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
font-size: 62.5%; }
body {
font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
line-height: 1.6;
font-weight: 400;
color: #222; }


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
/*margin-bottom: 0.5rem;*/
font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
h1 { font-size: 5.0rem; }
h2 { font-size: 4.2rem; }
h3 { font-size: 3.6rem; }
h4 { font-size: 3.0rem; }
h5 { font-size: 2.4rem; }
h6 { font-size: 1.5rem; }
}

p {
margin-top: 0; }







input[type=button],input[type=submit]{
padding:8px;
margin:8px 0 0 0;
}
input[type=text],input[type=password],input[type=email]{
padding:3px 8px;
font-size:15px;
_overflow:visible;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius: 4px;
border:1px solid #aaa;
/*border-top:1px solid #999;*/
height:34px;
transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-webkit-transition:all 0.3s ease;
outline-color: #393;
}
h1,h2,h3{
color:#000000;
}
h1{
font-size:22px;
font-weight:bold;
margin:0 0 8px 0;
}
h2{
font-size:18px;
font-weight:bold;
}
h3{
font-size:17px;
color:#666666;
}
h4{
font-size:14px;
color:#666666;
}
h2.home{
font-size:50px;
font-weight:600;
line-height:64px;
width:400px;
white-space:nowrap;
}
.homeSubtext{
font-size:22px;
font-weight:300;
line-height: 1.5em;
margin:20px 0 0 3px;width:350px;
}
#topContainer{
background:rgba(255,255,255,1);
}
#top{
width:980px;
font-size:12px;
font-family:verdana;
margin:0 auto 0 auto;
border-bottom:1px solid #ddd;
}
A:link{color:#06c;text-decoration:none;}
A:visited{color:#06c;text-decoration:none;}
A:hover{color:#06c;text-decoration:underline;}
A:active{color:#06c;text-decoration:none;}
.box-sizing-border-box,
.box-sizing-border-box::before,
.box-sizing-border-box::after,
.box-sizing-border-box *,
.box-sizing-border-box *::before,
.box-sizing-border-box *::after {box-sizing:border-box;}
.hover-decoration-none:hover,
.noHoverDecoration:hover {
  text-decoration: none;
}




#greybar{
float:right;
height:38px;
width:560px;
}
.greybarAnchor{
display:inline;
margin:12px 0 0 36px;
float:right;
line-height:36px;
font-size:14px;
}
.freeTrial{
background:#3c84cc !important;
color:#fff !important;
padding:0 12px !important;
border-radius:15px !important;
line-height: 26px !important;
margin:17px 0 0 36px !important;
}
#featureMainv6{
margin:0 auto 0 auto;
}
#featureMain{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
#resetPwdFormDiv{
  background-image: url('/intl/common/img/home/home_2023V1bg.webp');
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 80px;
  padding-bottom: 95px;
  margin-bottom: 35px;
}
#resetPwdFormDiv > div{
  width: 400px;
  text-align: center;
}
:lang(zh-TW) #resetPwdFormDiv > div,
:lang(zh-CN) #resetPwdFormDiv > div{
  width: 350px;
}
#resetPwdForm > input {
  padding: 0px;
  width: 100%;
}
#resetPwdForm > .thebutton {
  display: block;
  font-size: 14px;
  text-align: center;
  margin-top: 30px;
  padding: 7px 12px;
}
@media (max-width:800px) {
  #resetPwdFormDiv{
    padding-top: 60px;
    padding-bottom: 60px;
  }
  #resetPwdFormDiv > div,
  :lang(zh-TW) #resetPwdFormDiv > div,
  :lang(zh-CN) #resetPwdFormDiv > div{
    width: 100%;
    margin: 0 10vw;
  }
  #resetPwdForm > .thebutton {
    padding: 14px 30px;
  }
  #resetPwdFormDiv > img {
    display: none;
  }
}
#storeMain,#home2012Main,#blogMain,#voteMain,#docMain{
margin:0 auto 0 auto;
width:980px;
position:relative;
background:#ffffff;
-webkit-border-radius:8px;
border-radius:8px;
}
#docMain img{
display:block;
margin:3em 0;
box-shadow: 0 0 6px #cccccc;
border:1px solid #cccccc;
}
#docMain a:visited,#docMain a:active,#docMain a:link{
text-decoration: none;
font-weight: 700;
}
#docMain a:hover{
text-decoration: underline;
}
#docMain p.docp,#docMain p{
display:block;
margin:25px 25px;
font-size:16px;
line-height: 1.5em;
}
p.docp b{
color:#111111;
font-weight:700;
}
#docMain li{
display:block;
margin:25px 25px;
font-size:16px;
line-height: 1.5em;
}
#docMain table{
margin:25px;
border-collapse: collapse;
}
#docMain th,#docMain td{
font-size:16px;
line-height: 1.5em;
padding:3px 15px;
border:1px solid #ccc;
color:#555;
}
#docMain th{
background: #efefef;
}
#docMain ul{
margin:0 0 0 25px;
}
#docMain h1{
line-height: 36px;
}


pre{
font-family: Consolas,Monaco,monospace;
overflow-x: auto;
border: none;
white-space: pre;
display: block;
margin:25px 36px;
line-height: 18px;
word-break: break-all;
word-wrap: break-word;
background-color: #F5F5F5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color:#333;
}
pre p.docp{
line-height: 1em !important;
margin:8px 25px !important;
}
.blogContent{
font-size:16px;
line-height:26px;
margin:12px 0 0 0;
}
.blogContent p{
margin:0 0 16px 0;
}
#supportGuideDiv{
width:730px;
float:left;
}
#supportGuideDiv h2{
font-size:18px;
font-weight:bold;
}
#supportGuideDiv p{
font-size:14px;
}
.supportSection{
float:left;
margin:25px 35px 25px 15px;
font-size:14px;
width:280px;
}
#supportGuideDiv table{width:700px;}
#supportGuideDiv a{color:#08c;text-decoration:underline;clear:left;float:left;}
#supportDocDiv a{color:#08c;}
#supportDocDiv h1,#supportDocDiv h2,#supportDocDiv h3{margin:50px 0 0 0;}
#supportDocDiv img{
margin:25px 0 25px 0;
}
#serviceReqForm{
clear:left;margin:25px;
}
#serviceReqForm div{
margin:20px 8px 20px 8px;
font-size:14px;
}
#serviceReqForm input[type=text],#serviceReqForm select,textarea{
padding:3px;
font-size:14px;
-webkit-border-radius:3px;
border-radius:3px;
border:1px solid #aaaaaa;
}
#blogTopCat{
float:left;
background-color:#CCCCCC;
width:100%;
}
#blogTopCat a{color:black;}
#blogTopCat li{
float:left;
font:12px/16px  "Helvetica Neue", Helvetica,Arial, sans-serif;
border-right-style: solid;
border-right-width: 1px;
border-right-color: #efefef;
padding:5px 20px 5px 20px;
color:#555555;
background-color:#CCCCCC;
}
#blogTopCat li:hover{background-color:#DDDDDD;}
.readmore{float:left;font-weight:300;white-space:nowrap;color:#aaa !important;margin:8px 0 0 0;font-size:12px;}
.home2012div a{color:black;}
#home2012div p{
font-size: 18px;
}
#home2012Main h1{
font-size:36px;
line-height: 1.2em;
font-weight:bold;
border-bottom:1px solid #ddd;
letter-spacing: -1px;
}
#lightDevMain h1{
font-size:36px;
line-height:46px;
}
#lightDevMain h3{
font-size:26px;
line-height:36px;
}

#lightDevMain div{
margin:50px 20px;
}
#lightDevMain p{
width:500px;
float:left;
}
#faqMain h1{
font-size:25px;
padding:0 0 5px 0;
}
#appsMain h1{
font-size:20px;
line-height:36px;
}
#appsMain h3{
clear:both;
font-size:18px;
color:black;
}
#appsMain div{
clear:both;
margin:20px 20px 0 20px;
}
#appsMain p{
width:500px;
float:left;
}


#faqlist{
float:right;
background:#f3f3f3;
width:250px;
padding:20px;
}
#faqlist ul li ul li{
text-indent:12px;
}
#faqlist ul{
font-size:12px;
line-height:2em;
}
#faq{
margin:12px 310px 0 50px;
padding:0;
}
#faq h1{margin:60px 0 0 0;line-height:1.5em;}
.fadebanner{position:absolute;width:100%;height:90%;top:0;left:0;background:white;}
.fadeSwitch{cursor:pointer;font-size:25px;font-weight:bold;color:black;font-family:arial;}

.tab{
float:left;
border-top:1px solid #CCCCCC;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
margin:4px 4px 0 0;
padding:0 5px;
_width:160px;
background-color:#DDDDDD;
}

#midPanel{
width:980px;
margin:0 auto;
}
#midPanel img{
float:left;
}
#midPanel span,#midPanel2 span{
color:#08c;
margin:0 0 0 6px;
white-space:nowrap;
}
#midPanel span:hover,#midPanel2 span:hover{
text-decoration:underline;
}
#midPanel2{
width:980px;
margin:36px auto;
}

.custLogoDiv{
display:inline-block;
background: url(/intl/common/img/custLogo2018_b.png);
width:196px;
height:10rem;
transition: all 0.3s;
-moz-transition: all 0.3s; /* Firefox 4 */
-webkit-transition: all 0.3s; /* Safari and Chrome */
 -o-transition: all 0.3s; /* Opera */
}

.custLogoDiv_zh{
display:inline-block;
background: url(/intl/common/img/custLogo2018zh_b.png);
width: 196px;
height: 10rem;
transition: all 0.3s;
-moz-transition: all 0.3s; /* Firefox 4 */
-webkit-transition: all 0.3s; /* Safari and Chrome */
-o-transition: all 0.3s; /* Opera */
}

/* the css of 2023 version homepage starts with a "home" tag */

.homeDisplayNone{
    display: none;
}

.homeRelative{
    position: relative;
}

.homeFontWeightBold{
    font-weight: 800;
}

.homeFontWeightRegular{
    font-weight: 400;
}

.homeFontWeightLight{
    font-weight: 300;
}

.homeFontSizeExtraLarge{
    font-size: 4rem;
}
.homeFontSizeExtraLargeLight{
  font-size: 4.5rem;
  font-weight:200;
}

.homeFontSizeLarge{
    font-size: 3.2rem;
}

.homeFontSizeMedium{
    font-size: 2.8rem;
}

.homeFontSizeSmall{
    font-size: 2rem;
}
.homeFontSizeSmaller{
  font-size: 1.8rem;
}

.homeFontSizeExtraSmall{
    font-size: 1.4rem;
}

.homeFontColorGray{
    color: #aaaaaa;
}

.homeWhiteBoxSection{
    background: #FAFAFA;
    color: #000000;
}

.homeWhiteButtonSection{
  background: #FFFFFF;
  color: #000000;
  box-shadow: 0px 3px 6px #00000029;
}

.homeGrayBoxSection{
    background: #F1F1F1;
}

.homeBlackBoxSection{
    background: #333333;
    color: #FFFFFF;
}

.homeBlueBoxSection{
    background: #3564c4;
    color: #FFFFFF;
}

.homeLightBlueBoxSection{
  background: #65a4f4;
  color: #FFFFFF;
}

.homeRedBoxSection{
    background: #D50E0E;
    color: #FFFFFF;
}

.homeTopicBlock{
    text-align:center;
    padding: 5rem;
}

.homeContentBlock{
    text-align:center;
    margin: 0 10rem;
    padding: 0 0 5rem;
}

.homeFlexReverse{
    flex-direction: row-reverse;
}

.homeNavbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position:sticky;
    height: 7vh;
    top:0;
    padding: 1rem 3rem;
    z-index:100;
    transition: all 0.3s;
    -moz-transition: all 0.3s; /* Firefox 4 */
    -webkit-transition: all 0.3s; /* Safari and Chrome */
    -o-transition: all 0.3s; /* Opera */
}

.homeNavbarActive{
    padding: 1rem 3rem 1rem;
    box-shadow: 0 0 5px #cccccc;
}

.homeNavbarRight{
    display: flex;
    align-items: center;
}

.homeNavbarLinkButtons{
    display: flex
}

.homeNavbarFunctionButtons{
    display: flex;
    align-items: center;
}

.homeNavbarLink{
    border-radius: 0.3rem;
    padding: 1rem 2.5rem 1rem 0;
    cursor: pointer;
    transition: all 0.3s;
    -moz-transition: all 0.3s; /* Firefox 4 */
    -webkit-transition: all 0.3s; /* Safari and Chrome */
    -o-transition: all 0.3s; /* Opera */
}

.homeNavbarLink:Link{
    color: #000000;
    text-decoration: none;
}

.homeNavbarLink:Visited{
    color: #000000;
}

.homeNavbarLink:hover{
    color: #999999  ;
    text-decoration: none;
    transition: all 0.3s;
    -moz-transition: all 0.3s; /* Firefox 4 */
    -webkit-transition: all 0.3s; /* Safari and Chrome */
    -o-transition: all 0.3s; /* Opera */
}

.homeBurgerExtendReg{
    display: flex;
}

.homeBurgerExtendRegAndLang{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.homeBurgerChangeLangSection{
  display:flex;
  margin:1rem 0 20rem;
  position: relative;
}

.homeNavbarChangeLangButton{
    display: grid;
    grid-template-columns: auto auto;
    grid-column-gap: 0.5rem;
    align-items: center;
    padding: 1rem 2.5rem 1rem 0;
    stroke: #000000;
    cursor: pointer;
    transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
}

.homeBurgerChangeLangButton{
    display: grid;
    grid-template-columns: auto auto auto;
    grid-column-gap: 0.5rem;
    align-items: center;
    padding: 1rem 2rem 1rem 0;
    margin: 1rem 0 0 0;
    stroke: #000000;
    cursor: pointer;
    transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
}

.homeLangOption{
    cursor: pointer;
    padding: 0.2rem 0;
    color: #999999;
    transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
}

.homeLangOptionSelected{
    cursor: default;
    padding: 0.2rem 0;
    color: #F2767D;
}

.homeLangButtonActive{
    color: #F2767D;
    stroke: #F2767D;
    fill: #F2767D;
}

@keyframes arrowRotateAnimation{
    from{
        transform: rotate(0);
    }
    to{
        transform: rotate(180deg);
    }
}

homeBurgerChangeLangButton .homeLangButtonActive > svg{
    animation: hamburgerBarTopAnimation 0.3s forwards;
}

.homeNavbarChangeLangOptions{
    position: absolute;
    visibility: hidden;
    opacity: 0;
    width: max-content;
    left: -1.8rem;
    margin: 0.5rem 0 0 0;
    padding: 0.5rem 1rem;
    background: #fafafa;
    box-shadow: #cccccc 0 0 5px;
    transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
}

.homeBurgerChangeLangOptions{
    visibility: hidden;
    display: grid;
    opacity: 0;
    position: absolute;
    width: max-content;
    margin: 1rem 2rem;
    padding: 0.5rem 0;
    border-top: 1px solid #cccccc;
    left: 0.5rem;
    top: 3.5rem;
    transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
}

.homeLangOption:hover{
    color: #F2767D;
    stroke: #F2767D;
    fill: #F2767D;
}
.homeSignUpButton{
  text-align: center;
}
.homeScheduleButton{
  color: #FA3E3E;
  text-align: center;
}
.homeNavbarButton,
.homeSignUpButton,
.homeScheduleButton,
.homeBurgerExtendRegButton{
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 0.3rem;
    padding: 1rem 2rem;
    transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
}

.homeNavbarButton:Link,
.homeSignUpButton:Link,
.homeBurgerExtendRegButton:Link{
    text-decoration: none;
    color: #FAFAFA;
}

.homeScheduleButton:Link{
  text-decoration: none;
  color: #FA3E3E;
}
.homeScheduleButton:hover{
  background: #f1f1f1;
}

.homeNavbarButton:hover,
.homeSignUpButton:hover,
.homeBurgerExtendRegButton:hover{
    background: #f2767d;
    transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
}

.homeBurgerSignUpAndScheduleDemoButton{
  display: flex;
  gap: 15px;
}

.homeHamburgerMenu{
    display: flex;
    align-items: center;
    cursor: pointer;
}

.homeHamburgerButton{
    width: 3rem;
    height: 2.5rem;
}

.homeHamburgerBar{
    transition-property: transform;
    transition-duration: 0.3s;
    transform-origin: center;
    stroke: #333333;
    stroke-width: 10%;
}

.homeHamburgerBarTop{
    transform: translateY(-40%);
}

.homeHamburgerBarBot{
    transform: translateY(40%);
}

@keyframes hamburgerBarTopAnimation{
    0%{
        transform: translateY(-40%);
    }
    50%{
        transform: translateY(0);
    }
    100%{
        transform: rotate(-45deg);
    }
}

@keyframes hamburgerBarMidAnimation{
    from{
        transform: scale(0);
    }
    to{
        transform: scale(1);
    }
}

@keyframes hamburgerBarBotAnimation{
    0%{
        transform: translateY(40%);
    }
    50%{
        transform: translateY(0);
    }
    100%{
        transform: rotate(45deg);
    }
}

.homeBurgerOpenAnimation .homeHamburgerBarTop{
    animation: hamburgerBarTopAnimation 0.3s forwards;
}

.homeBurgerOpenAnimation .homeHamburgerBarMid{
    display: none;
}

.homeBurgerOpenAnimation .homeHamburgerBarBot{
    animation: hamburgerBarBotAnimation 0.3s forwards;
}

.homeBurgerCloseAnimation .homeHamburgerBarTop{
    animation: hamburgerBarBotAnimation 0.3s reverse;
}

.homeBurgerCloseAnimation .homeHamburgerBarMid{
    display: flex;
     animation: hamburgerBarMidAnimation 0.3s;
}

.homeBurgerCloseAnimation .homeHamburgerBarBot{
    animation: hamburgerBarTopAnimation 0.3s reverse;
}

.homeBurgerExtend{
    flex-direction: column;
    align-items: center;
    position: fixed;
    opacity: 0.5;
    top: -100dvh;
    left: 0;
    width: 100%;
    height: 100dvh;
    background: #FAFAFA;
    background-size: cover;
    transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition-timing-function: ease;
    z-index: 90;
}

.homeBurgerExtendActive{
    display: flex;
    top: 7dvh;
    opacity: 1;
}

.homeBurgerExtendLinks{
    display: flex;
    width: 80vw;
    flex-direction: column;
}

.homeBurgerExtendLinkStyle{
    padding: 2rem 0;
    border-bottom: 1px solid #cccccc;
    cursor: pointer;
    transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
}

.homeBurgerExtendLinkStyle:Link{
    text-decoration: none;
    color: #000000;
}

.homeBurgerExtendLinkStyle:Visited{
    color: #000000;
}

.homeBurgerExtendLinkStyle:hover{
    color: #999999;
    text-decoration: none;
    transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
}

#homeOverlayv2{
    background-image: url("/intl/common/img/home/home_2023V1bg.webp");
    background-size: cover;
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: -2;
}

#homeHeroSection{
    margin: 0 10vw 10vw;
    display: flex;
    flex-direction: row-reverse;
}

#homeHeroLogo{
    width: 10rem;
    cursor: pointer;
}

#homeHeroSloganDiv{
    margin: auto 0;
  width: 50%;
}

#topSlogan1v2{
    margin: 0 0 0 0;
    font-size: 3.6rem;
    font-weight:700;
}

#topSlogan2v2{
    margin: 2.5rem 0 0 0;
    font-size:1.8rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height:150%;
}

#homeHeroDemoVideoDiv{
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 45vw;
    margin: 10rem 10rem 10rem 0;
}

#homeMobileCustLogos{
    display: none;
}
#mobileCustLogos{
  display:none;
}

#homeDesktopCustLogos{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#desktopCustLogos{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.homeCustLogoDIvContainer{
    /*
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin: 0 5rem;
    */
    display: grid;
    grid-template-columns: repeat(6, auto);
    grid-gap: 1vw 2vw;
}

.homeCustLogoDiv{
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    width: 150px;
    height: calc(150px / 150 * 84);
}

.homeCustLogoDiv > img{
    aspect-ratio: 150 / 84;
    width: 100%;
    height: auto;
}

.homeCustLogoDiv:hover{
    filter: none;
    opacity: 1;
}

.homeNavTarget{
    position:absolute;
    top: -7vh;
}

#homeEXCELSection{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 0;
}

.homeEXCELSWorkflowPictureDiv{
    width: 580px;
    height: auto;
}

.homeEXCELSWorkflowPictureDiv > img{
    width: 100%;
    height: auto;
}

.homeEXCELFourRisks{
    display: grid;
    grid-row-gap: 3rem;
    margin: 5rem;
    max-width: 30%;
}

.homeEXCELRisk{
    display: flex;
    align-items: flex-start;
}

.homeEXCELRisk > img{
    width: 3rem;
    margin: 0.5rem 1rem 0 0;
}

.homeEXCELRisk > div{
    display: grid;
    grid-template-rows: auto 1fr;
    grid-row-gap: 0.5rem;
}

.homeDatabaseFourCons{
    flex-direction: column;
    background: linear-gradient(
        to top,
        #e8f0fb 0%,
        #e8f0fb 50%,
        #FAFAFA 50%,
        #FAFAFA 100%
    );
    align-items: center;
}

.homeDatabaseTwoOutOfFourCons{
    width: 100%;
    padding: 0 0 5rem;
}

.homeDatabaseCon{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 6rem;
}

.homeDatabaseConPictureA{
    width: 400px;
    height: calc(400px / 1076 * 750);
    margin: 0 5rem 0 0;
}

.homeDatabaseConPictureB{
  width: 400px;
  height: calc(400px / 1076 * 825);
  margin: 0 5rem 0 0;
}

.homeDatabaseConPictureA > img,
.homeDatabaseConPictureB > img{
    width: 100%;
    height: auto;
}

.homeDatabaseConDetail{
    display: grid;
    grid-template-rows: auto 1fr;
    grid-row-gap: 0.5rem;
    width: 35%;
}

.homeHowRagicSolve{
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 65vw;
    padding: 7rem 0 10rem;
    margin: auto;
}

.homeHowRagicSolveAnswer{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 3rem;
    text-align: center;
}
.homeHowRagicSolveAnswer > h2{
    font-weight:400;
    line-height:180%;
}

.homeHowRagicSolve > img{
    width: 100%;
    height: calc(65vw / 1270 * 728);
}

.homeWhatMakesRagicDifferentSection{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 7rem 0 0;
}

.homeSlogan > span{
    color: #D50E0E;
}

.homeWhatMakesRagicDifferentAnswer{
    display: grid;
    grid-template-columns: 40% 40%;
    align-items: center;
    justify-content: center;
    max-width: 80%;
    margin: 0 auto 5rem;
}

.homeWhatMakesRagicDifferentAnswerPictureDivA{
    aspect-ratio: 792 / 530;
    width: 90%;
    max-height: calc(72vw/792*530);
}

.homeWhatMakesRagicDifferentAnswerPictureDivB{
    aspect-ratio: 547 / 196;
    width: 90%;
    max-height: calc(72vw/547*196);
}

.homeWhatMakesRagicDifferentAnswerPictureDivA > img,
.homeWhatMakesRagicDifferentAnswerPictureDivB > img{
    width: 100%;
    height: auto;
}

.homeWhatMakesRagicDifferentAnswerDetailA{
    display: grid;
    grid-template-rows: auto 1fr;
    grid-row-gap: 0.5rem;
    align-self: center;
}
.homeWhatMakesRagicDifferentAnswerDetailB{
    display: grid;
    grid-template-rows: auto 1fr;
    grid-row-gap: 0.5rem;
    align-self: center;
}

.homeRagicFunctionSection{
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 90%;
    margin: 0 0 15rem 0;
}

.homeRagicFunctionSectionDemo{
    width: 60%;
    height: auto;
    max-width: 1280px;
    padding-top: 13px;
    border: solid 1px;
    border-bottom-left-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
    border-image-source: url(/intl/common/img/home/demoBorder.webp);
    border-image-slice: 200 200 100 300;
    border-image-width: 20px 20px 15px 30px;
}

.homeRagicFunctionSectionDemo > video,
.homeRagicFunctionSectionDemo > img{
    width: 100%;
    height: auto;
}

#demoWithNoBorder{
    border: none;
}

.homeRagicFunctionIntroductionSection{
    display: grid;
    grid-template-rows: auto 1fr;
    grid-row-gap: 1rem;
    justify-content: start;
    align-items: center;
    width: 25%;
}

.homeRagicFunctionIntroductionSection > h2{
    margin: 0;
}

.homeRagicFunctionIntroductionSectionLogoDiv{
    height: 80px;
    width: 80px;
}

.homeRagicFunctionIntroductionSectionLogoDiv > img{
    height: 100%;
    width: 100%;
}

.homeRagicFunctionIntroductionDetail{
    display: grid;
    grid-template-rows: auto 1fr;
    grid-row-gap: 0.5rem;
}

.homeWhatCustSays{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.homeTestimonialAndButton{
    width: 80%;
    margin: auto;
}

.homeTestimonialSection{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 6rem 3rem;
    align-items: start;
    margin: 3rem auto 0;
    padding: 0 0 5rem;
}

.homeTestimonialDiv{
    display: flex;
    position: relative;
}

.homeTestimonialDiv > img{
    position: absolute;
    margin-left: 0.5rem;
    top: -4rem;
}

.homeTestimonialContentArea{
    display: grid;
    grid-row-gap: 0.5rem;
    padding: 3.5rem 1.5rem 1rem;
    border-top-right-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
}

.homeLoadMoreTestimonial{
    display: flex;
    cursor: pointer;
    width: fit-content;
    padding: 1rem 2rem;
    margin: 0 auto 7rem;
    color: #f2767d;
    background: #FAFAFA;
    border-radius: 0.3rem;
    transition: all 0.3s;
    -moz-transition: all 0.3s; /* Firefox 4 */
    -webkit-transition: all 0.3s; /* Safari and Chrome */
    -o-transition: all 0.3s; /* Opera */
}

.homeLoadMoreTestimonial:hover{
    color: #FAFAFA;
    background: #f2767d;
}
#featurePromptDiv{
    margin:0 0 5rem 0;
}

@media screen and (max-width: 1700px){
    .homeCustLogoDIvContainer{
        grid-template-columns: repeat(6, auto);
        grid-gap: 0.5vw 5vw;
    }
}

@media screen and (max-width: 1280px){
    #homeHeroSection{
        flex-direction: column;
    }
    #homeHeroSloganDiv{
        margin: 10vw 0 4rem;
      width: 100%;
    }
    #homeHeroDemoVideoDiv{
        margin: 0 auto 10rem;
        max-width: 80vw;
    }
    #featurePromptDiv{
        margin:0 0 2rem 0;
    }
    .homeCustLogoDIvContainer{
        grid-gap: 0.5vw 4vw;
    }
    .homeCustLogoDiv{
        width: 120px;
        height: calc(120px / 150 * 84);
    }
    #homeEXCELSection{
        flex-direction: column;
    }
    .homeEXCELSWorkflowPictureDiv{
        width: 650px;
        height: auto;
    }
    .homeEXCELFourRisks{
        margin: 5rem 0;
        max-width: 65vw;
    }
    .homeTestimonialSection{
        grid-template-columns: repeat(2, 1fr);
    }
    .homeRagicFunctionSection{
        flex-direction: column;
        margin: 0 0 10rem 0;
    }
    .homeRagicFunctionSectionDemo{
        margin: 2rem 0;
        width: 65vw;
    }
    .homeRagicFunctionIntroductionSection{
        grid-template-columns: auto 1fr;
        grid-column-gap: 1.5em;
        width: 65vw;
    }
    .homeRagicFunctionIntroductionSectionLogoDiv{
        height: 50px;
        width: 50px;
    }
    .homeRagicFunctionIntroductionDetail{
        grid-column-start: 1;
        grid-column-end: 4;
    }
    .homeTestimonialAndButton{
        width: 70%;
    }
}
@media screen and (max-width: 1285px) {
  .homeBurgerExtendRegAndLang{
    margin: 2rem 0 0;
  }
}
@media screen and (max-width: 1024px){
    .homeFontSizeLarge{
        font-size: 3rem;
    }
    .homeFontSizeExtraLarge{
        font-size: 3rem;
    }
    .homeFontSizeSmall{
        font-size: 1.8rem;
    }
    .homeFontSizeSmaller{
        font-size: 1.5rem;
    }
    .homeFontSizeExtraSmall{
        font-size: 1.4rem;
    }
    #homeHeroSloganDiv{
        margin-left: 0;
    }
    #topSlogan2v2{
        font-size: 2rem;
    }
    #homeHeroDemoVideoDiv{
        margin: 1.5rem 0 10rem;
    }
    .homeCustLogoDiv{
        width: 100px;
        height: calc(100px / 150 * 84);
    }
    .homeDatabaseConPictureA,
    .homeDatabaseConPictureB{
        width: 55vw;
        height: calc(55vw / 1076 * 825);
        margin: 3rem 0;
    }
    .homeWhatMakesRagicDifferentAnswer{
        grid-template-columns: unset;
        max-width: 65vw;
        margin: 0 0 10rem;
    }
    .homeWhatMakesRagicDifferentAnswerPictureDivA,
    .homeWhatMakesRagicDifferentAnswerPictureDivB{
        width: 65vw;
        margin: 3rem 0 4rem;
    }
    .homeTopicBlock{
        padding: 5rem;
    }
    .homeEXCELSWorkflowPictureDiv{
        width: 75vw;
        height: auto;
    }
    .homeDatabaseCon{
        flex-direction: column;
    }
    .homeDatabaseConPicture{
        width: 55vw;
        margin: 3rem 0 4rem 0;
    }
    .homeDatabaseConDetail{
        width: 60%;
        /*justify-items: center;*/
        /* text-align: center;*/
    }
    .homeTestimonialSection{
        grid-template-columns: repeat(1, 1fr);
    }
}

@media screen and (max-width: 850px){
    .homeCustLogoDiv{
        width: 80px;
        height: calc(80px / 150 * 84);
    }
    .homeCustLogoDIvContainer{
        grid-gap: 0.5vw 3vw;
    }
    .homeBurgerExtendRegAndLang{
        margin: 1rem 0 0;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }
    .homeBurgerExtendReg{
        margin: 0 0 1rem;
    }
    .homeBurgerChangeLangSection{
      margin:1rem 0 20rem;
    }
    .homeBurgerSignUpAndScheduleDemoButton {
      margin: 0 0 1rem;
    }
    .homeBurgerChangeLangButton{
        margin: 0 0 0 0;
    }
    .homeBurgerChangeLangOptions{
        left: 0.5rem;
    }
    .homeTemplatesSectionMediaQuery{/*[id#17612]: templates section not show for RWD reason*/
        display: none;
    }
}

@media screen and (max-width: 600px){
    .homeCustLogoDiv{
        width: 100px;
        height: calc(100px / 150 * 84);
    }
    .homeCustLogoDIvContainer{
        grid-template-columns: repeat(3, auto);
        grid-gap: 0.5vw 10vw;
    }
}

@media screen and (max-width: 500px){
    .homeFontSizeExtraLarge{
        font-size: 2.4rem;
    }
    .homeFontSizeLarge{
        font-size: 2.1rem;
    }
    .homeFontSizeMedium{
        font-size: 1.8rem;
    }
    .homeFontSizeSmall{
        font-size: 1.5rem;
    }
    .homeFontSizeSmaller{
        font-size: 1.5rem;
    }
    .homeFontSizeExtraSmall{
        font-size: 1.2rem;
    }
    #topSlogan1v2{
        font-size: 2.5rem;
    }
    #topSlogan2v2{
        font-size: 1.5rem;
    }
    .homeTopicBlock{
        padding: 3rem;
    }
    .homeContentBlock{
        padding: 0 0 3rem;
        margin: 0 0 0 0;
    }
        #homeHeroLogo{
        width: 8rem;
    }
    .homeHamburgerButton {
        width: 2.5rem;
        height: 2rem;
    }
    #homeDesktopCustLogos{
        display: none;
    }
    #desktopCustLogos{
      display:none;
    }
    #homeMobileCustLogos{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #mobileCustLogos{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .homeCustLogoDIvContainer{
        grid-template-columns: auto auto;
        grid-gap: 10vw;
    }
    #homeEXCELSection{
        padding: 3rem 0 2rem;
    }
    .homeEXCELFourRisks{
        margin: 2rem 0 5rem;
    }
    .homeDatabaseTwoOutOfFourCons{
        padding: 3rem 0 5rem;
    }
    .homeHowRagicSolve{
        padding: 5rem 0 5rem;
    }
    .homeHowRagicSolve > img{
        margin: 0 0 3rem;
    }
    .homeWhatMakesRagicDifferentSection{
        padding: 5rem 0 5rem;
    }
    .homeRagicFunctionSection{
        margin: 5rem 0 0 0;
    }
    .homeWhatMakesRagicDifferentAnswer{
        margin: 0 0 7rem;
    }
    .homeTestimonialAndButton{
        width: 60%;
    }
    .homeDatabaseCon{
        padding: 0 0 3rem;
    }
  .homeBurgerSignUpAndScheduleDemoButton {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }
}

@media screen and (max-width: 400px){
    .homeBurgerExtendRegAndLang {
        margin: 1rem 0 0;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }
    .homeBurgerExtendRegButton{
        margin: 0 0 1rem;
    }
    .homeBurgerExtendLangButton{
        padding: 2rem 2rem 2rem 0;
    }
    .homeBurgerChangeLangButton{
        margin: 0 0 0 0;
    }
    .homeBurgerChangeLangOptions{
        margin: 1rem 0rem;
        left: 2.5rem;
    }
    .homeEXCELSWorkflowPictureDiv{
        width:76vw;
        height: auto;
    }
}

#goPanel p{font-size:12px;font-weight:bold;color:#888888;margin-top:8px;margin-right:20px;}
a.midSection,a.midSection:hover,a.midSection:active,a.midSection:visited
{color:#000000;text-decoration:none;background:#ffffff;}
/*a.midSection:hover{border:1px solid #cccccc;}*/
.midSection{
float:left;
width:437px;
margin:5px;
padding:20px;
border:1px solid #efefef;
text-decoration:none;
color:#000000;
}
a.midSection2old,a.midSection2old:hover,a.midSection2old:active,a.midSection2old:visited
{color:#000000;text-decoration:none;background:#ffffff;border:1px solid #efefef;}
/*a.midSection2old:hover{border:1px solid #888888;}*/
.midSection2old{
float:left;
height:450px;
width:270px;
margin:5px;
padding:20px;
text-decoration:none;
border:1px solid #cccccc;
color:#000000;
}
a.midSection2,a.midSection2:hover,a.midSection2:active,a.midSection2:visited
{color:#000000;text-decoration:none;background:#ffffff;border:1px solid #cccccc;}
a.midSection2:hover{border:1px solid #888888;}
.midSection2{
float:left;
height:150px;
width:270px;
margin:5px;
padding:20px;
text-decoration:none;
border:1px solid #cccccc;
color:#000000;
}
.midSectionLeft{
float:left;
clear:left;
width:400px;
margin:12px 25px 0 25px;
}
.midSectionLeft3{
float:left;
width:300px;
}

.goodFont{
letter-spacing:-1px;
}
.featureHeading,.featureText{
display:block;
text-align:center;
}
.featureHeading{
font-size:36px;
letter-spacing:-1px;
font-weight:600;
margin:25px auto 25px auto;
}
.featureText{
font-size:16px;
font-weight:300;
margin:25px auto 50px auto;
}
.featureImg{
display:block;
text-align:center;
margin:25px auto 25px auto;
}
.featureDivDark{
padding:75px 25px 50px 25px;
background:#f3f3f3;
border-bottom:1px solid #dbdbdb;
}
.featureDivLight{
padding:75px 25px 50px 25px;
background:#f8f8f8;
border-bottom:1px solid #dbdbdb;
}



.feature3column{
float:left;
width:250px;
margin:50px 30px;
}
.feature3Img{margin:0 0 30px 0;}
.feature1Img{float:right;margin:0;}
.feature1column{
clear:both;
width:960px;
}
.feature2column{
float:left;
width:420px;
margin:10px 0 10px 50px;
}

#welcomeFooter{
clear:both;
padding:10px 0 10px 0;
font-size:11px;
text-align:center;
margin:0 auto;
}
A:link.hidden {color:#000;text-decoration:none;}
A:visited.hidden {color:#000;text-decoration:none;}
A:active.hidden {color:#000;text-decoration:none;}
A:hover.hidden {color:#000;text-decoration:none;}
.item{
padding:0 20px 0 0;
}
.reglable{
margin:12px 50px 5px 0;
font-size:12px;
font-weight:300;
color:#333;
}

/* todo: remove these after 2024/09/01 */
/*
* Application Gallery
*/
/*
#appLefNav{
clear:both;
float:left;
margin:10px 0 0 0;
border:1px solid #ebebeb;
width:180px;
font-size:12px;
}
.appRightContent{
float:left;
margin:10px 0 0 10px;
width:636px;
font-size:12px;
}
.appLv01,.appLv02{
font-size:12px;
border-bottom:1px solid #ebebeb;
}
.appLv01{
padding:10px 5px 10px 15px;
}
.appLv02{
padding:10px 5px 10px 25px;
}
.appHeader{
float:left;
margin:10px 0 10px 0;
padding:5px 10px 5px 10px;
border:1px solid #ebebeb;
background-image:url(/sims/img/frontbglighter.png);
font-size:20px;
font-family:"Lucida Grande",Tahoma,Arial,sans-serif;
font-weight:bold;
color:#9F0909;
width:618px;
}
.appContent{
float:left;
padding:10px;
border:1px solid #ebebeb;
background: url(/sims/img/frontbglighter.png) repeat-x;
font-family:"Lucida Grande",Tahoma,Arial,sans-serif;
font-size:12px;
}
.appSubcontent{
position:relative;
float:left;
width:280px;
margin:0 10px 10px 10px;
padding:10px;
font-family:"Lucida Grande",Tahoma,Arial,sans-serif;
font-size:12px;
}
.appSubcontentText{
margin:5px 0 0 0;
}
.appContentTitle{
margin:0 15px 15px 15px;
font-size:15px;
font-weight:bold;
}
a.appContentSubtitle{
font-size:12px;
font-weight:bold;
color:#000000;
text-decoration:underline;
margin:0 0 15px 0;
}
.appContentText{
margin:0 15px 15px 15px;
}


.tourLeftNav,.tourLeftNavSelected{
-moz-outline:0px none; outline:0 none;
display:block;
padding:15px;
border-bottom:1px solid #BBBBBB;
border-right:1px solid #BBBBBB;
line-height:19px;
height:19px;
background:#efefef;
font-family:"Lucida Grande",Tahoma,Arial,sans-serif;
font-size:12px;
font-weight:bold;
color:#000000;
}
.tourLeftNavSelected{
border-right:0 none;
background:none;
}
*/

.lotNumDiv {
  display: inline-block;
  margin: 3px 5px;
  cursor: pointer;
}
.pricingProduct{
font-size:18px;
font-weight:800;
color:#000;
padding:50px 0 0 0 !important;
}

#regTable td{
height:50px;
vertical-align:top;
}
#regTable div{
color:#888888;
padding:0 0 12px 0;
}

.learnTab{
font-weight:bold;
font-size:26px;
margin:50px 0 20px 20px;
color:#111111;
}

#moreDocuments li{
float:left;
margin:20px 30px;
width:390px;
min-height:80px;
}
#moreDocuments li p a{
color:#365EBF;
}
#moreDocuments li h2{
text-align:left;
}
#moreDocuments li h2 a{
font-size:15px;
font-family:arial;
font-weight:bold;
color:#8C0C0C;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */



.installButton{
background:url(/sims/img/installButton.png);
height:20px;width:80px;
text-align:center;
cursor:pointer;
}
.installButton:hover{
opacity:0.8;
}
.installButtonText{
line-height:20px;
color:white;font-size:12px;font-family:arial;font-weight:bold;
}

#aboutMain p,#aboutMain i{
font-size:14px;
margin:1em 1em 1em 0;
line-height:180%;
}
.about-container {
  width: 100%;
  max-width: 800px; 
  margin: 0 auto;
  padding: 0 12px;
}
@media (max-width: 991px) {
  .about-container {
    max-width: 720px;
  }
}
@media (max-width: 767px) {
  .about-container {
    max-width: 540px;
  }
}
#aboutMain h1{
font-size:36px;
line-height:46px;
margin:25px 0 0 0;
}
#aboutMain h3{
clear:both;
font-size:26px;
color:black;
}
#aboutMain img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
#aboutMain li{
list-style:disc inside;
}
#aboutNew p{
font-size:18px;
margin:0 0 25px 0;
}
#aboutNew h2{
font-size:36px;
line-height: 1.5em;
font-weight:400;
margin:25px 0 12px 0;
}
.about-awards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 32px;
}
@media (max-width: 767px) {
  .about-awards {
    grid-template-columns: 1fr;
  }
}
.about-award {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  list-style: none !important;
  padding: 0 20px;
}
.about-award img {
  margin-bottom: 12px;
}
.about-award-caption {
  font-size: 14px !important;
}
.about-contact {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 25px;
  font-size: 18px;
}
@media (max-width: 575px) {
  [data-lang=zh-TW] .about-contact,
  [data-lang=zh-CN] .about-contact {
    justify-content: center;
  }
  [data-lang=en] .about-contact,
  [data-lang=es] .about-contact,
  [data-lang=ja] .about-contact {
    grid-template-columns: 1fr;
  }
  .about-contact > *:nth-child(even) {
    padding-bottom: 16px;
  }
}

@media (max-width: 767px) {
  .aboutMain .flex-sm-column {
    flex-direction: column;
  }
}
.playButton{
background: transparent url(../common/img/videoPlayButton.png) no-repeat 0 0;
display: inline-block;
height: 80px;
position: absolute;
width: 80px;
left: 190px;
top: 91px;
opacity:0.7;
}
.playButton:hover{
background-position: 0 -80px;
}



/*.floatingWin{*/
/*position:absolute;*/
/*top:15%;*/
/*left:15%;*/
/*!*width:550px;*!*/
/*font-size:12px;*/
/*!*padding:20px;*!*/
/*z-index:260;*/
/*}*/
/*.floatingWinHeader,.dockWinHeader{*/
/*float:left;*/
/*background:url('/sims/img/windowbanner_m.png');*/
/*!*background:#666666;*!*/
/*color:white;*/
/*padding:3px 0 3px 12px;*/
/*font-size:12px;*/
/*font-weight:bold;*/
/*height:17px;_height:23px;*/
/*width:520px;_width:532px;*/
/*cursor:default;*/
/*}*/
/*.dockWinHeader{*/
/*cursor:pointer;*/
/*width:430px;_width:442px;*/
/*}*/
/*.floatingWinHeaderLeft{*/
/*float:left;*/
/*background:url('/sims/img/windowbanner_l.png');*/
/*width:9px;height:23px;*/
/*}*/
/*.floatingWinHeaderRight{*/
/*float:right;*/
/*background:url('/sims/img/windowbanner_r.png');*/
/*width:9px;height:23px;*/
/*}*/
/*.floatingWinContent{*/
/*clear:both;_height:0;*/
/*padding:15px 11px 10px 25px;*/
/*background:#ECE9D8;*/
/*overflow:auto;*/
/*border:1px solid #888;*/
/*}*/
/*.floatingOKbutton{*/
/*clear:both;*/
/*float:left;*/
/*margin:8px 0 0 20px;*/
/*width:80px;*/
/*font-size:12px;*/
/*}*/
/*.close{*/
/*float:right;*/
/*padding-top:0;*/
/*padding-right:5px;*/
/*cursor:pointer;*/
/*color:#ffffff;*/
/*}*/

#sitemap{
margin:0 auto 0 auto;
width:1000px;
}

#home2012Slogan{float:left;margin:100px 0 50px 25px;font-size:30px;width:467px;}
#home2012Slogan1{float:left;height:50px;line-height:50px;}
#flick{height:50px;overflow:hidden;float:left;}
#flick div{font-size:30px;line-height:50px;padding:0 0 0 10px;font-weight:bold;}
#sub1{float:left;clear:left;font-size:15px;margin:3px 0 0 1px;font-family:arial;}
#sub2{float:left;clear:left;font-size:15px;margin:8px 0 0 1px;font-family:arial;}
#home2012movie{float:left;height:280px;width:460px;margin:15px 0 0 0;position:relative;cursor:pointer;/*box-shadow:inset 0 0 30px #efefef;border:1px solid #cccccc;*/overflow:hidden;}
#movie2012{width:100%;height:100%;top:0;left:0;position:absolute;background-color:#555555;}
#closeMovie{position:absolute;top:25px;right:30px;color:white;font-size:20px;cursor:pointer;}
.home2012div{padding:50px 25px 0 25px;}
.stepImage{float:left;clear:left;width:360px;margin:0 0 50px 0;}
.home2012div div{float:left;width:900px;margin:12px 25px 12px 35px;}
#goPanel{background-color:#e8e8e8;padding:15px 3px 15px 3px;}

dt,dd,dl{margin-left:1em;}

#voteMain div{
-webkit-border-radius:5px;
border-radius:5px;
}
#regDivHome{
background:#ffffff;
transition: all 0.5s;
-moz-transition: all 0.5s; /* Firefox 4 */
-webkit-transition: all 0.5s; /* Safari and Chrome */
-o-transition: all 0.5s; /* Opera */
    display: none;
}
.homepageRegister{
  font-size:2.5rem;
  padding:1.3rem 3.3rem;
  margin:1.5rem 0 1.5rem -0.5rem;
}
@media (max-width: 1023px) {
  #frontSignupForm {
    display: block;
  }
}
@media (min-width: 1024px) {
    #regDivHome {
        display: block;
        width: 410px;
        padding: 1rem 0 0 2rem;
    }
}
@media (min-width: 1279px) {
    #regDivHome {
        width: 490px;
        padding: 1rem 0 0 6rem;
    }
}
#regDivHome input{
padding:3px 8px 3px 8px;
}
.regDiv,.appDiv{
background:#ffffff;
border-top:2px solid #ddd;
border-left:2px solid #888;
border-right:2px solid #888;
border-bottom:2px solid #888;
border-radius:8px;
margin:0 0 36px 0;
padding:0;
box-shadow: 0 12px 25px #8B8B8B;
}
.regDiv input{
padding:3px 8px 3px 8px;
}
.regPromptHome{
color:#CC0000;
position:absolute;
font-size:12px;
}
.regPrompt{
position:absolute;
color:#efefef;
background:#cc0000;
padding:3px 12px;
right:-100px;
z-index:999;
border-radius:3px;
transition: all 0.3s;
-moz-transition: all 0.3s; /* Firefox 4 */
-webkit-transition: all 0.3s; /* Safari and Chrome */
-o-transition: all 0.3s; /* Opera */
}
.thebutton:visited,.thebutton:hover,.thebutton:active,.thebutton:link{color:white;text-decoration:none;cursor:pointer;}
.thebutton2:visited,.thebutton2:hover,.thebutton2:active,.thebutton2:link{color:white;text-decoration:none;cursor:pointer;}
.thebutton3:visited,.thebutton3:hover,.thebutton3:active,.thebutton3:link{text-decoration:none;cursor:pointer;}
.thebutton {
background-color:#E70E0E;
-moz-border-radius:0.6rem;
-webkit-border-radius:0.6rem;
border-radius:0.6rem;
border:1px solid #d83526;
display:inline-block;
color:#ffffff;
font-size:1.7rem;
font-weight:600;
padding:1.4rem 2rem;
text-decoration:none;
text-shadow:1px 1px 0 #b23e35;
}.thebutton:hover {
 background-color:#F70E0E;
 }.thebutton:active {
  background-color:#d83526;
  }
.thebutton2 {
background-color:#4f4f4f;
-moz-border-radius:0.6rem;
-webkit-border-radius:0.6rem;
border-radius:0.6rem;
border:1px solid #333333;
display:inline-block;
color:#f0f0f0;
font-size:1.7rem;
font-weight:600;
padding:1.4rem 3rem;
text-decoration:none;
text-shadow:1px 1px 0 #7d7c7d;
}.thebutton2:hover {
 border:1px solid #555555;
 background-color:#666666;
 }.thebutton2:active {
  background-color:#333333;
  }

.thebutton3 {
-moz-box-shadow:inset 0 1px 0 0 #ffffff;
-webkit-box-shadow:inset 0 1px 0 0 #ffffff;
box-shadow:inset 0 1px 0 0 #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
-moz-border-radius:0.6rem;
-webkit-border-radius:0.6rem;
border-radius:0.6rem;
border:1px solid #bbbbbb;
display:inline-block;
color:#777777;
font-family:arial;
font-size:1.5rem;
font-weight:bold;
padding:0.6rem 2.4rem;
text-decoration:none;
text-shadow:1px 1px 0 #ffffff;
}.thebutton3:hover {
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
 background-color:#dfdfdf;
 }.thebutton3:active {
  position:relative;
  top:1px;
  }


#quoteTable{
margin:25px 0 25px 0;
}
#quoteTable th {
font-size:16px;font-weight:600;text-align: right;padding:0 50px 25px 0;
color:#888888;
}
#quoteTable td {
font-size:16px;
padding:0 50px 25px 0;
}
#quoteTable.modify_ccupdate_quoteTable th {
    text-align: left;
    padding-right: 60px;
}
#quoteTable input[type=text] {
  padding:1px 5px;
  font-size:16px;
  border-radius: 4px;
  border:1px solid #aaa;
  height:40px; /* 配合 Stripe card element */
  transition:all 0.3s ease;
}
.manualPaymentModifyTable td {
padding:0 45px 25px 0;
}
@keyframes fadein
{
from {opacity: 0;}
to {opacity: 1;}
}

@-webkit-keyframes fadein /* Safari and Chrome */
{
from {opacity: 0;}
to {opacity: 1;}
}
.tooltip{
position: absolute;
padding:1em;
background: #000000;
opacity: 0.9;
color:#efefef;
border-radius: 3px;
width:300px;
animation: fadein 0.3s;
-webkit-animation: fadein 0.3s; /* Safari and Chrome */
}
.tooltipHeader{
font-size:16px;
font-weight:bold;
color:#aaa;
}

.pageNum{
float:left;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
background-color:#f6f6f6;
border:1px solid #C8D5E0;
font-weight:bold;
padding:8px 10px;
text-decoration:none;
color:#1E598E;
}
.pageNumNow{
background-color:#ffffff;
}



.homeTopDiv{
height:460px;
padding:0 0 25px 0;
overflow:hidden;
transition: all 0.3s;
-moz-transition: all 0.3s; /* Firefox 4 */
-webkit-transition: all 0.3s; /* Safari and Chrome */
-o-transition: all 0.3s; /* Opera */
/* add padding to avoid collapse instead of overflow? */
}
.homeTopDivInner{
margin:150px auto 0 auto;width:980px;text-align: right;
}
.homeTopDivInner2{
margin:0 auto;width:980px;text-align: left;
}
.homeTopBanner{
margin:0 90px 0 0;font-size:46px;font-weight:800;font-family:Tahoma,Arial;line-height:60px;
}
.homeTopDiv h2{
font-size:36px;
font-weight:normal;
line-height:39px;
letter-spacing:-1px;
}
.homeTopDiv p{
float:left;
clear:left;
margin:3px 0 0 15px;
font-size:36px;
color:#999;
line-height:120%;
letter-spacing:-1px;
}
#bannerControl{
/*background:#f8f8f8;*/
height:36px;margin:0 auto;width:300px;text-align:center;
vertical-align: top;
}
#bannerControl span{
color:#aaa;
margin:5px;
cursor:pointer;
}
#bannerControl span:hover{
color:#ddd;
}
#bannerControl span.showing{
color:#d00;
}


#learn-more{
position:absolute;
bottom:50px;
text-align: center;
width:100%;
cursor:pointer;
font-size:20px;
}
#pubDiv h3{
font-size:28px;
color:#666;
margin:0 0 25px 0;
}
#pubDiv li{
margin:8px 0;
}
#pubDiv a{
font-size:16px;
color:#000;
}
#pubDiv ul{
float:left;
margin:0 120px 100px 0;
}
#pubDiv h3,#pubDiv img{
float:left;
}
#pubDiv img{
margin:-8px 12px 0 0;
}
#pubNote a:hover{
text-decoration: none;
}

.placeholding-input {
display: block;
height: 30px;
width: 276px;
position: relative;
overflow: visible;
margin:0 0 12px 0;
}
.text-input {
width: 266px;
height: 20px;
border: 1px solid #bbb !important;
-webkit-box-shadow: inset 0 1px 0 #EEE,#FFF 0 1px 0;
box-shadow: inset 0 1px 0 #EEE,#FFF 0 1px 0;
position: absolute;
top: 0;
}
.placeholding-input .placeholder {
position: absolute;
top: 10px;
right: 1px;
bottom: 1px;
left: 8px;
z-index: 1;
height: 20px;
padding: 4px;
font-size: 22px;
line-height: 20px;
color: #aaa;
white-space: nowrap;
cursor: text;
-webkit-transition: opacity .1s,font-size .1s;
-moz-transition: opacity .1s,font-size .1s;
-o-transition: opacity .1s,font-size .1s;
transition: opacity .1s,font-size .1s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

display: block;
margin-bottom: 5px;
}


.placeholding-input-home {
position:relative;
height: 30px;
width: 276px;
position: relative;
overflow: visible;
margin:25px 0 25px 0;
}
.registerItem{
  margin:18px 0 18px 0;
}
.registerItemHome{
  position: relative;
  margin:18px 0 18px 0;
}
.placeholding-input2 {
height: 30px;
width: 276px;
position: relative;
overflow: visible;
margin:18px 0 18px 0;
}
.text-input2 {
width: 266px;
height:30px !important;
border: 1px solid #bbb !important;
-webkit-box-shadow: inset 0 1px 0 #EEE,#FFF 0 1px 0;
box-shadow: inset 0 1px 0 #EEE,#FFF 0 1px 0;
position: absolute;
top: 0;
}
.text-input-home {
height:36px !important;
border: 1px solid #bbb !important;
-webkit-box-shadow: inset 0 1px 0 #EEE,#FFF 0 1px 0;
box-shadow: inset 0 1px 0 #EEE,#FFF 0 1px 0;
}
.placeholding-input-home .placeholder2{
position: absolute;
top: 8px;
right: 1px;
bottom: 1px;
left: 8px;
z-index: 1;
height: 20px;
padding: 4px;
font-size: 15px;
line-height: 20px;
color: #aaa;
white-space: nowrap;
cursor: text;
-webkit-transition: opacity .1s,font-size .1s;
-moz-transition: opacity .1s,font-size .1s;
-o-transition: opacity .1s,font-size .1s;
transition: opacity .1s,font-size .1s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

display: block;
margin-bottom: 5px;

}
.placeholding-input2 .placeholder2 {
position: absolute;
top: 6px;
right: 1px;
bottom: 1px;
left: 8px;
z-index: 1;
height: 20px;
padding: 4px;
font-size: 15px;
line-height: 20px;
color: #aaa;
white-space: nowrap;
cursor: text;
-webkit-transition: opacity .1s,font-size .1s;
-moz-transition: opacity .1s,font-size .1s;
-o-transition: opacity .1s,font-size .1s;
transition: opacity .1s,font-size .1s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

display: block;
margin-bottom: 5px;
}

/*
*  For documents
*/
.docToc{
font-size:2rem;
}
.docToc ol{
margin:0 0 0 25px;
font-size:85%;
}
.docToc li{
line-height: 180%;
}

.docSidebar{
position:fixed;
background:#f3f3f3;
padding:1.2rem;
margin:0;
top:0;
right:0;
width:15rem;
max-height:80%;
overflow:auto;
font-size:1.2rem;
line-height: 150%;
border-radius:0 0 0 1rem;
border:1px solid #ccc;
box-shadow: rgba(0,0,0,0.15) 0 1px 3px;
}
.docSidebar .closeButton{
position:fixed;
top:5px;
right:20px;
cursor:pointer;
}
.docSidebar p.docp{
margin:1.5rem 0.5rem;
}
.docSidebar a{
line-height: 150%;
font-size:1.4rem;
}


/* document layouts (doc, doc-kb, course) */
.document-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 0 3rem;
  z-index: 1;
  transition: transform .15s;
}
.document-header-hiddenElement{
  visibility: hidden;
  position: absolute;
  white-space: nowrap;
}
.document-hamburger-container {
  display: flex;
}
.document-header .logo{
  width: 8.5rem;
  height: auto;
  display: block;
  margin-right: 0.8rem;
}
.document-header-title{
  font-size: 2rem;
  font-weight: bold;
  color: #000;
}
@media (max-width: 991px) {
  .document-header {
    position: sticky;
  top: 0;
  }
}
@media (max-width: 767px) {
  .document-header{
    padding: 0 2rem;
  }
  .document-header .logo{
    width: 7.5rem;
  }
  .document-header-title{
    font-size: 1.8rem;
  }
}
.document-header-nav{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  line-height: 3.6rem;
  font-size: 1.4rem;
  font-weight: 600;
}
.document-header-nav-link{
  display: block;
  padding: 6px 18px;
}
#document-link-menu-container {
  position: fixed;
  background-color: #F8F8F8;
  z-index: 5;
  width: 100%;
  box-shadow: 0px 3px 6px #00000029;
}
#document-link-menu-container div{
  font-size: 1.8rem;
  padding: 20px 25px;
}
#document-link-menu-container a{
  color: #333;
  font-weight: normal;
}
#document-link-menu-container a:hover{
  text-decoration: none;
}
.border-bottom {
  border-bottom: 1px solid #ddd;
}

@media (max-width: 767px) {
  #showDocSidenavIcon {
    display: block;
  }
}
#showDocLinknavIcon {
  display: block;
}

.document-banner {
  background-image: url(/sims/img/kb-banner.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 4rem 0;
}
.document-banner .searchGuide{
  font-size: 2.4rem;
  font-weight: bold;
  margin: 0 0 2rem 0;
  text-align: center;
}
.document-banner .searchbarContainer{
  margin: 0 auto;
  width: 50%;
  max-width: 660px;
  display: flex;
  align-items: end;
  justify-content: center;
  flex-direction: column;
}
@media (max-width: 767px) {
  .document-banner .searchbarContainer{
    width: 80%;
  }
  .document-banner .searchGuide{
    font-size: 1.4rem;
    margin:0 0 1rem 0;
  }
}
#kbsearchbox {
  width: 100%;
  height: 3.6rem;
  padding-left: 10px;
  border: 1px solid #707070;
  border-radius: 3px;
  outline: none;
}
#kbsearchbox:focus {
  border-color: #07c;
}


.document-container {
  display:flex;
  font-size: 1.6rem;
  background-color: #fff;
  --btn-border-radius: 3px;
  --btn-padding-x: 2rem;
  --btn-padding-y: 0.8rem;
}

.document-main { /* only box model here */
  max-width: 800px;
  padding: 4rem 6rem;
}
.course-list .document-main {
  flex: 1 1 80%;
  max-width: 1000px;
}
@media (max-width: 767px) {
  .course-list .document-main {
    padding: 3rem 2rem;
    max-width: 100%;
  }
}

.document-article { /* only typography here, no box modal */
  font-size: 1.6rem;
  line-height: 180%;
  font-weight: 400;
}

.document-sidenav-container {
  flex: 1 0 20%;
}
@media (max-width: 1439px) {
  .course-list .document-sidenav-container {
    flex-grow: 0;
  }
}
@media (max-width: 767px) {
  .document-sidenav-container {
    position: fixed;
    top: 53px;
    z-index: 300; /* crisp z-index:250 would affect scrollbar */
    width: 100%;
    height: calc(100% - 53px); /* minus height of the header */
  }
}

.document-sidenav {
  position: sticky;
  top: 0;
  min-width: 250px;
  max-width: 300px;
  height: 100vh;
  background-color: #F8F8F8;
  color: #8e8e8e;
  overflow: auto;
}
.document-sidenav a {
  color: #555;
  font-weight: normal;
}
.document-sidenav a.active {
  color: #06c;
}
@media (max-width: 767px) {
  .document-sidenav {
    width: 100%;
    max-width: none;
    height: 100%;
    overflow: auto;
  }
  .doc-sidenav-icon {
    display: none;
  }
  .course-sidenav-l1-title {
    padding: 0 32px;
  }
}

.document-hambuger {
  display: none;
  padding: 16px;
  cursor: pointer;
}
.document-hambuger i {
  display: block;
}
.document-article li {
  list-style: disc inside;
}
.document-article .lblockArticle p, .document-article .lblockArticle h1,
.document-article .lblockArticle h2, .document-article .lblockArticle h3,
.document-article .lblockArticle h4, .document-article .lblockArticle ol {
  max-width: 100%;
}
.document-article .docSidebar{
  display: none;
}
.blog-article-content-container .docSidebar,
.docSidebar.blogSidebar{
  display: none;
}
/* close icon "x" of docSidebar */
.document-article .docSidebar > div:first-child{
  display: none;
}
@media (max-width: 991px) {
  .document-article .docSidebar {
    display: block;
    position: relative;
    width: auto;
    background: #fff;
    border: none;
    padding: 0;
    box-shadow: none;
    top: 0 !important;
  }
}

.document-toc-container {
  flex: 1 0 20%;
}
@media (max-width: 1439px) {
  .course-list .document-toc-container {
    display: none;
  }
}
@media (max-width: 991px) {
  .document-toc-container {
    display: none;
  }
}
.document-toc-container-inner {
  position: sticky;
  top: 0;
  width: fit-content;
  max-width: 220px;
  height: 100vh;
  padding: 30px 0;
}
  
.document-toc {
  max-height: 100%;
  padding: 0 23px 0 20px;
  font-size: 1.4rem;
  color: #5f6368;
  background-color: #fff;
  border-left: 4px solid #ccddff;
  overflow: auto;
}
.document-toc .toc-groupTitle {
  font-weight: 700;
  margin-bottom: 7px;
}
.document-toc hr {
  border-top: 1.5px solid #d0d0d0;
  border-right: none;
  border-bottom: none;
  border-left: none;
}
.document-toc .toc-item {
  margin-bottom: 3px;
}
.document-toc .toc-link {
  color: #aaa;
}
.document-toc .toc-link.active {
  color: #06c;
}

.document-article-title-container {
  margin-bottom: 4rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #d0d0d0;
  line-height: 1.4;
}
.document-article-title{
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 0; /* reset margin-bottom of h1 in indexv6.css */
}
@media (max-width: 767px) {
  .document-article-title{
    font-size: 2.5rem;
  }
}

.doc-searchResultsContainer{
  width: 50%;
  min-width: 540px;
  max-width: 892px;
  margin: 0 auto;
  padding: 0 0 8px 0;
}
.doc-searchResultsCount{
  font-size: 3rem;
  font-weight: 700;
  padding: 2rem 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid #000;
}
.stretched-link::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
}
.briefArticleContainer {
  position: relative;
  padding: 30px 5px 30px 32px;
  transition: background-color .35s ease, box-shadow .35s ease;
}
.briefArticleContainer:hover {
  background-color: #f7f7f7;
  box-shadow: 2px 2px 5px 2px rgb(171 171 171 / 75%)
}
.briefArticleContainer .titleIcon {
  margin-right: 10px;
  font-size: 22px;
}
.briefArticleContainer .title {
  font-size: 24px;
  /* clear Ragic h2 style */
  line-height: inherit;
  letter-spacing: inherit;
  margin-bottom: 0;
}
.briefArticleContainer .titleDiv {
  display:flex;
  align-items:baseline;
  font-weight:700;
}
.briefArticleContainer .readArticleLink {
  padding:0 30px;
}
.briefArticleContent {
  padding: 12px 30px;
}
.doc-searchKeywords{
  color: #DD4B39 !important;
}
.searchDivider {
  font-size:18px;
  font-weight:700;
  color:#555;
  border-bottom:1px solid #555;
  padding:18px 0 6px 0;
}
@media (max-width: 767px){
  .doc-searchResultsContainer{
    width: 100%;
    min-width: auto;
    padding: 0 20px;
  }
  .doc-searchResultsCount{
    font-size: 2rem;
    padding: 2rem 0 1rem 0;
  }
  .briefArticleContainer {
    padding-left: 5px;
  }
  .briefArticleContainer .titleIcon {
    font-size: 18px;
  }
  .briefArticleContainer .title {
    font-size:20px;
  }
  .briefArticleContent {
    padding: 12px 25px;
  }
}

/* sidebar of doc-kb */
.kb-sidenav{
  padding: 25px;
}
.kb-sidenav i {
  margin-right: 10px;
  pointer-events: none;
  transition: transform 0.2s;
}
.kb-sidenav .expanded > i {
  transform: rotate(90deg);
}
.kb-sidenav .majorType {
  margin-bottom: 10px;
  font-weight:bold;
  font-size: 1.5rem;
}
.kb-sidenav .minorTypesWrapper {
  padding-left: 5px;
  font-size: 1.4rem;
}
.kb-sidenav .minorTypesWrapper:not(.expanded) {
  display: none;
}
.kb-sidenav .minorType i{
  margin-right: 8px;
}
.kb-sidenav .articlesWrapper {
  padding: 3px 0 5px 30px;
  font-size: 1.3rem;
  font-weight: 600;
}
.kb-sidenav .articlesWrapper:not(.expanded) {
  display: none;
}
.kb-sidenav .articlesWrapper.withinMinorType {
  padding-left: 25px;
}
.kb-sidenav .articlesWrapper li {
  line-height: 1.2;
  margin-bottom: 10px;
}

@media (max-width: 767px){
  .kb-sidenav{
    padding: 0 25px;
  }
  .kb-sidenav .majorType {
    padding: 25px 0;
    font-size: 1.6rem;
    border-bottom: 1px solid #DADADA;
    margin: 0;
  }
  .kb-sidenav .majorType .majorType-link {
    color: black;
  }
  .kb-sidenav .minorType {
    margin: 10px 0;
  }
  .kb-sidenav .articlesWrapper {
    padding: 20px 30px 5px 30px;
    font-size: 1.4rem;
  }
  .kb-sidenav .articlesWrapper li {
    line-height: 1.5;
    margin-bottom: 20px;
  }
}


/* sidebar of doc */
.doc-sidenav-l1 {
  padding: 25px 0;
  color: #333;
}
.doc-sidenav-l1 a {
  color: #333;
}
.doc-sidenav-l1-link {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  padding: 6px 25px;
}
.doc-sidenav-l1-link:hover {
  background-color: #dedede;
}
.doc-sidenav-l1-link.expanded i {
  transform: rotate(90deg);
}
.doc-sidenav-l1 i {
  margin-right: 10px;
  pointer-events: none; /* prevent triggering mouse events */
  transition: transform .2s;
}
.doc-sidenav-l2 {
  background-color: #404040;
}
.doc-sidenav-l2:not(.expanded) {
  display: none;
}
.doc-sidenav-l1 .doc-sidenav-l2-link {
  display: block;
  font-size: 1.6rem;
  font-weight: 400;
  color: #fff;
  padding: 6px 25px 6px 48px;
}
.doc-sidenav-l1 .doc-sidenav-l3-link {
  display: block;
  font-size: 1.4rem;
  color: #fff;
  padding: 0 25px 6px 72px;
}
.doc-sidenav-l1 a.active {
  color: #65A4F4 !important;
}

@media (max-width: 767px){
  .doc-sidenav-l1 {
    padding: 0;
  }
  .doc-sidenav-l1-item {
    padding: 23px 0;
    border-bottom: 1px solid #DADADA;
  }
  .doc-sidenav-l2 {
    background-color: #F8F8F8;
  }
  .doc-sidenav-l2-item {
    margin: 10px 0 0 0;
  }
  .doc-sidenav-l1-link {
    padding: 0 25px;
  }
  .doc-sidenav-l1 .doc-sidenav-l2-link {
    color: #8E8E8E;
    font-weight: 600;
    padding: 0 48px;
  }
  .doc-sidenav-l3 {
    margin: 10px 0;
  }
  .doc-sidenav-l1 .doc-sidenav-l3-link {
    color: #8E8E8E;
    font-weight: 600;
    padding: 0 72px 6px 72px;
  }
}

/* sidenav of course */
.course-sidenav-l1 {
  padding: 5px 15px 15px 15px;
}
.course-sidenav-l1 a {
  display: inline-block;
  padding: 5px;
}
.course-sidenav-l1 hr {
  margin: 0 15px;
}
.course-sidenav-l1-item {
  padding: 20px 10px 15px 10px;
}
.course-sidenav-l1-item:not(:last-child) {
  border-bottom: 1px solid #DADADA;
}
.course-sidenav-l1-title {
  display: flex;
  font-size: 1.6rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 5px;
}
.course-sidenav-l1-title i {
  flex: 0 0 20px;
  margin-top: 1px;
  margin-right: 12px;
}
.course-sidenav-l2-item {
  padding-left: 27px;
}
.course-sidenav-l2-link {
  font-size: 1.5rem;
}
.course-sidenav-l2-link.course-sidenav-link-expandable {
  margin-left: -18px;
}
.course-sidenav-l2-link i {
  margin-right: 8px;
  transition: transform .2s ease;
}
.course-sidenav-l1 .course-sidenav-link-expandable {
  display: inline-flex;
  align-items: baseline;
}
.course-sidenav-link-expandable * {
  pointer-events: none;
}
.course-sidenav-link-expandable:hover {
  text-decoration: none;
}
.course-sidenav-link-expandable:hover span {
  text-decoration: underline; /* underline only below text, not icon */
}
.course-sidenav-link-expandable.expanded i {
  transform: rotate(90deg);
}
.course-sidenav-l3:not(.expanded) {
  display: none;
}
.course-sidenav-l3-link {
  font-size: 1.3rem;
}

.btn {
  --btn-color: #333;
  --btn-bg-color: transparent;
  --btn-border-color: transparent;
  --btn-hover-color: #333;
  --btn-hover-bg-color: #fff;
  --btn-hover-border-color: transparent;
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  color: var(--btn-color);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  background-color: var(--btn-bg-color);
  border: 1px solid var(--btn-border-color);
  font-size: 16px;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--btn-border-radius);
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn:link,
.btn:visited {
  color: var(--btn-color);
}
.btn:hover {
  color: var(--btn-hover-color);
  background-color: var(--btn-hover-bg-color);
  border-color: var(--btn-hover-border-color);
  text-decoration: none;
}
.course-index-container {
  max-width: 900px;
}
.course-index-h1 {
  font-size: 24px;
  letter-spacing: normal;
}
.course-index-h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01px;
  color: #000;
}
.course-index-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 90px;
}
[data-lang=en] .course-index-nav,
[data-lang=es] .course-index-nav,
[data-lang=ja] .course-index-nav,
[data-lang=fr] .course-index-nav{
  grid-template-columns: repeat(2, minmax(250px, 1fr));
}
.course-index-nav-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 20px;
  --btn-color: #707070;
  --btn-border-color: #707070;
  --btn-hover-color: #333;
  --btn-hover-border-color: #333;
  --btn-padding-y: 24px;
}
.course-index-nav-item-icon {
  font-size: 40px;
  color: #8BBEFF;
  margin-right: 16px;
}
.course-index-nav-link.btn span {
  text-align: start;
  width: 70%;
}
@media (max-width: 1439px) {
  .course-index-nav {
    margin-left: 0;
    margin-right: 0;
  }
  .course-index-nav-link {
    --btn-padding-y: 16px;
  }
  .course-index-nav-item-icon {
    font-size: 30px;
  }
}
@media (max-width: 991px) {
  [data-lang] .course-index-nav {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 767px) {
  .course-index-nav-link {
    font-size: 16px;
  }
  .course-index-nav-item-icon {
    font-size: 24px;
    margin-right: 12px;
  }
}

.course-index-section {
  margin-bottom: 90px;
}
.course-index-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #ccc;
}
.course-index-section-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.01px;
}
.course-index-section-title-icon {
  width: 30px;
  color:#8BBEFF;
  font-size: 20px;
  margin-right: 4px;
}
.course-index-section-score {
  font-weight: 500;
  color: #555;
}
.course-index-section-body {
  padding-top: 40px;
}

.course-index-card-imgContainer:hover img {
  transform: scale(1.05);
}
.course-index-card-imgContainer {
  display: block;
  overflow: hidden;
}
.course-index-card-img {
  display: block;
  width: 100%;
  transition: transform .35s ease;
}
.course-index-card-body {
  padding-top: 14px;
}
.course-index-card-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01px;
  color: #000;
  margin-bottom: 10px;
}
.course-index-card-title a {
  color: inherit;
}
.course-index-card-text {
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  margin-bottom: 16px;
}
.course-index-card-small-link {
  font-size: 12px;
  font-weight: 500;
}
.btn-doc-outline-gray {
  --btn-color: #707070;
  --btn-bg-color: #fff;
  --btn-border-color: #707070;
  --btn-hover-color: #fff;
  --btn-hover-bg-color: #707070;
}


.course-index-section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 24px;
  row-gap: 50px;
  margin-bottom: 50px;
}
@media (max-width: 991px) {
  .course-index-section-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 767px) {
  .course-index-section-grid {
    grid-template-columns: 1fr;
  }
}
.grid-col-span-2 {
  grid-column: span 2;
}
@media (max-width: 991px){
  .grid-col-span-md-1 {
    grid-column: span 1;
  }
}
@media (max-width: 991px) {
  .course-index-section-grid.main-video {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }
}

.responsive-iframe-container {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.responsive-iframe-container iframe,
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.docTocGridOuterContainer {
  width: 90%;
  max-width: 1440px;
  margin: 0 auto;
  border: 1px solid #aaa;
}
.docTocGridContainer {
  max-width: 940px;
  padding: 0 20px;
  margin: 0 auto;
}
.docTocGrid {
  padding-bottom: 45px;
}
.docTocGrid:not(:last-child) {
  margin-bottom: 70px;
  border-bottom: 1px solid #aaa;
}
.docTocGridContainer .tocTitle {
  display: flex;
  align-items: baseline;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 40px;
}
.docTocGridContainer .tocTitle i {
  color: #65A4F4;
  margin-right: 20px;
}
.docTocGrid > ol {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.docTocGrid li {
  line-height: 1.8;
}
.docTocGrid a {
  color: #000;
}
.docTocGrid .chapterContainer {
  width: 50%;
  padding-left: 40px;
  padding-bottom: 24px;
}
.docTocGrid .chapterTitle {
  position: relative;
  font-size: 18px;
  font-weight: 700;
}
.docTocGrid .chapterTitle::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  top: 5px;
  left: -30px;
  background-color: #aaa;
  border-radius: 50%;
}
.docTocGrid .sectionTitle {
  font-size: 16px;
}
@media (max-width: 767px) {
  .docTocGridOuterContainer {
    width: 100%;
  }
  .docTocGridContainer {
    max-width: 720px;
    padding: 0 40px;
  }
  .docTocGrid {
    padding-bottom: 28px;
  }
  .docTocGrid:not(:last-child) {
    margin-bottom: 48px;
  }
  .docTocGridContainer .tocTitle {
    font-size: 24px;
    margin-bottom: 28px;
  }
  .docTocGrid .chapterContainer {
    width: 100%;
    padding-bottom: 20px;
  }
}
@media (max-width: 575px) {
  .docTocGridContainer {
    padding: 0 20px;
  }
  .docTocGridContainer .tocTitle {
    font-size: 20px;
    margin-bottom: 20px;
  }
  .docTocGrid .chapterContainer {
    padding-bottom: 16px;
  }
}


.courseList_score {
  font-size: 20px;
}
.courseList_courseName {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}
.courseList_courseDesc {
  font-size: 16px;
  padding: 10px 0 5px 0;
}
.courseArticleTitleContainer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.courseArticleItem {
  background-color: #fff;
  transition: background-color .35s ease, box-shadow .35s ease, transform .35s ease, border-radius .35s ease;
}
.courseArticleItem:hover {
  background-color: #f7f7f7;
  text-decoration: none;
  border-radius: 10px;
  box-shadow: 5px 5px 5px 0px rgb(171 171 171 / 75%);
  transform: translate(-5px, -5px);
}
.courseCover {
  display: flex;
  align-items: start;
  background-color: inherit;
}
.courseCover-imgContainer {
  flex: 0 0 30%;
  max-width: 320px;
  padding-top: 18%;
  margin-right: 40px;
  border-top-right-radius: 30% 50%;
  border-bottom-right-radius: 30% 50%;
  position: relative;
  overflow: hidden;
}
.courseCover-imgContainer img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  object-fit: contain;
}
.sneakyCharactor {
  position: absolute;
  width: 100px;
  top: 0px;
  left: 30%;
  opacity: 0;
  transform: translate(-50%, 0);
  transition: opacity .5s ease, transform .5s ease;
}
.courseArticleItemContainer:hover .sneakyCharactor {
  transform: translate(-50%, calc(-100% - 3px));
  opacity: 1;
}

/* Transitions Only After Page Load */
.preload * {
  transition: none !important;
}



@media (max-width: 800px) {
  .courseList_score {
    font-size: 1.6rem;
  }
  .courseList_courseName {
    font-size: 24px;
  }
  .courseList_courseDesc {
    font-size: 14px;
    padding: 10px 0 5px 0;
  }
  .courseArticleTitleContainer {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 576px) {
  .courseCover-imgContainer {
    display: none;
  }
}

#productNavbar, #productStickyNavbar {
  padding: 0.6rem 3rem;
}
@media (max-width: 767px) {
  #productNavbar, #productStickyNavbar {
    padding: 0.8rem 2rem;
  }
}

/* Basic */
.productIndex-header-container {
  display: flex;
  justify-content: center;
  margin: 14.5rem 0 10rem 0;
}
.productIndex-content-row-container {
  display: flex;
  justify-content: center;
  gap: 10rem;
  flex-wrap: wrap;
  margin: 0 0 10rem 0;
}
.productIndex-feature-section{
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
}

.productIndex-feature-section .productIndex-feature-imgDiv{
  height: 150px;
  width: 150px;
}
.productIndex-feature-section .productIndex-feature-textDiv{
  width: 250px;
  margin: 5rem 0 0 0;
  text-align: center;
}

.productIndex-feature-imgDiv > img{
  height: 100%;
  width: 100%;
}
.productIndex-feature-textDiv .productIndex-feature-header{
  margin: 0 0 1rem 0;
}
.productIndex-feature-textDiv .productIndex-feature-header h3{
  font-weight: bold;
  font-size: 20px;
  color: black;
}
.productIndex-feature-textDiv .productIndex-feature-detail{
  font-weight: normal;
  font-size: 15px;
  color: black;
  padding: 0 2rem;
  min-height: 7rem;
}
.productIndex-feature-textDiv .productIndex-feature-learnMore{
  margin: 2rem 0 0 0;
}
.productIndex-feature-textDiv .productIndex-feature-learnMore A:link{
  text-decoration: underline;
}
.product-header {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 0.8rem;
}
.product-text {
  font-size: 1.8rem;
  font-weight: 400;
}

.product-homepagestyle2023 {
  flex-direction: row-reverse;
  column-gap: 8%; /* 9rem */
  row-gap: 4rem;
  padding: 12rem 0;
  margin: 0 10vw;
}
.product-homepagestyle2023-slogan {
  width: 50%;
}
.product-homepagestyle2023-media {
  width: 100%;
  max-width: 45vw;
}
.product-homepagestyle2023-header {
  font-size: 3.6rem;
  margin-bottom: 1.6rem;
}
.product-button-div {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 50px 0 0 0;
}
.product-homepagestyle2023 .btn {
  width: 160px;
  font-weight: 500;
  border-radius: 0.3rem;
  padding: 1rem 2rem;
  border: 0;
}
.product-homepagestyle2023 .product-red-button {
  background-color: #D50E0E;
  color: #FFFFFF;
}
.product-homepagestyle2023 .product-white-button {
  background-color: #FFFFFF;
  color: #FA3E3E;
  box-shadow: 0px 3px 6px #00000029;
}
.product-homepagestyle2023 .product-red-button:hover {
  background-color: #f2767d;
}
.product-homepagestyle2023 .product-white-button:hover {
  background-color: #f1f1f1;
}

.productFontWeightBold{
  font-weight: 800;
}
.productFontWeightRegular{
  font-weight: 400;
}
.productFontSizeExtraLarge{
  font-size: 4rem;
}
.productFontSizeMedium{
  font-size: 2.8rem;
}
.productFontSizeSmall{
  font-size: 2rem;
}
.productWhatCustSays{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 0;
}
.product-testimonialAndButton{
  width: 80%;
  margin: auto;
}
.product-loadMoreTestimonial{
  display: flex;
  cursor: pointer;
  width: fit-content;
  padding: 1rem 2rem;
  margin: 0 auto 7rem;
  color: #f2767d;
  background: #FAFAFA;
  border-radius: 0.3rem;
  transition: all 0.3s;
  -moz-transition: all 0.3s; /* Firefox 4 */
  -webkit-transition: all 0.3s; /* Safari and Chrome */
  -o-transition: all 0.3s; /* Opera */
}

.product-loadMoreTestimonial:hover{
  color: #FAFAFA;
  background: #f2767d;
}
/* same as homepage hero section */
@media (max-width: 1279px) {
  .product-homepagestyle2023 {
    flex-direction: column;
    padding: 5.2rem 0 10rem 0;
  }
  .product-homepagestyle2023-media {
    width: 100%;
    max-width: 80vw;
  }
  .product-homepagestyle2023-slogan {
    max-width: 80vw;
    width: 100%;
  }
}
@media (max-width: 767px) {
  .productIndex-header-container {
    margin: 5rem 0;
  }
  .productIndex-content-row-container {
    gap: 5rem;
    margin: 0 0 5rem 0;
  }
  .productIndex-feature-section .productIndex-feature-textDiv{
    margin: 2rem 0 0 0;
  }
  .productIndex-feature-textDiv .productIndex-feature-learnMore{
    margin: 1rem 0 0 0;
  }
  .product-homepagestyle2023 {
    padding: 5.2rem 0 4.2rem 0;
  }
  .product-homepagestyle2023-media {
    max-width: 100%;
  }
}

.product-dialog {
  text-align: center;
  padding: 7rem 0;
  clear: both;
}
.product-dialog-header {
  font-weight: 700;
  font-size: 3rem;
  line-height: 1.5;
  letter-spacing: normal;
  color: inherit;
}
@media (max-width: 767px) {
  .product-dialog {
    text-align: left;
    padding: 3rem 0;
  }
  .product-dialog-header {
    font-size: 2.2rem;
  }
}
.product-ctr {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 9.6rem;
  row-gap: 3rem;
  flex-wrap: wrap;
  padding: 10rem 0;
}
.product-ctr-header {
  font-weight: 700;
  font-size: 3rem;
}
.product-ctr-button {
  font-weight: 500;
  color: #F95D5D;
  background-color: #fff;
  border-radius: 5px;
  padding: 12px 72px;
}
.product-ctr-button:link, .product-ctr-button:visited {
  color: #F95D5D;
}
.product-ctr-button:hover {
  color: #fff;
  background-color: #F95D5D;
}
@media (max-width: 767px) {
  .product-ctr {
    padding: 3rem 0 3.5rem 0;
  }
  .product-ctr-header {
    font-size: 2.2rem;
    text-align: center;
  }
}

.product-flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 5rem;
  row-gap: 3rem;
}

.product-topTextBottImg {
  padding: 10rem 0;
}
.product-topTextBottImg-img, .product-topTextBottImg-video {
  width: 80%; /* setting from .lblockImg */
  margin: 5rem 0 0 0;
}
@media (max-width: 767px) {
  .product-topTextBottImg {
    padding: 5rem 0;
  }
  .product-topTextBottImg-img, .product-topTextBottImg-video {
    width: 100%;
    margin-top: 3rem;
  }
}

.product-recommendation {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 6rem 3rem;
  align-items: start;
  margin: 3rem auto 0;
  padding: 0 0 5rem;
}
@media (max-width: 1280px) {
  .product-recommendation {
    grid-template-columns: repeat(2, 1fr);
  }
  .product-testimonialAndButton{
    width: 70%;
  }
}
@media (max-width: 1024px) {
  .product-recommendation {
    grid-template-columns: repeat(1, 1fr);
  }
  .productFontSizeExtraLarge{
    font-size: 3rem;
  }
  .productFontSizeSmall{
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 500px){
  .productFontSizeExtraLarge{
    font-size: 2.4rem;
  }
  .productFontSizeMedium{
    font-size: 1.8rem;
  }
  .productFontSizeSmall{
    font-size: 1.5rem;
  }
  .product-testimonialAndButton{
    width: 60%;
  }
}
.product-testimonialBackground{
  background-image: url("/intl/common/img/home/home_2023V1bg.webp");
  background-size: cover;
}

.compare-header-container {
  text-align: center;
  margin: 14rem auto 8rem;
}
.compare-header-container h2{
  font-size: 4rem;
  font-weight: 700;
}
.compare-cards-container {
  max-width: 135rem;
  width: 80%;
  margin:  0 auto 5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 5rem;
}

.four-cards-container .compare-card {
  width: 456px;
  height: 258px;
}
.five-cards-container .compare-card {
  width: 340px;
  height: 200px;
}
.compare-card {
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 36px;
  cursor: pointer;
}
.compare-card img {
  height: 70px;
  margin-bottom: 20px;
}

.compare-card p {
  font-size: 16px;
  color: #333;
}
@media (max-width: 1024px) {
  .compare-header-container {
    text-align: center;
    margin: 5rem 6rem;
  }
  .compare-header-container h2{
    font-size: 2rem;
    font-weight: 700;
  }
  .compare-cards-container {
    gap: 2rem
  }
  .four-cards-container .compare-card,
  .five-cards-container .compare-card {
    width: 240px;
    min-height: 200px;
    height: auto;
  }
}

/*
* Flowplayer
*/
/*.flowplayer{position:relative;width:100%;text-align:left;background-size:contain;background-repeat:no-repeat;background-position:center center;display:inline-block;}*/
/*.flowplayer *{font-weight:inherit;font-family:inherit;font-style:inherit;text-decoration:inherit;font-size:100%;padding:0;border:0;margin:0;list-style-type:none}*/
/*.flowplayer a:focus{outline:0}*/
/*.flowplayer video{width:100%}*/
/*.flowplayer.is-ipad video{-webkit-transform:translateX(-2048px);}*/
/*.is-ready.flowplayer.is-ipad video{-webkit-transform:translateX(0)}*/
/*.flowplayer .fp-engine,.flowplayer .fp-ui,.flowplayer .fp-message{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer;z-index:1}*/
/*.flowplayer .fp-message{display:none;text-align:center;padding-top:5%;cursor:default;}*/
/*.flowplayer .fp-message h2{font-size:120%;margin-bottom:1em}*/
/*.flowplayer .fp-message p{color:#666;font-size:95%}*/
/*.flowplayer .fp-controls{position:absolute;bottom:0;width:100%;}*/
/*.no-background.flowplayer .fp-controls{background-color:transparent !important;background-image:-moz-linear-gradient(transparent,transparent) !important;background-image:-webkit-gradient(linear,0 0,0 100%,from(transparent),to(transparent)) !important}*/
/*.is-fullscreen.flowplayer .fp-controls{bottom:3px}*/
/*.is-mouseover.flowplayer .fp-controls{bottom:0}*/
/*.flowplayer .fp-waiting{display:none;margin:19% auto;text-align:center;}*/
/*.flowplayer .fp-waiting *{-webkit-box-shadow:0 0 5px #333;-moz-box-shadow:0 0 5px #333;box-shadow:0 0 5px #333}*/
/*.flowplayer .fp-waiting em{width:1em;height:1em;-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:1em;background-color:rgba(255,255,255,0.8);display:inline-block;-webkit-animation:pulse .6s infinite;-moz-animation:pulse .6s infinite;animation:pulse .6s infinite;margin:.3em;opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);}*/
/*.flowplayer .fp-waiting em:nth-child(1){-webkit-animation-delay:.3s;-moz-animation-delay:.3s;animation-delay:.3s}*/
/*.flowplayer .fp-waiting em:nth-child(2){-webkit-animation-delay:.45s;-moz-animation-delay:.45s;animation-delay:.45s}*/
/*.flowplayer .fp-waiting em:nth-child(3){-webkit-animation-delay:.6s;-moz-animation-delay:.6s;animation-delay:.6s}*/
/*.flowplayer .fp-waiting p{color:#ccc;font-weight:bold}*/
/*.flowplayer .fp-speed{font-size:30px;background-color:#333;background-color:rgba(51,51,51,0.8);color:#eee;margin:0 auto;text-align:center;width:120px;padding:.1em 0 0;opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);-webkit-transition:opacity .5s;-moz-transition:opacity .5s;transition:opacity .5s;}*/
/*.flowplayer .fp-speed.fp-hilite{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}*/
/*.flowplayer .fp-help{position:absolute;top:0;left:-9999em;z-index:100;background-color:#333;background-color:rgba(51,51,51,0.9);width:100%;height:100%;opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);-webkit-transition:opacity .2s;-moz-transition:opacity .2s;transition:opacity .2s;text-align:center;}*/
/*.is-help.flowplayer .fp-help{left:0;opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}*/
/*.flowplayer .fp-help .fp-help-section{margin:3%}*/
/*.flowplayer .fp-help .fp-help-basics{margin-top:6%}*/
/*.flowplayer .fp-help p{color:#eee;margin:.5em 0;font-size:14px;line-height:1.5;display:inline-block;margin:1% 2%}*/
/*.flowplayer .fp-help em{background:#eee;-webkit-border-radius:.3em;-moz-border-radius:.3em;border-radius:.3em;margin-right:.4em;padding:.3em .6em;color:#333}*/
/*.flowplayer .fp-help small{font-size:90%;color:#aaa}*/
/*.flowplayer .fp-help .fp-close{display:block}*/
/*@media (max-width: 600px){.flowplayer .fp-help p{font-size:9px}*/
/*}.flowplayer .fp-subtitle{position:absolute;bottom:40px;left:-99999em;z-index:10;text-align:center;width:100%;opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);-webkit-transition:opacity .3s;-moz-transition:opacity .3s;transition:opacity .3s;}*/
/*.flowplayer .fp-subtitle p{display:inline;background-color:#333;background-color:rgba(51,51,51,0.9);color:#eee;padding:.1em .4em;font-size:16px;line-height:1.6;}*/
/*.flowplayer .fp-subtitle p:after{content:'';clear:both}*/
/*.flowplayer .fp-subtitle.fp-active{left:0;opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}*/
/*.flowplayer .fp-fullscreen,.flowplayer .fp-unload,.flowplayer .fp-mute,.flowplayer .fp-embed,.flowplayer .fp-close,.flowplayer .fp-play{background-image:url(img/img/white.png);background-size:37px 300px;}*/
/*.color-light.flowplayer .fp-fullscreen,.color-light.flowplayer .fp-unload,.color-light.flowplayer .fp-mute,.color-light.flowplayer .fp-embed,.color-light.flowplayer .fp-close,.color-light.flowplayer .fp-play{background-image:url(img/img/black.png);}*/
/*@media (-webkit-min-device-pixel-ratio: 2){.color-light.flowplayer .fp-fullscreen,.color-light.flowplayer .fp-unload,.color-light.flowplayer .fp-mute,.color-light.flowplayer .fp-embed,.color-light.flowplayer .fp-close,.color-light.flowplayer .fp-play{background-image:url(img/img/black@x2.png)}*/
/*}@media (-webkit-min-device-pixel-ratio: 2){.flowplayer .fp-fullscreen,.flowplayer .fp-unload,.flowplayer .fp-mute,.flowplayer .fp-embed,.flowplayer .fp-close,.flowplayer .fp-play{background-image:url(img/img/white@x2.png)}*/
/*}.is-splash.flowplayer .fp-ui,.is-paused.flowplayer .fp-ui{background:url(img/img/play_white.png) center no-repeat;background-size:12%;}*/
/*@media (-webkit-min-device-pixel-ratio: 2){.is-splash.flowplayer .fp-ui,.is-paused.flowplayer .fp-ui{background:url(img/img/play_white@x2.png) center no-repeat;background-size:12%}*/
/*}.color-light.is-splash.flowplayer .fp-ui,.color-light.is-paused.flowplayer .fp-ui{background-image:url(img/img/play_black.png)}*/
/*@media (-webkit-min-device-pixel-ratio: 2){.color-light.is-splash.flowplayer .fp-ui,.color-light.is-paused.flowplayer .fp-ui{background-image:url(img/img/play_black@x2.png)}*/
/*}.is-fullscreen.flowplayer .fp-ui{background-size:auto}*/
/*.is-seeking.flowplayer .fp-ui,.is-loading.flowplayer .fp-ui{background-image:none}*/
/*.flowplayer .fp-logo{position:absolute;top:auto;left:15px;bottom:30px;cursor:pointer;display:none;z-index:100;}*/
/*.flowplayer .fp-logo img{width:100%}*/
/*.is-embedded.flowplayer .fp-logo{display:block}*/
/*.fixed-controls.flowplayer .fp-logo{bottom:15px}*/
/*.flowplayer .fp-fullscreen,.flowplayer .fp-unload,.flowplayer .fp-close{position:absolute;top:5px;left:auto;right:5px;display:block;width:30px;height:23px;background-position:12px -197px;cursor:pointer}*/
/*.flowplayer .fp-unload,.flowplayer .fp-close{background-position:14px -175px;display:none}*/
/*.flowplayer .fp-play{display:none;width:27px;height:20px;background-position:9px -24px;position:absolute;bottom:0;left:0;}*/
/*.play-button.flowplayer .fp-play{display:block}*/
/*.is-paused.flowplayer .fp-play{background-position:9px 7px}*/
/*.flowplayer.is-ready.is-closeable .fp-unload{display:block}*/
/*.flowplayer.is-ready.is-closeable .fp-fullscreen{display:none}*/
/*.flowplayer.is-fullscreen .fp-fullscreen{background-position:10px -217px;display:block !important}*/
/*.flowplayer.is-fullscreen .fp-unload,.flowplayer.is-fullscreen .fp-close{display:none !important}*/
/*.flowplayer .fp-timeline{height:3px;position:relative;overflow:hidden;top:5px;height:10px;margin:0 150px 0 45px;}*/
/*.no-volume.flowplayer .fp-timeline{margin-right:60px}*/
/*.no-mute.flowplayer .fp-timeline{margin-right:45px}*/
/*.play-button.flowplayer .fp-timeline{margin-left:67px}*/
/*.is-long.flowplayer .fp-timeline{margin:0 180px 0 75px;}*/
/*.no-volume.is-long.flowplayer .fp-timeline{margin-right:90px}*/
/*.no-mute.is-long.flowplayer .fp-timeline{margin-right:75px}*/
/*.play-button.is-long.flowplayer .fp-timeline{margin-left:97px}*/
/*.aside-time.flowplayer .fp-timeline,.no-time.flowplayer .fp-timeline{margin:0 110px 0 5px}*/
/*.aside-time.no-volume.flowplayer .fp-timeline,.no-time.no-volume.flowplayer .fp-timeline{margin-right:20px}*/
/*.aside-time.no-mute.flowplayer .fp-timeline,.no-time.no-mute.flowplayer .fp-timeline{margin-right:5px}*/
/*.play-button.no-time.flowplayer .fp-timeline,.play-button.aside-time.flowplayer .fp-timeline{margin-left:27px}*/
/*.flowplayer .fp-buffer,.flowplayer .fp-progress{position:absolute;top:0;left:auto;height:100%;cursor:col-resize}*/
/*.flowplayer .fp-buffer{-webkit-transition:width .25s linear;-moz-transition:width .25s linear;transition:width .25s linear}*/
/*.flowplayer .fp-volume{position:absolute;top:7.5px;right:5px}*/
/*.flowplayer .fp-mute{width:10px;height:15px;float:left;position:relative;top:-5px;left:;cursor:pointer;background-position:-2px -99px;}*/
/*.no-mute.flowplayer .fp-mute{display:none}*/
/*.flowplayer .fp-volumeslider{width:90px;height:5px;cursor:col-resize;float:left;}*/
/*.no-volume.flowplayer .fp-volumeslider{display:none}*/
/*.flowplayer .fp-volumelevel{height:100%}*/
/*.flowplayer .fp-time{text-shadow:0 0 1px #000;font-size:12px;font-weight:bold;color:#fff;width:100%;}*/
/*.flowplayer .fp-time.is-inverted .fp-duration{display:none}*/
/*.flowplayer .fp-time.is-inverted .fp-remaining{display:inline}*/
/*.flowplayer .fp-time em{width:35px;height:10px;line-height:10px;text-align:center;position:absolute;bottom:5px}*/
/*.no-time.flowplayer .fp-time{display:none}*/
/*.is-long.flowplayer .fp-time em{width:65px}*/
/*.flowplayer .fp-elapsed{left:5px;}*/
/*.play-button.flowplayer .fp-elapsed{left:27px}*/
/*.flowplayer .fp-remaining,.flowplayer .fp-duration{right:110px;color:#eee;}*/
/*.no-volume.flowplayer .fp-remaining,.no-volume.flowplayer .fp-duration{right:20px}*/
/*.no-mute.flowplayer .fp-remaining,.no-mute.flowplayer .fp-duration{right:5px}*/
/*.flowplayer .fp-remaining{display:none}*/
/*.flowplayer.color-light .fp-time{color:#222;text-shadow:0 0 1px #fff}*/
/*.flowplayer.color-light .fp-remaining,.flowplayer.color-light .fp-duration{color:#666}*/
/*.flowplayer.aside-time .fp-time{position:absolute;top:5px;left:5px;bottom:auto !important;width:85px;}*/
/*.flowplayer.aside-time .fp-time strong,.flowplayer.aside-time .fp-time em{position:static}*/
/*.flowplayer.aside-time .fp-time .fp-elapsed{margin-right:5px}*/
/*.flowplayer.is-long.aside-time .fp-time{width:130px}*/
/*.flowplayer.is-splash,.flowplayer.is-poster{cursor:pointer;}*/
/*.flowplayer.is-splash .fp-controls,.flowplayer.is-poster .fp-controls,.flowplayer.is-splash .fp-fullscreen,.flowplayer.is-poster .fp-fullscreen,.flowplayer.is-splash .fp-unload,.flowplayer.is-poster .fp-unload,.flowplayer.is-splash .fp-time,.flowplayer.is-poster .fp-time,.flowplayer.is-splash .fp-embed,.flowplayer.is-poster .fp-embed{display:none !important}*/
/*.flowplayer.is-poster .fp-engine{top:-9999em}*/
/*.flowplayer.is-loading .fp-waiting{display:block}*/
/*.flowplayer.is-loading .fp-controls,.flowplayer.is-loading .fp-time{display:none}*/
/*.flowplayer.is-loading .fp-ui{background-position:-9999em}*/
/*.flowplayer.is-seeking .fp-waiting{display:block}*/
/*.flowplayer.is-fullscreen{position:fixed !important;top:0 !important;left:0 !important;border:0 !important;margin:0 !important;width:100% !important;height:100% !important;max-width:100% !important;z-index:99999 !important;-webkit-box-shadow:0 !important;-moz-box-shadow:0 !important;box-shadow:0 !important;background-image:none !important;background-color:#333}*/
/*.flowplayer.is-error{border:1px solid #909090;background:#fdfdfd !important;}*/
/*.flowplayer.is-error h2{font-weight:bold;font-size:large;margin-top:10%}*/
/*.flowplayer.is-error .fp-message{display:block}*/
/*.flowplayer.is-error object,.flowplayer.is-error video,.flowplayer.is-error .fp-controls,.flowplayer.is-error .fp-time,.flowplayer.is-error .fp-subtitle{display:none}*/
/*.flowplayer.is-ready.is-muted .fp-mute{opacity:.5;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50)}*/
/*.flowplayer.is-mouseout .fp-controls{height:0;-webkit-transition:height .15s .3s;-moz-transition:height .15s .3s;transition:height .15s .3s}*/
/*.flowplayer.is-mouseout .fp-timeline{margin:0 !important}*/
/*.flowplayer.is-mouseout .fp-timeline{-webkit-transition:height .15s .3s,top .15s .3s,margin .15s .3s;-moz-transition:height .15s .3s,top .15s .3s,margin .15s .3s;transition:height .15s .3s,top .15s .3s,margin .15s .3s;height:4px;top:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}*/
/*.flowplayer.is-mouseout .fp-fullscreen,.flowplayer.is-mouseout .fp-unload,.flowplayer.is-mouseout .fp-elapsed,.flowplayer.is-mouseout .fp-remaining,.flowplayer.is-mouseout .fp-duration,.flowplayer.is-mouseout .fp-embed,.flowplayer.is-mouseout .fp-logo,.flowplayer.is-mouseout .fp-volume,.flowplayer.is-mouseout .fp-play{opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);-webkit-transition:opacity .15s .3s;-moz-transition:opacity .15s .3s;transition:opacity .15s .3s}*/
/*.flowplayer.is-mouseover .fp-controls,.flowplayer.fixed-controls .fp-controls{height:20px}*/
/*.flowplayer.is-mouseover .fp-fullscreen,.flowplayer.fixed-controls .fp-fullscreen,.flowplayer.is-mouseover .fp-unload,.flowplayer.fixed-controls .fp-unload,.flowplayer.is-mouseover .fp-elapsed,.flowplayer.fixed-controls .fp-elapsed,.flowplayer.is-mouseover .fp-remaining,.flowplayer.fixed-controls .fp-remaining,.flowplayer.is-mouseover .fp-duration,.flowplayer.fixed-controls .fp-duration,.flowplayer.is-mouseover .fp-embed,.flowplayer.fixed-controls .fp-embed,.flowplayer.is-mouseover .fp-logo,.flowplayer.fixed-controls .fp-logo,.flowplayer.is-mouseover .fp-volume,.flowplayer.fixed-controls .fp-volume,.flowplayer.is-mouseover .fp-play,.flowplayer.fixed-controls .fp-play{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}*/
/*.flowplayer.fixed-controls .fp-volume{display:block}*/
/*.flowplayer.fixed-controls .fp-controls{bottom:-20px;}*/
/*.is-fullscreen.flowplayer.fixed-controls .fp-controls{bottom:0}*/
/*.flowplayer.fixed-controls .fp-time em{bottom:-15px;opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);}*/
/*.is-fullscreen.flowplayer.fixed-controls .fp-time em{bottom:5px}*/
/*.flowplayer.is-disabled .fp-progress{background-color:#999}*/
/*.flowplayer .fp-embed{position:absolute;top:5px;left:5px;display:block;width:25px;height:20px;background-position:3px -237px}*/
/*.flowplayer .fp-embed-code{position:absolute;display:none;top:10px;left:40px;background-color:#333;padding:3px 5px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 0 3px #ccc;-moz-box-shadow:0 0 3px #ccc;box-shadow:0 0 3px #ccc;font-size:12px;}*/
/*.flowplayer .fp-embed-code:before{content:'';width:0;height:0;position:absolute;top:2px;left:-10px;border:5px solid transparent;border-right-color:#333}*/
/*.flowplayer .fp-embed-code textarea{width:400px;height:16px;font-family:monaco,"courier new",verdana;color:#777;white-space:nowrap;resize:none;overflow:hidden;border:0;outline:0;background-color:transparent;color:#ccc}*/
/*.flowplayer .fp-embed-code label{display:block;color:#999}*/
/*.flowplayer.is-embedding .fp-embed,.flowplayer.is-embedding .fp-embed-code{display:block;opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}*/
/*.flowplayer.aside-time .fp-embed{left:85px}*/
/*.flowplayer.aside-time .fp-embed-code{left:115px}*/
/*.flowplayer.aside-time.is-embedding .fp-time{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}*/
/*.flowplayer.is-long.aside-time .fp-embed{left:130px}*/
/*.flowplayer.no-time .fp-embed{left:5px !important}*/
/*@-moz-keyframes pulse{0%{opacity:0}*/
/*100%{opacity:1}*/
/*}@-webkit-keyframes pulse{0%{opacity:0}*/
/*100%{opacity:1}*/
/*}@-o-keyframes pulse{0%{opacity:0}*/
/*100%{opacity:1}*/
/*}@-ms-keyframes pulse{0%{opacity:0}*/
/*100%{opacity:1}*/
/*}@keyframes pulse{0%{opacity:0}*/
/*100%{opacity:1}*/
/*}.flowplayer .fp-controls{background-color:#333;background-color:rgba(51,51,51,0.6)}*/
/*.flowplayer.fixed-controls .fp-controls{background-color:#333}*/
/*.flowplayer .fp-timeline{background-color:#666}*/
/*.flowplayer .fp-buffer{background-color:#eee}*/
/*.flowplayer .fp-progress{background-color:#00a7c8}*/
/*.flowplayer .fp-volumeslider{background-color:#000}*/
/*.flowplayer .fp-volumelevel{background-color:#fff}*/
/*.flowplayer .fp-play{height:24px}*/
/*.flowplayer.color-light .fp-controls{background-color:rgba(255,255,255,0.6)}*/
/*.flowplayer.color-light.fixed-controls .fp-controls{background-color:#fff}*/
/*.flowplayer.color-light .fp-volumeslider{background-color:#ddd}*/
/*.flowplayer.color-light .fp-volumelevel{background-color:#222}*/
/*.flowplayer.color-alt .fp-progress{background-color:#fff}*/
/*.flowplayer.color-alt .fp-buffer{background-color:#999}*/
/*.flowplayer.color-alt2 .fp-progress{background-color:#900}*/

.blogScrollableTable{
  border: 1px solid #dee2e6;
  margin: 4rem -100px; /* 左右不能放太寬不然會被右邊目錄擋到 */
  overflow-x: auto;
}
.blogExtendDiv {
  font-size: 1.4rem;
  padding: 2rem 0 0 0;
  line-height: normal;
}
.blogExtendDiv a{
  color: #0077CC;
}
.blogTagDiv {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.blogTag {
  border: 1px solid #BBBBBB;
  border-radius: 30px;
  padding: 8px 12px;
  font-weight: lighter;
}
.blog-container {
  display:flex;
  float: left;
  width: 100%;
}
.blog-article-sidenav-container,
.blog-article-toc-container {
  flex: 1 0 20%;
}
.blog-article-content-container {
  flex: 1 0 60%;
  max-width: 100%;
}
.blog-toc-container-inner {
  position: sticky;
  top: 50px;
  width: fit-content;
  max-width: 220px;
  height: 100vh;
  padding: 40px 0;
}
.blog-article-title-container {
  margin-bottom: 4rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #d0d0d0;
  line-height: 1.4;
}
.blog-article-title-container .blog-article-title {
  font-size: 3rem;
  font-weight: 700;
  margin: 0;
}
@media (max-width: 1399px) {
  .blogScrollableTable {
    margin-left: -50px;
    margin-right: -50px;
  }
}
@media (max-width: 1199px) {
  .blogScrollableTable {
    margin-left: 0px;
    margin-right: 0px;
  }
  .blog-article-sidenav-container,
  .blog-article-toc-container {
    display: none;
  }
  .blog-container .docSidebar {
    display: block;
    position: relative;
    width: auto;
    background: #fff;
    border: none;
    padding: 0;
    box-shadow: none;
    top: 0 !important;
  }
  .blog-container .docSidebar .fa.fa-times {
    display: none;
  }
}
.blogScrollableTable .blogTable {
  margin: 0;
}
.blogTable{
margin: 4rem 0;
}
.blogTable td, .blogTable th{
font-size:1.6rem;
padding:6px 12px;
line-height: 150%;
}
.blogTable th{
background:#fff;
border:0;
font-weight:700;
font-size:15px;
}
.blogTable th.blogTableSide{
border:0;
font-weight:400;
text-align:right;
font-size:15px;
color:#333;
}

.blogTable td {
border: 1px solid #ccc;
}
.blogTable tr:first-child th {
border-top: 0;
}
.blogTable tr th:first-child {
border-left: 0;
}
.blogTable tr th:last-child {
border-right: 0;
}
.blogTable tr:nth-child(even) td{
background:#f5f5f5;
}

.blogQuote,.blogQuoteRight{
background: #efefef;
padding: 20px 30px;
border-radius: 6px;
max-width: 300px;
}
.blogQuote{
float: left;
margin: 30px 50px 30px 0;
}
.blogQuoteRight{
float: right;
margin: 30px 0 30px 50px;
}
.largeText{
font-size:22px;
line-height: 160%;
}
.blogImg,.blogImgRight{
border:0 !important;
box-shadow:none !important;
margin: 30px 80px 30px 50px !important;
}
.blogImg{
float:left;
}
.blogImgRight{
float:right;
}
.blogQuote-leftBar {
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: 0.5em 10px;
font-weight: bold;
}

.svgLink:hover{
text-decoration:none;
}
.CTAdiv{
display:inline-block;
margin:0;
padding:11px 15px;
vertical-align:top;
color:#333;
}

#templateLibrary {
float: left;
clear: left;
margin: 25px 5%;
min-width:800px;
width:90%;
background: #fff;
box-shadow: 0 4px 15px #aaa;
-webkit-box-shadow: 0 4px 15px #aaa;
border-radius: 5px;
line-height: normal;
text-align: left;
max-height: 95%;
display: flex;
}

.templateLibrarySidebar {
  float: left;
  clear: left;
  width: 17%;
  background: #fff;
  font-size: 14px;
  border-right: 1px solid #efefef;
  padding: 30px 0 18px 0;
  height: 80%;
  overflow: auto;
  border-radius: 5px 0 0 0;
}

.templateLibrarySidebarItem, .templateLibrarySidebarItemSelected{
   padding: 4px 8px 4px 30px;
}
.templateLibrarySidebarItem {
  cursor: pointer;
  white-space: nowrap;
}

.templateLibrarySidebarItem:hover {
  background: #f8f8f8;
}

.templateLibrarySidebarItemSelected {
  background: #ddd;
}

a.templateLibrarySidebarItemText {
color: #333;
font-weight: 600;
}
.templateSearchbox{
height:2.5rem !important;
width:60%;
border-radius:5px;
border:1px solid #ccc;
margin:12px 0 0 0;
}
.templateSearchbutton{
display:inline-block;
margin:0 5px;
font-size:15px;
color:#888;
}
.templateSearchbutton:hover{
color:#000;
}
.templateItemsDiv {
  float: left;
  width: 40%;
  padding: 30px 0 12px 0;
  height:80%;
  overflow:auto;
}

.templateItemDiv, .templateItemDivSelected {
float: left;
clear: left;
width: 100%;
padding: 15px 0 15px 25px;
box-sizing: border-box;
}

.templateItemDiv:hover, .templateItemDivSelected:hover {
background: #f8f8f8;
}

.templateItemIcon {
float: left;
color: #53a638;
font-size: 16px;
margin: 3px 0 0 0;
}

.templateItemText {
float: left;
font-size: 18px;
margin: 0 0 0 20px;
cursor: pointer;
max-width:82%;
}

.templateItemText:hover {
text-decoration: underline;
}

.templateItemButton {
float: right;
margin:-3px 25px 0 35px;
border-radius: 18px;
background: #efefef;
padding: 5px 12px;
cursor: pointer;
font-size: 16px;
}

.templateItemButton:hover {
background: #CCCCCC;
}

.templateDetailDiv {
  float: right;
  width: 40%;
  height: 80%;
  padding: 30px 0 30px 30px;
  border-left: 1px solid #efefef;
  overflow: auto;
  border-radius: 0 5px 5px 0;
  max-height:980px;
}

.templateItemName {
margin: 20px 0 12px 20px;
font-size: 20px;
color: #333;
}
.templatePartnerAppPart {
  margin: 0 0 20px 0;
  font-size: 14px;
  color: #333;
}
.templateIfPartnerAppDiv, .templatePaidAppDiv, .template_docLinkDiv {
  margin: 0 0 0 20px;
}
.templateHelpIconContent {
  display: inline-block;
  position: relative;
  left: 10px;
  cursor: pointer;
  color: rgb(7, 88, 192);
  font-size: 12px;
}
.templateHelpButton {
  font-size: 12px;
  margin: 0 8px 0 0;
  border-radius: 10px;
  border: 1px solid #4986ec;
  color: #4986ec;
  background: #fff;
  padding: 3px 8px;
  cursor: pointer;
}

.templateItemButton2 {
font-size: 12px;
margin: 0 8px 0 20px;
border-radius: 10px;
background: #4986ec;
color: #fff;
padding: 3px 8px;
cursor: pointer;
}

.templateItemButton2:hover {
background: #5af;
}

.templateItemDesc {
margin: 18px 25px 0 20px;
font-size: 14px;
color: #333;
}

.templateItemSheets {
margin: 20px;
font-size: 14px;
}

.templateItemSheets span {
color: #aaa;
}

.templateItemScreenshot {
margin: 0 0 18px 20px;
box-sizing: border-box;
-webkit-box-shadow: 0 4px 10px #aaa;
-moz-box-shadow: 0 4px 10px #aaa;
box-shadow: 0 4px 10px #aaa;
width:100%;
}
.templateScreenshotDivInner{
cursor:pointer;
}
.templateScreenshotDivOuter,.templatePartnerLogoDivOuter{
  min-width:90%;
  width:90%;
}
@keyframes jumpPointer {
  0%   {transform: translate3d(0,0,0) scale3d(1,1,1);}
  40%  {transform: translate3d(0,15%,0) scale3d(.95,1.05,1);}
  100% {transform: translate3d(0,50%,0) scale3d(1.05,.95,1);}
}
.jumpPointer {
transform-origin: 50% 50%;
animation: jumpPointer .5s linear alternate infinite;
}
#selectedSheets {
  width:200px
}
#selectableSheets {
  width:200px
}
option.report_option {
  color: #6f6f6f;
}
option.invalid_sheet_option {
  color: #ff0000;
}
option.sheet_option {
  color: #000000;
  font-weight: 600;
}
#accountDowngrade_header {
  margin: 15px 0 15px 15px;
}
#accountDowngrade_desc {
  margin: 0 0 15px 15px;
}
#downgradeTable {
  margin: 0 0 0 15px;
}
#checkButtonsDiv {
  padding: 10px 0 0 443px;
}
#blogSearchBox {
  float: right;
  margin: 0 1.5rem 0 0;
  cursor: pointer;
}

.lotNumInfo {
  display: flex;
}

.lotNumInfo .lotNumDiv {
  flex:2;
}
.lotNumInfo div {
  flex: 1;
}

.accordion, .accordion::before, .accordion::after,
.accordion *, .accordion *::before, .accordion *::after {
  box-sizing: border-box;
}
.accordion {
  margin: 4rem auto;
  border-radius: 12px;
  box-shadow: 0 2px 10px #00000014;
}
.accordion-header {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  font-weight: 700;
  padding: 12px 32px;
  cursor: pointer;
  transition: color .2s ease;
}
.accordion-header.active {
  color: #F27079;
}
.accordion-header::after {
  content: '\f067';
  font-family: 'Font Awesome\ 5 Pro';
  color: #F27079;
  margin-left: auto;
}
.accordion-header.active::after {
  content: '\f068';
}
.accordion-collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.accordion-collapse.collapsed {
  max-height: 0;
}
.accordion-body {
  padding: 0px 32px 16px 32px;
}

.product-accordion {
  padding: 1rem 0;
  border-bottom: 1px solid #CDE2FD;
  border-radius: 0;
  box-shadow: none;
  transition: border .2s ease;
}
.product-faq-block {
  margin: 0 10vw;
}
.product-accordion:has(.active) {
  border-bottom: 2px solid #65A4F4;
}
.product-accordion .accordion-header {
  gap: 80px;
  font-weight: 900;
  font-size: 2.8rem;
  color: #000;
  padding: 30px 0;
}
.product-accordion .accordion-header.active {
  color: #000;
}
.product-accordion .accordion-header::after {
  color: #65A4F4;
  transition: transform .2s ease;
}
.product-accordion .accordion-header.active::after {
  content: '\f067';
  transform: rotate(45deg);
}
.product-accordion .accordion-body {
  font-size: 1.6rem;
  padding: 0 105px 30px 0;
}

.annotation, .annotation::before, .annotation::after,
.annotation *, .annotation *::before, .annotation *::after {
  box-sizing: border-box;
}
.annotation {
  display: inline;
  text-decoration: none;
}
.annotation-text {
  color: #F27079;
  font-weight: 700;
  cursor: pointer;
}
.annotation-text::after {
  content: '\f107';
  font-family: 'Font Awesome\ 5 Pro';
  padding: 0 2px;
}
.annotation-text.active::after {
  content: '\f106';
}
.annotation-collapse {
  display: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
}
.annotation-content {
  background-color: #e7e7e7;
  margin: 8px 0;
  padding: 16px 16px;
  border-radius: 12px;
  overflow: hidden;
  transition: max-height .4s ease;
}
.annotation-collapse.active {
  display: block;
}
.annotation-content.active {
  display: block;
}

.figure {
  margin-bottom: 3rem;
}
.figure img {
  display: block;
  margin: 0;
}
.figure p {
  margin: 0;
}
.figure-caption {
  font-family: Arial, "Microsoft JhengHei", sans-serif;
  font-size: 1.5rem;
  line-height: 1.5;
  text-align: center;
  color: #757575;
  margin: 0;
  padding: 0.5rem 0;
}
.figure-caption a {
  color: inherit;
  text-decoration: underline;
}
.ragicRed {
  color: #F70E0E;
}
.container {
  line-height: 1.7;
  font-size: 1.6rem;
  font-weight: bold;
}
.container section {
  margin: 4.8rem auto;
}
.container section li{
  list-style: inherit;
  position: relative;
  left: 1.6rem;
}
.indentTwoWords {
  text-indent: 3.2rem;
}
.blockContent {
  width: 985px; /*same as #top width*/
  margin: 1.6rem auto;
}
.ragic_header1 {
  font-size: 4rem;
  font-weight: bold;
}
.ragic_header2 {
  font-size: 3.2rem;
  font-weight: bold;
}
.ragic_header3 {
  font-size: 2.4rem;
  font-weight: bold;
}
.flex-box {
  display: flex;
}
.descLeftBlock {
  margin-right: 3.2rem;
}
#mottoBlock {
  --imageWidth: 175px;
  --ImageHeight: 220px;
  margin-bottom: 6.4rem;
}
#mottoBlock #mottoDescBlock {
  max-width: calc(100% - 255px); /* IE */
  max-width: calc(100% - var(--imageWidth) - 80px);
}
#mottoBlock #mottoImage {
  width: 175px; /* IE */
  width: var(--imageWidth);
  height: 220px; /* IE */
  height: var(--ImageHeight);
  position: absolute;
  top: -110px; /* IE */
  top: calc(var(--ImageHeight) / -2);
}
#commissionsTable_container {
  margin: 1.6rem 0;
  padding: 1px;
  background-color: #F27079;
}
#commissionsTable {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr;
  gap: 1px;
}
#commissionsTable > div {
  padding: 1.6rem;
  background-color: #fff;
  display: flex;
  align-items: center;
}
#commissionsTable .bg1 {
  background-color: #ffc7cb;
}
#commissionsTable .bg2 {
  background-color: #ffebec;
}
#commissionsTable .header {
  padding: 0.16rem 1.6rem;
  background-color: #F27079;
  color: #fff;
  font-size: 1.6rem;
  justify-content: center;
}
#commissionsTable #header1 {
  grid-area: 1 / 1 / span 1 / span 2;
}

#commissionsTable #content1 {
  grid-area: 2 / 1 / span 2 / span 1;
}

#commissionsTable #content6 {
  grid-area: 4 / 1 / span 1 / span 2;
}
#volumeDiscountTableBlock {
  position: relative;
  top: 1.12rem;
}
@media screen and (max-width: 1400px) {
  .blockContent {
    width: 65%;
  }
}
@media screen and (max-width: 1000px) {
  .blockContent {
    width: 75%;
  }
  #volumeDiscountBlock {
    align-items: center;
  }
  #volumeDiscountTableBlock {
    position: static;
    top: 0;
  }
}
@media screen and (max-width: 800px) {
  .descLeftBlock {
    margin: 0;
  }
  .imageRightBlock {
    display: none;
  }
  #mottoBlock {
    margin-bottom: 3.2rem;
  }
  #mottoBlock #mottoDescBlock {
    max-width: 100%;
  }
  #mottoBlock #mottoImage {
    display: none;
  }
  #volumeDiscountBlock {
    flex-wrap: wrap;
  }
  #volumeDiscountTableBlock {
    margin: 1.6rem auto;
  }
    .product-accordion .accordion-header {
      font-size: 2rem;
    }
  .product-accordion .accordion-body {
    padding: 0 0 30px 0;
  }
}

.backToTopButton {
  display:none;
  justify-content:center;
  align-items:center;
  position:fixed;
  bottom:10rem;
  right:24px;
  width:58px;
  height:58px;
  border:1px solid rgb(226, 226, 226);
  cursor:pointer;
  background:white;
  border-radius:50%;
  color:#D50E0E;
  z-index: 1;
}

@media screen and (max-width:479px), (max-height: 599px) {
  .backToTopButton {
    width:52px;
    height:52px;
    right: 14px;
    bottom: 8rem;
  }
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5000;
  background: rgba(0,0,0,0.75);
  overflow: auto;
}
#overlayHeader {
  z-index: 9999;
  padding: 12px 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 7%;
  box-sizing: border-box;
  background: linear-gradient(to top, transparent, #313131);
}
.overlayHeaderIcon {
  width: 15px;
  height: 15px;
  padding: 12px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-right: 10px;
  transition: background-color.3s;
  color: #FFFFFF;
}

.overlayHeaderIcon > i {
  font-size: 20px;
  font-weight: 400;
  color: white;
}

.overlayHeaderIcon:hover {
  background-color: rgba(123, 123, 123, 0.9);
}

#lightbox {
  margin: 0 auto;
  min-width: 70%;
  max-width: 1500px;
  width:90%;
  height: 93%;
  z-index: 9999;
  text-align: center;
}

#lightContent{
  padding-bottom: 60px;
}