@charset "utf-8";

/* common default */

body {
  margin: 0;padding:0;
}
* { font-family:'Spoqa Han Sans Neo', 'sans-serif'; color:#000;}
.fontWe400 {font-weight:400;}
.fontWe500 {font-weight:500;}
.fontWe700 {font-weight:700;}

/* scroll hidden */
.scroll::-webkit-scrollbar {display: none;} /* 크롬, 사파리, 오페라, 엣지 */
.scroll {
    -ms-overflow-style: none; /* ie */
    scrollbar-width: none; /* ff */
}
.scroll {overflow: hidden;}
.input[type="text"] {margin:0;padding:0;vertical-align:middle;}

/* index */
.ecup_logo {width:100%; text-align:center; padding-top:1.875rem; padding-bottom:0.625rem;}
.select_area {padding:20px;}
.portfolio-item {
  display: block;
  position: relative;
  overflow: hidden;
  max-width: 530px;
  margin: auto auto 1rem;
}
.portfolio-item .caption {
  display: flex;
  height: 100%;
  width: 100%;
  /*background-color: rgba(33, 37, 41, 0.2);*/
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
}
.portfolio-item .caption .caption-content {
  color: #fff;
  /*margin: auto 2rem 2rem;*/
  margin: 0.938rem;
}
.portfolio-item .caption .caption-content h2, .portfolio-item .caption .caption-content .h2 {
  font-size: 3.125rem;
  text-transform: uppercase;
  color:#fff;
  /*text-shadow: 1px 1px #000; */
}
.portfolio-item .caption .caption-content p {
  font-weight: 300;
  font-size: 1.2rem;
  color:#fff;
  text-shadow: 1px 1px #000; 
}
@media (min-width: 992px) {
  .portfolio-item {
    max-width: none;
    margin: 0;
  }
  .portfolio-item .caption {
    transition: background-color 0.7s, -webkit-clip-path 0.25s ease-out;
    transition: clip-path 0.25s ease-out, background-color 0.7s;
    transition: clip-path 0.25s ease-out, background-color 0.7s, -webkit-clip-path 0.25s ease-out;
    -webkit-clip-path: inset(0px);
            clip-path: inset(0px);
  }
  .portfolio-item .caption .caption-content {
    transition: opacity 0.25s;
    margin-left: 5rem;
    margin-right: 5rem;
    margin-bottom: 5rem;
  }
  .portfolio-item img {
    transition: -webkit-clip-path 0.25s ease-out;
    transition: clip-path 0.25s ease-out;
    transition: clip-path 0.25s ease-out, -webkit-clip-path 0.25s ease-out;
    -webkit-clip-path: inset(-1px);
            clip-path: inset(-1px);
  }
 .portfolio-item:hover img {
    -webkit-clip-path: inset(2rem);
            clip-path: inset(2rem);
  }
  .portfolio-item:hover .caption {
    background-color: rgba(29, 128, 159, 0.9);
    -webkit-clip-path: inset(2rem);
            clip-path: inset(2rem);
  }
}
.portfolio-item:hover .caption {background-color: rgba(29, 128, 159, 0.9);}
.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}
.gx-0 {
  --bs-gutter-x: 0;
}
.img-fluid {
  max-width: 100%;
  height: auto;
}
@media (min-width: 992px) {
.col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
}
.mb-0 {
  margin-bottom: 0 !important;
}

/* login */
.wrap {width:100%;}
.mainWrap {width:100%;}
.topWrap {float:left;width:100%;height:100px;position:relative;}
.ecupLogo {float:left;width:100%;text-align:center;margin:20px 0 20px;}
.ecupLogo p {font-weight:700;font-size:30px;margin:20px 0;padding:5px;color:#fff;background:#55adac;}
.loginWrap {width:90%;text-align:center;margin:0 auto;}
.loginTit {float:left;width:30%;height:110px;line-height:70px;font-size:24px;font-weight:700;}
.loginInput {float:left;width:70%;height:110px;}
.inputStyle {width:80%;height:44px;border:2px solid #000;padding:10px 15px;font-size:26px;font-weight:bold;color:#ccc;-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;}
.inputStyle:focus {border-color:#57c7d4;outline: 0;}

::placeholder {color:#ccc;}
.loginBtn {float:left;width:100%;text-align:center;margin:0;padding:0;margin:0 auto;}
.loginBtn button:active{background:#57c7d4;}
.loginBtnStyle {width:100%;height:70px;margin:0;padding:0;background:#55adac;color:#fff;font-weight:700;font-size:30px;border:0;-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;}

/* E컵 배송 */
.deliver_name {width:100%;text-align:center;color:#666;font-weight:700;font-size:24px;margin-top:10px;}
.deliver_name span {color:#4B49AC;font-weight:700;font-size:24px;}
.deliver_date {width:100%;text-align:center;font-weight:700;font-size:24px;}
.deliver_date span {color:red;font-weight:700;font-size:22px;}
.deliver_list {width:100%;margin:0 auto;}
.checkBtn {width:100%;margin:0;padding:5px;background:#115e59;color:#fff;font-weight:400;font-size:16px;border:0;-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;}
.deliver_list table{width:90%;border: 1px solid #fff;border-collapse: collapse;margin:5%;}
.deliver_list table th{border: 1px solid #000;text-align:center;padding:5px;font-size:18px;background:#efefef;}
.deliver_list table td{border: 1px solid #000;text-align:center;padding:5px;font-size:18px;}
.deliver_list table td span.finish {color:#115e59;font-weight:700;font-size:18px;}
.etc_text {color:#115e59;font-weight:700;font-size:18px;padding:0 15px 15px 15px;}
.deliver_list table tr.urbg {background:pink;}

/* E컵 발주 */
.ecup_order_wrap {width:100%;}
.ecup_order_area {width:100%;}
.order_name {width:100%;text-align:center;color:#666;font-weight:700;font-size:24px;margin-top:10px;}
.order_date {width:100%;text-align:center;font-weight:700;font-size:24px;}
.info_massage {background-color: #ebf3f2; font-size: 14px; color: #374151; gap: 8px; margin-bottom: 10px; padding: 10px 15px; align-items: center; display: flex; justify-content: center;}
.info_massage button.btn_order {width: 100px;background-color: #115e59;color: #fff;border-radius: 6px;font-size: 20px;font-weight: 400;padding:5px;}
.info_massage button.btn_cancel {width: 150px;background-color: #999;color: #fff;border-radius: 6px;font-size: 20px;font-weight: 400;padding:5px;}
.order_list {width:100%;}
.order_list table{width:90%;border: 1px solid #fff; border-collapse: collapse; margin:5%;}
.order_list table td {border: 1px solid #000;text-align:center;padding:5px;font-size:18px;}
.order_list table td:nth-child(1) {width:50%;}
.order_list table td:nth-child(2) {width:50%;}
.order_list table td input {height:30px; width: 80%; text-align: center; font-size: 18px; border:1px solid #666; border-radius:4px; display: inline-block;  vertical-align: middle;}
.order_list table td input:focus {border-color:#57c7d4;outline: 0;}
.order_list table td input.etc_input {height:30px; width: 90%; text-align: center; font-size: 18px; border:1px solid #666; border-radius:4px; display: inline-block;  vertical-align: middle;}
.order_etc {width:100%;}
.order_etc textarea {width:90%; margin-left:5%;margin-right:5%;padding:5px;font-size:16px;}
.hope_date {width:90%; padding-left:5%; margin-top:10px;}
.hope_date span {font-size:20px; font-weight:700;}
.hope_date p.urtit {font-size:18px; font-weight:700; }
.hope_date p.urnote {font-size:14px;}
.hope_date input[type="text"] {width:30%; font-size:16px;padding:5px;}
.hope_date img {margin-left:5px; vertical-align:middle; margin-top:-2px;}
.hope_date2 {width:90%; padding-left:5%; margin-top:10px;}
.hope_date2 span {font-size:20px; font-weight:700;}
.hope_date2 input[type="text"] {width:24%; font-size:16px;padding:5px;}
.hope_date2 img {margin-left:5px; vertical-align:middle; margin-top:-2px;}
.hope_date2 button.btn_search {width: 50px;background-color: #115e59;color: #fff;border-radius: 6px;font-size: 16px;font-weight: 400;padding:5px;}
.down_btn {width: 100%; height: 60px; text-align: center;gap: 1rem;align-items: center;justify-content: space-between;}
.down_btn span {font-size: 18px;font-weight: bold;width: 200px;text-align: right;}
.down_btn button {width: 100px;background-color: #115e59;color: #fff;border-radius: 6px;font-size: 20px;font-weight: 400;padding:5px;}
.down_btn button.btn_cancel {width: 100px;background-color: #999;color: #fff;border-radius: 6px;font-size: 20px;font-weight: 400;padding:5px;}
/*** 화살표 아이콘 ***/ 
.arrow_left { position:absolute;
  top:10px; left:10px;border-color: transparent #55adac transparent transparent; border-style: solid; border-width: 30px 40px 30px 0; float: left; height: 0; width: 0;}
.arrow_right {position:absolute;
  top:10px; right:10px;border-color: transparent transparent transparent #55adac; border-style: solid; border-width: 30px 0 30px 40px; float: left; height: 0; width: 0;}

input[type="checkbox"]{
        display: none;
      }
input[type="checkbox"] + label{
        display: inline-block;
        width: 30px;
        height: 30px;
        border:3px solid #707070;
        position: relative;
		vertical-align:middle;
      }
input[id="emgen"]:checked + label::after{
        content:'✔';
        font-size: 25px;
        width: 30px;
        height: 30px;
        text-align: center;
        position: absolute;
        left: 0;
        top:-5px;
		vertical-align:middle;
      }