#wrap { position: relative; overflow: clip; } .w_custom { position: relative; width: calc(100% - 60px); max-width: 1400px; margin-inline: auto; } #wrap [class*="swiper-button"]::after { display: none; } #container{padding-block:var(--row-gap120) var(--row-gap160);position: relative;} #container:has(.htc_main){padding:0;} #container:has(.full-sec) { width: 100%; max-width: 100%; } #container:has(.pb-dn) { padding-bottom: 0; } .link { position: absolute; inset: 0; z-index: 3; } .blind { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .ofc { overflow: hidden; } .ofc img { width: 100% !important; height: 100% !important; object-fit: cover !important; } @media (max-width:1500px) { br.for_pc { display: none; } } @media (max-width:860px) { .w_custom { width: calc(100% - 30px); } } @media (max-width:320px) { .w_custom { width: calc(100% - 20px); } } /* Header */ #header { position: fixed; top: 0; left: 0; width: 100%; height: 100px; z-index: 100; border-bottom: 1px solid rgba(255, 255, 255, .2); transition:all .35s; } #header::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--point-color08), transparent); opacity: 0; transition: opacity .35s; } #header .w_custom { width: 100%; max-width: none; height: 100%; margin: 0; display: flex; align-items: center; justify-content: space-between; padding-inline: var(--row-gap60); } #header .logo { position: relative; z-index: 3; display: flex; align-items: center; } #header .logo a { display: flex; align-items: center; height: 100%; } #header .logo .ov { display: none; } #header .logo img { display: block; width: 472px; height: 30px; max-width: none; max-height: none; object-fit: contain; object-position: left center; } #header .gnb { height: 100%; display: flex; align-items: center; justify-content: center; gap: var(--row-gap80); } #header .gnb>li { position: relative; height: 100%; font-family: var(--disp); font-size: var(--text-17); font-weight: 600; letter-spacing: 0; text-transform: uppercase; } #header .gnb>li>a { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; padding-inline: 0; color: var(--point-white); transition: color .3s; } #header .gnb>li>a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 32px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s; } #header .gnb .dep02 { position: absolute; top: 82%; left: 50%; translate: -50%; width: max-content; max-width: 300px; min-width: 180px; background: rgba(12, 15, 12, .96); backdrop-filter: blur(8px); border: 1px solid var(--point-color08); padding-block: 14px; opacity: 0; pointer-events: none; transition: opacity .3s, top .3s; } #header .gnb .dep02>li { font-family: var(--font-type02); font-size: var(--text-15); font-weight: 500; letter-spacing: 0; text-transform: none; } #header .gnb .dep02>li>a { display: block; padding: 8px 22px; color: rgba(255, 255, 255, .72); transition: color .25s, background .25s; } #header .utility { display: flex; align-items: center; justify-content: stretch; gap: var(--row-gap80); flex-shrink: 0; height: 100%; } .utility .contact { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 120px; height: 48px; margin: 0; border: 2px solid var(--point-color03); border-radius: 8px;font-family: var(--font-type02);font-size: var(--text-17); line-height: 1.6; color: var(--point-color03); font-weight: 700; letter-spacing: 0; overflow: hidden; transition: background .3s, border-color .3s, color .3s; } #header .all-cate { position: relative; flex-direction: column; justify-content: space-between; width: clamp(30px, 4.4vw, 34px); aspect-ratio: auto 1.55; display: none; flex-shrink: 0; } #header .all-cate span { width: 100%; height: 2px; background: var(--point-color03); transition: width .3s, background .3s; } #header .all-cate span:nth-child(1) { align-self: flex-end; width: 55%; background: var(--point-color06); box-shadow: 0 0 8px var(--point-color07); } #header :where(.gnb > li > a), #header :where(#header .all-cate span:not(:nth-child(1))) { filter: none; } /*on*/ #header.on { height:80px;background: rgba(245, 248, 244, .92); border-color: rgba(98, 128, 93, .22); backdrop-filter: saturate(150%) blur(14px); } #header.on::after { opacity: 1; } #header.on :where(.gnb > li > a), #header.on :where(#header .all-cate span:not(:nth-child(1))) { filter: none; } #header.on .gnb>li>a { color: var(--point-color09); } #header.on .logo .img { display: none; } #header.on .logo .ov { display: block; } /* over */ @media (hover:hover) and (pointer:fine) { #header .gnb>li>a:hover { color: var(--point-color06); } #header .gnb>li:hover .dep02 { opacity: 1; pointer-events: auto; top: 100%; } #header .gnb .dep02>li>a:hover { color: var(--point-white); background: rgba(121, 169, 112, .14); } #header .utility .contact:hover {background:var(--point-white);box-shadow: inset 0 0 6px 4px rgba(98, 128, 93, .12);color:var(--point-color03)} #header .all-cate:hover span { width: 100%; } } @media (max-width:1700px) { #header .w_custom { grid-template-columns: minmax(260px, 472px) minmax(0, 1fr) 120px; padding-inline: clamp(30px, 3.13vw, 60px); } #header .logo img { width: clamp(260px, 24.58vw, 472px); } } @media (max-width:1200px) { #header .gnb { display: none; } #header .w_custom { display: flex; justify-content: space-between; padding-inline: clamp(20px, 4vw, 40px); } .utility { display: flex; align-items: center; justify-content: flex-end; gap: clamp(18px, 3vw, 30px); } #header .all-cate { display: flex; } } @media (max-width:1023px) { #header { height: clamp(64px, 9vw, 82px); } #header.on{height:clamp(55px, 7vw, 70px)} #header .logo img { width: clamp(220px, 38vw, 320px); height: auto; } #header .all-cate { width: clamp(28px, 7vw, 32px); aspect-ratio: auto 1.5; } } @media (max-width:640px) { #header .utility .contact { display: none; } } /* Aside */ #aside { position: fixed; inset: 0; z-index: 200; width: 100%; height: 100%; background: rgba(10, 13, 10, .97); backdrop-filter: blur(10px); overflow-y: auto; box-sizing: border-box; opacity: 0; visibility: hidden; transition: opacity .45s, visibility .45s; } #aside.on { opacity: 1; visibility: visible; } body:has(#aside.on) { overflow: clip; touch-action: none; } #aside::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(121, 169, 112, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(121, 169, 112, .05) 1px, transparent 1px); background-size: 60px 60px; -webkit-mask-image: radial-gradient(120% 90% at 80% 15%, #000, transparent 80%); mask-image: radial-gradient(120% 90% at 80% 15%, #000, transparent 80%); } #aside .w_custom { position: relative; z-index: 1; min-height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: stretch; padding-block: clamp(96px, 12vh, 130px) 60px; max-width: 1720px; } #aside .w_custom::before { content: "// Full Menu"; font-size: var(--text-16); letter-spacing: .18em; text-transform: uppercase; color: var(--point-color06); margin-bottom: 26px; } #aside .gnb { width: 100%; display: flex; flex-direction: column; counter-reset: htcmenu; } #aside .gnb>li { counter-increment: htcmenu; color: var(--point-white); } #aside .gnb>li>a { position: relative; display: flex; align-items: baseline; gap: 22px; padding: clamp(13px, 1.6vw, 22px) 0; border-top: 1px solid rgba(255, 255, 255, .1); color: var(--point-white); font-size: var(--text-50); font-weight: 600; letter-spacing: -.01em; line-height: 1.1; transition: color .3s, padding-left .35s; } #aside .gnb>li>a::before { content: counter(htcmenu, decimal-leading-zero); font-size: var(--text-16); font-weight: 500; color: var(--gray-bg09); width: 34px; flex-shrink: 0; letter-spacing: 0; } #aside .gnb>li:last-child>a { border-bottom: 1px solid rgba(255, 255, 255, .1); } #aside .gnb .dep02 { display: flex; flex-wrap: wrap; gap: 0 20px; padding: 0 0 clamp(12px, 1.6vw, 18px) 56px; } #aside .gnb .dep02>li>a { display: block; font-family: var(--font-type02); font-size: var(--text-16); font-weight: 400; color: rgba(255, 255, 255, .5); padding-block: 5px; line-height: 1.6; transition: color .3s; } #aside .utility { position: absolute; top: clamp(20px, 3vw, 24px); right: clamp(20px, 4vw, 52px); display: flex; align-items: center; gap: clamp(20px, 1.6vw, 30px); z-index: 2; } #aside .utility .contact { display: none; } #aside .close_btn { position: relative; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, .25); z-index: 9; transition: border-color .3s; } #aside .close_btn span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 20px; height: 1.5px; background: var(--point-white); } #aside .close_btn span+span { transform: translate(-50%, -50%) rotate(-45deg); } /* over */ @media (hover:hover) and (pointer:fine) { #aside .gnb>li>a:hover { color: var(--point-color06); padding-left: 16px; } #aside .gnb .dep02>li>a:hover { color: var(--point-color06); } #aside .close_btn:hover { border-color: var(--point-color06); } } @media (max-width:1023px) { #aside .w_custom { padding-block: clamp(84px, 12vw, 110px) 48px; } } @media (max-width:860px) { #aside .w_custom { justify-content: flex-start; } #aside .gnb>li>a { gap: 16px; } #aside .gnb .dep02 { padding-left: 48px; gap: 0 16px; } } @media (max-width:640px) { #aside .utility .contact { display: inline-flex; margin: 0; } } @media (max-width:479px) { #aside .gnb>li>a::before { width: 26px; } #aside .gnb .dep02 { flex-direction: column; padding-left: 42px; } } /*───────────────────────────────────────────────────────── Footer ─────────────────────────────────────────────────────────*/ #footer { background: var(--black-color01); padding-block: var(--row-gap60) var(--row-gap70); } #footer .ft_info_box { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: var(--row-gap60); gap: var(--col-gap40); } #footer .ft_identity { display: flex; flex-direction: column; align-items: flex-start; gap: var(--row-gap30); } #footer .logo { width: clamp(330px, 32.78vw, 472px); height: 30px; } #footer .logo img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; } #footer .addr_list { display: flex; flex-direction: column; gap: var(--row-gap10); align-items: flex-start; } #footer .contact_list { display: flex; flex-wrap: wrap; gap: var(--row-gap10) var(--col-gap30); } #footer .desc { display: flex; gap: clamp(10px, .97vw, 14px); font-size: var(--text-18); color: var(--black-color10); font-weight: 400; font-family: var(--font-type02); letter-spacing: -.03em; white-space: nowrap; } #footer .desc dt { color: var(--point-white); flex-shrink: 0; } #footer .desc dd { opacity: .7; } #footer .family_site { position: relative; width: clamp(200px, 16.67vw, 240px); color: var(--point-white); } #footer .family_site summary { position: relative; display: flex; align-items: center; justify-content: space-between; height: 55px; padding: 0 var(--col-gap30); border: 1px solid var(--white-alpha40); border-radius: var(--radius-10); font-size: var(--text-17); font-weight: 500; cursor: pointer; list-style: none; } #footer .family_site summary::-webkit-details-marker { display: none; } #footer .family_site summary::before { content: ""; position: absolute; top: 50%; right: var(--col-gap30); width: 12px; height: 8px; background: var(--point-white); clip-path: polygon(50% 0, 100% 100%, 0 100%); transform: rotate(180deg); translate: 0 -50%; transition: transform .3s ease; } #footer .family_site[open] summary::before { transform: rotate(0); } #footer .family_site ul { position: absolute; right: 0; top: calc(100% + var(--row-gap10)); width: 100%; padding: var(--row-gap15) var(--col-gap30); border: 1px solid var(--white-alpha40); border-radius: var(--radius-10); background: var(--black-color01); } #footer .family_site a { display: block; font-size: var(--text-16); color: var(--point-white); } #footer .copy_box { display: flex; align-items: center; justify-content: space-between; padding-top: var(--row-gap40); border-top: 1px solid var(--white-alpha20); gap: var(--row-gap20); } #footer .copy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--row-gap10); font-size: var(--text-17); color: var(--black-color06); font-weight: 400; letter-spacing: -.03em; } #footer .ft_menu { display: flex; flex-wrap: wrap; align-items: center; flex-shrink: 0; } #footer .ft_menu li { display: flex; align-items: center; } #footer .ft_menu li+li::before { content: ""; width: 4px; height: 4px; border-radius: var(--radius-04); background: var(--white-alpha20); display: inline-block; margin-inline: clamp(10px, 2vw, 22px); } #footer .ft_menu li a { font-size: var(--text-18); color: var(--point-white); font-weight: 300; letter-spacing: -.03em; } #footer .ft_menu li.policy a { font-weight: 600; } .ft_quick { position: fixed;right: clamp(15px, 3vw, 30px);bottom: 30px;z-index: 99; opacity: 0; pointer-events: none; transition: all 0.3s; } .ft_quick.on { opacity: 1; pointer-events: auto; } .ft_quick .scr_top {display: flex;align-items: center;justify-content: center;flex-direction: column;inline-size: clamp(40px, 5.5vw, 50px);padding: clamp(15px, 2.5vw, 20px) 5px;border-radius: 50px;z-index: 40;background: var(--point-color10);box-shadow: var(--shadow-01);font-size: var(--text-14);color: var(--point-white);font-weight: 500;gap: 8px;text-transform: uppercase;} .ft_quick .scr_top img{width: clamp(12px, 1.9vw, 14px);transition: all 0.4s;} @media (hover:hover) and (pointer:fine) { .ft_quick .scr_top:hover img{translate:0 -4px;} } @media (max-width:1023px) { #fullpage .ftr-sec { padding: 0; } } @media (max-width:860px) { #footer .ft_info_box { flex-direction: column; } #footer .family_site { width: 100%; } #footer .contact_list { flex-direction: column; } #footer .desc { white-space: normal; } #footer .copy_box { flex-direction: column; align-items: flex-start; } } /* HTC main: common */ #wrap:has(.htc_main) { overflow: visible; } .htc_main { position: relative; font-family: var(--font-type02); color: var(--gray-bg07); line-height: 1.6; word-break: keep-all; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow: visible; } .htc_main section { position: relative; } .htc_main .main_title { display: flex; flex-direction: column; align-items: center; gap: clamp(2px, .28vw, 4px); margin: 0; color: var(--black-color01); font-family: var(--font-type02); font-size: var(--text-54); font-weight: 500; line-height: 1.4; letter-spacing: -.03em; } .htc_main .main_title strong { color: inherit; font-weight: 700; } .htc_main .main_title strong em { background: linear-gradient(-26.78deg, var(--point-color10) 15.13%, var(--point-color11) 84.3%); background-clip: text; color: var(--trans-color); font-weight: 800; -webkit-background-clip: text; -webkit-text-fill-color: var(--trans-color); } .htc_main .main_title_white { color: var(--point-white); } .htc_main .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media (max-width:479px) { .htc_main .main_title { font-size: var(--text-40); } } /* buttons (전체 공통) */ .btn { display: inline-flex; align-items: center;justify-content: center; gap: 11px; font-size: var(--text-16); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; padding: 15px 26px;color: var(--point-color09); background: transparent; position: relative; overflow: hidden; transition: color .35s cubic-bezier(.22, .61, .36, 1), border-color .35s cubic-bezier(.22, .61, .36, 1); } .btn .arrow { transition: transform .3s cubic-bezier(.22, .61, .36, 1); } .btn::after { content: ""; position: absolute; inset: 0; background: var(--point-color03); transform: translateY(101%); z-index: -1; transition: transform .4s cubic-bezier(.22, .61, .36, 1); } .btn_solid { background: var(--point-color03); border-color: var(--point-color03); color: var(--point-white); } .btn_basic{font-size:var(--text-17);background: var(--point-color03); border-color: var(--point-color03); color: var(--point-white);border-radius:var(--radius-10);height:clamp(44px, 5.2vw, 55px);padding:0 clamp(15px, 2.4vw, 26px);} .btn_basic:after{display: none;} .btn_solid::after { background: var(--point-color05); } @media (hover:hover) and (pointer:fine) { .btn:hover { color: var(--point-white); border-color: var(--point-color03); } .btn:hover::after { transform: translateY(0); } .btn_basic:hover{background:var(--point-white);box-shadow: inset 0 0 6px 4px rgba(98, 128, 93, .12);color: Var(--point-color03);} } /* btn_gradient (전체 공통 그라디언트 버튼) */ .btn_gradient { width: auto; min-width: clamp(120px, 16vw, 180px); height: clamp(44px, 5.2vw, 55px); margin: 0; padding: 0 clamp(20px, 2.6vw, 30px); border-radius: var(--radius-10); background: linear-gradient(270deg, var(--trans-color) 0%, var(--point-color13) 100%); font-size: var(--text-17);color:var(--point-white); font-weight: 700; line-height: 1.6; letter-spacing: 0; gap: var(--col-gap20); text-transform: uppercase; transition: all 0.3s; z-index: 1;} .btn_gradient.type02{background: linear-gradient(270deg, #000 0%, #475C43 100%);} .btn_gradient::after { display: none; } .btn_gradient .arrow { font-size: 0; width: 10px; height: 12px; background: url('/images/icon-arrow.svg') center/contain no-repeat; transform: rotate(90deg) scaleY(-1); } @media (hover:hover) and (pointer:fine) { .btn_gradient:hover { background: linear-gradient(270deg, var(--point-color10) 0%, var(--point-color10) 100%); } } /* section head */ .htc_main .section { position: relative; padding: clamp(84px, 9vw, 140px) 0; z-index: 1; } .htc_main .section_head { text-align: center; margin-bottom: 56px; display: flex; flex-direction: column; align-items: center; gap: var(--row-gap20); } .title_en { display: block; font-family: var(--disp); font-size: var(--text-22); font-weight: 600; line-height: 1.6; letter-spacing: -.03em; text-transform: none; color: var(--title-en-color, var(--point-color10)); } :where(.htc_main .section_head)>span { font-size: var(--text-16); letter-spacing: .2em; text-transform: uppercase; color: var(--point-color04); display: inline-flex; align-items: center; gap: var(--row-gap10); } :where(.htc_main .section_head)>span:not(.title_en)::before, :where(.htc_main .section_head)>span:not(.title_en)::after { content: ""; width: 26px; height: 1px; background: var(--point-color08); } .htc_main .section_head h2:not(.main_title) { font-size: var(--text-52); font-weight: 600; color: var(--point-color09); line-height: 1.4; letter-spacing: -.01em; } .htc_main .section_head h2:not(.main_title) strong { color: var(--point-white); font-weight: 600; } .htc_main .section_head p { font-size: var(--text-20); color: var(--black-color03); line-height: 1.8; max-width: 80ch; } /* HTC main: hero */ .htc_main .hero { position: relative; overflow: hidden; background: var(--black-color00); } .htc_main .heroSwiper { width: 100%; height: clamp(500px, 94vw, 940px); } .htc_main .heroSwiper .swiper-wrapper { margin: 0; padding: 0; } .htc_main .heroSwiper .swiper-slide { position: relative; display: flex; align-items: flex-start; overflow: hidden; padding: 0; } .htc_main .heroSwiper .swiper-slide>.w_custom { height: 100%; padding: 0; display: flex; align-items: center; justify-content: center; } .htc_main .hs_bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; background-position: center; background-size: cover; filter: none; transition: all 5.5s; } .htc_main .swiper-slide-active .hs_bg { scale: 1.1; } .htc_main .hero_grid { display: flex; width: 100%; align-items: flex-start; gap: 0; } .htc_main .hero_copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(10px, 2vw, 24px); z-index: 2; } .htc_main .hero_copy>span { font-size: var(--text-20); color: var(--point-color12); font-weight: 500; line-height: 1.6; } .htc_main .hero_title { font-size: var(--text-64); font-weight: 700; line-height: 1.4; color: var(--point-white); letter-spacing: 0; } .htc_main .hero_sub { font-size: var(--text-22); font-weight: 400; line-height: 1.6; color: var(--point-white); letter-spacing: 0; } .htc_main .hero_copy .btn { width: auto; min-width: clamp(120px, 16vw, 180px); height: clamp(44px, 5.2vw, 55px); padding: 0 clamp(20px, 2.6vw, 30px); border-radius: var(--radius-10); background: linear-gradient(270deg, var(--trans-color) 0%, var(--point-color13) 100%);font-size: var(--text-17); font-weight: 700; line-height: 1.6; letter-spacing: 0; gap: var(--col-gap20); text-transform: uppercase; transition: all 0.3s; margin-top: clamp(20px, 3vw, 36px); } .htc_main .hero_copy .btn::after { display: none; } .htc_main .hero_copy .btn .arrow { font-size: 0; width: 12px; height: 10px; background: url('/images/icon-arrow.svg') center/contain no-repeat; transform: rotate(90deg) scaleY(-1); } .htc_main .heroSwiper .swiper-pagination { left: 50%; right: auto; bottom: var(--row-gap75); translate: -50% 0; width: auto; align-items: center; justify-content: center; gap: var(--row-gap15); padding: 0; } .htc_main .heroSwiper .swiper-pagination-bullet { width: 8px; height: 8px; border-radius: 100px; background: var(--point-white); opacity: 1; box-shadow: none; } .htc_main .heroSwiper .swiper-pagination-bullet-active { width: 40px; height: 8px; background: var(--point-white); box-shadow: 0 0 var(--row-gap40) var(--point-alpha50); } .htc_main .heroSwiper .swiper-button-prev { display: none; } .htc_main .heroSwiper .swiper-button-next { display: none; } .htc_main .scroll-down { position: absolute; right: var(--col-gap30); bottom: var(--row-gap80); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: var(--col-gap24); color: var(--point-white); cursor: pointer; text-decoration: none; } .htc_main .scroll-down span { font-family: var(--disp); font-size: var(--text-14); font-weight: 500; line-height: 1; letter-spacing: 0; white-space: nowrap; writing-mode: vertical-rl; } .htc_main .scroll-down i { display: block; width: 30px; height: 30px; background: url('/images/scroll-circle.svg') center/contain no-repeat; transition: transform .3s ease; } @media (hover:hover) and (pointer:fine) { .htc_main .scroll-down:hover i { transform: translateY(clamp(4px, .42vw, 6px)); } .htc_main .hero_copy .btn:hover {background: var(--point-color10);} } @media (max-width:1200px) { .htc_main .heroSwiper { height: clamp(680px, 78vw, 820px); min-height: 620px; } .htc_main .hero_copy { width: min(560px, 62vw); } .htc_main .scroll-down { display: none; } } @media (max-width:640px) { .htc_main .heroSwiper { height: 640px; min-height: 640px; } .htc_main .hero_copy { width: 100%; } } /* Introduction */ .htc_main .intro { position: relative; display: flex; min-height: 780px; align-items: center; justify-content: center; overflow: hidden; scroll-margin-top: var(--row-gap80); } .htc_main .intro_bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .4; } .htc_main .intro_cont { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--row-gap40); translate: 0 clamp(-42px, -2.92vw, -30px); text-align: center; } .htc_main .intro_cont .main_title strong{font-weight:500;} .htc_main .intro_logo { width: 316px; height: 40px; object-fit: contain; } @media (max-width:1023px) { .htc_main .intro { min-height: clamp(560px, 72vw, 680px); } } @media (max-width:640px) { .htc_main .intro { min-height: 500px; } .htc_main .intro_logo { width: min(240px, 70vw); height: auto; } .htc_main .main_title span { max-width: 12em; } } @media (max-width:479px) { .htc_main .intro { min-height: initial; padding: var(--row-gap100) 0; } .htc_main .intro_cont { translate: 0; } } /* HTC main: capabilities */ .section_bg { position: relative; --title-en-color: var(--point-color12); } .section_bg .bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; } .htc_main .section_panel { min-height: 857px; padding: clamp(100px, 12.08vw, 174px) 0 var(--row-gap60); overflow: hidden; } .htc_main .section_panel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--black-alpha70), var(--trans-color) 64%); pointer-events: none; } .htc_main .section_panel .w_custom { position: relative; z-index: 1; max-width: 1400px; } .htc_main .section_panel .section_head { gap: var(--row-gap30); margin: 0; } .htc_main .section_bg .title_en{color:var(--point-color12)} .htc_main .section_panel .cap_title { display: flex; align-items: center; flex-direction: row; justify-content: center; gap: clamp(4px, .42vw, 6px); width: 100%; } .htc_main .section_panel .cap_title_swiper { width: 488px; height: 76px; margin: 0; overflow: hidden; } .htc_main .section_panel .cap_title_swiper .swiper-wrapper { margin: 0; padding: 0; } .htc_main .section_panel .cap_title_swiper .swiper-slide { display: flex; align-items: center; justify-content: flex-end; height: 76px; background: linear-gradient(-19.27deg, var(--point-color10) 15.13%, var(--point-color12) 84.3%); background-clip: text; color: transparent; font-weight: 700; white-space: nowrap; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .htc_main .why_grid { display: grid; grid-template-columns: repeat(3, 1fr); justify-content: center; gap: var(--row-gap30) clamp(30px, 6.94vw, 100px); margin-top: clamp(48px, 4.31vw, 62px); } .htc_main .why_card { position: relative; display: flex; height: 420px; flex-direction: column; align-items: center; padding-top: clamp(54px, 5vw, 72px); overflow: hidden; border: 2px solid var(--point-color13); border-radius: var(--radius-30); background: var(--white-alpha02); color: var(--point-white); text-align: center; backdrop-filter: blur(75px); -webkit-backdrop-filter: blur(75px); transition: background .35s ease, border-color .35s ease, transform .35s ease; } .htc_main .why_card::before { content: ""; position: absolute; inset: 0; background: url('/images/card_bg.png')no-repeat center/cover; pointer-events: none; background-color: var(--white-alpha02); filter: blur(75px); } .htc_main .why_card:nth-child(2) { margin-top: var(--row-gap60); } .htc_main .why_card a{display: block;width:100%;height:100%;position: absolute;top:0;left:0;z-index:3;} .htc_main .why_icon { position: relative; z-index: 1; width: clamp(60px, 8vw, 80px); height: clamp(60px, 8vw, 80px); object-fit: contain; } .htc_main .why_body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; } .htc_main .why_body .cap { display: block; margin-top: var(--row-gap30); font-family: var(--disp); font-size: var(--text-28); font-weight: 700; line-height: 1.4; color: var(--point-white); letter-spacing: -.03em; } .htc_main .why_body h3 { margin: var(--row-gap20) 0 0; font-family: var(--font-type02); font-size: var(--text-20); font-weight: 600; line-height: 1.6; color: var(--point-white); letter-spacing: -.03em; } .htc_main .why_body p { margin: var(--row-gap10) 0 0; font-size: var(--text-18); font-weight: 400; line-height: 1.6; color: var(--white-alpha80); letter-spacing: -.03em; } @media (hover:hover) and (pointer:fine) { .htc_main .why_card:hover { border-color: var(--point-color03); background: linear-gradient(203deg, var(--point-color10) 16.49%, var(--point-color11) 84.31%); transform: translateY(-8px); } } @media (max-width:1280px) { .htc_main .why_grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .htc_main .why_card { width: 100%; } } @media (max-width:1023px) { .htc_main .section_panel .cap_title { flex-direction: column; } .htc_main .section_panel .cap_title_swiper { width: min(488px, 100%); height: 1.4em; } .htc_main .section_panel .cap_title_swiper .swiper-slide { height: 1.4em; justify-content: center; } .htc_main .why_grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } .htc_main .why_card { height: auto; padding-block: var(--row-gap60); } .htc_main .why_card:nth-child(2) { margin-top: 0; } } @media (max-width:640px) { .htc_main .section_panel .cap_title_swiper { width: 100%; } } /* HTC main: products */ .htc_main .section_product { padding: clamp(100px, 10.42vw, 200px) 0 var(--row-gap180); overflow: hidden; } .htc_main .section_product .title_wrap { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--row-gap30); } .htc_main .product_head { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--row-gap30); color: var(--point-white); } .htc_main .product_slider { position: relative; } .htc_main .product_nav { position: absolute; inset: 0; z-index: 4; pointer-events: none; } .htc_main .product_nav button { position: absolute; top: 0; bottom: 0; width: clamp(56px, 6vw, 90px); padding: 0; border: 0; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; opacity: 0; cursor: pointer; pointer-events: auto; transition: opacity .3s ease; } .htc_main .product_nav button::before { content: ""; position: absolute; top: 50%; left: 50%; width: clamp(14px, 1.4vw, 20px); height: clamp(14px, 1.4vw, 20px); border-top: 2px solid var(--point-white); border-right: 2px solid var(--point-white); filter: drop-shadow(0 0 6px var(--black-alpha70)); } .htc_main .product_prev { left: 0; } .htc_main .product_next { right: 0; } .htc_main .product_prev::before { transform: translate(-35%, -50%) rotate(-135deg); } .htc_main .product_next::before { transform: translate(-65%, -50%) rotate(45deg); } .htc_main .product_nav button:hover, .htc_main .product_nav button:focus-visible { opacity: 1; } .htc_main .product_nav .swiper-button-disabled { opacity: 0; pointer-events: none; cursor: default; } @media (hover:none), (pointer:coarse) { .htc_main .product_nav { display: none; } } .htc_main .product_head h2 { display: block; color: var(--point-white); font-weight: 800; } .htc_main .product_head h2 strong { background: linear-gradient(-35.63deg, var(--point-color10) 15.13%, var(--point-color12) 84.3%); background-clip: text; color: var(--trans-color); -webkit-background-clip: text; -webkit-text-fill-color: var(--trans-color); } .htc_main .product_head p { margin: 0; font-family: var(--font-type02); font-size: var(--text-20); font-weight: 400; line-height: 1.7; letter-spacing: -.03em; } .htc_main .product_scroll { width: 100%; margin-top: var(--row-gap60); padding: 0 max(15px, calc((100vw - 1400px) / 2)) var(--row-gap20); overflow: hidden; } .htc_main .product_track { display: flex; width: auto; gap: var(--col-gap40); margin: 0; padding: 0; } .htc_main .product_track>.swiper-slide { width: clamp(300px, 56vw, 560px); flex-shrink: 0; height: auto; position: relative; border: 1px solid var(--white-alpha20); border-radius: var(--radius-20); background: var(--black-alpha10); color: var(--point-white); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow: hidden; } .htc_main .product_card { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: var(--row-gap30); padding: var(--row-gap40); width: 100%; overflow: hidden; } .htc_main .product_track>.swiper-slide:before, .htc_main .product_track>.swiper-slide:after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity .35s ease; } .htc_main .product_track>.swiper-slide:before { z-index: 0; background: linear-gradient(0deg, #475C43 0%, rgba(0, 0, 0, 0.10) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .htc_main .product_track>.swiper-slide:after { z-index: 3; padding: 2px; background: linear-gradient(90deg, var(--point-color13) 0%, var(--point-color12) 25%, var(--point-color13) 50%, var(--point-color12) 75%, var(--point-color13) 100%); mask: linear-gradient(var(--black-color00) 0 0) content-box, linear-gradient(var(--black-color00) 0 0); mask-composite: exclude; -webkit-mask: linear-gradient(var(--black-color00) 0 0) content-box, linear-gradient(var(--black-color00) 0 0); -webkit-mask-composite: xor; } .htc_main .product_card_text { z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(10px, .83vw, 12px); width: 100%; } .htc_main .product_card_text strong { font-size: var(--text-28); font-weight: 700; line-height: 1.3; letter-spacing: -.03em; } .htc_main .product_card_text em { font-size: var(--text-18); font-weight: 500; line-height: 1.5; letter-spacing: -.03em; } .htc_main .product_card_arrow { position: absolute; top: var(--row-gap40); right: var(--col-gap40); z-index: 2; width: clamp(30px, 4vw, 40px); height: clamp(30px, 4vw, 40px); border-radius: 50%; background: var(--point-color10); opacity: 0; box-shadow: var(--shadow-03); transition: opacity .3s ease, transform .3s ease; } .htc_main .product_card_arrow::before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: clamp(10px, 1.2vw, 14px); height: clamp(10px, 1.2vw, 14px); clip-path: polygon(42% 0, 58% 0, 58% 42%, 100% 42%, 100% 58%, 58% 58%, 58% 100%, 42% 100%, 42% 58%, 0 58%, 0 42%, 42% 42%); content: ""; background: var(--point-white); } .htc_main .product_card_image { z-index: 1; object-fit: contain; object-position: center bottom; transition: transform .4s ease; } @media (hover:hover) and (pointer:fine) { .htc_main .product_card:hover:before { border-color: transparent; } .htc_main .product_track>.swiper-slide:hover::before, .htc_main .product_track>.swiper-slide:hover::after { opacity: 1; } .htc_main .product_track>.swiper-slide:hover .product_card_arrow { opacity: 1; } } .htc_main .product_card:focus-visible::before, .htc_main .product_card:focus-visible::after { opacity: 1; } @media(max-width:479px) { .htc_main .section_product .title_wrap { flex-direction: column; align-items: flex-start; } .htc_main .product_head h2 { flex-wrap: wrap; } .htc_main .product_track>.swiper-slide { width: 100%; } } /* HTC main: applications */ .htc_main .sec_solutions { position: relative; padding: var(--row-gap160) 0; background: var(--point-white); --sol-pin: 100px; --sol-title-h: clamp(120px, 9.5vw, 150px); --sol-stack: clamp(80px, 9.72vw, 100px); --sol-gap: clamp(12px, 1.2vw, 20px); --sol-top: calc(var(--sol-pin) + var(--sol-title-h) + var(--sol-stack) + var(--sol-gap)); --sol-card-h: clamp(420px, calc(100vh - var(--sol-top) - var(--row-gap30)), 600px); } .htc_main .sec_solutions .title_wrap { /*position: sticky; top: var(--sol-pin); z-index: 0; height: calc(var(--sol-title-h) + var(--sol-stack) + var(--sol-gap) + var(--sol-card-h)); margin-bottom: calc(var(--sol-card-h) * -1); pointer-events: none;*/ text-align: center; } .htc_main .sec_solutions .title_inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--row-gap30); height: var(--sol-title-h); background: var(--point-white); } .htc_main .sol_list { position: relative;margin-top: var(--row-gap80);display: flex;flex-direction: column;gap:var(--row-gap60)} /* .htc_main .sol_item { position: sticky; top: var(--sol-top); left: 0; width: 100%; height: var(--sol-card-h); transform-origin: top; } */ /* .htc_main .sol_item:not(:first-child) { margin-top: clamp(220px, 20.83vw, 300px); } */ .htc_main .sol_card { position: relative; width: 100%; height: 100%; display: flex; padding: var(--row-gap80); flex-direction: column; align-items: flex-start; justify-content: space-between; border-radius: var(--radius-20); overflow: hidden; color: var(--point-white); background: var(--point-color09); transform: translateY(0) scale(1); transform-origin: top center; opacity: 1; transition: transform .8s ease, opacity .8s ease; } .htc_main .sol_item img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; max-width: none; max-height: none; object-fit: cover; transition: transform .8s ease; } .htc_main .sol_shade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--black-alpha70), var(--trans-color) 70%); } .htc_main .sol_meta { gap: clamp(9px, .69vw, 10px); font-size: var(--text-16); font-weight: 500; opacity: .6; display: inline-flex; align-items: center; gap: 6px; } .htc_main .sol_meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--point-white); } .htc_main .text_box { display: flex; flex-direction: column; align-items: flex-start; gap: var(--row-gap40); position: relative; } .htc_main .sol_text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--row-gap20); } .htc_main .sol_text h3 { font-family: var(--font-type02); font-size: var(--text-48); font-weight: 600; } .htc_main .sol_text p { font-family: var(--font-type02); font-size: var(--text-20); line-height: 1.7; } .htc_main .sol_dim { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-start; background: rgba(0, 0, 0, 0.7); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease; } .htc_main .sol_dim b { height: var(--row-gap80); display: flex; align-items: center; font-family: var(--font-type02); font-size: var(--text-18); font-weight: 600; opacity: .6; } .htc_main .sol_item.is_active .sol_image { transform: scale(1); } .htc_main .sol_item.is_active { z-index: 3; } .htc_main .sol_item.is_prev { z-index: 2; } .htc_main .sol_item.is_prev_far { z-index: 1; } .htc_main .sol_item.is_prev .sol_card { transform: translateY(calc(var(--sol-stack) * -.5)) scale(.9); } .htc_main .sol_item.is_prev_far .sol_card { transform: translateY(calc(var(--sol-stack) * -1)) scale(.82); } .htc_main .sol_item.is_hidden .sol_card { opacity: 0; } .htc_main .sol_item.is_hidden { z-index: 0; pointer-events: none; } .htc_main .sol_item.is_prev .sol_dim, .htc_main .sol_item.is_prev_far .sol_dim { opacity: 1; visibility: visible; } .htc_main .sol_item.is_prev_far .sol_dim { background: var(--black-alpha70); } .htc_main .sol_item.is_prev .sol_shade { opacity: .8; } .htc_main .sol_item.is_prev_far .sol_shade { opacity: .15; } .htc_main .sol_item.is_prev .sol_meta, .htc_main .sol_item.is_prev .sol_text, .htc_main .sol_item.is_prev .btn_gradient, .htc_main .sol_item.is_prev_far .sol_meta, .htc_main .sol_item.is_prev_far .sol_text, .htc_main .sol_item.is_prev_far .btn_gradient { opacity: 0; transform: translateY(-80%); transition: opacity .8s ease, transform .8s ease; } .htc_main .sol_spacer { pointer-events: none; } .htc_main .sol_card:focus-visible { outline: 2px solid var(--point-color12); outline-offset: -4px; } @media (max-width:1023px) { .htc_main .sec_solutions .title_wrap { position: static; height: auto; margin-bottom: var(--row-gap60); pointer-events: auto; } .htc_main .sec_solutions .title_inner { display: block; height: auto; background: none; } .htc_main .sol_item { position: relative; top: 0; height: clamp(520px, 48.61vw, 600px); } .htc_main .sol_item:not(:first-child) { margin-top: 0; } .htc_main .sol_spacer { display: none; } .htc_main .sol_card { transform: none; } } @media (max-width:1023px) { .htc_main .sol_list { display: flex; flex-direction: column; gap: var(--row-gap40); } } @media (max-width:640px) { .htc_main .sol_card { padding: var(--row-gap40) var(--row-gap30); gap: var(--row-gap80); } .htc_main .sol_text p br { display: none; } .htc_main .sol_item { height: auto; } } /* HTC main: CTA */ .htc_main .cta { position: relative; overflow: hidden; background: var(--point-white); } .htc_main .cta_box { position: relative; z-index: 1; text-align: center; padding-bottom: var(--row-gap120); } .htc_main .cta .title_wrap { display: flex; flex-direction: column; align-items: center; gap: var(--row-gap30); } .htc_main .cta .title_wrap p { font-size: var(--text-20); color: var(--black-color03); font-weight: 400; line-height: 1.7; } .htc_main .cta .btn_gradient {min-width:initial;position: relative; display: inline-flex; align-items: center; justify-content: center; width:clamp(120px, 15vw, 150px);height:clamp(48px, 5.5vw, 60px); margin: 0; border: 2px solid var(--point-color03); border-radius: 8px; background:var(--point-color03);font-family: var(--font-type02); font-size: var(--text-20); line-height: 1.6; color: var(--point-white); font-weight: 700; letter-spacing: 0; overflow: hidden; transition: background .3s, border-color .3s, color .3s; padding:0;} .htc_main .cta_partners { margin-top: var(--row-gap100); } .cta_partners .partSwiper { overflow: visible; } .cta_partners .swiper-wrapper { position: relative; transition-timing-function: linear; } .cta_partners .swiper-slide { position: relative; width: clamp(150px, 25vw, 250px); aspect-ratio: auto 3.1; display: flex; align-items: center; justify-content: center; overflow: hidden; } @media (hover:hover) and (pointer:fine) { .htc_main .cta .btn_gradient:hover {background: rgba(255, 255, 255, 0); box-shadow: inset 0 0 6px 4px rgba(98, 128, 93, .12);color:Var(--point-color03)} } /*──────────────────────────────────────────────────────────── 서브 공통 ────────────────────────────────────────────────────────────*/ /*visual*/ .sub_visual { height:clamp(400px, 60vw, 666px);position: relative;} .sub_visual .thumb{width:100%;height:100%;position: absolute;top:0;left:0;} .sub_visual .sv_title { text-align: left;display: flex;flex-direction: column;align-items: flex-start;height:100%;justify-content: flex-end;color: var(--point-white);box-sizing: border-box;position: relative;z-index:3;padding-bottom:var(--row-gap80);gap:clamp(10px, 2vw, 24px);} .sub_visual .sv_title h2 {font-size: var(--text-64);font-weight: 700;line-height:1.4;letter-spacing:0.03em;} .sub_visual .sv_title p {font-family: var(--font-type02);font-size: var(--text-20);font-weight: 400;line-height:1.6;} .sub_nav{ z-index:3;box-sizing: border-box;margin-top:var(--row-gap100);background: rgba(16, 16, 16, 0.50);box-shadow: clamp(5px, 1vw, 10px) clamp(5px, 1vw, 10px) clamp(20px, 4vw, 50px) 0 rgba(0, 0, 0, 0.15);backdrop-filter: blur(7.5px);border-radius:var(--radius-10);} .sub_nav .w_custom { width: auto; max-width: none; padding-left: 0; box-sizing: border-box; } .sub_nav .desc{ position: relative; display: inline-flex; height:clamp(40px, 5vw, 56px); font-size: var(--text-18); font-weight: 400;font-family:var(--font-type02);padding:6px;} .sub_nav .desc dd{ position: relative; height: 100%; box-sizing: border-box; } .sub_nav .desc dd + dd:before{width:1px;height:clamp(10px, 1vw, 14px);content:"";background:var(--point-white);opacity:0.2;position: absolute;left:0;top:50%;translate:0 -50%;} .sub_nav .desc dt a{display: flex;width:clamp(32px, 4vw, 44px); height: 100%; align-items: center;justify-content: center;font-size: 0;border-radius: 6px;background: linear-gradient(225deg, rgba(0, 0, 0, 0.00) 40%, #475C43 100%);} .sub_nav .desc dt a img { height: 14px; } .sub_nav .desc dd span{position: relative;display: flex;align-items: center;height: 100%;padding:0 clamp(45px, 4.7vw, 50px) 0 clamp(20px, 2vw, 25px);box-sizing: border-box; font-family: var(--font-type02); font-weight: 500;color: var(--point-white);min-width:clamp(210px, 16.5vw, 290px); line-height: 1.4;cursor: pointer; letter-spacing: -0.03em;} .sub_nav .desc dd span:before, .sub_nav .desc dd span:after{position: absolute; content: ''; background: var(--point-white); top: 50%; translate:0 -50%; transition: opacity .3s, transform .3s; } .sub_nav .desc dd span:before{width:10px;height:2px;right:clamp(20px, 3vw, 30px);} .sub_nav .desc dd span:after{width:2px;height:10px;right:clamp(24px, 3.3vw, 34px);} .sub_nav .desc dd.on span:after{opacity: 0; transform: translateY(-50%) rotate(90deg);} .sub_nav .desc dd ul{position: absolute;top: calc(100% + 1px);left: 0;width: calc(100% + 2px);padding: 20px 0;background: var(--point-white);border:1px solid var(--border-color01); box-sizing: border-box;opacity: 0;pointer-events: none;transition: all 0.4s; z-index: 10; } .sub_nav .desc dd.on ul{opacity: 1; pointer-events: all;} .sub_nav .desc dd ul li a{display: block;font-weight: 400;color: var(--black-color02);padding: 11px 24px;box-sizing: border-box;line-height: 1.4;font-size:var(--text-16);} .sub_nav .desc dd ul li.on a{color: var(--point-color01);text-decoration: underline;text-underline-offset: 3px;text-decoration-thickness: 1px;font-weight: 500;} @media screen and (max-width: 860px){ .sub_visual .sv_title h2{font-size:var(--text-50);} .sub_nav { width:100%;margin-top: var(--row-gap60);} .sub_nav .desc { width: 100%; border-radius: 0; } .sub_nav .desc dt a { width: 38px; } .sub_nav .desc { height: 50px; } .sub_nav .desc dd:not(:last-child) { display: none; } .sub_nav .desc dd { width: calc(100% - 38px); } .sub_nav .desc dd + dd{ border-left: 0; } } .sub_content > section{padding-block:var(--row-gap160);} .sub_content > section:first-child{padding-top:0;} .sub_content > section:last-child{padding-bottom:0;} .sub_content.pb-dn > section:last-child{padding-bottom:var(--row-gap160);} @media (max-width:640px) { .sub_content > section{padding-block:var(--row-gap100);} } /*title*/ .sub_sec_head { display: flex; flex-direction: column; align-items: center; gap: var(--row-gap20); text-align: center;margin-bottom:var(--row-gap60);} .sub_sec_head.sub_title{margin-bottom:0;} .sub_sec_head .title_en{font-size:var(--text-18);color:var(--point-color10);font-weight:600;line-height:1.6;} .sub_sec_head h2{font-size:var(--text-54);color:var(--black-color01);font-weight:700;line-height:1.4;font-family:var(--font-type02);} .sub_sec_head h2 em{background: linear-gradient(-26.78deg, var(--point-color10) 15.13%, var(--point-color11) 84.3%);background-clip: text;color: var(--trans-color);font-weight: 800;-webkit-background-clip: text;-webkit-text-fill-color: var(--trans-color);} .sub_sec_head .txt{margin-top:var(--row-gap10);display: flex; flex-direction: column; align-items: center; gap: var(--row-gap20); text-align: center;width:100%;position: relative;} .sub_sec_head .txt h3{font-size:var(--text-40);color:var(--black-color01);font-weight:600;line-height:1.4;} .sub_sec_head .txt h3 strong{background: linear-gradient(-26.78deg, var(--point-color10) 15.13%, var(--point-color11) 84.3%);background-clip: text;color: var(--trans-color);font-weight: 800;-webkit-background-clip: text;-webkit-text-fill-color: var(--trans-color);} .sub_sec_head .txt .head_desc{display: flex; flex-direction: column; align-items: center; gap:clamp(10px, 1.2vw, 14px); text-align: center;width:100%;} .sub_sec_head .txt .head_desc p{font-size:var(--text-22);color:var(--black-color03);font-weight:400;line-height:1.7;font-family:var(--font-type02);} .sub_sec_head .txt .head_desc p strong{font-size:var(--text-22);font-weight:500;line-height:1.5;} .sub_sec_head .txt .head_desc.type02{gap:var(--row-gap10);} .sub_sec_head .txt .head_desc.type02 p:has(strong){margin-bottom:var(--row-gap10);} .sub_sec_head .txt .head_desc.type02 p{font-size:var(--text-19);color:var(--black-color03);} /*bullet*/ .bullet_list{display: flex;flex-direction: column;align-items: flex-start;gap:var(--row-gap10);} .bullet_list > li{display: flex;align-items: flex-start;gap:var(--row-gap10);font-size:var(--text-18);color:var(--black-color05);font-weight: 400;line-height:1.5;} .bullet_list > li:before{width:clamp(2px, 0.3vw, 4px);aspect-ratio:auto 1;content:"";border-radius:100%;background:var(--black-color08);display: inline-block;flex-shrink:0;translate:0 clamp(9px, 1vw, 11px);} /*──────────────────────────────────────────────────────────── Sub: About (HTC 소개) ────────────────────────────────────────────────────────────*/ .about_intro .sub_sec_head .txt .head_desc{padding-top:var(--row-gap40);margin-top:var(--row-gap20);border-top:1px solid var(--border-color01);} /* strength */ .about_strength {background: linear-gradient(135deg, #FFF 0%, #EFF3EE 71.43%);} .strength_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--col-gap30);} .strength_card { position: relative; padding: var(--row-gap40) var(--col-gap30); background: var(--point-white); border-radius: var(--radius-30); box-shadow: var(--shadow-01); display: flex;flex-direction: column;gap:var(--row-gap40);transition:all 0.3s;} .strength_card .num_box{display: flex;align-items: flex-start;justify-content: space-between;gap:var(--row-gap20);} .strength_card .num {font-size: var(--text-30); font-weight: 700; color: var(--point-color10);opacity:0.4;} .strength_card .ico { display: flex; align-items: center; justify-content: center; width:clamp(64px, 8vw, 80px); height:clamp(64px, 8vw, 80px); border-radius: 50%; background: linear-gradient(294deg, #2C3A22 15.13%, #627F5D 84.3%);} .strength_card .txt{display: flex;flex-direction: column;align-items: flex-start;gap:var(--row-gap10);} .strength_card h3 { font-size: var(--text-24);font-weight:600; color: var(--black-color01);line-height:1.6;} .strength_card p {font-size: var(--text-18); color: var(--black-color01);font-weight:400;line-height: 1.6;} @media (hover:hover) and (pointer:fine) { .strength_card:hover{translate:0 -10px;} } @media (max-width:1023px) { .strength_grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width:479px) { .strength_grid { grid-template-columns: 1fr; } } /* history */ #container:has(.about_history):before{content:"Hanlym Tactical Communication";font-size:clamp(40px, 5vw, 100px);color:var(--border-color01);font-weight:600;width:100%;position: absolute;bottom:clamp(-13px, -0.5vw, 0px);left:50%;translate:-50%;text-transform: uppercase;text-align: center;opacity:0.5;line-height:1;} .about_history { padding: var(--row-gap100) 0 var(--row-gap140);position: relative;} .about_history .history_list { position: relative;margin: 0 auto; padding: 0; list-style: none; --history-line-len: 100%; --history-progress: 0px; background:url('/images/history_map.png')no-repeat center / cover;} .about_history .history_list::before { content: ""; position: absolute; top:clamp(25px, 2.5vw, 35px); height:calc(var(--history-line-len) - 10px); left: 50%; width: 1px; background: var(--border-color01); translate: -50% 0; } .about_history .history_list::after { content: ""; position: absolute; top:clamp(25px, 2.5vw, 35px); left: 50%; width: 1px; height: min(var(--history-progress), calc(var(--history-line-len) - 10px)); background: var(--point-color03); translate: -50% 0; } .history_item { position: relative; width: 50%; padding-bottom: var(--row-gap60); } .history_item:last-child { padding-bottom: 0; } .history_item:nth-child(even) { padding-right: var(--col-gap50); } .history_item:nth-child(odd) { margin-left: 50%; padding-left: var(--col-gap50); } .history_item::before { content: ""; position: absolute; top:clamp(23px, 2vw, 30px); width: 8px; height: 8px; border-radius: 50%; background: var(--black-color08);box-shadow:0 0 0 clamp(5px, 0.8vw, 7px) var(--border-color01);z-index:3;} .history_item:nth-child(even)::before { right: -4px; } .history_item:nth-child(odd)::before { left: -4px; } .history_item.on::before {background:var(--point-color10);box-shadow: 0 0 0 clamp(5px, .8vw, 7px) #E2E9E0; } .history_con { display: flex; flex-direction: column; gap: var(--row-gap10); text-align: right; } .history_item:nth-child(odd) .history_con { text-align: left; } .history_con time {font-size: var(--text-44); font-weight:600; color: var(--black-color01);} .history_item.on time{background: linear-gradient(294deg, #627F5D 15.13%, #2C3A22 84.3%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;} .history_con .bullet_list > li{font-size:var(--text-19);color:var(--black-color03);} .history_con .bullet_list > li:before{translate:0 12px;} .history_item:nth-child(even) .history_con .bullet_list{align-items: flex-end;} .history_item:nth-child(even) .history_con .bullet_list > li{flex-direction:row-reverse;text-align: right;} @media (max-width:640px) { .about_history .history_list::before, .about_history .history_list::after { left: 4px; translate: 0; } #wrap .history_item { width: 100%; margin-left: 0; padding-left: var(--row-gap30); padding-right: 0; } #wrap .history_item::before { left: 0; right: auto; } .history_con { text-align: left; } .history_item:nth-child(even) .history_con .bullet_list{align-items: flex-start;} .history_item:nth-child(even) .history_con .bullet_list > li{flex-direction:row;text-align:left;} } /*──────────────────────────────────────────────────────────── Sub: SMT (SMT 사업부) ────────────────────────────────────────────────────────────*/ .smt_intro { padding: var(--row-gap100) 0 var(--row-gap140); background: var(--point-white); } .smt_intro .intro_row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--row-gap80); align-items: center;} .smt_intro .intro_thumb { margin: 0; aspect-ratio:auto 1; border-radius: var(--radius-20); overflow: hidden; } .smt_intro .intro_thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .smt_intro .intro_row .sub_sec_head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--row-gap30);text-align: left;} .smt_intro .intro_row .sub_sec_head .txt{text-align:left;align-items: flex-start;} .smt_intro .intro_row .sub_sec_head .desc{display: flex;flex-direction: column;align-items: flex-start;gap:clamp(10px, 1.2vw, 14px);padding-top:var(--row-gap30);border-top:1px solid var(--border-color01);} .smt_intro .intro_row .sub_sec_head .desc strong{font-size:var(--text-20);color:var(--black-color03);font-weight:500;line-height:1.7;font-family:var(--font-type02);} .smt_intro .intro_row .sub_sec_head .desc p{font-size:var(--text-18);color:var(--black-color05);font-weight:400;line-height:1.7;font-family:var(--font-type02);} .smt_intro .btn{margin-top:var(--row-gap30);} /*──────────────────────────────────────────────────────────── Sub: Technologies (기술 상세 - 항재밍 등 TECHNOLOGIES 하위 공통) ────────────────────────────────────────────────────────────*/ .tech_intro { padding: var(--row-gap100) 0 var(--row-gap140); background: var(--point-white); } .tech_intro .sub_sec_head { margin-bottom: var(--row-gap60); } .tech_visual { margin: 0; height: clamp(280px, 32vw, 580px); border-radius: var(--radius-20);box-shadow: 0 0 clamp(20px, 4vw, 40px) 0 rgba(98, 127, 93, 0.20);} .tech_features {background: linear-gradient(135deg, #FFF 0%, #EFF3EE 71.43%);} .feature_list { display: flex; flex-direction: column; gap: var(--row-gap40);} .feature_item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--row-gap60); align-items: center; } .feature_item:nth-child(odd) .feature_visual { order: -1; } .feature_visual { margin: 0; display: flex; align-items: center; justify-content: center; aspect-ratio: auto 1.8;padding:clamp(20px, 6vw, 60px);} .feature_visual img { display: block; max-width: 100%; height: auto; } .feature_body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--row-gap20); } .feature_num { display: inline-flex; align-items: center; gap:clamp(10px, 1.2vw, 14px);font-size: var(--text-16);color: var(--point-color10); font-weight:700;line-height:1.5;} .feature_num::after { content: ""; width: clamp(30px, 5vw, 60px); height: 2px; background: linear-gradient(270deg, rgba(98, 127, 93, 0.00) 0%, #627F5D 100%); } .feature_title {font-size: var(--text-36); color: var(--black-color01); font-weight:600;line-height:1.5;} .feature_eng { font-size: var(--text-20); color: var(--point-color10); font-weight:500; } .feature_body .txt{margin-top:var(--row-gap10);padding-top:var(--row-gap30);border-top: 1px solid var(--border-color01);display: flex;flex-direction: column;align-items: flex-start;gap:var(--row-gap20);} .feature_desc {font-size: var(--text-20); color: var(--black-color03);font-weight: 500; line-height: 1.7; font-family: var(--font-type02); } @media (min-width:1024px) { .feature_item:nth-child(even) .feature_body{padding-left:var(--row-gap50);} } @media (max-width:1023px) { .feature_item { grid-template-columns: 1fr; } .feature_item:nth-child(odd) .feature_visual { order: 0; } .feature_visual{padding:0;} } /*──────────────────────────────────────────────────────────── Sub: Technologies - Link Budget (링크 버짓 분석) ────────────────────────────────────────────────────────────*/ .link_chart {background: var(--point-color14); color: var(--point-white); } .link_chart .w_custom{display: flex;flex-direction: column;align-items: flex-start;gap:var(--row-gap30);} .chart_label { display: flex; align-items: center;gap:clamp(10px, 1.3vw, 16px);font-size: var(--text-32);color:var(--point-white);font-weight: 600; } .chart_label::before { content: ""; width:clamp(6px, 1vw, 10px);height:clamp(6px, 1vw, 10px); border-radius: 50%; background: var(--point-color12); flex-shrink: 0; } .chart_cond { display: flex; flex-wrap: wrap; align-items: center; gap: var(--row-gap20) var(--row-gap40);} .chart_cond .cond_check { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center;gap:clamp(6px, 1vw, 12px);font-size:var(--text-22);color:var(--point-white);font-weight:700;} .chart_cond .cond_check span{width:clamp(22px, 2.5vw, 28px); height:clamp(22px, 2.5vw, 28px); border-radius: 50%; background: linear-gradient(294deg, #627F5D 15.13%, #2C3A22 84.3%);flex-shrink:0;display: flex;align-items: center;justify-content: center;} .chart_cond .cond_check span img{filter:var(--filter-white);width:clamp(8px, 1vw, 12px);} .cond_list { display: flex; flex-wrap: wrap; gap: var(--row-gap10);} .cond_list > li { padding:var(--row-gap10) var(--row-gap20); border-radius: 100px; background: rgba(255, 255, 255, .05); font-size: var(--text-17); color: var(--point-white);font-weight:400;line-height:1.5;font-family:var(--font-type02);} .link_table_wrap { overflow-x: auto;width:100%; } .link_table { width: 100%; min-width: 900px;text-align: center;} .link_table th, .link_table td {border-bottom:1px solid rgba(169, 196, 160, 0.18);color:var(--point-white);} .link_table thead tr th{padding: clamp(10px, 1.5vw, 17px) var(--row-gap20);font-size:var(--text-18);font-weight:400;} .link_table thead tr:nth-child(1) th {background: rgba(169, 196, 160, 0.28);font-size:var(--text-20);font-weight:500;} .link_table thead tr:nth-child(2) th {background: rgba(169, 196, 160, 0.18);} .link_table thead tr:nth-child(3) th {background: rgba(169, 196, 160, 0.08);} .link_table tbody :is(th, td){padding:clamp(10px, 1.4vw, 16px) var(--row-gap10);font-size: var(--text-17);color:rgba(255,255,255,0.8);font-weight:400;} .link_table tbody th {font-weight:500; font-size: var(--text-18);color:var(--point-color12);} @media (max-width:640px) { .link_table { min-width: 760px; } .chart_cond { align-items: flex-start; } } /*──────────────────────────────────────────────────────────── Sub: Applications (무인체계 등 APPLICATIONS 하위 공통) ────────────────────────────────────────────────────────────*/ .app_intro { padding: var(--row-gap100) 0 var(--row-gap60); background: var(--point-white); } .app_list { display: flex; flex-direction: column; gap: var(--row-gap100); list-style: none; margin: 0; padding: 0 0 var(--row-gap160); } .app_item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--row-gap80); align-items: center; } .app_visual { margin: 0; aspect-ratio: auto 1.737; border-radius: var(--radius-20); } .app_body { display: flex; flex-direction: column; align-items: flex-start;gap:var(--row-gap20);} .app_num { display: inline-flex; align-items: center;font-size: var(--text-16); color: var(--point-color10); font-weight: 700; line-height: 1.5; gap:clamp(10px, 1vw, 14px)} .app_num::after { content: ""; width: clamp(30px, 5vw, 60px); height: 2px; background: linear-gradient(270deg, rgba(98, 127, 93, 0) 0%, #627F5D 100%); } .app_title { font-size: var(--text-36); color: var(--black-color01); font-weight: 600; line-height: 1.5; } .app_desc { margin-top: var(--row-gap10);font-size: var(--text-18); color: var(--black-color05); font-weight:400; line-height: 1.7; font-family: var(--font-type02); } @media (max-width:1023px) { .app_item { grid-template-columns: 1fr; } .app_list { gap: var(--row-gap60); } } .app_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--row-gap40); list-style: none; margin: 0;} .app_grid_visual { margin: 0; aspect-ratio: auto 1.619; border-radius: var(--radius-20); } .app_grid_caption { margin-top:clamp(10px, 2vw, 24px); text-align: center; font-size: var(--text-26); color: var(--black-color01); font-weight: 600; font-family: var(--font-type02); line-height:1.5;} @media (max-width:640px) { .app_grid { grid-template-columns: 1fr; gap: var(--row-gap40); } } #wrap .sub_content .app_highlight{padding-top:var(--row-gap120);position: relative;background: linear-gradient(135deg, #FFF 0%, #EFF3EE 71.43%);} .app_highlight:before{content:"";width:2px; height: clamp(40px, 6vw, 80px);background: var(--point-color10);position: absolute;top:calc(clamp(40px, 6vw, 80px) / 2 * -1);left:calc(50% - 1px);} .app_highlight .sub_sec_head h2{font-size:var(--text-34);} .app_highlight .sub_sec_head .txt{margin-top:0;} /*──────────────────────────────────────────────────────────── Sub: Support - Location (오시는 길) ────────────────────────────────────────────────────────────*/ .loc_tab_input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .loc_tab_nav { display:flex;align-items: center;justify-content: center; gap:clamp(10px, 3vw, 34px); margin-bottom: var(--row-gap40); } .loc_tab_btn { display: inline-block; cursor: pointer; padding-bottom:5px;font-size: var(--text-20); color: var(--black-color08); font-weight:600; border-bottom:1px solid var(--trans-color); transition: color .25s, border-color .25s; } #locTabHq:checked ~ .loc_tab_nav label[for="locTabHq"], #locTabFactory:checked ~ .loc_tab_nav label[for="locTabFactory"] { color: var(--point-color10);font-weight: 700; border-color: var(--point-color10); } #locTabHq:focus-visible ~ .loc_tab_nav label[for="locTabHq"], #locTabFactory:focus-visible ~ .loc_tab_nav label[for="locTabFactory"] { outline: 2px solid var(--point-color03); outline-offset: 4px; } .loc_panel { display: none; } #locTabHq:checked ~ #locPanelHq, #locTabFactory:checked ~ #locPanelFactory { display: block; } .loc_grid { display: grid; grid-template-columns: minmax(0, 2.42fr) minmax(0, 1fr); gap: var(--col-gap30); align-items: stretch; } .loc_map { position: relative; min-height: 360px; border-radius: var(--radius-10); overflow: hidden; } .loc_map iframe { display: block; width: 100%; height: 100%; min-height: 360px; border: 0; } .loc_info { display: flex; flex-direction: column; gap: var(--row-gap15); list-style: none; margin: 0; padding: 0; } .loc_info li { display: flex;flex-direction: column; align-items: flex-start; gap: var(--row-gap10); padding: var(--row-gap30); border-radius: var(--radius-10); background: var(--gray-bg13); } .loc_info strong {display: flex;align-items: center;gap:clamp(6px, 1vw, 12px);font-size: var(--text-20); color: var(--black-color00); font-weight:600; } .loc_ico { flex-shrink: 0; width:clamp(30px, 4vw, 40px); height:clamp(30px, 4vw, 40px); border-radius: 50%; background: linear-gradient(294deg, #627F5D 15.13%, #A9C4A0 84.3%);} .loc_info p { font-size: var(--text-18); color: var(--black-color03); line-height: 1.6; } .loc_traffic { margin-top: var(--row-gap60); } .traffic_label { display: flex; align-items: center; gap: clamp(10px, 1.3vw, 16px); font-size: var(--text-32); color: var(--black-color01); font-weight: 600; } .traffic_label::before { content: ""; width:clamp(6px, 1vw, 10px); height:clamp(6px, 1vw, 10px); border-radius: 50%; background: var(--point-color10); flex-shrink: 0; } .traffic_list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap20);margin: var(--row-gap30) 0 0; } .traffic_item { display: flex; align-items: center; gap: var(--row-gap60); padding: var(--row-gap20) var(--row-gap30); border: 1px solid var(--border-color01); border-radius: var(--radius-10); } .traffic_item .ico_box{flex-shrink:0;display: flex;align-items: center;gap:var(--row-gap10);} .traffic_ico { flex-shrink: 0;max-width:clamp(30px, 4vw, 40px);} .traffic_item .txt{position: relative;display: flex;align-items: center;gap:var(--row-gap10);} .traffic_item .txt:before{width:1px;height:clamp(12px, 2vw, 20px);content:"";background:var(--border-color01);position: absolute;left:calc(var(--row-gap60) / 2 * -1);top:50%;translate:0 -50%;} .traffic_type { font-size: var(--text-20); color: var(--black-color00); font-weight:600;line-height:1.5;} .traffic_badge { padding:2px 12px; border: 1px solid var(--point-blue); border-radius: 100px; font-size: var(--text-16); color: var(--point-blue); font-weight: 600; flex-shrink:0;} .traffic_item p {font-size: var(--text-18); color: var(--black-color03);font-family:var(--font-type02);} @media (max-width:1023px) { .loc_grid { grid-template-columns: 1fr; } .traffic_list { grid-template-columns: 1fr; } } @media (max-width:479px) { .traffic_item{align-items: flex-start;flex-direction: column;gap:var(--row-gap20);} .traffic_item .txt{flex-direction: column;align-items: flex-start;} .traffic_item .txt:before{display: none;} } /*──────────────────────────────────────────────────────────── 게시판 ────────────────────────────────────────────────────────────*/ /*input*/ #wrap [type="checkbox"]{display: inline-flex;align-items: center;justify-content: center;width: clamp(22px, 3.1vw, 24px);height: clamp(22px, 3.1vw, 24px);border: 1px solid var(--border-color01);flex-shrink: 0;cursor: pointer;appearance:none;background:var(--point-white);border-radius:var(--radius-04);} #wrap [type="checkbox"]::before{display: inline-flex;content:'';width: clamp(10px, 1.7vw, 12px);aspect-ratio: auto 1.33;background: url('/images/ico_chk.svg') no-repeat center / 100% auto;filter: var(--filter-black) opacity(0.2);} #wrap [type="checkbox"]:checked{border-color: var(--point-color10);background: var(--point-color10);} #wrap [type="checkbox"]:checked:before{filter: var(--filter-white);} #wrap label:has([type="checkbox"]){display:inline-flex;align-items: flex-start;gap: 10px;font-size: var(--text-18);font-weight:600;color: var(--black-color03);line-height: clamp(22px, 3.1vw, 24px);cursor: pointer;} #wrap label:has([type="checkbox"]) em{font-weight: 600; color: var(--point-red); display: contents;} :is(input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="email"], input[type="tel"], textarea, select) { height:clamp(40px, 5vw, 50px); line-height: 1.5; width: 100%; border:1px solid var(--border-color01);color: var(--black-color03); font-weight: 400; font-size: var(--text-18); font-family: var(--font-type02); padding: 0 clamp(10px, 2vw, 20px); 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;box-sizing: border-box;border-radius:var(--radius-08);} #wrap textarea {min-height:clamp(120px, 20vw, 200px); resize: none; padding:var(--row-gap20);} #wrap select{appearance:none;-webkit-appearance:none;background:var(--point-white) url('/images/sel_arw.svg')no-repeat right var(--row-gap20) center / auto clamp(5px, 0.6vw, 8px);padding-right:clamp(14px, 2.5vw, 34px);cursor:pointer;} #wrap :is(input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="email"], input[type="tel"], textarea)::placeholder { color: var(--black-color08); font-weight: 400; } #wrap :is(input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="email"], input[type="tel"], textarea):focus {background: var(--point-white); border-color: var(--point-color01);} /* === search === */ #wrap .search_wrap{margin-bottom:var(--row-gap40);} #wrap .search_wrap .inp_box {display: flex; justify-content:flex-end; gap: 10px; width: 100%;} #wrap .search_wrap .inp_box [type="text"]{width: 360px;} #wrap .search_wrap .inp_box button{width:clamp(48px, 6vw, 60px);aspect-ratio:auto 1;background:var(--black-color01) url('/images/ico_search.svg') no-repeat center / clamp(16px, 2vw, 22px) auto;box-sizing:border-box;font-size:0;} /* === paging === */ #wrap .paging {display: flex; justify-content: center; align-items: center; width:100%; text-align:center;margin-top: var(--row-gap60);} #wrap .paging span {display:inline-block;vertical-align:top;} #wrap .paging a {box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;font-size:var(--text-17);font-weight: 500;color:var(--black-color08);padding:0;border:0;box-sizing:border-box;width:clamp(30px, 4vw, 40px);height:clamp(30px, 4vw, 40px);line-height:1;min-width:auto;border-radius:var(--radius-10);text-align:center;vertical-align:top;margin:0 5px;} #wrap .paging :is(.on a, a.on){background:var(--black-color01);color:var(--point-white);font-weight:600;} #wrap .paging .arrow a {font-size:0;width:clamp(20px, 3vw, 30px); background:no-repeat center; } #wrap .paging .arrow.first a {background-image:url("/images/paging_first.svg");} #wrap .paging .arrow.prev a {background-image:url("/images/paging_prev.svg"); margin-right: 10px;} #wrap .paging .arrow.next a {background-image:url("/images/paging_prev.svg"); margin-left: 10px;scale:-1 -1;} #wrap .paging .arrow.last a {background-image:url("/images/paging_first.svg");scale:-1 -1;} @media (max-width:860px) { #wrap .paging {position: relative; left: inherit; top: inherit; translate: 0; width: 100%;} #wrap .paging + .btn_wrap {margin-top: var(--row-gap40);} } /* === write === */ #wrap .bbs_write { box-sizing: border-box; display: flex; flex-direction: column; flex-wrap: wrap; gap: var(--row-gap20); padding-block: var(--row-gap30); border-top: 1px solid var(--black-color01); border-bottom: 1px solid var(--border-color01); } #wrap .bbs_write .line2 { gap: var(--row-gap60); } #wrap .bbs_write dl { display: flex; flex-wrap: wrap; width: 100%; align-items: center; box-sizing: border-box; } #wrap .bbs_write dl dt { width: clamp(140px, 12vw, 180px); box-sizing: border-box; padding-right: 15px; padding-left: 2px; color: var(--black-color03); font-weight: 500; font-size: var(--text-19); letter-spacing: -0.03em; } #wrap .bbs_write dl dd { width: calc(100% - clamp(140px, 12vw, 180px)); display: flex; align-items: center; gap: 10px; } #wrap .req .require_dot { color: var(--point-red); } #wrap dl dt:not(.req) .require_dot{display: none;} #wrap .bbs_write .bbs_file dd{flex-direction: column;align-items: flex-start;} #wrap .bbs_file input[type="file"]{display: none;} #wrap .bbs_file .bf-file-wrap{display: none;} #wrap .bbs_file .file_box{display: flex;align-items: center;gap:var(--row-gap10);width:100%;} #wrap .bbs_file .file_btn{display: inline-flex;align-items: center;justify-content: center;height:clamp(40px, 5vw, 50px);border:1px solid var(--black-color01);font-size:var(--text-18);color:var(--black-color01);font-weight:500;cursor:pointer;width:clamp(100px, 12vw, 120px);flex-shrink:0;border-radius: var(--radius-08);} #wrap .bbs_file .file_name{display:flex;align-items: center;height: clamp(40px, 5vw, 50px);line-height: 1.5;width: 100%;border: 1px solid var(--border-color01);color: var(--black-color03);font-weight: 400;font-size: var(--text-18);font-family: var(--font-type02);padding: 0 clamp(10px, 2vw, 20px);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;border-radius: var(--radius-08);} #wrap .captcha_wrap {display: flex; gap: 10px; padding: 10px;box-shadow: inset 0 0 0 1px var(--border-color01);border-radius:var(--radius-08);} #wrap .captcha input[type="text"] {width: calc(100% - 180px);} #wrap .db-captcha-img {width:100px;} #wrap .db-captcha-refresh {display: flex; justify-content: center; align-items: center; width:30px; height:30px;border:1px solid var(--border-color01);border-radius:var(--radius-04);} #wrap .policy_wrap {padding-block: var(--row-gap30) var(--row-gap60);} #wrap .policy_wrap .chk_cont{background:var(--gray-bg13);padding:var(--row-gap20);border-radius:var(--radius-10);display: flex;flex-wrap:wrap;gap:var(--row-gap10);} #wrap .policy_wrap button {text-decoration: underline; text-underline-offset: 4px;} .view_btn{display: flex;align-items: center;justify-content: center;} .view_btn .btn{width:clamp(120px, 15vw, 150px);height:clamp(48px, 5.5vw, 60px);border: 2px solid var(--point-color03); border-radius: 8px; background:var(--point-color03);font-family: var(--font-type02); font-size: var(--text-20); line-height: 1.6; color: var(--point-white); font-weight: 700; letter-spacing: 0;transition:all .3s; padding:0;} .view_btn .btn::after{display: none;} @media (hover:hover) and (pointer:fine) { .view_btn .btn:hover {background: rgba(255, 255, 255, 0); box-shadow: inset 0 0 6px 4px rgba(98, 128, 93, .12);color:Var(--point-color03)} } @media (max-width:1023px) { #wrap .captcha dd {flex-wrap: wrap;} #wrap .captcha input[type="text"] {width: 100%;} } @media (max-width:860px) { #wrap .captcha_wrap {padding: 6px; gap: 6px;} #wrap .bbs_write .line2 {gap: var(--row-gap30); grid-template-columns: var(--grid-array01);} #wrap .bbs_write dl dt { width: clamp(120px, 17.58vw, 180px);} #wrap .bbs_write dl dd { width: calc(100% - clamp(120px, 17.58vw, 180px));} } @media (max-width:479px) { #wrap .bbs_write {gap: var(--row-gap35);} #wrap .bbs_write dl {align-items: flex-start; flex-direction: column; gap: 10px;} #wrap .bbs_write dl dt, #wrap .bbs_write dl dd {width: 100%;} } /* === complete === */ #wrap .complete_box {width:100%;box-sizing:border-box;border:1px solid var(--border-color01);text-align: center;padding:var(--row-gap60);border-radius:var(--radius-15);} #wrap .complete_box .chk_ico{width: var(--row-gap70); height: var(--row-gap70); margin: 0 auto; background-color: var(--gray-bg01);} #wrap .complete_box .chk_ico .text-green-600 {color: var(--point-color10);} #wrap .complete_box h4 {font-size:var(--text-28);color:var(--black-color03);font-weight:600;margin-top: var(--row-gap30);} #wrap .complete_box p {font-size:var(--text-20);color:var(--black-color05);margin-top: var(--row-gap20);} #wrap .complete_box .view_btn {margin-top: var(--row-gap50);} @media (max-width:1023px) { #wrap .complete_box .chk_ico {width: var(--row-gap95); height: var(--row-gap95);} } /*──────────────────────────────────────────────────────────── Product: 목록 (그룹 인트로 + 카드 그리드) ────────────────────────────────────────────────────────────*/ .pf-list-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:28px; } .pf-card { display: flex; flex-direction: column;padding: var(--row-gap40) var(--row-gap20) var(--row-gap20); border: 1px solid var(--border-color01); background: var(--point-white);border-radius:var(--radius-20);transition:all .3s; position: relative;} .pf-card.is-current { border-color: var(--point-color10); background: var(--gray-bg04); } .pf-card.is-current .pf-card-title { color: var(--point-color05); } /* 3차 카테고리 — 이름만 노출하는 간단한 내비게이션 */ .pf-cat-nav-list { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 40px); justify-content: center; margin-bottom: var(--row-gap40); } .pf-cat-nav-link { display: inline-block; padding:5px 4px; font-size: var(--text-16); color: var(--black-color08); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .25s, border-color .25s; } .pf-cat-nav-link.is-current { color: var(--point-color10); border-color: var(--point-color10); font-weight: 700; } .pf-card:after{width:100%;height:100%;position: absolute;top:0;left:0;content:"";border-radius:var(--row-gap20);z-index: 3; padding: 2px; background: linear-gradient(90deg, var(--point-color13) 0%, var(--point-color12) 25%, var(--point-color13) 50%, var(--point-color12) 75%, var(--point-color13) 100%); mask: linear-gradient(var(--black-color00) 0 0) content-box, linear-gradient(var(--black-color00) 0 0); mask-composite: exclude; -webkit-mask: linear-gradient(var(--black-color00) 0 0) content-box, linear-gradient(var(--black-color00) 0 0); -webkit-mask-composite: xor; opacity:0;pointer-events:none;transition:all 0.3s;} .pf-card-title {display: flex;align-items:flex-start;justify-content: space-between;font-size: var(--text-28);color: var(--black-color01); font-weight:600;line-height:1.3;padding-inline:var(--row-gap20);gap:var(--row-gap10)} .pf-card-title .plus{display: inline-flex;align-items: center;justify-content: center;width:clamp(30px, 4vw, 40px);aspect-ratio:auto 1;border-radius:100%;background:var(--point-color10);flex-shrink:0;opacity:0;pointer-events:none;transition:all 0.3s;} .pf-card-title .plus:before{width: clamp(10px, 1.2vw, 14px);height: clamp(10px, 1.2vw, 14px);clip-path: polygon(42% 0, 58% 0, 58% 42%, 100% 42%, 100% 58%, 58% 58%, 58% 100%, 42% 100%, 42% 58%, 0 58%, 0 42%, 42% 42%);content: "";background: var(--point-white);} .pf-card-thumb { flex: 1; display: flex; align-items: center; justify-content: center; margin-top: var(--row-gap30);width:100%;aspect-ratio:auto 1;} /* 제품 썸네일 공통 — 1:1 영역에 이미지 전체 노출(잘림 방지, .ofc cover 덮어씀) */ .pf-card-thumb img, .dl-tab-btn .img img, .dl-panel-thumb img, .pf-hero-main img, .pf-hero-thumb img, .pf-slide-item img, .pf-related-thumb img { object-fit: contain !important; } @media (hover:hover) and (pointer:fine) { .pf-card:hover:after, .pf-card:hover .pf-card-title .plus{opacity:1;pointer-events:initial;} .pf-cat-nav-link:hover { color: var(--point-color10); } } @media (max-width:1023px) { .pf-list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-card-title{padding:0;} .pf-card-title .plus{display: none;} } @media (max-width:640px) { .pf-list-grid { grid-template-columns: 1fr; gap: var(--row-gap20); } } /*──────────────────────────────────────────────────────────── Product: 상세 (히어로 이미지+정보 다크박스 / 사양 / 다른 제품 보기) ────────────────────────────────────────────────────────────*/ .pd_title{position: relative;padding-bottom:var(--row-gap160);} .pd_title .bg{width:100%;height:100%;position: absolute;top:0;left:0;} .pd_title .sub_sec_head .txt{padding-top:var(--row-gap30);} .pd_title .sub_sec_head .txt:before{width:clamp(20px, 4vw, 40px);height:2px;content:"";background:var(--point-color10);position: absolute;top:calc(var(--row-gap10) * -1);left:50%;translate:-50%;} .pd_title .sub_sec_head .txt p strong{font-size:var(--text-24);} .prd_list .datalink_head {flex-direction:row;justify-content: space-between;margin-bottom:var(--row-gap30);} .prd_list .datalink_head h2{flex-shrink:0;text-align: left;} .prd_list .datalink_head .txt{margin:0;width:auto;} .prd_list .datalink_head .txt .head_desc{text-align: right;} @media (max-width: 479px) { .prd_list .datalink_head{flex-direction: column;} .prd_list .datalink_head h2, .prd_list .datalink_head .txt .head_desc{text-align: center;} } /* 용어설명 콜아웃 박스 (예: "FASST란?") */ .pf-term-box { position: relative; z-index: 1; display: flex; align-items:flex-start;background: var(--point-white); border: 1px solid var(--point-color10); border-radius: var(--radius-20); padding: var(--row-gap40);margin-top:var(--row-gap30);} .pf-term-badge { display: flex; align-items: center; gap:clamp(6px, 1vw, 12px);flex-shrink: 0;width:clamp(200px, 25vw, 280px);} .pf-term-check { display: flex; align-items: center; justify-content: center;width:clamp(20px, 2.5vw, 28px);height:clamp(20px, 2.5vw, 28px);border-radius: 50%; background:linear-gradient(294deg, #627F5D 15.13%, #2C3A22 84.3%);flex-shrink: 0; } .pf-term-check img{filter:var(--filter-white);width:clamp(8px, 1vw, 12px);} .pf-term-label {font-size: var(--text-22); font-weight:700; color: var(--black-color03);} .pf-term-content {font-size: var(--text-18);color: var(--black-color05); line-height: 1.7;font-family:var(--font-type02);} .pf-term-content p + p { margin-top: 4px; } @media (max-width: 768px) { .pf-term-box { flex-direction: column;gap: var(--row-gap15);padding:var(--row-gap30);} .pf-term-badge{width:100%;} } .pf-hero { background: var(--point-color14); overflow: hidden; padding-block:var(--row-gap160); } .pf-hero .w_custom { display: flex; gap: var(--row-gap80); align-items: center; } .pf-hero-gallery { width: 47.14%; flex-shrink: 0; } .pf-hero-main { position: relative; width: 100%;border-radius: var(--radius-20);background:var(--point-white);aspect-ratio:auto 1;} .pf-thumbs-box{position: relative;margin-top: var(--row-gap30);} .pf-hero-thumb { width: 100%; aspect-ratio: 1; border-radius: var(--radius-10);background:var(--point-white);overflow: hidden;position: relative;cursor: pointer;} .pf-hero-thumb:after{width:100%;height:100%;position: absolute;top:0;left:0;content:"";border-radius:var(--radius-10);z-index: 3; padding: 2px; background: linear-gradient(90deg, var(--point-color13) 0%, var(--point-color12) 25%, var(--point-color13) 50%, var(--point-color12) 75%, var(--point-color13) 100%); mask: linear-gradient(var(--black-color00) 0 0) content-box, linear-gradient(var(--black-color00) 0 0); mask-composite: exclude; -webkit-mask: linear-gradient(var(--black-color00) 0 0) content-box, linear-gradient(var(--black-color00) 0 0); -webkit-mask-composite: xor; opacity:0;pointer-events:none;transition:all 0.3s;} .pf-hero-thumb.is-active:after {opacity:1;pointer-events:initial;} .pf-thumbs-box .pf-thumb-nav{width:30px;aspect-ratio:auto 1;display: flex;align-items: center;justify-content: center;position: absolute;top:50%;translate:0 -50%;left:-30px;} .pf-thumbs-box .pf-thumb-nav:before{width:45%;aspect-ratio:auto 1;content:"";border:2px solid var(--point-white);border-width:2px 2px 0 0;rotate:-135deg;} .pf-thumbs-box .pf-thumb-nav.pf-thumb-next{scale:-1 -1;right:-30px;left:auto;} .pf-thumbs-box .swiper-button-disabled{opacity:0.5;} .pf-hero-info {color: var(--point-white);width:100%;} .pf-hero-title { font-size: var(--text-40); font-weight:600;letter-spacing:0.03em;} .pf-hero-content { color: var(--white-alpha80); font-size: var(--text-16); line-height: 1.7;margin-top:var(--row-gap30);padding-block:var(--row-gap30);border:1px solid rgba(255,255,255,0.2);border-width:1px 0;} .pf-hero-content .bullet_list > li{color:var(--point-white);} .pf-hero-content .bullet_list > li:before{background:var(--black-color08);} .pf-hero-logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--row-gap20); margin-top: var(--row-gap30); } .pf-hero-logos img {max-height:clamp(40px, 5vw, 55px);} .pf-hero-buttons { display: flex; flex-wrap: wrap; gap: var(--row-gap20);margin-top:var(--row-gap30);} .pf-hero-buttons .btn img{filter:var(--filter-white);} @media (max-width: 1023px) { .pf-hero .w_custom { flex-direction: column; } .pf-hero-gallery { width: 100%; } .pf-thumbs-box{padding:0 25px;} .pf-thumbs-box .pf-thumb-nav{left:-5px;} .pf-thumbs-box .pf-thumb-nav.pf-thumb-next{right:-5px;} } /* 사양 (Specifications) */ .pf-spec{padding-block:var(--row-gap160);} .pf-sec-title { display: flex; align-items: center; gap:clamp(10px, 1.4vw, 16px);font-size: var(--text-32); font-weight: 700; color: var(--black-color01); margin-bottom: var(--row-gap30);} .pf-sec-title:before { content: ''; width:clamp(6px, 1vw, 10px); height:clamp(6px, 1vw, 10px); border-radius: 50%; background: var(--point-color10); flex-shrink: 0; } .pf-spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--row-gap20); } .pf-spec-item { border: 1px solid var(--border-color01); border-radius: var(--radius-10); padding: var(--row-gap30) var(--row-gap40);display: flex;flex-direction: column;align-items: flex-start;gap:var(--row-gap10)} .pf-spec-label { font-size: var(--text-17); color: var(--point-color10); font-weight: 600;line-height:1.6;font-family: var(--font-type02);} .pf-spec-value { font-size: var(--text-20); color: var(--black-color03); font-weight:500;line-height:1.6;font-family: var(--font-type02);} @media (max-width: 640px) { .pf-spec-grid { grid-template-columns: 1fr; } } /* 다른 제품 보기 */ .pf-related{background: linear-gradient(135deg, #FFF 0%, #EFF3EE 71.43%), #FFF;padding-block:var(--row-gap160);} .pf-related .related_box{position: relative;} .pf-related .swiper-slide{height:auto;} .pf-related-card { display:flex;flex-direction: column;gap:clamp(10px, 1.2vw, 14px); height: 100%; border-radius: var(--radius-15); padding: var(--row-gap30); text-align: center; background: var(--point-white);} .pf-related-card.is-current { background: linear-gradient(202deg, #627F5D 16.49%, #2C3A22 84.31%); border-color: transparent; } .pf-related-thumb {width:100%;aspect-ratio:auto 1; display: flex; align-items: center; justify-content: center;} .pf-related-name { font-size: var(--text-20); font-weight: 700; color: var(--black-color01); } .pf-related-card.is-current .pf-related-name { color: var(--point-white); } .pf-related .related_box .pf-thumb-nav{width:30px;aspect-ratio:auto 1;display: flex;align-items: center;justify-content: center;position: absolute;top:50%;translate:0 -50%;left:-30px;} .pf-related .related_box .pf-thumb-nav:before{width:45%;aspect-ratio:auto 1;content:"";border:2px solid var(--point-color10);border-width:2px 2px 0 0;rotate:-135deg;} .pf-related .related_box .pf-thumb-nav.pf-rel-next{scale:-1 -1;right:-30px;left:auto;} .pf-related .related_box .swiper-button-disabled{opacity:0.5;} @media (max-width: 860px) { .pf-related .related_box .swiper{overflow:visible;} .pf-related .related_box .pf-thumb-nav{display: none;} } /*──────────────────────────────────────────────────────────── Product: 데이터링크 목록 — 탭 전환형 (클릭 시 JS 로 is-active 토글) ────────────────────────────────────────────────────────────*/ .dl-tabs { position: relative; } .dl-tab-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--row-gap20); margin-bottom: var(--row-gap30); } .dl-tab-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap:var(--row-gap10);padding: var(--row-gap20);border-radius: var(--radius-15); cursor: pointer; background: var(--gray-bg13); transition: all .25s; text-align: center; } .dl-tab-btn .img{width:clamp(70px, 9vw, 90px);aspect-ratio:auto 1;display: flex;align-items: center;justify-content: center;} .dl-tab-btn span { font-size: var(--text-18); font-weight:600; color: var(--black-color01); } .dl-tab-btn.is-active { background: linear-gradient(202deg, #627F5D 16.49%, #2C3A22 84.31%);} .dl-tab-btn.is-active span { color: var(--point-white); } .dl-panels { position: relative; } .dl-tab-panel { display: none;align-items: center;border-radius: var(--radius-20); overflow: hidden; position: relative;padding:var(--row-gap60);box-shadow: 0 0 clamp(20px, 4vw, 40px) 0 rgba(98, 127, 93, 0.20);gap:var(--row-gap60);} .dl-tab-panel:after{width:100%;height:100%;position: absolute;top:0;left:0;content:"";border-radius:var(--radius-20);z-index: 3; padding: 2px; background: linear-gradient(90deg, var(--point-color13) 0%, var(--point-color12) 25%, var(--point-color13) 50%, var(--point-color12) 75%, var(--point-color13) 100%); mask: linear-gradient(var(--black-color00) 0 0) content-box, linear-gradient(var(--black-color00) 0 0); mask-composite: exclude; -webkit-mask: linear-gradient(var(--black-color00) 0 0) content-box, linear-gradient(var(--black-color00) 0 0); -webkit-mask-composite: xor;pointer-events:none;transition:all 0.3s;} .dl-tab-panel.is-active { display: flex; } .dl-panel-thumb { width: clamp(300px, 46vw, 576px); max-width: 100%; aspect-ratio: 1;flex-shrink: 0; } .dl-panel-info {width:100%;} .dl-panel-title { font-size: var(--text-40); font-weight:600; color: var(--black-color01);line-height:1.5;letter-spacing:0.03em} .dl-panel-specs { display: flex; flex-direction: column; gap:clamp(10px, 1.2vw, 14px);margin-block:var(--row-gap20) var(--row-gap30);padding-block:var(--row-gap30);border:1px solid var(--border-color01);border-width:1px 0;} .dl-spec-row { display: flex; gap: var(--row-gap10);font-family:var(--font-type02);} .dl-spec-row dt { width:clamp(130px, 15vw, 170px);flex-shrink: 0;font-size: var(--text-17);color: var(--point-color10);font-weight: 600;line-height:1.7;} .dl-spec-row dd {font-size:var(--text-18);color: var(--black-color03); font-weight:400;line-height:1.6;} @media (max-width: 1023px) { .dl-tab-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dl-tab-panel{flex-direction: column;align-items: flex-start;gap:var(--row-gap40)} .dl-panel-thumb{width:100%;} } @media (max-width: 640px) { .dl-tab-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dl-tab-panel{padding:var(--row-gap30);} } @media (max-width: 479px) { .dl-spec-row{flex-direction: column;gap:0;} .dl-spec-row dt{width:100%;} } /* ===== Header feedback p2 : 문의하기 hover 흰색 / 메뉴 풀 펼침(mega) ===== */ @media (hover:hover) and (pointer:fine) { /* 투명 헤더 문의하기 버튼 hover → 흰 배경 */ #header:not(.on) .utility a.contact:hover, #header:not(.on) .utility a.contact:focus-visible { background: var(--point-white) !important; border-color: var(--point-white) !important; box-shadow: none !important; color: var(--point-color03) !important; } /* 메뉴 hover 시 헤더 전체 폭 흰색 + 서브메뉴 전체 펼침 */ #header:has(.gnb:hover):not(.on) { background: var(--point-white); border-color: rgba(98, 128, 93, .22); } #header:has(.gnb:hover) .logo .img { display: none; } #header:has(.gnb:hover) .logo .ov { display: block; } #header:has(.gnb:hover) .gnb>li>a { color: var(--point-color09); } #header:has(.gnb:hover) .gnb>li>a:hover { color: var(--point-color03); } #header .gnb::after { z-index: 1; content: ""; position: absolute; left: 0; top: 100%; width: 100%; height: var(--mega-h, 200px); background: var(--point-white); border-bottom: 1px solid rgba(98, 128, 93, .22); opacity: 0; pointer-events: none; transition: opacity .3s; } #header .gnb:hover::after { opacity: 1; pointer-events: auto; } #header .gnb:hover .dep02 { opacity: 1; pointer-events: auto; top: 100%; } #header .gnb .dep02 { z-index: 2; top: 100%; min-width: 0; max-width: none; padding-block: 24px; background: transparent; backdrop-filter: none; border: 0; } #header .gnb .dep02>li>a { color: var(--black-color03); white-space: nowrap; } #header .gnb .dep02>li>a:hover { color: var(--point-color03); background: rgba(121, 169, 112, .14); } } /* ===== Main feedback p3 : SCROLL DOWN 가로 배치 + 점 낙하 모션 (참고: hlpuritech .visualSwiper .scr-dwn) ===== */ .htc_main .scroll-down { flex-direction: row; align-items: center; flex-wrap: wrap; gap: clamp(10px, 1.3vw, 13px); } .htc_main .scroll-down span { writing-mode: horizontal-tb; font-size: var(--text-16); font-weight: 500; font-family: var(--font-type02); } .htc_main .scroll-down i { position: relative; display: flex; align-items: center; justify-content: center; width: clamp(26px, 3.2vw, 30px); height: auto; aspect-ratio: 1; border: 1px solid rgb(255 255 255 / 50%); border-radius: 100%; background: none; overflow: hidden; transition: none; } .htc_main .scroll-down i::before { content: ""; display: inline-flex; position: absolute; top: 0; left: 50%; width: 4px; aspect-ratio: 1; margin-left: -2px; border-radius: inherit; background: var(--point-white); animation: scrDwn 1s linear infinite; } @keyframes scrDwn { from { top: -10px; } to { top: calc(100% + 10px); } } @media (hover:hover) and (pointer:fine) { .htc_main .scroll-down:hover i { transform: none; } } @media (prefers-reduced-motion: reduce) { .htc_main .scroll-down i::before { animation: none; top: 50%; margin-top: -2px; } } /* ===== Feedback p4 : 화살표 버튼 hover (색상 부드러운 전환 + 글로우 + 화살표 우측 이동 + 화살표 크기·두께 통일) ===== */ /* 그라디언트는 transition 이 안 되므로 색상 정지점을 @property 변수로 등록해 전환 */ @property --btn-g1 { syntax: ''; inherits: false; initial-value: transparent; } @property --btn-g2 { syntax: ''; inherits: false; initial-value: #475c43; } .btn.btn_gradient:not(.btn_solid), .htc_main .hero_copy a.btn.btn_solid { --btn-g1: var(--trans-color); --btn-g2: var(--point-color13); background: linear-gradient(270deg, var(--btn-g1) 0%, var(--btn-g2) 100%); transition: --btn-g1 .4s ease, --btn-g2 .4s ease, box-shadow .4s ease, color .35s ease; } .btn.btn_gradient.type02:not(.btn_solid) { --btn-g1: #000; --btn-g2: #475c43; } /* 화살표: 크기·두께 통일 (icon-arrow.svg 원본 비율 11×13 = 선 두께 1.5px 유지) */ .btn_gradient .arrow, .btn_gradient > span[aria-hidden="true"]:not(:has(img)), .htc_main .hero_copy .btn .arrow { display: block; flex-shrink: 0; width: 11px; height: 13px; font-size: 0; background: url('/images/icon-arrow.svg') center/100% 100% no-repeat; transform: rotate(90deg) scaleY(-1); transition: translate .4s cubic-bezier(.22, .61, .36, 1); } .btn_basic { transition: background-color .35s ease, box-shadow .35s ease, color .35s ease, border-color .35s ease; } @media (hover:hover) and (pointer:fine) { .btn.btn_gradient:not(.btn_solid):hover, .htc_main .hero_copy a.btn.btn_solid:hover { --btn-g1: var(--point-color10); --btn-g2: var(--point-color10); background: linear-gradient(270deg, var(--btn-g1) 0%, var(--btn-g2) 100%); box-shadow: 0 0 24px 4px rgba(98, 128, 93, .35); } .btn_gradient:hover .arrow, .btn_gradient:hover > span[aria-hidden="true"]:not(:has(img)), .htc_main .hero_copy .btn:hover .arrow { translate: 5px 0; } } @media (prefers-reduced-motion: reduce) { .btn.btn_gradient:not(.btn_solid), .htc_main .hero_copy a.btn.btn_solid, .btn_gradient .arrow, .btn_gradient > span[aria-hidden="true"] { transition: none; } } /* ===== 제품 상세 : 타이틀 아래 요약설명(제품유형) + 상단 버튼(문의하기 버튼과 동일 규격) ===== */ .pf-hero-type { margin-top: var(--row-gap10); font-size: var(--text-16); font-weight: 500; line-height: 1.5; letter-spacing: .02em; text-transform: uppercase; color: var(--point-color06); } .pf-hero .pf-hero-buttons a.btn.btn { width: auto; min-width: 120px; height: 48px; padding: 0 clamp(16px, 2vw, 22px); border: 2px solid var(--point-color03); border-radius: 8px; font-family: var(--font-type02); font-size: var(--text-17); font-weight: 700; line-height: 1.6; letter-spacing: 0; text-transform: none; color: var(--point-white); gap: 8px; } .pf-hero .pf-hero-buttons a.btn.btn_basic { background: var(--point-color03); transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease; } .pf-hero .pf-hero-buttons a.btn.btn_gradient { --btn-g1: var(--point-color03); --btn-g2: var(--point-color03); transition: --btn-g1 .4s ease, --btn-g2 .4s ease, border-color .35s ease, box-shadow .4s ease; } .pf-hero .pf-hero-buttons a.btn > span:has(img) { display: inline-flex; align-items: center; } .pf-hero .pf-hero-buttons a.btn > span img { display: block; width: 14px; height: 14px; object-fit: contain; } @media (hover:hover) and (pointer:fine) { .pf-hero .pf-hero-buttons a.btn.btn_basic:hover { background: var(--point-color10); border-color: var(--point-color10); color: var(--point-white); box-shadow: 0 0 24px 4px rgba(98, 128, 93, .35); } .pf-hero .pf-hero-buttons a.btn.btn_gradient:hover { border-color: var(--point-color10); } } /* ===== 문의 완료 : 버튼 (문의하기 버튼 규격으로 통일 — 12p 상단 버튼과 동일) ===== */ .complete_box .btn_wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--row-gap20); } .complete_box .btn_wrap a.btn.btn, .complete_box .btn_wrap a.sub_btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: auto; min-width: 120px; height: 48px; padding: 0 clamp(16px, 2vw, 22px); border: 2px solid var(--point-color03); border-radius: 8px; font-family: var(--font-type02); font-size: var(--text-17); font-weight: 700; line-height: 1.6; letter-spacing: 0; text-transform: none; gap: 8px; } .complete_box .btn_wrap a.btn.btn { color: var(--point-white); } .complete_box .btn_wrap a.btn.btn_gradient { --btn-g1: var(--point-color03); --btn-g2: var(--point-color03); transition: --btn-g1 .4s ease, --btn-g2 .4s ease, border-color .35s ease, box-shadow .4s ease; } .complete_box .btn_wrap a.sub_btn { background: transparent; color: var(--point-color03); transition: background-color .35s ease, color .35s ease, box-shadow .4s ease; } @media (hover:hover) and (pointer:fine) { .complete_box .btn_wrap a.btn.btn_gradient:hover { border-color: var(--point-color10); } .complete_box .btn_wrap a.sub_btn:hover { background: var(--point-color03); color: var(--point-white); box-shadow: 0 0 24px 4px rgba(98, 128, 93, .35); } } @media (prefers-reduced-motion: reduce) { .complete_box .btn_wrap a.btn.btn_gradient, .complete_box .btn_wrap a.sub_btn { transition: none; } }