@charset "utf-8";

.maeadv-icon-close {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
    overflow: hidden;
}
.maeadv-icon-close::before,
.maeadv-icon-close::after {
    content: "";
    position: absolute;
    height: 2px;
    width: 100%;
    top: 50%;
    left: 0;
    background: gray;
}
.maeadv-icon-close::before {
    -webkit-transition: transform .3s ease;
    -moz-transition: transform .3s ease;
    -ms-transition: transform .3s ease;
    -o-transition: transform .3s ease;
    transition: transform .3s ease;

    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    -moz-transform: rotate3d(0, 0, 1, 45deg);
    -ms-transform: rotate3d(0, 0, 1, 45deg);
    -o-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
}
.maeadv-icon-close::after {
    -webkit-transition: transform .6s ease;
    -moz-transition: transform .6s ease;
    -ms-transition: transform .6s ease;
    -o-transition: transform .6s ease;
    transition: transform .6s ease;

    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    -moz-transform: rotate3d(0, 0, 1, -45deg);
    -ms-transform: rotate3d(0, 0, 1, -45deg);
    -o-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
}
.maeadv-icon-close:hover::before{
    -webkit-transform: rotate3d(0, 0, 1, 135deg);
    -moz-transform: rotate3d(0, 0, 1, 135deg);
    -ms-transform: rotate3d(0, 0, 1, 135deg);
    -o-transform: rotate3d(0, 0, 1, 135deg);
    transform: rotate3d(0, 0, 1, 135deg);
}
.maeadv-icon-close:hover::after {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    -moz-transform: rotate3d(0, 0, 1, 45deg);
    -ms-transform: rotate3d(0, 0, 1, 45deg);
    -o-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
}


.btn1 {
    display: inline-block;
    vertical-align: middle;
    min-width: 200px;
    padding: 15px 40px;
    margin-top: 2px;
    background: #4d453a;
    color: #fff;
    text-align: right;
    white-space: nowrap;
    border-radius: 8px;
    cursor: pointer;
}

.btn1.active1 {
    background-color: #313131;
}

.btn1 div {
    display: inline-block;
    vertical-align: middle;
}

.btn1 i {
    display: inline-block;
    vertical-align: middle;
    width: 26px;
    height: 26px;
    margin-left: 20px;
    background-position: -129px 0;
}

.social-btn {
    display: inline-block;
    vertical-align: middle;
    margin-top: 2px;
    min-width: 200px;
    padding: 26px 30px;
    background-color: #b5862a;
    color: #fff;
    border-radius: 8px;
    white-space: nowrap;
}

.social-btn.active1 {
    background-color: #313000;
}

.social-btn button,
.social-btn a {
    display: inline-block;
    vertical-align: middle;
    width: 31px;
    height: 31px;
    margin-left: 3px;
}

.social-btn .facebook {
    background-position: -155px 0;
}

.social-btn .blog {
    background-position: -186px 0;
}

.social-btn .kakao {
    background-position: -217px 0;
}

.social-btn .insta {
    background-position: -248px 0;
}

.vertical-swiper .swiper-slide {
    width: 100vw;
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; /* -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; */
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.vertical-swiper,
.main-swiper {
    width: 100vw;
}

.main-swiper .swiper-button-next,
.main-swiper .swiper-button-prev {
    background-color: rgba(0, 0, 0, 0.5);
    width: 50px;
    height: 100px;
    margin-top: -25px;
    right: 40px;
    border-radius: 4px;
}

.main-swiper .swiper-button-prev {
    left: 40px;
    right: auto;
}

.youtube {
    position: fixed;
    z-index: 4;
    width: 30%;
    bottom: 35px;
    left: 35px;
}

.youtube button {
    position: absolute;
    top: -50px;
    left: 0;
}

.youtube .dbox {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.popup {
    display: none;
    position: fixed;
    z-index: 5;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 100px 0;
    overflow-y: scroll;
    background-color: rgba(255, 255, 255, 0.7);
    -ms-overflow-style: none;
}

.popup::-webkit-scrollbar {
    display: none;
}

.popup img {
    display: block;
    max-width: 100%;
    margin: 30px auto 0;
}

.popup-bg {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 30px;
    background-color: #fff;
}

.popup-bg button {
    position: absolute;
    top: -50px;
    right: 0;
}

.popup-bg .maeadv-icon-close::before,
.popup-bg .maeadv-icon-close::after {
    background: #000;
}

/*hoangnk*/
.gender {
    margin-right: 16px;
    line-height: 36px;
}

.expected-height-age {
    margin-right: 100px;
}

.expected-height-height {
    margin-right: 77px;
}

.expected-height-weight {
    margin-left: 7px;
    margin-right: 74px;
}

.expected-height-mother-height {
    margin-right: 9px;
}

.expected-height-father {
    margin-right: 12px;
    margin-left: 7px;
}
.hover-pointer {
    cursor: pointer;
}

/**
 * Desktop
 */

@media (min-width: 1147px) {
    .desc-vi{
        min-width: 700px;
    }
    .desc-ko{
        min-width: 700px;
    }
}

@media (min-width: 1025px) {
    .row{
        width: 100%;
        display: flex;
    }
    .col-6{
        width: 50%;
        padding-left: 10px;
    }
    .col-6:first-child {
        padding-left: 0px;
    }
    .w-100{
        width: 100px;
    }
    .w-95{
        width: 125px;
    }
    .w-80{
        width: 80px;
    }
    .w-65{
        width: 130px;
    }
    .popup-bg {
        min-width: 800px;
    }

    .msection1 {
        position: relative;
        padding-right: 100px;
        padding-top: 210px;
        padding-bottom: 140px;
    }

    .msection1 h1 {
        font-size: 3.5em;
        line-height: 1.2;
        letter-spacing: -1px;
    }

    .msection1 h2 {
        font-size: 2em;
        font-weight: 500;
        line-height: 1.3;
        letter-spacing: 1px;
    }

    .msection1 p {
        font-weight: 300;
        font-size: 1.4em;
        line-height: 1.4;
    }

    .msection1 button {
        display: block;
        width: 250px;
        height: 50px;
        line-height: 50px;
        border-radius: 5px;
        color: #fff;
        background-color: #224076;
    }

    .msection1 button i {
        display: inline-block;
        vertical-align: middle;
        width: 14px;
        height: 14px;
        margin-left: 10px;
        margin-top: -3px;
        background-position: -56px 0;
    }

    .msection1_img {
        position: absolute;
        top: 50%;
        right: -10%;
        margin-top: -250px;
    }


    .msection2 {
        position: relative;
        padding: 200px 0 200px 400px;
    }

    .msection2 h1 {
        font-size: 5em;
        line-height: 1.1;
        background: url(../img/section2_question.png) no-repeat center left 540px;
        background-size: 90px;
        min-width: 700px;
    }

    .msection2 h1.active1 {
        background-position: center left 520px;
    }

    .msection2 h1.active2 {
        background-position: center left 540px;
    }

    .msection2-comment1 {
        font-size: 1.4em;
    }

    .msection2-btn {
        display: block;
        width: 100%;
        height: 60px;
        line-height: 60px;
        font-weight: 500;
        font-size: 2em;
        background-color: #fff;
        color: #eb9e01;
        border-radius: 10px;
    }

    .msection2-btn i {
        display: inline-block;
        vertical-align: middle;
        width: 39px;
        height: 20px;
        margin-left: 10px;
        margin-top: -2px;
        background-position: -70px 0;
    }

    .msection2-comment2 span {
        color: red;
        margin-right: 5px;
    }

    .msection2_img {
        position: absolute;
        top: 10%;
        left: 0;
    }

    .msection2-form {
        border: 4px solid #fff;
        text-align: center;
        padding: 20px;
        min-width: 650px;
    }

    .msection2-form > div {
        display: inline-block;
        vertical-align: top;
        text-align: left;
    }

    .msection2-input {
        display: inline-block;
        vertical-align: middle;
        width: 100px;
        height: 36px;
        line-height: 36px;
        background-color: #fff;
        color: #000;
        padding: 0 10px;
    }

    .msection2-input.active {
        width: 135px;
    }

    .msection2-radio {
        position: relative;
        display: inline-block;
        vertical-align: top;
        height: 40px;
        line-height: 40px;
        padding-left: 35px;
        margin-right: 10px;
        cursor: pointer;
    }

    .msection2-radio:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 26px;
        height: 26px;
        margin-top: -13px;
        border-radius: 100%;
        background-color: #fff;
    }

    .msection2-radio input {
        position: absolute;
        width: 0;
        left: 0;
    }

    .msection2-radio input:checked + em {
        position: absolute;
        top: 3px;
        left: 8px;
        width: 8px;
        height: 20px;
        border: 5px solid #2a2a2a;
        border-top: 0;
        border-left: 0;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        -ms-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
    }

    .msection3 {
        padding-top: 80px;
    }

    .msection3-text {
        position: relative;
        display: inline-block;
        vertical-align: middle;
    }

    .msection3-text img {
        position: absolute;
        bottom: -5%;
        left: 0;
        width: 100%;
    }

    .msection3-text h1 {
        font-size: 5em;
        line-height: 1.2;
        letter-spacing: -6px;
    }

    .msection3-text h1 span {
        font-weight: 300;
    }

    .msection3-text-comment1 {
        margin-top: 20px;
        font-weight: 500;
        font-size: 1.3em;
    }

    .msection3-text-comment2 {
        margin-top: 60%;
        font-size: 14px;
        color: #727466;
    }

    .msection3-form {
        position: relative;
        display: inline-block;
        vertical-align: top;
        margin-left: -5px;
        padding-left: 40px;
    }

    .msection3-form > div {
        padding: 20px;
        border: 4px solid #000;
        background-color: #fff;
    }

    .msection3-form button {
        display: block;
        margin-top: 10px;
        width: 100%;
        height: 60px;
        line-height: 60px;
        background-color: #313131;
        color: #fff;
    }

    .msection3-form table {
        width: 100%;
    }

    .msection3-form tr {
        border-bottom: 3px solid #000;
    }

    .msection3-form tr:last-child {
        border-bottom: 0;
    }

    .msection3-form th {
        text-align: left;
    }

    .msection3-form td {
        padding: 10px 10px;
    }

    .msection3-input {
        display: inline-block;
        vertical-align: middle;
        width: 100px;
        height: 36px;
        line-height: 36px;
        background-color: #fff;
        border: 1px solid #bdbdbd;
        color: #000;
        padding: 0 10px;
    }

    .msection3-radio {
        position: relative;
        display: inline-block;
        vertical-align: top;
        height: 40px;
        line-height: 40px;
        padding-left: 35px;
        margin-right: 10px;
        cursor: pointer;
    }

    .msection3-radio:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 26px;
        height: 26px;
        margin-top: -13px;
        border-radius: 100%;
        background-color: #ddd;
    }

    .msection3-radio input {
        position: absolute;
        width: 0;
        left: 0;
    }

    .msection3-radio input:checked + em {
        position: absolute;
        top: 3px;
        left: 8px;
        width: 8px;
        height: 20px;
        border: 5px solid #2a2a2a;
        border-top: 0;
        border-left: 0;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        -ms-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
    }

    .msection3-radio-img {
        display: inline-block;
        vertical-align: bottom;
        text-align: center;
        margin-right: 20px;
        cursor: pointer;
    }

    .msection3-radio-img img {
        display: block;
        margin: 0 auto;
    }


    .msection4 {
        padding-top: 270px;
        padding-bottom: 190px;
        padding-left: 40%;
        white-space: nowrap;
    }

    .msection4 h1 {
        font-size: 4em;
        line-height: 1.2;
        font-weight: 900;
        text-shadow: 0 0 10px #fff;
    }

    .msection4 p {
        font-size: 1.5em;
        line-height: 1.3;
        margin: 40px 0 40px;
        text-shadow: 0 0 10px #fff;
    }

    .msection4-btns button {
        display: inline-block;
        vertical-align: middle;
        /*width: 200px;*/
        height: 50px;
        line-height: 50px;
        background-color: #1e82d1;
        color: #fff;
        border-radius: 5px;
        margin-right: 10px;
        padding: 0 15px;
    }

    .msection4-btns button i {
        display: inline-block;
        vertical-align: middle;
        width: 14px;
        height: 14px;
        margin-left: 10px;
        margin-top: -3px;
        background-position: -56px 0;
    }

    /*.msection4-btns button:last-child i{background-position: -110px 0; }*/
    .msection5 {
        position: relative;
        padding: 200px 0 200px 400px;
        text-align: right;
    }

    .msection5 h1 {
        font-size: 6em;
        line-height: 1.2;
        font-weight: 500;
    }

    .msection5 h1 div {
        font-size: 1.2em;
        font-weight: 900;
    }

    .msection5-comment {
        font-size: 6em;
        line-height: 1.3;
    }

    .msection5-comment span {
        font-size: 1.2em;
        font-weight: 900;
        color: #822629;
    }

    .msection5_img {
        position: absolute;
        top: 5%;
        left: 0;
    }

    .msection6 {
        padding-top: 70px;
    }

    .msection6 h1 {
        font-size: 6em;
        line-height: 1.2;
        font-weight: 900;
        letter-spacing: -1px;
    }

    .msection6 h1 b {
        color: #fd5e00;
        text-decoration: underline;
    }

    .msection6 h1 span {
        font-weight: 300;
    }

    .msection6 ul {
        margin: 40px 0;
    }

    .msection6 li {
        position: relative;
        padding-left: 20px;
    }

    .msection6 li:before {
        content: "※";
        position: absolute;
        top: 0;
        left: 0;
    }

    .msection6 h2 {
        margin: 60px 0 0;
        font-size: 3em;
    }

    .msection6-btn {
        display: block;
        min-width: 300px;
        margin-top: 20px;
        padding: 20px 15px;
        border: 5px solid #313131;
        font-weight: 700;
        font-size: 1.2em;
        color: #313131;
        border-radius: 8px;
    }

    .msection6 img {
        position: absolute;
        max-width: 50%;
        right: 0;
        bottom: 0;
    }


    .msection7{ padding: 100px 0 700px;  color: #333; }
    .msection7 h1{font-size: 3.5em; font-weight: 700; }
    .msection7 p{margin-top: 30px; font-weight: 300; font-size: 2em; line-height: 1.4; }
    .msection7 button{ display: block; margin: 30px auto 0; width: 266px; line-height: 60px; border-radius: 5px; box-shadow: inset 3px  3px 10px 3px #4c4c4c; background-color: #333; color: #fff; font-size: 1.2em;font-weight: 500;}


    .gender{
        margin-right: 16px;
        line-height: 36px;
    }

    .expected-height-age{
        margin-right: 100px;
    }
    .expected-height-height{
        margin-right: 77px;
    }
    .expected-height-weight{
        margin-left: 7px;
        margin-right: 74px;
    }
    .expected-height-mother-height{
        margin-right: 9px;
    }
    .expected-height-father{
        margin-right: 12px;
        margin-left: 7px;
    }
    .active1{
        min-width: 700px;
    }


    .layoutpopup{ position: fixed; z-index: 10; top: 0; left: 0; right: 0; bottom: 0; padding-top: 100px; padding-bottom: 100px; overflow-y: scroll; background-color: rgba(0, 0, 0, 0.8); -ms-overflow-style: none; }
    .layoutpopup::-webkit-scrollbar { display: none; }
    .layoutpopup > .container{ position: relative; max-width: 1260px; padding: 80px 90px; background-color: #fff; border-radius: 10px; }
    .layoutpopup-head-left{ float: left; position: relative; width: 86px; height: 86px; box-shadow: 0.7px 0.7px 5px 0 rgba(0, 0, 0, 0.45); background-color: #3278f0; border-radius: 100%; }
    .layoutpopup-head-left img{ position: absolute; top: 50%; left: 50%; width: 45%; transform: translate3d(-50%, -50%, 0); }
    .layoutpopup-head-right{ margin-left: 120px; }
    .layoutpopup-close{ position: absolute; top: 20px; right: 20px; width: 30px; height: 30px; line-height: 1; }
    .layoutpopup-title{ border-bottom: 1px solid #ccc; color: #3278f0; font-weight: 900; font-size: 43px; }
    .layoutpopup-desc1{ margin: 37px 0 30px; font-size: 30.5px; }
    .layoutpopup-desc1 img{ margin-top: -8px; height: 28px; vertical-align: middle; }
    .layoutpopup-desc2{ font-size: 20px; color: #686868; line-height: 30px; }
    .layoutpopup-desc2 a{ color: #006cff; }
    .layoutpopup-desc2 a:hover{ text-decoration: underline; }
    .layoutpopup-qr{ display: block; margin: 74px auto 100px; }

    .lps-title{ font-size: 50px; line-height: 1.2; text-align: center; letter-spacing: -1px; color: #415ca9; }
    .lps-ul{ padding: 45px 60px; border-radius: 0 0 10px 10px; background: linear-gradient(to bottom, #e9f3ff 0%, #fafbff 100%); font-size: 18px; color: #686868; }
    .lps-ul li{ position: relative; }
    .lps-ul li:before{ content: ""; position: absolute; top: 10px; left: -15px; border-radius: 100%; border: 3px solid #0775fe; }

    .lps1-container{ margin-top: 30px; border-radius: 10px; border: solid 1px #94bae4; }
    .lps1 .swiper-container{ padding: 50px 40px; }
    .lps1 .swiper-slide{ margin: 0; width: 30%; text-align: center; }
    .lps1 .lps1-arrow{ width: 5%; padding-top: 30px; text-align: center; }
    .lps1-box { display: inline-block; vertical-align: middle; }
    .lps1-box img{ float: left; }
    .lps1-box div{ margin-left: 130px; text-align: left; line-height: 1.4; }
    .lps1-box h3{ margin-bottom: 15px; font-size: 20px; color: #94a9f9; }

    .lps2{ margin: 90px 0 0; }
    .lps2 .swiper-container{ margin-top: 30px; }
    .lps2 .swiper-slide{ margin-right: 1.5%; }
    .lps2 .lps2-box1{ padding: 70px 0; width: 20%; border-radius: 10px; border: solid 1px #94bae4; line-height: 1.2; }
    .lps2 .lps2-box1 h3{ margin-top: 30px; font-size: 23px; color: #454545; }
    .lps2 .lps2-box1 p{ font-size: 25px; color: #0067f4; font-weight: 700; letter-spacing: -1px; font-family: Raleway; }
    .lps2 .lps2-box2{ width: 57%; border-radius: 10px; border: solid 1px #94bae4; }
    .lps2 .lps2-box2 .lps-ul{height: 255px; padding-bottom: 0; }
    .lps2-ul2{ margin-top: 24px; padding-left: 20px; }
    .lps2-ul2 li{ position: relative; font-size: 18px; color: #686868; }
    .lps2-ul2 li:before{ content: ""; position: absolute; top: 10px; left: -15px; border: 3px solid #0775fe; border-radius: 100% }
}

@media (min-width: 1024px) and (max-width: 1432px) {
    .msection1_img{
        width: 70%;
    }
}

/**
 * tablet
 */
@media (min-width: 640px) and (max-width: 1024px) {
    .youtube {
        left: 0;
        bottom: 20px;
        width: 100%;
        padding: 0 20px;
    }
    .row{
        width: 100%;
    }
    .col-6{
        width: 100%;
        padding-bottom: 10px;
    }
    .w-100{
        width: 100px;
    }
    .w-95{
        width: 95px;
    }
    .w-65{
        width: 100px;
    }
    .youtube button {
        left: 20px;
    }

    .btn1 {
        min-width: 100%;
        padding: 15px 40px;
        text-align: center;
        border-radius: 0;
    }

    .social-btn {
        min-width: 100%;
        padding: 26px 15px;
        text-align: center;
        border-radius: 0;
    }

    .main-swiper .swiper-button-next,
    .main-swiper .swiper-button-prev {
        display: none;
    }

    .msection1 {
        position: relative;
        padding-top: 65px;
        padding-bottom: 230px;
    }

    .msection1 h1 {
        font-size: 2em;
        line-height: 1.2;
        letter-spacing: -1px;
    }

    .msection1 h2 {
        font-size: 1.4em;
        font-weight: 500;
        line-height: 1.3;
        letter-spacing: 1px;
    }

    .msection1 p {
        font-weight: 300;
    }

    .msection1 button {
        position: relative;
        z-index: 1;
        display: block;
        width: 200px;
        height: 50px;
        line-height: 50px;
        border-radius: 5px;
        color: #fff;
        background-color: #224076;
    }

    .msection1 button i {
        display: inline-block;
        vertical-align: middle;
        width: 14px;
        height: 14px;
        margin-left: 10px;
        margin-top: -3px;
        background-position: -56px 0;
    }

    .msection1_img {
        position: absolute;
        bottom: 15px;
        right: 0;
        width: 50%;
    }


    .msection2 {
        position: relative;
        padding-top: 100px;
        padding-bottom: 50px;
        width: 90%;
        margin: auto;
    }

    .msection2 h1 {
        font-size: 2.4em;
        line-height: 1.1;
        background: url(../img/section2_question.png) no-repeat center left 210px;
        background-size: 36px;
    }

    .msection2 h1.active1 {
        background-position: center left 200px;
    }

    .msection2 h1.active2 {
        background-position: center left 220px;
    }

    .msection2-comment1 {
        font-size: 1.2em;
    }

    .msection2-btn {
        display: block;
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-weight: 500;
        font-size: 1.5em;
        background-color: #fff;
        color: #eb9e01;
    }

    .msection2-btn i {
        display: inline-block;
        vertical-align: middle;
        width: 39px;
        height: 20px;
        margin-left: 10px;
        margin-top: -2px;
        background-position: -70px 0;
    }

    .msection2-comment2 span {
        color: red;
        margin-right: 5px;
    }

    .msection2_img {
        position: absolute;
        top: 30px;
        right: 0;
        width: 70px;
    }

    .msection2-form {
        border: 4px solid #fff;
        text-align: center;
        padding: 20px;
    }

    .msection2-form > div {
        display: inline-block;
        vertical-align: top;
        text-align: left;
    }

    .msection2-input {
        display: inline-block;
        vertical-align: middle;
        width: 170px;
        height: 36px;
        line-height: 36px;
        background-color: #fff;
        color: #000;
        padding: 0 10px;
    }

    .msection2-input.active {
        width: 85px;
    }

    .msection2-radio {
        position: relative;
        display: inline-block;
        vertical-align: top;
        height: 40px;
        line-height: 40px;
        padding-left: 35px;
        margin-right: 10px;
        cursor: pointer;
    }

    .msection2-radio:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 26px;
        height: 26px;
        margin-top: -13px;
        border-radius: 100%;
        background-color: #fff;
    }

    .msection2-radio input {
        position: absolute;
        width: 0;
        left: 0;
    }

    .msection2-radio input:checked + em {
        position: absolute;
        top: 3px;
        left: 8px;
        width: 8px;
        height: 20px;
        border: 5px solid #2a2a2a;
        border-top: 0;
        border-left: 0;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        -ms-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
    }

    .msection3 {
        padding-top: 65px;
    }

    .msection3-text {
        position: relative;
        display: block;
    }

    .msection3-text img {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 60%;
    }

    .msection3-text h1 {
        font-size: 2.4em;
        line-height: 1.2;
        letter-spacing: -3px;
    }

    .msection3-text h1 span {
        font-weight: 300;
    }

    .msection3-text-comment1 {
        display: none;
    }

    .msection3-text-comment2 {
        display: none;
    }

    .msection3-form {
        position: relative;
        display: block;
        margin-top: 10px;
    }

    .msection3-form > div {
        border: 4px solid #000;
        background-color: #fff;
    }

    .msection3-form button {
        display: block;
        margin-top: 10px;
        width: 100%;
        height: 50px;
        line-height: 50px;
        background-color: #313131;
        color: #fff;
    }

    .msection3-form table {
        width: 100%;
        letter-spacing: -1px;
    }

    .msection3-form tr {
        border-bottom: 3px solid #000;
    }

    .msection3-form tr:last-child {
        border-bottom: 0;
    }

    .msection3-form th {
        text-align: left;
        padding-left: 10px;
        white-space: nowrap;
    }

    .msection3-form td {
        padding: 5px 10px;
    }

    .msection3-input {
        display: inline-block;
        vertical-align: middle;
        width: 100px;
        height: 34px;
        line-height: 34px;
        background-color: #fff;
        border: 1px solid #bdbdbd;
        color: #000;
        padding: 0 10px;
    }

    .msection3-radio {
        position: relative;
        display: inline-block;
        vertical-align: top;
        height: 25px;
        line-height: 25px;
        padding-left: 25px;
        margin-right: 10px;
        cursor: pointer;
    }

    .msection3-radio:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 20px;
        height: 20px;
        margin-top: -10px;
        border-radius: 100%;
        background-color: #ddd;
    }

    .msection3-radio input {
        position: absolute;
        width: 0;
        left: 0;
    }

    .msection3-radio input:checked + em {
        position: absolute;
        top: -3px;
        left: 8px;
        width: 4px;
        height: 14px;
        border: 5px solid #2a2a2a;
        border-top: 0;
        border-left: 0;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        -ms-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
    }

    .msection3-radio-img {
        display: inline-block;
        vertical-align: bottom;
        text-align: center;
        cursor: pointer;
    }

    .msection3-radio-img img {
        display: block;
        margin: 0 auto;
        height: 25px;
    }

    .bg5 {
        background-position: bottom right;
    }

    .msection4 {
        padding: 150px 0 100px 42%;
    }

    .msection4 h1 {
        font-size: 2.5em;
        line-height: 1.2;
        font-weight: 900;
        text-shadow: 0 0 10px #fff;
    }

    .msection4 p {
        font-size: 1.4em;
        line-height: 1.3;
        margin: 40px 0 40px;
        text-shadow: 0 0 10px #fff;
    }

    .msection4-btns button {
        float: left;
        padding: 0 15px;
        height: 50px;
        line-height: 50px;
        background-color: #1e82d1;
        color: #fff;
        margin-right: 5px;
    }

    .msection4-btns button i {
        display: inline-block;
        vertical-align: middle;
        width: 14px;
        height: 14px;
        margin-left: 10px;
        margin-top: -3px;
        background-position: -56px 0;
    }

    .msection4-btns button:last-child i {
        background-position: -110px 0;
    }


    .msection5 {
        position: relative;
        padding-top: 90px;
        padding-bottom: 50px;
        text-align: right;
        width: 90%;
        margin: auto;
    }

    .msection5 h1 {
        font-size: 1.5em;
        line-height: 1.1;
        font-weight: 500;
    }

    .msection5 h1 div {
        font-size: 1.2em;
        font-weight: 900;
    }

    .msection5-comment {
        margin-top: 20px;
        font-size: 1.5em;
        letter-spacing: -1px;
    }

    .msection5-comment span {
        font-size: 1.4em;
        font-weight: 900;
        color: #822629;
    }

    .msection5_img {
        position: absolute;
        top: 20px;
        left: 50px;
        width: 100px;
    }

    .msection6 {
        padding-top: 65px;
    }

    .msection6 h1 {
        font-size: 2.5em;
        line-height: 1.2;
        font-weight: 900;
        letter-spacing: -1px;
    }

    .msection6 h1 b {
        color: #fd5e00;
        text-decoration: underline;
    }

    .msection6 h1 span {
        font-weight: 300;
    }

    .msection6 ul {
        margin: 15px 0;
    }

    .msection6 li {
        position: relative;
        padding-left: 20px;
    }

    .msection6 li:before {
        content: "※";
        position: absolute;
        top: 0;
        left: 0;
    }

    .msection6 h2 {
        margin: 20px 0 0;
        font-size: 1.6em;
    }

    .msection6-btn {
        display: block;
        width: 100%;
        margin-top: 10px;
        padding: 20px 15px;
        border: 4px solid #313131;
        font-weight: 700;
        font-size: 1.2em;
        color: #313131;
    }

    .msection6 img {
        position: absolute;
        max-width: 50%;
        right: 0;
        top: -10%;
    }



    .msection7{ padding: 70px 0 600px; color: #333; background-size: auto 100%; background-repeat: no-repeat;}
    .msection7 h1{font-size: 3.6em; font-weight: 700; line-height: 1.2; }
    .msection7 p{margin-top: 30px; font-weight: 300; font-size: 2em; line-height: 1.4; }
    .msection7 button{ display: block; margin: 30px auto 0; width: 266px; line-height: 60px; border-radius: 5px; box-shadow: inset 3px  3px 10px 3px #4c4c4c; background-color: #333; color: #fff; font-size: 1.2em;font-weight: 500;}


    .layoutpopup{ position: fixed; z-index: 10; top: 0; left: 0; right: 0; bottom: 0; padding-top: 70px; padding-bottom: 70px; overflow-y: scroll; background-color: rgba(0, 0, 0, 0.8); -ms-overflow-style: none; }
    .layoutpopup::-webkit-scrollbar { display: none; }
    .layoutpopup > .container{ position: relative; max-width: 700px; margin: 0 auto; padding: 50px 20px; background-color: #fff; border-radius: 10px; overflow: hidden; }

    .layoutpopup-head-left{ float: left; position: relative; width: 50px; height: 50px; box-shadow: 0.7px 0.7px 5px 0 rgba(0, 0, 0, 0.45); background-color: #3278f0; border-radius: 100%; }
    .layoutpopup-head-left img{ position: absolute; top: 50%; left: 50%; width: 45%; transform: translate3d(-50%, -50%, 0); }
    .layoutpopup-head-right{ margin-left: 65px; }
    .layoutpopup-close{ position: absolute; top: 20px; right: 20px; width: 30px; height: 30px; line-height: 1; }
    .layoutpopup-title{ border-bottom: 1px solid #ccc; color: #3278f0; font-weight: 900; font-size: 2.2em; }

    .layoutpopup-desc1{ margin: 30px 0 20px; font-size: 1.8em; }
    .layoutpopup-desc1 img{ margin-top: -8px; height: 25px; vertical-align: middle; }
    .layoutpopup-desc2{ font-size: 1.2em; color: #686868; }
    .layoutpopup-desc2 a{ color: #006cff; }
    .layoutpopup-desc2 a:hover{ text-decoration: underline; }
    .layoutpopup-qr{ display: block; margin: 40px auto 60px; max-width: 20%; }

    .lps-title{ font-size: 2em; line-height: 1.2; text-align: center; letter-spacing: -1px; color: #415ca9; }
    .lps-ul{ padding: 30px 40px; border-radius: 0 0 10px 10px; background: linear-gradient(to bottom, #e9f3ff 0%, #fafbff 100%); color: #686868; text-align: left; }
    .lps-ul li{ position: relative; }
    .lps-ul li:before{ content: ""; position: absolute; top: 8px; left: -15px; border-radius: 100%; border: 2px solid #0775fe; }

    .lps1-container{ margin-top: 20px; border-radius: 10px; text-align: center; border: solid 1px #94bae4; }
    .lps1 .swiper-container{ margin: 0; padding: 30px 20px 20px; }
    .lps1 .swiper-slide{ margin: 0 0 0 0; width: 220px; }
    .lps1 .lps1-arrow{ width: 70px; padding-top: 20px; text-align: center; }
    .lps1-box { display: inline-block; vertical-align: middle; white-space: nowrap; }
    .lps1-box img{ display: inline-block; vertical-align: top; max-height: 60px; }
    .lps1-box div{ display: inline-block; vertical-align: top; margin-left: 15px; text-align: left; line-height: 1.4; }
    .lps1-box h3{ margin-bottom: 10px; font-size: 1.3em; color: #94a9f9; }

    .lps2{ margin: 50px 0 0; }
    .lps2 .swiper-container{ margin-top: 20px; }
    .lps2 .swiper-slide{ margin-right: 20px; }
    .lps2 .lps2-box1{ padding: 64px 0; width: 200px; border-radius: 10px; border: solid 1px #94bae4; line-height: 1.2; }
    .lps2 .lps2-box1 h3{ margin-top: 20px; font-size: 1.7em; color: #454545; }
    .lps2 .lps2-box1 p{ font-size: 1.7em; color: #0067f4; font-weight: 700; letter-spacing: -1px; font-family: Raleway; }
    .lps2 .lps2-box2{ width: 100%; border-radius: 10px; border: solid 1px #94bae4; }
    .lps2 .lps2-box2 .lps-ul{height: 240px; padding-bottom: 0; }
    .lps2-ul2{ margin-top: 20px; padding-left: 15px; }
    .lps2-ul2 li{ position: relative; color: #686868; }
    .lps2-ul2 li:before{ content: ""; position: absolute; top: 8px; left: -10px; border: 2px solid #0775fe; border-radius: 100% }


    /*hoang*/

    .expected-height-age{
        position: absolute;
        top: 23%;
    }
    .expected-height-weight{
        position: absolute;
        top: 51%;
    }
    .expected-height-mother-height{
        position: absolute;
        top: 65%;
    }
    .expected-height-father{
        position: absolute;
        top: 79%;
    }

    .input-age{
        position: absolute;
        left: 60%;
        top: 23%
    }
    .input-height-expected-height{
        position: absolute;
        top: 36%;
        left: 60%;
    }
    .expected-height-height{
        position: absolute;
        top: 37%;
    }
    .input-weight-expected-weight{
        position: absolute;
        top: 50%;
        left: 60%;
    }
    .input-father-height{
        position: absolute;
        top: 78%;
        left: 60%;
    }
    .input-mother-height{
        position: absolute;
        top: 64%;
        left: 60%;
    }
}

/**
 * Mobile
 */
@media (max-width: 639px) {
    .youtube {
        left: 0;
        bottom: 20px;
        width: 100%;
        padding: 0 20px;
    }
    .row{
        width: 100%;
    }
    .col-6{
        width: 100%;
        padding-bottom: 10px;
    }
    .w-65{
        width: 100px;
    }
    .w-100{
        width: 100px;
    }
    .w-95{
        width: 95px;
    }
    .w-80{
        width: 80px;
    }
    .youtube button {
        left: 20px;
    }

    .btn1 {
        min-width: 100%;
        padding: 15px 40px;
        text-align: center;
        border-radius: 0;
    }

    .social-btn {
        min-width: 100%;
        padding: 26px 15px;
        text-align: center;
        border-radius: 0;
    }

    .main-swiper .swiper-button-next,
    .main-swiper .swiper-button-prev {
        display: none;
    }

    .msection1 {
        position: relative;
        padding-top: 65px;
        padding-bottom: 230px;
    }

    .msection1 h1 {
        font-size: 2em;
        line-height: 1.2;
        letter-spacing: -1px;
    }

    .msection1 h2 {
        font-size: 1.4em;
        font-weight: 500;
        line-height: 1.3;
        letter-spacing: 1px;
    }

    .msection1 p {
        font-weight: 300;
    }

    .msection1 button {
        position: relative;
        z-index: 1;
        display: block;
        width: 200px;
        height: 50px;
        line-height: 50px;
        border-radius: 5px;
        color: #fff;
        background-color: #224076;
    }

    .msection1 button i {
        display: inline-block;
        vertical-align: middle;
        width: 14px;
        height: 14px;
        margin-left: 10px;
        margin-top: -3px;
        background-position: -56px 0;
    }

    .msection1_img {
        position: absolute;
        bottom: 15px;
        left: 0;
        width: 100%;
    }


    .msection2 {
        position: relative;
        padding-top: 100px;
        padding-bottom: 50px;
    }

    .msection2 h1 {
        font-size: 2.4em;
        line-height: 1.1;
        background: url(../img/section2_question.png) no-repeat center left 200px;
        background-size: 36px;
    }

    .msection2 h1.active1 {
        background-position: center left 200px;
    }

    .msection2 h1.active2 {
        background-position: center left 220px;
    }

    .msection2-comment1 {
        font-size: 1.2em;
    }

    .msection2-btn {
        display: block;
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-weight: 500;
        font-size: 1.5em;
        background-color: #fff;
        color: #eb9e01;
    }

    .msection2-btn i {
        display: inline-block;
        vertical-align: middle;
        width: 39px;
        height: 20px;
        margin-left: 10px;
        margin-top: -2px;
        background-position: -70px 0;
    }

    .msection2-comment2 span {
        color: red;
        margin-right: 5px;
    }

    .msection2_img {
        position: absolute;
        top: 30px;
        right: 0;
        width: 70px;
    }

    .msection2-form {
        border: 4px solid #fff;
        text-align: center;
        padding: 20px;
    }

    .msection2-form > div {
        display: inline-block;
        vertical-align: top;
        text-align: left;
    }

    .msection2-input {
        display: inline-block;
        vertical-align: middle;
        width: 125px;
        height: 36px;
        line-height: 36px;
        background-color: #fff;
        color: #000;
        padding: 0 10px;
    }

    .msection2-input.active {
        width: 85px;
    }

    .msection2-radio {
        position: relative;
        display: inline-block;
        vertical-align: top;
        height: 40px;
        line-height: 40px;
        padding-left: 35px;
        margin-right: 10px;
        cursor: pointer;
    }

    .msection2-radio:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 26px;
        height: 26px;
        margin-top: -13px;
        border-radius: 100%;
        background-color: #fff;
    }

    .msection2-radio input {
        position: absolute;
        width: 0;
        left: 0;
    }

    .msection2-radio input:checked + em {
        position: absolute;
        top: 3px;
        left: 8px;
        width: 8px;
        height: 20px;
        border: 5px solid #2a2a2a;
        border-top: 0;
        border-left: 0;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        -ms-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
    }

    .msection3 {
        padding-top: 65px;
    }

    .msection3-text {
        position: relative;
        display: block;
    }

    .msection3-text img {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 60%;
    }

    .msection3-text h1 {
        font-size: 2.4em;
        line-height: 1.2;
        letter-spacing: -3px;
    }

    .msection3-text h1 span {
        font-weight: 300;
    }

    .msection3-text-comment1 {
        display: none;
    }

    .msection3-text-comment2 {
        display: none;
    }

    .msection3-form {
        position: relative;
        display: block;
        margin-top: 10px;
    }

    .msection3-form > div {
        border: 4px solid #000;
        background-color: #fff;
    }

    .msection3-form button {
        display: block;
        margin-top: 10px;
        width: 100%;
        height: 50px;
        line-height: 50px;
        background-color: #313131;
        color: #fff;
    }

    .msection3-form table {
        width: 100%;
        letter-spacing: -1px;
    }

    .msection3-form tr {
        border-bottom: 3px solid #000;
    }

    .msection3-form tr:last-child {
        border-bottom: 0;
    }

    .msection3-form th {
        text-align: left;
        padding-left: 10px;
        white-space: nowrap;
    }

    .msection3-form td {
        padding: 5px 10px;
    }

    .msection3-input {
        display: inline-block;
        vertical-align: middle;
        width: 100px;
        height: 34px;
        line-height: 34px;
        background-color: #fff;
        border: 1px solid #bdbdbd;
        color: #000;
        padding: 0 10px;
    }

    .msection3-radio {
        position: relative;
        display: inline-block;
        vertical-align: top;
        height: 25px;
        line-height: 25px;
        padding-left: 25px;
        margin-right: 10px;
        cursor: pointer;
    }

    .msection3-radio:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 20px;
        height: 20px;
        margin-top: -10px;
        border-radius: 100%;
        background-color: #ddd;
    }

    .msection3-radio input {
        position: absolute;
        width: 0;
        left: 0;
    }

    .msection3-radio input:checked + em {
        position: absolute;
        top: -3px;
        left: 8px;
        width: 4px;
        height: 14px;
        border: 5px solid #2a2a2a;
        border-top: 0;
        border-left: 0;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        -ms-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
    }

    .msection3-radio-img {
        display: inline-block;
        vertical-align: bottom;
        text-align: center;
        cursor: pointer;
    }

    .msection3-radio-img img {
        display: block;
        margin: 0 auto;
        height: 25px;
    }

    .bg5 {
        background-position: bottom right;
    }

    .msection4 {
        padding: 95px 0 100px;
    }

    .msection4 h1 {
        font-size: 2.5em;
        line-height: 1.2;
        font-weight: 900;
        text-shadow: 0 0 10px #fff;
    }

    .msection4 p {
        font-size: 1.4em;
        line-height: 1.3;
        margin: 40px 0 40px;
        text-shadow: 0 0 10px #fff;
    }

    .msection4-btns button {
        float: left;
        padding: 0 15px;
        height: 50px;
        line-height: 50px;
        background-color: #1e82d1;
        color: #fff;
        margin-right: 5px;
    }

    .msection4-btns button i {
        display: inline-block;
        vertical-align: middle;
        width: 14px;
        height: 14px;
        margin-left: 10px;
        margin-top: -3px;
        background-position: -56px 0;
    }

    .msection4-btns button:last-child i {
        background-position: -110px 0;
    }


    .msection5 {
        position: relative;
        padding-top: 90px;
        padding-bottom: 50px;
        text-align: right;
        width: 90%;
        margin: auto;
    }

    .msection5 h1 {
        font-size: 1.5em;
        line-height: 1.1;
        font-weight: 500;
    }

    .msection5 h1 div {
        font-size: 1.2em;
        font-weight: 900;
    }

    .msection5-comment {
        margin-top: 20px;
        font-size: 1.5em;
        letter-spacing: -1px;
    }

    .msection5-comment span {
        font-size: 1.4em;
        font-weight: 900;
        color: #822629;
    }

    .msection5_img {
        position: absolute;
        top: 20px;
        left: 50px;
        width: 100px;
    }

    .msection6 {
        padding-top: 65px;
    }

    .msection6 h1 {
        font-size: 2.5em;
        line-height: 1.2;
        font-weight: 900;
        letter-spacing: -1px;
    }

    .msection6 h1 b {
        color: #fd5e00;
        text-decoration: underline;
    }

    .msection6 h1 span {
        font-weight: 300;
    }

    .msection6 ul {
        margin: 15px 0;
    }

    .msection6 li {
        position: relative;
        padding-left: 20px;
    }

    .msection6 li:before {
        content: "※";
        position: absolute;
        top: 0;
        left: 0;
    }

    .msection6 h2 {
        margin: 20px 0 0;
        font-size: 1.6em;
    }

    .msection6-btn {
        display: block;
        width: 100%;
        margin-top: 10px;
        padding: 20px 15px;
        border: 4px solid #313131;
        font-weight: 700;
        font-size: 1.2em;
        color: #313131;
    }

    .msection6 img {
        position: absolute;
        max-width: 50%;
        right: 0;
        top: -10%;
    }


    .msection7{ padding: 60px 0 500px; color: #333; background-repeat: no-repeat; background-position: center left 55%; }
    .msection7 h1{font-size: 2.2em; font-weight: 700; line-height: 1.2; }
    .msection7 p{margin-top: 20px; font-weight: 300; font-size: 1.4em; line-height: 1.4; }
    .msection7 button{ display: block; margin: 20px auto 0; width: 180px; line-height: 45px; border-radius: 5px; box-shadow: inset 3px  3px 10px 3px #4c4c4c; background-color: #333; color: #fff; font-size: 1.2em;font-weight: 500;}

    .layoutpopup{ position: fixed; z-index: 10; top: 0; left: 0; right: 0; bottom: 0; padding-top: 70px; padding-bottom: 70px; overflow-y: scroll; background-color: rgba(0, 0, 0, 0.8); -ms-overflow-style: none; }
    .layoutpopup::-webkit-scrollbar { display: none; }
    .layoutpopup > .container{ position: relative; max-width: 600px; padding: 50px 20px; background-color: #fff; border-radius: 10px; overflow: hidden; }

    .layoutpopup-head-left{ float: left; position: relative; width: 50px; height: 50px; box-shadow: 0.7px 0.7px 5px 0 rgba(0, 0, 0, 0.45); background-color: #3278f0; border-radius: 100%; }
    .layoutpopup-head-left img{ position: absolute; top: 50%; left: 50%; width: 45%; transform: translate3d(-50%, -50%, 0); }
    .layoutpopup-head-right{ margin-left: 65px; }
    .layoutpopup-close{ position: absolute; top: 20px; right: 20px; width: 30px; height: 30px; line-height: 1; }
    .layoutpopup-title{ border-bottom: 1px solid #ccc; color: #3278f0; font-weight: 900; font-size: 2.2em; }

    .layoutpopup-desc1{ margin: 30px 0 20px; font-size: 1.8em; }
    .layoutpopup-desc1 img{ margin-top: -8px; height: 25px; vertical-align: middle; }
    .layoutpopup-desc2{ font-size: 1.2em; color: #686868; }
    .layoutpopup-desc2 a{ color: #006cff; }
    .layoutpopup-desc2 a:hover{ text-decoration: underline; }
    .layoutpopup-qr{ display: block; margin: 40px auto 60px; max-width: 40%; }

    .lps-title{ font-size: 2em; line-height: 1.2; text-align: center; letter-spacing: -1px; color: #415ca9; }
    .lps-ul{ padding: 30px 40px; border-radius: 0 0 10px 10px; background: linear-gradient(to bottom, #e9f3ff 0%, #fafbff 100%); color: #686868; text-align: left; }
    .lps-ul li{ position: relative; }
    .lps-ul li:before{ content: ""; position: absolute; top: 8px; left: -15px; border-radius: 100%; border: 2px solid #0775fe; }

    .lps1-container{ margin-top: 20px; border-radius: 10px; text-align: center; border: solid 1px #94bae4; }
    .lps1 .swiper-container{ margin: 0; padding: 30px 20px 20px; }
    .lps1 .swiper-slide{ margin: 0 0 0 0; width: 220px; }
    .lps1 .lps1-arrow{ width: 70px; padding-top: 20px; text-align: center; }
    .lps1-box { display: inline-block; vertical-align: middle; white-space: nowrap; }
    .lps1-box img{ display: inline-block; vertical-align: top; max-height: 60px; }
    .lps1-box div{ display: inline-block; vertical-align: top; margin-left: 15px; text-align: left; line-height: 1.4; }
    .lps1-box h3{ margin-bottom: 10px; font-size: 1.3em; color: #94a9f9; }

    .lps2{ margin: 50px 0 0; }
    .lps2 .swiper-container{ margin-top: 20px; }
    .lps2 .swiper-slide{ margin-right: 20px; }
    .lps2 .lps2-box1{ padding: 64px 0; width: 200px; border-radius: 10px; border: solid 1px #94bae4; line-height: 1.2; }
    .lps2 .lps2-box1 h3{ margin-top: 20px; font-size: 1.7em; color: #454545; }
    .lps2 .lps2-box1 p{ font-size: 1.7em; color: #0067f4; font-weight: 700; letter-spacing: -1px; font-family: Raleway; }
    .lps2 .lps2-box2{ width: 100%; border-radius: 10px; border: solid 1px #94bae4; }
    .lps2 .lps2-box2 .lps-ul{height: 240px; padding-bottom: 0; }
    .lps2-ul2{ margin-top: 20px; padding-left: 15px; }
    .lps2-ul2 li{ position: relative; color: #686868; }
    .lps2-ul2 li:before{ content: ""; position: absolute; top: 8px; left: -10px; border: 2px solid #0775fe; border-radius: 100% }

    /*hoang*/

    .expected-height-age{
        position: absolute;
        top: 23%;
    }
    .expected-height-weight{
        position: absolute;
        top: 51%;
    }
    .expected-height-mother-height{
        position: absolute;
        top: 65%;
    }
    .expected-height-father{
        position: absolute;
        top: 79%;
    }

    .input-age{
        position: absolute;
        left: 60%;
        top: 23%
    }
    .input-height-expected-height{
        position: absolute;
        top: 36%;
        left: 60%;
    }
    .expected-height-height{
        position: absolute;
        top: 37%;
    }
    .input-weight-expected-weight{
        position: absolute;
        top: 50%;
        left: 60%;
    }
    .input-father-height{
        position: absolute;
        top: 78%;
        left: 60%;
    }
    .input-mother-height{
        position: absolute;
        top: 64%;
        left: 60%;
    }
}

/**
 * popup
 */
.maeadv-icon-close3 {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
    overflow: hidden;
}

.maeadv-icon-close3::before,
.maeadv-icon-close3::after {
    content: "";
    position: absolute;
    height: 4px;
    width: 100%;
    top: 50%;
    left: 0;
    margin-top: -2px;
    background: #fff;
}

.maeadv-icon-close3::before {
    -webkit-transition: transform .3s ease;
    -moz-transition: transform .3s ease;
    -ms-transition: transform .3s ease;
    -o-transition: transform .3s ease;
    transition: transform .3s ease;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    -moz-transform: rotate3d(0, 0, 1, 45deg);
    -ms-transform: rotate3d(0, 0, 1, 45deg);
    -o-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
}

.maeadv-icon-close3::after {
    -webkit-transition: transform .6s ease;
    -moz-transition: transform .6s ease;
    -ms-transition: transform .6s ease;
    -o-transition: transform .6s ease;
    transition: transform .6s ease;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    -moz-transform: rotate3d(0, 0, 1, -45deg);
    -ms-transform: rotate3d(0, 0, 1, -45deg);
    -o-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
}

.maeadv-icon-close3:hover::before {
    -webkit-transform: rotate3d(0, 0, 1, 135deg);
    -moz-transform: rotate3d(0, 0, 1, 135deg);
    -ms-transform: rotate3d(0, 0, 1, 135deg);
    -o-transform: rotate3d(0, 0, 1, 135deg);
    transform: rotate3d(0, 0, 1, 135deg);
}

.maeadv-icon-close3:hover::after {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    -moz-transform: rotate3d(0, 0, 1, 45deg);
    -ms-transform: rotate3d(0, 0, 1, 45deg);
    -o-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
}

.popup3 {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.8);
}

.popup-box3 {
    position: relative;
    max-width: 800px;
    margin: 50px auto 40px; /*padding: 50px 30px;*/
    background-color: #fff;
    font-size: 0.8em;
}

.popup-box3 button {
    position: absolute;
    top: 20px;
    left: 20px;
}

.popup-box3 a {
    display: block;
    width: 100%;
}

.popup-box3 img {
    display: block;
    width: 100%;
    vertical-align: middle;
}