@charset "UTF-8";

#visual.sections.section_01{ overflow: hidden; aspect-ratio: 16 / 9; background: var(--color_w); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); 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/01_visual/cover_dot.webp) var(--color-k-050) repeat 0 0 / 4px; opacity: .65;}
#visual.sections.section_01 > iframe.yt_video { position: absolute; top: 50%; left: 50%; width: 100%; aspect-ratio: 1 / 1; pointer-events: none; transform: translate(-50%, -50%); transition: inherit; 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%); 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{ font-size: 0;} */

#collection.sections.section_02{}
#collection.sections.section_02:before,
#collection.sections.section_02:after{ position: absolute; content: ''; top: -30px; left: 50%; width: 100px; height: 60px; transform: translateX(-50%);}
#collection.sections.section_02:before{ background: url(../img/02_collection/mask_symbol.webp) no-repeat 50% 50% / contain;}
#collection.sections.section_02:after{ background: url(../img/02_collection/bi_circle.svg) no-repeat 50% 50% / contain; width: 30px;}
#collection.sections.section_02 ul.v_con > li.cells.box{ background: none;}

.sections.section_03{ display: none;}

#.sections.section_04{}
#engage.sections.section_04{position: relative; background: var(--color-w); z-index: 1; margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: top;}
#engage.sections.section_04 .width_con .gooey_con { position: relative;}
#engage.sections.section_04 .width_con .gooey_con > div.cells:first-child {box-sizing: border-box; padding-right: var(--mrgn); z-index: 2;}
#engage.sections.section_04 .width_con .gooey_con > div.cells:first-child .title_con {margin-bottom: 0;}
#engage.sections.section_04 .width_con .gooey_con > div.cells {display: inline-block;}
#engage.sections.section_04 .width_con .gooey_con > div.cells.small_picture { position: relative; background: #f4f3f6; aspect-ratio: 1 / 1; border-radius: var(--mrgn) var(--mrgn) var(--mrgn) 0; box-shadow: inset -10px -10px 15px rgba(255, 255, 255, 0.5), inset 10px 10px 15px rgba(70, 70, 70, 0.12);}
#engage.sections.section_04 .width_con .gooey_con > div.cells:first-child, #engage.sections.section_04 .width_con .gooey_con > div.cells.large_picture {width: 66.666%; }
#engage.sections.section_04 .width_con .gooey_con > div.cells.small_picture, #engage.sections.section_04 .width_con .gooey_con > div.cells.intro_cells{width: 33.334%;}
#engage.sections.section_04 .width_con .gooey_con > div.bridge { position: absolute; left: 66.666%; width: var(--mrgn-x4); aspect-ratio: 1 / 1; z-index: 1; transform: translate(-50%, -50%); -webkit-backdrop-filter: blur(var(--mrgn-half)) saturate(1.5) contrast(.9); backdrop-filter: blur(var(--mrgn-half)) saturate(1.5) contrast(.9); mask-image: linear-gradient(45deg, transparent calc(var(--mrgn) + var(--mrgn-half)), #fff calc(var(--mrgn-x2) + var(--mrgn-half)), #fff calc(100% - var(--mrgn-x2) - var(--mrgn-half)), transparent calc(100% - var(--mrgn) - var(--mrgn-half)));}
#engage.sections.section_04 .width_con .gooey_con > div.bridge:before { top: 0; left: 0; border-radius: 0 0 18px 0;}
#engage.sections.section_04 .width_con .gooey_con > div.bridge:after { bottom: 0; right: 0; border-radius: 18px 0 0 0;}
#engage.sections.section_04 .width_con .gooey_con > div.bridge:before, #engage.sections.section_04 .width_con .gooey_con > div.bridge:after {position: absolute; content: ''; width: 50%; height: 50%; background: var(--color-w);}
#engage.sections.section_04 .width_con .gooey_con > div.cells.large_picture { position: relative; background: #f4f3f6; aspect-ratio: 16 / 9; border-radius: var(--mrgn) 0 var(--mrgn) var(--mrgn); box-shadow: inset -10px -10px 15px rgba(255, 255, 255, 0.5), inset 10px 10px 15px rgba(70, 70, 70, 0.12);}
#engage.sections.section_04 .width_con .gooey_con > div.cells.intro_cells { position: relative; aspect-ratio: 3 / 4; padding: var(--mrgn-x4) 0 0 var(--mrgn-x2); background: url(../img/04_ambassador/02.webp) no-repeat 50% 72% / contain; background-size: 70%; z-index: 2;}
#engage.sections.section_04 .width_con .gooey_con > div.cells.intro_cells{ z-index: 2; box-sizing: border-box;}
#engage.sections.section_04 .width_con .gooey_con div.cells img.rose_png_00{ position: absolute; bottom: 0; right: 0; width: 100%; border-bottom-right-radius: 18px;}
#engage.sections.section_04 .width_con .gooey_con div.cells img.rose_png_01{ position: absolute; bottom: 0; right: 0; width: 100%; }


#wedding.sections.section_05{ background: linear-gradient(var(--color-w), var(--color-point-065), var(--color-w));}
#wedding.sections.section_05 .width_con{ position: relative;}
#wedding.sections.section_05 .width_con ul.v_con.two_con{}
#wedding.sections.section_05 .width_con ul.v_con.two_con .cells .title_con{}
#wedding.sections.section_05 .width_con ul.v_con.two_con .cells > img{ pointer-events: none;}
#wedding.sections.section_05 .width_con ul.v_con.two_con .cells img.box_bottom{ position: absolute; left: 0; right: 0;}
#wedding.sections.section_05 .width_con ul.v_con > li.cells .text_con{ background: linear-gradient(0deg, var(--color-w-055), var(--color-w-000)); text-shadow: 0 0 6px var(--color-w-035);}
#wedding.sections.section_05 .width_con ul.v_con > li.cells .text_con h6{ color:#000}
#wedding.sections.section_05 .width_con ul.v_con.two_con .cells .v_con.three_con.jewelry_list{}
#wedding.sections.section_05 .width_con ul.v_con.two_con li.cells .large_img { position: absolute; width: 35%; top: 50%; left: 50%; pointer-events: none; transform: translate(-50%, -50%); transition: 2s;}
#wedding.sections.section_05 .width_con ul.v_con.two_con li.cells .top_wrap{ position: absolute; top: 10px; left: 10px; width: 90%; height: 12%;}
#wedding.sections.section_05 .width_con ul.v_con.two_con li.cells .top_wrap img{ display: inline-block; height: 100%; margin-right: 4px;}
#wedding.sections.section_05 .width_con ul.v_con.two_con li.cells .top_wrap h6{ display: inline-block; color: black; top: 50%; transform: translateY(-50%);}

#category.sections.section_06 .width_con #tab_edition ul.tab_content li.cells ul.v_con li.cells{ width: calc(25% - var(--mrgn-x2)) !important; background: var(--color-w);}
#category.sections.section_06 .width_con #tab_edition ul.tab_content li.cells ul.v_con li.cells .text_con{ background: none; text-shadow: none;}
#category.sections.section_06 .width_con #tab_edition ul.tab_content li.cells ul.v_con li.cells .text_con h5{ color: var(--color-k);}

#heritage.sections.section_07{ display: none;}
#heritage.sections.section_07 .width_con ul.v_con ul.two_con li.cells .title_con{ top: calc(var(--mrgn))}
#heritage.sections.section_07 .width_con ul.v_con ul.two_con li.cells .year{ opacity: 0;}
.year {
    font-size: 2rem;
    font-weight: bold;
    color: rgb(132, 132, 132); /* 티파니 블루 색상 */
    text-align: center;
    position: relative;
    transition: 2s ease-in-out;
  }
  
.year.yearScroll {
    transform: scale(1.1);
    color: #222; /* 호버 시 흰색으로 변경 */
  }
  

#.sections.section_08{}
#store.sections.section_08{} .width_con ul.v_con > li.cells > .four_con > li.cells.box{ cursor: pointer;}
#store.sections.section_08 li.cells.selected:after { position: absolute; content: ''; top: 4px; left: 4px; width: calc(100% - 12px); height: calc(100% - 12px); border: 2px solid var(--color-point); border-radius: calc(var(--mrgn) - 4px); opacity: 1; z-index: 5;}

#.sections.section_09{}

#contact.sections.section_09{ overflow: hidden;}
#contact.sections.section_09:before, #contact.sections.section_09:after { position: absolute; content: ''; z-index: 1;}
#contact.sections.section_09:before{ width: calc(100% + 700px); height: auto; top: 50%; left: 0; background: var(--color-k-025); transform: translate(0, -50%); aspect-ratio: 1/1; -webkit-mask-box-image: radial-gradient(transparent 0%, #000 50%); mask-box-image: radial-gradient(transparent, #000); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(5px);}
#contact.sections.section_09:after{ top: 0; left: 0; width: 100%; height: 100%; background: var(--color-point-065); -webkit-mix-blend-mode: overlay; mix-blend-mode: overlay; opacity: .3;}
#contact.sections.section_09 iframe{ position: absolute; top: -310px; left: 0; width: 122.5%; height: calc(100% + 600px);}
#contact.sections.section_09 .width_con{ position: relative; z-index: 2;}
#contact.sections.section_09 .width_con ul.v_con{}
#contact.sections.section_09 .width_con ul.v_con.three_con{ position: relative;}
#contact.sections.section_09 .width_con ul.v_con.three_con li.cells {}
#contact.sections.section_09 .width_con ul.v_con.three_con li.cells.box{ background: var(--color-w); box-shadow: 0 10px 30px -10px var(--color-k-035); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);}
#contact.sections.section_09 .width_con ul.v_con.three_con li.cells.box.ratio_16x9{ background: none; box-shadow: none; backdrop-filter: none;}
#contact.sections.section_09 .width_con ul.v_con.three_con li.cells .title_con{ margin: 0 0 var(--mrgn) 0; padding: var(--mrgn-x2);}
#contact.sections.section_09 .width_con ul.v_con.three_con li.cells .title_con h3{}
#contact.sections.section_09 .width_con ul.v_con.three_con li.cells .title_con h2{ font-size: 4.5em;}
#contact.sections.section_09 .width_con ul.v_con.three_con li.cells .title_con h4{}
#contact.sections.section_09 .width_con ul.v_con.three_con li.cells .title_con h5{ margin-top: var(--mrgn); line-height: 1.2em;}
#contact.sections.section_09 .width_con ul.v_con.three_con li.cells .title_con h5 table tr{}
#contact.sections.section_09 .width_con ul.v_con.three_con li.cells .title_con h5 table tr th{ text-transform: uppercase;}
#contact.sections.section_09 .width_con ul.v_con.three_con li.cells .title_con h5 table tr td{ padding-left: var(--mrgn-half); padding-bottom: var(--mrgn-half); font-weight: 600;}
#contact.sections.section_09 .width_con ul.v_con.three_con li.cells .title_con h5 table td{}
#contact.sections.section_09 .pins{ position: absolute; width: 60px; height: 60px; top: 49%; left: 60.5%; margin: -7px 0 0 15px; transform: translate(-50%, -50%); z-index: 2;}
#contact.sections.section_09 .pins:before, #contact.sections.section_09 .pins:after{ margin-left: 165px; width: 265px; color: var(--color-k); z-index: 1; text-shadow: 4px 0 1px var(--color-w-075), -4px 0 1px var(--color-w-075), 0 4px 1px var(--color-w-075), 0 -4px 1px var(--color-w-075), 3px 3px 1px var(--color-w-075), -3px -3px 1px var(--color-w-075), -3px 3px 1px var(--color-w-075), 3px -3px 1px var(--color-w-075);}
#contact.sections.section_09 .pins:before{ content: 'Tiffany & Co.'; font-size: 18px; font-weight: 600; text-transform: uppercase;}
#contact.sections.section_09 .pins:after{ content: '727 5th Avenue, NY 10022'; margin-top: var(--mrgn); font-size: 16px; font-weight: 600;}
#contact.sections.section_09 .pins:before, #contact.sections.section_09 .pins:after, #contact.sections.section_09 .pins *, #contact.sections.section_09 .pins *:before, #contact.sections.section_09 .pins *:after{ position: absolute; left: 50%; transform: translateX(-50%); top: 5%;}
#contact.sections.section_09 .pins .shadow{ top: 50px; width: 30px; height: calc(var(--mrgn-half) / 2); background: var(--color-k); border-radius: 50%; mix-blend-mode: overlay; animation: shadow 1250ms infinite cubic-bezier(.5,0,.5,1);}

@keyframes shadow {
    0% {
        opacity: 1;
        width: 30px;
        height: calc(var(--mrgn-half) / 2);
        filter: blur(2px);
    }

    50% {
        opacity: .65;
        width: 36px;
        height: 12px;
        filter: blur(4px);
    }

    100% {
        opacity: 1;
        width: 30px;
        height: calc(var(--mrgn-half) / 2);
        filter: blur(2px);
    }
}

#contact.sections.section_09 .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 var(--color-k)) drop-shadow(0 0 30px var(--color-k)); 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_09 .pins .needle:before, #contact.sections.section_09 .pins .needle:after{ content: ''; transition: inherit;}
#contact.sections.section_09 .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_09 .pins .needle:after{ top: 35px; border-top: 17px solid var(--color-point); border-left: calc(var(--mrgn-half) / 2) solid transparent; border-right: calc(var(--mrgn-half) / 2) solid transparent;}
#contact.sections.section_09 .pins:hover .shadow{ opacity: 1; width: 30px; height: calc(var(--mrgn-half) / 2); animation: none;}
#contact.sections.section_09 .pins:hover .needle{ top : 0; animation: none; box-shadow: inset 0 0 0 11px var(--color-w);}
#contact.sections.section_09 .pins:hover .needle:before{ border-top: 15px solid var(--color-w);}
#contact.sections.section_09 .pins:hover .needle:after{ border-top: 17px solid var(--color-w);}