﻿.product-benefits .media figure.media-left, .product-function .media figure.media-left{
    display: flex;
    align-items: center;
    justify-content: baseline;
    margin-right: 1.5rem;
}
.product-header .media-left {
    margin-right: 0;
}
header.header .hero{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right bottom;
}

header.header .sd-wan.product-header .hero-body {
    padding-top: 40px;
}

.sd-wan.product-header  .btn-plain {
    line-height: 2.75rem;
}

@media screen and (max-width: 768px) {
    .product-benefits .media,  .product-function .media{
        flex-flow: wrap;
    }
    .product-benefits .media figure.media-left,  .product-function .media figure.media-left{
        justify-content: center;
        margin-right: 0;
        margin-bottom: 1.25rem;
        flex: 1;
    }
}

.product-benefits .media figure figcaption,  .product-function .media figure figcaption{
    font-size: 16px;
    font-weight: 500;
    color: #68747f;
    margin-left: 1.25rem;
}

.product-benefits .content,  .product-function  .content{
    font-size: 1rem;
    line-height: 1.5rem;
    text-align: left;
    color: #a1a6ab;
}

.product-function  .function-content, .product-services .services-content{
    padding-bottom: 1.5rem;
    position: relative;
    color: #68747f;
    line-height: 1.88;
}
.product-function .function-content:after, .product-services .services-content:after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 1.25rem;
    right: 1.25rem;
    height: 1px;
    background-color: #dce0e1;

}
.product-function .function-content ul{
    margin-top: 0;
    margin-left: 0;
}

.product-function .function-point, .product-services .services-point{
    margin-bottom: 2.5rem;
}

.product-function .function-point .title{
    font-size: 1.2rem;
    color: #68747f;
    font-weight: 600;
}

.product-benefits .card-content ul{
    margin: 0;
}
.product-benefits figure {
    margin-bottom: 1rem;
    margin: 0 auto;
}

section.section figure {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
section.section figure  img{
    width: auto;
}
.product-benefits .media .media-content .content ul,  .product-function .media .media-content .content ul{
    padding: 0;
}

.product-customers .customers-content {
    display: flex;
    flex-flow: wrap row;
    justify-content: center;
}
@media screen and (min-width: 769px) {
    .product-customers .customers-content {
        margin-left: -10px;
        margin-right: -10px;
    }
}
.product-customers .customers-content figure {
    border-radius: 4px;
    background-color: #ffffff;
    border: solid 1px rgba(161, 166, 171, 0.2);
    height: 6.25rem;
    padding-left: 30px;
    padding-right: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0.9375rem 20px;
    text-align: center;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.product-customers .customers-content figure img {
    max-height: 80px;
    width: auto;
}

.product-types .columns .columns:not(:last-child) {
    margin-bottom: 2.5rem
}

.product-types .tabs li a {
    padding: 0.625rem 1.125rem;
    margin-right: 1rem;
    line-height: 1;
    color: #68747f;
}

.product-types .tabs li.is-active a {
    color: #78a524;
}

.product-types .tab-panel,
.product-types h4, .product-pricing table, .product-pricing h4, .product-scenarios table, .product-scenarios h4{
    line-height: 1.88;
}

.product-types .tab-panel p,  .product-pricing  p, .product-scenarios p, .section-info p, .product-function p, .product-architechture p, .product-architechture figure, .product-scenarios figure{
    line-height: 1.88;
    color: #68747f;
    margin-bottom: 1.25rem
}

.product-types table, .product-pricing  table, .product-scenarios table, .product-function table, .product-benefits table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    background-color: white;
    table-layout: fixed;
    margin-bottom: 1.25rem;
}

.product-types  table th,  .product-pricing table th, .product-scenarios table th, .product-function table th, .product-benefits table th{
    font-weight: 500;
    white-space: nowrap;
}

.product-types  table th,
.product-types  table td, .product-pricing table th,
.product-pricing  table td, .product-scenarios table td, .product-function table td, .product-benefits table td {
    text-align: left;
    color: #68747f;
    padding: 0.875rem 1.25rem;
    border: 1px solid #dce0e0;
    vertical-align: top;
}

.product-types table td, .product-pricing table td, .product-scenarios table td, .product-function table td, .product-benefits table td {
    font-size: 1rem
}

.section-info .wp-video{
    margin: 0 auto;
}
@media screen and (max-width: 769px) {
    .product-types .title, .product-pricing .title, .product-scenarios .title {
        text-align: center
    }
    .product-types .tabs ul, .product-pricing .tabs ul {
        justify-content: center
    }
    .product-types table, .product-pricing  table, .product-scenarios table, .product-function table, {
        table-layout: auto;
    }
}

.product-pricing .columns .title {
    color: #68747f;
    margin-bottom: 10px
}

.product-pricing div.is-text-small {
    color: #68747f;
    line-height: 1.71;
}

.section-info {
    margin-bottom: 2.5rem;
    line-height: 1.88;
    font-size: 1rem;
}

.product-related .related-content {
    display: flex;
    flex-flow: wrap row;
    justify-content: center;
    align-items: center
}
@media screen and (min-width: 769px) {
    .product-related .related-content {
        margin-left: 1.25rem;
        margin-right: 1.25rem;
        margin-bottom: -1.25rem;
    }
}

@media screen and (max-width: 769px) {
    .card-content .media {
        flex-flow: column wrap;
        justify-content: center;
        align-items: center;
    }
    .card-content .media .media-left {
        margin-right: 0;
        margin-bottom: 1.25rem;
    }
    .card-content .media .media-content .title {
        text-align: center
    }
    .product-related .related-content a {
        margin-bottom: 1.25rem !important;
    }
    .product-related .related-content {
        margin-left: -1.25rem;
        margin-right: -1.25rem;
    }
}
.product-related .related-content a {
    height: 120px;
    width: 120px;
    display: block;
    margin: 0 1.25rem 1.25rem;
    border-radius: 3px;
    background-color: #ffffff;
    border: solid 1px rgba(161, 166, 171, 0.2);
}

.product-related .related-content a:hover {
    border: solid 1px #78a524;
}

.product-related .related-content a .label {
    margin-top: 0.9375rem;
    font-size: 0.875rem;
    font-weight: normal;
    text-align: center;
    color: #68747f;
    line-height: 1.25rem;
}

.product-related .related-content a:hover .label {
    color: #78a524
}

.product-related span.image.is-40x40{
    margin: 1.5625rem 2.5rem 0;
}
.scenarios-collapse {
    max-width: 840px;
    margin: 0 auto;
}

.collapse .collapse-header {
    background: #fff
}

.collapse .collapse-header a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2.5rem;
    position: relative;
}

.collapse .collapse-header a:hover .collapse-title {
    color: #3e464c
}

.collapse .collapse-header a::after {
    border: 1px solid #a1a6ab;
    border-right: 0;
    border-top: 0;
    content: " ";
    display: block;
    height: 0.75rem;
    pointer-events: none;
    position: absolute;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: center;
    transform-origin: center;
    width: 0.75rem;
    right: 3.125rem;
    top: 3rem;
    z-index: 1;
    transform-origin: 30% 70%;
    -webkit-transition: all 0.1s ease-in;
    -moz-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;
}

.collapse .collapse-header.open {
    box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.03);
}

.collapse .collapse-header.open a::after {
    -webkit-transform: rotate(-225deg);
    -moz-transition: rotate(-225deg);
    transform: rotate(-225deg);
    border-color: #78a524;
}

.collapse .collapse-header.open a {
    padding-bottom: 0;
}

.collapse .collapse-header .collapse-title {
    font-size: 24px;
    font-weight: 500;
    text-align: left;
    -webkit-transition: all 0.1s ease-in;
    -moz-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;
    color: #a1a6ab;
}

.collapse .collapse-header.open .collapse-title {
    color: #3e464c;
    padding-right: 1.75rem;
}

.collapse .collapse-header .collapse-icons {
    display: flex;
    align-items: center;
    margin-right: 2.25rem;
}

@media screen and (max-width: 768px) {
    .collapse .collapse-header .collapse-icons {
        display: none;
    }
}

.collapse .collapse-header .collapse-icons img {
    height: 2rem;
    width: 2rem;
    margin: auto 0.625rem;
    -webkit-filter: hue-rotate(46deg) grayscale(88%);
    -moz-filter: hue-rotate(46deg) grayscale(88%);
    -ms-filter: hue-rotate(46deg) grayscale(88%);
    filter: hue-rotate(46deg) grayscale(88%);
    opacity: 0.3;
}

.collapse .collapse-header.open .collapse-icons img {
    height: 2rem;
    width: 2rem;
    margin: auto 0.625rem;
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: grayscale(0%);
}

.collapse .collapse-header+.collapse-item {
    height: 0px;
    padding: 1.25rem 0 0 0;
    overflow: hidden;
    display: block!important;
    -webkit-transform: translateZ(0);
    -webkit-transition: all 0.2s ease;
    moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    transition: all 0.2s ease;
    opacity: 0;
    background: #fff;
}

.collapse .collapse-header+.collapse-item:not(:last-child) {
    margin-bottom: 0
}

.collapse .collapse-content {
    padding: 0 2.5rem 3.125rem 2.5rem;
}

.collapse .collapse-header.open+.collapse-item {
    height: auto;
    opacity: 1;
    margin-bottom: 1.25rem;
    box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.03);
}

.scenarios-collapse .collapse-content .title {
    color: #68747f;
    margin-bottom: 1.25rem
}

.scenarios-collapse .collapse-content .recommend {
    margin-top: 1.5rem
}

.scenarios-collapse .collapse-content ul {
    line-height: 1.88;
    text-align: left;
    color: #68747f;
    margin: 0;
}

section.section  ul{
    list-style: none !important;
    margin-left: 0;
}
section.section   ul  li {
	position: relative;
	margin: 5px 0;
	padding-left: 30px;
}
section.section ol {
    position: relative;
    margin: 5px 0;
    padding-left: 2rem;
}
section.section  ul > li::before { 
	content: "";
	position: absolute;
	width: 5px;
	height: 5px;
	left: 10px;
	top: 10px;
	border-radius: 50%;
	background: #78a524;
}
section .tabs ul li{
    margin: 0;
    padding: 0;
    line-height: 1.6;
}
section .tabs ul li a {
    padding-top: 0;
}
.tabs ul li:before{
    display: none;
}

.button.is-small-btn{
    background: none;
    border: none;
    color: #fff;
    font-size: 0.875rem;
    padding: 0;
}
.button.is-small-btn:hover{
    color: #78a524;
}

.modal {
    z-index: 99999;
}

.modal .modal-background {
    background-color: #3e464c;
    opacity: .7;
}

.modal .modal-card {
    position: relative;
    max-width: 480px;
    border-radius: 5px;
    background-color: #fff
}

.modal .modal-card .modal-card-body {
    padding: 10px 30px 40px;
    background-color: transparent
}

.contact-item {
    flex-flow: row;
    justify-content: center;
    align-items: flex-start;
}

.contact-item .icon {
    margin-top: 8px;
    margin-right: 6px;
}

.icon.icon-green-phone{
    background: transparent 0 0 no-repeat;
    background-image: url("../images/icons/common/green-phone.svg");
    vertical-align: middle;
}

.icon.icon-green-mail{
    background: transparent 0 0 no-repeat;
    background-image: url("../images/icons/common/green-mail.svg");
    vertical-align: middle;
    background-size: contain;
}
  

@media screen and (max-width: 769px) {
    .modal .modal-card .modal-card-body {
        padding: 20px 30px 40px;
    }
    .modal .modal-card aside.menu li {
        display: list-item;
    }
    .modal .modal-card aside.menu li a {
        padding: 1rem !important;
    }
}
.modal .modal-card .modal-card-head {
    background-color: transparent;
    border-bottom: none;
    padding-top: 30px;
    padding-bottom: 20px;
}
.modal .modal-card .modal-close {
    position: absolute;
    top: 20px;
    right: 22px;
}

.modal-close:hover,
.modal-close:focus{
    background-color: transparent;
}

.modal-close:before, .modal-close:after {
    background-color: #c3c3c3;
}

.modal-close:hover::after,
.modal-close:hover::before,
.modal-close:focus::after,
.modal-close:focus::before {
    background-color: #9c9c9c;
}
.modal-card-body {
    background-color: transparent;
}

.modal .modal-card .modal-card-title {
    text-align: center;
    color: #68747f;
    font-weight: 500;
    font-size: 16px;
}

.modal .modal-card .menu-list li a {
    border-bottom: 1px solid #EBEDF0;
    padding: 18px 16px;
    text-align: left;
    color: #697480;
    position: relative;
    font-size: 14px;
}
.modal .modal-card .menu-list li a:after {
    border: 1px solid #697480;
    border-right: 0;
    border-top: 0;
    content: " ";
    display: block;
    height: 0.5em;
    pointer-events: none;
    position: absolute;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
    -webkit-transform-origin: center;
    transform-origin: center;
    width: 0.5em;
    margin-top: -0.375em;
    right: 1.125em;
    top: 50%;
    opacity: 0.7;
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.modal .modal-card .menu-list li a:hover {
    color: #78a524;
    background-color: transparent;
}
.modal .modal-card .menu-list li:first-of-type a {
    border-top: 1px solid #EBEDF0;
}
.modal .modal-card .menu-list li a:hover:after {
    opacity: 1;
    border: 1px solid #78a524;
    border-right: 0;
    border-top: 0;
}

.functions-bars .media {
    margin-bottom: 15px;
}

.functions-bars .media-content {
    font-size: 18px;
    font-weight: 500;
}
.product-card-box {
    background-color: #f5f8fa;
    padding: 20px 20px;
    text-align: center;
    max-width: 300px;
    margin: 0 auto;
}

.product-card-box span{
    font-size: 14px;
}

.product-card-box .card-box-title {
    font-size: 16px;
    font-weight: 500;
    color: #303e5a;
    margin-bottom: 10px;
}

.product-card-box .card-box-des {
    color: #a1a6ab;
    font-size: 14px;
    margin-bottom: 10px;
}

.product-card-box .card-box-content {
    line-height: 2.29;
    font-size: 14px;
}

