.header-lp { position: fixed; width: 100%; height: 69px; top: 0; left: 0; z-index: 2000; }
.content-lp { padding: 69px 0 157px; }
.footer-lp { position: fixed; width: 100%; height: 157px; bottom: 0; left: 0; z-index: 2000; }


.banner-top { display: block; width: 100%; }
.banner-top img { max-width: 100%; }

.wrapper { max-width: 980px; margin: 0 auto; }

/* bachground */
.bg-lightgreen-lp { background: #f4fee7; }
.bg-green-lp { background: #12a04e; }
.bg-lightgray-lp { background: #f0f0ef; }
.bg-gray-lp { background: #878787; }
.bg-gradient-green { background: #71b93a;
    background: -moz-linear-gradient(left, #71b93a 0%, #ace07f 52%, #71b93a 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, #71b93a), color-stop(52%, #ace07f), color-stop(100%, #71b93a));
    background: -webkit-linear-gradient(left, #71b93a 0%, #ace07f 52%, #71b93a 100%);
    background: -o-linear-gradient(left, #71b93a 0%, #ace07f 52%, #71b93a 100%);
    background: -ms-linear-gradient(left, #71b93a 0%, #ace07f 52%, #71b93a 100%);
    background: linear-gradient(to right, #71b93a 0%, #ace07f 52%, #71b93a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#71b93a', endColorstr='#71b93a', GradientType=1 ); }


/* apply more */
.apply-more { display: block; width: 100%; text-align: center; }
.apply-more .title { display: inline-block; text-align: center; position: relative; padding: 0 30px; font-size: 25px; font-weight: bold; margin-bottom: 22px; }
.apply-more .title::before { content: url(/assets/images/top_lp/left.png); position: absolute; left: 0; top:4%; }
.apply-more .title::after { content: url(/assets/images/top_lp/right.png); position: absolute; right: 0; top:4%; }
.apply-more .more-button { display: block; }
.apply-more .more-button a { display: inline-block; width: 45%; margin: 8px 1%; }
.apply-more .more-button a img { max-width: 100%; }
.apply-more .more-disable .open { position: absolute; left: -12px; top: -25px; }
.apply-more .more-disable:hover .open{-webkit-animation:blink-1 .6s both;animation:blink-1 .6s both}
@-webkit-keyframes blink-1{0%,50%,100%{opacity:1}25%,75%{opacity:0}}@keyframes blink-1{0%,50%,100%{opacity:1}25%,75%{opacity:0}}

/* step */
.step h2 { font-size: 28px; font-weight: bold; text-align: center; padding: 12px; line-height: 1.5;  }
.step h3 { font-size: 18px; font-weight: bold; text-align: center; padding: 12px; color: #369403; line-height: 1.5;  }
.step ul { display: flex; padding: 0; }
.step ul li { list-style: none; display: block; position: relative; width: 25%; text-align: center; }
.step ul li img { max-width: 100%; }
.step ul li::after { content: url(/assets/images/top_lp/arrow-orange.png); position: absolute; top: 40%; right: -25px; }
.step ul li:last-child::after { content:''; }

/* movie */
.movie { display: flex; flex-wrap: wrap; }
.movie .text-vdo { width: 100%; padding: 22px; position: relative; }
.movie .text-vdo .img-vdo { max-width: 100%; }
.movie .text-vdo h2 { font-size: 26px; font-weight: bold; border-bottom: 2px solid #83cd3b; }
.movie .text-vdo .btn-play { position: absolute; width: 100%; left: 0; top: 45%; text-align: center; transition: all 0.2s }
.movie .text-vdo .btn-play:hover {bottom: 16px;}
.movie .text-vdo .btn-play a { display: inline-block; }
.movie .text-vdo .btn-play a img { max-width: 100%; }
.movie .modal-movie .modal-dialog { max-width: 700px; }
.movie .modal-movie img { width: 100%; }
.movie .close { text-align: center; background: #fff; width: 25px; height: 25px; border-radius: 50%; display: block;  opacity: 1; padding: 2px; position: absolute; right: 0; top: -20px; }
.movie .modal-movie .modal-content { background: none; border: 0; }

/* feature */
.feature { display: block; }
.feature h2 { display: block; text-align: center; font-size: 26px; font-weight: bold; color: #1c3002; }
.feature h2 span { width: 10%; height: 4px; background: #029f1f; display: block; margin: 4px auto; }
.feature ul { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0; }
.feature ul li { display: block; width: 49%; margin: 10px 0; list-style: none; padding: 30px 22px; background: #fff; text-align: center;}
.feature ul li figure { margin-bottom: 30px; }
.feature ul li figure img {max-width: 100%; }
.feature .title-feature { font-size: 19px; font-weight: bold; color: #006537; margin-bottom: 8px; }

/* usage */
.usage { display: block; background: url(../images/top_lp/bg-green.jpg); }
.usage h2 { display: block; text-align: center; font-size: 26px; font-weight: bold; color: #fff; }
.usage h2 span { width: 10%; height: 4px; background: #fffc18; display: block; margin: 4px auto; }
.usage img { max-width: 100%; }

/* introducing */
.introducing { display: flex; flex-wrap: wrap; }
.introducing .blue { display: block; width: 30%; }
.introducing .green { display: block; width: 70%; padding-left: 2%; }
.introducing img { max-width: 100%; }

/* useful */
.useful { display: block; }
.useful h2 { display: block; text-align: center; font-size: 26px; font-weight: bold; color: #1c3002; }
.useful h2 span { width: 10%; height: 4px; background: #029f1f; display: block; margin: 4px auto; }
.useful ul { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0; }
.useful ul li { display: flex; width: 49%; margin: 10px 0; list-style: none; padding: 30px 22px; background: #fff; text-align: center;}
.useful ul li .img-useful { width: 60%; display: block; padding: 0 12px 0 0; }
.useful ul li .text-useful { width: 40%; display: block; text-align: left; font-size: 12px; }
.useful ul li .img-useful .img-zoom {max-width: 100%; }
.useful .title-useful { font-size: 15px; font-weight: bold; color: #221815; border-bottom: 2px solid #b2de7a; padding: 4px 0; margin-bottom: 8px; }
.useful ul li .icon-search { position: absolute; top: 40%; left: 43%; opacity: 0.8; display: none; }
.useful ul li .img-useful:hover .icon-search {opacity: 0; z-index: -9;}

/* asked */
.asked { display: block; }
.asked h2 { display: block; text-align: center; font-size: 26px; font-weight: bold; color: #1c3002; }
.asked h2 span { width: 10%; height: 4px; background: #029f1f; display: block; margin: 4px auto; }
.question { display: block; cursor: pointer; position: relative; padding: 35px 40px; font-size:16px; }
.question::before { content: url(../images/top_lp/q.png); position: absolute; top: 35%; left: 0;  }
.question::after { content: '+'; position: absolute; top: 35%; right: 0; background: #fffc18; width: 35px; height: 35px; border-radius: 50%; display: block; text-align: center;     font-size: 20px; font-weight: bold; padding: 3px 0; }
.question[aria-expanded="true"]::after { content: '-'; }
.ans { padding: 18px 40px 30px 80px; position: relative; }
.ans::before { content: url(../images/top_lp/a.png); position: absolute; top: 12px; left: 40px;  }


/* button */
.btn-back-lp { background: none; display: inline-block; padding: 4px; border: 1px solid #fff; width: 150px; border-radius: 22px; text-align: center; color: #fff; transition: all 0.3s; }
.btn-back-lp:hover { text-decoration: none; border: 1px solid #000; color: #000;}


/* register */
.title-register { position: relative; }
.title-register img { max-width: 100%; }
.title-register .text-regis { display: block; position: absolute; top: 35%; left: 0; width: 100%; text-align: center; font-size: 26px; font-weight: bold; color: #1c3002; }

/* step register */
.step-register ul { padding: 0; display: flex; }
.step-register ul li { width: 25%; position: relative; list-style: none; background: #b7b7b7; padding: 8px 2px 8px 20px; color: #fff; border-right: 4px solid #f0f0ef; text-align: center;  }
.step-register ul li::after { content: url(../images/top_lp/arrow-step.jpg); position: absolute;     right: -27px; top: 15%; z-index: 9; }
.step-register ul li:last-child::after { content: ''; }
.step-register ul li.current { background: #22915a;
    background: -moz-linear-gradient(left, #22915a 0%, #25aa67 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, #22915a), color-stop(100%, #25aa67));
    background: -webkit-linear-gradient(left, #22915a 0%, #25aa67 100%);
    background: -o-linear-gradient(left, #22915a 0%, #25aa67 100%);
    background: -ms-linear-gradient(left, #22915a 0%, #25aa67 100%);
    background: linear-gradient(to right, #22915a 0%, #25aa67 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#22915a', endColorstr='#25aa67', GradientType=1 ); }
.step-register ul li.current::after { content: url(../images/top_lp/arrow-step-active.png); }
.step-register ul li:last-child.current::after{content: '';}
.step-register ul li .circle { width: 40px; height: 40px; background: #fff; border-radius: 50%; font-size: 11px; font-weight: bold; color: #b7b7b7; text-align: center; padding: 8px 2px; line-height: 1.2; }
.step-register .circle strong { font-size: 13px; display: block; }
.step-register ul li.current .circle { color: #22915a; }

.text-topic-green { font-size: 22px; color: #369403; }
.content-condition { display: block; width: 100%;  height: 300px; overflow-y: auto; }

.list-number, .list-number ul { padding: 0;}
.list-number li { position: relative; list-style: none; padding-left: 45px; display: block; }
.list-number li span { display: inline-block; position: absolute; top: 0; left: 0; }
.list-number li ul li { padding-left: 30px; }

/* form email */
.line-rainbow { background: url(../images/top_lp/line-rainbow.jpg); width: 100%; height: 10px; }
.title-email { background: #fff; padding: 30px 12px; }
.title-email h2 { display: block; text-align: center; font-size: 26px; font-weight: bold; color: #1c3002; }
.title-email h2 span { width: 5%; height: 4px; background: #029f1f; display: block; margin: 4px auto; }
.link-privacy { font-size: 16px; color: #1094c5; }

.email .modal-email .modal-dialog { max-width: 700px; }
.email .modal-email img { max-width: 100%; }
.email .close { text-align: center; background: #fff; width: 25px; height: 25px; border-radius: 50%; display: block;  opacity: 1; padding: 2px; position: absolute; right: 0; top: -20px; }
.email .modal-email .modal-content { background: none; border: 0; }

/* environment */
.environment { position: relative; }
.environment .text-environment.show
, .environment.payment .text-payment.show
{ opacity: 1; }
.text-environment, .text-payment { background: #fff; border: 4px solid #006537; padding: 12px; border-radius: 12px; font-size: 12px; width: 350px; position: absolute; bottom: 40px; left: 12px; transition: all 0.3s; opacity: 0;}
.text-environment::after,.text-payment::after { content: url(../images/top_lp/arrow-comment.png); position: absolute; bottom: -28px; left: 15px;}
.text-environment strong, .text-payment strong { display: block; }

@media(max-width:980px) {
    .wrapper { padding: 0 12px; }
}

@media(max-width:820px) {
    .step h2 { font-size: 20px; }
    .step h3 { font-size: 14px; }

    .apply-more .title { font-size: 18px; }

    .movie .vdo,
    .movie .text-vdo { width: 100%; }
    .movie .text-vdo h2 { font-size: 18px; }

    .useful h2 { font-size: 18px; }
    .useful ul li { width: 100%; }
    .useful ul li .img-useful,
    .useful ul li .text-useful { width: 50%; }

    .feature h2 { font-size: 18px; }
    .feature ul li { font-size: 12px; padding: 30px 14px; }
    .feature .title-feature { font-size: 15px; }

    .usage h2 { font-size: 18px; }

    .asked h2 { font-size: 18px; }

    .step-register ul li span { display: block; margin: auto; text-align: center; }
    .step-register ul li span br { display: none;}
    .step-register ul li::after { top: 22%; }


}

@media(max-width:620px) {
    .feature ul li { width: 100%; }
}

@media(max-width:460px) {
    .text-environment { width: 100%; left:0; }
}