@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Sansita:ital,wght@0,400;0,700;0,800;0,900;1,400;1,700;1,800;1,900&display=swap');

html {margin:0; padding:0; height:100%;  overflow: hidden scroll; box-sizing: border-box;}
body {min-height:100%;width:100%;height:100%; min-width: 320px;  float:left;position:relative; box-sizing: border-box; margin:0px; padding:0px 0px 0 0px;font-family:  'Nunito',sans-serif; font-weight:400;font-size:14px;color:#40241c; background: #ffffff ;  -webkit-text-size-adjust: 100%; -moz-text-size-adjust: none; -ms-text-size-adjust: 100%;}

html.disableScroll{overflow:hidden;}

a{ text-decoration:underline;  color:#242424; -webkit-transition: all 0.3s ease !important;  -moz-transition: all 0.3s ease!important; -o-transition: all 0.3s ease!important; -ms-transition: all 0.3s ease!important; transition: all 0.3s ease!important;}
a:hover{ text-decoration:none;}
a img{ border:0px;}

img{vertical-align:middle;  }
img.resp{width:100%;}
input,textarea,select{font-family: 'Poppins', sans-serif; margin:0}
button::-moz-focus-inner { border: 0; padding: 0;}

form,p,table,ul{ margin:0px; padding:0px;}
table {border-collapse:collapse;}
table tr td{ border-spacing:0px;}

h1,h2,h3,h4,h5{margin:0px; padding:0px; font-weight:700; }
strong{font-weight:700}

section .layout-center div.is_static ol, section .layout-center div.is_static ul: not(.bread):not(.tag) :not(.unit-rating)  {padding:0px; margin:0px 0px 10px 30px;}
section .layout-center div.is_static ol li, section .layout-center div.is_static ul:not(.bread) :not(.tag) :not(.unit-rating) li {font-size:14px;font-weight:300;color:#1f222a; line-height:145%; padding:0px 0px 10px 10px; }
section .layout-center div.is_static ul:not(.bread) :not(.tag) :not(.unit-rating) li {padding-left:30px;list-style-type:none;background: url(../images/svg/dot.svg) no-repeat left 5px; background-size:10px auto;}

textarea,
input[type=password],
input[type=text] {-webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; -webkit-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; }

input,
textarea{box-sizing: border-box;}

#cover{width:100%; overflow:hidden}

.f-left{float:left;}
.f-right{float:right;}
.center{text-align:center!important;}
.align-right{text-align:right!important;}
.align-left{text-align:left!important;}
.align-middle{vertical-align:middle;}
.underline {text-decoration:underline;}
div.clear-x {clear: both;height: 1px;font-size: 1px;line-height: .5; display:block;} 
.clear.line {border:0px; margin-bottom: 40px; margin-top:30px; background:#E1E1E1 ; } 
.separator {float:left; width:100%; height:1px; line-height:1px; font-size:1px;} 
.italic {font-style:italic;} 
.strong {font-weight:bold; color:#000000;} 
.no-padding {padding:0!important;} 
.nowrap {white-space: nowrap;} 
.no-overflow {overflow:visible!important;} 
.hidden{display:none;}
.relative{position:relative;}


section{ padding:50px 0 50px 0px;  position:relative;}

.layout-center {max-width:1250px; margin:0 auto; position:relative;  padding-left:15px; padding-right:15px;}

header{height:681px;display:block; position:relative;}
header .layout-center{z-index: 6000; padding-top:140px;}
header .layout-center .wrap{display:inline-block; text-align:center;}
header .layout-center .arrow-down{padding-top:35px; padding-bottom:30px;}
header .layout-center .button{margin:0px auto}



.button{height:82px; width:330px; text-decoration:none; padding:6px 61px; position:relative; font-family: 'Sansita', sans-serif;  text-align:left;color:#ffffff; font-size:47px; line-height: 47px; font-weight:700;  border-radius:82px; box-sizing:border-box; display:inline-block;box-shadow: 0px 4px 27px 0px rgba(79, 138, 32, 0.7); background-image: -moz-linear-gradient( 90deg, rgb(82,146,33) 0%, rgb(112,186,54) 100%); background-image: -webkit-linear-gradient( 90deg, rgb(82,146,33) 0%, rgb(112,186,54) 100%); background-image: -ms-linear-gradient( 90deg, rgb(82,146,33) 0%, rgb(112,186,54) 100%);}
.button::after{width:52px; height:52px; position:absolute; right:15px; top:15px; content:' '; background: url('../images/svg/basket.svg') no-repeat center center; background-size: cover}
.button span{display:block; font-size:14.5px; line-height: 14.5px; font-family:'Nunito', sans-serif; font-weight:800}
.button:hover {background-image: -moz-linear-gradient(90deg, rgb(92, 156, 43) 0%, rgb(122, 196, 64) 100%); background-image: -webkit-linear-gradient(90deg, rgb(92, 156, 43) 0%, rgb(122, 196, 64) 100%); background-image: -ms-linear-gradient(90deg, rgb(92, 156, 43) 0%, rgb(122, 196, 64) 100%); }

.parallax-layer {position: absolute; width: 100%; height: 100%; background-size: auto; background-position: center top; background-repeat: no-repeat; }
#layer0 {background-image: url('../images/header-bg.jpg'); z-index: 1; }
#layer1 {background-image: url('../images/header-bg2.png'); z-index: 1; }
#layer2 {background-image: url('../images/header-bg3.png'); z-index: 2; }
#layer3 {background-image: url('../images/header-bg4.png'); z-index: 3; }
#layer4 {background-image: url('path-to-your-image4.jpg'); z-index: 4; }

.title{margin:0 0 20px 0; padding:0; font-size:75px; line-height: 68px; color:#40241c; font-weight:700; font-family: 'Sansita', sans-serif; }
.subtitle{margin:0 0 5px 0; padding:0; font-size:27px; line-height: 35px; color:#efc153; font-weight:400; font-family: 'Gloria Hallelujah', sans-serif; }


section.section-yellow{background: #FEF6DF url('../images/section-yellow.png') no-repeat center top;  position:relative;padding:150px 0 120px 0}
section.section-yellow::after{background: url('../images/section-yellow-bottom.png') no-repeat center bottom; height:62px; width:100%; height:62px; content:' '; position:absolute; left:0; bottom:0}

section.banana-bg{background: #ffffff url('../images/banana-bg.png') no-repeat center  center; background-position: right 15% center ;}


section.section-light-yellow{background: #FCFBF5 url('../images/tree-bg.png') no-repeat center  center; background-position: left 43% center ;padding:110px 0 110px 0;}
section.section-light-yellow::before{background: url('../images/light-yellow-section.png') no-repeat center center; height:46px; width:100%; position:absolute; left:0; top:0; z-index:5000;content: ' '} 


section #sideImage1{position:absolute; left:0; bottom:-200px; z-index: 8000}
section #sideImage2{position:absolute; right:0; bottom:230px; z-index: 8000}
section #sideImage3{position:absolute; right:0; bottom:-200px; z-index: 8000}
section #sideImage4{position:absolute; right:0; top:20%; z-index: 8000}
section #sideImage5{position:absolute; left:0; bottom:0px; z-index: 8000}
section #sideImage6{position:absolute; right:0; top:0px; z-index: 8000; width:18%}

.parallax-image {position: absolute; transition: transform 0.2s; }

section .layout-center p{color:#40241c; font-size:16px; font-weight:600; line-height:160%; font-family: Nunito, sans-serif ; margin:0px auto; padding-bottom:1em}
section .layout-center p strong{font-weight:800}
section .layout-center .p1{ font-size:30px; line-height:133% ; font-weight:700; max-width:1050px; padding-bottom:1.3em }
section .layout-center .p1 strong{ font-weight:900}
section .layout-center .p2{ font-size:18px; line-height:163% ; font-weight:400; max-width:820px; padding-bottom:3em }
section .layout-center .p2 strong{ font-weight:700}
section .layout-center .p3{ font-size:40px; line-height:130% ; font-weight:400; font-family:'Gloria Hallelujah', sans-serif ; color:#efc153 ;padding-bottom:0.5em}


section .layout-center .text-layout1{display:table; width:100%;}
section .layout-center .text-layout1 > div{display:table-cell; vertical-align:top;}
section .layout-center .text-layout1 > div:first-child{width:518px;}
section .layout-center .text-layout1 > div:last-child{padding-top:20px; padding-left:50px;}
section .layout-center .text-layout1 > div h3{font-size:30px; line-height: 40px; margin:0 0 2em 0; padding:0}
section .layout-center .text-layout1 > div p{font-size:18px; line-height: 34px; margin:0 0 2em 0; padding:0}
section .layout-center .text-layout1 > div img{max-width: 100%}
section .layout-center .text-layout1 > div .image-wrap{padding-bottom: 60px;}
section .layout-center .text-layout1 > div .image-wrap.img2022{padding-top: 20px;}

section .layout-center .text-layout1.v2 {margin-top:70px;}
section .layout-center .text-layout1.v3 {margin-top:0px;}
section .layout-center .text-layout1 .image-photo-mobile {display:none}

.container {display: flex; justify-content: center; align-items: center; gap: 40px; position:relative; z-index:9000}
.column {display: flex; justify-content: center; align-items: center;  }
.column1 {font-size:40px; font-weight:400; font-family:'Gloria Hallelujah', sans-serif ; }


section .map-wrapper {position:relative; max-width: 588px; margin:0px auto; border:0px solid #000000; background-image: url('../images/benefity1.jpg'); background-repeat:no-repeat; background-size:100% 100%; background-position:center;}
section .map-wrapper > span {position:absolute; left:-8.28%; top:0; width:116.5%; height:100%; background-repeat:no-repeat; background-size:100% auto; background-position:center top; background-image: url('../images/bananky-arrows.png'); z-index: 5000; transition: all 0.3s ease!important; opacity:1}
section .map-wrapper > img {width:100%; position:relative; z-index:1000; opacity:0}
section #kakao-benefits .map-wrapper { background-image: url('../images/benefity2.jpg');}
section #kakao-benefits .map-wrapper > span { position:absolute; left:-8.28%; top:-9%; width:116.5%; height:100%; background-repeat:no-repeat; background-size:100% auto; background-position:center top; background-image: url('../images/bananky-arrows2.png'); z-index: 5000; transition: all 0.3s ease!important; opacity:1}

section #banana-benefits{padding:0px 330px 0 310px; }
section #banana-benefits .main-wrap{display:inline-block; margin:0px auto; position:relative; }
section #banana-benefits .main-wrap .text1{position:absolute; right:100%; top:4.1%; padding-right:0px; box-sizing: border-box; width:310px; text-align:left;}
section #banana-benefits .main-wrap .text2{position:absolute; right:100%; top:50%; padding-right:0px; box-sizing: border-box; width:310px; text-align:left;}
section #banana-benefits .main-wrap .text3{position:absolute; left:105%; top:50%; padding-right:0px; box-sizing: border-box; width:310px; text-align:left;}
section #banana-benefits .main-wrap .text4{position:absolute; left:105%; top:4.1%; padding-right:0px; box-sizing: border-box; width:310px; text-align:left;}

section .text-title{display:none;}
section .text-title h3{font-size:35px; margin:0; padding:15px 0 0.5em 0;  font-family: 'Sansita', sans-serif; }

section #kakao-benefits{padding:0px 340px 0 315px;  margin-top:170px;  }
section #kakao-benefits .main-wrap{display:inline-block; margin:0px auto; position:relative; }
section #kakao-benefits .main-wrap .text1{position:absolute; right:100%; top:-6%; padding-right:0px; box-sizing: border-box; width:315px; text-align:left;}
section #kakao-benefits .main-wrap .text2{position:absolute; right:100%; top:55%; padding-right:0px; box-sizing: border-box; width:315px; text-align:left;}
section #kakao-benefits .main-wrap .text3{position:absolute; left:105%; top:53%; padding-right:0px; box-sizing: border-box; width:315px; text-align:left;}
section #kakao-benefits .main-wrap .text4{position:absolute; left:105%; top:4.1%; padding-right:0px; box-sizing: border-box; width:315px; text-align:left;}
section #kakao-benefits .main-wrap .text5{position:absolute; left:52%; bottom:103%; padding-right:0px; box-sizing: border-box; width:615px; text-align:left;}

footer {height:355px; background: #402B24 url('../images/footer-bg.jpg') no-repeat center top;position:relative; }
footer .img-left {width:511px; height:197px; background: url('../images/footer-image1.png') no-repeat left bottom;background-size: 100% auto; content:' '; z-index: 1000; position:absolute; left:-140px; bottom:0}
footer .img-right {width:536px; height:573px; background: url('../images/footer-image2.png') no-repeat right bottom;  background-size: 100% auto; content:' '; z-index: 1000; position:absolute; right:-150px; bottom:0}
footer .layout-center {padding-top:80px;}
footer .layout-center p{color:#ffffff; padding-top:20px;}
footer .layout-center img{max-width: 100%}


@media only screen and (max-width: 1800px){
  section #sideImage1{width:15%}
  section #sideImage2{width:8%;}
  section #sideImage3{width:15%; right:-2%;}
  section #sideImage4{width:12%; }
  section #sideImage5{width:12%; }
  section #sideImage6{width:12%; }
}


@media only screen and (max-width: 1650px){
  footer .img-right {width:450px; right:-140px;}
  footer .img-left {width:480px; left:-140px;}
}

@media only screen and (max-width: 1500px){
  section #sideImage1,
  section #sideImage2,
  section #sideImage3,
  section #sideImage4,
  section #sideImage5,
  section #sideImage6{display:none }
}


@media only screen and (max-width: 1350px){
  #layer0,
  #layer1,
  #layer2,
  #layer3,
  #layer4{background-size:140% auto }
  #header-logo{width:100%}
  header{height:50vw}
  header .layout-center .wrap{width:50%}
  header .layout-center{padding-top:10%}
  header .layout-center .arrow-down img{width:16%}

  footer{height:27vw}
  footer .img-right{width:33%}
  footer .img-left{width:35%}
  footer .layout-center img{width:53%}
  footer .layout-center{padding-top:6vw}
  footer .layout-center p{padding-top:1vw}
}


@media only screen and (max-width: 1260px){
  section #kakao-benefits .main-wrap .text5{width:105%}
}


@media only screen and (max-width: 979px){
  section{padding:30px 0  20px 0}
  section.section-yellow{padding:80px 0 60px 0}
  section .layout-center .p3{padding:0}
  section .layout-center .p2{padding-bottom:2em}
}



@media only screen and (max-width: 850px){
  .button{font-size:35px; line-height: 35px; height:66px; border-radius:66px; padding-left:45px; width:250px;}
  .button span{font-size:10px;}
  .button::after{width:40px; height:40px; top:13px; right:13px}
}


@media only screen and (max-width: 1150px){
  header{height:53vw}

  .map-wrapper > span{display:none!important;}

  section #banana-benefits .main-wrap .text1{display:block; width:auto; position:relative; right:auto; left:auto; top:auto}
  section #banana-benefits .main-wrap .text2{display:block; width:auto; position:relative; right:auto;left:auto; top:auto}
  section #banana-benefits .main-wrap .text3{display:block; width:auto; position:relative; right:auto;left:auto; top:auto}
  section #banana-benefits .main-wrap .text4{display:block; width:auto; position:relative; right:auto;left:auto; top:auto}
  section #banana-benefits{padding:0}

  section .text-title{display:block;}

  section #kakao-benefits .main-wrap .text1{display:block; width:auto; position:relative; right:auto; left:auto; top:auto}
  section #kakao-benefits .main-wrap .text2{display:block; width:auto; position:relative; right:auto;left:auto; top:auto}
  section #kakao-benefits .main-wrap .text3{display:block; width:auto; position:relative; right:auto;left:auto; top:auto}
  section #kakao-benefits .main-wrap .text4{display:block; width:auto; position:relative; right:auto;left:auto; top:auto}
  section #kakao-benefits .main-wrap .text5{display:block; width:auto; position:relative; right:auto;left:auto; top:auto}
  section #kakao-benefits{padding:0}
  section #kakao-benefits{margin-top:40px;}

  section .main-wrap > div {text-align:center!important;}

}



@media only screen and (max-width: 1050px){
  section .layout-center .text-layout1 > div{display:block; width:auto!important; padding:0px!important}

  section .layout-center .text-layout1 .image-photo-mobile {display:block}
  section .layout-center .text-layout1 .image-photo-desktop{display:none}

  section .layout-center .text-layout1 > div {text-align:center;}
  section .layout-center .text-layout1 > div h3{font-size:20px;line-height: 140%; margin-bottom:1em}
  section .layout-center .text-layout1 > div p{font-size:16px; line-height: 160%; margin-bottom:1.5em }

  section .layout-center .text-layout1.v2{margin-top:0}
  section .layout-center .text-layout1 > div .image-wrap{padding-bottom:30px;}

  section.section-light-yellow{padding:70px 0 100px 0}

}


@media only screen and (max-width: 979px){
  header {height: 55vw; }
  section .layout-center .p1{font-size:20px;}
  section .layout-center .p2{font-size:16px;}
  section .layout-center .p3{font-size:25px;}
}


@media only screen and (max-width: 800px){
  .container {flex-direction: column; gap: 15px; }
  footer .img-right{width:38%}
  footer{height:30vw}
  footer .layout-center{padding-top:8vw}
}

@media only screen and (max-width: 700px){
  header{height:58vw}
  .title{font-size:55px; line-height: 100%}
  .subtitle{font-size:20px;}
}

@media only screen and (max-width: 600px){
  .column1{font-size:30px}
  footer p {font-size:12px;}

  section .text-title h3{font-size:28px;}
  header{height:60vw}
}


@media only screen and (max-width: 550px){
  header{height:63vw}
  section{padding-bottom: 0}

  section.section-light-yellow{padding:50px 0 70px 0}
  section .layout-center .text-layout1 > div .image-wrap.img2022 {padding-top:0}
  section .layout-center .text-layout1 > div .image-wrap.img2022 img{width:70%}

  section .layout-center .text-layout1{margin-top:-30px;}
  section.section-yellow{padding-bottom:40px;}
  .column1{font-size:28px;}

  footer{height:35vw}
  footer .layout-center{padding-top:11vw}
  footer .img-right{width:45%; right:0; margin-right:-50px}
  footer .img-left{width:45%; left:0; margin-left:-30px}
}

@media only screen and (max-width: 450px){
  header{height:70vw}
  header .layout-center .wrap{width:100%; text-align:left;}
  header .layout-center .button{margin:0 auto}
  header .layout-center .button-wrap{text-align:center}
  header .layout-center .arrow-down img{width:15%}
  header .layout-center .arrow-down { padding:8% 20% 10% 20%}
  #header-logo{width:50%}

  section .layout-center .p1{font-size:18px;}
}