/* 헤더 */
header{position: fixed;width:100%;  z-index: 999;}
header .in-header{color:#fff;border-bottom: 1px solid rgb(255 255 255 / 39%);}
header .in-header .h-top{border-bottom: 1px solid rgb(255 255 255 / 39%);}
header .in-header .h-top > div{ display: flex; justify-content: space-between; width: 100%;}
header .in-header ul{ display: flex; justify-content: flex-end;}
header .in-header .h-top > div > ul{ padding: 12px 0px; font-size: 16px; }
header .in-header .h-top .thumbnail{position:relative;}
header .in-header .h-top .thumbnail a{    padding-bottom: 7px;}
header .in-header .h-top .count{position:absolute;    width: 100%; height: 100%; transition:all 0.2s;}
header .in-header .h-top .count a{display:block;}
header .in-header .h-top> div > ul > li a{position:relative; padding:0px 16px; font-size: 15px;}
header .in-header .h-top> div > ul > li span{}
header .in-header .h-top> div > ul > li a:before{position:absolute; content:""; width:4px; height:4px; border-radius:50%; background:#fff;    right: 0; top: 50%; transform: translateY(-50%);}
header .in-header .h-top> div > ul > li:last-child a:before{display:none;}
header .in-header .h-btm{display: flex; justify-content: space-between; padding:20px 0px;    align-items: center;}
header .in-header .h-btm i{width:170px;}
header .in-header .h-btm i:first-child{display: block;}
header .in-header .h-btm i.logo-2{display:none;}
header .in-header .h-btm > ul{}
.submenu { display: none; position: absolute; z-index: 99;color: #000; text-align: center; background: #fff; width: 147px }
:lang(en) .submenu{width:100%;}
:lang(en) .submenu > li > a{padding:5px; width:100%;}
header .in-header .h-btm > ul ul{  display: none; top: 50px; left: 50%; transform: translateX(-50%);}
/* header .in-header .h-btm > ul > li:hover ul{display: block;} */
header .in-header .h-btm > ul > li{position:relative;}
header .in-header .h-btm > ul > li > a{position:relative; padding: 20px; font-size: 17px;}
header .in-header .h-btm > ul > li > a.on:before{    position: absolute; content: ""; background: rgb(40 58 103 / 14%); height: 12px; width: 90%; left: 50%; transform: translate(-50%,-50%); top: 50%;}
.submenu > li > a { display: inline-block; padding: 8px 0px; color: #000; width: 147px ; font-size: 15px;  }
.submenu > li > a:hover {color:#fff; background: #283a67;}

/* 모바일메뉴 */
.m-head {display: none;}
.m-head .m-menu-wrap{width:50px;height:100%;position:relative;}
.m-head .m-menu-wrap .res-menu{ position:absolute; top:50%; left:50%; z-index:9; width:20px; height:12px; transform:translate(-50%, -50%); cursor:pointer;}
.m-head .m-menu-wrap .res-menu span{ display:block; position:absolute; width:100%; height:2px; background:#fff;  transition: all .3s;}
.m-head .m-menu-wrap span:nth-child(1){top:0;left:0; }
.m-head .m-menu-wrap span:nth-child(2){ top:50%; left:50%; transform:translate(-50%, -50%);}
.m-head .m-menu-wrap span:nth-child(3){bottom:0;left:0;}
#sideopen {display:none;}
.m-head input[type="checkbox"]:checked + label > .res-menu span:nth-child(1){ top:50%; transform:translateY(-50%) rotate(-45deg); background:#283a67;}
.m-head input[type="checkbox"]:checked + label > .res-menu span:nth-child(2){display:none; background:#283a67;}
.m-head input[type="checkbox"]:checked + label > .res-menu span:nth-child(3){ top:50%; transform:translateY(-50%) rotate(45deg); background:#283a67;}
.sidebar{ position:fixed; max-width:100%; width:350px; height: calc(100vh - 51px); top: 51px; right:-350px; background: rgb(255 255 255 / 88%); transition:right .5s;}
.m-head input[type="checkbox"]:checked + label + .sidebar{ right:0;}
.sidebar .accordion > ul{border-bottom:1px solid rgb(40 58 103 / 23%); }
.sidebar .accordion > ul li{width: 33.3333%; text-align: center;border-right:1px solid rgb(40 58 103 / 23%); padding:10px}
.sidebar .accordion > ul li:last-child{border-right:0px;}
.sidebar .accordion > ul li a{color:#283a67; }

/* 아코디언 메뉴 */
  .accordion{padding-top: 73px;}
  .cate{  width:100%;  position:relative;  border-bottom:1px solid #a1a1a1;}
  .cate .m-menu{  display:block;  position:relative;  width:100%;  background:#283a67;  height:60px; }
  .cate .m-menu .menulink{ display:block; color:#fff; text-decoration:none; width:70%; padding-left:15px; line-height:60px; font-size:16px;}
  .cate .m-menu .subopen{  position:absolute;  width:20px;  height:20px;  right:15px;  padding:0;  top:0;  bottom:0;  margin:auto; }
  .cate .m-menu .subopen span{  position:absolute;  display:block; width:8px;  height:8px;  top:calc(50% - 4px); left:50%; transform:translate(-50%, -50%) rotate(45deg); border-right:1px solid #fff;  border-bottom:1px solid #fff; transition:.3s;}
  .cate .m-menu .subopen.active span{ top:50%; transform:translate(-50%, -50%) rotate(-135deg);}
  .cate ul{    flex-direction: column;}
  .cate ul li{ }
  .cate ul li a{display:block; width:100%; color:#333; border-bottom: 1px solid #b5b5b5;padding:11px; font-size:14px;}
  .cate ul li:last-child{border-bottom: 0px;}




/* 이벤트 */
.h_event{background:#fff;}
.h_event3{border-bottom: 1px solid #ccc !important;}
.h_event2{color:#333}
.h_event4{display: block !important;}
.h_event5{display: none !important;}
.h_event6{background:#283a67 !important;}
.h_event7{color:#333 !important;}




/* 푸터 */
footer{background:#ccc;}
footer .in-footer{font-size: 15px;}
footer .in-footer > div{padding:30px 0px;}
footer .in-footer .foot-top{border-bottom: 1px solid #ececec;}
footer .in-footer .foot-top span{position:relative; padding-right: 15px; margin-right: 15px;}
footer .in-footer .foot-top span:before{position:absolute; content:""; right:0; top:50%; transform:translateY(-50%); width:5px; height:5px; background:#8b8b8b; border-radius:50%;}
footer .in-footer .foot-top span:last-child:before{display: none;}
footer .in-footer .foot-top span:first-child{color:#283a67;}
footer .in-footer .foot-btm{display: flex; justify-content: space-between; align-items: center;}
footer .in-footer .foot-btm ul{}
footer .in-footer .foot-btm ul li{    display: flex; margin-bottom: 10px;}
footer .in-footer .foot-btm ul li p{position:relative; padding-right: 15px;margin-right: 15px;}
footer .in-footer .foot-btm ul li p:last-child:after{display: none;}
footer .in-footer .foot-btm ul li p:after{position:absolute; content:""; right:0; top:0; width:1px; height: 13px; background: #8b8b8b; top: 50%; transform: translateY(-50%);}
footer .in-footer .foot-btm div{width:150px; opacity: 0.7;}
footer .in-footer .foot-btm ul li:last-child p{font-size: 14px;  color: #8b8b8b; }


/* scroll top 버튼 */
.btn_gotop { display:none; position:fixed; bottom:30px; right:30px; z-index:999; background:#fff; color:#333; padding:14px; border-radius: 50%;
            width:50px; height:50px; border:1px solid #ddd;}
.btn_gotop span{display: block; width: 18px;position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)}
.btn_gotop span img{transform:rotate(180deg)}

/* 장바구니 버튼 */
.btn_cart{position:fixed; bottom:90px;right:30px; z-index:999; width:50px; height:50px; border:1px solid #ddd;  background:#fff;border-radius: 50%;}
.btn_cart a{display:block; width:50px;padding:14px; }
.btn_cart a img{}
.btn_cart span{position: absolute; top: 0px; right: -5px; background: #000; color: #fff; width: 21px; height: 21px; border-radius: 50%; padding: 0px 5px 0px; margin: 0 auto;}

/* 구글번역 */
.world_lang{    border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;  z-index: 999; display: flex; align-items: center; justify-content: center;}
.world_lang .goog-te-gadget{font-size: 0;}
.world_lang .goog-te-gadget .goog-te-combo{position:relative; width:100px; background-color: #fff; border: 1px solid #fff; padding: 5px 8px; font-size: 10px; border-radius: 5px !important;}
.goog-te-gadget img{display:none;}
.world_lang span a{font-size:0 !important;}
.world_lang .goog-te-gadget select{-webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(https://d32l5afo82wu4y.cloudfront.net/static/user/img/legacy-external/lbcontents/images/IPIACOSMETIC/icon-arrow-st2.png) no-repeat 94% 50%;
  background-size: 8px 5px;}

.VIpgJd-ZVi9od-ORHb-OEVmcd{display: none !important;}
body{top: 0 !important}

#modal.user-modal,
#login_modal.user-modal,
#secession_modal.user-modal {
  position: fixed !important;
  inset: 0 !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  max-width: none !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  box-sizing: border-box;
  overflow: auto;
  padding: 24px !important;
  background: rgba(18, 27, 43, 0.56) !important;
}

#modal.user-modal[style*="display: block"],
#modal.user-modal[style*="display:block"],
#login_modal.user-modal[style*="display: block"],
#login_modal.user-modal[style*="display:block"],
#secession_modal.user-modal[style*="display: block"],
#secession_modal.user-modal[style*="display:block"] {
  display: flex !important;
}

#modal.user-modal .modal-wrap,
#login_modal.user-modal .modal-wrap,
#secession_modal.user-modal .modal-wrap {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  margin: auto !important;
  width: min(430px, calc(100vw - 40px)) !important;
  max-width: min(430px, calc(100vw - 40px)) !important;
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  border: 1px solid rgba(40, 58, 103, 0.16);
  border-radius: 12px;
  background: #fffdf8;
  box-shadow: 0 28px 70px rgba(18, 27, 43, 0.25);
  text-align: left !important;
}

#modal.user-modal .modal-container,
#login_modal.user-modal .modal-container,
#secession_modal.user-modal .modal-container {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
  padding: 24px !important;
  text-align: left !important;
}

#modal.user-modal .modal-close,
#login_modal.user-modal .modal-close,
#secession_modal.user-modal .modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f4efe5;
  color: #6a737d;
  font-size: 18px;
  line-height: 1;
}

#modal.user-modal .modal-out-tit,
#login_modal.user-modal .modal-out-tit,
#secession_modal.user-modal .modal-out-tit {
  padding: 0 40px 10px 0;
  color: #283a67;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
  text-align: left !important;
}

#modal.user-modal .modal-container-inner .txt,
#login_modal.user-modal .modal-container-inner .txt,
#secession_modal.user-modal .modal-container-inner .txt {
  margin: 0;
  color: #1f2933;
  font-size: 15px;
  line-height: 1.65;
  text-align: left !important;
  word-break: keep-all;
}

#modal.user-modal .modal-container-inner .button,
#login_modal.user-modal .modal-container-inner .button,
#secession_modal.user-modal .modal-container-inner .button {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  width: calc(100% + 48px) !important;
  min-width: calc(100% + 48px) !important;
  box-sizing: border-box;
  margin: 22px -24px -24px;
  padding: 16px 20px 20px;
  border-top: 1px solid #ece4d7;
  background: #fbf8ef;
  text-align: right !important;
}

#modal.user-modal .modal-container-inner .button button,
#login_modal.user-modal .modal-container-inner .button button,
#secession_modal.user-modal .modal-container-inner .button button {
  width: auto !important;
  min-width: 88px;
  min-height: 42px;
  margin: 0 !important;
  padding: 0 18px;
  border: 1px solid #d9d1c2;
  border-radius: 8px;
  background: #ffffff;
  color: #40515a;
  font-size: 14px;
  font-weight: 800;
  text-align: center !important;
}

#modal.user-modal .modal-container-inner .button button:first-child,
#login_modal.user-modal .modal-container-inner .button button:first-child,
#secession_modal.user-modal .modal-container-inner .button button:first-child {
  border-color: #283a67;
  background: #283a67;
  color: #ffffff;
}


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

  header .in-header .h-btm i:first-child{margin-left: 10px;}

}

/* ********************************************* *
* 1400px
* ********************************************* */
@media screen and (max-width: 1400px){
  :lang(en) header .in-header .h-btm > ul > li > a{padding: 10px;}

}

/* ********************************************* *
* 1200px
* ********************************************* */
@media screen and (max-width: 1200px){
  :lang(en) .m-head{display: block;}
  :lang(en) header .in-header .h-btm > ul{display: none;}

}

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

  footer .in-footer > div{padding: 20px 0px;}
  footer .in-footer .foot-btm{    align-items: flex-start; flex-direction: column;}
  footer .in-footer .foot-btm ul li{margin-bottom: 5px;flex-wrap: wrap;}

  footer .in-footer .foot-btm div{margin-top:16px;    width: 130px;}
}


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

.m-head{display: block;}
header .in-header .h-btm > ul{display: none;}

footer .in-footer .foot-btm ul li:nth-child(2){ line-height: 1.8;}



}


/* ********************************************* *
* 768px
* ********************************************* */
@media screen and (min-width: 769px){



}
@media screen and (max-width: 768px){

  footer .in-footer .foot-top span{font-size: 14px;}
  footer .in-footer > div{padding:13px 0px;}
  footer .in-footer .foot-btm ul li p{font-size: 14px;}
  footer .in-footer .foot-btm ul li:last-child p{font-size: 13px;}

  #modal.user-modal,
  #login_modal.user-modal,
  #secession_modal.user-modal {
    padding: 16px !important;
  }

  #modal.user-modal .modal-wrap,
  #login_modal.user-modal .modal-wrap,
  #secession_modal.user-modal .modal-wrap {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
  }

}


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

  header .in-header .h-btm i{width:140px;}
  header .in-header .h-top ul{padding: 9px 0px;}
  header .in-header .h-top ul li a{font-size: 14px;}

  footer .in-footer .foot-btm ul li:first-child p{line-height: 1.8;}
  footer .in-footer .foot-top span{padding-right:15px; margin-right:10px;}

  .sidebar{height: calc(100vh - 45px); top: 45px;}
  .accordion{    padding-top: 66px;}
  header .in-header .h-btm i.logo-2{width:130px}
  header .in-header .h-top ul li a{padding:0px 7px; font-size: 12px;}

  header .in-header .h-top> div > ul > li a{font-size: 13px;}


}


/* ********************************************* *
* 500px
* ********************************************* */
@media screen and (max-width: 500px){
  footer .in-footer .foot-top span{display:inline-block;    text-align: center;}

  header .in-header .h-top > div{align-items: flex-start; flex-direction: column;}
  header .in-header .h-top > div > ul{width:100%;}
  header .in-header .h-top> div > ul > li:last-child a{padding-right:0px;}


}

/* ********************************************* *
* 400px
* ********************************************* */
@media screen and (max-width: 400px){
  header .in-header .h-top > div > ul{padding:5px 0px;}
  header .in-header .h-top> div > ul > li a{padding: 0px 8px;}

}