a:active, a:hover, a:focus {
  outline: 0;
}


img {
  max-width: 100%;
  height: auto;
}

/* line 15, ../sass/_extend.scss */
.one-column, .two-column, .three-column, .four-column, .nav-menu ul li {
width: 100%;
/*  margin-bottom: 20px !important;*/
float: left;
clear: both;
/*  padding: 0 20px;*/
box-sizing: border-box;
position: relative;
}


/* line 22, ../sass/_extend.scss */
.one-column img, .two-column img, .three-column img, .four-column img, .nav-menu ul li img {
/*width: 100%;*/
margin-bottom: 15px;
}


.ss-fix ul{
width: 80% !important;
margin: 0 auto !important;
}

/* line 9, ../sass/main.scss */
.clear {
clear: both;
}

/* line 12, ../sass/main.scss */
/* main p {
line-height: 24px !important;
padding: 0 0 1em 0;
} */

/* line 16, ../sass/main.scss */
.h-space {
width: 100%;
height: 0px;
}

/* line 24, ../sass/main.scss */
.h-space-2 {
width: 100%;
height: 0px;
}

/* line 32, ../sass/main.scss */
.short-space {
margin-bottom: 20px;
}

/* line 35, ../sass/main.scss */



/* line 47, ../sass/main.scss */
.column-block {
width: 100%;
clear: both;
/*  max-width: 1200px;*/
margin: 0 auto;
}



@media (min-width: 600px) {
/* line 47, ../sass/main.scss */
.column-block {
  margin: 0 auto 30px auto;
/*	  padding: 2em;*/
}
}

/* line 57, ../sass/main.scss */
.one-column {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
position: relative;
}


@media (min-width: 600px) {
/* line 78, ../sass/main.scss */
.two-column ul li {
  width: 47.82609%;
  float: left;
  margin-right: 4.34783%;
  display: block;
}
}

/* line 88, ../sass/main.scss */
.three-column ul li {
position: relative;
}
@media (min-width: 600px) {
/* line 95, ../sass/main.scss */
.three-column ul li {
  width: 30.43478%;
  float: left;
  margin-right: 4.34783%;
  display: block;
  float: left;
  /*margin-top: 30px;*/
}
}

@media (max-width: 599px) {
/* line 95, ../sass/main.scss */
.two-column ul li, .three-column ul li{
  margin-bottom: 10px;
}
}

.four-column ul li {
  width: 100%;
  float: left;
  margin-right: 4.34783%;
  display: block;
  float: left;
}

@media (min-width: 600px) {
/* line 108, ../sass/main.scss */
.four-column ul li {
  width: 21.73913%;
  float: left;
  margin-right: 4.34783%;
  display: block;
  float: left;
}
}

/* line 116, ../sass/main.scss */
.color-a {
color: #666cb7 !important;
}

/* line 119, ../sass/main.scss */
.color-b {
color: #024c8d !important;
}

/* line 122, ../sass/main.scss */
.color-c {
color: #e16a26 !important;
}

/* line 126, ../sass/main.scss */
.color-d {
color: #009b86 !important;
}

/* line 129, ../sass/main.scss */
.color-e {
color: #e4442e !important;
}

/* line 132, ../sass/main.scss */
.last-li {
margin-right: 0px !important;
}

/* line 136, ../sass/main.scss */
.video-w {
margin: 0 0 20px 0;
}
@media (min-width: 600px) {
/* line 136, ../sass/main.scss */
.video-w {
  margin: 0 20px;
}
}

/* line 142, ../sass/main.scss */
.s-block p {
display: block;
clear: both;
}
@media (min-width: 551px) {
/* line 142, ../sass/main.scss */
.s-block p {
  display: block;
}
}
@media (min-width: 769px) {
/* line 142, ../sass/main.scss */
.s-block p {
  display: inline;
}
}

/* line 152, ../sass/main.scss */
.title-icon {
width: 55px !important;
float: left;
margin: 0px 20px 20px 0px !important;
clear: both;
display: block;
}
@media (min-width: 551px) {
/* line 152, ../sass/main.scss */
.title-icon {
  width: 75px !important;
  float: left;
  margin-top: 10px !important;
}
}

/* line 164, ../sass/main.scss */
.box-title {
width: 60px !important;
float: left;
margin-right: 10px;
}
@media (min-width: 551px) {
/* line 164, ../sass/main.scss */
.box-title {
  width: 90px !important;
}
}

/* line 172, ../sass/main.scss */
.box-title-main {
width: 60px !important;
margin-right: 10px;
position: relative;
left: 0px;
float: left;
}
@media (min-width: 551px) {
/* line 172, ../sass/main.scss */
.box-title-main {
  width: 90px !important;
  top: 44px;
  float: none;
}
}



/* line 193, ../sass/main.scss */
.one-tilte {
width: 100%;
text-align: center;
padding: 0%;
margin-bottom: 0px;
}
/* line 194, ../sass/main.scss */
.one-tilte h1 {
border-bottom: 2px solid #f2f1f3;
font-size: 50px;
margin: 0px 0 0px 0;
padding-bottom: 10px !important;
/*text-transform: uppercase;*/
/*margin-top: 40px;*/
}
@media (max-width: 768px) {
.one-tilte h1 {
font-size: 32px;
line-height: 1.1em !important;
}
}
@media (min-width: 600px) {
/* line 193, ../sass/main.scss */
.one-tilte {
  width: 90%;
  padding: 0 5%;
  /*margin-bottom: 40px;*/
}
}
/* line 211, ../sass/main.scss */
.one-tilte p {
font-size: 18px;
margin-bottom: 0px;
}


/* line 231, ../sass/main.scss */
.one-tilte > h4 {
text-align: left !important;
clear: both !important;
display: block !important;
}
@media (min-width: 600px) {
/* line 231, ../sass/main.scss */
.one-tilte > h4 {
  text-align: center !important;
  width: 100% !important;
}
}

/* line 241, ../sass/main.scss */
.top-intro-block {
width: 100%;
margin: 20px 0 auto 0;
padding: 0 20px;
box-sizing: border-box;
}

/* line 248, ../sass/main.scss */
.intro-br > br {
display: none;
}
@media (min-width: 600px) {
/* line 248, ../sass/main.scss */
.intro-br > br {
  display: block;
}
}





/* line 309, ../sass/main.scss */
.small-font {
  font-size: 0.8em;
  line-height: 1.2em !important;
  margin-top: 20px;
  background: #e8f4ff;
  padding: 8px;
  border-radius: 5px;
  color: #5d5d5d;
}



/* line 328, ../sass/main.scss */
.intro-block {
width: 100%;
margin: auto;
float: left;
margin-bottom: 40px;
border-radius: 13px;
box-sizing: border-box;
}
@media (min-width: 600px) {
/* line 328, ../sass/main.scss */
.intro-block {
  width: 36%;
  margin: 0 34% 40px 34%;
}
}

/* line 341, ../sass/main.scss */
.intro-btn-left {
float: left;
height: 36px;
width: 50%;
color: #9999a7;
margin: 0;
text-align: center;
line-height: 36px;
position: relative;
font-size: 16px;
border: 1px solid #c7c7d2;
/* border-left: 2px solid #6d6d6d; */
background: #dedee6;
cursor: pointer;
box-sizing: border-box;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
/* line 362, ../sass/main.scss */
.intro-btn-left:hover {
background: #6e6871;
box-shadow: 0px 0px 5px #6e6871;
transition: all 0.3s;
border: 1px solid #6e6871;
color: #fff;
}

/* line 371, ../sass/main.scss */
.intro-btn-right {
float: left;
height: 36px;
width: 50%;
color: #9999a7;
margin: 0;
text-align: center;
line-height: 36px;
position: relative;
font-size: 16px;
border: 1px solid #c7c7d2;
/* border-left: 2px solid #6d6d6d; */
background: #dedee6;
cursor: pointer;
box-sizing: border-box;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-left: #d7d7da;
}
/* line 393, ../sass/main.scss */
.intro-btn-right:hover {
background: #6e6871;
box-shadow: 0px 0px 5px #6e6871;
transition: all 0.3s;
border: 1px solid #6e6871;
color: #fff;
}

/* line 403, ../sass/main.scss */
.video-s {
width: 74%;
margin: 10px auto;
  display: table;
  background: #2196f4;
  background-image: url(../img/videoimg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.video-360{width:80%;     margin-top: 20px;}
/* line 409, ../sass/main.scss */
.video-s:hover {
opacity: 0.7;
}
@media (min-width: 600px) {
/* line 403, ../sass/main.scss */
.video-s {
  width: 60%;
  margin: 10px 0 0 0;
}
}
@media (min-width: 768px) {
/* line 403, ../sass/main.scss */
.video-s {
  width: 50%;

}
}
@media (min-width: 960px) {
/* line 403, ../sass/main.scss */
.video-s {
  width: 34%;
}
}

.video-360{width:80%}

/* line 415, ../sass/main.scss */
.video-s img {
float: left;
width: 34%;
}
/* line 418, ../sass/main.scss */
.video-s p {
text-align: center;
margin-top: 6.5%;
margin-bottom: 6.5%;
font-size: 17px;
color: #fff;
text-decoration: none !important;
}

@media (min-width: 551px) {
/* line 418, ../sass/main.scss */
.video-s p {
  margin-top: 5%;
margin-bottom: 5%;
  font-size: 14px;
}
}
@media (min-width: 961px) {
/* line 418, ../sass/main.scss */
.video-s p {
  margin-top: 7%;
  margin-bottom: 7%;
  font-size: 16px;
}
}

/* line 435, ../sass/main.scss */
.video-btn {
float: left;
text-align: center;
width: 66%;
vertical-align: middle;
height: 100%;
text-decoration: none;
margin-top: 6%;
font-size: 17px;
color: #fff;
}
@media (min-width: 600px) {
/* line 435, ../sass/main.scss */
.video-btn {
  margin-top: 7%;
  font-size: 22px;
}
}

/* line 451, ../sass/main.scss */
.title-new {
font-size: 36px;
font-weight: 100;
text-align: center;
line-height: 36px;
margin: 30px 0 0px 0;
}

.c_new{
color:#fff;
background:#900;
padding:0 0.4em 0 0.4em;
border-radius:2px;
font-size:0.8em;
}

/* line 461, ../sass/main.scss */
.btn-all {
font-size: 13px;
text-align: center;
background: #2196F3;
color: #fff;
border-radius: 4px;
padding: 2px 20px;
text-decoration: none;
line-height: 22px;
}
/* line 470, ../sass/main.scss */
.btn-all:hover {
transition: all 0.3s;
background: #137fd4;
}

/* line 475, ../sass/main.scss */
.btn-demo {
margin-left: 10px;
}

/* line 478, ../sass/main.scss */
.btn-big {
/*float: left;*/
padding: 10px 10px;
  font-size: 15px;
  box-sizing: border-box;
  display: block;
  width: 50%;
  margin: 2em auto;
}

.btn-big2{
  padding: 10px 30px;
  display: inline-block;
width: auto;
margin: 0em auto;
}
.btn-big2Fix{margin:0 0 0 30px;}

@media (max-width: 600px) {
.btn-big {
/*float: left;*/
padding: 5px 5px;
  width: 95%;

}
.btn-big2{
  display: block;
 width: 75%;
}
.btn-big2Fix{margin: 30px auto 0 auto;}

}

/* line 484, ../sass/main.scss */
.btn-more {
margin: auto;
width: 150px !important;
font-size: 14px;
border-radius: 100px;
line-height: 22px;
background: #464a7f;
margin-top: 10px;
display: block;
clear: both;
border: 1px solid #ccc6d0;
color: #fff;
}
/* line 496, ../sass/main.scss */
.btn-more:hover {
transition: all 0.3s;
  background: #666cb7;
/* color: #fff; */
border: 1px solid #b7afbb;
}

/* line 504, ../sass/main.scss */
.video-img {
width: 100%;
margin: 5% auto;
box-sizing: border-box;
}
@media (min-width: 600px) {
/* line 504, ../sass/main.scss */
.video-img {
  width: 80% !important;
  margin: 20px 10% 40px 10%;
}
}

/* line 514, ../sass/main.scss */
.video-img-big {
width: 100%;
margin: 2% auto;
box-sizing: border-box;
position: relative;

}

.video-img-big .points{
  position: absolute;
  font-size: 1em;
  background: rgba(101, 25, 94, 0.7);
  color: #ffffff;
  font-weight: 400;
  border: 1px solid rgba(255, 255, 255, 0.8);
  padding: 0.5em 1.5em;
  box-shadow: 0.3em 0.2em 0.2em rgba(0,0,0,.3);
}
@media (min-width: 600px) {
/* line 514, ../sass/main.scss */
.video-img-big {
  max-width: 1100px !important;
  /*margin: 20px 7%;*/
display: block;
}
}

/* line 523, ../sass/main.scss */
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
/* line 528, ../sass/main.scss */
.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* line 537, ../sass/main.scss */
.title_label {
  font-weight: 600;
  padding: 0em 0.8em;
  border-radius: 0.2em;
  color: #fff;
  vertical-align: super;
  line-height: 1.5em;
  font-size: 11px;
  padding: 0 1em;
  background-color: #990000;
  position: absolute;
  top: -3px;
}
.title_label_2{
background: #fffce3;
  background: linear-gradient(46deg, rgba(172,22,243,1) 0%, rgba(67,10,115,1) 50%, rgba(155,22,223,1) 100%);
  color: #ffffff;
  border-radius: 4px;
  /* border: 1px solid #9c27b0; */
  padding: 0.6em 1.4em;
  font-size: 12px;
}
.title_label_3{
background: none;
  color: #ff6600;
  border-radius: 4px;
  border: 2px solid #ff6600;
  padding: 0.3em 1.4em;
  font-size: 12px;
  margin-top: -2.5em;
  top: inherit;	
}


@media (max-width: 768px) {
.title_label_2{
    position: relative;
  top: -1em;
  width: 50%;
  margin: 0 auto;	
}	
}


/* line 544, ../sass/main.scss */
.nav-menu {
margin: 10px 0 30px 0;
float: left;
width: 100%;
}
@media (min-width: 600px) {
/* line 544, ../sass/main.scss */
.nav-menu {
  width: 98%;
  margin: 0 1%;
}
}
/* line 553, ../sass/main.scss */
.nav-menu ul li {
background-size: cover;
margin-bottom: 0 !important;
}
@media (min-width: 600px) {
/* line 553, ../sass/main.scss */
.nav-menu ul li {
  width: 18%;
  margin: 0 1%;
  padding: 0px;
  float: left;
  display: block;
  box-sizing: border-box;
  clear: none;
  height: 88px;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  background: #1e273a;
}
/* line 569, ../sass/main.scss */
.nav-menu ul li:hover {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -webkit-filter: brightness(1.2);
  filter: brightness(1.2);
}
}
/* line 578, ../sass/main.scss */
.nav-menu ul li p {
color: #fff;
font-size: 18px;
text-align: right;
margin: 0;
padding: 10px 20px;
background-size: cover;
}
@media (min-width: 551px) {
/* line 578, ../sass/main.scss */
.nav-menu ul li p {
  padding: 10px 10px;
  font-size: 20px;
  height: 50px;
}
}
@media (min-width: 961px) {
/* line 578, ../sass/main.scss */
.nav-menu ul li p {
  font-weight: 100;
  padding: 20px 10px;
  font-size: 30px;
  height: 30px;
}
}



/* line 654, ../sass/main.scss */
.h3-bg {
background: #464a7f;
font-size: 16px !important;
line-height: 21px !important;
text-align: center;
font-weight: normal !important;
color: #fff !important;
padding: 10px 20px !important;
text-transform: uppercase;
margin: 0;
}
@media (min-width: 551px) {
/* line 654, ../sass/main.scss */
.h3-bg {
  margin: 0;
}
}
@media (min-width: 961px) {
/* line 654, ../sass/main.scss */
.h3-bg {
  margin: 0;
  font-size: 18px !important;
  height: 40px;
  line-height: 40px !important;
  text-align: center;
  position: absolute;
  width: auto;
  padding: 0px 20px !important;
  top: 15px;
  left: -1px;
}
/* line 678, ../sass/main.scss */
.h3-bg:before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 40px 20px 0 0;
  border-color: #464a7f transparent transparent transparent;
  position: absolute;
  top: 0px;
  right: -20px;
}
}

/* line 694, ../sass/main.scss */
.pack-price ul li {
width: 33%;
font-size: 14px;
font-weight: bold;
color: #ff3d00;
margin-right: 0 !important;
text-align: center;
margin-top: -10px;
float: left;
padding-left: 5%;
box-sizing: border-box;
}

/* line 709, ../sass/main.scss */
.two-column ul li > h4 {
color: #000000;
clear: none;
font-size: 22px;
display: block;
float: left;
margin-bottom: 10px;
line-height: 28px;
width: 100%;
}
@media (min-width: 551px) {
/* line 709, ../sass/main.scss */
.two-column ul li > h4 {
  font-weight: 100;
  float: left;
}
}
@media (min-width: 769px) {
/* line 709, ../sass/main.scss */
.two-column ul li > h4 {
  width: auto;
  font-weight: 100;
  font-size: 24px;
}
}

/* line 732, ../sass/main.scss */
.one-tilte > h4 {
color: #000000;
clear: none;
font-size: 22px;
display: block;
float: left;
margin-bottom: 10px;
line-height: 28px;
width: 100%;
}
@media (min-width: 551px) {
/* line 732, ../sass/main.scss */
.one-tilte > h4 {
  font-weight: 100;
  float: left;
}
}
@media (min-width: 769px) {
/* line 732, ../sass/main.scss */
.one-tilte > h4 {
  width: auto;
  font-weight: 100;
  font-size: 24px;
}
}



.on_1200b {
  display: inline;
}
@media screen and (max-width: 768px){
.on_1200b {
  display: none;
}
}

/*for app banners*/
.app_a1{width:12% !important;}
.app_a2{width:76% !important;}
.app_a3{width:15% !important;}

.app_b1{width:12% !important;}
.app_b2{width:76% !important;}

@media screen and (max-width: 768px){
.app_column{width: 80% !important;}
.app_a1{
  width: 30% !important;
  margin-right: 0% !important;
  float: none !important;
  margin: 0 auto !important;
}
.app_a2{width:100% !important; margin-bottom: 0px !important;}
.app_a3{width:40% !important; margin-bottom: 0px !important;}

.app_b1{
  width: 40% !important;
  margin-right: 0% !important;
  float: none !important;
  margin: 0 auto !important;
}
.app_b2{width:100% !important; margin-bottom: 0px !important;}

}

.ds-member{
display: flex;
width: 50%;
box-sizing: border-box;
float: left;
margin: 1% 0;
  height: 80px;
}
.ds-member .ds-m-img{
/* display: inline-table; */
width:20%;
float:left;
}
.ds-member .ds-m-txt {
width: 75%;
padding: 0 5px;
float: left;
box-sizing: content-box;
display: -webkit-box;
display: -ms-flexbox;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}

.ds-member .ds-m-title{
font-size: 1.1em;
line-height: 1.5em;
font-weight: 600;
}

@media screen and (max-width: 800px){
.ds-member{width:100%;}
}

@media screen and (max-width: 600px){
.ds-designer{width:100%;}
}
@media screen and (min-width: 600px) and (max-width: 800px){
.ds-designer{width:50% !important;}
}
@media screen and (min-width: 800px){
.ds-designer{width:33.3%;}
}
@media screen and (min-width: 1100px){
.ds-designer{width:25%;}
}



/* ds feature dashboard */
.blackbg{
background: #252525;
color: #fff;
border-radius: 6px;
max-width: 1200px;
margin: 30px auto;
}


.ds-feature{
margin: 0 auto;
text-align: center;
}

.ds-feature ul li{
  display: inline-block;
  width: 24%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: #111;
  border-radius: 8px;
  padding: 1%;
  margin: 0.5%;
  font-size: 1.2em;
  line-height: 1.3em;
  box-sizing: border-box;
}
.ds-feature ul li:hover{
cursor: pointer;
background: #333;
}
@media screen and (max-width: 768px){
.blackbg{
  border-radius: 0px;
  margin: 0;
}
.blackbg .column-block{margin:0 auto;}

.ds-feature ul{
  display: block;
}
.ds-feature ul li{
  display: block;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-flow: column nowrap;
  border: none;
  background: #111;
  border-radius: 8px;
  padding: 1%;
  margin: 1% auto;
  font-size: 1.0em;
  line-height: 1.8em;
}
}

.contaware_t{
  display: block;
  text-align: center !important;
  margin-top: -10px;
}
.imgpo {
  position: relative;
  margin-top: 10px;
}

.b_before {
  position: absolute;
  right: 52%;
  color: #fff;
  top: 16px;
  font-size: 13px;
  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.7), 0px 0px 6px rgba(0, 0, 0, 0.7);
}
.b_after {
  position: absolute;
  top: 16px;
  left: 52%;
  font-size: 13px;
  color: #fff;
  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.7), 0px 0px 6px rgba(0, 0, 0, 0.7);
}

.phd_layer_new{
font-weight: 600;
padding: 0px 30px;
}

@media screen and (max-width: 768px){
.phd_layer_new{
  padding: 0px;
  font-size: 13.5px;
}

}

.phd_layer_new p{
line-height: 28px !important;
}
.phd_layer_new .c_new{
  color: #fff;
  background: #900;
  padding: 0 1em 0 1em;
  border-radius: 2px;
  font-size: 0.6em;
  vertical-align: middle;
text-transform: uppercase;
}


.imgpo {
  position: relative;
  margin-top: 10px;
}
.b_before {
  position: absolute;
  right: 52%;
  color: #fff;
  top: 5px;
  font-size: 13px;
  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.7), 0px 0px 6px rgba(0, 0, 0, 0.7);
}
.b_after {
  position: absolute;
  top: 5px;
  left: 52%;
  font-size: 13px;
  color: #fff;
  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.7), 0px 0px 6px rgba(0, 0, 0, 0.7);
}


/* ----------------------- PCMAG award ------------------ */

.award-section{
background: #F0F0F0;
  border-radius: 8px;
display: flex;
}
.award-img{
/*width: 30%;*/
padding-top: 1em;
}

.award-img img{max-width:160px; }

.award_title{
font-size: 1.3em;
line-height: 1.2em;
color:#E40606;
padding-bottom: 0.5em;
display: inline-block;
}
a.award_readon{
  border: 1px solid #E40606;
  font-size: 0.45em;
  padding: 0em 0.8em;
  color: #E40606;
  text-decoration: none;
  display: inline-block;
  line-height: 18px;
  margin-top: 6px;
  margin-left: 10px;
  vertical-align: text-top;
}
a.award_readon:hover{
background: rgba(255,255,255,0.8)
}
.award-txt{
padding: 2em 1em 2em 0em;
  box-sizing: content-box;
  font-size: 1.2em;
}

@media screen and (max-width: 800px){
.award-section{
display: block;
}
.award-img{
width: 100%;
text-align: center;
  padding-top: 0em;
}
.award-img img{max-width:85%; }
.award-txt{
padding:0em 1em 2em 1em;
box-sizing: content-box;
text-align: center;
font-size: 1.0em;
}
}


.phd_layer_new{
font-weight: 600;
padding: 0px 0px;
}

@media screen and (max-width: 768px){
.phd_layer_new{
  padding: 0px;
  font-size: 13.5px;
}

}

.phd_layer_new p{
line-height: 28px !important;
padding: 0;
width: 100%;
float: left;
font-weight: normal;
font-size: 15px;
}
@media (min-width: 1200px)  {
.phd_layer_new p{
width: 50%;
}
}
.phd_layer_new .c_new{
  color: #fff;
  background: #900;
  padding: 0 0.5em;
  border-radius: 2px;
  font-size: 0.6em;
  vertical-align: middle;
}
.label_365 {
  background-color: #FF9800;
}





.phd_layer_new{
font-weight: 600;
padding: 0px 0px;
}

@media screen and (max-width: 768px){
.phd_layer_new{
  padding: 0px;
  font-size: 13.5px;
}

}

.phd_layer_new p{
line-height: 28px !important;
padding: 0;
width: 100%;
float: left;
font-weight: normal;
font-size: 15px;
}
@media (min-width: 1200px)  {
.phd_layer_new p{
width: 50%;
}
}
.phd_layer_new .c_new{
  color: #fff;
  background: #900;
  padding: 0 0.5em;
  border-radius: 2px;
  font-size: 0.6em;
  vertical-align: middle;
}
.label_365 {
  background-color: #FF9800 !important;
}


/*-----------2019 Q2--------------*/


.pack-video {
 /* 16:9 */
 margin: auto;
 width: 100%;
 display: block;
 float: left;
}
.pack-video iframe {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
}

.pack-video img {
  width: 100%;
  float: left;
  margin: 0;
}

.video-btn-new {
position: relative;
float: left;
width: 100%;
}

.video-btn-new img {
display: block;
}

.video-btn-new:after, .video-btn-new:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
}

.video-btn-new:after {
width: 0;
height: 0;
border: 0.9em solid transparent;
border-left: 1.5em solid #494949;
margin-top: -0.9em;
margin-left: -0.5em;
/* -webkit-filter: drop-shadow(0px 0px 2px hsla(0, 0%, 0%, 0.25)); */
}

.video-btn-new:before {
width: 4em;
margin-left: -2em;
margin-top: -2em;
height: 4em;
/* border: 2px solid #fff; */
border-radius: 50%;
box-shadow: 0 0 24px hsla(0, 0%, 0%, 0.2);
background: hsla(0, 0%, 100%, 0.55);
}

.video-btn-new:hover:before {
background: rgba(184, 26, 53, 1);
transition: all 0.45s ease;
}

.video-btn-new:hover::after {
border: 0.9em solid transparent;
border-left: 1.5em solid #ffffff;
}
@media (min-width: 551px) {
.video-btn-new:after {
width: 0;
height: 0;
border: 1.1em solid transparent;
border-left: 1.7em solid #494949;
margin-top: -1em;
margin-left: -0.6em;
/* -webkit-filter: drop-shadow(0px 0px 2px hsla(0, 0%, 0%, 0.25)); */
}

.video-btn-new:before {
width: 5em;
margin-left: -2.5em;
margin-top: -2.5em;
height: 5em;
}

.video-btn-new:hover::after {
border: 1.1em solid transparent;
border-left: 1.7em solid #ffffff;
}
}
@media (min-width: 769px) {
.video-btn-new:after {
width: 0;
height: 0;
border: 1.3em solid transparent;
border-left: 2em solid #494949;
margin-top: -1.25em;
margin-left: -0.6em;
/* -webkit-filter: drop-shadow(0px 0px 2px hsla(0, 0%, 0%, 0.25)); */
}

.video-btn-new:before {
width: 5.8em;
margin-left: -2.9em;
margin-top: -2.9em;

height: 5.8em;

}

.video-btn-new:hover::after {
border:1.3em solid transparent;
border-left: 2em solid #ffffff;
}
}

.pack-video p {
  padding: 15px 0;
  text-align: center;
  font-size: 22px;
  background: #43d5ff;
  float: left;
  width: 100%;
  display: block;
  color: #111;
  border-top: 1px solid #848484;
}

.award_winning{
box-sizing: border-box;
width:100% !important;
padding: 0 1.5% !important;
border: none;
margin: 0 !important;
box-sizing: content-box;
}
@media (min-width: 600px){
.award_winning{
box-sizing: border-box;
width: 30.2% !important;
padding: 0 1.5% !important;
border-right: 1px solid #cfcfcf;
margin: 0 !important;
box-sizing: content-box;
}
}
.award_winning .box{
border: 1px solid #dfdfdf;
border-radius: 8px;
margin:20px 0;
}
@media (min-width: 600px){
.award_winning .box{
border: none;
margin: 0;
}
}
.award_winning .box img{
margin-bottom: 0px;
}
.award_winning.JPN p{
  font-size: 1.1em;
}
.award_winning p{
  font-size: 1.2em;
  padding: 0em 1.5em 0 1.5em;
  text-align: center;
  font-weight: 600;
  color: #222;
}

/*.award_winning a .box:hover{
border: 1px solid #079bcc;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}*/

@media screen and (max-width: 550px){
.award_winning .award_p{
margin: 0 auto;
width: 80%;
}
.award_winning p{
  font-size: 1.1em;
  padding: 1em 1em 0 1em;
}
}


.support_link2{
padding: 2px;
  box-sizing: border-box;
  text-align: center;
  background: #ffffff;
border: 1px solid #eaeaea;
  margin: 10px;
}




.support_link{
padding: 2px;
box-sizing: border-box;
text-align: center;
margin: 10px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
    border: 1px solid #eaeaea;
}

.support_link a{color: #222;}

.support_link a:hover, .support_link:hover{
background: #fff;
cursor: pointer;
color:#079bcc;
box-shadow: 0 2px 8px rgba(0,0,0,.3);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}



.support_link h4, .support_link2 h4{
font-size:1.2em;

}
.support_link p{
  padding: 0.5em 0.5em 0.5em 0.5em;
}

.support_block{
width: 100%;
}

.support_flex{
display: flex;
}
@media screen and (min-width: 1000px){
.support_block{
  width: 80%;
}
}
@media screen and (max-width: 780px){

.support_flex{
      display: flex;
  flex-wrap: wrap;

}
.support_link .support_box {
  /* width: 70%; */
  margin: 0 auto;
}
.support_link{
  margin-bottom: 30px !important;
}
.support_link:hover{
  background: #eaeaea;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.support_link p {
  padding: 0.5em 0em 1em 0em;
}
}
.four-column .support_flex li {
  margin: 10px 0px;
  width: 100%;
  padding: 10px;
}
@media (min-width: 600px){
.four-column .support_flex li {
  margin: 10px 0.5%;
  width: 48%;
  padding: 10px;
  box-sizing: border-box;
}
}
@media (min-width: 769px){
.four-column .support_flex li {
  margin: 10px 10px;
  width: 24%;
  padding: 10px;
  border: 1px solid #eaeaea;
}
}
.btn-sound {
  padding: 10px 50px;
  display: inline-block;
  width: auto;
  margin: 0em auto;
  border: 2px solid #2196f3;
  border-radius: 4px;
  background: #ffffff;
  color: #2196f3;
  font-size: 18px;
}
.column-block.color-block {
  /* background: #eaeaea; */
  overflow: hidden;
  margin-top: 0px;
  padding: 10px;
  box-sizing: border-box;
}

.three-column.award-block {
  padding: 0px;
  margin: 0px 10%;
  width: 80%;
}

.support_box img {
  width: 100%;
}

.pack-block {
max-width: 800px;
margin: auto;
padding: 0px;
box-sizing: border-box;
background: #ffffff;
overflow: hidden;
}
.pack-thumbnail-list {
  float: left;
  display: block;
  background: #ffffff;
  border: 1px solid  #cfcfcf;
  border-top: none;
  padding: 20px 20px  20px 20px;
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 600px){
.pack-thumbnail-list {
  padding: 25px 20px;
}
}
.pack-thumbnail-list ul li {
  width: 40%;
  float: left;
  border: 3px rgb(255, 255, 255) solid;
  margin: 20px 5%;
  box-sizing: border-box;
  position: relative;
  transition: all 0.3s;
}
@media (min-width: 600px){
.pack-thumbnail-list ul li {
  width: 21%;
  margin: 0 2%;
}

}
@media (min-width: 900px){
.pack-thumbnail-list ul li {
  width: 16%;
  margin: 0px 2%;
}
}
.pack-thumbnail-list ul li img{
  width:100%;
  display: block;
  margin: 0;
}

.pack-thumbnail-list ul li:hover {
 border: 3px #4ad7ff solid;
  display: block;
  transition: all 0.3s;
}

.pack-thumbnail-list ul li.focus {
border: 3px #4ad7ff solid;
transition: all 0.3s;
}

.pack-thumbnail-list ul li:hover::before,.pack-thumbnail-list ul li.focus::before {
display:none;
}
@media (min-width: 600px){
.pack-thumbnail-list ul li:hover::before,.pack-thumbnail-list ul li.focus::before {
display:block;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 20px 30px 0 30px;
border-color: #4ad7ff transparent transparent transparent;
position: absolute;
top: -28px;
left: 28%;
transition: all 0.3s;
}
}
li.btn-more-pack {
  border: 3px hsla(0, 0%, 100%, 0) solid !important;
  width: 75% !important;
  margin: 0px 12.5%!important;
}
@media (min-width: 600px){
li.btn-more-pack {
 width: 48% !important;
 margin: 15px 26% 0px 26% !important;
}
}
@media (min-width: 900px){
li.btn-more-pack {
  width: 16%!important;
  margin: 0 2% !important;
}
}
li.btn-more-pack::before {
  display: none !important;
}
.btn-pack {
  display: block;
  overflow: hidden;
  line-height: normal;
  padding: 2px;
  font-size: 15px;
  background: #2196f3;
  color: #ffffff;
  border-radius: 0;
  border: 3px solid #2196f3;
  /* margin-bottom:20px; */
  border-radius: 4px;
  width: auto;
}
@media (min-width: 900px){
.btn-pack {
    padding: 24px 18px;
    margin-bottom: 0;
    display: flex;
}
}
.btn-pack:hover {
 background: #137fd4;
 border: 3px solid #137fd4;
 color: #ffffff;
}
.support_box h4 {
  color: #000;
  padding:0px 20px;

}
.support_box p {
  color: #000;
  padding:15px 20px;
}
.btn-store {

      background: #f60;
}
.btn-store:hover {
      background: #f68b35;
}
.award-block li.award_winning:nth-last-child(1)   {
  border-right: none;
}
.overview-top{
font-size: 24px;
}
.video-block {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.video-block iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
img.arrow-r {
  width: 20px !important;
  float: right;
  display: none !important;
}
@media (min-width: 900px) {
img.arrow-r {
  width: 25% !important;
  height: inherit;
  float: right;
  display:block !important;
}
}

li.btn-more-pack p {
  text-align: center;
  padding: 0;
  line-height: 22px !important;
  margin: 0;
  font-size: 15px;
}
@media (min-width: 900px) {
li.btn-more-pack p {
  width: calc(100% - 20px);
  display: block;
  float: left;
  font-size: 18px;
  text-align: left;
  line-height: 30px !important;
  box-sizing: border-box;
  align-self: center;
}
}
span.pack-date {
  font-size: 14px;
}

.ov-feature img {
  width: 150px;
  margin: auto;
  display: block;
  /* float: left; */
}
@media(min-width: 769px){
.ov-feature img {
  width: 150px;
  float: left;
  padding-right: 10px;
  box-sizing: border-box;
}
}

.social_icon img {
  width: 30px;
  margin:20px 5px;
}
a.social_icon:hover {
  box-shadow: none;
    opacity: 0.7;
}

.ov-feature h3, .ov-feature p {
  /* width: 100%; */
  /* float: left; */
  box-sizing: border-box;
  text-align: center;
}
@media (min-width: 600px){
.ov-feature h3, .ov-feature p {

  text-align: left;
}
}
@media (width: 768px){
.ov-feature h3, .ov-feature p {

  float: left;
  box-sizing: border-box;
      text-align: left;
}
}
@media (min-width: 769px){
.ov-feature h3, .ov-feature p {
  width: calc(100% - 150px);
  float: left;
  box-sizing: border-box;
  text-align: left;
}
}
.buynow-bar {
  margin: auto;
  display: block;
  text-align: center;
}
.support_box:hover a.video-btn-new {
  box-shadow:none;
}
.phd-layer-editing .ds-m-img {
  width: 100px;
  /* padding: 10px; */
  /* border: 1px solid #6d6969; */
  /* background: #ffc107; */
  /* border-radius: 5px; */
  margin-right: 10px;
  /* box-shadow: 2px 2px 0px #ccc; */
}
.phd-layer-editing .ds-m-img img{margin: 0;}

.support_box:hover a.video-btn-new {
  box-shadow:none;
}

.video-btn-new {
position: relative;
float: left;
width: 100%;
}

.video-btn-new img {
display: block;
}

.video-btn-new:after, .video-btn-new:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
}

.video-btn-new:after {
width: 0;
height: 0;
border: 0.9em solid transparent;
border-left: 1.5em solid #494949;
margin-top: -0.9em;
margin-left: -0.5em;
/* -webkit-filter: drop-shadow(0px 0px 2px hsla(0, 0%, 0%, 0.25)); */
}

.video-btn-new:before {
width: 4em;
margin-left: -2em;
margin-top: -2em;
height: 4em;
/* border: 2px solid #fff; */
border-radius: 50%;
box-shadow: 0 0 24px hsla(0, 0%, 0%, 0.2);
background: hsla(0, 0%, 100%, 0.55);
}

.video-btn-new:hover:before {
background: rgba(184, 26, 53, 1);
transition: all 0.45s ease;
}

.video-btn-new:hover::after {
border: 0.9em solid transparent;
border-left: 1.5em solid #ffffff;
}
@media (min-width: 551px) {
.video-btn-new:after {
width: 0;
height: 0;
border: 1.1em solid transparent;
border-left: 1.7em solid #494949;
margin-top: -1em;
margin-left: -0.6em;
/* -webkit-filter: drop-shadow(0px 0px 2px hsla(0, 0%, 0%, 0.25)); */
}

.video-btn-new:before {
width: 5em;
margin-left: -2.5em;
margin-top: -2.5em;
height: 5em;
}

.video-btn-new:hover::after {
border: 1.1em solid transparent;
border-left: 1.7em solid #ffffff;
}
}
@media (min-width: 769px) {
.video-btn-new:after {
width: 0;
height: 0;
border: 1.3em solid transparent;
border-left: 2em solid #494949;
margin-top: -1.25em;
margin-left: -0.6em;
/* -webkit-filter: drop-shadow(0px 0px 2px hsla(0, 0%, 0%, 0.25)); */
}

.video-btn-new:before {
width: 5.8em;
margin-left: -2.9em;
margin-top: -2.9em;

height: 5.8em;

}

.video-btn-new:hover::after {
border:1.3em solid transparent;
border-left: 2em solid #ffffff;
}
}
main p, a{
hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
}
@media screen and (min-width: 900px){
.layout_flip{
float:right !important;
margin-right: 0px !important;
}
}

.layout_flip{
float:none;
}
.img_award{
width: 80%;
margin: auto;
}
.support_link .support_box {
  height:100%;}


/*----*/
.five-icon-column ul li {
  width: 100%;
  float: left;
  display: flex;
  align-items: center;
}
@media (min-width: 768px) {
.five-icon-column ul li {
  width: 20%;
  text-align: center;
  display: block;
}
}
.five-icon-column ul li img {
  width: 100px;
  margin: auto;
  float: left;
}
@media (min-width: 768px) {
.five-icon-column ul li img {
  width: 100px;}}
@media (min-width: 768px) {
.five-icon-column ul li img {
  width: 100px;
  margin: auto;
  float: none;
}
}
.five-icon-column ul li p {
  font-size: 1.1em;
  line-height: 1.5em;
  font-weight: 600;
  width: calc(100% - 100px);
  float: left;
  padding: 0;
}
@media (min-width: 768px) {
.five-icon-column ul li p {
  font-size: 1.1em;
  line-height: 1.2em !important;
  font-weight: 600;
  width: 100%;
}
}
.align-left{
text-align: left;}
@media (min-width: 600px) {
.align-left{
text-align: center;}
}

@media (min-width: 600px){
.float-c {
  text-align:center;
  max-width: 900px;
  margin: 0 auto;
}}


.m-15 .title_label {
  margin-top: 0%;
}

@media (min-width: 1024px){
.m-15 .title_label {
  margin-top: 15%;
}}
.ov-feature li {
  float: left;
}
.five-icon-column {
  width: 100%;
  float: left;
  margin: 0px 0%;
  /* border: 1px solid #494949; */
  border-radius: 10px;
  /* padding: 20px; */
  box-sizing: border-box;
}
@media (min-width: 600px){
 .five-icon-column {
         padding: 10px;
         width: 90%;
         margin: 20px 5%;
}}
@media (min-width: 1024px){
 .five-icon-column {
  width: 80%;
  margin: 40px 10%;
}}
.phd-gif {
  max-width: auto;
}
@media (min-width: 600px){
.phd-gif {
  max-width: 450px;
}}

.label-2 {
  font-weight: 600;
  padding: 0em 0.8em;
  border-radius: 0.2em;
  color: #fff;
  vertical-align: super;
  line-height: 1.5em;
  font-size: 11px;
  padding: 0 1em;
  background-color: #990000;
  float: left;
  margin-right: 10px;
}

.img-w750 {
  max-width: 750px !important;
  width: 100%;
margin: auto;
}


/*hide top banner image*/
.banner1200 img {
display: none;
}

.video-more {
  display: inline-block;
  border: 1px solid #e76000;
  background: rgb(231 96 0);
  padding: 10px 15px;
/*    min-width: 200px;*/
  font-size: 16px;
  text-align: center;
/*    margin-top: 45px;*/
  transition: 0.2s all;
border-radius: 8px;
}
.video-more:hover{
border: 1px solid #e76000;
  background: rgb(231 96 0 / 20%);
  color: #e76000;
  transition: 0.2s all;
text-decoration: none;
}	

.overview-more{
margin-left: 1em;
background: rgb(233 30 90);
  border: 1px solid #e91e5a;
}
.overview-more:hover{
border: 1px solid #e91e5a;
  background: rgb(233 30 90 / 20%);
  color: #e91e5a;
}		

.overview-more2{
margin-left: 1em;
  background: rgb(255 162 7);
  border: 1px solid #ffa207;
}
.overview-more2:hover{
border: 1px solid #ffa207;
  background: rgb(255 162 7 / 20%);
  color: #ffa207;
}		



.v-opacity{
opacity: 0.8;
}


.vid-switch{
  position: absolute;
  bottom: 10%;
  width: 50vw;
  z-index: 10;
  opacity: 0.85;
}
@media (max-width: 766px){
.vid-switch{
width: 100vw;
}	
}
.vid-switch .vid-block{
  margin: 0 auto;
  text-align: center;	
}

.vid-switch .v-switch-btn{
margin-top:0px;
min-width:12vw;
}
.vid-switch .v-switch-btn:hover {

  background: #fff;
  color: #e76000;
}
.vid-block .-current{
background: #fff;
color:#e76000;
}


.fadeing-top{
  position: absolute;
  width: 100%;
  height: 40%;
  background: #000;
  top: 0px;
  z-index: 10;	
background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
pointer-events: none;
}





/*TEMPLATE FLOW*/
.template-flow-container{
  height: 300px;
  margin-bottom: 40px;	
}
.template-set{
position: relative;
}
.template-set ul{
position: relative;
}
.temp-item video{
height: 300px;
width: auto;
border-radius: 10px;
}

.temp-item{
top:0px;
  width: 400px;
  position: absolute;
  transition: transform ease-out .2s, z-index ease .2s;

  /* border: 1px solid #ffffff; */
  /*box-shadow: 0 0 12px 0px rgb(20 115 104);*/
} 

/*@media (hover: hover) and (pointer: fine){
.temp-item:hover{
  transform: scale(1.2);
  z-index: 100;	
animation-play-state:paused;
  cursor: pointer;	
}
}*/

.temp-item img{
border-radius: 12px;
}

.temp1{
left:0px;
}
.temp2{
left:420px;	
}
.temp3{
left:840px;
}
.temp4{
left:1260px;
}
.temp5{
left:1680px;
}
.temp6{
left:2100px;
}
.temp7{
left:2520px;
}
.temp8{
left:2940px;
}



@media (hover: hover) and (pointer: fine){
.template-flow:hover{
  animation-play-state:paused;
}
}


/* grid */
.acc-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 1em;
}

/*accordion flex logo/title*/
.acc-grid .acc-flex{
display: flex;
align-items: center;
position: relative;
flex-direction: row;
gap: 12px;
}

.acc-grid .acc-flex h3{
padding: 0;
margin: 0;
}

.acc-grid .acc-flex img{
width: 20%;
min-width: 35px;
max-width: 68px;
border-radius: 6px;
padding: 3%;
background: rgb(77, 77, 77);
}


/*BLACK MIST*/
.bk-mist{
position: relative;
width: 80%;
margin: 0 auto;
}

.bk-mist .note1{
position: absolute;
top: 18%;
left: 7%;
z-index: 5;
background: rgba(0,0,0,0.6);
border: solid #fff 1px;
color: #fff;
font-size: 13px;
padding: 0.3em 1.5em;	
box-shadow: -5px 14px 15px rgb(0 0 0 / 40%);
}

.bk-mist .note2{
top: 68%;
left: initial;
right: 8%;
}

@media (max-width: 768px){
.bk-mist{
  width: 100%;
}
}

/*PACK MONTHLY*/
.pack-monthly{
display: flex;
margin: 0 auto;
width: 90%
}
.pack-monthly .pack-monthly-item{
width: 33.3%;
margin:0 1em;
text-align: center;
}
.pack-monthly .pack-monthly-item img{
margin: 0 auto;
}
.pack-monthly .pack-monthly-item span{
  display: inline-block;
  margin: 0.5em;
  padding: 0.3em 1.5em;
  color: #222;
}
.pack-monthly .pack-monthly-item a:hover>img{
opacity: 0.8;
}
.pack-monthly .pack-monthly-item a:hover>span{
color:#ff9800;
}