/* custom */
:root {
    --color:#000;
}
.cp { color:var(--color); }
.cb { color:#fff; background:var(--color); }
.shd { box-shadow: 0 10px 10px rgba(0,0,0,0.6); }
body { font:1.6rem/1.6 ptm; background: #111; color:#fff; }

.w_btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; padding:0 32px; border-radius:60px; border:2px solid #fff; background:transparent; font-family:steb; font-size:1.4rem; color:#fff; cursor:pointer; transition:background 0.3s ease, color 0.3s ease; text-transform: uppercase;}
.w_btn:hover { background:rgba(255,255,255,0.6); color:#000; }

/* header & footer */
#w_header { position: fixed; top:0; width: 100%; z-index: 10; transition:0.3s; overflow: hidden; color:#fff; }
#w_header.up { top:-81px; }
#w_header.fix { background: rgba(0,0,0,0.6); backdrop-filter: blur(10px); }
#w_header .wrap { height: 80px; display: flex; align-items: center; justify-content: space-between; }
#w_header #w_gnb { gap: 80px; height: 80px; display: flex; align-items: center; justify-content: center; font-family: ptb; }

@media (min-width:801px) {
#w_header #w_gnb > li > a { position:relative; display:inline-block; padding-bottom:6px; }
#w_header #w_gnb > li > a::after { content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:#fff; transition:width 0.3s ease; }
#w_header #w_gnb > li > a:hover::after,
#w_header #w_gnb > li.active > a::after { width:100%; }
}

/* footer */
#w_footer { margin-bottom: 100px; }
#w_footer .wrap { border-top:1px solid #ddd; }

#w_footer .ft_top { display:flex; border-bottom:1px solid #ddd; }
#w_footer .ft_about { width:50%; padding:30px 0; border-right:1px solid #ddd;}
#w_footer .ft_about h2 { font-family:ptbl; font-size:4rem; color:#fff; }
#w_footer .ft_about p { margin-top:24px; max-width:420px; font-family:str; font-size:1.6rem; line-height:1.6; color:#ddd; }
#w_footer .ft_contact { width:50%; padding:30px 0 30px 20px; }
#w_footer .ft_contact dl + dl { margin-top:24px; }
#w_footer .ft_contact dt { font-family:ptb; font-size:2.4rem; color:#fff; }
#w_footer .ft_contact dd { margin-top:8px; font-family:str; font-size:1.6rem; color:#ddd; }

#w_footer .ft_bot { display:flex; align-items:center; border-bottom:1px solid #ddd; }
#w_footer .ft_office { width:50%; padding:30px 0; border-right:1px solid #ddd;}
#w_footer .ft_office dl { display:flex; align-items:baseline; gap:20px; }
#w_footer .ft_office dl + dl { margin-top:12px; }
#w_footer .ft_office dt { flex-shrink:0; width:120px; padding-bottom:4px; font-family:sth; font-size:1.6rem; color:#ddd; }
#w_footer .ft_office dd { font-family:str; font-size:1.6rem; color:#fff; }

#w_footer .ft_logo { width:50%; padding-left:60px; display:flex; align-items:center; justify-content:space-between; padding:30px 0 30px 20px; }
#w_footer .ft_logo > img { height:34px; }
#w_footer .ft_sns { display:flex; gap:12px; }
#w_footer .ft_sns img { width:37px; height:37px; filter:brightness(0) invert(1); opacity:0.6; transition:opacity 0.3s ease; }
#w_footer .ft_sns a:hover img { opacity:1; }

#w_footer .ft_copy { margin-top:24px; font-family:stb; font-size:1.2rem; color:#999; }

#top_btn { position:fixed; bottom:30px; right:30px; width:56px; height:56px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:3px solid rgba(255,255,255,0.4); background:rgba(0,0,0,0.5); color:#fff; font-size:16px; z-index:90; transition:background 0.3s ease, border-color 0.3s ease; }
#top_btn:hover { border-color:#fff; background:rgba(255,255,255,0.15); color:#fff; }
#top_btn i { margin-bottom:3px; }



/* index */
#main { position: relative; }
#main .mainSlide { width:100%; height:100vh; }
#main .swiper-slide.mainVisual1 {  background-image:url(/images/bg_main1.png); background-position:center;  background-size:cover;}
#main .swiper-slide { position:relative; display:flex; align-items:center; background-color:#161616; background-repeat:no-repeat; background-position:center; background-size:cover; }
#main .swiper-slide::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,0.25); }
#main .swiper-slide .wrap { position:relative; z-index:2; color:#fff;transform:translateY(150px); }
#main .swiper-slide h2 { font-family:ptb; font-size:5rem; line-height:1.2; color:#fff; }
#main .swiper-slide p { margin-top:20px; font-family:ptr; font-size:3rem; color:#fff; }
#main .swiper-pagination { bottom:40px; }
#main .swiper-pagination .swiper-pagination-bullet { background:#fff; opacity:0.5; }
#main .swiper-pagination .swiper-pagination-bullet-active { opacity:1; }
#main .swiper-button-prev, #main .swiper-button-next { color:#fff; }


/* 제품 슬라이드 */
#prdSlide { padding:120px 0; }
#prdSlide h2 { font:36px/1.6 ptb;}
#prdSlide .prdBox { border-top:1px solid #ddd; margin-top: 40px; align-items: stretch; }
#prdSlide .prd { font:36px/1.6 ptb; width: 690px; border-bottom:1px solid #ddd; }
#prdSlide .prd .swiper-slide img { width: auto; height: auto; }
#prdSlide .prd .swiper-slide a { display: block;cursor: pointer;}
#prdSlide .prdInfo { box-sizing: border-box; width: 690px; display: flex; flex-wrap:wrap;}
#prdSlide .prdInfo > li { padding:65px 40px; box-sizing: border-box; width: 50%; border-left:1px solid #ddd; border-bottom:1px solid #ddd;}
#prdSlide .prdInfo .prdName { height: 400px; position: relative; }
#prdSlide .prdInfo .prdName span { position: absolute; left: 40px; bottom: 65px; }
#prdSlide .prdInfo .prdGrh ul { display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
#prdSlide .prdInfo .prdGrh ul div { display: flex; gap:14px; margin-top: 6px; }
#prdSlide .prdInfo .prdGrh ul span { width: 22px; height: 22px; border-radius: 100%; border:3px solid #fff; box-sizing: border-box;}
#prdSlide .prdInfo .prdGrh ul .sel1 span:nth-child(1) { background: #fff; }
#prdSlide .prdInfo .prdGrh ul .sel2 span:nth-child(1),
#prdSlide .prdInfo .prdGrh ul .sel2 span:nth-child(2) { background: #fff; }
#prdSlide .prdInfo .prdGrh ul .sel3 span:nth-child(1),
#prdSlide .prdInfo .prdGrh ul .sel3 span:nth-child(2),
#prdSlide .prdInfo .prdGrh ul .sel3 span:nth-child(3) { background: #fff; }
#prdSlide .prdInfo .prdGrh ul .sel4 span:nth-child(1),
#prdSlide .prdInfo .prdGrh ul .sel4 span:nth-child(2),
#prdSlide .prdInfo .prdGrh ul .sel4 span:nth-child(3),
#prdSlide .prdInfo .prdGrh ul .sel4 span:nth-child(4) { background: #fff; }
#prdSlide .prdInfo .prdGrh ul .sel5 span:nth-child(1),
#prdSlide .prdInfo .prdGrh ul .sel5 span:nth-child(2),
#prdSlide .prdInfo .prdGrh ul .sel5 span:nth-child(3),
#prdSlide .prdInfo .prdGrh ul .sel5 span:nth-child(4),
#prdSlide .prdInfo .prdGrh ul .sel5 span:nth-child(5) { background: #fff; }

#prdSlide .swiper-button-next, #prdSlide .swiper-button-prev { color:#fff;}
#prdSlide .swiper-button-next { right: 65px; }
#prdSlide .swiper-button-prev { left: 65px; }


/* VANADIS Different */
#diffSection { padding:120px 0; }
#diffSection .diffTit h2 { font-family:ptb; font-size:3.6rem; line-height:1.4; }
#diffSection .diffTit .ul { display:inline-block; }

#diffSection .diffBox { display:flex; flex-wrap:wrap; margin-top:40px; border-top:1px solid #ddd; border-bottom:1px solid #ddd; }
#diffSection .diffBox li { box-sizing:border-box; width:33.3333%; padding:70px 40px; text-align:center; border-right:1px solid #ddd; border-bottom:1px solid #ddd; }
#diffSection .diffBox li:nth-child(3n) { border-right:0; }
#diffSection .diffBox li:nth-child(n+4) { border-bottom:0; }
#diffSection .diffBox img { display:block; height:70px; width:auto; margin:0 auto; }
#diffSection .diffBox h3 { margin-top:24px; font-family:steb; font-size:2rem; }
#diffSection .diffBox p { margin-top:10px; font-family:str; font-size:1.6rem; }


/* Enjoy Vanadis */
#enjoySection { padding:120px 0 0; }
#enjoySection h2 { font-family:ptb; font-size:4rem; color:#fff; text-align:center; }

#enjoySection .enjoyVisual { position:relative; margin-top:40px; border-top:1px solid #ddd; border-bottom:1px solid #ddd; }
#enjoySection .enjoyVisual_img { position:relative; width:100%; aspect-ratio:1380/684; background-position:center; background-size:cover; background-repeat:no-repeat; overflow:hidden; }
#enjoySection .enjoyVisual_img .gridLine { position:absolute; top:0; bottom:0; width:1px; background:rgba(255,255,255,0.3); }
#enjoySection .enjoyVisual_img .l1 { left:25%; }
#enjoySection .enjoyVisual_img .l2 { left:50%; }
#enjoySection .enjoyVisual_img .l3 { left:75%; }
#enjoySection .enjoyVisual_img iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

#enjoySection .viewBtn { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; }


.que { padding:200px 0; text-align: center; }


/* sublayout */
.sv .wrap { height: 420px; padding-top: 80px; box-sizing: border-box; }

#sv1 { background:url(/images/bg_sub1.png) no-repeat center/cover; }


/* brand */
#brand .cont1 { display:flex; gap:80px; padding:160px 0; }
#brand .cont1_tit { flex-shrink:0; width:320px; }
#brand .cont1_tit h2 { font-family:steb; font-size:3.6rem; line-height:1.4; }

#brand .cont1_txt { flex:1; }
#brand .cont1_txt p { font-family:stm; font-size:1.8rem; line-height:1.8; }
#brand .cont1_txt p + p { margin-top:40px; }

#brand .cont2 { display:flex; align-items:center; gap:80px; padding-bottom:160px; }
#brand .cont2_txt { flex-shrink:0; width:560px; }
#brand .cont2_txt .quote { display:block; font-family:steb; font-size:5rem; line-height:1; height: 20px; }
#brand .cont2_txt h2 { margin-top:10px; font-family:steb; font-size:5.6rem; line-height:1.3; margin-bottom: 10px; }
#brand .cont2_txt p { margin-top:30px; font-family:str; font-size:1.8rem; line-height:1.6; color:#ddd; }
#brand .cont2_img { flex:1; }
#brand .cont2_img img { display:block; width:100%; height:auto; }

#brand .cont3 { display:flex; gap:80px; padding:160px 0 300px; }
#brand .cont3_tit { flex-shrink:0; width:320px; }
#brand .cont3_tit h2 { font-family:steb; font-size:3.6rem; line-height:1.4; }

#brand .cont3_con { flex:1; }
#brand .cont3_con .quote { padding-bottom:24px; border-bottom:1px solid #ddd; font-family:stm; font-size:2.6rem; line-height:1.5; }

#brand .cont3_icon { display:flex; border-bottom:1px solid #ddd; }
#brand .cont3_icon li { box-sizing:border-box; flex:1; padding:50px 20px; text-align:center; border-right:1px solid #ddd; }
#brand .cont3_icon li:last-child { border-right:0; }
#brand .cont3_icon img { display:block; height:64px; width:auto; margin:0 auto; }
#brand .cont3_icon h3 { margin-top:20px; font-family:steb; font-size:2rem; }
#brand .cont3_icon p { margin-top:8px; font-family:str; font-size:1.6rem; }

#brand .cont3_txt { margin-top:40px; }
#brand .cont3_txt p { font-family:stm; font-size:1.8rem; line-height:2; }
#brand .cont3_txt p + p { margin-top:24px; }

/* product */
#product > div { position: relative; }
#product .cont1 > img { width: 100%; height: 334px; }
#product .cont2 > img { width: 100%; height: 670px; }
#product .cont3 > img { width: 100%; height: 648px; }
#product .cont4 > img { width: 100%; height: 636px; }
#product .cont5 > img { width: 100%; height: 638px; }
#product .cont6 > img { width: 100%; height: 745px; }


#product .cont1 .wrap h2 { position: absolute; left: 0; top: 160px; font:30px ptb; }
#product article { position: absolute; width: 355px; }
#product article p { margin-top: 10px; }
#product article p:after { content:""; width: 30px; height: 1px; background: #fff; display: block; margin-top:30px; margin-bottom: 50px; }
#product article strong, #product article span { display: block; }
#product article span { margin-bottom: 70px; font-family: ptr; }

#product .cont2 article { left: 0; top: 70px; }
#product .cont3 article { right: 0; top: 64px; }
#product .cont4 article { left: 0; top: 70px; }
#product .cont5 article { right: 0; top: 55px; }
#product .cont6 article { left: 0; top: 100px; }


/* detail (product detail) */
#detail .cont1 { padding:270px 0 160px; }
#detail .detailTit h2 { font-family:ptsb; font-size:3rem; }

#detail .detailBox { display:flex; margin-top:100px; border-top:1px solid #ddd; border-bottom:1px solid #ddd; }
#detail .detailImg { flex-shrink:0; width:50%; display:flex; align-items:center; justify-content:center; }

#detail .detailInfo { width: 50%; border-left:1px solid #ddd; }
#detail .detailInfo > div { padding:60px; box-sizing: border-box; }
#detail .detailInfo_top h2 { font-family:steb; font-size:4rem;  }
#detail .detailInfo_top .kr { margin-top:10px; font-family:stsb; font-size:2rem;  }
#detail .detailInfo_top .sub { margin-top:30px; font-family:stm; font-size:1.6rem;  }
#detail .detailInfo_top .desc { margin-top:14px; font-family:str; font-size:1.6rem; line-height:1.7; color:#ddd; }

#detail .detailInfo_mid { border-top:1px solid #ddd; }
#detail .detailInfo_mid dl { display: flex; align-items: center; justify-content: start; }
#detail .detailInfo_mid dt { font-family:str; font-size:1.6rem; color:#999; width: 150px; }
#detail .detailInfo_mid dd { font-family:ptb; font-size:2.4rem;  }
#detail .detailInfo_mid .roast { margin-top: 20px; }

#detail .detailInfo_bot { padding-top:30px; border-top:1px solid #ddd; }
#detail .detailInfo_bot dl { display:flex; align-items:center; justify-content:start; }
#detail .detailInfo_bot dl + dl { margin-top:16px; }
#detail .detailInfo_bot dt { font-family:str; font-size:1.6rem;  width: 150px; }
#detail .detailInfo_bot .gauge { display:flex; gap:8px; }
#detail .detailInfo_bot .gauge span { width:14px; height:14px; border-radius:50%; border:1px solid #fff; box-sizing:border-box; }
#detail .detailInfo_bot .gauge span.on { background:#fff; }

#detail .detailStore { margin-top:80px; text-align:center; }
#detail .storeBtn { display:inline-flex; align-items:center; justify-content:center; gap:6px; width:170px; height:170px; border-radius:50%; border:2px solid #fff; font-family:ptb; font-size:1.6rem;  transition:background 0.3s ease, color 0.3s ease; }
#detail .storeBtn:hover { background:rgba(255,255,255,0.6); color:#000; }

#detail .cont2 img { width: 100%; }
#detail .cont3 { margin-bottom: 200px; }
#detail .cont3 img { width: 100%; }


/* support (contact) */
#support .cont1 {  padding:270px 0 160px; }
#support .cont1_tit h2 { font-family:ptb; font-size:4rem; }
#support .cont1_tit .ul { display:inline-block; }

#support .cont1_txt { margin-top:100px; }
#support .cont1_txt .label { font-family:ptb; font-size:1.8rem; border-bottom:1px solid #ddd; padding-bottom: 20px; }
#support .cont1_txt .desc1 { margin-top:30px; font-family:ptb; font-size:1.6rem; }
#support .cont1_txt .desc2 { margin-top:10px; font-family:stb; font-size:1.6rem; color:#ddd; }

#support .cont1_form { margin-top:60px; }
#support .formRow { display:flex; }
#support .formRow + .formRow { border-top:1px solid #ddd; }
#support .field { display:flex; align-items:center; flex:1; padding:10px 30px; border:1px solid #ddd; border-bottom:none; }
#support .field + .field { border-left:none; }
#support .field label { flex-shrink:0; width:100px; font-family:ptsb; font-size:1.6rem; }
#support .field input { flex:1; min-width:0; background:transparent; border:0; outline:0; font-family:str; font-size:1.6rem; height: 40px; color:#ddd; }
#support .formRow.row2 .field { align-items:flex-start; border:1px solid #ddd; border-top:none; }
#support .formRow.row2 label { padding-top:4px; }
#support .formRow.row2 textarea { flex:1; min-height:220px; background:transparent; border:0; outline:0; resize:none; font-family:str; font-size:1.6rem; line-height:1.6; color:#ddd; padding:6px 0; }
#support .field input:hover,
#support .field textarea:hover { background: #222; }

#support .formBtn { margin-top:60px; text-align:center; }
#support .w_btn { width: 160px; }