@charset "utf-8";

/* ==========================================================================
    BASIC
    ========================================================================== */
#wrap{position:relative; width:100%;}
#header{position:relative; width:100%; z-index:200}
#container{position:relative;}
#footer{position:relative}
#contents{position:relative; background: url('../images/common/bg_fabric2.jpg') repeat center 0;}
.main_grid{position:relative; width: 1280px; margin: 0 auto;}
.grid1{position:relative; padding-left: var(--main-gap); padding-right: var(--main-gap);}
.grid2{position:relative; width: 1020px; margin: 0 auto}
.dsp, .p_dsp, .t_dsp, .m_dsp{display:none}

#main #contents{background: none;}
/* ==========================================================================
   HEADER
   ========================================================================== */
#header{position: fixed; top: 0; width: 100%; z-index: 51; transition: background-color .3s ease-in-out;}
#header .inner_header{position:relative; height: var(--header-height); border-bottom: 1px solid rgba(255,255,255,.15); transition: height ease-in-out .3s;}
#header h1,
#header .right_set{position: absolute; display: flex; align-items: center; height: 100%;}
#header h1{left: 0;}
#header h1 img{animation: fadeEffect .3s;}
#header h1 .logo{width: 158px;}
#header h1 .s_logo{display: none; width: 138px;}
#header .right_set{right: 0;}
#header .right_set .lang_set{position: relative; width: 60px; padding-right: 20px; margin-right: 22px; transition: .3s ease-in-out;}
#header .right_set .lang_set::after{content: ""; display: block; position: absolute; right: 0; top: calc(50% - 3px); width: 9px; height: 5px; background: url('../images/common/arw1_1.png') no-repeat 0 0; background-size: 9px auto; transition: .3s ease-in-out;}
#header .right_set .lang_set > ul{display: flex; align-items: center; height: 40px; overflow: hidden; transition: .3s ease-in-out;}
#header .right_set .lang_set > ul > li{flex: 1; font-size: 16px; font-weight: bold; color: #fff; letter-spacing: 0; transition: .3s ease-in-out;}
#header .right_set .lang_set > ul > li > a{padding: 10px 10px; transition: .3s ease-in-out;}
#header .right_set .lang_set > ul > li > a.active{pointer-events: none; cursor: default;}
#header .right_set .lang_set > ul > li:last-child > a{padding-right: 0;}
#header .right_set .lang_set:hover{width: 210px;}
#header .right_set .lang_set:hover::after{transform: rotate(450deg);}

#btn_sidebar{width: 40px; height: 40px; background: url('../images/common/ico_hamburg1_1.png') no-repeat right center; background-size: 30px auto; outline: none; transition: .3s ease-in-out;}
#header #gnb{height: 100%;}
#header #gnb > ul{display: flex; justify-content: center; align-items: center; height: 100%;}
#header #gnb > ul > li{position:relative; margin: 0 26px;}
#header #gnb > ul > li > a{display: block; padding: 15px 0; font-size: 16px; font-weight: bold; letter-spacing: 0; text-transform: uppercase; transition: .3s ease-in-out}
#header #gnb > ul > li > a{color: #fff;}
#header #gnb .sub_menu{display: none; position:absolute; top: 45px; width: 130px; left: calc(50% - 67px); text-align: center; background: var(--cp1); animation: fadeEffect .3s;}
#header #gnb .sub_menu::after{content: ""; display: block; 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(--cp1);}
#header #gnb .sub_menu > ul{padding: 11px 0}
#header #gnb .sub_menu > ul > li > a{display:block; font-size:13px; color:rgba(255,255,255,.7); line-height:30px; transition:.2s ease-in-out}
#header #gnb .sub_menu > ul > li > a:hover,
#header #gnb .sub_menu > ul > li > a.active{color:rgba(255,255,255,1)}
#header #gnb > ul > li:hover .sub_menu{display:block}

#header.fixed{background-color: #fff;}
#header.fixed .inner_header{height: var(--sticky-height);}
#header.fixed h1 .logo{display: none;}
#header.fixed h1 .s_logo{display: inline;}
#header.fixed .right_set .lang_set::after{background-image: url('../images/common/arw1_2.png')}
#header.fixed .right_set .lang_set > ul > li{color: #222;}
#header.fixed #btn_sidebar{background-image: url('../images/common/ico_hamburg1_2.png')}
#header.fixed #gnb > ul > li > a{color: #222;}
#header #gnb > ul > li:hover > a,
#header #gnb > ul > li > a.active{color: var(--cp1)}
#header .right_set .lang_set > ul > li:hover a:not(.active){color: var(--cp1);}

/* ==========================================================================
   FOOTER
   ========================================================================== */
#footer .footer_menu{display: flex; justify-content: space-between; background-color: var(--cp1); height: 56px;}
#footer .footer_menu > ul{display: flex; align-items: center; height: 100%;}
#footer .footer_menu > ul > li{display: flex; align-items: center;}
#footer .footer_menu > ul > li:after{content: ""; display: block; width: 1px; height: 12px; background-color: rgba(255,255,255,.3); margin: 0 16px;}
#footer .footer_menu > ul > li:last-child:after{display:none;}
#footer .footer_menu > ul > li > a{font-size: 14px; font-weight: bold; color: rgba(255,255,255,.7); line-height: 20px; padding: 4px 3px}

#gototop{display: flex; align-items: center; cursor: pointer;}
#gototop span{display: block; font-size: 14px; font-weight: bold; color: #f7cfcd; letter-spacing: -0.5px; padding: 18px 18px; background: url('../images/common/arw3_1.png') no-repeat right 50%; background-size: 10px auto; transition: .3s ease-in-out;}
#gototop:hover span{background-position: right calc(50% - 2px);}

#footer .inner_footer{display: flex; flex-wrap: wrap; justify-content: space-between; padding-top: 46px; padding-bottom: 70px; background-color: #fff;}
#footer .inner_footer .address{display: flex;}
#footer .inner_footer .logo_f{padding-top: 10px; margin-right: 80px;}
#footer .inner_footer .logo_f img{width: 132px;}
#footer .inner_footer address > ul > li{display: flex; font-size: 12px; line-height: 26px;}
#footer .inner_footer address .item{width: 107px;}
#footer .inner_footer address .item .spc1{visibility: hidden;}
#footer .inner_footer address .vl{display: flex; flex-wrap: wrap; color: #aaa}
#footer .inner_footer address .vl span{color: var(--cp1);}
#footer .inner_footer address .vl > div{margin-right: 10px;}
#footer .inner_footer address .copyright{font-size: 11px; color: #bbb; letter-spacing: 0.25px; text-transform: uppercase; margin-top: 20px;}
#footer .right_set{display: flex; flex-direction: column; justify-content: space-between;}
#footer .right_set .sns_set{justify-content: flex-end;}
#family_site{position:relative; width:236px; text-align:left; box-sizing:border-box; z-index:100}
#family_site .select{position:absolute; left:0; width:100%; height:42px; line-height:42px; padding-left:13px; border-left:1px solid transparent; border-right:1px solid transparent; font-family:'Roboto', sans-serif; font-size:14px; font-weight:bold; color:#222; letter-spacing:0; text-transform: uppercase; border-bottom:1px solid #222; background:#fff url('../images/common/arw4_1.png') no-repeat right 9px center; background-size:10px auto; cursor:pointer; user-select:none; box-sizing:border-box}
#family_site .list_family{position:absolute; bottom:0; left:0; max-height:0; width:100%; background-color:#fff; overflow:hidden; box-sizing:border-box; transition:max-height ease-in-out.5s;}
#family_site .list_family ul{border:1px solid #eeeee6;}
#family_site .list_family li a{display:block; line-height:41px; padding-left:14px; font-size:14px; font-weight:300; color:#222; box-sizing:border-box; user-select:none}
#family_site .list_family li a:hover{color:#5a5a55}
#family_site .list_family li a span{font-family:'Roboto', sans-serif; font-size:13px; color:#666; letter-spacing:0}
#family_site .list_family li a span:before{content:""; display:inline-block; width:1px; height:12px; background-color:#d2d2d2; margin:0 10px 0 5px}
#family_site.on .select{border-left:1px solid #eeeee6; border-right:1px solid #eeeee6; background-image:url('../images/common/arw4_2.png')}
#family_site.on .list_family{max-height: 110px}

/* ==========================================================================
   RIGHT SIDEBAR
   ========================================================================== */
#right_sidebar{padding: 0 20px;}
#right_sidebar .top_sidenav{display: flex; justify-content: space-between; align-items: center; height: var(--sticky-height);}
#right_sidebar .top_sidenav .logo img{width: 138px}
#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 .lang_sidenav{display: flex; justify-content: center; align-items: center; border-top: 1px solid #222; height: 52px;}
#right_sidebar .lang_sidenav a{font-size: 15px; font-weight: bold; transition: .3s ease-in-out;}
#right_sidebar .lang_sidenav a.active{color: var(--cp1); pointer-events: none; cursor: default;}
#right_sidebar .lang_sidenav a:hover{color: var(--cp1);}
#right_sidebar .lang_sidenav span{font-family: 'Noto Sans KR', sans-serif; font-weight: 500; margin: 0 10px;}

#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: #ddd;}
#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; transition: .2s ease-in-out;}
#right_sidebar .sidenav .accordion-button:not(.collapsed)::after{background-image: url('../images/common/ico_sidebar1_2.png'); transition: .2s ease-in-out;}
#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(--cp1);}
#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{background-repeat: no-repeat; background-position: center; background-size: cover;}
#sub_vis.vis1{background-image: url('../images/common/sub_vis1.jpg')}
#sub_vis.vis2{background-image: url('../images/common/sub_vis2.jpg')}
#sub_vis.vis3{background-image: url('../images/common/sub_vis3.jpg')}
#sub_vis.vis4{background-image: url('../images/common/sub_vis4.jpg')}
#sub_vis.vis5{background-image: url('../images/common/sub_vis5.jpg')}
#sub_vis .inner_vis{display: flex; justify-content: center; align-items: center; height: 330px; padding-top: var(--header-height); box-sizing: content-box;}
#sub_vis .tit_cat{font-weight: bold; text-align: center; text-transform: uppercase;}
#sub_vis .tit_cat .txt_en{font-size: 14px; color: var(--cp3_2); letter-spacing: 1px;}
#sub_vis .tit_cat .title{font-size: 54px; color: #fff; letter-spacing: 0.5px; margin-top: 14px;}

/*SUB NAV*/
#sub_nav{position:relative; width: 100%; font-size: 16px; background:#fff; border-bottom: 1px solid #edeced; z-index:50;}
#sub_nav > .main_grid{display: flex; justify-content: space-between; align-items: center; height: var(--subnav-height);}
#sub_nav .a_text{font-weight:bold; color:var(--cp3_1); letter-spacing: 0.5px;}
#sub_nav > .main_grid > ul{display: flex;}
#sub_nav > .main_grid > ul > li{position: relative; width: 240px;}
#sub_nav > .main_grid > ul > li.btn_home{width: var(--subnav-height);}
/*#sub_nav > .main_grid > ul > li:after{content:""; position:absolute; top:24px; right:0; width:1px; height:15px; background:#e0e0e0}*/
#sub_nav .btn_home a{display:block; height: var(--subnav-height); font-size:0; background: #222 url('../images/common/ico_home1.png') no-repeat center; background-size: 16px auto}
#sub_nav .select_menu{position:relative; width:100%; z-index:105; text-transform: uppercase; cursor:pointer; user-select:none}
#sub_nav .select_menu .current_item{position: relative; display: flex; align-items: center; height: var(--subnav-height); padding-left: 20px;}
#sub_nav .select_menu .current_item:after{content: ""; display: block; position: absolute; right: 20px; width: 12px; height: 7px; background: url('../images/common/arw2_1.png') no-repeat 0 0; background-size: 12px auto; transition: .2s ease-in-out;}
#sub_nav .select_menu .select_list{display: block; position:absolute; top: var(--subnav-height); width: 100%; max-height: 0; overflow: hidden; transition: .4s ease-in-out;}
#sub_nav .select_menu .select_list > ul{border:1px solid #edeced;}
#sub_nav .select_menu .select_list > ul > li{padding:0 20px; background: #fff}
#sub_nav .select_menu .select_list > ul > li > a{display:flex; align-items: center; height: 54px; color:#999; border-bottom:1px solid #edeced; overflow:hidden}
#sub_nav .select_menu .select_list > ul > li:last-child a{border-bottom: none}
#sub_nav .select_menu .select_list > ul > li > a.active,
#sub_nav .select_menu .select_list > ul > li > a:hover{color: #222}
#sub_nav .subitem1{font-family: 'Poppins', sans-serif; font-weight: 300; letter-spacing: 0;}
#sub_nav .subitem2{font-weight: bold; color: #fff;}
#sub_nav .subitem2 .select_menu .current_item:after{background-image: url('../images/common/arw2_2.png')}
#sub_nav .subitem2 .select_menu .select_list > ul{border-color: var(--cp3_1); border-top: 1px solid #dccfad;}
#sub_nav .subitem2 .select_menu .select_list > ul > li{background-color: var(--cp3_1);}
#sub_nav .subitem2 .select_menu .select_list > ul > li > a{color: #fff;}
#sub_nav .subitem2{background-color: var(--cp3_1);}
#sub_nav .select_menu.open .select_list{max-height: 360px;}
#sub_nav .select_menu.open .current_item:after{transform: rotate(180deg);}

#sub_nav.fixed{position: fixed; top: var(--sticky-height); border-top: 1px solid #edeced;}
#contents.fixed{padding-top: var(--subnav-height);}

#tabs{margin-top: 34px; margin-bottom: 45px;}
#tabs > ul{display: flex; flex-wrap: wrap;}
#tabs > ul > li{flex: 1;}
#tabs > ul > li > a{display: flex; justify-content: center; align-items: center; height: 60px; font-size: 16px; font-weight: bold; text-align: center; border: 1px solid #ebebeb; border-right: 0; background-color: #fff; transition: .3s ease-in-out;}
#tabs > ul > li:last-child > a{border-right: 1px solid #ebebeb;}
#tabs > ul > li > a:hover{color: var(--cp1);}
#tabs > ul > li > a.active{color: #fff; border-color: var(--cp1); background-color: var(--cp1);}

.pg_title{text-align: center; padding-top: 100px;}
.pg_title .title{font-family: 'NanumSquare', sans-serif; font-size: 38px; font-weight: 900; letter-spacing: 0;}
.pg_title .title1{font-family: 'Poppins', sans-serif; font-size: 38px; font-weight: bold; color: var(--cp1); letter-spacing: 0; text-transform: uppercase;}
.pg_title p{font-size: 16px; font-weight: 300; line-height: 26px; word-break: keep-all; margin-top: 16px;}
.pg_title .txt_en{font-size: 14px; font-weight: bold; color: var(--cp3_2); letter-spacing: 0.5px; text-transform: uppercase; margin-top: 24px;}
.prod_title{font-family: 'NanumSquare', sans-serif; font-size: 32px; font-weight: 900; letter-spacing: 0; text-align: center; padding-top: 75px;}

/* ==========================================================================
   PRODUCT
   ========================================================================== */
.crs_prod{width: 100%; height: 100%;}
.crs_prod .prod img{width: 100%; height: 100%; object-fit: cover;}
/* Swiper */
.crs_prod .swiper-button-next,
.crs_prod .swiper-button-prev{width: 42px; height: 42px; transition: .3s ease-in-out}
.crs_prod .swiper-button-next:after,
.crs_prod .swiper-button-prev:after{content:""}
.crs_prod .swiper-button-prev{left: 0; background: rgba(0,0,0,.5) url('../images/common/arw2_5.png') no-repeat center; background-size: 7px auto;}
.crs_prod .swiper-button-next{right: 0; background: rgba(0,0,0,.5) url('../images/common/arw2_6.png') no-repeat center; background-size: 7px auto;}
.crs_prod .swiper-button-next:hover,
.crs_prod .swiper-button-next:focus,
.crs_prod .swiper-button-prev:hover, 
.crs_prod .swiper-button-prev:focus{outline:none; opacity: 1;}
.crs_prod .swiper-button-next:hover,
.crs_prod .swiper-button-prev:hover{background-color: rgba(0,0,0,1);}
.crs_prod.swiper-container-horizontal>.swiper-pagination-bullets{bottom: 30px;}
.crs_prod.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin: 0 5px;}
.crs_prod .swiper-pagination-bullet{width: 12px; height: 12px; background-color: #000; opacity: .2;}
.crs_prod .swiper-pagination-bullet-active{background-color: var(--cp1); opacity: 1;}

.list_prod{padding-bottom: 70px;}
.list_prod > ul{display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(310px, auto); gap: 20px;}
.list_prod > ul > li{text-align: center; border: 1px solid #ebebeb; background-color: #fff; }
.list_prod > ul > li > a{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%;}
.list_prod > ul > li .thumb > img{max-width: 226px; width: 100%; overflow: hidden; transition:.3s ease-in-out}
.list_prod > ul > li .thumb:hover > img{transform:scale(1.07)}

.list_prod > ul > li .title{font-size: 16px; font-weight: bold; line-height: 24px; max-width: 240px; word-break: keep-all; margin-top: 14px;}
.list_prod > ul > li.new_prod{position: relative; grid-column: 1 / 3; grid-row: 1 / 3; overflow: hidden;}
.list_prod > ul > li.new_prod .tag_new{position: absolute; left: -64px; top: -64px; display: flex; justify-content: center; align-items: flex-end; padding-bottom: 12px; width: 120px; height: 120px; z-index: 10; font-size: 14px; font-weight: bold; color: var(--cp1); letter-spacing: 1px; background-color: #000; transform: rotate(-45deg);}

.detail_prod{position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; padding-top: 80px; padding-bottom: 70px;}
.detail_prod .tabs_prod > ul{display: flex; flex-wrap: wrap;}
.detail_prod .tabs_prod > ul > li{position: relative; flex: 1;}
.detail_prod .tabs_prod > ul > li > a{display: flex; justify-content: center; align-items: center; height: 52px; font-size: 16px; font-weight: bold; color: #999; text-align: center; border: 1px solid #ebebeb; border-right: 0; background-color: #fff; transition: .3s ease-in-out;}
.detail_prod .tabs_prod > ul > li:last-child > a{border-right: 1px solid #ebebeb;}
.detail_prod .tabs_prod > ul > li > a:hover,
.detail_prod .tabs_prod > ul > li> a.active{color: var(--cp1);}
.detail_prod .tabs_prod > ul > li> a.active:after{content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid var(--cp1);}
.detail_prod .thumb{width: 48.5%; max-width: 620px;}
.detail_prod .thumb > img{border: 1px solid #f4f4f4;}
.detail_prod .info_prod{width: 51.5%; padding-left: 110px;}
.detail_prod .info_prod .tabs_prod{margin-bottom: 11px;}
.detail_prod .info_prod .tit_prod{padding-top: 24px; padding-bottom: 19px;}
.detail_prod .info_prod .tit_prod .cat{font-size: 16px; font-weight: bold; color: var(--cp1);}
.detail_prod .info_prod .tit_prod .title{font-size: 36px; font-weight: bold; line-height: 46px; margin-top: 7px;}
.detail_prod .info_prod .tit_prod p{font-size: 14px; font-weight: 300; line-height: 24px; margin-top: 10px;}
.detail_prod .info_prod .list_spec{padding-top: 18px; padding-bottom: 20px; border-top: 1px solid #222; border-bottom: 1px solid #ebebeb;}
.detail_prod .info_prod .list_spec > ul > li{display: flex; font-size: 15px; line-height: 26px; margin-bottom: 12px;}
.detail_prod .info_prod .list_spec > ul > li:last-child{margin-bottom: 0;}
.detail_prod .info_prod .list_spec .item{width: 106px; font-weight: bold; color: #bbb;}
.detail_prod .info_prod .list_spec .item::before{content: "- "; color: var(--cp1);}
.detail_prod .info_prod .list_spec .vl{flex: 1; color: #333;}
.detail_prod .info_prod .txt_set{padding-top: 18px; padding-bottom: 19px; border-bottom: 1px solid #ebebeb;}
.detail_prod .info_prod .txt_set > p{font-size: 14px; font-weight: 300; color: #666; line-height: 24px; word-break: break-all;}
.detail_prod .info_prod .button{margin-top: 24px;}