* {box-sizing: border-box;}
@font-face {
    font-family: 'NanumBarunGothic';
    src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.eot');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'NanumBarunGothic';
    src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebBold.eot');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'NanumBarunGothic';
    src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.eot');
    font-weight: 300;
    font-display: swap;
}

html {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 900px;
}

html::-webkit-scrollbar {
  width: 0;
}

html::-webkit-scrollbar-thumb {
  width: 0;
}

body {
  height: 100%;
  text-align: center;
  background-color: #686868;
  color: #111;
  font-size: 13px;
  font-family: "NanumBarunGothic", sans-serif;
}

button, a, input, select, textarea {
  outline: none !important;
  transition: 0.3s;
}
img {max-width: 100%;}
p {margin: 0;padding: 0;}
iframe {
  border: none;
}
button {
  padding: 0;
}
ul {margin: 0;padding: 0;}
a {color: #111;text-decoration: none;cursor: pointer;}
li {list-style: none;}
a:hover {text-decoration: none;}
i {display: inline-flex;align-items: center;}
h4,h5,h6 {margin: 0;padding: 0;}
.btn_red {display:inline-block;padding:8px 20px;font-size:13px;box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 1px 1px rgb(0 0 0 / 5%);background:linear-gradient(180deg, #911e01, #610000);color:#fff;    font-weight: 700;
    border-radius:3px;}
.btn_blue {display:inline-block;padding:8px 20px;font-size:13px;box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 1px 1px rgb(0 0 0 / 5%);background:linear-gradient(180deg, #0090ff, #0069ae);color:#fff;    font-weight: 700;
    border-radius:3px;}
.btn_gray {display:inline-block;padding:8px 20px;font-size:13px;box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 1px 1px rgb(0 0 0 / 5%);background:#666;color:#fff;    font-weight: 700;
    border-radius:3px;}
.btn_green {display:inline-block;padding:8px 20px;font-size:13px;box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 1px 1px rgb(0 0 0 / 5%);background:#1c8382;color:#fff;    font-weight: 700;
    border-radius:3px;}
.btn_orange {display:inline-block;padding:8px 20px;font-size:13px;box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 1px 1px rgb(0 0 0 / 5%);background:#df7834;color:#000;    font-weight: 700;
    border-radius:3px;}
.btn_small {display:inline-block;padding:4px 5px;box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 1px 1px rgb(0 0 0 / 5%);background:#0090ff;color:#fff;font-size:12px;
    border-radius:3px;    vertical-align: middle;}
.btn_red_s {display:inline-block;padding:4px 5px;box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 1px 1px rgb(0 0 0 / 5%);background:#c10000;color:#fff;font-size:12px;
    border-radius:3px;    vertical-align: middle;}
.btn_lgr {display:inline-block;padding:8px 20px;font-size:13px;box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 1px 1px rgb(0 0 0 / 5%);background:linear-gradient(180deg, #3db21f, #277217);color:#fff;    font-weight: 700;
    border-radius:3px;}
.bg_org {background: #f05222;color:#fff !important;border-color: #f05222 !important;}
.text_org {color: #f05222;}

.tal {text-align: left;}
.tar {text-align: right;}  
.tac {text-align: center;}
.dflexS {display: flex;align-items: center;justify-content: space-between;}
.dflexC {display: flex;align-items: center;justify-content: center;}
.dflexL {display: flex;align-items: center;justify-content: left;}
.dflexR {display: flex;align-items: center;justify-content: right;}
.w100 {width: 100%;} 
.fww {flex-wrap: wrap;}

/***********  header ************/
.allwrap {background: #fff;max-width: 420px;margin: 0 auto;box-shadow: 0 0 22px -2px #000000bf;height: 100%;position: relative;}
.allwrap::-webkit-scrollbar {display: none;}
.header {width: 100%;height: 60px;background-color: #fff;display: flex;align-items: center;justify-content: center;border-bottom: 1px solid #ccc;position: sticky;top: 0;z-index: 9;}
.header .first {width: 100%;display: flex;align-items: center;justify-content: space-between;padding: 0 15px 0 10px;}
.header .first a.logo-link {}
.header .first a.logo-link img {height: 40px;}
.header .first > div {gap: 20px;display: flex;align-items: center;}
.header .first > div a {color: #111;font-size: 20px;}

.sidebar-right {position: fixed;top: 0px;left: 50%;transform:translateX(-50%);width: 100%;max-width: 420px; height: 100%;background: #f05222;display: none;z-index: 999;}
.sidebar-right.active {display: block;}
.closesidebar {position: absolute;top: 20px;right: 20px;font-size: 24px;color: #fff;cursor: pointer;}
.sidebar-right .top {padding: 50px 20px 0px 20px;flex-wrap: wrap;color: #fff;gap: 10px;}
.sidebar-right .top .logo-link {width: 30%;}
.sidebar-right .top .right {text-align: left;}
.sidebar-right .top .right > div {font-size: 23px;font-family: 700;}
.sidebar-right .top .right > span {display: flex;align-items: center;gap: 5px;color: #eee;}
.sidebar-right .top .bot {padding: 20px 0;border-top: 1px solid #ddd;margin-top: 10px;width: 100%;color:#ddd;font-size: 16px;}
.sidebar-right .top .bot a {padding:10px 20px;color: #fff;border: 1px solid #fff;border-radius: 15px;}

.sidebar-right .main {background: #fff;padding: 30px 20px 10px 20px;border-radius: 40px 0 0 0;}
.sidebar-right .main .first {display: flex;align-items: center;justify-content: space-around;margin-bottom: 20px;gap: 20px;}
.sidebar-right .main .first a {flex: 1 1;}
.sidebar-right .main .first a .icon {width: 100%;aspect-ratio: 4 / 4;box-shadow: 1px 2px 5px #0003;border-radius: 50%;padding: 10px;display: flex;align-items: center;justify-content: center;background: #fff;}
.sidebar-right .main .first a .icon i {font-size: 30px;color: #333;}
.sidebar-right .main .first a > p {margin-top: 10px;color: #333;font-weight: 700;}
.sidebar-right .menulist {background:#ddd ;}
.sidebar-right .menulist a {display: block;padding: 20px 30px;color: #333;font-size: 18px;font-weight: 700;border-bottom: 1px solid #aaa;text-align: left;}
.sidebar-right .menulist .footer {height: 100vh;padding-left: 30px;}


/***********  main ************/
section.first {background: #f7eee7;padding-bottom: 60px;}
.main_topmenu {display: flex;align-items: center;justify-content: space-around;}
.main_topmenu a {display: flex;align-items: center;justify-content: center;font-size: 16px;font-weight: 500;height: 40px;color: #000;}
.main_search {display: flex;align-items: center;justify-content: center;gap: 10px;margin-top: 10px;padding: 0 10px;margin-bottom: 10px;}
.main_search .inputwrap {position: relative;width: 100%;display: flex;align-items: center;border: 2px solid #f05222;height: 50px; border-radius:25px;overflow: hidden;padding: 4px;}
.main_search .inputwrap input {width: 100%;height: 100%;border: none;padding: 0 20px;font-size: 14px;background: none;}
.main_search .inputwrap button {background-color: #f05222;color: #fff;border: none;width: 44px;height: 40px;font-size: 14px;cursor: pointer;height: 100%;border-radius: 20px;display: flex;align-items: center;justify-content: center;}
.main_item {padding: 0 20px;margin-bottom: 20px;}
.main_item .carousel {display: flex;}
.main_item .carousel .carousel-indicators {right: 0px;left: auto;margin: auto;bottom: -21px;}
.main_item .carousel .carousel-indicators li {height: auto;background: none;border-top: 0;border-bottom: 3px solid #444;text-indent: inherit;font-size: 18px;font-weight: 700;}
.main_item .carousel .carousel-indicators li.active {color: #f05222;border-color: #f05222;}

.main_item img {height: 300px;}
.main_item h3 {font-size: 28px;margin: 10px 0;text-align: left;}
.main_item .buy {text-align: left;}
.main_item .buy .first {display: flex;align-items: center;gap: 10px;font-size: 14px;font-weight: 700;color: #f05222;}
.main_item .buy > a {display: inline-flex;align-items: center;justify-content: center;height: 50px;padding: 0 20px;border-radius: 25px;background: #f05222;color:#fff;font-size: 14px;font-weight: 700;margin-top: 10px;gap: 10px;}
.main_item .buy > a i {font-size: 21px;}

section.second {margin-top: -59px;}
section.second .tab {text-align: right;margin-right: 10px;display:flex;align-items: center;justify-content: right;}
section.second .tab a {font-size: 18px;font-weight: 700;color:#aaa;display: inline-flex;align-items: center;justify-content: center;width: 34px;border-bottom: 2px solid #aaa;}
section.second .tab a.active {color: #f05222;border-bottom: 2px solid #f05222;}
section.second .itemlist {padding: 0 20px 20px 20px;margin-top: 0px;background: #ddd;border-radius: 40px 0 0 0;}
section.second .itemlist .tt {height: 50px;}
section.second .itemlist .tt h6 {font-size: 14px;}
section.second .itemlist .tt > .date {color: #999;}
section.second .itemlist ul {display: flex;align-items: flex-start;gap: 8px;flex-direction: column;}
section.second .itemlist ul li {display: flex;align-items: center;padding: 0 20px;height: 60px;background: #fff;border-radius: 10px;height: 36px;width: 100%;}
section.second .itemlist ul li span {color: #f05222;display: flex;align-items: center;margin-top: 3px;}
section.second .itemlist ul li small {display: flex;align-items: center;margin-top: 3px;margin-left: auto;}
section.second .itemlist ul li small i {font-size: 16px;}
section.second .itemlist ul li small.up {color: #f05222;}
section.second .itemlist ul li small.down {color: #3e5eb8;}

section.third {padding: 30px 10px 10px 10px;}
section.third .tt h6 {font-size: 18px;font-weight: 700;}
section.third .tt .sub {color: #aaa;font-size: 13px;}
section.third .sort {margin: 20px auto;height: 40px;border-radius: 20px;box-shadow: 0 1px 3px #0005;padding: 0 20px;width: 100%;overflow-x: auto;}
section.third .sort a {display: inline-flex;align-items: center;justify-content: center;font-size: 13px;gap: 4px;padding: 0 10px;color:#666}
section.third .sort a.active {color: #f05222;}
section.third .sort select {border: 0;}
.rate{background: url(../images/star_bg02.png) no-repeat;width: 121px;height: 20px;position: relative;text-align: left;}
.rate span{position: absolute;background: url(../images/star02.png);width: auto;height: 20px;}
section.third .boxwrap.shop {display: none;}
section.third .boxwrap.shop.active {display: block;}
section.third .boxwrap .box {display: flex;align-items: flex-start;box-shadow: 0 1px 3px #0005;padding: 10px;border-radius: 12px;align-items: stretch;margin-bottom: 10px;}
section.third .boxwrap .box .left {width: 40%;background: #FBF1EF;border-radius: 10px;padding: 10px;    display: flex;align-items: center;}
section.third .boxwrap .box .right {width: 60%;background: #fff;padding: 10px 10px 10px 15px;text-align: left;}
section.third .boxwrap .box .right .tt {}
section.third .boxwrap .box .right .tt span {color: #f05222;font-weight: 700;font-size: 14px;}
section.third .boxwrap .box .right .tt > p {color: #111;font-size: 14px;}
section.third .boxwrap .box .right .tt > div {color: #999;font-size: 12px;margin: 5px 0 20px 0;}
section.third .boxwrap .box .right .amount {}
section.third .boxwrap .box .right .amount .rate {margin: 10px 0;}
section.third .boxwrap .box .right .amount span {font-size: 21px;font-weight: 700;}
section.third .boxwrap .box .right .amount small {color:#999;font-size: 12px;font-weight: 400;margin-top: 4px;}
section.third .boxwrap .box .right .amount .btnw {margin:10px 0;gap: 10px;}
section.third .boxwrap .box .right .amount .btnw a.btn_cart {color: #aaa;border: 1px solid #ccc;width: 40px;height: 40px;border-radius: 5px;font-size: 20px;background: #fff;gap: 10px;}
section.third .boxwrap .box .right .amount .btnw a.btn_buy {color: #fff;border: 1px solid #f05222;background: #f05222; height: 40px;border-radius: 5px;font-size: 14px;padding: 0 15px;font-weight: 700;gap: 8px;}
section.third .boxwrap .box .right .amount .btnw a.btn_buy i {font-size: 18px;}
section.third .boxwrap .box .right .amount .btnw a.btn_cart span {font-size: 16px;}

section.third .boxwrap .box:nth-child(n+3) {display: none;}
section.third .boxwrap .box:nth-child(n+3).active {display: flex;}
.more_btn {margin: 20px auto;height: 40px;border-radius: 20px;box-shadow: 0 1px 3px #0005;padding: 0 20px;width: 100%;display: flex;align-items: center;justify-content: center;color: #666;font-size: 14px;}


section.fourth {padding: 30px 20px;background: #ddd;}
section.fourth .tt h6 {font-size: 18px;font-weight: 700;}
section.fourth .tt .sub {color: #999;font-size: 13px;}
section.fourth .boxwrap {margin-top: 50px;}
section.fourth .boxwrap .box {display: flex;align-items: flex-start;box-shadow: 0 1px 3px #0002;border-radius: 12px;margin-bottom: 10px;background: #FBF1EF;flex-wrap: wrap;}
section.fourth .boxwrap .box .left {width: 100%;border-radius: 10px;padding: 10px;display: flex;align-items: center;}
section.fourth .boxwrap .box .left img {height: 100px;margin: -40px auto 0 auto;}
section.fourth .boxwrap .box .right {width: 100%;padding: 10px 10px 10px 15px;text-align: left;}
section.fourth .boxwrap .box .right .tt {}
section.fourth .boxwrap .box .right .tt span {color: #f05222;font-weight: 700;font-size: 14px;}
section.fourth .boxwrap .box .right .tt > p {color: #111;font-size: 14px;}
section.fourth .boxwrap .box .right .tt > div {color: #999;font-size: 12px;margin: 5px 0 20px 0;}
section.fourth .boxwrap .box .right .amount {}
section.fourth .boxwrap .box .right .amount .rate {margin: 10px 0;}
section.fourth .boxwrap .box .right .amount span {font-size: 21px;font-weight: 700;}
section.fourth .boxwrap .box .right .amount small {color:#999;font-size: 12px;font-weight: 400;margin-top: 4px;}
section.fourth .boxwrap .box .right .amount .btnw {margin:10px 0;gap: 10px;}
section.fourth .boxwrap .box .right .amount .btnw a.btn_cart {color: #aaa;border: 1px solid #ccc;width: 40px;height: 40px;border-radius: 5px;font-size: 20px;background: #fff;}
section.fourth .boxwrap .box .right .amount .btnw a.btn_buy {color: #fff;border: 1px solid #f05222;background: #f05222; height: 40px;border-radius: 5px;font-size: 14px;padding: 0 15px;font-weight: 700;gap: 8px;}
section.fourth .boxwrap .box .right .amount .btnw a.btn_buy i {font-size: 18px;}


section.fifth {padding: 30px 20px;background: #fff;}
section.fifth .tt h6 {font-size: 18px;font-weight: 700;}
section.fifth .tt .sub {color: #999;font-size: 13px;}
section.fifth .boxwrap {margin-top: 30px;}
section.fifth .boxwrap .box {display: flex;align-items: flex-start;border-radius: 12px;margin-bottom: 10px;flex-direction: column;border-radius: 18px;overflow: hidden;background: #FFEFD5;}
section.fifth .boxwrap .box .top {padding: 12px 12px 40px 12px;gap: 10px;align-items: flex-start;}
section.fifth .boxwrap .box .flow {flex: 1 1;justify-content: center;    display: flex;align-items: flex-start;flex-direction: column;gap: 8px;}
section.fifth .boxwrap .box .flow .circle {width: 100%;aspect-ratio: 4 / 4;border-radius: 50%;background: #fff;color: #fff;display: flex;align-items: center;justify-content: center;font-size: 13px;margin: 0 auto;}
section.fifth .boxwrap .box .bot {background: #FFE0DB;padding: 12px;gap: 10px;align-items: flex-start;border-radius: 18px 18px 0 0;}
section.fifth .boxwrap .box .bot .tt {margin-top: -34px;}
section.fifth .boxwrap .box .bot .tt span {background: #FFE0DB;padding: 0px 30px;border-radius: 15px 15px 0 0;display: inline-flex;align-items: center;justify-content: center;height: 34px;font-weight: 700;color:#222}
section.fifth .boxwrap .box .bot .inner {gap: 10px;flex-wrap: wrap;}
section.fifth .boxwrap .box .bot .inner > a {width: 100%;height: 44px;margin-top: 20px; background: #fff;display: flex;align-items: center;justify-content: center;font-size: 14px;font-weight: 700;color: #f05222;border-radius: 22px;}





/***********  footer ************/
.footer {width: 100%;background-color: #ddd;margin-top: 10px;padding: 30px 20px;flex-direction: column;text-align: left;align-items: flex-start;}
.footer h6 {font-weight: 700;}
.footer .num {margin: 10px 0;}
.footer .num span {color: #f05222;font-weight: 700;font-size: 20px;}
.footer .num > p {color: #999;font-size: 12px;}
.footer .company {font-size: 12px;color: #777;}
.footer .company h6 {margin-bottom: 5px;color:#111}
.btn_gotop {/* display: none;  */position: fixed;bottom: 20px;left: 50%; margin-left: 9%;transform: translateX(-50%);display: inline-flex;align-items: center;justify-content: center;gap: 0px;background: #fff;
    border: 1px solid #666; color: #111;font-size: 14px;padding: 4px 12px;border-radius: 8px;z-index: 99;flex-direction: column;}
.btn_gotop i {font-size: 21px;color: #666;}


/***********  로그인 ************/
.login-content {border-top: 1px solid #ccc;padding-top: 50px;}
.login-content .subpage-title img {height: 120px;}
.login-content .icon-panel {font-size: 18px;}
.login-content button.btn_submit {display: flex;align-items: center;justify-content: center;height: 46px;background: #f05222;color:#fff;width: 100%;border: 0;font-size: 16px;font-weight: 700;border-radius: 10px;}
.login-content .sns {display: flex;align-items: center;justify-content: center;gap: 30px;margin-bottom: 40px;}
.login-content .sns a img {height: 70px;}
.login-content a.btn_join {display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background: #f05222;
    color: #fff;
    width: 100%;
    border: 0;
    font-size: 18px;
    font-weight: 700;}

/***********  회원가입 ************/
.form-group {padding: 10px;text-align: left;}
.form-group .labels {font-size: 16px;font-weight: 700;color: #333;margin-bottom: 5px;}
.form-group .input-container {display: flex;align-items: center;gap: 10px;}
.form-group .input-container label {flex: 1 1;}
.form-group .input-container label {background: #fff;border-color: #ccc;color:#777}
.form-group .input-container .btn-check:checked+.btn {background: #f05222;color:#fff;border-color: #f05222;}
.form-group .input-container input,.form-group .input-container select {width: 100%;height: 40px;border: 1px solid #ccc;border-radius: 5px;padding: 0 10px;font-size: 14px;}
.form-btn {display: inline-flex;align-items: center;justify-content: center;gap: 10px;background: #f05222;color: #fff;font-size: 14px;font-weight: 700;border-radius: 5px;padding: 0 10px;height: 40px;border: none;white-space: nowrap;}
.submit-button {display: block;margin: 20px auto;padding: 0 20px;height: 50px;border-radius: 0px;background: #f05222;color: #fff;font-size: 14px;font-weight: 700;border: none;white-space: nowrap;width: 100%;}


/***********  공통사용 ************/
.page_wrap {background: #fff;margin: 0 auto;height: 100%;position: relative;border-top: 1px solid #ccc;}
.page-title {display: flex;align-items: center;gap: 10px;padding: 0px 15px;justify-content: center;font-size: 18px;height: 50px;font-weight: 700;}
.page-title a {display: flex;align-items: center;    position: absolute;left: 15px;}
.page-title span {}

.page-title2 {display: flex;align-items: center;gap: 10px;padding: 30px 15px;justify-content: center;font-size: 18px;font-weight: 700;flex-direction: column;}
.page-title2 p {font-size: 13px;color: #999;font-weight: 500;}

.tablist {display: flex;align-items: center;justify-content: left;gap: 20px;padding: 0 15px;margin-bottom: 0px;background: #eee;height: 40px;overflow-x: auto;white-space: nowrap;}
.tablist::-webkit-scrollbar {display: none;}
.tablist a {font-size: 14px;color: #555;display: flex;align-items: center;justify-content: center;padding: 0 10px;height: 100%;white-space: nowrap;}
.tablist a.active {color: #f05222;border-bottom: 2px solid #f05222;}

section.third.normal {padding: 0px 10px 10px 10px;}
section.third.normal .sort {box-shadow: none;border-bottom: 2px solid #888;border-radius: 0;color: #777;}

section.third.view {padding:0px 0;}
section.third.view .boxwrap .box {box-shadow: none;flex-direction: column;padding: 0;}
section.third.view .boxwrap .box .left {width: 100%;border-radius: 0;justify-content: center;padding: 40px 0;}
section.third.view .boxwrap .box .left img {max-height: 150px;}
section.third.view .boxwrap .box .right {width: 100%;border-radius: 0; padding: 30px 20px;}
section.third.view .boxwrap .box .right .amount .btnw {}
section.third.view .boxwrap .box .right .amount .btnw a {flex: 1 1;}

.detailtab {display: flex;align-items: center;justify-content: space-around;gap: 0px;padding: 0 15px;margin-bottom: 0px;border-top:1px solid #ccc;height: 40px;}
.detailtab::-webkit-scrollbar {display: none;}
.detailtab a {font-size: 14px;color: #555;display: flex;align-items: center;justify-content: center;padding: 0 10px;height: 100%;white-space: nowrap;}
.detailtab a.active {color: #f05222;border-bottom: 2px solid #f05222;}

section.detail {}
section.detail #item_info {}
section.detail #item_info img {width: 100%;}
section.detail #item_info .ilist {padding: 20px 10px;border-top: 1px solid #ccc;}
section.detail #item_info .ilist .box {box-shadow: 0 1px 3px #0005;padding: 15px;border-radius: 15px;margin-bottom: 10px;}
section.detail #item_info .ilist .box .goods {gap: 10px;}
section.detail #item_info .ilist .box .goods .itemimg {width: 30%;aspect-ratio: 4 / 4;padding: 5px;}
section.detail #item_info .ilist .box .goods .itemimg img {aspect-ratio: 4 / 4;object-fit: contain;}
section.detail #item_info .ilist .box .goods .info {font-size: 15px;text-align: left;font-weight: 700;}
section.detail #item_info .ilist .box .goods .info > div.tt {color:#f05222}
section.detail #item_info .ilist .box .goods .info > div.amount {font-size: 21px;font-weight: 700;margin-top: 5px;}



section.detail #howtouse {background: #f05222;padding: 10px;}
section.detail #howtouse img {width: 100%;}

section.order {padding: 30px 10px;}
section.order .inner {text-align: left;margin-bottom: 20px;}
section.order .inner h6 {font-size: 18px;padding-left: 10px;margin-bottom: 5px;}
section.order .inner .box {box-shadow: 0 1px 3px #0005;padding: 15px;border-radius: 15px;}
section.order .inner .box .name {}
section.order .inner .box .name > div {font-size: 16px;font-weight: 700;}
section.order .inner .box .name > a {padding: 5px 15px;border-radius: 10px;border: 1px solid #ccc;}
section.order .inner .box .phone {font-size: 16px;color: #999;}
section.order .inner .box .address {margin-top: 10px;}

section.order .inner .box .goods {gap: 10px;}
section.order .inner .box .goods .itemimg {width: 30%;border-radius: 15px;aspect-ratio: 4 / 4;border: 1px solid #ccc;padding: 5px;}
section.order .inner .box .goods .itemimg img {aspect-ratio: 4 / 4;object-fit: cover;}
section.order .inner .box .goods .info {font-size: 14px;}
section.order .inner .box .goods .info > p {font-size: 20px;font-weight: 700;}

section.order .inner .box .giftcard {font-size: 14px;height: 38px;}
section.order .inner .box .giftcard .lb {font-weight: 700;color: #333;}
section.order .inner .box .giftcard .my {font-weight: 700;color: #888;display: flex;align-items: center;gap: 10px;max-width: 70%;}
section.order .inner .box .giftcard .my .inputwrap {border-radius: 10px;border: 1px solid #ccc;height: 36px;padding-right:10px ;display: flex;align-items: center;justify-content: right;}
section.order .inner .box .giftcard .my .inputwrap input {background: none;border: 0; height: 100%;padding: 0 10px;text-align: right;color:#f05222;width: 100%;}
section.order .inner .box .giftcard .my .inputwrap span {font-size: 13px;color: #333;    white-space: nowrap;}
section.order .inner .box .giftcard .my button {background: #f05222;border: 0;height: 34px;border-radius: 10px;padding: 0 15px;font-size: 13px;color: #fff;    white-space: nowrap;}

section.order .inner .box .paytab {background: #ddd;padding: 2px;border-radius: 15px;}
section.order .inner .box .paytab button {background: none;border: 0;display: flex;align-items: center;justify-content: center;border-radius: 12px;height: 30px;flex: 1 1;color:#777}
section.order .inner .box .paytab button.active {background: #fff;color:#111}

section.order .inner .box .choice {}
section.order .inner .box .choice .radio {margin-top: 10px;gap: 20px;}
section.order .inner .box .choice .radio > div {display: flex;align-items: center;gap: 5px;}
section.order .inner .box .choice .radio > div input {margin-top: -2px;}
section.order .inner .box .choice .select {margin-top: 5px;}
section.order .inner .box .choice .select select {background: #fff;border: 1px solid #ccc;border-radius: 12px;height: 34px;width: 100%;padding: 0 10px;}

section.order .agree {color: #777;font-size: 13px;margin: 20px auto;}
section.order button.btn_submit {display: flex;align-items: center;justify-content: center;height: 50px;background: #f05222;color:#fff;width: calc(100% + 20px);border: 0;font-size: 18px;font-weight: 700;margin-left: -10px;}


section.orderlist {padding: 20px 0px;}
section.orderlist .search {padding: 0 10px;}
section.orderlist .search .paytab {background: #ddd;padding: 2px;border-radius: 15px;}
section.orderlist .search .paytab button {background: none;border: 0;display: flex;align-items: center;justify-content: center;border-radius: 12px;height: 36px;flex: 1 1;color:#777}
section.orderlist .search .paytab button.active {background: #fff;color:#111}
section.orderlist .search .date {margin:10px auto 20px auto;color:#777}
section.orderlist .search .date input {border: 1px solid #ccc;height: 30px;border-radius: 5px;padding: 0 10px;}
section.orderlist .search .date button {border: 1px solid #ccc;height: 30px;border-radius: 5px;padding: 0 10px;background: none;color:#777}

section.orderlist .ilist {padding: 20px 10px;border-top: 1px solid #ccc;}
section.orderlist .ilist .box {box-shadow: 0 1px 3px #0005;padding: 15px;border-radius: 15px;margin-bottom: 20px;}
section.orderlist .ilist .box .goods {gap: 10px;}
section.orderlist .ilist .box .goods .itemimg {width: 30%;border-radius: 15px;aspect-ratio: 4 / 4;border: 1px solid #ccc;padding: 5px;}
section.orderlist .ilist .box .goods .itemimg img {aspect-ratio: 4 / 4;object-fit: cover;}

section.orderlist .ilist .box .goods .info {font-size: 14px;text-align: left;}
section.orderlist .ilist .box .goods .info > div.num {color:#999}
section.orderlist .ilist .box .goods .info > div.amount {font-size: 18px;font-weight: 700;margin-top: 5px;}
section.orderlist .ilist .box .goods .info > div.amount > a {font-size: 14px;color: #888;display: flex;align-items: center;gap: 5px;}
section.orderlist .ilist .box .btnw {border-top: 1px solid #ccc;padding-top: 10px;margin-top: 10px;gap: 8px;}
section.orderlist .ilist .box .btnw a {border: 1px solid #ccc;padding: 8px 20px;font-size: 15px;color:#777;border-radius: 10px;}


section.orderdetail {padding: 20px 0px;}
section.orderdetail .inner {padding: 0 10px;}
section.orderdetail .inner .top {margin-bottom: 10px;}
section.orderdetail .inner .top > div {color:#999}
section.orderdetail .inner .top > a {font-size: 14px;color: #888;border: 1px solid #ccc;padding: 5px 15px;border-radius: 10px;}
section.orderdetail .inner .box {box-shadow: 0 1px 3px #0005;padding: 15px;border-radius: 15px;}
section.orderdetail .inner .box .goods {gap: 10px;}
section.orderdetail .inner .box .goods .itemimg {width: 30%;border-radius: 15px;aspect-ratio: 4 / 4;border: 1px solid #ccc;padding: 5px;}
section.orderdetail .inner .box .goods .itemimg img {aspect-ratio: 4 / 4;object-fit: cover;}

section.orderdetail .inner .box .goods .info {font-size: 14px;text-align: left;}
section.orderdetail .inner .box .goods .info > div.amount {font-size: 18px;font-weight: 700;margin-top: 5px;gap: 10px;}
section.orderdetail .inner .box .goods .info > div.amount small {font-size: 12px;}
section.orderdetail .inner .box .btnw {padding-top: 10px;margin-bottom: 20px;gap: 8px;}
section.orderdetail .inner .box .btnw a {border: 1px solid #ccc;padding: 8px 20px;font-size: 15px;color:#777;border-radius: 10px;flex: 1 1;}
section.orderdetail .inner .box .tbl {padding: 20px 0;border-top: 1px solid #ccc;margin-top: 0px;text-align: left;}
section.orderdetail .inner .box .tbl h6 {margin-bottom: 10px;}
section.orderdetail .inner .box .tbl .tr {align-items: flex-start;padding: 4px 0;}
section.orderdetail .inner .box .tbl .tr .th {min-width: 100px;color: #888;}
section.orderdetail .inner .box .tbl .tr .td.big {font-size: 20px;font-weight: 700;}


section.third .boxwrap.event .box {flex-direction: column;}
section.third .boxwrap.event .box .top img {border-radius: 12px;}
section.third .boxwrap.event .box .bot {text-align: left;padding-left: 10px;margin-top: 10px;}
section.third .boxwrap.event .box .bot .date {color:#888}
section.third .boxwrap.event .box .bot p {font-size: 15px;}


section.review {}
section.review .detailtab {border-top: 0;border-bottom: 1px solid #ccc;}
section.review .inner {padding :0 10px}
section.review .top {padding:10px 10px;margin-top: 10px;border-bottom: 1px solid #aaa;}
section.review .top select {border: 0;padding: 0 10px;}
section.review .inner .goods {padding: 10px 0;gap: 10px;flex-wrap: wrap;}
section.review .inner .goods .itemimg {width: 25%;border-radius: 15px;aspect-ratio: 4 / 4;padding: 5px;}
section.review .inner .goods .itemimg img {aspect-ratio: 4 / 4;object-fit: cover;border-radius: 15px;}
section.review .inner .goods .info {font-size: 14px;text-align: left;}
section.review .inner .goods .info .name {color:#888}
section.review .inner .goods .info .item {font-size: 15px;}
section.review .inner .goods .text {width: 100%;color:#999;text-align: left;border-bottom: 1px solid #ccc;padding:0 10px 10px 10px;}


/***********  상품권결제 모달 ************/
.modal {left: 50%;transform:translateX(-50%) !important;width: 100%;max-width: 420px;}
.modal-content {border: 0;border-radius: 20px 20px 0 0;padding:50px 10px 10px 10px;}
.modal-close {position: absolute;top: 15px;width: 25%;height: 6px;border-radius: 3px;background: #ccc;left: 50%;transform:translateX(-50%)}
.gift_modal {width: 100%; max-width: 100%;position: absolute;bottom: 0;margin: 0;}
.gift_modal .modal-content {padding-bottom: 0;}
.gift_modal .top {color: #333;font-weight: 700;margin-bottom: 10px;padding: 0 10px;}
.gift_modal .top span {font-size: 16px;}
.gift_modal .top div {font-size: 18px;}
.gift_modal .body .box {box-shadow: 0 1px 3px #0005;padding: 12px 10px 12px 20px;border-radius: 15px;margin-bottom: 10px;gap: 20px;}
.gift_modal .body .box .info {text-align: left;}
.gift_modal .body .box .info div {font-size: 15px;font-weight: 700;}
.gift_modal .body .box .info.enable div.tt {color: #f05222;}
.gift_modal .body .box .info.disable div.tt {color: #999;}
.gift_modal .body .box .info.disable div.amount {color: #999;}
.gift_modal .body .box .info small {color: #f05222;}
.gift_modal .body a.btn_submit {display: flex;align-items: center;justify-content: center;height: 50px;background: #f05222;color:#fff;width: 100%;border: 0;font-size: 18px;font-weight: 700;width: calc(100% + 20px);margin-left: -10px;}


/***********  장바구니 ************/
.btn_choicew {display: flex;align-items: center;justify-content: space-between;padding:10px; }
.btn_choicew .form-check {display: flex;align-items: center;gap: 5px;font-size: 15px; }
.btn_choicew .form-check .form-check-input {width: 1.5em;height: 1.5em;margin-top: -1px;}
.btn_choicew a {font-size: 14px;color: #888;border-radius: 8px;background: #fff;border: 1px solid #ccc;padding: 5px 20px;}

section.cartlist .ilist {padding: 20px 10px;border-top: 1px solid #ccc;}
section.cartlist .ilist .box {box-shadow: 0 1px 3px #0005;padding: 15px;border-radius: 15px;margin-bottom: 20px;}
section.cartlist .ilist .box .goods {gap: 10px;}
section.cartlist .ilist .box .goods input {width: 1.5em;height: 1.5em;margin-top: -1px;border-color: #ccc;}
section.cartlist .ilist .box .goods .itemimg {width: 20%;border-radius: 15px;aspect-ratio: 4 / 4;border: 1px solid #ccc;padding: 5px;}
section.cartlist .ilist .box .goods .itemimg img {aspect-ratio: 4 / 4;object-fit: cover;}

section.cartlist .ilist .box .goods .info {font-size: 14px;text-align: left;}
section.cartlist .ilist .box .goods .info > div.num {color:#999}
section.cartlist .ilist .box .goods .info > div.amount {font-size: 18px;font-weight: 700;margin-top: 5px;}
section.cartlist .ilist .box .goods .info > div.amount > a {font-size: 14px;color: #888;display: flex;align-items: center;gap: 5px;}
section.cartlist .ilist .box .btnw {border-top: 1px solid #ccc;padding-top: 10px;margin-top: 10px;gap: 8px;}
section.cartlist .ilist .box .btnw a {border: 1px solid #ccc;padding: 8px 20px;font-size: 15px;color:#777;border-radius: 10px;}
section.cartlist .ilist .box .btnw .btn_count {display: flex;align-items: center;height: 44px;border: 1px solid #ccc;border-radius: 10px;overflow: hidden;    max-width: 32%;margin-right: auto;}
section.cartlist .ilist .box .btnw .btn_count button {border: 0;background: none;width: 25%;display: flex;align-items: center;justify-content: center;height: 100%;color:#888}
section.cartlist .ilist .box .btnw .btn_count input {border: 0;height: 100%;width: 50%;text-align: center;color:#888;font-size: 16px;border-left: 1px solid #ccc;border-right: 1px solid #ccc;}


/***********  보드뷰 ************/
section.boardview {}
section.boardview .date {padding: 10px;color: #888;}
section.boardview .content {padding: 10px;color: #888;}
section.boardview .content img {border-radius: 10px;margin-bottom: 20px;}


@media(max-width: 1200px){
  .main-menu ul li {padding: 0 10px;}
  .main-menu ul li a {font-size: 14px;}

}