@charset "UTF-8";

:root {
    --primary: #5b9845;
    --blue: #9abce3;
}
.bg-blue {background-color: var(--blue);}

/* 공통 */
.container-inner {position:relative; width:1400px; max-width:100%; height:100%; margin:0 auto; padding:0 40px;}
.section-title {text-align:center;}
.section-text {max-width:90%; margin: 0 auto 60px; font-size:18px; text-align:center;}
.sub-title {display:block; margin-bottom:16px; font-size:20px; font-weight:600; color:var(--heading-color);}
.list-unstyled {display:flex; flex-direction:column; gap:8px;}
.list-unstyled li {display:flex; align-items:flex-start; word-break:keep-all;}
.list-unstyled li i {margin-top:2px;}
.main,
.product {position:relative; width:100%; overflow-x:hidden; margin:0 auto;}
.btn-area {display:block; margin: 40px 0;}
.swiper-pagination-bullet {transition: 0.3s;}
.swiper-pagination-bullet.swiper-pagination-bullet-active {background-color:var(--primary); width:12px; height:12px;}
.bg-blue {background-color:#daeafc}
.text-blue {color:#3f7fca}
.doted-list {display:flex; flex-direction:column; align-items:flex-start; gap:8px;}
.doted-list li {position:relative; padding-left:16px;}
.doted-list li:before {content:""; position:absolute; left:0; top:8px; width:5px; height:5px; border-radius:50%; background-color:#858c97;}
.swiper-pagination {height:40px;}
.btn-view {
    position: relative;
    min-width: 210px;
    color: var(--white);
    background-color: var(--primary);
    overflow: hidden;
    z-index: 2;
    transition: .2s ease-out;
}
.btn-view span {transition:.2s all;}
.btn-view:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--white);
    transform: translateX(-102%);
    position: absolute;
    left: 0;
    top: 0;
    border-radius: max(calc(99px * var(--base-ratio)), calc(calc(99 / var(--base-size)) * var(--base-percent)));
    transition: .2s all;
    z-index: -1;   
}
.btn-view span:before {
    content: "\f3c7";
    width:0;
    font-family: remixicon !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 20px;    
    margin-right: 8px;
}
.btn-view span i {width:0;font-size:0;transition:.2s all;}
.btn-view:hover {transition:.2s all;border:1px solid var(--primary);}
.btn-view:hover span {transition:.2s all;color:#111;}
.btn-view:hover:before {transition:.2s all;transform:translateX(0);}
.btn-view:hover span i {transition:.2s all;margin-left:12px;font-size:20px;transition-delay:.05s;}

/* Start: breadcrumb */
.breadcrumb {position:relative; width:100%; height:40px; background-color:#f1f5ed;}
.breadcrumb ul {width:100%; height:100%; display:flex; align-items:center;}
.breadcrumb ul li a, 
.breadcrumb ul li span {display:inline-block; color:#222; font-size:16px; font-weight:400;}
.breadcrumb ul li span {color:#111; font-weight:600;}
.breadcrumb ul li a:hover {color:var(--primary)}
.breadcrumb ul li:nth-child(1) a {font-size:20px;}
.breadcrumb ul li:nth-child(2):before,
.breadcrumb ul li:nth-child(3):before {content:"\ea6e"; display:inline-block; margin:2px 4px 0; font-family:remixicon !important; font-style:normal; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-size:18px;}
/* End: breadcrumb */

/* Start: Tab menu*/
.lnb_wrap {
    width: 100%;
    height: 62px;
    border-bottom: 1px solid #ddd;
}
.lnb_wrap .lnb_inner {
    z-index: 20;
    position: relative;
    width: 100%;
    background-color: #fff;
}
.lnb_wrap .scroll_wrap {
    width: 100%;
    overflow: hidden;
    /* overflow-x: auto; */
    text-align: center;
}
.lnb_wrap .lnb_list {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    white-space: nowrap;
    background-color: #fff;
}
.lnb_wrap .lnb_list li {
    position: relative;
    min-width: 140px;
    height: 62px;
    padding: 0 8px;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: rgba(34, 34, 34, .3);
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}
.lnb_wrap .lnb_list li::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: #1c1c1c;
    -webkit-transition: width .3s;
    transition: width .3s;
}
.lnb_wrap .lnb_list li.active {color:#1c1c1c;}
.lnb_wrap .lnb_list li.active::before {width:100%;}
.lnb_wrap .lnb_list li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: max(calc(16px * var(--base-ratio)), calc(calc(16 / var(--base-size)) * var(--base-percent))) max(calc(10px * var(--base-ratio)), calc(calc(10 / var(--base-size)) * var(--base-percent)));
    width: 100%;
    height: 100%;
    color: inherit;
}
.lnb_wrap .lnb_list li:hover {color:#1c1c1c;}
.lnb_wrap .lnb_list li:hover::before {width:100%;}
/* End: lnb_wrap. Tab menu */

/* Start: NGR 재활용 소재 */
.lg-container.lg-show {display:block;position:relative;z-index:10000;}
.sec_board .inner {padding:0 120px;margin-top:60px;}
.sec_board .bot {
    padding: max(calc(80px * var(--base-ratio)), calc(calc(80 / var(--base-size)) * var(--base-percent))) 0 max(calc(160px * var(--base-ratio)), calc(calc(160 / var(--base-size)) * var(--base-percent)));
    overflow: hidden
}
.sec_board .bot .tab_btn ul {display:flex;gap:8px;}
.sec_board .bot .tab_btn ul li button {
    display: block;
    padding: max(calc(12px * var(--base-ratio)), calc(calc(12 / var(--base-size)) * var(--base-percent))) max(calc(22px * var(--base-ratio)), calc(calc(22 / var(--base-size)) * var(--base-percent)));
    overflow: hidden;
    z-index: 2;
    transition: .2s ease-out;
    box-sizing: border-box;
    border: 1px solid #e3e9ef;
    position: relative;
    border-radius: 99px;
    font-size: 16px;
    line-height: 1;
    letter-spacing: -0.02em;
    font-weight: 500;
    line-height: 1.3;
    color: #434a57
}
.sec_board .bot .tab_btn ul li button:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--primary);
    transform: translateX(-102%);
    position: absolute;
    left: 0;
    top: 0;
    border-radius: max(calc(99px * var(--base-ratio)), calc(calc(99 / var(--base-size)) * var(--base-percent)));
    transition: .2s ease-out;
    z-index: -1
}
.sec_board .section-text {max-width:800px;}
.lg-components {bottom: 20px !important;}
.lg-sub-html {padding: 16px 40px 140px !important; font-size:20px !important;}

@media(min-width: 1024px) {
    .sec_board .bot .tab_btn ul li button:hover{color:#fff}
    .sec_board .bot .tab_btn ul li button:hover:before{transform:translateX(0)}
}
.sec_board .bot .tab_btn ul li.active button{color:#fff}
.sec_board .bot .tab_btn ul li.active button:before{transform:translateX(0)}
.sec_board .bot .tab_con{margin-top:40px}
.sec_board .bot .tab_con .con{display:none}
.sec_board .bot .tab_con .con .list .swiper-container{overflow:visible}
.sec_board .bot .tab_con .con .list .swiper-slide{width:400px;margin-right:20px;opacity:0}
.sec_board .bot .tab_con .con .list .swiper-slide a{display:block;width:100%;height:220px;position:relative;border-radius:36px;overflow:hidden;background-color:#111;}
.sec_board .bot .tab_con .con .list .swiper-slide a:before{content:"";width:100%;height:100%;position:absolute;left:0;top:0;z-index:1;background:rgba(0,0,0,.4);opacity:0;transition:.25s ease-out}
.sec_board .bot .tab_con .con .list .swiper-slide a img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;transition:.25s ease-out;opacity:0.9;}
.sec_board .bot .tab_con .con .list .swiper-slide a:hover:before,.sec_board .bot .tab_con .con .list .swiper-slide a:hover:after{opacity:1}
.sec_board .bot .tab_con .con .list .swiper-slide a:hover img{transform:scale(1.1)}
.sec_board .bot .tab_con .con .list .swiper-slide:last-child{margin-right:0}
.sec_board .bot .tab_con .con .list .swiper-scrollbar{padding:40px;width:100%;background:none;cursor:pointer}
.sec_board .bot .tab_con .con .list .swiper-scrollbar:before{content:"";width:100%;height:4px;border-radius:99px;background:#eee;position:absolute;left:0;top:49%}
.sec_board .bot .tab_con .con .list .swiper-scrollbar .swiper-scrollbar-drag{position:absolute;left:0;top:49%;background:var(--primary);height:4px}
.sec_board .bot .tab_con .con.active {display:block}
/* End: NGR 재활용 소재 */

/* Start: sub_visual */
.sub_visual {position:relative; width:100%; height:400px; overflow:hidden; animation: visualScale 3s linear;}
.sub_visual.sub_visual01 {background:url(../images/main-business-bg1.jpg) no-repeat 50% 70%; background-size:cover;}
.sub_visual.sub_visual_02 {background:url(../images/main-business-bg2.jpg) no-repeat 50% 50%; background-size:cover;}
.sub_visual.sub_visual_03 {background:url(../images/main-business-bg3.jpg) no-repeat 100% 15%; background-size:cover;}
.sub_visual.sub_visual_04 {background:url(../images/main-business-bg4.jpg) no-repeat 50% 50%; background-size:cover;}
/* .sub_visual.sub_visual_04:before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background-color:#000; z-index:-1;} */
.sub_visual.sub_visual_05 {background:url(../images/main-business-bg5.jpg) no-repeat 50% 60%; background-size:cover;}
.sub_visual.sub_visual_06 {background:url(../images/main-business-bg6.jpg) no-repeat 50% 50%; background-size:cover;}
.sub_visual.sub_visual_07 {background:url(../images/main-business-bg8.jpg) no-repeat 50% 50%; background-size:cover;}
.sub_visual.sub_visual_08 {background:url(../images/main-business-bg7.jpg) no-repeat 50% 50%; background-size:cover;}
.sub_visual.sub_visual_09 {background:url(../images/main-business-bg9.jpg) no-repeat 50% 50%; background-size:cover;}
@keyframes visualScale {
    0% {
        opacity: 0;
        -webkit-transform: scale(1.12);
        transform: scale(1.12)
    }
    75% {
        opacity: 1
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}
.sub_visual .title-wrap {z-index:1;position:absolute;top:60%;left:50%;transform:translate(-50%,-50%);width:100%;text-align:center;opacity:1;}
.sub_visual .title-wrap h2 {opacity:1;transform:translateY(0);transition:all .4s ease-in-out;color:#fff;word-wrap:break-word;text-transform:uppercase;transition-delay:.6s;}
.sub_visual.sub_visual_03 .title-wrap,
.sub_visual.sub_visual_04 .title-wrap {left:100px; top:75%; transform:translate(0,0); text-align: left;}
.sub_visual.sub_visual_03 .title-wrap h2,
.sub_visual.sub_visual_04 .title-wrap h2 {text-transform: none;}
.sub_visual:after {content:""; clear:both; display:table;}
/* End: sub_visual */

/* Start: 제품소개 */
.mgr .ngr-icon {display:block;}
.mgr .ngr-icon img {margin:0; width:60px;}
.mgr .circle {position:relative; width:120px; height:120px; border-radius:50%; padding:20px; z-index: 10;}
.mgr .parallax {max-width:636px; height:500px;}
.mgr .parallax-layer .center-icon {width: 128px; height:128px; display:flex; align-items:center; justify-content:center; top:43% !important;}
.mgr .parallax-layer .rounded-circle img {width:80px; height:auto; opacity:0.8;}
.mgr .parallax-layer .circle-img {position:absolute; left:0; top:0; width:100%; height:100%; border-radius:50%; box-shadow: 0 12px 24px -8px rgba(189, 196, 221, .75); transform: scale(1.5); border:6px solid rgba(255,255,255,1); background-size:cover;}
.mgr .section1.row {position:relative; align-items:center; padding-bottom:80px;}
.mgr .section1 .img-area {margin-top:40px;}
.mgr .section1 + .section1 {margin-top: 160px}
.mgr .section1.row .text-area h3 {white-space:nowrap; letter-spacing:-1px; margin-bottom:24px;}
.mgr .section2 .img-area {max-width:500px; padding-right:20px;}
.mgr .section2 .img-area > div {border-radius:36px; overflow:hidden;}
.mgr .section2 .mark {width:100%; height:80px; padding: 8px 36px; display:flex; align-items:center; justify-content:center; gap:40px; background-color:rgba(0,0,0,0.1);}
.mgr .section2 .mark img.fda {display:inline-block; width:68px; height:32px; margin:0;}
.mgr .section2 .mark img.efsa {display:inline-block; width:137px; height:36px; margin:0;}
.recycling-code {position:relative; width:100%; display:flex; flex-wrap:nowrap; gap:4px; justify-content:space-between; margin-top:24px;}
.recycling-code img {flex:1; max-width:50px; flex-shrink:0; opacity:0.5;}
.binded-content.mgr.PIR .binded-item {width:540px; height:360px; background-color:#fff; border-radius:36px; overflow:hidden;}

/* Netstal */
.netstal-features i.icon {display:inline-block; width:80px; height:80px; border-radius:50%; background-size:contain; margin-bottom:24px;}
.netstal-features i.icon.icon1 {background:url(../images/product/netstal/icon-productNetstal-01.svg) no-repeat 0 0;}
.netstal-features i.icon.icon2 {background:url(../images/product/netstal/icon-productNetstal-02.svg) no-repeat 0 0;}
.netstal-features i.icon.icon3 {background:url(../images/product/netstal/icon-productNetstal-03.svg) no-repeat 0 0;}
.netstal-features i.icon.icon4 {background:url(../images/product/netstal/icon-productNetstal-04.svg) no-repeat 0 0;}
.netstal-features i.icon.icon5 {background:url(../images/product/netstal/icon-productNetstal-05.svg) no-repeat 0 0;}
.netstal-features i.icon.icon6 {background:url(../images/product/netstal/icon-productNetstal-06.svg) no-repeat 0 0;}
.netstal-features i.icon.icon7 {background:url(../images/product/netstal/icon-productNetstal-07.svg) no-repeat 0 0;}
.netstal-features i.icon.icon8 {background:url(../images/product/netstal/icon-productNetstal-08.svg) no-repeat 0 0;}
.netstal-features i.icon.icon9 {background:url(../images/product/netstal/icon-productNetstal-09.svg) no-repeat 0 0;}
.netstal-features i.icon.icon10 {background:url(../images/product/netstal/icon-productNetstal-10.svg) no-repeat 0 0;}
.netstal-features i.icon.icon11 {background:url(../images/product/netstal/icon-productNetstal-11.svg) no-repeat 0 0;}
.netstal-features .h5 {font-size:24px; display:block; margin-bottom:16px;}
.netstal-product .icon {display:inline-block; width:80px; height:80px; border-radius:50%;overflow:hidden;}
.netstal-product .icon.icon-Preforms {background:url(../images/product/netstal/Icon_Menu_Preforms-220x220.png) no-repeat 0 0; background-size:contain;}
.netstal-product .icon.icon-closures {background:url(../images/product/netstal/Icon_Menu_Verschlusse-220x220.png) no-repeat 0 0; background-size:contain;}
.netstal-product .icon.icon-packaging {background:url(../images/product/netstal/Icon_Menu_Verpackung-220x220.png) no-repeat 0 0; background-size:contain;}
.netstal-product .icon.icon-medical {background:url(../images/product/netstal/Icon_Menu_Medizintechnik-220x220.png) no-repeat 0 0; background-size:contain;}
.netstal-product .text-area {padding-left:6%;}
.netstal-medical .text-area {padding-left:12%;}
.netstal-product .h1,
.netstal-preforms .h1,
.netstal-closures .h1,
.netstal-packaging h1,
.netstal-medical h1 {display:flex; align-items:center; gap:24px; margin-bottom:24px; white-space: nowrap;}
.netstal-medical h1 {font-size: 44px; letter-spacing: -1px;}
.netstal-preforms .img-area .card-body {display:block; width:100%; height:220px; background:url(../images/product/netstal/img-preforms.png) no-repeat 0 0; background-size:cover; border-radius:24px;}
.netstal-closures .img-area .card-body {display:block; width:100%; height:220px; background:url(../images/product/netstal/img-closures.png) no-repeat 0 0; background-size:cover; border-radius:24px;}
.netstal-packaging .img-area .card-body {display:block; width:100%; height:220px; background:url(../images/product/netstal/img-packaging.png) no-repeat 0 0; background-size:cover; border-radius:24px;}
.netstal-medical .img-area .card-body {display:block; width:100%; height:220px; background:url(../images/product/netstal/img-medical.png) no-repeat 0 20%; background-size:cover; border-radius:24px;}

/* corvaglia 캡 금형 */
.product.corvaglia .closure-moulds .row .col {width:25%; height:320px;}
.product.corvaglia .closure-moulds .row .col .card.card-flip {cursor:pointer;}
.product.corvaglia .closure-moulds .row .col .card.card-flip .card-body {text-align: center;}
.product.corvaglia .closure-moulds .row .col .card-flip-front {width:100%; height:100%; border-radius:36px; display:flex; align-items:flex-start; justify-content:center; text-align:center;}
.product.corvaglia .closure-moulds .row .col .card-flip-front .h1 {display:block; color:#fff; margin: 0 auto;}
.product.corvaglia .closure-moulds .row .col:nth-child(1) .card-flip-front {background:#e41869 url(../images/product/corvaglia/bg-cap.jpg) no-repeat center 100%; background-size: 100%;}
.product.corvaglia .closure-moulds .row .col:nth-child(2) .card-flip-front {background:#6e90a6 url(../images/product/corvaglia/bg-mold.jpg) no-repeat center 100%; background-size: 100%;}
.product.corvaglia .closure-moulds .row .col:nth-child(3) .card-flip-front {background:#eebf00 url(../images/product/corvaglia/bg-cap-production.jpg) no-repeat center 100%; background-size: 100%;}
.product.corvaglia .closure-moulds .row .col:nth-child(4) .card-flip-front {background:#95be09 url(../images/product/corvaglia/bg-cap-application.jpg) no-repeat center 100%; background-size: 100%;}
.product.corvaglia .closure-moulds .row .col .card-flip-back {width:100%; height:100%; padding:24px 0; border-radius:36px; display:flex; align-items:center; justify-content:center; text-align:center;}
/* .product.corvaglia .closure-moulds .row .col:nth-child(1) .card-flip-back {background-color: rgba(228, 24, 105, 0.1);}
.product.corvaglia .closure-moulds .row .col:nth-child(2) .card-flip-back {background-color: rgba(110, 144, 166, 0.1);}
.product.corvaglia .closure-moulds .row .col:nth-child(3) .card-flip-back {background-color: rgba(238, 191, 0, 0.1);}
.product.corvaglia .closure-moulds .row .col:nth-child(4) .card-flip-back {background-color: rgba(149, 190, 9, 0.1);} */
.product.corvaglia .closure-moulds .row .col .card-flip-back .card-body {display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 16px;}
.product.corvaglia .closure-moulds .row .col .card-flip-back .card-body h6 {margin-top: 8px;}
.product.corvaglia .closure-moulds .row .col .card-flip-back .card-body p {font-size:16px; line-height:1.3; font-weight:400; word-break:keep-all;}
.product.corvaglia .closure-moulds .row .col .card-body i {display:inline-block; width:80px; height:80px; border-radius:50%;}
.product.corvaglia .closure-moulds .row .col:nth-child(1) .card-flip-back .card-body i {background: url(../images/product/corvaglia/bg-cap.jpg) no-repeat center; background-size: cover}
.product.corvaglia .closure-moulds .row .col:nth-child(2) .card-flip-back .card-body i {background: url(../images/product/corvaglia/bg-mold.jpg) no-repeat center; background-size: cover}
.product.corvaglia .closure-moulds .row .col:nth-child(3) .card-flip-back .card-body i {background: url(../images/product/corvaglia/bg-cap-production.jpg) no-repeat center; background-size: cover}
.product.corvaglia .closure-moulds .row .col:nth-child(4) .card-flip-back .card-body i {background: url(../images/product/corvaglia/bg-cap-application.jpg) no-repeat center; background-size: cover}
.product.corvaglia .application .card {border:0; height:100%;}
.product.corvaglia .application .img-area {border-radius:24px; overflow:hidden; background-color:#eef4ec;}
.product.corvaglia .application .text-area h5 {margin-bottom:24px; white-space:nowrap; letter-spacing:-1px;}
.product.corvaglia .application .row [class^="col-"]:nth-child(1) .text-area {margin-top:24px;}
.product.corvaglia .application .row [class^="col-"]:nth-child(1) .img-area {height:100px; background-color:#eef4ec;}
.product.corvaglia .application .row [class^="col-"]:nth-child(1) .img-area img {width:auto; height:100%;}

.product.corvaglia .application .row [class^="col-"]:nth-child(2) .card-body {display:flex; flex-direction:row; align-items:center; gap:40px; color:#666;}
.product.corvaglia .application .row [class^="col-"]:nth-child(2) .img-area {width:240px; height:240px;}
.product.corvaglia .application .row [class^="col-"]:nth-child(2) .img-area img {width:100%; height:auto;}

.product.corvaglia .application .row [class^="col-"]:nth-child(3) .card-body {display:flex; flex-direction:row; align-items:center; gap:40px}
.product.corvaglia .application .row [class^="col-"]:nth-child(3) .img-area {width:240px; height:240px;}
.product.corvaglia .application .row [class^="col-"]:nth-child(3) .img-area img {width:100%; height:auto;}
.product.corvaglia .application .row [class^="col-"]:nth-child(3) .text-area {padding:0 24px;}

.product.corvaglia .application .row [class^="col-"]:nth-child(4) .card-body {display:flex; flex-direction:column; align-items:flex-start;}
.product.corvaglia .application .row [class^="col-"]:nth-child(4) .text-area {margin-top:24px;}
.product.corvaglia .application .row [class^="col-"]:nth-child(4) .img-area {width:100%; height:100px; background-color:#eef4ec;}
.product.corvaglia .application .row [class^="col-"]:nth-child(4) .img-area img {width:auto; height:100%;}
.product.corvaglia .neck-finish p {font-size:16px;}
.product.corvaglia .neck-finish .accordion-button {font-size:20px; font-weight:600;}
.product.corvaglia .neck-finish .accordion-body, 
.product.corvaglia .neck-finish .accordion-body > div > div {display:flex; flex-wrap:nowrap; align-items:flex-end; justify-content:flex-start; text-align:center;}
.product.corvaglia .neck-finish .accordion-body {gap: 40px;}
.product.corvaglia .neck-finish .accordion-body > div > div {gap: 16px}
.product.corvaglia .neck-finish .accordion-body > div {display:flex; flex-direction:column;}
.product.corvaglia .neck-finish .accordion-body .tag {padding: 4px 16px; border-radius: 100px;}

/* 프리폼 금형 (Preform Molds) */
.preform-molds .title-wrap {position:relative; display:flex; align-items:flex-start; justify-content:center; gap:40px; flex-wrap:nowrap;}
.preform-molds .title-wrap .img-area {position: relative; top:-40px;}
.preform-molds .title-wrap img {width:160px;}
/* .preform-molds .title-wrap .text-area {padding-left:240px;} */
.preform-molds .row .img-area img {border-radius:36px; overflow:hidden;}

/* 튜브용기(Packsys Global) */
.cosmetic-tubes .swiper {margin-top: 80px;}

/* 검사시스템(Intravis) */
.product.intravis .img-area {position:relative; width:100%; height:600px; margin-bottom: 60px; display:block; border-radius:36px; overflow:hidden;}
.product.intravis .intravis-preform .img-area {background:url(../images/product/intravis/img-intravis-preform.jpg) no-repeat center 15%; background-size:cover;}
.product.intravis .intravis-capsClosures .img-area {background:url(../images/product/intravis/img-intravis-capsClosures.jpg) no-repeat center 15%; background-size:cover;}
.product.intravis .intravis-bottleContainer .img-area {background:url(../images/product/intravis/img-intravis-bottleContainer.jpg) no-repeat center 15%; background-size:cover;}
.product.intravis .intravis-decorationLabeling .img-area {background:url(../images/product/intravis/img-intravis-decorationLabeling.jpg) no-repeat center 100%; background-size:cover;}
.product.intravis .intravis-barrierLayer .img-area {background:url(../images/product/intravis/img-intravis-barrierLayer.jpg) no-repeat center 30%; background-size:cover;}
.product.intravis .intravis-barrierLayer .swiper .card-img-top img {width: 120%;}

/* 섬광 살균장치 (Claranor) */
.product.claranor .sec_board .bot .tab_con .con .list .swiper-slide{width:220px;}
.product.claranor .sec_board .bot .tab_con .con .list .swiper-slide a{border-radius:24px;background-color:var(--gray-200);}

/* 첨가제-퍼징 컴파운드(Ultraplast) */
.product.ultraPlast .section1 .row .col {width:33.3333%; height:320px;}
.product.ultraPlast .section1 .row .col .card.card-flip {cursor:pointer;}
.product.ultraPlast .section1 .row .col .card.card-flip .card-body {text-align: center;}
.product.ultraPlast .section1 .row .col .card-flip-front {width:100%; height:100%; border-radius:36px; display:flex; align-items:center; justify-content:center; text-align:center;}
.product.ultraPlast .section1 .row .col .card-flip-front .h1 {display:block; color:#fff; margin: 0 auto;}
.product.ultraPlast .section1 .row .col:nth-child(1) .card-flip-front {background: url(../images/product/ultrasystem/img-injparts.jpg) no-repeat center 100%; background-size: cover;}
.product.ultraPlast .section1 .row .col:nth-child(2) .card-flip-front {background: url(../images/product/ultrasystem/img-blowMolding.jpg) no-repeat center 100%; background-size: cover;}
.product.ultraPlast .section1 .row .col:nth-child(3) .card-flip-front {background: url(../images/product/ultrasystem/img-pipes.jpg) no-repeat center 100%; background-size: cover;}
.product.ultraPlast .section1 .row .col .card-flip-back {width:100%; height:100%; padding:24px 0; border-radius:36px; display:flex; align-items:center; justify-content:center; text-align:center;}
.product.ultraPlast .section1 .row .col .card-flip-back .card-body {display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 16px;}
.product.ultraPlast .section1 .row .col .card-flip-back .card-body h6 {margin-top: 8px; line-height:1.2;}
.product.ultraPlast .section1 .row .col .card-flip-back .card-body p {font-size:16px; line-height:1.4; font-weight:400; word-break:keep-all;}
.product.ultraPlast .section1 .row .col .card-body i {display:inline-block; width:80px; height:80px; border-radius:50%;}
.product.ultraPlast .section1 .row .col:nth-child(1) .card-flip-back .card-body i {background: url(../images/product/ultrasystem/img-injparts.jpg) no-repeat center 0; background-size: cover;}
.product.ultraPlast .section1 .row .col:nth-child(2) .card-flip-back .card-body i {background: url(../images/product/ultrasystem/img-blowMolding.jpg) no-repeat center; background-size: cover;}
.product.ultraPlast .section1 .row .col:nth-child(3) .card-flip-back .card-body i {background: url(../images/product/ultrasystem/img-pipes.jpg) no-repeat center; background-size: cover;}
.product.ultraPlast .section2 .section-title {text-align:center; margin-bottom:60px;}
.product.ultraPlast .section2 i.icon {display:inline-block; width:80px; height:80px; border-radius:50%; background-size:contain; margin-bottom:24px;}
.product.ultraPlast .section2 i.icon.icon1 {background:url(../images/product/ultrasystem/icon-1.svg) no-repeat 0 0;}
.product.ultraPlast .section2 i.icon.icon2 {background:url(../images/product/ultrasystem/icon-2.svg) no-repeat 0 0;}
.product.ultraPlast .section2 i.icon.icon3 {background:url(../images/product/ultrasystem/icon-3.svg) no-repeat 0 0;}
.product.ultraPlast .section2 i.icon.icon4 {background:url(../images/product/ultrasystem/icon-4.svg) no-repeat 0 0;}
/* 프로그래스바 */
.progress-container {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 300px;
    max-width: 600px;
    margin: 40px auto 0;
    /* padding: 30px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); */
}

.progress-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.group-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--dark);
    text-align: center;
}

.progress-bars {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    height: 240px;
}

.progress-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
}

.progress-bar {
    width: 40px;
    height: 200px;
    background: #ecf2f9;
    border-radius: 25px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.progress-fill {
    width: 100%;
    position: absolute;
    bottom: 0;
    border-radius: 25px;
    height: 0%;
    transition: height 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 각 항목별 색상 */
.progress-fill.material {
    /* background: linear-gradient(180deg, #7bc96f 0%, #5b9845 50%, #4a7d3a 100%); */
    background: #94E9B8;
}

.progress-fill.maintenance {
    /* background: linear-gradient(180deg, #ED3241 0%, #FF616D 50%, #FFB5A7 100%); */
    background: #FFB5A7;
}

.progress-fill.cost {
    /* background: linear-gradient(180deg, #4C91FF 0%, #92BFFF 50%, #C1F0F6 100%); */
    background: #92BFFF;
}

.progress-value {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    background: white;
    padding: 8px 12px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid #ddd;
    white-space: nowrap;
    display: block;
    margin-bottom: 15px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    position: relative;
}

/* 말풍선 꼬리 */
.progress-value::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid white;
}
/* 말풍선 꼬리의 테두리 */
.progress-value::before {
    content: '';
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid #ddd;
}
.progress-value.show{opacity:1;transform:translateY(0);}
.progress-label{font-size:11px;color:#666;text-align:center;margin-top:5px;white-space:nowrap;display:none;}
/* 범례 */
.legend{display:flex;justify-content:center;gap:25px;margin:30px 0;}
.legend-item{display:flex;align-items:center;gap:8px;font-size:16px;color:var(--gray-800);}
.legend-dot{width:14px;height:14px;border-radius:50%;}
.legend-material{background:#94E9B8;}
.legend-maintenance{background:#FFB5A7;}
.legend-cost{background:#92BFFF;}
/* 호버 효과 */
.progress-bar:hover .progress-fill{filter:brightness(1.1);}
.progress-bar:hover .progress-value{transform:translateX(-50%) scale(1.1);background:#333;color:white;}
.product.ultraPlast .section3 img {height:260px}
.product.ultraPlast .section4 .h6 {font-size: 20px;}

/* M.Tanner */
.product.MTanner .section1 article.row {border:0;}
.product.MTanner .section1 article.row + article.row {margin-top:60px;}
.product.MTanner .section1 .list-unstyled li strong {width:180px;}
/* End: 제품소개 */

@media screen and (max-width: 1400px) { 
    #container {padding:0;} 
    .container-inner {width:100%;}
} /* 1400*/

@media screen and (max-width: 1024px) {  
    .container-inner {padding:0 24px;}
} /* 1024*/

@media screen and (max-width: 768px) {  
    #wrapper section {padding:40px 0}
    .container-inner {padding:0 20px;}
} /* 768*/