@charset "utf-8";

/* ==========================================================================
   BOOTSTRAP & PLUG-IN
   ========================================================================== */
a:hover{color:inherit}
.btn:focus{box-shadow: none !important;}
.form-control:focus,
.form-select:focus{border-color:#d6490d; color:#333; box-shadow:none;}
.btn-primary{border-color:#d6490d; background-color:#ea5413}
.btn-primary:hover,
.btn-primary:focus{border-color:#e15418; background-color:#f05e1f;}
.btn-outline-primary{border-color:#d6490d; color:#d6490d}
.btn-outline-primary:hover,
.btn-outline-primary:focus{color:#fff; border-color:#d6490d; background-color:#ea5413;}
.btn-outline-secondary{border-color:#e1e1e1; color:#999}
.offcanvas-end{width: 320px;}
.swiper-slide{transform: translateZ(0); backface-visibility: hidden; perspective: 2000;}

/* ==========================================================================
   Variable
   ========================================================================== */
:root {
  --header-height: 64px;
  --main-gap: 60px;
  --point_c1: #098b4e;
  --point_c1_1: #01bf1f;
  --point_c2: #cab682;
  --point_c2_1: #b99764;
  --point_c3: #f24747;
}
/* ==========================================================================
   BASIC
   ========================================================================== */
#wrap{position:relative; width:100%;}
#header{position:relative; width:100%; z-index:200}
#container{position:relative;}
#footer{position:relative}
#contents{position:relative;}
.main_grid{position:relative; width: 1280px; margin:0 auto}
.grid1{position:relative; width: 1400px; margin:0 auto}
.grid2{position:relative; padding-left: var(--main-gap); padding-right: var(--main-gap)}
.dsp, .p_dsp, .t_dsp, .m_dsp{display:none}
.extend_grid{margin-left: -20px; margin-right: -20px;}
.sns_set .ytube{width: 24px;}
.sns_set .facebook{width: 10px;}
.sns_set .instagram{width: 20px;}
/* ==========================================================================
   HEADER
   ========================================================================== */
#header .inner_header{position: fixed; width: 100%;}
#header .inner_header .row_header{position: relative; display: flex; justify-content: center; padding: 27px 0;}
#header .inner_header h1{position: absolute; left: var(--main-gap); top: 26px; transition: .3s ease-in-out;}
#header .inner_header h1 a{display: block; padding: 10px 10px 10px 0;}
#header .inner_header h1 img{animation:fadeEffect .5s; /*transition:.3s ease-in-out .4s*/}
#header .inner_header h1 .img1{width: 85px;}
#header .inner_header h1 .img2{display: none; width: 148px;}
#header .inner_header h1 .since_txt{display: none; font-size: 16px; font-weight: bold; color: #050d13; letter-spacing: 0.25px; text-transform: uppercase; margin-left: -3px;}
#header .inner_header .bg_header{position:absolute; top: -90px; width:100%; height: 90px; background:#fff; border-bottom: 1px solid #eaeaea; transition:.5s ease-in-out}
#header .inner_header .btn_shop:hover{background-color: var(--point_c1); border-radius: 18px;}
#header .inner_header .btn_shop:hover span{color: #fff; background-image: url('../images/common/ico_cart1_2.png');}

#gnb > ul{display: flex;}
#gnb > ul > li{position:relative; margin: 0 15px}
#gnb > ul > li > a{display:block; padding: 8px 10px 18px; font-size: 17px; font-weight: bold; color: #fff; text-transform:uppercase; transition:color .2s ease-in-out;}
#gnb > ul > li > a > span{position: relative; display: inline-block; padding: 5px 0;}
#gnb > ul > li > a > span::after{content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background-color: #fff; transition: width .3s ease-in-out;}
#gnb > ul > li > a.active > span::after,
#gnb > ul > li:hover > a > span::after{width: 100%;}
#header .inner_header .btn_right{position: absolute; right: var(--main-gap); top: 27px; display: flex; transition: .3s ease-in-out;}
#btn_sidebar{display: none; width: 36px; height: 36px; background: url('../images/common/ico_hamburg1_1.png') no-repeat right center; background-size: 22px auto; outline: none; transition: .3s ease-in-out;}

#gnb > ul > li .sub_menu{display:none; position:absolute; top: 50px; left:-27px; width: 148px; background: var(--point_c1); animation: fadeEffect .4s;}
#gnb > ul > li .sub_menu > ul{padding:11px 0}
#gnb > ul > li .sub_menu > ul > li a{display:block; font-size:14px; color:rgba(255,255,255,.7); text-align: center; line-height:30px; letter-spacing:-0.25px; transition:.2s ease-in-out}
#gnb > ul > li .sub_menu > ul > li a:hover,
#gnb > ul > li .sub_menu > ul > li a.active{color:rgba(255,255,255,1)}
#gnb > ul > li .sub_menu > .obj_arw{position:absolute; top:-6px; left:50%; margin-left:-3px; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:6px solid var(--point_c1);}
#gnb > ul > li:hover .sub_menu{display:block}

#header .inner_header.fixed .bg_header{top:0}
#header .inner_header.fixed h1{top: 9px;}
#header .inner_header.fixed h1 .img1{display: none;}
#header .inner_header.fixed h1 .img2{display: inline;}
#header .inner_header.fixed #gnb > ul > li > a{color: #222;}
#header .inner_header.fixed #gnb > ul > li > a:hover,
#header .inner_header.fixed #gnb > ul > li > a.active{color: var(--point_c1)}
#header .inner_header.fixed #gnb > ul > li > a > span::after{background-color: var(--point_c1);}
#header .inner_header.fixed .btn_shop{background-color: var(--point_c1); border-radius: 18px;}
#header .inner_header.fixed .btn_shop span{color: #fff; background-image: url('../images/common/ico_cart1_2.png');}
#header .inner_header.fixed #btn_sidebar{background-image: url('../images/common/ico_hamburg1.png')}

#main #header .inner_header:not(.fixed) h1 .since_txt{display: block;}

/* ==========================================================================
   FOOTER
   ========================================================================== */
#bottom_nav{padding:76px 0 53px; background:#222}
#bottom_nav > div > ul{display: flex; justify-content: space-between; flex-wrap: wrap;}
#bottom_nav > div > ul > li{width:calc(20% - 76px); letter-spacing:0}
#bottom_nav .nav_dp1{padding-bottom: 28px; border-bottom:1px solid #393939}
#bottom_nav .nav_dp1 a{font-size:16px; font-weight:bold; color:#b5a97d; letter-spacing: 0; text-transform: uppercase}
#bottom_nav .nav_dp2{margin-top:17px;}
#bottom_nav .nav_dp2 li{margin-bottom: 4px;}
#bottom_nav .nav_dp2 li a{display: inline-block; font-size:14px; font-weight:bold; color:#fff; letter-spacing: 0; line-height:30px; text-transform:capitalize}
#bottom_nav .nav_dp2 li a:hover,
#bottom_nav .nav_dp2 li a.active{color: #9fbd18}

#footer .inner_footer{padding-top: 40px; padding-bottom: 60px;}
#footer .inner_footer > div{position: relative;}
#footer .inner_footer .logo img{width: 128px;}
#footer .inner_footer address{margin-top: 16px;}
#footer .inner_footer address span{font-size: 13px; font-weight: 300; color:#666; line-height:22px; letter-spacing: 0; margin-right: 14px}
#footer .inner_footer address span:last-child{margin-right: 0;}
#footer .inner_footer address strong{font-family:'Roboto', sans-serif; font-size: 13px; font-weight: bold; color: var(--point_c2_1); text-transform: uppercase;}
#footer .inner_footer .copyright{font-size: 11px; font-weight: 500; color:#555; line-height: 16px; letter-spacing: 0.75px; text-transform: uppercase; margin-top: 5px;}
#footer .inner_footer .sns_set{position: absolute; right: 0; top: 0;}
#footer .inner_footer .sns_set a{display: inline-block; padding: 5px; margin-left: 13px;}
#footer .inner_footer .sns_set a:last-child{padding-right: 0;}

/* ==========================================================================
   RIGHT SIDEBAR
   ========================================================================== */
#right_sidebar{padding: 0 24px;}
#right_sidebar .top_sidenav{display: flex; justify-content: space-between; align-items: center; height: 74px;}
#right_sidebar .top_sidenav .logo img{width: 130px}
#right_sidebar .top_sidenav .btn-close{width: 16px; height: 16px; margin-top: 7px;}
#right_sidebar .bottom_sidenav{position: relative; padding: 15px 0; line-height: 20px; font-size: 11px; color: #9d9d9d; text-align: center;}
#right_sidebar .sidenav{position:relative; flex: 1; overflow-y: auto;}
#right_sidebar .sidenav::-webkit-scrollbar{display: none}
#right_sidebar .sidenav > ul > li > a,
#right_sidebar .sidenav > ul > li > .accordion-button{display: flex; align-items: center; height: 60px; padding: 0 12px; border-top: 1px solid #e7e7e7; font-size: 17px; font-weight: bold; color: #222; text-transform: uppercase;}
#right_sidebar .sidenav > ul > li:first-child > a,
#right_sidebar .sidenav > ul > li:first-child > button{border-color: #222;}
#right_sidebar .sidenav > ul > li:last-child{border-bottom: 1px solid #e7e7e7}
#right_sidebar .sidenav .accordion-button{box-shadow:none; background-color:transparent}
#right_sidebar .sidenav .accordion-button::after{width: 12px; height: 12px; background: url('../images/common/ico_sidebar1_1.png') no-repeat center; background-size: 12px auto;}
#right_sidebar .sidenav .accordion-button:not(.collapsed)::after{background-image: url('../images/common/ico_sidebar1_2.png');}
#right_sidebar .sidenav .item_single{background: url('../images/common/ico_sidebar1_3.png') no-repeat calc(100% - 13px) center; background-size: 8px auto;}
#right_sidebar .sidenav .item_home{background: url('../images/common/ico_sidebar1_4.png') no-repeat calc(100% - 13px) center; background-size: 13px auto;}
#right_sidebar .sidenav > ul > li > a.active,
#right_sidebar .sidenav > ul > li > button.active,
#right_sidebar .sidenav .accordion-button:not(.collapsed),
#right_sidebar .sidenav > ul > li > a:hover,
#right_sidebar .sidenav .accordion-button:hover{color: var(--yellow1);}
#right_sidebar .sidenav .dp2{padding: 15px 24px; border-top: 1px solid #e7e7e7}
#right_sidebar .sidenav .dp2 li a{font-family: 'Noto Sans KR', sans-serif; font-size: 14px; font-weight: bold; color: #999; line-height: 30px; letter-spacing: -0.25px; transition: .2s ease-in-out;}
#right_sidebar .sidenav .dp2 li a.active,
#right_sidebar .sidenav .dp2 li a:hover{color: #222;}

/* ==========================================================================
   SUB LAYOUT
   ========================================================================== */
#sub_vis{position:relative; background-repeat:no-repeat; background-position:center; background-size:cover; overflow:hidden}

#sub_vis.vis1{background-image:url('../images/contents/svis1.jpg')}
#sub_vis.vis2{background-image:url('../images/contents/svis2.jpg')}
#sub_vis.vis3{background-image:url('../images/contents/svis3.jpg')}
#sub_vis.vis4{background-image:url('../images/contents/svis4.jpg')}
#sub_vis.vis5{background-image:url('../images/contents/svis5.jpg')}
#sub_vis.vis6{background-image:url('../images/contents/svis6.jpg')}
#sub_vis .inner_vis{display: flex; justify-content: center; align-items: center; height: 438px;}
#sub_vis.single .inner_vis{height: 376px;}
#sub_vis .ct_title{position: relative; top: 12px; font-weight:bold;  text-align:center; letter-spacing: 0; text-transform:uppercase}
#sub_vis .ct_title h2{font-size: 52px; color: #fff; }
#sub_vis .ct_title .txt_en{font-size: 14px; color: var(--point_c2); margin-top: 10px;}

/*서브 메뉴*/
#sub_nav{position:absolute; bottom: 0; width: 100%; text-align:center;}
#sub_nav > ul{display: flex; background-color: rgba(0,0,0,.5);}
#sub_nav > ul > li{flex: 1;}
#sub_nav > ul > li > a{display:flex; justify-content: center; align-items: center; height: 62px; font-size: 18px; font-weight:bold; color: #fff; background-color: transparent; transition: .3s ease-in-out;}
#sub_nav > ul > li > a:hover{background-color:  rgba(0,0,0,1);}
#sub_nav > ul > li > a.active{background-color: var(--point_c1);}

/*페이지 탑*/
.pg_top{display: flex; justify-content: space-between; align-items: center; height: 114px;}
.pg_top .path{display: flex; align-items: center;}
.pg_top .path span,
.pg_top .path strong{display:inline-block; font-size: 13px; margin-left: 14px; padding-left: 14px; background: url('../images/common/arw5_1.png') no-repeat 0 center; background-size: 5px auto}
.pg_top .path > img{width: 14px}
.pg_top .path > span{color:#999; text-transform: uppercase;}
.pg_top .path > strong{font-weight: 400; color: #222;}
.pg_top .sns_set a{display: inline-block; padding: 5px; margin-left: 13px;}
.pg_top .sns_set a:last-child{padding-right: 0;}

.pg_title{position:relative; width: 1280px; margin:0 auto; text-align:center; letter-spacing: -0.5px; padding-bottom: 50px; border-bottom: 1px solid #eff1f3;}
.pg_title .title{font-size: 34px; font-weight: bold;}
.pg_title p{font-size: 18px; font-weight: 300; line-height: 28px; margin-top: 13px;}

.main_text1{font-weight: bold; letter-spacing: 0; text-align: center;}
.main_text1 .txt_en{font-family:'Roboto', sans-serif;  font-size: 14px; color: var(--point_c2_1); line-height: 28px; margin-bottom: 2px; text-transform: uppercase;}
.main_text1 .title{font-family: 'Playfair Display', serif; font-size: 50px;}
.main_text1 p{font-size: 17px; font-weight: 300; color: #666; line-height: 28px; letter-spacing: -0.5px; margin-top: 33px; word-break: keep-all;}
.main_text1 p > strong{display: block; font-size: 17px; font-weight: bold; color: #222; margin-bottom: 7px;}