@charset "utf-8"; /* doc.css는 디자인페이지 스타일을 정의합니다. */
.doc-tit {margin-bottom: var(--space-30); text-align: center;} 
.doc-tit h2 {font-size: var(--font-size-40); color: #121212; line-height: 1.3em;} 
.doc-tit span {display:block; margin-top:var(--space-10); font-size: var(--font-size-20); color: #cccccc; line-height:1em;} 

.doc-tit.type2 {margin-bottom:var(--space-70);} 
.doc-tit.type2 h2 {font-size: var(--font-size-56); line-height:normal;} 
.doc-tit.type2 span {margin-top:0; margin-bottom:var(--space-20); font-size: var(--font-size-18); color: var(--color-primary); font-weight:700;} 

.doc-cnt {padding:var(--space-100) 0 var(--space-150);} 
.doc-cnt:first-child {padding-top:0;} 

.table-style table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:1px solid var(--color-primary); line-height:1.5em;} 
.table-style table th {padding:13px; border:1px solid #ddd; border-top:0; font-weight:700; background:#f9f9f9;
color: var(--color-primary); font-size: var(--font-size-18);} 
.table-style table td {padding:var(--space-20); text-align:center; border:1px solid #ddd; border-top:0; color: #454545; border-right: 0; border-left: 0;} 
.table-style table tr td:nth-child(2) {text-align: left;} 
.table-style tr th:first-child,
.table-style tr td:first-child {border-left:0;} 
.table-style tr th:last-child,
.table-style tr td:last-child {border-right:0;} 
.table-style span {display:inline-block;} 
.table-style .normal {font-weight:400;} 
.table-style .item {display: inline-block; margin: 4px var(--space-40) 4px 0;} 
.table-style .item:last-child {margin-right:0;} 

.mt20 {margin-top:var(--space-20);} 
.mt30 {margin-top:var(--space-30);} 
.mt40 {margin-top:var(--space-40);} 
.mt50 {margin-top:var(--space-50);} 
.mb80 {margin-bottom:var(--space-80);} 

.pt0 {padding-top:0 !important;} 
.pt60 {padding-top:var(--space-60) !important;} 
.pb0 {padding-bottom:0 !important;} 
.pb100 {padding-bottom:var(--space-100);} 
.pt150 {padding-top:var(--space-150);} 
.pl40 {padding-left:40px;} 

.txt-primary {color: var(--color-primary) !important;} 
.txt-second {color: var(--color-secondary) !important;} 
.txt-dark {color: var(--color-dark) !important;} 

.txt-grey {color: #888888 !important;} 
.txt-wht {color: #fff !important;} 

.bg-grey {background-color: #f9f9f9;} 
 
.fs-18 {font-size: var(--font-size-18); line-height:1.66em;} 
.fs-24 {font-size: var(--font-size-24); line-height:1.67em;} 

.flex-wrap {display:flex;} 
.flex-wrap .flex {flex: 1 1 auto; width:1%; min-width:0;} 

.dot-list > li {position:relative; padding-left:21px; font-size: var(--font-size-18); line-height:1.66em; color: #878787;} 
.dot-list > li:not(:last-child) {margin-bottom:var(--space-10);} 
.dot-list > li:before {content:""; position:absolute; top:11px; left:0; width: 6px; height: 6px; border-radius: 100%; background-color: rgb(204, 204, 204);} 
.dot-list > li strong {font-weight:600;} 

.reverse-list.bg {position:relative; margin-top:200px; padding-top:var(--space-50);} 
.reverse-list.bg::before {content: ""; position: absolute; right: 0; top: -256px; width: 100%; height: 256px; background: url(/images/sub/bg-human.jpg) no-repeat center / contain; background-position: left; z-index: -1;} 
.reverse-list.bg.bg2::before {background-image: url(/images/sub/bg-human-02.jpg);} 
.reverse-list .doc-tit {text-align: left;} 
.reverse-list .cnt {display:flex; flex-direction: row-reverse; align-items: center; margin-bottom:var(--space-100);} 
.reverse-list .cnt > div {width:50%;} 
.reverse-list .cnt .txt {padding-right:var(--space-80);} 
.reverse-list .cnt .img img {width:100%; border-top-right-radius: var(--space-80); border-bottom-left-radius: var(--space-80); box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.1);} 
.reverse-list .cnt .txt p:not(:last-child) {margin-bottom:var(--space-20);} 
.reverse-list .cnt:nth-child(even) {flex-direction: row; justify-content: space-between;} 
.reverse-list .cnt:nth-child(even) .txt {padding-right:0; padding-left:var(--space-80);} 
.reverse-list .cnt:last-child {padding-bottom:0;} 

.formula {width:100%; padding:var(--space-130) 0 var(--space-100); background: url(/images/sub/bg-story.jpg) no-repeat center/cover;} 
.formula .doc-tit {display:flex; justify-content: center; align-items: end; gap:10px;} 
.formula .doc-tit h2 {line-height:1em;} 
.formula .doc-tit span {color: #878787;} 
.formula p {font-size: var(--font-size-18); line-height:1.66em; color: #121212; text-align:center;} 

.btn-wrap {padding-top:var(--space-30); display:flex; justify-content: center; align-items: center; gap: var(--space-20);} 
.btn-wrap a {display:flex; justify-content: center; align-items: center; width: 220px; height: 40px; font-weight:600; font-size: var(--font-size-15); color: #fff; border-radius: 50vh; background-color: rgb(232, 31, 46);} 
.btn-wrap a img {display:inline-block; margin-right:8px;} 

.awards {padding:var(--space-90) 0 var(--space-140); width:100%; height: 1765px; background: url(/images/sub/bg-awards.jpg) no-repeat top/cover;} 
.awards .contain {display:flex; flex-direction: column; justify-content: space-between; height:100%;} 
.awards .tit-wrap {display:flex; flex-direction: column; justify-content: center; align-items: center;} 

.img-list ul {display:flex; flex-wrap: wrap; justify-content: center; gap: var(--space-60) var(--space-80);} 
.img-list ul li {text-align:center;} 
.img-list .icon {margin: 0 auto; text-align:center;} 
.img-list .tx {font-size: var(--font-size-18); line-height:1.66em; letter-spacing: -0.025em; margin-top:var(--space-20); color: #fff;} 

.bg-protein {background: url(/images/sub/bg-ingredient.jpg) no-repeat center/cover;} 
.bg-protein .flex-wrap {align-items: center;} 
.bg-protein .flex-wrap >div {width:50%;} 
.bg-protein .flex-wrap .txt {padding-left:var(--space-70);} 

.cnt-tit {font-size: var(--font-size-32); line-height: normal; color: #121212;} 

.highlight {display: inline; box-shadow: inset 0 -18px 0 rgb(253, 232, 234); color: #121212;} 

small {display:inline-block; width: 100%; margin:var(--space-40) auto 0; font-size: var(--font-size-14); color: #878787;} 

.logo-wrap {display:flex; align-items: center; border-top:1px dashed #ddd; padding:var(--space-100) 0 var(--space-60);} 
.logo-wrap >div {width:50%;} 
.logo-wrap .tit {margin-bottom:var(--space-30); font-size: var(--font-size-24); line-height:1.67em;} 

.doc-guide {display:flex; align-items: center; gap: var(--space-20); margin-top:var(--space-20); background-color: rgb(244, 244, 244); padding:var(--space-30) var(--space-60);} 
.doc-guide p {color: #878787;} 
.doc-guide p strong {color: #505050; font-weight:600;} 

.box-wrap {display:flex; gap: var(--space-40);} 
.box-wrap .box {display:flex; justify-content: center; align-items: center; flex-direction: column; width:50%; height: 305px; border: 1px solid #ddd;} 
.box-wrap .box .ico img {width:clamp(28px, calc( 48 / var(--inner) * 100vw ), 48px );} 
.box-wrap .tit {margin-top:var(--space-20); font-weight:700; font-size: var(--font-size-22); color: #121212; line-height:1.82em;} 

.check-list {display:flex; flex-direction: column; padding-top:var(--space-20);} 
.check-list li {position:relative; padding-left:28px; margin-bottom:var(--space-10);} 
.check-list li:last-child {margin-bottom:0;} 
.check-list li::before {content: ""; position: absolute; top:4px; left:0; width:18px; height:18px; background: url(/images/sub/check.png) no-repeat center/contain;} 

.point-wrap {display:flex; gap: var(--space-20); padding-top:var(--space-50);} 
.point-wrap .point {display:flex; justify-content: center; align-items: center; gap:var(--space-16); width:50%; padding:var(--space-25); border: 1px solid var(--color-primary); background-color: #fff;} 
.point-wrap p {font-weight:600; color: var(--color-primary);} 

.cnt-wrap > * {text-align:center;} 
.cnt-wrap .cnt-tit {margin-top:var(--space-50)} 
.cnt-wrap p {margin-top:var(--space-20);} 

.graph-wrap {display:flex; justify-content: center;} 
.graph-wrap .graph {display:flex; justify-content: center; align-items: center; flex-direction: column; width: 50%; text-align: center;} 
.graph-wrap .graph .ico {text-align:center;} 
.graph-wrap .graph p {margin-top:var(--space-15); font-size: var(--font-size-18); color: #878787; line-height:1.56em;} 
.graph-wrap .graph .img {margin-top:var(--space-30); text-align:center;}