/* BASIC css start */
#header {position: fixed; top: 0; left: 0; }
#header .WH {display:block !important; } 
#header .BK {display:none !important; }
#header .header_btm #hd_menu, #header .header_top .gnb li #hd_search_box .search_close_btn{color:#fff !important; }
#header .header_top .gnb li #hd_search_box input {border-color:#fff !important}
#header.headroom--not-top .WH {display:none!important; }
#header.headroom--not-top .BK {display:block!important; }
#header.headroom--not-top  .header_btm #hd_menu, #header.headroom--not-top  .header_top .gnb li #hd_search_box .search_close_btn{color:#000 !important; }
#header.headroom--not-top  .header_top .gnb li #hd_search_box input {border-color:#000 !important}

#footer {margin:0 !important; }


.landing ul {display: flex;align-items: flex-start;justify-content: flex-start;}
.landing ul li {height: 100vh;width:33.33%;;}
.landing ul li a {width:100%;height: 100%;display: flex;align-items: flex-end;justify-content: center;box-sizing: border-box;padding-bottom: 20%; background-repeat:no-repeat;background-size:cover;background-position:center; -webkit-transition: all 700ms ease; -moz-transition: all 700ms ease; -ms-transition: all 700ms ease; -o-transition: all 700ms ease;  transition: all 700ms ease}
.landing ul li a .txt {text-align:center;display:flex;flex-direction: column;align-items: center;justify-content: space-between;height: 40%;}
.landing ul li a .txt .tt {font-size:40px; color:#fff; font-weight:400}
.landing ul li a .txt .link {display:flex;justify-content: center; align-items: center;  width: 172px;height: 54px; border: 2px solid rgba(255, 255, 255, 0.5); color:#fff; font-size:14px; -webkit-transition: all 700ms ease; -moz-transition: all 700ms ease; -ms-transition: all 700ms ease; -o-transition: all 700ms ease;  transition: all 700ms ease;}

.landing ul #jsm a { background-image:url(/design/jsmbeauty/img/brand/img_landing01_bk.png)}
.landing ul #bs a { background-image:url(/design/jsmbeauty/img/brand/img_landing02_bk.png)}
.landing ul #sz a { background-image:url(/design/jsmbeauty/img/brand/img_landing03_bk.png)}
.landing ul #kids a { background-image:url(/design/jsmbeauty/img/brand/img_landing04_bk.png)}

.landing ul li:hover  a .txt .link {color:#000; background:#fff; }
.landing ul #jsm:hover a { background-image:url(/design/jsmbeauty/img/brand/img_landing01.jpg)}
.landing ul #bs:hover a { background-image:url(/design/jsmbeauty/img/brand/img_landing02.jpg)}
.landing ul #sz:hover a { background-image:url(/design/jsmbeauty/img/brand/img_landing03.jpg)}
.landing ul #kids:hover a { background-image:url(/design/jsmbeauty/img/brand/img_landing04.jpg)}
/* BASIC css end */

