/* page2_sec2(거제도가 키운 메이 천년초) */
.page2 .sec2 { --s2-r: 2rem; --s2-img-h: 47.8rem; --s2-txt-x: 13rem; --s2-txt-y: 14.8rem; --s2-txt-fz: 2.8rem; --s2-txt-lh: 1.65; --s2-box-w: 117.5rem; --s2-box-h: 15.6rem; --s2-box-mt: -8.6rem; --s2-box-r: 1.6rem; --s2-box-px: 4.4rem; --s2-ico-size: 10rem; --s2-ico-gap: 2.4rem; --s2-item-lh: 1.45; } 

.page2 .sec2 .s2-vis { position: relative; height: var(--s2-img-h); overflow: hidden; border-radius: var(--s2-r); } 
.page2 .sec2 .s2-vis::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.28); } 
.page2 .sec2 .s2-vis img { display: block; width: 100%; height: 100%; object-fit: cover; } 
.page2 .sec2 .s2-copy { position: absolute; top: var(--s2-txt-y); left: calc(var(--s2-box-mt) * -1); z-index: 1; margin: 0; color: #fff; font-size: var(--s2-txt-fz); font-weight: 700; line-height: var(--s2-txt-lh); letter-spacing: 0; } 
.page2 .sec2 .s2-info { position: relative; z-index: 2; width: min(var(--s2-box-w), calc(100% - 16rem)); min-height: var(--s2-box-h); margin: var(--s2-box-mt) auto 0; padding: 1.6rem var(--s2-box-px); display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; background: #fff; border-radius: var(--border-ra); box-shadow: 0 .4rem 1rem rgba(0, 0, 0, 0.18); } 
.page2 .sec2 .s2-item { position: relative; min-height: 12rem; display: flex; align-items: center; justify-content: center; gap: var(--s2-ico-gap); padding: 1rem; } 
.page2 .sec2 .s2-item + .s2-item::before { content: ""; position: absolute; top: .8rem; bottom: .8rem; left: 0; width: 1px; background: #6D6D6D; } 
.page2 .sec2 .s2-ico { flex: 0 0 var(--s2-ico-size); width: var(--s2-ico-size); height: var(--s2-ico-size); display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #5f9d73; } 
.page2 .sec2 .s2-ico--d { background: #59956F; } 
.page2 .sec2 .s2-ico--dk { background: #2f6844; } 
.page2 .sec2 .s2-ico img { display: block; width: 58%; height: 58%; } 
@media screen and (max-width: 1600px){
 .page2 .sec2 { --s2-ico-size: 9rem; } 
 .page2 .sec2 .s2-info { padding: 1.6rem; } 
 .page2 .sec2 .s2-item { gap: 1rem; padding: 0 2rem; } 
 .page2 .sec2 .s2-item .tit1 p br { display: none; } 
 }
@media screen and (max-width: 1280px){
 .page2 .sec2 .s2-info { grid-template-columns: 1fr; padding-top: 1rem; padding-bottom: 1rem; } 
 .page2 .sec2 .s2-item { min-height: 9.6rem; justify-content: flex-start; padding: 2rem; } 
 .page2 .sec2 .s2-item + .s2-item::before { top: 0; right: 0; bottom: auto; width: auto; height: 1px; } 
 }
@media screen and (max-width: 1024px){
 .page2 .sec2 { --s2-ico-size: 7rem; } 
 .page2 .sec2 .s2-vis { height: 36rem; border-radius: var(--border-ra); } 
 .page2 .sec2 .s2-copy { top: 50%; text-align: center; left: 50%; transform: translate(-50%, -50%); width: 80%; font-size: 2.5rem; } 
 .page2 .sec2 .s2-info { width: 100%; min-height: auto; margin: 1rem 0 0; } 
 .page2 .sec2 .s2-item { min-height: auto; padding: 2rem; } 
 .page2 .sec2 .s2-item + .s2-item::before { background: #d0e3d6; } 
 }
 @media screen and (max-width: 768px){
 .page2 .sec2 .s2-copy { width: 90%; font-size: 2rem; } 
 .page2 .sec2 .s2-item { padding: 2rem 0; } 
 }

/* page2_sec3(좋은 원료를 얻기 위한 재배 원칙) */
.page2 .sec3 { --s3-py: 12rem; --s3-head-mb: 8rem; --s3-num-fz: 1.8rem; --s3-tit-fz: 4rem; --s3-tit-mt: 1.2rem; --s3-desc-mt: 3rem; --s3-desc-fz: 1.8rem; --s3-desc-lh: 1.75; --s3-card-h: 28rem; --s3-card-r: 1.6rem; --s3-box-px: 5rem; --s3-box-py: 4rem; --s3-st-fz: 2rem; --s3-bd-fz: 1.7rem; --s3-bd-mt: 2.8rem; --s3-bd-lh: 1.75; position: relative; padding: var(--s3-py) 0; overflow: hidden; margin-bottom: -20rem; } 

.page2 .sec3 .s3-bg { position: absolute; inset: 0; width: 100vw; left: 50%; transform: translateX(-50%); background: url("/theme/basic/img/sub/sub1/page2/bg_rule.jpg") no-repeat center / cover; } 
.page2 .sec3 .s3-bg::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.38); } 
.page2 .sec3 .inner { position: relative; z-index: 1; } 
.page2 .sec3 .s3-head { margin-bottom: var(--s3-head-mb); color: #fff; text-align: center; } 
.page2 .sec3 .s3-num { display: block; font-size: var(--s3-num-fz); font-weight: 800; line-height: 1; } 
.page2 .sec3 .s3-head h2 { margin: var(--s3-tit-mt) 0 0; color: #fff; font-size: var(--s3-tit-fz); font-weight: 800; line-height: 1.35; letter-spacing: 0; } 
.page2 .sec3 .s3-head p { margin: var(--s3-desc-mt) 0 0; color: rgba(255, 255, 255, 0.88); font-size: var(--s3-desc-fz); font-weight: 400; line-height: var(--s3-desc-lh); letter-spacing: 0; } 
.page2 .sec3 .s3-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem 0; } 
.page2 .sec3 .s3-img,
.page2 .sec3 .s3-txt { height: var(--s3-card-h); overflow: hidden; } 
.page2 .sec3 .s3-img1 { border-radius: var(--s3-card-r) 0 0 var(--s3-card-r); } 
.page2 .sec3 .s3-txt1 { border-radius: 0 var(--s3-card-r) var(--s3-card-r) 0; } 
.page2 .sec3 .s3-txt2 { border-radius: var(--s3-card-r) 0 0 var(--s3-card-r); } 
.page2 .sec3 .s3-img2 { border-radius: 0 var(--s3-card-r) var(--s3-card-r) 0; } 
.page2 .sec3 .s3-img3 { border-radius: var(--s3-card-r) 0 0 var(--s3-card-r); } 
.page2 .sec3 .s3-txt3 { border-radius: 0 var(--s3-card-r) var(--s3-card-r) 0; } 
.page2 .sec3 .s3-img img { display: block; width: 100%; height: 100%; object-fit: cover; } 
.page2 .sec3 .s3-txt { padding: var(--s3-box-py) var(--s3-box-px); display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; text-align: center; } 
.page2 .sec3 .s3-tit { display: flex; align-items: center; justify-content: center; gap: 1.2rem; } 
.page2 .sec3 .s3-tit span { width: 3.5rem; height: 3.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-point3); color: #fff; font-size: 1.7rem; font-weight: 800; line-height: 1; } 
.page2 .sec3 .s3-txt p { margin: var(--s3-bd-mt) 0 0; line-height: var(--s3-bd-lh); letter-spacing: 0; } 
@media screen and (max-width: 1024px){
 .page2 .sec3 { --s3-py: 9rem; --s3-head-mb: 6rem; --s3-tit-fz: 3.2rem; --s3-desc-fz: 1.6rem; --s3-card-h: 25rem; --s3-box-px: 3rem; --s3-st-fz: 1.8rem; --s3-bd-fz: 1.5rem; } 
 .page2 .sec3 .s3-head p br,
 .page2 .sec3 .s3-txt p br { display: none; } 
 }
@media screen and (max-width: 768px){
 .page2 .sec3 { --s3-py: 7rem; --s3-head-mb: 4rem; --s3-num-fz: 1.5rem; --s3-tit-fz: 2.6rem; --s3-desc-mt: 2rem; --s3-desc-fz: 1.5rem; --s3-card-h: 22rem; --s3-box-px: 2.4rem; --s3-box-py: 3.2rem; --s3-bd-mt: 1.8rem; } 
 .page2 .sec3 .s3-list { grid-template-columns: 1fr; gap: 0; } 
 .page2 .sec3 .s3-img,
 .page2 .sec3 .s3-txt { height: auto; min-height: var(--s3-card-h); border-radius: 0; } 
 .page2 .sec3 .s3-img1 { order: 1; border-radius: var(--s3-card-r) var(--s3-card-r) 0 0; } 
 .page2 .sec3 .s3-txt1 { order: 2; } 
 .page2 .sec3 .s3-img2 { order: 3; } 
 .page2 .sec3 .s3-txt2 { order: 4; } 
 .page2 .sec3 .s3-img3 { order: 5; } 
 .page2 .sec3 .s3-txt3 { order: 6; border-radius: 0 0 var(--s3-card-r) var(--s3-card-r); } 
 .page2 .sec3 .s3-img img { height: var(--s3-card-h); } 
 }

/* page2_sec4(farm slide) */
.page2 .sec4 { --s4-py: 10rem; --s4-wr-h: 28rem; --s4-slide-w: 43.2rem; --s4-slide-r: 1.6rem; padding: var(--s4-py) 0; overflow: hidden; margin: 18rem 0 0 0; } 
.page2 .sec4 .inner { overflow: visible; } 
.page2 .sec4 .s4-slide-wr { width: 100vw; height: var(--s4-wr-h); margin-left: calc((100% - 100vw) / 2); overflow: hidden; } 
.page2 .sec4 .s4-swiper { width: 100%; height: 100%; overflow: visible; } 
.page2 .sec4 .swiper-wrapper { align-items: center; height: 100%; transition-timing-function: linear !important; } 
.page2 .sec4 .swiper-slide { flex: 0 0 var(--s4-slide-w); width: var(--s4-slide-w); height: 100%; overflow: hidden; border-radius: var(--s4-slide-r); } 
.page2 .sec4 .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } 
@media screen and (max-width: 1024px){
 .page2 .sec4 { --s4-py: 8rem; --s4-wr-h: 23.4rem; --s4-slide-w: 36rem; --s4-slide-r: 1.4rem; } 
 }
@media screen and (max-width: 768px){
 .page2 .sec4 { --s4-py: 6rem; --s4-wr-h: 18.2rem; --s4-slide-w: 28rem; --s4-slide-r: 1.2rem; } 
 }

/* page2_sec5(season tab) */
.sec5 { --s5-py: 11rem; --s5-tab-mt: 5.8rem; --s5-tab-gap: 2rem; --s5-btn-w: 13.5rem; --s5-btn-h: 4.4rem; --s5-btn-fz: 2rem; --s5-cont-mt: 5rem; --s5-img-w: 73rem; --s5-img-h: 40rem; --s5-img-r: 1.6rem; --s5-gap: 5rem; --s5-tit-fz: 2.4rem; --s5-icon: 4rem; --s5-txt-mt: 2.6rem; --s5-txt-fz: 1.8rem; --s5-txt-lh: 1.75; padding: var(--s5-py) 0; margin-top: -7rem; } 

 .sec5 .s5-tab { display: flex; gap: var(--s5-tab-gap); margin-top: var(--s5-tab-mt); } 
.sec5 .s5-tab button { width: var(--s5-btn-w); height: var(--s5-btn-h); border: 1px solid #777; border-radius: 5rem; background: #fff; color: #666; font-size: var(--s5-btn-fz); font-weight: 500; cursor: pointer; transition: .3s; } 
.sec5 .s5-tab button.is-active { border-color: #326c47; background: #326c47; color: #fff; font-weight: 700; } 
.sec5 .s5-cont { position: relative; margin-top: var(--s5-cont-mt); } 
.sec5 .s5-pane { display: grid; grid-template-columns: var(--s5-img-w) 1fr; align-items: center; gap: var(--s5-gap); opacity: 0; visibility: hidden; position: absolute; inset: 0 auto auto 0; width: 100%; transition: opacity .45s ease, visibility .45s ease; } 
.sec5 .s5-pane.is-active { position: relative; opacity: 1; visibility: visible; } 
.sec5 .s5-img { height: var(--s5-img-h); overflow: hidden; border-radius: var(--border-ra); } 
.sec5 .s5-img img { display: block; width: 100%; height: 100%; object-fit: cover; } 
.sec5 .s5-tit { display: flex; align-items: center; gap: 1.6rem; } 
.sec5 .s5-tit img { width: var(--s5-icon); height: var(--s5-icon); flex: 0 0 var(--s5-icon); } 
.sec5 .s5-tit strong { color: #000; font-size: var(--s5-tit-fz); font-weight: 800; line-height: 1.35; } 
.sec5 .s5-txt p { margin: var(--s5-txt-mt) 0 0; color: #555; font-size: var(--s5-txt-fz); font-weight: 400; line-height: var(--s5-txt-lh); } 
@media screen and (max-width: 1600px){
 .sec5 .s5-txt p br { display: none; } 
 }
@media screen and (max-width: 1280px){
 .sec5 .s5-pane { gap: 2rem; grid-template-columns: 1fr; } 
 .sec5 .s5-tab { margin-top: 0; } 
 .sec5 .s5-cont { margin-top: 2rem; } 
 .sec5 .s5-txt p { margin: 1rem 0 0 0; color: #555; font-size: var(--s5-txt-fz); font-weight: 400; line-height: 1.5; } 
 }
 @media screen and (max-width: 768px){
 .sec5 .s5-tab { gap: 1rem; } 
.sec5 .s5-img { height: 22rem; } 
.sec5 .s5-tab button { width: 100%; height: auto; padding: .5rem; font-size: 1.8rem; } 
 }

/* page2_sec1(process) */
.page2 .sec1 { --s1-point: #355E44; --s1-head-gap: 2.4rem; --s1-card-h: 30rem; --s1-card-px: 4rem; --s1-card-pt: 8.2rem; --s1-line-h: .4rem; --s1-tit-mb: 2.6rem; --s1-txt-lh: 1.5; --s1-arr: 4rem; --s1-arr-r: -2rem; overflow: hidden; } 

.page2.sec1 .tit-wr .tit b { font-weight: 800; } 
.page2 .sec1 .tit-wr .txt { margin-top: var(--s1-head-gap); } 
.page2 .sec1 .s1-step { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3.2rem; } 
.page2 .sec1 .s1-card { position: relative; min-height: var(--s1-card-h); padding: var(--s1-card-pt) var(--s1-card-px) 4rem; background: #F8F7F5; text-align: center; } 
.page2 .sec1 .s1-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: var(--s1-line-h); background: var(--s1-point); } 
.page2 .sec1 .s1-card:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: var(--s1-arr-r); z-index: 2; width: var(--s1-arr); height: var(--s1-arr); border-radius: 50%; background: var(--s1-point); transform: translateY(-50%); } 
.page2 .sec1 .s1-card:not(:last-child) h3::after { content: ""; position: absolute; top: 50%; right: calc(var(--s1-arr-r) + 1.45rem); z-index: 3; width: 1rem; height: 1rem; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: translateY(-50%) rotate(45deg); } 
.page2 .sec1 .s1-card h3 { position: static; margin: 0 0 var(--s1-tit-mb); line-height: 1.35; } 
.page2 .sec1 .s1-card p { margin: 0; line-height: var(--s1-txt-lh); letter-spacing: 0; } 
@media screen and (max-width: 1024px){
 .page2 .sec1 { --s1-card-h: 26rem; --s1-card-px: 2.4rem; --s1-card-pt: 6rem; --s1-tit-fz: 2rem; --s1-txt-fz: 1.8rem; } 
 .page2 .sec1 .s1-step { grid-template-columns: repeat(2, 1fr); } 
 .sec1 .s1-card:nth-child(2)::after { display: none; } 
 .page2 .sec1 .s1-card p br { display: none; } 
 }
@media screen and (max-width: 768px){
 .page2 .sec1 { --s1-card-h: auto; --s1-card-px: 2.4rem; --s1-card-pt: 4.8rem; --s1-arr: 3.4rem; --s1-arr-r: auto; } 
 .page2 .sec1 .s1-step { grid-template-columns: 1fr; gap: 2rem; } 
 .page2 .sec1 .s1-card { padding-bottom: 4.8rem; } 
 .page2 .sec1 .s1-card:not(:last-child)::after { top: auto; right: auto; bottom: -1.7rem; left: 50%; transform: translateX(-50%) rotate(90deg); } 
 .page2 .sec1 .s1-card:not(:last-child) h3::after { top: auto; right: auto; bottom: -0.4rem; left: 50%; transform: translateX(-50%) rotate(135deg); } 
 }

/* page3_sec1(process) */
.sec1 { --s1-point: #355E44; --s1-head-gap: 2.4rem; --s1-card-h: 30rem; --s1-card-px: 4rem; --s1-card-pt: 8.2rem; --s1-line-h: 0.4rem; --s1-tit-fz: 2.2rem; --s1-tit-mb: 1.5rem; --s1-txt-fz: 1.8rem; --s1-txt-lh: 1.5; --s1-arr: 4.2rem; --s1-arr-r: -3.7rem; overflow: hidden; } 

.page3 .sec1 .tit-wr span { color: var(--s1-point); font-weight: 800; } 
.page3 .sec1 .tit-wr .tit b { font-weight: 800; } 
.page3 .sec1 .tit-wr .txt { margin-top: var(--s1-head-gap); } 
.page3 .sec1 .s1-step { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3.2rem; } 
.page3 .sec1 .s1-card { position: relative; min-height: var(--s1-card-h); padding: var(--s1-card-pt) var(--s1-card-px) 4rem; background: #F8F7F5; text-align: center; } 
.page3 .sec1 .s1-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: var(--s1-line-h); background: var(--s1-point); } 
.page3 .sec1 .s1-card:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: var(--s1-arr-r); z-index: 2; width: var(--s1-arr); height: var(--s1-arr); border-radius: 50%; background: var(--s1-point); transform: translateY(-50%); } 
.page3 .sec1 .s1-card:not(:last-child) h3::after { content: ""; position: absolute; top: 50%; right: calc(var(--s1-arr-r) + 1.7rem); z-index: 3; width: 1rem; height: 1rem; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: translateY(-50%) rotate(45deg); } 
.page3 .sec1 .s1-card h3 { position: static; margin: 0 0 var(--s1-tit-mb); } 
.page3 .sec1 .s1-card p { margin: 0; color: #555; font-size: var(--s1-txt-fz); font-weight: 400; line-height: var(--s1-txt-lh); letter-spacing: 0; } 
@media screen and (max-width: 1024px){
 .page3 .sec1 { --s1-card-h: 26rem; --s1-card-px: 2.4rem; --s1-card-pt: 6rem; --s1-tit-fz: 2rem; --s1-txt-fz: 1.8rem; } 
 .page3 .sec1 .s1-step { grid-template-columns: repeat(2, 1fr); } 
 .page3 .sec1 .s1-card:nth-child(2)::after { display: none; } 
 .page3 .sec1 .s1-card p br { display: none; } 
 .page3 .sec1 .s1-card { padding: 6rem 4rem; min-height: auto; } 
 }
@media screen and (max-width: 768px){
 .page3 .sec1 { --s1-card-h: auto; --s1-card-px: 2.4rem; --s1-card-pt: 4.8rem; --s1-arr: 3.4rem; --s1-arr-r: auto; } 
 .page3 .sec1 .s1-step { grid-template-columns: 1fr; gap: 0rem; } 
 .page3 .sec1 .s1-card {padding: 4rem 2rem; } 
 .page3 .sec1 .s1-card:nth-child(2)::after { display: block; } 
 .page3 .sec1 .s1-card:not(:last-child)::after { top: auto; right: auto; bottom: -1.7rem; left: 50%; transform: translateX(-50%) rotate(90deg); } 
 .page3 .sec1 .s1-card:not(:last-child) h3::after { top: auto; right: auto; bottom: -0.4rem; left: 50%; transform: translateX(-50%) rotate(135deg); } 
 }

/* page3 sec2 */
.page3 .sec2 { --s2-py: 16rem; --s2-gap: 5rem; --s2-line: #C9AE90; --s2-line-w: .1rem; --s2-tag-fz: 1.8rem; --s2-tag-mb: 1.6rem; --s2-tit-fz: 4rem; --s2-tit-lh: 1.45; --s2-tit-mb: 2.4rem; --s2-desc-fz: 1.8rem; --s2-desc-lh: 1.65; --s2-txt-w: 66rem; --s2-grid-gap: 0.8rem; --s2-row-gap: 3.4rem; --s2-icon: 5rem; --s2-icon-mb: 1rem; --s2-item-tit-fz: 2rem; --s2-item-tit-mb: 1.2rem; --s2-item-txt-fz: 1.6rem; --s2-item-txt-lh: 1.65; padding: var(--sec-pd) 0; background: #F8F7F5; margin-top: var(--sec-pd); } 
.page3 .sec2 .s2-wr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); align-items: center; gap: var(--s2-gap); } 
.page3 .sec2 .s2-img { margin: 0; overflow: hidden; aspect-ratio: 624 / 689; } 
.page3 .sec2 .s2-img img { display: block; width: 100%; height: 100%; object-fit: cover; } 
.page3 .sec2 .tit-wr { text-align: left; } 
.page3 .sec2 .s2-cont .txt { max-width: var(--s2-txt-w); margin-left: 0; margin-right: auto; } 
.page3 .sec2 .tit-wr span { display: block; margin-bottom: var(--s2-tag-mb); line-height: 1.4; } 
.page3 .sec2 .tit-wr h2 { margin: 0 0 var(--s2-tit-mb); line-height: var(--s2-tit-lh); letter-spacing: 0; } 
.page3 .sec2 .tit-wr h2 b { font-weight: 800; } 
.page3 .sec2 .s2-list { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s2-grid-gap); row-gap: var(--s2-row-gap); } 
.page3 .sec2 .s2-list::before,
.page3 .sec2 .s2-list::after { content: ""; position: absolute; top: 0; bottom: 0; width: var(--s2-line-w); background: var(--s2-line); } 
.page3 .sec2 .s2-list::before { left: 0; } 
.page3 .sec2 .s2-list::after { left: calc(50% + var(--s2-grid-gap) / 2); } 
.page3 .sec2 .s2-item { min-width: 0; padding: 0 2rem 0 2rem; } 
.page3 .sec2 .s2-item img { display: block; width: var(--s2-icon); height: var(--s2-icon); margin-bottom: var(--s2-icon-mb); object-fit: contain; } 
@media screen and (max-width: 1280px){
 .page3 .sec2 { --s2-py: 10rem; --s2-gap: 5rem; --s2-tit-fz: 3.4rem; --s2-desc-fz: 1.6rem; --s2-grid-gap: 3rem; --s2-row-gap: 3rem; --s2-icon: 4.6rem; } 
 .page3 .sec2 .s2-wr { gap: 2rem; grid-template-columns: 1fr; align-items: start; gap: var(--s2-gap); } 
 .page3 .sec2 .s2-img { order: 2; width: 100%; aspect-ratio: auto; height: 47rem; margin: 0 auto; } 
 .page3 .sec2 .s2-cont .txt br { display: none; } 
 .page3 .sec2 .s2-list::before, .page3 .sec2 .s2-list::after { display: none; } 
 .page3 .sec2 .s2-item { background: #fff; border-radius: var(--border-ra); padding: 2rem 3rem; } 
 .page3 .sec2 .s2-list { gap: 2rem; } 
 }
 @media screen and (max-width: 768px){
 .page3 .sec2 .s2-img { height: 37rem; } 
 .page3 .sec2 .s2-wr { gap: 2rem; } 
 .page3 .sec2 .s2-list { gap: 1rem; grid-template-columns: repeat(1, minmax(0, 1fr)); } 
 }
 

/* page3 sec3 */
.page3 .sec3 { --s3-py: 14rem; --s3-img-h: 37rem; --s3-card-px: 5.4rem; --s3-card-max: 52rem; --s3-card-dur: .7s; padding: var(--s3-py) 0 0; overflow: hidden; } 
.page3 .sec3 .s3-full { width: 100%; } 
.page3 .sec3 .s3-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: var(--s3-img-h); opacity: 0; transform: translateY(3rem); transition: opacity var(--s3-card-dur) ease, transform var(--s3-card-dur) ease; } 
.page3 .sec3 .s3-row.is-on { opacity: 1; transform: translateY(0); } 
.page3 .sec3 .s3-rev .s3-img { order: 2; } 
.page3 .sec3 .s3-rev .s3-card { order: 1; } 
.page3 .sec3 .s3-img { margin: 0; min-width: 0; height: var(--s3-img-h); overflow: hidden; } 
.page3 .sec3 .s3-img img { display: block; width: 100%; height: 100%; object-fit: cover; } 
.page3 .sec3 .s3-card { display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: var(--s3-card-max); padding: 4rem var(--s3-card-px); background: #fff; } 
.page3 .sec3 .s3-row:not(.s3-rev) .s3-card { margin-right: auto; } 
.page3 .sec3 .s3-rev .s3-card { margin-left: auto; text-align: right; } 
@media screen and (max-width: 960px){
 .page3 .sec3 { --s3-py: 10rem; --s3-img-h: 32rem; --s3-card-px: 3rem; } 
 }
@media screen and (max-width: 768px){
 .page3 .sec3 { --s3-py: 8rem; --s3-img-h: 28rem; margin-bottom: -20rem; } 
 .page3 .sec3 .s3-row { grid-template-columns: 1fr; } 
 .page3 .sec3 .s3-rev .s3-img,
 .page3 .sec3 .s3-rev .s3-card { order: initial; } 
 .page3 .sec3 .s3-card { max-width: none; min-height: auto; text-align: left; } 
 .page3 .sec3 .s3-rev .s3-card { margin-left: 0; text-align: left; } 
 }

/* page3 sec4 */
.page3 .sec4 { --s4-py: 20rem; --s4-h: 8.4rem; --s4-speed: 30s; --s4-gap: 3rem; padding: var(--s4-py) 0; overflow: hidden; margin-bottom: -20rem; } 
.page3 .sec4 .s4-ticker { width: 100%; height: var(--s4-h); overflow: hidden; } 
.page3 .sec4 .s4-track { display: flex; width: max-content; height: 100%; animation: s4Ticker var(--s4-speed) linear infinite; will-change: transform; } 
.page3 .sec4 .s4-track img { display: block; width: auto; height: 100%; flex: 0 0 auto; margin-right: var(--s4-gap); } 
@keyframes s4Ticker { 
 0% { transform: translateX(0%); } 
 100% { transform: translateX(-50%); } 
 }
@media screen and (max-width: 768px){
 .page3 .sec4 { --s4-py: 5rem; --s4-h: 5.6rem; margin: 12rem 0 1.9rem 0; } 
 }

/* page3 sec5 */
.page3 .sec5 { --s5-bg: #F8F7F5; --s5-line: #B3B3B3; --s5-line-w: .1rem; --s5-py: 14rem; --s5-head-w: 44rem; --s5-gap: 21rem; --s5-item-py: 3.8rem; --s5-item-gap: 4rem; --s5-img-w: 28rem; --s5-img-h: 18rem; padding: var(--s5-py) 0; background: var(--s5-bg); } 

.page3 .sec5 .s5-wr { display: grid; grid-template-columns: var(--s5-head-w) minmax(0, 1fr); gap: var(--s5-gap); align-items: start; } 
.page3 .sec5 .s5-head { position: sticky; top: 12rem; } 
.page3 .sec5 .s5-list { min-width: 0; } 
.page3 .sec5 .s5-item { display: grid; grid-template-columns: minmax(0, 1fr) var(--s5-img-w); align-items: center; gap: var(--s5-item-gap); padding: var(--s5-item-py) 0; border-top: var(--s5-line-w) solid var(--s5-line); } 
.page3 .sec5 .s5-item:last-child { border-bottom: var(--s5-line-w) solid var(--s5-line); } 
.page3 .sec5 .s5-info { min-width: 0; } 
.page3 .sec5 .s5-img { display: flex; align-items: center; justify-content: center; height: var(--s5-img-h); margin: 2rem 0 -3.8rem; } 
.page3 .sec5 .s5-img_col { display: flex; align-items: center; justify-content: center; height: var(--s5-img-h); margin: -1rem 0 -1rem; } 
.page3 .sec5 .s5-img img,
.page3 .sec5 .s5-img_col img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; } 
@media screen and (max-width: 1280px){
 .page3 .sec5 .s5-wr { gap: 6rem; } 
 .page3 .sec5 .s5-item .txt3 br { display: none; } 
 }
@media screen and (max-width: 1024px){
 .page3 .sec5 { --s5-py: 10rem; --s5-gap: 5rem; --s5-img-w: 22rem; } 
 .page3 .sec5 .s5-wr { grid-template-columns: 1fr; } 
 .page3 .sec5 .s5-head { position: static; } 
 }
@media screen and (max-width: 768px){
 .page3 .sec5 { --s5-img-w: 13rem; --s5-img-h: 12rem; --s5-item-gap: 2rem; --s5-item-py: 3rem; } 
 .page3 .sec5 .s5-wr { gap: 0; } 
 .page3 .sec5 .s5-item { grid-template-columns: minmax(0, 1fr) var(--s5-img-w); align-items: center; padding: var(--s5-item-py) 0; } 
 .page3 .sec5 .s5-info { order: 1; } 
 .page3 .sec5 .s5-img { height: auto; } 
 .page3 .sec5 .s5-img,
 .page3 .sec5 .s5-img_col { order: 2; justify-content: flex-end; margin: 0; } 
 .page3 .sec5 .s5-img img,
 .page3 .sec5 .s5-img_col img { max-width: 100%; max-height: 100%; object-fit: contain; } 
 }
 @media screen and (max-width: 576px){
 .page3 .sec5 .s5-item { grid-template-columns: repeat(1, 1fr); padding-bottom: 0; } 
 .page3 .sec5 .s5-img { height: 16rem; } 
 }

/* page3 sec6 */
.page3 .sec6 { --s6-py: 14rem; --s6-bg: url("/theme/basic/img/sub/sub1/page3/bg_process.jpg"); --s6-card-bg: #F0EEE9; --s6-card-r: 1.8rem; --s6-card-p: 2.4rem; --s6-list-gap: 3rem; --s6-img-h: 36rem; --s6-body-pt: 3.6rem; --s6-num-mb: 1rem; --s6-num-color: #355E44; position: relative; padding: var(--s6-py) 0; overflow: hidden; color: #fff; } 
.page3 .sec6::before { content: ""; position: absolute; inset: 0; background: var(--s6-bg) center / cover no-repeat; z-index: 0; } 
.page3 .sec6::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .42); z-index: 1; } 
.page3 .sec6 .inner { position: relative; z-index: 2; } 
.page3 .sec6 .s6-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6-list-gap); } 
.page3 .sec6 .s6-card { min-width: 0; padding:2rem 2rem 4rem; border-radius: var(--border-ra); background: var(--s6-card-bg); color: #000; } 
.page3 .sec6 .s6-img { margin: 0; overflow: hidden; border-radius: calc(var(--border-ra) - .6rem); height: var(--s6-img-h); } 
.page3 .sec6 .s6-img img { display: block; width: 100%; height: 100%; object-fit: cover; } 
.page3 .sec6 .s6-body { padding-top:2rem; } 
.page3 .sec6 .s6-body > span { display: block; margin-bottom: var(--s6-num-mb); color: var(--s6-num-color); font-size: 2.2rem; font-weight: 800; line-height: 1; } 
@media screen and (max-width: 1280px){
 .page3 .sec6 { --s6-list-gap: 2rem; --s6-img-h: 30rem; } 
 }
@media screen and (max-width: 1024px){
 .page3 .sec6 { --s6-py: 10rem; --s6-img-h: 28rem; } 
 .page3 .sec6 .s6-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } 
 }
@media screen and (max-width: 576px){
 .page3 .sec6 { --s6-py: 8rem; --s6-card-p: 1.8rem; --s6-img-h: 24rem; --s6-body-pt: 2.6rem; } 
 .page3 .sec6 .s6-list { grid-template-columns: 1fr; } 
 .page3 .sec6 br { display: none; } 
 .page3 .sec6 .s6-body > span {margin-bottom: .5rem;}
 }

/* page4 sec1 */
.page4 .sec1 { --s1-py: 10rem; --s1-top-mb: 7rem; --s1-logo-w: 33rem; --s1-info-w: 54rem; --s1-info-gap: 1rem; --s1-icon: 2.8rem; --s1-map-h: 48rem; --s1-map-r: 1.6rem; padding: var(--s1-py) 0; } 
.page4 .sec1 .s1-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6rem; margin-bottom: var(--s1-top-mb); } 
.page4 .sec1 .s1-left { min-width: 0; } 
.page4 .sec1 .s1-logo { width: var(--s1-logo-w); margin: 0 0 3.5rem; } 
.page4 .sec1 .s1-logo img { display: block; width: 100%; height: auto; } 
.page4 .sec1 .s1-info { display: flex; flex-direction: column; gap: var(--s1-info-gap); width: var(--s1-info-w); max-width: 100%; } 
.page4 .sec1 .s1-item { display: grid; grid-template-columns: var(--s1-icon) minmax(0, 1fr); align-items: center; gap: 1.6rem; } 
.page4 .sec1 .s1-item img { display: block; width: var(--s1-icon); height: var(--s1-icon); object-fit: contain; } 
.page4 .sec1 .s1-map { overflow: hidden; height: var(--s1-map-h); border-radius: var(--border-ra); background: #e9e9e9; } 
.page4 .sec1 #mayMap { width: 105%; height: 105%; } 
.page4 .sec1 #mayMap .root_daum_roughmap { width: 100% !important; height: 100% !important; } 
.page4 .sec1 #mayMap .wrap_map { width: 100% !important; height: 100% !important; } 
@media screen and (max-width: 960px){
 .page4 .sec1 { --s1-py: 8rem; --s1-top-mb: 5rem; --s1-logo-w: 28rem; --s1-map-h: 40rem; } 
 .page4 .sec1 .s1-top { flex-direction: column; } 
 }
@media screen and (max-width: 786px){
 .page4 .sec1 { --s1-py: 6rem; --s1-logo-w: 15rem; --s1-icon: 3rem; --s1-map-h: 34rem; --s1-top-mb: 2rem; } 
 .page4 .sec1 .s1-top { gap: 2rem; } 
 .page4 .sec1 .s1-item { gap: 1rem; align-items: flex-start; } 
 .page4 .sec1 .s1-item .txt {font-size: 1.8rem;} 
 .page4 .sec1 br { display: none; } 
 .page4 .sec1 .s1-logo { margin: 0 0 2rem; } 

 .company .page4 .sub-tit-wr .img-obj {object-position: 80%;}
 }