/* BASIC css start */
#container{overflow-x: hidden;}
.menu_on {height:100%; overflow:hidden;}
.menu_off {height:auto; overflow:initial;}
#header {width:100%;}
#header .headerTop {min-width:275px; text-align:center; padding-right:45px; background-color:#3e4347;}
#header .headerTop a {width:25%; height: 36px; line-height: 36px; background-color:#3e4347; color:#fff; display:inline-block; border-left:1px solid #373737; margin-left:-1px;}
#header .headerTop a .fa {vertical-align:top; position: relative; top:12px;}
#header #menu {width:45px; background-color:#ab3e41; position:absolute; right:0;}
#header #menu .fa {top:5px;}
#header .headerBottom {padding:0 10px; margin-bottom: 20px;}
#header .headerBottom h1 {font-size:2.333em;}
#header .headerBottom .headerBottomLeft {float:left; margin-top: 22px;}
#header .headerBottom .headerBottomRight {float:right; margin-top: 20px;}
#header .headerBottom .headerBottomRight a {margin-left:17px; color:#7d7d7d;}
#header .headerBottom .headerBottomRight a .fa-bookmark-o {color:#f1494d;}
#header .headerBottom .headerBottomRight .cart {position:relative;}
#header .headerBottom .headerBottomRight .cart sup {width:12px; height:12px; background-color:#f1191f; color:#fff; border-radius:6px; position:absolute; top:-12px; right:-5px; text-align: center; line-height: 12px;}
#header .search {height:42px; position:relative; left:0; right:0; background-color:#ab3e41; padding-right:45px; text-align:center; display:none; z-index:10;}
#header .search .searchBox {width:100%;}
#header .search .searchBox input {width:90%; height:30px; border:0px none; margin-top: 6px; padding: 0 5px;}
#header .search .btn_search {width:45px; height:42px; line-height:50px; background-color:#822023; position:absolute; top:0; right:0; color:#fff; text-align:center;}
.searchBox_in{display:none; position: absolute;
    top: 20px;
    left: 70px;     border-bottom: 1px solid #cccccc;
    width: 63%;}
.searchBox form fieldset a{float: left; transition: 0.2s;}
.sear_form {float: left; width: 86%;}
.sear_form input{border: 0;
    padding-right: 10px; width: 95%;}


/*menu icon*/
.menu-icon { width: 28px; height: 20px;position: absolute; top: 25px; left: 20px; z-index: 20; margin: auto; cursor: pointer;}
.menu-icon .line-1,
.menu-icon .line-2,
.menu-icon .line-3 {
  height: 2px;
  width: 100%;
  background-color: #333;
  -webkit-transition: background-color .2s ease-in-out;
  transition: background-color .2s ease-in-out;
}
.menu-icon .line-1 {
  -webkit-animation: animate-line-1-rev .7s ease-in-out;
          animation: animate-line-1-rev .7s ease-in-out;
}
.menu-icon .line-2 {
  margin: 7px 0;
  -webkit-animation: animate-line-2-rev .7s ease-in-out;
          animation: animate-line-2-rev .7s ease-in-out;
}
.menu-icon .line-3 {
  -webkit-animation: animate-line-3-rev .7s ease-in-out;
          animation: animate-line-3-rev .7s ease-in-out;
}
.menu-icon:hover .line-1,
.menu-icon:hover .line-2,
.menu-icon:hover .line-3 {
  background-color: #333;
}
.menu-icon.active .line-1,
.menu-icon.active .line-2,
.menu-icon.active .line-3 {
  background-color: #333;
}
.menu-icon.active .line-1 {
  -webkit-animation: animate-line-1 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards;
          animation: animate-line-1 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards;
}
.menu-icon.active .line-2 {
  -webkit-animation: animate-line-2 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards;
          animation: animate-line-2 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards;
}
.menu-icon.active .line-3 {
  -webkit-animation: animate-line-3 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards;
          animation: animate-line-3 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards;
}

.no-animation {
  -webkit-animation: none !important;
  animation: none !important;
}

@-webkit-keyframes animate-line-1 {
  0% {
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
            transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    -webkit-transform: translate3d(0, 9px, 0) rotate(0);
            transform: translate3d(0, 9px, 0) rotate(0);
  }
  100% {
    -webkit-transform: translate3d(0, 9px, 0) rotate(45deg);
            transform: translate3d(0, 9px, 0) rotate(45deg);
  }
}

@keyframes animate-line-1 {
  0% {
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
            transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    -webkit-transform: translate3d(0, 9px, 0) rotate(0);
            transform: translate3d(0, 9px, 0) rotate(0);
  }
  100% {
    -webkit-transform: translate3d(0, 9px, 0) rotate(45deg);
            transform: translate3d(0, 9px, 0) rotate(45deg);
  }
}
@-webkit-keyframes animate-line-2 {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
}
@keyframes animate-line-2 {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
}
@-webkit-keyframes animate-line-3 {
  0% {
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
            transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    -webkit-transform: translate3d(0, -9px, 0) rotate(0);
            transform: translate3d(0, -9px, 0) rotate(0);
  }
  100% {
    -webkit-transform: translate3d(0, -9px, 0) rotate(135deg);
            transform: translate3d(0, -9px, 0) rotate(135deg);
  }
}
@keyframes animate-line-3 {
  0% {
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
            transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    -webkit-transform: translate3d(0, -9px, 0) rotate(0);
            transform: translate3d(0, -9px, 0) rotate(0);
  }
  100% {
    -webkit-transform: translate3d(0, -9px, 0) rotate(135deg);
            transform: translate3d(0, -9px, 0) rotate(135deg);
  }
}
@-webkit-keyframes animate-line-1-rev {
  0% {
    -webkit-transform: translate3d(0, 9px, 0) rotate(45deg);
            transform: translate3d(0, 9px, 0) rotate(45deg);
  }
  50% {
    -webkit-transform: translate3d(0, 9px, 0) rotate(0);
            transform: translate3d(0, 9px, 0) rotate(0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
            transform: translate3d(0, 0, 0) rotate(0deg);
  }
}
@keyframes animate-line-1-rev {
  0% {
    -webkit-transform: translate3d(0, 9px, 0) rotate(45deg);
            transform: translate3d(0, 9px, 0) rotate(45deg);
  }
  50% {
    -webkit-transform: translate3d(0, 9px, 0) rotate(0);
            transform: translate3d(0, 9px, 0) rotate(0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
            transform: translate3d(0, 0, 0) rotate(0deg);
  }
}
@-webkit-keyframes animate-line-2-rev {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes animate-line-2-rev {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes animate-line-3-rev {
  0% {
    -webkit-transform: translate3d(0, -9px, 0) rotate(135deg);
            transform: translate3d(0, -9px, 0) rotate(135deg);
  }
  50% {
    -webkit-transform: translate3d(0, -9px, 0) rotate(0);
            transform: translate3d(0, -9px, 0) rotate(0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
            transform: translate3d(0, 0, 0) rotate(0deg);
  }
}
@keyframes animate-line-3-rev {
  0% {
    -webkit-transform: translate3d(0, -9px, 0) rotate(135deg);
            transform: translate3d(0, -9px, 0) rotate(135deg);
  }
  50% {
    -webkit-transform: translate3d(0, -9px, 0) rotate(0);
            transform: translate3d(0, -9px, 0) rotate(0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
            transform: translate3d(0, 0, 0) rotate(0deg);
  }
}
/* 상단 */
#header .headerTnb{background: #fff; height: 68px; position: fixed;
    z-index: 30;
    width: 100%;    top: 0;
    left: 0;
    right: 0;}
.searchBox{position: absolute;
    top: 20px;
    left: 70px;}
.tnbRight{width: 26px;
    position: absolute;
    top: 17px;
    right: 20px;}
.tnbRight a .user_basket_quantity{position: absolute;
    top: 13px;
    left: 50%;
    font-size: 1.32em;
    transform: translateX(-50%);
    font-family: 'Source Sans Pro', sans-serif;
}
.logoarea{padding: 93px 20px 25px;}
.logoarea a img{ width: 45%;}

/*슬라이드 메뉴*/
.logo_in{padding: 25px 0 45px;
    margin-left: 21px;}
.slidehae{    padding: 0 40px 50px; overflow-y: auto; height: calc(100% - 200px);}
.smenuBox{background: #fff;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 50;
    left:-150%;
    transition: 0.7s;
    top: 68px;
    }
.smenuBox.on {left:0px;}
.smenuBox .nalog{padding-bottom: 30px;}
.smenuBox .nalog ul li{line-height: 38px;}
.smenuBox .nalog ul li a{font-size: 1.2em;
    color: #7f7f7f;
    font-family: 'Montserrat', 'Source Sans Pro', sans-serif;}
.headerGnb .gnbInner ul{    padding: 12px 0;}
.headerGnb .gnbInner ul li{line-height: 38px;}
.headerGnb .gnbInner ul li a{font-size: 1.4em;
    color: #212121;
    font-family: 'Montserrat','Source Sans Pro', sans-serif;}
.manuinba{position: absolute;
    bottom: 140px;
    left: 120px;}

/* 최근 본 상품 */
#ly_lastView {width:100%; position:absolute; top:36px; left:0; background-color:#fff; z-index:101; padding-bottom:20px; box-shadow: 0 1px 10px #717171; display:none;}
/* //최근 본 상품 */

@media screen and (min-width:768px) {
    #header #menu {width:85px;}
    #header .headerTop {padding-right:85px;}
    #header .search {padding-right:85px;}
    #header .search .searchBox input {width:95%;}
    #header .search .btn_search {width:85px;}
}
/* BASIC css end */