@import "./index.css";

/* ************************************ Navibar Begin ************************************ */
.navi_icon{width: 3rem;height: 3rem;min-height: 3rem;}
.navi_main_icon,.navi_icon_main{width: 14rem;}
.navi_container_hide .navi_link_bg{opacity: 1;}
.navi_sub{max-height: 15rem;}
.navi_link .navi_sub,.navi_link .p_19{margin-top: 1rem;}
.navi_shadow{box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.05);}

.navi_container_hide .p_19{margin-top: 0;}
.navi_container_hide .navi_sub{max-height: 0;margin-top: 0;}
.navi_container_hide .navi_icon_main{width: 12rem;}

.navi_instagram{width: 2rem;}

@media (max-width: 800px) {
    .navi_container{width: fit-content;flex-direction: column;right: 0;height: 100%;padding: 3rem 2rem;align-items: center;max-width: 100%;}
    .navi_link_bg{opacity: 1;height: 100% !important;}
    .navi_link .navi_sub,.navi_link .p_19{margin-top: 0;}
    .navi_icon_main{width: 12rem;}
    .navi_sub{max-height: 5rem !important;}
    .navi_container_mHide{padding: 3rem 0;max-width: 0;}

    .navi_instagram{width: 3rem;}
    .navi_m_logo{width: 10rem;top: 2rem;left: 2rem;}

    .navi_m_container{top: 1rem;width: calc(100% - 2rem);height: 7rem;left: 1rem;}

    .navi_m_btn,.navi_m_logobtn{width: 7rem;height: 7rem;min-width: 7rem;}
    .navi_m_btn > svg{stroke:var(--color-white);stroke-width:2px;}
    .navi_m_btn > svg:nth-child(2){display: none;}
    .navi_m_btn_show >svg:nth-child(1){display: none;}
    .navi_m_btn_show >svg:nth-child(2){display: unset;}

    .navi_m_container_show{width: 7rem;}
    .navi_m_container_show .navi_m_innerLeft{width: 0;}
}
@media (max-width: 400px) {
    .navi_link .p_19{font-size: 1.2rem;}
    .navi_icon{width: 2rem;height: 2rem;min-height: 2rem;}
}

.reservation_btn{bottom: -1rem;right: 0;width: 45rem;z-index: 98;}
.reservation_btn_inner:hover{--color-red: #fff;--color-white: #DD5729;}
.reservation_btnHide{opacity: 0;pointer-events: none;}
@media (max-width: 800px) {
    .reservation_btn{width: 100%;}
    .reservation_btn > svg{width: 80%;margin: 0 auto;}
}
/* ************************************ Navibar End ************************************ */

/* ************************************ Top Page ************************************ */
.news_container{min-width: 50%;max-width: 60%;}
.loop_container{--loopgap: 10rem;}
.loop_item{animation: loop-slide 5s infinite linear 1s both;}
@keyframes loop-slide {
    from {transform: translateX(0);}
    to {transform: translateX(calc((var(--loopgap) + 100%) * -1));}
}
@media (max-width: 800px) {
    .news_container{min-width: 100%;max-width: 100%;flex-direction: column;border-radius: .8rem;gap: 2rem;padding: 1rem 2rem;}
    .news2_container{width: 100%;padding: 10rem 1rem;}
}
/* ************************************ Top Page End ************************************ */

/* ************************************ Product ************************************ */
.produce_frame{width: 42rem;}
.produce_frame_title{width: 50%;}
.produce_inner{border: .28rem currentColor solid;border-top: none;margin-top: -.2rem;border-bottom-left-radius: 2rem;border-bottom-right-radius: 2rem;}
.product_image_1{width: 10rem;}
.product_image_2{width: 10rem;}
.product_image_3{width: 14rem;}

@media (max-width: 800px) {
    .product_container{padding: 10rem 0;}
    .product_introText{align-items: flex-start;gap: 0.5rem;}
    .product_itemContainer{flex-direction: column;gap: 5rem;}
    .produce_frame{width: 100%;}
    .produce_inner{padding: 2rem 1rem;}
}

/* ************************************ Product End ************************************ */
.price_title{min-width: 27.2rem;}
.price_grid{display: grid;grid-template-columns: 1fr 1fr;}
.price_border_b_1{border-bottom: solid 1px currentColor;}
.price_border_b_2{border-bottom: dashed 1px currentColor;}
.price_border_r_1{border-right: solid 1px currentColor;}

.note_icon{width: 2.5rem;}
.insta_photo{width: 15.5rem;min-width: 15.5rem;}
.insta_loop_track{width: max-content;animation: slide-loop 30s linear infinite;}
@keyframes slide-loop {
    from {transform: translateX(calc(25%));}
    to {transform: translateX(calc(-25% - 1rem));}
}
@media (max-width: 800px) {
    .price_grid{width: 100%;padding: 0 1rem;}
    .instagram_container,.access_container{width: 100%;padding: 10rem 1rem;margin-top: 0;}
}
/* ************************************ Access ************************************ */
.google_map{width: 82rem;height: 41rem;}
.access_icon{width: 2.5rem;}
@media (max-width: 800px) {
    .google_map{width: 100%;height: unset;aspect-ratio: 4/3;padding: 0;}
    .access_inner{flex-direction: column;}
    .access_inner_left{width: 100%;}
}
/* ************************************ Access End ************************************ */

/* ************************************ Footer ************************************ */
.footer_logo{width: 7.5rem;}
.footer_icon{width: 2rem;}
.footer_link_sub{color: var(--color-red);--color-select: var(--color-red);--color-selectbg: var(--color-red);}
.footer_link:hover .footer_link_sub{color: var(--color-cream);--color-select: var(--color-red);--color-selectbg: var(--color-white);}
.footer_arrow{width: 7rem;}
.instagram_icon{width: 3.5rem;}

.footer_top{width: 10rem;margin-bottom: -5rem;}
.footer_top_icon{width: 3rem;}
@media (max-width: 800px) {
    .footer{width: 100%;padding: 5rem 1rem;flex-direction: column;gap: 1rem;}
    .footer_logoContainer{flex-direction: column;width: 100%;}
    .footer_contactContainer{justify-content: flex-start;align-items: center;gap: 4rem;flex-direction: column-reverse;}
    .footer_contactInner{flex-direction: column;align-items: stretch;}
    .footer_sitemapContainer{flex-direction: column;justify-content: flex-start;align-items: stretch;width: 100%;}
    .footer_sitemapContainer > div{justify-content: space-between;gap: 1rem;}
    .footer_icon{width: 4rem;}
    .footer_link_sub{color: var(--color-cream);--color-select: var(--color-red);--color-selectbg: var(--color-white);}
    .footer_sitemapContainer .p_10{font-size: 1.6rem;}
    .footer_sitemapContainer .p_8{font-size: 1rem;}
}
/* ************************************ Footer End ************************************ */

/* ************************************ Parallax Setting ************************************ */
.parallax_1{top: 15%;right: 20%;width: 22.6rem;}
.parallax_2{top: 35%;left: 5%;width: 25.1rem;}
.parallax_3{top: 55%;right: 10%;width: 22.6rem;}
.parallax_4{top: 5%;right: 30%;width: 14.4rem;}
.parallax_5{top: 40%;left: 20%;width: 25.2rem;}
.parallax_6{top: 80%;left: 15%;width: 13rem;}
.parallax_7{top: 100%;right: 15%;width: 16.8rem;}
.parallax_8{top: 120%;right: 25%;width: 10.4rem;}
.parallax_9{top: 40%;left: 8%;width: 15rem;}
.parallax_10{top: 65%;right: 45%;width: 24.3rem;}
.parallax_11{top: 60%;right: 8%;width: 7rem;}
.parallax_12{top: 0%;right: 8%;width: 35.1rem;}
.parallax_13{top: 40%;left: 25%;width: 9.6rem;}
.parallax_14{top: 115%;left: 15%;width: 19.6rem;}
.parallax_15{top: 50%;right: 20%;width: 24.3rem;}
.parallax_16{top: 80%;right: 10%;width: 16.6rem;}
.parallax_17{top: -10%;left: 10%;width: 23.7rem;}
.parallax_18{top: 50%;left: 10%;width: 27.7rem;}
.parallax_19{top: -30%;right: 15%;width: 27.2rem;}
.parallax_20{top: 90%;right: 20%;width: 18.7rem;}
.parallax_21{top: -30%;left: 5%;width: 25.1rem;}

.oscillate_1 > div{animation: parallax_oscillate_1 2s infinite ease-in-out alternate;}
@keyframes parallax_oscillate_1 {
    from {transform: translateY(0rem);}
    to {transform: translateY(5rem);}
}
.oscillate_2 > div{animation: parallax_oscillate_2 3s infinite ease-in-out alternate;}
@keyframes parallax_oscillate_2 {
    from {transform: translateY(0rem);}
    to {transform: translateY(6rem);}
}
.oscillate_3 > div{animation: parallax_oscillate_2 4s infinite ease-in-out alternate;}
@keyframes parallax_oscillate_3 {
    from {transform: translateY(3rem);}
    to {transform: translateY(-3rem);}
}
@media (max-width: 1500px) {}
@media (max-width: 800px) {
    .parallax_1{top: 10%;right: 0;width: 22.6rem;}
    .parallax_2{top: 25%;left: -7%;width: 17.1rem;}
    .parallax_4{top: 0;right: 0;width: 14.4rem;}
    .parallax_5{top: 80%;left: 5%;width: 18.2rem;}
    .parallax_6{top: 25%;left: -10%;width: 10rem;}
    .parallax_7{top: 120%;right: -20%;width: 16.8rem;}
    .parallax_8{top: 90%;right: 10%;width: 10.4rem;}
    .parallax_9{top: 60%;left: 0;width: 15rem;}
    .parallax_10{top: 85%;right: -20%;width: 19.3rem;}
    .parallax_11{top: 120%;right: 10%;width: 7rem;}
    .parallax_12{top: 20%;left: -15%;width: 15.1rem;}
    .parallax_13{top: 50%;left: 40%;width: 9.6rem;}
    .parallax_15{top: 135%;right: 0;width: 14.3rem;}
    .parallax_16{top: 55%;right: -15%;width: 16.6rem;}
    .parallax_17{top: 0;left: -3%;width: 15rem;}
    .parallax_19{top: -80%;right: 0;width: 17.2rem;}
    .parallax_20{top: 140%;right: 0;width: 11.7rem;}
    .parallax_21{top: -30%;left: unset;right: -5%;width: 15.1rem;}
}
/* ************************************ Parallax End ************************************ */

.season_title{min-width: 49.15rem;}
.reservation_icon{width: 4rem;}
.season_icon_1{width: 4.86rem;}
.season_icon_2{width: 2.616rem;}
@media (max-width: 800px) {
    .season_container{width: 100%;}
    .season_infor_container{flex-direction: column;}
    .season_infor_container > div{gap: 2rem;}
    .season_time_container{flex-direction: column;}
    .seasonMap_container{width: 100%;}
    .seasonMap_inner{flex-direction: column;align-items: stretch;gap: 1rem;}
    .season_title{min-width: 40rem;}
}

.reservation_box_w{width: var(--reservation_box_w);}
#myIframe{height: 80rem;}

.reservationIcon{width: 16rem;}
.reservationIcon_circle{opacity: 0;}
.reservationIcon:hover .f_white{fill: var(--color-red);}
.reservationIcon:hover .reservationIcon_circle{opacity: 0.4;}
.reservationIcon:hover .reservationIcon_bg{fill: var(--color-white);}
.reservation_time{width: 18rem;}
.reservation_under{background: linear-gradient(transparent 70%,#dd562970 0)}
.lang_icon{width: 1.5rem;}
@media (max-width: 800px) {
    .reservationIcon_container{width: 100%;justify-content: center;gap: 10rem;align-items: flex-start;padding: 0 3rem;}
    .reservationIcon{width: 10rem;}
    .reservation_box_w{width: 100%;}
    .reservation_time{width: 11rem;}
    .reservation_innerText{align-items: flex-start;}
    .reservation_innerText p{text-align: left;}
}

@media (max-width: 800px) {
    .note_inner{width: 100%;padding: 0 1rem;}
}


.faq_a > p{color: var(--color-gray);}
.faq_a > p::before{content: "▶";margin-right: .5rem;}
.faq_a > div{max-height: 0;}
.faq_a .padh_1{padding: 0;}
.faq_a_show > p{color: var(--color-black);}
.faq_a_show > p::before{content: "▼";}
.faq_a_show > div{max-height: 10rem;}
.faq_a_show .padh_1{padding-top: 1rem;padding-bottom: 1rem;}

.contact_title{padding-right: 10rem;}
.contact_form input[type="checkbox"]{accent-color: var(--color-red);}
.contact_form textarea{min-height: 15rem;}

.news_next_icon{width: 15rem;}
.news_short{-webkit-line-clamp: 3;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;display:-webkit-box;}

@media (max-width: 800px) {
    .faq_container{width: 100%;padding: 0 1rem;}
    .contact_container{width: 100%;padding: 0 1rem;}
    .contact_innerInput{display: flex;flex-direction: column;justify-content: flex-start;align-items: stretch;}
    .contact_title{border: none;}
    .contact_detail{padding-bottom: 5rem;}
    .news_nextInner{flex-direction: column;gap: 1rem;}
    .shop_topBG{padding: 0;}
    .shop_inner{flex-direction: column;gap: 10rem;}
    .shop_item{align-items: center;}
    .shop_itemPhoto,.shop_itemText,.shop_textInner{width: 90%;}
    .ourFarm_container{width: 100%;padding: 10rem 1rem;}
    .ourFarm_inner{flex-direction: column;gap: 3rem;}
    .ourfarm_addBanner{width: 100%;}
    .page_site{padding: 1rem;margin: 0;}
}




/* *********** Smooth Wrapper Setting *********** */
#smooth-wrapper{position: fixed;width: 100%;height: 100%;}
#smooth-content {position: relative;width: 100%;will-change: transform;}

.fake_fixed{transform: translateY(var(--scroll));}
.fake_sticky,.parallax_box{will-change: transform;}
/* *********** Smooth Wrapper End *********** */

/* *********** owl-carousel Slide Setting *********** */
.owl-stage{align-items: stretch;}
.owl-stage-outer {display: block;}
/* *********** owl-carousel Slide End *********** */

/* ************************************ Show Up Setup ************************************ */
.show_up,.show_up2,.show_up3{opacity: 0;transform: translateY(20px);transition: opacity 0.5s ease, transform 0.5s ease;}
.show_up.show,.show_up2.show,.show_up3.show{opacity: 1;transform: translate(0,0);}
/* ************************************ Show Up End ************************************ */