@charset "UTF-8";

#visual.sections.section_01{ overflow: hidden;}
#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{ position: absolute; top: 50%; left: 0; width: 100%; pointer-events: none; transform: translateY(-50%);}
#visual.sections.section_01 > .width_con{ position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); 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 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{}

#about.sections.section_02{ background: #263f82 url(../img/bg_about.webp) no-repeat 50% 50% / cover; background-attachment: fixed;}
#about.sections.section_02 .width_con .title_con .text_con{}
#about.sections.section_02 .width_con .title_con{}
#about.sections.section_02 .width_con ul.v_con .li{}
#about.sections.section_02 .width_con ul.v_con{}
#about.sections.section_02 .width_con{}
/*
#climate.sections.section_03{ height: 1000px; background: #263f82;
    background-image: , url(../img/cover_embossing.png), url(../img/bg_climate.jpg);
    background-position: bottom, top, top;
    background-repeat: no-repeat, repeat, no-repeat;
    background-size: 100%;
    background-blend-mode : screen, color-burn, normal;} <-이건 거의 사용하지 않음*/
#climate.sections.section_03{ background: #263f82; overflow: hidden;}
#climate.sections.section_03:before,
#climate.sections.section_03:after{ position: absolute; content: ''; width: 100%;}
#climate.sections.section_03:before{ top: 0; left: 0; width: 100%; height:100%; background: url(../img/cover_embossing.png) repeat 50% 50%/ cover; opacity: .05; z-index: 1;}
#climate.sections.section_03:after{ bottom: 0; left: 0; height: 200px; background: url(../img/cover_wave.png) no-repeat 50% 50% / cover; z-index: 2;}
#climate.sections.section_03 .width_con .title_con .text_con{}
#climate.sections.section_03 .width_con .title_con{}
#climate.sections.section_03 .width_con ul.v_con .li{}
#climate.sections.section_03 .width_con ul.v_con{}
#climate.sections.section_03 .width_con{ height: 500px;}
.sections .parallax{position: absolute; width: 100%; top: -500px; left: 0; transition: all 10ms linear; }
/*자바스크립틀를 이용해서 Parallax 이펙트를 만들려면 DOM에서 윈도우와 스크롤 관련 데이터를 사용해야 함*/

#years240.sections.section_04{ background: var(--color-w);}
#years240.sections.section_04 > img{ position: absolute; top: 340px; right: 52%; margin-right: -800px; width: 418px; pointer-events: none; transform: rotate(15deg);}
/*#years240.sections.section_04 > img{ position: absolute; top: 26%; right: 52%; margin-right: -40%; width: 418px; pointer-events: none; transform: rotate(15deg);} 위에거랑 같은건데 반지 이미지 위치를 %로 잡음*/
#years240.sections.section_04 > .width_con .text_con h4{ font-weight: 500;}
#years240.sections.section_04 .width_con .title_con{}
#years240.sections.section_04 .width_con ul.v_con li{ }
#years240.sections.section_04 .width_con ul.v_con{}
#years240.sections.section_04 .width_con{}

#josephine.sections.section_05{ background: var(--color-w) url(../img/bg_cubebox.webp) repeat-x 50% 0% / 100px;}
#josephine.sections.section_05 .width_con .title_con .text_con{}
#josephine.sections.section_05 .width_con .title_con{}
#josephine.sections.section_05 .width_con ul.v_con li{}
#josephine.sections.section_05 .width_con ul.v_con{}
#josephine.sections.section_05 .width_con{}

#wall.sections.section_06{ height: 1200px; background: url(../img/bg_wall.webp) no-repeat 50% 50% / cover;}
#wall.sections.section_06:before,
#wall.sections.section_06:after{ position: absolute; content: ''; width: 100%;}
#wall.sections.section_06:before{ transform: scaleY(-1) scaleX(-1); top: 0; left: 0; height: 200px; background: url(../img/cover_wave.png) no-repeat 50% 50% / cover;}
#wall.sections.section_06:after{bottom: 0; left: 0; height: 200px; background: url(../img/cover_wave.png) no-repeat 50% 50% / cover;}
#wall.sections.section_06 .width_con .title_con .text_con{}
#wall.sections.section_06 .width_con .title_con{}
#wall.sections.section_06 .width_con ul.v_con li{}
#wall.sections.section_06 .width_con ul.v_con{}
#wall.sections.section_06 .width_con{}

#collection.sections.section_07{ background: var(--color-w) linear-gradient(360deg, #f3f3f3 33%, transparent 66%); color: var(--color-k);}
#collection.sections.section_07:before,
#collection.sections.section_07:after{ position: absolute; content: ''; width: 100%;}
/*#collection.sections.section_07:before{ transform: scaleY(-1) scaleX(-1); top: 0; left: 0; height: 200px; background: url(../img/cover_wave.png) no-repeat 50% 50% / cover;} 윗부분 웨이브커버 숨김*/
#collection.sections.section_07:after{ bottom: 0; left: 0; height: 200px; background: url(../img/cover_wave.png) no-repeat 50% 50% / cover;}
#collection.sections.section_07 > .width_con h4{ font-weight: 500;}
#collection.sections.section_07 .width_con .title_con .text_con{}
#collection.sections.section_07 .width_con .title_con{}
#collection.sections.section_07 .width_con ul.v_con .li{}
#collection.sections.section_07 .width_con ul.v_con{}
#collection.sections.section_07 .width_con{}

#discover.sections.section_08{ background: var(--color-w) linear-gradient(360deg, #f3f3f3 33%, transparent 66%);}
#discover.sections.section_08 .width_con .title_con
#discover.sections.section_08 .width_con .text_con{}
#discover.sections.section_08 .width_con ul.v_con > .slick-list > .slick-track > li.cells.box > .text_con h5{ font-weight: 500;}
#discover.sections.section_08 .width_con ul.v_con li{}
#discover.sections.section_08 .width_con ul.v_con{}
#discover.sections.section_08 .width_con{}

#jewelry.sections.section_09{ background: #133a5c url(../img/bg_jewelry.webp) no-repeat 50% 50% / cover; }
#jewelry.sections.section_09 .width_con .title_con
#jewelry.sections.section_09 .width_con ul.v_con .li.cells > .jewelry_text_con{ position: absolute; bottom: 0px; left: 0; padding: var(--mrgn-half); width: 100%;}
#jewelry.sections.section_09 .width_con ul.v_con > li.cells .jewelry_text_con:has(> h4){ margin-bottom: var(--mrgn-x2);}
#jewelry.sections.section_09 .width_con ul.v_con li.cells > img{}
#jewelry.sections.section_09 .width_con ul.v_con li{ }
#jewelry.sections.section_09 .width_con ul.v_con{ }
#jewelry.sections.section_09 .width_con a.btn:hover{ background: var(--color-w); color: var(--color-k); box-shadow: 0 10px 30px -10px var(--color-w-065);}
#jewelry.sections.section_09 .width_con ul.v_con > .slick-list > .slick-track > li.cells.box{ background: var(--color-w); border-radius: var(--mrgn); transform: scale(1); transition: all 100ms ease-in-out; box-shadow: 0 10px 30px -10px var(--color-k-065); filter: brightness(1);}
#jewelry.sections.section_09 .width_con{}
#jewelry.sections.section_09 .width_con ul.v_con > .slick-list > .slick-track > li.cells.box:hover{ box-shadow: 0 0 3px 3px var(--color-point) inset; cursor: pointer;}



#ambassador.sections.section_10{ position: relative; background: var(--color-w) url(../img/bg_ambassador_necklace.webp) no-repeat 0% 0% / contain; background-size: 25%; }
#ambassador.sections.section_10 .width_con ul.v_con.two_con > li.cells:last-child { background: #c1bdb0;}
#ambassador.sections.section_10 .width_con ul.v_con > li.cells.box { box-shadow: none;}
#ambassador.sections.section_10 .width_con ul.v_con.two_con li.cells > img{ margin-top: -100px;}
#ambassador.sections.section_10 .width_con{}

#gift.sections.section_11{ height: 100%; background:linear-gradient(360deg, var(--color-k-075) 50%, transparent 75%), url(../img/bg_gift.webp) no-repeat 50% 50% / cover;}
#gift.sections.section_11 .width_con{}

#dia.sections.section_12{ background: var(--color-w ) url(../img/bg_dia.webp) no-repeat 50% 50% / cover;}
#dia.sections.section_12 .width_con .title_con{}
#dia.sections.section_12 .width_con .text_con{ bottom: calc(var(--mrgn-x4) * -1); transition: all 500ms ease-in-out;}
#dia.sections.section_12 .width_con ul.v_con{}
#dia.sections.section_12 .width_con ul.v_con li{}
#dia.sections.section_12 .width_con ul.v_con li.cells{}
#dia.sections.section_12 .width_con ul.v_con li.cells > img{}
#dia.sections.section_12 .width_con ul.v_con li.cells.box,
#dia.sections.section_12 .width_con ul.v_con li.cells:hover .text_con{ bottom: 0; transform: translateY(0); overflow: hidden;}
#dia.sections.section_12 .width_con{}

#service.sections.section_13{ height: 100%; background:linear-gradient(360deg, var(--color-k-075) 10%, transparent 100%), url(../img/bg_service.webp) no-repeat 50% 50% / cover;}
#service.sections.section_13 .width_con .title_con{}
#service.sections.section_13 .width_con .text_con .top{}
#service.sections.section_13 .width_con ul.v_con{}
#service.sections.section_13 .width_con ul.v_con li{}
#service.sections.section_13 .width_con ul.v_con li.cells{}
#service.sections.section_13 .width_con ul.v_con > li.cells.box{ background: var(--color-k-025); transform: scale(1); transition: all 100ms ease-in-out; backdrop-filter: blur(5px);}
#service.sections.section_13 .width_con{}

#store.sections.section_14{ background: var(--color-w)}
#store.sections.section_14 .width_con .text_con{}
#store.sections.section_14 .width_con .title_con{}
#store.sections.section_14 .width_con ul.v_con{}
#store.sections.section_14 .width_con ul.v_con li{}
#store.sections.section_14 .width_con ul.v_con li.cells{}
#store.sections.section_14 .width_con ul.v_con > li.cells.box{}
#store.sections.section_14 .width_con ul.v_con > li.cells > .four_con > li.cells.box{ cursor: pointer;}

#contact.sections.section_15{ overflow: hidden;}
#contact.sections.section_15: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_15:after{ position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg,var(--color-k-075) 15%, transparent 35%); z-index: 1;}
#contact.sections.section_15 > iframe{ position: absolute; top: -200px; left: -600px; width: calc(100% + (var(--basic-width) / 2)); height: calc(100% + 400px); filter: invert(1) hue-rotate(220deg); pointer-events: none;}
#contact.sections.section_15 .width_con ul.v_con > li.cells.box {background: var(--color-k-065); backdrop-filter: blur(15px);}
#contact.sections.section_15 .width_con .title_con{ margin-top: var(--mrgn-x4); margin-left: var(--mrgn-x2);}
#contact.sections.section_15 .width_con{ z-index: 2;}
#contact.sections.section_15 .width_con .title_con >  h4 {margin-bottom: var(--mrgn-x2);} /*타이틀콘이랑 아래 인포부분 사이 밀어주는거*/
#contact.sections.section_15 .width_con ul.v_con li.cells .title_con > h5> table{}
#contact.sections.section_15 .width_con ul.v_con li.cells .title_con > h5 > table > tbody{ width: 100%;}
#contact.sections.section_15 .width_con ul.v_con li.cells .title_con > h5 > table > tbody > tr,th,td{ width: 77%;}
#contact.sections.section_15 .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_15 .width_con ul.v_con .two_con > li.cells.box .title_con > h5 > table > tbody > tr,td{ padding-bottom: var(--mrgn);} /*인포부분 영역*/
.sections .width_con .title_con h6 { font-size: 12px; font-weight: 400;}
#contact.sections.section_15 .width_con ul.v_con .two_con > li.cells.box .title_con > h5 > table > tbody > tr,td > a{ text-decoration: none; color: var(--color-w);}
#contact.sections.section_15 .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_15 .pins { position: absolute; width: 60px; height: 60px; top: 49%; left: 33%; margin: -7px 0 0 15px; transform: translate(-50%, -50%); z-index: 2;}
#contact.sections.section_15 .pins:before { content: 'Chaumet'; font-family: "Poppins"; font-size: 18px; text-transform: uppercase;}
#contact.sections.section_15 .pins:before, #contact.sections.section_15 .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_15 .pins:before, #contact.sections.section_15 .pins:after,#contact.sections.section_15 .pins *, #contact.sections.section_15 .pins *:before,#contact.sections.section_15 .pins *:after { position: absolute; left: 50%; transform: translateX(-50%);}

/*pin.niddle*/
#contact.sections.section_15 .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_15 .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_15 .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_15 .pins .needle:before, #contact.sections.section_15 .pins .needle:after { content: ''; transition: inherit;}
#contact.sections.section_15 .pins:before, #contact.sections.section_15 .pins:after,#contact.sections.section_15 .pins *, #contact.sections.section_15 .pins *:before,#contact.sections.section_15 .pins *:after { position: absolute; left: 50%; transform: translateX(-50%);}

/*pin.shadow*/
#contact.sections.section_15 .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_16{ height: 100%; background: linear-gradient(360deg, var(--color-k-025) 33%, transparent 50%), #12267b url(../img/bg_footer_paris.webp) no-repeat 50% 50% / contain;}
#footer.sections.section_16:before{ position: absolute; width: 100%; height: 100%; content: ''; background: #14277c; opacity: .65;}
#footer.sections.section_16 .width_con h5,
#footer.sections.section_16 .width_con h6{ color: var(--color-w-050);}
#footer.sections.section_16 .width_con .text_con{ background: none;}
#footer.sections.section_16 .width_con .text_con > img{ width: 160px; padding: var(--mrgn);}
#footer.sections.section_16 .width_con ul.v_con{}
#footer.sections.section_16 .width_con ul.v_con li{}
#footer.sections.section_16 .width_con ul.v_con li.cells{}
#footer.sections.section_16 .width_con ul.v_con li.cells > a{ text-decoration: inherit; color: var(--color-w); display: inline-block;}
#footer.sections.section_16 .width_con ul.v_con li.cells > a:hover{ text-decoration: underline;}
#footer.sections.section_16 .width_con ul.v_con li.cells > span > a > i{ margin-right: var(--mrgn); font-size: 1.25em; color: var(--color-w);}
#footer.sections.section_16 .width_con ul.v_con > li.cells .text_con h5, ul.v_con > li.cells .text_con h6 > b{ font-weight: 600;}
#footer.sections.section_16 .width_con{}


a.btn{ color: var(--color-w); text-decoration: none; display: inline-block; background: var(--color-k); width: 170px; height: 36px; border-radius: var(--mrgn); text-align: center; line-height: 36px; margin: 0 9px 18px 9px;}
a.btn:hover { background: var(--color-w); color: var(--color-k); box-shadow: 0 10px 30px -10px var(--color-k-065);}

a.btn_01{ color: var(--color-k); text-decoration: none; display: inline-block; background: var(--color-w); width: 170px; height: 36px; border-radius: var(--mrgn); text-align: center; line-height: 36px; margin: 0 9px 18px 9px;}
a.btn_01:hover { background: var(--color-k); color: var(--color-w); box-shadow: 0 10px 30px -10px var(--color-w-065);}

.footer_01{ padding-top: var(--mrgn-x4);}
.footer_02{ padding-top: 180px;}

.text_con.top_01{ position: absolute; top: -9px; left: 0; padding: var(--mrgn-half); width: 100%;} /*주얼리섹션 첫번째 박스*/
.text_con.top_02{ position: absolute; top: 22px; left: 0; padding: var(--mrgn); width: 100%;} /*주얼리섹션 두번째 박스부터 적용됨*/


/*텍스트콘에 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: 600px; background: linear-gradient(180deg, var(--color-point) 1%, transparent 90%); height: var(--mrgn-x2); bottom: calc(var(--mrgn-x2) * -1); pointer-events: none; left: 280px; -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%);}


/* events box type 박스안 이미지에 배경 필터효과*/
.box_01{ box-shadow: 0 10px 30px -10px var(--color-k-065); }
/*.box_01:hover{ box-shadow: 0 10px 30px -10px var(--color-k); }*/
.box_01:active{ box-shadow: 0 1px 3px -1px var(--color-k); }
.box_01:before,
.box_01:after{ position: absolute; content:''; left: 0; width: 100%; border-radius: inherit; }
.box_01:before{ top: 0; height: 100%; backdrop-filter: blur(0); transition: all 500ms ease-out; }
/*.box_01:hover:before{ backdrop-filter: blur(10px); } 원래 있던버전*/
.box_01:after{ bottom: 0; height: 25%; backdrop-filter: blur(30px); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #fff 50%); mask-image: linear-gradient(180deg, transparent 0%, #fff 50%); }
.box_01 > a{ box-shadow: none !important; clip-path: polygon(0 -100%, 100% -100%, 100% 100%, 0 100%);}
.box_01 > a > img{ position: absolute; width: 100%; bottom: .5px; left: 0; border-radius: 0 0 var(--mrgn) var(--mrgn); transform: scale(1); transform-origin: bottom; transition: all 500ms ease-out;}
.box_01:hover > a > img{ transform: scale(1.025); margin-bottom:0;}
.box_01 > .text_con{color: var(--color-sub); z-index: 1; padding: var(--mrgn);}