@import url('https://fonts.cdnfonts.com/css/faktum-test');
@import url('https://fonts.cdnfonts.com/css/faktum-test');
@import url("pretendardvariable.min.css");

/* common */
*,
*:before,
*:after {
    box-sizing: border-box;
}

* {
    word-break: keep-all;
}

/*html, body { scroll-behavior: smooth; } */
body {
    width: 100%;
    margin: 0 auto !important;
}

.uline {
    color: #000;
    font-size: 16px;
}

.don {
    color: #000;
    font-size: 16px;
    font-weight: bold;
}

strong {
    font-weight: 800;
    color: #000;
    font-size: 16px;
}

.slick-slide>div {
    font-size: 0;
}

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

.center-block {
    margin-left: auto;
    margin-right: auto
}

.f0 {
    font-size: 0;
}

.text-center {
    text-align: center !important
}

.text-right {
    text-align: right !important
}

.hidden {
    display: none
}

input[type="checkbox"] {
    margin: 0
}

input,
select {
    -webkit-border-radius: 0;
}

.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
}

.embed-responsive::before {
    content: "";
    display: block;
    padding-top: 56.25%;
}

.embed-responsive iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.text-right {
    text-align: right;
}

.visible-xs {
    display: none
}

header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    padding-top: 30px;
    padding-left: 50px;
    padding-right: 50px;
}

/* .fp-viewing-4 header { opacity: 0; }  */
header ul {
    display: flex;
    justify-content: space-between;
}

header ul li {
    width: auto;
    text-align: center;
}

header ul li a {
    display: block;
    font-size: 18px;
    font-weight: 700;
}

header ul li a.menu1 svg {
    display: block;
    max-width: 100%;
    height: auto;
    width: 180px;
}

.index header ul li a {
    color: #fff
}

.index header svg path {
    fill: #fff
}

.wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden
}

/* intro */
.intro_wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    left: 0;
    top: 0;
}

.intro_wrap .intro_vd {
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    transition: 1s;
}

.intro_wrap .intro_vd video {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: calc(177.778vh);
    height: calc(56.25vw);
}

.intro_wrap.remove .intro_vd {
    opacity: 0;
    transform: scale(1.15);
}

.intro_wrap .sound {
    width: 1.0417vw;
    height: 0.9375vw;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    z-index: 10;
    left: 50%;
    margin-left: -0.52vw;
    bottom: 11vh;
    transition: 0.3s;
}

.intro_wrap .sound.off {
    background-image: url(../images/sound-off.png);
}

.intro_wrap .sound.on {
    background-image: url(../images/sound-on.png);
}

.intro_wrap .sound.none {
    z-index: -1;
    opacity: 0;
    pointer-events: none;
}

/*skip*/
.skip {
    position: absolute;
    left: 50%;
    bottom: 4.6875vh;
    padding-bottom: 0.625vw;
    transform: translate(-50%, 0);
    z-index: 10;
    transition: 0.4s;
}

.skip p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9375vw;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.skip span {
    position: absolute;
    left: 50%;
    bottom: 0.1302vw;
    transform: translate(-50%, 50%);
    transition: 0.4s;
    transition-delay: 0.3s;
}

.skip span::before {
    content: "";
    display: block;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    width: 0.2604vw;
    height: 0.2604vw;
    transition: 0.4s;
}

.skip.none {
    z-index: -1;
    opacity: 0;
    pointer-events: none;
}

/*circle*/
.circle {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
    user-select: none;
    transform: scale(0.7);
    opacity: 0;
}

.circle .circle_wrap {
    position: relative;
    z-index: 10;
}

.circle .circle_wrap .fig {
    width: 33.9583vw;
    height: 33.9583vw;
    overflow: hidden;
    position: relative;
}

.circle .circle_wrap .fig::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
}

.circle .circle_wrap .fig span {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    opacity: 0;
}

.circle .circle_wrap .fig span img {
    display: block;
    width: 100%;
    position: relative;
    z-index: 1;
    opacity: 0;
}

.circle .circle_wrap .fig span .shadow {
    position: absolute;
    left: 1px;
    top: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
}

.circle .circle_wrap .fig span .shadow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fefefe;
    border-radius: 50%;
    box-shadow: inset 12vw 1vw 10vw #a9a9a9;
}

.circle.intro_cir {
    opacity: 1;
    transform: none;
    transition: 0.8s;
    transition-delay: .6s;
}

.circle.intro_cir .circle_wrap {
    transition: 0.8s;
}

.circle.intro_cir .circle_wrap .fig {
    transition: 0.6s;
}

.circle.intro_cir .circle_wrap .fig::before {
    opacity: 0;
    transition-delay: 3.6s;
}

.circle.intro_cir .circle_wrap .fig span {
    opacity: 1;
    transition: 0.8s;
    transition-delay: 2s;
}

.circle.intro_cir .circle_wrap .fig span .shadow {
    opacity: 0;
    transition-delay: 5s;
}

.circle.intro_cir .circle_wrap .fig span .shadow::before {
    transition: 2s;
    box-shadow: inset -8vw -1vw 10vw #a9a9a9;
    transition-delay: 2.6s;
}

.circle.intro_cir .circle_wrap .fig span img {
    opacity: 1;
    transition: 1s;
    transition-delay: 4.2s;
}

.circle.fade_out .circle_wrap {
    opacity: 0;
}

.circle.scale_1 .circle_wrap .fig {
    transform: scale(0.8);
}

.circle.scale_2 .circle_wrap .fig {
    opacity: 0;
    transform: none;
}

.fp-viewing-1 .circle,
.fp-viewing-2 .circle,
.fp-viewing-4 .circle {
    opacity: 0;
}

.circle .logo {
    position: absolute;
    bottom: -80px;
    width: 100%;
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: 0.8s;
    transition-delay: 0.5s;
}

.circle.on .logo {
    opacity: 1;
    transform: translateY(0);
    transition: 0.8s;
    transition-delay: 1.5s;
}

.circle .logo svg {
    max-width: 100%
}

/* about */
.about_bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    transform: scale(1.15);
    transition: opacity .5s, transform .5s;
}

.about_bg div {
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.about_bg.bg01 div {
    background-image: url(../images/bg02.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
     width: 100%;       
   
}

.about_bg.bg02 div {
    background-image: url(../images/bg02.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
     width: 100%;       
 
}



.fp-viewing-1 .bg01,
.fp-viewing-2 .bg02 {
    opacity: 1;
    transform: none;
}

.about_wrap.on~.about_bg {
    transition-delay: 0.6s;
}

.about_wrap {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    display: none;
}

.fp_wrap {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.center_wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.right_wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: right;
    text-align: center;
}

.text_wrap h3 {
    overflow: hidden;
}

.text_wrap h3 span {
    display: block;
    font-size: 16px;
    font-weight: 700;
    overflow: hidden;
    transform: translate(0, 110%);
    transition: 0.8s;
    transition-delay: 0.5s;
    color: rgba(0, 0, 0, 0.8)
}

/*.section01 p { opacity: 0; transform: translate(0,100%); overflow: hidden; transition: 0.8s; font-size: 14px; } 
.section01.on p { opacity: 1; transform: none; transition-delay: 0.8s; } */
.text_wrap p,
.text_wrap .logo {
    overflow: hidden;
}

.text_wrap p {
    overflow: hidden;
}

.text_wrap p span {
    display: block;
    font-size: 16px;
    overflow: hidden;
    transform: translate(0, 110%);
    transition: 0.8s;
    transition-delay: 0.5s;
}

.text_wrap svg {
    overflow: hidden;
    transform: translate(0, 140%);
    transition: 0.8s;
    transition-delay: 0.5s;
}

.section.on .text_wrap svg,
.section.on .text_wrap span {
    opacity: 1;
    transform: none;
    transition-delay: 1.2s;
}

.section01 h4 {
    margin-bottom: 1.4vw;
}

.section02 .right_wrap>div {
    padding-right: 50px;
}

.section02 ul {
    opacity: 0;
    transform: translate(30px, 0);
    transition: 0.8s;
    transition-delay: 0.5s;
}

.section02.on ul {
    opacity: 1;
    transition-delay: 1.2s;
    transform: none;
}

.section02 ul li {
    display: flex;
}

.section02 ul li div {
    padding-top: 10px;
    padding-bottom: 20px;
}

.section02 ul li .left {
    width: 170px;
    margin-right: 30px;
    text-align: right;
    font-weight: 700;
}

.section02 ul li .right {
    width: 280px;
    text-align: left;
    border-top: 1px solid #707070
}

.section02 ul li:first-child .right {
    border-color: transparent
}

.section03 ul {
    display: flex;
    opacity: 0;
    transition: 0.8s;
    transition-delay: 0.5s;
}

.section03.on ul {
    opacity: 1;
    transition-delay: 1.2s;
}

.section03 ul li {
    margin-right: 50px;
    text-align: left;
}

.section03 ul li:last-child {
    margin-right: 0;
}

.section03 ul li h3 {
    font-size: 20px;
    font-weight: 700;
    color: #000
}

.section03 ul li p {
    font-size: 14px;
    color: #000
}

.section04 .text_wrap h3 span {
    font-size: 24px;
}

.section04 .text_wrap p span {
    font-size: 16px;
}

.section04 .mt {
    margin-top: 60px;
}

.section05 {
    background-color: #fff
}

.section05 * {
    color: #000
}

.footer {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 40px 50px
}

.footer h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}

.footer ul li:nth-child(1) svg {
    display: block;
    max-width: 100%;
    width: 180px;
    height: auto;
}

.footer ul li:nth-child(1) h3 {
    margin-bottom: 20px;
}

.footer p {
    font-size: 14px;
}

.footer ul {
    display: flex;
    justify-content: space-between;
}

.footer ul li div {
    display: inline-block;
    vertical-align: top
}

.footer ul li div:first-child {
    padding-right: 200px;
}

.footer ul li a {
    padding-bottom: 10px;
    font-size: 26px;
    border-bottom: 1px solid #fff
}

.footer .top-btn {
    position: absolute;
    top: 40px;
    right: 50px;
    cursor: pointer;
}

.footer .top-btn img {
    width: 45px;
}

/* footer */
footer .footer {
    background-color: #fff;
    border-top: 1px solid #999;
}

footer * {
    color: #000;
    line-height: 1;
}

.footer ul li:nth-child(1) span {
    display: block;
    text-align: center;
    margin-top: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #221e1f;
}

.footer ul li:nth-child(3) {
    padding-right: 150px;
}

.footer ul li p span {
    display: inline-block;
    padding-right: 20px;
}

.fp-viewing-4 #fp-nav {
    opacity: 0;
}

#fp-nav ul li,
.fp-slidesNav ul li {
    width: 8px;
    height: 15px;
    margin: 0;
    margin-bottom: 25px
}

#fp-nav ul li a span,
.fp-slidesNav ul li a span {
    width: 0
}

#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
    width: 8px;
    height: 8px;
    margin: 0
}

#fp-nav ul li a:after {
    display: block;
    width: 130px;
    position: absolute;
    left: 4px;
    font-size: 14px;
    font-weight: 700;
    color: rgba(0, 0, 0, .4);
    transition: all .5s;
    line-height: 1
}

#fp-nav ul li a.active:after {
    left: 25px;
    color: #000;
    font-weight: 700;
}

#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span {
    width: 0;
}

#fp-nav ul li:hover a:after {
    font-weight: 700;
    color: #000
}

#fp-nav ul li:first-child a:after {
    content: "OUR BRAND PHILOSOPHY"
}

#fp-nav ul li:first-child+li a:after {
    content: "PACKAGE DESIGN"
}


#fp-nav ul li:first-child+li+li+li a:after {
    content: "LEGAL DISCLAIMER"
}


#fp-nav ul li:first-child+li+li a:after {
     content: "CONTACT"
}



#fp-nav ul li:last-child {
    margin-bottom: 0;
}

#fp-nav.fp-left {
    left: 50px
}

.ingredient-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.ingredient-slide .swiper-slide {
    transition-delay: 0.5s
}

.swiper .wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper .wrap .img-box {
    width: 33.9583vw;
    height: 33.9583vw;
    background-color: #fff;
    transform: none;
    transition: 0.6s;
    overflow: hidden;
    border-radius: 50%
}

.swiper .wrap .img-box .img-wrap {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}

.swiper .wrap .img-box div {
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.swiper .wrap .img-wrap div {
    filter: blur(1.5vw);
    transform: scale(1.2);
    transition: 0.5s;
}

.swiper .swiper-slide-active .img-wrap div {
    filter: blur(0);
    transform: none;
    transition: 0s;
    transition-delay: 0s;
}

.swiper .slide01 .wrap .img-wrap div {
    background-image: url(../images/Aloe-vera-extract.jpg)
}

.swiper .slide02 .wrap .img-wrap div {
    background-image: url(../images/Beta-Arbutin.jpg)
}

.swiper .slide02.slide02_02 .wrap .img-wrap div {
    background-image: url(../images/Green-Tea-extract.jpg)
}

.swiper .slide02.slide02_03 .wrap .img-wrap div {
    background-image: url(../images/Mix-fruit-extract.jpg)
}

.swiper .slide03 .wrap .img-wrap div {
    background-image: url(../images/Stearic-Acid.jpg)
}

.swiper .slide04 .wrap .img-wrap div {
    background-image: url(../images/Vitamin-C.jpg)
}

.swiper .slide05 .wrap .img-wrap div {
    background-image: url(../images/Hyaluronic-Acid.jpg)
}

.swiper .slide06 .wrap .img-wrap div {
    background-image: url(../images/Niacinamide.jpg)
}



/*.swiper .slide07 .wrap .img-wrap div {*/
/*    background-image: url(../images/ingredient07.png)*/
/*}*/

/*.swiper .slide08 .wrap .img-wrap div {*/
/*    background-image: url(../images/ingredient08.png)*/
/*}*/

/*.swiper .slide09 .wrap .img-wrap div {*/
/*    background-image: url(../images/ingredient09.png)*/
/*}*/

/*.swiper .slide10 .wrap .img-wrap div {*/
/*    background-image: url(../images/ingredient10.png)*/
/*}*/

/*.swiper .slide11 .wrap .img-wrap div {*/
/*    background-image: url(../images/ingredient11.png)*/
/*}*/

.progressbar {
    display: flex;
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 100%;
    padding: 0 50px
}

.progressbar:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 1px;
    z-index: -1;
    width: calc(100% - 100px);
    height: 1px;
    background-color: #8b8b8b
}

.progressbar div {
    width: calc(100% / 11);
    height: 3px;
}

.progressbar span {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    transition: all .2s
}

.progressbar .on span {
    background-color: #000;
}

.progressbar span:after {
    display: block;
    position: absolute;
    top: -25px;
    left: 0;
    font-size: 16px;
    font-weight: 700;
    opacity: 0;
}

.progressbar .on span:after {
    opacity: 1;
}

.progressbar div:first-child span:after {
    content: "1"
}

.progressbar div:first-child+div span:after {
    content: "2"
}

.progressbar div:first-child+div+div span:after {
    content: "3"
}

.progressbar div:first-child+div+div+div span:after {
    content: "4"
}

.progressbar div:first-child+div+div+div+div span:after {
    content: "5"
}

.progressbar div:first-child+div+div+div+div+div span:after {
    content: "6"
}

.progressbar div:first-child+div+div+div+div+div+div span:after {
    content: "7"
}

.progressbar div:first-child+div+div+div+div+div+div+div span:after {
    content: "8"
}

.progressbar div:first-child+div+div+div+div+div+div+div+div span:after {
    content: "9"
}

.progressbar div:first-child+div+div+div+div+div+div+div+div+div span:after {
    content: "10"
}

.progressbar div:first-child+div+div+div+div+div+div+div+div+div+div span:after {
    content: "11"
}

.ingredient-slide .text-wrap {
    position: absolute;
}

.ingredient-slide .swiper-slide .left {
    top: 55%;
    left: 50px;
    max-width: 20vw
}

.ingredient-slide .swiper-slide .center {
    max-width: 27vw;
    text-align: center;
}

.ingredient-slide .swiper-slide .right {
    right: 50px;
    max-width: 27vw;
    text-align: right;
}

.ingredient-slide .text-wrap h3 {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    opacity: 0;
    transition: 0.8s;
}

.ingredient-slide .slide01 .text-wrap h3 {
    font-size: 28px;
    letter-spacing: -.3px
}

.ingredient-slide .text-wrap.right h3,
.ingredient-slide .text-wrap.right p {
    transform: translate(-10%, 0);
}

.ingredient-slide .text-wrap.center h3,
.ingredient-slide .text-wrap.center p {
    transform: translate(0, 25%);
}

.ingredient-slide .swiper-slide-active .text-wrap h3 {
    opacity: 1;
    transform: none;
    transition-delay: 1s;
}

.ingredient-slide .text-wrap p {
    margin-top: 20px;
    opacity: 0;
    transition: 0.8s;
    letter-spacing: -1px
}

.ingredient-slide .swiper-slide-active .text-wrap p {
    opacity: 1;
    transform: none;
    transition-delay: 1.1s;
}

.ingredient-slide .text-wrap.white * {
    color: #fff
}

/*.ingredient-slide .slide02 .text-wrap { opacity: 0; visibility: hidden; transform:translate(0, 25%); transition: 0.5s; } 
.ingredient-slide .slide02 .text-wrap.on { opacity: 1; visibility: visible; transform: none; } 
.ingredient-slide .slide02 .text-wrap.on h3,.ingredient-slide .slide02 .text-wrap.on p { transition-delay: 0s; } 
.ingredient-slide .slide02 ul { margin-top: 20px; opacity: 0; transition: 0.8s; ransform: translate(-10%, 0); } 
.ingredient-slide .slide02.swiper-slide-active ul { opacity: 1; transform: none; transition-delay: 1s; } 
.ingredient-slide .slide02 ul li { position: relative; opacity: .2; padding:5px 0; text-align: right; border-top:1px solid #707070; cursor: pointer; } 
.ingredient-slide .slide02 ul li.on { opacity: 1; } 
.ingredient-slide .slide02 ul li:last-child { border-bottom:1px solid #707070 } 
.ingredient-slide .slide02 ul li.on:after { content: ""; display: block; position: absolute; bottom:0; left:0; width: 100%; height: 1px; background-color: #707070 } 
.ingredient-slide .slide02 ul li h5 { font-size: 10px; font-weight: 700; color:#000 } 
.ingredient-slide .slide02 ul li h4 { font-size: 16px; font-weight: 700; color:#000 } */

.navi-menu li {
    font-size: 0;
}

.navi-menu h3 {
    display: inline-block;
    position: relative;
    padding-left: 20px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}

.navi-menu h3:after {
    content: "";
    display: block;
    position: absolute;
    top: 3px;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #000
}

.navi-menu div {
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
}

.navi-menu span,
.navi-menu strong {
    display: inline-block;
    font-size: 12px;
}

.navi-menu span {
    vertical-align: text-top;
}

.navi-menu strong {
    font-weight: 700;
    vertical-align: middle;
}

/* product */
.product .bg {
    height: 1020px;
    background: url(../images/bg.png) no-repeat center center
}

.product svg {
    margin-top: 80px;
}

.product-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 100px;
    /*max-width: 1300px;*/
    max-width: 100%;
    margin: 0 auto;
    padding-top: 90px;
    padding-bottom: 200px;
}

.product-list li {
    width: 25%;
    margin-bottom: 80px;
    padding: 0 30px
}

.product-list li h4 {
    margin-top: 30px;
    text-align: center;
    font-size: 18px;
    line-height: 1.1;
}

.product-list li h5 {
    font-weight: 100;
    text-align: center;
    color: #666;
    padding-top: 10px;
    font-size: 14px;
}

/* product-view */
.product-view {
    padding-top: 200px;
}

.prd-top {
    display: flex;
    max-width: 900px;
    margin: 0 auto;
}

.prd-top .img {
    width: 50%;
    text-align: center;
    display: flex;
}

.prd-top .desc {
    width: 50%;
    display: flex;
    flex-basis: auto;
    padding: 15px;
}

.prd-top .desc h3 {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
}

.prd-top .desc h4 {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 500;
    color: #898989
}

.prd-top .desc p {
    position: relative;
    margin-top: 40px;
    padding-top: 40px;
    font-size: 14px;
    color: #666;
    line-height: 1.2;
}

.prd-top .desc p:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #707070
}

.prd-top .desc a {
    display: block;
    margin-top: 50px;
    padding: 20px 0;
    color: #333;
    font-size: .875rem;
    font-weight: 700;
    text-align: center;
    line-height: 1;
    border-bottom: 1px solid #000;
    border-top: 1px solid #000;
}

.how-to {
    margin-top: 100px;
    background-color: #f7f7f7;
    display: flex;
}

.how-to .howimg {
    width: 50%;
    display: flex;
    flex-basis: auto;
}

.how-to .box {
    display: flex;
    width: 50%;
    flex-basis: auto;
}

.how-to .box>div {
    max-width: 700px;
    text-align: left;
    width: 50%;
    margin: auto;
    padding: 50px 0
}

.how-to .box ul {
    margin-top: 20px;
    border-top: 3px solid #000
}

.how-to .box ul li {
    margin-bottom: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e2e2
}

.how-to .box ul li:last-child {
    margin-bottom: 0;
}

.how-to .box ul li:last-child {
    padding-bottom: 0px;
    border-bottom: 0px;
}

.how-to .box h3 {
    font-size: 21px;
    text-transform: uppercase;
}

.how-to .box ul li h4 {
    color: #000 !important;
    font-size: 17px !important;
    text-transform: uppercase;
}

.how-to .box ul li h4,
.how-to p {
    font-size: 14px;
    color: #666;
}

.product-list-wrap {
    margin-top: 100px;
}

.product-list-wrap h3 {
    font-size: 22px;
}

.view-img {
    margin-top: 100px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.product-list li a {
    display: block;
    max-width: 250px;
    margin-left: auto;
    ;
    margin-right: auto;
}

.product-list li img {
    display: none;
    max-width: 160px;
}

.product-list li img.on {
    display: block
}

.product-list li img:first-child {
    display: block;
    max-width: 160px;
}

.prd-top .img .swiper {
    padding-bottom: 50px;
}

.prd-top .img img {
    max-width: 200px
}

.arrow-wrap {
    position: relative;
    display: none;
}

.arrow-wrap * {
    vertical-align: middle
}

.arrow-wrap strong {
    color: #666;
    font-size: 13px;
}

.arrow-wrap .swiper-button-next,
.arrow-wrap .swiper-button-prev {
    position: static;
    display: inline-block;
    margin-top: 0;
    font-size: 0;
    width: auto;
    height: auto
}

.arrow-wrap .swiper-button-next {
    margin-left: 30px;
}

.arrow-wrap .swiper-button-prev {
    margin-right: 30px;
}

.arrow-wrap .swiper-button-next:after,
.arrow-wrap .swiper-button-prev:after {
    display: inline-block;
    font-size: 16px;
    vertical-align: middle;
    color: #000
}

.ingredient-slide .swiper-button-prev {
    left: calc(33.95vw - 100px);
    color: #000
}

.ingredient-slide .swiper-button-next {
    right: calc(33.95vw - 100px);
    color: #000
}

.product-view .img .swiper-slide.swiper-slide-active {
    opacity: 1 !important;
}

.product~footer {
    margin-top: 50px;
}

/*left_menu*/
.navi-menu {
    position: absolute;
    top: 0;
    left: 50px;
    opacity: 1;
    z-index: 10;
    will-change: auto;
    pointer-events: none;
    user-select: none;
    transition: 0.8s;
    transition-delay: 0.5s;
}

.navi-menu p {
    height: 50vh;
    display: flex;
    align-items: flex-end;
    transition: 1s ease-in-out;
}

.navi-menu p span {
    display: flex;
    align-items: flex-start;
    position: relative;
    padding-left: 1.6667vw;
    color: rgba(255, 255, 255, 0.8);
    opacity: 0;
    font-size: 0.8333vw;
    font-weight: 600;
    letter-spacing: 0.08em;
    transform: translate(0, 50%);
    transition: 0.6s;
    transition-delay: 0.3s;
}

.navi-menu p span::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 0.7292vw;
    height: 0.7292vw;
    margin-top: -0.3646vw;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    transition: 0.6s;
    transition-delay: 0.3s;
}

.navi-menu p span {
    color: #c3c3c3;
}

.navi-menu p span::before {
    background-color: #c3c3c3;
}

.navi-menu p span em {
    font-size: 0.5208vw;
    transform: translate(0, -30%);
}

.navi-menu p.ready {
    transform: translate(0, -5.6vh);
}

.navi-menu p.delay {
    transition-delay: 0.4s;
}

.navi-menu p.delay span {
    opacity: 1;
    transition-delay: 0.5s;
}

.navi-menu p.delay span::before {
    opacity: 1;
    transition-delay: 0.5s;
}

.navi-menu p.on span {
    color: #000;
    opacity: 1;
    transition-delay: 0.5s;
}

.navi-menu p.on span::before {
    background-color: #000;
    transition-delay: 0.5s;
}

.navi-menu .menu_wrap.down {
    animation: menu_down 1.5s forwards cubic-bezier(0.45, 0, 0.55, 1);
}

@keyframes menu_down {
    0% {
        transform: translate(0, 0);
    }

    20% {
        transform: translate(0, calc(var(--vh, 1vh) * 1));
    }

    100% {
        transform: translate(0, calc(var(--vh, 1vh) * -50));
    }
}

.navi-menu .menu_wrap.up {
    animation: menu_up 1.5s forwards cubic-bezier(0.45, 0, 0.55, 1);
}

@keyframes menu_up {
    0% {
        transform: translate(0, 0);
    }

    20% {
        transform: translate(0, calc(var(--vh, 1vh) * -1));
    }

    100% {
        transform: translate(0, calc(var(--vh, 1vh) * 50));
    }
}

.navi-menu .menu_wrap.top {
    animation: menu_top 1.5s forwards cubic-bezier(0.45, 0, 0.55, 1);
}

@keyframes menu_top {
    0% {
        transform: translate(0, 0);
    }

    20% {
        transform: translate(0, calc(var(--vh, 1vh) * -1));
    }

    100% {
        transform: translate(0, calc(var(--vh, 1vh) * 100));
    }
}

.navi-menu.out {
    opacity: 0 !important;
    transition: 0.6s !important;
    transition-delay: 0s !important;
}

.navi-menu .menu_mo.top {
    transition: 1.8s;
}

/* 250422 수정사항 */
.product-list li h5 {
    display: none;
}

.product-list li h4 {
    font-size: 16px;
    font-weight: 700;
}

.footer ul li:nth-child(1) span {
    font-weight: 400;
}

.prd-top .img img {
    /*max-width: 210px;*/
     max-width: 450px;
}

.how-to .box ul {
    border-width: 1px
}

.how-to .box ul li {
    margin-bottom: 0;
    padding-top: 15px;
    padding-bottom: 15px;
}

.navi-menu p span::before {
    width: 8px;
    height: 8px;
    margin-top: -4px;
}

.black {
    color: #000 !important;
}

.black svg path {
    fill: #000 !important;
}

#fp-nav {
    opacity: 0;
}

#fp-nav.on {
    opacity: 1;
}


/* Hide mobile video on desktop */
.desktop_video {
  display: block !important;
}
.mobile_video {
  display: none !important;
}

/* Show mobile video on screens less than 768px */
@media only screen and (max-width: 767px) {
  .desktop_video {
    display: none !important;
  }
  .mobile_video {
    display: block !important;
  }
}



/* Floating Icons Styles */

.floating-buttons {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.floating-button {
    width: 50px;
    height: 50px;
    background-color: #25d366;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    text-decoration: none;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s;
}

.floating-button:hover {
    transform: scale(1.1);
}

.call-button {
    background-color: #34b7f1; 
}




input:focus, textarea:focus, keygen:focus, select:focus {
	outline: none;
}
::-moz-placeholder {
	color: #666;
	font-weight: 300;
	opacity: 1;
}

::-webkit-input-placeholder {
	color: #666;
	font-weight: 300;
}


/* Contact Form Styling */

.innerwrap{
    margin-top: 100px;
}

.textcenter {
	text-align: center;
}
.section1 {
	text-align: center;
	display: table;
	width: 100%;
}
.section1 .shtext {
	display: block;
	margin-top: 20px;
}
.section1 .seperator {
	border-bottom:1px solid #a2a2a2;
	width: 35px;
	display: inline-block;
	margin: 20px;
}

.section1 h2 {
	font-size: 30px;
	color: #000000;
	font-weight: normal;
}

.section2 {
    width: 1200px;
    margin: 25px auto;
}
.section2 .col2 {
	width: 48.71%;
}
.section2 .col2.first {
	float: left;
}
.section2 .col2.last {
	float: right;
}
.section2 .col2.column2 {
	padding: 0 30px;
}
.section2 span.collig {
	color: #a2a2a2;
	margin-right: 10px;
	display: inline-block;
}
.section2 .sec2addr {
	display: block;
	line-height: 26px;
}
.section2 .sec2addr p:first-child {
	margin-bottom: 10px;
}
.section2 .sec2contactform input[type="text"], 
.section2 .sec2contactform input[type="email"],
.section2 .sec2contactform textarea {
    padding: 18px;
    border: 0;
    background: #EDEDED;
    margin: 7px 0;
}
.section2 .sec2contactform textarea {
	width: 100%;
	display: block;
	color: #666;
  resize:none;
}
.section2 .sec2contactform input[type="submit"] {
	padding: 15px 40px;
    color: #fff;
    border: 0;
    background: #000000;
    font-size: 16px;
    text-transform: uppercase;
    margin: 7px 0;
    cursor: pointer;
}
.section2 .sec2contactform h3 {
	font-weight: normal;
    margin: 20px 0;
    margin-top: 30px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 19px;
    color: #000000;
}

/* @media querries */

@media only screen and (max-width: 1266px) {
	.section2 {
		width: 100%;
	}
}
@media only screen and (max-width: 960px) {
	.container {
		padding: 0 30px 70px;
	}
	.section2 .col2 {
		width: 100%;
		display: block;
	}
	.section2 .col2.first {
		margin-bottom: 10px;
	}
	.section2 .col2.column2 {
		padding: 0;
	}
	body .sec2map {
		height: 250px !important;
	}
}
@media only screen and (max-width: 768px) {
	.section2 .sec2addr {
		font-size: 14px;
	}
	.section2 .sec2contactform h3 {
		font-size: 16px;
	}
	.section2 .sec2contactform input[type="text"], .section2 .sec2contactform input[type="email"], .section2 .sec2contactform textarea {
		padding: 10px;
		margin:3px 0;
	}
	.section2 .sec2contactform input[type="submit"] {
		padding: 10px 30px;
		font-size: 14px;
	}
}
@media only screen and (max-width: 420px) {
	.section1 h1 {
		font-size: 28px;
	}	
}