/* BASIC css start */
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 100;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');}



@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 300;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');}



@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');}



@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');}



@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 700;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');}


/* font converted using font-converter.net. thank you! */
@font-face {
  font-family: "BrandonGrotesque-Regular";
  src: url("//skin.makeshop.co.kr/skin/swag/fonts/BrandonGrotesque.eot"); /* IE9 Compat Modes */
  src: url("//skin.makeshop.co.kr/skin/swag/fonts/BrandonGrotesque.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("//skin.makeshop.co.kr/skin/swag/fonts/BrandonGrotesque.otf") format("opentype"), /* Open Type Font */
    url("//skin.makeshop.co.kr/skin/swag/fonts/BrandonGrotesque.svg") format("svg"), /* Legacy iOS */
    url("//skin.makeshop.co.kr/skin/swag/fonts/BrandonGrotesque.ttf") format("truetype"), /* Safari, Android, iOS */
    url("//skin.makeshop.co.kr/skin/swag/fonts/BrandonGrotesque.woff") format("woff"), /* Modern Browsers */
    url("//skin.makeshop.co.kr/skin/swag/fonts/BrandonGrotesque.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}




#mask { display:none; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:200 }

.clearfix:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.displaynone {
	display:none !important;}
.trans{
    -webkit-transition: all 0.3s ease;
    -khtml-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.trans1{
    -webkit-transition: all 0.3s ease-out;
    -khtml-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.trans2{
    -webkit-transition: all 0.3s ease-in-out;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
/* header */ 
#header {
    width: 100% !important;
    position: fixed;
    z-index: 199;
    background: #fff;
    border-bottom: 1px solid #ccc;
    /*padding-right: 150px;*/
    -webkit-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
#header.fix {
    border-bottom: 1px solid #000;
    transform: translateY(-162px);
}
.top_H_W {border-bottom: 1px solid #f0f0f0;}

.top_H {
    margin: 0 auto;
    position:relative;
    width: 1260px;
    height: 39px;
    
}
.top_H:after { display:block; clear:both; content:'' }

.top_H_L {
    float: left;
}

.top_H_R {
    float: right;
}

.top_H ul {}

.top_H ul li {
    padding-right: 12px;
    float:left;
}

.top_H ul li a {
    display: block;
    height: 39px;
    color: #929292;
    line-height: 39px;
    font-size: 11px;
}

.top_H ul li a:hover {
    color: #000000;
}

.top_H .top_H_R ul li a {
    font-size: 12px;
    font-family: 'lato', sans-serif;
    position: relative;
}

.top_H .top_H_R ul li a.login {
    color: #000;
}
.join_point {
    color: #fff;
    background: url(//skin.makeshop.co.kr/skin/swag/images/join_p.png) no-repeat;
    border-radius: 8px;
    position: absolute;
    top: 28px;
    height: 20px;
    width: 46px;
    line-height: 16px;
    left: -8px;
    text-align: center;
    padding-top: 4px;
}

.header {
    width: 1260px;
    margin: 0 auto;
    padding: 30px 0 30px;
    font-size: 0;
}

.header .logo {
    display: inline-block;
    vertical-align: middle;
}

.header .search {
    display: inline-block;
    vertical-align: middle;
    margin-left: 45px;
    border-bottom: 2px solid #000000;
    width: 260px;
}

.header .search input.MS_search_word {
    border: 0;
    color: #000;
    font-size: 11px;
    height: 30px;
    line-height: 30px;
    outline: 0;
    width: 200px;
}

.header .search input.MS_search_word:-ms-input-placeholder {
color: #ccc !important;
}
.header .search input.MS_search_word::-webkit-input-placeholder {
color: #ccc;
}
.header .search input.MS_search_word::-moz-placeholder {
color: #ccc;
}


.header .search a {
    float: right;
    margin-top: 6px;
}



.H_menu {
    width: 1260px;
    margin: 0 auto;
}
.H_menu ul {
    font-size: 0;
    position: relative;
}
.H_menu ul .lnb_depth1 {
    display: inline-block;
    vertical-align: top;
    /* position: relative; */
}
.H_menu ul .lnb_depth1 .lnb_menu {
    /*font-family: 'Roboto', 'Dotum', sans-serif;*/
    font-family: 'Roboto', 'Noto Sans KR', 'Dotum', sans-serif;
    color: #000000;
    font-weight: 500;
    font-size: 18px;
    padding-bottom: 20px;
    display: block;
    position: relative;
}
.H_menu ul .lnb_depth1 .lnb_depth2 {
    display: none;
    background: #fff;
    border: 1px solid #000;
    width: 160px;
    position: absolute;
    top: 38px;
    z-index: 10;
    padding: 25px 10px 25px 20px;
    -webkit-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;

    right: 100;
    min-height: 100px;
}
.H_menu ul .lnb_depth1 .lnb_depth2 .cate_middle li {
    margin-bottom: 17px;
}
.H_menu ul .lnb_depth1 .lnb_depth2 .cate_middle li a {
    font-size: 14px;
    font-family: 'lato', sans-serif;
    color: #000;
}
.H_menu ul .lnb_depth1 .lnb_depth2 .cate_middle li:last-child {
    margin-bottom: 0;
}

.H_menu ul .lnb_depth1 .lnb_menu:after {content: "";background: #000;height: 5px;width: 0;position: absolute;bottom: 0;left: 0;right: 0;opacity: 0;-webkit-transition: all 0.3s ease;-khtml-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;}

.H_menu ul .lnb_depth1 .lnb_menu.active:after {
    width: 100%;
    opacity: 1;
}
.H_menu ul .lnb_depth1:last-child {
    margin-right: 0 !important;
}

.bg_img {
    position: absolute;
    right: 30px;
    top: 35px;
}

.bg_img a {
    display:inline-block;
    margin-right: 20px;
}

.bg_img a:last-child {
    margin-right: 0;
}
.bg_img a img {
    max-height: 180px;
}



/* quick */
#quick {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 150px;
    background: #fff;
    border-left: 1px solid #f0f0f0;
    z-index: 200;

    padding-top: 25px;
}

.kakao_id {
    padding: 15px;
}

.kakao_id a {
    display: block;
}

.kakao_id a:hover {
    opacity: 0.8;
}

.kakao_id a img {
    width: 100%;
}

.quick_list {
    padding: 0 10px 0 24px;
}

.quick_list ul {}

.quick_list ul li {
    margin-top: 10px;
}

.quick_list ul li a {
    color: #636363;
    font-size: 12px;
    font-family: 'Lato', sans-serif;
    position: relative;
}

.quick_list ul li a:hover {
    color: #000;
}

.join_point2 {
    position: absolute;
    top: 0;
    left: 34px;
    color: #fff;
    background: #000;
    width: 46px;
    height: 16px;
    line-height: 16px;
    border-radius: 10px;
    text-align: center;
}
.quick_list ul li.hr {
    background: #929292;
    width: 10px;
    height: 1px;
    margin: 20px 0;
}
.prd_recent_wrap {
    position: relative;
    padding: 0 15px 0;
    margin-top: 29px;
}
.prd_recent_wrap .prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    left:7px;
}
.prd_recent_wrap .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    right: 7px;
}
.prd_recent_wrap  li img {
    max-width: 100%;
}
.callcenter {
    padding: 25px 15px 0;
    text-align: center;
}
.callcenter .number {
    color: #000;
    font-weight: 900;
    font-family: 'Lato', sans-serif;
    font-size: 22px;
}
.callcenter .open_time {
    color: #767676;
    font-size: 11px;
    line-height: 1.5;
    padding-top: 3px;
}
.quick_move {
    position: absolute;
    bottom: 0;
    font-size: 0;
    width: 100%;
    left: 0;
    right: 0;
}
.quick_move a {
    width: 50%;
    text-align: center;
    border-top: 1px solid #f0f0f0;
    -webkit-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    height: 64px;
    display: inline-block;
    /* line-height: 64px; */
    color: #6a6a6a;
    font-size: 11px;
    font-family: 'Lato', sans-serif;
    letter-spacing: 0.25px;
    background: #fff;
}
.quick_move a img {
    padding-bottom: 6px;
    display: block;
    margin: auto;
    padding-top: 20px;
}
.quick_move a.-top {
    border-right: 1px solid #f0f0f0;
}  

 

/* BASIC css end */