.sub_visual { background : url('../img/sub/sub_visual.png') no-repeat bottom center / cover; padding-top : 3rem; } 
.sub_visual .small_container { padding : 5rem 1rem } 
.sub_visual .flex { gap : 3rem; justify-content: space-between; align-items: end; } 
.sub_visual h2 { font-size: 3rem; letter-spacing: -2px; } 
.sub_visual div p { font-size : 1.2rem; margin : 1rem 0 2rem; line-height: 140%; } 
.sub_visual .link_wrap { gap : .5rem } 
.sub_visual .link_wrap a { display : inline-flex; border-radius : .5rem; border : 2px solid var(--point); padding: .3rem 1.2rem .3rem .3rem; align-items: center; gap: 1.2rem; font-size : 1rem; color : var(--white); background-color: var(--point); font-weight: 500; } 
.sub_visual .link_wrap a span { display : flex; width : 2.5rem; height : 2.5rem; background-color: var(--lightpoint); justify-content: center; align-items: center; border-radius : .5rem } 
.sub_visual .link_wrap a span img { width : 18px } 
.sub_visual .link_wrap a:hover { background-color: var(--white); color : var(--point); border-color : #ffe4e1 } 

.sub_visual .pagination { display: flex; align-items: center; gap : .3rem; font-size : .9rem; margin : 0 } 
.sub_visual .pagination a { display : inline-flex; align-items: center; } 
.sub_visual .pagination svg { width : 23px; height : 23px; fill : #333 } 
.sub_visual .pagination * { white-space: nowrap; } 


.sub_title { text-align: center; font-weight: bold; margin-bottom : 3rem; font-size : 2.4rem; padding : 0 1rem } 
.list_type_01_wrap { margin-bottom : 7rem } 
.list_type_01_wrap .box { border : 2px solid #eee; border-radius : 1rem; padding : 2rem } 
.list_type_01_wrap .box ~ .box { margin-top : 1rem } 
.list_type_01_wrap .box span { display : inline-block; background-color: var(--lightpoint); color : var(--point); padding : .5rem 1rem; border-radius: 1rem; font-size : .9rem; font-weight: 600; } 
.list_type_01_wrap .box h2 { margin : 1.5rem 0 2rem; font-size : 1.8rem; line-height: 120%; } 
.list_type_01_wrap .box p { color : #333; } 

.list_type_02_wrap { display : flex; gap : 1rem; flex-wrap : wrap; justify-content: space-between; } 
.list_type_02_wrap .box { border : 2px solid #eeeeee; border-radius : 1rem; overflow : hidden; gap : 2rem; padding : 4rem 2rem; width : calc(50% - .5rem) } 
.list_type_02_wrap.half_list_type .box:last-child { width : 100% } 
.list_type_02_wrap .box_icon { position : relative; width : 5rem; height : 5rem; border : 2px solid #ffe4e1; border-radius : 1rem; background-color: var(--lightpoint); } 
.list_type_02_wrap .box_icon span { display : block; width : 2.1rem; line-height : 2.1rem; background-color: var(--point); color : var(--white); position : absolute; top : -1.5rem; right : -1rem; border-radius: .5rem; text-align: center; font-weight: bold; } 
.list_type_02_wrap .box_txt { padding-top : 1rem; } 
.list_type_02_wrap .box_txt h2 { font-size : 1.8rem; margin-bottom : 1.5rem } 

/* ── 특장점 카드 인터랙션(specsw_view 전용) ──────────────────────────────
 특장점이 최대 10개로 늘어나 같은 카드가 반복되며 단조로워지는 문제 대응.
 .feature_fx 가 붙은 목록에만 적용되므로 다른 list_type_02_wrap 은 영향 없음.

 [숨김 처리 주의] 진입 애니메이션의 opacity:0 은 .is-ready 가 있을 때만 걸린다.
 .is-ready 는 JS 가 정상 동작할 때만 붙이므로, 스크립트가 실패해도 내용은 그대로 보인다.

 [transform 충돌 회피] 진입 오프셋(--fx-reveal)과 호버 리프트(--fx-lift)를 각각
 커스텀 속성으로 두고 한 번만 합산한다. 같은 transform 선언을 두 규칙이 다투지 않는다. */
.list_type_02_wrap.feature_fx .box { position : relative; --fx-reveal : 0; --fx-lift : 0; transform : translateY(calc((var(--fx-reveal) + var(--fx-lift)) * 1px)); transition : opacity .55s cubic-bezier(.22, .61, .36, 1), transform .4s cubic-bezier(.22, .61, .36, 1), border-color .25s ease, box-shadow .25s ease; } 
/* 카드 뒤에 깔리는 번호 워터마크 — 아이콘이 1종이어도 카드마다 달라 보이게 한다(.box 의 overflow:hidden 으로 아래가 잘림) */
.list_type_02_wrap.feature_fx .box:after { content : attr(data-no); position : absolute; right : 1.2rem; bottom : -1.6rem; font-size : 8rem; font-weight : 800; line-height : 1; color : var(--point); opacity : .055; pointer-events : none } 
.list_type_02_wrap.feature_fx .box:hover { --fx-lift : -6; border-color : #ffe4e1; box-shadow : 0 14px 34px rgba(233, 80, 64, .13) } 
.list_type_02_wrap.feature_fx .box_icon { transition : background-color .25s ease, transform .25s ease } 
.list_type_02_wrap.feature_fx .box:hover .box_icon { background-color: var(--point); transform : scale(1.06) } 
.list_type_02_wrap.feature_fx .box_icon img { transition : filter .25s ease } 
.list_type_02_wrap.feature_fx .box:hover .box_icon img { filter : brightness(0) invert(1) } 
/* 진입 전 상태 — JS 가 .is-ready 를 붙인 목록에만 적용.
 transition:none 이 핵심 — 없으면 .is-ready 가 붙는 순간 카드가 0.5초에 걸쳐 "사라지는" 게 보인다.
 숨김은 즉시, 등장(.is-in)만 전이시킨다. */
.list_type_02_wrap.feature_fx.is-ready .box { opacity : 0; --fx-reveal : 28; transition : none } 
.list_type_02_wrap.feature_fx.is-ready .box.is-in { opacity : 1; --fx-reveal : 0; transition : opacity .55s cubic-bezier(.22, .61, .36, 1), transform .4s cubic-bezier(.22, .61, .36, 1), border-color .25s ease, box-shadow .25s ease } 

@media ( prefers-reduced-motion : reduce ) {.list_type_02_wrap.feature_fx .box { transition : border-color .25s ease, box-shadow .25s ease } 
.list_type_02_wrap.feature_fx.is-ready .box { opacity : 1; --fx-reveal : 0 } 
.list_type_02_wrap.feature_fx .box:hover { --fx-lift : 0 } 
 }


/* ══ 서브페이지 섹션 진입 모션 (공용) ═══════════════════════════════════════
 현재 사용처: specsw_view(특화SW 상세), business_view(사업분야 상세).
 두 페이지는 서브비주얼과 구축사례 섹션의 마크업이 사실상 같아 효과를 공유한다.
 다른 서브페이지에 쓸 때도 .sec_fx 만 붙이면 된다 — 동작 주체는 sub.js 의 secFxInit().
 강도는 "은은" — 이동 9px, 지속 .42s.

 [레이아웃 불변] transform 과 opacity 만 사용한다. width·height·margin·padding·display 는
 어떤 상태에서도 건드리지 않으므로 문서 흐름이 바뀌지 않는다.

 [숨김 처리 주의] 진입 전 opacity:0 은 body.sec_fx_on 이 있을 때만 걸린다.
 이 클래스는 JS 가 정상 동작할 때만 붙으므로, 스크립트가 실패해도 내용은 그대로 보인다.

 [규칙 순서 주의] --right / --zoom 과 .is-in 은 명시도가 같다(0,3,1).
 따라서 .is-in 규칙이 반드시 뒤에 와야 등장 완료 상태가 이긴다. 순서를 바꾸지 말 것.

 [전이 방향 주의] 진입 전 상태에는 transition 을 걸지 않는다. 걸면 body 클래스가 붙는 순간
 콘텐츠가 0.42초에 걸쳐 "사라지는" 게 보인다(깜빡임). 숨김은 즉시, 등장만 전이. */
body.sec_fx_on .sec_fx { opacity : 0; transform : translateY(9px) } 
body.sec_fx_on .sec_fx.sec_fx--right { transform : translateX(11px) } 
body.sec_fx_on .sec_fx.sec_fx--zoom { transform : translateY(5px) scale(.975) } 
/* border-color·box-shadow 를 여기 함께 넣는 이유: 카드류(.box)에 호버 강조를 주려면 전이가 필요한데,
 이 규칙이 명시도(0,3,1)로 카드 개별 transition 선언을 덮어버리기 때문에 한 곳에 모아둔다. */
body.sec_fx_on .sec_fx.is-in { opacity : 1; transform : none; transition : opacity .42s ease, transform .42s cubic-bezier(.22, .61, .36, 1), border-color .25s ease, box-shadow .25s ease } 

/* 사업분야 특장점(list_type_01_wrap) · 주요 적용 기술(skill_box_wrap) — 호버 시 테두리/그림자만 강조.
 transform 은 쓰지 않는다: .box 는 등장 transform 을 쓰는 요소라 같은 속성을 놓고 다투면 깜빡인다.
 (구축사례 카드에서 리프트를 뺀 것과 같은 이유) */
.list_type_01_wrap .box.sec_fx:hover { border-color : #ffe4e1; box-shadow : 0 10px 26px rgba(233, 80, 64, .10) } 
.skill_box_wrap .box.sec_fx:hover { box-shadow : 0 10px 26px rgba(233, 80, 64, .12) } 

/* 섹션 제목 밑줄이 좌우로 그려지며 새 섹션 시작을 알린다.
 .sub_title 은 다른 서브페이지에서도 쓰므로 .sec_fx 가 함께 붙은 것만 대상으로 한다.
 JS 미동작 시에는 scaleX(0) 인 채로 남아 밑줄이 없다 = 기존 디자인 그대로. */
.sub_title.sec_fx { position : relative } 
.sub_title.sec_fx:after { content : ''; position : absolute; left : 50%; bottom : -.8rem; width : 3rem; height : 3px; background-color: var(--point); border-radius : 2px; transform : translateX(-50%) scaleX(0); transition : transform .5s cubic-bezier(.22, .61, .36, 1) .12s } 
body.sec_fx_on .sub_title.sec_fx.is-in:after { transform : translateX(-50%) scaleX(1) } 

/* 주요기능 — 아코디언을 펼칠 때 내부 내용이 차례로.
 sub.js 의 accOtherSlide() 가 .acco_inner 에 붙이는 .active 를 그대로 활용한다(JS 수정 없음).
 .is-in 을 함께 요구해 화면에 들어온 뒤 재생되게 한다(첫 항목은 로드시 이미 .active 라서 필요). */
@keyframes secFxRise { 
 from { opacity : 0; transform : translateY(6px) } 
 to { opacity : 1; transform : none } 
 } 
body.sec_fx_on .acco_inner.sec_fx.is-in.active .toggle_inner > div > *,
body.sec_fx_on .acco_inner.sec_fx.is-in.active .toggle_inner ul li { animation : secFxRise .34s ease backwards } 
body.sec_fx_on .acco_inner.sec_fx.is-in.active .toggle_inner ul li:nth-child(1) { animation-delay : .10s } 
body.sec_fx_on .acco_inner.sec_fx.is-in.active .toggle_inner ul li:nth-child(2) { animation-delay : .16s } 
body.sec_fx_on .acco_inner.sec_fx.is-in.active .toggle_inner ul li:nth-child(3) { animation-delay : .22s } 
body.sec_fx_on .acco_inner.sec_fx.is-in.active .toggle_inner ul li:nth-child(n+4) { animation-delay : .28s } 
body.sec_fx_on .acco_inner.sec_fx.is-in.active .toggle_inner .img_wrap { animation : secFxRise .4s ease .1s backwards } 

/* 영상 — 재생 버튼이 등장 후 두 번만 맥동. 무한 반복은 읽기를 방해해서 배제.
 버튼 원래 위치가 translate(-50%,-50%) 라서 키프레임에서 그대로 유지해야 한다. */
@keyframes secFxPulse {0%, 100% { transform : translate(-50%, -50%) scale(1) } 
50% { transform : translate(-50%, -50%) scale(1.06) } 
 }
.video_thumb_wrap.sec_fx button { transition : transform .25s ease } 
.video_thumb_wrap.sec_fx button:hover { transform : translate(-50%, -50%) scale(1.06) } 
body.sec_fx_on .video_thumb_wrap.sec_fx.is-in button { animation : secFxPulse 1.5s ease .3s 2 } 

/* 구축사례 — 호버 시 썸네일만 확대. .bbs_thumbs 가 overflow:hidden 이라 틀 밖으로 안 나간다.
 썸네일 img 원래 위치가 translate(-50%,-50%) 라서 확대 시에도 유지한다.
 카드(.box) 자체를 띄우지 않는 이유: .box 는 등장 transform 을 쓰는 요소라, 호버 transform 을
 같이 걸면 두 전이가 같은 속성을 놓고 다투고 숨김 단계에서 깜빡임이 생긴다.
 확대 대상인 img 에는 .sec_fx 가 없어 등장 전이와 완전히 분리된다. */
.bbs_thumbs_list .box.sec_fx .bbs_thumbs img { transition : transform .45s cubic-bezier(.22, .61, .36, 1) } 
.bbs_thumbs_list .box.sec_fx:hover .bbs_thumbs img { transform : translate(-50%, -50%) scale(1.06) } 

@media ( prefers-reduced-motion : reduce ) {body.sec_fx_on .sec_fx,
body.sec_fx_on .sec_fx.sec_fx--right,
body.sec_fx_on .sec_fx.sec_fx--zoom,
body.sec_fx_on .sec_fx.is-in { opacity : 1; transform : none } 
.sub_title.sec_fx:after { transform : translateX(-50%) scaleX(1) } 
body.sec_fx_on .acco_inner.sec_fx.is-in.active .toggle_inner > div > *,
body.sec_fx_on .acco_inner.sec_fx.is-in.active .toggle_inner ul li,
body.sec_fx_on .acco_inner.sec_fx.is-in.active .toggle_inner .img_wrap { animation : none } 
body.sec_fx_on .video_thumb_wrap.sec_fx.is-in button { animation : none } 
.bbs_thumbs_list .box.sec_fx:hover .bbs_thumbs img { transform : translate(-50%, -50%) } 
 }


.has_arrow { position : relative; display : inline-block; align-items: center; justify-content: space-between; gap : 2rem; padding-bottom : 1rem; padding-right : 2rem; border-bottom : 3px solid #000; font-weight: 500; } 
.has_arrow:after { content: ""; display: inline-block; width: 24px; height: 24px; position : absolute; top : 0; right : 0; background-color: #333333; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='25px' viewBox='0 -960 960 960' width='25px' fill='%23333333'%3E%3Cpath d='M673-446.67H160v-66.66h513l-240-240L480-800l320 320-320 320-47-46.67 240-240Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='25px' viewBox='0 -960 960 960' width='25px' fill='%23333333'%3E%3Cpath d='M673-446.67H160v-66.66h513l-240-240L480-800l320 320-320 320-47-46.67 240-240Z'/%3E%3C/svg%3E"); mask-size: contain; } 
.has_arrow:hover { border-color : var(--point); color : var(--point) } 
.has_arrow:hover:after { background-color: var(--point); } 


.business_skill_wrap { background: url('../img/sub/bg_skill.png') no-repeat top center / cover; padding-top : 7rem; padding-bottom: 5rem; } 
.skill_box_wrap { display : flex; gap : 2rem 1rem; flex-wrap : wrap } 
.skill_box_wrap .box { position : relative; display : flex; flex-direction : column; justify-content: flex-start; gap : 2rem; border : 2px solid #ffe4e1; border-radius : 1rem; background-color: var(--white); width : calc(25% - .75rem); padding : 3rem 2rem 2.4rem; height : 21rem; overflow: hidden; } 
.skill_box_wrap .box_txt { min-height : 0; overflow : visible; } 
.skill_box_wrap .box h2 { font-size : 1.4rem; margin-bottom : 1rem; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } 
.skill_box_wrap .box p { font-size : .9rem; line-height : 1.45; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; } 
.skill_box_wrap .box_btn_wrap { display : flex; align-items: center; justify-content: space-between; gap : 1rem; flex : 0 0 auto; min-height : 2.35rem; margin-top : auto; } 
.skill_box_wrap .box_btn_wrap a { white-space: nowrap; width: 100%; } 
.skill_box_wrap .box_inner { position : absolute; top : 0; left : 0; width : 100%; height : 100%; background : url('../img/sub/bg_skill_hover.png') no-repeat center center / cover; padding : 3rem 2rem; display : none; z-index: 3; } 
.skill_box_wrap .box.active .box_inner { display : block } 
.skill_box_wrap .box_inner h2 { color : var(--white); margin-bottom : 2.5rem; } 
.skill_box_wrap .box_inner ul li ~ li { margin-top : .5rem } 
.skill_box_wrap .box_inner a { display : flex; align-items: center; justify-content: space-between; position : relative; background-color: rgba(193, 68, 55, .8); padding : .7rem 1rem; border-radius : .5rem; color : var(--white); transition: all .3s ease; border : 1px solid transparent } 
.skill_box_wrap .box_inner a span { color : var(--white); font-size : .9rem; letter-spacing: 0; font-weight: 500; display : block; text-overflow: ellipsis; overflow : hidden; white-space: nowrap; } 
.skill_box_wrap .box_inner a:hover { background-color: var(--white); } 
.skill_box_wrap .box_inner a:hover svg { fill : var(--point) } 
.skill_box_wrap .box_inner a:hover span { color : var(--point) } 




.bbs_thumbs_list { display : flex; gap : 3rem 2rem; flex-wrap : wrap; justify-content: flex-start; } 
.bbs_thumbs_list .box { width : calc(25% - (2rem * 3) / 4) } 
.bbs_thumbs_list .bbs_thumbs { position : relative; display : block; padding-top : 100%; border-radius : 1rem; border : 2px solid #cccccc; overflow: hidden; } 
.bbs_thumbs_list .box:hover .bbs_thumbs { border-color : var(--point) } 
.bbs_thumbs_list .bbs_thumbs img { position : absolute; top : 50%; left : 50%; transform : translate(-50%, -50%); object-fit: cover; width : 100%; height : 100% } 
.bbs_thumbs_txt { display : flex; height : 5rem; justify-content: space-between; flex-direction: column; margin-top : 1.5rem } 
.bbs_thumbs_list h2 { font-size : 1.1rem; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-weight: 500; } 
.bbs_thumbs_list p { display : flex; align-items: center; gap : .5rem; font-size : .8rem; min-width : 0; overflow : hidden; } 
.bbs_thumbs_list p > span:first-of-type:not(:last-of-type) { flex : 0 0 auto; white-space : nowrap; } 
.bbs_thumbs_list p > img { flex : 0 0 auto; } 
.bbs_thumbs_list p > span:last-of-type { display : block; flex : 1 1 auto; min-width : 0; overflow : hidden; text-overflow : ellipsis; white-space : nowrap; } 
.bbs_thumbs_list p > span:first-of-type:not(:last-of-type) font { white-space : nowrap; } 
.bbs_thumbs_list p > span:last-of-type font { display : block; overflow : hidden; text-overflow : ellipsis; white-space : nowrap; } 
.bbs_thumbs_list.has_cate .bbs_thumbs { position : relative } 
.bbs_thumbs_list.has_cate .bbs_thumbs span { display : block; min-width : 5rem; line-height: 2rem; text-align: center; color : var(--point); background-color: var(--lightpoint); border-radius: 1rem; position : absolute; top : 1rem; left : 1rem; z-index: 8; font-weight: 500; font-size : .9rem } 
.bbs_thumbs_list.has_cate .box:hover .bbs_thumbs span { background-color: var(--point); color : var(--white) } 

.bbs_thumbs_list_01 { display : flex; gap : 3rem 1rem; flex-wrap : wrap; justify-content: flex-start; } 
.bbs_thumbs_list_01 .box { width: calc(50% - 1rem); } 
.bbs_thumbs_list_01 .box:hover a { border-color : var(--point); background : url('../img/sub/ic_certification_on.png') no-repeat bottom 1rem right -2rem } 
.bbs_thumbs_list_01 .box a { display : flex; gap : 2rem; padding : 1rem; border: 2px solid #eee; border-radius : 1rem; overflow: hidden; background : url('../img/sub/ic_certification.png') no-repeat bottom 1rem right -2rem; cursor : default } 
.bbs_thumbs_list_01 .box a p.img_thumb { position : relative; width: 10rem; height: 14.5rem; overflow : hidden; border-radius: 1rem; background-color: #f9f9f9; flex-shrink: 0; border : 1px solid #eee } 
.bbs_thumbs_list_01 h2 { font-size : 1.1rem; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-weight: 500; } 
.bbs_thumbs_list_01 .title_wrap { padding : 2rem 0; height: 14.5rem; display : flex; flex-direction: column; justify-content: space-between; } 
.bbs_thumbs_list_01 .title_wrap > p { color : #666; font-size : .8rem; font-weight: 500; } 
.bbs_thumbs_list_01 span { display : inline-block; background: #f7f7f7; border-radius: 1rem; min-width: 4rem; text-align: center; line-height: 2rem; text-align: center; font-size : .9rem; color : #666666; font-weight : 600 } 
.bbs_thumbs_list_01 h2 { margin : 1rem 0 } 





.toggle_title { display:flex; width:100%; text-align: left; font-size : 1.2rem; align-items: center; } 
.toggle_title i { width : 20px; height : 20px; margin-right : .5rem } 
.toggle_content { max-height:0; overflow:hidden; transition:max-height 0.4s ease; } 

.accordion_wrap .acco_inner { border-radius: 1rem; overflow : hidden; border : 2px solid #eee; } 
.accordion_wrap .acco_inner.active { border-color : #ffe4e1 } 
.accordion_wrap .acco_inner ~ .acco_inner { margin-top : 1rem } 
.accordion_wrap .toggle_title { display : flex; position : relative; gap : 1rem; padding : 1rem 3.5rem 1rem 1.5rem; font-weight: 600; } 
.accordion_wrap .toggle_title i { position : absolute; top : 1.5rem; right : 1rem; background : url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23000"><path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/></svg>') no-repeat center center / contain; width : 25px; height : 25px } 
.accordion_wrap .toggle_title span { display : block; width : 3rem; line-height : 2rem; border-radius : 1rem; background-color: #f7f7f7; color : #666; font-size : .9rem; font-weight: bold; text-align: center; } 
.accordion_wrap .acco_inner.active .toggle_title { color : var(--point) } 
.accordion_wrap .acco_inner.active .toggle_title i { background : url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23e95040"><path d="M200-440v-80h560v80H200Z"/></svg>') no-repeat center center / contain } 
.accordion_wrap .acco_inner.active .toggle_title span { background-color: #fff8f7; color : var(--point); } 
.accordion_wrap .toggle_inner { display : flex; gap : 2rem; padding : 4rem 3rem; background : url('../img/sub/bg_accordion.png') no-repeat top center / cover; justify-content: space-between; } 
.accordion_wrap .toggle_inner .img_wrap { box-shadow: 0 0 5px 6px #fef4f3; border-radius : 1rem; overflow: hidden; width : 32rem; height : 14.5rem; position : relative; background-color: var(--white); } 
.accordion_wrap .toggle_inner > div h2 { font-size : 1.8rem; line-height: 130%; margin-bottom : 2rem } 
.accordion_wrap .toggle_inner ul li { position : relative; padding-left : .5rem; font-size : .9rem } 
.accordion_wrap .toggle_inner ul li:before { content : ''; width : 2px; height : 2px; background-color: var(--point); position : absolute; top : .5rem; left : 0 } 
.accordion_wrap .toggle_inner ul li + li { margin-top : .5rem } 

.video_thumb_wrap { position : relative; max-width : 50rem; padding : 0 1rem; margin : 0 auto; } 
.video_thumb_wrap:before,
.video_thumb_wrap:after { content : ''; position : absolute } 
.video_thumb_wrap:before { content : url('../img/sub/ic_video_01.png'); top : 3rem; left : -6rem } 
.video_thumb_wrap:after { content : url('../img/sub/ic_video_02.png'); bottom : 1rem; right : -9rem; z-index: -1; } 
.video_thumb_wrap.land_video:before { content : ''; position : absolute; top : 0; left : 50%; transform : translateX(-50%); width : 100vw; background : url('../img/sub/bg_landsoft.png') no-repeat center center / contain; height: 100%; } 
.video_thumb_wrap.land_video:after { display : none } 
.video_thumb_wrap video { width : 100%; height : 100% } 

.video_thumb_wrap .inner { position : relative; background-color: var(--white); border : 1px solid #eee; border-radius : 1rem; overflow: hidden; height: 25rem } 
.video_thumb_wrap .inner:after { content : ''; width : 100%; height : 100%; background-color: rgba(0, 0, 0, 0.5); position : absolute; top : 0; left : 0; } 
.video_thumb_wrap button { position : absolute; top : 50%; left : 50%; transform : translate(-50%, -50%); } 


.bbs_tab_nav { position : relative; padding : 0 2rem; } 
.bbs_tab_nav > button { position : absolute; top : 0; display : flex; align-items: center; } 
.bbs_tab_nav > button svg { opacity: 0.5; } 
.bbs_tab_nav > button:hover svg { opacity: 1; } 
.bbs_tab_nav .bbs_prev { left : 0 } 
.bbs_tab_nav .bbs_right { right : 0 } 
.bbs_tab_nav ul { display : block; width : 100%; white-space: nowrap; overflow : auto; -ms-overflow-style: none; scrollbar-width: none; scroll-behavior: smooth; } 
.bbs_tab_nav ul::-webkit-scrollbar { display: none; } 
.bbs_tab_nav ul li { display : inline-block } 
.bbs_tab_nav ul li + li { margin-left : .5rem } 
.bbs_tab_nav ul li a { display : block; border : 2px solid #eee; padding : .5rem 1rem; color : #666666; border-radius : 2rem; font-weight: 500; min-width : 6rem; text-align: center; transition : all .3s ease } 
.bbs_tab_nav ul li a.active { background-color: var(--point); color : var(--white); border-color : var(--point) } 
.bbs_tab_nav ul li a:hover { background-color: #ffe4e1; border-color : #ffe4e1; color : var(--point) } 



.bbs_search_wrap { display : flex; max-width : 50rem; margin : 2rem auto; padding-bottom : .5rem; border-bottom : 2px solid #000; gap : 1rem; } 
.bbs_search_wrap input { flex : 1; border : none } 
.bbs_search_wrap select { border : none; padding-right : 3rem } 


.bbs_info { padding : .5rem 0; font-size : .8rem; font-weight: 500; } 
.bbs_info span { color : var(--point); font-weight: bold; } 
.bbs_info a { position : relative; display : inline-flex; align-items: center; font-size : .9rem; gap : .3rem; font-weight: 500; } 
.bbs_info a:before { content : ''; width : 100%; height : .7rem; background-color: #eeeeee; position : absolute; bottom : -3px; left : 0; border-radius: 1rem; z-index: -1; } 


.bbs_view_wrap { border-top : 2px solid #000; border-bottom : 1px solid #cccccc } 
.bbs_view_wrap .bbs_view_top { padding : 2rem 0; } 
.bbs_view_wrap .bbs_view_top h2 { font-size : 1.4rem; line-height: 130%; } 
.bbs_view_wrap .bbs_view_top span.bbs_cate { display : inline-block; background-color: #fff8f7; font-size : .9rem; font-weight: 600; color : var(--point); min-width: 4rem; line-height: 2rem; text-align: center; border-radius: 1rem; padding : 0 1rem; margin-bottom : 1rem } 
.bbs_view_wrap .bbs_view_top ul { display : flex; gap : 2rem; align-items: center; margin-top : .5rem } 
.bbs_view_wrap .bbs_view_top ul li { display : flex; align-items: center; gap : .4rem; font-size : .8rem; color : #666666; font-weight: 500; } 
.bbs_view_wrap .bbs_view_top ul li span { display : block; white-space: nowrap; font-weight: bold; } 
.bbs_view_wrap .bbs_view_top p { display : flex; gap : .5rem; font-size : .8rem; color : #666666; font-weight: 500; margin-top : .7rem } 
.bbs_view_wrap .bbs_view_content { border-top : 1px solid #ccc; padding : 3rem 0; word-break: keep-all; } 

.bbs_view_wrap .bbs_view_file { background-color: #fff8f7; padding : .8rem 1.5rem .8rem 150px; position : relative; bottom : -1px; } 
.bbs_view_wrap .bbs_view_file .bbs_view_file_label { position : absolute; top : 1rem; left : 1.5rem; color : var(--point); font-size : .9rem; font-weight: 500; width : 85px } 
.bbs_view_wrap .bbs_view_file .bbs_view_file_label:after { content : ''; width : 1px; height : 15px; background-color: var(--point); position : absolute; top : 5px; right : 0; } 
.bbs_view_wrap .bbs_view_file .bbs_no_file { position : static; width : auto; min-height : 1.5rem; } 
.bbs_view_wrap .bbs_view_file ul { flex : 1 } 
.bbs_view_wrap .bbs_view_file ul li + li { margin-top : .7rem; } 
.bbs_view_wrap .bbs_view_file ul li a { position : relative; display : block; width : 100%; padding : .5rem 1.5rem .5rem .8rem; border-radius : .5rem; border : 2px solid #ffe4e1; background-color: var(--white); font-size : .8rem; font-weight: 500; } 
.bbs_view_wrap .bbs_view_file ul li a svg { position : absolute; top : 50%; right : .5rem; transform : translateY(-50%) } 
.bbs_view_wrap .bbs_view_file ul li a:hover { border : 2px solid var(--point) } 

.bbs_more_list a,
.bbs_more_list p,
.bbs_more_list a { position : relative; display : flex; gap : 1rem; padding : 1.3rem 0 1.3rem 3rem; align-items: center; font-size : .9rem; font-weight: 500; } 
.bbs_more_list svg { position : absolute; top : .9rem; left : 0; } 
.bbs_more_list b { white-space: nowrap; } 
.bbs_more_list > * + * { border-top : 1px solid #ccc } 
.bbs_more_list a span { color : #666666; font-weight: 400; } 
.bbs_more_list i { display : inline-block; width : 1px; height : 15px; background-color: #000000 } 
.bbs_more_list span { color : #999; display : block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } 




.bbs_btn_wrap { padding : 3rem 0; text-align: center; } 
.bbs_btn_wrap a { display : inline-flex; align-items: center; justify-content: center; color : var(--white); width : 9rem; height : 3rem; font-size : .9rem; font-weight: 500; border-radius : 2rem } 
.bbs_btn_wrap a.go_list_btn { background-color: var(--point); color : var(--white); } 



.bbs_list_wrap { border-top : 2px solid #000 } 
.bbs_list_wrap table thead { background-color: #f7f7f7; } 
.bbs_list_wrap table th,
.bbs_list_wrap table td { position : relative; text-align: center; padding : 1rem; font-size : .9rem; border-bottom : 1px solid #ccc } 
.bbs_list_wrap table th { font-weight: 600; } 
.bbs_list_wrap table th:before { content : ''; width : 1px; height : 1rem; background-color: #ccc; position : absolute; top : 21px; left : 0 } 
.bbs_list_wrap table th:first-child:before { display : none } 
.bbs_list_wrap table a { display : block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } 
.bbs_list_wrap table a:hover { color : var(--point) } 


.no_result { padding : 3rem; text-align: center; font-size: 1.3rem; font-weight: 400; color : #333; grid-column: 1 / -1; flex: 0 0 100%; width: 100%; text-align: center; } 
.no_result img { display : block; margin : 0 auto 2rem } 




.enquire_list_wrap { display : flex; gap : 4rem; justify-content: space-between; padding : 4rem 1rem } 
.enquire_list_wrap .left_txt h2 { font-size : 1.8rem; line-height: 120%; margin-bottom : 2rem; } 
.enquire_list_wrap .left_txt h2 span { color : var(--point); font-weight: bold; } 
.enquire_list_wrap .left_txt p { font-size : .9rem; font-weight: 500; } 
.enquire_list_wrap .left_txt a { display : inline-flex; padding : .8rem 1.5rem .8rem 1rem; color : var(--white); background-color: #000; border-radius : 2rem; align-items: center; gap : .5rem; font-weight: 500; margin-top : 3rem } 
.enquire_list_wrap .enquire_content { flex : 1; } 
.enquire_list_wrap .enquire_content > ul { display : flex; flex-wrap : wrap; gap : 1.5rem 1rem } 
.enquire_list_wrap .enquire_content > ul li { width : calc(50% - 1rem / 2) } 
.enquire_list_wrap span.required { display : block; font-size : .8rem; font-weight: bold; margin-bottom : .5rem } 
.enquire_list_wrap span.required i { color : var(--point); margin-left : 5px } 
.enquire_list_wrap li input,
.enquire_list_wrap li select,
.enquire_list_wrap textarea { display : block; width : 100%; border-radius: .3rem; border : 1px solid #ccc; padding : .5rem 1rem } 
.enquire_list_wrap textarea { padding : 1rem; height : 10rem } 
.enquire_list_wrap li input,
.enquire_list_wrap li select { height : 3rem } 
.enquire_list_wrap .box { margin-top : 1.5rem } 
.enquire_list_wrap .inner_txt { border : 1px solid #ccc; padding : 0.5rem 1rem; border-radius: 5px; height : 10rem; overflow : auto; font-size : .8rem } 
.enquire_list_wrap .inner_txt > * { margin : .5rem 0 } 
.enquire_list_wrap .agree_box { position : relative; margin : 1rem 0; font-size : .7rem; padding-left : 1.4rem } 
.enquire_list_wrap .agree_box label { cursor: pointer; font-weight: 500; } 
.enquire_list_wrap .agree_box p span { position : absolute; top : 3px; left : 0; width : 20px; height : 20px; background : url('../img/sub/ic_check_off.png') no-repeat center center / cover } 
.enquire_list_wrap .agree_box input:checked + span { background : url('../img/sub/ic_check_on.png') no-repeat center center / cover } 
.enquire_list_wrap .agree_box p input { display : none } 




.enquire_fin_wrap { padding : 8rem 1rem 4rem 1rem; text-align: center; } 
.enquire_fin_wrap img { display : block; margin : 0 auto } 
.enquire_fin_wrap h2 { margin : 3rem 0 1rem; font-size : 1.6rem; } 
.enquire_fin_wrap h2 span { font-weight: bold; color : var(--point); } 


.bbs_job_list_wrap { margin-top : 2rem } 
.bbs_job_list_wrap .box { border : 2px solid #eeeeee; border-radius: 1rem; } 
.bbs_job_list_wrap .box + .box { margin-top : 1rem } 
.bbs_job_list_wrap .box a { display : block; width: 100%; position : relative; padding : 2rem 10rem 2rem 2rem; } 
.bbs_job_list_wrap .box:hover { border-color : #ffe4e1 } 
.bbs_job_list_wrap .box:hover .has_arrow { color : var(--point); border-color : var(--point) } 
.bbs_job_list_wrap .box:hover .has_arrow:after { background-color : var(--point) !important } 
.bbs_job_list_wrap p span { display : inline-block; text-align: center; min-width: 70px; padding : .5rem 1rem; border-radius: 2rem; background-color: var(--lightpoint); color : var(--point); font-weight: 600; font-size : .9rem } 
.bbs_job_list_wrap p span + span { margin-left : .5rem } 
.bbs_job_list_wrap .box.fin p span { background-color: #f7f7f7; color : #666 } 
.bbs_job_list_wrap .box.fin:hover { border-color : #eeeeee } 
.bbs_job_list_wrap h2 { font-size : 1.4rem; margin : 1rem 0 } 
.bbs_job_list_wrap .box div { display : flex; gap : 1rem; font-size : .9rem; align-items: center; } 
.bbs_job_list_wrap .box div b { color : var(--point); } 
.bbs_job_list_wrap .box.fin div b { color : #999999; font-weight: 400; } 
.bbs_job_list_wrap .has_arrow { position : absolute; top : 50%; right : 2rem; width : 7rem } 











.paging { display : flex; margin : 5rem auto; justify-content: center; align-items: center; gap : .5rem } 
.paging a { display : flex; width : 35px; height : 35px; border-radius: 100%; font-weight: 500; font-size : .9rem; color : #666666; align-items: center; justify-content: center; } 
.paging a + a { margin-left : .3rem } 
.paging a.active,
.paging a:hover { background-color: var(--point); color : var(--white) } 
.paging .bbs_arrow { opacity: 0.5; } 
.paging div { display : flex; align-items: center; } 
.paging .bbs_arrow:hover { opacity: 1; background-color: #fff; } 



.content_tab_wrap { border-bottom : 1px solid #ddd; text-align: center; overflow : auto; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none; scroll-behavior: smooth; } 
.content_tab_wrap::-webkit-scrollbar { display: none; } 

.content_tab_wrap ul { display : inline-block; } 
.content_tab_wrap ul li { display : inline-block } 
.content_tab_wrap ul a { position : relative; display : block; text-align: center; width : 7.5rem; line-height: 4.5rem; border-bottom : 5px solid transparent; font-weight: 600; color : #666 } 
.content_tab_wrap ul a:before { content : ''; width : 1px; height : 20px; position : absolute; top : 50%; left : 0; transform : translateY(-50%); background-color: #ccc; } 
.content_tab_wrap ul li:first-child a:before { display : none } 
.content_tab_wrap ul a.active { border-color : var(--point); color : var(--point) } 



.organization_wrap { margin : 2rem auto; } 
.organization_wrap > h2 { position : relative; width : 240px; height : 240px; display : flex; align-items: center; flex-direction: column; justify-content: center; color : var(--white); font-size : .9rem; background : url('../img/sub/ic_organization_bg.png') no-repeat center center / cover; margin : 0 auto } 
.organization_wrap > h2:before,
.organization_wrap > h2:after { position : absolute; left : 50%; transform : translateX(-50%) } 
.organization_wrap > h2:before { content : url('../img/sub/ic_organization_dot_orange.png'); bottom : -2px; } 
.organization_wrap > h2:after { content : ''; width : 2px; height : 102px; background-color: #ccc; bottom : -93px; } 
.organization_wrap > h2 b { font-size : 2.1rem; } 
.organization_list { position : Relative; display : flex; gap : 2rem; justify-content: space-between; margin-top : 5rem } 
.organization_list .inner { position : relative; text-align: center; width : 100% } 
.organization_list .inner:before { content : ''; width : 2px; height : 50px; background-color: #ccc; position : absolute; top: -58px; left : 50%; transform : translateX(-50%) } 
.organization_list .inner.orga_left:before { content : url('../img/sub/ic_organization_l.png'); background-color: transparent; } 
.organization_list .inner.orga_right:before { content : url('../img/sub/ic_organization_r.png'); background-color: transparent; left : 45% } 
.organization_list .inner h2 { position : relative; background: #333; color : var(--white); border-radius : .5rem; line-height: 4rem; font-size : 1.2rem; font-weight: 500; } 
.organization_list .inner h2:before { content : url('../img/sub/ic_organization_dot.png'); position : absolute; top : -2rem; left : 50%; transform : translateX(-50%) } 
.organization_list .inner ul { margin : .5rem 0 0 0 } 
.organization_list .inner li { border-radius : .5rem; border : 1px solid #ccc; background-color: #f7f7f7; line-height: 3.5rem; margin-top : .5rem; font-weight: 500; } 
.organization_list #line { position :absolute; top : -58px; left : 50%; width : 100%; height : 2px; background: #ccc; transform : translateX(-50%) } 

.person_type_wrap .wrap { display : flex; gap : 1rem; margin : 1rem 0 } 
.person_type_wrap .wrap .box { position : relative; border-radius : 1rem; overflow : hidden; padding : 2rem } 
.person_type_wrap .wrap .box.person_white { border : 2px solid #eee; background: #fff url('../img/sub/bg_person.png') no-repeat bottom right / cover; width : 100% } 
.person_type_wrap .wrap .box.person_black { border : 2px solid #000; background: #000 url('../img/sub/bg_person_b.png') no-repeat bottom right / cover; color : var(--white); width : 100%; max-width : 580px } 
.person_type_wrap .wrap .box span { color : var(--point); font-weight: bold; } 
.person_type_wrap .wrap .box h2 { font-size : 1.8rem; margin : 1rem 0 2rem } 


.company_culture { display : flex; gap : 2rem; justify-content: space-between; margin-top : 2rem } 
.company_culture > .inner { width : 33.33% } 
.company_culture h2 { padding-bottom : 1rem; border-bottom : 3px solid var(--point); color : var(--point); font-size : 1.4rem; margin-bottom : 1.5rem } 
.company_culture h2 img { margin-right : 1rem } 
.company_culture p { font-size : .9rem; color : #333333; font-weight: 500; } 



.welfare_wrap { padding : 7rem 0 0 0; background : url('../img/sub/bg_welfare.png') no-repeat center top / cover } 
.welfare_wrap .sub_container { padding : 0 1rem } 
.welfare_inner { display : flex; gap : 2rem; flex-wrap : wrap } 
.welfare_inner .box { flex : 1 1 30%; border : 2px solid #ffe4e1; background-color: var(--white); border-radius : 1rem; overflow: hidden; padding : 2rem; transition : all .3s ease; cursor: default; } 
.welfare_inner .box:hover { background : url('../img/sub/bg_welfare_m.png') no-repeat center center / cover; color : var(--white) } 
.welfare_inner .box h2 { font-size : 1.4rem; margin-bottom : 1.2rem } 
.welfare_inner .box p { color : #333; font-size : .9rem; font-weight: 400; } 
.welfare_inner .box:hover p { color : var(--white) } 


.history_wrap .sub_container { display : flex; gap : 1rem; padding : 4rem 1rem } 
.history_wrap .history_mobile_nav { display : none } 
.history_wrap .left { width : 25rem; position: relative; } 
.history_wrap.active .left .history_title { position: fixed; top: 110px; left: calc(50% + 1rem); transform: translateX(-50%); width: 100%; max-width: 70rem; } 
.history_wrap .left .history_title span { display : block; font-size : 1.3rem; color : #ffe4e1; font-weight: 600; margin-bottom : 1rem } 
.history_wrap .left .history_title p { position : relative; background: linear-gradient(to right, #ea5444 10%, #ffffff 70%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size : 4.3rem; font-weight: bold; line-height: 100%; color : transparent; } 
.history_wrap .left .history_title p:after { content : url('../img/sub/ic_history.png'); position : absolute; top : -40px; left : 180px } 
.history_wrap .right { width : calc(100% - 25rem) } 
.history_wrap .right ul { padding-top : 5rem } 
.history_wrap .right ul:first-child { padding-top : 0 } 
.history_wrap .right ul li { position : relative; display : flex; padding-left : .8rem; gap : 1.5rem } 
.history_wrap .right ul li:before { content : ''; width : 4px; height : 4px; background-color: var(--point); position : absolute; top : 15px; left : 0; } 
.history_wrap .right ul li b { font-size : 1.4rem; opacity : .5; } 
.history_wrap .right ul li + li { margin-top : 3rem } 
.history_wrap .right ul li p { padding-top : 5px; opacity : .5; } 
.history_wrap .right ul.active b,
.history_wrap .right ul.active p { opacity: 1; transition : all .2s; } 
.history_wrap .right ul li.mo { display : none } 


.company_title_wrap { padding : 7rem 1rem 0; text-align: center; } 
.company_title_wrap h2 { font-size : 3rem } 
.company_title_wrap h2 span { color : var(--point); display : block; font-weight: bold; } 
.company_title_wrap .title_visual { display : flex; justify-content: center; gap : 1rem; margin-top : 4rem } 
.company_title_wrap .title_visual div { position : relative; width : 240px; height : 240px; display : flex; align-items: center; justify-content: center; color : #333; font-size : .9rem; font-weight: 500 } 
.company_title_wrap .title_visual div:before { content : ''; position : absolute; top : 0; left : 0; width : 240px; height : 240px; z-index: -1; } 
.company_title_wrap .title_visual .title_left:before { background : url('../img/sub/company_title_left.png') no-repeat center center / cover } 
.company_title_wrap .title_visual .title_right:before { background : url('../img/sub/company_title_right.png') no-repeat center center / cover } 
.company_title_wrap > p { margin-top : 4rem; font-weight: 400; line-height: 140%; } 

.company_chart { background : url('../img/sub/company_bg.png') no-repeat bottom center / cover; padding : 6rem 0 2rem; margin-top : -4rem } 
.company_chart ul { display : flex; gap : 2rem; max-width : 65rem; justify-content: space-between; } 
.company_chart ul li { width : 25% } 
.company_chart ul li div { display : flex; flex-direction: column; position : relative; box-shadow : 8px 8px 0 #f0aca5; border-radius : 3rem; overflow : hidden; background-color: var(--white); padding : 2rem; border : 2px solid #f0aca5; height : 15rem; justify-content: end; } 
.company_chart ul li div img { position : absolute; top : 2rem; right : -1rem } 
.company_chart ul li div span { font-size : 1.3rem; font-weight: bold; margin-bottom : 1.4rem } 
.company_chart ul li div h2 { font-size : 1.6rem } 
.company_chart ul li div h2 b { font-size: 5rem; } 
.company_chart .sub_container > p { margin-top : 4rem; text-align: center; } 



.land_skill_wrap { text-align: center; } 
.land_skill_wrap h2 { font-size : 1.6rem; color : var(--point); margin-bottom : 1.5rem } 
.land_skill_wrap p { color : #333333 } 
.land_skill_wrap img { display : block; margin : 4rem auto 0; max-width: 100%; } 


.location_wrap dl { display : flex; gap : 1rem; border-bottom : 1px solid #ccc; } 
.location_wrap dl:last-child { border-bottom : none } 
.location_wrap dl dt,
.location_wrap dl dd { padding : 2rem 0; font-size : .9rem; } 
.location_wrap dl dt { flex-shrink: 0; font-weight: bold; font-size : 1.1rem; width : 10rem } 

#map { margin-top : 4rem; width : 100%; height : clamp(320px, 42vw, 520px); overflow : hidden; } 
#map > img { display : block; width : 100%; height : 100%; object-fit : cover; } 

.cms_wrap { padding : 2rem 1rem 0; text-align: center; } 

.cms_wrap > * { margin-left: auto; margin-right: auto; } 

.no_link { cursor : default; } 

footer { background-color: #000; padding : 2rem 1rem; margin-top : 6rem } 
footer ul,
footer ul p { display : flex; align-items: center; } 
footer ul { gap : 3rem } 
footer ul + ul { margin-top : .7rem } 
footer ul p { gap : .7rem } 
footer span { display : inline-block; position : relative; padding-right : .7rem; white-space: nowrap; } 
footer span:after { content : ''; width : 1px; height : 15px; background-color: #666666; position : absolute; top : 4px; right : 0; } 
footer .flex { gap : 2rem; justify-content: space-between; color : var(--white); font-size : .9rem } 
footer .flex div { flex : 1 } 
footer > div > p { color : #999; padding-top : 1.5rem } 
footer br { display : none } 


.system_img_wrap img { display : block; width : 100%; max-width: 100%; margin : 0 auto; } 


#mainScroll { font-size : .7rem; font-weight: 600; text-align: left; display : flex; gap : .8rem; color : #999999; letter-spacing: 0; margin-top : 6rem } 
#mainScroll span { position : relative; display : inline-block; width : 15px; height : 39px; background : url('../img/sub/scroll_sub.png') no-repeat center center; top : -.5rem } 
#mainScroll span img { position:absolute; left : 0; animation: bounce 1s; transform: translateY(0px); animation-iteration-count: infinite; } 


@keyframes bounce { 
 0% { top: 0; -webkit-animation-timing-function: ease-in; } 
 50% { top: 5px; -webkit-animation-timing-function: ease-out; } 
 55% { top: 30px; -webkit-animation-timing-function: ease-in; } 
 65% { top: 10px; -webkit-animation-timing-function: ease-out; } 
 95% { top: 0; -webkit-animation-timing-function: ease-in; } 
 100% { top: 0; -webkit-animation-timing-function: ease-in; } 
 }





@media ( max-width : 1400px ){
 .skill_box_wrap .box { padding : 2rem 1.5rem } 
footer .flex { gap : 1rem } 
footer h1 { width : 190px } 
footer a img { display : block; width : 100% } 
footer ul { gap : 2rem } 
.history_wrap .left { width : 20rem } 
.history_wrap .right { width : calc(100% - 20% ) } 
.history_wrap .left .history_title p { font-size : 4rem } 
.company_chart ul li div h2 b { font-size : 4rem } 
 }

@media ( max-width : 1200px ){
 .sub_visual h2 { font-size : 2rem } 
.sub_visual div p { font-size : 1rem } 
.sub_visual .link_wrap a { font-size : 1rem } 
.sub_visual .link_wrap a span { width : 2.4rem; height : 2.4rem } 
.sub_visual .link_wrap a span img { width : 18px } 
.sub_title { font-size : 2rem } 
 .list_type_01_wrap .box h2 { font-size : 1.5rem } 

 .skill_box_wrap .box { width : calc(33.33% - .75rem) } 
 .bbs_thumbs_list h2 { font-size : 1.1rem } 
 footer br { display : block } 
 footer > div > p { padding-top :0 } 


 .list_type_02_wrap .box { padding : 2rem } 
 .list_type_02_wrap .box_icon { width : 4rem; height : 4rem } 
 .list_type_02_wrap .box_icon img { width : 25px } 
 .list_type_02_wrap .box_txt h2 { font-size : 1.5rem; margin-bottom : 1rem } 
 .list_type_02_wrap .box_txt p { font-size : .9rem } 

 .accordion_wrap .toggle_inner .img_wrap { width : 23rem } 
 .accordion_wrap .toggle_inner > div h2 { font-size : 1.5rem } 
 .organization_list { gap : 1rem } 
 .organization_list .inner h2 { font-size : 1rem } 
 .history_wrap .left .history_title p { font-size : 3.2rem } 
 .history_wrap .left .history_title p:after { left : 120px } 
 .company_title_wrap h2 { font-size : 2.5rem } 
 .company_title_wrap .title_visual p img { width : 300px } 
 .company_title_wrap .title_visual div,
 .company_title_wrap .title_visual div:before { width : 200px; height : 200px } 
 .company_chart ul { gap : 1rem } 
.company_chart ul li div { padding : 1rem 2rem; height : 13rem } 
.company_chart ul li div span { margin-bottom : 0; font-size : 1rem } 
.company_chart ul li div img { top : 1rem; max-width : 85px } 
.company_chart ul li div h2 b { font-size : 3rem } 
 }


@media ( max-width : 1000px ){
 .sub_visual .flex { flex-direction: column; align-items: center; text-align: center; } 
 .sub_visual .link_wrap { flex-direction: row; justify-content: center; } 
 .sub_visual .small_container { padding : 3rem 1rem } 
 .sub_title { font-size : 1.8rem } 
 .skill_box_wrap .box_inner,
 .list_type_01_wrap .box { padding : 1.5rem } 
 .list_type_01_wrap .box h2 { margin : 1rem 0 1.5rem } 
 .skill_box_wrap { display : block } 
 .skill_box_wrap .box { width : 100%; padding-right : 19rem; height : 15rem } 
 .skill_box_wrap .box ~ .box { margin-top : 1rem } 
 .skill_box_wrap .box_inner { display : block; background : transparent; width : 18rem; right : 0; left : initial; top : 50%; transform : translateY(-50%); height: auto; } 
 .skill_box_wrap .show_box_inner,
 .skill_box_wrap .box_inner h2 { display : none } 
 .skill_box_wrap .box_btn_wrap a { width : 7rem } 
.bbs_thumbs_list { gap : 1rem } 

footer .flex { flex-direction: column; } 
footer > div > p { text-align: center; } 

.list_type_02_wrap .box { flex-direction: column; gap : 0; padding : 2rem 1rem } 
.list_type_02_wrap .box_txt h2 { font-size : 1.3rem } 
/* 카드가 좁아지므로 번호 워터마크도 같이 축소 */
.list_type_02_wrap.feature_fx .box:after { font-size : 5rem; right : .8rem; bottom : -1rem } 
.accordion_wrap .toggle_inner > div h2 { margin-bottom : 1rem } 
.accordion_wrap .toggle_inner { padding : 2rem } 
.bbs_tab_nav ul li + li { margin-left : .1rem } 
.bbs_tab_nav ul li a { font-size : .9rem; min-width: 4rem; } 

.enquire_list_wrap { flex-direction: column; gap : 2rem; align-items: center; } 
.enquire_list_wrap .left_txt { text-align: center; } 
.enquire_list_wrap .left_txt h2 { font-size : 1.5rem; margin-bottom : 1rem } 
.enquire_list_wrap .left_txt h2 br { display : none } 
.enquire_list_wrap .left_txt h2 b { display : block } 
.enquire_list_wrap .left_txt a { margin-top : 1rem } 
.enquire_list_wrap .enquire_content { width : 100% } 
.bbs_job_list_wrap h2 { font-size : 1.3rem } 
.person_type_wrap .wrap .box h2 { font-size : 1.5rem } 
.company_culture h2 { font-size : 1.3rem } 
.company_culture h2 img { width : 35px; margin-right : .5rem } 
.welfare_inner { gap : 1rem } 
.welfare_inner .box h2 { font-size : 1.2rem } 
.history_wrap .right { width : 100% } 
.bbs_thumbs_list_01 { flex-direction: column; gap : 1rem } 
.bbs_thumbs_list_01 .box { width: 100%; } 
.bbs_thumbs_list_01 .box a p.img_thumb { height : 12rem } 
.bbs_thumbs_list_01 .title_wrap { height : 12rem; padding : 1rem 0 } 
.bbs_thumbs_list .box { width : calc(100% / 3 - (1rem * 2) / 3) } 
 }

 @media ( max-width : 890px ){
 .company_chart ul li div { padding : 1rem; border-radius: 2rem; height : 11rem } 
 .company_chart ul li div img { width : 70px } 
 .company_chart ul li div h2 b { font-size : 2.4rem } 
 }
 @media ( max-width : 850px ){
 .welfare_inner .box { flex : 1 1 40%; padding : 1.2rem } 
 .history_wrap.active .left .history_title { top : 50%; transform : translate(-50%, -50%) } 
 }
@media ( max-width : 767px ){
 .sub_visual h2 { font-size : 1.8rem } 
.sub_visual div p { font-size : .9rem } 
.sub_visual .link_wrap a { font-size : .9rem } 
.sub_visual .link_wrap a span { width : 2rem; height : 2rem } 
.sub_visual .link_wrap a span img { width : 16px } 
.sub_visual .small_container { padding : 3rem 1rem 2rem 1rem } 

.skill_box_wrap .box { padding : 2rem; height : auto; gap : 1.5rem } 
.skill_box_wrap .box_inner { position : static; width : 100%; margin : 0 auto; transform : inherit; padding : 0 } 
.skill_box_wrap .box_inner a:hover { border : 1px solid var(--point) } 

 .bbs_thumbs_txt { margin-top : 1rem } 
 footer h1 { margin-bottom : 1rem } 
 footer ul { flex-direction: column; gap : .5rem; align-items: start; } 
 .accordion_wrap .toggle_inner { flex-direction: column; gap : 1rem } 
 .accordion_wrap .toggle_inner > div h2 { font-size : 1.3rem } 
 .accordion_wrap .toggle_inner .img_wrap { width : 100% } 
 .bbs_tab_nav > button svg { width : 30px; height : 30px } 

 .bbs_tab_nav ul li a { font-size : .9rem; min-width: 3rem; padding : .3rem .6rem } 
 .bbs_search_wrap button img { width : 22px } 
 .bbs_search_wrap select { padding-right : 2rem } 
 .paging div a:nth-child(n+5) { display : none } 
 .bbs_view_wrap .bbs_view_top h2 { font-size : 1.3rem } 
 .bbs_view_wrap .bbs_view_content { font-size : .9rem } 
 .bbs_list_wrap col:nth-child(1) { width : 50px !important }
 .bbs_list_wrap col:nth-child(3) { width : 85px !important }
 .bbs_list_wrap col:nth-child(4) { width : 50px !important }
 .bbs_list_wrap table th,
 .bbs_list_wrap table td { padding : .75rem .35rem }
 .bbs_list_wrap table th { white-space : nowrap }

 .bbs_job_list_wrap .box a { padding : 1.5rem } 
 .bbs_job_list_wrap p span { font-size : .8rem; padding : .3rem 1rem } 
 .bbs_job_list_wrap .has_arrow { position : relative; transform : inherit; right : initial; margin-top : 1rem } 
 .bbs_job_list_wrap h2 { font-size : 1.2rem } 
 .organization_wrap > h2 { width : 200px; height : 200px } 
 .organization_list { gap : .5rem } 
 .organization_wrap > h2 b { font-size : 1.8rem } 
 .organization_list .inner h2 { font-size : 1rem } 
 .organization_list .inner li { font-size : .9rem } 

 .person_type_wrap .wrap { flex-direction: column } 
 .person_type_wrap .wrap .box.person_black { max-width: 100%; } 
 .person_type_wrap .wrap:last-child .person_black { background : #fff url('../img/sub/bg_person.png') no-repeat bottom center / cover; color : #000; border-color : #ccc } 
 .person_type_wrap .wrap:last-child .person_white { background : #000 url('../img/sub/bg_person_b.png') no-repeat bottom center / cover; color : #fff; border-color : #000 } 

.company_culture { gap : 1rem } 
.history_wrap .sub_container { flex-direction: column; } 
.history_wrap .history_title { display : none } 
.history_wrap .history_mobile_nav { display : block; } 
.history_wrap.active .history_mobile_nav { position : fixed; top : 72px; left : 0; width : 100%; background-color: var(--white); z-index: 7; overflow : auto; background : #f9f9f9; border-top : 1px solid #ddd; border-bottom : 1px solid #ddd; scrollbar-width: none; } 
.history_wrap .history_mobile_nav ul { display : flex; align-items: center; } 
.history_wrap .history_mobile_nav li { flex : auto } 
.history_wrap .history_mobile_nav li a { display : block; text-align: center; font-size : 1.3rem; padding : 1rem; font-weight: 600; color : #999 } 
.history_wrap .history_mobile_nav li.active a { color : var(--point) } 
.history_wrap .right ul li.mo { display : block; padding-left : 0; font-size : 3rem; font-weight: bold; background: linear-gradient(to right, #ea5444 10%, #ffffff 70%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold; line-height: 100%; color : transparent; } 
.history_wrap .right ul li.mo:before { display : none; } 
.bbs_thumbs_list.has_cate .bbs_thumbs span { min-width: 4.5rem; } 

 .company_title_wrap h2 { font-size : 2rem } 
 .company_title_wrap .title_visual { flex-direction: column; align-items: center; } 
 .company_title_wrap .title_visual p img { width : 250px } 
 .company_title_wrap .title_visual div:before { transform : rotate(90deg) } 
 .content_tab_wrap ul a { line-height: 3rem; width : 6rem } 
 .company_title_wrap h2 { font-size : 1.8rem } 
 .company_title_wrap .title_visual,
 .company_title_wrap > p { margin-top : 2rem } 
 .company_chart { padding : 4rem 0 } 
 }


 @media ( max-width : 700px ){
 .company_culture { flex-direction: column; gap : 2rem } 
 .company_culture > .inner { width : 100% } 
.company_culture h2 { margin-bottom : .7rem; font-size : 1.2rem } 
.company_chart ul { flex-wrap : wrap } 
.company_chart ul li { flex : 1 1 40% } 
 }

 @media ( max-width : 600px ){
 .sub_visual .link_wrap a { gap : .5rem; padding: .3rem 1rem .3rem .3rem; font-size : .8rem } 
 .organization_wrap > h2:before,
 .organization_wrap > h2:after,
 .organization_list .inner:before,
 .organization_list .inner h2:before,
 .organization_list #line { display : none } 
 .organization_list { margin-top : 2rem; flex-direction: column; } 
 .organization_list .inner { max-width : 250px; margin : 0 auto 1rem } 
 .bbs_thumbs_list_01 .box a { gap : 1.4rem } 
 .bbs_thumbs_list_01 .box a p.img_thumb { width : 8rem; height : 10rem } 
 .bbs_thumbs_list_01 .title_wrap { height : 10rem; padding : 0 } 
 .bbs_thumbs_list_01 span { font-size : .8rem } 
 .bbs_thumbs_list_01 h2 { font-size : 1rem } 
 .bbs_thumbs_list .box { width : calc(50% - 1rem / 2) } 
}


 @media ( max-width : 500px ){
 .list_type_01_wrap .box h2 { font-size : 1.5rem } 
.list_type_01_wrap .box p { font-size : .9rem } 
.skill_box_wrap .box h2 { font-size : 1.3rem } 
.skill_box_wrap .box_inner a { font-size : .9rem } 
 .bbs_thumbs_txt { margin-top : .5rem; height : 4.5rem } 
 .bbs_thumbs_list h2 { font-size : 1rem } 
 .list_type_02_wrap { flex-direction: column; } 
 .list_type_02_wrap .box { width : 100% } 
 .accordion_wrap .toggle_inner { padding : 1.4rem } 
 .paging div a:nth-child(n+3) { display : none } 
 .bbs_view_wrap .bbs_view_file { padding-left: 130px; } 
 .bbs_thumbs_list.has_cate .bbs_thumbs span { min-width: auto; padding : 0 1rem; line-height: 1.5rem; } 
 .company_title_wrap .title_visual { gap : 0 } 
 .company_title_wrap .title_visual p img { width : 250px } 
 .company_title_wrap h2 { word-break: keep-all; } 
 .company_title_wrap h2 span { display : inline } 
 .video_thumb_wrap button img { width : 70px; } 
 .land_skill_wrap h2 { font-size : 1.4rem } 
 .location_wrap dl dt { width : 5.5rem; font-size : 1rem } 
 }

 @media ( max-width : 430px ){
 .sub_visual .link_wrap a span { width : 1.5rem; height : 1.5rem } 
.sub_visual .link_wrap a span img { width : 12px } 
.enquire_list_wrap .enquire_content > ul { flex-direction: column; } 
.enquire_list_wrap .enquire_content > ul li { width : 100% } 
.bbs_thumbs_list_01 .box a { flex-direction: column } 
.bbs_thumbs_list_01 .box a p.img_thumb { margin : 0 auto } 
.bbs_thumbs_list_01 .title_wrap { height : 8rem } 
.bbs_thumbs_list.has_cate .bbs_thumbs span { font-size : .7rem; padding : 0 0.7rem; top : 10px; left : 10px } 
.bbs_thumbs_list h2 { font-size : .9rem } 
.company_chart ul li div { height : 10rem } 
.company_chart ul li div img { width : 60px } 
.company_chart ul li div h2 b { font-size : 2rem } 
 .location_wrap dl dt { width : 5rem; font-size : .9rem } 
 }

 @media ( max-width : 400px ){
 .skill_box_wrap .box { padding : 1.2rem 1.5rem } 
 .sub_visual .link_wrap { flex-direction: column; } 
 .sub_visual .pagination { font-size : .7rem } 
 .bbs_search_wrap select { display : none } 
 .bbs_view_wrap .bbs_view_file { padding : 1.5rem } 
 .bbs_view_wrap .bbs_view_file .bbs_view_file_label { position : static; margin-bottom : .7rem } 
 .bbs_view_wrap .bbs_view_file .bbs_view_file_label:after { display : none } 
 .bbs_more_list a, .bbs_more_list p, .bbs_more_list a { padding-left : 2rem } 

 .welfare_inner .box { flex : auto; width : 100% } 
 }

 @media ( max-width : 360px ){
 .company_chart ul li div { height : 8.5rem } 
 .company_chart ul li div span { font-size : .8rem } 
.company_chart ul li div h2 b { font-size : 1.6rem } 
 }

/* ════════════════════════════════════════════════════════════════════════
 커스텀 추가 영역 (자체 추가)
 ────────────────────────────────────────────────────────────────────────
 - 이 배너 아래의 모든 규칙은 퍼블 납품본에 없던 자체 추가분입니다.
 - 퍼블 sub.css 를 새 버전으로 교체/갱신할 때 이 블록은 반드시 보존(머지)하세요.
 - 위쪽(퍼블 원본)은 가급적 직접 수정하지 말고, 덮어쓸 규칙은 여기에 추가합니다.

 포함 내용
 1) 특화SW 소개영상 인라인 재생 (.video_thumb_wrap .inner iframe 등)
 └ specsw_view.html 영상 영역
 2) 브로슈어 다중 파일 다운로드 드롭다운 (.brochure-*)
 └ specsw_view.html 브로슈어 버튼 / UserSpecSwController.brochureFiles
 ════════════════════════════════════════════════════════════════════════ */

/* 영상 썸네일(유튜브 등 작은 이미지)이 .inner 박스를 가득 채우도록 (공용 .img_center 는 가운데 정렬+축소만) */
.video_thumb_wrap .inner img { width : 100%; height : 100%; max-width : none; max-height : none; object-fit : cover; } 
.video_thumb_wrap .inner video { display : block; width : 100%; height : 100%; object-fit : cover; } 

/* 영상 재생 중: 어두운 오버레이와 재생 버튼 숨김 */
.video_thumb_wrap.is-playing .inner:after { display : none; } 
.video_thumb_wrap.is-playing button { display : none; } 
.video_thumb_wrap.is-playing .inner video { object-fit : contain; background-color : #000; } 

/* iframe 을 .inner 박스에 꽉 채움 (둥근 모서리/overflow:hidden 유지, 높이 안정) */
.video_thumb_wrap .inner iframe { position : absolute; inset : 0; width : 100%; height : 100%; border : 0; } 

/* ── 브로슈어 다중 파일 드롭다운 ─────────────────────────────
 트리거(button)는 기존 .sub_visual .link_wrap a 와 시각적으로 동일하게 맞춤. */
.sub_visual .link_wrap .brochure-dropdown { position : relative; display : inline-flex; } 
.sub_visual .link_wrap .brochure-trigger { display : inline-flex; align-items: center; gap : 1.2rem; /* 기본/호버를 .sub_visual .link_wrap a(기술문의·데모체험)와 동일하게 — 기존엔 반대였음 */
 /* border : 2px solid #ffe4e1; color : var(--point); background-color: var(--white); */
 border : 2px solid var(--point); border-radius : .5rem; padding : .3rem 1.2rem .3rem .3rem; font-size : 1rem; font-weight: 500; font-family: inherit; line-height: 1; cursor : pointer; color : var(--white); background-color: var(--point); } 
.sub_visual .link_wrap .brochure-trigger span { display : flex; width : 2.5rem; height : 2.5rem; background-color: var(--lightpoint); justify-content: center; align-items: center; border-radius : .5rem; } 
.sub_visual .link_wrap .brochure-trigger span img { width : 18px; } 
/* .sub_visual .link_wrap .brochure-trigger:hover { background-color: var(--point); color : var(--white); } */
.sub_visual .link_wrap .brochure-trigger:hover { background-color: var(--white); color : var(--point); border-color : #ffe4e1 } 

/* 팝오버 메뉴 (조상 컨테이너에 overflow:hidden 없음 → 잘리지 않음)
 폭은 12~24rem 범위(모바일은 화면폭)로 고정하고, 긴 파일명은 박스 안에서 줄바꿈하여 전체 표시. */
.brochure-menu { position : absolute; top : calc(100% + .5rem); left : 0; z-index : 30; width : max-content; min-width : 14rem; max-width : min(24rem, calc(100vw - 2rem)); background-color: var(--white); border : 2px solid #ffe4e1; border-radius : .75rem; box-shadow : 0 6px 20px rgba(0, 0, 0, .14); padding : .4rem; } 
/* 메뉴 항목/파일명은 .sub_visual .link_wrap 로 스코프하여 특이도를 올리고(아이콘칩 .link_wrap a span,
 pill .link_wrap a 보다 우선), 상속된 칩/pill 스타일(고정크기·흰배경·테두리)을 명시적으로 리셋한다. */
.sub_visual .link_wrap .brochure-menu-item { display : flex; align-items: center; gap : .5rem; width : 100%; min-height : 2.75rem; padding : .5rem .75rem; border : 0; border-radius : .5rem; background-color: transparent; color : #333; font-size : .95rem; font-weight: 500; text-decoration: none; } 
.sub_visual .link_wrap .brochure-menu-item:hover,
.sub_visual .link_wrap .brochure-menu-item:focus { background-color: var(--lightpoint); color : var(--point); outline : none; } 
/* 키보드 포커스 가시화(KWCAG 2.4.7): 마우스 :focus 는 링 제거하되 키보드(:focus-visible)는 링 표시 */
.sub_visual .link_wrap .brochure-trigger:focus-visible,
.sub_visual .link_wrap .brochure-menu-item:focus-visible { outline : 2px solid var(--point); outline-offset : 2px; } 
.sub_visual .link_wrap .brochure-menu-item .brochure-file-name { display : block; flex : 1 1 auto; width : auto; height : auto; min-width : 0; background-color: transparent; border-radius : 0; white-space: normal; overflow-wrap: anywhere; word-break: break-word; } 
.sub_visual .link_wrap .brochure-menu-all { border-top : 1px solid #eee; margin-top : .25rem; justify-content: center; } 

@media ( max-width : 1200px ){
 .sub_visual .link_wrap .brochure-trigger { font-size : 1rem; } .sub_visual .link_wrap .brochure-trigger span { width : 2.4rem; height : 2.4rem; } 
 } 
@media ( max-width : 767px ){
 .sub_visual .link_wrap .brochure-trigger { font-size : .9rem; } .sub_visual .link_wrap .brochure-trigger span { width : 2rem; height : 2rem; } .sub_visual .link_wrap .brochure-trigger span img { width : 16px; } 
 } 
@media ( max-width : 600px ){
 .sub_visual .link_wrap .brochure-trigger { gap : .5rem; padding : .3rem 1rem .3rem .3rem; font-size : .8rem; } 
 } 
@media ( max-width : 430px ){
 .sub_visual .link_wrap .brochure-trigger span { width : 1.5rem; height : 1.5rem; } .sub_visual .link_wrap .brochure-trigger span img { width : 12px; } 
 } 


/* ---------------------------------------------------------------------
 [문의하기] 대분류 선택 시 긴 소분류 옵션이 폼 칼럼을 늘려
 왼쪽 안내문(.left_txt)이 줄바꿈/이동되는 현상 방지.
 원인: flexbox 아이템의 기본 min-width:auto 가 가장 긴 옵션 폭만큼
 폼 칼럼을 강제로 넓혀 좌측 영역을 밀어냄.
 --------------------------------------------------------------------- */
.enquire_list_wrap .left_txt { flex-shrink: 0; } /* 좌측 안내문은 줄어들지 않음 */
.enquire_list_wrap .enquire_content { min-width: 0; } /* 폼 영역이 강제로 안 커지게 */
.enquire_list_wrap .enquire_content > ul li { min-width: 0; } 


/* ---------------------------------------------------------------------
 [스티키 푸터] 본문이 짧아도 footer 가 항상 화면(뷰포트) 맨 아래에 오도록.
 - body 는 block 그대로 두고(레이아웃 영향 X) 최소 높이만 100vh 로 확보.
 - footer 는 position:sticky; top:100vh 로 짧은 페이지에서 뷰포트 바닥에 고정,
 본문이 길면 자연스럽게 내용 아래로 밀린다.
 ※ 이전 방식(body { display:flex } )은 body 직계가 모두 flex 아이템이 되어
 구축사례 등 본문 섹션의 폭/정렬이 틀어지는 부작용이 있어 폐기함.
 --------------------------------------------------------------------- */
body { min-height: 100vh; } 
body > footer { position: sticky; top: 100vh; } 


/* ---------------------------------------------------------------------
 [특화SW] 콘텐츠 준비 중(isVisible=false) 안내를 본문 영역 한가운데에 표시.
 - min-height 로 충분한 높이를 확보하고 그 안에서 가운데 정렬(부모 flex 불필요).
 --------------------------------------------------------------------- */
.specsw-empty { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 4rem 1rem; } 
.specsw-empty .sub_title { margin-bottom: 1rem; } 
.specsw-empty .specsw-empty-desc { color: #767676; } 

/* 
 .land-map-overlay:before { content: ""; position: absolute; right: 50%; top: 72px; width: 0; height: 0; transform: translateY(-50%); border-top: 16px solid transparent; border-bottom: 16px solid transparent; border-left: 24px solid #ef4b3f; transform: rotate(90deg) translateX(-50%); } 

 .land-map-overlay:after { content: ""; position: absolute; right: calc(50% - -2px); top: 70px; width: 0; height: 0; transform: rotate(90deg) translateX(-50%); border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-left: 18px solid #fff; }  */