/* 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: 15px;}
.bt_nav li.on span {color: #FB8500; 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: transparent;  z-index: 12;}
.header .logo {width: 55px;}

.header.main-hd {border-bottom: none; }

.de-he {border-bottom: 1px solid #eee; background-color: #fff;}

.header.on {background-color: #fff;}
.header.bg-n {background-color: transparent;}
.mypage .header {background-color: #f9f9f9;}

.mypage-hd {background-color: #FB8500;}
.header .back {width: 9px;position: relative; z-index: 10;}
.header .head-tit {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; color: #333; font-size: 16px; font-weight: 500;}
.header .logout {font-size: 13px; color: #777; border: 1px solid #ccc; border-radius: 50px; padding: 3px 12px; z-index: 10;}



/* 주문/결제 */


.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: 20px;}

.input-wrap .input p {font-size: 14px;  font-weight: 500; margin-bottom: 8px; color: #333;}
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/chk-on2.png) no-repeat center/cover; width: 20px; height: 20px;}
.chk-box div label span {display: block; background: url(../img/chk-none.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 h3 {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 !important; padding: 15px 0;}
.pay-info li {display: flex; align-items: center; justify-content: space-between;}
.pay-info li span { font-size: 14px !important; color: #666 !important;}
.pay-info li p {width: fit-content !important;}
.pay li p {font-size: 16px !important; color: #333 !important; width: fit-content !important;}
.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 #FB8500; background-color: #FB850014; color: #FB8500;}
.pay-btn-wrap {margin-top: 15px;}

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

.pro-num {display: flex; padding: 7px 15px; border-radius: 3px; border: 1px solid #eee; width: fit-content; gap: 30px;}
.pro-num span {width: 15px;}
.pro-num span img {object-fit: contain;}
.cart-pro-pri {display: flex; align-items: center; justify-content: space-between;}
.pro-price {font-size: 16px; font-weight: bold;}
.bd-n {border-bottom: none !important;}


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