@charset "utf-8";

/* body::before{
    content: "";
    background-color: rgba(255,0,0,0.3);
    width: calc((100vw - 1188px) / 2);
    padding: 0;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
}
body::after{
    content: "";
    background-color: rgba(255,255,0,0.3);
    width: calc((100vw - 1188px) / 2);
    height: 100vh;
    position: fixed;
    margin: 0 auto;
    right: 0;
    top: 0;
    z-index: 1;
} */

.software-container img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    display: block;
}
.software-container ::-webkit-scrollbar{
    display: none;
}
.software-container .container.software-box{
margin-top: 80px;
margin-bottom: 80px;
}

.container.software-box:last-child{
    margin-bottom: 0;
}
.software-package-box ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 20px -10px 0 -10px;
    padding: 0;
}
.software-package-box li {
    width: 33.33%;
    padding: 20px 10px 0 10px;
    display: flex;
}

ul.software-package-list {
    list-style: none;
    display: flex;
    margin: 0 0 40px 0;
    padding: 0;
    justify-content: center;
    border-bottom: 1px solid #CCC;
    flex: none;
    width: auto;
    flex-flow: row nowrap;
    scroll-snap-type: x mandatory;
    list-style-type: none;
    -webkit-overflow-scrolling: touch;
    -webkit-appearance: none;
}
.software-package-list li {
    text-align: center;
    flex: none;
    margin: 0;
    display: flex;
    padding: 0;
    position: relative;
    scroll-snap-align: start;
    flex: none;
    color: #222;
    align-content: flex-start;
    width: auto;
    text-align: center;
}
.software-package-list li a:link, .software-package-list li a:visited {
    color: #000;
    text-decoration: none;
    padding: 0 20px;
    overflow: hidden;
}
.software-package-list li a.active:before {
    content: "";
    border-bottom: 3px solid #cd0803;
    width: 100%;
    height: 2px;
    display: block;
    position: absolute;
    bottom: -3px;
    transition: all 0.3s;
    left: 0;
}

.container.software-box.office365 .software-package-box .package-title{
    text-align: center;
}

.container.software-box.workspace .software-package-box ul{
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 20px -10px 0 -10px;
    padding: 0;
}
/* .container.software-box.office365 .software-package-box li {
    width: 33.33%;
    padding: 20px 10px 0 10px;
    display: flex;
} */

.software-package-box-row {
    border: 1px solid #CCC;
    position: relative;
    padding-bottom: 70px;
}
.container.software-box.office365 .software-package-box-row {
    border: 1px solid #CCC;
    position: relative;
    padding-bottom: 0;
}
.container.software-box.workspace .software-package-box-row {
    border: 1px solid #CCC;
    position: relative;
    padding-bottom: 0;
}
.software-package-img{
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
    margin: 0;
    width: 100%;
    padding-top: 34.22%;
}
.software-package-img-scale{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
}
.software-package-img img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    top: 0;
    left: 0;
    right: 0;
    image-rendering: auto;
}
.software-package-detail {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0;
    padding: 10px;
    text-align: left;
    line-height: 24px;
}
.container.software-box.office365 .software-package-detail {
    padding: 0 10px 10px 10px;
}
.container.software-box.workspace .software-package-detail {
    padding: 0 10px 10px 10px;
}
.software-title {
    display: flex;
    flex-direction: row;
    margin: 10px -10px 20px -10px;
    width: auto;
    align-items: flex-start;
    justify-content: space-between;
    flex: auto;
}
.container.software-box.office365 .software-title {
    display: flex;
    flex-direction: row;
    margin: 0 -10px 20px -10px;
    width: auto;
    align-items: flex-start;
    justify-content: space-between;
    flex: auto;
    background-color: #e43b13;
}
.container.software-box.workspace .software-title {
    display: flex;
    flex-direction: row;
    margin: 0 -10px 20px -10px;
    width: auto;
    align-items: flex-start;
    justify-content: space-between;
    flex: auto;
    background-color: #e74c3c;
}
.software-product,.software-name,.software-device{
    width: auto;
    flex: auto;
    padding: 0 10px;
}
.software-product {
    width: auto;
    flex: none;
    /* height: 292.422px; */
}
.software-product img{
    max-height: 50px;
}
.software-name{
    font-size: 12px;
    color: #999;
    line-height: 1;
}
.container.software-box.office365 .software-name{
    font-size: 12px;
    color: #999;
    line-height: 1;
}
.container.software-box.workspace .software-name{
    font-size: 12px;
    color: #999;
    line-height: 1;
}
.software-name h4{
    font-size: 16px;
    color: #000;
    margin: 0;
}
.office365 .software-name h4 {
    font-size: 18px;
    color: #FFF;
    margin: 0;
padding: 10px;
    font-weight: bold;
    text-align: center;
}
.workspace .software-name h4 {
    font-size: 18px;
    color: #FFF;
    margin: 0;
padding: 10px;
    font-weight: bold;
    text-align: center;
}

.software-device {
    width: auto;
    flex: none;
    top: 1px;
    position: relative;
    color: #999;
    font-size: 12px;
    line-height: normal;
}
.software-device img{
    height: 16px;
    margin-bottom: 4px;
}
.software-package-price {
    border-top: 1px solid #CCC;
    padding: 10px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    line-height: 1;
    font-size: 12px;
    color: #999;
    position: absolute;
    bottom: 0;
    width: 100%;
}
.container.software-box.office365 .software-package-price {
    border-top: 1px solid #CCC;
    padding: 10px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    line-height: 1;
    font-size: 12px;
    color: #999;
    position: relative;
    bottom: 0;
    width: 100%;
}
.container.software-box.workspace .software-package-price {
    border-top: 1px solid #CCC;
    padding: 10px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    line-height: 1;
    font-size: 12px;
    color: #999;
    position: relative;
    bottom: 0;
    width: 100%;
}
.software-package-price h4{
    font-size: 16px;
    color: #000;
    margin: 0;
}
.btn_select_product:link, .btn_select_product:visited {
    width: 100px;
    font-size: 16px;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    background-color: #d52b1c;
    color: #FFF;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.container.feature-box {
}
/* .container.feature-box:before{
    content: "";
    background-image: url(../img/gradient_line.png);
    background-repeat: repeat-x;
    background-size: cover;
    width: 100%;
    height: 3px;
    top: 0;
    left: 0;
    position: absolute;
}
.container.feature-box:after{
    content: "";
    background-image: url(../img/gradient_line.png);
    background-repeat: repeat-x;
    background-size: cover;
    width: 100%;
    height: 3px;
    bottom: 0;
    left: 0;
    position: absolute;
    transform: rotate(180deg);
} */
.container.softwarelistbox .row,
.container.feature-box .row,
.container.pros .row {
    max-width: 1200px;
    margin: 0 -15px;
}
.softwarelistbox .main-header,
.software-box.office365 .main-header,
.feature-box .main-header,
.recommend-box .main-header,
.qa-box .main-header,.pros .main-header{
    text-align: center;
}
.softwarelistbox hr,
.software-box.office365 hr,
.feature-box .main-header hr,
.recommend-box .main-header hr,.pros hr{
    float: none;
}
ul.featrue-list{
    list-style: none;
    padding: 0;
    margin: 0 -20px -40px -20px;
    display: flex;
    flex-wrap: wrap;
}
.featrue-list li{
    width: 25%;
    margin: 40px 0;
    padding: 0 20px;
}

.container.feature-box.office365 .featrue-list li{
    width: 33.33%;
    margin: 40px 0;
}

.featrue-list li img{
    max-height: 60px;
    margin-bottom: 3em;
}
.feature-content{
    line-height: 24px;
}

.container.inspire-box .row{
    margin: 0 auto;
    max-width: 1200px;
}
.inspire-box .main-header{
    text-align: center;
}
.inspire-box .main-header hr{
    float: none;
}
ul.inspire-list{
    list-style: none;
    padding: 0;
    margin: 0 -20px;
    display: flex;
    flex-wrap: wrap;
}
.inspire-list li{
    width: 33.33%;
    margin: 40px 0 0 0;
    padding: 0 20px;
    text-align: left;
}
.inspire-img-box{
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
    margin: 0 0 40px 0;
    width: 100%;
    padding-top: 56.25%;
}
.inspire-img-boxscale{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
}
.inspire-img-box img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    left: 0;
    right: 0;
    image-rendering: auto;
}
ul.recommend-list {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 20px -10px 0 -10px;
    padding: 0;
}
.recommend-list li {
    width: 33.33%;
    padding: 20px 10px 0 10px;
    display: flex;
}
.recommend-package-box-row {
    border: 1px solid #CCC;
    position: relative;
    padding-bottom: 70px;
}
.recommend-package-img{
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
    margin: 0;
    width: 100%;
    padding-top: 34.22%;
}
.recommend-package-img-scale{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
}
.recommend-package-img img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    top: 0;
    left: 0;
    right: 0;
    image-rendering: auto;
}
.recommend-package-detail {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0;
    padding: 10px;
    text-align: left;
    line-height: 24px;
}
.recommend-title {
    display: flex;
    flex-direction: row;
    margin: 10px -10px 20px -10px;
    width: auto;
    justify-content: space-between;
    align-items: center;
    flex: auto;
}
.recommend-product,.recommend-name,.recommend-device{
    width: auto;
    flex: auto;
    padding: 0 10px;
}
.recommend-product {
    width: auto;
    flex: none;
}
.recommend-product img{
    max-height: 50px;
}
.recommend-name{
    font-size: 12px;
    color: #999;
    line-height: 1;
}
.recommend-name h4{
    font-size: 16px;
    color: #000;
    margin: 0;
}
.recommend-device{
    width: auto;
    flex:none;
}
.recommend-package-price {
    border-top: 1px solid #CCC;
    padding: 10px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    line-height: 1;
    font-size: 12px;
    color: #999;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: left;
}
.recommend-package-price h4{
    font-size: 16px;
    color: #000;
    margin: 0;
}
.software-package-price .peruser,
.recommend-package-price .peruser {
    font-size: 14px;
}
ul.faq_list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.faq_list li {
    border-bottom: 1px solid #e0e0e0;
    margin: 0;
    padding: 0;
    position: relative;
}
.faq_list li h3{
font-size: 14px;
font-weight: bold;
margin: 0;
}
.faq_list li:first-child {
    padding-top: 0;
}
.faq_list li p {
    margin: 0;
    position: relative;
}
.faq_list li ul li{
border: 0;
}
.btn_toggle {
    font-weight: bold;
    line-height: 26px;
    padding: 15px 30px 15px 50px;
}
.btn_toggle:hover{
    cursor: pointer;
}
.btn_toggle img {
    position: absolute;
    left: 0;
    width: 22px;
    top: 12px;
}
.btn_toggle::before {
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    height: 10px;
    position: absolute;
    right: 0;
    top: 25px;
    width: 10px;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNi4zLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojMzUzNTM1O30NCjwvc3R5bGU+DQo8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjAsMTY1LjIgNzQuMyw5MC44IDI1NiwyNzIuNiA0MzcuNyw5MC44IDUxMiwxNjUuMiAyNTYsNDIxLjIgIi8+DQo8L3N2Zz4NCg==);
}
.btn_toggle.active::before {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNi4zLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojMzUzNTM1O30NCjwvc3R5bGU+DQo8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjAsMzQ2LjggNzQuMyw0MjEuMiAyNTYsMjM5LjQgNDM3LjcsNDIxLjIgNTEyLDM0Ni44IDI1Niw5MC44ICIvPg0KPC9zdmc+DQo=);
}
.faq_list li .hidecontent {
    display: none;
    margin-left: 50px;
    margin-bottom: 20px;
    opacity: 1;
    position: relative;
    padding-top: 0;
}
.faq_list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.container.inspire-box {
    padding-bottom: 80px;
    margin-bottom: 0;
    margin-top: 80px;
}
.container.recommend-box {
    padding-bottom: 80px;
    border-bottom: 1px solid #ccc;
}
.container.qa-box {
    width: auto;
    margin: 0 0 80px 0;
    max-width: none;
}
.container.qa-box .row {
    margin: 0 auto;
    max-width: 1170px;
}
.container.qa-box .col-md-12{
    padding: 0;
width: 100%;
}
.container.qa-box .main-header{
    text-align: left;
}
.software-container .main-header h2 {
    font-size: 24px;
    margin-top: 0;
}
.software-container .container:first-of-type .main-header h2 {
    font-size: 24px;
    margin-top: 20px;
}
.container.software-box h3{
    font-size: 18px;
    margin-bottom: 5px;
    margin-top: 0;
    font-weight: 600;
}
.product_plan{
    position: fixed;
    display: block;
    width: 100vw;
    height: 100vh;
    z-index: 9999999999;
}
.product_plan_overlay{
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.85);
    position: fixed;
    display: block;
    top: 0;
    left: 0;
}
.product_plan_close{
    width: 25px;
    height: 25px;
    position: absolute;
    z-index: 1;
    right: 10px;
    top: 10px;
    background-color: #999;
    border-radius: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNi4yLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA2NCA2NCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjQgNjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0zMiwzNS43TDIwLjQsNDcuM2wtMy43LTMuN0wyOC4zLDMyTDE2LjcsMjAuNGwzLjctMy43TDMyLDI4LjNsMTEuNi0xMS42bDMuNywzLjdMMzUuNywzMmwxMS42LDExLjZsLTMuNywzLjcNCgkJTDMyLDM1Ljd6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==)
}
.product_plan_close:hover{
    cursor: pointer;
}
.product_plan_box {
    width: 95vw;
    height: auto;
    max-width: 1170px;
    max-height: 95vh;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    display: flex;
    background-color: #FFF;
    margin: 0 auto;
        padding: 40px 40px 30px 40px;
    overflow-y: auto;
}
.product_plan_package{
    display: block;
    width: 100%;
}

.product_plan_box_row{
    display: flex;
    margin: 0 -40px 20px -40px;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
}
.product_plan_box_row:first-child {
    margin: 0 0 40px 0;
}
.product_plan_box_row:last-child{
    margin: 0 -40px;
}

.product_plan_box_col {
    padding: 0 40px;
    position: relative;
    width: auto;
    flex: auto;
}
.product_plan_box_row:first-child .product_plan_box_col{
    padding: 0;
}
.product_plan_name {
    font-size: 14px;
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: row;
}
.product_plan_name > div{
    width: auto;
    flex:auto;
}
.product_plan_name > div:first-child {
    width: auto;
    flex: none;
    padding-right: 30px;
}
.product_plan_name h4{
    font-size: 18px;
    font-weight: bold;
    margin: 0;
}
.product_plan_name img{
    position: relative;
    left: 0;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100px;
}
.product_plan_detail{
    width: 60%;
}
.product_plan_price{
    width: 40%;
}
.product_plan_price{
    border-left: 1px solid #CCC;
}
.product_plan_detail img{
    max-width: 100%;
}
.product_plan_detail ul {
    padding: 0;
    margin: 0 0 10px 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    list-style: none;
    line-height: 24px;
}
.product_plan_detail li {
    width: 100%;
    margin: 0 0 10px 0;
    padding: 0 20px;
    position: relative;
}
.product_plan_detail li::before {
    font-family: 'Glyphicons Halflings';
    content: "\e013";
    position: absolute;
    left: 0;
    font-size: 11px;
    color: #178e00;
    top: 0;
}
.product_plan_detail li.title {
    font-weight: bold;
    padding: 0;
}
.product_plan_detail li.title::before{
    content: '';
}
ul.singlecol li {
    width: 100%;
    padding: 0 0 0 20px;
}

ul.twocol li {
    width: 33.33%;
    padding: 0 20px;
}
.plan_row {
    display: flex;
}
.plan_select {
    padding-left: 30px;
    position: relative;
    margin: 10px 0;
    line-height: 24px;
    flex-direction: column;
}
.plan_select label{
    font-weight: normal;
}
.plan_select input {
    position: absolute;
    left: 0;
    margin: 0;
    top:5px;
}
.plan_row.select_amount {
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #CCC;
}
.plan_amount {
    flex: none;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
}
.inp_amount_title {
    margin-right: 10px;
    display: flex;
    align-items: center;
}
.plan_amount .inp_amount {
    border: 1px solid #CCC;
    display: flex;
    align-items: center;
}
.plan_amount select {
    border: 1px solid #e1e1e1;
    width: 100%;
    margin: 0 10px;
    min-width: 80px;
}
.buttonGrayMini, a.buttonGrayMini {
    font-size: 20px;
    padding: 0 5px;
    text-decoration: none!important;
    text-align: center;
    width: 36px;
    height: 100%;
    font-weight: normal;
    color: #FFF!important;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#removeOrder{
    border-right: 1px solid #CCC;
}
#addOrder{
    border-left: 1px solid #CCC;
}
span.AmountCount {
    padding: 0;
    margin: 0;
    font-size: 16px;
    width: 50px;
    display: flex;
    text-align: center;
    justify-content: center;
    position: relative;
    top: 1px;
}
.cart-box .buttonGrayMini, a.buttonGrayMini {
    color: #999!important;
}
.secure_transaction{
    justify-content: flex-end;
    align-items: baseline;
    color: #999;
    font-size: 12px;
}

.btn_plan_select:link, .btn_plan_select:visited {
    background-color: #cd0803;
    padding: 5px 10px;
    text-align: center;
    border-radius: 5px;
    color: #FFF;
    width: 120px;
    display: block;
}
.btn_plan_select:hover{
    text-decoration: none;
}
.txt-vat{
    font-size: 12px;
    color: #999;
}
.txt-discount{
    display: none;
    color: #cd0803;
    text-decoration: line-through;
}
.lockbody{
    overflow: hidden;
}
ul.plan_comment {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 20px 0 0 0;
    margin: 15px 0 0 0;
    border-top: 1px solid #ccc;
}
.plan_comment li {
    padding: 0 0 0 30px;
    margin: 5px 0;
    position: relative;
    line-height: 24px;
}
.plan_comment li::before {
    font-family: 'Glyphicons Halflings';
    content: "\e013";
    position: absolute;
    left: 0;
    font-size: 11px;
    color: #178e00;
    top: 0;
}
.software-summary{
    border: 1px solid #CCC;
    padding: 10px;
}
.summary-title {
    border-bottom: 3px solid #cd0803;
    font-weight: bold;
    padding-bottom: 10px;
}
.summary-subject,.summary-total{
    border-bottom: 1px dashed #CCC;
}
.summary-total:last-child{
    border-bottom: 0;
}
.summary-total:last-child .total-row{
    margin-bottom: 0;
}
.summary-total:last-child .total-row .total-col.price{
    font-weight: bold;
}
.softwareform input, .softwareform select, .softwareform textarea {
    border: 1px solid #CCC;
    border-radius: 0;
    width: 100%;
    height: 100%;
    padding: 10px;
    resize: none;
    font-size: 16px;
    color: #000;
}
.softwareform input[type="checkbox"],.softwareform input[type="radio"] {
    border: 1px solid #CCC;
    border-radius: 0;
    width: 16px;
    height: 16px;
    padding: 5px;
    position: relative;
    top: 2px;
    margin-right: 7px;
}

.softwareform input[type="checkbox"]:disabled,.softwareform input[type="radio"]:disabled{
  background: #386cfd;
}

.software-form{
    border: 1px solid #CCC;
}
.software-form-row {
    display: flex;
    flex-direction: row;
    margin: 0 -10px;
    flex-wrap: wrap;
    padding: 0 20px;
}
[class^="software-form-col"] {
    padding: 0 10px;
    margin: 15px 0;
    display: flex;
    flex-direction: column;
}
.software-form-col1{
    width: 100%;
}
.software-form-col1:last-child{
    margin-top: 0;
}
.software-form-col1 .title {
    font-size: 16px;
    font-weight: bold;
    border-top: 1px dashed #CCC;
    padding-top: 20px;
}
.software-form-col1:first-of-type .title {
    padding: 0;
    border-top: 0;
    position: relative;
}
.software-form-col2{
    width: 50%;
}
.software-form-col3{
    width: 33.33%;
}
.subject-row,.total-row {
    margin: 10px 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.subject-col.price,.total-col.price {
    width: 100px;
    flex: none;
    color: #000;
    font-size: 14px;
    font-weight: normal;
    text-align: right;
}
.total-col.price.free{
    color: #007236;    
}
.inp_comment {
    color: #999;
    font-size: 12px;
    line-height: 16px;
    margin-top: 5px;
}
.pdpa-form {
    border: 1px solid #ebccd1;
    margin: 40px 0;
}
.pdpa-form-title {
    background-color: #f1dede;
    color: #a54343;
    padding: 10px;
    display: flex;
    line-height: 24px;
}
.pdpa-form-title img {
    width: auto;
    height: 16px;
    display: inline-block;
    margin: 0 10px 0 0;
    position: relative;
    top: 3px;
}
.pdpa-form-content {
    padding: 10px 10px 10px 40px;
    position: relative;
}
.softwareform button {
    border: 0;
    color: #FFF;
    text-align: center;
    background-color: #b80003;
    display: table;
    margin: 0 auto;
    padding: 5px 40px;
    border-radius: 5px;
    min-width: 150px;
}
.software-container{/*อัพเดท01082565*/
 margin-top: 0;
}
.container.softwareform {
    margin: 20px auto;
}

.payment-bangkok-transfer {
    display: flex;
    margin: 0 -10px;
    flex-direction: row;
    flex-wrap: wrap;
    padding-left: 25px;
}
.payment-col {
    width: 100%;
    padding: 10px;
}
.payment-bangkok-transfer img{
    width: auto;
    height: auto;
}
.how-to-pay-bank {
    border: 1px solid #CCC;
    display: flex;
}
.bank-logo, .bank-content { /*อัพเดท21072565*/
    padding: 10px;
    width: auto;
    flex: auto;
}
.bank-logo{
    width: 70px;
    flex: none;
}

.bank-content h3{
    margin: 0;
    font-size: 16px;
    font-weight: bold;
}
.bank-content p{
    line-height: 24px;
    margin: 0;
}
.bank-qr {/*อัพเดท21072565*/
    width: 120px;
    flex: none;
    padding: 10px;
    text-align: center;
}
.bank-qr-zoom{/*อัพเดท21072565*/
position: fixed;
width: 100vw;
height: 100vh;
left: 0;
bottom: 0;
z-index: 2147483649;
}
.bank-qr-zoom:before{/*อัพเดท21072565*/
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.85);
}
.bank-qr-zoom-box{/*อัพเดท21072565*/
    width: 350px;
    max-width: 95vw;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
}
.bank-qr-zoom-box img {/*อัพเดท21072565*/
    max-width: 100%;
}
.bank-qr-zoom-close{/*อัพเดท21072565*/
    position: absolute;
    right: 5px;
    top: 5px;
}
.bank-qr-zoom-close:hover{/*อัพเดท21072565*/
cursor: pointer;
}
.bank-qr-zoom-close::before{/*อัพเดท21072565*/
content: "";
display: block;
width: 30px;
height: 30px;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNi4yLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA2NCA2NCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjQgNjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0zMiwzNS43TDIwLjQsNDcuM2wtMy43LTMuN0wyOC4zLDMyTDE2LjcsMjAuNGwzLjctMy43TDMyLDI4LjNsMTEuNi0xMS42bDMuNywzLjdMMzUuNywzMmwxMS42LDExLjZsLTMuNywzLjcNCgkJTDMyLDM1Ljd6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==)
}
.credit-list{
    margin: 10px 0;
    padding-left: 25px;
}
.credit-list ul{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}
.credit-list li{
    flex: none;
    width: auto;
}
.bank-content label {
    display: inline-block;
    margin: 0;
}
.bank-content p {
    display: block;
    margin: 5px 0 0 0;
    line-height: 18px;
}
.software-form-row.btn-pay{
    margin-top: 40px;
    justify-content: center;
}
.software-form-row.btn-pay .software-form-col1{
    width: auto;
    flex-direction: row;
}
.software-form-row.btn-pay button{
    margin: 0 10px;
}
button.btn-prev{
    background-color: #999;
}
.payment-inp {
    padding-left: 30px;
    position: relative;
    margin: 5px 0;
}
.payment-inp input{
    position: absolute!important;
    left: 0;
}
.pdpa-form-content input {
    position: absolute!important;
    left: 10px;
    top: 13px!important;
}
.redcomment{
    color: #cd0803;
    font-size: 12px;
    position: absolute;
    top: 5px;
    right: 0;
    font-weight: normal;
}
.recaptcha{
    margin-top: 40px;
}
#html_element {
    width: auto;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}
.my-login-box{/*อัพเดท21072565*/
    background-color: #F0F0F0;
    border: 1px solid #CCC;
}
.login-box-row{/*อัพเดท20072565*/
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}
.login-box-subrow{/*อัพเดท20072565*/
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
    justify-content: space-between;
}
.login-box-row .title{/*อัพเดท20072565*/
    font-weight: bold;
    width: 100%;
    align-items: center;
    display: flex;
    justify-content: space-between;
}
.login-box-col1{/*อัพเดท20072565*/
width: 100%;
padding: 0 10px;
}
.login-box-col2{/*อัพเดท20072565*/
    width: 50%;
    flex: auto;
    padding: 0 10px;
}
.my-login-box input, .my-login-box select, .my-login-box textarea {/*อัพเดท20072565*/
    border: 1px solid #CCC;
    border-radius: 0;
    width: 100%;
    height: auto;
    padding: 0px 10px;
    resize: none;
    font-size: 16px;
    color: #000;
}
.btn-login{/*อัพเดท20072565*/
margin: 20px 0;
}
.enter_login {/*อัพเดท20072565*/
    background-color: #b80003;
    text-align: center;
    color: #FFF;
    padding: 3px 20px;
    border-radius: 5px;
    display: inline-block;
    margin-left: 5px;
    float: right;
}
.enter_login:link,.enter_login:visited,.enter_login:hover{/*อัพเดท20072565*/
text-decoration: none;
color: #FFF;
font-weight: normal;
}
.userlogin{/*อัพเดท20072565*/
display: none;
width: 100%;
}
.login-box-subrow .login-box-col2{/*อัพเดท20072565*/
align-self: flex-end;
}
.login-box-subrow .login-box-col2.cmd-login{/*อัพเดท20072565*/
    flex: none;
    width: auto;
}
.login-box-subrow .btn-login{/*อัพเดท20072565*/
    margin: 20px 0 0 0;
    display: flex;
    justify-content: center;
}
.login-box-subrow .btn-login button{/*อัพเดท20072565*/
    padding: 2px 10px;
    margin: 0 5px;
    min-width: auto;
    display: block;
    font-size: 14px;
    font-weight: normal;
}
.close_login {/*อัพเดท20072565*/
    width: 12px;
    height: 12px;
    display: none;
    float: right;
    right: 10px;
    position: relative;
}
.close_login::before {/*อัพเดท20072565*/
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNi4zLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA2NCA2NCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjQgNjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiM1NTU1NTU7fQ0KPC9zdHlsZT4NCjxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iNjQsNS41IDU4LjUsMCAzMiwyNi41IDUuNSwwIDAsNS41IDI2LjUsMzIgMCw1OC41IDUuNSw2NCAzMiwzNy41IDU4LjUsNjQgNjQsNTguNSAzNy41LDMyICIvPg0KPC9zdmc+DQo=);
}

.login-box-subrow .btn-login a.forget_login {/*อัพเดท20072565*/
    background-color: #999;
    color: #FFF;
    display: flex;
    align-items: baseline;
    padding: 3px 10px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
    font-weight: normal;
}
.thank-box { /*อัทเดท26072565*/
    padding: 40px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 40px;
    font-size: 16px;
    text-align: center;
    word-break: break-word;
    border: 1px solid #CCC;
}
.buyorder {
    padding: 20px;
    margin: 40px auto 80px auto;
    background-color: #313131;
    text-align: center;
    border-radius: 10px;
    font-size: 18px;
    color: #FFF;
}
.invoice {
    background-color: #f1dede;
    border: 1px solid #ebccd1;
    padding: 30px 20px;
    margin: 20px 0;
}

.container.software-box.office365 .software-product {
    padding: 0;
    width: 100%;
    /* margin-bottom: 70px; */
}
.container.software-box.office365 .product-list {
width: 100%;
}
.container.software-box.office365 .product-list ul{
   list-style: none; 
    display: flex;
    padding: 0;
    margin: 0;
    flex-direction: column;
}
.container.software-box.office365 .product-list li{
    display: flex;
    width: 100%;
    padding: 0 0 0 20px;
    margin: 5px 0;
position: relative;
}
.container.software-box.office365 .product-list li::before {
    font-family: 'Glyphicons Halflings';
    content: "\e013";
    position: absolute;
    left: 0;
    font-size: 11px;
    color: #178e00;
    top: 0;
}

.container.software-box.office365 .software-product li {
    display: flex;
    width: 20%;
    padding: 10px 5px;
    margin: 0;
    flex-direction: column;
    align-items: center;
    font-size: 10px;
    word-break: break-word;
    line-height: normal;
    text-align: center;
}
.container.software-box.office365 .software-product dt {
    width: 100%;
    padding: 0 5px;
    justify-content: center;
    text-align: center;
    margin-bottom: 10px;
    font-weight: normal;
}
.container.software-box.office365 .software-product li img {
    max-width: 100%;
    max-height: 24px;
    display: block;
    margin-bottom: 10px;
}
.container.software-box.workspace .software-product {
    padding: 0;
    width: 100%;
}
.container.software-box.workspace .product-list {
width: 100%;
}
.container.software-box.workspace .product-list ul{
   list-style: none; 
    display: flex;
    padding: 0;
    margin: 0;
    flex-direction: column;
}
.container.software-box.workspace .product-list li{
    display: flex;
    width: 100%;
    padding: 0 0 0 30px;
    margin: 5px 0;
position: relative;
}
.container.software-box.workspace .product-list li::before {
    font-family: 'Glyphicons Halflings';
    content: "\e013";
    position: absolute;
    left: 0;
    font-size: 11px;
    color: #178e00;
    top: 0;
}

.container.software-box.workspace .software-product ul {
    list-style: none;
    display: flex;
    padding: 20px 0 10px 0;
    margin: 0px -5px;
    flex-direction: row;
    flex-wrap: wrap;
}
.container.software-box.workspace .software-product li {
    display: flex;
    width: 25%;
    padding: 10px 5px;
    margin: 0;
    flex-direction: column;
    align-items: center;
    font-size: 10px;
    word-break: break-word;
    line-height: normal;
    text-align: center;
}
.container.software-box.workspace .software-product dt {
    width: 100%;
    padding: 0 5px;
    justify-content: center;
    text-align: center;
    margin-bottom: 10px;
    font-weight: normal;
}
.container.software-box.workspace .software-product li img {
    max-width: 100%;
    max-height: 24px;
    display: block;
margin-bottom: 10px;
}
.btn-quotation {
    display: table;
    background-color: #ec5f00;
    border-radius: 5px;
    color: #FFF;
    justify-content: center;
    align-items: baseline;
    position: relative;
    z-index: 99;
    width: auto;
    height: auto;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 5px 20px;
    font-family: kanit;
    text-decoration: none;
    margin-top: 25px;
}
.btn-quotation:link,.btn-quotation:visited,.btn-quotation:hover{
color: #FFF;
text-decoration: none;
}
.vdo-box{
width: 100%;
position: relative;
padding-top: 56.25%;
margin: 20px 0;
}
.vdo-box-scale{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.vdo-box iframe{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.container.title .row {
    margin: 0 -15px 40px -15px;
    align-items: center;
    justify-content: center;
}
.container.title .row:last-child{
margin-bottom: 0;
}
.container.title .row.vdobox {
    flex-direction: row-reverse;
}
.container.pros {
    margin: 80px 0;
    background-color: #f9f9f9;
    padding: 80px 20px;
    width: auto;
    display: flex;
justify-content: center;
}

.row-detail{
display: flex;
flex-direction: column;
}
.software-package-box{
margin: 0;
}
.software-list ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 40px -20px -20px -20px;
    padding: 0;
    list-style-type: none;
}
.software-list li{
width: 25%;
padding: 0 20px;
margin: 20px 0;
}

.software-list-img{
margin-bottom: 40px;
}
.software-list-img img{
width: auto;
max-width: 100%;
height: 50px;
max-height: 100%;
}
.software-list-content h3 {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}
.container.softwarelistbox {
    width: auto;
    max-width: none;
    padding: 80px 20px;
    position: relative;
    background-image: url(../img/feature_bg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 80px 0;
    justify-content: center;
    display: flex;
}
.feature-content h3 {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}
.text-banner {
    color: #000;
}
.quatation-form{
width: 100%;
max-width: 767px;
margin: 0 auto 40px auto;
}
.quatation-form-row{
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin: 0 -10px;
padding: 0;
}
.quatation-form-row input, .quatation-form-row textarea, .quatation-form-row select {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    line-height: 1;
    border: 1px solid #CCC;
border-radius: 5px;
    background-color: #FFF;
}
.quatation-form-col1 label, .quatation-form-col2 label {
    display: block;
    line-height: normal;
    margin-bottom: 10px;
}
.quatation-form-col1, .quatation-form-col2 {
    padding: 0 10px;
    margin: 0 0 20px 0;
    position: relative;
}

.quatation-form-col1{
width: 100%;
}
.quatation-form-col1.policy{
padding-left: 40px;
}
.quatation-form-row input[type=checkbox] {
    width: auto;
    position: absolute;
    top: 2px;
    left: 10px;
    height: 16px;
    width: 16px;
}
.quatation-form-col2{
width: 50%;
}
.other-option{
margin-top: 10px;
}

.quatation-form-row select:required:invalid {
  color: gray;
}
.quatation-form-row option[value=""][disabled] {
    display: none;
    min-height: 400px;
    padding: 10px 0;
    display: flex;
    margin: 10px 0;
}
.quatation-form-row option[value=""][hidden] {
  display: none;
}
.quatation-form-row option:first-child{
    display: none;
    color: #CCC;
}

.quatation-form-row option {
    color: #000;
    background-color: #FFF;
}

.quatation-form-col1.btnsubmit{
display: flex;
justify-content: center;
margin-top: 40px;
}
.quatation-form-col1.btnsubmit button{
background-color: #c03a2b;
border: 0;
border-radius: 5px;
color: #FFF;
padding: 3px 20px;
}
.quatation-form-row textarea {
  resize: none;
}

@media screen and (max-width:1024px){
/* body::before{
    content: "";
    background-color: rgba(255,0,0,0.3);
    width: 20px;
    padding: 0;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
}
body::after{
    content: "";
    background-color: rgba(255,255,0,0.3);
    width: 20px;
    height: 100vh;
    position: fixed;
    margin: 0 auto;
    right: 0;
    top: 0;
    z-index: 1;
} */
.container.softwarelistbox .row, .container.feature-box .row, .container.pros .row {
    max-width: 1200px;
    margin: 20px 0;
}
.container.pros {
    margin: 40px 0;
    padding: 0 20px;
}
.container .row .col-md-12 {
    padding: 0;
    width: 100%;
    float: none;
}
.container.software-box.office365 .row .col-md-12 {
    padding: 0 15px;
}
ul.inspire-list {
    list-style: none;
    padding: 0;
    margin: 0 -10px;
    display: flex;
    flex-wrap: wrap;
}
.inspire-list li {
    width: 33.33%;
    margin: 40px 0 0 0;
    padding: 0 10px;
    text-align: left;
}

.container.software-box.office365 .product-list dt {
    width: 100%;
    margin-bottom: 10px;
}
.container.software-box.office365 .product-list li {
    width: 100%;
    padding: 0 0 0 30px;
}
.pros-col {
    width: 20%;
}
.container.title .row {
    margin: 0 0 40px 0;
    align-items: center;
    justify-content: center;
}
}

@media screen and (max-width:768px){
.container.software-box .row{
    margin: 0;
}

.container.software-box.office365 .row{
    margin: 0 -15px;
}

.container.qa-box {
    margin-bottom: 0;
}
.container.feature-box {
    padding: 40px 0;
}
.container.software-box .col-md-2,.container.software-box .col-md-10{
    padding: 0;
    margin: 40px 0;
}
.container.software-box .col-md-12{
    padding: 0;
}
.container.software-box .col-md-2{
    text-align: center;
}

ul.inspire-list {
    margin: -20px 0;
    display: flex;
    padding: 0;
}
.inspire-list li {
    width: auto;
    margin: 0 -20px;
    padding: 20px 0;
    text-align: left;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.inspire-img, .inspire-content {
    width: auto;
    flex: none;
    display: flex;
    flex-direction: column;
}
.inspire-img{
    width: 30%;
    padding: 0 20px;
}
.inspire-img-box {
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
    margin: 0;
    width: 100%;
    padding-top: 56.25%;
}
.inspire-img-boxscale {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
}
.inspire-content{
    width: 70%;
    padding: 0 20px;
}
.container.recommend-box {
    padding: 0 0 40px 0;
}
.container.recommend-box .row{
    margin: 0;
}
.container.recommend-box .col-md-12{
    padding: 0;
}
.container.recommend-box .main-header{
    padding: 0 20px;
}
ul.recommend-list {
    display: flex;
    overflow: auto;
    flex: none;
    width: 100%;
    flex-flow: row nowrap;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    -webkit-appearance: none;
    list-style: none;
    flex-direction: row;
    margin: 0;
    padding: 0;
}
.recommend-list li{
    display: flex;
    padding: 0 0 0 20px;
    margin: 0;
    position: relative;
    scroll-snap-align: start;
    flex: none;
    color: #222;
    align-content: flex-start;
    width: calc((100% - 20px) / 1.5);
    text-align: center;
}
.recommend-list li:last-child{
    margin-right: 20px;
}
.container.inspire-box{
    padding-bottom: 40px;
    margin-bottom: 0;
}
.container.recommend-box {
    padding-bottom: 40px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 40px;
}
.feature-content h3 {
    text-align: left;
    font-size: 16px;
    font-weight: bold;
margin: 0;
padding: 0;
}
ul.featrue-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}
.featrue-list li {
    display: flex;
    width: auto;
    margin: 10px -10px;
    padding: 0;
    text-align: left;
}
.featrue-list li img {
    max-height: 50px;
    margin-bottom: 20px;
}
.software-container{/*อัพเดท26072565*/
 margin-top: 0;
}
.container.softwareform{/*อัพเดท26072565*/
/* border-top: 1px solid #CCC;
 margin-top: 20px;
padding-top: 20px; */
}
.container.softwareform .row {
    flex-direction: column-reverse;
    margin: 0;
    display: flex;
}
.container.softwareform .row [class^="col-"]{
    margin: 0 0 20px 0;
    padding: 0;
}
[class^="software-form-col"] {
    padding: 0 20px;
    margin: 15px 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.payment-bangkok-transfer {
    display: flex;
    margin: 10px 0;
    flex-direction: row;
    flex-wrap: wrap;
    padding-left: 0;
}
.payment-col {
    width: 100%;
    padding: 0;
    margin: 10px 0;
}
.software-form-row {
    display: flex;
    flex-direction: row;
    margin: 0;
    flex-wrap: wrap;
    padding: 0;
}
.product_plan_box_col {
    padding: 0;
    position: relative;
    width: auto;
    flex: auto;
}
.product_plan_detail {
    width: auto;
    margin-bottom: 20px;
}
.product_plan_price {
    width: auto;
    border-left: 0;
    margin: 0 0 40px 0;
}
.product_plan_box_row:last-child {
    margin: 0;
    flex-direction: column-reverse;
}

ul.twocol li {
    width: 50%;
    padding: 0 20px;
}
.container.title .row {
    margin: 0;
    align-items: center;
}
.container.title .row [class^="col"] {
    padding: 0;
    margin: 15px 0;
    width: 100%;
}

.software-package-box li {
    width: 50%;
    padding: 20px 10px 0 10px;
    display: flex;
}
.software-container .container {
    margin: 0;
    padding: 40px 20px;
}
.container.title .row:last-child {
    margin-bottom: 40px;
}
.software-container .container.title {
    margin-bottom: 0;
    padding: 0 20px;
}
.container.software-box.office365 .product-list ul {
    list-style: none;
    display: flex;
    padding: 0 0 10px 0;
    margin: 0;
    flex-direction: column;
}
.container.feature-box.office365 .featrue-list li {
    width: 100%;
    display: flex;
text-align: left;
padding: 0;
margin: 10px 0;
}
.feature-img{
width: 100px;
flex: none;
padding: 0 10px;
}
.feature-content{
padding: 0 10px;
}
.container.pros {
    margin: 0 auto;
    padding: 40px 20px;
}
.container.pros .row{
margin: 0;
}
.container.pros .col-md-12{
width: 100%;
padding: 0;
}
.container.pros .main-header{
padding: 0 20px;
}
.pros-box{
display: flex;
    overflow: auto;
    flex: none;
    width: 100%;
    flex-flow: row nowrap;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    -webkit-appearance: none;
border: 0;
word-break: break-word;
}
.pros-hcol{
display: none;
}
.pros-col{
display: flex;
    padding: 0 0 0 20px;
    margin: 0 ;
    position: relative;
    scroll-snap-align: start;
    flex: none;
    color: #222;
    align-content: flex-start;
    width: calc((100%) / 1.15);
}
.pros-col:last-child{
margin-right: 20px;
}
.pros-row {
    padding: 10px;
    margin: 0;
    border: 1px solid #CCC;
    border-top: 0;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
justify-content: space-between;
}
.pros-row:last-child {
    border-bottom: 1px solid #CCC;
}
.pros-col label {
    display: block;
    margin: 0;
    padding: 0 10px;
    font-weight: normal;
    flex: none;
    text-align: left;
    width: 80%;
}
.pros-col i{
padding: 0 10px;
}
.header-title label {
    display: block;
    margin: 0;
    font-weight: bold;
    text-align: center;
    width: 100%;
    padding: 0;
}
.row-detail {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    color: #999;
}
.software-list li {
    width: 33.33%;
    padding: 0 20px;
    margin: 20px 0;
}
.container.quotation .row{
    margin: 0;
}
.quatation-form-row {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin: 0;
    padding: 0;
}
.quatation-form-col1,
.quatation-form-col2 {
    width: 100%;
    padding: 0;
}

.container.software-box.office365 .product-list li {
    width: 100%;
    padding: 0 0 0 30px;
}

.software-container .container.software-box {
    margin-top: 0;
    margin-bottom: 30px;
}
.container.title .row:last-child {
    margin-bottom: 0;
}
.software-container img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 300px;
    margin: 0 auto;
    display: block;
}
.software-list-img img {
    width: auto;
    max-width: 100%;
    height: 50px;
    max-height: 100%;
}
.btn_toggle img {
    position: absolute;
    left: 0;
    width: 22px;
    top: 12px;
}
}

@media screen and (max-width:767px) and (orientation:portrait){
.software-container .container:first-of-type .main-header h2 {
    font-size: 18px;
    margin-top: 20px;
}
.software-container .row{
    margin: -20px 0;
}
.software-container [class^="col-md"]{
    padding: 20px 0;
}
.software-container h2, .software-container h3 {
    font-size: 16px;
    margin-top: 10px;
    font-weight: bold;
}

ul.software-package-list,
.package-title {
    display: none;
}

.software-container .container.software-box {
    margin-bottom: 40px;
    padding: 0;
}
.software-container .container.software-box.office365 {
    padding: 0 20px;
}
.software-package-list li a:link, .software-package-list li a:visited {
    color: #000;
    text-decoration: none;
    position: relative;
}

.container.feature-box.office365 .featrue-list li {
    width: auto;
}

.featrue-list li img {
    max-height: 50px;
    margin-bottom: 0;
}

.container.feature-box {
    padding: 40px 20px;
}
ul.featrue-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
}
ul.inspire-list {
    margin: -40px 0;
    display: block;
    padding: 0;
}
.inspire-list li {
    width: auto;
    margin: 40px 0;
    padding: 0;
    text-align: left;
    display: block;
    flex-direction: row;
    align-items: center;
}
.inspire-img, .inspire-content {
    width: auto;
    display: block;
    padding: 0;
}
.inspire-img{
    margin-bottom: 20px;
}
.inspire-img-box {
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
    margin: 0;
    width: 100%;
    padding-top: 56.25%;
}
.recommend-list li {
    width: calc((100% - 20px) / 1.15);
}

.container.software-box.office365 .row {
    margin: 0;
}
.container.software-box.office365 .row .col-md-12 {
    padding: 0;
}
.container.software-box.office365 .software-package-box {
    padding: 0;
    margin: 0 0 20px 0;
}
.container.software-box.office365 .software-package-box ul{
    list-style: none;
    display: block;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

.container.software-box.office365 .product-list li {
    margin: 5px 0;
    padding-left: 30px;
}
.container.software-box.office365 .software-product ul {
    display: flex;
    margin: 0 -10px;
    padding: 20px 0;
    flex-direction: row;
    flex-wrap: wrap;
}

.software-package-list li a.active:before {
    content: "";
    border-bottom: 3px solid #cd0803;
    width: 100%;
    height: 2px;
    display: block;
    position: absolute;
    bottom: 0;
    transition: all 0.3s;
    left: 0;
}

.recommend-package-price .peruser {
    display: block;
}
.container.software-box.office365 .software-package-box .package-title{
    text-align: left;
}
.cc-img img{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 150px;
    margin: 0 auto;
    display: block;
}
.product_plan {
    position: fixed;
    display: block;
    width: 100vw;
    height: 100vh;
    transition: all 0.3s;
    top: 0;
    left: 0;
}

.product_plan_box {
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: initial;
    bottom: 0;
    transform: none;
    left: 0;
    right: 0;
    display: flex;
    background-color: #FFF;
    margin: 0 auto;
    padding: 20px;
    overflow-y:auto;
}
.product_plan_name {
    font-size: 14px;
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.product_plan_name > div:first-child {
    width: auto;
    flex: none;
    padding-right: 0;
    margin: 20px auto;
}
.product_plan_box_row {
    display: flex;
    margin: 0;
    flex-direction: column-reverse;
    flex-wrap: wrap;
    position: relative;
}

.bank-content label {
    display: block;
    margin: 0;
}
.software-form-row.btn-pay {
    margin-top: 40px;
    justify-content: space-between;
    overflow: hidden;
}
.software-form-row.btn-pay button {
    width: 49%;
    margin: 0;
}
.software-device {
    top: 3px;
}
.software-device img {
    height: 14px;
}
.redcomment {
    color: #cd0803;
    font-size: 12px;
    position: relative;
    top: 0;
    right: 0;
    font-weight: normal;
}
.pdpa-form {
    border: 1px solid #ebccd1;
    margin: 20px 0;
}
.login-box-row .title {/*อัพเดท20072565*/
    flex-direction: column;
}
.enter_login {/*อัพเดท20072565*/
    margin-left: 0;
    float: none;
    margin: 20px 0 10px 0;
}
.login-box-col2 {/*อัพเดท20072565*/
    width: 100%;
    flex: auto;
    padding: 10px;
}
.login-box-subrow .login-box-col2.cmd-login{/*อัพเดท20072565*/
width: 100%;
}
.how-to-pay-bank {/*อัพเดท21072565*/
    flex-wrap: wrap;
    justify-content: center;
}
.bank-qr{/*อัพเดท21072565*/
order: 2;
width: 50%;
flex: auto;
}
.bank-logo{/*อัพเดท21072565*/
order: 1;
width: 50%;
flex: auto;
}
.bank-content{/*อัพเดท21072565*/
order: 3;
width: 100%;
flex: auto;
}
.payment-bangkok-transfer img {/*อัพเดท21072565*/
    width: auto;
    height: auto;
    max-width: 125px;
}
.software-package-box ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0;
    padding: 0 20px;
}
.software-package-box li {
    width: 100%;
    padding: 10px 0;
    display: flex;
}
.pros-col label {
    width: 75%;
}
.btn-quotation{
margin-top: 15px;
}
.software-list ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: -20px 0;
    padding: 0;
}
.software-list li {
    width: 100%;
    padding: 0;
    text-align: center;
    margin: 40px 0;
}
}

@media screen and (max-width:767px) and (orientation:landscape){
.software-container .container:first-of-type .main-header h2 {
    font-size: 18px;
    margin-top: 20px;
}
.software-container h2, .software-container h3 {
    font-size: 16px;
    margin-top: 10px;
    font-weight: bold;
}
.banner-box {
    padding-top: 26.5%;
}
.cc-img img{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 150px;
    margin: 0 auto;
    display: block;
}
.recommend-list li {
    width: calc((100% - 20px) / 1.25);
}
.product_plan {
    position: fixed;
    display: block;
    width: 100vw;
    height: 100vh;
    z-index: 9999999999;
    transition: all 0.3s;
}
.product_plan_box {
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    max-height: 100%;
    position: fixed;
    top: auto;
    bottom: 0;
    transform: none;
    left: 0;
    right: 0;
    display: flex;
    background-color: #FFF;
    margin: 0 auto;
    padding: 20px;
    overflow-y: auto;
}
.product_plan_box_row {
    display: flex;
    margin: 0;
    flex-direction: column-reverse;
    flex-wrap: wrap;
    position: relative;
}
.product_plan_box_row:last-child {
    margin: 0;
}
.product_plan_box_col {
    padding: 0;
    position: relative;
    width: auto;
    flex: auto;
}
.product_plan_detail {
    width: auto;
}
.product_plan_price {
    width: auto;
    border-left: 0;
    margin: 0 0 40px 0;
}
}