.bullet_title { font-size: var(--title-20); } .bullet_title h4 { display: flex; align-items: baseline; gap: 14px; color: var(--black-color01); font-weight: 500; font-size: 160%; letter-spacing: -0.03em; } .bullet_title h4::before { content: ''; display: block; width: 8px; height: 8px; border-radius: 100%; background: var(--point-color03); flex-shrink: 0; translate: 0 -7px; } @media (max-width: 860px){ .bullet_title h4 { gap: 10px; } .bullet_title h4::before { width: 6px; height: 6px; translate: 0 -5px; } } /*─────────────────────────────────────────────────────────── About 경영철학 ───────────────────────────────────────────────────────────*/ #container:has(.about_philo) { padding-bottom: 0; } .about_philo { background: var(--point-bg); box-sizing: border-box; padding-bottom: 180px; } .about_philo .hd_title { padding-block: 117px 57px; } .about_philo .flex_des { display: flex; flex-wrap: wrap; gap: 40px; } .about_philo .flex_des li { position: relative; width: calc(100% / 3 - 26.67px); box-sizing: border-box; padding-block: 39px 119px; padding-inline: 40px; border-radius: var(--radius-10); box-shadow: var(--shadow-03); background: var(--point-white); } .about_philo .flex_des dl { font-size: var(--title-20); } .about_philo .flex_des dt { font-size: 140%; font-weight: 600; color: var(--black-color03); letter-spacing: -0.03em; } .about_philo .flex_des dd { font-size: 90%; font-weight: 400; color: var(--black-color05); line-height: 1.67; letter-spacing: -0.03em; margin-top: 20px; min-height: 90px; } .about_philo .flex_des .ico_wrap { position: absolute; right: 40px; bottom: 40px; width: 60px; aspect-ratio: 1 auto; margin-left: auto; margin-top: 19px; } @media (max-width: 1023px){ .about_philo { padding-bottom: clamp(100px, 18vw, 180px); } .about_philo .hd_title { padding-block: clamp(70px, 10vw, 117px) clamp(30px, 6vw, 57px); } .about_philo .flex_des { gap: 20px; } .about_philo .flex_des li { width: calc(100% / 3 - 13.34px); padding-block: clamp(25px, 3vw, 39px) clamp(60px, 10vw, 119px); padding-inline: clamp(25px, 3vw, 40px); } .about_philo .flex_des dd { margin-top: clamp(10px, 2vw, 20px); } .about_philo .flex_des .ico_wrap { right: clamp(25px, 3vw, 40px); bottom: clamp(25px, 3vw, 40px); } } @media (max-width: 860px){ .about_philo .flex_des li { width: 100%; } .about_philo .flex_des dt { font-size: 130%; } .about_philo .flex_des .ico_wrap { width: 50px; } } /*─────────────────────────────────────────────────────────── 회사연혁 ───────────────────────────────────────────────────────────*/ #container:has(.history_wrap) .hd_title { padding-block: 97px 57px; } .history_wrap .cont { display: flex; flex-direction: column; } .history_wrap .thumb_wrap { position: relative; box-sizing: border-box; padding-bottom: 79px; } .history_wrap .thumb_wrap::before { content: ''; position: absolute; width: 1px; height: 100px; background: var(--border-color01); left: 50%; top: calc(100% - 79px); } .history_wrap .thumb_wrap::after { content: ''; position: absolute; width: 1px; height: 0; background: var(--point-color02); left: 50%; top: calc(100% - 79px); transition: all 0.4s; } .history_wrap .thumb { border-radius: var(--radius-40); overflow: clip;} .history_wrap .thumb img { width: 100%; height: 100%; object-fit: cover; min-height: 250px; } .history_wrap .history_box { position: relative; font-size: var(--title-20); width: 50%; box-sizing: border-box; } .history_wrap .history_box:not(:last-child)::before { content: ''; position: absolute; top: 23px; width: 1px; height: 100%; background: var(--border-color01); } .history_wrap .history_box:not(:last-child)::after { content: ''; position: absolute; top: 23px; width: 1px; height: 0; background: var(--point-color02); transition: all 0.4s; } .history_wrap .history_box h3::before { content: ''; position: absolute; top: 23px; width: 9px; height: 9px; border-radius: 100%; background: var(--black-color08); box-shadow: 0 0 0 7px var(--border-color01); z-index: 2; } .history_wrap .history_box h3::after { content: ''; position: absolute; top: 27px; width: 60px; height: 1px; border-top: 1px dashed var(--border-color01); box-sizing: border-box; } .history_wrap .history_box:not(:last-child) { padding-bottom: 58px; } .history_wrap .history_box:nth-child(even) { align-self: flex-end; padding-left: 90px; } .history_wrap .history_box:nth-child(even) h3::before { left: -4px; } .history_wrap .history_box:nth-child(even) h3::after { left: 0; } .history_wrap .history_box:nth-child(even)::before { left: 0; } .history_wrap .history_box:nth-child(even)::after { left: 0; } .history_wrap .history_box:nth-child(odd) { align-self: flex-start; text-align: right; padding-right: 91px; } .history_wrap .history_box:nth-child(odd)::before { left: 100%; } .history_wrap .history_box:nth-child(odd)::after { left: 100%; } .history_wrap .history_box:nth-child(odd) h3::before { left: calc(100% - 4px); } .history_wrap .history_box:nth-child(odd) h3::after { left: calc(100% - 60px); } .history_wrap .history_box > div { position: static; } .history_wrap .history_box h3 { color: var(--black-color01); font-size: 220%; font-weight: 600; letter-spacing: -0.03em; } .history_wrap .history_box h3 > span { display: block; } .history_wrap .history_box h4 { color: var(--point-color02); font-size: 120%; font-weight: 600; letter-spacing: -0.03em; margin-top: 16px; } .history_wrap .history_box ul { margin-top: 13px; } .history_wrap .history_box li { color: var(--black-color05); font-size: 90%; font-weight: 400;line-height: 1.56; letter-spacing: -0.03em; } .history_wrap .history_box li small { color: var(--black-color08); font-size: inherit; font-weight: inherit; } .history_wrap .history_box li + li { margin-top: 6px; } .history_wrap .thumb_wrap.aos-animate::after { height: 100px; } .history_wrap .history_box.aos-animate::after { height: 100%; } .history_wrap .cont > div.aos-animate + div h3::before { background: var(--point-color02); box-shadow: 0 0 0 7px #cedbe4; } @media (max-width: 1023px){ .history_wrap .thumb_wrap { padding-bottom: clamp(40px, 8vw, 79px); } .history_wrap .thumb_wrap::before { top: calc(100% - clamp(40px, 8vw, 79px)); } .history_wrap .thumb_wrap::after { top: calc(100% - clamp(40px, 8vw, 79px)); } .history_wrap .thumb_wrap.aos-animate::after { height: clamp(55px, 11vw, 100px); } .history_wrap .history_box:nth-child(even) { padding-left: clamp(45px, 9vw, 90px); } .history_wrap .history_box:nth-child(odd) { padding-right: clamp(45px, 9vw, 91px); } .history_wrap .history_box:not(:last-child) { padding-bottom: clamp(40px, 5vw, 58px); } .history_wrap .history_box h4 { margin-top: clamp(8px, 1.6vw, 16px); } .history_wrap .history_box ul { margin-top: clamp(7px, 1.3vw, 13px); } .history_wrap .history_box h3::after { width: clamp(30px, 6vw, 60px); } .history_wrap .history_box:nth-child(odd) h3::after { left: calc(100% - clamp(30px, 5vw, 60px)); } } @media (max-width: 860px){ .history_wrap .history_box h3 { font-size: 200%; } .history_wrap .history_box h3::before { top: 19px; } .history_wrap .history_box h3::after { top: 22px; } } @media (max-width: 640px){ .history_wrap .thumb { border-radius: 10px; } .history_wrap .thumb_wrap::after { left: 7px; } .history_wrap .thumb_wrap::before { left: 7px; } .history_wrap .history_box { width: 100%; } .history_wrap .history_box:nth-child(odd) { align-self: flex-end; text-align: left; padding-right: unset; padding-left: clamp(45px, 9vw, 91px); } .history_wrap .history_box:nth-child(odd)::before { left: 0; } .history_wrap .history_box h3::before { width: 6px; height: 6px; box-shadow: 0 0 0 4px var(--border-color01); } .history_wrap .history_box:nth-child(odd) h3::before { left: 5px; } .history_wrap .history_box:nth-child(odd) h3::after { left: 2px; } .history_wrap .history_box:nth-child(even) h3::before { left: 5px; } .history_wrap .history_box:nth-child(even) h3::after { left: 2px; } .history_wrap .history_box:nth-child(odd)::before { left: 7px; } .history_wrap .history_box:nth-child(odd)::after { left: 7px; } .history_wrap .history_box:nth-child(even)::before { left: 7px; } .history_wrap .history_box:nth-child(even)::after { left: 7px; } .history_wrap .cont > div.aos-animate + div h3::before { box-shadow: 0 0 0 4px #cedbe4; } } @media (max-width: 479px){ .history_wrap .history_box h3 { font-size: 180%; } .history_wrap .history_box h3::before { top: 15px; } .history_wrap .history_box h3::after { top: 18px; } .history_wrap .history_box h4 { font-size: 110%; } } /*─────────────────────────────────────────────────────────── 주요 고객사 ───────────────────────────────────────────────────────────*/ #container:has(.partner_list_cont) { padding-bottom: 0; } #container:has(.partner_list_cont) .hd_title.hd_m { padding-block: 0 59px; } .partner_list_cont { box-sizing: border-box; padding-bottom: 140px; } .img_hd h4 em { display: flex; justify-content: center; align-items: flex-start; gap: 11px; } .img_hd small { margin-top: 2px; } .partner_list { display: flex; flex-wrap: wrap; } .partner_list > li { position: relative; width: calc(100% / 4); box-sizing: border-box; padding: 30px; border-radius: 100%;} .partner_list > li::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: inherit; border: 1px dashed; box-sizing: border-box; } .partner_list > li::after { content: ''; position: absolute; left: -1px; top: -1px; width: calc(100% + 2px); height: calc(100% + 2px); border-radius: inherit; z-index: 1; } .partner_list > li .circle_box { position: relative; display: flex; justify-content: center; align-items: center; box-sizing: border-box; border: 10px solid; width: 100%; aspect-ratio: 1 auto; border-radius: 100%; padding: 30px; z-index: 2; } .partner_list > li:nth-child(odd) > div { border-color: var(--point-color02); } .partner_list > li:nth-child(even) > div { border-color: var(--point-color03); } .partner_list > li:nth-child(odd)::before { border-color: var(--point-color02); } .partner_list > li:nth-child(odd)::after { background: linear-gradient(0deg,rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 0) 100%); } .partner_list > li:nth-child(even)::before { border-color: var(--point-color03); } .partner_list > li:nth-child(even)::after { background: linear-gradient(180deg,rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 0) 100%); } .partner_list > li dl { font-size: var(--title-20); text-align: center; } .partner_list > li dt { font-size: 120%; font-weight: 600; line-height: 1.5; letter-spacing: -0.03em; } .partner_list > li dd { color: var(--black-color05); font-size: 85%; line-height: 1.59; letter-spacing: -0.03em; font-weight: 400; margin-top: 10px; } .partner_list > li:nth-child(odd) dt { color: var(--point-color02); } .partner_list > li:nth-child(even) dt { color: var(--point-color03); } .partner_list > li > .arw { content: ''; position: absolute; left: 0; top: 50%; translate: -50% -50%; width: 14px; height: 12px; background-size: 100% auto; z-index: 2; } .partner_list > li:nth-child(even) > .arw { background: url('../images/sub/ico_partner_arw.svg') no-repeat center; } .partner_list > li:not(:first-child):nth-child(odd) > .arw { background: url('../images/sub/ico_partner_arw02.svg') no-repeat center; } .partner_cont { background: var(--gray-bg02); box-sizing: border-box; padding-bottom: 180px; } .partner_cont .hd_title { padding-block: 118px 56px; } .partner_box .flex_des { margin-top: 27px; display: flex; flex-wrap: wrap; gap: 16px; } .partner_box .flex_des li { display: flex; justify-content: center; align-items: center; width: calc(100% / 6 - 13.34px); background: var(--point-white); border-radius: var(--radius-10); box-sizing: border-box; height: auto; overflow: hidden; position: relative; } .partner_box + .partner_box { margin-top: 79px; } @media (max-width: 1300px){ .partner_list > li { padding: 15px; } } @media (max-width: 1210px){ .partner_list > li .circle_box { padding: 20px; } } @media (max-width: 1140px){ .partner_list { justify-content: center; } .partner_list > li { width: calc(100% / 2); padding: clamp(15px, 2vw, 30px); max-width: 362px; } .partner_list > li .circle_box { padding: clamp(15px, 3vw, 30px); } .partner_list > li:nth-child(2) > .arw { transform: rotate(-90deg); } .partner_list > li:nth-child(3) { order: 4; } .partner_list > li:nth-child(4) { order: 3; } .partner_list > li:nth-child(3) > .arw { top: 0; left: 50%; transform: rotate(180deg); } .partner_list > li:nth-child(4) > .arw { right: 0; top: 50%; left: unset; translate: 50% -50%; transform: rotate(90deg); } .partner_list > li:last-child .arw { display: block; } } @media (max-width: 1023px){ #container:has(.partner_list_cont) .hd_title.hd_m { padding-block: 0 clamp(35px, 6vw, 59px); } .partner_list_cont { padding-bottom: clamp(70px, 14vw, 140px); } .partner_cont { padding-bottom: clamp(100px, 18vw, 180px); } .partner_cont .hd_title { padding-block: clamp(70px, 11.8vw, 118px) clamp(30px, 6vw, 56px); } .partner_box .flex_des { margin-top: clamp(20px, 2.7vw, 27px); } .partner_box .flex_des li { width: calc(100% / 4 - 12px); } } @media (max-width: 860px){ } @media (max-width: 640px){ .partner_box .flex_des li { width: calc(100% / 3 - 10.67px); } } @media (max-width: 510px){ .partner_list > li { width: 100%; max-width: 280px; margin-inline: auto; } .partner_list > li .circle_box { border-width: 5px; } .partner_list > li:nth-child(odd)::after { background: linear-gradient(90deg,rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 0) 100%); } .partner_list > li:nth-child(even)::after { background: linear-gradient(270deg,rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 0) 100%); } .partner_list > li:nth-child(3) .arw { display: block; } .partner_list > li > .arw { left: 50%; top: 0; transform: rotate(90deg); } .partner_list > li:nth-child(3) { order: 3; } .partner_list > li:nth-child(4) { order: 4; } .partner_list > li:nth-child(2) > .arw { transform: rotate(0) } .partner_list > li:nth-child(3) > .arw { top: 0; left: 50%; transform: rotate(180deg); } .partner_list > li:nth-child(4) > .arw { left: 50%; top: 0; right: unset; translate: -50% -50%; transform: rotate(0); } } @media (max-width: 479px){ .partner_box .flex_des li { width: calc(100% / 2 - 8px); } .img_hd small { width: 130px; } } @media (max-width: 300px){ .partner_box .flex_des li { width: 100%; } } /*─────────────────────────────────────────────────────────── 조직도 ───────────────────────────────────────────────────────────*/ #container:has(.work_wrap)::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 808px; background: url('../images/sub/img_work_bg.png') no-repeat bottom / cover; } #container:has(.work_wrap) .hd_title { padding-bottom: 57px; } .work_wrap h4 { box-sizing: border-box; padding: 24px; width: 260px; height: 260px; border-radius: 100%; background: #CEDBE4; margin-inline: auto; } .work_wrap h4 div { font-size: var(--title-20); display: flex; flex-direction: column; gap: 2px; justify-content: center; align-items: center; padding: 30px; width: 100%; height: 100%; box-sizing: border-box; border: 11px solid var(--point-color02); border-radius: inherit; background: var(--point-white); box-shadow: 0 0 21px rgba(0, 0, 0, 0.25); } .work_wrap h4 em { display: block; margin-top: -2px; } .work_wrap h4 span { font-size: 220%; color: var(--point-color02); font-weight: 600; letter-spacing: 0; } .work_wrap .line_wrap { position: relative; box-sizing: border-box; margin-top: 100px; display: flex; flex-wrap: wrap; gap: 60px; } .work_wrap .line_wrap::before { content: ''; position: absolute; left: 50%; top: -100px; width: 1px; height: 100px; background: var(--border-color01); } .work_wrap .line_wrap::after { content: ''; position: absolute; left: 50%; top: 0; translate: -50% 0; width: 83.25%; height: 1px; background: var(--border-color01); } .work_wrap .line_wrap > li { flex-shrink: 0; } .work_wrap .line_wrap > li:where(:nth-child(1), :nth-child(3), :nth-child(4)) { width: calc(20% - 45px); } .work_wrap .line_wrap > li:nth-child(2) { width: calc(40% - 45px); } .work_wrap .line_wrap > li:where(:nth-child(1), :nth-child(3), :nth-child(4)) .work2 li { margin-top: 10px; } .work_wrap .line_wrap > li:nth-child(2) .work2 { position: relative; display: flex; gap: 45px; box-sizing: border-box; padding-top: 24px; margin-top: 30px; } .work_wrap .line_wrap > li:nth-child(2) .work2::before { content: ''; position: absolute; left: 50%; top: -30px; width: 1px; height: 30px; background: var(--border-color01); } /* .work_wrap .line_wrap > li:nth-child(2) .work2::after { content: ''; position: absolute; left: 50%; top: 0; translate: -49.75% 0; width: 54.4%; height: 1px; background: var(--border-color01); } */ .work_wrap .line_wrap > li:nth-child(2) .work2 li { position: relative; width: calc(100% / 2 - 22px); } .work_wrap .line_wrap > li:nth-child(2) .work2 li::after { content: ''; position: absolute; left: calc(50% + 1px); width: calc(100% + 49px); top: -26px; height: 1px; background: var(--border-color01); } .work_wrap .line_wrap > li:nth-child(2) .work2 li::before { content: ''; position: absolute; left: calc(50% + 1px); top: -26px; width: 1px; height: 24px; background: var(--border-color01); } .work_wrap .line_wrap > li:nth-child(2) .work2 li + li::after { content: ''; position: absolute; left: -47px; top: calc(50% - 2px); width: 45px; height: 1px; background: var(--border-color01); } .work_wrap .line_wrap > li:nth-child(2) .work3 { position: relative; display: flex; gap: 45px; box-sizing: border-box; padding-top: 24px; margin-top: 25px; } .work_wrap .line_wrap > li:nth-child(2) .work3::before { content: ''; position: absolute; left: 50%; top: -61px; width: 1px; height: 61px; background: var(--border-color01); } .work_wrap .line_wrap > li:nth-child(2) .work3 li { position: relative; width: calc(100% / 2 - 22px); } .work_wrap .line_wrap > li:nth-child(2) .work3 li::before { content: ''; position: absolute; left: 50%; top: -24px; width: 1px; height: 24px; background: var(--border-color01); } .work_wrap .line_wrap > li:nth-child(2) .work3 li:not(:last-child)::after { content: ''; position: absolute; left: 50%; width: calc(100% + 45px); top: -24px; height: 1px; background: var(--border-color01); } .work_wrap .line_wrap .line_box { position: relative; box-sizing: border-box; padding-top: 40px; text-align: center; font-size: var(--title-20); } .work_wrap .line_wrap .line_box::before { content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: 40px; background: var(--border-color01); } .work_wrap .line_wrap .line_box::after { content: ''; position: absolute; left: calc(50% + 1px); top: 1px; width: 9px; height: 9px; border-radius: 100%; background: var(--point-color03); translate: -50% -50%; z-index: 2; } .work_wrap .line_wrap .line_box strong { display: block; box-sizing: border-box; padding-block: 23px; padding-inline: 24px; color: var(--point-white); font-weight: 600; font-size: 110%; letter-spacing: -0.03em; background: var(--black-color01); border-radius: var(--radius-10); max-width: 235px; margin-inline: auto; } .work_wrap .line_wrap .work2 li { display: flex; justify-content: center; align-items: center; padding-block: 19px; padding-inline: 20px; box-sizing: border-box; border: 2px solid var(--point-color02); background: var(--point-white); border-radius: var(--radius-10); font-size: 100%; color: var(--point-color02); font-weight: 500; letter-spacing: -0.03em; } .work_wrap .line_wrap .work3 li { display: flex; justify-content: center; align-items: center; padding-block: 20px 19px; padding-inline: 20px; box-sizing: border-box; background: var(--point-bg); font-size: 90%; color: var(--black-color03); font-weight: 400; letter-spacing: -0.03em; border-radius: 5px; } @media (max-width: 1320px){ .work_wrap .line_wrap { gap: 40px; } .work_wrap .line_wrap > li:where(:nth-child(1), :nth-child(3), :nth-child(4)) { width: calc(20% - 30px); } .work_wrap .line_wrap > li:nth-child(2) { width: calc(40% - 30px); } } @media (max-width: 1273px){ .work_wrap .line_wrap > li:nth-child(2) .work3::before { height: 73px; top: -73px; } } @media (max-width: 1023px){ #container:has(.work_wrap) .hd_title { padding-bottom: clamp(35px, 6vw, 57px); } .work_wrap h4 { padding: clamp(15px, 2vw, 24px); } .work_wrap h4 div { padding: clamp(20px, 3vw, 30px); } .work_wrap .line_wrap { gap: 20px; } .work_wrap .line_wrap::after { width: 82%; } .work_wrap .line_wrap > li:where(:nth-child(1), :nth-child(3), :nth-child(4)) { width: calc(20% - 15px); } .work_wrap .line_wrap > li:nth-child(2) { width: calc(40% - 15px); } .work_wrap .line_wrap > li:nth-child(2) .work3::before { height: 71px; top: -71px; } .work_wrap .line_wrap .line_box:not(:nth-child(2)) strong { max-width: unset; } .work_wrap .line_wrap .line_box strong { padding-block: clamp(15px, 2vw, 23px); padding-inline: clamp(15px, 2vw, 24px); } .work_wrap .line_wrap .work2 li { padding-block: clamp(15px, 1.9vw, 19px); padding-inline: clamp(15px, 2vw, 20px); } .work_wrap .line_wrap .work3 li { padding-block: clamp(15px, 2vw, 20px); padding-inline: clamp(15px, 2vw, 20px); } } @media (max-width: 860px){ .work_wrap h4 { width: 220px; height: 220px; } .work_wrap .line_wrap .line_box strong { max-width: unset; } .work_wrap .line_wrap::after { width: 68%; } .work_wrap .line_wrap > li:where(:nth-child(1), :nth-child(3), :nth-child(4)) { width: calc(100% / 3 - 13.34px); } .work_wrap .line_wrap > li:nth-child(1) { order: 1; } .work_wrap .line_wrap > li:nth-child(2) { order: 4; width: 100%; padding-top: 0; } .work_wrap .line_wrap > li:nth-child(3) { order: 2; } .work_wrap .line_wrap > li:nth-child(4) { order: 3; } .work_wrap .line_wrap > li:nth-child(2)::before { display: none; } .work_wrap .line_wrap > li:nth-child(2)::after { display: none; } .work_wrap .line_wrap > li:nth-child(2) .work3::before { height: 56px; top: -56px; } } @media (max-width: 640px){ .work_wrap .line_wrap { margin-top: 60px; } .work_wrap .line_wrap::before { height: 60px; top: -60px; } .work_wrap .line_wrap > li:nth-child(2) .work3::before { height: 54px; top: -54px; } } @media (max-width: 479px){ .work_wrap h4 { width: 180px; height: 180px; } .work_wrap h4 div { border-width: 6px; } .work_wrap .line_wrap { gap: 20px 15px; } .work_wrap .line_wrap::after { display: none; } .work_wrap .line_wrap .line_box { width: 100%; padding-top: 25px; } .work_wrap .line_wrap .line_box::before { height: 25px; } .work_wrap .line_wrap .line_box::after { width: 7px; height: 7px; } .work_wrap .line_wrap > li:nth-child(2) { width: 100%; padding-top: 0; } .work_wrap .line_wrap > li:nth-child(2)::before { display: none; } .work_wrap .line_wrap > li:nth-child(2)::after { display: none; } .work_wrap .line_wrap > li:nth-child(1) { order: 1; } .work_wrap .line_wrap > li:nth-child(2) { order: 4; } .work_wrap .line_wrap > li:nth-child(3) { order: 2; } .work_wrap .line_wrap > li:nth-child(4) { order: 3; } .work_wrap .line_wrap > li:nth-child(3), .work_wrap .line_wrap > li:nth-child(4) { padding-top: 0; } .work_wrap .line_wrap > li:nth-child(3)::before, .work_wrap .line_wrap > li:nth-child(3)::after, .work_wrap .line_wrap > li:nth-child(4)::before, .work_wrap .line_wrap > li:nth-child(4)::after { display: none; } } @media (max-width: 400px){ .work_wrap .line_wrap > li:nth-child(2) .work3::before { height: 65px; top: -65px; } } /*─────────────────────────────────────────────────────────── 온라인 견적문의 ───────────────────────────────────────────────────────────*/ body:has(.sub_board) .sub_visual { background-image: url('../images/sub/sub_visual_board.jpg'); } body:has(.contact_info) .hd_title:not(.hd_m) { padding-bottom: 55px; } body:has(.contact_info) .hd_title.hd_m { padding-bottom: 80px; } .contact_info { display: flex; flex-wrap: wrap; justify-content: center; gap: 31px; margin-top: 7px; } .contact_info li { position: relative; display: flex; gap: 15px; align-items: baseline; box-sizing: border-box; } .contact_info li .ico_wrap { display: flex; justify-content: center; align-items: center; width: 34px; aspect-ratio: 1 auto; flex-shrink: 0; background: var(--point-bg); border-radius: 100%; box-sizing: border-box; padding: 8px; } .contact_info dl { display: flex; flex-wrap: wrap; gap: 21px; font-size: var(--title-20); } .contact_info dt { color: var(--point-color02); font-weight: 600; font-size: 90%; letter-spacing: -0.03em; } .contact_info dd { color: var(--black-color05); font-weight: 400; font-size: 90%; letter-spacing: -0.03em; } .contact_info li + li { padding-left: 31px; } .contact_info li + li::before { content: ''; position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 1px; height: 12px; background: var(--border-color01); } #wrap input[type="checkbox"] + label{font-size:var(--title-18);color:var(--black-color03);font-weight:600;letter-spacing: -0.03em; } #wrap input[type="checkbox"] + label strong{font-size:inherit;color:var(--point-color02);font-weight:600;} #wrap input[type="checkbox"] + label:before, #wrap input[type="checkbox"] + label::before { display:inline-block; content:""; width:24px; height:24px; margin:-4px 10px 0 0; vertical-align:middle; background:url("../images/sub/ico_chk.svg") no-repeat 0 50%; cursor:pointer;background-size:auto 100%; flex-shrink: 0; border-radius: 2px; overflow: hidden; } #wrap input[type="checkbox"]:checked + label:before, #wrap input[type="checkbox"]:checked + label::before { background:url("../images/sub/ico_chk_on.svg") no-repeat 0 50%;background-size:auto 100%;} #wrap .bbs_write { box-sizing: border-box; display: flex; flex-direction: column; flex-wrap: wrap; gap: 30px; padding-block: 40px; border-top: 1px solid var(--black-color00); border-bottom: 1px solid var(--border-color01); } #wrap .bbs_write .line2 { display: flex; flex-wrap: wrap; gap: 60px; } #wrap .bbs_write .line2 dl { width: calc(50% - 30px); } #wrap .bbs_write dl { display: flex; flex-wrap: wrap; width: 100%; align-items: baseline; box-sizing: border-box; } #wrap .bbs_write dl dt { width: 180px; box-sizing: border-box; padding-right: 15px; padding-left: 2px; color: var(--black-color03); font-weight: 500; font-size: var(--title-18); letter-spacing: -0.03em; } #wrap .bbs_write dl dt .require_dot { color: var(--point-color02); } #wrap .bbs_write dl dd { width: calc(100% - 180px); display: flex; align-items: center; gap: 20px; } #wrap .bbs_write dl.file_dl dd { flex-direction: column; align-items: flex-start; } #wrap .bbs_write dl.text_box { align-items: center; margin-top: 1px; } #wrap .bbs_write dl.text_box dt { box-sizing: border-box; padding-top: 16px; align-self: unset; } #wrap .bbs_write dl.text_box dd { width: calc(100% - 180px); flex-direction: column; align-items: flex-start; gap: 15px; } #wrap .bbs_write dl.text_box textarea { width: 100%; min-height: 250px; height: auto; border-radius: 6px; border: 1px solid var(--border-color01); color: var(--black-color03); font-weight: 400; font-size: var(--title-20); padding: 20px 20px 20px 18px; outline:0; } #wrap .bbs_write dl.text_box dd label { color: var(--black-color05); font-weight: 400; font-size: var(--title-17); letter-spacing: -0.03em; } #wrap .bbs_write dl.captcha_dl { margin-top: -4px; } #wrap .bbs_write dl.captcha_dl dd { gap: 10px; flex-wrap: wrap; } #wrap .bbs_write dl.captcha_dl dd .captcha_wrap { box-sizing: border-box; padding: 9px; display: flex; gap: 10px; border: 1px solid var(--border-color01); border-radius: 4px; } #wrap .bbs_write dl.captcha_dl dd .captcha_wrap #refreshCode { display: inline-flex; background:var(--point-white) url('../images/sub/ico_reset.png') no-repeat center; font-size: 0; cursor: pointer; min-width:40px; width:40px; height:40px;box-sizing: border-box;border:1px solid var(--border-color01); border-radius: 4px; } #wrap .bbs_write dl.captcha_dl dd input#captcha { width: calc(100% - 250px); max-width: 350px; } #wrap .bbs_write dl.captcha_dl dd #captcha_box { margin: 0; width: 180px; height: 40px; box-sizing: border-box; overflow: hidden; border-radius: 4px; border: 1px solid var(--black-color06); } #wrap .bbs_write dl.captcha_dl dd #captcha_box img { width: calc(100% + 2px) !important; height: calc(100% + 2px) !important; max-width: initial; max-height: initial; margin-left: -1px; margin-top: -1px; } #wrap .bbs_write input[type="text"], #wrap .bbs_write input[type="password"], #wrap .bbs_write input[type="number"], #wrap .bbs_write input[type="date"] { height: 60px; line-height: 1.5; width: 100%; border: 0; background: var(--point-white); color: var(--black-color03); font-weight: 400; font-size: var(--title-18); font-family: var(--font-type02); padding: 0 20px 0 18px; text-indent: 0; margin: 0; box-sizing: border-box; vertical-align: middle; text-align: left; outline: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; letter-spacing: -0.04em; border: 1px solid var(--border-color01); border-radius: 6px; } #wrap .bbs_write input[type="text"]::placeholder, #wrap .bbs_write input[type="password"]::placeholder, #wrap .bbs_write input[type="number"]::placeholder, #wrap .bbs_write input[type="date"]::placeholder, #wrap .bbs_write textarea::placeholder { color: var(--black-color08); font-weight: 400; } #wrap .policy_wrap { box-sizing: border-box; margin-top: 40px; display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 0; } #wrap .policy_wrap .chk_cont { display: flex; align-items: baseline; justify-content: space-between; width: 100%; } #wrap .policy_wrap .chk_cont a { font-size: var(--title-16); color: var(--black-color08); font-weight: 400; text-decoration: underline; letter-spacing: -0.03em; text-underline-offset: 4px; transform: translateY(-2px); } #wrap .policy_wrap .area_box { width: 100%; margin-top: 20px; padding: 0 15px; box-sizing: border-box; background: var(--gray-bg02); border-radius: 10px; } #wrap .policy_wrap .area_box textarea { width: 100%; height: 180px; padding: 30px 15px 16px; box-sizing: border-box; color: var(--black-color08); font-weight: 400; font-size: var(--title-16); line-height: 1.75; letter-spacing: -0.03em; border: none; resize: none; background: var(--trans-color); outline: none; } #wrap .policy_wrap .area_box textarea::-webkit-scrollbar { width: 4px;} #wrap .policy_wrap .area_box textarea::-webkit-scrollbar-thumb {background: var(--black-color01); border-radius: 2px; } #wrap .policy_wrap .area_box textarea::-webkit-scrollbar-track {border-radius: 10px;background:var(--border-color01); margin-block: 15px; } #wrap .policy_wrap + .btn_wrap { margin-top: 80px; padding-top: 0; } #wrap .btn_wrap .write_btn { background: var(--point-color02); display:block; width: 220px; height: 60px; border-radius: 60px; font-size: var(--title-20); } #wrap .btn_wrap .write_btn span { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; color: var(--point-white); font-size: 90%; font-weight: 400; letter-spacing: -0.03em; } @media (max-width: 1023px){ body:has(.contact_info) .hd_title:not(.hd_m) { padding-bottom: clamp(30px, 6vw, 59px); } body:has(.contact_info) .hd_title.hd_m { padding-bottom: clamp(35px, 8vw, 80px); } .contact_info { gap: clamp(15px, 3vw, 31px); } .contact_info li + li { padding-left: clamp(15px, 3vw, 31px); } #wrap .bbs_write { padding-block: clamp(30px, 4vw, 40px); } #wrap .bbs_write .line2 { gap: 40px; } #wrap .bbs_write .line2 dl { width: calc(50% - 20px); } #wrap .bbs_write dl dt { width: 140px; } #wrap .bbs_write dl dd { width: calc(100% - 140px); } #wrap .bbs_write dl.text_box dd { width: calc(100% - 140px); } #wrap .policy_wrap { margin-top: clamp(30px, 4vw, 40px); } #wrap .policy_wrap .area_box textarea { height: clamp(120px, 16vw, 158px); padding: clamp(20px, 3vw, 30px) clamp(15px, 2vw, 20px) clamp(10px, 1.6vw, 16px); } #wrap .policy_wrap + .btn_wrap { margin-top: clamp(40px, 8vw, 80px); } } @media (max-width: 860px){ .contact_info li .ico_wrap { width: 30px; } #wrap .bbs_write .line2 { gap: 20px; } #wrap .bbs_write .line2 dl { width: calc(50% - 10px); } #wrap .bbs_write dl dt { width: 125px; } #wrap .bbs_write dl dd { width: calc(100% - 125px); flex-direction: column; align-items: flex-start; } #wrap .bbs_write dl.captcha_dl dd input#captcha { max-width: unset; width: 100%; } #wrap .bbs_write dl.text_box dd { width: calc(100% - 125px); } } @media (max-width: 767px){ .contact_info li .ico_wrap { width: 26px; } #wrap .bbs_write { gap: 15px; } #wrap .bbs_write .line2 { gap: 15px; } #wrap .bbs_write .line2 dl { width: 100%; } #wrap .bbs_write dl dt { font-size: var(--title-19); } #wrap .bbs_write input[type="text"], #wrap .bbs_write input[type="password"], #wrap .bbs_write input[type="number"], #wrap .bbs_write input[type="date"] { padding: 0 15px 0 15px; height: 45px; font-size: var(--title-19); border-radius: 3px; } #wrap .bbs_write dl.text_box dt { display: none; } #wrap .bbs_write dl.text_box dd { width: 100%; } #wrap .bbs_write dl.text_box textarea { padding: 15px; min-height: clamp(200px, 25vw, 250px); font-size: var(--title-19); border-radius: 3px; } #wrap .bbs_write dl.captcha_dl dd .captcha_wrap { border-radius: 3px; } #wrap .bbs_write dl.captcha_dl dd #captcha_box { width: 140px; height: 30px; border-radius: 3px; } #wrap .bbs_write dl.captcha_dl dd .captcha_wrap #refreshCode { width: 30px; height: 30px; min-width: 30px; border-radius: 3px; } #wrap .policy_wrap .area_box { border-radius: 5px; } } @media (max-width: 535px){ #wrap .bbs_write dl.captcha_dl dd input#captcha { width: 100%; } } @media (max-width: 640px){ #wrap .btn_wrap .write_btn { width: 180px; } } @media (max-width: 479px){ .contact_info dt { display: none; } #wrap input[type="checkbox"] + label:before, #wrap input[type="checkbox"] + label::before { width: 20px; height: 20px; margin: -2px 5px 0 0; } #wrap .bbs_write dl.captcha_dl dd #captcha_box { width: 130px; height: 30px; } #wrap .btn_wrap .write_btn { width: 150px; height: 50px; } } @media (max-width: 345px){ #wrap .bbs_write dl.captcha_dl dd #captcha_box { width: calc(100% - 40px); } } @media (max-width: 336px){ .contact_info li + li { padding-left: 0; } .contact_info li + li::before { display: none; } } /*─────────────────────────────────────────────────────────── 제품 리스트페이지 ───────────────────────────────────────────────────────────*/ body:has(.sub_goods) .sub_visual { background-image: url('../images/sub/sub_visual_partner.jpg'); } body:has(.sub_goods) #container { padding-top: 100px; } body:has(.sub_goods) #container > .hd_title { display: none; } #wrap .sub_list .list_array { margin: 0; margin-bottom: 25px; } #wrap .sub_list .list_array .list_count { color: var(--black-color06); font-weight: 400; font-size: var(--title-17); letter-spacing: -0.03em; line-height: 30px; height: auto; vertical-align: top; display: inline-block; text-align: left; } #wrap .sub_list .list_array .list_count span { color: var(--black-color03); font-weight: 500; font-size: inherit; } #wrap .sub_list .list_Galleryform ul li { position: relative; width: 100%; margin: 0; box-sizing: border-box; position: relative; z-index: 1; } #wrap .sub_list .list_Galleryform ul:after { display: none; } #wrap .sub_list .list_Galleryform > ul { display: flex; gap: 40px; flex-wrap: wrap; } #wrap .sub_list .list_Galleryform > ul > li { width: calc(100% / 3 - 26.67px); box-sizing: border-box; border: 1px solid var(--border-color01); border-radius: var(--radius-20); transition: all 0.4s;; } #wrap .sub_list .list_Galleryform > ul > li > a { border-radius: inherit; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5; } #wrap .sub_list .list_Galleryform > ul > li .ico_plus { width: 48px; aspect-ratio: auto 1; border-radius: 100%; position: absolute; right: 30px; top: 30px; background: var(--black-color01); opacity: 0; transition: all 0.4s; } #wrap .sub_list .list_Galleryform > ul > li .ico_plus::before { position: absolute; left: 50%; top: 50%; translate: -50% -50%; content: ''; display: block; width: 12px; height: 2px; background: var(--point-white); } #wrap .sub_list .list_Galleryform > ul > li .ico_plus::after { position: absolute; left: 50%; top: 50%; translate: -50% -50%; content: ''; display: block; width: 2px; height: 12px; background: var(--point-white); } #wrap .sub_list .list_Galleryform dl { font-size: var(--title-20); box-sizing: border-box; padding-block: 32px 36px; padding-inline: 29px; } #wrap .sub_list .list_Galleryform dt { color: var(--black-color03); font-weight: 600; font-size: 120%; line-height: 1.5; letter-spacing: -0.03em; } #wrap .sub_list .list_Galleryform dd { margin-top: 23px; color: var(--black-color05); font-weight: 400; font-size: 80%; line-height: 1.8; letter-spacing: -0.03em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; } #wrap .sub_list .list_Galleryform .img_box { background: var(--gray-bg02); border-radius: var(--radius-20) var(--radius-20) 0 0; } #wrap .sub_list .list_Galleryform .img_box > img { mix-blend-mode: darken; } #wrap .sub_list .list_Galleryform > ul > li::before { content: ''; position: absolute; width: calc(100% - 2px); height: calc(100% - 2px); inset: 0; border: 2px solid var(--black-color01); z-index: 2; border-radius: inherit; opacity: 0; transition: all 0.4s; } #wrap .view_btn { min-height: auto; line-height: 1.3; } #wrap .paging { display: flex; gap: 10px; justify-content: center; align-items: center; margin: 0; margin-top: 80px; min-height: unset; padding-top: 0; line-height: 1.3; } #wrap .paging a { display: inline-flex; align-items: center; justify-content: center; font-size: var(--title-17); font-weight: 400; color: var(--black-color08); padding: 0; border: 0; box-sizing: border-box; min-width: 40px; min-height: 40px; width: auto; height: auto; line-height: 1; text-align: center; vertical-align: top; font-family: var(--font-type01); margin: 0; padding-right: 1px; padding-top: 1px; } #wrap .paging :is(.on a, a.on) { border-radius: 100%; background: var(--point-color02); color: var(--point-white); font-weight: 500; } #wrap .paging .arrow a {font-size:0; min-width:34px; background:no-repeat center; } #wrap .paging .arrow a img { display: none; } #wrap .paging .arrow.first a {background-image:url("../images/sub/ico_pagi_first.svg");} #wrap .paging .arrow.prev a {background-image:url("../images/sub/ico_pagi_prev.svg"); margin-right:10px;} #wrap .paging .arrow.next a {background-image:url("../images/sub/ico_pagi_next.svg"); margin-left:10px;} #wrap .paging .arrow.last a {background-image:url("../images/sub/ico_pagi_last.svg");} #wrap .sub_cate_wrap { box-sizing: border-box; } #wrap .sub_cate_wrap .sub_cate { margin: 0; line-height: inherit; } #wrap .sub_cate_wrap .sub_cate:after { display: none; } #wrap .sub_cate_wrap .sub_cate li { padding: 0; line-height: inherit; float: unset; text-align: left; box-sizing: border-box; vertical-align: top; } #wrap .sub_cate_wrap .sub_cate li + li:before { display: none; } #wrap .sub_cate_wrap { margin-bottom: 0; border-top: 0; border-bottom: 0; } #wrap .sub_cate_wrap .partner_cate { display: flex; gap: 20px; margin: 0; line-height: unset; vertical-align: top; flex-wrap: nowrap; box-sizing: border-box; } #wrap .sub_cate_wrap .partner_cate li { padding: 0; line-height: unset; font-size: 0; float: unset; text-align: left; box-sizing: border-box; vertical-align: top; width: calc(100% / 4 - 15px); display: flex; justify-content: center; align-items: center; background: #f3f6f8; border-radius: var(--radius-70); } #wrap .sub_cate_wrap .partner_cate li a { font-size: inherit; color: #666; font-weight: 400; display: flex; justify-content: center; align-items: center; line-height: inherit; vertical-align: top; padding-block: clamp(7px, 1.5vw, 15px); padding-inline: clamp(15px, 4.5vw, 84px); box-sizing: border-box; } #wrap .sub_cate_wrap .partner_cate li a img { mix-blend-mode: darken; } #wrap .sub_cate_wrap .partner_cate:after { display: none; } #wrap .sub_cate_wrap .partner_cate li + li:before { display: none; } #wrap .sub_cate_wrap:has(.partner_cate) { border-bottom: 1px solid var(--border-color01); margin-bottom: 40px; padding-bottom: 34px; } #wrap .sub_cate_wrap:has(.low_cate) { position: relative;max-width: 100%;width:100%;padding-right:0;margin-bottom: 93px; overflow: hidden; box-sizing:border-box;} #wrap .sub_cate_wrap:has(.low_cate)::before { content: ''; position: absolute; right: 0; top: 0; width: 80px; height:100%; background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, #FFF 78.75%); z-index: 2;} #wrap .sub_cate_wrap .low_cate li { font-size: var(--title-20); width: auto; } #wrap .sub_cate_wrap .low_cate li a { color: var(--black-color08); font-weight: 400; font-size: 90%; letter-spacing: -0.03em; transition: all 0.4s; } #wrap .sub_cate_wrap .low_cate li.on a { font-weight: 600; color: var(--point-color02); } #wrap .sub_cate_wrap .partner_cate li.on { background: var(--point-white); border: 2px solid var(--point-color02); } #wrap .sub_cate_wrap .low_cate:not(.swiper-wrapper) { display: flex; gap: 60px; } @media (hover: hover) and (pointer: fine){ #wrap .sub_list .list_Galleryform > ul > li:hover .ico_plus { opacity: 1; } #wrap .sub_list .list_Galleryform > ul > li:hover { border-color: var(--trans-color); } #wrap .sub_list .list_Galleryform > ul > li:hover::before { opacity: 1; } #wrap .sub_cate_wrap .low_cate li:hover a { color: var(--point-color02); } } @media (max-width: 1023px){ body:has(.sub_goods) #container { padding-top: clamp(32px, 9vw, 100px); } #wrap .sub_list .list_array { margin-bottom: clamp(15px, 3vw, 25px); } #wrap .sub_list .list_Galleryform > ul { gap: 40px 30px; } #wrap .sub_list .list_Galleryform > ul > li { width: calc(100% / 2 - 15px); } #wrap .sub_list .list_Galleryform dl { padding-block: clamp(15px, 3vw, 32px) clamp(15px, 3vw, 36px); padding-inline: clamp(15px, 3vw, 29px); } #wrap .sub_list .list_Galleryform dd { margin-top: clamp(12px, 2.3vw, 23px); } #wrap .paging { margin-top: clamp(40px, 8vw, 80px); } #wrap .sub_cate_wrap .partner_cate { gap: 0; } #wrap .sub_cate_wrap:has(.partner_cate) { margin-bottom: clamp(20px, 4vw, 40px); padding-bottom: clamp(20px, 3vw, 34px); } #wrap .sub_cate_wrap:has(.low_cate) { margin-bottom: clamp(40px, 9vw, 93px); overflow:visible;padding: 0;} #wrap .sub_cate_wrap:has(.low_cate)::before{display: none;} #wrap .sub_cate_wrap .low_cate:not(.swiper-wrapper) { gap: clamp(20px, 5vw, 60px); } #wrap .sub_cate_wrap .partner_cate li { flex-shrink: 0; max-width: 30%; width: auto; } #wrap .sub_list .list_Galleryform > ul > li .ico_plus { width: clamp(32px, 4.8vw, 48px); right: clamp(15px, 3vw, 30px); top: clamp(15px, 3vw, 30px); } } @media (max-width: 860px){ #wrap .paging a { min-width: 36px; min-height: 36px; } #wrap .paging .arrow.prev a { margin-right: 5px; } #wrap .paging .arrow.next a { margin-left: 5px; } #wrap .sub_list .list_Galleryform > ul { gap: 30px 20px; } #wrap .sub_list .list_Galleryform > ul > li { width: calc(100% / 2 - 10px); } /* #wrap .sub_cate_wrap .partner_cate { width: calc(100% + 30px); margin-left: -15px; padding-inline: 15px; box-sizing: border-box; } */ #wrap .sub_cate_wrap .partner_cate li { max-width: 30%; } } @media (max-width: 640px){ #wrap .sub_list .list_Galleryform > ul { gap: 20px; } #wrap .paging a { min-width: 32px; min-height: 32px; } } @media (max-width: 479px){ #wrap .sub_cate_wrap .partner_cate li { max-width: 40%; } #wrap .sub_list .list_Galleryform > ul { gap: 15px; } #wrap .sub_list .list_Galleryform > ul > li { width: 100%; } #wrap .paging .arrow.prev a { margin-right: 0; } #wrap .paging .arrow.next a { margin-left: 0; } } @media (max-width: 350px){ #wrap .sub_cate_wrap .partner_cate li { max-width: 50%; } } /*─────────────────────────────────────────────────────────── 제품 뷰페이지 ───────────────────────────────────────────────────────────*/ .sub_goods_view .flex_des { display: flex; align-items: flex-start; } .sub_goods_view .flex_des .img_wrap { width: 42.86%; } .sub_goods_view .flex_des .img_wrap .zm_img { aspect-ratio: auto 1; width: 100%; background: var(--gray-bg02); border-radius: var(--radius-20); overflow: clip; } .sub_goods_view .flex_des .img_wrap .zm_img img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: darken; } .sub_goods_view .flex_des .txt_wrap { width: 57.14%; box-sizing: border-box; padding-left: clamp(40px, 5.4vw, 100px); } .sub_goods_view .flex_des .sm_img { margin-top: 20px; overflow: hidden; } .sub_goods_view .flex_des .sm_img ul { display: flex; } .sub_goods_view .flex_des .sm_img li { position: relative; opacity: 0.4; border-radius: var(--radius-10); overflow: clip; } .sub_goods_view .flex_des .sm_img li .img_box { aspect-ratio: auto 1; width: 100%; background: var(--gray-bg02); } .sub_goods_view .flex_des .sm_img .swiper-slide.on { opacity: 1; } .sub_goods_view .flex_des .sm_img .swiper-slide::before { position: absolute; content: ''; inset: 0; border: 1px solid var(--black-color01); border-radius: inherit; opacity: 0; transition: all 0.4s; } .sub_goods_view .flex_des .sm_img .swiper-slide.on::before { opacity: 1; } .sub_goods_view .flex_des .sm_img:not(:has(.swiper-slide.on)) .swiper-slide-active:before{opacity: 1;} .sub_goods_view .flex_des .sm_img:not(:has(.swiper-slide.on)) .swiper-slide-active{opacity: 1;} .sub_goods_view .flex_des .sm_img li .img_box img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: darken; } .sub_goods_view .flex_des .txt_wrap { font-size: var(--title-20); } .sub_goods_view .flex_des .txt_wrap .cate { color: var(--point-color02); font-weight: 600; font-size: 100%; letter-spacing: -0.03em; } .sub_goods_view .flex_des .txt_wrap h3 { color: var(--black-color01); font-weight: 600; font-size: 220%; line-height: 1.37; letter-spacing: -0.03em; margin-top: 24px; } .sub_goods_view .flex_des .txt_wrap .desc { margin-top: 60px; box-sizing: border-box; padding-block: 24px; border-top: 1px solid var(--black-color01); border-bottom: 1px solid var(--border-color01); color: var(--black-color05); font-weight: 400; font-size: 80%; line-height: 2; letter-spacing: -0.03em; } .sub_goods_view .flex_des .txt_wrap .btn_list { display: flex; gap: 10px; margin-top: 60px; } .sub_goods_view .flex_des .txt_wrap .btn_list li { width: calc(100% / 2 - 5px); font-size: var(--title-20); border-radius: var(--radius-10); } .sub_goods_view .flex_des .txt_wrap .btn_list li.cata_li { background: var(--point-color02); } .sub_goods_view .flex_des .txt_wrap .btn_list li.inq_li { background: var(--black-color01); } .sub_goods_view .flex_des .txt_wrap .btn_list li a { display: flex; justify-content: center; align-items: center; padding-block: 21px; padding-inline: 27px; box-sizing: border-box; color: var(--point-white); font-weight: 600; font-size: 100%; letter-spacing: -0.03em; } .sub_goods_view .sub_gv_cont:nth-child(2) { box-sizing: border-box; padding-block: 137px 80px; border-bottom: 1px solid var(--border-color01); } .sub_goods_view .sub_title { font-size: var(--title-20); margin-bottom: 27px; } .sub_goods_view .sub_title h4 { display: flex; align-items: baseline; gap: 14px; color: var(--black-color01); font-weight: 500; font-size: 160%; letter-spacing: -0.03em; } .sub_goods_view .sub_title h4::before { content: ''; display: block; width: 8px; height: 8px; background: var(--point-color03); translate: 0 -7px; border-radius: 100%; } #wrap .btn_wrap { margin: 0 auto; padding: 0; padding-top: 0; font-size: 0; vertical-align: top; display: flex; justify-content: center; margin-top: 80px; } #wrap:has(.sub_cont) .more_btn { border: 1px solid var(--black-color01); transition: all 0.4s; } #wrap:has(.sub_cont) .more_btn span { color: var(--black-color01); transition: all 0.4s; } #wrap:has(.sub_cont) .more_btn:before { background: var(--point-color02); } @media (hover: hover) and (pointer: fine){ #wrap:has(.sub_cont) .more_btn:hover { border: 1px solid var(--point-color02); } #wrap:has(.sub_cont) .more_btn:hover span { color: var(--point-white); } } @media (max-width: 1023px){ .sub_goods_view .sub_gv_cont:nth-child(2) { padding-block: clamp(80px, 12vw, 137px) clamp(40px, 8vw, 80px); } .sub_goods_view .sub_title { margin-bottom: clamp(20px, 4vw, 38px); } .sub_goods_view .flex_des .txt_wrap { padding-left: 40px; } .sub_goods_view .flex_des .txt_wrap h3 { font-size: 200%; margin-top: clamp(12px, 2.4vw, 24px); } .sub_goods_view .flex_des .txt_wrap .desc { margin-top: clamp(25px, 5vw, 60px); padding-block: clamp(12px, 2.4vw, 24px); } .sub_goods_view .flex_des .txt_wrap .btn_list { margin-top: clamp(30px, 5vw, 60px); } .sub_goods_view .flex_des .txt_wrap .btn_list li a { padding-block: clamp(15px, 2vw, 21px); padding-inline: clamp(15px, 2vw, 27px); } .sub_goods_view .flex_des .sm_img { margin-top: clamp(15px, 2vw, 20px); } #wrap:has(.sub_goods_view) .btn_wrap { margin-top: clamp(50px, 8vw, 80px); } } @media (max-width: 860px){ .sub_goods_view .flex_des { flex-direction: column; gap: clamp(20px, 6vw, 60px); } .sub_goods_view .flex_des .img_wrap { width: 100%; } .sub_goods_view .flex_des .txt_wrap { width: 100%; padding-left: 0; } .sub_goods_view .flex_des .txt_wrap h3 { font-size: 190%; } .sub_goods_view .sub_title h4 { font-size: 190%; gap: 15px; } } @media (max-width: 640px){ .sub_goods_view .flex_des .txt_wrap h3 { font-size: 180%; } .sub_goods_view .sub_title h4 { font-size: 180%; gap: 10px; } .sub_goods_view .sub_title h4::before { width: 6px; height: 6px; translate: 0 -8px; } } @media (max-width: 479px){ .sub_goods_view .flex_des .txt_wrap h3 { font-size: 170%; } .sub_goods_view .sub_title h4 { font-size: 170%; } } @media (max-width: 320px){ .sub_goods_view .flex_des .txt_wrap .btn_list { flex-direction: column; } .sub_goods_view .flex_des .txt_wrap .btn_list li { width: 100%; } }