body{overflow-X: hidden;}
:lang(zh-cn){font-family: 'Noto Sans SC', sans-serif;}

/* Header style */
header{position: fixed; width:100vw; z-index: 99; top:0; left:0; z-index: 100;}
header .main_nav{background:transparent;  border-bottom:1px solid transparent; position: relative;
    -webkit-transition: all 0.1s ease-out; transition: all 0.1s ease-out;}
.main_nav .bd{ align-items: center; position: relative;  height:56px; }
.nav_inner{display:inline-block; position: absolute;}

/* left */
.nav_inner.left{position: absolute; top:100%; z-index: 50;}


/* center */
.nav_inner.center{left:50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); top:50%;}

/* right */
.nav_inner.right{position: absolute; top:45%; transform:translateY(-50%); -ms-transform: translateY(-50%); right:0; z-index: 50;}
.nav_inner.right > ul > li{float:left; margin-right:24px; position: relative;}
.nav_inner.right > ul > li:last-child{margin-right:0; z-index:10;}
.nav_inner.right ul li .header-unit{margin-left:0; margin-right:8px; position: relative;}
.nav_inner.right ul li .header-unit:last-child{margin-right:0;}
.nav_inner.right ul li .header-unit > a{font-size:0.85em; color:#626262;}
.cart-ea{position: absolute; color:#fff; z-index: 8;text-align: center; line-height: 1.5;
    background-color:#626262; position: absolute; display: block; z-index: 7; width:auto;
    height:14px; border-radius: 50%; min-width: 14px; right:-14px; top:-5px;}
.cart-ea .cart-q{display:block; font-size:9px; padding-left:2px; padding-right:2px;}
.nav_inner.right ul li .header-shop-icon{margin:0 12px;}
.nav_inner.right ul li .header-shop-icon img{width:22px; height:22px;}


.nav-search-li{margin-right:0 !important; position: relative; right:-46px; top:-3px;}
.nav-search{position: relative; width: 100%; height:24px;}
.nav-search input{border:0; height:24px; width: 144px; border-bottom:1px solid #d1d1d1; padding-bottom:3px; padding-right:19px; background-color: transparent;}
.header-search-icon{position: absolute; right:0; bottom:2px; width:17px; line-height: 0; cursor: pointer;}
.header-search-icon img{height:17px;}

.nav-lang-li{position: relative; right:-64px; padding-right:88px; top:-1px; margin-right:0 !important;}
.nav-lang .lang-con{position: relative; display: block; cursor: pointer;}
.nav-lang p.lang-con:after{content:''; position: absolute; display: none;
    right:0; top:50%; background-image: url(https://lbcontents.s3.ap-northeast-2.amazonaws.com/images/IPIACOSMETIC/icon-b-arrow.png);
    width:9px; height:5px;
    background-size: cover; background-repeat: no-repeat;
    transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);}
.nav-lang .lang-con > span{font-size:0.85em; display: none;}
.nav-lang .lang-con i{padding:0 2px;}
.nav-lang img{height:14px; width: 22px; line-height: 0;}
.nav-lang > dl{position: absolute; background-color:#f6f6f6; border-radius:2px; padding:6px 10px;}
.nav-lang > dl .lang-con{float:left; padding-right:10px; line-height: 0;}
.nav-lang > dl .lang-con span{display: none;}
.nav-lang > dl .lang-con:last-child{padding-right:0;}



.utill{background-color:transparent; height:48px; position: relative; width:100%; margin:auto; max-width: 1200px;}

 /* dept 1 */
.gnb_wrap{text-align: center; position: absolute; right:0; top:50%; transform:translateY(-50%); }
ul.gnb{position: relative;}
ul.gnb > li{display:inline-block;  padding:0 32px; position: relative;}
ul.gnb > li:last-child{padding-right:0;}
ul.gnb > li > a{font-size:1.05em; padding:11px 0; display: block; position: relative; color:#626262; font-weight: 500;}


ul.gnb > li:hover .sub_dep{display:block;}

/* dept 2 */
.sub_dep{position: absolute; top:calc(100% + 1px); width:100%; left:50%; transform: translateX(-50%); display:none;}
.sub_dep ul{width:100%; overflow:hidden; background:rgba(255,255,255,.95);}
.sub_dep li{position: relative; z-index: 50; text-align:left;}
.sub_dep li > a{color:#444; cursor: pointer; position: relative; display: block; font-size:0.95em; padding:8px 16px;}
.sub_dep li > a:hover{background-color:rgba(0,0,0,.15); font-weight:400;}

/* mobile */
.header .mobile_nav, .mobile_gnb_wrap{display:none;}

/* Footer Style */
.footer{width:100%; background:#fff; height:auto; border-top:1px solid #ddd;}
.footer ul.content li.address{display: block;}
.footer ul.content li{font-size:1em; display:inline-block;}
.footer ul.content li:after{display:inline-block; content:''; background:#808080; margin:0 2px;}
.footer ul.content li:last-child:after{display:none;}

.footer .f-top{padding-top:48px; display: flex; display: -webkit-box; display: -ms-flexbox;
    flex-wrap: wrap; -webkit-box-lines: multiple; -ms-flex-wrap: wrap;
    flex-direction: row;-webkit-box-orient: horizontal; -ms-flex-direction: row;}
.footer .f-top .f-info {display: flex; display: -webkit-box; display: -ms-flexbox;
    -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column;}
.footer .f-top .f-info > *{width: 100%;}

.f-info h4{font-size:1.175em; font-weight: 500; line-height: 1.6;}
.f-info span{margin-right:20px;}
.f-info span:last-child{margin-right:0;}

.f-info{padding:0 48px; color:#626262; text-align: center; margin-bottom:48px;}
.f-info .num{font-size:1.275em; line-height: 1; margin-top:8px; margin-bottom:8px; font-weight:600; color:#222;}
.f-info p{font-size:1em; line-height: 1.8;}
.f-info p i{display: inline-block;}
.f-info em img{height:28px; opacity: 0.7;}
.f-info em img:hover, .f-info em img:focus{opacity: 1;}


.footer .f-bt{background-color:#efefef; position: relative; padding-top:24px; padding-bottom:24px;}
.footer .f-bt-info span{margin-right:5%;}
.footer .f-bt-info span > a{font-weight: 500; font-size:0.925em; color:#626262;}
.footer .f-bt .f-content, .footer .f-bt .f-copy{font-size:0.85em; color:#626262; letter-spacing: -0.4px;}

.footer .down_catal{position: relative;}
.footer .catal_list{position: absolute; width: 170%; top: -145px; left: 50%; transform: translateX(-50%); background-color: #fff; border: 1px solid #ddd; box-shadow: 3px 3px 3px rgba(0,0,0,0.1);}
.footer .catal_list li{padding: 6px 16px; padding-right: 40px; position: relative; border-bottom: 1px solid #ddd;}
.footer .catal_list li:last-child{border-bottom: 0;}
.footer .catal_list li p{cursor: pointer; font-size: 13px; text-align: left; width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.footer .catal_list li p:hover{color: #e9bac2;}
.footer .catal_list li i{display: inline-block; width: 12px; opacity: 0.7; position: absolute; right: 16px; top: 7px; cursor: pointer;}
:lang(en) .footer .down_catal,:lang(zh-cn) .footer .down_catal{display: none;}


/* lock */
.footer .lock{position: absolute; bottom:4px; right:16px;}
.footer .lock img{height:21px; opacity:0.3; cursor: pointer;}
.footer .lock:hover img{ opacity:1;}





/* 은선 시작 */
html{scroll-behavior: smooth;}
/* 카카오 */
.sidebar{width: 100px; position: relative;  z-index: 99;}
.sidebar .sidebar_wrap{ width: 40px; overflow: hidden; position: fixed; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); right: -0px; background-color: #fff;}

.sidebar .sidebar_wrap ul li{width: 100%; height: 40px;padding: 7px; position: relative; margin:2px 0;}
.sidebar .sidebar_wrap ul li::after{content: ""; position: absolute; bottom: -2px; left: 50%;
    transform: translateX(-50%); -webkit-transform: translateX(-50%); width: 15px; height: 1px; background-color: #d1d1d1;}
.sidebar .sidebar_wrap ul li:last-child::after{display: none;}
.sidebar .sidebar_wrap .top_btn a{font-weight:500; color: #999; position: absolute;  padding-top:12px;
    left:50%; transform: translateX(-50%); -ms-transform: translateX(-50%); top:0;}
.sidebar .sidebar_wrap .top_btn{text-align: center; position: relative; font-size:12px; padding-bottom:0; margin-bottom:0; position: relative;}
.sidebar .sidebar_wrap .top_btn::before{content: ""; position: absolute; top:8px; left: 50%; margin-right: -4px; vertical-align:top;
    width: 5px; height: 5px; border-right: 1px solid #777; border-bottom:1px solid #b4b4b4; transform: translateX(-50%) rotateZ(-135deg); -webkit-transform: translateX(-50%) rotateZ(-135deg);}


.sidebar .kakao, .sidebar .blog{width: 52px; height: 52px; position: fixed; bottom:48px; right: 48px; border-radius: 50%;
    background-color: #fff;
    -webkit-box-shadow: 0 3px 5px rgba(110, 110, 110, 0.1);
    -moz-box-shadow: 0 3px 5px rgba(110, 110, 110, 0.1);
    box-shadow: 0 3px 5px rgba(110, 110, 110, 0.1);}

    .sidebar .blog{bottom:112px;}

/* 헤더스크롤이벤트 */
.header-bg{width: 100%; height:105px; background-color: transparent; position: fixed; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -ms-transition:all 0.3s ease-out;}
.change{position: fixed; background-color: #fff;}

/* 은선 끝 */

/* 사이드 스마트메뉴 */
.smart-side-list{background-color:rgba(255,255,255,.95); position: fixed; top:50%; transform: translateY(-50%);
    right:56px; border:1px solid #d1d1d1; padding:16px 32px; max-width:200px; z-index: 98;}
    .smart-side-list .tit{margin-bottom:8px; margin-left:-16px;}
.smart-side-list .list-wrap {margin:0 -3px;}
.smart-side-list .list-wrap li{padding:0 3px;}
.smart-side-list .list-wrap li .pd-img-con{width: 64px; padding-bottom:0; height:64px; }
.smart-side-list .list-wrap .pd-img-con .pd-img{width:64px;}

.smart-side-list .slick-prev{left:-30px;}
.smart-side-list .slick-next{right:-24px;}
.smart-side-list .slick-prev:before, .smart-side-list  .slick-next:before{height: 15px;  width: 25px; display: block;}
.smart-side-list .slick-prev:before{content:''; background: url(https://lbcontents.s3.ap-northeast-2.amazonaws.com/images/IPIACOSMETIC/slider-arrow-pp.png) no-repeat left;}
.smart-side-list  .slick-next:before{ content:''; background: url(https://lbcontents.s3.ap-northeast-2.amazonaws.com/images/IPIACOSMETIC/slider-arrow-nn.png) no-repeat right;}


.smart-side-list .no-list{padding:24px 0;}

#gnb .categoryWrap {height: 0; overflow: hidden;-webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; display: none;
    position: fixed; top: 104px; right: 0; left:0;background: #fff; max-width: 100%; padding-left:12px; padding-right:12px;}
#gnb .categoryWrap.open{display: block;}
#gnb.open .categoryWrap {height: 520px;}
#gnb .categoryList {position: relative; z-index: 2; height: 100%; padding-top: 24px; box-sizing: border-box; max-width: 840px; margin:auto;}

#gnb .categoryList ul li{width:50%; float: left; padding-left:32px;}
#gnb .categoryList ul li:first-child{padding-left:0;}
#gnb .categoryList ul li .dep-wrap{width:50%; display: inline-block; margin-right:-4px; vertical-align: top; }
#gnb .categoryList ul li .dep-wrap .dep1{font-weight:500;}
#gnb .categoryList ul li .dep-wrap p[class*="dep"]{padding:3px 0;}
#gnb .categoryList ul li .dep-wrap p > a:hover{color:#222; font-weight: 500;}


/* 2020-07-28 */
.mob_search_container{background-color:#f5f5f5; border-top: 1px solid #e1e1e1;
     position: absolute; top:100%; width:100%; padding-top:20px; padding-bottom:20px; display: none;
    -webkit-box-shadow: 0 3px 10px rgba(110, 110, 110, 0.1);
    -moz-box-shadow: 0 3px 10px rgba(110, 110, 110, 0.1);
    box-shadow: 0 3px 10px rgba(110, 110, 110, 0.1);
}
.mob_search_container .nav-search{position: relative; width: 90%; height:40px; max-width: 640px; padding-left:16px; padding-right:16px; margin:0 auto;}
.mob_search_container .nav-search input{background-color:#fff; border:1px solid #d1d1d1; height:40px; width: 100%; padding-left:16px; padding-right:52px;}
.mob_search_container .header-search-icon{top:50%; transform: translateY(-50%); bottom:initial; right:30px; width:17px;}
.mob_search_container .header-search-icon img{height:17px;}

.mobile_nav_inner.right .header-search-icon{width: 20px; right:0; bottom:-10px;}
.mobile_nav_inner.right .header-search-icon img{height:20px;}

.mobile_nav_inner.right .header-search-icon:nth-child(1){right:32px; width: 21px;}
.mobile_nav_inner.right .header-search-icon:nth-child(1) img{height: 21px;}


.mobile_nav_inner .cart-ea{position: absolute; color:#fff; z-index: 8;text-align: center; line-height: 1.5;
    background-color:#999; position: absolute; display: block; z-index: 7; width:auto;
    height:17px; border-radius: 50%; min-width: 17px; right:-10px; top:-3px;}
.mobile_nav_inner .cart-ea .cart-q{display:block; font-size:11px; padding-left:2px; padding-right:2px;}


 /* ********************************************* *
 * 1200px max
 * ********************************************* */
 @media screen and (max-width: 1200px){
    .nav_inner.right{right:20px;}
    .gnb_wrap{padding:0 20px;}
    
}

 /* ********************************************* *
 * 1024px max
 * ********************************************* */
 @media screen and (max-width: 1024px){
 
    .header .main_nav{display:none;}
    .mobile_gnb_wrap{display: block;}

    /* mobile header를 위한 wrap */
    .wrap_container {position: relative; width: 100%;
        -moz-transition: all 0.3s cubic-bezier(0.24, 1.8, 0.68, 0.98); -o-transition: all 0.3s cubic-bezier(0.24, 1.8, 0.68, 0.98);
        -webkit-transition: all 0.3s cubic-bezier(0.24, 1.8, 0.68, 0.98); transition: all 0.3s cubic-bezier(0.24, 1.8, 0.68, 0.98);}
    .wrap_container.menu-opened {-moz-transform: translateX(-20em); -ms-transform: translateX(-20em); -webkit-transform: translateX(-20em); transform: translateX(-20em);}
 
    /* mobile header */
    .header .mobile_nav{display:block; height:50px; border-bottom:1px solid rgba(0,0,0,0); position: relative; background-color:rgba(255,255,255,1); z-index:100;}
    .mobile_nav.active{background-color:#fff;}
    .mobile_nav_inner.left{left:20px; top:55%; transform: translateY(-50%); position: absolute;}
    .mobile_nav_inner.mid{position: absolute; top:55%; left:50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);}
    .mobile_nav_inner.right{position: absolute; right:20px; top:50%; transform: translateY(-50%);}

    /* mobile menu */
    .mobile_gnb_wrap{position: relative; width: 100%; height:100%; z-index: 9999;}

    .mobile_gnb_wrap.opened{position: absolute; top:0; -moz-transform: translateX(-100%); -ms-transform: translateX(-100%);
        -webkit-transform: translateX(-100%); transform: translateX(-100%); }
    .mobile_gnb_wrap.opened .mobile_gnb{display: block;}

    .mobile_gnb { position: relative; display: none; padding:20px; height:100%;
        left:100%; width: 100%; top:50px; background:rgba(255,255,255,1); border-left:1px solid rgba(255,255,255,.1); overflow-y: auto;}

    .mobile_gnb li.depth1 > a{height:56px; font-weight: 500; font-size:1.125em;  width: 100%;
        display: flex; display: -ms-flexbox; display: -webkit-flex;
        -ms-flex-align: center; align-items: center;
    }
    .mobile_gnb li.depth1:first-child > a{margin-top:0;}
    .mobile_gnb > li a{ display: inline-block; cursor: pointer; color:#333;}

    .mobile_gnb .nav-login .cart-btn-con{position: relative;}

    /* 모바일 언어 */
    .mobile_gnb .nav-lang-li{position:initial; right:inherit; left:0; display: inline-block; width:auto; margin-bottom:8px;}
    .mobile_gnb .nav-lang-li .nav-lang > dl{position: relative;}

    /* mobile dept 2 */
    .mobile_sub_dep {display: none;}
	.mobile_sub_dep > ul li a{font-size:0.95em; min-height:36px; margin-top:8px;}

    /* burger menu */
    .burger_menu { width: 1.5em; margin: auto; vertical-align: middle;text-indent: -9999px; -webkit-transition: all, 0.3s;transition: all, 0.3s;}
    .burger_menu span { display: block; position: relative;height: 1px; width: 1.5em; background-color: #111; top:50%;}
    .burger_menu span::before, .burger_menu span::after {
    -webkit-transition: all, 0.3s; transition: all, 0.3s;
    content: ""; display: block; background-color: #111; width: 100%; height: 1px; position: absolute;}
    .burger_menu span::after {top: 0.5em;}
    .burger_menu span::before { bottom: 0.5em;}
    .burger_menu.actived {
    overflow: visible;
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    }
    .burger_menu.actived span::before, .burger_menu.actived span::after {
    width: 50%; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0;transform-origin: 0 0;}
    .burger_menu.actived span::before {
    bottom: 0; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg);  transform: rotate(45deg);}
    .burger_menu.actived span::after {
    top: 0; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
    .burger_menu.actived:hover {
    -moz-transform: translateX(0.2em) rotate(180deg); -ms-transform: translateX(0.2em) rotate(180deg);
    -webkit-transform: translateX(0.2em) rotate(180deg); transform: translateX(0.2em) rotate(180deg);}

    /* 모바일용 search */
    .nav-search input{background-color:#fff; height:36px; padding:6px; padding-right:33px; border:1px solid #d1d1d1; width:100%;}
    .header-search-icon{right:10px; bottom:-3px;}

    .mob_menu_btn{position: absolute; height:24px; width:24px; left:0; top:-11px;}


 }

 /* ********************************************* *
 * 640px max
 * ********************************************* */
 @media screen and (max-width: 640px){

    .f-info{display: inline-block; vertical-align: top;}
    .f-info:nth-child(2) p i{display: inline-block;}
    .f-info h4{font-size:1em;}
    .f-info .num{font-size:1.05em;}
    .f-info p{font-size:.85em; letter-spacing: -.5px;}
    .f-info p i{display:block;}

    .footer .down_catal{width: 100%; display: block; background-color: #fff; padding: 5px; margin-top: 7px;}
    .footer .catal_list{width: 100%;}

 }

 /* ********************************************* *
 * 576px max
 * ********************************************* */
 @media screen and (max-width: 576px){
 

 .footer{text-align: center;}
 .sidebar .kakao, .sidebar .blog{right:20px; bottom:24px; width: 48px; height:48px;}
 .sidebar .blog{bottom:84px;}

 .footer .catal_list{top: -145px;}
 
 
 }