@charset "utf-8";

#wrap{width: 100%; height: 100%; overflow: hidden; }
.inner{max-width: 1440px; margin: 0 auto;}


.header-wrap .menu1{float: left; display: inline-block;}
.header-wrap .menu2{float: right; display: inline-block;}
.menu1 .clear li, .menu2 .clear li{float: left; color: #000;}
.menu1 .clear li a, .menu2 .clear li a{color: #000; font-size: 16px; transition: all .5s;}
.menu1 .clear li:hover a, .menu2 .clear li:hover a{color: #fb3d40;}
.menu1 .clear li{margin-right: 40px;}
.menu2 .clear li{margin-left: 40px;}

/* header-mobile */
.open-ul li:first-child{float: left;}
.open-ul li:last-child{float: right;}
.open{
  font-size: 0;
  display: block;
  color: #111;
}
.open-menu{
  display: none;
  width: 70vw;
  height: 100%;
  position: absolute;
  top: 0;
  left: -70vw;
  background-color: #fb3d40;
  z-index: 99;
}
.open-nav{
  position: absolute;
  top: 50%;
  left: 20%;
  transform: translateY(-50%);
}
.open-nav a{
  display: block;
  color: #fff;
  font-weight: 700;
  margin-bottom: 30px;
  font-size: 32px;
}
.close{
  display: block;
  color: #fff;
  position: absolute;
  top: 30px;
  right: 30px;
}
.open-log{display: none;}
.open-log a{
  display: inline-block;
  color: #111;
}
.open-log .log1{margin-right: 5px;}

/* main 본문 */

.category-wrap{width: 100%;position: relative;height: 50px;margin-top: 100px;}

.tab-tit .clear li{float: left; margin-right: 15px;}
.tab-tit .clear li:last-child{margin-right: 0;}
.tab-tit .clear li a{display: block; font-size: 16px; padding: 5px 15px; border-radius: 10px; border: 1px solid #d3d3d3; transition: all .5s; font-weight: 300;}
.tab-tit .clear li:hover a{background-color: #fb3d40; border: 1px solid #fb3d40; color: #fff;}
.tab-tit .clear li.on a{background-color: #fb3d40; border: 1px solid #fb3d40; color: #fff;}

.search{
  position: absolute;
  top: 0;
  right: 0;
}

input[type=text]{
  width: 280px;
  height: 33px;
  border: 2px solid #333;
  border-radius: 30px;
  padding-left: 20px;
}
.search-btn{
  position: absolute;
  top: 0;
  right: 0;
  width: 33px;
  height: 33px;
  color: #fff;
  background-color: #333;
  border-radius: 0 30px 30px 0;
  cursor: pointer;
}

.content-wrap{
  width: 100%;
  height: 100%;
  position: relative;
  margin-bottom: 30px;
}

.content-wrap .check-wrap{
  width: 100%;
  height: 140px;
  background-color: #e8ebf0;
  font-size: 20px;
  text-align: center;
  line-height: 140px;
  font-weight: 800;
}
.content-wrap .img-box{
  width: 125px;
  height: 125px;
  position: absolute;
  top: 50%;
  right: 40px;
  transform: translateY(-50%);
}

.list-table{margin-bottom: 30px;}
.list-table input[type='checkbox'] + label{
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 1px solid #d3d3d3;
  border-radius: 50%;
  text-align: center;
  color: #d3d3d3;
  padding-top: 3px;
  transition: all .5s;
}
.list-table input[type='checkbox']:checked + label{
  background-color: #fb3d40;
  border: 1px solid #fb3d40;
  color: #fff;
}
.list-table input[type='checkbox']{display: none;}

.list-table table{width: 100%; border-top: 2px solid #000; border-bottom: 2px solid #d3d3d3; border-spacing: 0;}
.list-table table th{padding: 20px; border-bottom: 1px solid #d3d3d3;}
.list-table table td{text-align: center; padding: 10px;}
.list-table table td:nth-child(2){
  width: 156px;
  height: 156px;
}
.list-table table td:nth-child(2) img{width: 156px; height: 156px;}

.list-table input[type=text]{
  width: 15px;
  height: 30px;
  border: none;
  border-radius: 0;
  padding: 0 0 0 4px;
  background-color: transparent;
  font-size: 18px;
  font-weight: 700;
}
.list-table .option-box .num-btn{
  width: 20px;
  height: 20px;
  text-align: center;
  background-color: #e8ebf0;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  box-sizing: border-box;
}
.list-table .trash{
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #34495e;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  font-size: 16px;
  padding-top: 4px;
  cursor: pointer;
}

.list-table2{margin-bottom: 80px;}
.list-table2 table{width: 100%; border-top: 2px solid #000; border-spacing: 0;}
.list-table2 table th{font-size: 20px; padding: 20px; border-bottom: 1px solid #d3d3d3;}
.list-table2 table td{font-size: 28px; font-weight: 900; text-align: center; padding: 20px;}


.buy-btn{
  display: block;
  width: 100%;
  height: 90px;
  background-color: #000;
  color: #fff;
  font-weight: 500;
  text-align: center;
  line-height: 88px;
  font-size: 20px;
  border-radius: 10px;
}
.buy-btn:hover{
  color: #fff;
}
.buy-btn.disabled{
  background-color: #ddd;
  color:#333;
}

.mb-50{
  margin-bottom: 50px;
}

/* footer */

.sub-footer{
  width: 100%;
  padding: 40px 0;
  background-color: #fb3d40;
}
.footer-logo{
  width: 200px;
  height: 50px;
  margin-bottom: 25px;
}
.sub-foot-info .info p{
  font-size: 16px;
  color: #fff;
  margin-bottom: 10px;
}

.sub-footer > .inner{
  position: relative;
}

.footer-etc{
  width: 360px;
  position: absolute;
  bottom: 0;
  right: 0;
}
.footer-etc .clear li{
  float: left;
  display: block;
  width: calc((100% - 40px) / 3);
  text-align: center;
  position: relative;
}
.footer-etc .clear li:first-child{margin-right: 20px;}
.footer-etc .clear li:last-child{margin-left: 20px;}

.footer-etc .clear li a{
  font-size: 14px;
  color: #fff;
}

.footer-etc .clear li:nth-child(1):after{
  content: "";
  display: block;
  width: 1px;
  height: 13px;
  background-color: #fff;
  position: absolute;
  top: 7px;
  right: 1px;
}
.footer-etc .clear li:nth-child(2):after{
  content: "";
  display: block;
  width: 1px;
  height: 13px;
  background-color: #fff;
  position: absolute;
  top: 7px;
  right: -24px;
}

/* mediaquary */
@media(min-width:577px){
  .list-table-m{display: none;}
  .list-table2-m{display: none;}
}
@media(max-width:1104px){
  .sub-footer{padding: 40px 0 60px;}
  .footer-logo{width: 120px; height: auto;}
  .sub-foot-info .info p{font-size: 12px;}
  .footer-etc{width: 100%; bottom: -40px; font-size: 12px;}
}
@media (max-width:992px){
  .text-wrap {
    margin-top: 35vh;
  }
  .foot-info{padding-left: 40px; padding-right: 40px;}
  .open{font-size: 22px;}
  .open-menu{display: block;}
  .header-wrap .menu1{display: none;}
  .open-log{display: block;}
  .header-wrap .menu2{display: none;}

  .tab-tit .clear li{width: calc((100% - 20px) / 5); margin-right: 5px;}
  .tab-tit .clear li a{text-align: center;}

  .content-wrap .check-wrap{
    height: 120px;
    line-height: 120px;
  }
}
@media (max-width:766px){
  .content-wrap .check-wrap{
    height: 100px;
    line-height: 100px;
  }

  .list-table table td:nth-child(2){width: 20%;}
  .list-table table td:nth-child(2) .img-box{width: 100%; height: auto;}
  .list-table table td:nth-child(2) .img-box img{width: 100%; height: auto;}
  .list-table table th{padding: 10px; font-size: 13px;}
  .list-table input[type='checkbox'] + label{width: 20px; height: 20px; padding-top: 1px;}
  .list-table table td{font-size: 12px;}
  .tab-tit ul{
    padding: 0;
  }
}
@media (max-width:576px){
  .text-wrap {
    margin-top: 25vh;
  }
  .text-wrap h2{
    font-size: 30px;
  }
  .text-wrap h5{
    font-size: 18px;
  }
  .go-btn{width: 200px; height: 40px; padding: 10px 0 0 20px; font-size: 16px;}
  .foot-info{font-size: 12px;}

  .tab-tit .clear li{width: calc((100% - 8px) / 5); margin-right: 2px;}
  .tab-tit .clear li a{font-size: 12px; padding: 5px 0;}

  .content-wrap .check-wrap{
    height: 80px;
    line-height: 80px;
    font-size: 14px;
  }

  .list-table{display: none;}
  .list-table2{display: none;}
  .list-table2-m{display: block; margin-bottom: 30px; border-top: 1px solid #d3d3d3; padding: 20px 0; border-bottom: 1px solid #000;}
  .list-table-m{display: block; width: 100%; height: 100%; position: relative; padding: 40px 0 20px; border-top: 1px solid #d3d3d3;}
  .list-table-m input[type='checkbox'] + label{
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #d3d3d3;
    border-radius: 50%;
    text-align: center;
    color: #d3d3d3;
    padding-top: 1px;
    transition: all .5s;
    font-size: 12px;
  }
  .list-table-m input[type='checkbox']:checked + label{
    background-color: #fb3d40;
    border: 1px solid #fb3d40;
    color: #fff;
  }
  .list-table-m input[type='checkbox']{display: none;}
  .list-table-m .trash{
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #34495e;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    font-size: 12px;
    padding-top: 1px;
    cursor: pointer;
  }
  .list-table-m .check-box{position: absolute; top: 7px; left: 0;}
  .list-table-m .delete-box{position: absolute; top: 7px; right: 0;}
  .list-table-m .prod-wrap{display: flex; flex-direction: row; align-items: center; margin-bottom: 10px;}
  .list-table-m .prod-wrap .item-img{width: 30%;}
  .list-table-m .prod-wrap .item-img img{width: 100%; height: auto;}
  .list-table-m .prod-wrap .item-txt{padding-left: 10px;}
  .list-table-m .prod-wrap .item-txt p{font-size: 12px; margin-bottom: 5px;}
  .list-table-m .prod-wrap .item-txt p:last-child{color: #888;}
  .list-table-m .count-wrap{display: flex; flex-direction: row; align-items: center; justify-content: space-between;}
  .list-table-m .option-box{padding-left: 13px;}
  .list-table-m input[type=text]{
    width: 15px;
    height: 30px;
    border: none;
    border-radius: 0;
    padding: 0 0 0 4px;
    background-color: transparent;
    font-size: 18px;
    font-weight: 700;
  }
  .list-table-m .option-box .num-btn{
    width: 20px;
    height: 20px;
    text-align: center;
    background-color: #e8ebf0;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    box-sizing: border-box;
  }
  .list-table-m .item-cost{font-weight: 600;}

  .list-table2-m .cost-m{display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 5px;}
  .list-table2-m .cost-m .item-cost1{font-weight: 700; font-size: 16px;}
  .list-table2-m .cost-m .item-cost2{font-size: 16px;}
  .list-table2-m .cost-m .item-cost2.cost-final{font-weight: 700;}

  .buy-btn{height: 60px; line-height: 59px;}


}