@charset "utf-8";




/*header*/
#header{z-index: 200; position: fixed; top: 0; left: 0; width:100%;}
#header .va_wrap,
#header .h_wrap{height:var(--header_H);}
#header #logo{z-index:800;}
#header #logo .a_ver{display:none;}
#header #logo img{display:block;}
#header .gnb_wrap{margin:0 auto;}
#header .gnb_wrap .gnb .depth1{margin:0 30px; position: relative;}
#header .gnb_wrap .gnb .depth1 > a{font-size: 1.125em; line-height: inherit; font-weight:400; color:#fff; position: relative;}
#header .gnb_wrap .gnb .depth1 > ul{background:#fff; min-width: 160px; border: 1px solid #ddd; border-top:0; margin-top:-2px; transition:all .5s; position:absolute; left:50%; transform:translateX(-50%); max-height:0; overflow:hidden; opacity:0 }
#header .gnb_wrap .gnb .depth1 > ul:after{content: ""; position: absolute; left: 0; top: -2px; width: 100%; height:5px; background-color:var(--mainColor); transform: scaleX(0); transition: .3s;}
#header .gnb_wrap .gnb .depth1 > ul > .depth2 a{display: block; text-align: center; color:#444; border-top: 1px dotted #ddd; font-weight:400; padding: 15px 10px;}
#header .gnb_wrap .gnb .depth1 > ul > .depth2 a:hover{background: #f5f5f5;}
#header .gnb_wrap .gnb .depth1:hover ul{ max-height:500px; opacity:1 }
#header .gnb_wrap .gnb .depth1:hover > ul:after{transform: scaleX(1);}

/*검색*/
#header .hd_sch_btn{font-size:1.125em; color:#fff; cursor: pointer;}
#header .hd_sch_btn.on .xi:before{content:'\e921';}
#header .hd_sch_wr #hd_sch{border:1px solid rgba(255,255,255,.8); border-radius: 50px; position: relative; width:240px; overflow: hidden;}
#header .hd_sch_wr #hd_sch #sch_stx{border:0; background:transparent; color:#fff; width:100%; height: 45px; padding:5px 55px 5px 20px; font-size:.95em; box-sizing: border-box;}
#header .hd_sch_wr #hd_sch #sch_stx::placeholder{color:rgba(255,255,255,.8)!important;}
#header .hd_sch_wr #hd_sch button{border:0; background-color:var(--mainColor); width:38px; height: 38px; color:#fff; position: absolute; top:50%; transform: translateY(-50%); right:4px; border-radius: 50%; font-size:.9em;}

/*회원*/
#header .hd_login{margin-left:20px;}
#header .hd_login > li a{color:#fff; margin-left:15px; font-weight: 300;}
#header .hd_login > li:first-child a{margin-left:0px;}
#header .hd_login > li .xi{vertical-align: baseline; margin-right:4px;}

/*전체메뉴버튼*/
#header .btn_gnb{width:30px; height: 30px; position: relative; z-index: 10000; margin-left:25px;}
#header .btn_gnb .a_rd{width:10px; height: 10px; background-color: #fff; border-radius: 50%;}
#header .btn_gnb .a_rd.a1{position: absolute; top: 0; left: 0; transition:.3s;}
#header .btn_gnb .a_rd.a2{position: absolute; top: 0; right: 0; background-color:var(--mainColor)!important; transition:.3s;}
#header .btn_gnb .a_rd.a3{position: absolute; bottom: 0; left: 0; transition:.3s; }
#header .btn_gnb .a_rd.a4{position: absolute; bottom: 0; right: 0; transition:.3s; }

#header .btn_gnb:hover .a_rd.a1,
#header .btn_gnb:hover .a_rd.a4{display:none;}
#header .btn_gnb:hover .a_rd.a2,
#header .btn_gnb:hover .a_rd.a3{width:100%; border-radius: 50px;}

#header .btn_gnb.on .a_rd.a1,
#header .btn_gnb.on .a_rd.a4{display:none;}
#header .btn_gnb.on .a_rd.a2{width:100%; border-radius: 50px;}
#header .btn_gnb.on .a_rd.a3{width:100%; border-radius: 50px; background-color: #666;}

/*스크롤 header*/
.scroll #header{background-color:#fff; border-bottom:1px solid #ddd;}
.scroll #header .gnb_wrap .gnb .depth1 > a{color:#222;}
.scroll #header .hd_sch_btn{color:#555;}
.scroll #header .hd_sch_wr #hd_sch{border-color:#ccc;}
.scroll #header .hd_sch_wr #hd_sch #sch_stx{color:#555;}
.scroll #header .hd_sch_wr #hd_sch #sch_stx::placeholder{color:#aaa!important;}
.scroll #header .hd_login > li a{color:#555;}
.scroll #header .btn_gnb .a_rd{background-color:#666;}


/*탑버튼*/
.qk_list{position:fixed; bottom:15px; right:15px; z-index: 800;}
.qk_list > li a{display:block; width:50px; height: 50px; line-height: 50px; border-radius: 50%; font-size:1.25em; text-align: center; margin-top:3px; transition: .3s;}
.qk_list > li a:hover{box-shadow: 3px 3px 7px rgba(0,0,0,0.15);}
.qk_list > li.top_btn a{background-color:#333; color:#fff;}
.qk_list > li.kakao_btn a{background-color:#fae100; color:#3c1e1e;}
.qk_list > li.blog_btn a{background-color:#03c75a; color:#fff;}
.qk_list > li.ins_btn a{background-image: linear-gradient(120deg, #574dc0, #c93b99, #ff942a); color: #fff;}
.qk_list > li.you_btn a{background-color: #ff0033; color: #fff;} 

/*footer*/
#footer{background-color:#111; padding:45px 0 25px; margin-top:8em;}
#footer .f_menu{margin-bottom:20px;}
#footer .f_menu > li a{color:#fff; opacity: .7; margin-right:30px;}
#footer .f_menu > li a:hover{opacity: .9;}
#footer .f_menu > li:last-child a{margin-right:0px;}
#footer .f_info > li{color:#fff; opacity: .6; font-weight: 300; margin-right:30px; font-size:.938em;}
#footer .f_copy{font-size:.875em; color:#fff; opacity: .4; margin-top:20px; letter-spacing: 1px; font-weight: 200;}

#footer .f_site{width:180px; position: relative; margin-left:auto;}
#footer .f_site .f_site_btn{width:100%; color:#999; padding:10px 20px; cursor: pointer; border:1px solid #aaa; text-align: center;}
#footer .f_site .f_site_btn .xi{vertical-align: middle; margin-left:10px;}
#footer .f_site .f_site_list{width:100%; background-color: #444; padding:3px 10px; max-height: 150px; overflow-y: scroll; position: absolute; top:60px; left: 0; display: none; z-index: 5;}
#footer .f_site .f_site_list.on{display:block;}
#footer .f_site .f_site_list > li a{ color:#bbb; padding:10px 0; border-bottom:1px dotted #888; display:block; font-size:.938em;}
#footer .f_site .f_site_list > li a:hover{ color:#eee;}
#footer .f_site .f_site_list > li:last-child a{border-bottom:none;}
#footer .f_site .f_site_list::-webkit-scrollbar{width:3px;}
#footer .f_site .f_site_list::-webkit-scrollbar-thumb{background-color: #999; border-radius: 5px;}
#footer .f_site .f_site_list::-webkit-scrollbar-track{}


/*서브 비주얼*/
.sub_v_wrap{position: relative;}
#sub_visual{height:430px; position: relative; overflow: hidden;}
#sub_visual .bgfix{position:absolute; top: 0; left:0; width:100%; height: 100%; transform: scale(1.15); transition-timing-function: ease-in-out; transition: 1s;}
#sub_visual .sub_v_tit{ font-weight: 700; text-align:center; font-size:3.625em; color:#fff; position: relative; z-index: 10; margin-right:3em; opacity:0; transition:1s;}
.load #sub_visual .bgfix{transform: scale(1);}
.load #sub_visual .sub_v_tit{margin-right:0; opacity:1}

#sub_visual.sub10 .bgfix{background-image:url(../img/sub/sub_v_01.jpg);}
#sub_visual.sub20 .bgfix{background-image:url(../img/sub/sub_v_02.jpg);}
#sub_visual.sub30 .bgfix{background-image:url(../img/sub/sub_v_02.jpg);}
#sub_visual.sub40 .bgfix{background-image:url(../img/sub/sub_v_02.jpg);}
#sub_visual.sub50 .bgfix{background-image:url(../img/sub/sub_v_02.jpg);}
#sub_visual.sub60 .bgfix{background-image:url(../img/sub/sub_v_02.jpg);}
#sub_visual.sub70 .bgfix{background-image:url(../img/sub/sub_v_03.jpg);}
#sub_visual.sub80 .bgfix{background-image:url(../img/sub/sub_v_04.jpg);}
#sub_visual.sub90 .bgfix{background-image:url(../img/sub/sub_v_05.jpg);}
 
/*snb*/
#snb { position: absolute; bottom:0; left:50%; transform: translateX(-50%); z-index: 10; width:96%;}
#snb .sdp_list{ width:100%;}
#snb .sdp_list > li {flex:1 1 0; max-width:20%; position: relative;}
#snb .sdp_list > li.on:before{content:''; width:30px; height:30px; background-image: url(../img/sub/bor_r.svg); background-size:contain; background-repeat:no-repeat; position: absolute; bottom:-2px; left:-28px; transform: rotate(90deg);}
#snb .sdp_list > li.on:after{content:''; width:30px; height:30px; background-image: url(../img/sub/bor_r.svg); background-size:contain; background-repeat:no-repeat; position: absolute; bottom:-2px; right:-28px; transform: rotate(180deg);}
#snb .sdp_list > li .va_wrap{height:65px; background-color: rgba(255,255,255,.3); border-radius: 20px 20px 0 0; font-size: 1.0625em; color:#fff; transition:.3s;}
#snb .sdp_list > li.on .va_wrap{background-color: rgba(255,255,255,1); color:#111;}
#snb .sdp_list > li:not(.on) .va_wrap:hover{background-color: rgba(255,255,255,.5);}

/*컨텐츠 페이지*/
.ctt_admin{display:none;}/*관리자 내용수정 버튼*/
#ctt header{display:none;}/*컨텐츠 페이지 타이틀 header*/

/*컨텐츠 타이틀*/
.container_title{font-weight: 200; font-size: 2.125em; padding-top: 35px; margin: 55px 0; text-align: center; position: relative;}
.container_title:before{content:''; width:1px; height: 26px; visibility: hidden; transition: .8s; transition-timing-function: ease-in-out; transform: scaleY(0); transform-origin: left top; background: #222; position: absolute; top: 0; left: 50%;}
.load .container_title:before{transform: scaleY(1); visibility: visible;} 

/*개인정보&이용약관*/
.agree_box{ border:1px solid #ddd; background:#f9f9f9; border-radius:5px}
.agree_box .in_con{  padding:2em; border:1px solid #ededed; margin:1em; background:#fff;}
.agree_box .in_con .agree_wrap{ font-size: .938em;}
.agree_box .in_con .agree_wrap span{ display: block;}


/*=================================================================main============================================================*/

/*메인 비주얼*/
.mainSlider{position:relative;}
.mainSlider .el{ height:100vh; position:relative; overflow:hidden}
.mainSlider .el .bg{ position:absolute; left:0; top:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; transform:scale(1.2,1.2); transition-delay:1s}
.mainSlider .slogan{ position:absolute; top:50%; left:50%; transform: translate(-50%, -60%); color:#fff;}
.mainSlider .slogan .t1{ font-size:3.875em; display:block; transform:translateY(1em); font-weight: 800; opacity:0; margin-bottom: 5px; line-height: 1.2;}
.mainSlider .slogan .t2{ font-size:1.75em; font-weight: 500; transform:translateY(1em); opacity:0; line-height: 1.5; margin-top:40px;}
.mainSlider .slogan .t3{ font-size:1.25em; font-weight: 300; transform:translateY(1em); opacity:0; line-height: 1.5; margin-top:30px;}
.mainSlider .el.swiper-slide-active .bg{ transform:scale(1); transition:2s; transition-delay:0; transition-timing-function:ease-in}
.mainSlider .el.swiper-slide-active .slogan .t1{ transform:translateY(0); opacity:1; transition:1s; transition-delay:.5s}
.mainSlider .el.swiper-slide-active .slogan .t2{ transform:translateY(0); opacity:1; transition:1s; transition-delay:1s}
.mainSlider .el.swiper-slide-active .slogan .t3{ transform:translateY(0); opacity:.8; transition:1s; transition-delay:1.5s}

.mainSlider .mainSlider-pagination{ position: absolute; left:50%; bottom:3em; transform: translateX(-50%); z-index: 100;}
.mainSlider .mainSlider-pagination .swiper-pagination-bullet{width:120px; height:auto; margin: 0 20px 0 0; border-radius: 0; opacity: .4; background:transparent; color:#fff; border-bottom:2px solid #fff; padding-bottom:5px;}
.mainSlider .mainSlider-pagination .swiper-pagination-bullet-active{opacity: 1;}
.scroll_wrap{position: absolute; bottom: 0; left:0;width:100%; z-index: 10;}
.scroll_wrap .mainSlide_scroll{ color: #fff; font-size: 0.85em; text-align: center; letter-spacing: 4px; font-weight: 200;}
.scroll_wrap .mainSlide_scroll_bar{ width: 1px; height: 35px; background: #fff; margin: 5px auto 0; position: relative;}
.scroll_wrap .scroll_bar {width:5px; height: 5px; background: #fff; animation: box-ani 2s linear infinite backwards; margin-left:-5px; border-radius: 50%;}

@keyframes box-ani { 
0% {transform: translate(50%, 0);} 
100% {transform: translate(50%, 53px);}
}


/*메인 샘플용 css*/
.main_section{padding:7em 0;}
.main_section_bg{background-color: #f9f9f9;}
.main_tit{ margin-bottom: 30px;}
.main_tit .in_en{ font-size:1.375em; margin-bottom: 10px;}
.main_tit .in_tt{ font-size:2.437em; color:#111; line-height: 1.3;}
.main_more{text-align:center;}
.main_more a{display: inline-block; padding:13px 50px; border:1px solid #ccc; transition: .3s; color:#888; font-size:1.125em; border-radius: 50px; margin-top: 40px;}.main_more a:hover{border-color:var(--maincolor); background-color:var(--mainColor); color:#fff;}
.map_box .in_map{width:calc(100% - 370px);}
.map_box .in_map .wrap_map{border-bottom:1px solid #ddd;}
.map_box .in_map .root_daum_roughmap .wrap_controllers{display:none;}
.map_box .in_info{width:370px; padding-left:25px;}
.map_box .in_info .info_box{border:1px solid #ddd; padding:50px 40px; height: 100%;}
.map_box .in_info .info_box .icon{font-size:3em; color:#ddd; line-height: 1;}
.map_box .in_info .info_box .tt{font-size:1.5em; font-weight: 600; color:#222; margin-top:5px;}
.map_box .in_info .info_box .line{width:30px; height: 1px; background-color:var(--mainColor); margin:30px 0; }
.map_box .in_info .info_box .info_list > li{margin-bottom:13px; line-height: 1.5; color: #444; font-size:1.068em;}
.map_box .in_info .info_box .info_list > li:last-child{margin-bottom:0px;}


/**/
.tab_idx{ margin:-1em 0 3em -1em;}
.tab_idx > li{flex:1 20%;}
.tab_idx > li > a{ padding:0 .5em; height:4em; border:1px solid #ddd; margin:1em 0 0 1em; color:#666; transition:.3s;}
.tab_idx > li > a .va{font-size:1.068em; font-weight:500}
.tab_idx > li > a:hover,
.tab_idx > li.on > a{ box-shadow:0 0 1em .125em rgba(0,0,0,.1); color:var(--mainColor); border-color:var(--mainColor)}

/**/
.nm_page_tt{font-size:1.5em; text-align: center; margin:80px auto 30px;}
.nm_page_tt .nmb{width:50px; height: 50px; line-height: 50px; border-radius: 50%; background-color: var(--mainColor); display: inline-block; color:#fff; margin-right:5px;}
.page_tt{font-size:1.825em; font-weight: 600;}
.page_stt{font-size:1.45em; font-weight: 600;}
.page_tx{font-size:1.125em; font-weight: 300;}
.page_stx{font-size:1em; font-weight: 300;}

/*=================================================================회사소개(인사말) : im/greeting.html 콘텐츠============================================================*/

/* 인사말 공통 타이틀 */
.greeting_intro .main_tit{ text-align:center; margin-bottom:0}
.greeting_intro .main_tit .in_tt{ font-size:1em; letter-spacing:3px; color:var(--mainColor); font-weight:600; margin-bottom:16px}
.greeting_intro .main_tit .in_tx{ font-size:2.5em; font-weight:700; color:#2b2118; line-height:1.3}
.greeting_intro .main_tit .in_tw{ font-size:1.125em; line-height:1.8; color:#5c4a38; margin-top:30px}

/* 스크롤 리빌 */
.greeting_intro.reveal,
.greeting_value.reveal{ opacity:0; transform:translateY(40px); transition:opacity .8s ease, transform .8s ease; animation:revealFailSafe .01s linear 3s forwards}
.greeting_intro.reveal.active,
.greeting_value.reveal.active{ opacity:1; transform:translateY(0); animation:none}

/* greeting_intro : 인사말 도입부 */
.greeting_intro{ padding:140px 0 100px}
.greeting_intro .box1{ width:1400px; max-width:92%}
.greeting_intro .greeting_intro_top{ gap:60px}
.greeting_intro .greeting_intro_img{ width:44%; height:620px; border-radius:var(--item_r); overflow:hidden; background-image:url('../img/main/greeting_img.jpg'); box-shadow:0 30px 60px rgba(43,33,24,0.12); transition:transform .4s ease, box-shadow .4s ease}
.greeting_intro .greeting_intro_img:hover{ transform:translateY(-6px); box-shadow:0 40px 70px rgba(43,33,24,0.18)}
.greeting_intro .greeting_intro_txt{ width:50%}
.greeting_intro .greeting_intro_txt .main_tit{ text-align:left}
.greeting_intro .greeting_intro_list{ margin-top:44px; border-top:1px solid #e6ddd0}
.greeting_intro .greeting_intro_list li{ width:100%; display:flex; align-items:center; gap:18px; padding-top:24px; margin-bottom:24px}
.greeting_intro .greeting_intro_num{ font-size:1.75em; font-weight:700; color:var(--subColor); flex-shrink:0}
.greeting_intro .greeting_intro_tx{ font-size:1.125em; font-weight:600; color:#2b2118}

/* greeting_value : 자연/건강/미소 가치 카드 */
.greeting_value{}
.greeting_value .box1{ width:1400px; max-width:92%}
.greeting_value .greeting_value_list li{ width:32%; padding:50px 36px; background:var(--bgColor02); border-radius:var(--item_r); text-align:center; transition:transform .4s ease, box-shadow .4s ease}
.greeting_value .greeting_value_list li:hover{ transform:translateY(-8px); box-shadow:0 24px 40px rgba(43,33,24,0.1)}
.greeting_value .greeting_value_icon{ display:flex; align-items:center; justify-content:center; width:72px; height:72px; margin:0 auto 24px; border-radius:50%; background:var(--subColor); font-size:1.75em; color:var(--mainColor)}
.greeting_value .greeting_value_tit{ font-size:1.375em; font-weight:700; color:#2b2118; margin-bottom:16px}
.greeting_value .greeting_value_desc{ font-size:1em; line-height:1.8; color:#5c4a38}


/*=================================================================오시는길 : im/location.html 콘텐츠============================================================*/

/* 오시는길 공통 타이틀 */
.location_info .main_tit{ text-align:center; margin-bottom:0}
.location_info .main_tit .in_tt{ font-size:1em; letter-spacing:3px; color:var(--mainColor); font-weight:600; margin-bottom:16px}
.location_info .main_tit .in_tx{ font-size:2.5em; font-weight:700; color:#2b2118; line-height:1.3}

/* 스크롤 리빌 */
.location_map.reveal,
.location_info.reveal{ opacity:0; transform:translateY(40px); transition:opacity .8s ease, transform .8s ease; animation:revealFailSafe .01s linear 3s forwards}
.location_map.reveal.active,
.location_info.reveal.active{ opacity:1; transform:translateY(0); animation:none}

/* location_summary : 주소 요약 바 */
.location_summary{ background:var(--bgColor02); padding:36px 0}
.location_summary .box1{ width:1400px; max-width:92%}
.location_summary .location_summary_list{ gap:20px 0}
.location_summary .location_summary_item{ display:flex; align-items:center; gap:14px; width:33.33%}
.location_summary .location_summary_ic{ display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; background:#fff; color:var(--mainColor); font-size:1.25em; flex-shrink:0}
.location_summary .location_summary_tt{ font-size:.875em; color:#9a8368; letter-spacing:.5px; margin-bottom:4px}
.location_summary .location_summary_tx{ font-size:1.125em; font-weight:600; color:#2b2118}

/* location_map : 카카오(다음) 지도 영역 */
.location_map{ padding:80px 0}
.location_map .box1{ width:1400px; max-width:92%}
.location_map .location_map_box{ position:relative; width:100%; height:520px; border-radius:var(--item_r); overflow:hidden; background:#eee7db; box-shadow:0 20px 40px rgba(43,33,24,0.08)}
/* 다음(카카오) 로드맵을 컨테이너에 꽉 채움 */
.location_map .location_map_box .root_daum_roughmap{ width:100% !important; height:100% !important; margin:0 !important}
.location_map .location_map_box .root_daum_roughmap .wrap_map{ width:100% !important; height:100% !important}
.location_map .location_map_box .root_daum_roughmap .wrap_map > .map{ width:100% !important; height:100% !important}
.location_map .location_map_box .root_daum_roughmap .wrap_controllers{ display:none !important}
/* 미리보기 플레이스홀더(지도 미연동 시) */
.location_map .location_map_ph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#a99a86}
.location_map .location_map_ph .ico{ width:2.5em; height:2.5em; margin-bottom:16px}
.location_map .location_map_ph p{ font-size:1.125em; font-weight:600}
.location_map .location_map_ph span{ display:block; font-size:.9375em; margin-top:8px; color:#bcae9b}

/* location_info : 교통 안내 */
.location_info{ }
.location_info .box1{ width:1400px; max-width:92%}
.location_info .location_info_list{ margin-top:56px}
.location_info .location_info_list li{ width:32%; padding:44px 32px; border:1px solid #ece3d4; border-radius:var(--item_r); transition:transform .4s ease, box-shadow .4s ease, border-color .4s ease}
.location_info .location_info_list li:hover{ transform:translateY(-8px); box-shadow:0 24px 40px rgba(43,33,24,0.1); border-color:transparent}
.location_info .location_info_icon{ display:flex; align-items:center; justify-content:center; width:64px; height:64px; margin-bottom:24px; border-radius:50%; background:var(--subColor); color:var(--mainColor); font-size:1.625em}
.location_info .location_info_tit{ font-size:1.25em; font-weight:700; color:#2b2118; margin-bottom:14px}
.location_info .location_info_desc{ font-size:1em; line-height:1.9; color:#5c4a38}
.location_info .location_info_desc b{ color:var(--mainColor); font-weight:600}


/*=========================================================================
   메인(홈) 디자인 : im/main1.html 기준  (구 main1.css — style.css로 통합)
   ========================================================================= */
/* =========================================================================
   메인(홈) 디자인 : im/main1.html 기준
   - 헤더/푸터/퀵버튼 : 전역 (.site_header / .site_footer / .site_quick)
   - 메인 섹션        : body.main 스코프 (.visual / .about / .product / .location)
   ========================================================================= */

:root{
    --mainColor:#b36b45;
    --subColor:#e9ddc6;
    --accentColor:#7c8465;
    --bgColor:#f9f9f9;
    --bgColor02:#f7f4ef;
    --item_r:20px;
    --header_H:80px;
}

/* box1 폭을 메인 디자인 기준(1400)으로 */
.site_header .box1,
.all_menu .all_menu_topbar .box1,
.all_menu .all_menu_inner,
.site_footer .box1,
body.main .box1{ width:1400px; max-width:92%; }

/* 전체메뉴 열림 시 스크롤 잠금 (main1.html 동일) */
body.hidden{ overflow-y:hidden; }

/* 공통 아이콘(svg) */
.ico{ width:1em; height:1em; display:inline-block; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* 공통 타이틀 */
body.main .main_tit{ text-align:center; margin-bottom:0}
body.main .main_tit .in_tt{ font-size:1em; letter-spacing:3px; color:var(--mainColor); font-weight:600; margin-bottom:16px}
body.main .main_tit .in_tx{ font-size:2.5em; font-weight:700; color:#2b2118; line-height:1.3}
body.main .main_tit .in_tw{ font-size:1.125em; line-height:1.8; color:#5c4a38; margin-top:30px}

/* 공통 버튼 */
body.main .more_btn{ display:inline-flex; align-items:center; gap:10px; font-size:1em; color:#2b2118; font-weight:500; letter-spacing:1px; margin-top:40px; transition:gap .25s ease}
body.main .more_btn .more_btn_ic{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid #2b2118; border-radius:50%; font-size:1em; transition:background .25s ease, color .25s ease, transform .25s ease}
body.main .more_btn:hover{ gap:16px}
body.main .more_btn:hover .more_btn_ic{ background:#2b2118; color:#fff; transform:translateX(3px)}

/* 스크롤 리빌 */
body.main .reveal{ opacity:0; transform:translateY(40px); transition:opacity .8s ease, transform .8s ease; animation:revealFailSafe .01s linear 3s forwards}
body.main .reveal.active{ opacity:1; transform:translateY(0); animation:none}
/* JS(IntersectionObserver/Swiper) 미동작 시 3초 후 무조건 노출 - 네이버 등 인앱브라우저 대비 */
@keyframes revealFailSafe{ to{ opacity:1; transform:none} }

body.main{ background:#fff; color:#2b2118}

/* =============================== header =============================== */
.site_header{ position:fixed; top:0; left:0; width:100%; height:var(--header_H); background:#fff; z-index:1000; box-shadow:0 2px 10px rgba(0,0,0,0.04)}
.site_header .box1{ height:var(--header_H); margin:0 auto; position:relative}
.site_header #logo{ display:flex; align-items:center; height:var(--header_H); z-index:800}
.site_header #logo a{ display:flex; align-items:center}
.site_header #logo .b_ver{ display:none}
.site_header #logo img{ display:block; max-height:40px; width:auto}
.site_header .sh_gnb ul{ gap:56px}
.site_header .sh_gnb a{ font-size:1.125em; font-weight:500; color:#2b2118; letter-spacing:1px; position:relative; display:block; line-height:var(--header_H)}
.site_header .sh_gnb a::after{ content:''; position:absolute; left:0; bottom:22px; width:0; height:2px; background:var(--mainColor); transition:width .25s ease}
.site_header .sh_gnb a:hover::after{ width:100%}
.site_header .sh_menu_btn{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:44px; height:44px; margin-left:24px; padding:0; background:var(--mainColor); border:none; border-radius:50%; transition:background .3s ease, transform .3s ease}
.site_header .sh_menu_btn:hover{ transform:translateY(-2px)}
.site_header .sh_menu_btn span{ display:block; width:18px; height:1px; border-radius:2px; background:#fff; transition:transform .3s ease, opacity .3s ease}
.site_header .sh_menu_btn.active{ background:#2b2118}
.site_header .sh_menu_btn.active span:nth-child(1){ transform:translateY(7px) rotate(45deg)}
.site_header .sh_menu_btn.active span:nth-child(2){ opacity:0}
.site_header .sh_menu_btn.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg)}

/* 전체메뉴 오버레이 (im/main1.html .all_menu 동일) */
.all_menu{ position:fixed; inset:0; z-index:1100; background:rgba(20,16,10,0.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity 0.4s ease, visibility 0.4s ease}
.all_menu.open{ opacity:1; visibility:visible}
.all_menu .all_menu_topbar{ position:absolute; top:0; left:0; width:100%; height:var(--header_H)}
.all_menu .all_menu_topbar .box1{ height:100%; display:flex; align-items:center; justify-content:flex-end}
.all_menu .all_menu_close{ position:static; width:44px; height:44px; border-radius:50%; border:none; background:var(--subColor); color:var(--mainColor); display:flex; align-items:center; justify-content:center; font-size:1.25em; transition:background 0.25s ease, color 0.25s ease, transform 0.4s ease}
.all_menu .all_menu_close:hover{ background:var(--mainColor); color:#fff; transform:rotate(90deg)}
.all_menu .all_menu_inner{ display:flex; justify-content:space-between; align-items:center; text-align:left}
.all_menu .all_menu_divider{ width:1px; align-self:stretch; background:rgba(255,255,255,0.18); margin:0 50px}
.all_menu .all_menu_cols{ display:flex; flex-direction:column; gap:80px; opacity:0; transform:translateY(20px); transition:opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s}
.all_menu.open .all_menu_cols{ opacity:1; transform:translateY(0)}
.all_menu .all_menu_col_tit{ font-size:1.375em; letter-spacing:1px; color:var(--mainColor); font-weight:700; margin-bottom:28px}
.all_menu .all_menu_col ul{ display:flex; flex-direction:row; flex-wrap:wrap; gap:16px 28px}
.all_menu .all_menu_col a{ font-size:1.0625em; font-weight:500; color:rgba(255,255,255,0.85); letter-spacing:0.3px; transition:color 0.25s ease}
.all_menu .all_menu_col a:hover{ color:var(--mainColor)}
.all_menu .all_menu_side{ text-align:right; max-width:360px; opacity:0; transform:translateY(20px); transition:opacity 0.5s ease 0.25s, transform 0.5s ease 0.25s}
.all_menu.open .all_menu_side{ opacity:1; transform:translateY(0)}
.all_menu .all_menu_contact .cs_address{ font-size:0.9375em; color:rgba(255,255,255,0.45); margin-bottom:14px}
.all_menu .all_menu_brand{ font-size:2.375em; font-weight:700; color:#fff; letter-spacing:1px}
.all_menu .all_menu_tagline{ font-size:1.125em; color:rgba(255,255,255,0.5); line-height:1.7; margin-top:16px}
.all_menu .all_menu_contact{ margin-top:34px}
.all_menu .all_menu_contact .cs_num{ display:flex; align-items:center; justify-content:flex-end; gap:8px; font-size:1.5em; font-weight:700; color:#fff}
.all_menu .all_menu_contact .cs_num .ico{ color:var(--mainColor)}
.all_menu .all_menu_contact .cs_num .xi{ color:var(--mainColor); font-size:.85em; line-height:1}
.all_menu .all_menu_contact .cs_time{ font-size:1.125em; color:rgba(255,255,255,0.5); margin-top:8px}

/* =============================== quick =============================== */
.site_quick{ position:fixed; right:30px; bottom:30px; z-index:900; display:flex; flex-direction:column; align-items:flex-end; gap:10px}
.site_quick .sq_call{ position:relative; display:flex; flex-direction:column; align-items:center; width:140px; padding:26px 12px 20px; background:linear-gradient(180deg,#fff 0%,#fbf6ee 100%); border:1px solid rgba(138,106,73,0.2); border-radius:var(--item_r); box-shadow:0 16px 30px rgba(43,33,24,0.14); text-align:center; transition:transform .3s ease, box-shadow .3s ease}
.site_quick .sq_call.hidden{ display:none}
.site_quick .sq_call:hover{ transform:translateY(-4px); box-shadow:0 22px 38px rgba(43,33,24,0.2)}
.site_quick .sq_call_close{ position:absolute; top:8px; right:8px; width:20px; height:20px; padding:0; background:none; border:none; color:#b4a184}
.site_quick .sq_call_close .ico{ width:.875em; height:.875em}
.site_quick .sq_call_close:hover{ color:var(--mainColor)}
.site_quick .sq_call_label{ font-size:1em; font-weight:700; color:var(--accentColor); margin-bottom:12px}
.site_quick .sq_call_icon{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:var(--subColor); margin-bottom:12px; animation:sqIconPulse 2.2s ease-out infinite}
.site_quick .sq_call_icon .ico{ width:1.25em; height:1.25em; color:var(--mainColor)}
.site_quick .sq_call_icon .xi{ font-size:1.25em; line-height:1; color:var(--mainColor)}
.site_quick .sq_call_toggle .xi{ font-size:1.25em; line-height:1}
@keyframes sqIconPulse{ 0%{ box-shadow:0 0 0 0 rgba(179,107,69,0.45)} 70%{ box-shadow:0 0 0 14px rgba(179,107,69,0)} 100%{ box-shadow:0 0 0 0 rgba(179,107,69,0)} }
.site_quick .sq_call .strong{ font-size:1.15em; font-weight:800; color:#2b2118; white-space:nowrap; letter-spacing:-.5px}
.site_quick .sq_call_line{ display:block; width:24px; height:1px; background:rgba(138,106,73,0.3); margin:12px 0}
.site_quick .sq_call_time{ font-size:.95em; line-height:1.4; color:#9a8368}
.site_quick .sq_item{ display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; background:rgba(138,106,73,0.85); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); font-size:1.25em; color:#fff; transition:transform .25s ease, background .25s ease; border:none}
.site_quick .sq_item:hover{ background:#2b2118; color:#fff; transform:translateY(-4px)}
.site_quick .sq_item .xi{ line-height:1}
.site_quick .sq_call_toggle{ display:none}
.site_quick .sq_call_toggle.show{ display:flex}


/* =============================== visual =============================== */
body.main .visual{ position:relative; width:100%; height:100vh; overflow:hidden}
body.main .visual .visual_bg{ position:absolute; inset:0; background-position:center; background-repeat:no-repeat; background-size:cover}
body.main .visual .visual_bg::after{ content:''; position:absolute; inset:0; background:#111; opacity:.28}
body.main .visual .swiper-container,
body.main .visual .swiper-wrapper,
body.main .visual .swiper-slide{ height:100%}
body.main .visual .swiper-slide{ position:relative}
body.main .visual .visual_slide_bg{ position:absolute; inset:0; background-position:center; background-repeat:no-repeat; background-size:cover; transform:scale(1.12); transition:transform 5s ease}
body.main .visual .swiper-slide-active .visual_slide_bg{ transform:scale(1)}
body.main .visual .visual_slide_bg::after{ content:''; position:absolute; inset:0; background:#111; opacity:.3}
body.main .visual .visual_arrow{ position:absolute; top:50%; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; width:62px; height:62px; border:1px solid rgba(255,255,255,0.8); border-radius:50%; font-size:1.5em; color:#fff; z-index:10; background:transparent; transition:background .25s ease, color .25s ease}
body.main .visual .visual_arrow:hover{ background:#fff; color:#2b2118}
body.main .visual .visual_arrow.prev{ left:6%}
body.main .visual .visual_arrow.next{ right:6%}
body.main .visual .visual_tit{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; z-index:5; width:100%; padding:0 20px}
body.main .visual .visual_sub{ font-size:1.25em; letter-spacing:6px; color:#fff; margin-bottom:20px; font-weight:300; opacity:0; animation:visualFadeUp .9s ease forwards .3s}
body.main .visual .visual_tt{ font-size:3.25em; font-weight:600; color:#fff; letter-spacing:1px; opacity:0; animation:visualFadeUp .9s ease forwards .55s; line-height:1.25}
body.main .visual .visual_line{ display:inline-block; width:0; height:2px; background:#fff; margin-top:30px; animation:visualLineGrow .7s ease forwards .85s}
body.main .visual .visual_tt2{ font-size:1.375em; font-weight:400; color:#fff; margin-top:28px; opacity:0; animation:visualFadeUp .9s ease forwards 1.05s; line-height:1.6}
@keyframes visualFadeUp{ from{ opacity:0; transform:translateY(24px)} to{ opacity:1; transform:translateY(0)} }
@keyframes visualLineGrow{ from{ width:0} to{ width:80px} }
body.main .visual .visual_scroll{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%); text-align:center; z-index:5}
body.main .visual .visual_scroll p{ font-size:.875em; letter-spacing:2px; color:#ddd; margin-bottom:8px}
body.main .visual .visual_scroll .ico,
body.main .visual .visual_scroll .xi{ display:block; margin:0 auto; font-size:1.25em; line-height:1; color:#ddd; animation:visualScrollMove 1.6s ease-in-out infinite}
@keyframes visualScrollMove{ 0%{ transform:translateY(0); opacity:1} 50%{ transform:translateY(8px); opacity:.4} 100%{ transform:translateY(0); opacity:1} }

/* =============================== about =============================== */
body.main .about{ padding:140px 0}
body.main .about .about_txt{ width:44%}
body.main .about .about_txt .main_tit{ text-align:left}
body.main .about .about_txt .main_tit .in_tw{ margin-top:26px}
body.main .about .about_img{ width:48%; height:560px; border-radius:var(--item_r); overflow:hidden; background-position:center; background-repeat:no-repeat; background-size:cover; box-shadow:0 30px 60px rgba(43,33,24,0.12); transition:transform .4s ease, box-shadow .4s ease}
body.main .about .about_img:hover{ transform:translateY(-6px); box-shadow:0 40px 70px rgba(43,33,24,0.18)}

/* =============================== product =============================== */
body.main .product{ padding:130px 0 140px; background:var(--bgColor)}
body.main .product .main_tit .in_tw .hl{ position:relative; color:var(--mainColor); font-weight:700}
body.main .product .main_tit .in_tw .hl::after{ content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--mainColor); transition:width .6s ease .4s}
body.main .product.reveal.active .main_tit .in_tw .hl::after{ width:100%}
body.main .product .product_tab{ gap:50px; margin:30px 0 50px; flex-wrap:wrap}
body.main .product .product_tab li a{ font-size:1.125em; font-weight:500; color:#999; padding-bottom:12px; display:inline-block; transition:color .25s ease; cursor:pointer}
body.main .product .product_tab li a:hover{ color:var(--mainColor)}
body.main .product .product_tab li.on a{ color:var(--mainColor); border-bottom:2px solid var(--mainColor)}
/* space-between(.flex.space) 대신 고정 컬럼 간격 → 개수와 무관하게 왼쪽부터 순서대로 정렬, 여백 유지 */
body.main .product .product_list{ gap:20px 2%; justify-content:flex-start}
body.main .product .product_list li{ width:23.5%; margin-bottom:40px}   /* 23.5*4 + 2*3 = 100 */
body.main .product .product_list li a{ display:block}
body.main .product .product_img{ position:relative; width:100%; height:300px; border-radius:var(--item_r); background:var(--subColor); display:flex; align-items:center; justify-content:center; margin-bottom:18px; overflow:hidden; transition:transform .4s ease, box-shadow .4s ease}
body.main .product .product_thumb{ transition:transform .4s ease; width:100%; height:100%}
body.main .product .product_thumb img{ width:100%; height:100%; object-fit:cover; object-position:center}
body.main .product .product_no_img{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:var(--mainColor); font-size:.95em; letter-spacing:1px}
body.main .product .product_view{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(20,16,10,0.32); opacity:0; transition:opacity .35s ease}
body.main .product .product_view .view_circle{ display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,0.95); color:#2b2118; font-size:1.375em; transform:scale(.5); transition:transform .35s ease}
body.main .product .product_badge{ position:absolute; top:16px; left:16px; z-index:2; padding:6px 12px; background:rgba(255,255,255,0.7); color:var(--accentColor); font-size:.875em; font-weight:600; letter-spacing:.5px; border-radius:20px; box-shadow:0 4px 10px rgba(43,33,24,0.12)}
body.main .product .product_list li:hover .product_img{ transform:translateY(-8px); box-shadow:0 24px 40px rgba(43,33,24,0.14)}
body.main .product .product_list li:hover .product_thumb{ transform:scale(1.06)}
body.main .product .product_list li:hover .product_view{ opacity:1}
body.main .product .product_list li:hover .product_view .view_circle{ transform:scale(1)}
body.main .product .product_list li:hover .product_name{ color:var(--mainColor)}
body.main .product .product_name{ font-size:1.125em; font-weight:600; color:#2b2118; text-align:center; transition:color .3s ease}
body.main .product .product_spec{ font-size:.875em; color:#9a8368; text-align:center; margin-top:6px}
body.main .product .product_price{ font-size:1.0625em; font-weight:600; color:#9a8368; text-align:center; margin-top:6px}
body.main .product .product_price.has_price{ font-weight:700; color:var(--mainColor)}
body.main .product .product_list li.product_empty{ width:100%; margin:0; text-align:center; padding:60px 0; color:#9a8368}
body.main .product .more_btn{ display:flex; justify-content:center}

/* =============================== location =============================== */
body.main .location{ padding:160px 0; text-align:center; background-position:center; background-repeat:no-repeat; background-size:cover; position:relative; overflow:hidden}
body.main .location::before{ content:''; position:absolute; inset:0;}
body.main .location .box1{ position:relative; z-index:2}
body.main .location .main_tit .in_tt,
body.main .location .main_tit .in_tx,
body.main .location .main_tit .in_tw{ color:#fff}
body.main .location .main_tit .in_tw{ margin-top:24px}
body.main .location .more_btn{ justify-content:center; color:#fff}
body.main .location .more_btn .more_btn_ic{ border-color:#fff}
body.main .location .more_btn:hover .more_btn_ic{ background:#fff; color:#2b2118}

/* =============================== footer =============================== */
.main .site_footer{ margin-top:0;}
.site_footer{ background:#111; padding:60px 0 40px; margin-top:8em;}
.site_footer .box1{ margin:0 auto; position:relative}
.site_footer .sf_top{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px}
.site_footer .sf_cs{ text-align:right}
.site_footer .sf_cs .cs_num{ display:flex; align-items:center; justify-content:flex-end; gap:10px; font-size:1.5em; font-weight:600; color:#fff; letter-spacing:.5px}
.site_footer .sf_cs .cs_num .ico{ color:var(--mainColor)}
.site_footer .sf_cs .cs_num .xi{ color:var(--mainColor); font-size:.9em; line-height:1}
.site_footer .sf_cs .cs_time{ font-size:1em; color:rgba(255,255,255,0.55)}
.site_footer .sf_info{ padding-top:20px}
.site_footer .sf_info p{ font-size:1em; color:rgba(255,255,255,0.6); line-height:1.8}
.site_footer .sf_info .copy{ margin-top:10px; color:rgba(255,255,255,0.4); letter-spacing:1px; font-weight:200}


#bo_cate ul li{padding: 0 2.5px 2.5px 2.5px;}