@charset "utf-8";

/* 공통 */
.c-white {color:#fff !important;}
.c-main {color:var(--color-primary) !important;}
.c-2 {color:var(--color-secondary) !important;}

.lang-cn {font-family:'Noto Sans SC',sans-serif; word-break:break-all;}
.lang-ja {font-family:'Noto Sans JP',sans-serif; word-break:break-all;}

.content-margin {margin-bottom:clamp(40px, calc(150/ var(--inner) * 100vw ),150px);}
.content-padding {padding:clamp(40px, calc(150/ var(--inner) * 100vw ),150px) 0;}
.doc-cnt {margin-bottom:clamp(40px, calc(100/ var(--inner) * 100vw ),100px);}
.doc-padding {padding:clamp(40px, calc(100/ var(--inner) * 100vw ),100px) 0;}

.doc-top-txt {margin-bottom:var(--size60); font-size:var(--font-size-24); font-weight:500; line-height:1.4; color:#242424; text-align:center;}

.doc-tit-wrap {margin-bottom:clamp(40px, calc(60/ var(--inner) * 100vw ),60px); text-align:center;}
.doc-tit-wrap .doc-tit {position:relative; padding-top:0.57em; color:#242424; font-size:clamp(22px, calc(40/ var(--inner) * 100vw ),40px); line-height:1.2em; font-weight:700;}
.doc-tit-wrap .doc-tit:before {content:''; position:absolute; left:50%; top:0; margin-left:-0.15em; width:0.3em; height:0.23em; background:url('/images/common/bullet.png') no-repeat 50% 50%/contain;}

.bg-gray {position:relative;}
.bg-gray:before {content:''; position:absolute; left:50%; top:0; width:100vw; height:100%; background:#f8f8f8; transform:translateX(-50%); z-index:-1;}

.table-wrap table {width:100%; border-collapse:collapse; border-spacing:0px;}

.video-container.sub-video {border-radius:1em;}

/* 기업개요 */
.company-summary .items {display:flex; flex-wrap:wrap;}
.company-summary .item {position:relative; margin-top:-1px; margin-left:-1px; width:25%; border:1px solid #ddd;}
.company-summary .item:nth-child(2),
.company-summary .item:nth-child(4),
.company-summary .item:nth-child(5),
.company-summary .item:nth-child(7) {background:#f8f8f8;}
.company-summary .in {display:flex; flex-direction:column; justify-content:center; align-items:center; height:clamp(200px, calc(300/ var(--inner) * 100vw ),300px); text-align:center;}
.company-summary .tit {margin-bottom:0.5em; font-size:var(--font-size-22); font-weight:600; line-height:1.2; color:#242424;}
.company-summary .txt {font-size:var(--font-size-17); line-height:1.5;}
.company-summary .txt span {font-size:var(--font-size-14);}
.company-summary .icon lord-icon {width:var(--size80); height:var(--size80);}

/* ci */
.ci-info {display:flex; gap:36px; margin-bottom:var(--size60);}
.ci-info .tit {position:relative; margin-bottom:1.4em; padding-left:1.4em; font-size:var(--font-size-20); font-weight:600; line-height:1.2; color:#242424;}
.ci-info .tit:before {content:''; position:absolute; left:0; top:0.1em; width:1.15em; height:1em; background:url('/images/sub/bullet01.png') no-repeat 50% 50%/contain;}
.logo-image .items {display:flex; gap:var(--size30);}
.logo-image .item {text-align:center;}
.logo-image .item p {margin-top:1.4em; font-size:var(--font-size-18); font-weight:600; line-height:1.2; color:#242424;}

/* 비전 */
.vision-img {position:relative; margin-right:-50px; text-align:center;}

/* 인사말 */
.greeting-bg {position:relative; margin-bottom:var(--size80); text-align:right;}
.greeting-bg p {position:absolute; left:0; top:50%; transform:translateY(-50%); font-size:clamp(24px, calc(51/ var(--inner) * 100vw ),51px); line-height:1.4; font-weight:700; text-align:left;}
@media (min-width: 1024px) {
    [lang=en] .greeting-bg p {font-size:clamp(24px, calc(40/ var(--inner) * 100vw ),40px);}
}
.greeting-bg .img {display:inline-block;}
.greeting-bg .text-line {position:relative; display:inline-block; color:#242424; /* 기본 검정색 */}

.greeting .tit {margin-bottom:var(--size50); font-size:clamp(18px,calc(28/ var(--inner) * 100vw ),28px); font-weight:500; line-height:1.2; color:#242424;}
.greeting .txt {font-size:var(--font-size-18); line-height:1.75;}
.greeting .sign {margin-top:var(--size50); font-size:var(--font-size-20); font-weight:600; line-height:1.2; color:#242424;}
.greeting .sign img {display:inline-block; vertical-align:middle; margin-left:var(--size20); margin-bottom:0.3em;}

/* 연혁 */
.history-wrap {position:relative; color:#454545;}
.history-wrap:before {top:0; bottom:0; position:absolute; left:300px; width:1px; background-color:#ddd; content:"";}
.history-item {padding-bottom:130px; display:flex; align-items:initial;}
.history-item:last-child {padding-bottom:0;}
.history-item .history-year {position:relative; top:0; left:0; width:300px; color:#242424; font-size:28px; line-height:1.4em; letter-spacing:-.03em; text-align:right; padding-right:0; display:flex; justify-content:space-between;}
.history-item .history-year strong {line-height:1em; display:inline-block; text-align:center; transition:all 0.5s ease; font-weight:500; flex:1;}
.history-month-box {padding-left:105px; flex:1;}
.history-detail {margin-bottom:15px; display:flex; font-size:18px; letter-spacing:-.03em; font-weight:500; transition:all 0.5s ease;}
.history-detail:last-child {margin-bottom:0;}
.history-detail .month {width:55px; color:#242424; display:block;}
.history-detail p {flex:1;}

.history-item .dots {width:10px; height:10px; top:9px; right:-5px; margin:0; position:relative; border:2px solid #000; background:#fff; border-radius:50%; transition:all 0.3s; z-index:0;}
.history-item .dots .inner-dots {width:100px; height:100px; position:absolute; background:rgba(199,21,52,0.1); border-radius:100%; top:50%; left:50%; transform:translate(-50%,-50%) scale(0); z-index:-1; transition:all 0.3s;}
.history-item .dots .inner-dots:after {width:60px; height:60px; display:block; content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(0); z-index:-1; background:rgba(199,21,52,0.3); border-radius:100%; transition:all 0.5s;}
.history-item.active .history-year {font-size:60px;}
.history-item.active .history-year strong {color:#0e238e; font-weight:600;}
.history-item.active .history-detail {font-weight:700; color:#242424;}
.history-item.active .history-month-item {color:#242424;}
.history-item.active .dots .inner-dots {transform:translate(-50%,-50%) scale(1); animation:ani .5s forwards ease; animation-delay:.05s;}
.history-item.active .dots .inner-dots:before {width:40px; height:40px; display:block; content:""; background:#fff; position:absolute; left:50%; top:50%; border-radius:100%; border:10px solid #c71534; animation:ani .5s forwards ease; animation-delay:.02s;}
.history-item.active .dots .inner-dots:after {animation:ani .5s forwards ease; animation-delay:.08s;}
.history-item.active .history-year strong {line-height:.6em;}

@keyframes ani {
	0% {transform:translate(-50%,-50%) scale(0);}
	100% {transform:translate(-50%,-50%) scale(1);}
}

@media (max-width: 1024px) {
	.history-item {padding-bottom: 80px;}
	.history-item .history-year {width: 250px;}
	.history-month-box {padding-left:100px;}
	.history-detail {font-size: 16px;}
	.history-wrap:before {top:80px; left: 250px;}
	.history-item .dots .inner-dots {width:80px; height:80px;}
	.history-item .dots .inner-dots:after {width:50px; height:50px;}
	.history-item.active .dots .inner-dots:before {width:30px; height:30px;}
	.history-item.active .history-year {font-size: 36px;}
}

@media (max-width: 640px) {
	.history-wrap {padding-top:50px;}
	.history-month-box {padding-left:0;}
	.history-item {padding-bottom: 50px; display:block;}
	.history-item .history-year {width:100%; text-align:left;}
	.history-item .history-year strong {text-align:left; line-height:1.5em; margin-bottom:15px; display:block;}
	.history-item .dots {display:none;}
	.history-wrap:before {display:none;}
	.history-detail {margin-bottom:7px; font-size:14px;}
	.history-detail .month {width:30px;}
	.history-item.active .history-year strong {line-height:1em;}
}

/* 글로벌 네트워크 */
.network .col {display:flex; align-items:center; margin-bottom:var(--size100);}
.network .col:last-child {margin-bottom:0;}

.network .cnt {width:50%; max-width:540px; padding-right:10px;}
.network .tit {position:relative; padding-left:1.65em; margin-bottom:1.4em; font-size:var(--font-size-20); font-weight:600; line-height:1.2; color:#242424;}
.network .tit:before {content:''; position:absolute; left:0; top:0.15em; width:1.15em; height:1em; background:url('/images/sub/bullet01.png') no-repeat 50% 50%/contain;}
.network .info dl {display:flex; margin-bottom:var(--size30); line-height:1.5;}
.network .info dl:last-child {margin-bottom:0;}
.network .info dt {position:relative; min-width:110px; padding-left:1.4em; font-size:1.13em; font-weight:500; color:#242424;}
.network .info dt:before {content:''; position:absolute; left:0; top:0.3em; width:0.89em; height:0.89em; background-repeat:no-repeat; background-position:50% 50%; background-color:transparent; background-size:contain;}
.network .info .addre dt:before {background-image:url('/images/sub/icon-add.png');}
.network .info .tel dt:before {background-image:url('/images/sub/icon-tel.png');}
.network .info .email dt:before {background-image:url('/images/sub/icon-email.png');}
.network .info dd {flex:1 1 auto; min-width:0; width:1%;}
.network .btn {margin-top:var(--size60);}
.network .btn a {display:inline-block; min-width:160px; padding:0.94em; border:2px solid #686868; border-radius:100vh; font-weight:600; line-height:1; color:#686868; text-align:center;}
.network .btn a:hover {background:#0e238e; border-color:#0e238e; color:#fff;}

.network .map {flex:1 1 auto; min-width:0; width:1%;}
.network .map iframe {width:100% !important; height:clamp(270px, calc(350/ var(--inner) * 100vw ),350px);}


/* 사업실적 */
.performance .group {display:flex; align-items:center; margin-bottom:var(--size100); gap:clamp(20px, calc(59/ var(--inner) * 100vw ),59px);}
.performance .group:last-child {margin-bottom:0;}
.performance .group:nth-child(even) {flex-direction:row-reverse;}
.performance .cnt {flex:1 1 auto; min-width:0; width:1%;}
.performance .cnt .cate {margin-bottom:1em; font-weight:600; line-height:1;}
.performance .cnt p {font-size:clamp(16px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight:600; line-height:1.3; color:#242424; letter-spacing:-.03em;}

/* 사업영역 */
.biz-area .group {display:flex; align-items:center; gap:clamp(20px, calc(80/ var(--inner) * 100vw ),80px);}
.biz-area .group:first-child {padding-top:0;}
.biz-area .img {border-radius:1.5em; overflow:hidden;}
.biz-area .cnt {flex:1 1 auto; min-width:0; width:1%;}
.biz-area .cate {margin-bottom:0.8em; font-weight:600; line-height:1;}
.biz-area .tit {margin-bottom:1em; font-size:clamp(16px, calc(35/ var(--inner) * 100vw ),35px); font-weight:600; line-height:1.3; color:#242424;}
.biz-area .btn {margin-top:var(--size55);}
.biz-area .btn a {display:inline-block; padding:1em 2em; border-radius:0.5em; border:1px solid #0e238e; color:#0e238e; font-weight:500; line-height:1;}
.biz-area .btn a:hover {background:#0e238e; color:#fff;}
.biz-area ul li {margin-bottom:0.8em; font-size:clamp(14px, calc(20/ var(--inner) * 100vw ),20px); line-height:1.3; color:#242424;}
.biz-area ul li:last-child {margin-bottom:0;}

.biz-area .group:nth-child(even) .btn a {border-color:#c71534; color:#c71534;}
.biz-area .group:nth-child(even) .btn a:hover {background:#c71534; color:#fff;}

.biz-content {display:flex; gap:clamp(20px, calc(60/ var(--inner) * 100vw ),60px); margin-bottom:clamp(20px, calc(60/ var(--inner) * 100vw ),60px);}
.biz-content .cnt {flex:1 1 auto; min-width:0; width:1%;}
.biz-content .col {margin-bottom:var(--size55);}
.biz-content .col .tit {margin-bottom:1em; font-size:var(--font-size-22); font-weight:700; line-height:1.2; color:#242424;}
.biz-content .col .txt {margin-bottom:1.4em; font-size:var(--font-size-18); font-weight:500; line-height:1.6; color:#242424;}
.biz-content .col ul li {position:relative; padding-left:1em; line-height:1.8;}
.biz-content .col ul li:before {content:''; position:absolute; left:0.1em; top:0.8em; width:0.19em; height:0.19em; background:#0e238e; border-radius:100%;}
.biz-content .col ul.type2 li {margin-bottom:2em;}
.biz-content .col ul.type2 li:last-child {margin-bottom:0;}

.biz-content2 {margin-bottom:clamp(20px, calc(60/ var(--inner) * 100vw ),60px); text-align:center;}
.biz-content2 .img {margin-bottom:var(--size60);}
.biz-content2 .tit {margin-bottom:1em; font-size:var(--font-size-22); font-weight:700; line-height:1.3; color:#242424;}

.liquid-product {display:flex; align-items:center; gap:clamp(20px, calc(60/ var(--inner) * 100vw ),60px);}
.liquid-product .cnt {flex:1 1 auto; min-width:0; width:1%;}
.liquid-product .tit {margin-bottom:var(--size55); font-size:clamp(16px, calc(32/ var(--inner) * 100vw ),32px); font-weight:600; line-height:1.4; color:#242424;}
.liquid-product .tt {margin-bottom:1em; font-size:var(--font-size-22); font-weight:700; line-height:1.4; color:#242424;}
.liquid-product .txt {position:relative; padding-left:0.88em; margin-bottom:1.8em; line-height:1.8; color:#454545;}
.liquid-product .txt:before {content:''; position:absolute; left:0; top:0.7em; width:0.25em; height:0.25em; background:#0e238e; border-radius:100%;}
.liquid-product .txt:last-child {margin-bottom:0;}
.liquid-product .txt span {display:block;}

.liquid-img .items {display:flex; gap:var(--size30);}
.liquid-img .item {flex:0 1 auto; text-align:center;}
.liquid-img .item .tit {margin-top:1em; font-size:var(--font-size-22); line-height:1.4; color:#242424; font-weight:700;}
.liquid-img .item .txt {font-size:var(--font-size-22); line-height:1.4; color:#242424}

.page-btn {display:flex; justify-content:space-between;}
.page-btn a {display:block;}
.page-btn .in {display:flex; margin:0 calc(0px - clamp(20px, calc(60/ var(--inner) * 100vw ),60px));}
.page-btn .in a {position:relative; padding:0 clamp(20px, calc(60/ var(--inner) * 100vw ),60px);}
.page-btn .in a:before {content:''; position:absolute; right:0; top:50%; margin-top:calc(0px - clamp(15px, calc(40/ var(--inner) * 100vw ),40px)/2); width:1px; height:clamp(15px, calc(40/ var(--inner) * 100vw ),40px); background:#ddd;}
.page-btn .in a:last-child:before {display:none;}

/* 총판 */
.distributor .items {display:flex; flex-wrap:wrap; margin:0 calc(0px - var(--size15));}
.distributor .item {width:25%; padding:0 var(--size15); margin-bottom:var(--size60); text-align:center;}
.distributor p {margin-top:1.4em; font-size:var(--font-size-20); font-weight:600; line-height:1; color:#242424;}

/* 사업장 */
.local-tabs {margin-bottom:var(--size60);}
.local-tabs ul {display:flex; flex-wrap:wrap; justify-content:center; margin:-5px -10px;}
.local-tabs ul li {padding:5px 10px;}
.local-tabs ul li a {display:inline-block; padding:0.8em 1.5em; background:#ddd; border-radius:100vh; font-size:var(--font-size-20); font-weight:600; line-height:1; color:#6c6c6c;}
.local-tabs ul li.active a {background:#0e238e; color:#fff;}

.gal-slider {position:relative; margin-bottom:10px;}
.gal-slider .slick-slide {border-radius:var(--size40); overflow:hidden;}
.gal-ctrl {display:flex; align-items:center; position:absolute; left:50%; bottom:var(--size30); padding:16px 20px; border-radius:100vh; transform:translateX(-50%); background:rgba(0,0,0,0.6);}
.gal-ctrl .title-box {min-width:140px; padding:0 var(--size20); font-size:var(--font-size-20); font-weight:600; line-height:1; color:#fff; text-align:center;}
.gal-ctrl button {display:block; width:9px; height:16px; background-color:transparent; background-repeat:no-repeat; background-size:contain; background-position:50% 50%; border:0; text-indent:-999em; overflow:hidden; opacity:0.3; transition:0.2s all ease;}
.gal-ctrl button:hover {opacity:1;}
.gal-ctrl .prevArrow {background-image:url('/images/sub/sld-prev.png');}
.gal-ctrl .nextArrow {background-image:url('/images/sub/sld-next.png');}

.gal-slider-wrap .img {position:relative; padding-bottom:62.5%; overflow:hidden; border-radius:1.5em;}
.gal-slider-wrap .img img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}

.gal-slider-wrap .thumb-slider {position:relative; padding:0 var(--size60); margin-top:var(--size40);}
.gal-slider-wrap .thumb-slider .slick-arrow {position:absolute; z-index:1; top:50%; width:var(--size20); height:34px; margin-top:-17px; background-color:transparent; background-size:contain; background-position:50% 50%; background-repeat:no-repeat; border:0; text-indent:-999em; overflow:hidden; transition:0.2s all ease;}
.gal-slider-wrap .thumb-slider .slick-prev {left:calc(0px - var(--size60)); background-image:url('/images/sub/gal-prev.png');}
.gal-slider-wrap .thumb-slider .slick-next {right:calc(0px - var(--size60)); background-image:url('/images/sub/gal-next.png');}
.gal-slider-wrap .thumb-slider .slick-prev:hover {background-image:url('/images/sub/gal-prev-on.png');}
.gal-slider-wrap .thumb-slider .slick-next:hover {background-image:url('/images/sub/gal-next-on.png');}

.gal-slider-wrap .thumb-slider .slick-list {margin:0 calc(0px - var(--size10));}
.gal-slider-wrap .thumb-slider .slick-slide {position:relative; margin:0 var(--size10); cursor:pointer;}
.gal-slider-wrap .thumb-slider .slick-slide:before {content:''; position:absolute; z-index:1; left:0; top:0; width:100%; height:100%; border:2px solid #0e238e; border-radius:1.5em; opacity:0; transition:0.2s all ease;}
.gal-slider-wrap .thumb-slider .slick-current:before {opacity:1;}

/* 시설현황 */
.facilities .list {margin-bottom:var(--size60);}
.facilities .list .items {display:flex; flex-wrap:wrap; margin:calc(0px - var(--size15));}
.facilities .list .item {width:50%; padding:var(--size15);}
.facilities .list .in {position:relative; height:100%;}
.facilities .list .in:before {content:''; position:absolute; left:0; top:0; width:100%; height:100%; border:1px solid #ddd;}
.facilities .list .cnt {padding:var(--size30) 20px; text-align:center;}
.facilities .list .tit {margin-bottom:0.5em; font-size:var(--font-size-24); font-weight:600; line-height:1.2; color:#242424;}
.facilities .list .txt {color:#686868; line-height:1.4;}

.facilities h3 {margin-bottom:var(--size55); font-size:clamp(22px, calc(40/ var(--inner) * 100vw ),40px); font-weight:700; line-height:1.2; color:#242424; text-align:center;}
.facilities table {background:#fff; line-height:1.4; font-size:var(--font-size-18); text-align:center;}
.facilities thead th {background:#f7f8fb; padding:1em 0.5em; border:1px solid #ddd; border-top:2px solid #242424; font-weight:600; color:#242424;}
.facilities tbody td,
.facilities tbody th {border:1px solid #ddd; padding:1em 0.5em;}
.facilities tr th:first-child,
.facilities tr td:first-child {border-left:0;}
.facilities tr th:last-child,
.facilities tr td:last-child {border-right:0;}

/* 지속가능경영 */
.sustainability-txt {position:relative; margin-bottom:var(--size60); padding-top:2.27em; font-size:var(--font-size-22); font-weight:500; line-height:1.5; color:#242424; text-align:center;}
.sustainability-txt:before {content:''; position:absolute; left:50%; top:0; margin-left:-0.25em; width:0.55em; height:0.55em; background:#c71534; transform:rotate(45deg);}
.sustainability-txt:last-child {margin-bottom:0;}

.quality-list .items {display:flex; flex-wrap:wrap; justify-content:center; margin:calc(0px - var(--size15));}
.quality-list .item {width:33.333%; padding:var(--size15);}
.quality-list.type2 .item {flex:1 0 auto;}
.quality-list .item .in {height:100%; padding:var(--size40) 20px; border:1px solid #ddd; border-radius:1em; text-align:center;}
.quality-list .item .num {display:inline-block; margin-bottom:var(--size30); min-width:5em; padding:0.25em; background:#0e238e; border-radius:100vh; font-size:var(--font-size-20); font-weight:700; line-height:1; color:#fff;}
.quality-list .item .num.type2 {background:#c71534;}
.quality-list .item .txt {margin-top:1em; font-size:var(--font-size-20); line-height:1.4;}
.quality-list .item lord-icon {width:var(--size80); height:var(--size80); margin:0 auto;}

.quality h3 {position:relative; padding-top:0.63em; margin-bottom:var(--size55); font-size:clamp(22px, calc(40/ var(--inner) * 100vw ),40px); font-weight:700; line-height:1.3; color:#242424; text-align:center;}
.quality h3:before {content:''; position:absolute; left:50%; top:0; margin-left:-0.15em; width:0.3em; height:0.23em; background:url('/images/common/bullet.png') no-repeat 50% 50%/contain;}

.certi-list .items {display:flex; flex-wrap:wrap; margin:0 calc(0px - var(--size50)) calc(0px - var(--size60));}
.certi-list .item {width:33.333%; padding:0 var(--size50); margin-bottom:var(--size60); text-align:center;}
.certi-list .image-pop {display:block; position:relative; margin-bottom:var(--size30);}
.certi-list .image-pop:before {content:''; position:absolute; left:0; top:0; width:100%; height:100%; border:1px solid #ddd;}
.certi-list .tit {display:inline-block; background:#0e238e; padding:0.35em; width:100%; max-width:230px; border-radius:100vh; font-size:var(--font-size-20); font-weight:500; line-height:1.3; color:#fff;}
.certi-list .txt {margin-top:1em; line-height:1.6;}

.certi-list .item:nth-child(4) .tit,
.certi-list .item:nth-child(5) .tit,
.certi-list .item:nth-child(6) .tit {background:#c71534;}

.fancybox-prev {left:-131px !important;}
.fancybox-next {right:-131px !important;}
.fancybox-prev span,
.fancybox-next span {width:23px !important; height:41px !important; margin-top:-20.5px;}

.ids-bg {position:relative;}
.ids-bg:before {content:''; position:absolute; z-index:-1; left:50%; top:0; width:100vw; height:100%; background:url('/images/sub/ids-bg.jpg') no-repeat 50% 50%/cover; transform:translateX(-50%);}
.ids-bg .icon {display:flex; margin:0 auto var(--size55); align-items:center; justify-content:center; width:clamp(120px, calc(220/ var(--inner) * 100vw ),220px); height:clamp(120px, calc(220/ var(--inner) * 100vw ),220px); background:#fff; border-radius:100vh;}
.ids-bg .icon lord-icon {width:clamp(60px, calc(104/ var(--inner) * 100vw ),104px); height:clamp(60px, calc(104/ var(--inner) * 100vw ),104px);}
.ids-bg .tit {margin-bottom:0.6em; font-size:clamp(20px, calc(32/ var(--inner) * 100vw ),32px); font-weight:700; line-height:1.2; color:#fff; text-align:center;}