/* BASIC css start */
#header.showBK .WH {display:none!important; }
#header.showBK .BK {display:block!important; }
#header.showBK .header_btm #hd_menu, #header.showBK .header_top .gnb li #hd_search_box .search_close_btn{color:#000 !important; }
#header.showBK .header_top .gnb li #hd_search_box input {border-color:#000 !important}

#header.showWH .WH {display:block!important; }
#header.showWH .BK {display:none!important; }
#header.showWH .header_btm #hd_menu, #header.showWH .header_top .gnb li #hd_search_box .search_close_btn{color:#fff !important; }
#header.showWH .header_top .gnb li #hd_search_box input {border-color:#fff !important}

#header.headroom--not-top::before {display:none; }


#footer {margin-top:0 !important;  background:#000 !important;}
#container {margin-top:16px; }

.main {background:#000; }

.title_box {margin:0 auto;  }
.white {color: white;font-weight:400;font-size:42px;display:inline-block; line-height:1.2}
.grey {color:rgba(255,255,255,0.5);font-size:14px;font-weight:300;line-height:1.5;word-wrap: break-word;word-break:keep-all;}
.point {color:#EB0081}

.one {position:relative;padding-bottom: 57%;}
.one iframe {width:100%; height:100% !important; position:absolute; top:0; left:0; border:0 }

.two {background-color:#fff;text-align: center;display: flex;justify-content: center;align-items: center;padding:100px 0;position:relative;box-sizing:border-box;}
.two:before {content:"";display:inline-block;position: absolute;top: 34px;left: calc(50% - 0.5px);width: 100px;height: 1px;background-color: #000;transform: rotate(-45deg); display:none; }
.two .two_info {padding: 0 20px;}
.two span { font-weight: bold; }
.two .two_img {margin-bottom: 24px;display:flex;justify-content: center;align-items: flex-end;font-size: 16px;}
.two .two_img img {margin-right:10px;margin-bottom:5px;height: 24px;} 
.two .two_info .two_p {font-size: 14px;margin-bottom: 48px;line-height: 1.5;color: #222;font-weight: 400; word-wrap:break-word; word-break:keep-all;}


.three {width: 100%; position: relative;margin: 0 auto;padding:100px 0; box-sizing:border-box; }
.three .title_box {display:flex;justify-content: flex-start;align-items: flex-end; padding:0 20px 32px }
.three .title_box .white img {height: 38px;}
.three .title_box .grey {margin-left:16px;font-weight:300;line-height: 1;}
.three .three_pic {}
.three .pic_one {width:100%%;}
.three .pic_two {width:50%;float: left;} 
.three .pic_three {width:50%;float: left;}


.four { position:relative; padding:0 20px }
.four:before {content:"";display:inline-block;width:100%;height:100%;background: url(/design/jsmbeauty/img/brand/icon_line2.png)top right/100% auto;position:absolute;top: 0;left:0;z-index: 0;}
.four .title_box .white {display:block;margin-bottom: 24px;} 
.four .title_box .white span {display:block; }
.four .four_middle {margin: 42px auto 0;font-size:0}
.four .four_middle li {color:#fff;display:inline-block;word-wrap:break-word;word-break:keep-all;width:100%;box-sizing:border-box;vertical-align:top;padding:16px;background:rgba(255,255,255,0.1);margin-bottom:10px;line-height: 1.5;display: flex;align-items: center;}
.four .four_middle li span {font-weight:200; color: #fff; font-size:14px; width: calc(100% - 102px);}
.four .four_middle li span.title {font-weight:bold;color: #fff;margin-right:10px;width: 102px;}


.four_two { margin:0 auto; padding:100px 0}
.history_list  { position:relative; }
.history_list:after {content: '';width: 1px;height: 100%;position: absolute;top: 15px;left: 100px;background: #fff;}
.history_list > li {}
.history_list > li::after {content: ""; display: block; clear: both;}
.history_list > li .year {float: left;width: 100px;box-sizing: border-box;font-size:32px;color: rgba(255,255,255,0.3);font-weight: bold;line-height: 1;}
.history_list > li .month {float: right;width:calc(100% - 100px);padding-bottom: 60px;position: relative;box-sizing: border-box;margin-top: 9px;}
.history_list > li .month li {font-size: 12px;margin-bottom: 12px;color: #fff;display: flex;align-items: center;justify-content: flex-start;position: relative;padding-left: 25px;}
.history_list > li .month li:before {content:"";display:inline-block;position:absolute;top: 6px;left: -2px;width: 5px;height: 5px;background:#fff;border-radius:100%}
.history_list > li .month li span {font-weight: bold;padding-right:12px;width:40px; font-weight:400; box-sizing:border-box}
.history_list > li .month li span:last-child {width:calc(100% - 40px); margin-right:0; word-wrap:break-word; word-break:keep-all;}




/* BASIC css end */