@charset "utf-8";

@import '../css/fonts.css';
/* @import url('//fonts.googleapis.com/css2?family=Roboto:wght@400; 700; 900&display=swap'); */
@import url('//fonts.googleapis.com/css2?family=Readex+Pro&display=swap');
/* reset */
blockquote,
body,
dd,
div,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
input,
li,
ol,
p,
pre,
td,
textarea,
th,
ul { padding: 0; margin: 0; /* line-height: 1.4em; */
 font-weight: 800;
 font-family: 'Jalnan','JalnanOTF','Pretendard-Bold','Pretendard-ExtraBold','Pretendard-ExtraLight','Pretendard-Light','Pretendard-Medium','Pretendard-Regular','Pretendard-SemiBold','Pretendard-Thin','Noto Sans Korean', 'Malgun Gothic', 'Open Sans', sans-serif; word-wrap: break-word; -webkit-text-size-adjust: none; }

li,
ol,
ul { list-style: none; }

h1,
h2,
h3,
h4,
h5,
h6 { font-weight: normal; font-size: 100%; }

.cell { float: left; }

.cell-r { float: right; }

.row:after { display: block; content: ""; clear: both; }

.pad_r { padding-right: -10px;}

.dp_n {
    display: none;
}

.fx {
    display: flex;
    justify-content: space-between;
}

fieldset,
form { border: 0; }

address,
caption,
em { font-weight: normal; font-style: normal; }

img { border: 0; margin: 0; padding: 0; }

a { text-decoration: none; color: inherit; }

a:active,
a:link,
a:visited { text-decoration: none !important; }

img { vertical-align: middle; }

select,
input { padding-left: 10px; box-sizing: border-box; font-size:inherit; }

#main_view,
#order,
#cart01,
#cart02,
#add_item,
#select,
#met_payment,
#comp_pay,
#payment {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.main {
    padding: 30px 18px 30px 18px;
    box-sizing: border-box;
    background: linear-gradient(to top, #0c131a, #2f353f);
    color: #fff;
}

.main .title {
    width: 100%;
    text-align: center;
    padding: 50px 0;
    box-sizing: border-box;
    position: relative;
    color: #ffffff;
    text-shadow: 10px 10px 15px black;

}

.main .title h1 {
    font-size: 55px;
}

.main .title .back {
    display: inline;
    width: 150px;
    /* height: 50px; */
    background-color: #0d151d;
    position: fixed;
    text-align: center;
    line-height: 50px;
    border-radius: 25px;
    top: 20px;
    right: 20px;
    transform: translateY(-50%);
    font-size: 20px;
}

.main .title .back .back_before {
    display: block;
    width: 100%;
    /* height: 100%; */
    padding-left: 10px;
    box-sizing: border-box;
}

.main .title .back .back_before::before {
    width: 11px;
    height: 19px;
    content: '';
    position: absolute;
    top:30%;
    left:10%;
    transform: translateY(-50);
    background: url(../img/prev.png) no-repeat center / cover;
}

.main .round_bg {
    width: 192.5px;
    height: 192.5px;
    background-color: #131c25;
    border-radius: 50%;
    margin: 0 auto;
    position: relative;
    cursor: pointer;
}
.main h2{margin-top: 20px; }

.main .round:not(.bg01) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.main .round_bg .bg01{
    width: 177.75px;
    height: 177.75px;
    border-radius: 50%;
    position: absolute;
    top:4%;
    left:3.6%;
    animation-name: test;
    animation-duration: 2s;
    animation-delay: 1s ;
    animation-direction: normal;
    animation-iteration-count: infinite ;
    animation-play-state: paused;
    animation-timing-function: linear ;
    animation-fill-mode: forwards ;

}

.main .round_bg .bg01 {
    background-image: linear-gradient(120deg,#38ebba, #6fb1d2);
}

  @keyframes test {
    0% {
      transform : rotate(0deg);
    }
    100% {
      transform : rotate(360deg);
    }
  }

  .main .round_bg:hover .bg01 {
    animation-play-state: running;
    background-image: linear-gradient(120deg, #38ebba 10%, #6fb1d2 30%, #7776ff 75%, #ae2cf1 100%);
  }

  .main .round_bg:hover .bg04 {
    box-shadow: 0.5px 0.5px 1.5px 0.5px #434a55;
  }

.main .round_bg .bg02 {
    width: 150px;
    height: 150px;
    background-color: #131c25;
}

.main .round_bg .bg03 {
    width: 120px;
    height: 120px;
    background: linear-gradient(120deg, #1d242d, #0f1318);
    box-shadow: -1px -1px 3px 1px #0f1318;
}

.main .round_bg .bg04 {
    width: 90px;
    height: 90px;
    box-shadow: -0.5px -0.5px 1.5px 0.5px #434a55;
    background: linear-gradient(-45deg, #151c24, #2c3341);
    text-align: center;
    line-height: 90px;
}

.main .round_bg .bg04 img {
    width: 43px;
    height: 57px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#order h2,
#cart01 h2,
#cart02 h2,
#add_item h2,
#select h2,
#met_payment h2,
#payment h2,
#comp_pay h2 {
    font-size: 30px;
    text-shadow: 10px 10px 15px black;
    text-align: center;
    padding: 30px 0;
    box-sizing: border-box;
    line-height: 1.2;
}

#cart01 h2,
#cart02 h2 {
    padding: 15px 0;
    box-sizing: border-box;
}

.section {
    /*height: 1045px;*/
    padding: 50px 60px 100px;
    box-sizing: border-box;
    background-color: #e7e7e7;
    position: relative;
}
.tab {
    /*float: center;*/
    width: 100%;
    height: 100%;
}

.tabnav {
    width: 100%;
    height: auto;
    padding-bottom: 60px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
}

.tabnav li {
    width: 210px;
    height: 70px;
    text-align: center;
    background: linear-gradient(180deg, #2c3341, #151c24);
    border-radius: 15px;
}

.tabnav li a.active {
    background-color: #fff;
    color: #192128;
    border-radius: 13.9px;
}

.tabnav li a {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    color: #fff;
    line-height: 46px;
    text-decoration: none;
    font-size: 30px;
    line-height: 70px;
}

.tabcontent {
    height: auto;
}

.tabcontent #tab01,
.tabcontent #tab02,
.tabcontent #tab03,
.tabcontent #tab04 {
    width: 100%;
}

.tabcontent #tab01 .menu_01,
.tabcontent #tab01 .menu_02,
.tabcontent #tab02 .menu_01,
.tabcontent #tab02 .menu_02,
.tabcontent #tab03 .menu_01,
.tabcontent #tab03 .menu_02,
.tabcontent #tab04 .menu_01,
.tabcontent #tab04 .menu_02 {
    /*height: 300px;*/
    /*display: flex;*/
    /*justify-content: space-between;*/
    display: grid;
    /*grid-template-columns: repeat(4, 1fr);*/
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    align-items: center;
    gap: 16px;
}

.tabcontent #tab01 .menu_02,
.tabcontent #tab02 .menu_02,
.tabcontent #tab03 .menu_02,
.tabcontent #tab04 .menu_02 {
    height: 350px;
}

.tabcontent #tab01 .menu_box .menu,
.tabcontent #tab02 .menu_box .menu,
.tabcontent #tab03 .menu_box .menu,
.tabcontent #tab04 .menu_box .menu {
    width: 210px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.tabcontent #tab01 {
    list-style: none;
    counter-reset: list_counter 0; /* 카운터 -1로 초기화 */
}

.tabcontent #tab01 .menu_num {
    /* margin-bottom: 2em;
    margin-left: 2em; */
    position: relative;
}

.tabcontent #tab01 .menu_num:before {
    content: counter(list_counter); /* 가상요소 표시 컨텐츠를 카운터 숫자로 */
    counter-increment: list_counter 1; /* 2씩 늘어남*/
    position: absolute;
    top: 0%;
    left: 0%;
    border-radius: 50%;
    font-size: 20px;
    font-family: 'Jalnan';
    width: 35px;
    height: 35px;
    color: #fff;
    background-color: #ee2d2d;
    display: flex;
    justify-content: center;
    align-items: center;
}



.tabcontent #tab01 .menu_box .menu .img_box,
.tabcontent #tab02 .menu_box .menu .img_box,
.tabcontent #tab03 .menu_box .menu .img_box,
.tabcontent #tab04 .menu_box .menu .img_box {
    width: 210px;
    height: 200px;
    background-color: white;
    border-top-left-radius:  26px;
    border-top-right-radius: 26px;
    overflow: hidden;
}

.img_box img{ height: 100%; max-width: 100%;}
.tabcontent #tab01 .menu_01 .menu .bottom,
.tabcontent #tab02 .menu_01 .menu .bottom,
.tabcontent #tab03 .menu_01 .menu .bottom,
.tabcontent #tab04 .menu_01 .menu .bottom {
    width: 210px;
    height: 110px;
    background-color: #f5f5f5;
    /* position: absolute; */
    text-align: center;
    /* top: 30%; */
    /* left:0; */
    /* padding-top: 125px; */
    box-sizing: border-box;
    /* border-radius: 15%; */
    /* z-index: -1; */
    padding: 20px 0;
    border-bottom-left-radius:  26px;
    border-bottom-right-radius: 26px;

}

.tabcontent #tab01 .menu_02 .menu .bottom,
.tabcontent #tab02 .menu_02 .menu .bottom,
.tabcontent #tab03 .menu_02 .menu .bottom,
.tabcontent #tab04 .menu_02 .menu .bottom {
    /* width: 210px;
    height: 210px;
    background-color: #fff;
    position: absolute;
    text-align: center;
    top: 40%;
    left:0;
    padding-top: 120px;
    box-sizing: border-box;
    border-radius: 15%;
    z-index: -1; */
    width: 210px;
    height: 110px;
    background-color: #f5f5f5;
    /* position: absolute; */
    text-align: center;
    /* top: 30%; */
    /* left:0; */
    /* padding-top: 125px; */
    box-sizing: border-box;
    /* border-radius: 15%; */
    /* z-index: -1; */
    padding: 20px 0;
    border-bottom-left-radius:  26px;
    border-bottom-right-radius: 26px;
}

.tabcontent #tab01 .menu_box .menu .bottom > h3,
.tabcontent #tab02 .menu_box .menu .bottom > h3,
.tabcontent #tab03 .menu_box .menu .bottom > h3,
.tabcontent #tab04 .menu_box .menu .bottom > h3,
#add_item .section .bottom h3,
#select .section .bottom h3 {
    font-size: 20px;
    font-family: 'Pretendard-Bold';
    box-sizing: border-box;
}

.tabcontent #tab01 .menu_box .menu .bottom > h4,
.tabcontent #tab02 .menu_box .menu .bottom > h4,
.tabcontent #tab03 .menu_box .menu .bottom > h4,
.tabcontent #tab04 .menu_box .menu .bottom > h4,
#add_item .section .bottom h4,
#select .section .bottom h4 {
    font-size: 15px;
    font-family:'Pretendard-SemiBold';
    color:#818589;
    padding-bottom: 10px;
    box-sizing: border-box;
}

.tabcontent #tab01 .menu_box .menu .bottom > span,
.tabcontent #tab02 .menu_box .menu .bottom > span,
.tabcontent #tab03 .menu_box .menu .bottom > span,
.tabcontent #tab04 .menu_box .menu .bottom > span,
#add_item .section .bottom span,
#select .section .bottom span {
    font-size: 16px;
    font-family: 'Pretendard-Medium';
}

.menu_02 {
    margin-top: 40px;
    box-sizing: border-box;
}

.bottom_btn,
.bottom_btn01 {
    width: 35%;
    display: flex;
    justify-content: space-around;
    margin: 0 auto;
    /*margin: 0 10px;*/
    /*align-items: center;*/
    padding: 50px 0 0 0;
    box-sizing: border-box;
}

.bottom_btn01 {
    padding: 90px 0 90px 0;
    box-sizing: border-box;
}

.bottom_btn .btn,
.bottom_btn01 .btn {
    /*width: 110px;*/
    height: 45px;
    line-height: 45px;
    background-color: #292f39;
    text-align: center;
    border-radius: 15px;
    box-shadow: 5px 5px 5px 1px rgba(0, 0, 0, 0.2);
    flex: 1;
    margin: 0 10px;
}

.bottom_btn .btn a,
.bottom_btn01 .btn a {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 20px;
    color: #fff;
}

.bottom_btn .btn .prev_before,
.bottom_btn01 .btn .prev_before {
    position: relative;
    padding-left: 15px;
    box-sizing: border-box;
}

.bottom_btn .prev_btn .prev_before::before,
.bottom_btn01 .prev_btn .prev_before::before {
    width: 11px;
    height: 19px;
    content: '';
    position: absolute;
    top:30%;
    left:20%;
    transform: translateY(-50);
    background: url(../img/prev.png) no-repeat center / cover;
}

.bottom_btn .btn .next_after,
.bottom_btn01 .btn .next_after {
    position: relative;
    padding-right: 15px;
    box-sizing: border-box;
}

.bottom_btn .next_btn .next_after::after,
.bottom_btn01 .next_btn .next_after::after {
    width: 11px;
    height: 19px;
    content: '';
    position: absolute;
    top:30%;
    right: 20%;
    transform: translateY(-50);
    background: url(../img/next.png) no-repeat center / cover;
}

.bottom_btn span,
.bottom_btn01 span {
    padding: 0 10px;
    font-size: 20px;
    line-height: 45px;
    color: #292f39;
    font-weight: 600;
}

.section .cart_red {
    width: 292px;
    height: 53px;
    position: absolute;
    bottom:0;
    left:18px;
    background: linear-gradient(to top, #f3443f, #e6403c);
    border-radius: 40px 40px 0px 0px;
    text-align: center;
    line-height: 53px;
    color: #fff;
    font-size: 20px;
    font-family:'Jalnan ';
}

.shop_cart {
    width: 100%;
    height: 275px;
}

.shop_cart .cart {
    height: 100%;
}

.shop_cart .cart .cart_title {
    width: 100%;
    height: 65px;
    border-bottom: 1px solid #e7e7e7;
    color:#1a222a;
    line-height: 65px;
    font-size: 20px;
}

.shop_cart .cart .cart_title .title_box {
    width: 100%;
    display: inline-flex;
    padding: 0px 10px 0px 60px;
    box-sizing: border-box;
}

.cart_wrap,
.cart_wrap01 {
    height: 150px;
    box-sizing: border-box;
    overflow-y: scroll;
    border-bottom:1px solid #e7e7e7 ;
}

.cart_wrap01 h3 {
    font-family:'Pretendard-Bold';
    font-size: 24px;
    text-align: center;
    line-height: 150px;
}

.cart_wrap::-webkit-scrollbar {
    width: 10px;
  }
  .cart_wrap::-webkit-scrollbar-thumb {
    background-color: #b3b3b3;
    border-radius: 10px;
  }
  .cart_wrap::-webkit-scrollbar-track {
    background-color: #e7e7e7;
  }

.shop_cart .cart .cart_wrap .cart_sta {
    width: 100%;
    height: 50px;
    padding-left:60px;
    box-sizing: border-box;
}

.shop_cart .cart .cart_title .title_box .tit_01,
.shop_cart .cart .cart_wrap .sta .name {
    width: 20%;
}

.shop_cart .cart .cart_title .title_box .tit_02,
.shop_cart .cart .cart_wrap .sta .option {
    width: 35%;
}

.shop_cart .cart .cart_title .title_box .tit_03,
.shop_cart .cart .cart_wrap .sta .count {
    width: 10%;
    text-align: center;
}

.shop_cart .cart .cart_title .title_box .tit_04,
.shop_cart .cart .cart_wrap .sta .amount {
    width: 20%;
    text-align: center;
}

.shop_cart .cart .cart_title .title_box .tit_05,
.shop_cart .cart .cart_wrap .sta .cancel {
    width: 15%;
    text-align: center;
}

.cart_wrap .cart_sta .sta {
    display: inline-flex;
    width: 100%;
    height: 50px;
    line-height: 50px;
}

 .cart_wrap .cart_sta .sta .name h3,
 .cart_wrap .cart_sta .sta .option h3,
 .cart_wrap .cart_sta .sta .count h3,
 .cart_wrap .cart_sta .sta .amount h3 {
    font-size: 16px;
    font-family:'Pretendard-Medium';
    font-weight: 600;

}

.cart_sta .sta .option a span {
    font-size: 12px;
    color: #b0b0b0;
    text-decoration: underline;
    padding-left: 20px;
    box-sizing: border-box;
    position: relative;
}

.cart_sta .sta .count {
    position: relative;
}

.cart_sta .sta .count .h3_minus {
    width: 30px;
    height: 30px;
    content: '';
    position: absolute;
    top:50%;
    left:0;
    transform: translateY(-50%);
    background: url(../img/minus.png) no-repeat center / cover;
    cursor: pointer;
}

.cart_sta .sta .count .h3_plus {
    width: 30px;
    height: 30px;
    content: '';
    position: absolute;
    top:50%;
    right:0;
    transform: translateY(-50%);
    background: url(../img/plus.png) no-repeat center / cover;
    cursor: pointer;
}
/*
.cart_sta .sta .count a img {
    padding-left: 100px;
    box-sizing: border-box;
    background-color: red;
} */

.bottom_text {
    height: 60px;
    line-height: 60px;
}

.bottom_text .total_box01 {
    width: 15%;
}

.bottom_text .total_box02 {
    width: 21%;
}

.bottom_text .total_box01 h3,
.bottom_text .total_box02 h3 {
    font-size: 20px;
    color: #787e84;
    font-family:'Pretendard';
    font-weight: 600;
}

.bottom_text .total_box01 h3 span,
.bottom_text .total_box02 h3 span {
    color: #000000;
    font-weight: 900;
}

.btns {
    width: 100%;
    height: 110px;
    display: flex;
}

.btns .btn a {
    display: block;
    width: 100%;
    height: 100%;
}

.btns .btn_left {
    position: relative;
}

.btns .btn_left a {
    padding-left: 10px;
    box-sizing: border-box;
}

.btns .btn_left:before {
    content: '';
    width: 30px;
    height: 30px;
    position: absolute;
    top:50%;
    left:15%;
    transform: translateY(-50%);
    background: url(../img/rotation.png) no-repeat center / cover;
    cursor: pointer;
}


.btns .btn_left,
.btns .btn_right {
    width: 40%;
    height: 100%;
    background: linear-gradient(to top, #16222b, #595e67);
    text-align: center;
    color: #fff;
    font-size: 30px;
    line-height: 110px;
}

.btns .btn_right {
    width: 60%;
    background: linear-gradient(to top, #d42f29, #f0433e);
}



/* main_view 시작 */
#main_view {
    padding: 70px 80px 0 80px;
    box-sizing: border-box;
    min-height: 100vh;
    position: relative;
}

.title_txt,
.main_img {
    text-align: center;
    padding-bottom: 20px;
    box-sizing: border-box;
}

.main_img {
    padding-bottom: 95px;
    box-sizing: border-box;
}

#main_view .round_bg {
    width: 192.5px;
    height: 192.5px;
    background-color: #131c25;
    border-radius: 50%;
    margin: 0 auto;
    position: relative;
    cursor: pointer;
}

#main_view .round:not(.bg01) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

#main_view .round_bg .bg01{
    width: 177.75px;
    height: 177.75px;
    border-radius: 50%;
    position: absolute;
    top:4%;
    left:3.6%;
    animation-name: test;
    animation-duration: 2s;
    animation-delay: 1s ;
    animation-direction: normal;
    animation-iteration-count: infinite ;
    animation-play-state: paused;
    animation-timing-function: linear ;
    animation-fill-mode: forwards ;

}

#main_view .round_bg .bg01 {
    background-image: linear-gradient(120deg,#38ebba, #6fb1d2);
}

  @keyframes test {
    0% {
      transform : rotate(0deg);
    }
    100% {
      transform : rotate(360deg);
    }
  }

  #main_view .round_bg:hover .bg01 {
    animation-play-state: running;
    background-image: linear-gradient(120deg, #38ebba 10%, #6fb1d2 30%, #7776ff 75%, #ae2cf1 100%);
  }

  #main_view .round_bg:hover .bg04 {
    box-shadow: 0.5px 0.5px 1.5px 0.5px #434a55;
  }

  #main_view .round_bg .bg02 {
    width: 150px;
    height: 150px;
    background-color: #131c25;
}

#main_view .round_bg .bg03 {
    width: 120px;
    height: 120px;
    background: linear-gradient(120deg, #1d242d, #0f1318);
    box-shadow: -1px -1px 3px 1px #0f1318;
}

#main_view .round_bg .bg04 {
    width: 90px;
    height: 90px;
    box-shadow: -0.5px -0.5px 1.5px 0.5px #434a55;
    background: linear-gradient(-45deg, #151c24, #2c3341);
    text-align: center;
    line-height: 90px;
}

#main_view .round_bg .bg04 img {
    width: 43px;
    height: 57px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#main_view h1,
#main_view h2 {
    font-size: 35px;
    text-align: center;
    color: #fff;
}

#main_view h1 {
    font-size: 55px;
    padding-top: 70px;
    box-sizing: border-box;
}

#main_view .bottom_btn {
    width: 100%;
    padding-top: 77px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 120px;
    left: 0;
    padding: 0 60px;

}

#main_view .bottom_btn .btn {
    width: 30vw;
    height: 30vh;
    border-radius: 60px;
    background-color: #ffffff;
    margin: 0 16px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

#main_view .bottom_btn .btn a {
    display: flex;
    align-items: center; /* 세로 가운데 정렬 */
    justify-content: center; /* 가로 가운데 정렬 */
    width: 100%;
    height: 100%;
    color: #171f26;
    font-size: 87.62px;
    /*line-height: 550px;*/
    text-decoration: none;
    text-align: center;
    position: relative;
}

#main_view .bottom_btn .btn_left a::before,
#main_view .bottom_btn .btn_right a::before {
    content: '';
    background: url(../img/main_btn01.png) no-repeat center / cover;
    width: 95px;
    height: 95px;
    position: absolute;
    top:35%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

#main_view .bottom_btn .btn_right a::before {
    background: url(../img/main_btn02.png) no-repeat center / cover;
    width: 70px;
    height: 95px;
}

/* main_view 끝 */



/* add_item 시작 */

#add_item .section .section_wrap,
#select .section .section_wrap   {

    box-sizing: border-box;
}

#add_item .section .section_wrap .section_box,
#select .section .section_wrap .section_box {
    width: 100%;
    height: 900px;
    text-align: center;
    background-color: #ffffff;
    border-radius: 50px;
}

#add_item .section .section_wrap .section_box .section_left,
#select .section .section_wrap .section_box .section_left {
    width: 40%;
    height: 100%;
    padding: 40px 60px;
    border-right: 1px solid #e1e1ee;
    box-sizing: border-box;
}

#add_item > .section .section_left .item_img {
    width: 260px;
    height: 210px;
    background: url(../img/sand.png) no-repeat center / cover;
    margin: 0 auto;
}

#add_item .section .section_left .bottom,
#select .section .section_left .bottom {
    width: 100%;
    padding-top: 60px;
    box-sizing: border-box;
}

#add_item .section_left .bottom .count,
#select .section_left .bottom .count {
    height: 50px;
    padding-top: 30px;
    box-sizing: border-box;
}

#add_item .section_left .bottom .count h3,
#select .section_left .bottom .count h3 {
    height: 100%;
    position: relative;
    box-sizing: border-box;
}

#add_item .section_left .bottom .count h3::before,
/* #select .section_left .bottom .count h3::before {
    width: 30px;
    height: 30px;
    content: '';
    position: absolute;
    top:50%;
    left:140px;
    transform: translateY(-50%);
    background: url(../img/minus.png) no-repeat center / cover;
    cursor: pointer;
} */

#add_item .section_left .bottom .count h3::after,
/* #select .section_left .bottom .count h3::after {
    width: 30px;
    height: 30px;
    content: '';
    position: absolute;
    top:50%;
    right:140px;
    transform: translateY(-50%);
    background: url(../img/plus.png) no-repeat center / cover;
    cursor: pointer;
} */


.section_right {
    width: 60%;
    padding: 40px 60px;
    box-sizing: border-box;
}


.right_box01 {
    max-height: 700px;
    overflow-y: scroll;
}

.right_box01::-webkit-scrollbar {
    width: 10px;
  }
  .right_box01::-webkit-scrollbar-thumb {
    background-color: #b3b3b3;
    border-radius: 50px;
  }
  .right_box01::-webkit-scrollbar-track {
    background-color: #e7e7e7;
  }


#add_item .section_right .right_box01 {
    width: 100%;
    height: 80%;
    border-bottom: 1px solid #e1e1e1;
}

/* .section_right ul {
    width: 100%;
    height: 150px;
}

.section_right ul .title {
    float: left;
    text-align: left;
    font-family: 'Jalnan';
    font-size: 25px;
    line-height: 2;
}

#add_item .section_right ul .box {
    width: 290px;
    height: 50%;
    padding-right: 20px;
    float: right;
} */

.section_right ul .box button {
    width: 100%;
    height: 50px;
    background-color: #fff;
    border-radius: 40px;
    border: 2px solid #2a323c;
    font-size: 20px;
    font-family: 'Jalnan';
    color: #2a323c;
    cursor: pointer;
}

.section_right ul .box button:focus {
    color: #fff;
    background-color: #2a323c;
}

.section_right ul .box .price {
    color: #2a323c;
    font-family: 'Pretendard-Bold';
    font-size: 15px;
}

.section_right .right_box02 {
    width: 100%;
    height: 20%;
    padding-top: 35px;
    box-sizing: border-box;
}

.right_box02 .total_box {
    text-align: center;
    padding-bottom: 25px;
    box-sizing: border-box;
}

.right_box02 .total_box h3 {
    font-size: 20px;
    color: #787e84;
    font-family:'Pretendard-Bold';
}

.right_box02 .total_box h3 span {
    font-size: 30px;
    color: #000000;
    font-family:'Pretendard-Bold';
}

.right_box02 button {
    width: 300px;
    height: 50px;
    background-color: #fff;
    border-radius: 40px;
    border: 2px solid #f73636;
    font-size: 20px;
    font-family: 'Jalnan';
    color: #f73636;
    cursor: pointer;
}

.right_box02 button:focus {
    color: #fff;
    background-color: #f73636;
}

#add_item .normal {
    padding-left: 0;
    box-sizing: border-box;
}

/* add_item 끝 */


/* select 시작 */

#select > .section .section_left .item_img {
    width: 300px;
    height: 300px;
    background: url(../img/ame_sm.png) no-repeat center / cover;
    margin: 0 auto;
    max-width: 100%;
}

#select .section_right ul .box button {
    width:  140px;
    height: 50px;
    background-color: #fff;
    border-radius: 40px;
    border: 2px solid #2a323c;
    font-size: 20px;
    font-family: 'Jalnan';
    color: #2a323c;
    cursor: pointer;
}

/* #select .section_right ul .box button:focus {
    color: #fff;
    background-color: #2a323c;
} */
#select .section_right ul .box button.on {
    color: #fff;
    background-color: #2a323c;
}

/* #select .section .section_right ul {
    width: 100%;
    height: 110px;
    padding: 20px 0;
    box-sizing: border-box;
    border-bottom: 1px solid #e1e1e1;
} */

/* #select .section .section_right .title {
    width: 27%;
}

#select .section .section_right .box {
    width: 36.5%;
}

#select .section .section_right .box button {
    width: 90%;
}

#select .section .section_right .row {
    height: 150px;
} */

#select .section .section_right .box .price {
    padding-top: 10px;
    box-sizing: border-box;
}

#select .section .section_right .box:last-child {
    padding-right: 0px;
    box-sizing: border-box;
}


#select .section .section_right .deca {
    width: 73%;
}

#select .section .section_right .deca button {
    width: 95%;
    margin: 0 auto;
}

#select .section .section_right .row {
    position: relative;
}

#select .section .section_right .row .text {
    width: 300px;
    position: absolute;
    bottom:20px;
    left: 60%;
    transform: translateX(-50%);
}

#select .section .section_right .row .text .after {
    position: relative;
    padding-right: 50px;
}

#select .section .section_right .row .text .after .after_minus {
    width: 30px;
    height: 30px;
    content: '';
    position: absolute;
    top:50%;
    left:-65%;
    transform: translateY(-50%);
    background: url(../img/minus.png) no-repeat center / cover;
    cursor: pointer;
}

#select .section .section_right .row .text .after .after_plus {
    width: 30px;
    height: 30px;
    content: '';
    position: absolute;
    top:50%;
    right:20%;
    transform: translateY(-50%);
    background: url(../img/plus.png) no-repeat center / cover;
    cursor: pointer;
}


#select .section .section_right .cups .box {
    width: 70%;
    gap: 5px;
}
#add_item .section_left .bottom .count h3,
#select .section_left .bottom .count h3 {
    height: 100%;
    position: relative;
    box-sizing: border-box;
}

#add_item .section_left .bottom .count h3::before,
#select .section_left .bottom .count .h3 .h3_minus {
    width: 30px;
    height: 30px;
    content: '';
    position: absolute;
    top:50%;
    left:140px;
    transform: translateY(-50%);
    background: url(../img/minus.png) no-repeat center / cover;
    cursor: pointer;
}

#add_item .section_left .bottom .count h3::after,
#select .section_left .bottom .count .h3 .h3_plus {
    width: 30px;
    height: 30px;
    content: '';
    position: absolute;
    top:50%;
    right:140px;
    transform: translateY(-50%);
    background: url(../img/plus.png) no-repeat center / cover;
    cursor: pointer;
}
/* select 끝 */








/* met_payment 시작 */

#met_payment .btns .btn_left:before {
    display: none;
}

#met_payment > .section {
    padding-top:120px;
    box-sizing: border-box;
}

.section .Card_section {
    width: 100%;
    height: 460px;
    border-radius: 30px;
    background-color: rgb(255, 255, 255);
    border: 7px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
}

.section .on {
    border: 7px solid #f8b62d;
    box-sizing: border-box;
}

.section .Pay_section_wrapper{
    width: 100%;
    display: flex;
    justify-content: space-between;
}



.section .Card_section .Card_img {
    width: 50%;
    height: 460px;
    float: left;
}
.section .Card_section .Card_img img {
    padding-top: 125px;
    padding-left: 75px;
    box-sizing: border-box;
}

.section .Card_section .Card_txt {
    width: 50%;
    height: 460px;
    float: left;
}
.section .Card_section .Card_txt h1 {
    font-size: 45px;
    padding-top: 140px;
    padding-left: 20px;
    box-sizing: border-box;
}
.section .Card_section .Card_txt p {
    font-size: 20px;
    line-height: 1.5;
    padding-top: 20px;
    padding-left: 20px;
    color: #aaacae;
    box-sizing: border-box;
}

.section .Coin_section, .section .Gift_section {
    height: 460px;
    width: 100vw;
    padding: 0 10px;
    background-color: rgb(255, 255, 255);
    border-radius: 30px;
    border: 7px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
    margin: 0 10px;

    display: flex;
    flex-wrap: wrap;

}
.section .Gift_section{margin: 10px 10px 10px 0px;}
.section .Coin_section{margin: 10px 0px 10px 10px;}

.section .Coin_section a, .section .Gift_section a{
    flex: 1 1 100px;
}


.section .on {
    border: 7px solid #f8b62d;
    box-sizing: border-box;
}

.section .Gift_section h1 {
    font-size: 45px;
    padding-top: 30px;
    text-align: center;
    box-sizing: border-box;
}
.section .Gift_section p {
    font-size: 20px;
    color: #aaacae;
    line-height: 1.5;
    text-align: center;
    padding-top: 10px;
    box-sizing: border-box;
}

.section .Gift_section .gift_img {
    width: 100%;
    height: 200px;
    text-align: center;
}
.section .Gift_section .gift_img img {
    margin: 35px auto 0 auto;
    box-sizing: border-box;
}

.section .on {
    border: 7px solid #f8b62d;
    box-sizing: border-box;
}


.section .Coin_section h1 {
    font-size: 45px;
    padding-top: 30px;
    text-align: center;
    box-sizing: border-box;
}
.section .Coin_section p {
    font-size: 20px;
    color: #aaacae;
    line-height: 1.5;
    text-align: center;
    padding-top: 10px;
    box-sizing: border-box;
}

.section .Coin_section .coin_img {
    width: 100%;
    height: 200px;
    text-align: center;
}
.section .Coin_section .coin_img img {
    box-sizing: border-box;
    margin: 35px auto 0 auto;
    box-sizing: border-box;
}

.section .pay_txt{
    margin-top: 20px;
    text-align: right;
    background: white;
    padding: 66px; border-radius: 30px;
}

.section .pay_txt p {
    right: 350px;
    padding-bottom: 12px;
    bottom: 100px;
    font-size: 30px;
    color: #ff0000;
}
.section .pay_txt span {
    font-size: 55px;
    color: #2c343e;
    margin-left: 20px;
}
.section .pay_line {
    width: 120px;
    height: 3px;
    right: 350px;
    bottom: 90px;
    position: absolute;
    background: red;
}


/* met_payment 끝 */




/* payment 시작 */
#payment > .section {
    height: 1430px;
}


#payment .section .section_wrap .section_box,
#comp_pay .section .section_wrap .section_box {
    width: 100%;
    text-align: center;
    background-color: #ffffff;
    border-radius: 50px;
}

/* payment 끝 */


/* comp_pay 시작 */
#comp_pay > .section {
    height: 1430px;
}
.section_title01 {
    width: 100%;
    height: 300px;
}
.section_title01 h1 {
    font-size: 50px;
    line-height: 65px;
    padding-top: 130px;
    box-sizing: border-box;
}

.section_title02 {
    width: 100%;
    height: 230px;
    background-color: rgb(255, 255, 255);
}
.section_title02 .section_txt01 {
    font-size: 30px;
    color: #ff3e11;
    text-decoration: underline;
    text-underline-position: under;
    padding-top: 50px;
    box-sizing: border-box;
}
.section_title02 .section_txt02_02 {
    font-size: 55px;
    color: #15222b;
    padding-top: 15px;
    box-sizing: border-box;
}
.section_title02 .section_txt02_03 {
    font-size: 55px;
    color: #15222b;
    padding-top: 15px;
    box-sizing: border-box;
}

.section_title03 {
    width: 100%;
    height: 420px;
}
.section_title03 div {
    padding-top: 55px;
    box-sizing: border-box;
}

.section_title04 {
    width: 100%;
    height: 350px;
}
/* .section_title04 a{width:100%; padding-top:150px; display:block; margin:auto; box-sizing: border-box;} */

.receipt_img {
    position: relative;
}

.section_txt02 {
    position: absolute;
    top:61.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 65px;
}


.section_title04 {
    position: relative;
}

.section_title04 .aaa {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 100px;
    background: linear-gradient(#595f68, #15222b);
    margin: 0 auto;
    border-radius: 50px;
    line-height: 100px;
    font-size: 25px;
    color:white;
}
.section_title05 .temp {
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 100px;
    background: #d33b3b;
    margin: 0 auto;
    border-radius: 50px;
    line-height: 100px;
    font-size: 25px;
    color:white;
}

.section_title04 .aaa a {
    display: block;
    width: 100%;
    height: 100%;
}

/* comp_pay 끝 */


.opt_wrapper{ display: flex; width: 100%; box-sizing: border-box;
    border-bottom: 1px solid #e1e1e1; padding: 30px 0 ;
    flex-direction: column;
}
.opt_wrapper:first-child{padding-top: 0; }
.opt_wrapper .opt_title {width: 100% font-family: 'Jalnan'; font-size: 25px; line-height: 2; margin-bottom: 12px; }
.opt_wrapper .opt_title p {display: inline-block;}
.opt_wrapper .opts{width: 100%; }
.opt_wrapper .opts li{width: 50%; margin-bottom: 12px; ;}
#select .section_right .opt_wrapper ul .box button{width: auto; padding: 4px 8px; display: inline-block; }

#select .section_right .opt_wrapper .text{line-height: 30px; margin-top: 10px; }
/* #select .section_right .opt_wrapper {position: relative; vertical-align: middle; line-height: 30px; height: 30px; display: inline-block; } */
#select .section_right .opt_wrapper .text span{line-height: 30px; vertical-align: middle;}
#select .section_right .opt_wrapper .after_minus {
    width: 30px;
    height: 30px;
    display: inline-block;
    background: url(../img/minus.png) no-repeat center / cover;
    cursor: pointer;margin: 0 8px;
}
#select .section_right .opt_wrapper .after_plus {
    width: 30px;
    height: 30px;
    display: inline-block;
    background: url(../img/plus.png) no-repeat center / cover;
    cursor: pointer;margin: 0 8px;
}