.btn {
    height: 58px;
    width: 255px;
    margin: 10px;
    font-size: 18px;
    line-height: 45px;
    color: #ffffff;
    border: none;
    -webkit-transition: 0.2s ease-in;
    -o-transition: 0.2s ease-in;
    transition: 0.2s ease-in;
}

.btn.btn-green {
    background-color: #00aa40;
}

.btn.btn-green:hover {
    color: #ffffff;
    background-color: #00a03c;
}

.btn.btn-orange {
    background-color: #ee761f;
}

.btn.btn-orange:hover {
    color: #ffffff;
    background-color: #ed7016;
}

.soft-banner {
    background-color: #333333;
}

#overview .nav li:nth-child(1) a {
    color: #00aa40;
}

#download .nav li:nth-child(2) a {
    color: #00aa40;
}

#payment .nav li:nth-child(3) a {
    color: #00aa40;
}

#faq .nav li:nth-child(4) a {
    color: #00aa40;
}

#guide .nav li:nth-child(5) a {
    color: #00aa40;
}

#soft .soft-banner {
    position: relative;
    height: 700px;
    text-align: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: #ffffff;
}

#soft .soft-banner .container {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

#soft .soft-banner .container .soft-title {
    font-size: 62px;
    font-weight: bold;
    margin-bottom: 20px;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 768px) {
    #soft .soft-banner .container .soft-title {
        font-size: 30px;
    }
}

#soft .soft-banner .container .soft-description {
    max-width: 700px;
    margin-bottom: 30px;
    font-size: 22px;
    font-weight: lighter;
}

@media (max-width: 768px) {
    #soft .soft-banner .container .soft-description {
        font-size: 16px;
    }
}

#soft .soft-banner .container .soft-info,
#soft .soft-banner .container .soft-support {
    font-size: 14px;
    font-weight: lighter;
}

#soft .soft-banner .container .soft-info {
    margin-bottom: 20px;
}

#soft .soft-banner .banner-icon {
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    cursor: pointer;
    z-index: 500;
    zoom: 1;
}

#soft .soft-features {
    font-weight: lighter;
}

#soft .soft-features .feature-header {
    padding: 100px 0;
    text-align: center;
}

@media (max-width: 768px) {
    #soft .soft-features .feature-header {
        padding: 60px 0;
    }
}

#soft .soft-features .feature-header img {
    margin: 20px 0 30px;
}

#soft .soft-features .feature-header p {
    max-width: 800px;
    margin: auto;
}

#soft .soft-features .feature-title {
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 30px;
    margin-top: 50px;
}

@media (max-width: 768px) {
    #soft .soft-features .feature-title {
        font-size: 24px;
        margin-top: 0;
    }
}

#soft .soft-features .feature-item .container {
    padding-top: 100px;
    padding-bottom: 100px;
}

@media (max-width: 990px) {
    #soft .soft-features .feature-item .container .img {
        text-align: center;
    }
}

@media (max-width: 768px) {
    #soft .soft-features .feature-item .container {
        padding-top: 10px;
        padding-bottom: 60px;
        text-align: center;
    }

    #soft .soft-features .feature-item .container .img {
        text-align: center;
    }
}

#soft .soft-features .feature-item:nth-child(even) {
    background-color: #f9fafb;
}

@media (min-width: 990px) {
    #soft .soft-features .feature-item:nth-child(odd) img {
        float: right;
    }
}

#soft .featurresBox {
    display: inline-block;
    width: 350px;
    height: 262px;
  }

#soft .soft-comment {
    background-color: #f2f2f6;
}

#soft .soft-comment .comment-item {
    padding-top: 100px;
    padding-bottom: 100px;
}

#soft .soft-comment .comment-item span {
    margin-top: 30px;
    font-size: 16px;
}

#soft .soft-comment .comment-item p {
    position: relative;
    padding-left: 150px;
}

#soft .soft-comment .comment-item p:before {
    position: absolute;
    content: '';
    width: 128px;
    height: 128px;
    left: 0;
    top: 0;
    background: url("../img_css/mts/comment_1.png") no-repeat;
    background-size: cover;
}

#soft .soft-comment .comment-item:nth-child(2) p:before {
    background: url("../img_css/mts/comment_2.png") no-repeat;
}

@media (max-width: 768px) {
    #soft .soft-comment .comment-item {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    #soft .soft-comment .comment-name {
        text-align: center;
    }
}

#soft .soft-download {
    text-align: center;
}

#soft .soft-download .container {
    padding-top: 100px;
    padding-bottom: 100px;
}

#soft .soft-download .container .download-description {
    margin-bottom: 40px;
    max-width: 600px;
    font-size: 22px;
    font-weight: bold;
}

@media (max-width: 768px) {
    #soft .soft-download .container {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    #soft .soft-download .container .download-description {
        font-size: 24px;
    }
}

#soft-log {
    margin-top: 84px;
}

@media only screen and (max-width: 768px) {
    #soft-log {
        margin-top: 50px;
    }
}

#soft-log .log-header {
    position: relative;
    padding: 40px 0 0;
    background: url("../img_css/top_log.jpg") center no-repeat;
    background-size: cover;
    color: #333333;
    text-align: center;
}

#soft-log .log-header .log-header-title {
    font-size: 40px;
    margin-bottom: 20px;
}

#soft-log .log-header .log-header-title + p {
    margin-bottom: 30px;
    font-size: 22px;
}

#soft-log .log-header a ~ p {
    line-height: 20px;
    font-size: 16px;
    margin: 0;
}

@media (max-width: 768px) {
    #soft-log .log-header .log-header-title {
        font-size: 24px;
    }
}

#soft-log .log-header .log-header-links {
    display: inline-block;
    max-width: 700px;
    padding: 20px 40px;
    margin-top: 30px;
    background-color: #f8f8f8;
    border: 1px solid #f5f5f5;
    border-radius: 4px;
}

#soft-log .log-header .log-header-links p {
    margin: 10px 0 0;
    font-size: 14px;
}

#soft-log .log-header .log-header-links a {
    display: inline-block;
    padding: 0 5px;
    color: #00aa40;
    border-right: 1px solid #aaaaaa;
}

#soft-log .bar-link {
    margin-top: 30px;
    text-align: center;
    background-color: white;
    background-color: rgba(255, 255, 255, 0.5);
}

#soft-log .bar-link a {
    padding-top: 30px;
    padding-bottom: 20px;
    color: #333333;
    text-decoration: none;
    -webkit-transition: 0.1s ease-in;
    -o-transition: 0.1s ease-in;
    transition: 0.1s ease-in;
}

#soft-log .bar-link a img {
    margin-bottom: 10px;
}

#soft-log .bar-link a:hover {
    background-color: white;
}

#soft-log .log-wrapper {
    padding: 60px 0;
}

#soft-log .log-wrapper .log-title {
    font-size: 22px;
    padding-left: 15px;
    border-left: 4px solid #00aa40;
}

#soft-log .log-wrapper .log-item {
    padding-top: 50px;
}

#soft-log .log-wrapper .log-item .log-date div {
    font-size: 22px;
    margin-bottom: 5px;
}

#soft-log .log-wrapper .log-item .log-date span {
    border-top: 4px solid #00aa40;
    color: #aaaaaa;
}

#soft-log .log-wrapper .log-item .log-content {
    border-left: 1px solid rgba(0, 0, 0, 0.2);
}

#soft-log .log-wrapper .log-item .log-content div {
    font-size: 16px;
    font-weight: bold;
    color: #00aa40;
    margin-bottom: 10px;
}

#soft-log .log-wrapper .log-item .log-content ul li {
    padding: 10px 0;
    list-style: none;
}

#soft-faq {
    margin-top: 84px;
}

#soft-faq .faq-header {
    position: relative;
    height: 300px;
    background: url("../img_css/top_faq.jpg") no-repeat center;
    background-size: cover;
    color: #333333;
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    white-space: nowrap;
}

#soft-faq .faq-header .container {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#soft-faq .faq-wrapper .faq-item-title {
    color: #333333;
    line-height: 50px;
    background-color: #f3f2f7;
    font-size: 22px;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
}

#soft-faq .faq-wrapper .faq-item-title.is-active {
    background-color: #ffffff;
}

#soft-faq .faq-wrapper .faq-item-titles {
    background-color: #f3f2f7;
}

#soft-faq .faq-wrapper .faq-item {
    display: none;
    padding: 50px 0;
}

#soft-faq .faq-wrapper .faq-item.is-active {
    display: inherit;
}

#soft-faq .faq-wrapper .faq-item li {
    padding: 10px 0;
}

#soft-faq .faq-wrapper .faq-item li a {
    color: #333333;
    font-size: 16px;
}

#soft-faq .faq-wrapper .faq-item li ~ p {
    color: #999999;
    margin: 0 0 20px 0;
}

#soft-faq .faq-wrapper .faq-item.is-active {
    display: block;
}

@media only screen and (max-width: 768px) {
    #soft-faq {
        margin-top: 50px;
    }

    #soft-faq .faq-header {
        height: 200px;
        font-size: 18px;
    }

    #soft-faq .faq-wrapper .faq-item-title {
        display: inline-block;
        font-size: 16px;
    }
}

#soft-guide {
    margin-top: 84px;
}

#soft-guide .guide-header {
    position: relative;
    height: 300px;
    text-align: center;
    color: white;
    background: url("../img_css/top_howtos.jpg") no-repeat center;
    background-size: cover;
    font-size: 40px;
    font-weight: bold;
}

#soft-guide .guide-header .container {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

@media (max-width: 768px) {
    #soft-guide .guide-header {
        font-size: 24px;
    }
}

#soft-guide .guide-wrapper {
    padding-top: 80px;
    padding-bottom: 80px;
}

#soft-guide .guide-wrapper .guide-menu .guide-title {
    margin: 15px 0 10px;
    font-size: 19px;
    font-weight: bold;
}

#soft-guide .guide-wrapper .guide-menu .item-title {
    display: block;
    font-size: 16px;
    line-height: 32px;
    color: #333333;
    cursor: pointer;
    text-decoration: none;
}

#soft-guide .guide-wrapper .guide-menu .item-title:hover {
    color: #00aa40;
}

#soft-guide .guide-wrapper .guide-menu .item-title.is-active {
    color: #00aa40;
}

#soft-guide .guide-wrapper .guide-content h1 {
    font-weight: bold;
}

#soft-guide .guide-wrapper .guide-content p {
    font-size: 16px;
    line-height: 28px;
    padding-top: 10px;
}

#soft-guide .guide-wrapper .guide-content img {
    padding-top: 10px;
    padding-bottom: 10px;
    max-width: 100%;
    overflow: hidden;
}

@media (max-width: 768px) {
    #soft-guide {
        margin-top: 50px;
    }

    #soft-guide .guide-header {
        height: 200px;
    }

    #soft-guide .guide-wrapper {
        padding-top: 30px;
    }
}

#soft-faq-item {
    margin-top: 85px;
    padding-top: 40px;
}

#soft-faq-item > .container {
    margin-bottom: 40px;
}

#soft-faq-item .sub-wrap h1,
#soft-faq-item .main h1 {
    padding-bottom: 30px;
    font-size: 22px;
}

#soft-faq-item .sub-wrap h3,
#soft-faq-item .main h3 {
    margin-top: 2em;
}

#soft-faq-item .sub-wrap p,
#soft-faq-item .main p {
    padding-top: 20px;
    font-size: 16px;
    line-height: 28px;
}

#soft-faq-item .sub-wrap ul,
#soft-faq-item .main ul {
    list-style-type: none;
    padding: 0;
}

#soft-faq-item .sub-wrap ul li,
#soft-faq-item .main ul li {
    line-height: 28px;
}

#soft-faq-item .sub-wrap .ptb,
#soft-faq-item .main .ptb {
    margin-top: 100px;
}

#soft-faq-item .sub-wrap .cm-about-info a,
#soft-faq-item .main .cm-about-info a {
    display: inline-block;
    float: right;
    margin: 10px 10px 10px 0;
}

@media only screen and (max-width: 768px) {
    #soft-faq-item {
        margin-top: 50px;
    }

    #soft-faq-item .sub-wrap .cm-about-info a {
        float: inherit;
    }
}