@charset "UTF-8";
.logo_bedge{ position: absolute; width: 72px; aspect-ratio: 1/1; top: 0; left: 50%; transform: translate(-50%, -50%); border-radius: 50%;}
.logo_bedge:before,
.logo_bedge:after{ position: absolute; content: ''; top: 6px; left: 50%; width: 106px; height: 60px; transform: translateX(-50%);}
.logo_bedge:before{ background: url(../img/mask_symbol.webp) no-repeat 50% 50% / contain; z-index: 3; pointer-events: none;}
.logo_bedge:after{ background: url(../img/mask_cc.webp) no-repeat 50% 50% / cover; width: 100%; z-index: 4; pointer-events: none;}


/*로고심볼div*/
:root{
    --symbol-width: 160px;
    --symbol-height: calc(var(--symbol-width) / 3 * 2); /*3:2 비율*/
    --symbol-stroke-weight: calc(var(--symbol-width) / 100 * 10.5);
}
#visual.sections.section_01 .width_con .title_con .ani_symbol{ position: relative; width: var(--symbol-width); height: var(--symbol-height); display: inline-block; }
#visual.sections.section_01 .width_con .title_con .ani_symbol div{ position: absolute; top: 0; height: 100%; aspect-ratio: 1/1; margin: 0; box-shadow: inset 0 0 0 var(--symbol-stroke-weight) var(--color-w); border-radius: 50%; clip-path: polygon(0 0, 25% 0, 50% 50%, 75% 0, 100% 0, 100% 100%, 0 100%);
    transition:
    all 1000ms ease-out 100ms,
    box-shadow 750ms ease-out,
    clip-path 750ms ease-out 1000ms;
}
html.loading #visual.sections.section_01 .width_con .title_con .ani_symbol div{ clip-path: polygon(0 0, 50% 0, 50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%); box-shadow: inset 0 0 0 0 var(--color-k);}
html.loading #visual.sections.section_01 .width_con .title_con .ani_symbol div:first-child{ left: 50%; margin: 0 0 0 -33.3333%;}
html.loading #visual.sections.section_01 .width_con .title_con .ani_symbol div:last-child{ right: 50%; margin: 0 -33.3333% 0 0;}

#visual.sections.section_01 .width_con .title_con .ani_symbol div:first-child{ left: 0; transform: rotate(-90deg);}
#visual.sections.section_01 .width_con .title_con .ani_symbol div:last-child{ right: 0; transform: rotate(90deg);}

#visual.sections.section_01{ aspect-ratio: 16 / 9; overflow: hidden; transition: aspect-ratio 500ms ease-out;}
#visual.sections.section_01:after{ position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: url(../img/cover_dot.png) var(--color-k-050) repeat 0 0 / 4px; opacity: .65;}
#visual.sections.section_01 > iframe.yt_video{ position: absolute; top: 50%; left: 0; width: 100%; pointer-events: none; transform: translateY(-50%); aspect-ratio: 1 / 1; transition: all 500ms ease-out, margin-top 0ms , opacity 0ms;}
#visual.sections.section_01 > .width_con{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: inherit; z-index: 1;}
#visual.sections.section_01 > .width_con .title_con{ text-shadow: 0 0 var(--mrgn-x2) var(--color-k-035); }
#visual.sections.section_01 > .width_con .title_con h1{}
#visual.sections.section_01 > .width_con .title_con h3{}
#visual.sections.section_01 > .width_con .title_con h2{}
#visual.sections.section_01 > .width_con .title_con h4{}
#visual.sections.section_01 > .width_con .title_con h5{}

#collection.sections.section_02{ background: var(--color-k); }
#collection.sections.section_02 .width_con{}
#collection.sections.section_02 .width_con .title_con{}
#collection.sections.section_02 .width_con ul.v_con > li{ overflow: hidden;}
#collection.sections.section_02 .width_con ul.v_con > li > img{  }
#collection.sections.section_02 .width_con ul.g_con > li.cells > a{ transition: all 250ms ease-in-out; position: absolute; top: 0; left: 0; border-radius: inherit;}
#collection.sections.section_02 .width_con ul.g_con > li.cells > a > .in_img{ transition: inherit; width: 100%; height: 100%; border-radius: inherit;}
#collection.sections.section_02 .width_con ul.g_con li.cells.box {}
#collection.sections.section_02 .width_con ul.g_con li.cells > a{}
#collection.sections.section_02 .width_con ul.g_con li.cells.box > text{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#collection.sections.section_02 .width_con ul.g_con li.cells.box > .text_con:before{ backdrop-filter: blur(6px); mask-image: linear-gradient(0deg, var(--color-w) 40%, var(--color-w-050) 100%);}
#collection.sections.section_02 .width_con ul.g_con > li.cells:nth-child(2) > a > .in_img{}
#collection.sections.section_02 .width_con ul.g_con > li.cells:nth-child(3) > a > .in_img{}
#collection.sections.section_02 .width_con ul.g_con > li.cells:nth-child(4) > a > .in_img{ }
#collection.sections.section_02 .width_con ul.g_con > li.cells:nth-child(5) > a > .in_img{}
#collection.sections.section_02 .width_con ul.g_con > li.cells:nth-child(7) > a > .in_img{ }
#collection.sections.section_02 .width_con ul.g_con > li.cells:nth-child(8) > a > .in_img{}
#collection.sections.section_02 .width_con ul.g_con > li.cells > .text_con{ position: absolute; color: var(--color-w); z-index: 2;}

#atelier.sections.section_03{ background: var(--color-w) url(../img/bg_atelier.webp) no-repeat 50% 50% / cover;}
#atelier.sections.section_03 .width_con{}
#atelier.sections.section_03 .width_con .title_con{ text-shadow: 0 0 6px var(--color-w);}
#atelier.sections.section_03 .width_con ul.v_con > li{}
#atelier.sections.section_03 .width_con ul.v_con > li > .text_con {}
#atelier.sections.section_03 .width_con ul.v_con li.cells.box > .text_con { padding: var(--mrgn-x2) !important;}
#atelier.sections.section_03 .width_con ul.v_con li.cells.box > .text_con > a > span { padding-right: var(--mrgn-x2);}
#atelier.sections.section_03 > img{ position: absolute; top: 25%; left: 50%; margin-left: calc(var(--basic-width) / -2); width: 20%; pointer-events: none; display: inline-block; pointer-events: none;}
#atelier.sections.section_03 .width_con .atelier_list{}
#atelier.sections.section_03 .width_con .atelier_list:after{ position: absolute; content: ''; top:-200px; left: 50%; margin-left: calc(var(--basic-width) / -2 - 171px); width: 300px; height: 375px; background: url(../img/bg_atelier_ring.webp) no-repeat 50% 50% / contain;}
#essential.sections.section_04{ background: #252525 url(../img/bg_essential.webp) repeat 50% 50% / 500px; width: 100%;}
#essential.sections.section_04 .width_con{ }
#essential.sections.section_04 .width_con ul.v_con{ }
#essential.sections.section_04 .width_con ul.v_con > li{}
#essential.sections.section_04 .width_con > ul.v_con.ub_two_con > li.cells > #tab_essential > ul.tab_content > li.selected > ul.v_con > li.cells > ul.v_con.four_con > li.cells.box {}
#essential.sections.section_04 .width_con > ul.v_con.ub_two_con > li.cells > #tab_essential > ul.tab_content > li.selected > ul.v_con > li.cells > ul.v_con.four_con > li.cells.box > a{}
#essential.sections.section_04 .width_con ul.v_con > li.cells.box { background: linear-gradient(var(--color-sub) 0%, var(--color-w) 60%, #bcbfc5 62%, var(--color-w) 80%); transition: inherit; box-shadow: 0 10px 30px -10px var(--color-k-025); filter: brightness(1); text-decoration: none; overflow: hidden;}
#essential.sections.section_04 .width_con ul.v_con > li.cells.box:before{ position: absolute; content: '';top: 0;left: 0;width: 100%;height: 100%;box-shadow: inset 0 0 var(--mrgn) 0 var(--color-w), inset 0 0 var(--mrgn-x2) 0 var(--color-w), inset 0 0 var(--mrgn-x2) 0 var(--color-w);border-radius: inherit;}
#essential.sections.section_04 .width_con ul.v_con > li > .title_con{ }
#essential.sections.section_04 .width_con ul.v_con li.cells > a > span { padding-right: var(--mrgn-x2);}

#founder.sections.section_05{ background: var(--color-w); color: var(--color-k);}
#founder.sections.section_05 .width_con {}
#founder.sections.section_05 .width_con .title_con {}
#founder.sections.section_05 .width_con .title_con > h4 { display: inline-block;}
#founder.sections.section_05 .width_con .title_con.dark.center {}
#founder.sections.section_05 .width_con ul.v_con.two_con { }
#founder.sections.section_05 .width_con ul.v_con.two_con > li{ }
#founder.sections.section_05 .width_con ul.v_con.ub_two_con > li > img { margin-top: -100px; pointer-events: none;}
#founder.sections.section_05 .width_con ul.v_con.ub_two_con > li:last-child > h5,
#founder.sections.section_05 .width_con ul.v_con.ub_two_con > li:last-child > h6 { z-index: 2;}
#founder.sections.section_05 .width_con ul.v_con.ub_two_con > li:last-child > img { position: relative; width: 50%; top:30px; left: 55%; z-index: 1; pointer-events: none;}
#founder.sections.section_05 .width_con ul.v_con {}
#founder.sections.section_05 .width_con ul.v_con > li {}
#founder.sections.section_05 .width_con hr{ margin: 0; border: none; height: 4px; background: var(--color-k);}
#founder.sections.section_05 .width_con hr.end{ background: linear-gradient(90deg, var(--color-k) 50%, var(--color-k-000) 100%);}
#founder.sections.section_05 .width_con .history_con ul.v_con.history{ position: relative;}
#founder.sections.section_05 .width_con .history_con ul.v_con.history.left{}
#founder.sections.section_05 .width_con .history_con ul.v_con.history.right{}
#founder.sections.section_05 .width_con .history_con ul.v_con.history.left:after,
#founder.sections.section_05 .width_con .history_con ul.v_con.history.right:after{ position: absolute; content: ''; top: 0; width: 4px; height: calc(100% - var(--mrgn-x2)); background: var(--color-k);}
#founder.sections.section_05 .width_con .history_con ul.v_con.history.left:after{left: var(--mrgn);}
#founder.sections.section_05 .width_con .history_con ul.v_con.history.right:after{right: var(--mrgn);}
#founder.sections.section_05 .width_con .history_con ul.v_con.history.center{ padding: var(--mrgn-x2) 0;}
#founder.sections.section_05 .width_con .history_con ul.v_con.history li.cells{ text-align: left;}
#founder.sections.section_05 .width_con .history_con ul.v_con.history.center > li.cells:has(> h3):before,
#founder.sections.section_05 .width_con .history_con ul.v_con.history.center > li.cells:has(> h3):after{ position: absolute; content: ''; }
#founder.sections.section_05 .width_con .history_con ul.v_con.history.center > li.cells:has(> h3):before{ bottom: calc(100% + 4px); left: 0; height: calc(var(--mrgn-x2) - 4px); width: 2px; background: linear-gradient(0deg, var(--color-k-000) 0%, var(--color-k) 25%);}
#founder.sections.section_05 .width_con .history_con ul.v_con.history.center > li.cells:has(> h3):after{ bottom: calc(100% + 32px); left: -9px; height: 20px; width: 20px; background: url(../img/img_logo_camellia.webp) no-repeat 50% 50% / cover;}
#founder.sections.section_05 .width_con .history_con ul.v_con.history.center.bottom > li.cells:has(> h3):before{ top: calc(100% + 4px); bottom: auto; background: linear-gradient(0deg, var(--color-k) 75%, var(--color-k-000) 100%);}
#founder.sections.section_05 .width_con .history_con ul.v_con.history.center.bottom > li.cells:has(> h3):after{ top: calc(100% + 32px); bottom: auto;}
#founder.sections.section_05 .width_con .history_con ul.v_con.history.center > li.cells h3{margin: 0 0 var(--mrgn) 0;}
#founder.sections.section_05 .width_con .history_con ul.v_con.history.center > li.cells h6{margin: 0 0 var(--mrgn-half) 0; font-size: 1em;}
#founder.sections.section_05 .width_con .history_con ul.v_con.history.center > li.cells h6:before{position: absolute; content: '•'; left: -7px;}
#founder.sections.section_05 .width_con .history_con ul.v_con.history.center > li.cells h6:last-child{margin: 0;}
#founder.sections.section_05 .width_con .history_con ul.v_con.history.center > li.cells h6:before{}
#founder.sections.section_05 .width_con .history_con ul.v_con.history.center.bottom{}
#founder.sections.section_05 .width_con .history_con ul.v_con.history.center.bottom > li.cells{ vertical-align: bottom;}
#founder.sections.section_05 .width_con .history_con ul.v_con.history.center.bottom > li.cells h3{margin: var(--mrgn) 0 0 0;}
#founder.sections.section_05 .width_con .history_con ul.v_con.history.center.bottom > li.cells h6{margin: var(--mrgn-half) 0 0 0;}
#founder.sections.section_05 .width_con .history_con ul.v_con.history.center.bottom > li.cells h6:first-child{margin: 0;}
#founder.sections.section_05 .width_con .history_con ul.v_con.history.push > li.cells{ left: var(--mrgn-x6);}
#founder.sections.section_05 .width_con li.cells.h_info{ opacity: 0; transform: translateX(40px);}

#sustainability.sections.section_06{}
#sustainability.sections.section_06 .width_con{}
#sustainability.sections.section_06 .width_con .title_con{}
#sustainability.sections.section_06 .width_con .title_con .mark:before,
#sustainability.sections.section_06 .width_con .title_con .mark:after{ color: rgba(255, 255, 255, .05);}
#sustainability.sections.section_06 .width_con .title_con > h4,
#sustainability.sections.section_06 .width_con .title_con > h6{ display: inline-block; vertical-align: bottom; margin: 0;}
#sustainability.sections.section_06 .width_con ul.v_con{ margin-top: var(--mrgn) !important;}
#sustainability.sections.section_06 .width_con ul.v_con li{ overflow: hidden;}
#sustainability.sections.section_06 .width_con ul.v_con li:first-child{}
#sustainability.sections.section_06 .width_con ul.v_con li:last-child{}
#sustainability.sections.section_06 .width_con ul.v_con li.cells > a {}
#sustainability.sections.section_06 .width_con ul.v_con li > a > img{ filter: sepia(1) saturate(0.5);}
#sustainability.sections.section_06 .width_con ul.v_con li.cells.box:hover a img{ filter: sepia(0) saturate(1);}
#sustainability.sections.section_06 .width_con ul.v_con li.cells > a > h3 { position: absolute; top: var(--mrgn); left: var(--mrgn); color: var(--color-w); font-size: 3em;}
#sustainability.sections.section_06 .width_con ul.v_con li.cells > a > .text_con{}
#sustainability.sections.section_06 .width_con ul.v_con li.cells > a > .text_con > h6 {}
/*
sticky 박스는 top, right, bottom, left 속성이 필수입니다.
fixed 박스는 뷰포트에 고정하지만 sticky 박스는 scroll 박스에 고정합니다. 즉, scroll 박스가 offset 기준입니다.
뷰포트와 scroll 박스가 동일한 것처럼 보이는 경우도 있겠지만 뷰포트는 하나뿐이고 scroll 박스는 문서 안에서 더 많이 생성할 수 있어요.
sticky 박스를 scroll 박스에 고정하는 임계점은 스크롤 위치가 결정합니다. sticky 박스 자신과 부모의 위치와 크기도 임계점에 영향을 미칩니다.
sticky 박스의 부모 박스가 scroll 박스를 벗어나면 sticky 박스는 다시 일반적인 흐름에 따릅니다.
sticky 박스와 scroll 박스 사이에 overflow: hidden 속성을 적용한 박스가 끼어들면 sticky 박스는 일반적인 흐름에 따릅니다.
*/

#ambassador.sections.section_07{ background: var(--color-w) url(../img/bg_ambassador.webp) no-repeat 50% 50% / cover;}
#ambassador.sections.section_07 .width_con{}
#ambassador.sections.section_07 .width_con .title_con{}
#ambassador.sections.section_07 .width_con ul.v_con{}
#ambassador.sections.section_07 .width_con ul.v_con li{}
#ambassador.sections.section_07 .width_con ul.v_con.two_con{}
#ambassador.sections.section_07 .width_con ul.v_con.two_con li > ul.v_con{}
#ambassador.sections.section_07 .width_con ul.v_con.two_con li > ul.v_con > li{}
#ambassador.sections.section_07 .width_con ul.v_con.two_con li > ul.v_con > li.cells{}
#ambassador.sections.section_07 .width_con ul.v_con.two_con li > ul.v_con > li.cells.accordion{}
#ambassador.sections.section_07 .width_con ul.v_con.two_con li > ul.v_con > li.cells.accordion > ul.v_con{}
#ambassador.sections.section_07 .width_con ul.v_con.two_con li > ul.v_con > li.cells.accordion > ul.v_con > li{}
#ambassador.sections.section_07 .width_con ul.v_con.two_con li > ul.v_con > li.cells.accordion > ul.v_con > li.cells {}
#ambassador.sections.section_07 .width_con ul.v_con.two_con li > ul.v_con > li.cells.accordion > ul.v_con > li.cells > h4{}
#ambassador.sections.section_07 .width_con ul.v_con.two_con li > ul.v_con > li.cells.accordion > ul.v_con > li.cells > i{}
#ambassador.sections.section_07 .width_con ul.v_con.two_con li > ul.v_con > li.cells.accordion > ul.v_con > li.cells > ul.v_con{}
#ambassador.sections.section_07 .width_con ul.v_con.two_con li > ul.v_con > li.cells.accordion > ul.v_con > li.cells > ul.v_con > li{}
#ambassador.sections.section_07 .width_con ul.v_con.two_con li > ul.v_con > li.cells.accordion > ul.v_con> li.cells > ul.v_con > li.cells{}
#ambassador.sections.section_07 .width_con ul.v_con.two_con li > ul.v_con > li.cells.accordion > ul.v_con.open{}
#ambassador.sections.section_07 .width_con ul.v_con.two_con li > ul.v_con > li.cells.accordion > ul.v_con.open > li{}
#ambassador.sections.section_07 .width_con ul.v_con.two_con li > ul.v_con > li.cells.accordion > ul.v_con.open > li.cells
#ambassador.sections.section_07 .width_con ul.v_con.two_con li > ul.v_con > li.cells.accordion > ul.v_con.open > li.cells > h4{}
#ambassador.sections.section_07 .width_con ul.v_con.two_con li > ul.v_con > li.cells.accordion > ul.v_con.open > li.cells > i{}
#ambassador.sections.section_07 .width_con ul.v_con.two_con li > ul.v_con > li.cells.accordion > ul.v_con.open > li.cells > ul.v_con{}
#ambassador.sections.section_07 .width_con ul.v_con.two_con li > ul.v_con > li.cells.accordion > ul.v_con.open > li.cells > ul.v_con > li{}
#ambassador.sections.section_07 .width_con ul.v_con.two_con li > ul.v_con > li.cells.accordion > ul.v_con.open > li.cells > ul.v_con > li.cells{}
#ambassador.sections.section_07 .width_con ul.v_con.two_con li > ul.v_con > li.cells.accordion > ul.v_con.open > li.cells > ul.v_con > li.cells.minji{ background: url(../img/bg_ambassador_minji.webp) no-repeat 50% 50% / cover;}
#ambassador.sections.section_07 .width_con ul.v_con.two_con li > ul.v_con > li.cells.accordion > ul.v_con.open > li.cells > ul.v_con > li.cells.goeun { background: url(../img/bg_ambassador_goeun.webp) no-repeat 50% 50% / cover;}
#ambassador.sections.section_07 .width_con ul.v_con.two_con li > ul.v_con > li.cells.accordion > ul.v_con.open > li.cells > ul.v_con > li.cells.jennie { background: url(../img/bg_ambassador_jennie.webp) no-repeat 50% 50% / cover;}
#ambassador.sections.section_07 .width_con ul.v_con.two_con li > ul.v_con > li.cells.accordion > ul.v_con.open > li.cells > ul.v_con > li.cells > h6 { color: var(--color-w); position: absolute; margin: var(--mrgn-half);}

#contact.sections.section_08{ overflow: hidden;}
#contact.sections.section_08:before{ position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-point); z-index: 1; opacity: .5; -webkit-mix-blend-mode: hue; mix-blend-mode: hue;} /*-webkit- : 사파리에선 적용 안될 수 있기 때문에 강제적용시킴*/
#contact.sections.section_08:after{ position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg,var(--color-w-075) 15%, transparent 35%); z-index: 1;}
#contact.sections.section_08 > iframe{ position: absolute; top: -210px; left: -50px; width: calc(100% + (var(--basic-width) / 2)); height: calc(100% + 400px); filter: invert(0) hue-rotate(220deg); pointer-events: none;}
#contact.sections.section_08 .width_con ul.v_con > li.cells.box {background: var(--color-w-075); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);}
#contact.sections.section_08 .width_con .title_con{ margin-top: var(--mrgn-x4); margin-left: var(--mrgn-x2);}
#contact.sections.section_08 .width_con{ z-index: 2;}
#contact.sections.section_08 .width_con .title_con >  h4 {margin-bottom: var(--mrgn-x2);} /*타이틀콘이랑 아래 인포부분 사이 밀어주는거*/
#contact.sections.section_08 .width_con ul.v_con li.cells .title_con > h5> table{}
#contact.sections.section_08 .width_con ul.v_con li.cells .title_con > h5 > table > tbody{ width: 100%;}
#contact.sections.section_08 .width_con ul.v_con li.cells .title_con > h5 > table > tbody > tr,th,td{ width: 77%;}
#contact.sections.section_08 .width_con ul.v_con .two_con > li.cells.box .title_con > h5 > table > tbody > tr,th{ font-size: large; font-weight: 500; width: 115px; text-transform: uppercase; color: var(--color-point);} /*테이블태그 왼쪽*/
#contact.sections.section_08 .width_con ul.v_con .two_con > li.cells.box .title_con > h5 > table > tbody > tr,td{ padding-bottom: var(--mrgn);} /*인포부분 영역*/
#contact.sections.section_08 .width_con ul.v_con .two_con > li.cells.box .title_con > h5 > table > tbody > tr,td > a{ text-decoration: none; color: var(--color-k);}
#contact.sections.section_08 .width_con ul.v_con .two_con > li.cells.box .title_con > h5 > table > tbody > tr,td > a:hover{ text-decoration: underline;}
/*pin*/
#contact.sections.section_08 .pins { position: absolute; width: 60px; height: 60px; top: 49%; left: 66%; margin: -7px 0 0 15px; transform: translate(-50%, -50%); z-index: 2;}
#contact.sections.section_08 .pins:before { content: 'Chanel'; font-family: "Poppins"; font-size: 18px; text-transform: uppercase;}
#contact.sections.section_08 .pins:before, 
#contact.sections.section_08 .pins:after { margin-left: 165px; width: 265px; color: var(--color-w); line-height: 1em; z-index: 1; text-shadow: 4px 0 1px rgba(0, 0, 0, .75), -4px 0 1px rgba(0, 0, 0, .75), 0 4px 1px, rgba(0, 0, 0, .75), 0 -4px 1px rgba(0, 0, 0, .75), 3px 3px 1px rgba(0, 0, 0, .75),-3px -3px 1px rgba(0, 0, 0, .75), -3px 3px 1px rgba(0, 0, 0, .75), 3px -3px 1px rgb(0, 0, 0, .75);}
#contact.sections.section_08 .pins:before, 
#contact.sections.section_08 .pins:after,
#contact.sections.section_08 .pins *, 
#contact.sections.section_08 .pins *:before,
#contact.sections.section_08 .pins *:after { position: absolute; left: 50%; transform: translateX(-50%);}

/*pin.niddle*/
#contact.sections.section_08 .pins .needle{ width: 40px; height: 40px; box-shadow: inset 0 0 0 11px var(--color-point); border-radius: 50%; filter: drop-shadow(0 0 15px #000) drop-shadow(0 0 30px #000); animation: needle 1250ms infinite cubic-bezier(.5,0,.5,1); transition: all 200ms linear;}
@keyframes needle{ 0% {top: 0;} 50% {top: -4px;} 100% {top: 0;}}    
#contact.sections.section_08 .pins .needle:before { top: 33px; border-top: 15px solid var(--color-point); border-left: 15px solid transparent; border-right: 15px solid transparent;}
#contact.sections.section_08 .pins .needle:after { top: 35px; border-top: 17px solid var(--color-point); border-left: 10px solid transparent; border-right: 10px solid transparent;}
#contact.sections.section_08 .pins .needle:before, 
#contact.sections.section_08 .pins .needle:after { content: ''; transition: inherit;}
#contact.sections.section_08 .pins:before,
#contact.sections.section_08 .pins:after,
#contact.sections.section_08 .pins *, 
#contact.sections.section_08 .pins *:before,#contact.sections.section_11 .pins *:after { position: absolute; left: 50%; transform: translateX(-50%);}

/*pin.shadow*/
#contact.sections.section_08 .pins .shadow { top: 50px; width: 30px; height: 10px; background: #000; border-radius: 50%; -webkit-mix-blend-mode: overlay; mix-blend-mode: overlay; animation: shadow 1250ms infinite cubic-bezier(.5,0,.5,1);}
@keyframes shadow{0% {opacity: 1;width: 30px;height: 10px;filter: blur(2px);} 50% {opacity: .65;width: 36px;height: 12px;filter: blur(4px);} 100% {opacity: 1; width: 30px; height: 10px; filter: blur(2px);}}





#footer.sections.section_09{ background: url(../img/bg_footer_leather.webp) repeat 0 0 / contain;}
#footer.sections.section_09 .width_con{}
#footer.sections.section_09 .width_con ul.rub_two_con{}
#footer.sections.section_09 .width_con ul.rub_two_con li{}
#footer.sections.section_09 .width_con ul.rub_two_con li.cells ul.v_con.four_con{}
#footer.sections.section_09 .width_con ul.rub_two_con li.cells ul.v_con.four_con li{}
#footer.sections.section_09 .width_con ul.rub_two_con li.cells ul.v_con.four_con li.cells h5{ text-transform: uppercase; padding-bottom: var(--mrgn);}
#footer.sections.section_09 .width_con ul.rub_two_con li.cells ul.v_con.four_con li.cells ul{}
#footer.sections.section_09 .width_con ul.rub_two_con li.cells ul.v_con.four_con li.cells ul li{ margin-bottom: var(--mrgn);}
#footer.sections.section_09 .width_con ul.rub_two_con li.cells ul.v_con.four_con li.cells ul li a{ text-decoration:none; color: var(--color-w);}
#footer.sections.section_09 .width_con ul.rub_two_con li.cells ul.v_con.four_con li.cells ul li a:hover{text-decoration: underline; color: var(--color-w);}
#footer.sections.section_09 .width_con ul.rub_two_con li.cells ul.v_con{}
#footer.sections.section_09 .width_con ul.rub_two_con li.cells ul.v_con li{ color: #6b6b6b;}
#footer.sections.section_09 .width_con ul.rub_two_con li.cells ul.v_con li.cells b a{ text-decoration:none; color: var(--color-w);}
#footer.sections.section_09 .width_con ul.rub_two_con li.cells ul.v_con li.cells b a:hover{ text-decoration: underline;}
#footer.sections.section_09 .width_con div{ margin-top: var(--mrgn-x4);}
#footer.sections.section_09 .width_con div h6{ margin-top: var(--mrgn-x4); color: #4f4f4f;}
#footer.sections.section_09 .width_con div h6 b { font-weight: 700;}

/*푸터하단 샤넬로고*/
#footer.sections.section_09 .width_con .shine_bi {position: relative; display: inline-block; width: 10%; margin-bottom: var(--mrgn-half); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);-webkit-mask-box-image: url(../img/bi_cclogo_w.svg); mask-box-image: url(../img/bi_cclogo_w.svg);}
#footer.sections.section_09 .width_con .shine_bi:before {position: fixed; content: ''; bottom: 0; left: 0; width: 100%; height: 50%;  background: linear-gradient(#333 10%, #fff 24%, #666 24.5%, #fff 35%);}
#footer.sections.section_09 .width_con .shine_bi img{width: 100%;}
#footer.sections.section_09 .width_con .shine_bi + br + img{filter: invert(1); width: 15%;}



/*그리드*/
:root{
    --column : 67px;
}
ul.g_con{ width: 100%; margin: 0 auto; display: grid; grid-gap: var(--mrgn-x2); grid-template-columns: repeat(4, 1fr);}
ul.g_con > li.cells{ position: relative; border-radius: var(--mrgn);}
ul.g_con > li.cells > a{position: relative; width: 100%; height: 100%;}
ul.g_con > li.cells.square{ aspect-ratio: 1/1;}
ul.g_con > li.cells.ratio_2x1{ 
    width: calc(var(--column) * 6 + var(--mrgn-x2) * 5);
    height: calc(var(--column) * 3 + var(--mrgn-x2) * 2);
}
ul.g_con > li.cells.ratio_1x2{ 
    width: calc(var(--column) * 3 + var(--mrgn-x2) * 2);
    height: calc(var(--column) * 6 + var(--mrgn-x2) * 5);
}
ul.g_con.paper > li.cells:nth-child(1){ grid-column: 1/3; grid-row: 1;}
ul.g_con.paper > li.cells:nth-child(2){ grid-column: 3/5; grid-row: 1;}
ul.g_con.paper > li.cells:nth-child(3){ grid-column: 1; grid-row: 2/4;}
ul.g_con.paper > li.cells:nth-child(4){ grid-column: 2; grid-row: 2;}
ul.g_con.paper > li.cells:nth-child(5){ grid-column: 2; grid-row: 3;}
ul.g_con.paper > li.cells:nth-child(6){ grid-column: 3/5; grid-row: 2/4;}
ul.g_con.paper > li.cells:nth-child(7){ grid-column: 1/3; grid-row: 4;}
ul.g_con.paper > li.cells:nth-child(8){ grid-column: 3/5; grid-row: 4;}


/*텍스트콘에 dark 클래스를 넣으면 글씨색과 그라디언트 색상 바뀜*/
.text_con.dark{ position: absolute; bottom: 0; left: 0; padding: var(--mrgn-half); width: 100%; background: linear-gradient(0deg, var(--color-w-065), var(--color-w-000)); box-sizing: border-box; border-radius: inherit; text-shadow: 0 0 6px var(--color-w-035);}
ul.v_con > li.cells .text_con.dark:has(> h4){padding: var(--mrgn);}
ul.v_con > li.cells .text_con.dark h3,
ul.v_con > li.cells .text_con.dark h4,
ul.v_con > li.cells .text_con.dark h5,
ul.v_con > li.cells .text_con.dark h6{ color: var(--color-k); line-height: 1.15em; margin-top: var(--mrgn-half);}


/*탭메뉴 하단 그라디언트*/
.tab_btn:before { position: absolute; content: ''; width: 450px; background: linear-gradient(180deg, var(--color-k) 1%, transparent 90%); height: var(--mrgn-x2); bottom: calc(var(--mrgn-x2) * -1); pointer-events: none; left: 25%; -webkit-mask-image: linear-gradient(90deg, transparent 1%, var(--color-main) 10%, var(--color-main) 88%, transparent 99%); mask-image: linear-gradient(90deg, transparent 1%, var(--color-main) 10%, var(--color-main) 88%, transparent 99%);}