@charset "utf-8";

.chinese {font-family:'Malgun Gothic', sans-serif;}
.contentWrap h4 {font-size:34px;font-weight:700;line-height: 1.25;}
.contentWrap * {word-break:keep-all;}

    @media screen and (max-width:1599px){}

    @media screen and (max-width:1419px){
        .contentWrap h4 {font-size:30px;}
    }

    @media screen and (max-width:999px){
        .contentWrap h4 {font-size:24px;}
    }

    @media screen and (max-width:799px){}

    @media screen and (max-width:599px){
        .contentWrap h4 {font-size:20px;}
    }


/* pland */
.pland {text-align:center;}
.pland .tit p {font-size:18px; font-weight:300; text-transform:uppercase;}
.pland .tit h4 {margin:20px 0 80px;}
.pland .txt {margin:80px 0 60px; opacity:0;}
.pland .txt p {margin-bottom:20px; font-size:18px; line-height:1.5;}
.pland .value {display:flex; justify-content:center; gap:25px; opacity:0;}
.pland .value li {width:220px; height:220px; display:flex; align-items:center; justify-content:center; font-family:'YesevaOne', sans-serif; font-size:24px; letter-spacing:-.5px; position:relative; flex-shrink:0;}
.pland .value li .circle {width:100%; height:100%; position:absolute; display:block; border:1px solid #E9B358; border-radius:50%;}
.pland .value li .circle:before {position:absolute; display:block; content:''; border:3px solid #fff; background:#E9B358; width:15px; height:15px; border-radius:50%; top:-8px; left:calc(50% - 8px);}
.pland+.lineTxt {margin:40px 0 80px; width:100vw; height:120px; background-image:url('../img/content/linetxt.png'); background-repeat:repeat-x; opacity:0.1;}

.pland .txt.active {animation:fadeInUp 1.0s ease-in-out forwards;}
.pland .value.active {animation:fadeIn 1.0s ease-in-out forwards;}
.pland .value.active li:nth-child(2) .circle {transform:rotate(90deg); transition-duration:3s;}
.pland .value.active li:nth-child(3) .circle {transform:rotate(180deg); transition-duration:3s;}
.pland .value.active li:nth-child(4) .circle {transform:rotate(270deg); transition-duration:3s;}
.pland .value.active li:nth-child(1) .circle,
.pland .value.active li:nth-child(5) .circle {transform:rotate(360deg); transition-duration:3s;}

.pland .imgBox {position:relative; overflow:hidden;}
.pland .imgBox:before {position:absolute; display:block; content:''; background:#fff; width:100%; height:100%; transition-duration:1.5s;}
.pland .imgBox.active:before {width:0;}

    @media screen and (max-width:1599px){}

    @media screen and (max-width:1419px){
        .pland .tit p {font-size:16px;}
        .pland .tit h4 {margin:15px 0 60px;}
        .pland .txt {margin:60px 0 50px;}
        .pland .value {}
        .pland .value li {width:200px; height:200px; padding:30px; font-size:22px;}
    }

    @media screen and (max-width:1219px){
        .pland .txt p br {display:none;}
        .pland .value {gap:20px;}
        .pland .value li {width:180px; height:180px;}
    }

    @media screen and (max-width:999px){
        .pland .tit p {font-size:14px;}
        .pland .tit h4 {margin:8px 0 40px;}
        .pland .txt {margin:40px 0 50px;}
        .pland .txt p {font-size:16px; margin-bottom:15px;}
        .pland .value {flex-wrap:wrap;}
        .pland .value li {border-radius: 30px;border:1px solid #e9b45b;width: calc(100%/3 - 40px/3); height:120px; line-height:1.2;}
        .pland .value li .circle {display:none;}
    }

    @media screen and (max-width:799px){}

    @media screen and (max-width:599px){
        .pland .tit p {font-size:12px;}
        .pland .tit h4 {margin: 5px 0 25px;}
        .pland .txt {margin: 20px 0 30px;}
        .pland .txt p {font-size:14px; margin-bottom:10px;}
        .pland .imgBox {width:100%;height: 180px;}
        .pland .imgBox img {width:100%;height: 100% !important;object-fit:cover;}
        .pland .value {gap:15px;}
        .pland .value li {width:100%; height:auto; font-size:18px; border-radius:20px; padding:25px;}
        .pland+.lineTxt {margin:20px 0;}
    }

/* location */
.location {margin-bottom:150px;}
.location .mapTxt {display:flex;margin-bottom:80px;align-items: flex-end;  opacity:0;}
.location .tit {width:50%;}
.location .tab {display:flex; gap:20px; margin-top:40px; font-size:18px; text-align:center;}
.location .tab li {border:1px solid #B9B9B9; width:200px; line-height:50px; cursor:pointer; transition-duration:.3s;}
.location .tab li:hover {border:1px solid #333;}
.location .tab li.on {border:1px solid #E9B45B; color:#E9B45B;}
.location .txt {width:50%;}
.location .txt li {font-size:20px; padding-left:90px; position:relative;}
.location .txt li:not(:first-child) {margin-top:25px;}
.location .txt li span {font-weight:600; position:absolute; display:block; left:0;}
.location .txt:not(.on) {display:none;}
.location .mapWrap {width:100%; height:550px;}
.location .map {width:100%; height:100%;}
.location .map:not(.on) {display:none;}

.location .mapTxt.active {animation: fadeInUp 1.0s ease-in-out forwards;}

    @media screen and (max-width:1599px){}

    @media screen and (max-width:1419px){
        .location {margin-bottom:120px;}
        .location .mapTxt {align-items:center;}
        .location .tab {font-size:16px;}
        .location .tab li {width:180px;}
        .location .txt li {font-size:18px; padding-left:80px;}
    }

    @media screen and (max-width:999px){
        .location {margin-bottom:100px;}
        .location .mapTxt {margin-bottom:60px;}
        .location .tab {margin-top:30px;}
        .location .tab li {width: 160px;line-height: 45px;}
        .location .txt li {font-size:16px; padding-left:70px;}
        .location .txt li:not(:first-child) {margin-top:15px;}
        .location .txt li br {display:none;}
        .location .mapWrap {height: 450px;}
        
    }

    @media screen and (max-width:799px){
        .location .mapTxt {flex-wrap:wrap;}
        .location .tit {width:100%; text-align:center;}
        .location .tit h4 br {display:none;}
        .location .tab {justify-content:center; margin:35px 0 25px;}
        .location .txt {width: 100%;}
        .location .txt li {text-align:center; padding-left:0;}
        .location .txt li:not(:first-child) {margin-top:10px;}
        .location .txt li span {display:inline-block; position:relative; margin-right:6px;}
    }

    @media screen and (max-width:599px){
        .location {margin-bottom:80px;}
        .location .mapTxt {margin-bottom:30px;}
        .location .tab {font-size:14px; gap:3%;}
        .location .tab li {width:40%; line-height:40px;}
        .location .txt li {font-size:14px; line-height:1.25;}
        .location .txt li span {margin-right:3px;}
        .location .mapWrap {height:350px;}
    }

/* lifar */
.lifar {}
.lifar .txt {opacity:0;}
.lifar .txt h4 {font-size:80px; font-family:'Giveny', sans-serif; position:relative; font-weight:400; padding-bottom:5px;}
.lifar .txt h4:before {position:absolute; content:''; display:block; width:100px; height:2px; bottom:0; background:#E9B45B;}
.lifar .txt h5 {font-size:24px; font-weight:700; margin:35px 0 30px;}
.lifar .txt p {font-size:18px; line-height:1.5;}
.lifar .brand {display:flex; align-items:center; justify-content:space-between; margin-bottom:150px;}
.lifar .brand .txt {width:45%;}
.lifar .brand .imgBox {background: url('../img/content/bg_grid.png') center no-repeat;min-width: 721px;min-height:401px;display:flex;align-items:center;justify-content:center;}
.lifar .brand .imgBox img {opacity:0;}
.lifar .vitamin {display:flex;gap:40px;position: relative; margin-bottom:180px;}
.lifar .vitamin .imgBox {background-size:cover; background-repeat:no-repeat; position:relative;}
.lifar .vitamin .imgBox:after {display:block;position:absolute;content:'';background:#fff;width:100%;height:100%;}
.lifar .vitamin .imgBox.img01:after {transition: all ease-out 1s;}
.lifar .vitamin .imgBox.img02:after {transition: all ease-out 0.3s;}
.lifar .vitamin .img01 {background-image:url('../img/content/img_lifar01.jpg'); min-width:1680px; min-height:650px; width:calc(50% + 720px);}
.lifar .vitamin .img02 {background-image:url('../img/content/img_lifar02.jpg'); min-width:200px; min-height:650px; width:calc(50% - 760px);}
.lifar .vitamin .txt {position:absolute; color:#fff; right:calc(50% - 600px); top:25%;}
.lifar .vegan {text-align:center;background-image: url('../img/content/bg_lifar.jpg');min-height:770px;background-size:cover;background-repeat:no-repeat;background-position: center;}
.lifar .vegan .txt h4:before {display:none;}

.lifar .brand.active .txt {animation:fadeInRight 1.0s ease-in-out forwards;}
.lifar .brand.active .imgBox img {animation:fadeIn 1.0s ease-in-out forwards; animation-delay:.25s;}
.lifar .vitamin.active .txt {animation:fadeIn 1.0s ease-in-out forwards;}
.lifar .vitamin.active .imgBox.img01:after {transform:translateX(-100%);}
.lifar .vitamin.active .imgBox.img02:after {transform:translateX(100%);}
.lifar .vegan.active .txt {animation: fadeInUp 0.75s ease-in-out forwards;}

    @media screen and (max-width:1919px){
        .lifar .vitamin {gap:2%;}
        .lifar .vitamin .img01 {width:89%; min-width:inherit;}
        .lifar .vitamin .img02 {width:9%; min-width:inherit;}
        .lifar .vitamin .txt {right: 20%;}
    }

    @media screen and (max-width:1599px){}

    @media screen and (max-width:1419px){
        .lifar .txt h4 {font-size:65px;}
        .lifar .txt h5 {font-size:22px;margin: 30px 0 20px;}
        .lifar .txt p {font-size:16px;}
        .lifar .brand {margin-bottom:100px;}
        .lifar .brand .imgBox {width:50%;min-width:inherit;min-height:inherit;height: 26vw;background-size: cover;}
        .lifar .brand .imgBox img {width:50%;}
        .lifar .vitamin {margin-bottom:120px;}
        .lifar .vitamin .img01 {min-height:inherit; height:600px;}
        .lifar .vitamin .img02 {min-height:inherit;}
        .lifar .vitamin .txt {top:30%;}
        .lifar .vegan {min-height: 600px;}
    }

    @media screen and (max-width:999px){
        .lifar .txt h4 {font-size:55px;}
        .lifar .txt h5 {font-size:18px;margin: 30px 0 15px;}
        .lifar .txt p {}
        .lifar .brand {flex-wrap:wrap;}
        .lifar .brand .txt {width:100%;margin-bottom: 50px; text-align:center;}
        .lifar .brand .txt h4:before {left:50%; transform:translateX(-50%);}
        .lifar .brand .imgBox {width:100%;height: 350px;}
        .lifar .brand .imgBox img {width:40%;}
        .lifar .vitamin {margin-bottom:100px;}
        .lifar .vitamin .img01 {height:500px;}
        .lifar .vitamin .txt {top:50%; transform:translateY(-50%); right:auto; width:89%; padding-left:10%;}
        .lifar .vegan {min-height: 450px;}
        .lifar .vegan .txt h5 {margin: 10px 0 15px;}
    }

    @media screen and (max-width:799px){
        .lifar .txt h4 {font-size:40px;}
        .lifar .txt h4:before {width:50px;}
    }

    @media screen and (max-width: 599px){    
        .lifar .txt h5 {font-size:16px;margin: 20px 0 15px;}
        .lifar .txt p {font-size:14px;}
        .lifar .brand {margin-bottom:60px;}
        .lifar .brand .txt {margin-bottom: 30px;}
        .lifar .brand .imgBox {height: 250px;}
        .lifar .vitamin {margin-bottom:60px;}
        .lifar .vitamin .img01 {height:400px;width: 100%;}
        .lifar .vitamin .img02 {display:none;}
        .lifar .vitamin .txt {padding:0 3%;text-align: center;width: 100%;}
        .lifar .vitamin .txt h4:before {transform:translateX(-50%); left:50%;}
        .lifar .vegan {min-height: 350px;background-position: bottom -30px center;}
        .lifar .vegan .txt h5 {margin: 5px 0 15px;}
    }

    @media screen and (max-width:499px){
        .lifar .txt h4 {font-size: 32px;}
        .lifar .txt p br {display:none;}
        .lifar .brand .imgBox {height: 200px;}
        .lifar .brand .imgBox img {width:50%;}
    }


/* butipure */
.butipure {}
.butipure .txt {opacity:0;}
.butipure .txt h4 {font-size:50px; font-weight:900; position:relative; padding-bottom:20px;}
.butipure .txt h4:before {position:absolute; content:''; display:block; width:100px; height:2px; bottom:0; background:#E9B45B;}
.butipure .txt h5 {font-size:24px; font-weight:700; margin:35px 0 30px;}
.butipure .txt p {font-size:18px; line-height:1.5;}
.butipure .imgSec {display:flex; gap:40px; margin-bottom:150px;}
.butipure .imgSec .imgBox {background-size: cover;background-repeat:no-repeat;background-position: center;position:relative;}
.butipure .imgSec .imgBox:after {display:block;position:absolute; content:''; background:#fff; width:100%; height:100%;}
.butipure .imgSec .img01 {background-image:url('../img/content/img_buti01.jpg');min-width:600px;min-height:650px;width:calc(50% - 280px);}
.butipure .imgSec .img02 {background-image:url('../img/content/img_buti02.jpg'); min-width:1280px; min-height:650px; width:calc(50% + 320px);}
.butipure .imgSec .img01:after {transition: all ease-out 0.4s;}
.butipure .imgSec .img02:after {transition: all ease-out 1s;}
.butipure .brand {display:flex; align-items:center; justify-content:space-between; margin-bottom:50px;}
.butipure .brand.container {width:1200px;}
.butipure .brand .imgBox {background:url('../img/content/bg_grid.png') center no-repeat; min-width:721px; min-height:401px; display:flex; align-items:center; justify-content:center;}
.butipure .brand .imgBox img {opacity:0;}
.butipure .product {margin-bottom:100px;}
.butipure .product ul {display: flex;gap:40px;justify-content:center;}
.butipure .product ul:first-child {margin-bottom:40px;padding: 0 20px;}
.butipure .product ul li {max-width:330px;}
.butipure .product ul li:hover img {animation:shakeProd .3s;}
.butipure .product ul.pc_list {}
.butipure .product ul.m_list {display:none;}
.butipure .product .swiper-button-prev,
.butipure .product .swiper-button-next {display:none;}
.butipure .certi {position:relative; padding-bottom:150px;}
.butipure .certi:before {position:absolute;display:block;content:'';background:#F8F5F0;top:200px;bottom:0;left:0;right:0;z-index: 0;}
.butipure .certi > .imgBox {overflow:hidden; background:url('../img/content/img_buti03.jpg'); min-height:400px; margin-bottom:70px; position:relative; transition: all ease-out 1.5s; opacity:0;}
.butipure .certi .certiWrap {display:flex;justify-content:center;gap:20px;opacity:0;}
.butipure .certi .certiWrap .imgBox {position:relative;}
.butipure .certi .certiWrap .imgBox:before {position:absolute;display:block;content:'';bottom: -20px;left: -95px;width:191px;height:272px;background:url('../img/content/brandK.png') no-repeat;background-size:contain;}
.butipure .certi .certiWrap .imgBox img {box-shadow:0 3px 6px rgba(0,0,0,0.16);}
.butipure .certi .certiWrap .list {display:flex;align-items:center;justify-content:center;background:#fff;max-width:360px;padding:28px;border-radius:50px;border:1px solid #E9B762;z-index: 1;}
.butipure .certi .certiWrap ul li {padding: 8px 0 8px 10px;position:relative;word-break: keep-all;line-height: 1.25;font-size: 18px;}
.butipure .certi .certiWrap ul li:before {position:absolute; display:block; content:'·'; left:0;}

.butipure .imgSec.active .imgBox.img01:after {transform:translateX(-100%);}
.butipure .imgSec.active .imgBox.img02:after {transform:translateX(100%);}
.butipure .brand.active .txt {animation:fadeInRight 1.0s ease-in-out forwards;}
.butipure .brand.active .imgBox img {animation:fadeIn 0.75s ease-in-out forwards; animation-delay:.25s;}
.butipure .certi.active > .imgBox {opacity:1;}
.butipure .certi.active .certiWrap {animation:fadeIn 0.75s ease-in-out forwards; animation-delay:.75s;}

    @media screen and (max-width:1919px){
        .butipure .imgSec {gap:2%;}
        .butipure .imgSec .img01 {width:30%; min-width:inherit;}
        .butipure .imgSec .img02 {width:68%; min-width:inherit;}
    }

    @media screen and (max-width:1599px){
        .butipure .product ul {}
        .butipure .product ul li {width: 22%;}
        .butipure .certi > .imgBox {width: calc(100% - 100px) !important;}
    }

    @media screen and (max-width:1419px){
        .butipure .txt h4 {font-size: 45px;}
        .butipure .txt h5 {font-size:22px;margin: 30px 0 20px;}
        .butipure .txt p {font-size:16px;}
        .butipure .imgSec {margin-bottom:100px;}
        .butipure .imgSec .img01 {min-height:inherit;height: 400px;}
        .butipure .imgSec .img02 {min-height:inherit;}
        .butipure .brand {margin-bottom:100px;}
        .butipure .brand .imgBox {width:50%;min-width:inherit;min-height:inherit;height: 26vw;background-size: cover;}
        .butipure .brand .imgBox img {width:50%;}
    }

    @media screen and (max-width:999px){
        .butipure .txt h4 {font-size:40px;}
        .butipure .txt h5 {font-size:18px;margin: 30px 0 15px;}
        .butipure .txt p {}
        .butipure .imgSec {margin-bottom:80px;}
        .butipure .imgSec .img01 {height: 300px;}
        .butipure .brand {flex-wrap:wrap; margin-bottom:80px;}
        .butipure .brand .txt {width:100%;margin-bottom: 50px; text-align:center;}
        .butipure .brand .txt h4:before {left:50%; transform:translateX(-50%);}
        .butipure .brand .imgBox {width:100%;height: 350px;}
        .butipure .brand .imgBox img {width:40%;}
        .butipure .product {padding: 0 40px !important;margin-bottom: 80px;}
        .butipure .product ul.pc_list {display:none;}
        .butipure .product ul.m_list {display:flex;justify-content:flex-start;gap: 0;}
		.butipure .product ul li {max-width:inherit;}
		.butipure .product .swiper-button-prev,
		.butipure .product .swiper-button-next {display:block;width: auto;height: auto;}
        .butipure .product .swiper-button-prev:after,
		.butipure .product .swiper-button-next:after {color:#555; font-size:35px;}
        .butipure .certi {padding-bottom:100px;}
        .butipure .certi:before {top:20vw;}
        .butipure .certi > .imgBox {width:94% !important;height: 40vw;min-height: inherit;}
        .butipure .certi .certiWrap {flex-wrap:wrap; gap:40px;}
        .butipure .certi .certiWrap .imgBox {padding:0 95px;}
        .butipure .certi .certiWrap .imgBox:before {left:0;}
        .butipure .certi .certiWrap .list {width: 94%;max-width: inherit;}
        .butipure .certi .certiWrap ul li {font-size:16px;}
    }

    @media screen and (max-width:799px){
        .butipure .txt h4 {font-size:30px;}
        .butipure .txt h4:before {width:50px;}
    }

    @media screen and (max-width:599px){
        .butipure .txt h5 {font-size:16px;margin: 20px 0 15px;}
        .butipure .txt p {font-size:14px;}
        .butipure .imgSec {margin-bottom:60px;}
        .butipure .imgSec .img01 {display:none;}        
        .butipure .imgSec .img02 {height: 50vw;width:100%;}        
        .butipure .brand {margin-bottom:40px;}
        .butipure .brand .txt {margin-bottom: 30px;}
        .butipure .brand .imgBox {height: 250px;}
        .butipure .product {padding: 0 20px !important; margin-bottom:40px;}
        .butipure .product .swiper-button-prev:after, .butipure .product .swiper-button-next:after {font-size:25px;}
        .butipure .certi {padding-bottom:80px;}
        .butipure .certi .certiWrap .imgBox {width: 80%;padding: 0px 13%;}
        .butipure .certi .certiWrap .imgBox:before {width: 32%; height: 50%;}
        .butipure .certi .certiWrap .list {border-radius:30px;padding: 20px;}
        .butipure .certi .certiWrap ul li {font-size:14px;padding: 5px 0 5px 10px;}
    }

     @media screen and (max-width:499px){
        .butipure .txt h4 {font-size:24px;}
        .butipure .brand .imgBox {height: 200px;}
        .butipure .brand .imgBox img {width:50%;}
    }