@charset "utf-8";
.brand-welcome-txt {margin-top: var(--space-30); margin-bottom: var(--space-45); font-size: var(--font-size-18); font-weight: 600; color: var(--gray-color); text-align: center;}
.career-welcome-txt {margin-bottom: var(--space-60); font-size: var(--font-size-36); font-weight: 700; color: var(--dark-color); line-height: 1.5em; text-align: center;}
.career-welcome-txt.type2
#contArea.wide .brand-welcome-txt, #contArea.wide .career-welcome-txt {padding-left: var(--container-space); padding-right: var(--container-space);}
.sec-tit {position: relative; font-size: var(--font-size-20); line-height: 1.5em;}
.sec-tit .tag {margin-bottom: var(--space-20); font-size: var(--font-size-18); font-weight: 600; color: var(--secondary-color);}
.sec-tit h3 {margin-bottom: var(--space-30); font-size: var(--font-size-36); line-height: 1.5em; color: var(--dark-color);}
.bg-gray {padding: var(--space-120) 0; background: #F8F8F8;}
.bg-blue {padding: var(--space-120) 0; background: #F7F9FD;}
.dot-list li {text-indent: -1em; padding-left: 1em;}
.dot-list li:before {content: '•'; margin-right: 10px;}

.page-greetings .txt {background: url('/images/sub/bg-greetings.jpg') no-repeat top right / 47% auto;}
.greeting-sign {gap: var(--space-15);}
.greeting-sign img {max-height: clamp(60px, calc(80 / var(--inner) * 100vw), 80px);}
.page-ideology .sec-keyword .contain {position: relative; padding-bottom: var(--space-120);}
.page-ideology .sec-keyword .contain:after {content: ''; position: absolute; left: var(--container-space); right: var(--container-space); bottom: 0; height: 1px; background: #ddd;}
.brand-keyword-cnt {position: relative;}
.brand-keyword-cnt .bg {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 700px;}
.sustain-pg .brand-keyword-cnt .orbit-box {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.sustain-pg .brand-keyword-cnt {padding-bottom: 0; border-bottom: 0;}
.brand-keyword-cnt .bg:before {content: ''; display: block; width: 100%; padding-bottom: 100%; background: #D7E6FF; border-radius: 100%;}
.brand-keyword-cnt .bg:after {content: ''; position: absolute; top: var(--space-40); right:var(--space-40); bottom: var(--space-40); left: var(--space-40); border-radius: 100%; border: 1px dashed var(--secondary-color);}
.brand-keyword-cnt .bg span {display: flex; justify-content: center; align-items: center; position: absolute; z-index: 1; top: calc(var(--space-40) * 2);right:calc(var(--space-40) * 2);left:calc(var(--space-40) * 2); bottom:calc(var(--space-40) * 2); border-radius: 100%;}
.brand-keyword-cnt .bg span:after {content: ''; z-index: -1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 100%; background: #F3F7FF;filter: blur(40px);}
.brand-keyword-cnt .bg span:before {content: ''; z-index: -1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 100%; background: #fff;}
.brand-keyword-boxes {position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(40px, calc(112 / var(--inner) * 100vw), 112px) clamp(200px, calc(440 / var(--inner) * 100vw), 440px);}
.sustain-pg .brand-keyword-boxes {gap:var(--space-120) clamp(200px, calc(600 / var(--inner) * 100vw), 600px);}
.brand-keyword-box {display: flex; flex-direction: column; justify-content: center; min-height: 342px; padding: var(--space-40) var(--space-25); border-radius: var(--radius-16); background: #fff; border-top: 2px solid var(--secondary-color); box-shadow: 6px 6px 30px 0 rgba(0, 0, 0, 0.10);}
.brand-keyword-box .txt {display: none; margin-top: var(--space-20);}
.sec-value {padding-top: var(--space-120);}
.sec-value .sec-tit:after {content: ''; display: block; width: 4px; height: 88px; margin: var(--space-30) auto; border-radius: 4px; background: #ddd;}
.sec-value .sec-tit:before {content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width:4px; height:44px ; background: var(--secondary-color); border-radius: 4px;}
.brand-value-groups .group {padding: var(--space-120) 0;}
.brand-value-groups .group:first-child {padding-top: 0;}
.brand-value-groups .group:nth-child(even) {background: #F8F8F8; text-align: right;}
.brand-value-groups .contain {display: flex; gap: var(--space-25) var(--space-40);}
.brand-value-groups .group:nth-child(even) .contain {flex-direction: row-reverse;}
.value-img {width: 50%;}
.value-txt {display: flex; flex-direction: column; justify-content: center;}
.value-txt h4 {margin-bottom: var(--space-40); font-size: var(--font-size-30); line-height: 1.5em; color: var(--dark-color);}

.sec-plant {padding-top: var(--space-120);}
.philosophy-video {position: relative; padding-bottom: 56.25%; overflow: hidden;}
.philosophy-video video {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;}
.philosophy-boxes {display: flex; justify-content: center; gap: 30px var(--space-40); flex-wrap: wrap;}
.philosophy-box {display: flex; flex-direction: column; gap: var(--space-25); width: calc((100% - var(--space-40) * 2) / 3); background: #fff; border-radius: var(--radius-16); padding: clamp(20px, calc(85 / var(--inner) * 100vw), 85px) var(--space-25); border-top: 2px solid var(--secondary-color); box-shadow: 6px 6px 30px 0 rgba(0, 0, 0, 0.10);}
.plant-imgs {display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-40);}

.ingredient-list .swiper-wrapper {width: max-content;}
.ingredient-list .swiper-slide {flex: 1 1 auto; width: max-content;}
.ingredient-item {display: block; position: relative; width: 300px;}
.ingredient-img {position: relative; width: 100%; padding-bottom: 160%; overflow: hidden;}
.ingredient-img:after {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #000; opacity: 0; transition: .5s all ease;}
.ingredient-item:hover .ingredient-img:after {opacity: .5;}
.ingredient-img img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.ingredient-txt {display: flex; flex-direction: column; justify-content: center; gap: 4px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: var(--space-25);}
.ingredient-txt h3 {font-size: var(--font-size-24); line-height: 1.5em; font-weight: 800;}
.magazine-category-list {display: flex; flex-direction: column; gap: clamp(20px, calc(72 / var(--inner) * 100vw), 72px);}
.magazine-category-item {display: flex; gap: 25px 35px; padding: var(--space-60); background: #fff; border: 1px solid #ddd; border-radius: var(--radius-40);}
.magazine-category-txt {flex: 1; min-width: 1%; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-20);}
.magazine-category-txt h4 {font-size: var(--font-size-36); color: var(--dark-color); line-height: 1.5em;}
.magazine-category-txt .en-tit {margin-top: var(--space-10); color: var(--secondary-color);}
.magazine-category-txt p {margin-top: var(--space-40);}
.magazine-category-img {position: relative; max-width: 356px; width: 27.86%; height: fit-content; border-radius: var(--radius-20); overflow: hidden;}
.magazine-category-img:before {content: ''; display: block; width: 100%; padding-bottom: 100%;}
.magazine-category-img img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border: 1px solid #DDD; border-radius: var(--radius-20);}

.page-flex {display: flex; max-width: calc(1460px + (210px + var(--space-30)) * 2); padding: 0 var(--space-30); gap: var(--space-30); margin: 0 auto;}
.page-flex .page-cnt {flex: 1; min-width: 1%; max-width: 1400px;}
.page-flex-menu {position: sticky; top: calc(var(--header-height) + var(--space-10)); right: 100%; width: 210px; height: fit-content; padding: var(--space-10); border: 1px solid #ddd; border-radius: var(--radius-20);}
.page-flex-menu .menu-title {padding: var(--space-15); font-size: var(--font-size-18); color: var(--secondary-color); font-weight: 600; line-height: 1.6667em; text-align: center;}
.page-flex-menu a {display: block; padding: var(--space-15); border-radius: var(--space-10); font-weight: 600; line-height: 1.875em;}
.page-flex-menu a:hover {color: var(--secondary-color);}
.page-flex-menu .active a {background: var(--secondary-color); color: #fff;}

.magazine-welcome-banner {position: relative; padding: clamp(30px, calc(110 / var(--inner) * 100vw), 110px) var(--container-space); font-size: var(--font-size-18); color: #fff; text-align: center;}
.magazine-welcome-banner .bg img {position: absolute; top: 0; right: 0; bottom: 0; left: 0; object-fit: cover; z-index: -1;}
.magazine-welcome-banner.type2 {padding: 0 0 20.8575%;}
.magazine-welcome-banner.type2 .img img {position: absolute; top: 0; right: 0; bottom: 0; left: 0; object-fit: cover;}
.magazine-hashtags {display: flex; justify-content: center; gap: var(--space-10); flex-wrap: wrap;}
.magazine-hashtags span {display: block; padding: var(--space-15) var(--space-30); border: 1px solid #ddd; border-radius: 100px; font-weight: 600; color: var(--dark-color); line-height: 1.625em;}
.direction-map {max-width: 1200px; margin: 0 auto var(--space-50); border-radius: var(--radius-20); overflow: hidden; height: clamp(270px, calc(570 / var(--inner) * 100vw), 570px);}
.root_daum_roughmap .wrap_map, .root_daum_roughmap {width: 100% !important; height: 100% !important;}
.direction-txt {padding: var(--space-40); border: 1px solid #ddd; border-radius: var(--radius-20); background: #fff;}
.table-wrap table {width: 100%; border-collapse: collapse; font-size: var(--font-size-18); line-height: 1.5em; text-align: left; border-top: 1px solid #ddd;}
.table-wrap th {color: var(--dark-color); background: #F5F7FA;}
.table-wrap th, .table-wrap td {padding: var(--space-20) 15px; border-bottom: 1px solid #ddd;}
.table-wrap dl {display: flex; gap: var(--space-10);}
.table-wrap dt {font-weight: 600; color: var(--dark-color);}
.table-wrap dd {margin-right: 35px;;}

.contact-box {display: flex; flex-direction: column; gap: var(--space-30); padding: var(--space-120) var(--container-space); border-radius: var(--radius-20); background: #fff;box-shadow: 6px 6px 30px 0 rgba(0, 0, 0, 0.10);}
.btn-email .icon {margin-right: var(--space-25);}
.btn-email strong {margin-right: var(--space-10);}

.sustain-pg {display: flex; flex-direction: column; gap: var(--space-120); margin-top: var(--space-100);}
.sustain-pg .sustain-sec {display: flex; flex-direction: column; align-items: center; gap: var(--space-60); text-align: center;}
.sustain-pg .lead {font-size: var(--font-size-36); font-weight: 700; color: var(--dark-color); line-height: 1.5;}
.sustain-pg .sustain-sec .img {width: 100%; max-width: 1400px; margin: 0; border-radius: var(--radius-20); overflow: hidden;}
.sustain-pg .sustain-sec .img img {width: 100%; aspect-ratio: 1400 / 400; object-fit: cover;}
.sustain-pg .sustain-sec .txt {max-width: 100%; font-size: var(--font-size-20); line-height: 1.5;}
.sustain-pg .sustain-sec .txt p {margin: 0 0 0.5em;}
.sustain-pg .sustain-sec .txt p:last-child {margin-bottom: 0;}
.sustain-pg .sustain-sec .txt strong {font-weight: 700; color: var(--dark-color);}
a.download {display: inline-flex; align-items: center; justify-content: center; gap: var(--space-10); width: fit-content; padding: 15px var(--space-30); border-radius: var(--radius-16); background: var(--secondary-color); color: #fff; font-size: var(--font-size-16); font-weight: 600; line-height: var(--space-30); text-decoration: none;}
a.download:before {content: ''; flex-shrink: 0; width: 20px; height:20px; background: url('/images/sub/env-ic-dl.svg') no-repeat center center; background-size: contain;}
.sustain-pg .orbit-box {position: relative; display: flex; align-items: center; justify-content: center; width: min(556px, 100%); aspect-ratio: 1;}
.sustain-pg .orbit-box .ring {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.sustain-pg .orbit-box .ring img {width: 100%; height: 100%; object-fit: contain;}
.sustain-pg .orbit-box .inner {position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-25); padding: var(--space-30);}
.sustain-pg .orbit-box .ic {width: 72px; height: 72px; margin: 0; display: flex; align-items: center; justify-content: center;}
.sustain-pg .orbit-box .ic img {max-width: 100%; max-height: 68px; width: auto; height: auto; object-fit: contain;}
.sustain-pg .orbit-box .tit {margin: 0; font-size: var(--font-size-30); color: var(--dark-color); line-height: 1.5;}
.sustain-pg .orbit-box .tit strong {font-weight: 700;}
.sustain-pg .orbit-box .desc {font-size: var(--font-size-16); color: var(--dark-color); line-height: 1.5; text-align: center;}
.sustain-pg .orbit-box .desc p {margin: 0;}
.sustain-pg .dots {display: flex; flex-direction: column; gap: var(--space-15); margin: 0; padding: 0; list-style: none;}
.sustain-pg .dots li {width: 12px; height: 12px; border-radius: 100px; background: var(--secondary-color);}
.sustain-pg .dots li:nth-child(1) {opacity: 0.2;}
.sustain-pg .dots li:nth-child(2) {opacity: 0.4;}
.sustain-pg .dots li:nth-child(3) {opacity: 0.6;}
.sustain-pg .dots li:nth-child(4) {opacity: 1;}
.sustain-pg .card4 {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(var(--space-20), calc(40 / var(--inner) * 100vw), var(--space-40)); width: 100%; text-align: left;}
.sustain-pg .card4 .card {display: flex; flex-direction: column; gap: var(--space-25); padding: var(--space-40) var(--space-25); border-radius: var(--radius-16); border-top: 2px solid var(--secondary-color); background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(215,230,255,0.3) 100%);}
.sustain-pg .card4 .ic {width: 72px; height: 72px; margin: 0; display: flex; align-items: center; justify-content: center;}
.sustain-pg .card4 .ic img {max-width: 100%; max-height: 64px; width: auto; height: auto; object-fit: contain;}
.sustain-pg .card4 .tit {margin: 0; font-size: var(--font-size-24); font-weight: 700; color: var(--dark-color); line-height: 1.5;}
.sustain-pg .card4 .desc {font-size: var(--font-size-18); line-height: 1.5;}
.sustain-pg .card4 .desc p {margin: 0 0 0.75em;}
.sustain-pg .card4 .desc p:last-child {margin-bottom: 0;}
.sustain-pg .banner {position: relative; display: flex; align-items: center; justify-content: center; min-height: clamp(280px, 25vw, 400px); width: 100%; padding: var(--space-60) var(--space-30); border-radius: var(--radius-20); overflow: hidden;}
.sustain-pg .banner .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0;}
.sustain-pg .banner .bg img {width: 100%; height: 100%; object-fit: cover;}
.sustain-pg .banner .bg:after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.48); border-radius: var(--radius-20);}
.sustain-pg .banner .inner {position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-25); color: #fff; text-align: center;}
.sustain-pg .banner .tit {margin: 0; font-size: var(--font-size-36); font-weight: 700; line-height: 1.5;}
.sustain-pg .banner .txt {font-size: var(--font-size-18); font-weight: 600; line-height: 1.5;}
.sustain-pg .banner .txt p {margin: 0;}
.sustain-pg .map4 {position: relative; max-width: 1400px; width: 100%; min-height: clamp(640px, 50vw, 800px); margin: 0 auto;}
.sustain-pg .map4 .orbit-box {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.sustain-pg .map4 .mini {position: absolute; display: flex; flex-direction: column; gap: var(--space-25); justify-content: center; width: min(400px, 28vw); min-height: 340px; padding: var(--space-25); border-radius: var(--radius-16); border-top: 2px solid var(--secondary-color); background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(215,230,255,0.36) 100%); text-align: left;}
.sustain-pg .map4 .mini.tl {top: 0; left: 0;}
.sustain-pg .map4 .mini.tr {top: 0; right: 0;}
.sustain-pg .map4 .mini.bl {bottom: 0; left: 0;}
.sustain-pg .map4 .mini.br {bottom: 0; right: 0;}
.sustain-pg .map4 .mini .ic {width: 72px; height: 72px; margin: 0; display: flex; align-items: center; justify-content: center;}
.sustain-pg .map4 .mini .ic img {max-width: 100%; max-height: 68px; width: auto; height: auto; object-fit: contain;}
.sustain-pg .map4 .mini h3 {margin: 0; font-size: var(--font-size-24); font-weight: 700; color: var(--dark-color); line-height: 1.5;}
.sustain-pg .type-accent .card4 .tit {color: var(--secondary-color);}
.sustain-pg .sustain-sec.split-grow {align-self: stretch; width: 100%;}
.sustain-pg .split-grow {display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; gap: var(--space-40); max-width: 1400px; width: 100%; margin: 0 auto; text-align: left;}
.sustain-pg .split-grow .split-col {display: flex; flex-direction: column; gap: clamp(var(--space-40), calc(56 / var(--inner) * 100vw), 56px); flex: 0 1 433px; max-width: 100%;}
.sustain-pg .split-grow .split-head {display: flex; flex-direction: column; gap: var(--space-30);}
.sustain-pg .split-grow .split-head .lead {text-align: left;}
.sustain-pg .split-grow .subtxt {font-size: var(--font-size-18); line-height: 1.5;}
.sustain-pg .split-grow .subtxt p {margin: 0 0 0.35em;}
.sustain-pg .split-grow .img.side {width: 100%; max-width: 380px; margin: 0; border-radius: var(--radius-16); overflow: hidden;}
.sustain-pg .split-grow .img.side img {width: 100%; aspect-ratio: 380 / 480; object-fit: cover;}
.stack-list {display: flex; flex-direction: column; gap: var(--space-25); flex: 1; min-width: 1%; max-width: 840px;}
.stack-item {padding: var(--space-40) var(--space-30); border-radius: var(--radius-16); border-left: 6px solid var(--secondary-color); background: #fff; box-shadow: 6px 6px 30px rgba(0,0,0,0.1);}
.stack-item .row {display: flex; align-items: center; gap: var(--space-15); margin-bottom: var(--space-25);}
.stack-item .ic {width: 56px; height: 56px; margin: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.stack-item .ic img {max-width: 100%; max-height: 56px; width: auto; height: auto; object-fit: contain;}
.stack-item .stit {margin: 0; font-size: var(--font-size-24); font-weight: 700; color: var(--dark-color); line-height: 1.5;}
.stack-item .desc {font-size: var(--font-size-18); line-height: 1.5;}
.stack-item .desc p {margin: 0;}

.page-product, .page-career, .page-customer {margin-top: var(--space-100);}
.job-boxes {display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-60) var(--space-40);}
.job-box {position: relative; width: calc((100% - var(--space-40) * 2) / 3); border-radius: var(--space-20); overflow: hidden;box-shadow: 6px 6px 30px 0 rgba(0, 0, 0, 0.10);}

.job-txt {display: flex; flex-direction: column; justify-content: center; position: absolute; bottom: 0; left: 0; width: 100%; height: 112px; padding: var(--space-25); background: #fff;}
.job-box.active .job-txt {height: 100%; background: rgba(0, 0, 0, 0.6);}
.job-txt h3 {margin-bottom: 8px; font-size: var(--font-size-24); color: var(--dark-color); transition: .2s;}
.job-txt h4 {font-size: var(--font-size-18); font-weight: 600; color: var(--secondary-color); transition: .2s;}
.job-txt p {margin-top: var(--space-30); display: none;}
.job-box.active h3, .job-box.active h4 {color: #fff;}
.page-career .btn-round {text-align: center; max-width: 760px; width: 100%; margin: 0 auto;}

.benefit-boxes {display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-40);}
.benefit-box {display: flex; align-items: center; gap: var(--space-40); padding: var(--space-40); border-radius: var(--radius-16); background: #fff; box-shadow: 6px 6px 30px 0 rgba(0, 0, 0, 0.10);}
.benefit-box .icon {display: flex; align-items: center; justify-content: center;}
.benefit-box .cont {flex: 1; min-width: 1%; display: flex; flex-direction: column; gap: var(--space-25);}
.benefit-box .head {display: flex; align-items: center; gap: var(--space-15);}
.benefit-box .num {font-size: var(--font-size-18); font-weight: 600; color: var(--dark-color);}
.benefit-box .tit {margin: 0; font-size: var(--font-size-24); font-weight: 700; color: var(--dark-color); line-height: 1.5;}

.recruit-system-circles {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0; padding-right: var(--space-30); line-height: 1.5; text-align: center; color: #fff;}
.recruit-system-circles .circle {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-25); width: 400px; height: 400px; padding: var(--space-30); border-radius: 50%; margin-right: -30px; flex-shrink: 0;}
.recruit-system-circles .circle:nth-child(1) {background: rgba(63,128,234,0.65);}
.recruit-system-circles .circle:nth-child(2) {background: rgba(63,128,234,0.85);}
.recruit-system-circles .circle:nth-child(3) {background: rgba(63,128,234,0.95);}
.recruit-system-circles .circle:nth-child(4) {background: var(--secondary-color);}
.recruit-system-circles .circle:nth-child(5) {background: rgba(25,83,177,0.9); margin-right: 0;}
.recruit-system-circles .head {display: flex; flex-direction: column; align-items: center; gap: var(--space-10);}
.recruit-system-circles .head .en {margin: 0; font-size: var(--font-size-16); line-height: 1.5;}
.recruit-system-circles .head .tit {margin: 0; font-size: var(--font-size-24); font-weight: 600; line-height: 1.5;}
.recruit-system-circles .cont {display: flex; flex-direction: column; align-items: center; gap: var(--space-15);}
.recruit-system-circles .lead {margin: 0; font-size: var(--font-size-18); font-weight: 600; line-height: 1.5;}
.recruit-system-circles .desc {font-size: var(--font-size-16); line-height: 1.5;}
.recruit-system-circles .desc p {margin: 0;}

.recruit-system ~ section {padding-top: var(--space-60); margin-top: var(--space-60); border-top: 1px solid #ddd;}
.sec-flex {display: flex;}
.sec-flex .sec-tit {max-width: 320px; width: 22.86%;}
.page-recruit .stack-list {max-width: 100%;}
.page-career .gray-box {display: flex; flex-direction: column; gap: var(--space-15); padding: var(--space-40); border-radius: var(--radius-20); overflow: hidden; background: #F8F8F8;}
.page-career .gray-box.gap40 {gap: var(--space-40)}
.page-career .gray-box dl {display: flex; font-size: var(--font-size-18); line-height: 1.5em;}
.page-career .gray-box dt {width: 120px; font-size: var(--font-size-20); line-height: 1.5em; color: var(--dark-color); font-weight: 700;}
.page-career .gray-box dd {flex: 1; min-width: 1%;}
.example-box {display: flex; flex-direction: column; gap: var(--space-15); padding: var(--space-25); border-radius: var(--space-20); background: #fff;}

.contribution-partners .items {max-width: 280px;}
.contribution-partners {overflow: hidden; margin-top: 42px;}
.contribution-partners .slick-list {overflow: visible;}
.contribution-partners .slick-slide {padding: 0 clamp(5px, calc(12 / var(--inner) * 100vw), 12px)}
.page-contribution section {margin-top: var(--space-120);}

.contribution-zigzag .contain {display: flex; flex-direction: column; gap: var(--space-60);}
.contribution-zigzag .zigzag-item {display: flex; align-items: center; justify-content: space-between; gap: var(--space-60); max-width: 1400px; margin: 0 auto; width: 100%;}
.contribution-zigzag .zigzag-item.reverse {flex-direction: row-reverse;}
.contribution-zigzag .col-txt {display: flex; flex-direction: column; gap: var(--space-40); flex: 1; max-width: 100%;}
.contribution-zigzag .col-tit {display: flex; align-items: center; gap: var(--space-20)}
.contribution-zigzag .num {display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 40px; background: var(--secondary-color); color: #fff; font-size: var(--font-size-18); font-weight: 700; line-height: 1.5;}
.contribution-zigzag .tit {margin: 0; font-size: var(--font-size-40); font-weight: 700; color: var(--dark-color); line-height: 1.5;}
.contribution-zigzag .list {display: flex; flex-direction: column; gap: var(--space-25);}
.contribution-zigzag .block {display: flex; flex-direction: column; gap: var(--space-10);}
.contribution-zigzag .stit {margin: 0; font-size: var(--font-size-30); font-weight: 700; color: var(--dark-color); line-height: 1.5;}
.contribution-zigzag .desc {font-size: var(--font-size-18); line-height: 1.5; color: #454545;}
.contribution-zigzag .desc p {margin: 0;}
.contribution-zigzag .img {width: 50%; border-radius: var(--radius-20); overflow: hidden;}

.contribution-news {padding: var(--space-120) 0; background: url('/images/sub/bg-contribution-news.jpg') no-repeat center center / cover; overflow: hidden;}
.contribution-news .contain {max-width: calc(50% + 730px); margin-right: 0; padding-right: 0;}
.btn-more {display: flex; gap: var(--space-15); color: #767676; font-weight: 600; font-size: var(--font-size-18); transition: .2s;}
.btn-more:hover {gap: var(--space-40);}
.contribution-news-tit {gap: 20px; max-width: 650px; width: 38.5%; padding-top: calc(clamp(44px, calc(56 / var(--inner) * 100vw), 56px) + var(--space-25));}
.contribution-news-arrows {display: flex; justify-content: flex-end; gap: 10px; margin-bottom: var(--space-25); width: 100%;}
.contribution-news-arrows .slick-arrow {display: flex; justify-content: center; align-items: center; width: clamp(44px, calc(56 / var(--inner) * 100vw), 56px); height: clamp(44px, calc(56 / var(--inner) * 100vw), 56px); border-radius: 100%; background: transparent; border: 1px solid var(--dark-color); overflow: hidden; text-indent: -99999em; transition: .2s;}
.contribution-news-arrows .slick-arrow:hover {background: #fff;}
.contribution-news-arrows .slick-arrow:after {content: ''; display: block; width: 11px; height: 11px; background: url('/images/sub/news-arrow.svg') no-repeat center center / contain;}
.contribution-news-arrows .slick-arrow.slick-next:after {transform: scaleX(-1);}
.contribution-news-slider {overflow: hidden;}
.contribution-news-slider .inner {position: relative; max-width: 670px; padding-right: var(--container-space);}
.contribution-news-slider .slick-list {overflow: visible; margin: 0 calc(var(--space-15) * -1)}
.contribution-news-slider .slick-slide {padding: 0 var(--space-15);}
.contribution-news-item {position: relative;}
.contribution-news-item .img {position: relative; width: 100%; padding-bottom: 71.4063%; overflow: hidden; border-radius: var(--radius-20);}
.contribution-news-item .img:after {content:''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #000; opacity: 0; transition: .2s;}
.contribution-news-item:hover .img:after {opacity: .4;}
.contribution-news-item .img img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.contribution-news-item .txt {position: absolute; left: 0; bottom: 0; width: 100%; padding: var(--space-30);}

.page-cooperation section:not(:last-child) {margin-bottom: var(--space-120);}
.page-cooperation section.border-bottom .contain {position: relative; padding-bottom: var(--space-120);}
.page-cooperation section.border-bottom .contain:after {content: ''; position: absolute; bottom: 0; left: var(--container-space); right: var(--container-space); height: 1px; background: #ddd;}
.page-cooperation .magazine-category-list {margin-bottom: var(--space-120);}
.partner-gall ul {display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-10) var(--space-40);}
.brand-film-box {display: flex; gap: 25px; padding: var(--space-40); background: #fff; border-radius: var(--radius-20);}
.brand-film-cnt {position: relative; max-width: 700px; width: 53.035%; overflow: hidden; border-radius: var(--radius-20);}
.brand-film-cnt:before {content: ''; display: block; width: 100%; padding-bottom: 56.25%;}
.brand-film-cnt iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}