main {width:100%;}
main * {outline:none;}


.visual {width:100%; position: relative;}
.visual .inner {position: relative; overflow: hidden; border-radius:0 0 4rem 4rem; -webkit-radial-gradient(white, black); isolation: isolate;}
.visual .js_visual_slider {width:100%;}
.visual .js_visual_slider .swiper-slide {width:100%; background-color:var(--color-white);}
.visual .js_visual_slider .swiper-slide .vSlide {width:100%; height:76rem; display:flex; justify-content:space-between; position: relative;}
.visual .js_visual_slider .swiper-slide .vSlide img.s_bg_img {position: absolute; top:0; left:0; width:100%; height:100%;}
.visual .js_visual_slider .swiper-slide .vSlide .slide_img {width:50%; overflow: hidden; display:flex; align-items: center; justify-content: center; -webkit-radial-gradient(white, black); isolation: isolate;}
.visual .js_visual_slider .swiper-slide .vSlide .slide_img img {width:100%; height:100%; display: block; object-fit: cover;}

.visual .js_visual_slider .swiper-slide .vSlide .slide_cont {width:50%; text-align: center; position: relative; z-index:2;}
.visual .js_visual_slider .swiper-slide .vSlide .slide_cont h2 {display: block; font-size:6.4rem; color:var(--color-white); font-weight:900; letter-spacing:-0.05em; line-height:8rem; margin-top:15.13%;}
.visual .js_visual_slider .swiper-slide .vSlide .slide_cont em {display: block; font-size:2rem; color:var(--color-white); font-weight:500; letter-spacing:-0.05em; line-height:3rem; margin-top:6.4rem;}
.visual .js_visual_slider .swiper-slide .vSlide .slide_cont .btn {width:100%; margin-top:6.4rem; display:flex; justify-content: center;}
.visual .js_visual_slider .swiper-slide .vSlide .slide_cont .btn a {font-size:2rem; color:var(--color-gray-800); font-weight:800; letter-spacing:-0.05em; line-height:2.5rem; padding:1.6rem 2.4rem; background-color:#fff; border-radius:10rem;}

.visual .visual_pagination {width:50%; position: absolute; right:0; bottom:6.4rem; z-index:2;}
.visual .visual_pagination .vPage {width:100%; display:flex; justify-content: center; gap:1.6rem;}
.visual .visual_pagination .vPage .swiper-pagination-bullet {width:1.6rem; height:1.6rem; opacity:1; background-color:#FFFFFF66; border-radius:10rem;}
.visual .visual_pagination .vPage .swiper-pagination-bullet-active {width:4.8rem; background-color:var(--color-white);}

@media (hover: hover) {
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont .btn a {transition:all 0.2s;}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont .btn a:hover {background-color:var(--color-gray-800); color:var(--color-white)}
}
@media (max-width:1600px) {
    .visual .js_visual_slider .swiper-slide .vSlide {height:74rem;}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont h2 {font-size:6rem; line-height:7.6rem; margin-top:13.13%;}
}
@media (max-width:1500px) {
    .visual .js_visual_slider .swiper-slide .vSlide {height:72rem;}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont h2 {font-size:5.6rem; line-height:7.2rem; margin-top:12.13%;}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont em {font-size:1.9rem; line-height:2.9rem; margin-top:5.6rem;}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont .btn {margin-top:5.6rem;}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont .btn a {font-size:1.9rem; padding:1.4rem 2.4rem;}
    .visual .visual_pagination {bottom:5.6rem;}
}
@media (max-width:1400px) {
    .visual .inner {border-radius:0 0 3.6rem 3.6rem;}
    .visual .js_visual_slider .swiper-slide .vSlide {height:66rem;}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont h2 {font-size:5.2rem; line-height:6.8rem; margin-top:11.53%;}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont em,
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont .btn {margin-top:5rem;}
    .visual .visual_pagination {bottom:5rem;}
}
@media (max-width:1300px) {
    .visual .inner {border-radius:0 0 3.2rem 3.2rem;}
    .visual .js_visual_slider .swiper-slide .vSlide {height:62rem;}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont h2 {font-size:4.8rem; line-height:6.4rem; margin-top:11.13%;}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont em {font-size:1.8rem; line-height:2.8rem; margin-top:4.8rem;}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont .btn {margin-top:4.8rem;}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont .btn a {font-size:1.8rem; line-height:2.4rem; padding:1.2rem 2.4rem;}
    .visual .visual_pagination {bottom:4.8rem;}
}
@media (max-width:1200px) {
    .visual .js_visual_slider .swiper-slide .vSlide {height:auto; display: block;}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_img {width:100%; height:66rem; position: relative;}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_img::before {content:""; width:100%; height:100%; position: absolute; top:0; left:0; background:rgba(0,0,0,0.15);}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont {width:100%; height:100%; position: absolute; top:0; left:0;}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont h2 {font-size:5.6rem; line-height:7.2rem; margin-top:8rem;}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont em {font-size:1.9rem; line-height:2.9rem; margin-top:5.6rem;}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont .btn {margin-top:5.6rem;}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont .btn a {font-size:1.9rem; padding:1.4rem 2.4rem;}
    .visual .visual_pagination {width:100%; bottom:5.6rem;}
    .visual .visual_pagination .vPage {gap:1.2rem;}
    .visual .visual_pagination .vPage .swiper-pagination-bullet {width:1.2rem; height:1.2rem;}
    .visual .visual_pagination .vPage .swiper-pagination-bullet-active {width:3.6rem;}
}
@media (max-width:1023px) {
    .visual .inner {border-radius:0; width:100%;}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_img {height:62rem;}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont h2 {font-size:5.2rem; line-height:6.8rem; margin-top:7.2rem;}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont em,
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont .btn {margin-top:5rem;}
    .visual .visual_pagination {bottom:5rem;}
}
@media (max-width:767px) {
    .visual .js_visual_slider .swiper-slide .vSlide .slide_img {height:58rem;}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont h2 {font-size:4.8rem; line-height:6.4rem; margin-top:6.4rem;}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont em {font-size:1.8rem; line-height:2.8rem; margin-top:4.8rem;}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont .btn {margin-top:4.8rem;}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont .btn a {font-size:1.8rem; line-height:2.4rem; padding:1.2rem 2.4rem;}
    .visual .visual_pagination {bottom:4.8rem;}
}
@media (max-width:600px) {
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont h2 {font-size:4.4rem; line-height:6rem; margin-top:5.6rem;}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont em {font-size:1.7rem; line-height:2.7rem; margin-top:4.2rem;}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont .btn {margin-top:4.2rem;}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont .btn a {font-size:1.7rem; line-height:2.3rem; padding:1rem 2.2rem;}
    .visual .visual_pagination {bottom:4.2rem;}
}
@media (max-width:479px) {
    .visual .js_visual_slider .swiper-slide .vSlide .slide_img {height:58rem;}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont h2 {font-size:4rem; line-height:5.6rem; margin-top:5rem;}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont em {font-size:1.6rem; line-height:2.6rem; margin-top:3.6rem;}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont .btn {margin-top:3.6rem;}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont .btn a {font-size:1.6rem; line-height:2.2rem; padding:0.8rem 1.6rem;}
    .visual .visual_pagination {bottom:3.6rem;}
    .visual .visual_pagination .vPage {gap:0.8rem;}
    .visual .visual_pagination .vPage .swiper-pagination-bullet {width:1rem; height:1rem;}
    .visual .visual_pagination .vPage .swiper-pagination-bullet-active {width:3.2rem;}
}
@media (max-width:420px) {
    .visual .js_visual_slider .swiper-slide .vSlide .slide_img {height:56rem;}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont h2 {font-size:3.6rem; line-height:5.2rem;}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont em {font-size:1.5rem; line-height:2.5rem; margin-top:3rem;}
    .visual .visual_pagination {bottom:3rem;}
}
@media (max-width:360px) {
    .visual .js_visual_slider .swiper-slide .vSlide .slide_img {height:52rem;}
}
@media (max-width:320px) {
    .visual .js_visual_slider .swiper-slide .vSlide .slide_img {height:48rem;}
    .visual .js_visual_slider .swiper-slide .vSlide .slide_cont h2 {font-size:3.2rem; line-height:4.6rem;}
}


.sectionContainer {width:100%; position: relative;}
.sectionContainer .seactionNav {height:0; position: sticky; top:0; left:0; z-index:9;}
.sectionContainer .seactionNav .seacNavList {width:10rem; position: relative; top:16rem;}
.sectionContainer .seactionNav .seacNavList ul.snList {width:100%;}
.sectionContainer .seactionNav .seacNavList ul.snList li {font-size:1.4rem; color:var(--color-gray-300); font-weight:500; line-height:2rem; cursor: pointer;}
.sectionContainer .seactionNav .seacNavList ul.snList li + li {margin-top:1.6rem;}
.sectionContainer .seactionNav .seacNavList ul.snList li.act {color:var(--color-gray-800); font-weight:800;}
.sectionContainer .seactionNav .seacNavList ul.snList.black li {color:#C9CDD266;}
.sectionContainer .seactionNav .seacNavList ul.snList.black li.act {color:var(--color-gray-200);}
@media (max-width:1700px) {
    .sectionContainer .seactionNav {display:none;}
}


.sectionContainer .sectionContent {width:100%; z-index:2; position:relative;}
.sectionContainer .sectionContent section {margin-top:16rem;}

section .sec_tit h6 {font-size:3.4rem; color:var(--color-gray-800); font-weight:700; letter-spacing:-0.05em; line-height:4.4rem; word-break: keep-all; transform: translateY(4rem); opacity:0;}
section .sec_tit em {font-size:1.8rem; color:var(--color-gray-700); font-weight:500; letter-spacing:-0.03em; line-height:2.8rem; display: block; margin-top:2.4rem; word-break: keep-all; transform: translateY(4rem); opacity:0;}
section .sec_tit.act h6 {animation:sec_ani 0.6s ease forwards;}
section .sec_tit.act em {animation:sec_ani 0.6s ease forwards; animation-delay:0.1s;}

section .sec_cont {margin-top:6.4rem;}

@keyframes sec_ani {
	to {transform: translateY(0); opacity:1;}
}


@media (max-width:1300px) {
    section .sec_tit h6 {font-size:3.2rem; line-height:4.2rem;}
    section .sec_cont {margin-top:6rem;} 
}
@media (max-width:1200px) {
    .sectionContainer .sectionContent section {margin-top:14rem;}
    section .sec_tit h6 {font-size:3rem; line-height:4rem;}
    section .sec_tit em {font-size:1.7rem; line-height:2.7rem; margin-top:2rem;}
    section .sec_cont {margin-top:5.6rem;} 
}
@media (max-width:1023px) {
    .sectionContainer .sectionContent section {margin-top:12rem;}
    section .sec_tit h6 {font-size:2.8rem; line-height:3.8rem;}
    section .sec_tit em {font-size:1.6rem; line-height:2.6rem; margin-top:1.6rem;}
    section .sec_cont {margin-top:5rem;} 
}
@media (max-width:767px) {
    .sectionContainer .sectionContent section {margin-top:11rem;}
    section .sec_tit h6 {font-size:2.6rem; line-height:3.6rem;}
    section .sec_cont {margin-top:4rem;} 
}
@media (max-width:600px) {
    .sectionContainer .sectionContent section {margin-top:10rem;}
    section .sec_tit h6 {font-size:2.4rem; line-height:3.4rem;}
    section .sec_tit em {font-size:1.5rem; line-height:2.5rem; margin-top:1.4rem;}
    section .sec_cont {margin-top:3.2rem;} 
}
@media (max-width:479px) {
    .sectionContainer .sectionContent section {margin-top:8rem;}
    section .sec_tit h6 {font-size:2.2rem; line-height:3.2rem;}
    section .sec_tit em {font-size:1.4rem; line-height:2.4rem; margin-top:1.2rem;}
    section .sec_cont {margin-top:2.8rem;} 
}
@media (max-width:420px) {
    .sectionContainer .sectionContent section {margin-top:6rem;}
    section .sec_tit h6 {font-size:2rem; line-height:3rem;}
    section .sec_cont {margin-top:2.4rem;} 
}


.section1 .sec_cont .js_s1_slider {width:100%; overflow: hidden;}
.section1 .sec_cont .js_s1_slider .swiper-wrapper {gap:2.4rem;}
.section1 .sec_cont .js_s1_slider .swiper-slide {width:calc(33.33% - 1.6rem); transform: translateY(4rem); opacity:0;}
.section1 .sec_cont .js_s1_slider .swiper-slide div {width:100%; overflow: hidden; border-radius:2.4rem; -webkit-radial-gradient(white, black); isolation: isolate; display:flex; align-items: center; justify-content: center;}
.section1 .sec_cont .js_s1_slider .swiper-slide div img {display: block; width:100%; height:100%; object-fit: cover;}

.section1 .sec_cont.act .js_s1_slider .swiper-slide {animation:sec_ani 0.5s ease forwards;}
.section1 .sec_cont.act .js_s1_slider .swiper-slide:nth-child(2) {animation-delay:0.1s;}
.section1 .sec_cont.act .js_s1_slider .swiper-slide:nth-child(3) {animation-delay:0.2s;}

@media (max-width:1400px) {
    .section1 {width:100%;}
    .section1 .sec_tit,
    .section1 .sec_cont .js_s1_slider {padding:0 3rem;}
    .section1 .sec_cont .js_s1_slider .swiper-wrapper {gap:0;}
    .section1 .sec_cont .js_s1_slider .swiper-slide {width:auto;}
}
@media (max-width:1200px) {
    .section1 .sec_cont .js_s1_slider .swiper-slide div {border-radius:2rem;}
}
@media (max-width:1023px) {
    .section1 .sec_cont .js_s1_slider .swiper-slide div {border-radius:1.8rem;}
}
@media (max-width:767px) {
    .section1 .sec_cont .js_s1_slider .swiper-slide div {border-radius:1.6rem;}
}
@media (max-width:600px) {
    .section1 .sec_cont .js_s1_slider .swiper-slide div {border-radius:1.4rem;}
}
@media (max-width:479px) {
    .section1 .sec_tit,
    .section1 .sec_cont .js_s1_slider {padding:0 2.2rem;}
    .section1 .sec_cont .js_s1_slider .swiper-slide div {border-radius:1.2rem;}
}
@media (max-width:420px) {
    .section1 .sec_tit,
    .section1 .sec_cont .js_s1_slider {padding:0 2rem;}
    .section1 .sec_cont .js_s1_slider .swiper-slide div {border-radius:0.8rem;}
}


@keyframes s1_c1_box_ani {
	to {transform: translateY(0); opacity:1;}
}
@keyframes s1_c2_box_ani {
	to {width:100%;}
}
@keyframes s1_c2_color_ani {
	to {color:#fff;}
}



.section2 .product_list {width:100%;}
.section2 .product_list .item_list {width:100%; display:flex; flex-wrap:wrap; gap:4.8rem 2.4rem;}
.section2 .product_list .item_list li {width:calc(20% - 1.92rem); transform: translateY(4rem); opacity:0;}
.section2 .product_list .item_list li.act {animation:sec_ani 0.5s ease forwards;}
.section2 .product_list .item_list li.act:nth-child(2) {animation-delay:0.05s;}
.section2 .product_list .item_list li.act:nth-child(3) {animation-delay:0.1s;}
.section2 .product_list .item_list li.act:nth-child(4) {animation-delay:0.15s;}
.section2 .product_list .item_list li.act:nth-child(5) {animation-delay:0.2s;}
.section2 .product_list .item_list li.act:nth-child(7) {animation-delay:0.05s;}
.section2 .product_list .item_list li.act:nth-child(8) {animation-delay:0.1s;}
.section2 .product_list .item_list li.act:nth-child(9) {animation-delay:0.15s;}
.section2 .product_list .item_list li.act:nth-child(10) {animation-delay:0.2s;}

.section2 .product_list .item_list .item {width:100%; position: relative;}
.section2 .product_list .item_list .item a.upper_link {width:100%; height:100%; position: absolute; top:0; left:0;}

.section2 .product_list .item_list .item .thumb {width:100%; padding-top:100%; position: relative; border-radius:2.4rem; -webkit-radial-gradient(white, black); isolation: isolate; overflow: hidden;}
.section2 .product_list .item_list .item .thumb .img {width:100%; height:100%; position: absolute; top:0; left:0; display:flex; align-items: center; justify-content: center;}
.section2 .product_list .item_list .item .thumb .img::before {content:"상세보기"; width:100%; height:100%; position: absolute; top:0; left:0; background-color:rgba(0,0,0,0.5); display:flex; align-items: center; justify-content: center; font-size:2.2rem; color:var(--color-white); font-weight:500; letter-spacing:-0.02em; line-height:3.2rem; opacity:0; z-index:3;}
.section2 .product_list .item_list .item .thumb .img img {display: block; width:100%; height:100%; object-fit: cover;}

.section2 .product_list .item_list .item .info {width:100%; margin-top:1.6rem;}
.section2 .product_list .item_list .item .info p {font-size:1.7rem; color:var(--color-gray-700); font-weight:600; letter-spacing:-0.03em; line-height:2.6rem; max-height:5.2rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; word-break: keep-all;}
.section2 .product_list .item_list .item .info em {font-size:1.8rem; color:var(--color-gray-800); font-weight:700; letter-spacing:-0.03em; line-height:2.8rem; display: block; margin-top:0.4rem;}

.section2 .btn {width:100%; margin-top:6.4rem; display:flex; justify-content: center; transform: translateY(4rem); opacity:0;}
.section2 .btn a {width:24rem; background-color:var(--color-black); font-size:2rem; color:var(--color-white); font-weight:800; letter-spacing:-0.05em; line-height:3rem; padding:1.4rem 0; border-radius:10rem; text-align: center;}

.section2 .act .btn {animation:sec_ani 0.5s ease forwards;}

@media (hover: hover) {
    .section2 .product_list .item_list .item .thumb img  {transition:all 0.5s;}
    .section2 .product_list .item_list .item .thumb .img::before {transition:all 0.2s;}
    .section2 .product_list .item_list .item:hover .thumb img {transform: scale(1.12);}
    .section2 .product_list .item_list .item:hover .thumb .img::before {opacity:1;}
    .section2 .product_list .item_list .item:hover .info p,
    .section2 .product_list .item_list .item:hover .info em {text-decoration: underline; text-underline-offset:0.2rem;}

    .section2 .btn a {transition:all 0.2s;}
    .section2 .btn a:hover {background-color:var(--color-action);}
}
@media (max-width:1300px) {
    .section2 .product_list .item_list {gap:4.4rem 2rem;}
    .section2 .product_list .item_list li {width:calc(20% - 1.6rem);}
    .section2 .product_list .item_list .item .thumb {border-radius:2rem;}
}
@media (max-width:1200px) {
    .section2 .product_list .item_list {gap:4.6rem 2rem;}
    .section2 .product_list .item_list li {width:calc(25% - 1.5rem);}
    .section2 .product_list .item_list li.act:nth-child(2) {animation-delay:0.05s;}
    .section2 .product_list .item_list li.act:nth-child(3) {animation-delay:0.1s;}
    .section2 .product_list .item_list li.act:nth-child(4) {animation-delay:0.15s;}
    .section2 .product_list .item_list li.act:nth-child(5) {animation-delay:0s;}
    .section2 .product_list .item_list li.act:nth-child(6) {animation-delay:0.05s;}
    .section2 .product_list .item_list li.act:nth-child(7) {animation-delay:0.1s;}
    .section2 .product_list .item_list li.act:nth-child(8) {animation-delay:0.15s;}
    .section2 .product_list .item_list li.act:nth-child(9) {animation-delay:0s;}
    .section2 .product_list .item_list li.act:nth-child(10) {animation-delay:0.05s;}
}
@media (max-width:1023px) {
    .section2 .product_list .item_list {gap:4.2rem 2rem;}
    .section2 .product_list .item_list .item .thumb {border-radius:1.6rem;}
    .section2 .product_list .item_list .item .thumb .img::before {font-size:2rem; line-height:3rem;}
}
@media (max-width:900px) {
    .section2 .product_list .item_list {gap:5rem 2.4rem;}
    .section2 .product_list .item_list li {width:calc(50% - 1.2rem); animation-delay:0s!important;}
    .section2 .product_list .item_list li.act:nth-child(2n) {animation-delay:0.1s!important;}
    
    .section2 .product_list .item_list .item .thumb {border-radius:2rem;}
    .section2 .product_list .item_list .item .thumb .img::before {font-size:2.4rem; line-height:3.4rem;}

    .section2 .btn {margin-top:6rem;}
    .section2 .btn a {width:23rem; font-size:1.9rem; line-height:2.9rem;}
}
@media (max-width:767px) {
    .section2 .product_list .item_list {gap:4.2rem 2.4rem;}
    .section2 .product_list .item_list .item .thumb {border-radius:1.8rem;}
    .section2 .product_list .item_list .item .thumb .img::before {font-size:2.2rem; line-height:3.2rem;}

    .section2 .btn {margin-top:5rem;}
    .section2 .btn a {width:22rem; font-size:1.8rem; line-height:2.8rem;}
}
@media (max-width:600px) {
    .section2 .product_list .item_list {gap:3.2rem 2.4rem;}
    .section2 .product_list .item_list .item .thumb {border-radius:1.6rem;}
    .section2 .product_list .item_list .item .thumb .img::before {font-size:2rem; line-height:3rem;}
    
    .section2 .product_list .item_list .item .info p {font-size:1.6rem; line-height:2.4rem; max-height:4.8rem;}
    .section2 .product_list .item_list .item .info em {font-size:1.7rem; line-height:2.7rem; margin-top:0.3rem;}
    .section2 .btn {margin-top:5rem;}
    .section2 .btn a {width:20rem; font-size:1.7rem; line-height:2.7rem;}
}
@media (max-width:479px) {
    .section2 {padding-top:2rem;}
    .section2 .product_list .item_list {gap:2.8rem 2rem;}
    .section2 .product_list .item_list li {width:calc(50% - 1rem);}
    .section2 .product_list .item_list .item .thumb {border-radius:1.2rem;}
    .section2 .product_list .item_list .item .thumb .img::before {font-size:1.8rem; line-height:2.8rem;}
    .section2 .product_list .item_list .item .info p {font-size:1.5rem; line-height:2.3rem; max-height:4.6rem;}
    .section2 .product_list .item_list .item .info em {font-size:1.6rem; line-height:2.6rem;}

    .section2 .btn {margin-top:4rem;}
    .section2 .btn a {width:100%; font-size:1.6rem; line-height:2.6rem;}
}
@media (max-width:420px) {
    .section2 {padding-top:1.6rem;}
    .section2 .product_list .item_list {gap:2.4rem 1.6rem;}
    .section2 .product_list .item_list li {width:calc(50% - 0.8rem);}
    .section2 .product_list .item_list .item .info p {font-size:1.4rem; line-height:2.2rem; max-height:4.4rem;}
    .section2 .product_list .item_list .item .info em {font-size:1.5rem; line-height:2.5rem; margin-top:0.2rem;}

    .section2 .btn {margin-top:4rem;}
    .section2 .btn a {font-size:1.5rem; line-height:2.5rem; padding:1.3rem 0;}
}




.section3 {width:100%; background-color:var(--color-gray-800); padding:16rem 0; position: relative;}
.section3 .s3_bg_box {width:100%; height:100%; position: absolute; top:0; left:0; overflow: hidden; display:flex; align-items: center; justify-content: center;  z-index:1;}
.section3 .s3_bg_box .bg_box {width:176rem; position: relative; flex-shrink: 0;}
.section3 .s3_bg_box .bg_box svg {width:100%;}
.section3 .s3_bg_box .bg_box path {fill: none; stroke: var(--color-gray-600); stroke-width: 1; stroke-miterlimit: 10; stroke-dasharray: 3500; stroke-dashoffset:3500;}
.section3 .s3_bg_box .line {position: absolute; background-color:var(--color-gray-600);}
.section3 .s3_bg_box .line.line1 {width:0; height:1px; top:16rem; right:0;}
.section3 .s3_bg_box .line.line2 {width:0; height:1px; bottom:16rem; left:0;}
.section3 .s3_bg_box .line.line3 {width:1px; height:0; top:0; left:0;}
.section3 .s3_bg_box .line.line4 {width:1px; height:0; bottom:0; right:0;}

.section3 .s3_bg_box.act .bg_box path {animation: drawCounter 2s ease forwards; animation-delay:0.4s;}
.section3 .s3_bg_box.act .line.line1 {animation: horizontal_line 1s ease forwards;}
.section3 .s3_bg_box.act .line.line2 {animation: horizontal_line 1s ease forwards;}
.section3 .s3_bg_box.act .line.line3 {animation: verticality_line 1s ease forwards;}
.section3 .s3_bg_box.act .line.line4 {animation: verticality_line 1s ease forwards;}

@keyframes drawCounter {
    to {stroke-dashoffset: 0; stroke: var(--color-gray-700);} 
}
@keyframes horizontal_line {
    to {width:100%; background-color:var(--color-gray-700);}
}
@keyframes verticality_line {
    to {height:100%; background-color:var(--color-gray-700);}
}

.section3 .sec_tit {z-index:1; position: relative;}
.section3 .sec_tit h6,
.section3 .sec_tit em {color:var(--color-white)!important;}

.section3 .sec_cont {z-index:1; position: relative; margin-top:17rem;}
.section3 .sec_cont .s3_cont {width:100%; max-width:120rem; margin: auto; display:flex; justify-content: center; gap:8rem;}
.section3 .sec_cont .s3_cont li {width:calc(25% - 6rem); transform: translateY(4rem); opacity:0;}
.section3 .sec_cont.act .s3_cont li {animation:sec_ani 0.5s ease forwards;}
.section3 .sec_cont.act .s3_cont li:nth-child(2) {animation-delay:0.05s;}
.section3 .sec_cont.act .s3_cont li:nth-child(3) {animation-delay:0.1s;}
.section3 .sec_cont.act .s3_cont li:nth-child(4) {animation-delay:0.15s;}

.section3 .sec_cont .s3_cont li div {width:100%; background-color:var(--color-action); text-align: center; font-size:2rem; color:var(--color-white); font-weight:800; line-height:3rem;}
.section3 .sec_cont .s3_cont li em {display: block; margin-top:1.6rem; font-size:1.6rem; color:var(--color-white); font-weight:500; letter-spacing:-0.02em; line-height:2.4rem; text-align: center;}

.section3 .sec_cont .btn {width:100%; margin-top:20rem; display:flex; justify-content: center; transform: translateY(4rem); opacity:0;}
.section3 .sec_cont .btn a {width:24rem; background-color:var(--color-white); font-size:2rem; color:var(--color-gray-800); font-weight:800; letter-spacing:-0.05em; line-height:3rem; padding:1.4rem 0; border-radius:10rem; text-align: center;}
.section3 .sec_cont.act .btn {animation:sec_ani 0.5s ease forwards;}

@media (hover: hover) {
    .section3 .sec_cont .btn a {transition:all 0.2s;}
    .section3 .sec_cont .btn a:hover {background-color:var(--color-action); color:var(--color-white)}
}
@media (max-width:1300px) {
    .section3 .sec_cont {margin-top:14rem;}
    .section3 .sec_cont .btn {margin-top:16rem;}
}
@media (max-width:1200px) {
    .section3 {padding:14rem 0;}
    .section3 .s3_bg_box .line.line1 {top:14rem;}
    .section3 .s3_bg_box .line.line2 {bottom:14rem;}
    .section3 .sec_cont {margin-top:12rem;}
    .section3 .sec_cont .s3_cont {gap:5.2rem;}
    .section3 .sec_cont .s3_cont li {width:calc(25% - 3.9rem);}
    .section3 .sec_cont .btn {margin-top:14rem;}
    .section3 .sec_cont .btn a {width:22rem; font-size:1.8rem; line-height:2.8rem;}
}
@media (max-width:1023px) {
    .section3 {padding:13rem 0;}
    .section3 .s3_bg_box .bg_box {width:200%;}
    .section3 .s3_bg_box .line.line1 {top:13rem;}
    .section3 .s3_bg_box .line.line2 {bottom:13rem;}
    .section3 .sec_cont {margin-top:11rem;}
    .section3 .sec_cont .s3_cont {gap:3.2rem;}
    .section3 .sec_cont .s3_cont li {width:calc(25% - 2.4rem);}
}
@media (max-width:900px) {
    .section3 {padding:12rem 0;}
    .section3 .s3_bg_box .line.line1 {top:10rem;}
    .section3 .s3_bg_box .line.line2 {bottom:10rem;}
    .section3 .sec_cont {margin-top:10rem;}
    .section3 .sec_cont .s3_cont {gap:5.2rem; flex-wrap: wrap;}
    .section3 .sec_cont .s3_cont li {width:calc(50% - 2.6rem);}
    .section3 .sec_cont .btn {margin-top:10rem;}
}
@media (max-width:767px) {
    .section3 {padding:10rem 0;}
    .section3 .s3_bg_box .bg_box {width:220%;}
    .section3 .s3_bg_box .line.line1 {top:8.4rem;}
    .section3 .s3_bg_box .line.line2 {bottom:8.4rem;}
    .section3 .sec_cont {margin-top:8.4rem;}
    .section3 .sec_cont .s3_cont {gap:5rem 4.2rem;}
    .section3 .sec_cont .s3_cont li {width:calc(50% - 2.1rem);}
    .section3 .sec_cont .btn {margin-top:8rem;}
    .section3 .sec_cont .btn a {width:20rem; font-size:1.8rem; line-height:2.6rem;}
}
@media (max-width:600px) {
    .section3 {padding:9rem 0;}
    .section3 .s3_bg_box .bg_box {width:260%;}
    .section3 .s3_bg_box .line.line1 {top:7.4rem;}
    .section3 .s3_bg_box .line.line2 {bottom:7.4rem;}
    .section3 .sec_cont {margin-top:6.4rem;}
    .section3 .sec_cont .s3_cont {gap:4.8rem 2.4rem;}
    .section3 .sec_cont .s3_cont li {width:calc(50% - 1.2rem);}
    .section3 .sec_cont .s3_cont li div {font-size:1.9rem; line-height:2.9rem;}
    .section3 .sec_cont .s3_cont li em {font-size:1.5rem; line-height:2.3rem;}
    .section3 .sec_cont .btn {width:100%; margin-top:20rem; display:flex; justify-content: center;}
    .section3 .sec_cont .btn {margin-top:6rem;}
    .section3 .sec_cont .btn a {width:18rem; font-size:1.7rem; line-height:2.5rem;}
}
@media (max-width:479px) {
    .section3 {padding:8rem 0;}
    .section3 .s3_bg_box .bg_box {width:280%;}
    .section3 .s3_bg_box .line.line1 {top:6.4rem;}
    .section3 .s3_bg_box .line.line2 {bottom:6.4rem;}
    .section3 .sec_cont {margin-top:5.6rem;}
    .section3 .sec_cont .s3_cont {gap:4.2rem 2rem;}
    .section3 .sec_cont .s3_cont li {width:calc(50% - 1rem);}
    .section3 .sec_cont .s3_cont li div {font-size:1.8rem; line-height:2.8rem;}
    .section3 .sec_cont .s3_cont li em {font-size:1.4rem; line-height:2.2rem;}
    .section3 .sec_cont .btn {margin-top:5rem;}
    .section3 .sec_cont .btn a {width:100%; font-size:1.6rem; line-height:2.6rem;}
}
@media (max-width:420px) {
    .section3 {padding:6rem 0;}
    .section3 .s3_bg_box .bg_box {width:320%;}
    .section3 .s3_bg_box .line.line1 {top:4rem;}
    .section3 .s3_bg_box .line.line2 {bottom:4rem;}
    .section3 .sec_cont {margin-top:4.6rem;}
    .section3 .sec_cont .s3_cont {gap:3.2rem 0;}
    .section3 .sec_cont .s3_cont li {width:100%;}
    .section3 .sec_cont .s3_cont li div {font-size:1.7rem; line-height:2.7rem;}
    .section3 .sec_cont .s3_cont li em {margin-top:1.2rem;}
    .section3 .sec_cont .btn {margin-top:4rem;}
    .section3 .sec_cont .btn a {font-size:1.5rem; line-height:2.5rem; padding:1.3rem 0;}
}



.section4 {width:100%; display:flex; margin:0!important;}
.section4 .s4_title {width:50%; max-height:100vh; min-height:72rem; position: sticky; top:0; left:0; display:flex; justify-content: center; align-items: center; padding:32rem 0;}
.section4 .s4_title .bg {position: absolute; top:0; left:0; width:100%; height:100%; display:flex; justify-content: center; align-items: center; overflow: hidden; -webkit-radial-gradient(white, black); isolation: isolate;}
.section4 .s4_title .bg img {display: block; width:100%; height:100%; object-fit: cover; transform: scale(1.15);}
.section4 .s4_title.act .bg img {animation:s4_bg_ani 2s ease forwards;}
@keyframes s4_bg_ani {
    to {transform: scale(1);}
}

.section4 .s4_title .title {position: relative; z-index:2; text-align: center;}
.section4 .s4_title .title h6 {font-size:6.4rem; color:var(--color-white); font-weight:900; line-height:8rem; display: block; transform: translateY(4rem); opacity:0;}
.section4 .s4_title .title em {font-size:2rem; color:var(--color-white); font-weight:500; letter-spacing:-0.05em; line-height:3rem; display: block; margin-top:3.2rem; transform: translateY(4rem); opacity:0;}
.section4 .s4_title .title .btn {width:100%; margin-top:6.4rem; display:flex; justify-content: center; transform: translateY(4rem); opacity:0;}
.section4 .s4_title .title .btn a {width:24rem; background-color:var(--color-white); font-size:2rem; color:var(--color-gray-800); font-weight:800; letter-spacing:-0.05em; line-height:3rem; padding:1.4rem 0; border-radius:10rem; text-align: center;}

.section4 .s4_title .title.act h6 {animation:sec_ani 0.5s ease forwards;}
.section4 .s4_title .title.act em {animation:sec_ani 0.5s ease forwards; animation-delay:0.1s;}
.section4 .s4_title .title.act .btn {animation:sec_ani 0.5s ease forwards; animation-delay:0.2s;}


.section4 .s4_cont {width:50%;}
.section4 .portfolio_list {width:100%;}
.section4 .portfolio_list .js_portfolio_slider {width:100%; padding:16rem 8rem; overflow: hidden;}
.section4 .portfolio_list .js_portfolio_slider .swiper-wrapper {width:100%; display:flex; flex-wrap:wrap; gap:6.4rem 8rem;}
.section4 .portfolio_list .js_portfolio_slider .swiper-slide {width:calc(50% - 4rem);}
.section4 .portfolio_list .js_portfolio_slider .swiper-slide:nth-child(2n) {transform: translateY(16rem);}
.section4 .portfolio_list .js_portfolio_slider .swiper-slide:nth-child(2n):last-child {margin-bottom: 16rem;}
.section4 .portfolio_list .js_portfolio_slider .swiper-slide .item {width:100%; position: relative; transform: translateY(4rem); opacity:0;}
.section4 .portfolio_list .js_portfolio_slider .swiper-slide .item.act {animation:sec_ani 0.5s ease forwards;}

.section4 .portfolio_list .js_portfolio_slider .swiper-slide .item a.upper_link {width:100%; height:100%; position: absolute; top:0; left:0;}
.section4 .portfolio_list .js_portfolio_slider .swiper-slide .item .btn_detail {width:100%; height:100%; position: absolute; top:0; left:0; cursor: pointer; z-index:9;}
.section4 .portfolio_list .js_portfolio_slider .swiper-slide .item .thumb {width:100%; padding-top:100%; position: relative; border-radius:2.4rem; -webkit-radial-gradient(white, black); isolation: isolate; overflow: hidden;}
.section4 .portfolio_list .js_portfolio_slider .swiper-slide .item .thumb .img {width:100%; height:100%; position: absolute; top:0; left:0; display:flex; align-items: center; justify-content: center;}
.section4 .portfolio_list .js_portfolio_slider .swiper-slide .item .thumb .img {width:100%; height:100%; position: absolute; top:0; left:0; display:flex; align-items: center; justify-content: center;}
.section4 .portfolio_list .js_portfolio_slider .swiper-slide .item .thumb .img::before {content:"상세보기"; width:100%; height:100%; position: absolute; top:0; left:0; background-color:rgba(0,0,0,0.5); display:flex; align-items: center; justify-content: center; font-size:2.2rem; color:var(--color-white); font-weight:500; letter-spacing:-0.02em; line-height:3.2rem; opacity:0; z-index:3;}
.section4 .portfolio_list .js_portfolio_slider .swiper-slide .item .thumb .img img {display: block; width:100%; height:100%; object-fit: cover;}

.section4 .portfolio_list .js_portfolio_slider .swiper-slide .item .info {width:100%; margin-top:1.6rem;}
.section4 .portfolio_list .js_portfolio_slider .swiper-slide .item .info p {font-size:1.6rem; color:var(--color-gray-600); font-weight:500; letter-spacing:-0.03em; line-height:2.6rem; overflow: hidden; text-overflow: ellipsis; white-space:nowrap;}
.section4 .portfolio_list .js_portfolio_slider .swiper-slide .item .info em {font-size:1.8rem; color:var(--color-gray-800); font-weight:600; letter-spacing:-0.03em; line-height:2.8rem; display: block; margin-top:0.4rem; max-height:5.6rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;}

.section4 .s4_cont .btn {width:100%; margin-top:6.4rem; display:none; justify-content: center; transform: translateY(4rem); opacity:0;}
.section4 .s4_cont .btn a {width:24rem; background-color:var(--color-gray-800); font-size:2rem; color:var(--color-white); font-weight:800; letter-spacing:-0.05em; line-height:3rem; padding:1.4rem 0; border-radius:10rem; text-align: center;}
.section4 .s4_cont .btn.act {animation:sec_ani 0.5s ease forwards;}


@media (hover: hover) {
    .section4 .portfolio_list .js_portfolio_slider .swiper-slide .item .thumb img  {transition:all 0.5s;}
    .section4 .portfolio_list .js_portfolio_slider .swiper-slide .item .thumb .img::before {transition:all 0.2s;}
    .section4 .portfolio_list .js_portfolio_slider .swiper-slide .item:hover .thumb img {transform: scale(1.12);}
    .section4 .portfolio_list .js_portfolio_slider .swiper-slide .item:hover .thumb .img::before {opacity:1;}
    .section4 .portfolio_list .js_portfolio_slider .swiper-slide .item:hover .info p,
    .section4 .portfolio_list .js_portfolio_slider .swiper-slide .item:hover .info em {text-decoration: underline; text-underline-offset:0.2rem;}

    .section4 .s4_title .title .btn a,
    .section4 .s4_cont .btn a {transition:all 0.2s;}
    .section4 .s4_title .title .btn a:hover,
    .section4 .s4_cont .btn a:hover {background-color:var(--color-action); color:var(--color-white)}
}
@media (max-width:1800px) {
    .section4 .portfolio_list .js_portfolio_slider {padding:16rem 6rem;}
    .section4 .portfolio_list .js_portfolio_slider .swiper-wrapper {gap:6.4rem 6rem;}
    .section4 .portfolio_list .js_portfolio_slider .swiper-slide {width:calc(50% - 3rem);}
}
@media (max-width:1600px) {
    .section4 .s4_title .title h6 {font-size:6rem; line-height:7.6rem;}
}
@media (max-width:1500px) {
    .section4 .s4_title .title h6 {font-size:5.6rem; line-height:7.2rem;}
    .section4 .s4_title .title em {font-size:1.9rem; line-height:2.9rem;}
    .section4 .s4_title .title .btn {margin-top:5.6rem;}
    .section4 .s4_title .title .btn a {font-size:1.9rem; padding:1.4rem 2.4rem;}
    .visual .visual_pagination {bottom:5.6rem;}
}
@media (max-width:1400px) {
    .section4 .s4_title .title h6 {font-size:5.2rem; line-height:6.8rem;}
    .section4 .s4_title .title em {margin-top:3rem;}
    .section4 .s4_title .title .btn {margin-top:5rem;}

    .section4 .portfolio_list .js_portfolio_slider {padding:12rem 4.8rem;}
    .section4 .portfolio_list .js_portfolio_slider .swiper-wrapper {gap:6rem 4.8rem;}
    .section4 .portfolio_list .js_portfolio_slider .swiper-slide {width:calc(50% - 2.4rem);}
    .section4 .portfolio_list .js_portfolio_slider .swiper-slide:nth-child(2n) {transform: translateY(12rem);}
    .section4 .portfolio_list .js_portfolio_slider .swiper-slide:nth-child(2n):last-child {margin-bottom: 12rem;}
}
@media (max-width:1300px) {
    .section4 .s4_title .title h6 {font-size:4.8rem; line-height:6.4rem;}
    .section4 .s4_title .title em {font-size:1.8rem; line-height:2.8rem; margin-top:2.8rem;}
    .section4 .s4_title .title .btn {margin-top:4.8rem;}
    .section4 .s4_title .title .btn a {font-size:1.8rem; line-height:2.4rem; padding:1.2rem 2.4rem;}

    .section4 .portfolio_list .js_portfolio_slider {padding:10rem 4rem;}
    .section4 .portfolio_list .js_portfolio_slider .swiper-wrapper {gap:5.6rem 4rem;}
    .section4 .portfolio_list .js_portfolio_slider .swiper-slide {width:calc(50% - 2rem);}
    .section4 .portfolio_list .js_portfolio_slider .swiper-slide:nth-child(2n) {transform: translateY(10rem);}
    .section4 .portfolio_list .js_portfolio_slider .swiper-slide:nth-child(2n):last-child {margin-bottom: 10rem;}
    .section4 .portfolio_list .js_portfolio_slider .swiper-slide .item .thumb {border-radius:1.8rem;}
    .section4 .portfolio_list .js_portfolio_slider .swiper-slide .item .thumb .img::before {font-size:2rem; line-height:3rem;}
}
@media (max-width:1200px) {
    .section4 .portfolio_list .js_portfolio_slider {padding:8rem 3.2rem;}
    .section4 .portfolio_list .js_portfolio_slider .swiper-wrapper {gap:5.2rem 3.2rem;}
    .section4 .portfolio_list .js_portfolio_slider .swiper-slide {width:calc(50% - 1.6rem);}
    .section4 .portfolio_list .js_portfolio_slider .swiper-slide .item .thumb {border-radius:1.7rem;}
}
@media (max-width:1023px) {
    .section4 {display: block;}
    .section4 .s4_title {width:100%; position: relative; max-height:none; min-height:auto; padding:0;}
    .section4 .s4_title .title {padding:32rem 3rem;}
    .section4 .s4_title .title h6 {font-size:5.2rem; line-height:6.8rem;}
    .section4 .s4_title .title em {margin-top:2.8rem;}
    .section4 .s4_title .title .btn {display:none;}

    .section4 .s4_cont {width:100%; margin-top:calc(-100% / 2.3 / 2); position: relative; z-index:2;}
    .section4 .portfolio_list .js_portfolio_slider {padding:0 3rem;}
    .section4 .portfolio_list .js_portfolio_slider .swiper-wrapper {gap:0; flex-wrap:initial;}
    .section4 .portfolio_list .js_portfolio_slider .swiper-slide {width:auto;}
    .section4 .portfolio_list .js_portfolio_slider .swiper-slide .item .thumb {border-radius:1.7rem;}
    .section4 .portfolio_list .js_portfolio_slider .swiper-slide .item .thumb .img::before {font-size:2.2rem; line-height:3.2rem;}

    .section4 .portfolio_list .js_portfolio_slider .swiper-slide:nth-child(2n) {transform: translateY(0);}
    .section4 .portfolio_list .js_portfolio_slider .swiper-slide:nth-child(2n):last-child {margin:0;}
    
    .section4 .s4_cont .btn {display:flex;}
}
@media (max-width:900px) {
    .section4 .s4_title .title {padding:28rem 3rem;}
    .section4 .portfolio_list .js_portfolio_slider .swiper-slide .item .thumb .img::before {font-size:2rem; line-height:3rem;}
    .section4 .s4_cont .btn {margin-top:6rem;}
    .section4 .s4_cont .btn a {width:23rem; font-size:1.9rem; line-height:2.9rem;}
}
@media (max-width:767px) {
    .section4 .s4_title .title {padding:12rem 3rem; padding-bottom:calc(100% / 1.8 / 2 + 12rem);}
    .section4 .s4_title .title h6 {font-size:4.8rem; line-height:6.4rem;}
    .section4 .s4_title .title em {font-size:1.8rem; line-height:2.8rem; margin-top:2.4rem;}
    
    .section4 .s4_cont {margin-top:calc(-100% / 1.8 / 2);}
    .section4 .s4_cont .btn {margin-top:5rem;}
    .section4 .s4_cont .btn a {width:22rem; font-size:1.8rem; line-height:2.8rem;}

}
@media (max-width:600px) {
    .section4 .s4_title .title {padding:10rem 3rem; padding-bottom:calc(100% / 1.6 / 2 + 10rem);}
    .section4 .s4_title .title h6 {font-size:4.4rem; line-height:6rem;}
    .section4 .s4_title .title em {font-size:1.7rem; line-height:2.7rem; margin-top:1.6rem;}

    .section4 .s4_cont {margin-top:calc(-100% / 1.6 / 2);}

    .section4 .portfolio_list .js_portfolio_slider .swiper-slide .item .thumb {border-radius:1.6rem;}
    .section4 .portfolio_list .js_portfolio_slider .swiper-slide .item .info p {font-size:1.6rem; line-height:2.4rem; max-height:4.8rem;}
    .section4 .portfolio_list .js_portfolio_slider .swiper-slide .item .info em {font-size:1.7rem; line-height:2.7rem; margin-top:0.3rem;}
    .section4 .s4_cont .btn {margin-top:4.2rem;}
    .section4 .s4_cont .btn a {width:20rem; font-size:1.7rem; line-height:2.7rem;}

}
@media (max-width:479px) {
    .section4 .s4_title .title {padding:8rem 3rem; padding-bottom:calc(100% / 1.4 / 2 + 8rem);}
    .section4 .s4_title .title h6 {font-size:4rem; line-height:5.6rem;}
    .section4 .s4_title .title em {font-size:1.6rem; line-height:2.6rem; margin-top:1.2rem;}

    .section4 .s4_cont {margin-top:calc(-100% / 1.4 / 2);}

    .section4 .portfolio_list .js_portfolio_slider {padding:0 2.2rem;}
    .section4 .portfolio_list .js_portfolio_slider .swiper-slide .item .thumb {border-radius:1.2rem;}
    .section4 .portfolio_list .js_portfolio_slider .swiper-slide .item .thumb .img::before {font-size:1.9rem; line-height:2.9rem;}

    .section4 .portfolio_list .js_portfolio_slider .swiper-slide .item .info p {font-size:1.5rem; line-height:2.3rem;}
    .section4 .portfolio_list .js_portfolio_slider .swiper-slide .item .info em {font-size:1.6rem; line-height:2.6rem; max-height:5.2rem;}

    .section4 .s4_cont .btn {margin-top:4rem; padding:0 2.2rem;}
    .section4 .s4_cont .btn a {width:100%; font-size:1.6rem; line-height:2.6rem;}
}
@media (max-width:420px) {
    .section4 .s4_title .title {padding:6.4rem 3rem; padding-bottom:calc(100% / 1.4 / 2 + 6rem);}
    .section4 .s4_title .title h6 {font-size:3.6rem; line-height:5.2rem;}
    .section4 .s4_title .title em {font-size:1.5rem; line-height:2.5rem; margin-top:0.8rem;}
    .section4 .portfolio_list .js_portfolio_slider .swiper-slide .item .thumb .img::before {font-size:1.8rem; line-height:2.8rem;}
    .section4 .portfolio_list .js_portfolio_slider .swiper-slide .item .info p {font-size:1.4rem; line-height:2.2rem;}
    .section4 .portfolio_list .js_portfolio_slider .swiper-slide .item .info em {font-size:1.5rem; line-height:2.5rem; margin-top:0.2rem; max-height:5rem;}

    .section4 .s4_cont .btn {margin-top:3.6rem; padding:0 2rem;}
    .section4 .s4_cont .btn a {font-size:1.5rem; line-height:2.5rem; padding:1.3rem 0;}
}
@media (max-width:320px) {
    .section4 .s4_title .title h6 {font-size:3.2rem; line-height:4.6rem;}
}



.section5 .sec_cont {width:100%; max-width:148rem; margin: auto; margin-top:6.4rem; transform: translateY(4rem); opacity:0;}
.section5 .sec_cont.act {animation:sec_ani 0.5s ease forwards;}

.section5 .sec_cont .partnerList {width:100%; position: relative; overflow: hidden;}
.section5 .sec_cont .partnerList::before {content:""; width:10rem; height:100%; position: absolute; top:0; left:0; background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 70%); z-index:2;}
.section5 .sec_cont .partnerList::after {content:""; width:10rem; height:100%; position: absolute; top:0; right:0; background: linear-gradient(270deg, #FFFFFF 30%, rgba(255, 255, 255, 0) 100%); z-index:2;}
.section5 .sec_cont .partnerList .p_list {display:flex; white-space: nowrap;}
.section5 .sec_cont .partnerList .p_list + .p_list {margin-top:6.4rem;} 
.section5 .sec_cont .partnerList .p_list .list {display:flex; gap:6rem; width: max-content;}
.section5 .sec_cont .partnerList .p_list .list div img {display: block;}

.section5 .sec_cont .partnerList .p_list1 .list {animation: marquee1 16s linear infinite;}
.section5 .sec_cont .partnerList .p_list2 .list {animation: marquee2 16s linear infinite;}
.section5 .sec_cont .partnerList .p_list3 .list {animation: marquee3 16s linear infinite;}
.section5 .sec_cont .partnerList .p_list4 .list {animation: marquee4 16s linear infinite;}

@keyframes marquee1 {
    0%   { transform: translateX(0);}
    100% { transform: translateX(-155.5rem);}
}
@keyframes marquee2 {
    0%   { transform: translateX(-154.7rem);}
    100% { transform: translateX(0);}
}
@keyframes marquee3 {
    0%   { transform: translateX(0);}
    100% { transform: translateX(-148.7rem);}
}
@keyframes marquee4 {
    0%   { transform: translateX(-149.7rem);}
    100% { transform: translateX(0);}
}

@media (max-width:1300px) {
    .section5 .sec_cont {margin-top:6rem;}
    .section5 .sec_cont .partnerList .p_list + .p_list {margin-top:6rem;} 
}
@media (max-width:1200px) {
    .section5 .sec_cont {margin-top:5.6rem;}
    .section5 .sec_cont .partnerList .p_list + .p_list {margin-top:5.6rem;} 
    .section5 .sec_cont .partnerList .p_list .list {gap:5.2rem;}

    @keyframes marquee1 {
        0%   { transform: translateX(0);}
        100% { transform: translateX(-149.1rem);}
    }
    @keyframes marquee2 {
        0%   { transform: translateX(-147.5rem);}
        100% { transform: translateX(0);}
    }
    @keyframes marquee3 {
        0%   { transform: translateX(0);}
        100% { transform: translateX(-142.3rem);}
    }
    @keyframes marquee4 {
        0%   { transform: translateX(-143.3rem);}
        100% { transform: translateX(0);}
    }
}
@media (max-width:1023px) {
    .section5 .sec_cont {margin-top:5rem;}
    .section5 .sec_cont .partnerList::before,
    .section5 .sec_cont .partnerList::after {width:8rem;}
    .section5 .sec_cont .partnerList .p_list + .p_list {margin-top:5rem;} 
    .section5 .sec_cont .partnerList .p_list .list {gap:4.6rem;}

    @keyframes marquee1 {
        0%   { transform: translateX(0);}
        100% { transform: translateX(-144.3rem);}
    }
    @keyframes marquee2 {
        0%   { transform: translateX(-142.1rem);}
        100% { transform: translateX(0);}
    }
    @keyframes marquee3 {
        0%   { transform: translateX(0);}
        100% { transform: translateX(-137.5rem);}
    }
    @keyframes marquee4 {
        0%   { transform: translateX(-138.5rem);}
        100% { transform: translateX(0);}
    }
}
@media (max-width:767px) {
    .section5 .sec_cont {margin-top:4.2rem;}
    .section5 .sec_cont .partnerList::before,
    .section5 .sec_cont .partnerList::after {width:7rem;}
    .section5 .sec_cont .partnerList .p_list + .p_list {margin-top:4.2rem;} 
    .section5 .sec_cont .partnerList .p_list .list {gap:4.2rem;}
    .section5 .sec_cont .partnerList .p_list .list div img {height:4.6rem;}

    @keyframes marquee1 {
        0%   { transform: translateX(0);}
        100% { transform: translateX(-136.616rem);}
    }
    @keyframes marquee2 {
        0%   { transform: translateX(-134.298rem);}
        100% { transform: translateX(0);}
    }
    @keyframes marquee3 {
        0%   { transform: translateX(0);}
        100% { transform: translateX(-130.1rem);}
    }
    @keyframes marquee4 {
        0%   { transform: translateX(-131.058rem);}
        100% { transform: translateX(0);}
    }
}
@media (max-width:600px) {
    .section5 .sec_cont {margin-top:4rem;}
    .section5 .sec_cont .partnerList::before,
    .section5 .sec_cont .partnerList::after {width:6rem;}
    .section5 .sec_cont .partnerList .p_list + .p_list {margin-top:3.8rem;} 
    .section5 .sec_cont .partnerList .p_list .list {gap:3.8rem;}
    .section5 .sec_cont .partnerList .p_list .list div img {height:3.8rem;}

    @keyframes marquee1 {
        0%   { transform: translateX(0);}
        100% { transform: translateX(-115.5rem);}
    }
    @keyframes marquee2 {
        0%   { transform: translateX(-113.914rem);}
        100% { transform: translateX(0);}
    }
    @keyframes marquee3 {
        0%   { transform: translateX(0);}
        100% { transform: translateX(-110.116rem);}
    }
    @keyframes marquee4 {
        0%   { transform: translateX(-110.906rem);}
        100% { transform: translateX(0);}
    }
}
@media (max-width:479px) {
    .section5 .sec_cont {margin-top:3.2rem;}
}
@media (max-width:420px) {
    .section5 .sec_cont {margin-top:2.8rem;}
}



.section6 {width:100%; position: relative;}
.section6 .sec_cont {width:100%; margin:0!important; background:url("/skin/site_m/responsive-food/img/main/s6_pc_bg_img.jpg")no-repeat right center / cover; padding:10rem 0; padding-bottom:18rem; position: relative; overflow: hidden; transform: translateY(4rem); opacity:0;}
.section6 .sec_cont::before {content:""; width:55%; height:100%; background: linear-gradient(270deg, rgba(238, 241, 245, 0) 0%, #EEF1F5 76.59%); z-index:1; position: absolute; top:0; left:0;}
.section6 .sec_cont.act {animation:sec_ani 0.5s ease forwards;}

.section6 .sec_cont .sec_tit {position: relative; z-index:2;}
.section6 .sec_cont .sec_tit .btn {width:100%; margin-top:6.4rem; display:flex; transform: translateY(4rem); opacity:0;}
.section6 .sec_cont .sec_tit .btn a {width:24rem; background-color:var(--color-gray-800); font-size:2rem; color:var(--color-white); font-weight:800; letter-spacing:-0.05em; line-height:3rem; padding:1.4rem 0; border-radius:10rem; text-align: center;}
.section6 .sec_cont .sec_tit.act .btn {animation:sec_ani 0.5s ease forwards; animation-delay:0.2s;}

@media (hover: hover) {
    .section6 .sec_cont .sec_tit .btn a {transition:all 0.2s;}
    .section6 .sec_cont .sec_tit .btn a:hover {background-color:var(--color-action); color:var(--color-white)}
}
@media (max-width:1500px) {
    .section6 .sec_cont .sec_tit .btn {margin-top:5.6rem;}
}
@media (max-width:1400px) {
    .section6 .sec_cont {padding:9rem 0; padding-bottom:16rem;}
    .section6 .sec_cont .sec_tit .btn {margin-top:5rem;}
}
@media (max-width:1300px) {
    .section6 .sec_cont {padding:8.6rem 0; padding-bottom:15rem;}
    .section6 .sec_cont .sec_tit .btn {margin-top:4.8rem;}
    .section6 .sec_cont .sec_tit .btn a {font-size:1.8rem; line-height:2.4rem; padding:1.2rem 2.4rem;}
}
@media (max-width:1200px) {
    .section6 .sec_cont {padding:8rem 0; padding-bottom:12rem;}
    .section6 .sec_cont .sec_tit .btn a {width:22rem; font-size:1.7rem; line-height:2.7rem; }
}
@media (max-width:1023px) {
    .section6 .sec_cont {padding:8rem 0; padding-bottom:11rem;}
}
@media (max-width:900px) {
    .section6 .sec_cont {background-position:center right -10rem;}
    .section6 .sec_cont .sec_tit .btn a {width:23rem; font-size:1.9rem; line-height:2.9rem;}
}
@media (max-width:767px) {
    .section6 .sec_cont {height:64rem; padding:10rem 0;}
    .section6 .sec_cont {background:url("/skin/site_m/responsive-food/img/main/s6_m_bg_img.jpg")no-repeat bottom center / cover;}
    .section6 .sec_cont::before {width:100%; height:64%; background: linear-gradient(180deg, #EEF1F5 29.18%, rgba(238, 241, 245, 0) 100%);}
    .section6 .sec_cont .sec_tit .btn {margin-top:5rem;}
    .section6 .sec_cont .sec_tit .btn a {width:22rem; font-size:1.8rem; line-height:2.8rem;}
}
@media (max-width:600px) {
    .section6 .sec_cont {height:64rem; padding:8rem 0;}
    .section6 .sec_cont .sec_tit .btn {margin-top:4rem;}
    .section6 .sec_cont .sec_tit .btn a {width:20rem; font-size:1.7rem; line-height:2.7rem;}
}
@media (max-width:479px) {
    .section6 .sec_cont {height:54rem; padding:6.4rem 0;}
    .section6 .sec_cont .sec_tit .btn {margin-top:4rem;}
    .section6 .sec_cont .sec_tit .btn a {width:100%; font-size:1.6rem; line-height:2.6rem;}
}
@media (max-width:420px) {
    .section6 .sec_cont .sec_tit .btn {margin-top:3.6rem;}
    .section6 .sec_cont .sec_tit .btn a {font-size:1.5rem; line-height:2.5rem; padding:1.3rem 0;}
}