.main_top {
    width: 100%;
}

.main_top .main_top_slider li {
    width: 100%;
    height: 350px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 120px;
    padding-bottom: 160px;
}

.main_top .main_top_slider li p {
    font-size: 15px;
    color: rgba(255,255,255,0.52);
    line-height: 1.4em;
    margin-top: 13px;
    margin-bottom: 24px;
}

.main_top .main_top_slider .nav {
    position: absolute;
    bottom: 75px;
    left: 0;
    width: 100%;
    padding: 0 30px;
    z-index: 5;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.main_top .main_top_slider .nav .fraction {
    flex: 30px 0 0;
    display: flex;
    align-items: center;
    height: 16px;
}

.main_top .main_top_slider .nav .fraction span {
    color: #fff;
    font-weight: 200;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    font-size: 13px;
}

.main_top .main_top_slider .nav .fraction span i {
    display: block;
    width: 10px;
    text-align: center;
}

.main_top .main_top_slider .nav .controller {
    display: flex;
    flex: 30px 0 0;
    justify-content: space-between;
    align-items: center;
    margin-left: 7px;
}

.main_top .main_top_slider .nav .controller button {
    flex: 1;
    display: block;
    width: 16px;
    height: 16px;
    border: none;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: visible;
}

.main_top .main_top_slider .nav .controller button:focus {
    outline: rgba(255,255,255,0.2) solid 1px;
}

.main_top .main_top_slider .nav .controller button.btn_play {
    background-image: url(../img/assets/ico-play.svg);
}

.main_top .main_top_slider .nav .controller button.btn_pause {
    background-image: url(../img/assets/ico-pause.svg);
}

.main_top .main_top_slider .nav .progress {
    flex: 1;
    display: flex;
    margin-left: 10px;
}

.main_top .main_top_slider .nav .progress .rail {
    width: 100%;
    height: 1px;
    background-color: rgba(255,255,255,0.2);
    position: relative;
}

.main_top .main_top_slider .nav .progress .rail > div {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #FFFFFF;
    /* transition: All .2s ease-out;
    -webkit-transition: All .2s ease-out;
    -moz-transition: All .2s ease-out;
    -o-transition: All .2s ease-out */
}

.main_top .user_info {
    margin-top: -50px;
    padding: 0 20px;
    position: relative;
    z-index: 10;
}

.main_top .user_info > div {
    background-color: #fff;
    border-radius: 6px;
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.12);
}

.main_top .user_info > div > div {
    width: 100%;
}

.main_top .user_info .loggedin .member_info {
    display: flex;
    justify-content: space-between;
    padding: 0 27px;
}

.main_top .user_info .loggedin .member_info em {
    display: block;
    font-size: 15px;
    color: #333333;
    font-weight: normal;
    line-height: 20px;
}

.main_top .user_info .loggedin .member_info em a {
    font-size: 15px;
    color: #000000;
    font-weight: bold;
    background: linear-gradient(to top, #000000 1%, transparent 7%);
}

.main_top .user_info .loggedin .member_info dl {
    display: flex;
}

.main_top .user_info .loggedin .member_info dl dt {
    font-size: 12px;
    color: #999999;
    line-height: 20px;
}

.main_top .user_info .loggedin .member_info dl dd {
    font-size: 15px;
    font-weight: 600;
    color: #000000;
    line-height: 20px;
    margin-left: 6px;
}

.main_top .user_info .loggedin .member_info dl dd i {
    display: inline-block;
    vertical-align: top;
    width: 17px;
    height: 17px;
    line-height: 17px;
    text-align: center;
    color: #fff;
    background-color: #34925F;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    margin-left: 3px;
    margin-top: 1px;
}

.main_top .user_info .loggedin .info_list {
    display: flex;
    margin-top: 6px;
}

.main_top .user_info .loggedin .info_list > div {
    flex: 1;
    text-align: center;
}

.main_top .user_info .loggedin .info_list > div span {
    font-size: 12px;
    line-height: 17px;
    color: #999999;
}

.main_top .user_info .loggedin .info_list > div p {
    font-size: 15px;
    line-height: 24px;
}

.main_top .user_info .loggedin .info_list > div p i {
    color: #34925F;
}

.main_top .user_info .loggedin .info_list > div p i,
.main_top .user_info .loggedin .info_list > div p b {
    font-size: 15px;
    font-weight: bold;
}

.main_top .user_info .loggedin .echo_log {
    position: relative;
    padding: 0 27px;
    margin-top: 15px;
    padding-top: 16px;
}

.main_top .user_info .loggedin .echo_log::before {
    content: "";
    width: calc(100% - 30px);
    height: 1px;
    background-color: #F5F6F8;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.main_top .user_info .loggedin .echo_log .echo_log_slider {
    display: flex;
    padding-right: 43px;
}

.main_top .user_info .loggedin .echo_log .echo_log_slider > ul {
    flex: 1;
}

.main_top .user_info .loggedin .echo_log .echo_log_slider > ul li {
    display: flex;
}

.main_top .user_info .loggedin .echo_log .echo_log_slider > ul li i {
    flex: 90px 0 0;
    font-size: 14px;
    line-height: 22px;
    color: #333333;
}

.main_top .user_info .loggedin .echo_log .echo_log_slider > ul li a {
    display: block;
    flex: 1;
    font-size: 14px;
    line-height: 22px;
    color: #333333;
    padding-left: 12px;
    position: relative;
}

.main_top .user_info .loggedin .echo_log .echo_log_slider > ul li a::before {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #75D275;
    border-radius: 50%;
    position: absolute;
    top: 8px;
    left: 0;
}

.main_top .user_info .loggedin .echo_log .echo_log_slider .nav {
    position: absolute;
    top: 0;
    right: 0;
    width: 43px;
    height: 22px;
    background-color: #fff;
    z-index: 2;
    font-size: 0;
}

.main_top .user_info .loggedin .echo_log .echo_log_slider .nav button {
    display: inline-block;
    vertical-align: top;
    width: 22px;
    height: 22px;
    border: 1px solid #DFDFDF;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 6px auto;
}

.main_top .user_info .loggedin .echo_log .echo_log_slider .nav button + button {
    margin-left: -1px;
}

.main_top .user_info .loggedin .echo_log .echo_log_slider .nav button.nav_prev {
    background-image: url(../img/bean/ico-arrow-nav-small-prev.svg);
}

.main_top .user_info .loggedin .echo_log .echo_log_slider .nav button.nav_next {
    background-image: url(../img/bean/ico-arrow-nav-small-next.svg);
}

.main_top .user_info .login {
    padding: 0 26px;
} 

.main_top .user_info .login p {
    font-size: 14px;
    color: #333333;
    line-height: 20px;
}

.main_top .user_info .login p a {
    background: linear-gradient(to top, #000000 1%, transparent 7%);
}

.main_top .user_info .login em {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    color: #333333;
    font-weight: bold;
}

.main_top .user_info .login em i {
    color: #34925F;
}

/* 섹션 */
section .sec_tit {
    padding: 0 20px;
    margin-bottom: 14px;
    position: relative;
}

section .sec_tit h2 {
    font-size: 17px;
    line-height: 25px;
    color: #111111;
    font-weight: bold;
}

section .sec_tit a {
    position: absolute;
    top: 0;
    right: 20px;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section_main_first {
    margin-top: -50px;
    padding-top: 72px;
    padding-bottom: 25px;
    background-image: url(../img/assets/bg-section-texture.png);
    background-position: center;
}

section .sl_horizon ul {
    font-size: 0;
    white-space: nowrap;
    overflow-x: auto;
    padding: 0 20px;
}

section .sl_horizon.station_list ul li {
    width: 250px;
    display: inline-block;
    vertical-align: top;
    position: relative;
}

section .sl_horizon.station_list ul li + li {
    margin-left: 15px;
}

section .sl_horizon.station_list ul li .thumb {
    width: 100%;
    padding-top: 80%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 7px;
}

section .sl_horizon.station_list ul li .item_info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
}

section .sl_horizon.station_list ul li .item_info em {
    font-size: 18px;
    line-height: 26px;
    color: #FFFFFF;
    font-weight: bold;
}

section .sl_horizon.station_list ul li .item_info span {
    display: block;
    font-size: 13px;
    line-height: 20px;
    padding-left: 16px;
    position: relative;
    color: #FFFFFF;
    font-weight: 500;
    margin-top: 3px;
}

section .sl_horizon.station_list ul li .item_info span::before {
    content: "";
    display: block;
    width: 16px;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(../img/assets/ico-location.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 14px;
}

section.section_brand {
    padding: 25px 0 30px;
}

section .sl_horizon.brand_list ul li {
    display: inline-block;
    vertical-align: top;
    width: 80px;
    text-align: center;
}

section .sl_horizon.brand_list ul li + li {
    margin-left: 10px;
}

section .sl_horizon.brand_list ul li .thumb {
    width: 100%;
    padding-top: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    background-color: #fff;
}

section .sl_horizon.brand_list ul li em {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 13px;
    line-height: 20px;
    margin-top: 5px;
}

section.section_popular_product {
    padding: 33px 0;
    background-image: url(../img/assets/bg-main-popular-product.png);
    background-color: #1E3227;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

section.section_popular_product .sec_tit h2 {
    color: #fff;
}

li.prd_item {
    width: 217px;
    border-radius: 5px;
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
}

li.prd_item + li {
    margin-left: 15px;
}

li.prd_item .thumb {
    width: 100%;
    padding-top: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5px 5px 0 0;
}

li.prd_item .item_info {
    background-color: #fff;
    padding: 17px;
}

li.prd_item .item_info .station {
    /*padding-right: 52px;*/
    position: relative;
    border-bottom: 1px solid #EFF3F5;
    margin-bottom: 7px;
}

li.prd_item .item_info .station em {
    display: block;
    font-size: 13px;
    line-height: 20px;
    color: #33CCD2;
    font-weight: 600;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding: 5px 0;
}

li.prd_item .item_info .station .btn_wrap {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    height: 100%;
}

li.prd_item .item_info .station .btn_wrap button {
    width: 26px;
    height: 26px;
    border: none;
    background-color: transparent;
}

li.prd_item .item_info .station .btn_wrap button.btn_favor {
    background-image: url(../img/assets/ico-btn-favor.svg);
}

li.prd_item .item_info .station .btn_wrap button.btn_favor.active {
    background-image: url(../img/assets/ico-btn-favor-fill.svg);
}

li.prd_item .item_info .station .btn_wrap button.btn_basket {
    background-image: url(../img/assets/ico-btn-basket.svg);
}

li.prd_item .item_info p {
    font-size: 14px;
    line-height: 20px;
    color: #333333;
    font-weight: 600;
}

li.prd_item .item_info span {
    font-size: 13px;
    color: #333;
    line-height: 20px;
}

li.prd_item .item_info span b {
    font-weight: 700;
}

section.section_prd_list {
    padding: 25px 0 50px;
}

.sl_verti {
    font-size: 0;
}

/* 알림 */
section.section_noti ul li {
    padding: 20px;
    border-bottom: 1px solid #EDEDED;
    position: relative;
}

section.section_noti ul li p {
    font-size: 14px;
    color: #111111;
    line-height: 20px;
    font-weight: bold;
}

section.section_noti ul li span {
    display: block;
    margin-top: 9px;
    font-size: 13px;
    line-height: 20px;
    color: #BBBBBB;
}

section.section_noti ul li:after {
    content: "";
    display: block;
    width: 8px;
    height: 14px;
    background-image: url(../img/assets/ico-angle-list-link.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 7.5px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
}

section.section_noti ul li.unread p,
section.section_noti ul li.unread span {
    animation: unread 1s forwards;
    animation-delay: 0.3s;
    animation-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
    position: relative;
}

section.section_noti ul li.unread p::before {
    content: "";
    display: block;
    position: absolute;
    width: 7px;
    height: 7px;
    background-color: #75D275;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 6.5px;
    opacity: 0;

    animation: showOpacity 1s forwards;
    animation-delay: 0.3s;
    animation-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
}

section.section_search_recent {
    padding: 30px 0 0;
}

section.section_search_recent .sec_tit {
    position: relative;
}

section.section_search_recent .sec_tit button {
    font-size: 14px;
    line-height: 25px;
    position: absolute;
    top: 0;
    right: 20px;
    border: none;
    background-color: transparent;
    color: #666666;
}

section.section_search_recent .sec_tit button::after {
    content: "";
    display: inline-block;
    vertical-align: top;
    width: 13px;
    height: 25px;
    background-image: url(../img/assets/ico-trashbin-gray.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px;
    margin-left: 6px;
}

section.section_search_recent .recently_list ul {
    padding: 0 20px;
}

section.section_search_recent .recently_list ul li {
    padding-right: 70px;
    position: relative;
}

section.section_search_recent .recently_list ul li + li {
    margin-top: 10px;
}

section.section_search_recent .recently_list ul li a {
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    font-size: 15px;
    line-height: 22px;
    color: #333333;
}

section.section_search_recent .recently_list ul li span {
    position: absolute;
    top: 0;
    right: 27px;
    font-size: 15px;
    line-height: 22px;
    color: #BBBBBB;
}

section.section_search_recent .recently_list ul li button {
    width: 22px;
    height: 22px;
    border: none;
    background-color: transparent;
    background-image: url(../img/assets/ico-btn-remove-cross-gray.svg);
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: 0;
}

section.section_search_recmnd {
    margin-top: 35px;
}

section.section_search_recmnd .recmnd_list ul {
    font-size: 0;
    padding: 0 20px;
    margin-bottom: -8px;
}

section.section_search_recmnd .recmnd_list ul li {
    display: inline-block;
    vertical-align: top;
    margin-right: 6px;
    margin-bottom: 8px;
}

section.section_search_recmnd .recmnd_list ul li:last-child {
    margin-right: 0;
}

section.section_search_recmnd .recmnd_list ul li a {
    display: block;
    padding: 0 15px;
    line-height: 30px;
    border: 1px solid #72C5AC;
    color: #34925F;
    font-size: 14px;
    border-radius: 30px;
}

section.section_search_brand {
    margin-top: 35px;
}

section.section_search_brand .sl_horizon.brand_list ul li .thumb {
    background-color: #EFF3F5;
}

section.section_search_keyword {
    position: fixed;
    top: 61px;
    left: 0;
    width: 100%;
    height: calc(100% - 61px);
    background-color: #fff;
    display: none;
    animation: showUp 0.3s forwards;
}

section.section_search_keyword.open {
    display: block;
}

section.section_search_keyword .keyword_list {
    height: calc(100% - 65px);
    overflow-y: auto;
}

section.section_search_keyword .keyword_list ul li {
    border-bottom: 1px solid #F6F6F6;
}

section.section_search_keyword .keyword_list ul li a {
    display: block;
    padding: 0 20px;
    line-height: 50px;
    width: 100%;
    padding-right: 35px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
}

section.section_search_keyword .keyword_list ul li a .mark {
    color: #34925F;
}

section.section_search_keyword .keyword_list ul li a::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    background-image: url(../img/assets/ico-keyword.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
}

.tab_btn_wrap {
    border-bottom: 1px solid #DFDFDF;
    font-size: 0;
    display: flex;
}

.tab_btn_wrap button {
    flex: 1;
    height: 50px;
    border: none;
    background-color: transparent;
    font-size: 15px;
    color: #999999;
    position: relative;
    transition: All .2s ease-out;
    -webkit-transition: All .2s ease-out;
    -moz-transition: All .2s ease-out;
    -o-transition: All .2s ease-out
}

.tab_btn_wrap button i {
    font-size: 15px;
    font-weight: 300;
    display: inline-block;
    vertical-align: top;
    margin-left: 5px;
    color: #34925F;
    transition: All .2s ease-out;
    -webkit-transition: All .2s ease-out;
    -moz-transition: All .2s ease-out;
    -o-transition: All .2s ease-out
}

.tab_btn_wrap button.selected {
    font-weight: bold;
    color: #000000;
}

.tab_btn_wrap button.selected i {
    font-weight: normal;
}

.tab_btn_wrap button::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    bottom: -1px;
    left: 0;
    background-color: #265B3E;
    opacity: 0;
    pointer-events: none;
    transition: All .2s ease-out;
    -webkit-transition: All .2s ease-out;
    -moz-transition: All .2s ease-out;
    -o-transition: All .2s ease-out
}

.tab_btn_wrap button.selected::after {
    opacity: 1;
}

.tab_cont_wrap > div {
    display: none;
    animation: showUp 0.3s forwards;
}

.tab_cont_wrap > div.selected {
    display: block;
}

.list_filter {
    padding: 13px 20px;
    position: relative;
    border-bottom: 1px solid #EDEDED;
}
.section_point .font_green {
    color: #265B3E !important;
}

.section_point .font_red {
    color: #c80806 !important;
}
.section_point .point p i{
    display: inline-block;
    vertical-align: top;
    width: 17px;
    height: 17px;
    line-height: 17px;
    text-align: center;
    color: #fff;
    background-color: #34925F;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    margin-left: 3px;
    margin-top: 2px;
}

.list_filter.bean{
    border-bottom: 10px solid #EBEBEB;
}

.list_filter.bean span{
    display: unset;
}

.list_filter span {
    display: block;
    font-size: 14px;
    color: #000000;
    line-height: 26px;
}

.list_filter span::before {
    content: "";
    display: inline-block;
    vertical-align: top;
    width: 13px;
    height: 26px;
    background-image: url(../img/assets/ico-result-list.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 7px;
}

.list_filter span b {
    font-weight: bold;
}

.list_filter button {
    height: 26px;
    border: 1px solid #707070;
    background-color: transparent;
    border-radius: 4px;
    width: 57px;
    position: absolute;
    top: 13px;
    right: 20px;
    line-height: 24px;
    font-size: 13px;
    color: #333333;
    font-weight: 600;
}

.list_filter button::after {
    content: "";
    display: inline-block;
    vertical-align: top;
    width: 14px;
    height: 24px;
    background-image: url(../img/assets/ico-btn-filter.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 5px;
}

/* 스테이션 / 상품 상세 */

.detail_top::before {
    content: "";
    display: block;
    width: 100%;
    height: 60px;
    opacity: 0.43;
    background: -moz-linear-gradient(top,  rgba(30,87,153,1) 0%, rgba(0,0,0,0.99) 1%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(0,0,0,0.99) 1%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(30,87,153,1) 0%,rgba(0,0,0,0.99) 1%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.detail_top.product::before {
    content: none;
}

.detail_top .thumb {
    width: 100%;
    padding-top: 112.8205%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.detail_top.product .thumb {
    padding-top: 100%;
}

.detail_top .thumb img {
    display: none;
}

.detail_top .thumb_slider .fraction {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    width: 53px;
    display: inline-block;
    background-color: rgba(0,0,0,0.4);
    text-align: center;
    line-height: 24px;
    border-radius: 24px;
}

.detail_top .thumb_slider .fraction span {
    line-height: 24px;
    color: #fff;
    font-size: 13px;
    font-weight: 300;
}

.detail_top .station_info {
    padding: 20px;
    position: relative;
}

.detail_top .station_info i {
    display: inline-block;
    padding: 0 8px;
    line-height: 22px;
    border-radius: 22px;
    font-size: 12px;
    font-weight: 500;
}
.detail_top .station_info i.green{
    border: 1px solid #34925F;
    color: #34925F;
}
.detail_top .station_info i.green.on{
    border: 1px solid #34925F;
    color: #FFFFFF;
    background-color: #34925F;
}
.detail_top .station_info i.blue{
    border: 1px solid #0171f9;
    color: #0171f9;
}
.detail_top .station_info i.blue.on{
    border: 1px solid #0171f9;
    color: #FFFFFF;
    background-color: #0171f9;
}
.detail_top .station_info i.red{
    border: 1px solid #ff6f61;
    color: #ff6f61;
}

.detail_top .station_info i.yellow{
    border: 1px solid #ffc142;
    color: #ffc142;
}
.detail_top .station_info i.purple{
    border: 1px solid #d9a0e1;
    color: #d9a0e1;
}
.detail_top .station_info i.purple.on{
    border: 1px solid #d9a0e1;
    color: #FFFFFF;
    background-color: #d9a0e1;
}
.detail_top .station_info em {
    display: block;
    font-size: 18px;
    color: #000000;
    font-weight: bold;
    margin-top: 7px;
    line-height: 26px;
}

.detail_top .station_info p {
    font-size: 13px;
    color: #999999;
    line-height: 20px;
}

.detail_top .station_info .btn_favor {
    position: absolute;
    top: 20px;
    right: 20px;
    line-height: 24px;
    border: none;
    background-color: transparent;
}

.detail_top .station_info .btn_favor::before {
    content: "";
    display: inline-block;
    vertical-align: top;
    width: 24px;
    height: 24px;
    background-image: url(../img/assets/ico-btn-favor.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.detail_top .station_info .btn_favor.active::before {
    background-image: url(../img/assets/ico-btn-favor-fill.svg);
}

.detail_top .product_info {
    padding: 20px;
}

.detail_top .product_info i {
    display: inline-block;
    padding: 0 8px;
    line-height: 13px;
    border-radius: 22px;
    font-size: 11px;
    font-weight: 500;
}
.detail_top .product_info i.purple{
    border: 1px solid #d9a0e1;
    color: #d9a0e1;
}
.detail_top .product_info i.purple.on{
    border: 1px solid #d9a0e1;
    color: #FFFFFF;
    background-color: #d9a0e1;
}


.detail_top .product_info a.shop_name {
    font-size: 13px;
    color: #33B3D2;
    line-height: 20px;
    display: flex;
    flex-direction: row;
}

.detail_top .product_info a.shop_name::after {
    content: "";
    display: inline-block;
    vertical-align: top;
    width: 20px;
    height: 20px;
    background-image: url(../img/assets/ico-angle-list-link.svg);
    background-position: center 5px;
    background-repeat: no-repeat;
    background-size: 5px auto;
}
.detail_top .product_info a.shop_name span{
    font-size: 13px;
    color: #33B3D2;
    line-height: 20px;
    display: block;
}
.detail_top .product_info a.shop_name i{
    line-height: normal;
}
.detail_top .product_info a.shop_name span+i{
    margin-left: 5px;
}

.detail_top .product_info em {
    font-size: 18px;
    color: #000000;
    line-height: 26px;
    font-weight: bold;
    display: block;
    margin-top: 3px;
    margin-bottom: 3px;
}

.detail_top .product_info span {
    font-size: 16px;
    color: #000000;
    line-height: 24px;
}

.detail_top .product_info span b {
    font-weight: bold;
}

.detail_top .product_info p {
    font-size: 13px;
    line-height: 20px;
    color: #999999;
    margin-top: 10px;
}

.detail_content {
    border-top: 10px solid #F0F0F0;
}

.detail_content .desc_wrap {
    padding: 30px 20px;
    margin-bottom: 60px;
}

.detail_content .desc_wrap p {
    font-size: 13px;
    line-height: 20px;
    color: #666666;
}

.detail_content .desc_wrap .tag_wrap {
    margin-top: 20px;
    font-size: 0;
}

.detail_content .desc_wrap .tag_wrap > a {
    display: inline-block;
    vertical-align: top;
    font-size: 13px;
    line-height: 30px;
    color: #999999;
    padding: 0 12px;
    border-radius: 30px;
    border: 1px solid #C9C9C9;
    margin-right: 4px;
    margin-bottom: 8px;
}

.review_wrap {
    padding-bottom: 60px;
}

.review_wrap ul li {
    padding: 20px;
    position: relative;
}

.review_wrap ul li + li {
    border-top: 10px solid #F0F0F0;
}

.review_wrap ul li .profile {
    padding-left: 46px; 
    position: relative;
}

.review_wrap ul li .profile .thumb {
    width: 40px;
    height: 40px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.review_wrap ul li .profile p {
    line-height: 40px;
    font-size: 14px;
    color: #333333;
    font-weight: bold;
}

.review_wrap ul li .p_name a {
    display: inline-block;
    font-size: 15px;
    line-height: 20px;
    color: #265B3E;
    font-weight: bold;
    position: relative;
    padding-right: 13px;
}

.review_wrap ul li .p_name a::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-7px);
    width: 6px;
    height: 11px;
    background-image: url(../img/assets/ico-angle-list.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.review_wrap ul li .review_rate {
    margin-top: 10px;
    display: flex;
    align-items: center;
    position: relative;
}

.review_wrap ul li .review_rate .rate_star {
    flex: 80px 0 0;
}

.review_wrap ul li .review_rate span {
    display: block;
    margin-left: 4px;
    font-size: 14px;
    line-height: 20px;
    color: #333333;
    font-weight: 600;
}

.review_wrap ul li .review_rate i {
    display: block;
    font-size: 13px;
    line-height: 20px;
    color: #BBBBBB;
    margin-left: 14px;
    position: relative;
}

.review_wrap ul li .review_rate i::before {
    content: "";
    display: block;
    width: 2px;
    height: 2px;
    border-radius: 2px;
    background-color: #999999;
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
}

.review_wrap ul li .review_rate .btn_remove {
    font-size: 14px;
    color: #999999;
    line-height: 20px;
    border: none;
    background-color: transparent;
    padding-left: 16px;
    background-image: url(../img/assets/ico-trashbin-gray.svg);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 12px auto;
    position: absolute;
    right: 0;
    top: 0;
}

.review_wrap ul li .review_cont {
    margin-top: 14px;
}

.review_wrap ul li .review_cont span {
    font-size: 13px;
    line-height: 20px;
    color: #999999;
}

.review_wrap ul li .review_cont p {
    margin-top: 14px;
    font-size: 14px;
    line-height: 20px;
    color: #666666;
}

.review_wrap ul li .review_img {
    white-space: nowrap;
    overflow-x: auto;
    font-size: 0;
}

.review_wrap ul li .review_img > div {
    margin-top: 18px;
    display: inline-block;
    vertical-align: top;
    width: 83px;
    height: 83px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.review_wrap ul li .review_img > div + div {
    margin-left: 6px;
}

.review_wrap ul li .review_img > div img {
    display: none;
}

.review_wrap ul li .btn_review_menu {
    width: 32px;
    height: 32px;
    background-color: transparent;
    border: none;
    background-image: url(../img/assets/ico-dots-menu.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 24px;
    right: 20px;
}

.section_review .review_wrap {
    padding-bottom: 0;
}

.detail_content .desc_block {
    padding: 25px 20px;
}

.detail_content .desc_block + .desc_block {
    border-top: 10px solid #F0F0F0;
}

.detail_content .desc_block h3 {
    display: block;
    font-size: 17px;
    color: #111111;
    font-weight: bold;
    margin-bottom: 13px;
}

.detail_content .desc_block dl + dl {
    margin-top: 13px;
}

.detail_content .desc_block dl dt {
    display: block;
    font-size: 13px;
    line-height: 24px;
    color: #333333;
    margin-bottom: 4px;
    font-weight: 500;
}

.detail_content .desc_block dl dd {
    font-size: 13px;
    line-height: 18px;
    color: #999999;
}

.detail_content .desc_block p {
    font-size: 12px;
    line-height: 19px;
    color: #999999;
}

.sl_verti.prd_list_full ul li {
    padding: 15px 20px;
    padding-left: 155px;
    position: relative;
}

.sl_verti.prd_list_full ul li + li {
    border-top: 10px solid #F0F0F0;
}

.sl_verti.prd_list_full ul li .thumb {
    width: 120px;
    height: 120px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 15px;
    left: 20px;
}

.sl_verti.prd_list_full ul li .btn_favor {
    width: 32px;
    height: 32px;
    background-color: transparent;
    border: none;
    position: absolute;
    background-image: url(../img/assets/ico-btn-favor-transparent.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: 102px;
    top: 20px;
}

.sl_verti.prd_list_full ul li .btn_favor.active {
    background-image: url(../img/assets/ico-btn-favor-fill.svg);
}

.sl_verti.prd_list_full ul li .item_info {
    min-height: 120px;
    padding: 5px 0;
    position: relative;
}

.sl_verti.prd_list_full ul li .item_info i {
    font-size: 13px;
    line-height: 20px;
    color: #33B3D2;
}

.sl_verti.prd_list_full ul li .item_info p {
    font-size: 14px;
    line-height: 20px;
    color: #333333;
    font-weight: 600;
    margin-bottom: 6px;
}

.sl_verti.prd_list_full ul li .item_info span {
    font-size: 14px;
    line-height: 20px;
    color: #000000;
}

.sl_verti.prd_list_full ul li .item_info span b {
    font-weight: 700;
}

.sl_verti.prd_list_full ul li .item_info .rate {
    position: relative;
    position: absolute;
    bottom: 5px;
}

.sl_verti.prd_list_full ul li .item_info .rate span {
    display: inline-block;
    font-size: 13px;
    line-height: 20px;
    color: #666666;
}

.sl_verti.prd_list_full ul li .item_info .rate span::before {
    content: "";
    display: inline-block;
    vertical-align: top;
    width: 12px;
    height: 20px;
    background-image: url(../img/assets/ico-rate-star-fill.svg);
    background-position: center 3px;
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 3px;
}

.sl_verti.prd_list_full ul li .btn_basket {
    width: 30px;
    height: 30px;
    border: 1px solid #C5C5C5;
    background-color: transparent;
    background-image: url(../img/assets/ico-btn-basket.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 18px auto;
    border-radius: 50%;
    position: absolute;
    bottom: 15px;
    right: 20px;
}

.fixed_btm {
    position: sticky;
    bottom: 0;
    width: 100%;
    height: 60px;
    transition: All .2s ease-out;
    -webkit-transition: All .2s ease-out;
    -moz-transition: All .2s ease-out;
    -o-transition: All .2s ease-out
}

.fixed_btm.fixed_btm_with_footer {
    bottom: 65px;
}

.fixed_btm.placeable {
    position: relative;
    bottom: auto;
    left: auto;
    top: auto;
    right: auto;
}

.fixed_btm.hidable {
    bottom: -60px;
}

.fixed_btm.open {
    bottom: 0;
}

.fixed_btm.toolbar {
    bottom: 65px;
}

.fixed_btm .btn_wrap {
    display: flex;
    align-items: center;
    height: 100%;
}

.fixed_btm .btn_wrap a,
.fixed_btm .btn_wrap button {
    display: block;
    flex: 1;
}

.fixed_btm .btn_wrap .btn_tp_lgreen {
    display: block;
    flex: 1;
    line-height: 60px;
    width: 100%;
    background-color: #265B3E;
    font-size: 15px;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    border: none;
}

.fixed_btm .btn_wrap .btn_tp_dgreen {
    flex: 1;
    line-height: 60px;
}

.btn_tp_dgreen {
    display: block;
    width: 100%;
    background-color: #213429 !important;
    font-size: 15px;
    color: #FFFFFF !important;
    font-weight: bold;
    text-align: center;
    border: none;
}

.fixed_btm .btn_wrap .disabled {
    background-color: #CCCCCC;
    color: #FFFFFF;
    pointer-events: none;
}

.fixed_btm .btn_wrap .btn_check {
    display: block;
    flex: 1;
    line-height: 60px;
    width: 100%;
    background-color: #213429;
    font-size: 15px;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    border: none;
}

.fixed_btm .btn_wrap .btn_basket {
    display: block;
    flex: 1;
    line-height: 60px;
    width: 100%;
    background-color: #34925F;
    font-size: 15px;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    border: none;
}

.fixed_btm .btn_wrap .btn_favor {
    display: block;
    flex: 60px 0 0;
    height: 100%;
    width: 100%;
    background-color: #34925F;
    font-size: 15px;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    border: none;
    background-image: url(../img/assets/ico-btn-favor-transparent.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 28px;
}

.fixed_btm .btn_wrap .btn_favor.active {
    background-image: url(../img/assets/ico-btn-favor-fill.svg);
}

.board_form {
    padding: 20px;
}

.board_form .form_row + .form_row {
    margin-top: 10px;
}

.board_form .form_row textarea {
    width: 100%;
    border: 1px solid #DFDFDF;
    border-radius: 5px;
    height: 365px;
    padding: 16px;
    font-size: 14px;
    line-height: 20px;
}

.board_form .form_row .attach_wrap {
    font-size: 0;
}

.board_form .form_row .attach_wrap > div {
    width: calc((100% - 40px) / 4);
    display: inline-block;
    vertical-align: top;
}

.board_form .form_row .attach_wrap > div + div {
    margin-left: 10px;
}

.board_form .form_row .attach_wrap > div:nth-child(4n+1) {
    margin-left: 0;
}

.board_form .form_row .attach_wrap > div:nth-child(n+5) {
    margin-top: 10px;
}

.board_form .form_row .attach_wrap > div.attach_item {
    position: relative;
}

.board_form .form_row .attach_wrap > div.attach_item > div {
    width: 100%;
    padding-top: 100%;
    border-radius: 5px;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.board_form .form_row .attach_wrap > div.attach_item .btn_remove {
    width: 24px;
    height: 24px;
    background-color: #213429;
    border: none;
    border-radius: 5px;
    position: absolute;
    top: 0;
    right: 0;
    background-image: url(../img/assets/ico-btn-remove-cross.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 9px;
}

.board_form .form_row .attach_wrap + span {
    display: block;
    font-size: 13px;
    line-height: 20px;
    color: #BBBBBB;
    margin-top: 14px;
}

.board_form .btn_wrap {
    margin-top: 36px;
}

.board_form .btn_wrap a {
    display: block;
    flex: 1;
    line-height: 60px;
    width: 100%;
    background-color: #265B3E;
    font-size: 15px;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    border-radius: 5px;
}

/* 지도 */
section.section_map {
    position: sticky;
    top: 60px;
    left: 0;
    width: 100%;
    height: calc(100vh - 60px - 65px);
}

section.section_map .map_wrap {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

section.section_map .map_wrap #map {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
}

.pin {
    position: absolute;
    width: 1px;
    height: 1px;
    transition: All .1s ease-out;
    -webkit-transition: All .1s ease-out;
    -moz-transition: All .1s ease-out;
    -o-transition: All .1s ease-out
}

.pin > div {
    content: "";
    display: block;
    width: 30px;
    height: 42px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -15px;
    transform: scale(0.8);
    opacity: 0.7;
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: contain;
    transform-origin: bottom center;
    transition: All .1s ease-out;
    -webkit-transition: All .1s ease-out;
    -moz-transition: All .1s ease-out;
    -o-transition: All .1s ease-out
}
.pin.green > div {
    background-image: url(../img/assets/ico-pin_green.svg);
}
.pin.blue > div {
    background-image: url(../img/assets/ico-pin_blue.svg);
}
.pin.sky > div {
    background-image: url(../img/assets/ico-pin_sky.svg);
}
.pin.red > div {
    background-image: url(../img/assets/ico-pin_red.svg);
}

.pin.active > div {
    transform: scale(1);
    opacity: 1;
}

.pin:active {
    transform:scaleX(1.3) scaleY(0.6) translateY(0px);
    -webkit-transform:scaleX(1.3) scaleY(0.6) translateY(0px);
}

.station_list_wrap {
    position: absolute;
    bottom: -300px;
    left: 0;
    z-index: 100;
    width: 100%;
    transition: All .5s ease-out;
    -webkit-transition: All .5s ease-out;
    -moz-transition: All .5s ease-out;
    -o-transition: All .5s ease-out
}

.station_list_wrap.open {
    bottom: 10px;
}

.station_slider {
    padding: 0 20px;
}

.station_slider.swiper-container {
    overflow: visible;
    padding: 0 20px;
}


.station_slider li {
    width: 100%;
    height: 110px;
    border-radius: 8px;
    background-color: #fff;
    padding-left: 110px;
    position: relative;
    display: flex;
    align-items: center;
}

.station_slider li .thumb {
    width: 80px;
    height: 80px;
    position: absolute;
    top: 15px;
    left: 15px;
    border-radius: 5px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.station_slider li .btn_favor {
    width: 26px;
    height: 26px;
    position: absolute;
    top: 20px;
    left: 64px;
    background-image: url(../img/assets/ico-btn-favor-transparent.svg);
    background-color: transparent;
    border: none;
}

.station_slider li .btn_favor.active {
    background-image: url(../img/assets/ico-btn-favor-fill.svg);
}

.station_slider li .item_info {
    padding-right: 15px;
}

.station_slider li .item_info p {
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
    color: #111111;
}

.station_slider li .item_info span {
    font-size: 13px;
    line-height: 18px;
    color: #999999;
}

/* 장바구니 */
section.section_basket {
    padding-bottom: 60px;
}

section.section_basket .filter_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    border-bottom: 1px solid #DFDFDF;
    padding: 0 20px;
}

section.section_basket .filter_wrap .btn_clear {
    font-size: 14px;
    color: #999999;
    line-height: 20px;
    border: none;
    background-color: transparent;
    padding-left: 16px;
    background-image: url(../img/assets/ico-trashbin-gray.svg);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 12px auto;
}

section.section_basket .basket_list ul li {
    padding: 20px;
    padding-left: 156px;
    position: relative;
}

section.section_basket .basket_list ul li + li {
    border-top: 1px solid #E8E8E8;
}

section.section_basket .basket_list ul li .checkbox {
    position: absolute;
    top: 20px;
    left: 20px;
}

section.section_basket .basket_list ul li .thumb {
    width: 80px;
    height: 80px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5px;
    position: absolute;
    top: 20px;
    left: 60px;
}

section.section_basket .basket_list ul li .item_info {
    padding: 5px 0 0;
}

section.section_basket .basket_list ul li .item_info i {
    font-size: 13px;
    line-height: 20px;
    color: #33B3D2;
}

section.section_basket .basket_list ul li .item_info p {
    font-size: 14px;
    line-height: 20px;
    color: #333333;
    font-weight: 500;
    margin-bottom: 8px;
}

section.section_basket .basket_list ul li .item_info span {
    font-size: 13px;
    font-weight: 500;
    color: #000000;
}

section.section_basket .basket_list ul li .item_info span b {
    font-weight: 600;
    font-size: 16px;
    color: #000000;
}

section.section_basket .basket_list ul li .item_info .carbon i{
    display: inline-block;
    padding: 0 8px;
    line-height: 13px;
    border-radius: 22px;
    font-size: 11px;
    font-weight: 500;
}

section.section_basket .basket_list ul li .item_info .carbon i.purple{
    border: 1px solid #d9a0e1;
    color: #d9a0e1;
}
section.section_basket .basket_list ul li .item_info .carbon i.purple.on{
    border: 1px solid #d9a0e1;
    color: #FFFFFF;
    background-color: #d9a0e1;
}



section.section_basket .basket_list ul li .option_select {
    justify-content: flex-end;
}

section.section_basket .basket_list ul li .option_select > span {
    display: none;
}

.cont_block .tit {
    border-bottom: 1px solid #E8E8E8;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.cont_block .tit h3 {
    font-size: 16px;
    color: #111111;
    font-weight: bold;
}

.cont_block .tit > i {
    font-size: 14px;
    color: #999999;
}

.cont_block .tit > i b.point {
    color: #000000;
    font-weight: bold;
}

.cont_block .tit > i.station {
    color: #34925F;
    padding-left: 19px;
    background-image: url(../img/assets/ico-info-station.svg);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 16px auto;
}


.cont_block .cont {
    padding: 20px;
}

.cont_block .cont .total_wrap dl {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.cont_block .cont .total_wrap dl + dl {
    margin-top: 8px;
}

.cont_block .cont .total_wrap dl dt {
    font-size: 14px;
    color: #999999;
}

.cont_block .cont .total_wrap dl dd {
    font-size: 14px;
    color: #333333;
}

.cont_block .cont .total_wrap dl dd i {
    font-size: 15px;
}

.cont_block .cont .total_wrap .basket_total {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #EFF3F5;
}

.cont_block .cont .total_wrap .basket_total dl dt {
    font-size: 16px;
    color: #111111;
    font-weight: bold;
}

.cont_block .cont .total_wrap .basket_total dl dd {
    font-size: 14px;
    color: #C80606;
}

.cont_block .cont .total_wrap .basket_total dl dd i {
    font-size: 20px;
    font-weight: bold;
    color: #C80606;
}


.noti_block {
    background-color: #F0F0F0;
    padding: 20px;
}

.noti_block h3 {
    font-size: 13px;
    line-height: 20px;
    color: #666666;
    margin-bottom: 5px;
    font-weight: 500;
}

.noti_block p {
    font-size: 12px;
    color: #999999;
    line-height: 20px;
}

.noti_block ul li {
    padding-left: 7px;
    position: relative;
}

.noti_block ul li::before {
    content: "";
    display: inline-block;
    vertical-align: top;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background-color: #999999;
    margin-top: 9px;
    position: absolute;
    top: 0;
    left: 0;
}

/* 결제폼 */
.section_order_form .cont_block,
.section_order_complete .cont_block {
    border-top: 10px solid #F0F0F0;
}

.order_form .form_row {
    display: flex;
    align-items: center;
}

.order_form .form_row + .form_row {
    margin-top: 10px;
}

.order_form .form_row .label_wrap {
    flex: 83px 0 0;
}

.order_form .form_row .input_wrap {
    flex: 1;
    display: flex;
}

.order_form .form_row .input_wrap input[type=text] {
    flex: 1;
}

.order_form .form_row .input_wrap input[type=text]#point {
    text-align: right;
}

.order_form .form_row .input_wrap .btn_input_clear {
    flex: 85px 0 0;
    margin-left: 6px;
    border-radius: 5px;
    background-color: #34925F;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    border: none;
}

.cont_block .order_prd_list ul li {
    position: relative;
    padding: 15px 20px;
    padding-left: 117px;
    display: flex;
    align-items: center;
    height: 110px;
}

.cont_block .order_prd_list ul li + li {
    border-top: 1px solid #E8E8E8;
}

.cont_block .order_prd_list ul li .thumb {
    width: 80px;
    height: 80px;
    border-radius: 5px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 15px;
    left: 20px;
}

.cont_block .order_prd_list ul li .item_info {
    padding: 5px 0;
}

.cont_block .order_prd_list ul li .item_info > i {
    font-size: 13px;
    line-height: 20px;
    color: #33B3D2;
}

.cont_block .order_prd_list ul li .item_info > i.station {
    color: #34925F;
    padding-left: 19px;
    background-image: url(../img/assets/ico-info-station.svg);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 16px auto;
}

.cont_block .order_prd_list ul li .item_info p {
    font-size: 14px;
    line-height: 20px;
    color: #333333;
    font-weight: 500;
    margin-bottom: 9px;
}

.cont_block .order_prd_list ul li .item_info span {
    font-size: 13px;
    color: #000000;
}

.cont_block .order_prd_list ul li .item_info span i {
    font-size: 15px;
    font-weight: 600;
}

.cont_block .order_prd_list ul li .item_info span b {
    font-size: 16px;
    font-weight: bold;
}

.cont_block .payment_list ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.cont_block .payment_list ul li {
    flex: 0 0 calc((100% - 12px) / 3);
}

.cont_block .payment_list ul li:nth-child(n+4) {
    margin-top: 6px;
}

.cont_block .payment_list ul li input[type=radio] {
    display: none;
}

.cont_block .payment_list ul li input[type=radio] + label {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 60px;
    border: 1px solid #DDDDDD;
    font-size: 14px;
    color: #333333;
    border-radius: 5px;
}

.cont_block .payment_list ul li input[type=radio] + label img {
    margin-bottom: 6px;
    height: 14px;
}

.cont_block .payment_list ul li input[type=radio]:checked + label {
    background-color: #34925F;
    border: 1px solid #34925F;
    color: #fff;
}

.order_done_wrap {
    width: 100%;
    height: 335px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.order_done_wrap i {
    display: block;
    width: 50px;
    height: 50px;
    background-image: url(../img/assets/img-done-order.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-bottom: 6px;
}

.order_done_wrap em {
    font-size: 20px;
    line-height: 30px;
    color: #000000;
    font-weight: bold;
}

.order_done_wrap p {
    margin-top: 6px;
    margin-bottom: 34px;
    font-size: 15px;
    line-height: 20px;
    color: #999999;
}

.order_done_wrap span {
    font-size: 14px;
    line-height: 20px;
    color: #999999;
}

.order_done_wrap span b {
    color: #34925F;
}

/* 리필하기 */
.refill_stations .top {
    padding: 20px;
    padding-right: 110px;
    position: relative;
}
.refill_stations .top i {
    font-size: 12px;
    line-height: 20px;
    color: #34925F;
    border: 1px solid #34925F;
    border-radius: 20px;
    padding: 0 8px;
}

.refill_stations .top p {
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
    color: #111111;
    margin-top: 3px;
    margin-bottom: 5px;
}

.refill_stations .top span {
    font-size: 12px;
    line-height: 18px;
    color: #999999;
}

.refill_stations .top .thumb {
    width: 70px;
    height: 70px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    position: absolute;
    right: 20px;
    top: 20px;
}

.select_product_refill ul li + li {
    border-top: 1px solid #EFF3F5;
}

.select_product_refill input[type=radio] {
    display: none;
}

.select_product_refill input[type=radio] + label {
    background-image: url(../img/assets/ico-radio.svg);
    background-position: 20px center;
    background-repeat: no-repeat;
    background-size: 20px auto;
    padding-left: 27px;
    line-height: 50px;
    font-size: 15px;
    letter-spacing: -0.04em;
    font-weight: 500;
    color: #333333;
    position: relative;
    width: 100%;
    display: flex;
    padding: 15px 20px;
    padding-left: 154px;
    height: 110px;
    align-items: center;
}

.select_product_refill input[type=radio]:checked + label {
    background-image: url(../img/assets/ico-radio-checked.svg);
}

.select_product_refill input[type=radio] + label .thumb {
    width: 80px;
    height: 80px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5px;
    position: absolute;
    left: 60px;
    top: 15px;
}

.select_product_refill input[type=radio] + label .item_info p {
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    color: #333333
}

.select_product_refill input[type=radio] + label .item_info span {
    font-size: 15px;
    line-height: 18px;
    color: #000000;
    font-weight: bold;
}

.select_product_refill input[type=radio] + label .item_info i {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    color: #BBBBBB;
}

section.section_do_refill {
    width: 100%;
    height: calc(100% - 60px - 60px);
    position: fixed;
    top: 60px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

section.section_do_refill i {
    display: block;
    margin: 0 auto;
    width: 95px;
    height: 58px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

section.section_do_refill i.confirm {
    background-image: url(../img/assets/img-refill-confirm.svg);
}

section.section_do_refill i.done {
    background-image: url(../img/assets/img-refill-confirm.svg);
}

section.section_do_refill em {
    display: block;
    font-size: 20px;
    font-weight: bold;
    line-height: 37px;
    color: #000000;
    margin-top: 15px;
}

section.section_do_refill p {
    font-size: 14px;
    line-height: 20px;
    color: #999999;
    margin-top: 16px;
}

section.section_do_refill .btn_cancel {
    display: inline-block;
    margin-top: 30vh;
    font-size: 15px;
    line-height: 20px;
    color: #999999;
    text-decoration: underline;
    background-color: transparent;
    border: none;
}


section.section_refill .refill_list > ul > li + li {
    border-top: 10px solid #F0F0F0;
}

section.section_refill .refill_list > ul > li .refill_stations + .select_product_refill {
    border-top: 1px solid #F0F0F0;
}


/* 마이페이지 */
section.section_mypage .profile {
    padding: 20px;
    padding-left: 112px;
    position: relative;
    display: flex;
    align-items: center;
    height: 115px;
}

section.section_mypage .profile .profile_img {
    width: 75px;
    height: 75px;
    position: absolute;
    top: 20px;
    left: 20px;
}

section.section_mypage .profile .profile_img > div {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
}

section.section_mypage .profile .profile_img input[type=file] + label {
    width: 25px;
    height: 25px;
    background-image: url(../img/assets/ico-setting.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 13px;
    padding: 0;
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #fff;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.17);
}

section.section_mypage .profile .profile_info p {
    font-size: 16px;
    line-height: 24px;
    color: #333333;
    margin-bottom: 3px;
}

section.section_mypage .profile .profile_info p b {
    color: #000000;
    font-weight: bold;
}

section.section_mypage .profile .profile_info a {
    font-size: 13px;
    line-height: 20px;
    color: #999999;
    text-decoration: underline;
}

.my_summery ul {
    display: flex;
}

.my_summery ul li {
    flex: 1;
    background-color: #265B3E;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    height: 80px;
}

.my_summery ul li + li {
    border-left: 1px solid #37684D;
}

.my_summery ul li i {
    font-size: 14px;
    line-height: 20px;
    color: #9BB3A6;
}

.my_summery ul li a,
.my_summery ul li span {
    font-size: 20px;
    line-height: 28px;
    color: #FFFFFF;
    font-weight: 600;
}

section.section_mypage .mypage_menu_block {
    margin-top: 10px;
}

section.section_mypage .mypage_menu_block h3 {
    font-size: 15px;
    font-weight: bold;
    color: #000000;
    line-height: 57px;
    padding: 0 20px;
    border-bottom: 1px solid #F0F0F0;
}

section.section_mypage .mypage_menu_block ul{
    padding: 0 20px;
}

section.section_mypage .mypage_menu_block ul li + li {
    border-top: 1px solid #F0F0F0;
}

section.section_mypage .mypage_menu_block ul li a {
    font-size: 14px;
    color: #333333;
    line-height: 50px;
    position: relative;
    display: block;
}

section.section_mypage .mypage_menu_block ul li a::after {
    content: "";
    display: block;
    width: 6px;
    height: 10px;
    background-image: url(../img/assets/ico-angle-list-link.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
}

section.section_mypage .btn_logout {
    display: block;
    width: 100%;
    height: 48px;
    background-color: #F0F0F0;
    font-size: 13px;
    color: #999999;
    text-align: center;
    line-height: 48px;
    margin-top: 6px;
}

/* 공지사항 */
section.section_notice .notice_filter {
    padding: 20px;
    border-bottom: 1px solid #EDEDED ;
}
.toggle_list ul li + li {
    border-top: 1px solid #EDEDED;
}

.toggle_list ul li .toggle_tit button {
    width: 100%;
    border: none;
    background-color: transparent;
    text-align: left;
    padding: 20px;
    position: relative;
}

.toggle_list ul li .toggle_tit button::after {
    content: "";
    display: block;
    width: 12px;
    height: 7px;
    background-image: url(../img/assets/ico-angle-toggle.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 33px;
    transform: translateY(-50%) rotate(180deg);
    transition: All .2s ease-out;
    -webkit-transition: All .2s ease-out;
    -moz-transition: All .2s ease-out;
    -o-transition: All .2s ease-out
}

.toggle_list ul li.open .toggle_tit button::after {
    transform: translateY(-50%) rotate(0deg);
}

.toggle_list ul li .toggle_tit button i {
    font-size: 14px;
    line-height: 20px;
    color: #333333;
}

.toggle_list ul li .toggle_tit button em {
    display: block;
    font-size: 14px;
    line-height: 20px;
    color: #333333;
    font-weight: bold;
    margin-bottom: 8px;
}

.toggle_list ul li .toggle_tit button span {
    font-size: 13px;
    line-height: 20px;
    color: #BBBBBB;
}

.toggle_list ul li .toggle_cont {
    height: 0;
    overflow: hidden;
    transition: All .2s ease-out;
    -webkit-transition: All .2s ease-out;
    -moz-transition: All .2s ease-out;
    -o-transition: All .2s ease-out
}

.toggle_list ul li .toggle_cont > div {
    border-top: 1px solid #EDEDED;
    padding: 20px;
    background-color: #F5F6F8;
}

.toggle_list ul li .toggle_cont > div p {
    font-size: 14px;
    line-height: 22px;
    color: #666666;
}

.toggle_list .btn_more {
    width: 100%;
    height: 52px;
    border: 1px solid #EDEDED;
    border-left: none;
    border-right: none;
    background-color: #fff;
    font-size: 14px;
    color: #666666;
    line-height: 50px;
}

.toggle_list .btn_more::after {
    content: "";
    display: inline-block;
    vertical-align: top;
    width: 12px;
    height: 50px;
    background-image: url(../img/assets/ico-angle-toggle.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.6;
    transform: rotate(180deg);
    margin-left: 7px;
}

/* 포인트 */
.point_list ul li + li {
    border-top: 1px solid #EDEDED;
}

.point_list ul li {
    display: flex;
    padding: 20px;
    align-items: center;
}

.point_list ul li .state {
    flex: 47px 0 0;
}

.point_list ul li .state i {
    display: block;
    width: 47px;
    height: 47px;
    border: 1px solid #CCCCCC;
    border-radius: 50%;
    line-height: 45px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #CCCCCC;
}

.point_list ul li .state i.use {
    border: 1px solid #C80606;
    color: #C80606;
}

.point_list ul li .state i.earn {
    border: 1px solid #34925F;
    color: #34925F;
}

.point_list ul li .item_info {
    margin-left: 12px;
    flex: 1;
}

.point_list ul li .item_info p {
    font-size: 14px;
    line-height: 20px;
    color: #333333;
    font-weight: bold;
    margin-bottom: 3px;
}

.point_list ul li .item_info span {
    font-size: 13px;
    line-height: 20px;
    color: #BBBBBB;
}

.point_list ul li .item_info a{
    font-size: 10px;
    color:#c80806;
}

.point_list ul li .point {
    flex: 80px 0 0;
    text-align: right;
}

.point_list ul li .point p {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #000000;
}

/* 약관동의 */
.policy p {
    font-size: 14px;
    line-height: 20px;
    color: #666666;
    white-space: pre-line;
    line-height: 1.2em;
}

.policy_toggle {
    border-bottom: 1px solid #EDEDED;
}

.policy_toggle button {
    width: 100%;
    background-color: transparent;
    border: none;
    text-align: left;
    padding: 0 20px;
    line-height: 50px;
    font-size: 14px;
    font-weight: bold;
    position: relative;
}

.policy_toggle button::after {
    content: "";
    display: block;
    width: 12px;
    height: 7px;
    background-image: url(../img/assets/ico-angle-toggle.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 33px;
    transform: translateY(-50%) rotate(180deg);
    transition: All .2s ease-out;
    -webkit-transition: All .2s ease-out;
    -moz-transition: All .2s ease-out;
    -o-transition: All .2s ease-out
}

.policy_toggle.open button::after {
    transform: translateY(-50%) rotate(0deg);
}

.policy_toggle .policy_cont {
    height: 0;
    overflow: hidden;
    transition: All .2s ease-out;
    -webkit-transition: All .2s ease-out;
    -moz-transition: All .2s ease-out;
    -o-transition: All .2s ease-out
}

.policy_toggle .policy_cont > div {
    border-top: 1px solid #EDEDED;
    padding: 20px;
}

/* 로그인 */
.login_wrap {
    padding: 0 20px;
    margin-top: 11vh;
}

.login_wrap .login_form {
    margin-top: 30px;
}

.login_wrap .login_form > div {
    position: relative;
}

.login_wrap .login_form > div + div {
    margin-top: 5px;
}

.login_wrap .login_form input {
    padding-left: 45px;
    background-color: #F0F0F0;
    border: 1px solid #F0F0F0;
}

.login_wrap .login_form input:focus {
    background-color: #fff;
    border: 1px solid #265B3E;
}

.login_wrap .login_form .error input {
    border: 1px solid #C80606;
}

.login_wrap .login_form input + label {
    display: block;
    width: 15px;
    height: 15px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
}

.login_wrap .login_form input#userid + label {
    background-image: url(../img/assets/ico-userid.svg);
}

.login_wrap .login_form input#password + label {
    background-image: url(../img/assets/ico-passeord.svg);
}

.login_wrap .btn_wrap {
    margin-top: 14px;
}

.login_wrap .btn_wrap a,
.login_wrap .btn_wrap button {
    display: block;
    width: 100%;
    background-color: #F0F0F0;
    border: 1px solid #F0F0F0;
    line-height: 50px;
    color: #000;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    border-radius: 4px;
}

.login_wrap .btn_wrap .btn_login {
    background-color: #265B3E;
    border: 1px solid #265B3E;
    color: #fff;
}

.login_wrap .btn_wrap .btn_kakao {
    background-color: #FAE54E;
    border: 1px solid #FAE54E;
    color: #000000;
}

.login_wrap .btn_wrap .btn_kakao::before {
    content: "";
    display: inline-block;
    vertical-align: top;
    width: 19px;
    height: 50px;
    margin-right: 6px;
    background-image: url(../img/assets/ico-kakao-login.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.login_wrap .btn_wrap .sep {
    margin: 35px auto;
    text-align: center;
    position: relative;
}

.login_wrap .btn_wrap .sep::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #DFDFDF;
    position: absolute;
    top: 50%;
    left: 0;
}

.login_wrap .btn_wrap .sep span {
    font-size: 14px;
    line-height: 20px;
    color: #333333;
    display: block;
    width: 240px;
    background-color: #fff;
    position: relative;
    z-index: 3;
    margin: 0 auto;
}

.login_sub {
    display: flex;
    width: 100%;
    max-width: 320px;
    padding: 0 20px;
    justify-content: space-around;
    margin: 30px auto;
}

.login_sub a {
    display: block;
    padding: 5px 12px;
    font-size: 14px;
    color: #666666;
    position: relative;
}

.login_sub a + a::before {
    content: "";
    width: 1px;
    height: 10px;
    background-color: #E8E8E8;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}

.login_sub a:last-child {
    text-decoration: underline;
    color: #265b3e;
    font-weight: bold;
}

.error_msg i {
    display: block;
    margin-top: 18px;
    font-size: 13px;
    line-height: 18px;
    color: #C80606;
}

.login_wrap h2 {
    font-size: 22px;
    line-height: 22px;
    color: #000000;
    font-weight: bold;
    margin-bottom: 9px;
}

.login_wrap p {
    font-size: 13px;
    line-height: 20px;
    color: #999999;
    font-weight: 300;
}

.login_wrap p.input_comment {
    color: black;
    font-weight: 500;
    position: absolute;
    animation: showsUp 1s forwards;
}

.login_wrap .member_form {
    padding-top: 20px;
    visibility: unset;
}

.login_wrap .member_form.hide{
    visibility: hidden;
}

.login_wrap .member_form .form_row + .form_row {
    margin-top: 10px;
}

.login_wrap .member_form .form_row + .form_row .label_wrap {
    margin-top: 30px;
}

.login_wrap .member_form .form_row .label_wrap {
    margin-bottom: 7px;
}

.login_wrap .member_form .form_row .label_wrap p {
    font-size: 14px;
    line-height: 20px;
    color: #000000;
    font-weight: bold;
}

.login_wrap .member_form .form_row .label_wrap p.required::after {
    content: " *";
    color: #C80606;
    line-height: 20px;
}

.login_wrap .validation_check .form_row .input_wrap > div {
    flex-direction: column;
}

.login_wrap .member_form .form_row .input_wrap > div {
    display: flex;
    position: relative;
}

.login_wrap .member_form .form_row input {
    /*background-color: #F0F0F0;*/
    border: 1px solid #F0F0F0;
    flex: 1;
}

.login_wrap .member_form .form_row input:focus {
    background-color: #fff;
    border: 1px solid #265B3E;
}

.login_wrap .member_form .form_row .btn_verify {
    width: 109px;
    background-color: #34925F;
    line-height: 40px;
    border: 1px solid #34925F;
    border-radius: 5px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    margin-left: 6px;
}

.login_wrap .member_form .form_row .counter {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 14px;
    font-size: 13px;
    color: #C80606;
}

.login_wrap .member_form .form_row .helper {
    flex-direction: column;
}

.login_wrap .member_form .form_row .helper i {
    display: block;
    margin-top: 9px;
    font-size: 13px;
    line-height: 16px;
    color: #34925F;
    padding-left: 19px;
    position: relative;
}

.login_wrap .member_form .form_row .helper i::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(../img/assets/ico-noti-green.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.login_wrap .member_form .form_row .helper i.n {
    color: #C80606;
}

.login_wrap .member_form .form_row .helper i.n::before {
    background-image: url(../img/assets/ico-noti-red.svg);
}

.modal_results {
    position: fixed;
    z-index: 150;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal_results .modal_cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    opacity: 0;
    pointer-events: none;
    transition: All .2s ease-out;
    -webkit-transition: All .2s ease-out;
    -moz-transition: All .2s ease-out;
    -o-transition: All .2s ease-out
}

.modal_results.open .modal_cover {
    opacity: 1;
    pointer-events: visible;
}

.modal_results .inner {
    width: calc(100% - 40px);
    max-width: 320px;
    background-color: #fff;
    pointer-events: visible;
    position: relative;
    z-index: 5;
    border-radius: 5px;
    animation: showUp 0.3s forwards;
    display: none;
    transition: All .2s ease-out;
    -webkit-transition: All .2s ease-out;
    -moz-transition: All .2s ease-out;
    -o-transition: All .2s ease-out
}

.modal_results.open .inner {
    display: block;
}

.modal_results .inner::before {
    content: "";
    display: block;
    width: 42px;
    height: 42px;
    background-color: #34925F;
    border-radius: 50%;
    position: absolute;
    left: 22px;
    top: -21px;
    background-image: url(../img/assets/ico-img-check.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 17px auto;
}

.modal_results .inner .cont {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.modal_results .inner .cont p {
    font-size: 15px;
    line-height: 20px;
    color: #000000;
}

.modal_results .inner .cont span {
    font-size: 14px;
    line-height: 20px;
    color: #666666;
}

.modal_results .inner .btn_wrap {
    background-color: #265B3E;
    width: 100%;
    height: 48px;
    border-radius: 0 0 5px 5px;
    padding: 0 20px;
    text-align: right;
    position: relative;
}

.modal_results .inner .btn_wrap a {
    font-size: 14px;
    font-weight: bold;
    line-height: 48px;
    color: #fff;
}

.modal_results .inner .btn_wrap a + a {
    position: absolute;
    left: 20px;
    top: 0;
    opacity: 0.6;
}


/* 빈스테이션 메인 */
.bean_top_slider li {
    height: 320px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.bean_top_slider li > div span {
    display: inline-block;
    vertical-align: top;
    height: 22px;
    line-height: 22px;
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    padding: 0 4px;
}

.bean_top_slider li.tree > div span {
    background: linear-gradient(to top, rgba(184,224,76,0.36) 40%, transparent 7%);
}

.bean_top_slider li.co2 > div span {
    background: linear-gradient(to top, rgba(61,217,255,0.36) 40%, transparent 7%);
}


.bean_top_slider li > div img {
    display: block;
    margin-top: 22px;
}

.bean_top_slider li > div p {
    line-height: 44px;
    font-size: 21px;
    color: #FFFFFF;
}

.bean_top_slider li > div p i {
    font-size: 31px;
    color: #FFFFFF;
    font-weight: 600;
}

.bean_top_slider .nav {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    z-index: 5;
}

.bean_top_slider .nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 33px;
    background-color: transparent;
    border: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.nav button.nav_prev {
    background-image: url(../img/bean/ico-arrow-nav-prev.svg);
    left: 0;
}

.nav button.nav_next {
    background-image: url(../img/bean/ico-arrow-nav-next.svg);
    right: 0;
}

.swiper-point-container{
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    height: 20px;
}
.swiper-point-container.home{
    margin-right: unset;
}
.swiper-point-container .msp{
    font-size: 15px;
    color: #FFFFFF;
    padding: 15px 0;
}

.section_group_bean {
    background-color: #EBEBEB;
    padding-bottom: 20px;
}

section.section_widget {
    margin-top: -50px;
    padding: 0 20px;
    padding-top: 65px;
}

section.section_widget > div.widget_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 10px;
    column-gap: 10px;
}

/*section.section_widget > div.widget_wrap .btn_icon {*/
.btn_icon {
    flex: 100px 0 0;
    height: 100px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: none;

}
.shadow_green{
    background-color: #1D3126;
    box-shadow: 1px 1px 3px rgb(29 49 38 / 50%);
}
.shadow_blue{
    background-color: #000080;
    box-shadow: 1px 1px 3px rgb(29 49 38 / 50%);
}

/*section.section_widget > div.widget_wrap .btn_icon p {*/
.btn_icon p {
    font-size: 14px;
    color: #FFFFFF;
}

/*section.section_widget > div.widget_wrap .btn_icon p::before {*/
.btn_icon p icon {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    margin-bottom: 8px;
    /*background-image: url(../img/bean/ico-qr.svg);*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/*section.section_widget > div.widget_wrap .btn_icon p i {*/
.btn_icon p i {
    font-weight: bold;
}
.shadow_green p i {
    color: #A9DD8E;
}
.shadow_blue p i {
    color: #8eddda;
}
.collect_item{
    display: flex;
    justify-content: space-between;
}
.collect_item .col_menu{
    margin-top: 23px;
}
.collect_item .col_menu .select_btn{
    width: auto;
    margin-left: 0;
}
.large_bold_f {
    font-weight: bold;
    font-size: large;
}

.collect_item .btn_icon{
    top: 84px;
    right: 21px;
    height: 75px;
}

.collect_item .btn_icon  p{
    font-size: 10px;
    padding: 0 4px;
}

section.section_widget > div.widget_wrap .btn_recycle_log {
    display: block;
    flex-basis: 150px;
    flex-grow: 1;
    /*margin-left: 12px;*/
    background-image: url(../img/bean/bg-btn-recycle.png);
    height: 100px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 0 24px;
    /*box-shadow: 1px 1px 3px rgb(0 0 0 / 16%);*/

}

section.section_widget > div.widget_wrap .btn_recycle_log em {
    font-size: 16px;
    line-height: 24px;
    color: #fff;
    font-weight: bold;
}

section.section_widget > div.widget_wrap .btn_recycle_log p {
    font-size: 14px;
    color: #FFFFFF;
    line-height: 20px;
}

section.section_widget .echo_summery {
    width: 100%;
    border-radius: 6px;
    background-color: #FFFFFF;
    margin-top: 15px;
    padding: 16px 10px 25px;
}

section.section_widget .echo_summery em {
    display: block;
    font-size: 16px;
    line-height: 24px;
    color: #111111;
    font-weight: bold;
    padding: 0 10px;
}

section.section_widget .echo_summery ul {
    display: flex;
    margin-top: 10px;
}

section.section_widget .echo_summery ul li {
    flex: 1;
    text-align: center;
}

section.section_widget .echo_summery ul li + li {
    border-left: 1px solid #EDEDED;
}

section.section_widget .echo_summery ul li span {
    font-size: 12px;
    line-height: 17px;
    color: #999999;
    display: block;
    margin-bottom: 6px;
}

section.section_widget .echo_summery ul li p {
    font-size: 13px;
    line-height: 20px;
    color: #000000;
}

section.section_widget .echo_summery ul li p i {
    font-size: 17px;
    font-weight: 600;
}

section.section_nearby_station {
    padding-top: 15px;
}

section.section_recycle {
    padding-bottom: 60px;
}

section.section_recycle .list_filter span::before {
    content: none;
}

section.section_recycle .recycle_summery .tit {
    padding: 0 20px;
}

section.section_recycle .recycle_summery .tit h3 {
    font-size: 15px;
    line-height: 60px;
    font-weight: bold;
    color: #111111;
    padding-left: 26px;
    background-image: url(../img/bean/ico-log-tit.svg);
    background-position: left 19px;
    background-repeat: no-repeat;
}

section.section_recycle .recycle_summery ul {
    display: flex;
}

section.section_recycle .recycle_summery ul li {
    flex: 1;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #34925F;
    text-align: center;
}

section.section_recycle .recycle_summery ul li + li {
    border-left: 1px solid rgba(255,255,255,0.16);
}

section.section_recycle .recycle_summery ul li span {
    font-size: 12px;
    color: #FFFFFF;
    line-height: 17px;
    display: block;
    margin-bottom: 4px;
}

section.section_recycle .recycle_summery ul li p {
    font-size: 13px;
    line-height: 20px;
    color: #FFFFFF;
}

section.section_recycle .recycle_summery ul li p b {
    font-weight: 600;
    font-size: 17px;
}

section.section_recycle .recycle_log_list {
    margin-top: 15px;
}

section.section_recycle .recycle_log_list > ul > li + li {
    border-top: 10px solid #EBEBEB;
}

section.section_recycle .recycle_log_list > ul > li > i.date {
    display: block;
    font-size: 15px;
    color: #666666;
    line-height: 50px;
    padding: 0 20px;
    border-bottom: 1px solid #EDEDED;
    background-color: #EDF4EF;
    border-radius: 6px 6px 0 0;
    margin-bottom: 5px;
}

section.section_recycle .recycle_log_list > ul > li > i.date.checked{
    background-color: #213429;
    color: #ffffff;
}


section.section_recycle .recycle_log_list ul  li .recycleLog {
    border-bottom: 5px solid #EBEBEB;
}

section.section_recycle .recycle_log_list > ul > li > div > div{
    padding: 17px 20px;
}

section.section_recycle .recycle_log_list > ul > li > div > div + div {
    border-top: 1px solid #EDEDED;
}

section.section_recycle .recycle_log_list > ul > li > div dl {
    display: flex;
    width: 100%;
    align-items: flex-start;
}

section.section_recycle .recycle_log_list > ul > li > div dl + dl {
    margin-top: 7px;
}

section.section_recycle .recycle_log_list > ul > li > div dl dt {
    flex: 120px 0 0;
    font-size: 14px;
    line-height: 20px;
    color: #1D3126;
    font-weight: bold;
    position: relative;
    padding-left: 10px;
}

section.section_recycle .recycle_log_list > ul > li > div dl dt::after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background-color: #519063;
    border-radius: 50%;
    opacity: 0.2;
    position: absolute;
    top: 1px;
    left: 0;
}

section.section_recycle .recycle_log_list > ul > li > div dl dd {
    flex: 1;
}

section.section_recycle .recycle_log_list > ul > li > div dl dd p {
    font-size: 14px;
    color: #333333;
    line-height: 20px;
}

section.section_recycle .recycle_log_list > ul > li > div dl dd span {
    font-size: 14px;
    line-height: 20px;
    color: #333333;
}

/*section.section_recycle .recycle_log_list > ul > li > div dl dd p::before {*/
section.section_recycle .recycle_log_list > ul > li > div dl dd i {
    content: "";
    display: inline-block;
    vertical-align: top;
    width: 20px;
    height: 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 2px;
}

section.section_recycle .recycle_log_list > ul > li > div dl dd div {
    display: flex;
}

section.section_recycle .recycle_log_list > ul > li > div dl dd p.ico_shop::before {
    background-image: url(../img/bean/ico-shop.svg);
}

section.section_recycle .recycle_log_list > ul > li > div dl dd p.ico_company::before {
    background-image: url(../img/bean/ico-company.svg);
}

section.section_recycle .recycle_log_list > ul > li > div dl dd p.reprd_pet_tp::before {
    background-image: url(../img/bean/ico-reprd-pet-tp.svg);
}

section.section_recycle .recycle_log_list > ul > li > div dl dd p.reprd_pet::before {
    background-image: url(../img/bean/ico-reprd-pet.svg);
}

section.section_recycle .recycle_log_list > ul > li > div dl dd p.reprd_can::before {
    background-image: url(../img/bean/ico-reprd-can.svg);
}

section.section_recycle .recycle_log_list > ul > li > div dl dd p.reprd_paper::before {
    background-image: url(../img/bean/ico-reprd-paper.svg);
}

section.section_recycle .recycle_log_list > ul > li > div dl dd p.reprd_bottle::before {
    background-image: url(../img/bean/ico-reprd-bottle.svg);
}

section.section_recycle .recycle_log_list > ul > li > div dl dd ul li {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

section.section_recycle .recycle_log_list > ul > li > div dl dd ul li + li {
    margin-top: 8px;
}

section.section_recycle .recycle_log_list .btn_more {
    width: 100%;
    height: 52px;
    border: 1px solid #EDEDED;
    border-left: none;
    border-right: none;
    background-color: #EDEDED;
    font-size: 14px;
    color: #999999;
    line-height: 50px;   
}

section.section_recycle .recycle_log_list .btn_more::after {
    content: "";
    display: inline-block;
    vertical-align: top;
    width: 12px;
    height: 50px;
    background-image: url(../img/assets/ico-angle-toggle.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.6;
    transform: rotate(180deg);
    margin-left: 7px;
}

section.section_recycle .fixed_bar {
    position: fixed;
    bottom: -61px;
    left: 0;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    background-color: #213429;
    transition: All .2s ease-in-out;
    -webkit-transition: All .2s ease-in-out;
    -moz-transition: All .2s ease-in-out;
    -o-transition: All .2s ease-in-out
}
section.section_recycle .status_change_bar.open{
    bottom: 0;
    transition: All .2s ease-in-out;
    -webkit-transition: All .2s ease-in-out;
    -moz-transition: All .2s ease-in-out;
    -o-transition: All .2s ease-in-out
}
section.section_recycle .fixed_bar label {
    font-size: 12px;
    color: #EDEDED;
    line-height: 27px;
    display: block;
}

section.section_recycle .fixed_bar label b {
    display: inline-block;
    vertical-align: top;
    font-size: 15px;
    color: #FFFFFF;
    font-weight: 600;
    line-height: 27px;
    margin-left: 8px;
}


section.section_recycle .fixed_bar span {
    font-size: 12px;
    color: #EDEDED;
    line-height: 27px;
    display: block;
}

section.section_recycle .fixed_bar span b {
    display: inline-block;
    vertical-align: top;
    font-size: 19px;
    color: #FFFFFF;
    font-weight: 600;
    line-height: 27px;
    margin-left: 8px;
}

section.section_recycle .fixed_bar span b i {
    display: inline-block;
    vertical-align: top;
    width: 17px;
    height: 17px;
    line-height: 17px;
    text-align: center;
    color: #fff;
    background-color: #34925F;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    margin-left: 3px;
    margin-top: 5px;
}
/*탭*/
.recycle_section_tab{
    border-bottom: 1px solid #DFDFDF;
}
.recycle_section_tab ul {
    display: flex;
}
.recycle_section_tab ul li{
    flex: 1;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #EDF4EF;
    text-align: center;
    color: #213429;
}
.recycle_section_tab ul li.active{
    background-color: #213429;
}
.recycle_section_tab ul li p {
    font-size: 13px;
    line-height: 20px;

}
.recycle_section_tab ul li p b{
    font-weight: 600;
    font-size: 17px;
}
.recycle_section_tab ul li.active p b{
    color: #fff;
}
.recycle_section_tab ul li.active span{
    color: #fff;
}
.recycle_section_tab ul li span{
    font-size: 12px;
    line-height: 17px;
    display: block;
    margin-bottom: 4px;
}

video{
 border-radius: 10px;
}
#qr-shaded-region{
    border-radius: 10px;
}
#qrcode img{
    left: 50%;
    position: relative;
    display: block;
    transform: translateX(-35%);
    width: 70% !important;
}

li .item_info .station_class {
    display: flex;
}
li .item_info .station_class p{
    font-size: 10px;
}
li .item_info .station_class p.franchisee{
    display: inline-block;
    padding: 0 8px;
    line-height: 22px;
    border-radius: 22px;
    font-weight: 500;
}
li .item_info .station_class p.franchisee.red{
    color: #FF6F61;
    border: 1px solid #FF6F61;
}
li .item_info .station_class p.franchisee.green{
    color: #34925F;
    border: 1px solid #34925F;
}
li .item_info .station_class p.franchisee.blue{
    border: 1px solid #0171f9;
    color: #0171f9;
}
li .item_info .station_class p.franchisee.yellow{
    border: 1px solid #ffc142;
    color: #ffc142;
}
li .item_info .station_class p.franchisee+.franchisee{
    margin-left: 2px;
}

li .item_info .station_class i{
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 14px;
    display: block;
    width: 15px;
    height: 15px;
    margin-top: 3px;
}

li .item_info .station_class i.green{
    background-image: url(../img/assets/ico-pin_green.svg);
}
li .item_info .station_class i.blue{
    background-image: url(../img/assets/ico-pin_blue.svg);
}
li .item_info .station_class i.sky{
    background-image: url(../img/assets/ico-pin_sky.svg);
}
li .item_info .station_class i.red{
    background-image: url(../img/assets/ico-pin_red.svg);
}
/* 약관 모달 */
.modal_agreement {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 150;
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    background-color: rgba(57,62,70,.6);
    display: flex;
    align-items: center;
    padding: 20px 16px;
    opacity: 0;
    pointer-events: none;
    transition: All .2s ease-out;
    -webkit-transition: All .2s ease-out;
    -moz-transition: All .2s ease-out;
    -o-transition: All .2s ease-out
}

.modal_agreement.open {
    opacity: 1;
    pointer-events: visible;
}

.modal_agreement > div {
    width: 100%;
    height: 100%;
    max-height: 520px;
    background-color: #fff;
    border-radius: 10px;
    position: relative;
    padding: 63px 0 87px;
    transform: translateY(10px);
    transition: All .2s ease-out;
    -webkit-transition: All .2s ease-out;
    -moz-transition: All .2s ease-out;
    -o-transition: All .2s ease-out
}

.modal_agreement.open > div {
    transform: translateY(0);
}

.modal_agreement > div .tit {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #002B6B;
    width: 100%;
    border-radius: 10px;
}

.modal_agreement > div .tit h3 {
    line-height: 44px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    letter-spacing: 0.2em;
}

.modal_agreement > div .btn_tp_dgreen {
    position: absolute;
    bottom: 29px;
    margin: 0 16px;
    border-radius: 7px;
    line-height: 40px;
    width: calc(100% - 32px);
}

.agreements {
    margin: 0 20px;
    height: 100%;
    overflow-y: auto;
}

.checkbox > input[type=checkbox] + label button {
    border: none;
    background-color: transparent;
    text-decoration: underline;
}

.member_form > .checkbox {
    margin: 10px 0;
}

/* 이용약관 */
.signup-terms > span {
    font-weight: bold;
}
.signup-terms {
    white-space: pre-wrap;
    line-height: 1.2em;
}

/* 유효성 검사 후 에러 메세지 형식 */
.validation_check > .form_row .input_wrap span {
    font-size: 10px;
    color: red;
    margin-top: 5px;
    margin-left: 2px;
    letter-spacing: 0;
    display: block;
    height: 11px;
}

/* 아이템 수거 */
.collect_wrap, .point_wrap {
    margin-top: 30px;
}

.custom_typecontrol {position:absolute;top:10px;left:10px;overflow:hidden;height:30px;margin:0;padding:0;z-index:1;font-size:12px;border-radius: 5px;box-shadow: -3px 3px 7px -1px #b4b6b1;display:inline-block;}
.custom_typecontrol span {display:block;height:30px;float:left;text-align:center;line-height:30px;cursor:pointer;}

.custom_typecontrol .btn_filter {background:#fff;padding:0 5px;}
.custom_typecontrol .btn_filter:hover {background:#f5f5f5;}
.custom_typecontrol .btn_filter:active {background:#e6e6e6;}
.custom_typecontrol .btn_filter.on {color:#fff;background:#3497fe;}
.custom_typecontrol .btn_filter.on:hover {color:#fff;}

.custom_icon{
    display: flex;
    flex-direction: column;
    z-index: 1;
    top: 10px;
    right : 10px;
    position: absolute;
}
.custom_icon div{
    background:#fff;
    border-radius: 5px;
}
.custom_icon #gps{
    box-shadow: -3px 4px 4px -1px #b4b6b1;
    margin: 0 3px;
}

.custom_icon div + div{
    margin-top: 10px;
}
.custom_icon div i{
    display: block;
    height: 18px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.custom_icon #gps i{
    margin: 9px 0;
    background-image: url(../img/assets/ico-gps.png) !important;
}
@media (hover: hover) {
    .custom_icon #gps:hover i{
        background-image: url(../img/assets/ico-gps_on.png) !important;

    }
}
.custom_icon #gps.none_click{
    opacity: 0.5;
    pointer-events: none;
}
.shop_brand_name{
    color:#000;
}
.shop_brand_name:after{
    background-image: url(../img/assets/ico-header-arrow-select-dark.svg) !important;
}
.bin_logo:after{
    background-image: url(../img/assets/ico-header-arrow-select-dark.svg) !important;
}
.bin_profile{
    background-image: url(../img/assets/ico-tool-profile.svg) !important;
}
#header.bin{
    position: unset !important;
}

.layout.main.btm.bin{
    background-color: #EBEBEB;
}
.bin .user_info.shop_name{
    margin-top: -10px;
}
.bin .user_info.shop_name .loggedin{
    height: 50px;
}
.bin .user_info.login{
    margin-top: 15px;
}
.bin .ccnt{
    position: unset;
    z-index: unset;
}
.bin .user_info.login{
    z-index: 0;
}
.bin .toggle_shop_brand.open{
    width: 80%;
    top: 60px;
}
/* footer business_info */
footer{
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color:#1d3126;
    padding : 10px 0;
    bottom: 0;
}
footer.bin{
    bottom: 0;
    margin-top: 0;
}
footer div {
    padding: 12px 1rem;
    font-size: 0.5rem;
    text-align: center;
}
footer p {
    color: white;
    white-space: break-spaces;
    margin-top: unset;
    margin-bottom: unset;
    line-height: 13px;
    font-size: 11px;
}
.two-span {
    grid-column: 1 / -1;
}

/*refillerDetail.html*/
.refiller_list li .state {
    flex: 0 0 42px;
    height: 52px;
    box-shadow: 0 2px 4px rgb(188 202 224 / 20%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 15px;
    color: #bf0072;
    margin-right: 10px;
    background-color: #f9ece8;
    border-radius: 6px;
}

.refiller_list .refiller_list_wrap {
    justify-content: space-between;
    align-items: center;
    gap: 5px;
}

.refiller_list .refiller_list_wrap .refiller_item {
    display: flex;
    flex-grow: 1;
    align-items: center;
    gap: 5px;
}

section.section_recycle .recycle_log_list.refiller_list > ul > li {
    border-top: 2px solid #EBEBEB;
}

/*end*/

.mt_5vh {
    margin-top: 5vh;
}

.section_recycle div.recycle_header {
    display: flex;
    justify-content:
    space-between; margin: 20px
}

.btn_round {
    border-radius: 5px;
    height: 30px;
}

.fb_100 {
    flex-basis: 100px;
    flex-shrink: 0;
}

.fg_1 {
    flex-grow: 1;
}
.section_recycle .recmnd_list ul{
    font-size: 0;
    padding: 15px 20px 0 20px;
    margin-bottom: -8px;
    text-align: center;
}
.section_recycle .recmnd_list ul li{
    display: inline-block;
    vertical-align: top;
    margin-bottom: 8px;
 }
.section_recycle .recmnd_list ul li+li{
    margin-left: 6px;
}
.section_recycle .recmnd_list ul li span{
    border: 1px solid #dde8e0;
    color: #659b7d;
    line-height: 30px;
    border-radius: 30px;
    font-weight: bold;
}
.section_recycle .recmnd_list .main li span{
    display: block;
    padding: 0 15px;
    font-size: 14px;
}
.section_recycle .recmnd_list .sub li span{
    display: block;
    padding: 0 10px;
    font-size: 10px;
}
.section_recycle .recmnd_list ul li span.on{
    background-color: #dde8e0;
    color: #1D3126;
}

.section_prd_list .sec_tit{
    display: flex;

}
.section_prd_list .sec_tit .select_title{
    font-size: 14px;
    color: #6b756d;
}
.section_prd_list .sec_tit .select_title +.select_title{
    margin-left: 12px;
}
.section_prd_list .sec_tit .select_title.on{
    font-size: 20px;
    color: #111111;
}

/* shopHome */
.sl_vertical ul {
    display: grid;
    grid-gap: 15px 10px;
    grid-template-columns: 1fr 1fr;
    padding: 15px 20px;
    justify-content: space-around;
}

.sl_vertical ul li.sl_item {
    display: grid;
    border-radius: 5px;
    box-shadow: 1px 1px 3px rgb(0 0 0 / 12%);
}

li.sl_item .thumb {
    width: 100%;
    padding-top: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5px 5px 0 0;
}

.station_list li.sl_item .thumb {
    padding-top: 57.1428%;
}

li.sl_item .item_info .station {
    border-bottom: 1px solid #EFF3F5;
    margin-bottom: 7px;
}

li.sl_item .item_info .station em {
    display: block;
    font-size: 13px;
    line-height: 20px;
    color: #33CCD2;
    font-weight: 600;

    max-width: calc((100vw - 55px) / 2);
    overflow: hidden;
    padding: 5px 4px;
    word-break: keep-all;
}
li.sl_item i.franchisee{
    display: inline-block;
    padding: 0 8px;
    line-height: 22px;
    border-radius: 22px;
    font-weight: 500;
    font-size: 10px;
}
li.sl_item .item_info .station i.red{
    border: 1px solid #ff6f61;
    color: #ff6f61;
}
li.sl_item .item_info .station i.green{
    border: 1px solid #34925F;
    color: #34925F;
}
li.sl_item .item_info .station i.blue{
    border: 1px solid #0171f9;
    color: #0171f9;
}
li.sl_item .item_info .station i.sky{
    border: 1px solid #50bcdf;
    color: #50bcdf;
}
li.sl_item .item_info .station i.yellow{
    border: 1px solid #ffc142;
    color: #ffc142;
}
li.sl_item i.purple{
    position: absolute;
    margin-top: 5px;
    margin-left: 5px;
    opacity: 0.8;
    border: 1px solid #d9a0e1;
    color: #FFFFFF;
    background-color: #d9a0e1;
}

li.sl_item .item_info p {
    font-size: 14px;
    line-height: 20px;
    color: #333333;
    font-weight: 600;
}

li.sl_item .item_info span {
    font-size: 13px;
    color: #333;
    line-height: 20px;
}

li.sl_item .item_info span b {
    font-weight: 700;
}

.sl_vertical.station_list {
    background: #F0F0F0;
}

.sl_vertical.station_list ul {
    row-gap: 10px;
}

.sl_vertical.station_list ul li .item_info p {
    font-size: 16px;
    line-height: 24px;
    color: #111111;
    margin-bottom: 2px;
    font-weight: 400;
}

.sl_vertical.station_list ul li .item_info .station_class p {
    font-size: 10px;
    font-weight: 700;
}

.sl_vertical.station_list ul li .item_info span {
    font-size: 13px;
    color: #999999;
    line-height: 20px;
}

.sl_vertical.station_list ul li .item_info {
    margin-top: 10px;
}

.sl_verti.station_list ul li .item_info span {
    font-size: 13px;
    color: #999999;
    line-height: 20px;
}

.p-20 {
    padding: 20px;
}

.bg-white {
    background: white;
}

.pt-10 {
    padding-top: 10px;
}
.prd_list .item_info{
    padding-left: 5px;
}
/*이벤트 공통*/
.event .fraction{
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    width: 53px;
    display: inline-block;
    background-color: rgba(0,0,0,0.4);
    text-align: center;
    line-height: 24px;
    border-radius: 24px;
}
.event .fraction span{
    line-height: 24px;
    color: #fff;
    font-size: 13px;
    font-weight: 300;
}
/**리필 배너 **/
.section_banner{
    padding: 0 20px;
}
.refill_banner ul li{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 7px;
    position: relative;
    padding-top: 30%;
}
.refill_banner ul li img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 5px;
}

.refill_banner ul li a{
    width: 100%;
    height: 100%;
}
/*슬라이드 팝업*/
.slide_popup ul li{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 7px 7px 0 0;
    position: relative;
    padding-top: 30%;
}

.slide_popup ul li img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 5px;
}

.slide_popup ul li a{
    width: 100%;
    height: 100%;
}

/*팝업*/
.pop_up ul li{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 7px 7px 0 0;
    position: relative;
    padding-top: 30%;
}

.pop_up ul li img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 5px;
}
.pop_up ul li{
    width: 100%;
    height: 100%;
}
.pop_up ul li a{
    width: 100%;
    height: 100%;
}
.modal_pop .pop_inner{
    display: none;
    position: absolute;
    left: 0;
    bottom: 15%;
    background-color: #fff;
    border-radius: 30px 30px 0 0;
    pointer-events: visible;
    transition: All .2s ease-in-out;
    -webkit-transition: All .2s ease-in-out;
    -moz-transition: All .2s ease-in-out;
    -o-transition: All .2s ease-in-out;
    width: 70%;
    transform: translate(20%);
}
.modal_type_list.event ul li{
    width: 100% !important;
}
@media (min-width: 500px) {
    .event .event_source{
        width: 50%;
        transform: translate(50%);
    }
}
@media (min-width: 865px) {
    .event .event_source{
        width: 40%;
        transform: translate(50%);
        left: 10%
    }
}
@media (min-width: 1090px) {
    .event .event_source{
        width: 35%;
        transform: translate(50%);
        left: 15%
    }
    /*.refill_banner ul li{*/
    /*    padding-top: 15% !important;*/
    /*}*/
}
@media (min-width: 1200px) {
    .event .event_source{
        width: 30%;
        transform: translate(50%);
        left: 20%
    }
}
@media (min-width: 1300px) {
    .modal_pop .pop_inner{
        width: 25%;
        transform: translate(50%);
        left: 25%
    }
}
@media (min-width: 1400px) {
    .modal_pop .pop_inner{
        width: 20%;
        transform: translate(50%);
        left: 30%
    }
}

/*add event css*/
.add_event input[type=date]{
    width: 100%;
    border: 1px solid #DFDFDF;
    border-radius: 5px;
    line-height: 40px;
    padding: 0 16px;
    font-size: 14px;
}
.add_event .no_margin_bottom{
    margin-bottom: 0 !important;
}

.add_event .dc_item {
    display: flex;
}
.add_event .dc_title{
    justify-content: space-around;
}
.add_event #dc_all{
    display: flex;
}
.add_event .dc_item+.dc_item{
    margin-top: 5px;
}
.add_event .dc_item .item_name{
    font-size: 10px;
}

.add_event .discount_conf button{
    background-color: #213429 !important;
    font-size: 15px;
    color: #FFFFFF !important;
    font-weight: bold;
    text-align: center;
    border: none;
    padding: 0 6px;
}
.add_event .dc_item .btn_add{
    background-color: #213429 !important;
}
.add_event .dc_item .btn_del{
    background-color: red !important;
}
.add_event .border{
    padding: 15px;
    border-radius: 8px;
}
.add_event #searched_item{
    border: 1px solid #213429 !important;

}
.add_event #added_item{
    border: 1px solid red !important;
}
.add_event .search_item{
    display: flex;
}
.add_event .search_item input[type=search]{
    width: 100%;
    border: 1px solid #DFDFDF;
    border-radius: 5px;
    line-height: 40px;
    padding: 0 16px;
    font-size: 14px;
}
.add_event .dc_title{
    font-size: 12px;
    margin-bottom: 5px;
}

/*주문내역페이지*/
.section_order{
    padding-bottom: 60px;
    content: none;
}
.section_order .list_filter span::before {
    content: none;
}

.section_order .fixed_bar{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    background-color: #213429;
}
.section_order .fixed_bar span{
    font-size: 12px;
    color: #EDEDED;
    line-height: 27px;
    display: block;
}
.section_order .fixed_bar span b{
    display: inline-block;
    vertical-align: top;
    font-size: 19px;
    color: #FFFFFF;
    font-weight: 600;
    line-height: 27px;
    margin-left: 8px;
}

.modal_order_detail .thumb{
    width: 120px;
    height: 120px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    top: 15px;
    left: 20px;
    border-radius: 10px;
}

.modal_order_detail .item_info{
    display: flex;
    max-height: 380px;
    margin-top: 15px;
    margin: unset;
    background-color: #f8f8f8;
    border-radius: 10px;
    padding: 10px;
    overflow: auto;
    margin: 15px 0;
    width: 100%;
    justify-content: space-around;

}

.modal_order_detail .item_info{
    padding: 15px 0;
}
.modal_order_detail .item_info i{
    font-size: 13px;
    line-height: 20px;
    color: #33B3D2;
}

.modal_order_detail .item_info p{
    font-size: 14px;
    line-height: 20px;
    color: #333333;
    font-weight: 600;
    margin-bottom: 6px;
}
.modal_order_detail .item_info b{
    font-weight: 700;
}
.modal_order_detail .item_info span{
    font-size: 14px;
    line-height: 20px;
    color: #000000;
}

.modal_order_detail .item_info span{
    font-size: 14px;
    line-height: 20px;
    color: #000000;
}

.modal_order_detail .item_info .paid_date{
    display: flex;
    flex-direction: column;
}
.modal_order_detail .item_info .paid_date span{
    display: inline-block;
    font-size: 13px;
    line-height: 20px;
    color: #666666;
}

.modal_order_detail .item_detail{
    max-height: 280px;
    margin-top: 15px;
    margin: unset;
    background-color: #f8f8f8;
    border-radius: 10px;
    padding: 10px;
    overflow: auto;
    margin: 15px 0;
    width: 100%;
}

.modal_order_detail .item_detail .paid_date{
    position: absolute;
    display: flex;
    flex-direction: column;
}

.modal_order_detail .item_detail .paid_date span{
    display: inline-block;
    font-size: 13px;
    line-height: 20px;
    color: #666666;
}

.modal_order_detail .item_detail em{
    font-size: 13px !important;
    margin-bottom: 5px !important;
}

.modal_order_detail .item_detail p{
    margin-bottom: 20px;
    font-size: 13px;
}

.sl_verti.prd_list_full ul li .item_info .paid_date{
    display: flex;
    flex-direction: column;
}
.sl_verti.prd_list_full ul li .item_info .paid_date span{
    display: inline-block;
    font-size: 13px;
    line-height: 20px;
    color: #666666;
}

.list_filter button#excel::after{
    background-image: url(../img/assets/ico-result-list.svg);
}
.section_order select{
    border: none;
}
.shop_brand_name select{
    font-weight: 700;
}
.modal_order_search input[type=radio]{
    justify-content: space-around;
    appearance: none;
    background: transparent;
    border: none;
}
.modal_order_search li{
    width: 100%;
    display: inline-block;
}
.modal_order_search li+li{
    margin-left: 4px;
}

.modal_order_search input[type=radio] + label{
    width: 100%;
    color : #acacac;
    border: 1px solid #DFDFDF;
    border-radius: 5px;
    line-height: 40px;
    padding: 0 5px;
    font-size: 14px;
    text-align: center;
    display: block;
}

.modal_order_search input[type=radio]:checked + label{
    background-color: #1d3126;
    border-color: #1d3126;
    color: #fff;
    -webkit-transition: All .2s ease-out;
}

#shop_name_list{
 margin-right: 70px;
}

.paid_list .btn_basic{
    line-height: 22px;
    font-weight: bold;
    text-align: center;
    border-radius: 5px;
    border: none;
    padding: 0px 25px;
}
.paid_list .btn_refill{
    background-color: #FF6F61;
    color: #FFFFFF;
}
.paid_list .btn_refund{
    font-size: 10px !important;
    color: #666666 !important;
    right: 0;
    position: absolute;
    bottom: -15px;
}

button.btn_tp_dgreen:disabled{
    background-color: #21342978 !important;
}

/*앱 형태 퍼블*/
.app_cont {
    width: 80%;
    height: 100%;
    margin: 0 auto;
    position: relative;
}

.app_screen_comp {
    width: 40%;
    height: max-content;
    position: absolute;
    right: 0;
    background: white;
}

.app_info_comp {
    width: auto;
    height: 70%;
    position: fixed;
    top: 10%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
}

.app_info_comp * {
    color: white;
}

@media screen and (max-width: 1200px) {
    .app_cont, .app_screen_comp, .modal_type_list, .detail_modal,
    .open_admin_modal #admin_modal {
        width: 100% !important;
    }

    .app_info_comp, .no_show_on_mob {
        display: none;
    }

    .toolbar_container {
        position: fixed;
    }

    .fixed_btm {
        position: fixed;
    }

    .fixed_btm_con {
        height: 60px;
    }

    footer{
        bottom: 60px;
    }
}

.refill_title {
    width: 100%;
    height: auto;
}

.refill_title p {
    line-height: 1.5;
}

.refill_title p:nth-of-type(1) {
    margin-top: 2%;
}

.refill_title div {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.refill_title div img {
    object-fit: contain;
    width: 10%;
}

.refill_title h2 {
    font-size: 3vw;
    margin-left: 1vw;
}
/*refill_subtitle*/
.refill_subtitle{
    width:100%;
    height:auto;
    position: relative;
}
.f1_3vw {
    font-size: 1.3vw;
}
.f0_8vw {
    font-size: 0.8vw;
}
.refill_subtitle > p:nth-of-type(2){
    margin-top: 2%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width:max-content;
    margin-left:15%;
}
.refill_subtitle > p:nth-of-type(2) b{
    margin-left:1vw;
    font-size: 1.8vw;
}
.refill_subtitle > p:nth-of-type(3){
    line-height: 1.5;
    margin-top: 3%;
}
.refill_subtitle img{
    width:15%;
    object-fit: contain;
    position: absolute;
    right:15%;
    top:15%;
}
/*refill_adress*/
.refill_address{
    width:100%;
    height:auto;
}
.refill_address span{
    font-weight: bold;
    display: inline-block;
}
.refill_address a{
    padding:0.5vw;
    display: inline-block;
    cursor: pointer;
    background-color: darkblue;
    margin-left:1vw;
}
.refill_address p{
    margin-top: 2%;
    letter-spacing: 0.1vw;
}
.refill_address p:nth-of-type(1){
    font-weight: bold;
}
.fixed_grid {
    display: grid;
    grid-template-rows: 1fr;
}