/* 여기어때 잘난체 */
@font-face {
    font-family: 'yg-jalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* 지마켓산스 */
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* 키친 슬라이드 */
.kitchen-slide{margin-bottom: 2rem;}
.kitchen-card{background: linear-gradient(to top, #f5f5f5 0, #f5f5f5 160px, transparent 70px); border-radius: 1rem; overflow: hidden; margin: 0 0.5rem; padding: 1.5rem; transition: 0.2s;}
.kitchen-card>img{height: 140px; width: auto; margin: auto;}
.kitchen-card>h6{font-size: 1.4rem; margin-top: 1.5rem;font-family: 'GmarketSansMedium';}
.kitchen-card>p{font-size: 1.1rem; margin-top: 0.3rem;}
.kitchen-card.slick-center{background: linear-gradient(to top, #eda000 0, #eda000 160px, transparent 70px); color: #fff;}
.kitchen-slide .slick-arrow{position: absolute; top: 25%; font-size: 0; background-color: transparent; z-index: 2;}
.kitchen-slide .slick-prev{left: 0;}
.kitchen-slide .slick-prev::after{content: ''; display: block; width: 4rem; height: 4rem; background-image: url('/images/icon/left.svg');}
.kitchen-slide .slick-next{right:0;}
.kitchen-slide .slick-next::after{content: ''; display: block; width: 4rem; height: 4rem; background-image: url('/images/icon/right.svg');}


.kitchen-wrap{overflow: hidden;}


.kitchen-wrap h1 {font-size: 3.8rem; color: #2a2a2a; font-weight: 900;font-family: 'yg-jalnan'; margin: 3rem auto;}
.kitchen-wrap h1.ani {animation: tracking-in-contract-bck 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;}
.kitchen-wrap h3 {font-size: 3rem; color: #444444; font-weight: 900;font-family: 'yg-jalnan';}
.kitchen-wrap h4 {font-size: 2.5rem; color: #888888;font-weight: 800; line-height: 3rem; position: relative;}
.kitchen-wrap h4.red {color: #d32229; font-weight: 700; font-size: 1.8rem; width: max-content;line-height: 3.2rem;}

.kitchen-wrap h4.red.ani::before {width: 100%; transition: 0.3s; transition-delay: 0.6s;}
.kitchen-wrap h5 {font-size: 2.25rem; color: #fff; font-weight: 900; line-height: 1.2;}

@keyframes tracking-in-contract-bck {
    0% {
        letter-spacing: 1em;
        -webkit-transform: translateZ(400px);
                transform: translateZ(400px);
        opacity: 0;
    }
    40% {
        opacity: 0.6;
    }
    100% {
        -webkit-transform: translateZ(0);
                transform: translateZ(0);
        opacity: 1;
    }
}
.sub_visual_wrap .sub-parallax {background-position: 50%; background-repeat: no-repeat;}

.mw-1080 {max-width: 1080px; margin: auto; position: relative; z-index: 1;}
.mw-1280 {max-width: 1280px; margin: auto; position: relative; z-index: 1;}
.m-1080 {display: none;}
.w-100 {width: 100%;}
.point-box {border-radius: 60px; background-color: #eb9e00; color: #fff; padding: 5px 25px; font-size: 1.5rem; font-weight: bold; width: fit-content; margin-bottom: 20px;font-family: 'GmarketSansMedium';}
.tab-title {text-align: center; padding: 40px 0;}
.text-center {text-align: center;}

.grid {display: grid;}
ul.grid-sys2 {grid-template-columns: repeat(4, 1fr);}
li.r-none {border-right: none !important;}
li.col2-2 {grid-column: 2 / span 2;}

.flex {display: flex;}
.f-direction-col {flex-direction: column;}
.f-direction-row {flex-direction: row;}
.f-align-center {align-items: center;}
.f-align-baseline {align-items: baseline;}
.f-align-flex-start {align-items: flex-start;}
.f-align-flex-end {align-items: flex-end;}
.justify-between {justify-content: space-between;}
.justify-center {justify-content: center}
.flex-end {justify-content: flex-end;}
.flex-start {justify-content: flex-start;}
.flex-wrap {flex-wrap: wrap;}

ul li .hr {display: inline-block; width: 180px; height: 1px; background-color: #fff; margin: 10px auto;}

.tab01 {margin: 0 auto;}
.tab01 .tab01Swiper {max-width: 1280px; position: relative; margin: 2rem auto 10rem;}
.tab01 .tab01Swiper .swiper {max-width: 1080px;}
.tab01 .swiper .swiper-slide {padding: 5px;}
.tab01 .swiper .swiper-slide a {position: relative; display: inline-flex; flex-direction: column; align-items: center; background-color: #ebeae6; padding: 25px 5px; margin-top: 50px; border-radius: 15px; width: 100%; transition: all 0.4s; transition-delay: 0.2s;}
.tab01 .swiper .swiper-slide a img {width: auto; height: 100%; position: relative; max-height: 115px; margin-top: -50px;}
.tab01 .swiper .swiper-slide a .a-group {text-align: center;}
.tab01 .swiper .swiper-slide a .a-group p {color: #888888; font-weight: 900; font-size: 1.2rem;}
.tab01 .swiper .swiper-slide a .a-group span {font-size: 0.9rem;}

.tab01 .swiper.tab01-top .swiper-wrapper {margin-bottom: 25px;}
.tab01 .swiper.tab01-top .swiper-slide a .a-group p {font-size: 1.2rem; font-weight: 700;}
.tab01 .swiper.tab01-top .swiper-slide a .a-group span {font-size: 0.75rem;}
.tab01 .swiper.tab01-top .swiper-slide a .a-group p.ani-fade {display: none;}
/* .tab01 .swiper.tab01-top .swiper-slide-next a img,
.tab01 .swiper.tab01-top .swiper-slide-next a div,
.tab01 .swiper.tab01-top .swiper-slide-active a img,
.tab01 .swiper.tab01-top .swiper-slide-active a div {opacity: 0;} */


.tab01 .absolute {position: absolute; max-width: 350px; top: 50%; left: calc(50% - 50px); transform: translateY(calc(-50% - 40px)); z-index: 1;}
.tab01 .swiper.tab01-thumbs a img {max-height: 215px;}
.tab01 .swiper.tab01-thumbs .swiper-slide {padding: 0;}
.tab01 .swiper.tab01-thumbs .swiper-slide a {background-color: #eda000; margin-top: 100px; max-height: 280px;}
.tab01 .swiper.tab01-thumbs .swiper-slide a img {opacity: 0; margin-top: -100px;}
.tab01 .swiper.tab01-thumbs .swiper-slide a .a-group {display: flex; flex-direction: column; align-items: center;}
.tab01 .swiper.tab01-thumbs .swiper-slide a .a-group p {font-size: 1.6rem; font-weight: 600;}
.tab01 .swiper .swiper-slide a .a-group p.ani-fade {font-size: 1.4rem; opacity: 0.6; position: relative;}
.tab01 .swiper .swiper-slide a .a-group p.ani-fade::before {content: ""; position: absolute; width: 100%; height: 1px; background-color: #fff; bottom: 5px;}
.tab01 .swiper.tab01-thumbs .swiper-slide a {background-color: #eda000; width: 100%;}
.tab01 .swiper.tab01-thumbs .swiper-slide a .a-group p,
.tab01 .swiper.tab01-thumbs .swiper-slide a .a-group span {color: #fff;}
.tab01 .swiper.tab01-thumbs .swiper-slide a .a-group span {font-size: 0.98rem; font-weight: 300; line-height: 1.2rem;}

.tab01 .swiper.tab01-thumbs .swiper-slide-active a img {opacity: 1;}

.tab01 .tab01Swiper .swiper-button-next:after, 
.tab01 .tab01Swiper .swiper-button-prev:after {display: none;}
.tab01 .tab01Swiper .swiper-button-next, 
.tab01 .tab01Swiper .swiper-button-prev {background: none; width: fit-content; height: calc(100% - 115px); transform: translateY(calc(-50% + 37.5px));}
.tab01 .tab01Swiper .swiper-button-next {right: 0;}
.tab01 .tab01Swiper .swiper-button-prev {left: 0;}
.tab01 .tab01Swiper .swiper-button-next img, 
.tab01 .tab01Swiper .swiper-button-prev img {width: auto; height: 100%;}

.bg-1 {position: absolute; right: 0; top: 80px; width: calc(100% + 50rem); transform: translateX(calc(100% - 42vw));}

.tab02 {padding-top: 3rem; position: relative;}
.tab02 .img-txt {max-width: 25vw; margin-top: 5rem; margin-bottom: 5rem;}


.tab02 .img-section {display: grid; grid-template-columns: 3fr 4fr; align-items: center; justify-content: center; gap: 0 3rem;}

.tab02.system03 .bubble {max-width: 140px; width: 100%; position: absolute; bottom: calc(50% - 300px); left: 25%; z-index: 1;}
.tab02.system03 .bubble.one {max-width: 60px; left: 20%; bottom: calc(50% - 220px);}
.tab02.system03 .bubble .minimal {box-shadow: 2px 2px 5px rgba(0,0,0,0.15); background: #fff; display: grid; align-content: center; justify-content: center; border-radius: 5px;}
[data-lit-hue] {position: relative;}
.tab02.system03 .bubble span.lit {border-radius: 50%; position: absolute; pointer-events: none; transform: translate(-50%, -50%); animation: blow1 2s ease-in infinite; transition: all 400ms ease;}
.tab02.system03 .bubble.one span.lit {animation: blow2 3s ease-in infinite; transition: all 400ms ease;}
@keyframes blow1 {
    0% {
        transform: translate(-50%, -50%) scale(0.1);
        opacity: 0;
    }
    10% {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -80vh);
        opacity: 0;
    }
}

@keyframes blow2 {
    0% {
        transform: translate(-50%, -50%) scale(0.1);
        opacity: 0;
    }
    10% {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50vh);
        opacity: 0;
    }
}

.tab02.system03 .mw-1080 {z-index: 5;}
.tab02.system03 .img-section{margin: 0 6rem; grid-template-columns: 4fr 3fr;}
.tab02.system04 .img-section{width: 80%; margin: auto; gap: 6rem;}

.tab02.system05 .img-section {width: 80%; margin: auto; gap: 6rem; grid-template-columns: 1fr 2fr;}

.tab03 {position: relative; margin: 10rem auto;}
.tab03::before {content: ""; position: absolute; width: 100%; height: calc(100% - 10rem); background-color: #eda000; bottom: -2rem; left: 0;}
.tab03 > div {text-align: center; padding-bottom: 3rem;}
.tab03 > div video {border: 15px solid #2a2a2a;}
.tab03 > div h3 {padding-top: 3rem; color: #fff; margin-bottom: 20px; font-family: 'yg-jalnan';}
.tab03 > div > span {color: #fff; font-size: 1.35rem;}

.tab04 {max-width: 1280px;}
.tab04 .round {display: flex; align-items: center; gap: 5rem 60px; margin: 10rem 0; margin-left: -160px; width: auto;}
.tab04 .mask {width: 70%; position: relative;}
.tab04 .mask .effect {position: absolute; left: calc(100% - 180px); top: calc(100% - 250px); transform: scale(0.6); display: flex; align-items: center; justify-content: center; animation: bright 0.8s ease-in-out infinite;}
.tab04 .mask .effect span {position: absolute; display: block; width: 13.5vw; height: 13.5vw; border-radius: 50%; border: 1px solid #eda000;}
.tab04 .mask .effect span:nth-child(1) {width: 8vw; height: 8vw; border-width: 30px; opacity: .8;}
.tab04 .mask .effect span:nth-child(2) {width: 12vw; height: 12vw; border-width: 15px; opacity: .7;}


.tab04 .round.center {flex-direction: row-reverse; justify-content: space-between; margin: auto -160px auto auto;}
.tab04 .round.center .mask .effect {top: calc(100% - 150px); left: calc(100% - 355px);}
.tab04 .round.center .txt {transform: translateX(50px);}

.tab04 .round .txt {width: 50%; display: flex; flex-direction: column;} 
.tab04 .round h4 {font-family: 'yg-jalnan'; color: #444; margin-bottom: 20px; white-space: nowrap;}
.tab04 .round p {font-size: 1.4rem; display: inline-flex; gap: 0 5px; white-space: nowrap;}
.tab04 .round p::before {content: ""; display: inline-block; background-image: url(/images/kitchen/round-v.png); background-size: 100%; background-repeat: no-repeat; width: 20px; height: 20px; margin-right: 10px; margin-top: 12px; opacity: 1;}
.tab04 .round.ani p::before {opacity: 1;}
.tab04 .round p span {font-weight: 900; color: #eda000;}

.tab05 {margin: 0 auto; background-color: #2e2c2a; color: #fff; text-align: center; display: flex; flex-direction: column; align-items: center; position: relative;}
.tab05 h1 {color: #fff; padding: 8rem 0 2rem;}
.tab05 .circle {line-height: 2.5; font-size: 0.8rem;}

.tab05 .top {margin: 5rem 20px; max-width: 920px; position: relative;}
.tab05 .top img:first-child {border-radius: 1.5rem;}
.tab05 .top img:last-child {position: absolute; left: calc(50% - 40px); top: calc(50% + 260px); transform: translateY(-50%); max-width: 760px;}

.tab05 .ani {position: relative; z-index: 2; margin: 10rem auto 0; max-width: 860px; transform: translateX(60px);}
.tab05 .ani img:nth-child(n+2) {position: absolute; left: calc(50% - 235px); bottom: 20rem; max-width: 320px; opacity: 0;}
.tab05 .ani img:nth-child(n+2) {animation: skew 2.5s infinite ease-in-out; animation-delay: 0.5s;} 
@keyframes skew {
    0% {transform: scale(1) skew(0) translateY(0); opacity: 1;}
    25% {transform: scale(1.1) skew(5deg) translateY(-20px); opacity: 0;}
    50% {transform: scale(1) skew(0) translateY(0); opacity: 0;}
    100% {transform: scale(1) skew(0) translateY(0); opacity: 1;}
}
.bg-2 {width: 100%;}
.bg-2 img {position: absolute; bottom: -10rem; left: 0; z-index: 1;}

.tab06 {background-color: #eb9e00; margin: 0 auto; text-align: center; padding: 0 2rem; position: relative;}
.tab06 h1 {padding: 8rem 0 1rem;}

.tab06 .round {display: flex; align-items: center; padding: 4rem 0; gap: 0 15px;}
.tab06 .round .mask {position: relative; width: calc(75% - 160px);}
.tab06 .round.center {justify-content: flex-start; flex-direction: row-reverse}

.tab06 .round .txt {text-align: left; color: #fff; margin-top: 4.5rem; font-size: 2.5rem;}
.tab06 .round .txt h5 {position: relative; color: #fff; font-weight: 700; line-height: 1.4; padding: 1.5rem 0; z-index: 1; font-family: 'GmarketSansMedium';}
.tab06 .round .txt h5::before {content: ""; position: absolute; width: calc(100% + 220px); height: calc(100% - 20px); background-color: #2e2a29; z-index: -1; top: 10px; left: -100px; border-radius: 100px;}
.tab06 .round .txt p { font-size: 1.4rem; white-space: nowrap;}

.tab06 .round.center .txt {text-align: right; right: unset; left: 60px;}
.tab06 .round.center .txt h5::before {left: unset; right: -8rem;}

.tab06 .round.bottom .txt {margin-top: 5rem;}

.bg-3 {margin-top: -10rem;}

.tab07 {margin: 14rem auto; text-align: center;}
.tab07 h1 {color: #444444;}

.tab07 .border {display: block; width: 1px; height: 12rem; margin: 1rem auto; border-color: #fff0 !important;}
.tab07 .border::before {content: ""; display: inline-block; width: 1px; height: 0; background-color: #2a2a2a;}
.tab07 .border.ani::before {height: 100%; transition: 0.6s;}

.tab07 .point {margin: 0 auto 2rem; max-width: 1080px;}
.tab07 .point p,
.tab07 .point span {color: #eda000; font-size: 1.8rem; line-height: 1.2;font-family: 'yg-jalnan';}
.tab07 .point span {color: #444444; margin-top: 0.5rem;}
.tab07 .point-img {margin: 2rem auto 0; position: relative;}
.tab07 .point-bg {margin: auto; padding: 0 2rem;}
.tab07 .point-mask {mask-image: url('/images/kitchen/kitchen_section_09.png'); mask-repeat: no-repeat; position: relative;}
.tab07 .point-img > img {position: absolute; width: 100%; top: 50%; transform: translateY(-35%) translateX(calc(-50% + 3vw));}
.tab07 .point-img img.one-set {width: calc(100% + 10rem); left: calc(50% + 10rem / 1.5 + 10px);}
.tab07 .point-img .absolut-img {padding: 0 10rem; transform: translateY(-35%);}

.tab08 {text-align: center;}
.tab08 .product {position: relative; z-index: 1; display: flex; justify-content: center; margin: 5rem auto 20rem; max-width: 580px;}
.tab08 .product img:first-child {position: absolute; z-index: -1; transform: translateY(6rem) scale(1.1);}
.tab08 .product img:last-child {margin-left: 5rem;}

.tab09 {margin-top: 10rem;}
.tab09 .mw-1080 {background-color: #eb9e00; padding: 80px 140px 140px; max-width: unset;}
.tab09 h3 {line-height: 1.2;}
.tab09 p {font-size: 1.25rem;}
.tab09 h3,
.tab09 p {color: #fff; text-align: center;}
.tab09 .box {background-color: #fff; margin: 50px 0; padding: 50px; border-radius: 15px; position: relative;}

.tab09 .flex .icon {width: 80px; height: 80px; border-radius: 50%; background-color: #eb9e00; padding: 20px; position: relative; z-index: 10; bottom: unset;}
.tab09 .flex .icon img {width: auto; height: 100%;}
.tab09 .flex .in-txt {margin-left: 20px;}
.tab09 .flex .in-txt span {color: #eb9e00; font-weight: bold; font-size: 1.25rem; display: block; text-align: left;}
.tab09 .flex .in-txt p {color: #2e2c2a;font-family: 'GmarketSansMedium'; font-size: 1.85rem; letter-spacing: -2px; line-height: 1.4;}
.tab09 .flex p {color: #666;}
.tab09 .flex .flex > p {margin-top: 20px; letter-spacing: -1.5px; line-height: 1.2; font-size: 1.2rem;  height: 65px; text-align: left;}
.tab09 .flex .hr {display: inline-block; width: calc(100% + 12rem); height: 1px; margin-top: 25px;}
.tab09 .flex .hr::before {content: ""; display: flex; width: 100%; height: 1px; background-color: #eb9e00;}
.tab09 .in-img {max-width: 180px; position: absolute; right: calc(50% - 370px); bottom: -35px;}

.tab09 .box.point2 .hr {width: calc(100% + 2rem);}
.tab09 .box.point2 .in-img {max-width: 280px; right: calc(50% - 390px);}

.tab09 .box.point3 .in-img {max-width: 340px; right: calc(50% - 390px);}
.tab09 .box.point4 .in-img,
.tab09 .box.point5 .in-img,
.tab09 .box.point6 .in-img {max-width: 280px; bottom: 50%; transform: translateY(50%);}

/* .tab09 .box.point5 .in-img {bottom: calc(50% - 50px);} */

.tab10 {padding-bottom: 5rem;}
.tab10 .mw-1080 {position: relative; padding-top: 5rem;}
.tab10 .mw-1080::after,
.tab10 .mw-1080::before,
.tab10 ul.grid-sys2::before {content: "●"; position: absolute; color: #ededed; z-index: -1;}

.tab10 .mw-1080::before {font-size: 20rem; left: -10.5rem; top: -5rem;}
.tab10 .mw-1080::after {top: calc(50% - 2.5rem); transform: translateY(-50%); right: -35%; font-size: 52rem;}
.tab10 ul.grid-sys2::before {font-size: 30rem; bottom: -15rem; left: -12rem;}
.tab10 h3 {justify-content: center; gap: 0 10px;}
.tab10 h3 p span {position: relative;}
.tab10 h3 p span::before {content: "●"; position: absolute; width: 100%; font-size: 0; top: -5px; text-align: center; opacity: 1;}
.tab10 h3.ani p span::before {font-size: 10px; transition: 0.6s; transition-delay: 0.3s; animation: ball1 0.6s 0.1s cubic-bezier(0, 0, 0.18, 0.99) infinite alternate; opacity: 1; }
.tab10 h3.ani p span:nth-child(2)::before {animation-delay: 0.3s;}

@keyframes ball1 {
    to {margin-top: -10px;}
}

.tab10 ul.grid-sys2 {gap: 6rem 5px; margin: 6rem 0;}
.tab10 ul li {width: 100%; display: flex; flex-direction: column; align-items: center;}
.tab10 ul li .in-img {height: 260px; max-width: 160px; display: flex; align-items: end;}
.tab10 ul li .flex {text-align: center; margin-top: 20px;}
.tab10 ul li .flex p:first-child {font-size: 1.2rem; color: #2a2a2a;}
.tab10 ul li .flex p:last-child {line-height: 1.2; font-size: 1rem; color: #2a2a2a;} 
.tab10 ul li .flex .hr {background-color: #acacac;}

.tab11 .mw-1080 {position: relative; padding: 5rem;}
.tab11 .mw-1080 img:nth-child(n+2),
.tab11 .mw-1080 .in-img4 img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 55%;}
.tab11 .mw-1080 img:nth-child(2) {top: calc(50% - 10px);}
.tab11 .mw-1080 img:nth-child(3) {top: calc(50% - 120px); left: calc(50% + 20px);}
.tab11 .mw-1080 .in-img4::before {content: ""; top: calc(50% + 9px); left: calc(50% - 15px); position: absolute; width: calc(20% - 140px); height: 1px; background-color: #fff;}
.tab11 .mw-1080 .in-img4 img {top: calc(50% - 10px); left: calc(50% + 55px); mix-blend-mode: overlay;}

.tab12 {margin-top: 10rem;}
.tab12 .mw-1080 {transform: translateY(-120px);}
.tab12 > p {font-size: 1.25rem; color: #FFF;font-family: 'GmarketSansMedium';}
.tab12 > p,
.tab12 .box {background-color: #eb9e00; margin-top: -20px; position: relative; z-index: 1; padding: 1rem; width: 1080px; margin: auto;}
.tab12 .box h3 {text-align: center; padding-top: 40px; color: #fff; display: flex; justify-content: center}
.tab12 ul.grid {padding: 50px 50px 80px; gap: 80px 25px;}
.tab12 ul li {width: 100%; color: #fff; text-align: center;}
.tab12 ul li .flex {margin-top: 10px;}
.tab12 ul li .flex p:first-child {font-weight: bold; font-size: 22px;}
.tab12 ul li .flex p:last-child { font-size: 15px; line-height: 1.4; word-break: auto-phrase;}
.tab12 ul li .flex .hr {opacity: .4;}

.tab13 {margin-bottom: 10rem;}
.tab13 .img-set {display: flex; align-items: center; margin: 0 120px; transform: translateX(-20px);}
.tab13 .img-set img {margin-right: -40px;}
.tab13 > h3 {margin: 4rem 0;}
.tab13 .grid-table {grid-template-columns: 250px 1fr;}
.tab13 .grid-table li {font-weight: bold; border: 1px solid #ddd; margin: -1px -1px 0 0; padding: 10px 20px; font-size: 1.2rem;}
.tab13 .grid-table li:nth-child(2n) {font-weight: normal;border-right: none;}
.tab13 .grid-table li:nth-child(odd) {border-left: none; text-align: center; letter-spacing: 5px;}
.tab13 .grid-table li span {letter-spacing: 0;}

.tab14 {margin: 0 auto 12rem;}
.tab14 .title {text-align: center;}
#sub_wrap .tab14 .title h3 {color: #c10f27; line-height: 1.2; padding: 0;  letter-spacing: -2px; font-size: 3.25rem;}
.tab14 .band {background-color: #c10f27; margin: 10px 0 0; padding: 90px 0 40px; position: relative; display: flex; align-items: center; justify-content: center; gap: 80px;}
.tab14 .band img {width: auto; height: 120px;}
.tab14 .band img:last-child {height: 160px; margin-top: -50px; padding: 0 25px;}
.tab14 .band .x-span {position: relative;}
.tab14 .band .x-span span {position: absolute; height: 120px; width: 4px; background-color: #fff; top: 50%; border-radius: 5px;}
.tab14 .band .x-span span:first-child {transform: translateY(-50%) rotate(-35deg);}
.tab14 .band .x-span span:last-child {transform: translateY(-50%) rotate(35deg);}
.tab14 .photo {max-height: 100vh; overflow: hidden; display: flex; align-items: center; position: relative;}

.tab15 {display: flex; flex-direction: column; align-items: center;}
.tab15 .box {gap: 0 60px; max-width: 920px; width: 100%; margin: 80px 0;}
.tab15 .box .flex {width: calc(100% / 3 - 30px); gap: 10px 0;} 
.tab15 .box .flex .img {max-height: 240px; width: auto; display: flex; justify-content: center;}
.tab15 .box .flex .img img {width: 80%; height: auto;}
.tab15 .box .flex:last-child img {padding: 20px;}
.tab15 .box .flex p {color: #eb9e00; font-family: 'GmarketSansMedium'; font-size: 1.5rem;}
.tab15 .box .flex span {text-align: center; line-height: 1.2; white-space: nowrap; font-size: 1.1rem;}

.tab16 {display: flex; flex-direction: column; align-items: center; padding-bottom: 6rem;}
.tab16 h3 p {color: #eb9e00;}
.tab16 .grid.table {grid-template-columns: 0.4fr 1fr 1fr; width: 100%; max-width: 840px; margin: 35px 0; border-top: 2px solid #666; border-bottom: 2px solid #666;}
.tab16 ul li {font-size: 1rem; text-align: center; padding: 10px; border-right: 1px solid #c0c0c0; border-bottom: 1px solid #c0c0c0; margin: -1px -1px 0 0; align-content: center; word-break: auto-phrase;}
.tab16 ul li.li-title {background-color: #ededed;}
.tab16 ul li.li-title.r-none {color: #eb9e00;}
.tab16 ul li.li-footer {/*background-color: #eb9e00;*/ position: relative; color: #fff; z-index: 1;}
.tab16 ul li.li-footer::before {content: ""; position: absolute; background-color: #eb9e00; width: 100%; height: 100%; left: 0; top: 1px; z-index: -1; border-right: 1px solid #c0c0c0;}
.tab16 ul li.li-footer.b-bor::before {border-bottom: 1px solid #c9911b;}
.tab16 ul li.li-footer:last-child {color: #fdff64;}
.tab16 ul li.li-title,
.tab16 ul li.li-footer {font-weight: bold;}
.tab16 ul li.c10f27 {color: #c10f27;}
.tab16 .img-set {max-width: 680px; width: 100%; position: relative; margin-top: 3rem;}
.tab16 .img-set img:last-child {position: absolute; bottom: -80px; left: 0;}
.tab16.system05 .img-set img:last-child {bottom: -40px;}

.tab16.clone .grid.table {grid-template-columns: 0.4fr 0.6fr 1fr;}
.tab16.clone .img-set img:nth-child(2) {position: absolute; left: 0; top: 0;}
.tab16.clone .img-set img:last-child {max-width: 50%; left: 50%; bottom: 0;}

.tab17 {display: flex; flex-direction: column; align-items: center;}
.tab17 h3 {text-align: center; line-height: 1.4; margin-bottom: 40px; max-width: 1080px;}
.tab17 h3 span {color: #eb9e00;}
.tab17 ul.box {grid-template-columns: repeat(2, 1fr); max-width: 1080px; background-color: #eb9e00; margin: 0;}
.tab17 ul.box li {color: #fff; max-height: 340px; overflow: hidden;}
.tab17 ul.box li.bg {margin: auto 2.5vw; display: inline-flex; flex-direction: column; justify-content: center;}
.tab17 ul.box li.bg p {font-size: 2rem; letter-spacing: -1px; transform: scaleY(1.15);font-family: 'GmarketSansMedium'; margin-bottom: 0.5rem;}
.tab17 ul.box li.bg span {font-size: 1.5rem;}

.tab18 h3 {text-align: center;}
.tab18 .product {position: relative; z-index: 1; display: flex; justify-content: center; margin: 5rem auto 13rem; max-width: 580px;}
.tab18 .product img:first-child {position: absolute; z-index: -1; transform: translateY(2rem) scale(1.1);}
.tab18 .product img:last-child{margin-top: 80px;}
.tab18.system04 .product img:last-child{margin-top: 0;}
.tab18 .grid-table {grid-template-columns: 180px 1fr; max-width: 760px; width: 100%; margin: 20px auto;}
.tab18 .grid-table li {padding: 10px 20px; border-right: 1px solid #c0c0c0; border-bottom: 1px solid #c0c0c0; margin: -1px -1px 0 0; font-size: 1.2rem;}
.tab18 .grid-table li:nth-child(-n+2) {border-top: 1px solid #c0c0c0;}
.tab18 .grid-table li:nth-child(odd) {/*background-color: #ededed;*/ position: relative; z-index: 1; align-content: center;}
.tab18 .grid-table li:nth-child(odd)::before {content: ""; position: absolute; width: 100%; height: 100%; z-index: -1; left: 0; top: 1px; background-color: #ededed; border-bottom: 1px solid #c0c0c0;}

.tab18.system05 .product {margin: 5rem auto;}

.tab19 {margin: 5rem auto;}
.tab19 h3 {text-align: center; line-height: 1.2;}
.tab19 .frame {background-color: #e2e2e2; padding: 50px 0; margin: 40px auto;}
.tab19 .frame > div.top,
.tab19 .frame > div.bottom {display: flex; align-items: center; justify-content: center; flex-direction: unset !important; gap: 20px 30px; position: relative;}
.tab19 .frame > div.top {z-index: 1;}
.tab19 .frame > div.bottom {z-index: 0; margin-top: 20px; flex-wrap: wrap;}
.tab19 .frame > div span {position: relative; max-width: 340px; z-index: 1; display: flex; justify-content: center; align-items: center; padding: 25px; cursor: pointer;}
.tab19 .frame > div span:last-child {z-index: 0;}
.tab19 .frame > div span::after,
.tab19 .frame > div span::before {content: ""; position: absolute; background-repeat: no-repeat; background-position-x: center; z-index: -1;}
.tab19 .frame > div span::before {background-image: url(/images/kitchen/frame_bg.jpg); background-size: calc(100% - 10px) 100%; width: 100%; height: 100%;}
.tab19 .frame > div span::after {background-image: url(/images/kitchen/frame_top.png); background-size: 100% 100%; width: 40%; height: 20%; z-index: 1; top: -10%;}
.tab19 .frame > div span img {width: 100%; user-select: none;}
.tab19 .frame > div span:hover {z-index: 1 !important;}
.tab19 .frame > div span:hover::before,
.tab19 .frame > div span:hover img {transform: scale(1.1); transition: 0.6s; z-index: 100;}
.tab19 .frame > div span:hover::after {opacity: 0;}

.tab20 {display: flex; flex-direction: column; align-items: center; margin-bottom: 4rem;}
.tab20 h3 {display: flex; gap: 0 10px;}
.tab20 h3 p {color: #eb9e00;}
.tab20 > p {font-size: 2rem;}
.tab20 .flex {text-align: center;}
.tab20 .flex > span {font-size: 1.6rem; margin-top: 1.5rem;}
.tab20 .flex > p {color: #eda000;font-size: 2.5rem;font-family: 'GmarketSansBold';}
.tab20 .flex.img-box {gap: 0 80px; margin-top: 5.5rem;}
.tab20 .flex.img-box div .point-box {background-color: #2e2a29; font-size: 1rem; font-weight: normal; margin: 20px auto; transform: translateX(8px);}
.tab20 .model {position: relative; margin: 20rem auto 5rem;}
.tab20 .model .flex {max-width: 280px; margin: 30px auto 0;}
.tab20 .model .graph {margin: auto; display: inline-flex; justify-content: center;}
.tab20 .model .graph .rod {position: absolute; top: -120px; background-color: #f4f4f4; height: calc(100% + 100px); width: 100px; border-radius: 40px 40px 0 0; overflow: hidden;}
.tab20 .model .graph .rod::before {content: ""; background-color: #535353; width: 100%; height: 0; display: inline-block; position: absolute; bottom: 0; left: 0; border-radius: 40px 40px 0 0;}
.tab20 .model .graph.right .rod::before {background-color: #eda000; height: 0;}
.tab20 .model .graph .rod p {position: absolute; left: 50%; transform: translateX(-50%) translateY(10px); bottom: 0; color: #fff; white-space: nowrap; font-size: 1.4rem;}
.tab20 .model .graph.right .rod p {bottom: 0;}
.tab20 .model .graph .point-box {background-color: #535353; font-size: 1rem; font-weight: normal; margin: 0 auto; transform: translateY(40px);}
.tab20 .model .graph.right .point-box {background-color: #eda000;}

.tab20 .model .graph.left.ani .rod::before {animation: upLeft 0.8s ease-in-out 1 both; animation-delay: 0.4s;}
.tab20 .model .graph.right.ani .rod::before {animation: upRight 0.8s ease-in-out 1 both; animation-delay: 0.4s;}

.tab20 .model .graph.left.ani .rod p {animation: upLeftP 0.8s ease-in-out 1 both; animation-delay: 0.4s;}
.tab20 .model .graph.right.ani .rod p {animation: upRightP 0.8s ease-in-out 1 both; animation-delay: 0.4s;}
@keyframes upLeft {
    0% {height: 0;}
    100% {height: 80%;}
}

@keyframes upLeftP {
    0% {bottom: 0;}
    100% {bottom: 70%;}
}

@keyframes upRight {
    0% {height: 0;}
    100% {height: 45%;}
}

@keyframes upRightP {
    0% {bottom: 0;}
    100% {bottom: 35%;}
}

.tab21 {display: flex; flex-direction: column; align-items: center; margin-bottom: 4rem;}
.tab21 h3 span {color: #eb9e00;}
.tab21 .img-set {max-width: 760px; width: 100%; height: 280px; display: flex; gap: 0 35px; background-color: #eda000; padding: 20px; margin-top: 30px; border-radius: 300px; position: relative; z-index: 1;}
.tab21 .img-set .in-img {width: 240px; height: 240px; overflow: hidden; border-radius: 50%;}
.tab21 .img-set .in-img img {width: auto; height: 100%;}
.tab21 .img-set:last-child .in-img img {transform: translate(-25%, -15%); height: 120%;}
.tab21 .img-set .in-txt {display: flex; flex-direction: column; justify-content: center; color: #fff;}
.tab21 .img-set .in-txt p {font-size: 1.8rem; margin-bottom: 15px;font-family: 'GmarketSansMedium';}
.tab21 .img-set .in-txt span {position: relative; font-size: 1.4rem; line-height: 1.4;}
.tab21 .img-set .in-txt span::before {content:""; display: inline-block; background-image: url(/images/kitchen/round-v.png); background-size: 100%; background-repeat: no-repeat; width: 18px; height: 18px; margin-right: 10px; vertical-align: middle; filter: brightness(10) grayscale(1);}

.tab22 {display: flex; flex-direction: column; align-items: center;}
.tab22 h3 {display: flex; gap: 0 5px;}
.tab22 h3 p {color: #eb9e00;}
.tab22 .img-box .cls-1{fill:none;}
.tab22 .img-box .cls-2{fill:#eda000; stroke-width: 0;}
.tab22 .img-box .cls-3{clip-path:url(#clip-path);}
.tab22 .img-box .cls-4{fill:url(#gr_33);}

.tab22 .img-box {gap: 0 20px; align-items: flex-end; justify-content: space-around; width: 100%; max-width: 720px; margin-top: 4rem;}
.tab22 .img-box.absol,
.tab22 .img-box.twin {position: relative;}
.tab22 .img-box.twin img {width: 45%;}
.tab22 .img-box.twin .point {position: absolute; top: 0; right: 0; width: calc(100% - 260px); transform: rotate(-10deg) scale(0); transform-origin: center left; z-index: 1;}
.tab22 .img-box.twin.ani .point {transform: rotate(-10deg) scale(1); transform-origin: center left; transition: 0.6s; transition-delay: 0.6s;}
.tab22 .img-box.twin .point #svg-img {width: 100%;}
.tab22 .img-box.absol img:last-child {position: absolute; animation: bright 0.8s ease-in-out infinite;}
@keyframes bright {
    0% {filter: brightness(1);}
    50% {filter: brightness(1.4);}
}
.tab22 .img-box .txt p {font-size: 1.6rem;}
.tab22 > .txt {text-align: center; margin: 2rem 0; display: flex; flex-direction: column; color: #444;}
.tab22 > .txt p {font-size: 2rem; padding-bottom: 20px;font-family: 'GmarketSansMedium';}
.tab22 > .txt > span {font-size: 1.6rem; font-weight: bold; line-height: 1.2; display: flex; align-items: baseline; gap: 0 5px;}
.tab22 > .txt > span::before {content:""; display: inline-block; background-image: url(/images/kitchen/round-v.png); background-size: 100%; background-repeat: no-repeat; width: 18px; height: 18px; margin-right: 10px; vertical-align: middle; filter: brightness(0.5) grayscale(1); opacity: 1;}
.tab22 > .txt > span:has(.ani)::before {opacity: 1; transition: 0.6s; transition-delay: 0.4s;}
.tab22 > .txt > span span {color: #eb9e00;}
.tab18.system04 .product {margin: 5rem auto;}

.tab23{margin-top: 5rem;}
.tab23 h3 {text-align: center;}
.tab23 h3 span { color: #eb9e00;}
.tab23 p {text-align: center; line-height: 1.2; font-size: 1.65rem; margin-top: 30px;}
.tab23 .img-box {position: relative; margin-bottom: 10rem;}
.tab23 .img-box img:nth-child(n+2) {position: absolute;}
.tab23 .img-box img:nth-child(2) {left: 0; bottom: 0;}
.tab23 .img-box img:nth-child(3) {right: 0;  bottom: 0;}

.tab15.system05 .box .flex p {font-size: 1.8rem; margin-top: 20px;}
.tab15.system05 .box .flex span {letter-spacing: -1px; line-height: 1.4; font-size: 1.1rem;}
.tab15.system05 .box .flex:last-child img {padding: 0;}

.tab16.system05 h3 span {color: #eb9e00;}
.tab16.system05 .grid.table {grid-template-columns: 0.4fr 1fr 1fr 1fr;}
.tab16.system05 .grid.table li {border-right: none;}

.tab24 {text-align: center;}
.tab24 h3 {margin-bottom: 40px; padding-top: 10rem;}
.tab24 h3 span {color: #eb9e00;}
.tab24 p {font-weight: bold; font-size: 1.6rem; display: flex; align-items: center; justify-content: center;}
.tab24 img {max-width: 640px; transform: translateX(-80px); margin-top: 80px;}
.tab24 span.square {position: relative; width: 23px; height: 23px; display: inline-block; border: 2px solid #2e2a29; margin-right: 10px;}
.tab24 span.square::before {content: ""; position: absolute; background-image: url(/images/kitchen/round-v.png); background-size: 100%; background-repeat: no-repeat; width: 100%; height: 100%; left: 4px; transform: scale(1.4);}

.tab19.system05 h3 span {color: #eb9e00; word-break: keep-all;}
.tab19.system05 .frame > div.top {flex-wrap: wrap; max-width: 1080px; margin: auto;}
.tab19.system05 .frame > div span:nth-child(n+4) {z-index: 0;}

.tab18.system05 .product img:first-child {transform: translateY(3rem) scale(0.85);}

.tab17.system05 h3 span {color: #eb9e00}

div.bottom {background-color: #3d3d3d; margin: 0; padding: 5.5rem 0; text-align: center; transition: 0.4s;}
div.bottom:hover {background-color: #eb9e00;}
div.bottom:hover .txt span{color: #444;}
div.bottom p {font-size: 2.2em; color: #fff; font-family: 'yg-jalnan'; cursor: context-menu;}
div.bottom span {font-size: 1.4rem; color: #fff; cursor: context-menu; word-break: auto-phrase;}

/*이미지 클릭 zoom 설정*/
.zoom-overlay {display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #00000099; justify-content: center; align-items: center; z-index: -1; opacity: 0;}
.zoom-overlay img {max-height: calc(100vh - 100px); height: 100%; width: auto; margin: auto; display: block; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);}
.zoom-overlay.active {z-index: 1000; opacity: 1;}
.zoom-overlay .nav-button {position: absolute; top: 50%; transform: translateY(-50%); font-size: 2rem; color: white; background: rgba(0, 0, 0, 0.5); border: none; cursor: pointer; z-index: 1001; padding: 10px 20px; display: none; /* 기본적으로 숨김 */}
.zoom-overlay.active .nav-button {display: block; /* 줌 상태에서만 보임 */}
.zoom-overlay .prev {left: 15%;}
.zoom-overlay .next {right: 15%;}
.zoom-overlay > div {opacity: 0;}
.zoom-overlay .zoom-set {position: relative; max-height: calc(100% - 100px); display: flex; align-content: center; justify-content: center;}
.zoom-overlay .zoom-set .image-info {position: absolute; top: 6px; right: 5px; color: #2e2a29; font-size: 1.2rem; background-color: #fff; padding: 5px 3rem 5px 20px; border-radius: 60px;}
.zoom-overlay .zoom-set .image-x {position: absolute; top: 10px; right: 10px; cursor: pointer; opacity: 0.6;}
.zoom-overlay .zoom-set .image-x:hover {opacity: 1;}
.zoom-overlay .zoom-set .image-x::before {display: inline-block; content: ""; background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23eb9e00' xmlns='http://www.w3.org/2000/svg'><path d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293z'/></svg>"); background-repeat: no-repeat; background-size: 100%; width: 2rem; height: 2rem;}
.zoom-overlay.active > div {opacity: 1; transition: 0.4s; transition-delay: 0.1s;}

.media-640 {display: none;}

@media screen and (max-width:1280px) {
    h5 {font-size: 1.8rem;}
    .mw-1080,
    .mw-1280 {margin: auto 20px;}
    
    .tab01 .absolute {max-width: 420px; left: 50%; transform: translateY(calc(-50% - 40px)) translateX(-50%);}
    .tab01 .swiper .swiper-slide a img {max-height: 140px;}

    
    .bg-1 {transform: translateX(calc(100% - 65vw));}
    .tab02 .img-txt {max-width: 40vw;}

    .tab03 .mw-1080 {margin: auto;}
    .tab03{margin: 7rem auto;}
    .tab03 > div > span {font-size: 1.4rem;}

    .tab04 .mask .effect span:nth-child(1) {border-width: 20px;}
    .tab04 .mask .effect span:nth-child(2) {border-width: 8px;}

    .bg-2 img {bottom: -2.5rem;}
    .tab07{margin: 6rem auto;}
    .tab07 .point-img img.one-set {left: calc(50% + 10rem / 1.5 + 15px);}
    .tab08 .product img:first-child {transform: translateY(6rem); max-width: unset; width: 100%;}

    .tab02.system02 .img-section{width: 80%; margin: auto;}

    .tab05 .mw-1080,
    .tab09 .mw-1080,
    .tab10 .mw-1080,
    .tab11 .mw-1080,
    .tab12 .mw-1080,
    .tab13.mw-1080,
    .tab23.mw-1080 {margin: auto;}
    .tab13.mw-1080 {margin-bottom: 8rem;}

    .tab02.system03 {padding: 10rem 0 5rem;}
    .tab02.system03 .bg-1 {top: 15.5rem;}
    .tab02.system03 .mw-1080 .flex {flex-direction: column; align-items: baseline;}
    .tab02.system03 .img-txt {margin-left: 5rem; max-width: unset;}
    .tab02.system03 .img-txt p {background-color: #fff; border-radius: 30px; padding: 2px 8px; width: fit-content;}
    .tab02.system03 .img-section {}


    .tab14 {margin: 10rem auto 12rem;}
    .tab19.system05 .frame > div span {max-width: 300px;}
}

@media screen and (max-width:1080px){
    .m-1080 {display: inline-block;}
    .pc-1080 {display: none;}
    .kitchen-wraph4 {font-size: 32px;}
    .kitchen-wrap h4.red {font-size: 1.4rem;}
    .kitchen-wrap h1 {font-size: 3rem; word-break: auto-phrase;}

    .kitchen-wrap h1{font-size: 3rem;}
    .kitchen-wrap h3{font-size: 2.5rem;}
    .kitchen-wrap h4{font-size: 2rem;}

    ul.grid-sys2 {grid-template-columns: repeat(3, 1fr);}

    .tab-title {padding: 60px 0 40px;}

    .tab02.system04 .img-section img:last-child {left: calc(50% - 15.5vw); max-width: 480px;}
    .tab02.system05 .img-section{gap: 3rem; width: 84%;}

    .tab03 > div h3 {font-size: 34px;}
    .tab03 > div > span {font-size: 18px;}

    .tab04 .round {flex-direction: column; margin: 5rem 0; gap: 2.5rem 0; width: 100%;}
    .tab04 .round.top {margin: 0 0 8rem;}
    .tab04 .round.center {flex-direction: column; margin: 8rem 0;}
    .tab04 .mask {min-width: 720px;}
    .tab04 .txt {width: 100%;}
    .tab04 .round .txt{width: 100%; align-items: center;}
    .tab04 .mask img,
    .tab04 .round.center .mask img {transform: unset;}
    .tab04 .mask .effect,
    .tab04 .round.center .mask .effect {left: calc(50% + 200px); top: calc(50% - 70px); transform: translate(-50%, -50%) scale(1);}
    .tab04 .round.center .mask .effect {left: calc(50% + 30px); top: calc(50% + 10px);}
    .tab04 .mask .effect span:nth-child(1) {border-width: 15px;}
    .tab04 .round.center .txt {text-align: right; transform: unset;}
    .tab04 .round h4 {font-size: 2.4rem;}
    .tab04 .round p::before {margin-top: 8px; margin-right: 0; width: 15px; height: 15px;}
    .tab04 .round p {font-size: 18px; gap: 0 8px;}

    .tab05 h1 {font-size: 3rem; margin: 0 2rem;}
    .tab05 .top {max-width: 760px; margin: 3rem 20px;}
    .tab05 .top img:last-child {left: calc(50% - 30px); top: calc(50% + 26vw);}
    .tab05 .bottom {max-width: 640px; transform: translateX(50px);}
    .tab05 .bottom img:last-child {bottom: 15rem; left: calc(50% - 200px); max-width: 280px; margin: 5rem auto 0;}

    .bg-2 img {bottom: -1.5rem;}

    .tab06 .mw-1280 {margin: 0;}
    .tab06 .round,
    .tab06 .round.center {gap: 0; flex-direction: column;}
    .tab06 .round .mask {width: calc(100% - 160px); min-width: 640px;}
    .tab06 .round .txt h5 {font-size: 1.8rem;}
    .tab06 .round .txt h5::before {border-radius: 6px; transform: skewX(30deg); width: calc(100% + 300px); left: -150px;}
    .tab06 .round .txt p {font-size: 18px;}
    .tab06 .round.center .txt h5::before {right: 0; left: -150px; width: calc(100% + 300px); transform: skewX(-30deg);}
    .tab06 .round.bottom .txt h5::before {width: calc(100% + 180px); left: -90px;}
    .tab06 .round .txt,
    .tab06 .round.bottom .txt {width: 100%; margin-top: 1.5rem; display: flex; align-items: center; flex-direction: column;}
    .tab06 .round.center .txt {text-align: left;}
    .tab06 .round .txt h5 {width: fit-content;}
    .tab06 h1{padding: 5rem 0 1rem;}
    .tab07 .point-img img.one-set {left: calc(50% + 10rem / 1.5);}
    .tab07 .point p, 
    .tab07 .point span {font-size: 24px;}

    .tab08 .product {margin: 5rem auto 10rem;}
    .tab08 .product img:first-child {transform: translateY(3rem);}
    .tab08 .product img:last-child {max-width: unset; width: calc(100% - 2vw);}


    .tab09 {margin-top: 12rem;}
    .tab09 .mw-1080 {padding: 80px 100px 140px;}

    .tab11 .mw-1080 {margin: 0 20px;}
    .tab11 .mw-1080 img:nth-child(3) {top: calc(50% - 80px); left: 50%;}
    .tab11 .mw-1080 .in-img4 img {top: calc(50% + 20px); left: calc(50% + 4vw);}
    .tab11 .mw-1080 .in-img4::before {top: calc(50% + 35px); left: calc(50% - 40px); width: calc(23% - 115px);}
    .tab12 > p, .tab12 .box{width: 100%;}
    .tab12 h3 {font-size: 2.8rem;}
    .tab12 ul li .flex p:first-child {font-size: 1.2rem;}
    .tab12 ul li .flex p:last-child {font-size: 1rem;}

    .tab13.mw-1080 {margin: 0 20px 5rem;}
    .tab13 .img-set {margin: 0 auto; max-width: 650px; transform: translateX(-70px);}
    .tab13 .grid-table {grid-template-columns: 180px 1fr;}

    .tab02.system03 .bubble {left: 20%; max-width: 100px;}
    .tab02.system03 .bubble.one {left: 15%; max-width: 40px;}
    .tab02.system03 .img-txt {margin-left: 2rem;}

    .tab14 {margin: 5rem auto 12rem;}
    .tab14 .band {align-items: flex-end; padding: 75px 0 40px;}
    .tab14 .band img,
    .tab14 .band .x-span span {height: 80px;}
    .tab14 .band .x-span span {top: calc(50% - 35px);}
    .tab14 .band img:last-child {height: 120px; padding: 0 5px;}

    .tab15.system05 .box .flex span {letter-spacing: -1px; font-size: 15px;}

    .point-box {font-size: 1.2rem;}


    .tab17 ul.box li {height: 32vw;}

    .tab19 h3 {font-size: 42px;}
    .tab19 .frame > div span:hover {z-index: 0;}
    .tab19 .frame > div span:hover::before,
    .tab19 .frame > div span:hover img {transform: scale(1); transition: 0.6s; z-index: 1;}
    .tab19 .frame > div span:hover::after {opacity: 1;}

    .tab20 h3 {font-size: 36px;}
    .tab20 > p,
    .tab20 .flex > span,
    .tab22 > .txt > span {font-size: 16px;}
    .tab20 > p.txt-p {color: #666;}
    .tab20 > p.txt-p,
    .tab20 .flex > p,
    .tab22 > .txt p {font-size: 26px;}

    .tab20 .flex.img-box {gap: 0 30px;}
    .tab20 .flex.img-box img {width: 80%; margin: auto;}

    .tab20 .model {margin: 20rem auto 4rem;}
    .tab20 .flex.img-box div .point-box,
    .tab20 .model .graph .point-box {font-size: 15px;}
    .tab20 .model .graph .rod p {font-size: 18px;}

    .tab21 .img-set {height: 240px; max-width: 650px; gap: 0 20px;}
    .tab21 .img-set .in-img {width: 200px; height: 200px;}
    .tab21 .img-set .in-txt p {font-size: 26px;}
    .tab21 .img-set .in-txt span {font-size: 18px;}
    .tab21 .img-set .in-txt span::before {width: 15px; height: 15px;}

    .tab22 > .txt > span::before {width: 15px; height: 15px; margin-right: 0px; background-position: center;}
    .tab23{margin-top: 4rem !important;}
    .zoom-set {max-width: calc(100% - 40px); margin-left: 10px;}
    .zoom-overlay img {height: auto; width: 100%; max-height: calc(100vh - 80px);}
    .zoom-overlay .prev {left: 20px;}
    .zoom-overlay .next {right: 20px;}
}

@media screen and (max-width:860px){
    .tab04 .round h4{font-size: 2rem;}
    .tab05 h1 {font-size: 2.5rem;}

    .tab09 .mw-1080 {padding: 80px 40px 140px;}
    .tab09 .box {padding: 50px 40px;}
    .tab09 .box.point2 .in-img{max-width: 200px;}
    .tab02.system04 .img-section img:last-child {max-width: 450px;}

    .tab10 h3 {font-size: 32px; line-height: 1.2; flex-wrap: wrap; margin: 0 6rem;}

    .tab11 .mw-1080 .in-img4::before {left: calc(50% - 20px);}

    .tab12 h3 {gap: 0 5px; flex-wrap: wrap;}
    .tab12 .mw-1080{transform: translateY(-50px);}

    .tab13 .img-set {flex-wrap: wrap; transform: translateX(10px);}
    .tab13 .img-set img {width: calc(100% / 2);}

    .tab02.system03 .img-section {margin: 0 auto;}
    .tab02.system03 .img-txt img {max-width: 360px;}
    .tab02.system03 .img-txt p {font-size: 16px;}
    .tab04 .mask {min-width: auto;}
    .tab04 .mask .effect{display: none;}
    .tab15 h3,
    .tab16 h3,
    .tab17 h3 {font-size: 2.4rem;}
    ul.grid-sys2{gap: 25px; grid-template-columns:repeat(2,1fr)}
    

    .point-box {font-size: 1.05rem; padding: 2px 15px;}
    .tab15 .box {gap: 0 30px;}
    .tab15 .box .flex .img {max-height: 200px;}
    .tab15.system05 .box {justify-content: center;}
    /* .tab15.system05 .box .flex span {white-space: nowrap;} */

    .tab16 .grid.table {width: calc(100% - 40px); margin: 35px auto;}
    .tab16 .img-set {width: calc(80% - 60px); margin-bottom: 40px;}
    .tab16.clone .img-set {width: 80%;}
    .tab16.system05 .img-set {width: calc(80% - 160px); margin-bottom: 8rem;}
    .tab17 ul.box li.bg p{font-size: 1.5rem;}
    .tab17 ul.box li.bg span{font-size: 1.1rem;}
    .tab18 .product {transform: scale(0.8); margin: 5rem auto;}
    .tab18 .grid-table {width: auto; margin: 20px;}
    .tab18 .grid-table li {font-size: 16px;}

    .tab16 .img-set img:last-child {bottom: -90px;}

    .tab24 h3 {font-size: 36px;}
    .tab24 p {font-size: 18px;}
    .tab24 span.square {width: 18px; height: 18px;}

    .zoom-overlay .nav-button {padding: 2px 10px;}
    
}

@media screen and (max-width:640px){
    .media-640 {display: block;}
    .pc-640 {display: none;}
    

    .kitchen-wrap h3{font-size: 1.7rem;}
    .kitchen-wrap h1{font-size: 2rem;}
    

    .bg-1 {width: calc(100% + 80rem); margin-top: 12vw; transform: translateX(calc(100% - 70vw));}
    .tab02 {padding-top: 5rem;}
    .tab02 .img-txt {max-width: 65vw; margin-top: 2rem;  margin-bottom: 8rem;}
    .tab02 .img-section {max-width: 90vw; margin: auto; grid-template-columns: 1fr; gap: 3rem;}
    .tab02.system03 .img-section{grid-template-columns: 1fr; width: 75%;}
    .tab02.system05 .img-section{grid-template-columns: 1fr; gap: 1rem; width: 90%;}
    .tab03 > div h3{font-size: 1.7rem;}
    .tab03 > div > span{font-size: 15px;}
    .tab04 .mask .effect, 
    .tab04 .round.center .mask .effect {transform: translate(-50%, -50%) scale(1.4);}
    .tab04 .round p{font-size: 15px;}
    .tab04 .round h4{font-size: 1.7rem;}

    .tab05 .ani{transform: translateX(30px);}
    .tab05 h1 {margin: 0 3rem; word-break: auto-phrase;}
    .tab05 .top img:last-child {top: calc(50% + 30vw);}
    .tab05 .bottom {max-width: 480px; transform: translateX(40px);}
    .tab05 .bottom img:last-child {bottom: 14rem; left: calc(50% - 140px); max-width: 200px;}

    .bg-2 img {bottom: -0.5rem;}

    .tab06 .round .txt h5 {font-size: 20px;}
    .tab06 .round .txt p {font-size: 16px;}
    .tab06 .round .mask {background-color: #2e2a29; overflow: hidden;}
    .tab06 .round .mask img {transform: scale(1.2);}
    .tab06 .round .txt h5::before {left: -90px; width: calc(100% + 180px);}
    .tab06 .round.center .txt h5::before {left: -90px; width: calc(100% + 180px);}

    .tab07 {margin: 5rem auto;}
    .tab07 .point-img img.one-set{width: calc(100% + 3rem); left: 60%;}
    .tab07 .point-img .absolut-img{padding: 0 6rem;}
    .tab07 .border{height: 6rem;}


    .tab08 .product {padding: 0 5rem 5rem;}
    .tab08 .product img:first-child {width: calc(100% - 5vw);}
    .tab08 .product img:last-child {width: calc(100% + 6vw); margin-left: 0; margin-top: 50px;}

    .tab02.system02 .img-section {gap: 4rem 0;}
    .tab02.system02 .img-section img:last-child {transform: translateX(30px); margin: auto; max-width: 365px;}

    .tab09{margin-top: 5rem;}
    .tab09 .mw-1080 {padding: 80px 20px 100px;}
    .tab09 .box {padding: 40px 25px;}
    .tab09 .flex .icon {width: 50px; height: 50px; padding: 12px; margin-right: 8px;}
    .tab09 .flex .in-txt {margin-left: 0;}
    .tab09 .flex .in-txt span {font-size: 16px}
    .tab09 .flex .in-txt p {font-size: 20px;}
    .tab09 .flex .flex > p {height: 35px; margin-top: 10px; word-break: auto-phrase;}
    .tab09 .in-img {max-width: 100px; right: 20px; bottom: -25px;}
    .tab09 .box.point2 .in-img {max-width: 150px; right: 0;}
    .tab09 .box.point3 .in-img {max-width: 160px; right: 20px;}
    .tab09 .box.point4 .in-img, 
    .tab09 .box.point5 .in-img, 
    .tab09 .box.point6 .in-img {max-width: 140px; right: 20px;}
    .tab09 .box.point5 .in-img {bottom: 50%;}
    .tab09 .flex .hr {width: calc(100% + 5rem);}
    .tab09 .in-img{display: none;}

    .tab10 h3 {margin: 0 2rem; font-size: 30px;}
    .tab10 h3 p span::before {font-size: 5px;}
    .tab10 ul li .in-img{max-width: 120px;}
    .tab10 ul.grid-sys2{gap: 5px;}

    .tab11 .mw-1080 img:nth-child(3) {top: calc(50% - 50px);}
    .tab11 .mw-1080 .in-img4::before {top: calc(50% + 20px); width: calc(23% - 80px);}

    .tab12 > p {font-size: 16px;}
    .tab12 h3,
    .tab12 .box h3 {margin: 0;}
    .tab12 ul.grid{padding: 0;}

    .tab18 .grid-table,
    .tab13 .grid-table {grid-template-columns: 110px 1fr;}
    .tab13 .grid-table li {padding: 10px; font-size: 14px;} 
    .tab13 .grid-table li:nth-child(odd) {letter-spacing: 2px;}

    .tab14{margin-top: 0; margin-bottom: 4rem;}
    .tab14 .band {padding: 50px 0 30px; gap: 30px}
    .tab14 .band img,
    .tab14 .band .x-span span {height: 45px;}
    .tab14 .band .x-span span {top: calc(50% - 20px); width: 2px;}
    .tab14 .band img:last-child {height: 65px;}


    .point-box {font-size: 1.2rem;}

    .tab15.system05 .box,
    .tab15 .box {flex-direction: column; max-width: 340px; margin: 40px 0 0;}
    .tab15.system05 .box {max-width: 400px;}
    .tab15.system05 .box .flex,
    .tab15 .box .flex { display: grid; grid-template-columns: 1fr 200px; grid-template-rows: 30px 30px 30px 30px; width: 100%;}
    .tab15.system05 .box .flex {gap: 10px; grid-template-columns: 1fr 250px;}
    .tab15 .box .flex .img {grid-row: 1 / span 4; margin: auto; width: 100%;}
    .tab15 .box .flex .img img {display: block; max-height: 140px; width: auto; margin: auto;}
    .tab15.system05 .box .flex p,
    .tab15 .box .flex p {grid-row: 2; margin: 0; text-align: left;}
    .tab15.system05 .box .flex span,
    .tab15 .box .flex span {text-align: left; grid-row: 3; grid-column: 2; letter-spacing: 0;}
    .tab15.system05 .box .flex span {font-size: 14px;}
    .tab15.system05 .box .flex .img img {max-height: 100px;}

    .tab16{padding-bottom: 2rem;}
    .tab16.clone .grid.table {grid-template-columns: 0.4fr 0.5fr 1fr;}
    .tab16 .grid.table{width: 100%;}
    .tab16 ul li {font-size: 13px; text-align: left;}
    .tab16 .img-set img:last-child {bottom: -50px;}
    .tab16.system05 .img-set {width: 65%;}

    .tab17 ul.box {grid-template-columns: repeat(1, 1fr); grid-template-rows: 0.5fr 1fr; margin: 20px;}
    .tab17 ul.center li:first-child {order: 1;}
    .tab17 ul.box li {max-height: 240px; height: unset;}
    .tab17 ul.box li.bg p {font-size: 1.3rem; letter-spacing: 0;}
    .tab17 ul.box li.bg span {font-size: 16px; line-height: 1.2;}

    .tab18 .grid-table {grid-template-columns: 120px 1fr;}
    .tab18 .grid-table li {font-size: 13px; padding: 10px;}

    .tab02.system04 {min-height: 100vh;}
    .tab02.system04 .img-section img:last-child {max-width: 380px; left: calc(50% - 28.5vw);}
    .tab19.system05 .frame > div span{max-width: 40vw;}
    .tab20 .flex.img-box {gap: 0 20px;}
    .tab20 > p.txt-p, .tab20 .flex > p, .tab22 > .txt p{font-size: 20px;}

    .tab21 .img-set {height: 180px; padding: 10px; gap: 0 25px;}
    .tab21 .img-set .in-img {width: 160px; height: 160px;}
    .tab21 .img-set .in-txt p {font-size: 1.3rem;}
    .tab21 .img-set .in-txt span {font-size: 1.1rem;}
    .tab21 .img-set .in-txt span::before {width: 12px; height: 12px;}
    .tab24 p{font-size: 15px; margin-bottom: 6px;}
    .tab24 h3{padding-top: 3rem;}
    .tab18 .grid-table {grid-template-columns: 100px 1fr;}
    .tab18.system04 .product img:last-child {margin-left: 0;}
    .tab18.system04 .product{margin: 0;}

    .tab16.system05 {padding-bottom: 0; margin-top: 2rem;}
    .tab16.system05 h3 {margin: 0 5rem;}
    .tab16.system05 .grid.table li {word-break: keep-all; align-content: center;}

    .tab23 p {font-size: 18px;}

    .tab24 img {max-width: 360px; transform: translateX(-40px); margin-top: 60px;}

    .tab02.system05 .img-section img:first-child {max-width: 200px;}
    .tab18.system05 .product {margin: 5rem auto;}
    .tab19 .frame{margin-bottom: 0;}

    .zoom-overlay .prev {left: 10px;}
    .zoom-overlay .next {right: 10px;}
    div.bottom p{font-size: 1.6rem;}
    div.bottom span{font-size: 1.1rem;}
}