#top_banner{position: relative;}


#top_banner video{display: block; object-fit: cover;}
#play{position: absolute; left: 50%; bottom: 200px; transform: translateX(-100%); padding: 0 0px;}
#stop{position: absolute; left: 50%; bottom: 200px; padding: 0 0px; }

.bold_text{font-weight: bold;}

.all_btn{ width: 220px; height:50px; border: 1px solid #fff; text-align: center; line-height: 50px; color: #fff; transition-duration: 0.5s;    box-sizing: border-box; font-size: 14px; display: block; position: relative; cursor: pointer; bottom: 0;}
.all_btn a{color: #fff; font-size: 14px; font-weight: 300;}
.all_btn:hover{background-color: rgba(255,255,255,0.3)}


.all_btn2{ width: 220px; height:50px; border: 1px solid #474141; text-align: center; line-height: 50px; color: #474141; transition-duration: 0.5s;    box-sizing: border-box; font-size: 14px; display: block;}
.all_btn2 a{color: #474141; font-size: 14px; font-weight: 300;}
.all_btn2:hover{background-color: rgba(255,255,255,0.4); color: #000; border: 1px solid #999}


/* pc */

/*- 브랜드 소개 -*/
#main_brand{width: 100%;background-color: #F1EFEB;overflow: hidden; position: relative; }
#main_brand .main_wrap{ display: flex; justify-content: space-between; align-items: center; width: 1492px;margin: 120px auto; }

#main_brand .main_wrap .main_brand_img{width: 40%; position: relative; height: 790px;}
#main_brand .main_wrap .main_brand_img img{position: absolute; width: 100%; left: 0; top: 0;}
#main_brand .main_wrap .main_brand_img img:first-child~img{display: none;}

#main_brand .main_wrap .top_controls{display: flex; width: 50px; justify-content: space-between; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);} 
#main_brand .main_wrap .top_controls li{ width: 9px; height: 9px; background-color: #FFF; border-radius: 9px; cursor: pointer;}
#main_brand .main_wrap .top_controls li.top_select{background-color: #111;}


#main_brand .main_wrap .main_brand_story{width: 45%; margin-left: 1%; position: relative; }
#main_brand .main_wrap .main_brand_story .main_title1{font-weight: 600; font-size: 16px;  margin-bottom: 14px;  color: #474141;}

#main_brand .main_wrap .main_brand_story .main_title2{font-weight: 500; font-size: 54px;  margin-bottom: 54px;  color: #474141;}

#main_brand .main_wrap .main_brand_story .main_sub1{ font-size: 18px;  margin-bottom: 16px;  color: #474141;font-weight: 500;}
#main_brand .main_wrap .main_brand_story .main_sub2{ font-size: 18px;  margin-bottom: 54px;  color: #474141;font-weight: 500;}


/*버튼 디자인
.frame {
    width: 90%;
    margin: 40px auto;
    text-align: center;
  }
  button {
    margin: 20px;
  }
  .custom-btn {
    width: 130px;
    height: 40px;
    color: #fff;
    border-radius: 5px;
    padding: 10px 25px;
   
    font-weight: 500;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
     box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
     7px 7px 20px 0px rgba(0,0,0,.1),
     4px 4px 5px 0px rgba(0,0,0,.1);
    outline: none;
  }

.btn-16 {
    border: none;
    color: #000;
  }
  .btn-16:after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    direction: rtl;
    z-index: -1;
    box-shadow:
     -7px -7px 20px 0px #fff9,
     -4px -4px 5px 0px #fff9,
     7px 7px 20px 0px #0002,
     4px 4px 5px 0px #0001;
    transition: all 0.3s ease;
  }
  .btn-16:hover {
    color: #000;
  }
  .btn-16:hover:after {
    left: auto;
    right: 0;
    width: 100%;
  }
  .btn-16:active {
    top: 2px;
  }
*/

.SMN_effect-10 a:before, .SMN_effect-10 a:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    content: '';
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
  }
  
  .SMN_effect-10 a:after {
    border-color: #fff;
    opacity: 0;
    -webkit-transform: translateY(-7px) translateX(6px);
    -moz-transform: translateY(-7px) translateX(6px);
    transform: translateY(-7px) translateX(6px);
  }
  
  .SMN_effect-10 a:hover:before, .SMN_effect-10 a:focus:before {
    opacity: 0;
    -webkit-transform: translateY(5px) translateX(-5px);
    -moz-transform: translateY(5px) translateX(-5px);
    transform: translateY(5px) translateX(-5px);
  }
  
  .SMN_effect-10 a:hover:after, .SMN_effect-10 a:focus:after {
    opacity: 1;
    -webkit-transform: translateY(0px) translateX(0px);
    -moz-transform: translateY(0px) translateX(0px);
    transform: translateY(0px) translateX(0px);
  }
  
  /*      

/* .main_brand_img{ left: -100px; opacity: 0} */
.main_brand_story{left: 100px; opacity: 0; position: relative;}


/*- 베스트상품 -*/
#main_best{position: relative; background-image: url(../img/best_bg.png); background-position:center; background-size: cover; padding-top: 130px; padding-bottom: 200px; } 
#main_best .best_wrap{width: 92%; margin: 0px auto;  overflow: hidden; }
#main_best .container{display: flex;justify-content: space-between; margin-bottom: 5%;position: relative; }
#main_best .best_title{text-align: center; font-size: 48px; color:#F1EFEB ; font-weight: 500; position: relative; top: -50px; opacity: 0;;}
#main_best .container1>p{color:#F1EFEB ; font-size: 17px;}
#main_best .all_btn img{display: inline; margin-left: 15px; }

#main_best .best_item{overflow: hidden; position: relative;}
#main_best .best_item>ul{ width: 180%; display: flex; justify-content: space-between;position: relative;}
#main_best .best_item>ul>li{width: 11%; margin:0  0.25%; }
#main_best .best_item>ul>li img{width: 100%;transition-duration: 0.5s;}
#main_best .best_item>ul>li:hover img{transform: scale(1.05);}


#main_best .best_thumnail .over_box img{width: 100%;}
#main_best .best_description{text-align: center; overflow: auto; margin-top: 15px;}
#main_best .best_description .name{ margin-bottom: 11px; color: #fff; font-size: 16px;}
#main_best .best_description .name_sub{font-size: 14px; color: #fff; }

#main_best .bt_wrap{position: absolute; right: 0; box-sizing: border-box; transition-duration: 0.5s;width: 96%; margin-top: 3%;}
#main_best .best_prev {background: none; border: none;}
#main_best .best_next {background: none; border: none; margin-left: 4%;}

.best_title{margin-top: 0; opacity: 0;}


/*- jericho -*/
#jericho{ position: relative; background-image: url(../img/main_jericho.jpg);  background-position: center;background-size: cover;background-attachment: fixed; height: 100vh; }
#jericho .title{position: absolute; font-size: 13em; color: #fff; font-weight: 200; right: 150px; top: 100px;}
#jericho .jericho_title{position: absolute; left: 50%; top: 50%; transform: translateX(-150%);} 
#jericho .jericho_title .description1{color: #fff;  font-size: 32px;}
#jericho .jericho_title .description2{color: #fff;font-size: 16px; font-weight: 300; margin: 40px 0;}


#jericho .title{margin-top: 0; opacity: 0;}
#jericho .jericho_title{opacity: 0;}

/*- heartleaf -*/
#heartleaf{ position: relative; background-image: url(../img/main_heartleaf.png);  background-position: center;background-size: cover;background-attachment: fixed; height: 100vh; }
#heartleaf .title{position: absolute; font-size: 13em; color: #fff; font-weight: 200; left: 150px; top: 100px;}
#heartleaf .heartleaf_title{position: absolute; left: 50%; top: 50%; transform: translateX(50%);} 
#heartleaf .heartleaf_title .description1{color: #fff;  font-size: 32px;}
#heartleaf .heartleaf_title .description2{color: #fff;font-size: 16px; font-weight: 300; margin: 40px 0;}

#heartleaf .title{margin-top: 0; opacity: 0;}
#heartleaf .heartleaf_title{opacity: 0;}

/*- hyaluron -*/
#hyaluron{ position: relative; background-image: url(../img/main_hyaluron.png);  background-position: center;background-size: cover;background-attachment: fixed; height: 100vh; }
#hyaluron .title{position: absolute; font-size: 13em; color: #fff; font-weight: 200; right: 150px; top: 100px;}
#hyaluron .hyaluron_title{position: absolute; left: 50%; top: 50%; transform: translateX(-150%);} 
#hyaluron .hyaluron_title .description1{color: #fff;  font-size: 32px;}
#hyaluron .hyaluron_title .description2{color: #fff;font-size: 16px; font-weight: 300; margin: 40px 0;}

#hyaluron .title{margin-top: 0; opacity: 0;}
#hyaluron .hyaluron_title{opacity: 0;}



/*- instagram -*/
#instagram{ position: relative;background-color: #F1EFEB;padding-bottom: 100px;}
#instagram .insta_sub_title{ text-align: center; padding-top: 9%; font-size: 14px; color: #474141;}
#instagram .insta_main_title{ text-align: center; font-size: 30px; color: #474141;}
#instagram .insta_img{ padding-top:1% ; display: flex;  justify-content: space-between;flex-wrap: wrap;}
#instagram .insta_img li{width:16.66%; position: relative;}
#instagram .insta_img li img{width: 100%; cursor: pointer;}
#instagram .all_btn2{ display: block;margin: 70px auto;}

#instagram ul li .over_box{position: absolute;width: 100%; height: 100%; background-color: rgba(0,0,0,0.8);  justify-content: center; align-items: center; left: 0; top:0; display: flex; opacity: 0; transition-duration: 0.5s; cursor: pointer;}
#instagram ul li .over_box a img{display: block;   text-align: center; display: flex; align-items: center;}