html,
body {
    border: none;
    margin: 0;
    padding: 0;
}

html {
    box-sizing: border-box;
}

body {
    position: relative;
    width: 100%;
    font-family: "Open Sans", sans-serif;
    font-size: 100%;
    font-weight: 400;
    font-style: normal;
    line-height: 1.4;
    background-color: #ffffff;
    color: #1a1a1a;
    margin: 0;
    overflow-x: hidden;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
    -webkit-font-smoothing: antialiased;
}

iframe {
    max-width: 100%;
}

img {
    max-width: 100%;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

a {
    cursor: pointer;
}

p:last-child {
    margin-bottom: 0;
}

@keyframes flash-btn {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    75% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.section-video {
    position: relative;
}

.section-video iframe {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    object-fit: cover;
    -o-object-fit: cover;
}

.section-1 {
    background: linear-gradient(95deg, #f26067 0%, #f24875 100%);
    text-align: center;
    padding: 74px 0 171px;
}

.product-set .set-title {
    margin: 60px 0 54px;
}

.product-set .set-button {
    position: absolute;
    left: 41px;
}

.product-set .set-col {
    position: relative;
    width: 100%;
    margin-bottom: 65px;
}

.product-set .set-col.msmproduct {
    text-align: right;
    margin-top: 85px;
}

.product-set .set-wrapper {
    display: flex;
    width: 100%;
}

.product-set .nutritions-set .set-img img {
    margin-right: -17px;
}

.product-set .nutritions-set .set-button {
    bottom: 68px;
}

.product-set .womansarang .set-img img {
    margin-right: -34px;
}

.product-set .womansarang .set-button {
    bottom: -105px;
}

.product-set .msmproduct .set-img img {
    margin-right: -2px;
}

.product-set .msmproduct .set-button {
    bottom: -105px;
    left: 104px;
}

.section-2 {
    background: url(../img/img2-bg.jpg) no-repeat 50% 50%/cover;
    padding: 139px 0 62px;
}

.purchase-que .que-wrapper {
    position: relative;
}

.purchase-que .que-title {
    text-align: right;
}

.purchase-que .que-comments {
    width: 100%;
    list-style: none;
    margin-top: -90px;
}

.purchase-que .que-comments .comment-1 {
    margin-left: 96px;
    opacity: 0;
    transition: ease 1s;
    transform: translate(0, 129px);
}

.purchase-que .que-comments .comment-2 {
    margin-left: -7px;
    margin-top: -14px;
    opacity: 0;
    transition: ease 1s .1s;
    transform: translate(0, 156px);
}

.purchase-que .que-comments .comment-3 {
    margin-left: 33px;
    margin-top: -14px;
    opacity: 0;
    transition: ease 1s .3s;
    transform: translate(0, 189px);
}

.purchase-que .que-graph {
    position: absolute;
    top: 138px;
    right: 0;
    width: 100%;
    text-align: right;
}

.purchase-que .que-graph img {
    margin-right: -20px;
}

.section-3 {
    background: url(../img/img3-bg.jpg) no-repeat 50% 50%/cover;
    padding: 116px 0 344px;
}

.up-down .container {
    position: relative;
}

.up-down .updown-title img {
    margin-left: 40px;
}

.up-down .updown-up {
    position: absolute;
    top: 12px;
    right: 75px;
    transition: ease .6s;
    transform: translate(0, 130px);
}

.up-down .updown-down {
    position: absolute;
    top: 73px;
    right: 373px;
    transition: ease .6s;
    transform: translate(0, -130px);
}

.section-4 {
    padding: 162px 0 48px;
    text-align: center;
}

.more .more-wrapper {
    display: flex;
    justify-content: center;
    margin: 52px 0 95px;
}

.more .more-wrapper .set-button {
    margin-top: 27px;
    cursor: pointer;
    animation: flash-btn 1.8s linear infinite;
}

.more .more-wrapper.col-2 > div {
    margin: 0 3px;
}

.section-5 {
    background-color: #fdf9de;
    padding: 132px 0 60px;
}

.congratulation .event-title {
    text-align: center;
}

.congratulation .event-wrap {
    position: relative;
    margin-top: 15px;
    overflow: hidden;
}

.congratulation .register-btn {
    position: absolute;
    top: 108px;
    left: 82px;
    text-align: center;
}

.congratulation .register-btn .btn-sub-txt {
    margin-top: 26px;
}

.congratulation .randombox {
    text-align: right;
    margin-right: 70px;
}

.congratulation .event-comment {
    margin: 25px 0 70px;
    box-shadow: 0px 0 8px -1px #e6e5e14d;
}

/* Popup */
.more .more-popup {
    position: fixed;
    background-color: #fff;
    width: 720px;
    height: calc(100% - 80px);
    top: 40px;
    left: 50%;
    display: none;
    transform: translate(-50%, 0);
    opacity: 0;
    visibility: hidden;
    transition: .3s ease;
    z-index: 9;
}

.more .more-popup-bg {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    background-color: #3c3c3ce6;
    opacity: 0;
    visibility: hidden;
    z-index: 2;
}

.more .more-popup.show,
.more .more-popup.show ~ .more-popup-bg  {
    display: block;
    opacity: 1;
    visibility: visible;
}

.more .more-popup .popup-close {
    width: 66px;
    height: 66px;
    position: absolute;
    top: -30px;
    left: -30px;
    background-color: #b4b4b4;
    border-radius: 50%;
    z-index: 9;
    cursor: pointer;
}

.more .more-popup .popup-close .close-icon {
    position: relative;
}

.more .more-popup .popup-close .close-icon::before {
    content: "";
    width: 36px;
    height: 2px;
    position: absolute;
    background-color: #fff;
    transform: rotate(45deg);
    top: 32px;
    left: 15px;
}

.more .more-popup .popup-close .close-icon::after {
    content: "";
    width: 36px;
    height: 2px;
    position: absolute;
    background-color: #fff;
    transform: rotate(135deg);
    top: 32px;
    left: 15px;
}

.more .more-popup .wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: scroll;
}

.more-popup .container {
    padding: 0 38px;
}

.more .vitamin-popup .popup-title {
    position: relative;
    height: 297px;
    background: url(../img/popup/vitamin/popup-img1-bg.jpg) no-repeat 50% 0/723px;
}

.more .vitamin-popup .popup-title .title-txt {
    position: absolute;
    top: 90px;
    right: 129px;
}

.more .vitamin-popup .title-bottom {
    position: relative;
    background-color: #fa8901;
    padding: 60px 0;
}

.more .vitamin-popup .title-bottom::after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translate(-50%, 0) skew(11deg, 332deg) rotate(154deg);
    margin-left: -3px;
    width: 19px;
    height: 35px;
    background-color: #fa8901;
}

.more .vitamin-popup .title-bottom img {
    margin-top: 2px;
    margin-left: 6px;
}

.more .vitamin-popup .vitamin-chart {
    margin-top: 115px;
}

.more .vitamin-popup .vitamin-chart .chart-img {
    margin: 58px 0 0;
    text-align: center;
}

.more .vitamin-popup .vitamin-chart .chart-img img {
    margin-right: -4px;
}

.more .vitamin-popup .vitamin-chart .chart-sub-img {
    margin-top: 69px;
}

.more .vitamin-popup .vitamin-chart .chart-sub-img img {
    margin-right: 9px;
}

.more .vitamin-popup .vitamin-graph {
    margin-top: 149px;
}

.more .vitamin-popup .vitamin-graph .graph-title img {
    margin-left: 8px;
}

.more .vitamin-popup .vitamin-graph .graph-img {
    margin-top: 59px;
}

.more .vitamin-popup .vitamin-hue {
    background-color: #fa8901;
    padding-bottom: 78px;
    margin-top: 112px;
    overflow: hidden;
}

.more .vitamin-popup .vitamin-hue .container {
    background-color: #fff;
    padding-bottom: 74px;
    margin: 12px;
}

.more .vitamin-popup .vitamin-hue .info-title {
    position: relative;
    padding-top: 94px;
}

.more .vitamin-popup .vitamin-hue .info-title::after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 50%;
    width: 36px;
    height: 3px;
    transform: translate(-50%, 0);
    background-color: #232323;
}

.more .vitamin-popup .vitamin-hue .hue-section-1 {
    margin-top: 71px;
}

.more .vitamin-popup .vitamin-hue .hue-section-2 {
    margin-top: 78px;
}

.more .vitamin-popup .vitamin-hue .hue-section-3 {
    margin-top: 78px;
}

.more .vitamin-popup .vitamin-footer {
    margin-top: -68px;
}

.more .immune-popup .popup-title {
    position: relative;
    height: 418px;
    background: url(../img/popup/immune/popup-img2-bg.jpg) no-repeat 50% 0/723px;
}

.more .immune-popup .popup-title .title-txt {
    position: absolute;
    top: 88px;
    left: 106px;
}

.more .immune-popup .immune-zinc {
    background-color: #45c2b2;
}

.more .immune-popup .immune-zinc .container {
    background-color: #fff;
    padding-bottom: 76px;
    margin: 0 16px;
    transform: translateY(-122px);
}

.more .immune-popup .immune-zinc .zinc-title {
    padding-top: 104px;
}

.more .immune-popup .immune-zinc .zinc-section {
    padding-top: 25px;
}

.more .immune-popup .immune-zinc .zinc-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 52px;
    margin-left: 5px;
}

.more .immune-popup .immune-zinc .zinc-wrapper::before {
    content: "";
    position: absolute;
    top: 63px;
    left: 50%;
    width: 1px;
    height: 176px;
    transform: translate(-50%, 0);
    background-color: #ddd;
    margin-left: -4px;
}

.more .immune-popup .immune-zinc .zinc-wrapper > div {
    padding: 0 59px;
}

.more .immune-popup .immune-zinc .title-bottom {
    position: relative;
    transform: translateY(-61px);
}

.more .immune-popup .immune-zinc .title-bottom::after {
    content: "";
    position: absolute;
    bottom: -75px;
    left: 50%;
    transform: translate(-50%, 0) skew(11deg, 332deg) rotate(154deg);
    margin-left: -3px;
    width: 19px;
    height: 35px;
    background-color: #45c2b2;
}

.more .immune-popup .immune-chart {
    margin-top: 126px;
}

.more .immune-popup .immune-chart .chart-img {
    margin-top: 68px;
}

.more .immune-popup .immune-chart .chart-sub-img {
    margin-top: 70px;
}

.more .immune-popup .immune-graph {
    margin: 132px 0;
}

.more .immune-popup .immune-graph .graph-img {
    margin-top: 66px;
}

.more .immune-popup .immune-graph .vitamin-c {
    margin-top: 88px;
}

.more .immune-popup .immune-graph .vitamin-d {
    margin-top: 62px;
    max-width: 536px;
}

.more .milk-popup .popup-title {
    position: relative;
    height: 297px;
    background: url(../img/popup/milk/popup-img1-bg.jpg) no-repeat 50% 0/723px;
}

.more .milk-popup .popup-title .title-txt {
    position: absolute;
    top: 90px;
    left: 98px;
}

.more .milk-popup .title-bottom {
    position: relative;
    background-color: #ce043c;
    padding: 60px 0;
}

.more .milk-popup .title-bottom::after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translate(-50%, 0) skew(11deg, 332deg) rotate(154deg);
    margin-left: -3px;
    width: 19px;
    height: 35px;
    background-color: #ce043c;
}

.more .milk-popup .title-bottom img {
    margin-top: 2px;
    margin-left: 6px;
}

.more .milk-popup .milk-section {
    margin-top: 115px;
}

.more .milk-popup .milk-section .section-img {
    margin-top: 46px;
}

.more .milk-popup .milk-section .section-desc {
    margin-top: 45px;
}

.more .milk-popup .milk-chart {
    margin-top: 111px;
}

.more .milk-popup .milk-chart .chart-btn {
    margin-top: 21px;
}

.more .milk-popup .milk-chart .chart-img {
    margin-top: 80px;
}

.more .milk-popup .milk-chart .chart-sub-img {
    margin-top: 80px;
}

.more .milk-popup .milk-graph {
    margin-top: 138px;
}

.more .milk-popup .milk-graph .graph-img {
    margin-top: 59px;
}

.more .milk-popup .milk-hue {
    margin-top: 134px;
    background-color: #ce043c;
    overflow: hidden;
    padding-bottom: 78px;
}

.more .milk-popup .milk-hue .container {
    background-color: #fff;
    margin: 15px 13px 13px;
    padding-bottom: 85px;
}

.more .milk-popup .milk-hue .info-title {
    position: relative;
    padding-top: 91px;
}

.more .milk-popup .milk-hue .info-title::after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 50%;
    width: 36px;
    height: 3px;
    transform: translate(-50%, 0);
    background-color: #232323;
}

.more .milk-popup .milk-hue .hue-section-1 {
    margin-top: 61px;
}

.more .milk-popup .milk-hue .hue-section-1-img {
    margin-top: 74px;
}

.more .milk-popup .milk-hue .hue-section-2 {
    margin-top: 93px;
}

.more .milk-popup .milk-hue .hue-wrapper {
    margin-top: 53px;
    overflow: hidden;
}

.more .milk-popup .milk-hue .hue-wrapper img {
    width: 192px;
}

.more .milk-popup .milk-hue .hue-wrapper > div {
    float: left;
    width: calc(33.333333% + 2px);
    margin-left: -4px;
}

.more .milk-popup .milk-hue .hue-wrapper > div.col-1 {
    margin-left: 0;
}

.more .milk-popup .milk-footer {
    margin-top: -68px;
}

.more .nutrient-popup .safe-mark {
    margin-top: 34px;
    text-align: right;
}

.more .nutrient-popup .safe-mark .col {
    display: inline-block;
    margin-left: 18px;
    margin-right: -5px;
}

.more .nutrient-popup .nutrient-title {
    margin-top: 56px;
}

.more .nutrient-popup .nutrient-title .title-img {
    margin-top: 56px;
}

.more .nutrient-popup .nutrient-product {
    background-color: #f98d8d;
}

.more .nutrient-popup .nutrient-product .container {
    background-color: #fff;
    margin: 51px 15px 12px;
    padding-bottom: 72px;
}

.more .nutrient-popup .nutrient-product .product-title {
    padding-top: 82px;
    margin-left: 8px;
    margin-top: -20px;
    position: relative;
    background-color: #f98d8d;
}

.more .joint-popup .joint-title {
    margin-top: 98px;
}

.more .joint-popup .joint-product {
    margin-top: 75px;
}

.more .joint-popup .joint-status {
    background-color: #299c00;
    padding: 51px 0 46px;
    margin-top: 107px;
}

.more .joint-popup .joint-howto-msm {
    margin-top: 80px;
}

.more .joint-popup .joint-msm-result {
    background-color: #f1f1f1;
    padding: 108px 0 88px;
    margin-top: 119px;
}

.more .joint-popup .joint-msm-result .msm-desc {
    margin-top: 49px;
    margin-left: 5px;
}

.more .joint-popup .joint-chart {
    margin-top: 82px;
}

.more .joint-popup .joint-chart.chart-1 .chart-desc {
    margin-top: 33px;
    margin-left: 3px;
}

.more .joint-popup .joint-chart.chart-2 .chart-desc {
    margin-top: 28px;
    margin-left: -3px;
}

.more .joint-popup .joint-foot {
    margin: 92px 0 60px;
}

.more .joint-popup .joint-foot .col {
    border-bottom: 2px dotted #444;
    margin: 0 28px;
    text-align: left;
}

.more .joint-popup .joint-foot .col img {
    margin-left: 16px;
}

.more .joint-popup .joint-foot .col.col-1 {
    padding: 0 0 47px;
}

.more .joint-popup .joint-foot .col.col-1 img {
    margin-left: 21px;
}

.more .joint-popup .joint-foot .col.col-2 {
    padding: 28px 0 19px;
}

.more .joint-popup .joint-foot .col.col-3 {
    padding: 52px 0;
    border-bottom: 0;
}

.more .nutrient-popup .nutrient-product {
    position: relative;
    padding-bottom: 5px;
}

.more .nutrient-popup .nutrient-product .product-img {
    padding-top: 73px;
    margin-left: 44px;
}

.more .nutrient-popup .nutrient-product .product-desc {
    padding-top: 19px;
    margin: 0 -8px;
}

.more .nutrient-popup .nutrient-product .product-desc  .col {
    display: flex;
    text-align: left;
    padding: 0 0 36px;
    align-items: center;
}

.more .nutrient-popup .nutrient-product .product-desc .img {
    width: 166px;
    text-align: center;
}

.more .nutrient-popup .nutrient-product .product-desc .txt {
    flex: 1;
}

.more .nutrient-popup .nutrient-product .product-desc .img img {
    margin-left: -22px;
}

.more .nutrient-popup .nutrient-info {
    margin-top: 158px;
}

.more .nutrient-popup .nutrient-info .info-title {
    position: relative;
}

.more .nutrient-popup .nutrient-info .title-badge {
    position: absolute;
    top: -63px;
    left: 83px;
}

.more .nutrient-popup .nutrient-info .info-img {
    margin-top: 86px;
    margin-left: 40px;
}

.more .nutrient-popup .nutrient-info .info-desc {
    margin-top: 40px;
    margin-left: 8px;
}

.more .nutrient-popup .nutrient-recommend {
    margin: 144px 0 90px;
}

.more .nutrient-popup .nutrient-recommend .recommend-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 50px 0 71px;
    margin-left: 11px;
}

.more .nutrient-popup .nutrient-recommend .recommend-wrap .col {
    padding: 0 8px;
}

.more .nutrient-popup .nutrient-recommend .recommend-desc {
    margin-left: 8px;
}