/*header*/
/*.menu-area .row { gap: 10px;}*/
.header-row { flex-wrap: nowrap;}
.menu-area .header-button { margin-left: 0px;}
.main-menu ul li a:hover { color: var(--navy-color);}
.header-layout3,
.header-layout3 .sticky-wrapper { transform: none !important; animation: none !important; background: var(--white-color);}

.header-logo a img { width: 120px; height: auto;}
.mobile-logo a img { width: 120px; height: auto;}
.footer__logo img { width: 120px; height: auto;}



@media (min-width: 992px) {
  .col-logo { order: 1; }
  .col-nav  { order: 2; }
  .col-sns  { order: 3; }
  .col-lang { order: 4; }
}


/*header-language*/
.lang-dropdown{position:relative; display:inline-block; font-family:inherit;}

.lang-btn{ display:flex; align-items:center; gap:10px; height:40px; padding:0 18px; border:1px solid var(--navy-color); border-radius:10px; background: var(--navy-color); color:var(--white-color); cursor:pointer;}
.lang-btn:hover{ border-color:rgba(0,0,0,.22);}
.lang-chevron{ opacity:1; transition:transform .18s ease;}
.lang-dropdown.open .lang-chevron{transform:rotate(180deg);}

.lang-menu{ position:absolute; top:calc(100% + 1px); right:0; min-width:86px; padding:6px; border:1px solid rgba(0,0,0,.12); border-radius:10px; background:var(--navy-color); box-shadow:0 10px 30px rgba(0,0,0,.10); display:none; z-index:9999; padding-left: 6px;}
.lang-dropdown.open .lang-menu{ display:block;}
.lang-menu a{ display: block; transition: transform .25s ease, color .25s ease; padding: 4px 10px; border-radius:10px; color:var(--white-color); text-decoration:none; font-size:14px;}
.lang-menu a:hover{ transform: translateX(6px);}
.lang-menu li { list-style: none;}

/*header-sns*/
/*.header-sns { display: inline-flex !important; align-items: center; flex-wrap: nowrap; gap: 20px;  padding: 31px 10px;}
.header-sns > a { display: inline-flex !important; align-items: center; justify-content: center; width: auto !important; margin: 0 !important; padding: 0; line-height: 1;}
.header-sns svg { width: 20px; height: 20px; fill: var(--title-color); display: block;}
.header-sns svg:hover { color: var(--navy-color);}*/
.header-sns { display: inline-flex !important; align-items: center; flex-wrap: nowrap; gap: 20px;  padding: 0px 20px;}
.header-sns a img { width: 20px; height: 20px;}



/*header-sidebar*/
.social-btn.style3 .header-sns{ padding: 0;}
.sidebar-wrap p {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 6px;
}

.sidebar-wrap .label {
  position: relative;
  padding-right: 10px;
  white-space: nowrap;
  font-weight: 500;
}

/* 세로선 */
.sidebar-wrap .label::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: #ccc;
}







/*Breadcumb*/
.breadcrumb { margin-top: 0.5rem; margin-bottom: 0;}
.breadcumb-content{ width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;}
.breadcrumb ol{ display: flex; justify-content: center; align-items: center; gap: 8px; list-style: none; padding: 0; margin: 8px 0 0;}
.breadcrumb li, .breadcrumb a { color: var(--white-color);}
.breadcrumb li::after {  content: ">"; margin-left: 8px; }
.breadcrumb li::after:hover { text-decoration: none;}
.breadcrumb li:last-child::after { content: "";}

.breadcumb-wrapper::before { pointer-events: none;}

.breadcumb-content { position: relative; z-index: 2;}
.breadcumb-wrapper { position: relative; overflow: hidden; background-image: var(--bg); background-size: cover; background-position: center; background-repeat: no-repeat;}



/*공통*/
html {overflow-x: hidden;}

body {overflow-x: hidden;}
ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
.text-right { text-align: right;}
.text-center.title { margin-bottom: calc(var(--section-title-space) - 43px);}
.c-1 { color: #0c3692;}
.bg-navy { background-color: var(--navy-color) !important;}
.bg-navy h2 { color: var(--white-color);}
.bg-navy p { color: var(--white-color);}

.space-half { padding: 70px 0;}
.pagination-wrap { display: flex; justify-content: center;}

.border { border-radius: 50px;}
.mt-100 { margin-top: 100px;}
dt { font-weight: 500;}
.common-top { margin-top: 70px;}

input,
textarea { -webkit-user-select: text; user-select: text;}

/*btn*/
.link-effect.navy:hover { color: var(--navy-color);}

.link-effect:hover { color: var(--white-color);}

.link-btn img{ transition:0.3s;}
.link-btn:hover img{ filter: invert(17%) sepia(86%) saturate(1200%) hue-rotate(205deg);}
.portfolio-details-btn .link-btn:hover{ color: var(--navy-color);}

.portfolio-details-btn .link-btn:hover img{ filter: invert(17%) sepia(86%) saturate(1200%) hue-rotate(205deg);}
.portfolio-details-btn:hover {color: var(--navy-color);}

.btn-small { padding: 8px 15px;}

/*index-visiual-slider*/
.hero-wrapper.hero-18{ position: relative; overflow: hidden;}
.hero-wrapper.hero-18 .mainSwiper{ width: 100%; height: clamp(520px, 100vh, 652px); background: var(--smoke-color);}

./*mainSwiper{ position:relative;}
.mainSwiper .swiper-slide{ position:relative;}
.mainSwiper .swiper-slide img{ position:relative; z-index:1; width:100%; height: 100%; object-fit: cover; display:block; background: var(--smoke-color);}

.nav-overlay.bottom{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:6; pointer-events:none;}
.nav-overlay.bottom .textNavSwiper{ pointer-events:auto; border-radius:999px; padding:10px 12px; backdrop-filter: blur(8px); background: rgba(255,255,255,0.78); box-shadow: 0 10px 30px rgba(0,0,0,0.12);}*/

.textNavSwiper .swiper-slide{ width:auto; cursor:pointer; color:#0c3692; font-size:14px; padding:5px 20px; border:1px solid rgba(0,0,0,0.10); border-radius:999px; white-space:nowrap; transition:all .2s; display:flex; align-items:center; justify-content:center; 
 /* glass 핵심 */ background: var(--white-color); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
 /* pill 형태 */ border-radius:999px; border:1px solid rgba(255,255,255,0.35);
 /* 입체감 */ box-shadow: inset 0 1px 1px rgba(255,255,255,.5), 0 8px 20px rgba(0,0,0,.15); }

.textNavSwiper .swiper-slide-thumb-active{ color:var(--white-color); font-weight:700; background: #0c3692; border-color: rgba(0,0,0,0.16);  /* glass 핵심 */  backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);/* pill 형태 */ border-radius:999px; border:1px solid rgba(255,255,255,0.35);/* 입체감 */ box-shadow: inset 0 1px 1px rgba(255,255,255,.5), 0 8px 20px rgba(0,0,0,.15);}
.textNavSwiper .swiper-slide { transition: transform 0.25s ease-out;}
.textNavSwiper .swiper-slide:hover { transform: translateY(-6px);}


.mainSwiper .swiper-pagination{ display:none; }

.swiper-button-prev,
.swiper-button-next{ width:60px !important; height:60px !important; border-radius:50%; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(15px); transition: all ease 0.4s;  z-index:5;}

.swiper-button-prev:hover,
.swiper-button-next:hover{ background: var(--white-color); color: var(--title-color);}

.swiper-button-prev::after,
.swiper-button-next::after{ font-size:18px !important; color:var(--white-color); font-weight:700;}

.swiper-button-prev:hover::after,
.swiper-button-next:hover::after{ color:#000;}

.mainSwiper .swiper-slide::before{ z-index:2;}


.nav-overlay.bottom{ z-index:4;}

/*index-visiual-video*/
.swiper-slide { position: relative;}
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform: scale(1.25);}


.hero-content{ position:absolute; inset:0; display:flex; align-items:center; z-index:3; pointer-events:none;}
.hero-content .btn{ pointer-events:auto;}

.hero-content .row{ width:100%; margin:0;}

.mainSwiper .hero-style18,
.mainSwiper .hero-style18 *{ opacity: 1 !important; visibility: visible !important; transform: none !important;}
.hero-video-wrap { position: relative; width: 100%; height: 100%;}
.pc-video { display: block;}
.mo-video { display: none;}






/*index-section01*/








/*index-section02*/

/*bioft스토리 고객사로고랑 공통*/
.client-list-wrap .effect-1 { display: flex; align-items: center; justify-content: center;}
.client-list-wrap img { display:block; width: 100%; height: auto; object-fit: contain; max-width: 100%; opacity: 0.7; transition: opacity 0.3s ease;}
/**/

#main-client .client-list-wrap { grid-template-columns: repeat(3, 1fr); gap: 10px;}
#main-client .client-list-wrap li a { width: 100%; height: 100%; align-items: center; background: var(--white-color); padding: 20px; border-radius: 10px; border: 1px solid #f7f7f7; }





#main-client .client-list-wrap a:hover img { opacity: 1;}
#main-client .client-list-wrap > li > a{ display:flex; align-items:center; justify-content:center; padding: 14px 16px; overflow: hidden;}



#main-client .client-list-wrap.is-collapsed {max-height: 420px;}
#main-client .client-list-wrap.is-expanded { max-height: 9999px;}

.client-more-wrap { margin-top: 20px; text-align: center;}
.client-more-btn{ display:inline-block; padding:10px 20px; border-radius:30px; text-decoration:none; cursor:pointer;}
.client-more-btn span { color: var(--navy-color);}

.fa-chevron-up:before,
.fa-chevron-down:before { color: var(--navy-color);}

/*.client-more-btn:hover { background-color: var(--navy-color); color: var(--white-color);}*/
.client-more-btn .icon{ margin-left:6px; transition:.25s; font-size: 13px;}
.client-more-btn.open .icon{ transform: rotate(180deg);}


/*index-section03*/
#main-story .btn-group { justify-content: flex-end;}

#main-story .card-wrap { display: flex; border-radius: 30px; overflow: hidden; margin-bottom: 20px;}
#main-story .card-img { width: 200px; flex-shrink: 0;}
#main-story .card-img .pc-img { display: block;}
#main-story .card-img .mo-img { display: none;}
#main-story .card-img img { width: 100%; height: 100%; object-fit: cover; display: block;}
#main-story .card-content { flex: 1; padding: 36px 40px; display: flex; flex-direction: column; justify-content: center;}




/*index-section04*/
.portfolio-thumb { position: relative;}
.portfolio-badge { position: absolute;  top: 40px; left: 40px; z-index: 3; padding: 6px 14px; font-size: 16px; font-weight: 600;  color: var(--white-color); background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(4px); border-radius: 20px; pointer-events: none;}
.portfolio-wrap:hover .portfolio-badge { transform: translateY(-2px); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5), 0 8px 20px rgba(0, 0, 0, .15); transition: transform .18s ease;}
.project-area-6 .portfolio-static { cursor: pointer;}

.together .slice_area { display: flex; gap: 16px;}
.together .slice_area .box { position: relative; width: 100px; height: 500px; background: no-repeat 50% 50% / cover; cursor: pointer; transition: .2s linear; border-radius: 30px;}
.together .slice_area .box:before { top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); border-radius: 30px; transition: opacity 0.3s ease;}
.together .slice_area .box:before, 
.together .slice_area .box:after { content: ""; position: absolute; transition: .2s linear;}

.together .slice_area .box.i1 { background-image: url("/assets/img/07_main_raw.jpg")}
.together .slice_area .box.i2 { background-image: url("/assets/img/05_main_odm.jpg")}
.together .slice_area .box.i3 { background-image: url("/assets/img/06_main_efficacy.jpg")}

.together .slice_area .box.on { width: calc(100% - 232px);}
.together .slice_area .box.on:before { opacity: 0.2;}
.together .slice_area .box.on a { width: 100%;}
.together .slice_area .box a { position: absolute; top: 0; left: 0; width: 0; height: 100%; z-index: 3; font-size: 0;}
.together .slice_area .box.on .before { top: 0; opacity: 0;}
.together .slice_area .box .before { top: 81px; width: 103px; font-size: 22px; color: var(--white-color); font-weight: 700; line-height: 1; text-align: center; transform: rotate(90deg);}

.together .slice_area .box .before, 
.together .slice_area .box .after { position: absolute; left: 0; pointer-events: none; transition: .2s linear;}

.together .slice_area .box.on .after { left: 40px; opacity: 1; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.65);}
.together .slice_area .box .after { bottom: 40px; opacity: 0;}
.together .slice_area .box .after dt { display: flex; align-items: center; gap: 16px; font-size: 30px; color: var(--white-color); font-weight: 700; line-height: 1.2; margin-bottom: 16px;}
.together .slice_area .box .after dt i { width: 30px; height: 30px; background: #255cff url("/assets/img/icon/plus-icon.png") no-repeat 50% 50%; border-radius: 50%;}
.together .slice_area .box .after dd { font-size: 18px; color: var(--white-color); font-weight: 500; line-height: 1.2;}
.together .slice_area .box.on:after { bottom: 0; opacity: 0;}
.together .slice_area .box:after { bottom: 80px; left: 50%; width: 30px; height: 30px; border: var(--white-color) 1px solid; border-radius: 30px; background: url("/assets/img/icon/plus-icon.png") no-repeat 50% 50%; transform: translateX(-50%);}





@media screen and (max-width:1440px){
.together .slice_area .box {width:90px; height:400px;}
.together .slice_area .box.on {width:calc(100% - 202px);}
.together .slice_area .box .before {width:90px; font-size:20px;}




}


@media screen and (max-width:1023px){
.together .slice_area .box {width:80px; height:340px;}
	.together .slice_area .box.on {width:calc(100% - 180px);}
	.together .slice_area .box:after {bottom:60px;}
	.together .slice_area .box .before {top:61px; width:80px;}
	.together .slice_area .box .after {bottom:30px;}
	.together .slice_area .box .after dt {gap:14px; font-size:28px; margin-bottom:14px;}
	.together .slice_area .box .after dd {font-size:16px;}
	.together .slice_area .box.on .after {left:30px;}



}


@media screen and (max-width:767px){
.together .slice_area { flex-direction: column;}
.together .slice_area .box {width:100%; height:160px;}
	.together .slice_area .box.on,
	.together .slice_area .box a {width:100%;}
	.together .slice_area .box:after,
	.together .slice_area .box .before {display:none;}
	.together .slice_area .box .after {bottom:16px; left:16px; opacity:1; margin-bottom: 0;}
	.together .slice_area .box .after dt {gap:8px; font-size:20px; margin-bottom:8px;}
	.together .slice_area .box .after dt i {width:24px; height:24px; background-size:10px;}
	.together .slice_area .box .after dd {font-size:14px;}
	.together .slice_area .box.on .after {left:16px; margin-bottom: 0;}
	.together .slice_area .box.on:before {opacity:1;}



}
















/*index-소식*/
.notice .notice-wrap { display: flex; flex-wrap: wrap; justify-content: flex-start;} 
.notice .text-end a { border-radius: 10px; background: #e9e9e9; color: #111; border: 1px solid #eee;} 
.notice .btn-group { margin-top: 30px;}

/*바이오에프터 스토리*/
/*company-section01*/
.hero-3-thumb img { overflow: hidden; border-radius: 10px;}
.counter-top { display: flex; align-items: center; justify-content: center; }


/*company-section02*/
.kbeauty-row { display: flex; justify-content: space-between;}
.kbeauty-row figcaption p:last-child { width: 100%; text-align: center;}
.kbeauty-row figcaption p { font-size: 16px; font-weight: 600; color: var(--navy-color); text-transform: capitalize; margin-bottom: 0; display: inline-block; background: var(--white-color); border: 1px solid var(--navy-color); padding: 6px 30px; border-radius: 8px; margin-bottom: 10px; text-align: center;}
.kbeauty-iso { position: relative; padding: 30px 0; margin: 40px 0;}
.kbeauty-iso::before,
.kbeauty-iso::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 100%; height: 2px; background: var(--navy-color);}

.kbeauty-iso::before { top: 0;}
.kbeauty-iso::after { bottom: 0;}

.kbeauty-iso h4 { color: var(--navy-color); margin-bottom: 0;}

.kbeauty-highlight { display: inline; background: #0c369217; padding: 2px 4px; border-radius: 4px;}
.model-img{ border-top-right-radius:160px;}
.kbeauty-object img { border-top-right-radius: 160px;}
.kbeauty-object .img-wrap { display: flex; justify-content: flex-end;}

.kbeauty-desc > span { display: block;}
.keep-line { white-space: nowrap;}


.img-wrap { display: flex;}
.process-company .feature-card { border: 2px dotted #666;}
.process-card-wrap .process-card-number { font-size: 14px; font-weight: 600; font-family: var(--title-font); color: var(--title-color); text-transform: uppercase; border-bottom: 2px solid var(--title-color); padding-bottom: 22px; position: relative; margin: 3rem 0;}
.process-card-wrap .process-card-number:after { content: ""; position: absolute; left: 47%; width: 24px; height: 24px; border-radius: 50%; background: var(--smoke-color); bottom: 0; transform: translate(0px, 50%); border: 4px solid var(--title-color);}

.process-company .process-card-wrap .feature-card{  position: relative; display:flex; justify-content:center; align-items:center; padding: 0; border-radius: 30px;}

/* 카드 사이 연결 점선 */
.process-company .process-card-wrap .feature-card:after{ content: ""; position: absolute; top: 50%; right: -68px; width: 80px; border-top: 2px dotted #666; transform: translateY(-50%); z-index: -1;}
.process-company .col-lg-4:last-child .feature-card:after{ display: none;}

.process-company .img-center { width: 80%; margin: 0 auto;}
.process-company .img-center .img-pc { display: block;}
.process-company .img-center .img-mo { display: none;}

/*company-section03*/
#history .single-award-list { position: relative; }
#history .single-award-list:last-of-type{ margin-bottom:0;}

#history .award-wrap-area .single-award-list .award-details p { margin-bottom: 0;}
#history .award-wrap-area .single-award-list:first-child{ padding-top:10px;}
#history .single-award-list .award-details li { margin-bottom: 40px;}

#history .award-wrap-area { position: relative; padding-left: 40px;}
#history .award-wrap-area::before { content: ""; position: absolute; top: 10px; left: 180px; width: 1px; height: 100%; background-color: #0c3692;}


#history .award-item { position: relative; padding-left: 20px; margin-bottom: 16px;}
#history .award-year { color: #255cff;}
#history .award-item::before { content: ""; position: absolute; left: -58px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: #222;}
#history .award-item:first-child::before { width: 13px; height: 13px; top: 0; left: -60px; background: #255cff;}

#history .award-month { min-width: 30px; font-weight: 600; color: #666;}
#history .award-text { line-height: 1.6;}


#history .award-item.import { display: flex; flex-direction: column; gap: 6px;}
#history .award-item.import h4 { font-size: 25px !important; color: #0c3692 !important;}
#history .month-row { display: flex; align-items: flex-start; gap: 6px;}
#history .tag { font-size: 14px; padding: 2px 10px; border-radius: 4px; background: #0c3692; color: var(--white-color); margin-bottom: 3px;}




/*인증현황*/
#certification .cerification-wrap { margin-bottom: 30px;}
#certification .cerification-content h5 { font-weight: 600; margin: 10px 0;}
#certification .cerification-img { display: flex; align-items: center; justify-content: center; background: var(--white-color); border-radius: 30px; overflow: hidden; padding: 30px;}
#certification .cerification-img img{ max-width: 100%; height: 100%; object-fit: contain; }

#certification .pagination-wrap .pagination .page-link { background: var(--white-color); border: 1px solid #eee;}
#certification .pagination-wrap .pagination .page-item.active .page-link {background: var(--navy-color); }
#certification .pagination-wrap .pagination .page-link:hover { background: var(--navy-color);}

/*모달*/
.btn-close-white { position: absolute; top: 12px; right: 12px; z-index: 20; background-color: rgba(0,0,0,0.5); border-radius: 50%; padding: 8px;}

.modal-backdrop.show { background-color: #000 !important; opacity: 1 !important;}
.modal-dialog { max-width: 1140px; margin: 1.75rem auto; height: 100%;}
.modal-content { height: auto; background: #000; border-radius: 0;}
.modal-x { position: absolute; top: 30px; right: 0px; font-size: 28px; color: var(--white-color); background: none; border: none; cursor: pointer; z-index: 10;}
.modal-content { background: #000; border: none; }
.modal-body {  position: relative; display: flex; justify-content: center; align-items: center;}
.modal-body img { max-width: 90vw;  max-height: 90vh; display: block; margin: auto; object-fit: contain;}
.modal-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.4); border: none; color: var(--white-color); font-size: 32px; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10;}

#prevBtn { left: 16px; }
#nextBtn { right: 16px; }

body.modal-open { overflow: hidden !important; height: 100% !important;}

#imageModal,
#imageModal .modal-dialog,
#imageModal .modal-content,
#imageModal .modal-body { height: 100vh; overflow: hidden !important;}

#imageModal #modalImage { max-width: 100%; max-height: 100vh; width: auto; height: auto; object-fit: contain; display: block; margin: 0 auto; border-radius: 30px;}
#imageModal .modal-dialog {
  max-width: 600px;
}

#imageModal img {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
}


body.modal-open header,
body.modal-open .scroll-top { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;}


/*회사문화*/
.portfolio-title a { text-decoration: none; display: inline-flex; align-items: baseline; }
.portfolio-title .title-big { font-size: 60px; font-weight: 700; letter-spacing: -0.02em;}
.portfolio-title .title-small { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; color: #666;}
.media-left p.bold { font-weight: 700; margin-bottom: 15px; color: #666;}

.portfolio-wrap .portfolio-thumb{ border-radius: 30px; overflow: hidden; /*border: 1px solid #eee;*/ /*aspect-ratio: 700 / 797;*/}

/*프로세스*/
.imgbox { display: flex; align-items: center; /*background: var(--white-color); */overflow: hidden;}
.imgbox-thumb { height: 100%; border-radius: 30px; overflow: hidden; background: #f3f4f6; aspect-ratio: 540 / 300; border: 1px solid #eee;}
.imgbox-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 30px;}

.imgbox-content { height: 100%; padding: 20px 56px;;  display: flex; flex-direction: column; justify-content: center;}
.imgbox-content p:last-child{ margin: 0;max-width: 620px; word-break: keep-all;}



.business-img { object-fit: cover; display: block; overflow: hidden;}
.business-img .img-pc{ display: block;}
.business-img .img-mo{ display: none;}



.process-card .process-card-number span.c-1 { font-size: 15px;}
.process .step-box .step-number { position: relative; }
.process .step-box .step-number-badge { position: relative; z-index: 2; }

/* 연결선 길이(필요하면 숫자만 조절) */
.process .step-box { --link-h: 26px; }
.process .step-box .line1:first-of-type .step-number-badge::after,
.process .step-box .line2:nth-of-type(3) .step-number-badge::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 100%; height: var(--link-h); width: 1px; background: #d0d7e2; z-index: 1;}


/*원료센터*/
#business_raw_section01 .imgbox { flex-direction: row-reverse;}
#business_raw_section01 .imgbox-content { padding: 20px 56px 20px 0;}
#business_raw_section01 .wrap .row { gap: 15px; justify-content: flex-end; margin-bottom: 0;}
#business_raw_section01 .section.both.i2 .header:before { content:""; position:absolute; left: 169px; top:4%; width:95%; border-top: 2px dotted var(--navy-color); transform:translateY(-50%); z-index: -1;}
#business_raw_section01 .section.both.i2.two .process-col:first-child { min-width: 200px;}
#business_raw_section01 .section.both.i2.two .header:before { content: ""; position: absolute; left: 98px; top: 15%; width: 100%; border-top: 2px dotted var(--navy-color); transform: translateY(-50%);}
#business_raw_section01 .process-col.both .header-group .badge {display: none;}
#business_raw_section01 .wrap .row .section { width: calc(50% - 20px); }


/* ===== 공통 ===== */
#business_raw_section01 .wrap.common-top { margin-top: 60px;}
#business_raw_section01 .section { margin-bottom: 30px;}
#business_raw_section01 .process-flex { display: flex; gap: 24px; align-items: stretch;}

#business_raw_section01 .section.both .process-flex { display: flex; gap: 24px;}

#business_raw_section01 .process-col { position: relative; flex: 1;}

/* ===== 제목 ===== */
#business_raw_section01 .header,
#business_raw_section01 .header-group { margin-bottom: 18px;}


/* ===== 일반 리스트 ===== */
#business_raw_section01 .step-list { width: fit-content; margin: 0 auto; padding: 0; list-style: none;}
#business_raw_section01 .step-list li + li { margin-top: 6px;}


/* ===== reversal 박스 ===== */
#business_raw_section01 .step-list.reversal { width: 100%; padding: 24px 20px; border-radius: 14px; background: var(--navy-color); color: var(--white-color);}
#business_raw_section01 .step-list.reversal .step-list-inner { width: fit-content; margin: 0 auto; padding: 0; list-style: none;}

#business_raw_section01 .step-list.reversal .step-list-inner li { position: relative; color: var(--white-color); text-align: left; display: flex; align-items: flex-start; gap: 0px;}
#business_raw_section01 .step-list.reversal .step-list-inner li + li { margin-top: 6px;}



/* ===== 3,4번 두 칸짜리 ===== */
#business_raw_section01 .section.both .process-col { flex: 1;}
#business_raw_section01 .section.both.i2 .process-col.both { display: flex; flex-direction: column;}
#business_raw_section01 .section.both.i2.two .process-col.both .header-group { margin-bottom: 0;}

/* ===== 이미지 상단 영역 ===== */
#business_raw_section01 .imgbox-thumb { height: 100%; border-radius: 30px; overflow: hidden; background: #f3f4f6; border: 1px solid #f3f4f6;}
#business_raw_section01 .imgbox-thumb img { width: 100%; height: 100%; object-fit: cover; display: block;}
#business_raw_section01 .imgbox-content .sec-title { margin-bottom: 18px;}




ul.step-list  { margin: 0; width: 100%; padding: 15px 20px 10px 20px;}
ul.step-list  li { list-style: none; padding: 0 0 5px 0; display: flex; align-items: flex-start; gap: 0px; text-align: left;}

ul.step-list:not(.reversal) { width: fit-content; margin: 0 auto; padding: 0; list-style: none;}
ul.step-list:not(.reversal) li { display: flex; align-items: flex-start; gap: 0px; text-align: left;}


ul.step-list li::before { content: "\f058"; color: rgb(12, 54, 146); font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 16px; padding-right: 10px; } 
ul.step-list.reversal{ border-radius: 10px; background: var(--navy-color); color: var(--white-color);}
ul.step-list.reversal li::before { content: "\f058"; color: rgb(255, 255, 255); font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 16px; padding-right: 10px; } 
.step-list.reversal { width: 100%; border-radius: 10px; background: var(--navy-color); color: var(--white-color); padding: 20px 15px;}



.step-list.reversal .step-list-inner { width: fit-content; margin: 0 auto; padding: 0; list-style: none;}
.step-list.reversal .step-list-inner li { text-align: left;}
.step-list.reversal .step-list-inner li:before { content: "\f058"; color: rgb(255, 255, 255); font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 16px; padding-right: 10px; } 






.wrap { margin-top: 100px;}
.wrap .row { display: flex; gap: 40px; flex-wrap: wrap; margin-bottom: 28px;}

.section {position: relative; width: 320px; margin-left: 0px;}


.badge { position: absolute; top: -4px; left: -24px; text-align: center; padding: 0.2em 0.45em; background-color: var(--navy-color); color: var(--white-color); z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50% 0 50% 50%; font-size: 18px;}

.title-box,
.title-box-plain { display: flex; align-items: center; min-height: 36px; border: 1px solid var(--navy-color); color: var(--navy-color); font-weight: 700; line-height: 1; background: var(--white-color); justify-content: center; border-radius: 8px;  margin-left: 0; width: 100%; }

.imgcon { padding: 0 10px; margin-bottom: 20px;}
.imgcon .portfolio-wrap .portfolio-thumb { aspect-ratio: 464 / 340; transform: translateZ(0);}

/*odm센터*/
#business_odm_section01 .imgbox {flex-direction: row-reverse;}
#business_odm_section01 .feature-card-icon img { width: 80px;}

#business_odm_section01 .wrap { padding: 0;}
#business_odm_section01 .wrap.common-top { margin-top: 60px;}

#business_odm_section01 .imgbox-thumb { height: 100%; border-radius: 30px; overflow: hidden; background: #f3f4f6;}
#business_odm_section01 .imgbox-thumb img { width: 100%; height: 100%; object-fit: cover; display: block;}

#business_odm_section01 .imgbox-content { height: 100%; padding: 20px 56px 20px 0; display: flex; flex-direction: column; justify-content: center;}
#business_odm_section01 .imgbox-content .sec-title { margin-bottom: 18px;}

#business_odm_section01 .process-row { display: flex; gap: 40px; align-items: flex-start;}
#business_odm_section01 .section { flex: 1; min-width: 0;}
#business_odm_section01 .process-col { position: relative;}
.imgcon .img-pc { display: block;}
.imgcon .img-mo { display: none;}


/* 제목 박스 */
#business_odm_section01 .header { margin-bottom: 22px;}
#business_odm_section01 .title-box { min-height: 36px; border: 1px solid var(--navy-color); border-radius: 8px; background: var(--white-color); color: var(--navy-color); font-weight: 700; display: flex; align-items: center; justify-content: center; text-align: center;}
/* 일반 리스트 */
#business_odm_section01 .step-list { width: fit-content; margin: 0 auto; padding: 0; list-style: none;}
#business_odm_section01 .step-list li { position: relative; text-align: left;}
#business_odm_section01 .step-list li + li { margin-top: 6px;}

/* 파란 박스형 리스트 */
#business_odm_section01 .step-list.reversal { width: 100%; background: var(--navy-color); border-radius: 12px; padding: 18px 14px;}

#business_odm_section01 .step-list.reversal .step-list-inner { width: fit-content; margin: 0 auto; padding: 0; list-style: none;}
#business_odm_section01 .step-list.reversal .step-list-inner li { position: relative; color: var(--white-color); text-align: left;}
#business_odm_section01 .step-list.reversal .step-list-inner li + li {margin-top: 6px;}

#business_odm_section01 .empty-box {min-height: 120px;}



#business_odm_section03 .slick-slide { height: auto;}
#business_odm_section03 .portfolio-details h3 { margin-bottom: 10px;}
#business_odm_section03 .portfolio-details p { color: var(--white-color);}

#business_odm_section03 .portfolio-slider14 .slick-slide{ padding:0 15px;}
#business_odm_section03 .portfolio-slider14 .slick-list{ margin:0 -15px;}
#business_odm_section03 .slider-nav{ display:inline-flex; gap:12px; }
#business_odm_section03 .slider-nav button{ width:50px; height:50px; border-radius:50%; border: 1px solid #ddd; background: var(--white-color); backdrop-filter:blur(6px); color: var(--navy-color);}
#business_odm_section03 .slider-nav button:hover { background-color: var(--navy-color); color: var(--white-color); }

#business_odm_section03 .slider-nav button.slick-disabled { background: #ccc; color: #888; cursor: not-allowed; pointer-events: none; }



#business_odm_section03 .portfolio-wrap.style2 { position: relative;}
#business_odm_section03 .portfolio-wrap.style2 .portfolio-thumb { height: 540px;}
#business_odm_section03 .portfolio-wrap.style2 .portfolio-details { position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%); width: 100%; padding: 0 30px; z-index: 2; transition: 0.4s; }

#business_odm_section03 .portfolio-thumb { position: relative; overflow: hidden;}

#business_odm_section03 .overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 12, 0, 0) 0%, #0A0C00 100%); opacity: 0.7; transition: .4s ease; z-index: 1; pointer-events: none;}

#business_odm_section03 .portfolio-details { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 40px); z-index: 2; opacity: 1; transition: .4s;}

#business_odm_section03 { display: block;}
#odm-mobile-only {display: none;}


@media (max-width: 1199px) {
  #business_odm_section03 .slider-nav {
    display: inline-flex;
  }
}

#business_odm_section03 .portfolio-thumb { aspect-ratio: 300 / 540; overflow: hidden; position: relative;}
#business_odm_section03 .portfolio-thumb img { width: 100%; height: 100%; object-fit: cover;}

.imgcon .portfolio-details h4{ font-size: 20px; margin: 10px 0;}


/*효능센터*/
#business_efficacy_section01 .imgbox { flex-direction: row-reverse;}
#business_efficacy_section01 .imgbox-content { padding: 20px 318px 20px 0;}

#business_efficacy_section01 .custom-table { width: 100%; border-collapse: collapse;}

#business_efficacy_section01 .custom-table th { background: var(--navy-color); color: var(--white-color); text-align: center; padding: 12px; font-size: 18px; border: 1px solid #dcdcdc;}
#business_efficacy_section01 .custom-table td { padding: 12px; border: 1px solid #dcdcdc; text-align: center;}
#business_efficacy_section01 .custom-table td:first-child { background: #f7f7f7;}
#business_efficacy_section01 .custom-table td:last-child { background: var(--white-color);}
#business_efficacy_section01 .custom-table td.bold { font-weight: 700;}

#business_efficacy_section01 .common-top .title h3 { display: flex; flex-direction: column; align-items: center; gap: 15px; color: var(--navy-color);}
#business_efficacy_section01 .common-top .title h3:before {  content: ""; width: 30px; height: 30px; border: 1px solid var(--navy-color); border-radius: 50%; background: url("/assets/img/icon/plus-icon-blue.png") no-repeat 50% 50%;}

#business_efficacy_section01 .common-top .row > .col-md-6.mb:nth-child(3),
#business_efficacy_section01 .common-top .row > .col-md-6.mb:nth-child(4) { margin-top: 60px;}
#business_efficacy_section01 .normal { font-weight: 400;}

#business_efficacy_section01 .common-top .text-center.title { display: flex; flex-direction: column; align-items: center;}
#business_efficacy_section01 .max-70 { max-width: 70%;}
#business_efficacy_section01 .bold { font-weight: 700;}
#business_efficacy_section01 .font-16 { font-size: 16px;}

#business_efficacy_section01 .table-wrap .table-overlay-guide { display: none;}

br.efficacy { display: none;}

/* 모바일 */
@media (max-width: 991px) {
.step3-connector { display: none; }

}

/*R&D*/
#rnd_raw_section01 .feature-row{ cursor: pointer; border-bottom: 2px solid #bae9ff;}
#rnd_raw_section01 .feature-row:last-child {border-bottom: none;}

#rnd_raw_section01 .thumb-box { width: 100%; max-width: 600px; overflow: hidden; border-radius: 30px;}
#rnd_raw_section01 .thumb-box img{ width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; border: 1px solid #eee;}



#rnd_raw_section01 .modal-btn { justify-content: flex-end;}
#rnd_raw_section01 .feature-row .col-lg-7.col-md-6.col-12 h4 { font-weight: 600;}

#rnd_raw_section01 .modal-target-img { width: 100%; aspect-ratio: 1 / 1; border-radius: 30px; overflow: hidden;}
#rnd_raw_section01 .modal-target-img img { width: 100%; height: 100%; object-fit: cover;}

#rnd_odm_section01 .imgbox { flex-direction: row-reverse;}
#rnd_odm_section01 .imgbox-content { padding: 20px 56px 20px 0;}

#rnd_raw_section01 .thumb-box .pc-img { display: block}
#rnd_raw_section01 .thumb-box .mo-img { display: none;}

.pd-20 { padding: 30px 0;}

#rnd_raw_section01 .target-title h4 span:last-child::before { content: " | "; margin: 0 4px; color: #111;}
#rnd_portfolio .brand { margin-bottom: 35px;}
#rnd_portfolio .brand .portfolio-details h4 { font-size: 20px;}

#rnd_portfolio .portfolio-wrap .portfolio-thumb img { transform: none; transition: none;}
#rnd_portfolio .portfolio-wrap:hover .portfolio-thumb img { transform: none;}

.target-title {cursor: default;}


/*notice*/



/*notice_view*/
.board_view { width: 100%; border-top: 2px solid #000;}
.board_view .title { padding: 20px 15px 10px 15px;}
.board_view .title h3 { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: auto; word-break: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

.board_view .info { padding: 0 15px; border-bottom: 1px solid #e4e5e5; font-size: 17px;}
.board_view .info dl { position: relative; display: inline-block; padding: 0 20px; margin-bottom: 0;}
.board_view .info dl::before { content: ""; position: absolute; top: 1px; left: 0; display: block; width: 1px; height: 13px; background: #ddd;}
.board_view .info dl:first-child { padding-left: 0;}
.board_view .info dl:first-child::before { display: none;}

.board_view .info dl dt,
.board_view .info dl dd { display: inline-block; font-size: 17px; margin-bottom: .5rem;}
.board_view .info dl dt { padding-right: 20px; margin-right: 20px; border-right: 1px solid #e4e5e5;}
.board_view .info dl dd { color: #777;}
.board_view .cont-view { padding: 24px 15px; border-bottom: 1px solid #e4e5e5; color: #111; font-size: 16px;}
.board_view .cont-view p { margin-bottom: 0;}

.view-bottom .view-item{ padding: 24px 15px; /*30*/ border-bottom:1px solid #e4e5e5; display:flex; flex-wrap: wrap; align-items: center; align-content: center; }
.view-bottom .view-item:nth-child(2) { border-bottom: 2px solid #111;}
.view-bottom .view-item span{ font-size:16px; line-height:1.1;}
.view-bottom .view-item span.tit{ width:100px; color:#040505; font-weight:600; margin: 0;}
.view-bottom .view-item span.txt{ width:calc( 100% - 230px ); color:#848585; font-weight:300; margin-bottom: 0;}
.view-bottom .view-item span.txt a{ line-height: inherit; font-size: inherit; color: #040505; font-weight: 400; transition: all 0.4s; display:block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width:auto;}
.view-bottom .view-item span.date{ width:130px; color:#a4a5a5; font-weight: 200; text-align: right;}
.view-bottom .view-item span.txt a:hover{ color:#4b514d;}


@media (max-width: 1000px) {
.board_view .info dl { width: 100%; padding: 0;}

.board_view .info dl:nth-child(-n+2) { margin-bottom: 5px; }
.board_view .info dl::before { display: none;}
.board_view .info dl dt,
.board_view .info dl dd { font-size: 15px;}



}

@media (max-width:767px){
.view-bottom .view-item{ padding:20px 24px;}
.view-bottom .view-item span.tit{ width: 80px;}
.view-bottom .view-item span.txt{ width:calc( 100% - 180px );}
.view-bottom .view-item span.date{ width: 100px;}




}

@media (max-width:480px){
.view-bottom .view-item{ padding: 16px 20px;}
.view-bottom .view-item span{ font-size: 14px;}
.view-bottom .view-item span.tit{ width: 60px;}
.view-bottom .view-item span.txt{ width:calc( 100% - 140px );}
.view-bottom .view-item span.date{ width: 80px;}
.board_view .title h5 { margin-bottom: 0;}
.board_view .cont-view p { font-size: 15px;}
}

@media (max-width:380px){
.view-bottom .view-item span.tit{ width: 60px;}
.view-bottom .view-item span.txt{ width:calc( 100% - 60px );}
.view-bottom .view-item span.date{ display: none;}

}


.notice_view_content .btn { background-color: var(--navy-color); color: var(--white-color); border-radius: 50px;}






/*contact*/
.wrap_controllers.hide { display: none;}
.cont { display: none;}
.contact-map .kakao-map { align-items: center}

.privacy-wrap{ margin-top: 55px;}
.privacy-box{ border: 1px solid #cfcfcf; border-radius: 10px; height: 110px;  padding: 18px; position: relative; background:var(--white-color);}

.agree-like { text-align: right; margin-top: 15px; margin-bottom: 20px; color:#353535;}
.agree-like .custom-control-label { position: relative; display: inline-block; width: auto; padding-left: 28px; padding-right: 0; margin: 0; vertical-align: middle;}
.agree-like .custom-control-label::before { content: ""; position: absolute; left: 0 !important; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border: 1px solid var(--navy-color); background: var(--white-color); box-sizing: border-box;}
.agree-like .custom-control-label::after { position: absolute; left: 0; top: 50%; transform: translateY(-50%);}

.privacy-scroll{ height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; }

.privacy-info dl{ margin: 0 0 30px; font-size: 18px; }
.privacy-info dt{ margin-bottom: 10px; font-weight: 700;}

#contact .privacy-info dl{ margin: 0 0 14px; font-size: 15px; }
#contact .privacy-info dt{ margin-bottom: 0px;}
.privacy-info dd{ margin: 0; color: #353535;}

.form-control.style-border::placeholder { color: #666; opacity: 1;}
#contactForm { height: 170px; resize: none; overflow-y: auto;}

.btn-navy { background-color: var(--navy-color); color: var(--white-color); border-radius: 50px;}

.select-wrap { position: relative;}
.select-wrap select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 45px; /* 아이콘 공간 확보 */}
.select-wrap::after {  content: "\f107"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #666;}


figcaption p { font-size: 16px; font-weight: 600; color: var(--navy-color); text-transform: uppercase; margin-bottom: 0; display: inline-block; background: var(--white-color); border: 1px solid var(--navy-color); padding: 6px 20px; border-radius: 8px; margin-bottom: 10px; text-align: center;}

.import-text { margin-top: 15px;}

.address { scroll-margin-top: 90px;}
.address .map-item { padding: 0 0 0 20px;}
.address .map-item figcaption p { text-transform: capitalize;}
.map img { border-radius: 10px; overflow: hidden; margin-bottom: 15px;}

/*지도 앵커*/
.anchor-offset { display: block; position: relative; top: -90px; visibility: hidden; height: 0; pointer-events: none;}

.map-2 { margin-top:50px;}
.address .mapbox-thumb { position: relative; width: 100%; height: 100%; aspect-ratio: 16 / 10; border-radius: 30px; overflow: hidden; background: #f3f4f6;}
.address .mapbox-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 30px; }
.address .mapbox-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%;}



/*개인정보처리방침*/
#privacy-info dl{ margin-bottom: 4rem;}
#privacy-info .privacy-wrap { border-top: none;}
#privacy-info p { color: #353535;}
#privacy-info dd { color: #353535; margin-bottom: 0;}
#privacy-info dt { margin-bottom: 10px;}


/*scroll-top*/
.top-text { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--white-color); }
.top-text .arrow { margin-bottom: 2px;}
.top-text .label { font-size: 16px; letter-spacing: 1px;}


.scroll-top:hover { background: #072a75; transform: translateY(-3px);}
.arrow-img { width: 18px; }

/*footer-cta*/
.bg-navy .btn { background-color: var(--white-color); color: var(--title-color); border-radius: 50px;}
.bg-navy .title-area.mb-0 .sec-title { margin-bottom: 30px;}
.cta-area-1 { background-image: url("/assets/img/bg/background-dot-map-w.png"); background-size: cover; background-position: center; background-repeat: no-repeat;}
.cta-area-1.bg-navy .btn { background-color: var(--white-color); color: var(--navy-color);}

/*footer*/
.footer { background: var(--white-color);}
.footer-entire { padding: 0 36px;}

.footer__left .copyright { font-size: 14px; margin-bottom: 0; color: #777; margin-top: 20px;}
.footer__left .f-info { font-size: 14px; margin-bottom: 0;}
.footer__left .f-info a { color: #353535; text-decoration: none;}
.footer__left .f-info:hover { text-decoration: underline; color: var(--navy-color);}
.footer__left .f-info a:hover{color: var(--navy-color);}



.footer__tit { font-size: 20px; font-weight: 600; margin-bottom: 19px;}
.footer__line { height: 1px; background: #ddd; margin-bottom: 15px;}

.info-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #666; margin-bottom: 3px;}
.info-item .bold { position: relative; padding-right: 10px; font-weight: 600; color: #333; line-height: 1.2; white-space: nowrap; flex-shrink: 0;}
.info-item .bold::after { content: ""; position: absolute; right: 0; top: 50%; width: 1px; height: 12px; background: #cfcfcf; transform: translateY(-50%);}
.info-item .text { color: #353535; text-decoration: none; line-height: 1.5;}

.row.footer__info-grid { column-gap: 10px;}


/* =========================
   PC 순서 유지
========================= */
@media (min-width: 992px) {
  .info-head { order: 1; } /* 본사 */
  .info-biz  { order: 2; } /* 사업자등록번호 */
  .info-ceo  { order: 3; } /* 대표이사 */

  .info-rnd  { order: 4; } /* R&D센터 */
  .info-mail { order: 5; } /* 이메일 */
  .info-tel  { order: 6; } /* 대표전화 */
  .info-fax  { order: 7; } /* 팩스 */

  .footer__right-wrap {
    padding-left: 0px;
  }
}



/*모바일메뉴 하단 정보*/
.company-info { padding-top: 10px; padding-left: 50px;}
.company-info .footer__tit { font-size: 16px; font-weight: 600; margin-bottom: 6px;}
.company-info .footer__line { height: 1px; background: #ddd; margin-bottom: 16px;}
.company-info .footer__info-list { list-style: none; padding: 0; margin: 0;}
.company-info .footer__info-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.6; color: #666; padding: 8px 0;}
.company-info .footer__info-list li:last-child { border-bottom: none;}
.company-info .bold { font-weight: 600; color: #333; /*min-width: 90px; */position: relative; padding-right: 10px;}
.company-info .bold::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background: #ccc;}
.company-info .text { color: #777; flex: 1; word-break: keep-all;}
.company-info a { display: flex; gap: 10px; text-decoration: none; color: inherit;}



/*미디어쿼리*/
@media all and (min-width:1200px) and (max-width:1439px) {

br.mo-1 { display: none;}
.portfolio-wrap.style5 .portfolio-details .portfolio-title { font-size: 28px;}

/*bioft스토리*/
.counter-top { justify-content: space-between;}
.counter-divider {padding: 0 20px;}
.process-company .img-center .img-pc { display: none;}
.process-company .img-center .img-mo { display: block; height: 299px;}

.kbeauty-text p br.mo { display: none;}
.kbeauty-object .img-wrap img { height: 895px;}
.kbeauty-row figcaption p:last-child { width: 99%;}
.keep-line { white-space: wrap;}

/*회사문화*/
.portfolio-wrap.style15 { gap: 30px;}
/*프로세스*/


/*원료센터*/
.wrap .row .section { width: 550px;}
.section:first-child { margin-left: 0;}

#business_odm_section02 .wrap .row .section { width: 220px;}

/*footer*/
.footer__wrap { gap: 20px;}
.info-item { font-size: 12px;}
.footer__left .copyright { font-size: 12px;}
.footer__left .f-info { font-size: 12px;}
.company-info { padding-left: 30px;}



}








@media (max-width: 1199px) {
br.mo-1 { display: none;}
.menu-area .header-button { margin-left: 0;}

/*index-슬라이드*/
.hero-wrapper.hero-18 .mainSwiper { height: clamp(400px, 100vh, 460px);}
.swiper-button-prev, .swiper-button-next { display: none !important; }

.space, .space-bottom { padding-bottom: var(--section-space-mobile);}
.space, .space-top { padding-top: var(--section-space-mobile);}

/*함께하는 고객사*/
.client-list-wrap li a .link-effect { height: 50px;}

#hero .hero-content .container { margin-left: 30px;}

/*bioft스토리*/
#history .award-wrap-area::before { left: 213px;}
#history .award-item:first-child::before {left: -28px;}
#history .award-item::before{left: -25px;}
.counter-top { justify-content: space-between;}
.counter-divider {padding: 0 10px;}


.kbeauty-text { width: 100%; margin-top: 30px;}
.kbeauty-text p { margin-bottom: 0;}
.kbeauty-text p br.mo { display: none;}

.kbeauty-row {display: flex; flex-direction: column-reverse;}

.kbeauty-object { width: 100%;}
.kbeauty-object .img-wrap { width: 100%;}
.kbeauty-object img { display: block; width: 100%; height: auto;}
.kbeauty-object .img-wrap img { height: auto;}
.kbeauty-text .mt-4 p.kbeauty-subtext {margin-bottom: 18px;}

figcaption {display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px;}
.kbeauty-row figcaption p:last-child { width: auto;}

/*인증현황*/
.award-wrap-area .single-award-list .award-details h4 a { font-size: 28px;}
#certification .award-wrap-area .single-award-list .award-details h4:before { font-size: 28px;}

/*회사문화*/
.portfolio-wrap.style15 { gap: 30px;}

/*프로세스*/
.imgbox-content br.mo { display: none;}
.imgbox-content p { margin-bottom: 0;}
.imgbox-content{ padding-left: 38px;}


.process-company .img-center .img-pc { display: none;}
.process-company .img-center .img-mo { display: block; height: 250px;}

/*원료센터*/
#business_raw_section01 .wrap .row { gap: 10px; justify-content: space-between;}
#business_raw_section01 .wrap .row .section {width: 100%;}
#business_raw_section01 .wrap.common-top { padding-left: 25px;}

/*odm센터*/
#business_odm_section01 .process-row { gap: 26px;}
#business_odm_section01 .empty-box {min-height: 0;}
#business_odm_section01 .process-row { display: block;}
#business_odm_section01 .section { width: 100%;}
#business_odm_section01 .section + .section { margin-top: 24px;}


ul.step-list { width: 100%;}

#business_odm_section02 .wrap .row { justify-content: flex-start;}
#business_odm_section02 .section { width: 280px;}

#business_odm_section02 .wrap { padding: 36px 20px 32px 24px;}
#business_odm_section02 .wrap .row { flex-wrap: wrap; gap: 28px 18px;}
#business_odm_section02 .section { flex: 0 0 calc(33.333% - 12px);}
#business_odm_section02 .step-list { padding-left: 50px; }


/*contact*/
.address .map-item { padding: 0;}
.map-item figcaption { column-gap: 8px;}
/*푸터*/
.info-item { flex-direction: column; align-items: flex-start; gap: 0; margin-bottom: 8px;}
.info-item .bold::after { display: none;}


.footer-entire { display: flex; flex-direction: column;}
.footer .company-info { width: 100%;  padding-top: 20px;}
.footer .info-item br { display: none;}
.footer__left .f-info { margin-top: 3px;}
.company-info { padding-left: 0px;}
.footer__left_info { padding: 0;}

}




@media (max-width: 991px) {
/*헤더*/
.header-row { flex-wrap: nowrap; justify-content: flex-start !important;}
.col-logo { order: 1; margin-right: auto;}

.col-sns { order: 2; display: flex !important; margin-right: 80px;}
.col-lang { order: 3; margin-right: 10px; }

.col-nav { order: 4; margin-left: 0 !important;}
.col-nav.ms-auto { margin-left: 0 !important;}
.col-sns,
.col-lang,
.col-nav {flex: 0 0 auto; width: auto;}

.header-sns { display: flex; align-items: center; gap: 20px;}
.header-sns img { width: 20px; height: 20px; object-fit: contain;}
.col-nav { margin-left: 0 !important;}


p {font-size: 17px;}
.mt-100 { margin-top: 50px;}
.space-half { padding: 60px 0;}
.sidebar-btn {width: 40px; height: 40px;}
.menu-area .col-lang { position: absolute; right: 35px; display: flex; align-items: center;}
.menu-area .col-nav { margin-right: 0px; display: flex; align-items: center;}
#hero .hero-content .container { margin-left: 0;}



/*index-슬라이드*/
.hero-wrapper.hero-18 .mainSwiper{ height: clamp(400px, 33vh, 460px);}

/*index-넘어가는슬라이드*/
.portfolio-wrap.style5 .portfolio-details .portfolio-title { font-size: 20px;}

/*index-소식*/
.notice .notice-wrap { justify-content: flex-start;}

/*bioft스토리*/
.client-list-wrap { grid-template-columns: repeat(4, 1fr);}
.process-company .img-center .img-mo { height: 185px;}

.counter-divider { display: flex; }
.counter-top { display: flex; align-items: stretch; gap: 20px;}
.counter-card { display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%;}


#history .award-wrap-area { padding-left: 0;}
#history .award-wrap-area::before { left: 173px;}

.notice-wrap .blog-card {margin-bottom: 30px;}


/*인증현황*/
.award-wrap-area .single-award-list .award-details h4 a { font-size: 24px;}
#certification .award-wrap-area .single-award-list .award-details h4:before { font-size: 24px;}
#certification .award-wrap-area .single-award-list { align-items: baseline;}

/*회사문화*/
.portfolio-area-15 .media-left p { margin-bottom: 0;}

/*프로세스*/
.imgbox { flex-direction: column}
.imgbox-content{ padding-left: 0px;}
.process-card .alert-info { width: 100%;}
.business-img .img-pc{ display: none;}
.business-img .img-mo{ display: block;}



/*원료센터*/
#business_odm_section03 .nav-btn { display: flex; justify-content: center; align-items: center;}
.modal-x { right: 30px;}

#business_raw_section01 .wrap .row .section { width: 100%;}
#business_raw_section01 .process-flex{ flex-direction: column; gap: 20px;}

#business_raw_section01 .process-col:first-child,
#business_raw_section01 .both{ min-width: 100%;}

#business_raw_section01 .title-box{ font-size: 18px; }

#business_raw_section01 .step-list li{}
.wrap {padding: 24px 18px; border-radius: 18px;}
#business_raw_section01 .wrap .row { gap: 18px;}
#business_raw_section01 .section { flex: 1 1 100%; min-width: 100%; }
#business_raw_section01 .wrap.common-top { padding-left: 45px;}
#business_raw_section01 .col-group { grid-template-columns: 1fr; gap: 16px;}
#business_raw_section01 .badge { width: 44px; left:0; height: 44px; font-size: 17px;}


#business_raw_section01 .wrap.common-top { padding-left:0;}
/*.badge { top: 0px; left: -46px;}*/

ul.step-list { padding: 0;}
#business_raw_section01 .wrap .row > .section { width: 100%;}
ul.step-list.reversal { padding: 15px 20px 10px 20px;}
#business_raw_section01 .section.both.i2 .header:before { left: 85px; width: 100%;}
#business_raw_section01 .section.both.i2.two .header:before{ left: 47px; }

#business_raw_section01 .section.both.i2 .title-box { padding:0;}
#business_raw_section01 .section.both.i2 .title-box-plain{ padding: 0 14px 0 14px;}

#business_raw_section01 .section.both.i2 .process-flex{ flex-direction: column;}
#business_raw_section01 .section.both.i2 .header:before { display: none;}
#business_raw_section01 .header-group { position: relative; display: inline-flex; align-items: center; margin-bottom: 18px; }
#business_raw_section01 .header-group .badge {position: absolute; display: block; display: inline-flex; align-items: center; justify-content: center;}
#business_raw_section01 .section.both.i2 .title-box-plain {padding: 0 14px 0 28px; }
#business_raw_section01 .process-col { padding-left: 0px;}
#business_raw_section01 .badge { border-radius: 8px;}
#business_raw_section01 .process-col.both .header-group .badge { display: flex; align-items: center; justify-content: center;}

#business_raw_section01 .process-flex,
#business_raw_section01 .section.both .process-flex { flex-direction: column; gap: 26px; }



#business_raw_section01 .step-list { width: fit-content; margin: 0 auto;}

#business_raw_section01 .step-list.reversal { width: 100%; padding: 22px 16px;}

#business_raw_section01 .step-list.reversal .step-list-inner { width: fit-content; margin: 0 auto;}
#business_raw_section01 .imgbox-content { padding: 24px 0 0;}




#rnd_raw_section01 .target-title { margin-top: 20px;}









#business_raw_section01 .section.both.i2.two .process-col:first-child {min-width: 100%;}
#business_raw_section01 .wrap { margin-top: 0;}
.step-list.reversal { width: 93%;}
#business_raw_section01 .section.both { margin-top: 0;}


/*odm 센터*/
#business_odm_section01 .process-row { flex-wrap: wrap; gap: 30px 20px;}
#business_odm_section01 .section { flex: 0 0 calc(50% - 10px);}
#business_odm_section01 .imgbox-content { padding: 24px 0 0;}

#business_odm_section02 .row .section:nth-child(n+3) { margin-top: 40px;}
#business_odm_section02 ul.step-list { padding: 15px 0 10px 20px;}
#business_odm_section01 .badge {left:0; border-radius: 8px;}

/*원료rnd*/
#rnd_raw_section01 .thumb-box .pc-img { display: none;}
#rnd_raw_section01 .thumb-box .mo-img { display: block;}

/*효능센터*/
#business_efficacy_section01 .custom-table.last { margin-top: 30px;}

#business_efficacy_section01 .custom-table th.vit-item { width: 50%;}
#business_efficacy_section01 .custom-table th.vit-period { width: 25%;}
#business_efficacy_section01 .custom-table th.vit-result { width: 25%;}


/*contact*/
.contact-form-wrap h2{ margin-top: 25px;}
.address figcaption { margin-top: 20px;}
.address .map-item { padding: 0;}

/*개인정보처리방침*/
.privacy-wrap { margin-top: 18px;}

/*푸터*/
.footer-entire { padding: 0 20px; row-gap: 0px;}

.footer__left { margin-bottom: 10px; }
.company-info { margin-top: 10px; }
.row.footer__info-grid {  column-gap: 0px;}
}


@media (max-width: 767px) {
.hero-content{ align-items:flex-end; padding-bottom:120px; /* 하단 텍스트 네비 안 겹치게 */}
.hero-wrapper.hero-18 .mainSwiper { height: clamp(420px, 32vh, 460px);}
.hero-content .col-lg-6{ padding-left:10px; }
.portfolio-badge { top: 20px; left: 20px; padding: 3px 10px; font-size: 15px; font-weight: 400;}
.pd-20 { padding: 0;}

.pc-video { display: none;}
.mo-video {display: block; }

/*INDEX*/
.client-list-wrap { grid-template-columns: repeat(4, 1fr);}
.client-list-wrap li a { padding: 15px;}
.client-list-wrap li a .link-effect { height: 30px;}

/*bioft스토리*/
#history .single-award-list { display: flex; gap: 92px;}
#history .award-wrap-area::before { left: 163px; top: 12px;}

.why-area-1 { overflow-x: hidden !important;}
.process-company .img-center { width: 100%;}
.process-company .process-card-wrap .feature-card:after { top: auto; right: 50%; bottom: -68px; width: 2px; height: 80px; border-top: none; border-left: 2px dotted #666; transform: translateX(50%); }
.process-company .img-center .img-mo { height: auto;}

#history .award-item:first-child::before { width: 13px; height: 13px; top: 0; left: -30px; background: #255cff;}
#history .award-item::before { left: -27px;}


/*인증현황*/
#certification .award-wrap-area .single-award-list { gap: 20px;}
#certification .award-wrap-area .single-award-list .award-details { margin-bottom: 0;}

/*프로세스*/
.imgbox-content { padding: 20px 0;}
.process .mt-50 { margin-top: 30px !important;}
.imgbox-thumb{ max-width: 100%; margin-bottom: 0px;}

.imgbox-content{ padding-left: 0;}


/*원료센터*/

.wrap {margin-top: 0;}
#business_raw_section01 .section.both.i2 .header:before { left: 100px; width: 86%;}
ul.step-list.reversal { margin-left: -16px;}
ul.step-list {width: 100%;}

/*원료rnd*/
#rnd_raw_section01 .feature-row{ padding-top: 25px; padding-bottom: 25px;}
#rnd_raw_section01 .feature-row:first-child { padding-top:0;}
#rnd_raw_section01 .feature-row .col-lg-7.col-md-6.col-12 h4 { margin-top: 20px;}



#business_odm_section02 .wrap { padding: 24px 16px 24px 16px; border-radius: 20px;}
#business_odm_section02 .wrap .row { flex-direction: column; gap: 20px;}

#business_odm_section02 .section { width: 100%; flex: none; }
#business_odm_section02 .header { margin-bottom: 14px; }

#business_odm_section02 .badge { width: 40px; height: 40px;}
#business_odm_section02 .title-box { height: 34px; margin-left: 18px; padding: 0 12px 0 34px;}
#business_odm_section02 .step-list { padding-left: 44px;}
#business_odm_section02 .step-list li { margin-bottom: 10px; padding-left: 24px;}

/*효능센터*/
#business_efficacy_section01 .common-top .row > .col-md-6:nth-child(2),
#business_efficacy_section01 .common-top .row > .col-md-6.mb:nth-child(3),
#business_efficacy_section01 .common-top .row > .col-md-6.mb:nth-child(4) { margin-top: 60px;}

/*푸터*/
.footer {padding-top: 40px; padding-bottom: 40px;}

.footer-entire { padding: 0 16px; }


.footer__tit { font-size: 18px; margin-bottom: 14px;}
.footer__line { margin-bottom: 14px; }

.footer__info-grid { row-gap: 12px;}
.footer__info-grid > .info-col { margin-bottom: 0;}

.info-item { align-items: flex-start; flex-direction: column; gap: 4px; font-size: 13px; }
.info-item .bold { padding-right: 0; white-space: normal; }
.info-item .bold::after { display: none;}
.info-item .text { word-break: keep-all;}
.info-fax .info-item { padding-top: 2px;}


        


}



@media (max-width: 575px) {
/*공통*/
body { font-size: 16px;}
br.mo { display: none;}

.hero-content { align-items: center; }
.service-card2 { padding: 24px;}
.space-half { padding: 40px 0; }

.sec-title { font-size: 22px; text-align: left;}
.sec_title_wrap { text-align: left;}

.title-area p {text-align: left;}

.link-btn { font-size: 14px;}
.cta-area-1 .sec-title{ text-align: center;}


.h5, h5 { font-size: 15px;}
.footer-layout1 .footer-top-wrap p { font-size: 16px;}
.common-top { margin-top: 50px;}

/*헤더*/
.header-logo a img { width: 100px;}
.mobile-logo a img { width: 100px;}
.header-sns { padding: 0; gap: 15px;}
.col-sns { margin-right: 90px;}
.mobile-menu-wrapper .company-info { padding-left: 0;}
.mobile-menu { margin-bottom: 25px;}
.menu-area .col-nav { margin-right: 0;}


.breadcumb-wrapper { }

.breadcumb-wrapper::before { content: ""; position: absolute; inset: 0; background-image: var(--bg); background-size: cover; background-position: center top; background-repeat: no-repeat; transform: scale(1.55); transform-origin: center top; z-index: 0; }
.breadcumb-wrapper .container { position: relative; z-index: 1;}

.company-info .footer__info-list li { flex-direction: column; gap: 0px;}
/*index*/
.hero-video { object-fit: cover; transform: none;} 

.hero-wrapper.hero-18 .mainSwiper{ height: clamp(266px, 26vh, 460px);}
#main-story .card-wrap { flex-direction: column;}
#main-story .card-img { width: 100%;}
#main-story .card-content { padding: 24px;}
.client-list-wrap img { opacity: 1;}

.notice .sec-title {text-align: center;}
.notice .title-area p {text-align: center;}
.notice .blog-card .blog-title {text-align: center;}

#main-story .btn-group { justify-content: center;}
#main-story .card-img .pc-img { display: none;}
#main-story .card-img .mo-img { display: block;}

.notice .title-area { margin-bottom: 18px;}

/*bioft스토리*/

.hero-text { font-size: 16px; line-height: 1.5;}

.client-list-wrap { grid-template-columns: repeat(3, 1fr);}
.counter-divider { margin-bottom: 15px;}
.kbeauty-text h4 br.mo { display: block;}
.kbeauty-object img { border-top-right-radius: 100px;}
.award-wrap-area .single-award-list { padding: 15px 0;}

.kbeauty-row figcaption p { padding: 6px 36px; margin-bottom: 0;}
.kbeauty-row figcaption p:last-child { width: 100%;}
.kbeauty-text {margin-top: 10px;}
.text-right { text-align: center;}
.kbeauty-text h6 { font-size: 17px;}


/*연혁*/
#history .award-wrap-area::before { top: 20px; left: 3px;}
#history .award-year { font-size: 18px; margin-left: 8px;}
#history .award-item:first-child::before { width: 5px; height: 5px; top: 7px; left: -9px; background: #222;}

#history .award-item::before { width: 5px; height: 5px; top: 8px; left: -9px;}
#history .single-award-list { display: flex; flex-direction: column; gap: 0; padding: 10px 10px;}
#history .award-item { padding-left: 8px;}
#history .award-wrap-area .single-award-list .award-details { padding: 25px 0 0 0; margin-bottom: 0;}
#history .award-wrap-area .single-award-list .award-details h4 { font-size: 17px;}
#history .single-award-list .award-details li { margin-bottom: 15px;}

#history .award-year::before { content: ""; position: absolute; left: 0px; top: 17px; width: 8px; height: 8px; background: #2f63ff; border-radius: 50%; z-index: 2;}



/*인증현황*/
#certification .award-wrap-area .single-award-list { padding: 15px 13px;}
#certification .award-wrap-area .single-award-list .award-details h4:before { padding-right: 10px;}
#certification .cerification-wrap { margin-bottom: 20px;}
#certification .cerification-content h5{ font-size: 18px;}
#certification .cerification-wrap { width: 50%;}
#certification .cerification-img { padding: 20px;}

/*회사문화*/
.portfolio-wrap.style15 .media-left p { margin-bottom: 0;}
.portfolio-wrap.style15 .portfolio-thumb { margin-bottom: 0px;}
.portfolio-title .title-big { font-size: 40px;}
.portfolio-title .title-small { font-size: 30px;}
#company-culture .media-left { text-align: center;}

/*프로세스*/

.process-company > .col-lg-4:nth-child(2) .process-card-number::after{ display:block;}



/*원료센터*/

#business_raw_section01 .wrap { padding: 24px 0;}
#business_raw_section01 .wrap .row {flex-direction: column; margin-bottom: 0;}
#business_raw_section01 .wrap.common-top { margin-top: 40px;}

#business_raw_section01 .section { margin-bottom: 22px;}
#business_raw_section01 .section.both { margin-top: 0;}
#business_raw_section01 .section.both.i2 .title-box-plain { padding-left: 52px;}
#business_raw_section01 .section.both.i2 .title-box { padding-left: 52px;}

.title-box, .title-box-plain {padding-left: 52px; justify-content: flex-start;}

#business_raw_section01 .header,
#business_raw_section01 .header-group { margin-bottom: 14px;}

#business_raw_section01 .step-list { margin: 0; padding: 0px 14px;}
#business_raw_section01 .step-list li,
#business_raw_section01 .step-list.reversal .step-list-inner li { padding-left: 0px; font-size: 16px;}
#business_raw_section01 .step-list.reversal .step-list-inner { margin: 0;}
#business_raw_section01 .step-list.reversal { padding: 18px 14px;}
.imgbox-thumb { box-shadow: none;}
.imgcon .portfolio-wrap { width: 85%; margin: 0 auto;}
#business_raw_section01 .process-col.both .header-group .badge.four {display: none;}



/*odm센터*/
#business_odm_section01 .wrap.common-top { margin-top: 40px;}
#business_odm_section01 .process-row { display: block;}
#business_odm_section01 .section + .section { margin-top: 24px;}
#business_odm_section01 .process-col { padding-left: 0px;}
#business_odm_section01 .header { margin-bottom: 16px;}
#business_odm_section03 .nav-btn { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 20px;}
#business_odm_section03 .slider-nav button { width: 50px; height: 50px;}
.portfolio-wrap .portfolio-details .portfolio-title { margin-bottom: 10px;}
.portfolio-details p { margin-bottom: 0;}
.imgcon .portfolio-wrap .portfolio-details { padding: 0;}
.imgcon .img-pc { display: none;}
.imgcon .img-mo { display: block;}

#business_odm_section03 { display: none;}

#odm-mobile-only {display: block;}
#odm-mobile-only .odm-item { margin-bottom: 30px;}
#odm-mobile-only .odm-thumb { position: relative; overflow: hidden; border-radius: 30px;}
#odm-mobile-only .odm-thumb img { width: 100%; object-fit: cover; display: block; transition: 0.5s;}
#odm-mobile-only .odm-info { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);width: 100%; z-index: 2; color: #fff; padding: 0 15px;}
#odm-mobile-only .odm-info h4 { margin-bottom: 6px; color: #fff;}
#odm-mobile-only .odm-info p { color: #fff; line-height: 1.3;}
#odm-mobile-only .odm-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,  rgba(10, 12, 0, 0) 0%,  rgba(10, 12, 0, 0.25) 50%,  rgba(10, 12, 0, 0.75) 100%); z-index: 1;}


/*효능센터*/
br.efficacy { display: block;}
#business_efficacy_section01 .max-70 { max-width: 100%;}
#business_efficacy_section01 .text-right { text-align: right;}
#business_efficacy_section01 .imgbox-content { padding: 20px 0px 20px 0;}

#business_efficacy_section01 .common-top .row > .col-md-6:nth-child(2), 
#business_efficacy_section01 .common-top .row > .col-md-6.mb:nth-child(3), 
#business_efficacy_section01 .common-top .row > .col-md-6.mb:nth-child(4) { margin-top: 20px;}

.table-wrap { overflow-x: auto;}
.table-wrap table { min-width: 500px; /* ← 중요 (테이블 줄어드는거 방지) */}

/*효능센터 표 slide animation*/
#business_efficacy_section01 .table-wrap .table-overlay-guide{ display: block; }
#business_efficacy_section01 .table-wrap { position:relative; overflow-x:auto; -webkit-overflow-scrolling:touch;}
#business_efficacy_section01 .table-wrap table { position:relative; z-index:1;}
#business_efficacy_section01 .table-overlay-guide{ position:absolute; top:0; left:0; width:100%; height:100%; min-width: 500px; background:rgba(0,0,0,0.65); display:flex; align-items:center; justify-content:center; z-index:10; pointer-events:none; opacity:0; visibility:hidden;}
#business_efficacy_section01 .table-overlay-guide.show{ animation:overlayFadeOut 3s forwards;}

#business_efficacy_section01 .guide-text{ color:#fff; font-size:16px; font-weight:500; letter-spacing:0.03em; text-align:center;}
#business_efficacy_section01 .guide-inner{ position: relative; top: 50%; left: 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;}
#business_efficacy_section01 .swipe-icon{width:48px; height:auto; animation:swipeMove 1.2s infinite ease-in-out;}

@keyframes swipeMove{
	0%{ transform:translateX(-10px); }
	50%{ transform:translateX(10px); }
	100%{ transform:translateX(-10px); }
}

@keyframes overlayFadeOut{

0%{
		opacity:0;
		visibility:visible;
	}
	10%{
		opacity:1;
		visibility:visible;
	}
	80%{
		opacity:1;
		visibility:visible;
	}
	100%{
		opacity:0;
		visibility:hidden;
	}
}


/*ODM R&D*/
#rnd_odm_section01 .portfolio-details P { display: none;}
#rnd_odm_section01 .imgcon {width: 50%;}
#rnd_odm_section01 .imgcon .portfolio-details h4 {font-size: 14px;}
#rnd_odm_section01 .imgbox-content { padding: 20px 0px 20px 0;}
#rnd_odm_section01 .imgcon .portfolio-wrap { width: 100%;}

/*원료r&d*/
#rnd_raw_section01 .modal-btn { margin-top: 20px; text-align: left;}
.target-title h4 { font-size: 17px;}

.portfolio-wrap .portfolio-details { padding: 15px 10px;}
#rnd_raw_section01 .feature-row .col-lg-7.col-md-6.col-12 h4 { margin-bottom: 10px;}

#rnd_raw_section01 .thumb-box { margin-bottom: 0px;}
#rnd_raw_section01 .modal-btn { justify-content: center;}

/*포트폴리오*/
#rnd_portfolio .portfolio-wrap .portfolio-details { padding: 0px 10px 15px 10px;}
#rnd_portfolio .brand { margin-bottom: 20px; width: 50%;}
#rnd_portfolio .brand .portfolio-details h4 { font-size: 18px;}
#rnd_portfolio .brand .portfolio-details p { font-size: 16px;}

/*contact*/
.privacy-wrap { margin-top: 25px;}
.form-group { margin-bottom: 10px;}
.agree-like { margin-top: 10px; display: flex; justify-content: center;}
.map-2 { margin-top:24px;}
.form-text { font-size: 14px;}

/*뉴스, 컨텐츠*/
.blog-card .blog-title { font-size: 18px;}
.blog-card .blog-img { width: 85%; margin: 0 auto;}

/*개인정보처리방침*/
#privacy-info dl:last-child { margin-bottom: 0rem;}


/*푸터*/
.footer-menu { margin-top: 10px;}
.footer-entire {padding: 0;}
.footer-entire .col-lg-2 { padding: 0 12px; }
.footer .company-info { padding-left: 12px;}
.company-info .footer__info-list li { padding: 4px 0;}
.footer__logo img {width: 100px;}
.company-info .footer__line { display: none;}

/*scroll-top*/
.top-text .label { font-size: 14px;}
.arrow-img { width: 14px;}




}

@media (max-width: 480px ) {
.breadcumb-wrapper { margin-top: 77px;}
.hero-wrapper.hero-18 .mainSwiper{ height: clamp(200px, 26vh, 460px); }
.mobile-menu { margin-bottom: 10px; padding-bottom: 10px;}
.mobile-menu ul { padding: 0;}
.mobile-menu ul li ul li a { font-size: 15px;}

.mobile-menu-wrapper .sidebar-wrap { margin-bottom: 0;}
.company-info { padding-top: 5px; margin-top: 5px;}
.company-info .footer__line { margin-bottom: 0;}
.breadcumb-title { font-size: 30px;}

/*inxex*/
.notice .btn-group { margin-top: 15px;}
.together .slice_area .box .after { left: 10px;}

#main-client .client-list-wrap li a { padding: 10px;}
.portfolio-badge { top: 15px; left: 15px;}

.client-more-btn { padding: 5px 15px;}

/*bioft스토리*/
.client-list-wrap { gap: 10px;}
.client-list-wrap li a { padding: 10px;}

.client-list-wrap { grid-template-columns: repeat(3, 1fr);}

/*인증현황*/
#certification .award-wrap-area .single-award-list .award-details h4:before { font-size: 18px;}
.award-wrap-area .single-award-list .award-details h4 a { font-size: 18px; }
#certification .award-wrap-area .single-award-list .award-tag, 
#certification .award-wrap-area .single-award-list .award-year { font-size: 0px; }
#certification .award-wrap-area .single-award-list {gap: 10px; }
#certification .cerification-content h5 {font-size: 14px;}

/*효능센터*/
.imgbox-content p.small-font { margin-top: 10px; }
/*포트폴리오*/
#rnd_portfolio .brand .portfolio-details p { font-size: 14px;}

}

@media (max-width: 430px ) {
.kbeauty-row figcaption { justify-content: center; gap: 4px;}
.kbeauty-row figcaption p:last-child { width: 98%;}
.kbeauty-row figcaption p { padding: 6px 25px;}

}
@media (max-width: 390px ) {
.kbeauty-row figcaption p { padding: 6px 19px;}

}

@media (max-width: 375px) {
/*헤더*/
.header-logo a img { width: 80px;}
.mobile-logo a img { width: 80px;}
.col-nav.ms-auto { margin-left: -13px !important;}
.menu-area .col-lang { right: 34px;}
.col-sns { margin-right: 90px;}
.hero-18 { margin-top: 78px; }

}

@media (max-width: 360px ) {
.hero-18 { margin-top: 78px;}

/*인증현황*/
#certification .award-wrap-area .single-award-list {flex-direction: column;}

/*효능센터*/
#business_efficacy_section01 .compare-box {gap: 5px;}
#business_efficacy_section01 .compare-arrow {font-size: 25px;}
.imgbox-content p.small-font { font-size: 13px; }

/*contact*/
.address figcaption p { padding: 4px 15px;}
.address .map-item h4 { font-size: 18px;}

/*연혁*/
#history .award-wrap-area .single-award-list .award-details { padding: 15px 0 0 0;}

/*bioft스토리*/
.kbeauty-row figcaption p { padding: 6px 17px;}

}

@media (max-width: 344px ) {
.hero-wrapper.hero-18 .mainSwiper { height: clamp(200px, 20vh, 460px); }

.textNavSwiper .swiper-slide { padding: 5px 15px;}
.kbeauty-row figcaption p { padding: 6px 14px; }
.title-box, .title-box-plain {padding-left: 48px; justify-content: flex-start;}
}

@media (max-width: 320px ) {
.pagination-wrap .pagination .page-link { width: 30px; height: 30px; font-weight: 400;}

/*index-main슬라이드*/
.textNavSwiper .swiper-slide { padding: 5px 10px; font-size: 13px;}
.hero-wrapper.hero-18 .mainSwiper { height: clamp(180px, 21vh, 451px);}

#main-client .client-list-wrap { gap: 5px;}
.client-more-btn { padding: 5px 10px; font-size: 13px;}

/*bioft스토리*/
.award-wrap-area .single-award-list .award-details p { font-size: 14px;}


/*회사문화*/
.portfolio-title .title-big { font-size: 2rem;}
.portfolio-title .title-small { font-size: 1.5rem;}

/*bioft스토리*/
.kbeauty-row figcaption p { padding: 6px 10px;}

}





@media (min-width: 576px) {
    .modal {
        --bs-modal-margin: 1.75rem;
        --bs-modal-box-shadow: var(--bs-box-shadow);
    }
}



/*영문 css*/
html[lang="en"] br.en {display: none;}
html[lang="en"] .info-item { align-items: flex-start; flex-direction: column; gap: 0px; margin-bottom: 10px;}

/*원료센터*/
html[lang="en"] .title-box, .title-box-plain { font-size: 16px;}
/*html[lang="en"] .en-table { width: 100%;}
html[lang="en"] .en-table:last-child { margin-top: 30px;}*/
/*html[lang="en"] .table-wrap{
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

html[lang="en"] .efficacy-table{
    min-width: 700px; 
}*/


/*바이오에프티스토리*/

html[lang="en"] .kbeauty-iso { padding: 25px 0; margin: 20px 0;}
html[lang="en"] .counter-divider .counter-card:last-child { height: 328px;}

/*효능센터*/
html[lang="en"] #business_efficacy_section01 .custom-table th { font-size: 16px;}

html[lang="en"] #business_raw_section01 .section.both.i2 .header:before { top: 3%;}
html[lang="en"] #business_raw_section01 .section.both.i2.two .header:before { top: 12%;}
/*푸터*/


@media (max-width: 1400px) {
/*원료센터*/
html[lang="en"] #business_raw_section01 .wrap .row .section { width: 100%;}
html[lang="en"] #business_raw_section01 .step-list.reversal .step-list-inner li { font-size: 18px;}

}

@media (max-width: 1199px) {
/*문의하기*/
html[lang="en"] .map-item figcaption { row-gap: 0;}


}
@media (max-width: 991px) {
/*바이오에프티스토리*/
html[lang="en"] .counter-divider .counter-card:last-child { height: auto;}



}
@media (max-width: 575px) {
/*index*/
html[lang="en"] .sec-title { font-size: 20px;}
html[lang="en"] br.en {display: block;}

/*원료센터*/
html[lang="en"] #business_raw_section01 .title-box { font-size: 16px; }
html[lang="en"] #business_raw_section01 .step-list.reversal .step-list-inner li { font-size: 16px;}

/*효능센터*/
html[lang="en"] #business_efficacy_section01 .custom-table th.vit-item{ width: 45%;}
html[lang="en"] #business_efficacy_section01 .custom-table th.vit-period { width: 20%;}
html[lang="en"] #business_efficacy_section01 .font-16 { font-size: 14px;}

}
@media (max-width: 360px) {
html[lang="en"] .address figcaption p { padding: 4px 8px; font-size: 14px;}
  
}

/*중문 css*/
html[lang="cn"] body,
html[lang="cn"] .h1, 
html[lang="cn"] h1,
html[lang="cn"] .h2,
html[lang="cn"] h2,
html[lang="cn"] .h3,
html[lang="cn"] h3,
html[lang="cn"] .h4,
html[lang="cn"] h4,
html[lang="cn"] .h5,
html[lang="cn"] h5, 
html[lang="cn"] .h6, 
html[lang="cn"] h6 { font-family: var(--title-font-cn); word-break: break-word;}

html[lang="cn"] p,
html[lang="cn"] span { font-family: var(--body-font-cn); word-break: break-word;}

html[lang="cn"] textarea,
html[lang="cn"] select,
html[lang="cn"] option,
html[lang="cn"] label,
html[lang="cn"] input { font-family: var(--body-font-cn); word-break: break-word;}

html[lang="cn"] a,
html[lang="cn"] ul,
html[lang="cn"] li { font-family: var(--title-font-cn); word-break: break-word;}

html[lang="cn"] .link-effect { margin-bottom: 5px;}
html[lang="cn"] .main-menu ul.sub-menu a { font-family: var(--title-font-cn); word-break: break-word;}

/*index*/
html[lang="cn"] br.cn {display: none;}
html[lang="cn"] br.pc-cn { display: block;}
html[lang="cn"] .together .slice_area .box .before { font-size: 18px;}

@media (max-width: 1199px) {
/*바이오스토리*/
html[lang="cn"] .award-wrap-area .single-award-list { gap: 85px;}
html[lang="cn"] #history .award-wrap-area::before { left: 199px;}


}
@media (max-width: 991px) {
/*바이오스토리*/
html[lang="cn"] #history .award-wrap-area::before { left: 158px;}

}

@media (max-width: 575px) {
html[lang="cn"] p { font-size: 16px;}


/*index*/
html[lang="cn"] br.cn {display: block;}
html[lang="cn"] br.pc-cn { display: none;}
html[lang="cn"] .together .slice_area .box.on .after { left: 8px;}

/*바이오스토리*/
html[lang="cn"] #history .award-wrap-area::before { left: 3px;}

/*회사문화*/
html[lang="cn"] .portfolio-title .title-small { font-size: 29px;}

/*문의하기*/
html[lang="cn"] .address figcaption p { padding: 4px 8px; font-size: 14px;}
html[lang="cn"] .map-item figcaption { row-gap: 0;}

/*푸터*/
html[lang="cn"] .info-item .text { word-break: break-word;}
}