// Place all the styles related to the home controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
// Place all the styles related to the home controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

// Index.html

video {
  object-fit: cover;
}

.cover{
  margin-top: 62px;
}

.cover_img{
  height: calc(100vw*0.914);
  overflow: hidden;
  margin-left: -40%;
}

.cover_text{
  font-family: 'Chosunilbo_myungjo', sans-serif;
  line-height: 2;
  position: absolute;
  left: 50px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  height: 50%;
}

.text-1{
  color: white;
  height: 85px;
}

.text-2{
  height: 52px;
}

.text-3{
  height: 115px;
}

@media (min-width: 768px){
  .cover_img{
    height: calc(100vw*0.4);
    width: 100%;
    margin: 0 auto;
  }
  .cover_text{
    font-size: 24px;
    left: 100px;
  }
  .text-1{
    height: 150px;
  }
  .text-2{
    height: 100px;
  }
  .text-3{
    height: 195px;
  }
}

.carousel-indicators .active{
  background-color: rgba(209, 42, 45, 0.8);
}

.carousel-indicators li{
  background-color: white;
  height: 6px;
  width: 35px;
}

// Category
.category-list{
  padding: 30px 10px;
}

.category-keyword{
  margin: 7px 10px;
  font-size: 12px;
}

// Product Thumbnail
.scrolling-wrapper{
  transition: all 3s;
  overflow-x: auto;
  overflow-y: auto;
  white-space: nowrap;
  --webkit-overflow-scrolling: touch;
  align-items: center;
  .card{
    // display: inline-block;
    // border: none;
    margin-left: 7px;
    margin-right: 7px;
    border: none;
    background-color: #f9f9f9;
    // width: 306px;
    // flex: 0 0 auto;
  }

  .card:active, .card:focus{
    outline: none;
    border: none;
  }
}

.height-auto{
  height: auto;
  opacity: 1;
}

.height-none{
  height: 0;
  opacity: 0;
}

.slick-track{
  margin-top: 25px;
}

.visible-lg-only{
  display: block;
}

.pro-tag{
  width: 68px;
  height: 82px;
  background-color: rgba(209, 42, 45, 0.8);
  padding-top: 45px;
  position: absolute;
  z-index: 999;
  left: calc(100vw*0.7);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.pro-tag p{
  font-size: 12px;
  text-align: center;
  white-space: normal;
  margin-bottom: 10px;
}

@media (min-width: 768px ){
  .pro-tag{
    width: 0;
    visibility: hidden;
  }
}
.pro-thumbimg{
  width: 306px;
  height: 306px;
}

.card-body{
  padding: 14px 0;
  background-color: #f9f9f9;
}

.card-body2{
  padding: 14px 0;
}

.card-title{
  font-size: 16px;
  width: 250px;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  white-space: normal;
}

.card-count{
  margin-bottom: 2px;
}

.card-text{
  color: #7f7f7f;
  font-size: 12px;
  width: 306px;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  white-space: normal;
}

#all{
  transition: all 1s;
}

.cate-red{
  color: #d12a2d !important;
  font-weight: bold;
}

#empty-ment{
  margin-top: 100px;
  margin-bottom: 100px;
}
// MD's CONTENTS
.contents{
  margin-top: 30px;
}
.shape{
  height: 14px;
}

.content-heading{
  margin: 12px 10px 12px 30px;
}

.thumb-row{
  width: fit-content;
}

h2.background{
  position: relative;
    z-index: 1;

  &:before {
      border-top: 2px solid #dfdfdf;
      content:"";
      margin: 0 auto; /* this centers the line to the full width specified */
      position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
      top: 70%; left: 0; right: 0; bottom: 0;
      width: 230px;
      z-index: -1;
    }
}

span.or{
  background: #ffffff;
  padding: 15px;
  font-size: 12px;
  border-radius: 300px;
  border: 1px solid #dcdcdc;
}

// Bottom bar
.bottom-bar .text-dark:hover, .bottom-bar .text-dark:active, .bottom-bar .text-dark:focus{
  font-weight: bold;
}

.icon-box{
  width: 40px;
}

.first-icon{
  margin-left: 1px;
}

// Brand.html
.brand_cover{
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: calc(100vw*0.66);
}

.brand-text pre{
  line-height: 28px;
  white-space: pre-wrap;
}

@media (min-width: 768px){
  .brand_cover{
    height: 500px;
  }
}

// MY PAGE

.profile{
  justify-content: center;
}

.profile-img{
  width: 75px;
  height: 75px;
  border-radius: 300px;
  margin-left: 10px;
}

@media (min-width: 736px){
  .profile{
    justify-content: flex-start;
  }
  .profile-img-box{
    width: 30%;
  }
  .profile-img{
    width: 152px;
    height: 152px;
    display: block;
    margin: 0 auto;
  }
}

.text-grey{
  color: #7f7f7f;
}

.mypage-edit{
  width: 100px;
  height: 26px;
  border-radius: 2px;
  border: solid 1px #979797;
}

.custom-file-label{
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-img-edit{
  width: 150px;
  height: 150px;
  border-radius: 300px;

}
.mypage-edit:hover{
  border: solid 1px #979797;
}

@media (max-width: 768px){
  #mypage-mylogbox{
    justify-content: space-between !important;
  }
}

@media (min-width: 768px){

  .mylog-box p{
    font-weight: normal !important ;
  }

  .mypage-edit{
    width: 100px;
    border-radius: 3px;
  }
}
.my-product-card{
  margin-bottom: 3px;
}
.my-product-card-body{
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-right: 3px;
}

.my-product-card-text-wrapper{
  opacity: 0;
  transition: all 1s;
}

.my-product-card-text-wrapper:hover{
  opacity: 1;
  background-color: rgba(67, 67, 67, 0.6);
}

.layer-img{
  opacity: 1;
  height: 100%;
}


.news{
  border-left: 2px solid #979797;
}

@media (min-width: 768px){
  #my-product-row{
    justify-content: center;
  }
}

#my-product-row{
  margin-right: -19px;
}

.links-bar{
  border-right: 1px solid #434343;
  padding: 0 15px;
}

.order-table td{
  vertical-align: middle;
}

.order-table thead tr th{
  padding: 10px 0;
}

.order-table tbody tr td{
  padding: 10px 0;
}

.order-table tbody tr{
  border-bottom: 2px solid #dee2e6;
}

.order-list-wrapper ul{
  list-style: none;
  padding-left: 0;
  display: block;
}

.order-box{
  margin-bottom: 10px;
}

.order-box-num{
  margin: 0 16px;
  padding-top: 28px;
  border-bottom: solid 1px #434343;
}

.order-box-item{
  margin: 12px 16px;
  height: 84px;
}

.order-box-img{
  float: left;
  position: relative;
  width: 70px;
  height: 84px;
  overflow: hidden;
  vertical-align: top;
}

.order-box-info-list{
  margin-left: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 84px;
}

.delivery-box{
  border-top:1px solid #f1f1f1;
  padding: 10px 16px;
}
.delivery-info{
  width: 56%;
}
.delivery-title{
  width: 22%;
}

.delivery-status{
  width: 22%;
}

.main-notice{
  position: absolute;
  z-index: 1;
  background-color: rgba(209, 42, 45, 0.81);
  height: 64px;
  width: 100vw;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}

.main-notice-content{
  font-size: 16px;
  padding-right: 40px;
}

@media (max-width: 768px){
  .main-notice-content{
    font-size: 12px;
    padding-right: 20px;
  }
}

.main-notice-exit{
  cursor: pointer;
}

.content-heading{
  margin-bottom: 40px;
}

.hr-line{
  border-top: 3px solid #3a3a3a;
  width: 294px;
  position: absolute;
  margin: 0 16px;
  margin-top: -16px;
}

.vr-line{
  border-bottom: 3px solid #3a3a3a;
  margin-top: -16px;
}

.vr-line.left{
  height: 320px;
  width: 40px;
  margin-left: 16px;
  border-left: 3px solid #3a3a3a;
}

.vr-line.right{
  height: 300px;
  border-right: 3px solid #3a3a3a;
  right: 0;
  margin-right: 16px;
  width: 155px;
}

.md-box{
  margin-bottom: 160px;
}

.md-category{
  padding-top: 280px;
}

.md-img{
  width: 326px;
  height: 326px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0 auto;
}

.md-title{
  margin-left: 32px;
  margin-top: -24px;
  width: 216px;
}

.font-weight-500{
  font-weight: 500;
}

.notice-hidden{
  display: none;
}
