/* html{background-color: #efefef; height: 100%; overflow-x: hidden; width:100%; font-size: 2.6666666667vw;}
body{color:#121212; margin-left:auto; margin-right:auto; background-color: #fff; font-size: 1.1em; height: 100%; line-height: 1.4;} */


/* 스와이퍼 */

.swiper {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* display: flex;
    justify-content: center;
    align-items: center; */
  }

  .swiper-slide img {
    display: block;
    width: 100%;
  }

  .wrap {overflow-x: hidden;}


/* -------- 인트로 -------- */



/* -------- 하단 내비 -------- */
.bt_nav {padding: 10px 0; background-color: #fff; border-top: 1px solid #eee; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 100;}
.bt_nav ul {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;}
.bt_nav .nav_con {display: flex; flex-direction: column; align-items: center; gap: 8px;}
.bt_nav .nav_con .nav_icon {display: block; width: 25px; height: 25px;}
.bt_nav .nav_con.home .nav_icon {background: url(../img/nav1.png) no-repeat center/contain;}
.bt_nav  li.on .nav_con.home .nav_icon {background: url(../img/nav1_on.png) no-repeat center/contain;}
.bt_nav .nav_con.commu .nav_icon {background: url(../img/nav2.png) no-repeat center/contain;}
.bt_nav li.on .nav_con.commu .nav_icon {background: url(../img/nav2_on.png) no-repeat center/contain;}
.bt_nav .nav_con.contents .nav_icon {background: url(../img/nav3.png) no-repeat center/contain;}
.bt_nav li.on .nav_con.contents .nav_icon {background: url(../img/nav3_on.png) no-repeat center/contain;}
.bt_nav .nav_con.academe .nav_icon {background: url(../img/nav4.png) no-repeat center/contain;}
.bt_nav li.on .nav_con.academe .nav_icon {background: url(../img/nav4_on.png) no-repeat center/contain;}

.bt_nav li span {color: #aaa; font-size: 14px;}
.bt_nav li.on span {color: #42A468; font-weight: 700  ;}


/* -------- 탑바 -------- */

.header {width: 100%; height: 60px; position: fixed; top: 0; left: 0; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; background-color: #fff; border-bottom: 1px solid #eee; z-index: 12;}

.header.main-hd {border-bottom: none; background-color: transparent; }
.header.main-hd.on {background-color: #fff; }
.header.no-b {border-bottom: none;}
.header.main-hd .logo {background: url(../img/logo_wh.png) no-repeat center/contain; width: 75px; height: 21px;}
.header.main-hd .cart-icon {background: url(../img/cart.png) no-repeat center/cover; width: 31px; height: 28px;}
.header.main-hd.on .logo {background: url(../img/logo_co.png) no-repeat center/contain;  width: 75px; height: 21px;}
.header.main-hd.on .cart-icon {background: url(../img/cart_co2.png) no-repeat center/cover; width: 31px; height: 28px;}


.mypage-hd {background-color: #42A468; justify-content: flex-end;}
.header .back {width: 14px;}
.header .head-tit {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.header.mypage-hd .head-tit {color: #fff; font-size: 16px; font-weight: 500;}
.header .head-tit {color: #333; font-size: 16px; font-weight: 600;}
.header .logout {font-size: 14px; color: #fff; border: 1px solid #fff; border-radius: 50px; padding: 3px 12px;}



/* 주문/결제 */


.product {display: flex; align-items: center; gap: 15px; padding: 20px 0;}
.product .pro-img {width: 70px; aspect-ratio: 1 / 1; border-radius: 3px; overflow: hidden;}
.product .pri-txt span {font-size: 12px; color: #838383;}
.product .pri-txt p {font-size: 16px; font-weight: 500;}
.product .pri-txt em {color: #767676;}
.payment .input-wrap {padding: 20px 0;}
.input-wrap {display: flex; flex-direction: column; gap: 16px;}
.input-wrap .input p {font-size: 15px;  font-weight: 500;}
input {height: 50px; border: 1px solid #ddd !important; border-radius: 3px; padding: 0 10px; width: 100%; font-size: 15px;}
input::placeholder {font-size: 15px;}
.pay {border-top: 1px solid #eee;}

.pay-btn ul {display: flex; flex-wrap: nowrap; flex-direction: row !important; gap: 10px !important;}
.pay-btn ul li {justify-content: center !important; width: 50% !important;}
.pay-btn ul li.on {border: 1px solid #356eff;}
.bank {padding-bottom: 20px; display: none;}
.bank .bank-input {display: flex; flex-direction: column; align-items: flex-end; gap: 10px;}
select {width: 100%; height: 50px; border: 1px solid #ddd; border-radius: 3px; background: url(../img/angle.png) no-repeat; background-position: 95% 50%; background-size: 4%; padding: 0 10px; font-size: 15px; outline: none;}
.bank .bank-input span {font-size: 12px; color: #ff3939; margin-top: -5px;}
.bank .bank-input span em {display: inline-block; color: #ff3939;}
.bank-info {margin-top: 15px; padding: 15px; border-radius: 10px; background-color: #f9f9f9;}
.bank-info p {font-weight: 600; color: #686868; display: flex; align-items: center; gap: 3px; margin-bottom: 10px;}
.bank-info p i {font-weight: 600; color: #686868;}
.bank-info span {padding-left: 10px; position: relative; color: #777; margin-bottom: 5px;}
.bank-info span::before {content: "-"; position: absolute; color: #777; top: 0px; left: 0;}
.card {display: none; padding-bottom: 20px;}
.card-input {display: flex; flex-direction: column; gap: 10px;}

.chk-box {display: flex; flex-direction: column; gap: 7px; padding: 20px 0;}
.chk-box div {display: flex; align-items: center; justify-content: space-between;}
.chk-box div label {display: flex; align-items: center; gap: 8px;}
.chk-box div input:checked + label span {display: block; background: url(../img/chked2.png) no-repeat center/cover; width: 20px; height: 20px;}
.chk-box div label span {display: block; background: url(../img/chk.png) no-repeat center/cover; width: 20px; height: 20px;}
.chk-box div label p {font-size: 15px; color: #555;}
.chk-box div em {font-size: 12px; color: #989898; border-bottom: 1px solid #bbbbbb;}

.payment h2 {padding: 12px 0; font-size: 18px; border-bottom: 1px solid #eee; font-weight: 700;}
.payment > div {border-bottom: 6px solid #f6f6f6;}
.pay-info {display: flex; flex-direction: column; gap: 8px; padding: 15px 0;}
.pay-info li {display: flex; align-items: center; justify-content: space-between;}
.pay {display: flex; flex-direction: column; gap: 5px; padding: 15px 0;}
.pay li {display: flex; align-items: center; justify-content: space-between;}
.pay-btn {padding: 15px 0;}
.pay-btn ul {display: flex; gap: 10px;}
.pay-btn ul li {flex-grow: 1; padding: 12px 0; text-align: center; border-radius: 5px; border: 1px solid #eee; font-size: 15px; color: #555;}
.pay-btn ul li.on {border: 1px solid #42A468; background-color: #2bc6672b; color: #42A468; font-weight: 700;}
.pay-btn-wrap {margin-top: 15px;}

.privacy p {font-size: 15px; margin-top: 20px; color: #444;}

.payment textarea {border: 1px solid #ddd; border-radius: 15px; height: 100px; width: 100%;}
.payment .pro-info {margin-top: 0;}


/* 주문/결제 상세 */
.pay-date {padding: 10px 20px; background-color: #f5f5f5; display: flex; align-items: center; justify-content: space-between; border-bottom: none !important;}
.pay-date p {font-size: 14px; font-weight: 700; color: #555;}
.pay-date span {font-size: 14px; font-weight: 500; color: #888;}

.payment-history .his-tit { padding: 12px 0; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eee;}
.payment-history .his-tit h2 {padding: 0; border-bottom: none;}
.payment-history .his-tit em {width: 15px; transform: rotate(0deg); transition: all 0.2s;}
.his-tit em img {
  transition: transform 0.3s ease;
}
.payment-history .input-wrap .input p {padding-left: 0; width: 100px;}
.payment-history .input-wrap .input {display: flex; flex-direction: row;}
.payment-history .pay p {font-size: 18px; font-weight: 800;}
.slide-wrap {display: none;}

@media (max-width:310px){
  /* .bt_nav li span {font-size: 13px;} */
}