@charset "utf-8"; /* doc.css는 디자인페이지 스타일을 정의합니다. */
.doc-tit {position: relative; padding-left: 12px; color: #000022; font-size: var(--font-size-25-20); font-weight: 500; line-height: 1em; letter-spacing: -.03em; margin-bottom: var(--margin-30-16); font-family: 'NEXON Lv2 Gothic';} 
.doc-tit:before {content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 25px; background-color: #000022;} 

.doc-cnt {margin-bottom:var(--margin-150-70);} 
.doc-cnt:last-child {margin-bottom:0;} 
.doc-cnt.bg-grey {background-color: #f4f4f4;} 

.doc-sub-cnt {padding:var(--padding-100-60);} 
.doc-sub-cnt:last-child {padding-bottom:0;} 
.doc-sub-cnt.bg-grey {background-color: #f9f9f9;} 

.mb150 {margin-bottom:var(--margin-150-70);} 
.mb110 {margin-bottom:var(--margin-110-30);} 
.mb20 {margin-bottom:var(--margin-20-10);} 
.mb180 {margin-bottom:var(--margin-180-80);} 
.mb90 {margin-bottom:var(--margin-90-30);} 

.pt0 {padding-top:0 !important;} 
.pb0 {padding-bottom:0 !important;} 
.pb100 {padding-bottom:var(--padding-100-60) !important;} 
.pb200 {padding-bottom:var(--padding-200-100);} 

.txt-blue {color: var(--color-primary) !important;} 
.txt-grey {color: #888888 !important;} 
.txt-dark {color: #2c2c2c !important;} 

.bg-grey {background-color: #f9f9f9;} 

.flex-wrap {display:flex;} 

.underline {text-decoration: underline;} 

.superscript {vertical-align: super; font-size: small;} 

.sub-head .page-name {display:block; margin-bottom:var(--margin-30-16); font-weight:500; font-size: var(--font-size-18); line-height:1.666em; color: #878787;} 
.sub-head .tit {margin-bottom:var(--margin-60-30); font-size: var(--font-size-28-48); font-family: 'MaruBuri'; font-weight:400; line-height:1em; color: var(--color-dark);} 
.sub-head .tit.st2 {margin-bottom:var(--margin-60-40); font-size: var(--font-size-28-48); font-family: 'MaruBuri'; font-weight:400; line-height:1em; color: var(--color-dark);} 

.sub-head.st2 {margin-bottom:clamp(20px, calc( 60 / var(--inner) * 100vw ), 60px);} 
.sub-head.st2 .tit {margin-bottom:0; font-family:var(--body-font-family); font-size:var(--font-size-28-38); font-weight:500; line-height:1.3em; color:var(--color-dark);} 

.sub-top-img {overflow:hidden; margin-bottom:var(--margin-100-40); padding-left:var(--container-space); padding-right:var(--container-space);} 
.sub-top-img .inner {position:relative; max-width:1400px; margin:0 auto;} 
.sub-top-img .img {width:100vw; overflow:hidden; border-radius:var(--border-radius-16-10) 0 0 var(--border-radius-16-10);} 
.sub-top-img .txt {position:relative; transform:translateY(-50%); text-align:right; padding-left:10%;} 

/* about */
.sub-content {display: flex;} 
.sub-content .left {width: 44%;} 
.sub-content .left::after {content:''; display:block; clear:both;} 
.sub-content .left .left-wrap {position: sticky; top:0; z-index:10; float: right; width:100%; max-width: 490px; padding-top:var(--margin-100-40);} 

.page-move ul li {margin-bottom: var(--margin-30-16);} 
.page-move ul li:last-child {margin-bottom: 0;} 
.page-move ul li a {display:block; line-height: 1em; color: #a8a8a8;} 
.page-move ul li.active a, 
.page-move ul li a:hover {color: var(--color-primary); font-weight:600;} 

.sub-content .right {flex: 1 1 auto; min-width: 0; width: 1%;} 
.sub-content .section {display:flex; padding: 0 0 var(--margin-130-60);} 
.sub-content .section:first-child {padding-top:var(--margin-100-40);} 
.sub-content .section:last-child {padding-bottom:0;} 
.sub-content .section .num {display:inline-block; width:110px; font-weight:600; font-size: var(--font-size-18); line-height:1em; color: var(--color-dark);} 
.sub-content .section.active .num {color: var(--color-primary);} 
.sub-content section .wrap {flex: 1 1 auto; min-width: 0; width: 1%;} 
.sub-content .section .img {margin-bottom:var(--margin-50-30);} 
.sub-content .section p {margin-bottom:var(--margin-40-20);} 
.sub-content .section p:last-child {margin-bottom:0;} 
.sub-content .section .tit {font-weight:500; font-size: var(--font-size-22-32); line-height:1.5em; color: #2c2c2c;} 
.sub-content .section .desc {font-size: var(--font-size-18); line-height:1.666em; color: #878787;} 
.sub-content .section .desc strong {font-weight:600; color: var(--color-dark);} 

/* history */
.history-list {position:relative;} 
.history-list .img {position: absolute; z-index: -1;} 
.history-list .img.img1 {top:40px; left:0;} 
.history-list .img.img2 {top: 50%; right:0; transform: translateY(-50%); text-align:right;} 
.history-list .img.img3 {bottom:40px; left:0;} 
.history-list .wrap {padding-bottom:var(--padding-80-40); text-align:center;} 
.history-list .wrap:last-child {padding-bottom:0;} 
.history-list .date {margin-bottom: 10px; font-weight:500; font-size: var(--font-size-38); line-height:1.263em; color: #2c2c2c;} 
.history-list ul li {font-size: var(--font-size-18); line-height:1.666em;} 

/* greetings */
.greetings .flex-wrap > div {width:33.3333%;} 
.greetings .flex-wrap .txt {padding-top:var(--padding-110-50); text-align:center; font-size: var(--font-size-24); color: #2c2c2c; line-height:1.583em;} 
.greetings .flex-wrap .img:last-child {padding-top:var(--padding-120-60); text-align:right;} 
.greetings .banner-wrap {text-align:center; color: #2c2c2c;} 
.greetings .banner-wrap .t1 {font-weight:500; font-size: var(--font-size-22-32); line-height:1.5em;} 
.greetings .banner-wrap .t2 {font-size: var(--font-size-24); line-height: 1.583em;} 
.greetings .banner-wrap .t3 {font-weight:500; font-size: var(--font-size-18); line-height:2.666em;} 
.greetings .banner-wrap .img {margin-top:var(--margin-20-10);} 

.greetings.en .flex-wrap .img p {font-size: var(--font-size-16); color: #a8a8a8; font-style: italic; padding-top:var(--padding-15-10);} 

/* Biocellulose */
.bio-section:not(:last-child) {margin-bottom:var(--margin-130-60);} 
.bio-section.flex {display:flex; justify-content:space-between; gap:0 40px;} 
.bio-section .right {width: 62%; max-width: 660px;} 

.bio-article:not(:last-child) {margin-bottom:var(--margin-100-40);} 

.bio-imgs {margin-bottom:var(--margin-60-30);} 
.bio-imgs .row {display:grid; grid-template-columns:repeat(2, 1fr); gap:10px;} 
.bio-imgs img {border-radius:var(--border-radius-16-10);} 
.bio-imgs img.border {border:1px solid #dfdfdf;} 
.bio-imgs p {margin-top:var(--margin-20-10); font-size:var(--font-size-14); line-height:1.4em; color:#878787;} 
.bio-imgs p strong {display:inline-block; margin-bottom:.4em; font-size:var(--font-size-18); font-weight:600; line-height:1.4em; color:var(--color-dark);} 

.bio-sub-tit {position:relative; padding-left:0.64em; margin-bottom:var(--margin-40-20); font-size:clamp(20px, calc(28 / var(--inner) * 100vw ), 28px); font-weight:500; line-height:1.3em; color:var(--color-dark);} 
.bio-sub-tit:before {content:''; position:absolute; top:.15em; left:0; width:3px; height:.93em; background:var(--color-primary);} 

.bio-desc {font-size:var(--font-size-18); line-height:1.666em; color:#878787;} 
.bio-desc strong {font-weight:600; color: var(--color-dark);} 
.bio-desc:not(:last-child) {margin-bottom:var(--margin-50-20);} 

.bio-process .img-area {display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:var(--margin-40-20);} 
.bio-process .img-area .img {position:relative; border-radius:var(--border-radius-16-10); overflow:hidden;} 
.bio-process .img-area .img span {position:absolute; top:var(--margin-30-10); left:var(--margin-30-10); padding:var(--margin-20-10); border-radius:var(--border-radius-16-10); background:#fff; font-size:var(--font-size-20); font-weight:600; line-height:1.5em; color:var(--color-dark);} 
.bio-process .txt-area {display:flex; align-items:center; gap:20px; text-align:center;} 
.bio-process .txt-area:before,
.bio-process .txt-area:after {content:''; flex:1 1 auto; min-width:0; width:1%; height:45px; background-image:url('../images/sub/process-arrow.png'); background-repeat:no-repeat; background-size:contain;} 
.bio-process .txt-area:before {background-position:0 50%;} 
.bio-process .txt-area:after {background-position:100% 50%;} 
.bio-process .txt-area p {padding:18px 46px; border-radius:35px; background-image:linear-gradient( 90deg, rgb(238,211,110) 0%, rgb(216,198,132) 100%); font-size:var(--font-size-24); font-weight:600; line-height:1.4em; letter-spacing:-.02em; color:var(--color-dark);} 

.bio-table table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:1px solid var(--color-dark); border-bottom:1px solid var(--color-dark); line-height:1.5em;} 
.bio-table table th,
.bio-table table td {padding:15px; border:1px solid #dfdfdf; border-top:0;} 
.bio-table table thead th {border-bottom-color:var(--color-dark); background:#f4f4f4; font-weight:600; color:var(--color-dark);} 
.bio-table table tbody th {font-weight:500; color:var(--color-dark);} 
.bio-table table tbody td {text-align:center;} 
.bio-table tr th:first-child,
.bio-table tr td:first-child {border-left:0;} 
.bio-table tr th:last-child,
.bio-table tr td:last-child {border-right:0;} 
.bio-table tbody tr:last-child th,
.bio-table tbody tr:last-child td {border-bottom:0;} 

.bio-parts {text-align:center; font-size:var(--font-size-18); font-weight:600; line-height:1.5em; color:var(--color-dark);} 
.bio-parts ul {display:grid; grid-template-columns:repeat(4, 1fr); gap:7px 10px;} 
.bio-parts ul li {padding:var(--padding-40-20); border-radius:var(--border-radius-16-10); background:#f4f4f4;} 
.bio-parts ul li img {display:block; margin:0 auto var(--margin-30-16); width:clamp(60px, calc( 86 / 1200 * 100vw ), 86px);} 

.btn-download {display:inline-flex; justify-content:center; align-items:center; padding:var(--padding-20-16) var(--padding-80-20); border:1px solid var(--color-dark); border-radius:50vh; font-size:var(--font-size-18); font-weight:500; line-height:1.4em; letter-spacing:-.02em; color:var(--color-dark);} 
.btn-download:after {content:''; display:inline-block; margin-left:var(--margin-40-20); width:18px; height:18px; background:url('../images/sub/icon-down.png') 50% 50%/contain no-repeat;} 

/* Directions */
.directions .contain {max-width:unset !important;} 
.directions .dir-info {margin-top:var(--margin-50-20); padding:clamp(20px, calc( 140 / var(--inner) * 100vw ), 140px) clamp(16px, calc( 50 / var(--inner) * 100vw ), 50px); background:var(--color-third); border-radius:var(--border-radius-16-10); color:var(--color-primary); text-align:center; font-weight:600;} 
.directions .dir-info .img {margin-bottom:var(--margin-50-20);} 
.directions .dir-info .addr {margin-bottom:25px; font-size:var(--font-size-24); line-height:1.5em;} 
.directions .dir-info .info {display:flex; flex-wrap:wrap; justify-content:center; gap:6px 60px; font-size:var(--font-size-18); line-height:1.5em;} 
.directions .dir-info .info li strong {font-weight:600; margin-right:1em;} 

.root_daum_roughmap {width:100% !important; height:560px !important; border-radius:var(--border-radius-16-10); overflow:hidden;} 
.root_daum_roughmap .wrap_map {height:560px !important;} 
.roughmap_lebel_text {line-height:0 !important; font-size:0 !important;} 

.map iframe {width:100% !important; height:560px !important;   border-radius:var(--border-radius-16-10); }

/* Process */
.process {margin-top:var(--margin-100-40); overflow:hidden;} 
.process ol {display:flex; flex-wrap:wrap; justify-content:center; gap:1em 0; margin:0 calc(0px - clamp(16px, calc( 66 / var(--inner) * 100vw ), 66px));} 
.process ol li {position:relative; width:25%; padding:0 clamp(16px, calc( 66 / var(--inner) * 100vw ), 66px);} 
.process ol li:after {content:''; position:absolute; top:51%; right:-14px; width:28px; height:28px; background:url('../images/sub/step-arrow.png') 50% 50%/contain no-repeat;} 
.process ol li:last-child::after {display:none;} 
.process .num {font-size:clamp(80px, calc( 140 / var(--inner) * 100vw ), 140px); font-weight:800; line-height:1em; color:#f7f3e2;} 
.process .icon {position:relative; margin-top:-30%; background:#fff; border:1px solid var(--color-primary); border-radius:100%;} 
.process .icon:before {content:''; display:block; padding-bottom:100%;} 
.process .icon span {position:absolute; top:0; left:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center;} 
.process .icon img {width:clamp(50px, calc( 64 / var(--inner) * 100vw ), 64px);} 
.process .txt {margin-top:1.2rem; text-align:center; font-size:var(--font-size-18); font-weight:500; line-height:1.4em; color:var(--color-dark);} 
.process.st2 ol {margin:0 calc(0px - clamp(16px, calc( 25 / var(--inner) * 100vw ), 25px));} 
.process.st2 ol li {width:20%; padding:0 clamp(16px, calc( 25 / var(--inner) * 100vw ), 25px);} 
.process.st2 ol li:after {top:53%; right:-9px; width:18px; height:18px;} 

/* Partners */
.partners {margin-top:var(--margin-80-20);} 
.partners ul {display:grid; grid-template-columns:repeat(5, 1fr); gap:clamp(10px, calc( 70 / var(--inner) * 100vw ), 70px); clamp(10px, calc( 50 / var(--inner) * 100vw ), 50px);} 

/* Inquiry */
.inquiry-wrap {display:flex; justify-content:space-between; gap:20px; color:var(--color-dark);} 
.inquiry-head {width:45%;} 
.inquiry-head .head h3 {margin-bottom:var(--margin-30-16); font-size:var(--font-size-22-32); font-weight:500; line-height:1.3em;} 
.inquiry-head .head p {font-size: var(--font-size-18); font-weight:500; line-height:1.7em;} 
.inquiry-head .head .en {margin-bottom:var(--margin-30-16); font-size: var(--font-size-18); font-weight:500; line-height:1.4em; color:#a8a8a8;} 
.inquiry-form {width:50%; padding-top:var(--padding-40-20); border-top:1px solid #2c2c2c; color:var(--color-dark);} 
.inquiry-form .ico-required {display:inline-block; vertical-align:middle; margin:-.2em 0 0 4px; width:10px; height:10px; background:var(--color-primary); border-radius:100%;} 
.inquiry-form .form {display:flex; flex-wrap:wrap; gap:37px 0;} 
.inquiry-form .form .col {width:50%;} 
.inquiry-form .form .col:nth-child(2n) {margin-left:-1px;} 
.inquiry-form .form .col.wide {width:100%; margin:0;} 
.inquiry-form .form dt {margin-bottom:var(--margin-15-10); font-weight:600; line-height:1.3em;} 
.inquiry-form .form .input {display:block; width:100%; height:48px; border-color:var(--color-dark);} 
.inquiry-form .form select.input {padding-right:30px; background-size:10px auto; background-position:right 10px center;} 
.inquiry-form .form textarea.input {height:100px;} 
.inquiry-form .form .captcha-wrap {height:48px;} 
.inquiry-form .submit-area {display:flex; justify-content:space-between; align-items:center; margin-top:var(--margin-50-30);} 
.inquiry-form .check {text-align:left; font-size:var(--font-size-14); font-weight:500;} 
.inquiry-form .check .checkbox label:before {margin:-.2em 8px 0 0; width:20px; height:20px; background:#ddd url('/images/bbs/checkbox.png') 50% 50% no-repeat; border:0; border-radius:100%;} 
.inquiry-form .check .checkbox input:checked + label:before {background-color:var(--color-dark);} 
.inquiry-form .check a {color:#a8a8a8;} 
.inquiry-form .submit button {display:inline-flex; align-items:center; justify-content:space-between; width:223px; padding:var(--padding-20-10) var(--padding-30-16); border:1px solid var(--color-dark); background:#fff; font-weight:600; color:var(--color-dark);} 
.inquiry-form .submit button:after {content:''; width:44px; height:15px; background:url('/images/sub/submit-arrow.png') 100% 50%/contain no-repeat; transition:.2s;} 
.inquiry-form .submit button:hover::after {transform:translateX(8px);} 

/* Certifications */
.certifications ul {display:grid; grid-template-columns:repeat(4, 1fr); gap:80px 50px;} 
.certifications ul li .img {overflow:hidden; margin-bottom:var(--margin-30-10); border:1px solid #eee; border-radius:var(--border-radius-16-10);} 
.certifications ul li .tit {color:#2c2c2c; font-size:var(--font-size-18); font-weight:500; line-height:1.33em;} 

.goods-slider .swiper-slide.swiper-slide-visible img {display:block;}
.goods-slider .swiper-slide img {display:none;}