/* BASIC css start */
/* header */
#header { position:fixed;  top:0; left:0;  width:100%; background:rgba(255,255,255,0.9);  z-index:9999;border:0px solid #000; -ms-transition: all 0.4s ease-out;-moz-transition:all 0.4s ease-out; -webkit-transition: all 0.4s ease-out;-o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; }
#header .headerTnb { margin:0 auto; position:relative; width:100%; height:30px; *zoom:1 }
#header .headerTnb:after { display:block; clear:both; content:'' }

#header .headerTnb .tnbRight { float:right;  margin-right:60px; }
#header .headerTnb .tnbRight li { padding-left:15px; float:left }
#header .headerTnb .tnbRight li a { display:inline-block; height:30px; line-height:30px;  font-size:11px ; color:#222; letter-spacing:1px; font-weight:500;  }
#header .headerTnb .tnbRight li a:hover { text-decoration:underline  }
/*#header .headerTnb .tnbRight li a i.xi-search { font-size: 17px; line-height: 28px; }*/

#header .headerTop { margin:0 auto; position:relative; padding-top:10px; height:50px; *zoom:1 ; width:20%; border:0px solid #000 }
#header .headerTop:after { display:block; clear:both; content:'' }
#header .headerTop .tlogo { margin:0; text-align:center  }
#header .headerTop .tlogo a { font-family:  'Montserrat'; font-size:20px; color:#000; font-weight:800;  letter-spacing:6px; }
#header .headerTop .searchArea { position:absolute; top:12px; right:0; width:204px; height:40px; border-bottom:1px solid #000 }
#header .headerTop .searchArea .search { position:relative; width:204px; height:40px }
#header .headerTop .searchArea .search input { padding-left:10px; width:164px; height:39px; line-height:40px; border:none; background:#fff }
#header .headerTop .searchArea .search a { display:block; position:absolute; top:0; right:0; width:30px; height:40px; text-indent:-9999em; background:url(//image.makeshop.co.kr/makeshop/d3/basic_simple/common/btn_search.gif) 0 0 no-repeat }




/* °Ë»öâ */
#modal_search { position: fixed;left: calc(50% - 400px);top: calc(50% - 150px);border-radius: 9px;width: 700px;height: 300px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;text-align: center;z-index: 9999;background: #fff;opacity: 0;visibility: hidden; }
#modal_search.active { opacity: 1;visibility: visible;}
#modal_search > div { display: table;width: 100%;height: 100%;}
#modal_search > div > ul { display:table-cell;vertical-align: middle;}
#modal_search .sch_close {position:absolute;top:20px;right:20px;margin:auto; height:30px; width:30px; display:block; cursor:pointer;-webkit-transition:0.3s ease-in-out;-moz-transition:0.3s ease-in-out;-o-transition:0.3s ease-in-out;transition:0.3s ease-in-out;} 
#modal_search .sch_close .closeBtn:before, .closeBtn:after{content:''; height:1px; width:30px; display:block; background:#b9b9b9; position:absolute; top:15px; left:1px; transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);}
#modal_search .sch_close .closeBtn:after{transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);}
#modal_search .sch_close:hover { transform:rotate(180deg);-webkit-transform: rotate(180deg); }
#modal_search .searchTop { margin: 0 auto;width: 550px; padding:0; border-bottom:1px solid #222;}
#modal_search .searchTop .MS_search_word { margin: 0 auto; text-align: center;width: 450px; line-height: 50px; height: 50px;font-size: 20px; border: 0;letter-spacing: 0.5px; }
#modal_search .searchTop i {font-size: 20px;font-weight: normal; color: #222; }

.search .MS_search_word { border:0; border-bottom:1px solid #999; }
a.btn_search i { font-size: 13px; }

/* ¸¶½ºÅ© */
#ser_mask { position: fixed; left:0;top:0;background:rgba(0,0,0,0.5);width:100%;height:100%;z-index: 999;opacity: 0;visibility: hidden; }
#ser_mask.active { opacity: 1;visibility: visible;}






/* »ó´Ü¹ÝÀÀÇü¿µ¿ª */
@media all and (max-width :640px) {
    #content { position: relative; margin: 0 auto; padding: 70px 20px 20px 20px; min-height: 600px; border: 0px solid #000 }
    footer { margin-top: 30px; padding: 70px 20px 20px 20px; border: 0px solid #000 }
    #leftArea { display: none; }
    #loginWrap { padding-top: 0px; }
}

@media all and (min-width :641px) and (max-width :1019px) and (orientation : landscape) {
    #content { position: relative; margin: 0 auto; padding: 70px 20px 20px 20px; min-height: 600px; border: 0px solid #000 }
    footer { margin-top: 30px; padding: 70px 20px 20px 20px; border: 0px solid #000 }
    #leftArea { display: none; }
    #loginWrap { padding-top: 0px; }
}

@media all and (min-width :641px) and (max-width :1019px) and (orientation : portrait) {
    #content { position: relative; margin: 0 auto; padding: 70px 20px 20px 20px; min-height: 600px; border: 0px solid #000 }
    footer { margin-top: 30px; padding: 70px 20px 20px 20px; border: 0px solid #000 }
    #leftArea { display: none; }
    #loginWrap { padding-top: 0px; }
}

@media all and (min-width :1020px) {
    #header2 { display: none; }
    footer { margin-top: 30px; padding: 70px 60px 20px 280px; }
}
/* BASIC css end */