/* banner */
#banner {position: relative;padding: 80px 0 0;width: 100%;background: #f5f9f5;z-index: 3;overflow: hidden;}
#banner .main-slider { width: 100%; }
#banner .item { position: relative; height: calc(100vh - 82px); min-height: 680px; max-height: 860px; overflow: hidden; background: #eef5f1; }
#banner .item .clip { inset: 0; z-index: 0; }
#banner .item .clip >* { min-width: 100%; width: 100%; }
#banner .item .clip .bgBox {position: absolute;inset: 0;background-position: center center;background-repeat: no-repeat;background-size: cover;}
#banner .item .clip iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: 0; }
#banner .item .clip video { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; }
#banner .banner_shade {inset: 0;z-index: 1;pointer-events: none;background: linear-gradient(90deg, rgba(248,252,248,.98) 0%, rgba(244,250,246,.93) 18%, rgba(238,247,241,.68) 35%, rgba(236,246,239,.22) 52%, rgba(236,246,239,0) 68%);opacity: .25;}
#banner .info { inset: 0; z-index: 3; pointer-events: none; align-items: center; }
#banner .banner_inner {width: min(1600px, calc(100% - 120px));margin: 0 auto;padding: 0 0 32px;}
#banner .banner_eyebrow {margin-bottom: 10px;color: var(--secondary, #4b6f3d);font-size: 17px;line-height: 1.9;letter-spacing: .22em;font-weight: 600;font-family: "Google Sans", sans-serif;}
#banner .banner_title {max-width: 650px;color: var(--primary, #114f2b);font-size: clamp(35px, 3.3vw, 55px);line-height: 1.34;letter-spacing: .04em;font-weight: 500;}
#banner .banner_desc {margin-top: 20px;max-width: 580px;color: var(--info, #2c4a28);font-size: 18px;line-height: 1.95;letter-spacing: .06em;font-weight: 500;}
#banner .banner_btn {pointer-events: auto;display: inline-flex;align-items: center;justify-content: center;gap: 28px;margin-top: 38px;padding: 15px 34px;border-radius: 999px;background: var(--primary);color: var(--white, #fff);font-size: 15px;letter-spacing: .08em;font-weight: 400;box-sizing: border-box;transition: transform .35s ease, background .35s ease, box-shadow .35s ease;}
#banner .banner_btn:hover {background: var(--secondary, #4b6f3d);}
#banner .banner_btn_arrow {display: flex;align-items: center;justify-content: center;font-size: 18px;line-height: 1;transition: .35s ease;font-family: "Google Sans", sans-serif;color: white;}
#banner .banner_full_link { inset: 0; z-index: 2; }
#banner .banner_paging {position: absolute;left: max(60px, calc((100% - 1600px) / 2));bottom: 90px;display: flex;align-items: flex-end;gap: 24px;z-index: 5;}
#banner .banner_page { width: 84px; padding: 0; border: 0; background: transparent; color: rgba(var(--primary-rgb, 17,79,43),.46); text-align: left; cursor: pointer; }
#banner .banner_page span {display: block;margin-bottom: 11px;font-size: 14px;line-height: 1;letter-spacing: .05em;font-weight: 600;font-family: "Google Sans", sans-serif;}
#banner .banner_page i { position: relative; display: block; width: 100%; height: 1px; background: rgba(var(--primary-rgb, 17,79,43),.16); overflow: hidden; }
#banner .banner_page i::after { content: ''; position: absolute; left: 0; top: 0; width: 0; height: 100%; background: var(--primary, #114f2b); transition: width .45s ease; }
#banner .banner_page.active { color: var(--primary, #114f2b); }
#banner .banner_page.active i::after { width: 38%; }
#banner .item .banner_eyebrow, #banner .item .banner_title, #banner .item .banner_desc, #banner .item .banner_btn { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
#banner .item .banner_title {transition-delay: .08s;word-spacing: 100vw;}
#banner .item .banner_desc { transition-delay: .16s; }
#banner .item .banner_btn { transition-delay: .24s; }
#banner .item.slick-current .banner_eyebrow, #banner .item.slick-current .banner_title, #banner .item.slick-current .banner_desc, #banner .item.slick-current .banner_btn { opacity: 1; transform: translateY(0); }
@media screen and (max-width: 1440px){
#banner .item { min-height: 620px; max-height: 780px; }
#banner .banner_inner { width: calc(100% - 100px); }
#banner .banner_title { max-width: 560px; }
#banner .banner_desc { max-width: 520px; }
#banner .banner_paging { left: 50px; bottom: 42px; }
}
@media screen and (max-width: 1280px){
#banner { padding-top: 70px; }
#banner .item { height: 720px; min-height: 0; }
#banner .banner_inner { width: calc(100% - 80px); }
#banner .banner_eyebrow { margin-bottom: 30px; font-size: 15px; }
#banner .banner_title { max-width: 500px; font-size: 52px; }
#banner .banner_desc { max-width: 480px; font-size: 17px; }
#banner .banner_btn { min-width: 230px; min-height: 58px; }
#banner .banner_paging { left: 40px; }
}
@media screen and (max-width: 1024px){
#banner .item { height: 640px; }
#banner .item .clip .bgBox { background-position: 58% center; }
#banner .banner_shade { background: linear-gradient(90deg, rgba(248,252,248,.98) 0%, rgba(244,250,246,.88) 35%, rgba(238,247,241,.34) 62%, rgba(236,246,239,0) 82%); }
#banner .banner_inner { width: calc(100% - 60px); padding-bottom: 46px; }
#banner .banner_title { max-width: 430px; font-size: 46px; }
#banner .banner_desc { max-width: 430px; font-size: 16px; }
#banner .banner_paging { left: 30px; bottom: 34px; }
#banner .banner_page { width: 68px; }
}
@media screen and (max-width: 768px){
    #banner .banner_paging, #banner .banner_eyebrow{display:none;}
    #banner .banner_inner{padding:0}
}
@media screen and (max-width: 640px){
#banner { padding-top: 60px; }
#banner .item {height: 550px;background: #eef5f1;}
#banner .item .clip {height: 45%;top: 0;bottom: auto;}
#banner .item .clip .bgBox { background-position: 62% center; }
#banner .item .clip video { height: 100%; }
#banner .banner_shade { background: linear-gradient(180deg, rgba(244,250,246,0) 0%, rgba(244,250,246,.12) 34%, rgba(244,250,246,.92) 54%, #f4faf6 68%, #f4faf6 100%); }
#banner .info { align-items: flex-end; }
#banner .banner_inner {width: calc(100% - 40px);padding: 0 0 25px;}
#banner .banner_eyebrow { margin-bottom: 14px; font-size: 12px; line-height: 1.6; letter-spacing: .17em; }
#banner .banner_title { max-width: none; font-size: 34px; line-height: 1.32; }
#banner .banner_desc { margin-top: 14px; max-width: none; font-size: 15px; line-height: 1.75; letter-spacing: .03em; }
#banner .banner_btn { min-width: 205px; min-height: 52px; margin-top: 20px; padding: 0 24px; gap: 20px; font-size: 15px; }
#banner .banner_paging { left: 20px; bottom: 28px; gap: 14px; }
#banner .banner_page { width: 54px; }
#banner .banner_page span { margin-bottom: 8px; font-size: 12px; }
}