@charset "utf-8";
@import url(coin.css);
:root {
    --default-color: #222 !important;
    --default-hover-color: #555 !important;
}

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* {
    font-family: 'GmarketSansMedium';
    font-size: 14px;
}

.pointer-events-none {
	pointer-events: none
}

.visible {
	visibility: visible
}

.invisible  {
	visibility: hidden !important
}

.absolute {
	position: absolute
}

.absolute  {
	position: absolute !important
}

.fixed {
	position: fixed
}

.relative,
[relative=""] {
	position: relative
}

.sticky {
	position: sticky
}


.line-clamp-2 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2
}

.line-clamp-3 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3
}


.attend_m.xans-layout-attendbanner {
    display: none;
    margin: 24px 8px;
    background-color: #fff;
    border-radius: 4px;
    overflow: hidden;
}

.attend_m.xans-layout-attendbanner img {
    width: 100%;
}

.left_search {
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
}

.top_search.xans-layout-searchheader {
    margin: 3px 16px;
}

.top_search.xans-layout-searchheader .mobile.btnDelete {
    position: absolute;
    top: 16px;
    right: 53px;
    border-radius: 100%;
    padding: 2px;
}

.xans-layout-searchheader {
    position: relative;
    margin: 16px 2px;
    box-sizing: border-box;
}

.xans-layout-searchheader fieldset {
    border: 2px solid var(--point_color);
    border-radius: 30px;
    background: #fff;
}

.xans-layout-searchheader #keyword {
    width: 72%;
    height: 46px;
    margin: 0 16px 0 20px;
    padding: 0;
    border: 0;
    line-height: 46px;
    font-size: 15px;
    color: #333;
    font-weight: 400;
    background: none;
    outline: none;
    box-sizing: border-box;
}

.xans-layout-searchheader i.xi-search {
    position: absolute;
    top: 11px;
    right: 18px;
    font-size: 27px;
    vertical-align: middle;
    cursor: pointer;
    color: var(--point_color);
}

.popular {
    margin: 0 0 5px 12px;
}

.popular a {
    color: #ababab;
    padding: 0 5px;
    font-size: 14px;
    font-weight: 300;
}

.popular a:hover {
    color: #000;
}

.bestKeyword {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.bestKeyword .tit {
    display: none;
}

.bestKeyword a {
    padding: 7px 21px;
    margin: 2px;
    border-radius: 30px;
    border: 2px solid #ff6723;
    background: #fff;
    display: inline-block;
    font-size: 16px;
    color: #333;
    font-weight: 400;
}

#container {
}



.expand #container {
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
}

.expand #aside {
    z-index: 99;
    overflow-x: hidden;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
}

.dimmed {
    display: none;
    position: fixed;
    left: 0px;
    top: 0;
    right: 0px;
    bottom: 0px;
    z-index: 150;
    background: rgba(0, 0, 0, .4);
}

.dimmed.show {
    display: block;
}

#aside {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0px;
    bottom: 0;
    overflow: auto;
    min-width: 225px;
    max-width: 420px;
    width: 100%;
    background-color: #fff;
    border-right: 1px solid #ddd;
    visibility: visible;
    z-index: 500;
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
}

#aside .top_section {
    padding: 16px;
    border-bottom: 1px solid #eee;
}

#aside .member {
    font-size: 14px;
    font-weight: normal;
}

#aside .member .log_name {
    color: #000;
    font-weight: 500;
}

#aside .member strong {
    color: #000;
}

#aside .member p {
    display: inline-block;
    padding: 0 4px;
    margin: 0 4px 0 0;
    font-size: 16px;
}

#aside .member i {
    font-size: 22px;
    vertical-align: middle;
}

#aside .member span {
    font-size: 14px;
    vertical-align: middle;
    font-weight: bold;
}

#aside .member span.level {
    margin: 0 20px 0 5px;
    font-weight: bold;
}

#aside .member span.level i {
    color: #ff6723;
    margin: 0 5px;
}

#aside .member p a {
    color: #555;
}

#aside .member p.reg a {
    color: #ff6723;
}

#aside .btnClose {
    position: absolute;
    top: 10px;
    right: 18px;
    display: block;
    padding: 8px;
}

#aside .btnClose i {
    font-size: 20px;
    font-weight: 700;
}

#aside .membership {
    padding: 0;
    margin: 8px 0 0;
}

#aside .membership li {
    display: inline-block;
    margin: 0 15px 0 0;
    padding: 0 4px;
    font-size: 13px;
}

#aside .membership li:last-child {
    margin: 0;
}

#aside .membership li a {
    color: #000;
}

#aside .xans-myshop-main {
    margin: 0 14px;
    padding: 16px 0;
    background: #fff;
    border: 0;
    border-bottom: 1px dashed #ddd;
}

#aside .xans-myshop-main::after {
    clear: both;
    content: "";
    display: block;
}

#aside .xans-myshop-main .icon {
    float: left;
    width: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-sizing: border-box;
    -o-sizing: border-box;
    box-sizing: border-box;
}

#aside .xans-myshop-main i {
    display: block;
    font-size: 32px;
    color: #222;
    margin: 0 0 8px;
}

#aside .xans-myshop-main em {
    display: block;
    line-height: 24px;
    font-style: normal;
}

#aside .xans-myshop-main .icon>a {
    display: block;
    color: #333;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
}

#aside .xans-myshop-main .icon>a span {
    font-size: 14px;
    font-weight: bold;
    color: #ff6723;
    display: block;
}

#aside .xans-myshop-main:after {
    content: "";
    display: block;
    clear: both;
}

#aside .cateWrap {
    margin: 10px auto 32px;
}

#aside .categoryCont {
    padding: 0 20px;
}

#aside .side_cs {
    position: relative;
    padding: 16px;
    margin: 0 0 30px;
    border-top: solid 1px #ddd;
    display: none;
}

#aside .side_cs h3 {
    font-size: 14px;
    line-height: 26px;
    color: #222;
    font-weight: 500;
}

#aside .side_cs h3 i {
    font-size: 24px;
    vertical-align: middle;
}

#aside .side_cs .tel {
    font-size: 26px;
    font-weight: 700;
    color: var(--point_color);
}

#aside .side_cs .time {
    font-size: 13px;
    font-weight: 400;
    margin: 4px 0 0;
}

#aside .eventBanner {
    margin: 0 16px 30px;
    margin-top: auto;
}

#aside .eventBanner .event_tit {
    display: none;
}

#slideCateList h2 {
    position: relative;
    padding: 0 34px 0 0;
    line-height: 48px;
    color: #222;
    font-weight: 500;
    font-size: 14px;
    margin: 16px 0 0;
    cursor: pointer;
}

#slideCateList h2.selected {
    font-weight: 500;
}

#slideCateList h2.selected .icoCategory {
    background-image: url("../img/bg_snb_1depth_on.gif");
}

#slideCateList h2 .icoCategory {
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 40px;
    padding: 0;
    border: 0;
    text-indent: 100%;
    white-space: nowrap;
    cursor: pointer;
    background: url("../img/bg_snb_1depth.gif") no-repeat 50% 50%;
    background-size: 30px 18px;
}

#aside .categoryList {
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: 400;
}

#aside .categoryList ul {
    display: none;
}

#aside .categoryList li {
    position: relative;
}

#aside .categoryList li .slideSubMenu {}

#aside .categoryList li:nth-child(2n) .slideSubMenu {
    margin-left: -100% !important;
}

#aside .categoryList li.selected>ul.slideSubMenu {
    display: flex;
    flex-wrap: wrap;
    background: #f7f7f7;
    margin: 0 0 11px;
    border-radius: 3px;
}

#aside .categoryList li .slideSubMenu li {
    flex-basis: 50%;
}

#aside .categoryList li.selected>ul {
    display: block;
    width: 200%;
    position: relative;
    z-index: 5;
}

#aside .categoryList li.selected>a.cate {
    color: var(--point_color);
}

#aside .categoryList li.noChild>a.cate {
    background-image: none !important;
}

#aside .categoryList li.noChild:first-child>a.cate {
    border-top: 0;
}

#aside .categoryList li a.cate img {
    display: inline-block;
    width: 40px;
    margin: 0 10px 0 0;
    border-radius: 6px;
}

#aside .categoryList li.selected.noChild {
    background-color: transparent;
}

#aside .categoryList>li.selected .slideSubMenu li {}

#aside .categoryList>li {
    border-top: 1px solid #fff;
    flex: 1;
    flex-basis: 50%;
}

#aside .categoryList>li>span {}

#aside .categoryList>li:first-child {
    border-top: 0;
}

#aside .categoryList>li>a.cate {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: #222;
}

#aside .categoryList>li>a.cate>i {
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: top;
    border-radius: 3px;
    margin: 0 4px 0 0;
}

#aside .categoryList>li>ul>li>a.cate {
    font-size: 13px;
    line-height: 1.5em;
    font-weight: 400;
    color: #555;
    padding: 12px;
}

#aside .categoryList>li>ul>li>a.view {
    top: 14px;
}

#aside .categoryList>li>ul>li>ul>li>a.cate {
    font-size: 13px;
    color: #555;
    padding-left: 20px;
}

#aside .categoryList>li>ul>li>ul>li>a.view {
    top: 12px;
}

#aside .categoryList>li.selected>ul>li>ul>li>ul {
    width: 100%;
}

#aside .categoryList>li>ul>li>ul>li>ul>li a.cate {
    font-size: 13px;
    padding: 8px 24px;
    color: #555;
}

#aside .categoryList a.cate {
    display: block;
    padding: 10px 20px 10px 0;
    word-wrap: break-word;
}

#aside .categoryList a.view {
    position: absolute;
    right: 24px;
    top: 17px;
    padding: 0 4px;
    line-height: 15px;
    color: #fff;
    font-size: 10px;
    font-weight: 400;
    background: var(--Btn_opacity);
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    border-radius: 30px;
}

#aside .categoryList a.view:hover {
    background: #000;
}

#aside .categoryList li.noChild>a.view {
    display: none;
}

#aside #slideProjectList {
    border-bottom: 1px dashed #eee;
}

#aside #slideCateList .projectCont h2 {
    border-bottom: 0;
}

#aside .projectCont .categoryList {
    display: none;
}

#aside .projectCont .categoryList>li {
    border: 0;
}

#aside .projectCont .categoryList>li>a.cate {
    font-size: 14px;
    font-weight: 400;
    color: #555;
    padding-left: 20px;
}

#aside h2.selected+.boardList {
    display: flex !important;
    flex-wrap: wrap;
    background: #f7f7f7;
    border-radius: 3px;
    padding: 10px 0;
}

#aside .boardList {}

#aside .boardList>li {
    flex-basis: 50%;
}

#aside .boardList>li>a.cate2 {
    display: block;
    padding: 4px 12px;
    word-wrap: break-word;
    font-size: 13px;
    color: #555;
}

#aside .bookmarkCategory {
    font-size: 13px;
}

#aside .bookmarkCategory li {
    position: relative;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #fff;
}

#aside .bookmarkCategory li:first-child {
    border-top: 0;
}

#aside .bookmarkCategory li.selected {
    background-color: #508bed;
}

#aside .bookmarkCategory li a {
    display: block;
    margin-right: 35px;
    padding: 11px 10px 11px 17px;
    word-wrap: break-word;
}

#aside .bookmarkEmpty {
    padding: 8px 0 6px 12px;
    color: #555;
    font-size: 12px;
    line-height: 16px;
    background: #fff;
}

#aside .bookmarkEmpty img {
    width: 11px;
    height: 11px;
    vertical-align: -1px;
}

#aside .xans-layout-category li .icoBookmark,
#aside .bookmarkCategory li .icoBookmark {
    display: none;
    overflow: hidden;
    position: absolute;
    left: -12px;
    top: 0;
    width: 30px;
    height: 41px;
    padding: 0;
    border: 0;
    text-indent: 100%;
    white-space: nowrap;
    background: url("//img.echosting.cafe24.com/skin/mobile_ko_KR/layout/ico_bookmark.png") no-repeat 5px 14px;
    background-size: 13px 13px;
    cursor: pointer;
}

#aside .xans-layout-category li .icoBookmark.selected,
#aside .bookmarkCategory li .icoBookmark.selected {
    display: none;
    background-image: url("//img.echosting.cafe24.com/skin/mobile_ko_KR/layout/ico_bookmark_on.png");
}

#aside .multishop .xans-layout-multishoplistmultioptioncountry li a {
    padding: 9px 10px 11px 17px;
    font-size: 13px;
}

#aside .xans-multishop-listitem {
    position: absolute;
    top: 14px;
    left: 14px;
    font-size: 0;
}

#aside .xans-multishop-listitem li {
    display: inline-block;
    padding: 2px;
    width: 20px;
}

#aside .xans-multishop-listitem li a {
    word-wrap: break-word;
}

#aside .xans-multishop-listitem li a img {
    width: 100%;
}

#content_CONTAINER table,
#bi_inquire_content_CONTAINER table {
    border: 0;
    margin: 0 0 -1px;
}

#content_CONTAINER table:before,
#bi_inquire_content_CONTAINER table:before {
    display: none;
}

#content_CONTAINER td,
#bi_inquire_content_CONTAINER td {
    width: auto !important;
    padding: 0;
}

table.nneditor-table {
    width: auto !important;
}

#progressPaybarBackground {
    position: absolute;
    z-index: 99;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

#progressPaybarView {
    position: absolute;
    z-index: 100;
    top: 160px;
    left: 20px;
    width: 471px;
    font-size: 12px;
}

#progressPaybarView .box {
    height: 180px;
    background: url(//img.cafe24.com/images/ec_hosting/popup/layer_guide/bg_layer_box1.gif) 0 0 no-repeat;
}

#progressPaybarView .box .graph {
    padding: 15px 0 0 0;
    text-align: center;
}

#progressPaybarView .box .graph span {
    display: block;
    text-align: center;
    margin: 20px 0;
}

#progressPaybarView .box .txt {
    text-align: center;
    padding: 15px 0 0;
    color: #555555;
}

div.layerProgress {
    filter: alpha(opacity=40);
    opacity: 0.4;
    -moz-opacity: 0.4;
    background-color: #999;
}

#skipNavigation {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 0;
}

#skipNavigation p,
#skipNavigation ul,
#skipNavigation ul li {
    height: 0;
}

#skipNavigation p a {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin-left: -1px;
    margin-bottom: -1px;
    text-align: center;
    color: #000;
    white-space: nowrap;
}

#skipNavigation p a:focus,
#skipNavigation p a:hover,
#skipNavigation p a:active {
    width: 100%;
    height: auto;
    padding: 10px 0;
    background: #c4122f;
    color: #fff;
    z-index: 100;
}

.displaynone {
    display: none;
}

.dimmed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0.8;
    filter: alpha(opacity=80);
}

body {
    background: url(../img/bg_img.jpg) no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
    height: 100%;
}

#left_wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 320px;
    height: 100%;
    min-height: 660px;
    position: fixed;
    top: 50%;
    right: 52%;
    transform: translateY(-50%);
    box-sizing: border-box;
    margin-right: 300px;
}

#right_wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 320px;
    height: 100%;
    min-height: 660px;
    position: fixed;
    top: 50%;
    left: 52%;
    transform: translateY(-50%);
    box-sizing: border-box;
    margin-left: 300px;
}

#wrap {
    position: relative;
    width: 100%;
    margin: 0 auto 0;
    max-width: 720px;
    min-height: 100vh;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    background-color: #feda48;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 0 60px;
}

#container {
}
#container.sub_page {
    background-color: #feda48;
}
#layout #container {
    padding-top: 10px;
}

#layout_titleArea #container {
    padding: 0;
}

#layout_titleArea #container #container:after {
    content: "";
    display: block;
    clear: both;
}

#sidebar {
    float: left;
    width: 180px;
}

#sidebar .banner {
    padding: 0 0 20px;
    border-bottom: 1px solid #e8e8e8;
}

#sidebar .banner p a {
    display: block;
    position: relative;
    height: 20px;
    margin: 0 0 0 10px;
    padding: 10px 0 10px 25px;
    font-size: 13px;
    font-weight: bold;
    line-height: 20px;
}

#contents {
    max-width: 100%;
    padding: 20px;
    box-sizing: border-box;
    margin: 20px auto 40px auto;
    position: relative;
    color: #333;
    overflow: auto;
    background-color: #111;
}

    @font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* {
    /* font-family: 'GmarketSansMedium'; */
    /* font-size: 14px; */
}

.pointer-events-none {
    pointer-events: none}

.visible {
    visibility: visible}

.invisible
      {
 visibility: hidden !important}

.absolute {
    position: absolute}

.absolute
      {
 position: absolute !important}

.fixed {
    position: fixed}

.relative,
[
    relative=""] {
 position: relative}

.sticky {
    position: sticky}

.sticky
      {
 position: sticky !important}

[
    static=""] {
 position: static}

.-bottom-14 {
    bottom: -3.5rem}

.bottom-
    \$mg {
 bottom: var(--mg)}

.bottom-0 {
    bottom: 0}

.bottom-30px
      {
 bottom: 30px !important}

.left-
    \[50\%\],
.left-50\% {
 left: 50%}

.left-0 {
    left: 0}

.left-10px {
    left: 10px}

.left-13px {
    left: 13px}

.left-60px {
    left: 60px}

.left-65px {
    left: 65px}

.right--10px {
    right: -10px}

.right-
    \$mg {
 right: var(--mg)}

.right-0 {
    right: 0}

.right-10px {
    right: 10px}

.right-24px {
    right: 24px}

.right-30px {
    right: 30px}

.right-4px {
    right: 4px}

.top--10px {
    top: -10px}

.top--40px,
.top-
    \[-40px\] {
 top: -40px}

.top--5px {
    top: -5px}

.top-
    \[-16px\] {
 top: -16px}

.top-
    \[-20px\] {
 top: -20px}

.top-
    \[-24px\] {
 top: -24px}

.top-
    \[-30px\] {
 top: -30px}

.top-
    \[-8px\] {
 top: -8px}

.top-
    \[5\%\] {
 top: 5%}

.top-
    \[50\%\] {
 top: 50%}

.top-
    \[85\%\] {
 top: 85%}

.top-0,
.top-0px {
    top: 0}

.top-100px {
    top: 100px}

.top-10px {
    top: 10px}

.top-130px {
    top: 130px}

.top-14px {
    top: 14px}

.top-20px {
    top: 20px}

.top-30px {
    top: 30px}

.top-34px {
    top: 34px}

.top-36px {
    top: 36px}

.top-40px {
    top: 40px}

.top-45px {
    top: 45px}

.top-48px {
    top: 48px}

.top-4px {
    top: 4px}

.top-50px {
    top: 50px}

.top-51px {
    top: 51px}

.top-52px {
    top: 52px}

.top-54px {
    top: 54px}

.top-57px {
    top: 57px}

.top-5px {
    top: 5px}

.top-60px {
    top: 60px}

.top-70px {
    top: 70px}

.top-71px {
    top: 71px}

.top-80px {
    top: 80px}

.top-83px {
    top: 83px}

.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2}

.line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3}

.z-
    \[100\] {
 z-index: 100}

.z-
    \[9999999999\] {
 z-index: 9999999999}

.z-1,
[
    z-1=""] {
 z-index: 1}

.z-10000 {
    z-index: 10000}

.z-2 {
    z-index: 2}

.z-3 {
    z-index: 3}

.grid,
[
    grid=""] {
 display: grid}

.col-span-5 {
    grid-column: span 5/span 5}

.col-span-7 {
    grid-column: span 7/span 7}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr))}

.grid-cols-12,
[
    grid-cols-12=""] {
 grid-template-columns: repeat(12, minmax(0, 1fr))}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))}

.grid-cols-2
      {
 grid-template-columns: repeat(2, minmax(0, 1fr)) !important}

.grid-cols-3,
[
    grid-cols-3=""] {
 grid-template-columns: repeat(3, minmax(0, 1fr))}

.grid-cols-3
      {
 grid-template-columns: repeat(3, minmax(0, 1fr)) !important}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))}

.grid-cols-4
      {
 grid-template-columns: repeat(4, minmax(0, 1fr)) !important}

.grid-cols-5,
[
    grid-cols-5=""] {
 grid-template-columns: repeat(5, minmax(0, 1fr))}

.float-left {
    float: left}

.clear-both {
    clear: both}

.m-
    \$mg {
 margin: var(--mg)}

.m-10px {
    margin: 10px}

.m-16px {
    margin: 16px}

.m176 {
    margin: 44rem}

.m181
    \.66 {
 margin: 45.415rem}

.mx-
    \[-10px\] {
 margin-left: -10px;
    margin-right: -10px}

.mx-
    \[-16px\] {
 margin-left: -16px;
    margin-right: -16px}

.mx-
    \[-18px\] {
 margin-left: -18px;
    margin-right: -18px}

.mx-
    \$mg {
 margin-left: var(--mg);
    margin-right: var(--mg)}

.mx-
    \$mg  {
 margin-left: var(--mg) !important;
    margin-right: var(--mg) !important}

.mx-10px {
    margin-left: 10px;
    margin-right: 10px}

.mx-11px {
    margin-left: 11px;
    margin-right: 11px}

.mx-16px {
    margin-left: 16px;
    margin-right: 16px}

.mx-2 {
    margin-left: .5rem;
    margin-right: .5rem}

.mx-20px {
    margin-left: 20px;
    margin-right: 20px}

.mx-3 {
    margin-left: .75rem;
    margin-right: .75rem}

.mx-4,
[
    mx-4=""] {
 margin-left: 1rem;
    margin-right: 1rem}

.mx-4px {
    margin-left: 4px;
    margin-right: 4px}

.mx-5px,
[
    mx-5px=""] {
 margin-left: 5px;
    margin-right: 5px}

.mx-8px {
    margin-left: 8px;
    margin-right: 8px}

.mx-auto,
[
    mx-auto=""] {
 margin-left: auto;
    margin-right: auto}

.my-
    \$mg {
 margin-top: var(--mg);
    margin-bottom: var(--mg)}

.my-
    \$mg  {
 margin-top: var(--mg) !important;
    margin-bottom: var(--mg) !important}

.my-0px
    ,
[my-0px=""] {
 margin-top: 0 !important;
    margin-bottom: 0 !important}

.my-1 {
    margin-top: .25rem;
    margin-bottom: .25rem}

.my-10px {
    margin-top: 10px;
    margin-bottom: 10px}

.my-11px {
    margin-top: 11px;
    margin-bottom: 11px}

.my-12px {
    margin-top: 12px;
    margin-bottom: 12px}

.my-15px
      {
 margin-top: 15px !important;
    margin-bottom: 15px !important}

.my-16px {
    margin-top: 16px;
    margin-bottom: 16px}

.my-18px {
    margin-top: 18px;
    margin-bottom: 18px}

.my-2 {
    margin-top: .5rem;
    margin-bottom: .5rem}

.my-20px {
    margin-top: 20px;
    margin-bottom: 20px}

.my-21px {
    margin-top: 21px;
    margin-bottom: 21px}

.my-2px {
    margin-top: 2px;
    margin-bottom: 2px}

.my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem}

.my-5 {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem}

.my-5px {
    margin-top: 5px;
    margin-bottom: 5px}

.my-6px {
    margin-top: 6px;
    margin-bottom: 6px}

.my-8 {
    margin-top: 2rem;
    margin-bottom: 2rem}

.my-8px {
    margin-top: 8px;
    margin-bottom: 8px}

[
    my-11px~="default:"]:default {
 margin-top: 11px;
    margin-bottom: 11px}

.-mt-20px {
    margin-top: -20px}

.-mt-6 {
    margin-top: -1.5rem}

.important-mt-0px,
.mt-0
    ,
[important-mt-0px=""],
[mt-0=""] {
 margin-top: 0 !important}

.important-mt-25px,
[
    important-mt-25px=""] {
 margin-top: 25px !important}

.mb--2 {
    margin-bottom: -.5rem}

.mb-
    \[2px\],
.mb-2px {
 margin-bottom: 2px}

.mb-
    \$mg {
 margin-bottom: var(--mg)}

.mb-1 {
    margin-bottom: .25rem}

.mb-10px {
    margin-bottom: 10px}

.mb-11px {
    margin-bottom: 11px}

.mb-12px {
    margin-bottom: 12px}

.mb-14px {
    margin-bottom: 14px}

.mb-16px {
    margin-bottom: 16px}

.mb-16px
      {
 margin-bottom: 16px !important}

.mb-17px {
    margin-bottom: 17px}

.mb-18px {
    margin-bottom: 18px}

.mb-2 {
    margin-bottom: .5rem}

.mb-20px {
    margin-bottom: 20px}

.mb-25px {
    margin-bottom: 25px}

.mb-3 {
    margin-bottom: .75rem}

.mb-32px {
    margin-bottom: 32px}

.mb-4 {
    margin-bottom: 1rem}

.mb-4px {
    margin-bottom: 4px}

.mb-50px {
    margin-bottom: 50px}

.mb-5px {
    margin-bottom: 5px}

.mb-7,
[
    mb-7=""] {
 margin-bottom: 1.75rem}

.mb-8px,
[
    mb-8px=""] {
 margin-bottom: 8px}

.mb-9 {
    margin-bottom: 2.25rem}

.ml--2 {
    margin-left: -.5rem}

.ml-
    \[calc\(var\(--mg\)\*-1\)\] {
 margin-left: calc(var(--mg) * -1)}

.ml-
    \$mg {
 margin-left: var(--mg)}

.ml-0
      {
 margin-left: 0 !important}

.ml-1,
[
    ml-1=""] {
 margin-left: .25rem}

.ml-10px {
    margin-left: 10px}

.ml-11px {
    margin-left: 11px}

.ml-16px {
    margin-left: 16px}

.ml-2 {
    margin-left: .5rem}

.ml-20px {
    margin-left: 20px}

.ml-22px {
    margin-left: 22px}

.ml-2px {
    margin-left: 2px}

.ml-3 {
    margin-left: .75rem}

.ml-3px {
    margin-left: 3px}

.ml-4 {
    margin-left: 1rem}

.ml-4px,
[
    ml-4px=""] {
 margin-left: 4px}

.ml-50
    \%,
[ml-50\%=""] {
 margin-left: 50%}

.ml-5px {
    margin-left: 5px}

.ml-6px {
    margin-left: 6px}

.ml-8px {
    margin-left: 8px}

.ml-auto {
    margin-left: auto}

.mr--2 {
    margin-right: -.5rem}

.mr-
    \$mg {
 margin-right: var(--mg)}

.mr-0
      {
 margin-right: 0 !important}

.mr-1 {
    margin-right: .25rem}

.mr-100px {
    margin-right: 100px}

.mr-10px,
[
    mr-10px=""] {
 margin-right: 10px}

.mr-11px {
    margin-right: 11px}

.mr-16px {
    margin-right: 16px}

.mr-2,
[
    mr-2=""] {
 margin-right: .5rem}

.mr-20px {
    margin-right: 20px}

.mr-21px {
    margin-right: 21px}

.mr-22px {
    margin-right: 22px}

.mr-24 {
    margin-right: 6rem}

.mr-2px {
    margin-right: 2px}

.mr-3 {
    margin-right: .75rem}

.mr-30px {
    margin-right: 30px}

.mr-3px {
    margin-right: 3px}

.mr-4 {
    margin-right: 1rem}

.mr-4px {
    margin-right: 4px}

.mr-4px
      {
 margin-right: 4px !important}

.mr-5px {
    margin-right: 5px}

.mr-6px {
    margin-right: 6px}

.mr-8px,
[
    mr-8px=""] {
 margin-right: 8px}

.mr-9px {
    margin-right: 9px}

.ms {
    margin-inline-start: 1rem}

.mt-
    \[-8px\] {
 margin-top: -8px}

.mt-
    \$mg {
 margin-top: var(--mg)}

.mt-
    \$mg  {
 margin-top: var(--mg) !important}

.mt-
    \$mt {
 margin-top: var(--mt)}

.mt-
    \$mt  {
 margin-top: var(--mt) !important}

.mt-0px {
    margin-top: 0}

.mt-1 {
    margin-top: .25rem}

.mt-10px,
[
    mt-10px=""] {
 margin-top: 10px}

.mt-10px
    ,
[mt-10px=""] {
 margin-top: 10px !important}

.mt-11px {
    margin-top: 11px}

.mt-11px
      {
 margin-top: 11px !important}

.mt-12px,
[
    mt-12px=""] {
 margin-top: 12px}

.mt-12px
      {
 margin-top: 12px !important}

.mt-14px {
    margin-top: 14px}

.mt-15px,
[
    mt-15px=""] {
 margin-top: 15px}

.mt-15px
      {
 margin-top: 15px !important}

.mt-16px,
[
    mt-16px=""] {
 margin-top: 16px}

.mt-16px
    ,
[mt-16px=""] {
 margin-top: 16px !important}

.mt-19px {
    margin-top: 19px}

.mt-2,
[
    mt-2=""] {
 margin-top: .5rem}

.mt-20px,
[
    mt-20px=""] {
 margin-top: 20px}

.mt-20px
    ,
[mt-20px=""] {
 margin-top: 20px !important}

.mt-23px {
    margin-top: 23px}

.mt-24px {
    margin-top: 24px}

.mt-24px
      {
 margin-top: 24px !important}

.mt-25px {
    margin-top: 25px}

.mt-26px {
    margin-top: 26px}

.mt-27px {
    margin-top: 27px}

.mt-2px {
    margin-top: 2px}

.mt-3,
[
    mt-3=""] {
 margin-top: .75rem}

.mt-30px,
[
    mt-30px=""] {
 margin-top: 30px}

.mt-30px
      {
 margin-top: 30px !important}

.mt-31px {
    margin-top: 31px}

.mt-3px {
    margin-top: 3px}

.mt-4,
[
    mt-4=""] {
 margin-top: 1rem}

.mt-4
    ,
[mt=""] {
 margin-top: 1rem !important}

.mt-40px,
[
    mt-40px=""] {
 margin-top: 40px}

.mt-40px
      {
 margin-top: 40px !important}

.mt-44px {
    margin-top: 44px}

.mt-4px {
    margin-top: 4px}

.mt-5 {
    margin-top: 1.25rem}

.mt-50px {
    margin-top: 50px}

.mt-50px
      {
 margin-top: 50px !important}

.mt-57px {
    margin-top: 57px}

.mt-5px,
[
    mt-5px=""] {
 margin-top: 5px}

.mt-5px
      {
 margin-top: 5px !important}

.mt-6,
[
    mt-6=""] {
 margin-top: 1.5rem}

.mt-60px {
    margin-top: 60px}

.mt-60px
      {
 margin-top: 60px !important}

.mt-6px {
    margin-top: 6px}

.mt-7px {
    margin-top: 7px}

.mt-8
      {
 margin-top: 2rem !important}

.mt-80px {
    margin-top: 80px}

.mt-8px,
[
    mt-8px=""] {
 margin-top: 8px}

.mt-8px
      {
 margin-top: 8px !important}

[
    important-mt-25px~="default:"]:default {
 margin-top: 25px !important}

[
    mb-10px~="default:"]:default {
 margin-bottom: 10px}

[
    mb-11px~="default:"]:default {
 margin-bottom: 11px}

[
    mt-11px~="default:"]:default {
 margin-top: 11px}


[
    mt-16px~="default:"]:default {
 margin-top: 16px}

[
    mt-19px~="default:"]:default {
 margin-top: 19px}


[
    mt-20px~="default:"]:default {
 margin-top: 20px}

[
    mt-31px~="default:"]:default {
 margin-top: 31px}

.first
    \:mt-2:first-child {
 margin-top: .5rem}

.last
    \:mb-0:last-child {
 margin-bottom: 0}

.box-border {
    box-sizing: border-box}

.box-border
      {
 box-sizing: border-box !important}

.block,
[
    block=""] {
 display: block}

.inline-block,
[
    inline-block=""] {
 display: inline-block}

.hidden {
    display: none}

.after
    \:hidden:after {
 display: none}

[
    after\:hidden=""]:after {
 display: none}

[
    size~="13px"] {
 width: 13px;
    height: 13px}

[
    size~="15px"] {
 width: 15px;
    height: 15px}

.h-
    \[120px\],
.h-120px {
 height: 120px}

.h-
    \[14px\],
.h-14px {
 height: 14px}

.h-
    \[calc\(100\%-120px\)\] {
 height: calc(100% - 120px)}

.h-
    \[calc\(100\%-20px\)\] {
 height: calc(100% - 20px)}

.h-
    \[calc\(100vh-200px\)\] {
 height: calc(100vh - 200px)}

.h-
    \[calc\(100vh-480px\)\] {
 height: calc(100vh - 480px)}

.h-
    \[calc\(var\(--vh\)\*100-44px\)\] {
 height: calc(var(--vh) * 100 - 44px)}

.h-1,
.h1,
[
    h-1=""] {
 height: .25rem}

.h-10,
[
    h-10=""] {
 height: 2.5rem}

.h-100
    \%,
.h-full,
[h-full=""] {
 height: 100%}

.h-100px {
    height: 100px}

.h-100vh {
    height: 100vh}

.h-105px {
    height: 105px}

.h-106px {
    height: 106px}

.h-108px {
    height: 108px}

.h-10px {
    height: 10px}

.h-110px {
    height: 110px}

.h-12,
[
    h-12=""] {
 height: 3rem}

.h-12px {
    height: 12px}

.h-139px,
[
    h-139px=""] {
 height: 139px}

.h-140px {
    height: 140px}

.h-150px {
    height: 150px}

.h-15px {
    height: 15px}

.h-16 {
    height: 4rem}

.h-160px {
    height: 160px}

.h-164px {
    height: 164px}

.h-167px {
    height: 167px}

.h-16px {
    height: 16px}

.h-170px {
    height: 170px}

.h-17px {
    height: 17px}

.h-180px {
    height: 180px}

.h-18px {
    height: 18px}

.h-19px {
    height: 19px}

.h-1px {
    height: 1px}

.h-2,
.h2,
[
    h-2=""] {
 height: .5rem}

.h-200px {
    height: 200px}

.h-209px
      {
 height: 209px !important}

.h-20px,
[
    h-20px=""] {
 height: 20px}

.h-22px {
    height: 22px}

.h-23px {
    height: 23px}

.h-24 {
    height: 6rem}

.h-242px {
    height: 242px}

.h-24px {
    height: 24px}

.h-25px {
    height: 25px}

.h-26
    \.48px {
 height: 26.48px}

.h-26px {
    height: 26px}

.h-28 {
    height: 7rem}

.h-28px {
    height: 28px}

.h-2px {
    height: 2px}

.h-3
    \.5 {
 height: .875rem}

.h-30px,
[
    h-30px=""] {
 height: 30px}

.h-31px {
    height: 31px}

.h-32
    \.26px {
 height: 32.26px}

.h-32px,
[
    h-32px=""] {
 height: 32px}

.h-32px
      {
 height: 32px !important}

.h-33px,
[
    h-33px=""] {
 height: 33px}

.h-34px,
[
    h-34px=""] {
 height: 34px}

.h-34px
      {
 height: 34px !important}

.h-35px,
[
    h-35px=""] {
 height: 35px}

.h-36
    \.42px {
 height: 36.42px}

.h-36px,
[
    h-36px=""] {
 height: 36px}

.h-36px
      {
 height: 36px !important}

.h-37
    \.53px {
 height: 37.53px}

.h-37px,
[
    h-37px=""] {
 height: 37px}

.h-37px
      {
 height: 37px !important}

.h-38px {
    height: 38px}

.h-39px
      {
 height: 39px !important}

.h-4 {
    height: 1rem}

.h-400px {
    height: 400px}

.h-40px {
    height: 40px}

.h-40px
    ,
[h-40px=""] {
 height: 40px !important}

.h-42px,
[
    h-42px=""] {
 height: 42px}

.h-42px
      {
 height: 42px !important}

.h-44 {
    height: 11rem}

.h-44px {
    height: 44px}

.h-45px {
    height: 45px}

.h-46px {
    height: 46px}

.h-48px {
    height: 48px}

.h-4px {
    height: 4px}

.h-5,
[
    h-5=""] {
 height: 1.25rem}

.h-50
    \% {
 height: 50%}

.h-50px {
    height: 50px}

.h-51px,
[
    h-51px=""] {
 height: 51px}

.h-52px {
    height: 52px}

.h-53px {
    height: 53px}

.h-54px,
[
    h-54px=""] {
 height: 54px}

.h-56 {
    height: 14rem}

.h-56px {
    height: 56px}

.h-5px {
    height: 5px}

.h-6,
[
    h-6=""] {
 height: 1.5rem}

.h-60 {
    height: 15rem}

.h-60px,
[
    h-60px=""] {
 height: 60px}

.h-64 {
    height: 16rem}

.h-64px {
    height: 64px}

.h-65px {
    height: 65px}

.h-66px {
    height: 66px}

.h-67px {
    height: 67px}

.h-68px {
    height: 68px}

.h-70px {
    height: 70px}

.h-72px {
    height: 72px}

.h-77px {
    height: 77px}

.h-8 {
    height: 2rem}

.h-80px {
    height: 80px}

.h-84px {
    height: 84px}

.h-85px
      {
 height: 85px !important}

.h-89px {
    height: 89px}

.h-90
    \%,
[h-90\%=""] {
 height: 90%}

.h-90px {
    height: 90px}

.h-99px {
    height: 99px}

.h-9px {
    height: 9px}

.h-auto {
    height: auto}

.h3 {
    height: .75rem}

.max-h-130px {
    max-height: 130px}

.max-h-160px {
    max-height: 160px}

.max-h-160px
      {
 max-height: 160px !important}

.max-h-280px {
    max-height: 280px}

.max-h-350px {
    max-height: 350px}

.max-h-40px {
    max-height: 40px}

.max-h-44px {
    max-height: 44px}

.max-h-46px {
    max-height: 46px}

.max-h-50px {
    max-height: 50px}

.max-w-
    \$maxWidth {
 max-width: var(--maxWidth)}

.max-w-120px {
    max-width: 120px}

.max-w-150px {
    max-width: 150px}

.max-w-200px {
    max-width: 200px}

.max-w-300px
      {
 max-width: 300px !important}

.max-w-360px {
    max-width: 360px}

.max-w-420px {
    max-width: 420px}

.max-w-44px {
    max-width: 44px}

.max-w-46px {
    max-width: 46px}

.max-w-720px {
    max-width: 720px}

.max-w-80
    \% {
 max-width: 80%}

.max-w-88px {
    max-width: 88px}

.max-w-90
    \% {
 max-width: 90%}

.max-w-95
    \% {
 max-width: 95%}

.max-w-sm {
    max-width: 24rem}

.max-w-xs {
    max-width: 20rem}

.min-h-
    \[500px\] {
 min-height: 500px}

.min-h-100vh {
    min-height: 100vh}

.min-h-250px {
    min-height: 250px}

.min-h-40px {
    min-height: 40px}

.min-h-44px
      {
 min-height: 44px !important}

.min-h-full {
    min-height: 100%}

.min-w-150px {
    min-width: 150px}

.min-w-200px {
    min-width: 200px}

.min-w-46px {
    min-width: 46px}

.min-w-50px {
    min-width: 50px}

.min-w-80px {
    min-width: 80px}

.w-
    \[120px\],
.w-120px {
 width: 120px}

.w-
    \[70\%\],
.w-70\% {
 width: 70%}

.w-
    \[80\%\],
.w-80\% {
 width: 80%}

.w-
    \[calc\(\(100\%-30px\)\/2\)\] {
 width: calc((100% - 30px)/2)}

.w-
    \[calc\(100\%-106px\)\] {
 width: calc(100% - 106px)}

.w-
    \[calc\(100\%-130px\)\] {
 width: calc(100% - 130px)}

.w-
    \[calc\(100\%-150px\)\] {
 width: calc(100% - 150px)}

.w-
    \[calc\(100\%-20px\)\] {
 width: calc(100% - 20px)}

.w-
    \[calc\(100\%-34px\)\] {
 width: calc(100% - 34px)}

.w-
    \[calc\(100\%-90px\)\] {
 width: calc(100% - 90px)}

.w-
    \[calc\(100\%\+2\*var\(--mg\)\)\] {
 width: calc(100% + 2 * var(--mg))}

.w-
    \[calc\(100\%\+32px\)\] {
 width: calc(100% + 32px)}

.w-
    \[calc\(100\%\+36px\)\] {
 width: calc(100% + 36px)}

.w-
    \[calc\(100\%\+var\(--mg\)\*2\)\] {
 width: calc(100% + var(--mg) * 2)}

.w-1,
[
    w-1=""] {
 width: .25rem}

.w-1
    \/2,
.w-50\% {
 width: 50%}

.w-10,
[
    w-10=""] {
 width: 2.5rem}

.w-100
    \%,
.w-full,
[w-full=""] {
 width: 100%}

.w-100px {
    width: 100px}

.w-104px {
    width: 104px}

.w-106px {
    width: 106px}

.w-10px {
    width: 10px}

.w-114px {
    width: 114px}

.w-117px {
    width: 117px}

.w-12,
[
    w-12=""] {
 width: 3rem}

.w-12px {
    width: 12px}

.w-130px {
    width: 130px}

.w-14 {
    width: 1.5rem;
}

.w-140px {
    width: 140px}

.w-141px {
    width: 141px}

.w-14px {
    width: 14px}

.w-150px {
    width: 150px}

.w-15px {
    width: 15px}

.w-16 {
    width: 4rem}

.w-160px {
    width: 160px}

.w-164px {
    width: 164px}

.w-165px {
    width: 165px}

.w-167px {
    width: 167px}

.w-16px {
    width: 16px}

.w-17px {
    width: 17px}

.w-18px,
.w18px {
    width: 18px}

.w-190px {
    width: 190px}

.w-19px,
[
    w-19px=""] {
 width: 19px}

.w-2,
[
    w-2=""] {
 width: .5rem}

.w-2
    \/3 {
 width: 66.6666666667%}

.w-200px {
    width: 200px}

.w-20px,
[
    w-20px=""] {
 width: 20px}

.w-21px {
    width: 21px}

.w-22px {
    width: 22px}

.w-238px {
    width: 238px}

.w-23px {
    width: 23px}

.w-24 {
    width: 6rem}

.w-242px {
    width: 242px}

.w-24px {
    width: 24px}

.w-250px {
    width: 250px}

.w-25px {
    width: 25px}

.w-26
    \.48px {
 width: 26.48px}

.w-263px
      {
 width: 263px !important}

.w-26px {
    width: 26px}

.w-28
    \.67px {
 width: 28.67px}

.w-280px {
    width: 280px}

.w-28px {
    width: 28px}

.w-3
    \.5 {
 width: .875rem}

.w-30
    \%,
[w-30\%=""] {
 width: 30%}

.w-300px {
    width: 300px}

.w-30px,
[
    w-30px=""] {
 width: 30px}

.w-31px {
    width: 31px}

.w-32px {
    width: 32px}

.w-32px
      {
 width: 32px !important}

.w-33
    \% {
 width: 33%}

.w-34px {
    width: 34px}

.w-34px
      {
 width: 34px !important}

.w-36
    \.42px {
 width: 36.42px}

.w-36px,
[
    w-36px=""] {
 width: 36px}

.w-36px
      {
 width: 36px !important}

.w-37
    \.53px {
 width: 37.53px}

.w-37px {
    width: 37px}

.w-37px
      {
 width: 37px !important}

.w-38px {
    width: 38px}

.w-390px {
    width: 390px}

.w-39px
      {
 width: 39px !important}

.w-3px {
    width: 3px}

.w-4 {
    width: 1rem}

.w-40
    \% {
 width: 40%}

.w-40px {
    width: 40px}

.w-42px {
    width: 42px}

.w-44px {
    width: 44px}

.w-45px {
    width: 45px}

.w-46px {
    width: 46px}

.w-47px {
    width: 47px}

.w-48px {
    width: 48px}

.w-5,
[
    w-5=""] {
 width: 1.25rem}

.w-5
    \% {
 width: 5%}

.w-50px {
    width: 50px}

.w-52px {
    width: 52px}

.w-53px {
    width: 53px}

.w-54px {
    width: 54px}

.w-55px {
    width: 55px}

.w-5px {
    width: 5px}

.w-6 {
    width: 1.5rem}

.w-60px {
    width: 60px}

.w-62px {
    width: 62px}

.w-64px {
    width: 64px}

.w-66
    \.23px {
 width: 66.23px}

.w-66px {
    width: 66px}

.w-70px {
    width: 70px}

.w-77px {
    width: 77px}

.w-78px {
    width: 78px}

.w-7px {
    width: 7px}

.w-8 {
    width: 2rem}

.w-80
    \%,
[w-80\%=""] {
 width: 80% !important}

.w-80px,
[
    w-80px=""] {
 width: 80px}

.w-80vw {
    width: 80vw}

.w-84px {
    width: 84px}

.w-85px
      {
 width: 85px !important}

.w-88px {
    width: 88px}

.w-90
    \% {
 width: 90%}

.w-90
    \%  {
 width: 90% !important}

.w-90px {
    width: 90px}

.w-99px {
    width: 99px}

.w-auto {
    width: auto}

.w-full
    ,
[w-full=""] {
 width: 100% !important}

.w
    \[t\] {
 width: t}



[
    w-full~="default:"]:default {
 width: 100%}


.flex,
[
    flex=""] {
 display: flex}

.flex
      {
 display: flex !important}

.inline-flex {
    display: inline-flex}

.flex-1 {
    flex: 1 1 0%}

.flex-shrink,
.shrink,
.shrink-o,
[
    shrink=""] {
 flex-shrink: 1}

.flex-shrink-0,
.shrink-0,
[
    flex-shrink-0=""],
[shrink-0=""] {
 flex-shrink: 0}

.flex-grow {
    flex-grow: 1}

.flex-col,
[
    flex-col=""] {
 flex-direction: column}

.flex-wrap,
[
    flex-wrap=""] {
 flex-wrap: wrap}

.flex-nowrap {
    flex-wrap: nowrap}

.translate--50
    \% {
 --un-translate-x: -50%;
    --un-translate-y: -50%;
    transform: translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}

.-translate-y-4 {
    --un-translate-y: -1rem;
    transform: translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}

.translate-x-
    \[-16px\] {
 --un-translate-x: -16px;
    transform: translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}

.translate-x-
    \[-50\%\] {
 --un-translate-x: -50%;
    transform: translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}

.translate-x-
    \[-51\%\] {
 --un-translate-x: -51%;
    transform: translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}

.translate-y-
    \[-50\%\] {
 --un-translate-y: -50%;
    transform: translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}

.rotate-90 {
    --un-rotate-x: 0;
    --un-rotate-y: 0;
    --un-rotate-z: 0;
    --un-rotate: 90deg;
    transform: translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}

.transform,
[
    transform=""] {
 transform: translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}
    @keyframes bounce {

 0%,
 to {
  transform: translateY(-25%);
    animation-timing-function: cubic-bezier(.8, 0, 1, 1)}

 50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, .2, 1)}
}

.animate-bounce {
    animation: bounce 1s linear infinite}

.cursor-pointer,
[
    cursor-pointer=""] {
 cursor: pointer}

.resize {
    resize: both}

.items-start {
    align-items: flex-start}

.items-end {
    align-items: flex-end}

.items-center,
[
    items-center=""] {
 align-items: center;
    text-align: center;
}

.justify-start {
    justify-content: flex-start}

.justify-end,
[
    justify-end=""] {
 justify-content: flex-end}

.justify-center,
[
    justify-center=""] {
 justify-content: center}

.justify-between,
[
    justify-between=""] {
 justify-content: space-between}

[
    justify-between~="default:"]:default {
 justify-content: space-between}

.gap-1 {
    gap: .25rem}

.gap-10px {
    gap: 10px}

.gap-2,
[
    gap-2=""] {
 gap: .8rem;
}

.gap-20px {
    gap: 20px}

.gap-21px {
    gap: 21px}

.gap-3,
[
    gap-3=""] {
 gap: .75rem}

.gap-4 {
    gap: 1rem}

.gap-4px {
    gap: 4px}

.gap-5 {
    gap: 1.25rem}

.gap-5px {
    gap: 5px}

.gap-8px {
    gap: 8px}

.gap-9 {
    gap: 2.25rem}

[
    gap~="10"] {
 gap: 2.5rem}

.gap-x-1 {
    column-gap: .25rem}

.gap-col-10px,
.gap-x-10px {
    column-gap: 10px}

.gap-col-2,
.gap-x-2 {
    column-gap: .5rem}

.gap-y-1
    \.5 {
 row-gap: .375rem}

.gap-y-10px {
    row-gap: 10px}

.gap-y-14px {
    row-gap: 14px}

.gap-row-4 {
    row-gap: 1rem}

.space-x-1>:not([
    hidden])~:not([hidden]) {
 --un-space-x-reverse: 0;
    margin-left: calc(.25rem * calc(1 - var(--un-space-x-reverse)));
    margin-right: calc(.25rem * var(--un-space-x-reverse))}

.space-x-2>:not([
    hidden])~:not([hidden]) {
 --un-space-x-reverse: 0;
    margin-left: calc(.5rem * calc(1 - var(--un-space-x-reverse)));
    margin-right: calc(.5rem * var(--un-space-x-reverse))}

.space-y-1
    \.5>:not([hidden])~:not([hidden]) {
 --un-space-y-reverse: 0;
    margin-top: calc(.375rem * calc(1 - var(--un-space-y-reverse)));
    margin-bottom: calc(.375rem * var(--un-space-y-reverse))}

.space-y-1>:not([
    hidden])~:not([hidden]) {
 --un-space-y-reverse: 0;
    margin-top: calc(.25rem * calc(1 - var(--un-space-y-reverse)));
    margin-bottom: calc(.25rem * var(--un-space-y-reverse))}

.space-y-2>:not([
    hidden])~:not([hidden]) {
 --un-space-y-reverse: 0;
    margin-top: calc(.5rem * calc(1 - var(--un-space-y-reverse)));
    margin-bottom: calc(.5rem * var(--un-space-y-reverse))}

.space-y-3>:not([
    hidden])~:not([hidden]) {
 --un-space-y-reverse: 0;
    margin-top: calc(.75rem * calc(1 - var(--un-space-y-reverse)));
    margin-bottom: calc(.75rem * var(--un-space-y-reverse))}

.space-y-4>:not([
    hidden])~:not([hidden]) {
 --un-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--un-space-y-reverse)));
    margin-bottom: calc(1rem * var(--un-space-y-reverse))}

.divide-y>:not([
    hidden])~:not([hidden]) {
 --un-divide-y-reverse: 0;
    border-top-width: calc(1px * calc(1 - var(--un-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--un-divide-y-reverse))}

.divide-
    \[\#47484B\]>:not([hidden])~:not([hidden]) {
 --un-divide-opacity: 1;
    border-color: rgb(71 72 75 / var(--un-divide-opacity))}

.overflow-auto {
    overflow: auto}

.overflow-hidden {
    overflow: hidden}

.overflow-x-hidden {
    overflow-x: hidden}

.overflow-x-hidden
      {
 overflow-x: hidden !important}

.overflow-y-auto {
    overflow-y: auto}

.overflow-y-auto
      {
 overflow-y: auto !important}

.text-truncate,
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap}

.break-words {
    overflow-wrap: break-word}

.break-all {
    word-break: break-all}

.b-1px,
.border,
.border-1,
.border-1px,
[
    b=""],
[border=""] {
 border-width: 1px}

.border-0
      {
 border-width: 0px !important}

.border-2 {
    border-width: 2px}

.border-5px,
[
    border-5px=""] {
 border-width: 5px}

.border
      {
 border-width: 1px !important}

.border-b,
[
    border-b=""] {
 border-bottom-width: 1px}

.border-b-1px
      {
 border-bottom-width: 1px !important}

.border-b-2px {
    border-bottom-width: 2px}

.border-b-2px
      {
 border-bottom-width: 2px !important}

.border-l {
    border-left-width: 1px}

.border-t {
    border-top-width: 1px}

.last
    \:border-b-0:last-child {
 border-bottom-width: 0px}


.b-
    \$btn-text,
.border-\$btn-text {
 border-color: var(--btn-text)}

.border-
    \#232323 {
 --un-border-opacity: 1;
    border-color: rgb(35 35 35 / var(--un-border-opacity))}

.border-
    \#2b3139 {
 --un-border-opacity: 1;
    border-color: rgb(43 49 57 / var(--un-border-opacity))}

.border-
    \#3a3a3c {
 --un-border-opacity: 1;
    border-color: rgb(58 58 60 / var(--un-border-opacity))}

.border-
    \#3a495c {
 --un-border-opacity: 1;
    border-color: rgb(58 73 92 / var(--un-border-opacity))}

.border-
    \#4e5167 {
 --un-border-opacity: 1;
    border-color: rgb(78 81 103 / var(--un-border-opacity))}

.border-
    \#86909C {
 --un-border-opacity: 1;
    border-color: rgb(134 144 156 / var(--un-border-opacity))}

.border-
    \#ABBF42 {
 --un-border-opacity: 1;
    border-color: rgb(171 191 66 / var(--un-border-opacity))}

.border-
    \#cacbd2 {
 --un-border-opacity: 1;
    border-color: rgb(202 203 210 / var(--un-border-opacity))}

.border-
    \#EAC369 {
 --un-border-opacity: 1;
    border-color: rgb(234 195 105 / var(--un-border-opacity))}

.border-
    \#f0f0f0 {
 --un-border-opacity: 1;
    border-color: rgb(240 240 240 / var(--un-border-opacity))}

.border-
    \#f59a23 {
 --un-border-opacity: 1;
    border-color: rgb(245 154 35 / var(--un-border-opacity))}

.border-
    \#fff,
.border-white {
 --un-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--un-border-opacity))}

.border-
    \$bg-weight {
 border-color: var(--bg-weight)}

.border-
    \$border-color {
 border-color: var(--border-color)}

.border-
    \$border-color  {
 border-color: var(--border-color) !important}

.border-
    \$border-color2 {
 border-color: var(--border-color2)}

.border-
    \$border-color2  {
 border-color: var(--border-color2) !important}

.border-
    \$btn-bg4 {
 border-color: var(--btn-bg4)}

.border-
    \$btn-text2 {
 border-color: var(--btn-text2)}

.border-
    \$main-text {
 border-color: var(--main-text)}

.border-
    \$primary {
 border-color: var(--primary)}

.border-
    \$primary  {
 border-color: var(--primary) !important}

.border-
    \$text-gary {
 border-color: var(--text-gary)}

.border-
    \$text-gray {
 border-color: var(--text-gray)}

.border-
    \$text-gray  {
 border-color: var(--text-gray) !important}

.border-
    \$text-gray6 {
 border-color: var(--text-gray6)}

.border-
    \$text-gray6  {
 border-color: var(--text-gray6) !important}

.border-blue-100 {
    --un-border-opacity: 1;
    border-color: rgb(219 234 254 / var(--un-border-opacity))}

.border-gray-100 {
    --un-border-opacity: 1;
    border-color: rgb(243 244 246 / var(--un-border-opacity))}

.border-gray-200 {
    --un-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--un-border-opacity))}

.border-gray-300 {
    --un-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--un-border-opacity))}

.border-gray-600 {
    --un-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--un-border-opacity))}

.border-gray-700 {
    --un-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--un-border-opacity))}

.rd,
.rounded,
[
    rounded=""] {
 border-radius: .25rem}

.rd-
    \$-card-radius {
 border-radius: var(---card-radius)}

.rd-
    \$card-radius,
.rounded-\[var\(--card-radius\)\],
.rounded-\$card-radius {
 border-radius: var(--card-radius)}

.rd-
    \$radiud {
 border-radius: var(--radiud)}

.rd-
    \$radius,
.rounded-\$radius {
 border-radius: var(--radius)}

.rd-
    \$radius  {
 border-radius: var(--radius) !important}

.rd-
    \$radsud {
 border-radius: var(--radsud)}

.rd-0
      {
 border-radius: 0 !important}

.rd-10px,
.rounded-
    \[10px\],
.rounded-10px {
 border-radius: 10px}

.rd-12px,
.rounded-12px,
[
    rd-12px=""] {
 border-radius: 12px}

.rd-15px {
    border-radius: 15px}

.rd-15px
      {
 border-radius: 15px !important}

.rd-18px,
.rounded-18px,
[
    rounded-18px=""] {
 border-radius: 18px}

.rd-20px
      {
 border-radius: 20px !important}

.rd-4px,
.rounded-4px {
    border-radius: 4px}

.rd-50
    \% {
 border-radius: 50%}

.rd-5px {
    border-radius: 5px}

.rd-6px
    ,
[rd-6px=""] {
 border-radius: 6px !important}

.rd-8px,
.rounded-8px,
[
    rounded-8px=""] {
 border-radius: 8px}

.rd-full,
.rounded-full,
[
    rounded-full=""] {
 border-radius: 9999px}

.rd
      {
 border-radius: .25rem !important}

.rounded-12px
      {
 border-radius: 12px !important}

.rounded-20px {
    border-radius: 20px}

.rounded-22px,
[
    rounded-22px=""] {
 border-radius: 22px}

.rounded-2xl {
    border-radius: 1rem}

.rounded-33px {
    border-radius: 33px}

.rounded-3xl {
    border-radius: 1.5rem}

.rounded-9px {
    border-radius: 9px}

.rounded-lg,
[
    rounded-lg=""] {
 border-radius: .5rem}

.rounded-md,
[
    rounded-md=""] {
 border-radius: .375rem}

.rounded-xl {
    border-radius: .75rem;
}



.rd-b-4px {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px}

.rd-t-20px {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px}

.rounded-b-3xl {
    border-bottom-left-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem}

.rounded-b-xl {
    border-bottom-left-radius: .75rem;
    border-bottom-right-radius: .75rem}

.rounded-t-lg {
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem}

.rd-tl-15px {
    border-top-left-radius: 15px}

.rd-tr-4px {
    border-top-right-radius: 4px}

.b-style-dashed,
.border-dashed,
[
    border-dashed=""] {
 border-style: dashed}

.b-style-solid,
.border-solid,
[
    border-solid=""] {
 border-style: solid}

.border-dashed
      {
 border-style: dashed !important}

.border-none
    ,
[border-none=""] {
 border-style: none !important}

.border-solid
      {
 border-style: solid !important}

[
    last\:b-none~="default:"]:last-child:default {
 border-style: none}

.last
    \:b-none:last-child {
 border-style: none}

.last
    \:border-none:last-child {
 border-style: none}

.border-t-none
      {
 border-top-style: none !important}

[
    last\:border-b-none~="default:"]:last-child:default {
 border-bottom-style: none}

.last
    \:border-b-none:last-child {
 border-bottom-style: none}

.bg-
    \[\#000\],
.bg-\#000,
.bg-black {
 --un-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--un-bg-opacity))}

.bg-
    \[\#384348\] {
 --un-bg-opacity: 1;
    background-color: rgb(56 67 72 / var(--un-bg-opacity))}

.bg-
    \[\#707178\] {
 --un-bg-opacity: 1;
    background-color: rgb(112 113 120 / var(--un-bg-opacity))}

.bg-
    \#003682 {
 --un-bg-opacity: 1;
    background-color: rgb(0 54 130 / var(--un-bg-opacity))}

.bg-
    \#01285f  {
 --un-bg-opacity: 1 !important;
    background-color: rgb(1 40 95 / var(--un-bg-opacity)) !important}

.bg-
    \#053270 {
 --un-bg-opacity: 1;
    background-color: rgb(5 50 112 / var(--un-bg-opacity))}

.bg-
    \#09c497 {
 --un-bg-opacity: 1;
    background-color: rgb(9 196 151 / var(--un-bg-opacity))}

.bg-
    \#09c497  {
 --un-bg-opacity: 1 !important;
    background-color: rgb(9 196 151 / var(--un-bg-opacity)) !important}

.bg-
    \#0d000000 {
 --un-bg-opacity: 0;
    background-color: rgb(13 0 0 / var(--un-bg-opacity))}

.bg-
    \#13d0fa  {
 --un-bg-opacity: 1 !important;
    background-color: rgb(19 208 250 / var(--un-bg-opacity)) !important}

.bg-
    \#143e78  {
 --un-bg-opacity: 1 !important;
    background-color: rgb(20 62 120 / var(--un-bg-opacity)) !important}

.bg-
    \#152928 {
 --un-bg-opacity: 1;
    background-color: rgb(21 41 40 / var(--un-bg-opacity))}

.bg-
    \#171e21 {
 --un-bg-opacity: 1;
    background-color: rgb(23 30 33 / var(--un-bg-opacity))}

.bg-
    \#17cdaf {
 --un-bg-opacity: 1;
    background-color: rgb(23 205 175 / var(--un-bg-opacity))}

.bg-
    \#18283d {
 --un-bg-opacity: 1;
    background-color: rgb(24 40 61 / var(--un-bg-opacity))}

.bg-
    \#183539 {
 --un-bg-opacity: 1;
    background-color: rgb(24 53 57 / var(--un-bg-opacity))}

.bg-
    \#1f242b  {
 --un-bg-opacity: 1 !important;
    background-color: rgb(31 36 43 / var(--un-bg-opacity)) !important}

.bg-
    \#feda48 {
 --un-bg-opacity: 1;
    background-color: rgb(31 43 48 / var(--un-bg-opacity))}

.bg-
    \#202020 {
 --un-bg-opacity: 1;
    background-color: rgb(32 32 32 / var(--un-bg-opacity))}

.bg-
    \#202020  {
 --un-bg-opacity: 1 !important;
    background-color: rgb(32 32 32 / var(--un-bg-opacity)) !important}

.bg-
    \#222328 {
 --un-bg-opacity: 1;
    background-color: rgb(34 35 40 / var(--un-bg-opacity))}

.bg-
    \#252a31 {
 --un-bg-opacity: 1;
    background-color: rgb(37 42 49 / var(--un-bg-opacity))}

.bg-
    \#252a31  {
 --un-bg-opacity: 1 !important;
    background-color: rgb(37 42 49 / var(--un-bg-opacity)) !important}

.bg-
    \#254351 {
 --un-bg-opacity: 1;
    background-color: rgb(37 67 81 / var(--un-bg-opacity))}

.bg-
    \#294b65  {
 --un-bg-opacity: 1 !important;
    background-color: rgb(41 75 101 / var(--un-bg-opacity)) !important}

.bg-
    \#2b3139 {
 --un-bg-opacity: 1;
    background-color: rgb(43 49 57 / var(--un-bg-opacity))}

.bg-
    \#2C2C2C {
 --un-bg-opacity: 1;
    background-color: rgb(44 44 44 / var(--un-bg-opacity))}

.bg-
    \#2c2c53  {
 --un-bg-opacity: 1 !important;
    background-color: rgb(44 44 83 / var(--un-bg-opacity)) !important}

.bg-
    \#2DBD87 {
 --un-bg-opacity: 1;
    background-color: rgb(45 189 135 / var(--un-bg-opacity))}

.bg-
    \#2de2b4 {
 --un-bg-opacity: 1;
    background-color: rgb(45 226 180 / var(--un-bg-opacity))}

.bg-
    \#324765  {
 --un-bg-opacity: 1 !important;
    background-color: rgb(50 71 101 / var(--un-bg-opacity)) !important}

.bg-
    \#3db89a {
 --un-bg-opacity: 1;
    background-color: rgb(61 184 154 / var(--un-bg-opacity))}

.bg-
    \#3db89a  {
 --un-bg-opacity: 1 !important;
    background-color: rgb(61 184 154 / var(--un-bg-opacity)) !important}

.bg-
    \#41404D {
 --un-bg-opacity: 1;
    background-color: rgb(65 64 77 / var(--un-bg-opacity))}

.bg-
    \#44454b {
 --un-bg-opacity: 1;
    background-color: rgb(68 69 75 / var(--un-bg-opacity))}

.bg-
    \#4B4952 {
 --un-bg-opacity: 1;
    background-color: rgb(75 73 82 / var(--un-bg-opacity))}

.bg-
    \#5ae9b5 {
 --un-bg-opacity: 1;
    background-color: rgb(90 233 181 / var(--un-bg-opacity))}

.bg-
    \#7B59D7 {
 --un-bg-opacity: 1;
    background-color: rgb(123 89 215 / var(--un-bg-opacity))}

.bg-
    \#888888 {
 --un-bg-opacity: 1;
    background-color: rgb(136 136 136 / var(--un-bg-opacity))}

.bg-
    \#C5F1FF {
 --un-bg-opacity: 1;
    background-color: rgb(197 241 255 / var(--un-bg-opacity))}

.bg-
    \#ce4040 {
 --un-bg-opacity: 1;
    background-color: rgb(206 64 64 / var(--un-bg-opacity))}

.bg-
    \#ce4040  {
 --un-bg-opacity: 1 !important;
    background-color: rgb(206 64 64 / var(--un-bg-opacity)) !important}

.bg-
    \#D79839 {
 --un-bg-opacity: 1;
    background-color: rgb(215 152 57 / var(--un-bg-opacity))}

.bg-
    \#e9ebea {
 --un-bg-opacity: 1;
    background-color: rgb(233 235 234 / var(--un-bg-opacity))}

.bg-
    \#ECF4FE  {
 --un-bg-opacity: 1 !important;
    background-color: rgb(236 244 254 / var(--un-bg-opacity)) !important}

.bg-
    \#f0f4f8 {
 --un-bg-opacity: 1;
    background-color: rgb(240 244 248 / var(--un-bg-opacity))}

.bg-
    \#f0f4f8  {
 --un-bg-opacity: 1 !important;
    background-color: rgb(240 244 248 / var(--un-bg-opacity)) !important}

.bg-
    \#f59a23 {
 --un-bg-opacity: 1;
    background-color: rgb(245 154 35 / var(--un-bg-opacity))}

.bg-
    \#f5f5f5 {
 --un-bg-opacity: 1;
    background-color: rgb(245 245 245 / var(--un-bg-opacity))}

.bg-
    \#f5f6f8 {
 --un-bg-opacity: 1;
    background-color: rgb(245 246 248 / var(--un-bg-opacity))}

.bg-
    \#F6475C {
 --un-bg-opacity: 1;
    background-color: rgb(246 71 92 / var(--un-bg-opacity))}

.bg-
    \#F67214 {
 --un-bg-opacity: 1;
    background-color: rgb(246 114 20 / var(--un-bg-opacity))}

.bg-
    \#F67214  {
 --un-bg-opacity: 1 !important;
    background-color: rgb(246 114 20 / var(--un-bg-opacity)) !important}

.bg-
    \#F7F7F7 {
 --un-bg-opacity: 1;
    background-color: rgb(247 247 247 / var(--un-bg-opacity))}

.bg-
    \#F7F8FA {
 --un-bg-opacity: 1;
    background-color: rgb(247 248 250 / var(--un-bg-opacity))}

.bg-
    \#F7FAFF  {
 --un-bg-opacity: 1 !important;
    background-color: rgb(247 250 255 / var(--un-bg-opacity)) !important}

.bg-
    \#f85963  {
 --un-bg-opacity: 1 !important;
    background-color: rgb(248 89 99 / var(--un-bg-opacity)) !important}

.bg-
    \#F8F8F8 {
 --un-bg-opacity: 1;
    background-color: rgb(248 248 248 / var(--un-bg-opacity))}

.bg-
    \#F8F8F8  {
 --un-bg-opacity: 1 !important;
    background-color: rgb(248 248 248 / var(--un-bg-opacity)) !important}

.bg-
    \#f9dec9 {
 --un-bg-opacity: 1;
    background-color: rgb(249 222 201 / var(--un-bg-opacity))}

.bg-
    \#facc15  {
 --un-bg-opacity: 1 !important;
    background-color: rgb(250 204 21 / var(--un-bg-opacity)) !important}

.bg-
    \#fde047,
.bg-yellow-300 {
 --un-bg-opacity: 1;
    background-color: rgb(253 224 71 / var(--un-bg-opacity))}

.bg-
    \#ff5262  {
 --un-bg-opacity: 1 !important;
    background-color: rgb(255 82 98 / var(--un-bg-opacity)) !important}

.bg-
    \#FFE500 {
 --un-bg-opacity: 1;
    background-color: rgb(255 229 0 / var(--un-bg-opacity))}

.bg-
    \#FFE8D0 {
 --un-bg-opacity: 1;
    background-color: rgb(255 232 208 / var(--un-bg-opacity))}

.bg-
    \#fff,
.bg-white,
[bg-white=""] {
 --un-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--un-bg-opacity))}

.bg-
    \$bg {
 background-color: var(--bg)}

.bg-
    \$bg-card {
 background-color: var(--bg-card)}

.bg-
    \$bg-card  {
 background-color: var(--bg-card) !important}

.bg-
    \$bg-card2 {
 background-color: var(--bg-card2)}

.bg-
    \$bg-card2  {
 background-color: var(--bg-card2) !important}

.bg-
    \$bg-input {
 background-color: var(--bg-input)}

.bg-
    \$bg-input  {
 background-color: var(--bg-input) !important}

.bg-
    \$bg-second {
 background-color: var(--bg-second)}

.bg-
    \$bg-second  {
 background-color: var(--bg-second) !important}

.bg-
    \$bg-tab {
 background-color: var(--bg-tab)}

.bg-
    \$bg-tab  {
 background-color: var(--bg-tab) !important}

.bg-
    \$bg-vip {
 background-color: var(--bg-vip)}

.bg-
    \$bg-weight {
 background-color: var(--bg-weight)}

.bg-
    \$bg-weight  {
 background-color: var(--bg-weight) !important}

.bg-
    \$bg  {
 background-color: var(--bg) !important}

.bg-
    \$btn-bg3 {
 background-color: var(--btn-bg3)}

.bg-
    \$btn-text {
 background-color: var(--btn-text)}

.bg-
    \$main-text {
 background-color: var(--main-text)}

.bg-
    \$primary {
 background-color: var(--primary)}

.bg-
    \$primary-second {
 background-color: var(--primary-second)}

.bg-
    \$primary-second  {
 background-color: var(--primary-second) !important}

.bg-
    \$primary  {
 background-color: var(--primary) !important}

.bg-
    \$text-gray {
 background-color: var(--text-gray)}

.bg-
    \$text-gray  {
 background-color: var(--text-gray) !important}

.bg-
    \$text-gray6 {
 background-color: var(--text-gray6)}

.bg-blue-50 {
    --un-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--un-bg-opacity))}

.bg-blue-600 {
    --un-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--un-bg-opacity))}

.bg-gray-200 {
    --un-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--un-bg-opacity))}

.bg-gray-300
      {
 --un-bg-opacity: 1 !important;
    background-color: rgb(209 213 219 / var(--un-bg-opacity)) !important}

.bg-gray-400 {
    --un-bg-opacity: 1;
    background-color: rgb(156 163 175 / var(--un-bg-opacity))}

.bg-gray-400
      {
 --un-bg-opacity: 1 !important;
    background-color: rgb(156 163 175 / var(--un-bg-opacity)) !important}

.bg-gray-50 {
    --un-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--un-bg-opacity))}

.bg-red-500 {
    --un-bg-opacity: 1;
    background-color: rgb(239 68 68 / var(--un-bg-opacity))}

.bg-transparent {
    background-color: transparent}

.bg-transparent
      {
 background-color: transparent !important}

.bg-white
    ,
[bg-white=""] {
 --un-bg-opacity: 1 !important;
    background-color: rgb(255 255 255 / var(--un-bg-opacity)) !important}

.bg-yellow {
    --un-bg-opacity: 1;
    background-color: rgb(250 204 21 / var(--un-bg-opacity))}

.bg-yellow-500 {
    --un-bg-opacity: 1;
    background-color: rgb(234 179 8 / var(--un-bg-opacity))}

.bg-zinc-600 {
    --un-bg-opacity: 1;
    background-color: rgb(82 82 91 / var(--un-bg-opacity))}

.hover
    \:bg-red-600:hover {
 --un-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--un-bg-opacity))}

.bg-op-30 {
    --un-bg-opacity: .3}

.bg-opacity-0 {
    --un-bg-opacity: 0}

.bg-opacity-10 {
    --un-bg-opacity: .1}

.bg-opacity-12,
[
    bg-opacity-12=""] {
 --un-bg-opacity: .12}

.bg-opacity-16 {
    --un-bg-opacity: .16}

.bg-opacity-20 {
    --un-bg-opacity: .2}

.bg-opacity-5 {
    --un-bg-opacity: .05}

.bg-opacity-50 {
    --un-bg-opacity: .5}

.bg-opacity-55,
[
    bg-opacity-55=""] {
 --un-bg-opacity: .55}

.bg-opacity-6,
[
    bg-opacity-6=""] {
 --un-bg-opacity: .06}

.bg-opacity-9 {
    --un-bg-opacity: .09}

.bg-cover {
    background-size: cover}

.bg-no-repeat {
    background-repeat: no-repeat}

[
    fill-opacity~="0.18"] {
 --un-fill-opacity: .0018}

[
    fill-opacity~="0.5"] {
 --un-fill-opacity: .005}

[
    fill-opacity~="0.8"] {
 --un-fill-opacity: .008}

[
    fill-opacity~="1"] {
 --un-fill-opacity: .01}

[
    stroke-width~="2"] {
 stroke-width: 2px}

[
    stroke-width~="4"] {
 stroke-width: 4px}

[
    stroke~="#ffffff"] {
 --un-stroke-opacity: 1;
    stroke: rgb(255 255 255 / var(--un-stroke-opacity))}

[
    stroke~=black] {
 --un-stroke-opacity: 1;
    stroke: rgb(0 0 0 / var(--un-stroke-opacity))}

.object-cover {
    object-fit: cover}

.object-contain {
    object-fit: contain}

.object-center {
    object-position: center}

.p-
    \$mg {
 padding: var(--mg)}

.p-
    \$mg  {
 padding: var(--mg) !important}

.p-0
    ,
[p-0=""] {
 padding: 0 !important}

.p-1,
[
    p-1=""],
[p~="1"] {
 padding: .25rem}

.p-10px {
    padding: 10px}

.p-10px
      {
 padding: 10px !important}

.p-12px {
    padding: 12px}

.p-14px {
    padding: 14px}

.p-15px {
    padding: 15px}

.p-16px,
[
    p-16px=""] {
 padding: 16px}

.p-16px
      {
 padding: 16px !important}

.p-1px {
    padding: 1px}

.p-2 {
    padding: .5rem}

.p-2
    ,
[p-2=""] {
 padding: .5rem !important}

.p-2
    \.5,
[p-2\.5=""] {
 padding: .625rem}

.p-3 {
    padding: .75rem}

.p-4 {
    padding: 1rem}

.p-4px {
    padding: 4px}

.p-5 {
    padding: 1.25rem}

.p-5px {
    padding: 5px}

.p-6 {
    padding: 1.5rem}

.p-6px {
    padding: 6px}

.p-8px {
    padding: 8px}

.p-8px
      {
 padding: 8px !important}

.p-9px {
    padding: 9px}



.px,
.px-4,
[
    px=""] {
 padding-left: 1rem;
    padding-right: 1rem}

.px-
    \$mg {
 padding-left: var(--mg);
    padding-right: var(--mg)}

.px-
    \$mg  {
 padding-left: var(--mg) !important;
    padding-right: var(--mg) !important}

.px-0
      {
 padding-left: 0 !important;
    padding-right: 0 !important}

.px-1 {
    padding-left: .25rem;
    padding-right: .25rem}

.px-10px,
[
    px-10px=""] {
 padding-left: 10px;
    padding-right: 10px}

.px-11px {
    padding-left: 11px;
    padding-right: 11px}

.px-11px
    ,
[px-11px=""] {
 padding-left: 11px !important;
    padding-right: 11px !important}

.px-12px {
    padding-left: 12px;
    padding-right: 12px}

.px-14px,
[
    px-14px=""] {
 padding-left: 14px;
    padding-right: 14px}

.px-15px {
    padding-left: 15px;
    padding-right: 15px}

.px-16px {
    padding-left: 16px;
    padding-right: 16px}

.px-16px
      {
 padding-left: 16px !important;
    padding-right: 16px !important}

.px-17px {
    padding-left: 17px;
    padding-right: 17px}

.px-18px {
    padding-left: 18px;
    padding-right: 18px}

.px-2,
[
    px-2=""] {
 padding-left: .5rem;
    padding-right: .5rem}

.px-20px {
    padding-left: 20px;
    padding-right: 20px}

.px-20px
      {
 padding-left: 20px !important;
    padding-right: 20px !important}

.px-24px {
    padding-left: 24px;
    padding-right: 24px}

.px-25px {
    padding-left: 25px;
    padding-right: 25px}

.px-3 {
    padding-left: .75rem;
    padding-right: .75rem}

.px-30px {
    padding-left: 30px;
    padding-right: 30px}

.px-32px {
    padding-left: 32px;
    padding-right: 32px}

.px-38px {
    padding-left: 38px;
    padding-right: 38px}

.px-4px {
    padding-left: 4px;
    padding-right: 4px}

.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem}

.px-5px
      {
 padding-left: 5px !important;
    padding-right: 5px !important}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem}

.px-6px {
    padding-left: 6px;
    padding-right: 6px}

.px-6px
      {
 padding-left: 6px !important;
    padding-right: 6px !important}

.px-8px,
[
    px-8px=""] {
 padding-left: 8px;
    padding-right: 8px}

.px-8px
    ,
[px-8px=""] {
 padding-left: 8px !important;
    padding-right: 8px !important}

.py-
    \[10px\],
.py-10px,
[py-10px=""] {
 padding-top: 10px;
    padding-bottom: 10px}

.py-
    \$mg {
 padding-top: var(--mg);
    padding-bottom: var(--mg)}

.py-0
      {
 padding-top: 0 !important;
    padding-bottom: 0 !important}

.py-0
    \.5 {
 padding-top: .125rem;
    padding-bottom: .125rem}

.py-1 {
    padding-top: .25rem;
    padding-bottom: .25rem}

.py-1
    \.5 {
 padding-top: .375rem;
    padding-bottom: .375rem}

.py-10px
    ,
[py-10px=""] {
 padding-top: 10px !important;
    padding-bottom: 10px !important}

.py-11px {
    padding-top: 11px;
    padding-bottom: 11px}

.py-12px,
[
    py-12px=""] {
 padding-top: 12px;
    padding-bottom: 12px}

.py-12px
      {
 padding-top: 12px !important;
    padding-bottom: 12px !important}

.py-13px {
    padding-top: 13px;
    padding-bottom: 13px}

.py-14px {
    padding-top: 14px;
    padding-bottom: 14px}

.py-14px
      {
 padding-top: 14px !important;
    padding-bottom: 14px !important}

.py-15px {
    padding-top: 15px;
    padding-bottom: 15px}

.py-16px {
    padding-top: 16px;
    padding-bottom: 16px}

.py-18px,
[
    py-18px=""] {
 padding-top: 18px;
    padding-bottom: 18px}

.py-1px {
    padding-top: 1px;
    padding-bottom: 1px}

.py-2,
[
    py-2=""] {
 padding-top: .5rem;
    padding-bottom: .5rem}

.py-2
    \.5,
[py-2\.5=""] {
 padding-top: .625rem;
    padding-bottom: .625rem}

.py-20px {
    padding-top: 20px;
    padding-bottom: 20px}

.py-20px
      {
 padding-top: 20px !important;
    padding-bottom: 20px !important}

.py-2px {
    padding-top: 2px;
    padding-bottom: 2px}

.py-3 {
    padding-top: .75rem;
    padding-bottom: .75rem}

.py-30px {
    padding-top: 30px;
    padding-bottom: 30px}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem}

.py-4px,
[
    py-4px=""] {
 padding-top: 4px;
    padding-bottom: 4px}

.py-4px
      {
 padding-top: 4px !important;
    padding-bottom: 4px !important}

.py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem}

.py-5px {
    padding-top: 5px;
    padding-bottom: 5px}

.py-5px
      {
 padding-top: 5px !important;
    padding-bottom: 5px !important}

.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem}

.py-60px {
    padding-top: 60px;
    padding-bottom: 60px}

.py-6px,
[
    py-6px=""] {
 padding-top: 6px;
    padding-bottom: 6px}

.py-6px
      {
 padding-top: 6px !important;
    padding-bottom: 6px !important}

.py-70px {
    padding-top: 70px;
    padding-bottom: 70px}

.py-7px {
    padding-top: 7px;
    padding-bottom: 7px}

.py-80px {
    padding-top: 80px;
    padding-bottom: 80px}

.py-8px {
    padding-top: 8px;
    padding-bottom: 8px}

.py-9px {
    padding-top: 9px;
    padding-bottom: 9px}

[
    py-2~="default:"]:default {
 padding-top: .5rem;
    padding-bottom: .5rem}

[
    py-4~="default:"]:default {
 padding-top: 1rem;
    padding-bottom: 1rem}



.pb-0 {
    padding-bottom: 0}

.pb-10 {
    padding-bottom: 2.5rem}

.pb-10px {
    padding-bottom: 10px}

.pb-10px
      {
 padding-bottom: 10px !important}

.pb-120px {
    padding-bottom: 120px}

.pb-12px {
    padding-bottom: 12px}

.pb-14px {
    padding-bottom: 14px}

.pb-17px
      {
 padding-bottom: 17px !important}

.pb-20px {
    padding-bottom: 20px}

.pb-22px {
    padding-bottom: 22px}

.pb-24px {
    padding-bottom: 24px}

.pb-3 {
    padding-bottom: .75rem}

.pb-30px,
[
    pb-30px=""] {
 padding-bottom: 30px}

.pb-4 {
    padding-bottom: 1rem}

.pb-40px {
    padding-bottom: 40px}

.pb-40px
      {
 padding-bottom: 40px !important}

.pb-6 {
    padding-bottom: 1.5rem}

.pb-60px {
    padding-bottom: 60px}

.pb-64px {
    padding-bottom: 64px}

.pb-70px {
    padding-bottom: 70px}

.pb-80px {
    padding-bottom: 80px}

.pb-8px {
    padding-bottom: 8px}

.pl-
    \$mg {
 padding-left: var(--mg)}

.pl-10px {
    padding-left: 10px}

.pl-20px {
    padding-left: 20px}

.pl-24px,
[
    pl-24px=""] {
 padding-left: 24px}

.pl-28px {
    padding-left: 28px}

.pl-5 {
    padding-left: 1.25rem}

.pr {
    padding-right: 1rem}

.pr-1
    \% {
 padding-right: 1%}

.pr-10px {
    padding-right: 10px}

.pt-
    \$mg {
 padding-top: var(--mg)}

.pt-
    \$mg  {
 padding-top: var(--mg) !important}

.pt-0 {
    padding-top: 0}

.pt-0
      {
 padding-top: 0 !important}

.pt-100px {
    padding-top: 100px}

.pt-10px {
    padding-top: 10px}

.pt-10px
      {
 padding-top: 10px !important}

.pt-15px
      {
 padding-top: 15px !important}

.pt-16px {
    padding-top: 16px}

.pt-17px
      {
 padding-top: 17px !important}

.pt-200px {
    padding-top: 200px}

.pt-20px {
    padding-top: 20px}

.pt-22px
    ,
[pt-22px=""] {
 padding-top: 22px !important}

.pt-24px,
[
    pt-24px=""] {
 padding-top: 24px}

.pt-3 {
    padding-top: .75rem}

.pt-30px {
    padding-top: 30px}

.pt-30px
      {
 padding-top: 30px !important}

.pt-32px {
    padding-top: 32px}

.pt-4 {
    padding-top: 1rem}

.pt-40px {
    padding-top: 40px}

.pt-40px
      {
 padding-top: 40px !important}

.pt-45px {
    padding-top: 45px}

.pt-5 {
    padding-top: 1.25rem}

.pt-50px {
    padding-top: 50px}

.pt-57px {
    padding-top: 57px}

.pt-57px
      {
 padding-top: 57px !important}

.pt-5px {
    padding-top: 5px}

.pt-6 {
    padding-top: 1.5rem}

.pt-60px
      {
 padding-top: 60px !important}

.pt-61px {
    padding-top: 61px}

.pt-70px {
    padding-top: 70px}

.pt-7px {
    padding-top: 7px}

.pt-80px {
    padding-top: 80px}

.pt-8px {
    padding-top: 8px}

.pt-8px
      {
 padding-top: 8px !important}

.pt-90px {
    padding-top: 90px}


.text-center,
[
    text-center=""] {
 text-align: center}

[
    text-center~="default:"]:default {
 text-align: center}

.text-left {
    text-align: left}

.text-right,
[
    text-right=""] {
 text-align: right}

.text-
    \[11px\] {
 font-size: 11px}

.text-
    \[14px\],
.text-14px {
 font-size: 14px}

.text-10px {
    font-size: 10px}

.text-12px,
[
    text-12px=""] {
 font-size: 12px}

.text-12px
      {
 font-size: 12px !important}

.text-13px {
    font-size: 13px}

.text-14px
    ,
[text-14px=""] {
 font-size: 14px !important}

.text-15px {
    font-size: 15px}

.text-15px
      {
 font-size: 15px !important}

.text-16px {
    font-size: 16px}

.text-18px {
    font-size: 18px}

.text-19px {
    font-size: 19px}

.text-20px {
    font-size: 20px}

.text-21px {
    font-size: 21px}

.text-22px {
    font-size: 22px}

.text-24px,
[
    text-24px=""] {
 font-size: 24px}

.text-26px {
    font-size: 26px}

.text-28px {
    font-size: 28px}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem}

.text-32px {
    font-size: 32px}

.text-36px {
    font-size: 36px}

.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem}

.text-8px {
    font-size: 8px}

.text-base {
    font-size: 1rem;
    line-height: 1.5rem}

.text-base
      {
 font-size: 1rem !important;
    line-height: 1.5rem !important}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem}

.text-sm,
[
    text-sm=""] {
 font-size: 16px;
 line-height: 14px;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem}

.text-xs,
[
    text-xs=""] {
 font-size: 14px;
    /* text-align: center; */
    line-height: 24px;
}

[
    text-12px~="default:"]:default {
 font-size: 12px}

.text-
    \[var\(--primary-color\)\]  {
 color: var(--primary-color) !important}

.c-
    \$primary,
.text-\[var\(--primary\)\],
.text-\$primary  {
 color: var(--primary) !important}

.c-
    \$text-gray,
.text-\[var\(--text-gray\)\],
.text-\$text-gray {
 color: #efc89c;
 margin-top: 20px;
 display: inline-block;
 padding: 0;
}

.c-
    \$text-gray6,
.text-\[var\(--text-gray6\)\],
.text-\$text-gray6 {
 color: var(--text-gray6)}

.text-
    \[var\(--text-secondary\)\] {
 color: var(--text-secondary)}

.c-
    \#000,
.text-\#000,
.text-black,
[text-black=""] {
 --un-text-opacity: 1;
    color: rgb(0 0 0 / var(--un-text-opacity))}

.text-
    \#000,
.text-black  {
 --un-text-opacity: 1 !important;
    color: rgb(0 0 0 / var(--un-text-opacity)) !important}

.text-
    \#001dff {
 --un-text-opacity: 1;
    color: rgb(0 29 255 / var(--un-text-opacity))}

.text-
    \#00FF57 {
 --un-text-opacity: 1;
    color: rgb(0 255 87 / var(--un-text-opacity))}

.text-
    \#05A064 {
 --un-text-opacity: 1;
    color: rgb(5 160 100 / var(--un-text-opacity))}

.text-
    \#09c497 {
 --un-text-opacity: 1;
    color: rgb(9 196 151 / var(--un-text-opacity))}

.text-
    \#17cdaf {
 --un-text-opacity: 1;
    color: rgb(23 205 175 / var(--un-text-opacity))}

.text-
    \#222328 {
 --un-text-opacity: 1;
    color: rgb(34 35 40 / var(--un-text-opacity))}

.text-
    \#282828 {
 --un-text-opacity: 1;
    color: rgb(40 40 40 / var(--un-text-opacity))}

.text-
    \#2E6481 {
 --un-text-opacity: 1;
    color: rgb(46 100 129 / var(--un-text-opacity))}

.text-
    \#3DAA7E {
 --un-text-opacity: 1;
    color: rgb(61 170 126 / var(--un-text-opacity))}

.text-
    \#3db89a {
 --un-text-opacity: 1;
    color: rgb(61 184 154 / var(--un-text-opacity))}

.text-
    \#3db89a  {
 --un-text-opacity: 1 !important;
    color: rgb(61 184 154 / var(--un-text-opacity)) !important}

.c-
    \#568499,
.text-\#568499 {
 --un-text-opacity: 1;
    color: rgb(86 132 153 / var(--un-text-opacity))}

.text-
    \#5bcb9a {
 --un-text-opacity: 1;
    color: rgb(91 203 154 / var(--un-text-opacity))}

.text-
    \#6c3b23 {
 --un-text-opacity: 1;
    color: rgb(108 59 35 / var(--un-text-opacity))}

.text-
    \#6c3b2e {
 --un-text-opacity: 1;
    color: rgb(108 59 46 / var(--un-text-opacity))}

.text-
    \#768da5 {
 --un-text-opacity: 1;
    color: rgb(118 141 165 / var(--un-text-opacity))}

.text-
    \#768da9 {
 --un-text-opacity: 1;
    color: rgb(118 141 169 / var(--un-text-opacity))}

.text-
    \#794D2D {
 --un-text-opacity: 1;
    color: rgb(121 77 45 / var(--un-text-opacity))}

.text-
    \#86909c {
 --un-text-opacity: 1;
    color: rgb(134 144 156 / var(--un-text-opacity))}

.text-
    \#909193 {
 --un-text-opacity: 1;
    color: rgb(144 145 147 / var(--un-text-opacity))}

.text-
    \#98A2A4 {
 --un-text-opacity: 1;
    color: rgb(152 162 164 / var(--un-text-opacity))}

.text-
    \#a1a1a1 {
 --un-text-opacity: 1;
    color: rgb(161 161 161 / var(--un-text-opacity))}

.text-
    \#bbbabf {
 --un-text-opacity: 1;
    color: rgb(187 186 191 / var(--un-text-opacity))}

.text-
    \#cacbd2 {
 --un-text-opacity: 1;
    color: rgb(202 203 210 / var(--un-text-opacity))}

.c-
    \#CBCBCB,
.text-\#CBCBCB {
 --un-text-opacity: 1;
    color: rgb(203 203 203 / var(--un-text-opacity))}

.text-
    \#cbe7f4,
[color~="#cbe7f4"] {
 --un-text-opacity: 1;
    color: rgb(203 231 244 / var(--un-text-opacity))}

.text-
    \#ce4040 {
 --un-text-opacity: 1;
    color: rgb(206 64 64 / var(--un-text-opacity))}

.text-
    \#ce4040  {
 --un-text-opacity: 1 !important;
    color: rgb(206 64 64 / var(--un-text-opacity)) !important}

.text-
    \#e2e8e4 {
 --un-text-opacity: 1;
    color: rgb(226 232 228 / var(--un-text-opacity))}

.text-
    \#e2e8e4  {
 --un-text-opacity: 1 !important;
    color: rgb(226 232 228 / var(--un-text-opacity)) !important}

.text-
    \#EAC369 {
 --un-text-opacity: 1;
    color: rgb(234 195 105 / var(--un-text-opacity))}

.text-
    \#ededed {
 --un-text-opacity: 1;
    color: #333;
}

.text-
    \#f59a23 {
 --un-text-opacity: 1;
    color: rgb(245 154 35 / var(--un-text-opacity))}

.text-
    \#F67214 {
 --un-text-opacity: 1;
    color: rgb(246 114 20 / var(--un-text-opacity))}

.text-
    \#f85963  {
 --un-text-opacity: 1 !important;
    color: rgb(248 89 99 / var(--un-text-opacity)) !important}

.text-
    \#f9dec9 {
 --un-text-opacity: 1;
    color: rgb(249 222 201 / var(--un-text-opacity))}

.text-
    \#FEE61A {
 --un-text-opacity: 1;
    color: rgb(254 230 26 / var(--un-text-opacity))}

.text-
    \#FF3750 {
 --un-text-opacity: 1;
    color: rgb(255 55 80 / var(--un-text-opacity))}

.text-
    \#FF6565  {
 --un-text-opacity: 1 !important;
    color: rgb(255 101 101 / var(--un-text-opacity)) !important}

.text-
    \#FF9E00  {
 --un-text-opacity: 1 !important;
    color: rgb(255 158 0 / var(--un-text-opacity)) !important}

.text-
    \#FFDB02 {
 --un-text-opacity: 1;
    color: rgb(255 219 2 / var(--un-text-opacity))}

.c-
    \#fff,
.c-white,
.text-\#fff,
.text-white,
[color~="#fff"],
[color~="#ffffff"],
[color~=white],
[text-white=""] {
 --un-text-opacity: 1;
    color: rgb(255 255 255 / var(--un-text-opacity))}

.text-
    \#fffc {
 --un-text-opacity: .8;
    color: rgb(255 255 255 / var(--un-text-opacity))}

.text-
    \$base-btn-text {
 color: var(--base-btn-text)}

.text-
    \$base-btn-text  {
 color: var(--base-btn-text) !important}

.text-
    \$bg-weight {
 color: var(--bg-weight)}

.text-
    \$border-color {
 color: var(--border-color)}

.text-
    \$btn-gray {
 color: var(--btn-gray)}

.c-
    \$btn-text,
.text-\$btn-text {
 color: var(--btn-text)}

.c-
    \$btn-text,
.text-\$btn-text  {
 color: var(--btn-text) !important}

.c-
    \$btn-text2,
.text-\$btn-text2 {
 color: var(--btn-text2)}

.text-
    \$btn-text3 {
 color: var(--btn-text3)}

.text-
    \$btn-text3  {
 color: var(--btn-text3) !important}

.c-
    \$btn-text4,
.text-\$btn-text4 {
 color: var(--btn-text4)}

.text-
    \$main-text {
 color: var(--main-text)}

.text-
    \$main-text  {
 color: var(--main-text) !important}

.c-
    \$primary,
.text-\$primary {
 color: var(--primary)}

.text-
    \$tab-text {
 color: var(--tab-text)}

.text-
    \$text-gray  {
 color: var(--text-gray) !important}

.text-
    \$text-grayx {
 color: var(--text-grayx)}

.text-
    \$title-color {
 color: var(--title-color)}

.text-amber {
    --un-text-opacity: 1;
    color: rgb(251 191 36 / var(--un-text-opacity))}

.text-blue-400
      {
 --un-text-opacity: 1 !important;
    color: rgb(96 165 250 / var(--un-text-opacity)) !important}

.text-blue-600 {
    --un-text-opacity: 1;
    color: rgb(37 99 235 / var(--un-text-opacity))}

.c-
    \#9CA3AF,
.text-gray,
.text-gray-400,
[text-gray=""] {
 --un-text-opacity: 1;
    color: rgb(156 163 175 / var(--un-text-opacity))}

.text-gray-500 {
    --un-text-opacity: 1;
    color: rgb(107 114 128 / var(--un-text-opacity))}

.text-gray-600 {
    --un-text-opacity: 1;
    color: rgb(75 85 99 / var(--un-text-opacity))}

.text-gray-700 {
    --un-text-opacity: 1;
    color: rgb(55 65 81 / var(--un-text-opacity))}

.text-gray-800 {
    --un-text-opacity: 1;
    color: rgb(31 41 55 / var(--un-text-opacity))}

.text-gray-900 {
    --un-text-opacity: 1;
    color: rgb(17 24 39 / var(--un-text-opacity))}

.c-green,
.text-green,
.text-green-400 {
    --un-text-opacity: 1;
    color: rgb(74 222 128 / var(--un-text-opacity))}

.text-green-500 {
    --un-text-opacity: 1;
    color: rgb(34 197 94 / var(--un-text-opacity))}

.text-green-600 {
    --un-text-opacity: 1;
    color: rgb(22 163 74 / var(--un-text-opacity))}

.c-red,
.text-red {
    --un-text-opacity: 1;
    color: rgb(248 113 113 / var(--un-text-opacity))}

.text-red-500 {
    --un-text-opacity: 1;
    color: rgb(239 68 68 / var(--un-text-opacity))}

.text-red
      {
 --un-text-opacity: 1 !important;
    color: rgb(248 113 113 / var(--un-text-opacity)) !important}

.text-slate-400 {
    --un-text-opacity: 1;
    color: rgb(148 163 184 / var(--un-text-opacity))}

.text-slate-500 {
    --un-text-opacity: 1;
    color: rgb(100 116 139 / var(--un-text-opacity))}

.text-slate-700 {
    --un-text-opacity: 1;
    color: rgb(51 65 85 / var(--un-text-opacity))}

.c-white
    ,
.text-white  {
 --un-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--un-text-opacity)) !important}

.text-yellow {
    --un-text-opacity: 1;
    color: rgb(250 204 21 / var(--un-text-opacity))}

.text-yellow-800 {
    --un-text-opacity: 1;
    color: rgb(133 77 14 / var(--un-text-opacity))}

.text-yellow
      {
 --un-text-opacity: 1 !important;
    color: rgb(250 204 21 / var(--un-text-opacity)) !important}

[
    text-gray~="1"] {
 --un-text-opacity: 1;
    color: rgb(243 244 246 / var(--un-text-opacity))}

[
    text-gray~="default:"]:default {
 --un-text-opacity: 1;
    color: rgb(156 163 175 / var(--un-text-opacity))}

.c-
    \#1b49b9 {
 --un-text-opacity: 1;
    color: rgb(27 73 185 / var(--un-text-opacity))}

.c-
    \#2c9e90 {
 --un-text-opacity: 1;
    color: rgb(44 158 144 / var(--un-text-opacity))}

.c-
    \#999 {
 --un-text-opacity: 1;
    color: rgb(153 153 153 / var(--un-text-opacity))}

.c-
    \#ccc {
 --un-text-opacity: 1;
    color: rgb(204 204 204 / var(--un-text-opacity))}

.c-
    \#d08a7a {
 --un-text-opacity: 1;
    color: rgb(208 138 122 / var(--un-text-opacity))}

.c-
    \$bg-tray {
 color: var(--bg-tray)}

.c-
    \$btn-text5 {
 color: var(--btn-text5)}

.c-
    \$nav-border  {
 color: var(--nav-border) !important}

.c-
    \$nav-text {
 color: var(--nav-text)}

.c-
    \$nav-text  {
 color: var(--nav-text) !important}

.c-
    \$text-black {
 color: var(--text-black)}

.c-
    \$text-notice {
 color: var(--text-notice)}

.c-
    \$text-white {
 color: var(--text-white)}

.c-
    \$title-decor {
 color: var(--title-decor)}

[
    color~="#2c3850"] {
 --un-text-opacity: 1;
    color: rgb(44 56 80 / var(--un-text-opacity))}

[
    color~="#ababb3"] {
 --un-text-opacity: 1;
    color: rgb(171 171 179 / var(--un-text-opacity))}

.font-500,
.font-medium {
    font-weight: 500}

.font-600,
.font-semibold {
    font-weight: 600}

.font-800 {
    font-weight: 800}

.font-bold,
[
    font-bold=""] {
 font-weight: 700}

.font-bold
      {
 font-weight: 700 !important}

.font-normal {
    font-weight: 400}

.font-thin {
    font-weight: 100}

.leading-150px {
    line-height: 150px}

.leading-20px,
.lh-20px {
    line-height: 20px}

.leading-25px {
    line-height: 25px}

.leading-30px {
    line-height: 30px}

.leading-32px,
[
    leading-32px=""] {
 line-height: 32px}

.leading-33px {
    line-height: 33px}

.leading-34px,
.lh-34px,
[
    leading-34px=""] {
 line-height: 34px}

.leading-36px {
    line-height: 36px}

.leading-37px,
[
    leading-37px=""] {
 line-height: 37px}

.leading-38px {
    line-height: 38px}

.leading-40px {
    line-height: 40px}

.leading-42px,
[
    leading-42px=""] {
 line-height: 42px}

.leading-54px,
[
    leading-54px=""] {
 line-height: 54px}

.leading-tight {
    line-height: 1.25}

.lh-14px {
    line-height: 14px}

.lh-15px {
    line-height: 15px}

.lh-24px {
    line-height: 24px}

.lh-44px {
    line-height: 44px}

.font-jmono {
    font-family: JetBrains Mono, JetBrains Mono}

.font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace}

.font-italic {
    font-style: italic}

.line-through {
    text-decoration-line: line-through}

.underline {
    text-decoration-line: underline}

.text-shadow {
    --un-text-shadow: 0 0 1px var(--un-text-shadow-color, rgb(0 0 0 / .2)), 0 0 1px var(--un-text-shadow-color, rgb(1 0 5 / .1));
    text-shadow: var(--un-text-shadow)}

.text-shadow-color-
    \#c48141 {
 --un-text-shadow-opacity: 1;
    --un-text-shadow-color: rgb(196 129 65 / var(--un-text-shadow-opacity))}

.opacity-0 {
    opacity: 0}

.opacity-30
      {
 opacity: .3 !important}

.opacity-50 {
    opacity: .5}

.opacity-60 {
    opacity: .6}

.opacity-70 {
    opacity: .7}

.opacity-80 {
    opacity: .8}

.shadow {
    --un-shadow: var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / .1)), var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / .1));
    box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)}

.shadow-
    \$box-shadow {
 --un-shadow: var(--box-shadow);
    box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)}

.shadow-
    \$card-shadow {
 --un-shadow: var(--card-shadow);
    box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)}

.shadow-
    \$shadow {
 --un-shadow: var(--shadow);
    box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)}

.shadow-
    \$shadow  {
 --un-shadow: var(--shadow) !important;
    box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow) !important}

.shadow-lg {
    --un-shadow: var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / .1)), var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / .1));
    box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)}

.shadow-md,
[
    shadow-md=""] {
 --un-shadow: var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / .1)), var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / .1));
    box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)}

.shadow-none
    ,
[shadow-none=""] {
 --un-shadow: 0 0 var(--un-shadow-color, rgb(0 0 0 / 0)) !important;
    box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow) !important}

.shadow-sm,
[
    shadow-sm=""] {
 --un-shadow: var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / .05));
    box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)}

.shadow-xl {
    --un-shadow: var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color, rgb(0 0 0 / .1)), var(--un-shadow-inset) 0 8px 10px -6px var(--un-shadow-color, rgb(0 0 0 / .1));
    box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)}

[
    shadow~="default:"]:default {
 --un-shadow: var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / .1)), var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / .1));
    box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)}

.hover
    \:shadow-md:hover,
[hover\:shadow-md=""]:hover {
 --un-shadow: var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / .1)), var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / .1));
    box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)}

.backdrop-blur-10px {
    --un-backdrop-blur: blur(10px);
    -webkit-backdrop-filter: var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
    backdrop-filter: var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia)}

.backdrop-blur-15px {
    --un-backdrop-blur: blur(15px);
    -webkit-backdrop-filter: var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
    backdrop-filter: var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia)}

.backdrop-blur-4px {
    --un-backdrop-blur: blur(4px);
    -webkit-backdrop-filter: var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
    backdrop-filter: var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia)}

.filter-grayscale-90 {
    --un-grayscale: grayscale(.9);
    filter: var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia)}

.grayscale {
    --un-grayscale: grayscale(1);
    filter: var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia)}

.filter {
    filter: var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia)}

.backdrop-filter {
    -webkit-backdrop-filter: var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
    backdrop-filter: var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia)}

.transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s}

.transition-all,
[
    transition-all=""] {
 transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s}

.transition-shadow,
[
    transition-shadow=""] {
 transition-property: box-shadow;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s}

.ease,
.ease-in-out {
    transition-timing-function: cubic-bezier(.4, 0, .2, 1)}

.ease-in {
    transition-timing-function: cubic-bezier(.4, 0, 1, 1)}

 .md\:
    top-100px {
  top: 100px}

 .md\:
    top-122px {
  top: 122px}

 .md\:
    top-160px {
  top: 160px}

 .md\:
    top-55\% {
  top: 55%}

 .md\:
    grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr))}

 .md\:
    grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr))}

 .md\:
    grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr))}

 .md\:
    ml-34px {
  margin-left: 34px}

 .md\:
    ml-50px {
  margin-left: 50px}

 .md\:
    mr-34px {
  margin-right: 34px}

 .md\:
    mt-110px {
  margin-top: 110px}

 .md\:
    mt-50px {
  margin-top: 50px}

 .md\:
    h-\[calc\(100vh-700px\)\] {
  height: calc(100vh - 700px)}

 .md\:
    h-110px {
  height: 110px}

 .md\:
    h-120px {
  height: 120px}

 .md\:
    h-122px {
  height: 122px}

 .md\:
    h-30\.72px {
  height: 30.72px}

 .md\:
    h-30px {
  height: 30px}

 .md\:
    max-h-220px  {
  max-height: 220px !important}

 .md\:
    w-110px {
  width: 110px}

 .md\:
    w-135px {
  width: 135px}

 .md\:
    w-136px {
  width: 136px}

 .md\:
    w-140px {
  width: 140px}

 .md\:
    w-150px {
  width: 150px}

 .md\:
    w-30px {
  width: 30px}

 .md\:
    w-55\% {
  width: 55%}

 .md\:
    w-76\.8px {
  width: 76.8px}

 .md\:
    justify-center {
  justify-content: center}

 .md\:
    justify-around {
  justify-content: space-around}

 .md\:
    pt-130px {
  padding-top: 130px}


@media (min-width: 1024px) {
 .lg\:top-\[60\%\] {
  top: 60%}

 .lg\:
    top-110\% {
  top: 110%}

 .lg\:
    w-50\% {
  width: 50%}

 .lg\:
    text-2xl {
  font-size: 1.5rem;
    line-height: 2rem}
}
.xans-element- {
}

.attend_m.xans-layout-attendbanner {
    display: none;
    margin: 24px 8px;
    background-color: #fff;
    border-radius: 4px;
    overflow: hidden;
}

.attend_m.xans-layout-attendbanner
    img {
    width: 100%;
}

.left_search {
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
}

.top_search.xans-layout-searchheader {
    margin: 3px 16px;
}

.top_search.xans-layout-searchheader .mobile.btnDelete {
    position: absolute;
    top: 16px;
    right: 53px;
    border-radius: 100%;
    padding: 2px;
}

.xans-layout-searchheader {
    position: relative;
    margin: 16px 2px;
    box-sizing: border-box;
}

.xans-layout-searchheader
    fieldset {
    border: 2px solid var(--point_color);
    border-radius: 30px;
    background: #fff;
}

.xans-layout-searchheader #keyword {
    width: 72%;
    height: 46px;
    margin: 0 16px 0 20px;
    padding: 0;
    border: 0;
    line-height: 46px;
    font-size: 15px;
    color: #333;
    font-weight: 400;
    background: none;
    outline: none;
    box-sizing: border-box;
}

.xans-layout-searchheader
    i.xi-search {
    position: absolute;
    top: 11px;
    right: 18px;
    font-size: 27px;
    vertical-align: middle;
    cursor: pointer;
    color: var(--point_color);
}

.popular {
    margin: 0 0 5px 12px;
}

.popular
    a {
    color: #ababab;
    padding: 0 5px;
    font-size: 14px;
    font-weight: 300;
}

.popular
    a:hover {
    color: #000;
}

.bestKeyword {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.bestKeyword .tit {
    display: none;
}

.bestKeyword
    a {
    padding: 7px 21px;
    margin: 2px;
    border-radius: 30px;
    border: 2px solid #ff6723;
    background: #fff;
    display: inline-block;
    font-size: 16px;
    color: #333;
    font-weight: 400;
}

#container {
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
}



.expand #container {
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
}

.expand #aside {
    z-index: 99;
    overflow-x: hidden;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
}

.dimmed {
    display: none;
    position: fixed;
    left: 0px;
    top: 0;
    right: 0px;
    bottom: 0px;
    z-index: 150;
    background: rgba(0, 0, 0, .4);
}

.dimmed.show {
    display: block;
}

#aside {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0px;
    bottom: 0;
    overflow: auto;
    min-width: 225px;
    max-width: 420px;
    width: 100%;
    background-color: #fff;
    border-right: 1px solid #ddd;
    visibility: visible;
    z-index: 500;
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
}

#aside .top_section {
    padding: 16px;
    border-bottom: 1px solid #eee;
}

#aside .member {
    font-size: 14px;
    font-weight: normal;
}

#aside .member .log_name {
    color: #000;
    font-weight: 500;
}

#aside .member
    strong {
    color: #000;
}

#aside .member
    p {
    display: inline-block;
    padding: 0 4px;
    margin: 0 4px 0 0;
    font-size: 16px;
}

#aside .member
    i {
    font-size: 22px;
    vertical-align: middle;
}

#aside .member
    span {
    font-size: 14px;
    vertical-align: middle;
    font-weight: bold;
}

#aside .member
    span.level {
    margin: 0 20px 0 5px;
    font-weight: bold;
}

#aside .member
    span.level i {
    color: #ff6723;
    margin: 0 5px;
}

#aside .member
    p a {
    color: #555;
}

#aside .member
    p.reg a {
    color: #ff6723;
}

#aside .btnClose {
    position: absolute;
    top: 10px;
    right: 18px;
    display: block;
    padding: 8px;
}

#aside .btnClose
    i {
    font-size: 20px;
    font-weight: 700;
}

#aside .membership {
    padding: 0;
    margin: 8px 0 0;
}

#aside .membership
    li {
    display: inline-block;
    margin: 0 15px 0 0;
    padding: 0 4px;
    font-size: 13px;
}

#aside .membership
    li:last-child {
    margin: 0;
}

#aside .membership
    li a {
    color: #000;
}

#aside .xans-myshop-main {
    margin: 0 14px;
    padding: 16px 0;
    background: #fff;
    border: 0;
    border-bottom: 1px dashed #ddd;
}

#aside .xans-myshop-main::after {
    clear: both;
    content: "";
    display: block;
}

#aside .xans-myshop-main .icon {
    float: left;
    width: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-sizing: border-box;
    -o-sizing: border-box;
    box-sizing: border-box;
}

#aside .xans-myshop-main
    i {
    display: block;
    font-size: 32px;
    color: #222;
    margin: 0 0 8px;
}

#aside .xans-myshop-main
    em {
    display: block;
    line-height: 24px;
    font-style: normal;
}

#aside .xans-myshop-main .icon>
    a {
    display: block;
    color: #333;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
}

#aside .xans-myshop-main .icon>
    a span {
    font-size: 14px;
    font-weight: bold;
    color: #ff6723;
    display: block;
}

#aside .xans-myshop-main:after {
    content: "";
    display: block;
    clear: both;
}

#aside .cateWrap {
    margin: 10px auto 32px;
}

#aside .categoryCont {
    padding: 0 20px;
}

#aside .side_cs {
    position: relative;
    padding: 16px;
    margin: 0 0 30px;
    border-top: solid 1px #ddd;
    display: none;
}

#aside .side_cs
    h3 {
    font-size: 14px;
    line-height: 26px;
    color: #222;
    font-weight: 500;
}

#aside .side_cs
    h3 i {
    font-size: 24px;
    vertical-align: middle;
}

#aside .side_cs .tel {
    font-size: 26px;
    font-weight: 700;
    color: var(--point_color);
}

#aside .side_cs .time {
    font-size: 13px;
    font-weight: 400;
    margin: 4px 0 0;
}

#aside .eventBanner {
    margin: 0 16px 30px;
    margin-top: auto;
}

#aside .eventBanner .event_tit {
    display: none;
}

#slideCateList
    h2 {
    position: relative;
    padding: 0 34px 0 0;
    line-height: 48px;
    color: #222;
    font-weight: 500;
    font-size: 14px;
    margin: 16px 0 0;
    cursor: pointer;
}

#slideCateList
    h2.selected {
    font-weight: 500;
}

#slideCateList
    h2.selected .icoCategory {
    background-image: url("../img/bg_snb_1depth_on.gif");
}

#slideCateList
    h2 .icoCategory {
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 40px;
    padding: 0;
    border: 0;
    text-indent: 100%;
    white-space: nowrap;
    cursor: pointer;
    background: url("../img/bg_snb_1depth.gif") no-repeat 50% 50%;
    background-size: 30px 18px;
}

#aside .categoryList {
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: 400;
}

#aside .categoryList
    ul {
    display: none;
}

#aside .categoryList
    li {
    position: relative;
}

#aside .categoryList
    li .slideSubMenu {}

#aside .categoryList
    li:nth-child(2n) .slideSubMenu {
    margin-left: -100% !important;
}

#aside .categoryList
    li.selected>ul.slideSubMenu {
    display: flex;
    flex-wrap: wrap;
    background: #f7f7f7;
    margin: 0 0 11px;
    border-radius: 3px;
}

#aside .categoryList
    li .slideSubMenu li {
    flex-basis: 50%;
}

#aside .categoryList
    li.selected>ul {
    display: block;
    width: 200%;
    position: relative;
    z-index: 5;
}

#aside .categoryList
    li.selected>a.cate {
    color: var(--point_color);
}

#aside .categoryList
    li.noChild>a.cate {
    background-image: none !important;
}

#aside .categoryList
    li.noChild:first-child>a.cate {
    border-top: 0;
}

#aside .categoryList
    li a.cate img {
    display: inline-block;
    width: 40px;
    margin: 0 10px 0 0;
    border-radius: 6px;
}

#aside .categoryList
    li.selected.noChild {
    background-color: transparent;
}

#aside .categoryList>
    li.selected .slideSubMenu li {}

#aside .categoryList>
    li {
    border-top: 1px solid #fff;
    flex: 1;
    flex-basis: 50%;
}

#aside .categoryList>
    li>span {}

#aside .categoryList>
    li:first-child {
    border-top: 0;
}

#aside .categoryList>
    li>a.cate {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: #222;
}

#aside .categoryList>
    li>a.cate>i {
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: top;
    border-radius: 3px;
    margin: 0 4px 0 0;
}

#aside .categoryList>
    li>ul>li>a.cate {
    font-size: 13px;
    line-height: 1.5em;
    font-weight: 400;
    color: #555;
    padding: 12px;
}

#aside .categoryList>
    li>ul>li>a.view {
    top: 14px;
}

#aside .categoryList>
    li>ul>li>ul>li>a.cate {
    font-size: 13px;
    color: #555;
    padding-left: 20px;
}

#aside .categoryList>
    li>ul>li>ul>li>a.view {
    top: 12px;
}

#aside .categoryList>
    li.selected>ul>li>ul>li>ul {
    width: 100%;
}

#aside .categoryList>
    li>ul>li>ul>li>ul>li a.cate {
    font-size: 13px;
    padding: 8px 24px;
    color: #555;
}

#aside .categoryList
    a.cate {
    display: block;
    padding: 10px 20px 10px 0;
    word-wrap: break-word;
}

#aside .categoryList
    a.view {
    position: absolute;
    right: 24px;
    top: 17px;
    padding: 0 4px;
    line-height: 15px;
    color: #fff;
    font-size: 10px;
    font-weight: 400;
    background: var(--Btn_opacity);
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    border-radius: 30px;
}

#aside .categoryList
    a.view:hover {
    background: #000;
}

#aside .categoryList
    li.noChild>a.view {
    display: none;
}

#aside #slideProjectList {
    border-bottom: 1px dashed #eee;
}

#aside #slideCateList .projectCont
    h2 {
    border-bottom: 0;
}

#aside .projectCont .categoryList {
    display: none;
}

#aside .projectCont .categoryList>
    li {
    border: 0;
}

#aside .projectCont .categoryList>
    li>a.cate {
    font-size: 14px;
    font-weight: 400;
    color: #555;
    padding-left: 20px;
}

#aside
    h2.selected+.boardList {
    display: flex !important;
    flex-wrap: wrap;
    background: #f7f7f7;
    border-radius: 3px;
    padding: 10px 0;
}

#aside .boardList {}

#aside .boardList>
    li {
    flex-basis: 50%;
}

#aside .boardList>
    li>a.cate2 {
    display: block;
    padding: 4px 12px;
    word-wrap: break-word;
    font-size: 13px;
    color: #555;
}

#aside .bookmarkCategory {
    font-size: 13px;
}

#aside .bookmarkCategory
    li {
    position: relative;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #fff;
}

#aside .bookmarkCategory
    li:first-child {
    border-top: 0;
}

#aside .bookmarkCategory
    li.selected {
    background-color: #508bed;
}

#aside .bookmarkCategory
    li a {
    display: block;
    margin-right: 35px;
    padding: 11px 10px 11px 17px;
    word-wrap: break-word;
}

#aside .bookmarkEmpty {
    padding: 8px 0 6px 12px;
    color: #555;
    font-size: 12px;
    line-height: 16px;
    background: #fff;
}

#aside .bookmarkEmpty
    img {
    width: 11px;
    height: 11px;
    vertical-align: -1px;
}

#aside .xans-layout-category
    li .icoBookmark,
#aside .bookmarkCategory li .icoBookmark {
    display: none;
    overflow: hidden;
    position: absolute;
    left: -12px;
    top: 0;
    width: 30px;
    height: 41px;
    padding: 0;
    border: 0;
    text-indent: 100%;
    white-space: nowrap;
    background: url("//img.echosting.cafe24.com/skin/mobile_ko_KR/layout/ico_bookmark.png") no-repeat 5px 14px;
    background-size: 13px 13px;
    cursor: pointer;
}

#aside .xans-layout-category
    li .icoBookmark.selected,
#aside .bookmarkCategory li .icoBookmark.selected {
    display: none;
    background-image: url("//img.echosting.cafe24.com/skin/mobile_ko_KR/layout/ico_bookmark_on.png");
}

#aside .multishop .xans-layout-multishoplistmultioptioncountry
    li a {
    padding: 9px 10px 11px 17px;
    font-size: 13px;
}

#aside .xans-multishop-listitem {
    position: absolute;
    top: 14px;
    left: 14px;
    font-size: 0;
}

#aside .xans-multishop-listitem
    li {
    display: inline-block;
    padding: 2px;
    width: 20px;
}

#aside .xans-multishop-listitem
    li a {
    word-wrap: break-word;
}

#aside .xans-multishop-listitem
    li a img {
    width: 100%;
}
    html,
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
img {
    /* margin: 0; */
    /* padding: 0; */
}
    html {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}
    body,
code {
    font: 0.75em 'Montserrat', 'Pretendard', 'Noto Sans KR', Verdana, Dotum, AppleGothic, sans-serif;
    color: #353535;
    background: #fff;
}
    body {}
    body#popup {
    min-width: 0;
}
    li {
    list-style: none;
}
    img,
fieldset {
    border: none;
}
    table {
    width: 100%;
    border: 0;
    border-spacing: 0;
    border-collapse: collapse;
}
    caption {
    display: none;
}
    th,
td {
    border: 0;
}
    button {
    overflow: visible;
    margin: 0;
    border: 0;
    cursor: pointer;
}
    hr.layout {
    display: none;
}
    a {
    /* text-decoration: none; */
    /* color: #000; */
}
    a:hover {
    text-decoration: none;
    transition: all 0.3s ease;
    -khtml-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
    a:active {
    text-decoration: none;
}
    h3 {
    font-weight: 400;
}

.objHidden {
    visibility: hidden;
    position: absolute;
    left: -1000px;
    top: -1000px;
    height: 0;
    width: 0;
}

#content_CONTAINER
    table,
#bi_inquire_content_CONTAINER table {
    border: 0;
    margin: 0 0 -1px;
}

#content_CONTAINER
    table:before,
#bi_inquire_content_CONTAINER table:before {
    display: none;
}

#content_CONTAINER
    td,
#bi_inquire_content_CONTAINER td {
    width: auto !important;
    padding: 0;
}
    table.nneditor-table {
    width: auto !important;
}

#progressPaybarBackground {
    position: absolute;
    z-index: 99;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

#progressPaybarView {
    position: absolute;
    z-index: 100;
    top: 160px;
    left: 20px;
    width: 471px;
    font-size: 12px;
}

#progressPaybarView .box {
    height: 180px;
    background: url(//img.cafe24.com/images/ec_hosting/popup/layer_guide/bg_layer_box1.gif) 0 0 no-repeat;
}

#progressPaybarView .box .graph {
    padding: 15px 0 0 0;
    text-align: center;
}

#progressPaybarView .box .graph
    span {
    display: block;
    text-align: center;
    margin: 20px 0;
}

#progressPaybarView .box .txt {
    text-align: center;
    padding: 15px 0 0;
    color: #555555;
}
    div.layerProgress {
    filter: alpha(opacity=40);
    opacity: 0.4;
    -moz-opacity: 0.4;
    background-color: #999;
}

#skipNavigation {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 0;
}

#skipNavigation
    p,
#skipNavigation ul,
#skipNavigation ul li {
    height: 0;
}

#skipNavigation
    p a {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin-left: -1px;
    margin-bottom: -1px;
    text-align: center;
    color: #000;
    white-space: nowrap;
}

#skipNavigation
    p a:focus,
#skipNavigation p a:hover,
#skipNavigation p a:active {
    width: 100%;
    height: auto;
    padding: 10px 0;
    background: #c4122f;
    color: #fff;
    z-index: 100;
}

.displaynone {
    display: none;
}

.dimmed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0.8;
    filter: alpha(opacity=80);
}
    body {
    background: url(../img/bg_img.jpg) no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
    height: 100%;
}

#left_wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 320px;
    height: 100%;
    min-height: 660px;
    position: fixed;
    top: 50%;
    right: 52%;
    transform: translateY(-50%);
    box-sizing: border-box;
    margin-right: 300px;
}

#right_wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 320px;
    height: 100%;
    min-height: 660px;
    position: fixed;
    top: 50%;
    left: 52%;
    transform: translateY(-50%);
    box-sizing: border-box;
    margin-left: 300px;
}

#wrap {
    position: relative;
    width: 100%;
    margin: 0 auto 0;
    max-width: 720px;
    min-height: 100vh;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    background-color: #111;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 0 60px;
}

#container {
    position: relative;
    margin: 46px auto 0;
    zoom: 1;
}
#container.sub_page {
    background-color: #111111;
}
#layout #container {
    padding-top: 10px;
}

#layout_titleArea #container {
    padding: 0;
}

#layout_titleArea #container #container:after {
    content: "";
    display: block;
    clear: both;
}

#sidebar {
    float: left;
    width: 180px;
}

#sidebar .banner {
    padding: 0 0 20px;
    border-bottom: 1px solid #e8e8e8;
}

#sidebar .banner
    p a {
    display: block;
    position: relative;
    height: 20px;
    margin: 0 0 0 10px;
    padding: 10px 0 10px 25px;
    font-size: 13px;
    font-weight: bold;
    line-height: 20px;
}

#contents {
    max-width: 100%;
    padding: 20px;
    box-sizing: border-box;
    margin: 20px auto 40px auto;
    position: relative;
    color: #aaa;
    overflow: auto;
}

#banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 90px;
}

.img_zoom,
.img_zoom
    a {
    overflow: hidden;
}

.img_zoom
    a img {
    -webkit-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}

.img_zoom
    a:hover img {
    -webkit-transition: all 0.3s ease-in;
    -webkit-transform: scale(1.1);
    -ms-transition: all 0.3s ease-in;
    -ms-transform: scale(1.1);
    -moz-transition: all 0.3s ease-in;
    -moz-transform: scale(1.1);
    transition: all 0.3s ease-in;
    transform: scale(1.1);
}

#boardArea {
    overflow: hidden;
    margin: 50px 0 0;
    border-top: 1px solid #ddd;
}

#bannerArea {
    margin: 22px 0 0;
}

#bannerArea
    h2 {
    margin: 0 0 16px;
    font-weight: normal;
    font-size: 20px;
    color: #222;
    text-align: center;
}

.top_titleArea {
    width: 100%;
    margin: 0 auto;
}

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

.top_titleArea .imgArea
    img {
    width: 100%;
}

.top_titleArea .path {
    padding-top: 10px;
}

.top_titleArea .path
    ol {
    padding-right: 16px;
    box-sizing: border-box;
}

.path {
    overflow: hidden;
    height: 36px;
    line-height: 36px;
    font-size: 12px;
    padding: 0 3%;
    margin: 0;
    border-top: 0;
    border-bottom: solid 1px #ddd;
    background-color: #fff;
}

.path
    span {
    overflow: hidden;
    position: absolute;
    width: 0;
    height: 0;
    white-space: nowrap;
    text-indent: 100%;
}

.path
    ol {
    float: right;
}

.path
    li {
    float: left;
    padding: 0;
    margin: 0 0 0 8px;
    color: #555;
    line-height: 36px;
    vertical-align: middle;
}

.path
    li:first-child {
    background: none;
}

.path
    li a {
    color: #555;
    line-height: 36px;
    vertical-align: middle;
}

.path
    li strong,
.path li strong a {
    color: #222;
}

.boardMain {
    overflow: hidden;
    zoom: 1;
}

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

.boardMain
    td img {
    vertical-align: middle;
    margin: 1px;
}

.boardMain .board {
    position: relative;
}

.boardMain .board>
    div {
    margin: 40px 0;
}

.boardMain .half {
    display: inline-block;
    float: left;
    width: 50%;
    padding: 0 16px;
    box-sizing: border-box;
}

.boardMain .leftArea {
    float: left;
    width: 50%;
}

.boardMain .leftArea .board {
    margin: 0 23px 65px 0;
}

.boardMain .rightArea {
    float: right;
    width: 50%;
}

.boardMain .rightArea .board {
    margin: 0 0 65px 23px;
}

.boardMain .board
    h3 {
    margin: 0 0 13px;
    padding: 0 0 8px;
    height: 28px;
    font-size: 18px;
    font-weight: 400;
    color: #333;
    border-bottom: 1px solid #ddd;
}

.boardMain .board .btnLink {
    position: absolute;
    top: 3px;
    right: 0;
}


.boardMain .board .galleryList {
    overflow: hidden;
}

.boardMain .board .galleryList
    ul {
    overflow: hidden;
}

.boardMain .board .galleryList
    li {
    float: left;
    position: relative;
    width: 33.333%;
    padding: 0 8px 12px 8px;
    word-break: break-all;
    box-sizing: border-box;
}

.boardMain .board .galleryList
    li span {
    display: block;
    font-size: 12px;
    color: #777;
}

.boardMain .board .galleryList
    li .imgLink {
    height: 0;
    padding-bottom: 100%;
}

.boardMain .board .galleryList
    li .imgLink,
.boardMain .board .galleryList li .imgLink:hover {
    display: block;
    font-size: 12px;
}

.boardMain .board .galleryList
    li .imgLink img {
    width: 100%;
}

.boardMain .board .galleryList
    li .subject {
    display: block;
    font-size: 14px;
    color: #555;
    margin: 8px 0;
}

#modalBackpanel {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
    background: #000;
}

#modalContainer {
    display: none;
    position: absolute;
    top: 100px;
    left: 100px;
    z-index: 10001;
    width: 975px;
    height: 720px;
    border: 1px solid #333;
    background: #fff;
}

#modalContainer #modalContent {
    width: 100%;
    height: 100%;
}

:
    root {
    --point_color: #ff6723;
    --main_border: #eee;
    --Btn_opacity: rgba(0, 0, 0, 0.4);
}

.popupWrap {
    position: fixed;
    bottom: 0;
    display: block;
    width: 100%;
    max-width: 538px;
    box-sizing: border-box;
    margin: 0 auto;
    background: #fff;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    animation: popup 3s ease-in-out alternate;
    z-index: 8;
    transition: 3s;
}

.main_popup {
    position: relative;
}

.main_popup .swiper-pagination {
    width: auto;
    left: 5%;
    bottom: 16px;
    font-size: 13px;
    line-height: 1em;
    color: #fff;
    background: var(--Btn_opacity);
    padding: 5px 12px 4px;
    border-radius: 30px;
}

.main_popup .img_area {}

.main_popup .img_area
    img {
    width: 100%;
}

.main_popup .txt {
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
}

.main_popup .txt
    h3 {
    font-size: 20px;
    line-height: 1.3em;
    font-weight: 500;
    letter-spacing: -.5px;
}

.main_popup .txt
    p {
    font-size: 14px;
    line-height: 1.4em;
    font-weight: 400;
    letter-spacing: -.2px;
    margin: 10px 0 0;
}

.popupBtn {
    display: flex;
    background: #fff;
    border-top: 1px solid var(--main_border);
    text-align: center;
}

.popupBtn>
    span {
    padding: 16px;
    flex: 1;
    font-size: 14px;
    cursor: pointer;
}

.popupBtn .popup_checkBox {
    border-right: 1px solid var(--main_border);
}

.popupBtn .popup_checkBox
    label {
    cursor: pointer;
}

.popupBtn .popup_closeBtn {}

.popupBtn .popup_closeBtn
    i {
    font-weight: 700;
}
    @keyframes popup {
    0% {
        bottom: -100%;
    }
    100% {
    bottom: 0;
    }
}

.main_title {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 0 0 8px;
    padding: 0 16px;
    gap: 0 16px;
}

.main_title
    h2 {
    display: flex;
    flex-direction: column;
    font-size: 20px;
    color: #222;
    font-weight: 500;
    letter-spacing: -0.5px;
}

.main_title .sub {
    font-size: 14px;
    color: #555;
    font-weight: 400;
    letter-spacing: -0.2px;
    margin: 4px 0 0;
}

.main_title .more_btn {
    font-size: 14px;
    line-height: 36px;
    height: 36px;
    color: #000;
    font-weight: 400;
    border: 1px solid #000;
    padding: 0 20px;
    border-radius: 30px;
    margin: 0 0 10px;
}

.main_title .more_btn:hover {
    background: #000;
    color: #fff;
}

.round {
    border-radius: 10px;
    overflow: hidden;
    max-height: 300px;
}
.round
    a {
    display: block;
    overflow: hidden;
}
.round
    em {

color: #fff;
    position: absolute;
    right: 0;
    top: 0;
    margin: 4% 20% 0 0;
    font-size: 24px;
    font-weight: bold;
}
.round
    img {
    max-width: 100%;
    height: auto;
}
.left_fix_img {
    padding: 0 2px;
}

.left_fix_img .tet_box {}

.left_fix_img .tet_box
    h3 {
    font-size: 32px;
    font-weight: 400;
    line-height: 1.3em;
    margin: 16px 0 0;
}

.left_fix_img .tet_box
    h3 span {
    font-weight: 700;
}

.left_download {
    position: absolute;
    bottom: 52px;
    padding: 2px;
    box-sizing: border-box;
}

.left_download
    h3 {
    font-size: 16px;
    color: #333;
    font-weight: 500;
    letter-spacing: -.5px;
}

.left_download
    p {
    font-size: 14px;
    color: #555;
    letter-spacing: -.2px;
}

.left_download .download {
    display: flex;
    gap: 6px;
    margin: 10px 0 0;
}

.left_download .download
    span {
    flex-basis: 40%;
}

.left_download .download
    span img {
    width: 100%;
}

#right_wrap
    img {
    width: 100%;
}

.eventBanner {
    position: relative;
    margin: 30px 8px;
}

.eventBanner .event_tit {
    font-size: 20px;
    font-weight: 600;
    margin: 16px auto 10px;
}

.eventBanner .img_zoom {
    position: relative;
}

.eventBanner
    img {
    width: 100%;
}

.eventBanner .txt {
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
}

.eventBanner .txt
    h3 {
    font-size: 17px;
    line-height: 1.3em;
    font-weight: 500;
    letter-spacing: -.5px;
}

.eventBanner .txt
    p {
    font-size: 13px;
    line-height: 1.4em;
    font-weight: 400;
    letter-spacing: -.2px;
    margin: 4px 0 0;
}

.pc {}

.mobile {
    display: none}

.topBanner.swiper-container {
    width: 100%;
    height: 40px;
}

.topBanner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.topBanner
    ul li {
    text-align: center;
    height: 40px;
    background: #fde56a;
}

.topBanner
    ul li a {
    font-size: 14px;
    line-height: 40px;
    font-weight: 300;
    color: #000;
}

.topBanner .top_closeBtn {
    position: absolute;
    bottom: 14px;
    right: 5%;
    width: 11px;
    height: 11px;
    cursor: pointer;
    z-index: 999;
}

.topBanner .top_closeBtn
    img {
    width: 100%;
}

.topBanner .top_checkBox {
    position: absolute;
    bottom: 12px;
    right: 6.5%;
    font: 11px 돋움;
    color: #fafafa;
    z-index: 999;
}

#header {
    position: fixed;
    width: 100%;
    max-width: 720px;
    z-index: 111;
    left: 50%;
    top: 0;
    margin-left: -360px;
}

#header .inner {
    position: relative;
    width: 100%;
    z-index: 1;
    margin: 0 auto;
}

#header .inner:after {
    content: "";
    display: block;
    clear: both;
}

#header .topArea {
    zoom: 1;
}

#header .topArea p {}

#header .topArea:after {
    content: "";
    display: block;
    clear: both;
}

#header .topArea02 {
    position: relative;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0 3%;
    box-sizing: border-box;
    z-index: 2;
    background-color: #feda48;
    border-bottom: solid 2px #222;
    background-image: linear-gradient(to right, #feda48, #efc89d);
}

#header .topArea02 .right_icon {
    display: flex;
    position: absolute;
    z-index: 3;
    margin-right: 10px;
    right: 0;
}

#header .topArea02 .right_icon
    a i {
}

#header .topArea02 .right_icon
    a span {
}

#header .topArea02 .right_icon strong {
    margin: 0;
    color: #222;
    vertical-align: inherit;
    font-weight: bold;
    font-size: 12px;
}

#header .topArea02 .right_icon>
    div {
}
.blink {
    font-style: normal;
    animation: blink .3s linear infinite;
    -webkit-animation: blink .3s linear infinite;
    -moz-animation: blink .3s linear infinite;
    -ms-animation: blink .3s linear infinite;
    -o-animation: blink .3s linear infinite;
}

@keyframes blink {
    0% {
        color: rgb(165, 37, 37);
    }
    100% {
        color: rgb(7, 244, 30);
    }
}

@-webkit-keyframes blink {
    0% {
        color: rgb(165, 37, 37);
    }
    100% {
        color: rgb(7, 244, 30);
    }
}

@-moz-keyframes blink {
    0% {
        color: rgb(165, 37, 37);
    }
    100% {
        color: rgb(7, 244, 30);
    }
}

@-ms-keyframes blink {
    0% {
        color: rgb(165, 37, 37);
    }
    100% {
        color: rgb(7, 244, 30);
    }
}

@-o-keyframes blink {
    0% {
        color: rgb(165, 37, 37);
    }
    100% {
        color: rgb(7, 244, 30);
    }
}
#header .topArea02 .right_icon .cartWrap .count {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 11px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    padding: 1px;
    background: var(--point_color);
    border-radius: 100%;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    text-align: center;
}

#header .xans-layout-logotop {
    position: absolute;
    box-sizing: border-box;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 2;
}

#header .xans-layout-logotop
    a {
}

#header .xans-layout-logotop
    img {
    width: auto;
    max-height: 40px;
}

#menuFix {
    width: 100%;
    background: #fff;
    max-width: 538px;
    margin: 0 auto;
    box-sizing: border-box;
}

#menuFix.menuFix_fixed {
    max-width: 538px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 90;
    zoom: 1;
}

#menuFix.menuFix_fixed .topCate .category {
    display: none;
}

#header .topCate {
    text-align: center;
}

#header .topCate .Cate {
    border-bottom: 1px solid var(--main_border);
}

#header .topCate .Cate
    ul {
    display: flex;
    justify-content: space-around;
}

#header .topCate .Cate
    ul li {
    padding: 11px 0;
    width: auto;
    position: relative;
}

#header .topCate .Cate
    ul li a {
    display: flex;
    color: #333;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -.5px;
    vertical-align: middle;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#header .topCate .Cate
    ul li:hover a {
    color: var(--point_color);
}

#header .topCate .Cate
    ul li a i {
    color: var(--point_color);
}

#header .topCate .Cate
    ul li a:after {
    height: 2px;
    width: 100%;
    background: var(--point_color);
    content: "";
    position: absolute;
    left: 0;
    bottom: 2px;
    transform: scaleX(0);
    transition: 0.3s;
}

#header .topCate .Cate
    ul li a:hover:after {
    transform: scaleX(1);
}

.side {
    position: relative;
    z-index: 8;
}

.side .btnCate {
    position: relative;
    display: block;
    width: 100%;
    height: 30px;
    line-height: 30px;
    background: transparent;
    box-sizing: border-box;
    cursor: pointer;
    z-index: 1;
}

.side .btnCate
    i {
    display: block;
    float: left;
    font-size: 32px;
    line-height: 36px;
    vertical-align: middle;
}

.side .btnCate
    span {
    display: block;
    float: left;
    font-size: 16px;
    vertical-align: middle;
    line-height: 36px;
    margin: 3px 0 0 5px;
}

.fixed_btn2 {
    cursor: pointer;
    margin: 0 auto;
    background-color: #efc89d;
    background-image: linear-gradient(to top, #feda48, #efc89d);
    border-top: 2px solid #fff;
    box-sizing: border-box;
    position: fixed;
    right: 0;
    bottom: 0px;
    max-width: 720px;
    z-index: 111;
    left: 50%;
    top: auto;
    margin-left: -360px;
}

.fixed_btn2
    ul.box {
    display: flex;
    justify-content: space-around;
    padding: 7px 0;
    background-color: transparent;
}

.fixed_btn2
    ul.box li {
    position: relative;
    flex-basis: 20%;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.fixed_btn2
    ul.box li.home {}
.fixed_btn2
    ul.box li.home::after {
    content: "";
    position: absolute;
    background-color: #fef800;
    width: 80px;
    height: 80px;
    top: 0;
    left: 50%;
    border-radius: 50%;
    margin-top: -30px;
    margin-left: -40px;
    filter: drop-shadow(0em -6px 8px rgba(0, 0, 0, 0.06));
}
.fixed_btn2
    ul.box li.home a {
    
position: relative;
    z-index: 2;
    width: 80px;
    top: 0;
    margin: -10px auto 0;
}
.fixed_btn2
    ul.box li img {
    width: 28px;
    transition: 0.3s;
}

.fixed_btn2
    ul.box li p {
    font-size: 13px;
    padding-top: 5px;
    transition: 0.3s;
    color: #111;
}

.fixed_btn2
    ul.box li:hover i,
.fixed_btn2 ul.box li:hover p {}

#layout_detail .fixed_btn {
    bottom: 130px;
}

#layout_detail .ec-base-button.gFixed {
    display: none;
    bottom: 60px;
}

#layout_detail .xans-layout-footerpackage {
    padding-bottom: 120px;
}

.swiper-container.mainSlide {
    position: relative;
    padding-bottom: 0px;
    margin: 0 auto;
    max-width: 1920px;
    width: 100%;
    height: 100%;
    text-align: center;
    max-height: 250px;
}

.mainSlide .swiper-slide {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

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

.mainSlide
    a {
    line-height: 0;
}

.mainSlide .swiper-slide .txt {
    position: absolute;
    top: 30%;
    left: 5%;
    color: #000;
    letter-spacing: -0.3px;
    text-align: left;
    width: 80%;
}

.mainSlide .swiper-slide .txt.right {
    left: auto;
    right: 4%;
}

.mainSlide .swiper-slide .txt.wt {
    color: #fff;
    text-shadow: 1px 1px 2px rgb(0 0 0 / 45%);
}

.mainSlide .swiper-slide .txt
    h3 {
    font-size: 24px;
    line-height: 1.3em;
    font-weight: 500;
    letter-spacing: -1px;
    color: #fff;
    text-shadow: 2px 2px 3px #000;
}

.mainSlide .swiper-slide .txt
    p {
    font-size: 15px;
    line-height: 1.4em;
    font-weight: 400;
    margin: 10px 0 0;
    letter-spacing: -.5px;
    color: #eee;
    text-shadow: 2px 2px 3px #000;
}

.mainSlide .swiper-slide .txt .btn {
    display: inline-block;
    position: relative;
    border: 2px solid #fff;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    padding: 0 16px;
    font-size: 13px;
    line-height: 36px;
    height: 36px;
    color: #fff;
    font-weight: 500;
    margin: 15px 0 0;
    overflow: hidden;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    text-shadow: 2px 2px 3px #000;
    z-index: 1;
}

.mainSlide .swiper-slide .txt .btn:after {
    content: "";
    width: 0%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.mainSlide .swiper-slide .txt .btn:hover {
    color: #fff;
}

.mainSlide .swiper-slide .txt .btn:hover:after {
    width: 100%;
    z-index: -1;
}

.mainSlide .swiper-slide .txt .btn
    i {
    padding: 0 0 0 16px;
    color: #fff;
}

.mainSlide .swiper-slide .txt .btn.wt {
    border: 1px solid #fff;
    color: #fff;
}

.mainSlide .swiper-slide .txt .btn.wt:after {
    background: #fff;
}

.mainSlide .swiper-slide .txt .btn.wt:hover {
    color: #000;
}

.mainSlide .options {
    position: absolute;
    bottom: 16px;
    right: 14px;
    margin: 0 auto;
    display: flex;
    display: none;
}

.mainSlide .options .page_option {
    display: flex;
    border-radius: 30px;
    background: var(--Btn_opacity);
    margin: 0 2px;
    z-index: 10;
}

.mainSlide .swiper-pagination {
    position: relative;
    width: 40px;
    height: 24px;
    line-height: 28px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
}

.mainSlide .btns {
    display: flex;
    z-index: 10;
}

.mainSlide .btns
    button {
    width: 24px;
    height: 24px;
    background: var(--Btn_opacity);
    border-radius: 100%;
    box-sizing: border-box;
    margin: 0 2px;
    cursor: pointer;
}

.mainSlide .btns
    button:hover {
    opacity: 0.5;
}

.mainSlide .btns
    i {
    font-size: 18px;
    color: #fff;
    line-height: 24px;
}

.mainSlide .swiper-button-next,
.mainSlide .swiper-button-prev {
    position: relative;
    top: auto;
    left: 0;
    right: 0;
    background: none;
    box-shadow: none;
    width: 24px;
    height: 24px;
}

.mainSlide .swiper-button-prev::before,
.mainSlide .swiper-button-next::before {
    top: 8px;
}

.mainSlide .swiper-button-prev::after,
.mainSlide .swiper-button-prev::before {
    left: 7px;
}

.mainSlide .swiper-button-prev::after,
.mainSlide .swiper-button-next::after {
    top: 14px;
}

.mainSlide .swiper-button-next::after,
.mainSlide .swiper-button-next::before {
    left: 7px;
}

.cateBanner {
    position: relative;
    width: 100%;
    background: #feda48;
    background-size: 100% 100%;
}

.cateBanner .icon_area {
    display: flex;
    flex-wrap: wrap;
    padding: 0 12px;
    box-sizing: border-box;
    border-bottom: solid 2px #fff;
}

.cateBanner .icon_area .icon {
    text-align: center;
    vertical-align: top;
    padding: 4px;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.cateBanner .icon_area .icon>
    a {
    display: flex;
    flex-direction: column;
    row-gap: 4px;
}

.cateBanner .icon_area .icon_bg {
    max-width: 100px;
    margin: 0 auto;
}

.cateBanner .icon_area .icon_bg
    img {
    width: 100%;
}

.cateBanner .icon_area .icon_txt {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #333;
}

.cateBanner .icon_area.grid3 .icon {
    width: 33.333%;
}

.cateBanner .icon_area.grid4 .icon {
    width: 25%;
}

.cateBanner .icon_area.grid5 .icon {
    width: 20%;
}

.cateBanner .icon_area.grid6 .icon {
    width: 16.666%;
}

.main_video {
    position: relative;
    margin: 0 auto;
    width: 100%;
}

.main_video .video_area {
    position: relative;
    margin: 0;
    padding: 0 16px;
    box-sizing: border-box;
}

.main_video .video_area .video_box {
    position: relative;
    padding-bottom: 56%;
    height: 0;
}

.main_video .video_area .video_box
    iframe {
    position: absolute;
    top: -30%;
    left: 0;
    width: 100%;
    height: 160%;
}

.main_video .video_area .txt_box {
    position: absolute;
    left: 7%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.main_video .video_area .txt_box
    img {
    width: 100%;
    max-width: 124px;
}

.main_video .video_area .txt_box
    p {
    font-size: 27px;
    font-weight: 600;
    color: #fff;
    padding-top: 15px;
    line-height: 1.2em;
    width: 60%;
}

.mainBanner01 {
    position: relative;
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

.mainBanner01 .img_area
    img {
    width: 100%;
}

.mainBanner01 .txt {
    position: absolute;
    left: 12%;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
}

.mainBanner01 .txt
    h3 {
    font-size: 24px;
    line-height: 1.3em;
    font-weight: 500;
    letter-spacing: -.5px;
    display: inline-block;
}
.mainBanner01 .txt
    span {

background-color: #26e600;
    display: inline-block;
    margin-left: 10px;
    padding: 3px 10px;
    border-radius: 5px;
    vertical-align: top;
    text-shadow: 1px 1px 2px #000;
    font-weight: normal;
    border: solid 2px #fff;
}
.mainBanner01 .txt
    p {
    font-size: 12px;
    line-height: 12px;
    font-weight: 400;
    letter-spacing: -.2px;
    margin: 10px 0 0;
}

.mainBanner01 .txt .btn {
    display: inline-block;
    position: relative;
    border: 1px solid #000;
    padding: 8px 14px;
    font-size: 1rem;
    line-height: 14px;
    color: #000;
    margin: 15px 0 0;
    overflow: hidden;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    z-index: 1;
}

.mainBanner01 .txt .btn:after {
    content: "";
    width: 0%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.mainBanner01 .txt .btn:hover {
    color: #fff;
}

.mainBanner01 .txt .btn:hover:after {
    width: 100%;
    z-index: -1;
}

.mainBanner01 .txt .btn
    i {
    padding: 0 0 0 32px;
}

.mainBanner02 {
    position: relative;
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

.mainBanner02 .img_area
    img {
    width: 100%;
}

.mainBanner02 .txt {
    position: absolute;
    left: 6%;
    top: 50%;
    transform: translateY(-50%);
    color: #333;
}

.mainBanner02 .txt
    h3 {
    font-size: 20px;
    line-height: 1.3em;
    font-weight: 500;
    letter-spacing: -.5px;
}

.mainBanner02 .txt
    p {
    font-size: 14px;
    line-height: 1.4em;
    font-weight: 400;
    letter-spacing: -.2px;
    margin: 10px 0 0;
}

.mainBanner02 .txt .btn {
    display: inline-block;
    position: relative;
    border: 1px solid #000;
    padding: 8px 14px;
    font-size: 1rem;
    line-height: 14px;
    color: #000;
    margin: 15px 0 0;
    overflow: hidden;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    z-index: 1;
}

.mainBanner02 .txt .btn:after {
    content: "";
    width: 0%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.mainBanner02 .txt .btn:hover {
    color: #fff;
}

.mainBanner02 .txt .btn:hover:after {
    width: 100%;
    z-index: -1;
}

.mainBanner02 .txt .btn
    i {
    padding: 0 0 0 32px;
}

.couponBanner01 {
    position: relative;
    width: 100%;
    margin: 6% auto 0;
    padding: 0 16px;
    box-sizing: border-box;
}

.couponBanner01 .couponBox {
    position: relative;
    display: flex;
    border-radius: 4px;
    overflow: hidden;
}

.couponBanner01 .couponBox::before {
    content: "";
    position: absolute;
    top: -18px;
    right: 27%;
    display: inline-block;
    width: 24px;
    height: 24px;
    background: #fff;
    border-radius: 100%;
    border: 4px solid var(--point_color);
    z-index: 1;
}

.couponBanner01 .couponBox::after {
    content: "";
    position: absolute;
    bottom: -18px;
    right: 27%;
    display: inline-block;
    width: 24px;
    height: 24px;
    background: #fff;
    border-radius: 100%;
    border: 4px solid var(--point_color);
    z-index: 1;
}

.couponBanner01 .couponBox>
    div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 24px;
}

.couponBanner01 .left {
    flex: 3;
    background: #fff;
    border: 4px solid var(--point_color);
    border-right: 4px dashed var(--point_color);
}

.couponBanner01 .left
    h3 {
    font-size: 20px;
    color: #222;
    line-height: 1.3em;
    font-weight: 500;
    letter-spacing: -0.5px;
}

.couponBanner01 .left
    p {
    font-size: 14px;
    color: #555;
    font-weight: 400;
    letter-spacing: -0.2px;
}

.couponBanner01 .right {
    flex: 1;
    align-items: center;
    background: var(--point_color);
}

.couponBanner01 .right
    i {
    font-size: 60px;
    color: #fff;
}

.couponBanner01 .right
    span {
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    animation: blink 0.7s ease-in-out infinite alternate;
}
    @keyframes blink {
    0% {
        opacity: 0;
    }
    100% {
    opacity: 1;
    }
}

.longBanner01 {
    position: relative;
    width: 100%;
    margin: 40px auto 0;
    box-sizing: border-box;
}

.longBanner01 .img_area
    img {
    width: 100%;
}

.longBanner01 .txt {
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
    color: #333;
}

.longBanner01 .txt
    h3 {
    font-size: 20px;
    line-height: 1.3em;
    font-weight: 500;
    letter-spacing: -.5px;
}

.longBanner01 .txt
    p {
    font-size: 14px;
    line-height: 1.4em;
    font-weight: 400;
    letter-spacing: -.2px;
    margin: 10px 0 0;
}

.mainGallery {
    width: 100%;
    margin: 6% auto 0;
}

.mainGallery .galleryList {
    position: relative;
    margin: 0 auto;
}

.mainGallery .galleryList .galleryGrid {
    display: flex;
    flex-wrap: wrap;
    padding: 0 8px;
}

.mainGallery .galleryList
    li {
    padding: 8px;
    box-sizing: border-box;
}

.mainGallery .galleryList
    li>div {}

.mainGallery .galleryList
    li .imgLink {}

.mainGallery .galleryList
    li .imgLink img {
    width: 100%;
}

.mainGallery .galleryList
    li .txt {}

.mainGallery .galleryList
    li .txt .subject {
    font-size: 14px;
    color: #222;
    font-weight: 500;
    line-height: 1.4em;
    margin: 0 0 8px;
}

.mainGallery .galleryList
    li .txt .cont {
    font-size: 13px;
    color: #555;
    font-weight: 400;
    height: 20px;
    line-height: 1.5em;
    margin: 0 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.mainReview {
    width: 100%;
    margin: 40px auto 0;
}

.mainReview .reviewList {
    position: relative;
    margin: 0 auto;
}

.mainReview .swiper-container {
    padding: 0 0 24px;
}

.mainReview .reviewList
    li {
    width: 60%;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    top: 0;
    transition: .2s all;
    background: #fff;
    margin: 0 0 8px;
}

.mainReview .reviewList
    li:first-child {
    margin-left: 16px;
}

.mainReview .reviewList
    li:last-child {
    margin-right: 16px;
}

.mainReview .reviewList
    li .imgLink {
    height: 0;
    margin: 8px 0;
    padding-bottom: calc(100% - 2px);
    border: 1px solid #eee;
    box-sizing: border-box;
    overflow: hidden;
}

.mainReview .reviewList
    li .imgLink img {
    width: 100%;
}

.mainReview .reviewList
    li .txt {
    text-align: left;
    box-sizing: border-box;
    letter-spacing: -.3px;
}

.mainReview .reviewList
    li .txt .thumb_tit {
    display: block;
    font-size: 13px;
    line-height: 1em;
    color: #999;
    padding: 8px 0;
    height: 29px;
    box-sizing: border-box;
}

.mainReview .reviewList
    li .txt .subject {
    height: 20px;
    line-height: 20px;
    margin: 8px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.mainReview .reviewList
    li .txt .subject a {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.mainReview .reviewList
    li .txt .cont {
    font-size: 14px;
    color: #555;
    font-weight: 400;
    height: 42px;
    line-height: 1.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.mainReview .reviewList
    li .txt .txt_area {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mainReview .reviewList
    li .txt .point_rate img {
    width: 100%;
    max-width: 70px;
}

.mainReview .reviewList
    li.img_zoom a:hover .point_rate img {
    transform: scale(1);
}

.mainReview .reviewList
    li .txt .date {
    font-size: 13px;
    color: #999;
}

.mainReview .reviewList
    li .txt .writer {
    max-width: 64%;
    font-size: 13px;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.insta {
    margin: 20px auto 0;
    display: none;
}

.insta_box {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    padding: 12px 12px 0;
    box-sizing: border-box;
}

.insta_box
    li {
    flex-basis: 33.333%;
    padding: 4px;
    box-sizing: border-box;
}

.insta_box
    li img {
    width: 100%;
}

#footer {
    position: relative;
    /* margin: 30px 0 0; */
    background: #333;
    color: #aaa;
    border-top: 2px solid #fff;
    padding: 16px;
    box-sizing: border-box;
}

#footer .inner {
    overflow: hidden;
    position: relative;
    width: 100%;
    max-width: 96%;
    margin: 0 auto;
    zoom: 1;
}

#footer .inner:after {
    content: "";
    display: block;
    clear: both;
}

#footer .footer_tit {
    color: var(--point_color);
    font-size: 20px;
    font-weight: bold;
    padding: 0 16px;
    box-sizing: border-box;
}

#footer .footer01 {
    margin: 10px 0 20px;
    padding: 0 16px;
    box-sizing: border-box;
    overflow: hidden;
}

#footer .footer01
    h3 {
    font-size: 20px;
    font-weight: 500;
    margin: 16px 0 4px;
}

#footer .footer01
    h3 i {
    font-size: 24px;
    vertical-align: middle;
}

#footer .footer01
    li {
    display: inline-block;
    margin: 0 20px 0 0;
    vertical-align: text-top;
}

#footer .footer01 .tel {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 8px;
}

#footer .footer01 .time {
    font-size: 14px;
    line-height: 1.8em;
    font-weight: 500;
}

#footer .footer01 .text {
    font-size: 14px;
    line-height: 32px;
    font-weight: 500;
}

#footer .footer02 .footer_info {
    margin: 16px 0;
    box-sizing: border-box;
}

#footer .footer02 .footer_info #acco {
    position: relative;
    width: 100%;
    margin: 0px auto;
}

#footer .footer02 .footer_info #acco
    h3 {
    font-size: 20px;
    font-weight: 500;
    padding: 0px 16px 10px;
    cursor: pointer;
}

#footer .footer02 .footer_info #acco
    h3 i {
    font-size: 20px;
    font-weight: 500;
    transition: all 0.3s;
}

#footer .footer02 .footer_info #acco
    h3.on i {
    transform: rotate(180deg);
}

#footer .footer02 .footer_info #acco .info {
    display: none;
    text-decoration: none;
    padding: 0 16px;
    -webkit-transition: easy-in 0.15s;
    -moz-transition: easy-in 0.15s;
    -o-transition: easy-in 0.15s;
    -ms-transition: easy-in 0.15s;
    transition: easy-in 0.15s;
}

#footer .footer02 .footer_info #acco .info
    span {
    padding-right: 10px;
    font-size: 13px;
    line-height: 1.8em;
    font-weight: 500;
}

#footer .footer02 .footer_info #acco .ft_logo {
    display: inline-block;
    padding: 0px 7px;
    margin-bottom: 10px;
}

#footer .footer02 .footer_info #acco .ft_logo
    img {
    max-width: 100%;
}

#footer .footer02 .footer_info #acco .utilMenu {
    display: flex;
    flex-wrap: wrap;
    margin: 16px 0 0;
}

#footer .footer02 .footer_info #acco .utilMenu
    li {
    padding-right: 16px;
    font-size: 13px;
    line-height: 1.8em;
    font-weight: 500;
}

#footer .footer03 {
    border-top: 1px solid #ddd;
    padding: 16px;
    box-sizing: border-box;
    display: block;
    text-align: center;
    margin: 0 auto 20px;
}

#footer .footer03 .copyright {
    font-size: 13px;
    font-weight: 500;
}

#footer .footer03 .footer_sns {
    display: flex;
}

#footer .footer03 .footer_sns
    li {
    padding: 0 4px;
}

#footer .footer03 .footer_sns
    li:last-child {
    padding: 0 0 0 6px;
}

#footer .footer03 .footer_sns
    li i {
    font-size: 21px;
}

.fixed_btn {
    position: fixed;
    width: 50px;
    transform: translateX(350px);
    right: 30%;
    bottom: 90px;
    text-align: center;
    cursor: pointer;
    z-index: 7;
    display: none;
}

.fixed_btn .scroll_btn {
    width: 48px;
    height: 48px;
    margin: 0 auto;
    border: 1px solid #ddd;
    border-radius: 30px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.5);
    text-align: center;
}

.fixed_btn
    a i {
    color: #000;
    font-size: 20px;
    line-height: 42px;
}

.fixed_btn
    a i[class*=" xi-"],
.fixed_btn a i[class^=xi-] {
    font-size: 26px;
}

.fixed_btn
    a i:hover {
    color: #ddd;
}

.fixed_btn .kakao_icon {
    width: 100%;
}

.fixed_btn .telegram_icon {
    width: 100%;
}

.fixed_btn
    img {
    width: 100%;
}

.fixed_btn
    img:hover {
    opacity: 0.5;
}

#goBtn .btn {
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

#goBtn .up {
    display: block;
    text-align: center;
    line-height: 40px;
}

#goBtn .down {
    display: block;
    text-align: center;
}

.txtInfo {
    color: #707070;
}

.txtWarn {
    color: #f76560;
}

.txtEm {
    color: #888;
    font-size: 11px;
    font-style: italic;
    max-width: 160px;
    display: block;
    margin: 0 auto;
}

.txtDel,
.strike,
.discount {
    text-decoration: line-through;
    font-weight: normal;
}

.strike
    strong,
.discount strong {
    font-weight: normal;
}

.txtNormal {
    font-weight: normal;
    font-style: normal;
}

.txtNum {
    display: inline-block;
    font-size: 12px;
    color: #777;
    word-break: normal;
}

.txt11 {
    font-size: 11px;
}

.txt12 {
    font-size: 12px;
}

.txt14 {
    font-size: 14px;
}

.txt16 {
    font-size: 16px;
}

.txt18 {
    font-size: 18px;
    letter-spacing: -1px;
}

.txtIcon {
    font-size: 12px;
    font-style: normal;
}

.txtBreak {
    word-break: break-all;
    word-wrap: break-word;
}
    html:lang(ja) .txt11,
html:lang(zh) .txt11,
html:lang(zh-tw) .txt11 {
    font-size: 12px;
}

.gBlank5 {
    display: block;
    margin-top: 5px;
}

.gBlank10 {
    display: block;
    margin-top: 10px;
}

.gBlank20 {
    display: block;
    margin-top: 20px;
}

.gBlank30 {
    display: block;
    margin-top: 30px;
}

.gIndent10 {
    margin-left: 10px;
}

.gIndent20 {
    margin-left: 20px;
}

.gSpace10 {
    margin-right: 10px;
}

.gSpace20 {
    margin-right: 20px;
}

.gMerge {
    position: relative;
    z-index: 1;
    margin-top: -1px;
}

.ec-base-qty {
    position: relative;
    display: inline-block;
    width: 50px;
    margin: 0 1px 0 0;
    text-align: left;
}

.ec-base-qty
    input[type="text"] {
    width: 22px;
    height: 23px;
    padding: 0 0 0 5px;
    line-height: 25px;
    border: 1px solid #d4d8d9;
    border-radius: 3px 0 0 3px;
}

.ec-base-qty .up {
    position: absolute;
    left: 27px;
    top: 0;
}

.ec-base-qty .down {
    position: absolute;
    left: 27px;
    bottom: 0;
}

.ec-base-qty .qtyUp {
    position: absolute;
    left: 27px;
    top: 0;
}

.ec-base-qty .qtyDown {
    position: absolute;
    left: 27px;
    bottom: 0;
}

.ec-base-qty .qtyUp .up {
    position: static;
    left: auto;
    top: auto;
}

.ec-base-qty .qtyDown .down {
    position: static;
    left: auto;
    top: auto;
}

.ec-base-chk {
    display: inline-block;
    position: relative;
    margin: 0 8px 0 0;
    width: 22px;
    height: 22px;
    vertical-align: top;
    cursor: pointer;
}

.ec-base-chk
    input {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.ec-base-chk .checkbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("//img.echosting.cafe24.com/skin/base/common/bg_join_check.png") no-repeat 0 0;
}

.ec-base-chk
    input:checked+.checkbox {
    background-position: -34px 0;
}
    input,
select,
textarea {
    font-size: 100%;
    font-family: 'Montserrat', 'Noto Sans KR', Verdana, Dotum, AppleGothic, sans-serif;
    color: #353535;
    vertical-align: middle;
}
    input[type=radio],
input[type=checkbox] {
    width: 13px;
    height: 13px;
    border: 0;
}
    input[type=text],
input[type=password] {
    padding: 2px 4px;
    border: 1px solid #d5d5d5;
    color: #353535;
    font-size: 12px;
}
    input[type=radio]+label,
input[type=checkbox]+label {
    margin: 0 4px 0 2px;
}
    select {
    height: 24px;
    border: 1px solid #d5d5d5;
}
    textarea {
    padding: 5px 6px;
    border: 1px solid #d5d5d5;
    line-height: 1.5;
}
    input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #c1c1c1;
}
    input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #c1c1c1;
}
    input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #c1c1c1;
    opacity: 1;
}
    legend {
    visibility: hidden;
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 0;
    height: 0;
    line-height: 0;
}
    table tr.radioType input,
span.noBorder input {
    border: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 3px 0 0 !important;
    vertical-align: middle !important;
    background: none !important;
}

.gLabel {
    display: inline-block;
}

.gLabel
    label {
    margin-right: 20px;
    line-height: 22px;
}

.fWidthFull
    input[type=text] {
    width: 100%;
    height: 24px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.fWidthFull
    textarea {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.fWidthFull
    select {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.fList.typeHor .gLabel {
    margin-right: 20px;
}

.fList.typeVer .gLabel {
    display: block;
}

.ec-base-radio.typeDelivery .ec-base-label {
    display: block;
}


    span.ec-base-help,
p.ec-base-help,
ul.ec-base-help li {
    margin: 2px 9px;
    padding: 1px 0 1px 20px;
    line-height: 1.4;
    background: url('//img.echosting.cafe24.com/skin/base/common/ico_info.gif') no-repeat 0 2px;
}
    div.ec-base-help {
    margin: 20px 0;
    border: 1px solid #ddd;
    font-size: 13px;
    line-height: 24px;
}
    div.ec-base-help>h2,
div.ec-base-help>h3 {
    padding: 9px 0 6px 10px;
    border-bottom: 1px solid #eee;
    color: #333;
    font-size: 14px;
    background: #fcfcfc;
}
    div.ec-base-help .inner {
    padding: 0 9px 12px;
}
    div.ec-base-help h4 {
    margin: 22px 0 -4px;
    color: #444;
    font-size: 14px;
    font-weight: normal;
}
    div.ec-base-help h4:first-child {
    margin-top: 13px;
}
    div.ec-base-help p {
    margin: 15px 0 0 10px;
    color: #707070;
}
    div.ec-base-help ul,
div.ec-base-help ol {
    margin: 15px 0 0 11px;
}
    div.ec-base-help li {
    color: #707070;
}
    div.ec-base-help ol li {
    padding: 0 0 0 25px;
    background: url('//img.echosting.cafe24.com/skin/base/common/ico_number.png') no-repeat;
}
    div.ec-base-help ol .item1 {
    background-position: -484px 5px;
}
    div.ec-base-help ol .item2 {
    background-position: -434px -95px;
}
    div.ec-base-help ol .item3 {
    background-position: -384px -195px;
}
    div.ec-base-help ol .item4 {
    background-position: -334px -295px;
}
    div.ec-base-help ol .item5 {
    background-position: -284px -395px;
}
    div.ec-base-help ol .item6 {
    background-position: -234px -495px;
}
    div.ec-base-help ol .item7 {
    background-position: -184px -595px;
}
    div.ec-base-help ol .item8 {
    background-position: -134px -695px;
}
    div.ec-base-help ol .item9 {
    background-position: -84px -795px;
}
    div.ec-base-help ol .item10 {
    background-position: -34px -895px;
}
    div.ec-base-help ul li {
    padding: 0 0 0 11px;
    background: url('//img.echosting.cafe24.com/skin/base/common/ico_dash.gif') no-repeat 0 7px;
}

.ec-base-help.typeDash
    li {
    padding: 0 0 0 11px;
    background: url("//img.echosting.cafe24.com/skin/base/common/ico_dash.gif") no-repeat 0 7px;
}




.ec-over-product .swiper-container {
    padding: 0 0 24px;
}

.prdRoll {
    position: relative;
    width: 100%;
    clear: both;
}

.prdRoll .prd_inner {
    width: 100%;
    margin: 0 auto;
}

.prdRoll .prdList>
    li {
    width: 38%;
}

.prdRoll .prdList>
    li:first-child {
    margin-left: 16px;
}

.prdRoll .prdList>
    li:last-child {
    margin-right: 16px;
}

.prdRoll .prdList>
    li .thumbnail {
    margin: 8px 0;
}

.prdRoll.xans-product-listrecommend .swiper-container,
.prdRoll.xans-product-listnew .swiper-container {
    overflow: visible;
}

.prdRoll[
    class*="list_"] {
    position: relative;
    width: 100%;
    clear: both;
    margin: 0 0 10%;
}

.prdRoll[
    class*="list_"] .prd_inner {
    width: 100%;
    margin: 0 auto;
}

.prdRoll[
    class*="list_"] .swiper-container {
    padding: 0 0 24px;
}

.prdRoll[
    class*="list_"] .prdList>li {
    width: 36%;
}

.prdRoll[
    class*="list_"] .prdList>li:first-child {
    margin-left: 8px;
}

.prdRoll[
    class*="list_"] .prdList>li:last-child {
    margin-right: 8px;
}

.prdRoll[
    class*="list_"] .prdList>li .thumbnail {
    margin: 8px 0;
}

.ec-over-product {
    margin: 40px auto 0;
}

.ec-over-product .title
    h3 {
    font-weight: normal;
    font-size: 18px;
    color: #222;
    padding: 0 8px;
}

.ec-over-product
    img {
    vertical-align: middle;
}

.ec-over-product
    a[href^='/product/detail.html']>img {
    border: 1px solid #eee;
}

.ec-over-product .prdList {
    width: 100%;
    margin: 0;
    font-size: 0;
    line-height: 0;
}

.ec-over-product .prdList>
    li {
    position: relative;
    display: inline-block;
    color: #757575;
    vertical-align: top;
}

.ec-over-product .prdList .chk {
    position: absolute;
    top: 16px;
    left: 16px;
    display: block;
}

.ec-over-product .prdList .thumbnail {
    position: relative;
    margin: 8px;
    text-align: center;
    image-rendering: -webkit-optimize-contrast;
}

.ec-over-product .prdList .thumbnail .prdImg {
    position: relative;
    width: 100%;
}

.ec-over-product .prdList .thumbnail
    a img {
    max-width: 100%;
    box-sizing: border-box;
}

.ec-over-product .prdList .thumbnail .basket {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 1;
    cursor: pointer;
    background: var(--Btn_opacity);
    border-radius: 100%;
    transition: 0.3s;
}

.ec-over-product .prdList .thumbnail .basket:hover {
    background: #000;
}

.ec-over-product .prdList .thumbnail .prdIcon {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
}

.ec-over-product .prdList .thumbnail .icon {
    opacity: 0;
    position: absolute;
    left: 8px;
    top: 8px;
    vertical-align: middle;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.ec-over-product .prdList .thumbnail .icon:after {
    content: "";
    display: block;
    clear: both;
}

.ec-over-product .prdList .thumbnail:hover .icon {
    opacity: 1;
}

.ec-over-product .prdList .thumbnail .promotion {
    position: absolute;
    top: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.ec-over-product .prdList .thumbnail .button {
    margin: 0 auto;
}

.ec-over-product .prdList .thumbnail .button
    img {
    cursor: pointer;
    margin: 0 1px;
}

.ec-over-product .prdList .thumbnail .button .option {
    display: inline;
    position: relative;
}

.ec-over-product .prdList .thumbnail .button .likeButton {
    display: inline-block;
    vertical-align: middle;
}

.ec-over-product .prdList .thumbnail .button .likeButton
    button {
    font-family: verdana;
    color: #555;
    letter-spacing: -1px;
    background: none;
}

.ec-over-product .prdList .thumbnail .button .likeButton
    button img {
    margin: 0;
    vertical-align: middle;
}

.ec-over-product .prdList .thumbnail .button .likeButton
    button strong {
    height: 16px;
    vertical-align: middle;
}

.ec-over-product .prdList .thumbnail .button .likeButton.selected
    button {
    color: #353535;
}

.ec-over-product .prdList .thumbnail .description {
    text-align: left;
    vertical-align: middle;
    opacity: 0;
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    min-height: 120px;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.ec-over-product .prdList .thumbnail:hover .description {
    opacity: 1;
}

.ec-over-product .prdList .description {
    margin: 0 auto;
    font-size: 12px;
    line-height: 18px;
    cursor: pointer;
    text-align: left;
    padding: 16px;
    box-sizing: border-box;
}

.ec-over-product .prdList .description .middle {
    margin: 100px 0 0;
}

.ec-over-product .prdList .description .left {
    text-align: left;
    height: 120px;
    vertical-align: middle;
    display: table-cell;
    padding-top: 5px;
    box-sizing: border-box;
}

.ec-over-product .prdList .description .name {
    display: block;
    text-align: left;
    font-weight: normal;
}

.ec-over-product .prdList .description .name
    a {
    color: #2e2e2e;
}

.ec-over-product .prdList .description .mileage {
    display: block;
}

.ec-over-product .prdList .description
    span.grid {
    display: block;
}

.ec-over-product .spec
    li .color {
    overflow: hidden;
    display: inline-block;
    margin: 3px 0 0 0;
}

.ec-over-product .spec
    li .chips {
    float: left;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    margin: 0 4px 2px 0;
    border: 1px solid #eee;
    font-size: 0;
    line-height: 0;
}

.ec-over-product
    ul.grid2>li {
    width: 50%;
    max-width: 640px;
}

.ec-over-product
    ul.grid3>li {
    width: 33.33%;
}

.ec-over-product
    ul.grid4>li {
    width: 25%;
}

.ec-over-product
    ul.grid5>li {
    width: 20%;
}

.ec-over-product
    ul.grid3>li .color {
    max-width: 230px;
}

.ec-over-product
    ul.grid4>li .color {
    max-width: 190px;
}

.ec-over-product
    ul.grid5>li .color {
    max-width: 130px;
}

.differentialShipping {
    display: none;
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 17px;
    z-index: 100;
    width: 350px;
    margin: 0 0 0 -176px;
}

.differentialShipping
    h3.title {
    margin: 0;
    height: 35px;
    padding: 0 35px 0 19px;
    border: 0;
    color: #fff;
    font-size: 14px;
    line-height: 35px;
    background: #495164;
}

.differentialShipping .content {
    padding: 12px 18px 14px 18px;
    border: 1px solid #757575;
    border-top: 0;
    text-align: center;
    background: #fff;
}

.differentialShipping .close {
    position: absolute;
    right: 14px;
    top: 12px;
}

.differentialShipping .close
    img {
    cursor: pointer;
}

.differentialShipping .content
    ul {
    color: #757575;
    line-height: 25px;
}

.differentialShipping .content
    li {
    overflow: hidden;
}

.differentialShipping .content
    li strong {
    float: left;
    font-weight: normal;
}

.differentialShipping .content
    li span {
    float: right;
    color: #2e2e2e;
}

.differentialShipping .content .info {
    margin: 7px 0 0;
    padding: 7px 0 0;
    border-top: 1px dotted #b0b1b3;
    color: #80aeef;
    text-align: right;
}

.ec-product-bgLT {
    background-position: left top;
}

.ec-product-bgLC {
    background-position: left center;
}

.ec-product-bgLB {
    background-position: left bottom;
}

.ec-product-bgRT {
    background-position: right top;
}

.ec-product-bgRC {
    background-position: right center;
}

.ec-product-bgRB {
    background-position: right bottom;
}

.ec-product-bgCT {
    background-position: center top;
}

.ec-product-bgCC {
    background-position: center center;
}

.ec-product-bgCB {
    background-position: center bottom;
}

.ec-over-product .prdList .description .ec-sale-rate {
    display: inline-block;
    padding-left: 5px;
    color: #f0352e;
    font-size: 16px;
    font-weight: 700;
}
    @media all and (max-width:767px) {
    #header {

margin-left: 0;
    left: 0;

}
    .fixed_btn2 {
        
    }
    .ec-over-product ul.grid5>li {
    width: 50%;
    }
    .ec-over-product ul.grid4>li {
    width: 50%;
    }
    .ec-over-product .title h2 {
    padding: 0 12%;
    }
    .ec-over-product .title h2 .sub {
    margin: 2px 0 0;
    }
    .xans-product-listitem .display상품요약정보 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    }
    .thumbnail .cart img {
    max-width: 32px;
    right: 4px;
    bottom: 4px;
    }
}

.ec-base-paginate {
    margin: 30px 0;
    text-align: center;
    font-size: 0;
    line-height: 0;
}

.ec-base-paginate
    ol {
    display: inline-block;
    font-size: 0;
    line-height: 0;
    vertical-align: top;
    display: inline;
    zoom: 1;
    margin: 0;
}

.ec-base-paginate
    li {
    display: inline-block;
    margin: 0 0 0 -1px;
    font-size: 12px;
    color: #757575;
    vertical-align: top;
    display: inline;
    zoom: 1;
}

.ec-base-paginate
    li:first-child {
    margin-left: 0;
}

.ec-base-paginate
    img {
    vertical-align: top;
    display: none;
}

.ec-base-paginate>
    a:first-child:after {
    content: "<";
}

.ec-base-paginate>
    a:last-child:after {
    content: ">";
}

.ec-base-paginate>
    a.first {
    width: 32px;
    height: 32px;
    display: inline-block;
    vertical-align: top;
}

.ec-base-paginate>
    a.first:after {
    content: "<<";
    letter-spacing: -1px;
    margin-left: -8px;
}

.ec-base-paginate>
    a.last {
    width: 32px;
    height: 32px;
    display: inline-block;
    vertical-align: top;
}

.ec-base-paginate>
    a.last:after {
    content: ">>";
    letter-spacing: -1px;
    margin-left: -8px;
}

.ec-base-paginate>
    a:nth-child(2) {
    width: 32px;
    height: 32px;
    display: inline-block;
    vertical-align: top;
}

.ec-base-paginate>
    a:nth-child(2):after {
    content: "<";
}

.ec-base-paginate>
    a:nth-last-child(2) {
    width: 32px;
    height: 32px;
    display: inline-block;
    vertical-align: top;
}

.ec-base-paginate>
    a:nth-last-child(2):after {
    content: ">";
}

.ec-base-paginate>
    a:before,
.ec-base-paginate>a:after {
    font-size: 10px;
    line-height: 32px;
    color: #000;
    font-family: serif !important;
}

.ec-base-paginate
    li a {
    display: block;
    width: 32px;
    padding: 9px 0;
    font-weight: bold;
    color: #939393;
    line-height: 14px;
    background: #fff;
}

.ec-base-paginate
    li a:hover {
    text-decoration: none;
}

.ec-base-paginate
    li a.this {
    color: #333;
}

.ec-base-paginate
    a.nolink {
    cursor: default;
}

.ec-base-paginate.typeSub
    ol {
    margin: 7px 15px;
    vertical-align: middle;
}

.ec-base-paginate.typeSub
    li {
    font-size: 12px;
    border: 0;
}

.ec-base-paginate.typeSub
    img {
    vertical-align: middle;
}

.ec-base-paginate.typeSub
    li a {
    width: auto;
    margin: 0 5px 0;
    padding: 2px;
    color: #353535;
    background: none;
}

.ec-base-paginate.typeSub
    li a.this {
    color: #333;
    text-decoration: none;
    border: 0;
}

.ec-base-paginate.typeSub .first {
    margin-right: 3px;
}

.ec-base-paginate.typeSub .last {
    margin-left: 3px;
}

.fix-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99;
}

.typeMoreview {
    margin: 0 auto;
    background-color: #fff;
    width: 86%;
    max-width: 400px;
    position: relative;
    top: 30%;
    border-radius: 10px;
    padding: 0 20px 20px;
}

.typeMoreview .modal-close {
    position: absolute;
    right: 0;
    top: 0;
    padding: 0;
    text-align: center;
    font-size: 24px;
    line-height: 40px;
    width: 40px;
    height: 40px;
    color: #fff;
    background-color: #111;
    border-radius: 50%;
    margin: -20px;
    vertical-align: middle;
}

.typeMoreview .modal-close:hover {
    background-color: #555;
}

.typeMoreview .btnMore {
    display: block;
    position: relative;
    border: 2px solid #000;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    padding: 0;
    font-size: 18px;
    line-height: 40px;
    margin: 20px auto;
    color: #000;
    font-weight: 600;
    width: 80%;
    overflow: hidden;
    text-align: center;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    z-index: 1;
}

.typeMoreview .btnMore:after {
    content: "";
    width: 0%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.typeMoreview .btnMore:hover {
    color: #fff;
}

.typeMoreview .btnMore:hover:after {
    width: 100%;
    z-index: -1;
}
    @media all and (max-width:767px) {
    .typeMoreview .btnMore:after {
        background: #000;
    }
    .typeMoreview .btnMore:hover {
        color: #fff;
    }
}

.ec-base-tab {
    position: relative;
}

.ec-base-tab .menu {
    margin: 0 0 20px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.ec-base-tab .menu:after {
    content: "";
    display: block;
    clear: both;
}

.ec-base-tab .menu
    li {
    float: left;
    border: 1px solid #eee;
    background: #f8f8f8;
    border-radius: 8px;
    margin: 4px;
}

.ec-base-tab .menu
    li a {
    display: block;
    min-width: 140px;
    margin: 0;
    padding: 10px 2px 9px;
    font-size: 14px;
    color: #999;
    text-decoration: none;
    outline: 0;
    text-align: center;
}

.ec-base-tab .menu
    li:first-child a {
    margin-left: 0;
}

.ec-base-tab .menu
    li.selected a {
    position: relative;
    margin: 0;
    color: #333;
    font-weight: 400;
}

.ec-base-tab .menu
    li.selected a::after {
    content: "";
    width: 4px;
    height: 4px;
    background: #f0352e;
    border-radius: 100%;
    position: absolute;
    left: 50%;
    top: 6px;
}

.ec-base-tab>.right {
    position: absolute;
    top: 8px;
    right: 10px;
    line-height: 24px;
    color: #909090;
}

.ec-base-tab.typeLight .menu
    li.selected a {
    margin: 0 0 -2px;
    border-bottom: 1px solid #fff;
    color: #404040;
    background: #fff;
}

.ec-base-tab[
    class*="grid"] .menu {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.ec-base-tab[
    class*="grid"] .menu li {
    float: none;
    display: table-cell;
    vertical-align: middle;
}

.ec-base-tab[
    class*="grid"] .menu li a {
    display: inline-block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 11px 0;
    border: 0;
}

.ec-base-tab[
    class*="grid"] .menu li.selected {
    position: relative;
    top: 0;
    right: 0;
    border: 1px solid #eee;
    background: #f8f8f8;
}

.ec-base-tab[
    class*="grid"] .menu li:first-child.selected {
    right: 0;
}

.ec-base-tab[
    class*="grid"] .menu li.selected a {
    position: static;
    background: none;
}

.ec-base-tab.grid2 .menu
    li {
    width: 50.5%;
}

.ec-base-tab.grid3 .menu
    li {
    width: 34%;
}

.ec-base-tab.grid4 .menu
    li {
    width: 25.5%;
}

.ec-base-tab.grid5 .menu
    li {
    width: 20.5%;
}

.ec-base-tab.grid6 .menu
    li {
    width: 17%;
}

.ec-base-tab.gFlex .menu {
    display: flex;
    border-right: 0;
}

.ec-base-tab.gFlex .menu:after {
    display: none;
}

.ec-base-tab.gFlex .menu
    li {
    display: flex;
    align-items: center;
    float: none;
    flex: 1;
    position: relative;
}

.ec-base-tab.gFlex .menu
    li:last-child {
    border-right: 1px solid #cbcdce;
}

.ec-base-tab.gFlex .menu
    li a {
    width: 100%;
    min-width: 0;
    border-right: 0;
    background: none;
    word-break: break-all;
}

.ec-base-tab.gFlex .menu
    li a:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
}

.ec-base-tab.gFlex .menu
    li.selected {
    border: 1px solid #292929;
    border-bottom: 0;
    background: #4a5164;
}

.ec-base-tab.gFlex .menu
    li.selected a {
    left: 0;
    margin: 0 0 -1px -1px;
    background: #4a5164;
    border: 0;
    position: initial;
}

[
    class^='btnNormal'],
a[class^='btnNormal'] {
    display: inline-block;
    box-sizing: border-box;
    padding: 0 8px;
    border: 1px solid #eee;
    border-radius: 4px;
    font-size: 14px;
    line-height: 26px;
    font-weight: normal;
    text-decoration: none;
    vertical-align: middle;
    word-spacing: -0.5px;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
    color: #555;
    background-color: #fff;
    margin: 0;
}

[
    class^='btnSubmit'],
a[class^='btnSubmit'] {
    display: inline-block;
    box-sizing: border-box;
    padding: 4px 8px;
    border: 1px solid #222;
    border-radius: 4px;
    font-size: 13px;
    line-height: 18px;
    font-weight: normal;
    text-decoration: none;
    vertical-align: middle;
    word-spacing: -0.5px;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
    color: #fff;
    background-color: #222;
}

[
    class^='btnEm'],
a[class^='btnEm'] {
    display: inline-block;
    box-sizing: border-box;
    padding: 4px 8px;
    border: 1px solid #eee;
    border-radius: 4px;
    font-size: 13px;
    line-height: 18px;
    font-weight: normal;
    text-decoration: none;
    vertical-align: middle;
    word-spacing: -0.5px;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
    color: #555;
    background-color: #f8f8f8;
}

[
    class^='btnBasic'],
a[class^='btnBasic'] {
    display: inline-block;
    box-sizing: border-box;
    padding: 4px 8px;
    border: 1px solid #eee;
    border-radius: 4px;
    font-size: 13px;
    line-height: 18px;
    font-weight: normal;
    text-decoration: none;
    vertical-align: middle;
    word-spacing: -0.5px;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
    color: #222;
    background-color: #f5f5f5;
}

[
    class^='btnNormal']:not(.disabled):hover {
    background-color: #eee;
}

[
    class^='btnSubmit']:not(.disabled):hover {
    background-color: #fff;
    color: #222;
}

[
    class^='btnEm']:not(.disabled):hover {
    background-color: #eee;
}

[
    class^='btnBasic']:not(.disabled):hover {
    background-color: #eee;
}

[
    class^='btnNormal'].disabled {
    border-color: #e3e3e3;
    color: #999;
}

[
    class^='btnSubmit'].disabled {
    background-color: #9297a2;
    color: #f0f0f0;
}

[
    class^='btnEm'].disabled {
    background-color: #b5b6b9;
    color: #f0f0f0;
}

[
    class^='btnBasic'].disabled {
    color: #999;
}

[
    class^='btn'].sizeS {
    padding: 4px 12px;
}

[
    class^='btn'].sizeM {
    padding: 10px 16px;
}

[
    class^='btn'].sizeL {
    padding: 14px 16px;
    min-width: 80px;
    font-weight: 500;
}

[
    class^='btn'][class*='Fix'] {
    width: 72px;
    word-break: keep-all;
    word-wrap: break-word;
}

[
    class^='btn'][class*='Fix'].sizeS {
    width: 80px;
}

[
    class^='btn'][class*='Fix'].sizeM {
    width: 120px;
    padding-left: 8px;
    padding-right: 8px;
}

[
    class^='btn'][class*='Fix'].sizeL {
    width: 160px;
    padding-left: 8px;
    padding-right: 8px;
}
    a.btnLink {
    color: #222;
}
    a.btnLink:hover {
    text-decoration: none;
    -webkit-box-shadow: 0 1px 0 0 #222;
    -moz-box-shadow: 0 1px 0 0 #222;
    box-shadow: 0 1px 0 0 #222;
}
    a.btnLink:after {
    content: "";
    display: inline-block;
    margin: -2px -2px 0 3px;
    vertical-align: middle;
    border: 0 0 0 10px;
    border-style: solid;
    border-color: transparent transparent transparent #77797d;
}

[
    class^='btn'] i {}

[
    class^='btn'] .icoArrow {
    display: inline-block;
    width: 3px;
    height: 3px;
    margin: -2px 1px 0 1px;
    border: 2px solid #77797d;
    border-width: 0 2px 2px 0;
    vertical-align: middle;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
}

[
    class^='btnSubmit'] .icoArrow,
[class^='btnEm'] .icoArrow {
    border-color: #f0f0f0;
}

[
    class^='btn'] .icoDelete {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: -2px 2px 0 0;
    vertical-align: middle;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

[
    class^='btn'] .icoDelete:before {
    content: "";
    position: absolute;
    top: 0;
    right: 4px;
    width: 2px;
    height: 10px;
    background: #77797d;
}

[
    class^='btn'] .icoDelete:after {
    content: "";
    position: absolute;
    top: 4px;
    right: 0;
    width: 10px;
    height: 2px;
    background: #77797d;
}

[
    class^='btnSubmit'] .icoDelete:before,
[class^='btnSubmit'] .icoDelete:after,
[class^='btnEm'] .icoDelete:before,
[class^='btnEm'] .icoDelete:after {
    background: #ccc;
}

[
    class^='btn'] .icoAdd,
[class^='btn'] .icoRemove {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: -2px 2px 0 0;
    vertical-align: middle;
}

[
    class^='btn'] .icoAdd:before,
[class^='btn'] .icoAdd:after,
[class^='btn'] .icoRemove:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: #77797d;
}

[
    class^='btn'] .icoAdd:before,
[class^='btn'] .icoRemove:before {
    height: 2px;
    margin: -1px 0 0 -4px;
}

[
    class^='btn'] .icoAdd:after {
    width: 2px;
    margin: -4px 0 0 -1px;
}

[
    class^='btn'] img {
    margin: -2px 1px 0;
    vertical-align: middle;
}

.btnLogin,
    a.btnLogin {
    display: inline-block;
    box-sizing: border-box;
    width: 100px;
    height: 70px;
    line-height: 70px;
    border-radius: 2px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    background-color: #4a5164;
}

.btnLogin:hover {
    background-color: #43495a;
}

.btnAgree,
    a.btnAgree {
    display: inline-block;
    box-sizing: border-box;
    width: 80px;
    height: 70px;
    line-height: 70px;
    border: 1px solid #d1d1d1;
    border-radius: 2px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #222;
    text-decoration: none;
    background-color: #fff;
}

.btnAgree:hover {
    background-color: #f3f3f3;
}

.btnToggle {
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

.btnToggle
    button {
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid #d1d1d1;
    margin: 0 -1px 0 0;
    padding: 0 7px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-size: 12px;
    outline: 0;
    text-decoration: none;
    color: #222;
    background: #fff;
}

.btnToggle
    button:first-child {
    border-radius: 2px 0 0 2px;
}

.btnToggle
    button:last-child {
    border-radius: 0 2px 2px 0;
}

.btnToggle
    button.selected {
    position: relative;
    border: 1px solid #84868b;
    color: #fff;
    background: #84868b;
}

.ec-base-button {
    padding: 10px 0;
    text-align: center;
}
.ec-base-button
    h2 {
    margin-bottom: 20px;
    font-size: 24px;
}
.ec-base-button .padd {
    padding: 16px 8px;
}

.ec-base-button.justify {
    position: relative;
}

.ec-base-button:after {
    display: block;
    content: "";
    clear: both;
}

.ec-base-button .gLeft {
    float: left;
    text-align: left;
    margin: 4px 0;
}

.ec-base-button .gRight {
    float: right;
    text-align: right;
    margin: 4px 0;
}

.ec-base-button.justify .gLeft {
    position: absolute;
    left: 0;
}

.ec-base-button.justify .gRight {
    position: absolute;
    right: 0;
}

.ec-base-button .text {
    margin: 0 6px 0 10px;
    color: #353535;
    font-size: 12px;
    line-height: 24px;
}

.ec-base-button.typeBorder {
    margin-top: 24px;
    padding: 10px 20px;
}

.ec-base-button.typeBG {
    padding: 10px 20px;
}

.ec-base-button[
    class*="gColumn"] {
    margin: 0 auto;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
}

.ec-base-button[
    class*="gColumn"]:after {
    display: none;
}

.ec-base-button[
    class*="gColumn"] [class^='btn'] {
    margin: 0 2px;
    padding-left: 8px;
    padding-right: 8px;
    word-break: keep-all;
    word-wrap: break-word;
    white-space: normal;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
}

.ec-base-button[
    class*="gColumn"] [class^='btn'][class*='Fix'] {
    -webkit-flex: none;
    -moz-flex: none;
    -ms-flex: none;
    flex: none;
}

.ec-base-button[
    class*="gColumn"] .gFlex2 {
    -webkit-flex: 2;
    -moz-flex: 2;
    -ms-flex: 2;
    flex: 2;
}

.ec-base-button[
    class*="gColumn"] .gFlex3 {
    -webkit-flex: 3;
    -moz-flex: 3;
    -ms-flex: 3;
    flex: 3;
}

.ec-base-button[
    class*="gColumn"] .gFlex4 {
    -webkit-flex: 4;
    -moz-flex: 4;
    -ms-flex: 4;
    flex: 4;
}

.ec-base-button.gFixed {
    opacity: 0;
    pointer-events: none;
    position: fixed;
    z-index: 120;
    left: 0;
    bottom: 0;
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0 7px;
    box-sizing: border-box;
    background-color: #dbdbdb;
    -webkit-box-shadow: 0px -4px 4px 0px rgba(120, 120, 120, 0.5);
    -moz-box-shadow: 0px -4px 4px 0px rgba(120, 120, 120, 0.5);
    box-shadow: 0px -4px 4px 0px rgba(120, 120, 120, 0.5);
}

.ec-base-button.gFixed .state+.ec-base-button {
    margin-top: 3px;
}

.ec-base-button.gFixed .state {
    overflow: hidden;
    margin: 0 auto;
    font-size: 13px;
}

.ec-base-button.gFixed .state .count {
    float: left;
    padding: 7px 0;
}

.ec-base-button.gFixed .state .price {
    float: right;
    padding: 7px 0;
}

.ec-base-button.gFixed .price
    strong {
    font-weight: normal;
}

.ec-base-button.gFixed .count
    strong,
.ec-base-button.gFixed .price em {
    color: #000;
    font-weight: bold;
    font-style: normal;
}

.ec-base-box {
    padding: 20px 10px;
    margin-left: auto;
    margin-right: auto;
    color: #555;
}

.ec-base-box.gHalf {
    position: relative;
    padding: 20px 0;
}

.ec-base-box.gHalf:before {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    content: "";
    width: 1px;
    height: 100%;
    background-color: #eee;
}

.ec-base-box.typeBg {
    background-color: #fbfafa;
}

.ec-base-box.typeThin {
    border-width: 1px;
    border-color: #d7d5d5;
}

.ec-base-box.typeThin
    h3.boxTitle {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
}

.ec-base-box.typeThinBg {
    border-width: 1px;
    border-color: #eee;
    background-color: #f8f8f8;
}

.ec-base-box.center {
    text-align: center;
}

.ec-base-box.typeThinBg>.agree {
    padding: 20px;
    border: 1px solid #e6e6e6;
    background: #fff;
}

.ec-base-box.typeThinBg>.agree
    p {
    padding: 0 0 17px;
}

.ec-base-box.typeMember {
    padding: 0;
}

.ec-base-box.typeMember .information {
    display: table;
    table-layout: fixed;
    padding: 10px 0;
    width: 100%;
    box-sizing: border-box;
}

.ec-base-box.typeMember .information>.title,
.ec-base-box.typeMember .information>.thumbnail {
    display: table-cell;
    padding: 0 15px;
    width: 70px;
    text-align: center;
    vertical-align: middle;
}

.ec-base-box.typeMember .information>.title {
    vertical-align: middle;
}

.ec-base-box.typeMember .information>.thumbnail
    img {
    max-width: 70px;
}

.ec-base-box.typeMember .information .description {
    display: table-cell;
    padding: 0 10px;
    width: auto;
    line-height: 1.5em;
    border-left: 1px solid #e8e8e8;
    vertical-align: middle;
}

.ec-base-box.typeMember.gMessage {
    border-width: 1px;
    border-color: #d7d5d5;
}

.ec-base-box .message {
    display: block;
    padding: 10px 0 10px 35px;
    border-bottom: 1px solid #e8e7e7;
    background: #fbfbfb url("//img.echosting.cafe24.com/skin/base/common/ico_info.gif") no-repeat 10px center;
}

.ec-base-box.typeProduct {
    display: table;
    table-layout: fixed;
    padding: 15px 0;
    width: 100%;
    box-sizing: border-box;
}

.ec-base-box.typeProduct .thumbnail,
.ec-base-box.typeProduct .information {
    display: table-cell;
    padding: 0 16px;
    vertical-align: middle;
}

.ec-base-box.typeProduct .thumbnail {
    width: 100px;
}

.ec-base-box.typeProduct .thumbnail
    img {
    width: 100%;
    border: 1px solid #eee;
    border-radius: 4px;
    box-sizing: border-box;
}

.ec-base-box.typeProduct .information {}


    @media all and (max-width:1299px) {
        
    #left_wrap {
        display: none;
    }
    #right_wrap {
    display: none;
    }
    .search_top .tet_box h3 {
    font-size: 30px !important;
    }
}
    @media all and (max-width:1023px) {
    .path {
        display: none;
    }
    .dp_block {
    display: block !important;
    }
    .dp_none {
    display: none !important;
    }
    #popup_1,
    #popup_2 {
    display: none;
    }
    #header .xans-layout-logotop img {
    }
    .xans-board-function p,
    .boardChk {
    display: none !important;
    }
}
    @media all and (max-width:767px) {
        
    .pc {
        display: none}
    .mobile {
    display: block;
    }
    .titleArea p {
    font-size: 13px;
    }
    #header .xans-layout-logotop img {
    }
    #header .shoppinginfo li {
    min-width: 42px;
    padding: 0;
    }
    #header .shoppinginfo li a .count {
    right: 0;
    }
    #header .topCate .Cate ul li a {
    font-size: 14px;
    }
    .side {
    top: 0;
    }
    .main_popup .txt h3 {
    font-size: 17px;
    }
    .main_popup .txt p {
    font-size: 13px;
    }
    .mainSlide .swiper-slide .txt {
    left: 8%;
    }
    .mainSlide .swiper-slide .txt h3 {
    font-size: 24px;
    }
    .mainSlide .swiper-slide .txt p {
    font-size: 14px;
    }
    .main_title h2 {
    font-size: 18px;
    }
    .main_title .sub {
    font-size: 13px;
    }
    .main_video .video_area .txt_box p {
    font-size: 24px;
    }
    .mainBanner01 .txt h3 {
    font-size: 17px;
    }
    .mainBanner01 .txt span {
    
    }
    .mainBanner01 .txt p {
    font-size: 11px;
    line-height: 6px;
    color: #ddd;
    }
    .couponBanner01 .left h3 {
    font-size: 17px;
    }
    .couponBanner01 .left p {
    font-size: 13px;
    }
    .couponBanner01 .right span {
    font-size: 13px;
    }
    .couponBanner01 .right i {
    font-size: 50px;
    }
    .longBanner01 .txt {
    left: 8%;
    }
    .longBanner01 .txt h3 {
    font-size: 17px;
    }
    .longBanner01 .txt p {
    font-size: 13px;
    }
    .mainBanner02 .txt h3 {
    font-size: 17px;
    }
    .mainBanner02 .txt p {
    font-size: 13px;
    }
    .mainGallery .galleryList li .txt .subject {
    font-size: 14px;
    }
    .mainGallery .galleryList li .txt .cont {
    font-size: 12px;
    height: 36px;
    }
    .mainReview .inner {
    padding: 0;
    }
    .mainReview .reviewList li .txt .subject a {
    font-size: 14px;
    }
    .mainReview .reviewList li .txt .cont {
    font-size: 12px;
    height: 36px;
    }
    .mainReview .reviewList li .txt .writer {
    font-size: 11px;
    }
    .mainReview .reviewList li .txt .point_rate img {
    max-width: 60px;
    }
    #footer .footer02 .footer_info #acco h3 {
    font-size: 18px;
    }
    #footer .footer03 .footer_sns li {
    padding: 0 4px;
    }
    #footer .footer03 .footer_sns li:last-child {
        padding: 0 0 0 4px;
    }
    .fixed_btn {
    right: 2%;
    bottom: 150px;
    transform: none;
    }
    .fixed_btn2 {
    left: 0;
    margin-left: 0;
}
    .eventBanner .event_tit {
    font-size: 18px;
    }
    .searchCate h3 {
    font-size: 18px !important;
    }
    .ec-base-box.gHalf:before {
        background: transparent;
    }
    .ec-base-button.gFixed {
    opacity: 1;
    pointer-events: auto;
    }
    .ec-base-tab .menu li {
    width: calc(50% - 10px);
    }
    .ec-base-tab .menu li a {
    min-width: 10px;
    font-size: 13px;
    }

    .fr-toolbar .fr-btn-grp {
    margin: 0 !important;
    }
}
    @media all and (max-width:599px) {
    #popup {
        width: 100%;
    }
    #wrap {
    border-width: 0;
    }
    input[type=text]#ucc {
    width: 60%;
    }
    .cateBanner .icon_area .icon_bg {
    max-width: 80px;
    }
}
    li {
    list-style: none;
}
    table {
    width: 100%;
    border: 0;
    border-spacing: 0;
    border-collapse: collapse;
}
    caption {
    display: none;
}
    h1,
h3 {
    margin: 0;
}

.xans-layout-multishopshipping {
    display: none;
}

.xans-layout-multishopshipping .worldshipLayer {
    top: 303px;
    left: 50%;
    width: 448px;
    margin: 0 0 0 -225px;
}

.xans-layout-multishopshipping .worldshipLayer .content {
    padding: 153px 20px 30px;
    line-height: 1.8;
    background: url("//img.echosting.cafe24.com/skin/base/link/bg_worldship.gif") center 21px no-repeat;
}

.xans-layout-multishopshipping .worldshipLayer .content .desc {
    display: block;
    margin: 4px 0 14px;
}

.xans-layout-multishopshipping .worldshipLayer .select {
    margin: 10px 0 0;
}

.xans-layout-multishopshipping .worldshipLayer .select
    select {
    width: 100%;
}

.xans-layout-conversionpc {
    background: #fff;
    padding: 45px;
    text-align: center;
}

.xans-layout-conversionpc
    a {
    margin: 20px;
    padding: 20px 40px 20px 110px;
    font-size: 68px;
    color: #63666e;
    text-decoration: none;
    text-align: center;
    border: 4px solid #9d9db0;
    border-radius: 10px;
    background: url("//img.echosting.cafe24.com/skin/base/layout/ico_mobile.png") no-repeat 40px 50%;
}

.searchCate {
    position: relative;
    width: 100%;
}

.searchCate
    h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 16px auto 10px;
    padding: 0 8px;
    box-sizing: border-box;
}

.searchCate .swiper-container {
    padding: 0 0 10px;
    overflow: visible;
}

.searchCate .icon_area>
    li {
    width: 25%;
}

.searchCate .icon_area>
    li:first-child {
    margin-left: 8px;
}

.searchCate .icon_area>
    li:last-child {
    margin-right: 8px;
}

.searchCate .icon_area>
    li .thumbnail {
    margin: 8px 0;
}

.searchCate .icon_area .icon {
    text-align: center;
}

.searchCate .icon_area .icon>
    a {
    display: flex;
    flex-direction: column;
    row-gap: 4px;
}

.searchCate .icon_area .icon_bg {}

.searchCate .icon_area .icon_bg
    img {
    width: 100%;
}

.searchCate .icon_area .icon_txt {
    font-size: 13px;
    font-weight: 400;
    color: #333;
}


.xans-myshop-orderstate {
    margin: 0;
}

.xans-myshop-orderstate .title {
    text-align: center;
    padding: 11px 21px;
    margin: 0 0 10px;
}

.xans-myshop-orderstate .title
    h3 {
    padding: 0;
    font-size: 22px;
    font-weight: 400;
    color: #222;
}

.xans-myshop-orderstate .desc {
    padding: 0 0 0 4px;
    font-weight: normal;
    font-size: 13px;
    color: #777;
    vertical-align: middle;
}

.xans-myshop-orderstate
    i {
    color: #000;
    font-style: normal;
    font-size: 28px;
    vertical-align: middle;
}

.xans-myshop-orderstate
    strong {
    color: #000;
    font-style: normal;
    font-size: 24px;
    vertical-align: middle;
}

.xans-myshop-orderstate .state {
    overflow: hidden;
    padding: 19px 0;
    border: 1px solid #fff;
    border-width: 1px 0;
}
#myshopMain .btn {
    display: block;
    border: 0;
    margin: 30px 0;
    background-color: #111;
    color: #fff;
}
.xans-myshop-orderstate .order {
    width: 100%;
}

.xans-myshop-orderstate .order::after {
    content: "";
    display: block;
    clear: both;
}

.xans-myshop-orderstate .order
    li {
    width: 50%;
    padding: 0 0 4px;
    margin: 0 -1px 0 0;
    border-left: 1px dotted #fff;
    text-align: center;
    float: left;
}

.xans-myshop-orderstate .order
    li:first-child {
    border: 0;
}

.xans-myshop-orderstate .order
    li strong {
    display: block;
    margin: 2px 0 7px;
    font-size: 16px;
    font-weight: 400 !important;
    color: #555;
}

.xans-myshop-orderstate .order
    li span {
    color: #fff;
}

.xans-myshop-orderstate .order .count {
    font-weight: bold;
    font-size: 24px;
    color: #000;
}

.xans-myshop-orderstate .cs {
    width: 100%;
    text-align: center;
}

.xans-myshop-orderstate .cs
    li {
    float: left;
    width: 33.333%;
    margin: 20px 0 0;
    padding: 0 16px;
    box-sizing: border-box;
    letter-spacing: 0.04em;
    word-spacing: 4px;
}

.xans-myshop-orderstate .cs
    strong {
    font-weight: 400 !important;
    font-size: 14px;
    color: #555;
}

.xans-myshop-orderstate .cs .count {
    padding: 0 0 0 4px;
    font-weight: bold;
    color: #000;
}

.xans-myshop-orderstate .cs .icoDot {
    display: inline-block;
    width: 2px;
    height: 2px;
    margin: 6px 0 0 0;
    background: #4d4d4d;
    vertical-align: top;
}

#myshopMain {
    margin: 40px 0 0;
}

#myshopMain
    ul {}

#myshopMain
    ul:after {
    content: "";
    display: block;
    clear: both;
}

#myshopMain .shopMain {
    float: left;
    width: 50%;
    padding: 0px 6px;
    margin: 6px 0;
    box-sizing: border-box;
    text-align: center;
}

#myshopMain .shopMain .box {
    border: 1px solid #fff;
    padding: 25px 8px 0;
    box-sizing: border-box;
    height: 100%;
    min-height: 230px;
    background-color: #333;
}

#myshopMain .shopMain .box:hover {
    border: 1px solid #000;
}

#myshopMain .shopMain
    h3 {
    position: relative;
    font-size: 12px;
    color: #333;
    font-weight: normal;
}

#myshopMain .shopMain
    h3:before {
    display: block;
    content: "";
    width: 65px;
    height: 50px;
    margin: 0 auto;
    padding: 0 0 10px;
    background: url("../img/sfix_icon_shopMain.png") no-repeat 0 0;
}

#myshopMain .shopMain
    h3 strong {
    font-size: 18px;
}

#myshopMain .shopMain
    h3 span {
    display: block;
    font-size: 14px;
    padding: 6px 0 25px;
}

#myshopMain .shopMain
    a {
    display: block;
}

#myshopMain .shopMain
    a:hover {
    text-decoration: none;
}

#myshopMain .shopMain
    p {
    font-size: 13px;
    line-height: 18px;
    color: #777;
}

#myshopMain .shopMain.order
    h3:before {
    background-position: 12px 0;
}

#myshopMain .shopMain.profile
    h3:before {
    background-position: -90px 8px;
}

#myshopMain .shopMain.wishlist
    h3:before {
    background-position: -188px 0;
}

#myshopMain .shopMain.likeIt
    h3:before {
    background-position: -288px 4px;
}

#myshopMain .shopMain.mileage
    h3:before {
    background-position: 8px -100px;
}

#myshopMain .shopMain.deposits
    h3:before {
    background-position: -92px -98px;
}

#myshopMain .shopMain.consult
    h3:before {
    background-position: -290px -93px;
}

#myshopMain .shopMain.coupon
    h3:before {
    background-position: -292px -96px;
}

#myshopMain .shopMain.board
    h3:before {
    background-position: 12px -200px;
}

#myshopMain .shopMain.address
    h3:before {
    background-position: -102px -194px;
}

#myshopMain .shopMain.inquiry
    h3:before {
    background-position: -200px -200px;
}

#myshopMain .shopMain.regularDelivery
    h3:before {
    background-position: -292px -200px;
}
    @media all and (max-width: 767px) {
    #header .xans-layout-logotop {
        /* top: 50%; */
        /* left: 30%; */
        /* transform: translate(-50%, -50%); */
        /* width: fit-content; */}
    #myshopMain .shopMain {
    width: 50%;
    }
}

.boardMain_top {
    color: #222;
    text-align: center;
    margin: 0 0 16px;
    padding: 32px 16px;
    box-sizing: border-box;
    background: #feda48;
}

.boardMain_top
    a {
    color: #222;
}

.boardMain_top .tit_box
    h3 {
    font-size: 24px;
    font-weight: 600;
}
.boardMain_top .tit_box
    h3 span {
    color: #999;
    font-weight: normal;
}
.boardMain_top .tit_box
    p {
    font-size: 14px;
    font-weight: 500;
    padding-top: 10px;
}

.boardMain_top
    ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 32px 0 0;
}

.boardMain_top
    ul li i {
    font-size: 32px;
    color: #222;
    margin: 0 0 8px;
}

.boardMain_top
    ul li h4 {
    font-size: 13px;
    font-weight: 500;
}

.boardMain_top
    ul li span {
    font-size: 13px;
    font-weight: 500;
}
    @media all and (max-width: 767px) {
    .boardMain_top .tit_box h3 {
        font-size: 18px;
    }
    .boardMain_top .tit_box p {
    font-size: 13px;
    }
    .boardMain_top ul li h4 {
    font-size: 12px;
    }
    .boardMain_top ul li span {
    font-size: 12px;
    }
}

.gallery_cate {
    width: 100%;
    margin: 0 auto;
    padding: 0 4px;
    box-sizing: border-box;
}

.gallery_cate
    ul {
    display: flex;
    justify-content: center;
    align-items: center;
}

.gallery_cate
    ul li {
    padding: 0 5px;
}

.gallery_cate
    ul li a {
    display: block;
    padding: 6px 18px;
    font-size: 13px;
    color: #777;
    font-weight: 400;
    border: 1px solid #eee;
    border-radius: 8px;
}

.gallery_cate
    ul li.active a {
    color: #fff;
    background-color: #ff6723;
}

.xans-board-list {
    margin: 20px 0;
    font-size: 13px;
    border-top: 1px solid #ececec;
}

.xans-board-list
    li {
    position: relative;
    padding: 20px 14px;
    color: #757575;
    border-bottom: 1px solid #ececec;
}

.xans-board-list
    a {
    display: block;
    color: #555;
}

.xans-board-list .thumb {
    float: left;
    image-rendering: -webkit-optimize-contrast;
}

.xans-board-list .thumb
    img {
    width: 80px;
    margin: 0 8px;
    border-radius: 4px;
}

.xans-board-list .thumb_tit {
    display: block;
    text-align: center;
    font-size: 12px;
}

.xans-board-list .summary::after {
    content: "";
    display: block;
    clear: both;
}

.xans-board-list .summary>
    a>.right>span {
    padding: 0 6px 0 0;
}

.xans-board-list .subject {
    display: block;
    width: 100%;
    padding: 0 0 7px;
    font-size: 15px;
    line-height: 1.4em;
    color: #333;
    font-weight: normal;
}

.xans-board-list .comment {
    color: #000;
}

.xans-board-list .point
    img {
    width: auto;
    height: 11px;
    vertical-align: -1px;
}

.xans-board-empty {
    padding: 28px 0;
    text-align: center;
    font-size: 14px;
    border-bottom: 1px solid #d5d5d5;
    background: #fff;
}

.xans-board-list-11 {
    margin: -1px 0 0;
    font-size: 11px;
    border-top: 1px solid #d5d5d5;
    background: #fff;
}

.xans-board-paging-11 {
    margin: 0 0 29px;
    background: #fff;
}

.xans-board-listpackage-9 .boardSort
    span.consult {
    position: relative;
    padding: 0 49px 0 0;
    width: 32%;
}

.xans-board-listpackage-9 .boardSort
    span.consult select {
    width: 100%;
}

.xans-board-listpackage-9 .boardSort
    span.consult button {
    position: absolute;
    right: 0;
    top: 0;
}

.xans-board-listpackage-9 .summary .answer
    strong {
    color: #000;
}

.xans-board-listheader-8 {
    width: 100%;
    margin: 7px 0 0;
    background: #fff;
}

.xans-board-listheader-8
    ul {
    height: 36px;
    border: 1px solid #c8cdd2;
    border-bottom: none;
    font-size: 0;
}

.xans-board-listheader-8
    ul:after {
    content: "";
    display: block;
    clear: both;
}

.xans-board-listheader-8
    li {
    float: left;
    width: 50%;
    height: 36px;
    text-align: center;
    vertical-align: middle;
    background: #f1f1f1;
}

.xans-board-listheader-8
    li.selected {
    background: #fff;
}

.xans-board-listheader-8
    li a {
    display: inline-block;
    width: 100%;
    border-left: 1px solid #c8cdd2;
    border-bottom: 1px solid #c8cdd2;
    color: #333;
    font-size: 14px;
    line-height: 35px;
}

.xans-board-listheader-8
    li:first-child a {
    border-left: none;
}

.xans-board-listheader-8
    li.selected a {
    border-bottom: none;
    color: #333;
    font-weight: bold;
}

.xans-board-paging-1002.ec-base-paginate.typeList {
    background: #fff;
}

.xans-board-4
    li {
    display: flex;
    align-items: center;
}

.xans-board-4 .thumb {
    width: 96px;
}

.xans-board-4 .summary {
    width: calc(100% - 96px);
    padding: 0 0 0 16px;
}
    @media all and (max-width: 767px) {
    .xans-board-notice .thumb img,
    .xans-board-fixed .thumb img,
    .xans-board-list .thumb img {
        width: 60px;
    }
    .xans-board-notice li,
    .xans-board-fixed li,
    .xans-board-list li {
    padding: 14px 8px;
    }
    .xans-board-notice-4 .thumb,
    .xans-board-fixed-4 .thumb,
    .xans-board-list-4 .thumb {
    width: 76px;
    }
    .xans-board-notice-4 .summary,
    .xans-board-fixed-4 .summary,
    .xans-board-list-4 .summary {
    width: calc(100% - 76px);
    }
    .xans-board-listsgroup-4 .descriptions .left {
    display: block;
    width: 100%;
    margin: 0 0 4px;
    }
    
}

.xans-product-action .ec-base-button
    ul {
    display: block;
    overflow: hidden;
    margin-bottom: 10px;
}
.xans-product-action .ec-base-button .write_div {
    margin: 20px 0;
    position: relative;
    width: 100%;
    display: table;
}
.xans-product-action .ec-base-button .write_div
    label.write_div_label {
    position: relative;
    display: block;
    vertical-align: middle;
    margin: 0 5px;
    border-right: 0;
    padding: 0 5px;
    border-radius: 3px 0 0 3px;
    text-align: right;
    color: #888;
    float: left;
    line-height: 50px;
}
.xans-product-action .ec-base-button .write_div
    label span {
    position: initial;
    width: auto !important;
    height: auto !important;
    font-size: 1rem;
    overflow: initial !important;
    margin-left: 5px !important;
    font-weight: bold;
}
.xans-product-action .ec-base-button .write_div .write_div_type {
    display: block;
    vertical-align: middle;
    width: 40%;
    min-height: fit-content;
    position: relative;
    float: left;
}
.xans-product-action .ec-base-button .write_div
    input {
    padding-left: 5px;
    margin-right: 5px;
    height: 50px;
    width: 100%;
}
.xans-product-action .ec-base-button .write_div
    button.btn {
    border-radius: 3px;
    margin-left: 5px;
    display: inline-block;
    color: #d13f4a !important;
    text-decoration: none;
    vertical-align: middle;
    background: #fff;
    border: 1px solid #d13f4a !important;
    position: absolute;
    right: 0;
    top: 0;
    padding: 0 10px;
}
.xans-product-action .ec-base-button .first {
    width: 98%;
    display: block;
    position: relative;
    border: 1px solid #000;
    background: #000;
    border-radius: 4px;
    line-height: 56px;
    margin: 0 auto 8px;
    box-sizing: border-box;
    overflow: hidden;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    z-index: 1;
    color: #fff;
}
.xans-product-action .ec-base-button .first
    span {

font-size: 24px;
    line-height: 56px;
    color: #fff;
}
.xans-product-action .ec-base-button .first
    span em {vertical-align: middle;
    color: #aaa;
    font-size: 12px;}
.xans-product-action .ec-base-button .first:after {
    content: "";
    width: 0%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.xans-product-action .ec-base-button .first.review {
    width: 80%;
    border-radius: 30px;
    line-height: 46px;
    height: 46px;
    padding: 0;
    font-size: 18px;
    border: 2px solid #000;
}

.xans-product-action .ec-base-button .first.review
    i {
    vertical-align: middle;
}

.xans-product-action .ec-base-button .first:hover {
    color: #222;
}

.xans-product-action .ec-base-button .first:hover:after {
    width: 100%;
    z-index: -1;
}

.xans-product-action .ec-base-button .btnBlack {
    width: 49.5%;
    margin: 0 1% 0 0;
    display: inline-block;
    height: 56px;
    line-height: 56px;
    font-size: 16px;
    font-weight: 400;
    background-color: #000;
    color: #fff;
    border: 1px solid #000;
    border-radius: 4px;
    box-sizing: border-box;
}

.xans-product-action .ec-base-button .btnWhite {
    width: 48%;
    margin: 0 1% 0 0;
    display: inline-block;
    font-size: 16px;
    padding: 20px 0;
    font-weight: 400;
    border: 1px solid #fff;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fef800;
}
.xans-product-action .ec-base-button .btnWhite.money_list {
    width: 31%;
}
.xans-product-action .ec-base-button .btnWhite:last-child {
    margin: 0;
}

.xans-product-action .ec-base-button .btnWhite
    strong {
    display: block;
    font-weight: bold;
    color: #ff675c;
    font-size: 24px;
}

.xans-product-action .ec-base-button .btnWhite
    em {
    display: block;
    line-height: 36px;
}

.xans-product-action .ec-base-button .btnWhite
    em span {
    font-size: 12px;
    color: #888;
}

#bo_cate #bo_cate_on {
    background: #ff6723;
}

.xans-myshop-asyncbenefit {
    margin: 0 0 20px;
    color: #353535;
}

.xans-myshop-asyncbenefit .thumbnail
    img {
    max-width: 70px;
    max-height: 70px;
}

.xans-myshop-asyncbenefit .description {
    min-height: 70px;
}

.xans-myshop-asyncbenefit .ec-base-box.typeThinBg {
    margin-top: -1px;
    padding-left: 110px;
}

.xans-myshop-asyncbenefit .invite>
    strong {
    display: block;
}

.xans-myshop-asyncbenefit .invite .copy {
    margin: 8px 0 0;
}

.xans-myshop-asyncbenefit .invite #reco_url {
    width: 439px;
}

.xans-myshop-asyncbenefit .invite
    ul {
    margin: 8px 0 0;
    font-size: 11px;
    line-height: 1.25;
    color: #757575;
}

.xans-myshop-asyncbenefit .invite
    ul li {
    margin: 3px 0 0;
}

.xans-myshop-asyncbankbook {
    border: 1px solid #ddd;
    border-width: 1px 0;
}

.xans-myshop-asyncbankbook
    ul:after {
    content: "";
    display: block;
    clear: both;
}

.xans-myshop-asyncbankbook
    ul li {
    margin: 5px 0;
    width: 100%;
    font-size: 14px;
    line-height: 46px;
    box-sizing: border-box;
    vertical-align: middle;
}

.xans-myshop-asyncbankbook
    ul li strong {
    vertical-align: middle;
    line-height: 46px;
    font-weight: normal;
    color: #555;
    display: inline-block;
}

.xans-myshop-asyncbankbook
    ul li figure {
    display: inline-block;
    width: 46px;
    line-height: 46px;
    vertical-align: middle;
    margin-right: 10px;
    float: right;
}

.xans-myshop-asyncbankbook
    ul li figure img {
    width: 100%;
}

.xans-myshop-asyncbankbook
    ul li span {
    float: right;
    border: 1px solid #eee;
    background-color: #fff;
    color: #333;
    padding: 0 10px;
    height: 36px;
    line-height: 36px;
    vertical-align: middle;
    margin-top: 5px;
    font-weight: bold;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -moz-box;
    display: -webkit-box;
    word-wrap: break-word;
    word-break: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.xans-myshop-asyncbankbook .title {
    float: left;
    width: 90%;
    font-weight: normal;
    box-sizing: border-box;
}

.xans-myshop-asyncbankbook .data {
    float: left;
    width: 43%;
    padding: 0 10px;
    text-align: right;
    box-sizing: border-box;
}

.xans-myshop-asyncbankbook .use {
    color: #000;
}

.xans-myshop-asyncbankbook
    a.btnNormal {
    float: right;
    margin: -2px 0 0;
}

.color_01,
.color_01:hover {
    background: #68d0a7 !important;
    color: #fff;
}

.color_02,
.color_02:hover {
    background: #fe528f !important;
    color: #fff;
}

#iconWall {
    background-color: #f0f0f0;
    margin: 20px auto;
    overflow: hidden;
    padding-top: 1%;
    list-style: none;
    text-align: center;
}

#iconWall
    li {
    width: 16%;
    height: 120px;
    background-color: transparent;
    margin-right: 1px;
    margin-bottom: 1px;
    position: relative;
    display: inline-block;
}

#iconWall
    li .img-back,
#iconWall li .img-front {
    position: absolute;
    left: 0;
    top: 0;
    background-color: #fff;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#iconWall
    li img {
    width: auto;
    display: block;
    margin: 60px auto;
    transform: translate(0, -30px);
    height: 60px;
}

#iconWall
    li .img-3d {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    height: 100%;
}

#iconWall
    li .img-back {
    transform: rotateY(180deg);
}

#bo_w .form_01 .write_div
    fieldset,
#bo_w .form_01 .write_div input[type=text],
#bo_w .form_01 .write_div input[type=number],
#bo_w .form_01 .write_div input[type=password] {
    width: 100% !important;
}

.review-alert {}

.review-alert .swal-button--confirm:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 18px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    content: "\f044";
    vertical-align: middle;
    margin-right: 5px;
}

.review-alert .swal-button--confirm {}
    @media all and (max-width: 767px) {
    #iconWall li {
        width: 15%;
    height: 80px;
    }
    #iconWall li img {
    margin: 40px auto;
    transform: translate(0, -20px);
    height: 40px;
    }
    #footer .footer01 li {
    float: none;
    width: 100%;
    /* border-top: solid 1px #eee; */
    padding: 10px 0;
    }
    .round {

    }
    .round em {
    margin: 3% 20.5% 0 0;
    font-size: 16px;
    }
    .xans-product-action .ec-base-button .write_div .write_div_type {
    width: 100%;
    }
    .xans-product-action .ec-base-button .btnWhite.money_list {
    width: 30%;
    }
    .xans-product-action .ec-base-button .btnWhite strong {
    font-size: 14px;
    }
    .xans-product-action .ec-base-button .btnWhite em {
    font-size: 12px;
    }
    .xans-product-action .ec-base-button .btnWhite em span {
    font-size: 11px;
    display: block;
    line-height: 12px;
    }
    
}

@media all and (min-width: 992px) {
    .mainSlide .swiper-slide img {}
    .cateBanner .icon_area.grid4 .icon {
    width: 25%;
    }
    .main_video .video_area .video_box {
    padding-bottom: 30%;
    }
    .round {
    max-height: 200px;
    }
    .main_video .video_area .video_box iframe {
    height: 190%;
    }
    .mainBanner01 {
    width: 50%;
    float: left;
    height: 200px;
    margin-bottom: 20px;
    }
    
}

.home-wrap {
    padding: 10px;
    background-color: #1e1f23;
}

.home-wrap .custom-swiper {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: var(--card-radius);
    border: 3px solid transparent}

.home-wrap .custom-swiper .van-swipe {
    border-radius: 8px;
    overflow: hidden}

.home-wrap .custom-swiper .van-swipe .van-swipe__indicators {
    bottom: 15px!important}

.home-wrap .custom-swiper .van-swipe .van-swipe__indicator--active {
    opacity: 1;
    background: var(--btn-text)}

.home-wrap .custom-swiper .van-swipe .van-swipe-item {
    border-radius: 8px}

.home-wrap .custom-swiper .van-swipe .van-swipe-item
    img {
    width: 100%;
    height: 175px;
    border-radius: 8px;
    object-fit: center}
.home-wrap
    li {
    overflow: hidden;
    background-size: cover;
    padding: 0;
    border-radius: 10px;
    border: solid 2px #fff;
    min-height: 80px;
}

.home-wrap .card1 {
    background: url(../img/7Z1kiAFyUcDaGohe6n.png) no-repeat right;
}

.home-wrap .card2 {
    background: url(../img/1L0DWnex5kBG8YrEpv.png) no-repeat right;
}
.home-wrap
    li a {
    position: relative;
}

.home-wrap .customer-van-tabs .van-tabs__line {
    background: linear-gradient(to right,#28c7a0,#847cd5)}

.box {
    margin: 0;
    width: 100%;
    position: relative;
    z-index: 2;
    padding-bottom: 10px;
    /* background-color: #fef800; */
}

.box #nav {
    width: 96%;
    height: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 auto;
}

.box #nav .Li {
    flex: 1;
    line-height: 0.88rem;
    color: #90A2B0;
    text-align: center;
    font-weight: bold;
    font-size: 0.24rem;
}

.box #nav .active {
    color: #aaa;
    width: 20%;
    margin: 0 auto;
    text-align: left;
    border-bottom: 2px solid #333;
    font-size: 16px;
    line-height: 50px;
}
.live_list_table {
    width: 96%;
    margin: 0 auto;
    color: #aaa;
}

.live_list_table
    th {
    text-align: center;
    font-size: 11px;
    background: #111;
    padding: 6px;
    color: #aaa;
    line-height: 30px;
}

.live_list_table
    tbody tr {
    background-color: #444;
   border-bottom: 1px solid #fff;
    border-top: 1px solid #fff;
    font-size: 13px;
    /*     cursor: pointer; */
}

.live_list_table
    tbody tr:hover {
    background-color: #f5f5f5;
}

.live_list_table
    tbody tr td {
    height: 40px;
}
.live_list_table
    tbody tr td.td_center {
    text-align: center;
}
.live_list_table
    tbody tr td.td_right {
    text-align: right;
}
.live_list_table
    tbody tr td.td_left {
    text-align: left;
}
.live_list_table
    tbody tr td em {
    font-weight: bold;
    font-size: 11px;
}
.live_list_table
    tbody tr td span {
    font-size: 11px;
    margin: 0 5px;
    width:auto;
    background:none;
    text-align:center;
    padding:0 5px;
    text-indent:0;
    display:inline-block;
    position: relative;
    top: 0;
    right: auto;
}
.blue {
    color: #3883fc;
}
.green {
    color: green;
}
.red {
    color: #fe5d64;
}
.on {
    color: #09c497;
}

.in {
    color: #90a2b0;
}
.top-box {
    background: #fff;
    width: 100%;
    position: relative;
}

.top-box .notice {
    height: 40px;
    position: relative;
    width: 100%;
    border: none;
    border-radius: 0;
    text-align: left;
    padding: 0 30px 20px;
    line-height: 40px;
    overflow: hidden;
    border-bottom: solid 1px #333;
}

.top-box .notice
    a {
    color: #333;
    font-size: 14px;
}

.top-box .notice::after {
    content: "";
    display: block;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left: 5px solid #333;
}

.top-bottom {
    width: 100%;
}

.top-bottom .conatiner {
    box-sizing: border-box;
    background-color: #feda48;
    /* width: 100%; */
    border-radius: 0;
    margin: 0 auto;
    display: block;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0 0;
    font-size: 14px;
}

.minScroll {
    height: 108px;
    overflow: hidden;
}
.lt {
    background-color: #111;
    margin: 10px 0;
    padding: 0 0 20px 0;
}
.lt
    h2{
  margin-bottom: 10px !important;
}
.lt
    h2 a{
  display: block;
    color: #333;
    width: 96%;
    margin: 0 auto;
    text-align: left;
    border-bottom: 2px solid #333;
    font-size: 16px;
    line-height: 50px;
}
.lt
    ul {
  padding:0 20px;
}
.lt
    li{
  text-align:left;
    background: #feda48;
    padding:0;
    height: 36px;
    line-height:36px;
    border-bottom: 1px solid #fff;
}
.lt .noti-tit, .lt
    li .deco {
  float: left;
}
.lt
    li .time {
  float: right;
    color: #585858;
    font-size: 12px;
}
.lt .noti-tit {
    display:inline-block;
    color:#333;
    text-decoration:none;
    padding-left: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.lt li .deco {
  font-size: 15px;
    color: #585858;
    padding-right: 3px;
    line-height: 36px;
}
.lt .noti-tit span {
    color:#ff0000;
    font-weight:bold;
}
.lt li i{
  color:#ff0000;
}
.lt li .fa-heart{
  color:#ff0000;
}
.lt li .new_icon{
    display:inline-block;
    padding: 0 3px;
    line-height:15px;
    font-size:0.92em;
    color:#fff;
    background:#c56bed
}
.lt li .cnt_cmt{
    color:#48a3d5
}

#banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 90px;
}

.img_zoom,
.img_zoom a {
    overflow: hidden;
}

.img_zoom a img {
    -webkit-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}

.img_zoom a:hover img {
    -webkit-transition: all 0.3s ease-in;
    -webkit-transform: scale(1.1);
    -ms-transition: all 0.3s ease-in;
    -ms-transform: scale(1.1);
    -moz-transition: all 0.3s ease-in;
    -moz-transform: scale(1.1);
    transition: all 0.3s ease-in;
    transform: scale(1.1);
}

#boardArea {
    overflow: hidden;
    margin: 50px 0 0;
    border-top: 1px solid #ddd;
}

#bannerArea {
    margin: 22px 0 0;
}

#bannerArea h2 {
    margin: 0 0 16px;
    font-weight: normal;
    font-size: 20px;
    color: #222;
    text-align: center;
}

.top_titleArea {
    width: 100%;
    margin: 0 auto;
}

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

.titleArea {
    position: relative;
    height: 150px;
    background: #fcdd5b url(../img/sub.jpg) center center repeat-x;
    background-size: 100% auto;
    overflow: hidden;
    background-color: transparent;
    margin-bottom: 20px;
}

.titleArea h2 {
    color: #efc89c;
    font-size: 24px;
    font-weight: 500;
    margin-top: 60px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 99;
    width: 100%;
}
.titleArea h2 i {
    display: inline-block;
    margin: 0 5px;
    background: url(../img/sub_icon.png) center center repeat-x;
    background-size: 30px auto;
    width: 30px;
    height: 30px;
    vertical-align: sub;
}
.titleArea h2 em {
    color: #fff;
    font-size: 2rem;
    margin: 0 5px;
}
.titleArea p {
    display: block;
    position: relative;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    color: #555;
    margin: 4px 0 0;
}

.titleArea ul {
    padding: 5px 0;
    color: #777;
    line-height: 20px;
}

.titleArea ul li {
    position: relative;
    padding: 0 0 0 9px;
    font-size: 14px;
}

.titleArea ul li:before {
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    content: "";
    width: 2px;
    height: 2px;
    margin: -2px 0 0 0;
    background: #939393;
}

.top_titleArea .imgArea img {
    width: 100%;
}

.top_titleArea .path {
    padding-top: 10px;
}

.top_titleArea .path ol {
    padding-right: 16px;
    box-sizing: border-box;
}

.path {
    overflow: hidden;
    height: 36px;
    line-height: 36px;
    font-size: 12px;
    padding: 0 3%;
    margin: 0;
    border-top: solid 1px #555;
    border-bottom: solid 1px #555;
    background-color: #333;
}

.path span {
    overflow: hidden;
    position: absolute;
    width: 0;
    height: 0;
    white-space: nowrap;
    text-indent: 100%;
}

.path ol {
    float: right;
}

.path li {
    float: left;
    padding: 0;
    margin: 0 0 0 8px;
    color: #efc89c;
    line-height: 36px;
    vertical-align: middle;
}

.path li:first-child {
    background: none;
}

.path li a {
    color: #efc89c;
    line-height: 36px;
    vertical-align: middle;
}

.path li strong,
.path li strong a {
    color: #222;
}

.boardMain {
    overflow: hidden;zoom: 1;
}

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

.boardMain td img {
    vertical-align: middle;
    margin: 1px;
}

.boardMain .board {
    position: relative;
}

.boardMain .board>div {
    margin: 40px 0;
}

.boardMain .half {
    display: inline-block;
    float: left;
    width: 50%;
    padding: 0 16px;
    box-sizing: border-box;
}

.boardMain .leftArea {
    float: left;
    width: 50%;
}

.boardMain .leftArea .board {
    margin: 0 23px 65px 0;
}

.boardMain .rightArea {
    float: right;
    width: 50%;
}

.boardMain .rightArea .board {
    margin: 0 0 65px 23px;
}

.boardMain .board h3 {
    margin: 0 0 13px;
    padding: 0 0 8px;
    height: 28px;
    font-size: 18px;
    font-weight: 400;
    color: #333;
    border-bottom: 1px solid #ddd;
}

.boardMain .board .btnLink {
    position: absolute;
    top: 3px;
    right: 0;
}


.boardMain .board .galleryList {
    overflow: hidden;
}

.boardMain .board .galleryList ul {
    overflow: hidden;
}

.boardMain .board .galleryList li {
    float: left;
    position: relative;
    width: 33.333%;
    padding: 0 8px 12px 8px;
    word-break: break-all;
    box-sizing: border-box;
}

.boardMain .board .galleryList li span {
    display: block;
    font-size: 12px;
    color: #777;
}

.boardMain .board .galleryList li .imgLink {
    height: 0;
    padding-bottom: 100%;
}

.boardMain .board .galleryList li .imgLink,
.boardMain .board .galleryList li .imgLink:hover {
    display: block;
    font-size: 12px;
}

.boardMain .board .galleryList li .imgLink img {
    width: 100%;
}

.boardMain .board .galleryList li .subject {
    display: block;
    font-size: 14px;
    color: #555;
    margin: 8px 0;
}

#modalBackpanel {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
    background: #000;
}

#modalContainer {
    display: none;
    position: absolute;
    top: 100px;
    left: 100px;
    z-index: 10001;
    width: 975px;
    height: 720px;
    border: 1px solid #333;
    background: #fff;
}

#modalContainer #modalContent {
    width: 100%;
    height: 100%;
}

:root {
    --point_color: #ff6723;
    --main_border: #eee;
    --Btn_opacity: rgba(0, 0, 0, 0.4);
}

.popupWrap {
    position: fixed;
    bottom: 0;
    display: block;
    width: 100%;
    max-width: 538px;
    box-sizing: border-box;
    margin: 0 auto;
    background: #fff;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    animation: popup 3s ease-in-out alternate;
    z-index: 8;
    transition: 3s;
}

.main_popup {
    position: relative;
}

.main_popup .swiper-pagination {
    width: auto;
    left: 5%;
    bottom: 16px;
    font-size: 13px;
    line-height: 1em;
    color: #fff;
    background: var(--Btn_opacity);
    padding: 5px 12px 4px;
    border-radius: 30px;
}

.main_popup .img_area {}

.main_popup .img_area img {
    width: 100%;
}

.main_popup .txt {
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
}

.main_popup .txt h3 {
    font-size: 20px;
    line-height: 1.3em;
    font-weight: 500;
    letter-spacing: -.5px;
}

.main_popup .txt p {
    font-size: 14px;
    line-height: 1.4em;
    font-weight: 400;
    letter-spacing: -.2px;
    margin: 10px 0 0;
}

.popupBtn {
    display: flex;
    background: #fff;
    border-top: 1px solid var(--main_border);
    text-align: center;
}

.popupBtn>span {
    padding: 16px;
    flex: 1;
    font-size: 14px;
    cursor: pointer;
}

.popupBtn .popup_checkBox {
    border-right: 1px solid var(--main_border);
}

.popupBtn .popup_checkBox label {
    cursor: pointer;
}

.popupBtn .popup_closeBtn {}

.popupBtn .popup_closeBtn i {
    font-weight: 700;
}

@keyframes popup {
    0% {
        bottom: -100%;
    }
    100% {
        bottom: 0;
    }
}

.main_title {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 0 0 8px;
    padding: 0 16px;
    gap: 0 16px;
}

.main_title h2 {
    display: flex;
    flex-direction: column;
    font-size: 20px;
    color: #222;
    font-weight: 500;
    letter-spacing: -0.5px;
}

.main_title .sub {
    font-size: 14px;
    color: #555;
    font-weight: 400;
    letter-spacing: -0.2px;
    margin: 4px 0 0;
}

.main_title .more_btn {
    font-size: 14px;
    line-height: 36px;
    height: 36px;
    color: #000;
    font-weight: 400;
    border: 1px solid #000;
    padding: 0 20px;
    border-radius: 30px;
    margin: 0 0 10px;
}

.main_title .more_btn:hover {
    background: #000;
    color: #fff;
}

.round {
    border-radius: 10px;
    overflow: hidden;
    max-height: 300px;
}
.round  a {
    display: block;
    overflow: hidden;
}
.round em {

color: #fff;

position: absolute;

right: 0;

top: 0;

margin: 4% 20% 0 0;

font-size: 24px;

font-weight: bold;
}
.round img {
    max-width: 100%;
    height: auto;
}
.left_fix_img {
    padding: 0 2px;
}

.left_fix_img .tet_box {}

.left_fix_img .tet_box h3 {
    font-size: 32px;
    font-weight: 400;
    line-height: 1.3em;
    margin: 16px 0 0;
}

.left_fix_img .tet_box h3 span {
    font-weight: 700;
}

.left_download {
    position: absolute;
    bottom: 52px;
    padding: 2px;
    box-sizing: border-box;
}

.left_download h3 {
    font-size: 16px;
    color: #333;
    font-weight: 500;
    letter-spacing: -.5px;
}

.left_download p {
    font-size: 14px;
    color: #555;
    letter-spacing: -.2px;
}

.left_download .download {
    display: flex;
    gap: 6px;
    margin: 10px 0 0;
}

.left_download .download span {
    flex-basis: 40%;
}

.left_download .download span img {
    width: 100%;
}

#right_wrap img {
    width: 100%;
}

.eventBanner {
    position: relative;
    margin: 30px 8px;
}

.eventBanner .event_tit {
    font-size: 20px;
    font-weight: 600;
    margin: 16px auto 10px;
}

.eventBanner .img_zoom {
    position: relative;
}

.eventBanner img {
    width: 100%;
}

.eventBanner .txt {
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
}

.eventBanner .txt h3 {
    font-size: 17px;
    line-height: 1.3em;
    font-weight: 500;
    letter-spacing: -.5px;
}

.eventBanner .txt p {
    font-size: 13px;
    line-height: 1.4em;
    font-weight: 400;
    letter-spacing: -.2px;
    margin: 4px 0 0;
}

.pc {}

.mobile {
    display: none
}

.topBanner.swiper-container {
    width: 100%;
    height: 40px;
}

.topBanner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.topBanner ul li {
    text-align: center;
    height: 40px;
    background: #fde56a;
}

.topBanner ul li a {
    font-size: 14px;
    line-height: 40px;
    font-weight: 300;
    color: #000;
}

.topBanner .top_closeBtn {
    position: absolute;
    bottom: 14px;
    right: 5%;
    width: 11px;
    height: 11px;
    cursor: pointer;
    z-index: 999;
}

.topBanner .top_closeBtn img {
    width: 100%;
}

.topBanner .top_checkBox {
    position: absolute;
    bottom: 12px;
    right: 6.5%;
    font: 11px 돋움;
    color: #fafafa;
    z-index: 999;
}

#header {
    position: fixed;
    width: 100%;
    max-width: 720px;
    z-index: 111;
    left: 50%;
    top: 0;
    margin-left: -360px;
}

#header .inner {
    position: relative;
    width: 100%;
    z-index: 1;
    margin: 0 auto;
}

#header .inner:after {
    content: "";
    display: block;
    clear: both;
}

#header .topArea {zoom: 1;
}

#header .topArea p {}

#header .topArea:after {
    content: "";
    display: block;
    clear: both;
}

#header .topArea02 {
    position: relative;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0 3%;
    box-sizing: border-box;
    z-index: 2;
    background-color: #feda48;
    border-bottom: solid 2px #222;
    background-image: linear-gradient(to right, #feda48, #efc89d);
}
.top_times {
        display: block;
        width: 100%;
        margin: 0 auto;
        text-align: center;
        background-color: #222;
        padding: 3% 0;
    }
    .top_times li {
    width: 45%;
    display: inline-block;
    }
    .top_times li em {
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    }
    .top_times li span {
    display: block;
    font-size: 12px;
    line-height: 24px;
    color: #efc89c;
    }
#header .topArea02 .right_icon {
    display: flex;
    position: absolute;
    z-index: 3;
    margin-right: 10px;
    right: 0;
}

#header .topArea02 .right_icon a i {
    font-size: 16px;
    color: #333;
    margin: 0;
    vertical-align: middle;
}

#header .topArea02 .right_icon a span {
    font-size: 14px;
    color: #333;
    margin: 0;
    vertical-align: middle;
    font-weight: bold;
    line-height: 18px;
}

#header .topArea02 .right_icon em {
    margin: 0 10px 0 5px;
    color: #777;
}

#header .topArea02 .right_icon>div {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

#header .topArea02 .right_icon .cartWrap .count {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 11px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    padding: 1px;
    background: var(--point_color);
    border-radius: 100%;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    text-align: center;
}

#header .xans-layout-logotop {
    position: absolute;
    box-sizing: border-box;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 2;
}

#header .xans-layout-logotop a {
    display: block;
    overflow: hidden;
    margin: 10px 0 0 10px;
}

#header .xans-layout-logotop img {
    width: auto;
    max-height: 40px;
}

#menuFix {
    width: 100%;
    background: #fff;
    max-width: 538px;
    margin: 0 auto;
    box-sizing: border-box;
}

#menuFix.menuFix_fixed {
    max-width: 538px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 90;
    zoom: 1;
}

#menuFix.menuFix_fixed .topCate .category {
    display: none;
}

#header .topCate {
    text-align: center;
}

#header .topCate .Cate {
    border-bottom: 1px solid var(--main_border);
}

#header .topCate .Cate ul {
    display: flex;
    justify-content: space-around;
}

#header .topCate .Cate ul li {
    padding: 11px 0;
    width: auto;
    position: relative;
}

#header .topCate .Cate ul li a {
    display: flex;
    color: #333;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -.5px;
    vertical-align: middle;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#header .topCate .Cate ul li:hover a {
    color: var(--point_color);
}

#header .topCate .Cate ul li a i {
    color: var(--point_color);
}

#header .topCate .Cate ul li a:after {
    height: 2px;
    width: 100%;
    background: var(--point_color);
    content: "";
    position: absolute;
    left: 0;
    bottom: 2px;
    transform: scaleX(0);
    transition: 0.3s;
}

#header .topCate .Cate ul li a:hover:after {
    transform: scaleX(1);
}

.side {
    position: relative;
    z-index: 8;
}

.side .btnCate {
    position: relative;
    display: block;
    width: 100%;
    height: 30px;
    line-height: 30px;
    background: transparent;
    box-sizing: border-box;
    cursor: pointer;
    z-index: 1;
}

.side .btnCate i {
    display: block;
    float: left;
    font-size: 32px;
    line-height: 36px;
    vertical-align: middle;
}

.side .btnCate span {
    display: block;
    float: left;
    font-size: 16px;
    vertical-align: middle;
    line-height: 36px;
    margin: 3px 0 0 5px;
}

.fixed_btn2 {
    cursor: pointer;
    margin: 0 auto;
    background-color: #efc89d;
    background-image: linear-gradient(to top, #feda48, #efc89d);
    border-top: 2px solid #fff;
    box-sizing: border-box;
    position: fixed;
    right: 0;
    bottom: 0px;
    max-width: 720px;
    z-index: 111;
    left: 50%;
    top: auto;
    margin-left: -360px;
}

.fixed_btn2 ul.box {
    display: flex;
    justify-content: space-around;
    padding: 7px 0;
    background-color: transparent;
}

.fixed_btn2 ul.box li {
    position: relative;
    flex-basis: 20%;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.fixed_btn2 ul.box li.home {

}
.fixed_btn2 ul.box li.home::after {
    content: "";
    position: absolute;
    background-color: #fef800;
    width: 80px;
    height: 80px;
    top: 0;
    left: 50%;
    border-radius: 50%;
    margin-top: -30px;
    margin-left: -40px;
    filter: drop-shadow(0em -6px 8px rgba(0, 0, 0, 0.06));
}
.fixed_btn2 ul.box li.home a {
    
position: relative;
    
z-index: 2;
    
width: 80px;
    
top: 0;
    
margin: -10px auto 0;
}
.fixed_btn2 ul.box li img {
    width: 28px;
    transition: 0.3s;
}

.fixed_btn2 ul.box li p {
    font-size: 13px;
    padding-top: 5px;
    transition: 0.3s;
    color: #111;
}

.fixed_btn2 ul.box li:hover i,
.fixed_btn2 ul.box li:hover p {
}

#layout_detail .fixed_btn {
    bottom: 130px;
}

#layout_detail .ec-base-button.gFixed {
    display: none;
    bottom: 60px;
}

#layout_detail .xans-layout-footerpackage {
    padding-bottom: 120px;
}

.swiper-container.mainSlide {
    position: relative;
    padding-bottom: 0px;
    margin: 0 auto;
    max-width: 1920px;
    width: 100%;
    height: 100%;
    text-align: center;
    max-height: 250px;
}

.mainSlide .swiper-slide {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

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

.mainSlide a {
    line-height: 0;
}

.mainSlide .swiper-slide .txt {
    position: absolute;
    top: 30%;
    left: 5%;
    color: #000;
    letter-spacing: -0.3px;
    text-align: left;
    width: 80%;
}

.mainSlide .swiper-slide .txt.right {
    left: auto;
    right: 4%;
}

.mainSlide .swiper-slide .txt.wt {
    color: #fff;
    text-shadow: 1px 1px 2px rgb(0 0 0 / 45%);
}

.mainSlide .swiper-slide .txt h3 {
    font-size: 24px;
    line-height: 1.3em;
    font-weight: 500;
    letter-spacing: -1px;
    color: #fef800;
    text-shadow: 2px 2px 3px #000;
}

.mainSlide .swiper-slide .txt p {
    font-size: 15px;
    line-height: 1.4em;
    font-weight: 400;
    margin: 10px 0 0;
    letter-spacing: -.5px;
    color: #efc89c;
    text-shadow: 2px 2px 3px #000;
}

.mainSlide .swiper-slide .txt .btn {
    display: inline-block;
    position: relative;
    border: 2px solid #efc89c;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    padding: 0 16px;
    font-size: 13px;
    line-height: 36px;
    height: 36px;
    color: #efc89c;
    font-weight: 500;
    margin: 15px 0 0;
    overflow: hidden;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    text-shadow: 2px 2px 3px #000;
    z-index: 1;
}

.mainSlide .swiper-slide .txt .btn:after {
    content: "";
    width: 0%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.mainSlide .swiper-slide .txt .btn:hover {
    color: #fff;
}

.mainSlide .swiper-slide .txt .btn:hover:after {
    width: 100%;
    z-index: -1;
}

.mainSlide .swiper-slide .txt .btn i {
    padding: 0 0 0 16px;
    color: #efc89c;
}

.mainSlide .swiper-slide .txt .btn.wt {
    border: 1px solid #fff;
    color: #fff;
}

.mainSlide .swiper-slide .txt .btn.wt:after {
    background: #fff;
}

.mainSlide .swiper-slide .txt .btn.wt:hover {
    color: #000;
}

.mainSlide .options {
    position: absolute;
    bottom: 16px;
    right: 14px;
    margin: 0 auto;
    display: flex;
    display: none;
}

.mainSlide .options .page_option {
    display: flex;
    border-radius: 30px;
    background: var(--Btn_opacity);
    margin: 0 2px;
    z-index: 10;
}

.mainSlide .swiper-pagination {
    position: relative;
    width: 40px;
    height: 24px;
    line-height: 28px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
}

.mainSlide .btns {
    display: flex;
    z-index: 10;
}

.mainSlide .btns button {
    width: 24px;
    height: 24px;
    background: var(--Btn_opacity);
    border-radius: 100%;
    box-sizing: border-box;
    margin: 0 2px;
    cursor: pointer;
}

.mainSlide .btns button:hover {
    opacity: 0.5;
}

.mainSlide .btns i {
    font-size: 18px;
    color: #fff;
    line-height: 24px;
}

.mainSlide .swiper-button-next,
.mainSlide .swiper-button-prev {
    position: relative;
    top: auto;
    left: 0;
    right: 0;
    background: none;
    box-shadow: none;
    width: 24px;
    height: 24px;
}

.mainSlide .swiper-button-prev::before,
.mainSlide .swiper-button-next::before {
    top: 8px;
}

.mainSlide .swiper-button-prev::after,
.mainSlide .swiper-button-prev::before {
    left: 7px;
}

.mainSlide .swiper-button-prev::after,
.mainSlide .swiper-button-next::after {
    top: 14px;
}

.mainSlide .swiper-button-next::after,
.mainSlide .swiper-button-next::before {
    left: 7px;
}

.cateBanner {
    position: relative;
    width: 100%;
    background: #1e1f23;
    background-size: 100% 100%;
}

.cateBanner .icon_area {
    display: flex;
    flex-wrap: wrap;
    padding: 12px;
    box-sizing: border-box;
    border-bottom: solid 2px #333;
}

.cateBanner .icon_area .icon {
    text-align: center;
    vertical-align: top;
    padding: 4px;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.cateBanner .icon_area .icon>a {
    display: flex;
    flex-direction: column;
    row-gap: 4px;
}

.cateBanner .icon_area .icon_bg {
    max-width: 100px;
    margin: 0 auto;
    /* background-image: linear-gradient(to top, #feda48, #efc89d); */
}

.cateBanner .icon_area .icon_bg img {
    width: 100%;
}

.cateBanner .icon_area .icon_txt {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #efc89c;
}

.cateBanner .icon_area.grid3 .icon {
    width: 33.333%;
}

.cateBanner .icon_area.grid4 .icon {
    width: 25%;
}

.cateBanner .icon_area.grid5 .icon {
    width: 20%;
}

.cateBanner .icon_area.grid6 .icon {
    width: 16.666%;
}

.main_video {
    position: relative;
    margin: 0 auto;
    width: 100%;
}

.main_video .video_area {
    position: relative;
    margin: 0;
    padding: 0 16px;
    box-sizing: border-box;
}

.main_video .video_area .video_box {
    position: relative;
    padding-bottom: 56%;
    height: 0;
}

.main_video .video_area .video_box iframe {
    position: absolute;
    top: -30%;
    left: 0;
    width: 100%;
    height: 160%;
}

.main_video .video_area .txt_box {
    position: absolute;
    left: 7%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.main_video .video_area .txt_box img {
    width: 100%;
    max-width: 124px;
}

.main_video .video_area .txt_box p {
    font-size: 27px;
    font-weight: 600;
    color: #fff;
    padding-top: 15px;
    line-height: 1.2em;
    width: 60%;
}

.mainBanner01 {
    position: relative;
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

.mainBanner01 .img_area img {
    width: 100%;
}

.mainBanner01 .txt {
    position: absolute;
    left: 12%;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
}

.mainBanner01 .txt h3 {
    font-size: 24px;
    line-height: 1.3em;
    font-weight: 500;
    letter-spacing: -.5px;
    display: inline-block;
}
.mainBanner01 .txt span {

background-color: #26e600;

display: inline-block;

margin-left: 10px;

padding: 3px 10px;

border-radius: 5px;

vertical-align: top;

text-shadow: 1px 1px 2px #000;

font-weight: normal;

border: solid 2px #fff;
}
.mainBanner01 .txt p {
    font-size: 12px;
    line-height: 12px;
    font-weight: 400;
    letter-spacing: -.2px;
    margin: 10px 0 0;
}

.mainBanner01 .txt .btn {
    display: inline-block;
    position: relative;
    border: 1px solid #000;
    padding: 8px 14px;
    font-size: 1rem;
    line-height: 14px;
    color: #000;
    margin: 15px 0 0;
    overflow: hidden;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    z-index: 1;
}

.mainBanner01 .txt .btn:after {
    content: "";
    width: 0%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.mainBanner01 .txt .btn:hover {
    color: #fff;
}

.mainBanner01 .txt .btn:hover:after {
    width: 100%;
    z-index: -1;
}

.mainBanner01 .txt .btn i {
    padding: 0 0 0 32px;
}

.mainBanner02 {
    position: relative;
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

.mainBanner02 .img_area img {
    width: 100%;
}

.mainBanner02 .txt {
    position: absolute;
    left: 6%;
    top: 50%;
    transform: translateY(-50%);
    color: #333;
}

.mainBanner02 .txt h3 {
    font-size: 20px;
    line-height: 1.3em;
    font-weight: 500;
    letter-spacing: -.5px;
}

.mainBanner02 .txt p {
    font-size: 14px;
    line-height: 1.4em;
    font-weight: 400;
    letter-spacing: -.2px;
    margin: 10px 0 0;
}

.mainBanner02 .txt .btn {
    display: inline-block;
    position: relative;
    border: 1px solid #000;
    padding: 8px 14px;
    font-size: 1rem;
    line-height: 14px;
    color: #000;
    margin: 15px 0 0;
    overflow: hidden;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    z-index: 1;
}

.mainBanner02 .txt .btn:after {
    content: "";
    width: 0%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.mainBanner02 .txt .btn:hover {
    color: #fff;
}

.mainBanner02 .txt .btn:hover:after {
    width: 100%;
    z-index: -1;
}

.mainBanner02 .txt .btn i {
    padding: 0 0 0 32px;
}

.couponBanner01 {
    position: relative;
    width: 100%;
    margin: 6% auto 0;
    padding: 0 16px;
    box-sizing: border-box;
}

.couponBanner01 .couponBox {
    position: relative;
    display: flex;
    border-radius: 4px;
    overflow: hidden;
}

.couponBanner01 .couponBox::before {
    content: "";
    position: absolute;
    top: -18px;
    right: 27%;
    display: inline-block;
    width: 24px;
    height: 24px;
    background: #fff;
    border-radius: 100%;
    border: 4px solid var(--point_color);
    z-index: 1;
}

.couponBanner01 .couponBox::after {
    content: "";
    position: absolute;
    bottom: -18px;
    right: 27%;
    display: inline-block;
    width: 24px;
    height: 24px;
    background: #fff;
    border-radius: 100%;
    border: 4px solid var(--point_color);
    z-index: 1;
}

.couponBanner01 .couponBox>div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 24px;
}

.couponBanner01 .left {
    flex: 3;
    background: #fff;
    border: 4px solid var(--point_color);
    border-right: 4px dashed var(--point_color);
}

.couponBanner01 .left h3 {
    font-size: 20px;
    color: #222;
    line-height: 1.3em;
    font-weight: 500;
    letter-spacing: -0.5px;
}

.couponBanner01 .left p {
    font-size: 14px;
    color: #555;
    font-weight: 400;
    letter-spacing: -0.2px;
}

.couponBanner01 .right {
    flex: 1;
    align-items: center;
    background: var(--point_color);
}

.couponBanner01 .right i {
    font-size: 60px;
    color: #fff;
}

.couponBanner01 .right span {
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    animation: blink 0.7s ease-in-out infinite alternate;
}

@keyframes blink {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.longBanner01 {
    position: relative;
    width: 100%;
    margin: 40px auto 0;
    box-sizing: border-box;
}

.longBanner01 .img_area img {
    width: 100%;
}

.longBanner01 .txt {
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
    color: #333;
}

.longBanner01 .txt h3 {
    font-size: 20px;
    line-height: 1.3em;
    font-weight: 500;
    letter-spacing: -.5px;
}

.longBanner01 .txt p {
    font-size: 14px;
    line-height: 1.4em;
    font-weight: 400;
    letter-spacing: -.2px;
    margin: 10px 0 0;
}

.mainGallery {
    width: 100%;
    margin: 6% auto 0;
}

.mainGallery .galleryList {
    position: relative;
    margin: 0 auto;
}

.mainGallery .galleryList .galleryGrid {
    display: flex;
    flex-wrap: wrap;
    padding: 0 8px;
}

.mainGallery .galleryList li {
    padding: 8px;
    box-sizing: border-box;
}

.mainGallery .galleryList li>div {}

.mainGallery .galleryList li .imgLink {}

.mainGallery .galleryList li .imgLink img {
    width: 100%;
}

.mainGallery .galleryList li .txt {}

.mainGallery .galleryList li .txt .subject {
    font-size: 14px;
    color: #222;
    font-weight: 500;
    line-height: 1.4em;
    margin: 0 0 8px;
}

.mainGallery .galleryList li .txt .cont {
    font-size: 13px;
    color: #555;
    font-weight: 400;
    height: 20px;
    line-height: 1.5em;
    margin: 0 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.mainReview {
    width: 100%;
    margin: 40px auto 0;
}

.mainReview .reviewList {
    position: relative;
    margin: 0 auto;
}

.mainReview .swiper-container {
    padding: 0 0 24px;
}

.mainReview .reviewList li {
    width: 60%;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    top: 0;
    transition: .2s all;
    background: #fff;
    margin: 0 0 8px;
}

.mainReview .reviewList li:first-child {
    margin-left: 16px;
}

.mainReview .reviewList li:last-child {
    margin-right: 16px;
}

.mainReview .reviewList li .imgLink {
    height: 0;
    margin: 8px 0;
    padding-bottom: calc(100% - 2px);
    border: 1px solid #eee;
    box-sizing: border-box;
    overflow: hidden;
}

.mainReview .reviewList li .imgLink img {
    width: 100%;
}

.mainReview .reviewList li .txt {
    text-align: left;
    box-sizing: border-box;
    letter-spacing: -.3px;
}

.mainReview .reviewList li .txt .thumb_tit {
    display: block;
    font-size: 13px;
    line-height: 1em;
    color: #999;
    padding: 8px 0;
    height: 29px;
    box-sizing: border-box;
}

.mainReview .reviewList li .txt .subject {
    height: 20px;
    line-height: 20px;
    margin: 8px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.mainReview .reviewList li .txt .subject a {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.mainReview .reviewList li .txt .cont {
    font-size: 14px;
    color: #555;
    font-weight: 400;
    height: 42px;
    line-height: 1.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.mainReview .reviewList li .txt .txt_area {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mainReview .reviewList li .txt .point_rate img {
    width: 100%;
    max-width: 70px;
}

.mainReview .reviewList li.img_zoom a:hover .point_rate img {
    transform: scale(1);
}

.mainReview .reviewList li .txt .date {
    font-size: 13px;
    color: #999;
}

.mainReview .reviewList li .txt .writer {
    max-width: 64%;
    font-size: 13px;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.insta {
    margin: 20px auto 0;
    display: none;
}

.insta_box {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    padding: 12px 12px 0;
    box-sizing: border-box;
}

.insta_box li {
    flex-basis: 33.333%;
    padding: 4px;
    box-sizing: border-box;
}

.insta_box li img {
    width: 100%;
}

#footer {
    position: relative;
    /* margin: 30px 0 0; */
    background: #333;
    color: #aaa;
    border-top: 2px solid #555;
    padding: 16px;
    box-sizing: border-box;
}

#footer .inner {
    overflow: hidden;
    position: relative;
    width: 100%;
    max-width: 96%;
    margin: 0 auto; zoom: 1;
}

#footer .inner:after {
    content: "";
    display: block;
    clear: both;
}

#footer .footer_tit {
    color: var(--point_color);
    font-size: 20px;
    font-weight: bold;
    padding: 0 16px;
    box-sizing: border-box;
}

#footer .footer01 {
    margin: 10px 0 20px;
    padding: 0 16px;
    box-sizing: border-box;
    overflow: hidden;
}

#footer .footer01 h3 {
    font-size: 20px;
    font-weight: 500;
    margin: 0 0 4px;
}

#footer .footer01 h3 i {
    font-size: 24px;
    vertical-align: middle;
}

#footer .footer01 li {
    display: inline-block;
    margin: 0 20px 0 0;
    vertical-align: text-top;
}

#footer .footer01 .tel {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 8px;
}

#footer .footer01 .time {
    font-size: 14px;
    line-height: 1.8em;
    font-weight: 500;
}

#footer .footer01 .text {
    font-size: 14px;
    line-height: 32px;
    font-weight: 500;
}

#footer .footer02 .footer_info {
    margin: 16px 0;
    box-sizing: border-box;
}

#footer .footer02 .footer_info #acco {
    position: relative;
    width: 100%;
    margin: 0px auto;
}

#footer .footer02 .footer_info #acco h3 {
    font-size: 20px;
    font-weight: 500;
    padding: 0px 16px 10px;
    cursor: pointer;
}

#footer .footer02 .footer_info #acco h3 i {
    font-size: 20px;
    font-weight: 500;
    transition: all 0.3s;
}

#footer .footer02 .footer_info #acco h3.on i {
    transform: rotate(180deg);
}

#footer .footer02 .footer_info #acco .info {
    display: none;
    text-decoration: none;
    padding: 0 16px;
    -webkit-transition: easy-in 0.15s;
    -moz-transition: easy-in 0.15s;
    -o-transition: easy-in 0.15s;
    -ms-transition: easy-in 0.15s;
    transition: easy-in 0.15s;
}

#footer .footer02 .footer_info #acco .info span {
    padding-right: 10px;
    font-size: 13px;
    line-height: 1.8em;
    font-weight: 500;
}

#footer .footer02 .footer_info #acco .ft_logo {
    display: inline-block;
    padding: 0px 7px;
    margin-bottom: 10px;
}

#footer .footer02 .footer_info #acco .ft_logo img {
    max-width: 100%;
}

#footer .footer02 .footer_info #acco .utilMenu {
    display: flex;
    flex-wrap: wrap;
    margin: 16px 0 0;
}

#footer .footer02 .footer_info #acco .utilMenu li {
    padding-right: 16px;
    font-size: 13px;
    line-height: 1.8em;
    font-weight: 500;
}

#footer .footer03 {
    border-top: 1px solid #ddd;
    padding: 16px;
    box-sizing: border-box;
    display: block;
    text-align: center;
    margin: 0 auto 20px;
}

#footer .footer03 .copyright {
    font-size: 13px;
    font-weight: 500;
}

#footer .footer03 .footer_sns {
    display: flex;
}

#footer .footer03 .footer_sns li {
    padding: 0 4px;
}

#footer .footer03 .footer_sns li:last-child {
    padding: 0 0 0 6px;
}

#footer .footer03 .footer_sns li i {
    font-size: 21px;
}

.fixed_btn {
    position: fixed;
    width: 50px;
    transform: translateX(350px);
    right: 30%;
    bottom: 90px;
    text-align: center;
    cursor: pointer;
    z-index: 7;
    display: none;
}

.fixed_btn .scroll_btn {
    width: 48px;
    height: 48px;
    margin: 0 auto;
    border: 1px solid #ddd;
    border-radius: 30px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.5);
    text-align: center;
}

.fixed_btn a i {
    color: #000;
    font-size: 20px;
    line-height: 42px;
}

.fixed_btn a i[class*=" xi-"],
.fixed_btn a i[class^=xi-] {
    font-size: 26px;
}

.fixed_btn a i:hover {
    color: #ddd;
}

.fixed_btn .kakao_icon {
    width: 100%;
}

.fixed_btn .telegram_icon {
    width: 100%;
}

.fixed_btn img {
    width: 100%;
}

.fixed_btn img:hover {
    opacity: 0.5;
}

#goBtn .btn {
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

#goBtn .up {
    display: block;
    text-align: center;
    line-height: 40px;
}

#goBtn .down {
    display: block;
    text-align: center;
}

.txtInfo {
    color: #707070;
}

.txtWarn {
    color: #f76560;
}

.txtEm {
    color: #888;
    font-size: 11px;
    font-style: italic;
    max-width: 160px;
    display: block;
    margin: 0 auto;
}

.txtDel,
.strike,
.discount {
    text-decoration: line-through;
    font-weight: normal;
}

.strike strong,
.discount strong {
    font-weight: normal;
}

.txtNormal {
    font-weight: normal;
    font-style: normal;
}

.txtNum {
    display: inline-block;
    font-size: 12px;
    color: #777;
    word-break: normal;
}

.txt11 {
    font-size: 11px;
}

.txt12 {
    font-size: 12px;
}

.txt14 {
    font-size: 14px;
}

.txt16 {
    font-size: 16px;
}

.txt18 {
    font-size: 18px;
    letter-spacing: -1px;
}

.txtIcon {
    font-size: 12px;
    font-style: normal;
}

.txtBreak {
    word-break: break-all;
    word-wrap: break-word;
}

html:lang(ja) .txt11,
html:lang(zh) .txt11,
html:lang(zh-tw) .txt11 {
    font-size: 12px;
}

.gBlank5 {
    display: block;
    margin-top: 5px;
}

.gBlank10 {
    display: block;
    margin-top: 10px;
}

.gBlank20 {
    display: block;
    margin-top: 20px;
}

.gBlank30 {
    display: block;
    margin-top: 30px;
}

.gIndent10 {
    margin-left: 10px;
}

.gIndent20 {
    margin-left: 20px;
}

.gSpace10 {
    margin-right: 10px;
}

.gSpace20 {
    margin-right: 20px;
}

.gMerge {
    position: relative;
    z-index: 1;
    margin-top: -1px;
}

.ec-base-qty {
    position: relative;
    display: inline-block;
    width: 50px;
    margin: 0 1px 0 0;
    text-align: left;
}

.ec-base-qty input[type="text"] {
    width: 22px;
    height: 23px;
    padding: 0 0 0 5px;
    line-height: 25px;
    border: 1px solid #d4d8d9;
    border-radius: 3px 0 0 3px;
}

.ec-base-qty .up {
    position: absolute;
    left: 27px;
    top: 0;
}

.ec-base-qty .down {
    position: absolute;
    left: 27px;
    bottom: 0;
}

.ec-base-qty .qtyUp {
    position: absolute;
    left: 27px;
    top: 0;
}

.ec-base-qty .qtyDown {
    position: absolute;
    left: 27px;
    bottom: 0;
}

.ec-base-qty .qtyUp .up {
    position: static;
    left: auto;
    top: auto;
}

.ec-base-qty .qtyDown .down {
    position: static;
    left: auto;
    top: auto;
}

.ec-base-chk {
    display: inline-block;
    position: relative;
    margin: 0 8px 0 0;
    width: 22px;
    height: 22px;
    vertical-align: top;
    cursor: pointer;
}

.ec-base-chk input {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.ec-base-chk .checkbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("//img.echosting.cafe24.com/skin/base/common/bg_join_check.png") no-repeat 0 0;
}

.ec-base-chk input:checked+.checkbox {
    background-position: -34px 0;
}

input,
select,
textarea {
    font-size: 100%;
    font-family: 'Montserrat', 'Noto Sans KR', Verdana, Dotum, AppleGothic, sans-serif;
    color: #353535;
    vertical-align: middle;
}

input[type=radio],
input[type=checkbox] {
    width: 13px;
    height: 13px;
    border: 0;
}

input[type=text],
input[type=password] {
    padding: 2px 4px;
    border: 1px solid #d5d5d5;
    color: #353535;
    font-size: 12px;
}

input[type=radio]+label,
input[type=checkbox]+label {
    margin: 0 4px 0 2px;
}

select {
    height: 24px;
    border: 1px solid #d5d5d5;
}

textarea {
    padding: 5px 6px;
    border: 1px solid #d5d5d5;
    line-height: 1.5;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #c1c1c1;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #c1c1c1;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #c1c1c1;
    opacity: 1;
}

legend {
    visibility: hidden;
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 0;
    height: 0;
    line-height: 0;
}

table tr.radioType input,
span.noBorder input {
    border: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 3px 0 0 !important;
    vertical-align: middle !important;
    background: none !important;
}

.gLabel {
    display: inline-block;
}

.gLabel label {
    margin-right: 20px;
    line-height: 22px;
}

.fWidthFull input[type=text] {
    width: 100%;
    height: 24px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.fWidthFull textarea {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.fWidthFull select {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.fList.typeHor .gLabel {
    margin-right: 20px;
}

.fList.typeVer .gLabel {
    display: block;
}

.ec-base-radio.typeDelivery .ec-base-label {
    display: block;
}

span.ec-base-help,
p.ec-base-help,
ul.ec-base-help li {
    margin: 2px 9px;
    padding: 1px 0 1px 20px;
    line-height: 1.4;
    background: url('//img.echosting.cafe24.com/skin/base/common/ico_info.gif') no-repeat 0 2px;
}

div.ec-base-help {
    margin: 20px 0;
    border: 1px solid #ddd;
    font-size: 13px;
    line-height: 24px;
}

div.ec-base-help>h2,
div.ec-base-help>h3 {
    padding: 9px 0 6px 10px;
    border-bottom: 1px solid #eee;
    color: #333;
    font-size: 14px;
    background: #fcfcfc;
}

div.ec-base-help .inner {
    padding: 0 9px 12px;
}

div.ec-base-help h4 {
    margin: 22px 0 -4px;
    color: #444;
    font-size: 14px;
    font-weight: normal;
}

div.ec-base-help h4:first-child {
    margin-top: 13px;
}

div.ec-base-help p {
    margin: 15px 0 0 10px;
    color: #707070;
}

div.ec-base-help ul,
div.ec-base-help ol {
    margin: 15px 0 0 11px;
}

div.ec-base-help li {
    color: #707070;
}

div.ec-base-help ol li {
    padding: 0 0 0 25px;
    background: url('//img.echosting.cafe24.com/skin/base/common/ico_number.png') no-repeat;
}

div.ec-base-help ol .item1 {
    background-position: -484px 5px;
}

div.ec-base-help ol .item2 {
    background-position: -434px -95px;
}

div.ec-base-help ol .item3 {
    background-position: -384px -195px;
}

div.ec-base-help ol .item4 {
    background-position: -334px -295px;
}

div.ec-base-help ol .item5 {
    background-position: -284px -395px;
}

div.ec-base-help ol .item6 {
    background-position: -234px -495px;
}

div.ec-base-help ol .item7 {
    background-position: -184px -595px;
}

div.ec-base-help ol .item8 {
    background-position: -134px -695px;
}

div.ec-base-help ol .item9 {
    background-position: -84px -795px;
}

div.ec-base-help ol .item10 {
    background-position: -34px -895px;
}

div.ec-base-help ul li {
    padding: 0 0 0 11px;
    background: url('//img.echosting.cafe24.com/skin/base/common/ico_dash.gif') no-repeat 0 7px;
}

.ec-base-help.typeDash li {
    padding: 0 0 0 11px;
    background: url("//img.echosting.cafe24.com/skin/base/common/ico_dash.gif") no-repeat 0 7px;
}

.ec-base-tooltip .ec-base-help.typeDash li {
    margin: 2px 0;
}


.ec-over-product .swiper-container {
    padding: 0 0 24px;
}

.prdRoll {
    position: relative;
    width: 100%;
    clear: both;
}

.prdRoll .prd_inner {
    width: 100%;
    margin: 0 auto;
}

.prdRoll .prdList>li {
    width: 38%;
}

.prdRoll .prdList>li:first-child {
    margin-left: 16px;
}

.prdRoll .prdList>li:last-child {
    margin-right: 16px;
}

.prdRoll .prdList>li .thumbnail {
    margin: 8px 0;
}

.prdRoll.xans-product-listrecommend .swiper-container,
.prdRoll.xans-product-listnew .swiper-container {
    overflow: visible;
}

.prdRoll[class*="list_"] {
    position: relative;
    width: 100%;
    clear: both;
    margin: 0 0 10%;
}

.prdRoll[class*="list_"] .prd_inner {
    width: 100%;
    margin: 0 auto;
}

.prdRoll[class*="list_"] .swiper-container {
    padding: 0 0 24px;
}

.prdRoll[class*="list_"] .prdList>li {
    width: 36%;
}

.prdRoll[class*="list_"] .prdList>li:first-child {
    margin-left: 8px;
}

.prdRoll[class*="list_"] .prdList>li:last-child {
    margin-right: 8px;
}

.prdRoll[class*="list_"] .prdList>li .thumbnail {
    margin: 8px 0;
}

.ec-over-product {
    margin: 40px auto 0;
}

.ec-over-product .title h3 {
    font-weight: normal;
    font-size: 18px;
    color: #222;
    padding: 0 8px;
}

.ec-over-product img {
    vertical-align: middle;
}

.ec-over-product a[href^='/product/detail.html']>img {
    border: 1px solid #eee;
}

.ec-over-product .prdList {
    width: 100%;
    margin: 0;
    font-size: 0;
    line-height: 0;
}

.ec-over-product .prdList>li {
    position: relative;
    display: inline-block;
    color: #757575;
    vertical-align: top;
}

.ec-over-product .prdList .chk {
    position: absolute;
    top: 16px;
    left: 16px;
    display: block;
}

.ec-over-product .prdList .thumbnail {
    position: relative;
    margin: 8px;
    text-align: center;
    image-rendering: -webkit-optimize-contrast;
}

.ec-over-product .prdList .thumbnail .prdImg {
    position: relative;
    width: 100%;
}

.ec-over-product .prdList .thumbnail a img {
    max-width: 100%;
    box-sizing: border-box;
}

.ec-over-product .prdList .thumbnail .basket {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 1;
    cursor: pointer;
    background: var(--Btn_opacity);
    border-radius: 100%;
    transition: 0.3s;
}

.ec-over-product .prdList .thumbnail .basket:hover {
    background: #000;
}

.ec-over-product .prdList .thumbnail .prdIcon {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
}

.ec-over-product .prdList .thumbnail .icon {
    opacity: 0;
    position: absolute;
    left: 8px;
    top: 8px;
    vertical-align: middle;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.ec-over-product .prdList .thumbnail .icon:after {
    content: "";
    display: block;
    clear: both;
}

.ec-over-product .prdList .thumbnail:hover .icon {
    opacity: 1;
}

.ec-over-product .prdList .thumbnail .promotion {
    position: absolute;
    top: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.ec-over-product .prdList .thumbnail .button {
    margin: 0 auto;
}

.ec-over-product .prdList .thumbnail .button img {
    cursor: pointer;
    margin: 0 1px;
}

.ec-over-product .prdList .thumbnail .button .option {
    display: inline;
    position: relative;
}

.ec-over-product .prdList .thumbnail .button .likeButton {
    display: inline-block;
    vertical-align: middle;
}

.ec-over-product .prdList .thumbnail .button .likeButton button {
    font-family: verdana;
    color: #555;
    letter-spacing: -1px;
    background: none;
}

.ec-over-product .prdList .thumbnail .button .likeButton button img {
    margin: 0;
    vertical-align: middle;
}

.ec-over-product .prdList .thumbnail .button .likeButton button strong {
    height: 16px;
    vertical-align: middle;
}

.ec-over-product .prdList .thumbnail .button .likeButton.selected button {
    color: #353535;
}

.ec-over-product .prdList .thumbnail .description {
    text-align: left;
    vertical-align: middle;
    opacity: 0;
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    min-height: 120px;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.ec-over-product .prdList .thumbnail:hover .description {
    opacity: 1;
}

.ec-over-product .prdList .description {
    margin: 0 auto;
    font-size: 12px;
    line-height: 18px;
    cursor: pointer;
    text-align: left;
    padding: 16px;
    box-sizing: border-box;
}

.ec-over-product .prdList .description .middle {
    margin: 100px 0 0;
}

.ec-over-product .prdList .description .left {
    text-align: left;
    height: 120px;
    vertical-align: middle;
    display: table-cell;
    padding-top: 5px;
    box-sizing: border-box;
}

.ec-over-product .prdList .description .name {
    display: block;
    text-align: left;
    font-weight: normal;
}

.ec-over-product .prdList .description .name a {
    color: #2e2e2e;
}

.ec-over-product .prdList .description .mileage {
    display: block;
}

.ec-over-product .prdList .description span.grid {
    display: block;
}

.ec-over-product .spec li .color {
    overflow: hidden;
    display: inline-block;
    margin: 3px 0 0 0;
}

.ec-over-product .spec li .chips {
    float: left;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    margin: 0 4px 2px 0;
    border: 1px solid #eee;
    font-size: 0;
    line-height: 0;
}

.ec-over-product ul.grid2>li {
    width: 50%;
    max-width: 640px;
}

.ec-over-product ul.grid3>li {
    width: 33.33%;
}

.ec-over-product ul.grid4>li {
    width: 25%;
}

.ec-over-product ul.grid5>li {
    width: 20%;
}

.ec-over-product ul.grid3>li .color {
    max-width: 230px;
}

.ec-over-product ul.grid4>li .color {
    max-width: 190px;
}

.ec-over-product ul.grid5>li .color {
    max-width: 130px;
}


.differentialShipping {
    display: none;
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 17px;
    z-index: 100;
    width: 350px;
    margin: 0 0 0 -176px;
}

.differentialShipping h3.title {
    margin: 0;
    height: 35px;
    padding: 0 35px 0 19px;
    border: 0;
    color: #fff;
    font-size: 14px;
    line-height: 35px;
    background: #495164;
}

.differentialShipping .content {
    padding: 12px 18px 14px 18px;
    border: 1px solid #757575;
    border-top: 0;
    text-align: center;
    background: #fff;
}

.differentialShipping .close {
    position: absolute;
    right: 14px;
    top: 12px;
}

.differentialShipping .close img {
    cursor: pointer;
}

.differentialShipping .content ul {
    color: #757575;
    line-height: 25px;
}

.differentialShipping .content li {
    overflow: hidden;
}

.differentialShipping .content li strong {
    float: left;
    font-weight: normal;
}

.differentialShipping .content li span {
    float: right;
    color: #2e2e2e;
}

.differentialShipping .content .info {
    margin: 7px 0 0;
    padding: 7px 0 0;
    border-top: 1px dotted #b0b1b3;
    color: #80aeef;
    text-align: right;
}

.ec-product-bgLT {
    background-position: left top;
}

.ec-product-bgLC {
    background-position: left center;
}

.ec-product-bgLB {
    background-position: left bottom;
}

.ec-product-bgRT {
    background-position: right top;
}

.ec-product-bgRC {
    background-position: right center;
}

.ec-product-bgRB {
    background-position: right bottom;
}

.ec-product-bgCT {
    background-position: center top;
}

.ec-product-bgCC {
    background-position: center center;
}

.ec-product-bgCB {
    background-position: center bottom;
}


.ec-over-product .prdList .description .ec-sale-rate {
    display: inline-block;
    padding-left: 5px;
    color: #f0352e;
    font-size: 16px;
    font-weight: 700;
}

@media all and (max-width:767px) {
    #header {

margin-left: 0;

left: 0;

}
    .fixed_btn2 {
        
    }
    .ec-over-product ul.grid5>li {
        width: 50%;
    }
    .ec-over-product ul.grid4>li {
        width: 50%;
    }
    .ec-over-product .title h2 {
        padding: 0 12%;
    }
    .ec-over-product .title h2 .sub {
        margin: 2px 0 0;
    }
    .xans-product-listitem .display상품요약정보 {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .thumbnail .cart img {
        max-width: 32px;
        right: 4px;
        bottom: 4px;
    }
}

.ec-base-paginate {
    margin: 30px 0;
    text-align: center;
    font-size: 0;
    line-height: 0;
}

.ec-base-paginate ol {
    display: inline-block;
    font-size: 0;
    line-height: 0;
    vertical-align: top;display: inline;zoom: 1;margin: 0;
}

.ec-base-paginate li {
    display: inline-block;
    margin: 0 0 0 -1px;
    font-size: 12px;
    color: #757575;
    vertical-align: top;display: inline;zoom: 1;
}

.ec-base-paginate li:first-child {
    margin-left: 0;
}

.ec-base-paginate img {
    vertical-align: top;
    display: none;
}

.ec-base-paginate>a:first-child:after {
    content: "<";
}

.ec-base-paginate>a:last-child:after {
    content: ">";
}

.ec-base-paginate>a.first {
    width: 32px;
    height: 32px;
    display: inline-block;
    vertical-align: top;
}

.ec-base-paginate>a.first:after {
    content: "<<";
    letter-spacing: -1px;
    margin-left: -8px;
}

.ec-base-paginate>a.last {
    width: 32px;
    height: 32px;
    display: inline-block;
    vertical-align: top;
}

.ec-base-paginate>a.last:after {
    content: ">>";
    letter-spacing: -1px;
    margin-left: -8px;
}

.ec-base-paginate>a:nth-child(2) {
    width: 32px;
    height: 32px;
    display: inline-block;
    vertical-align: top;
}

.ec-base-paginate>a:nth-child(2):after {
    content: "<";
}

.ec-base-paginate>a:nth-last-child(2) {
    width: 32px;
    height: 32px;
    display: inline-block;
    vertical-align: top;
}

.ec-base-paginate>a:nth-last-child(2):after {
    content: ">";
}

.ec-base-paginate>a:before,
.ec-base-paginate>a:after {
    font-size: 10px;
    line-height: 32px;
    color: #000;
    font-family: serif !important;
}

.ec-base-paginate li a {
    display: block;
    width: 32px;
    padding: 9px 0;
    font-weight: bold;
    color: #939393;
    line-height: 14px;
    background: #fff;
}

.ec-base-paginate li a:hover {
    text-decoration: none;
}

.ec-base-paginate li a.this {
    color: #333;
}

.ec-base-paginate a.nolink {
    cursor: default;
}

.ec-base-paginate.typeSub ol {
    margin: 7px 15px;
    vertical-align: middle;
}

.ec-base-paginate.typeSub li {
    font-size: 12px;
    border: 0;
}

.ec-base-paginate.typeSub img {
    vertical-align: middle;
}

.ec-base-paginate.typeSub li a {
    width: auto;
    margin: 0 5px 0;
    padding: 2px;
    color: #353535;
    background: none;
}

.ec-base-paginate.typeSub li a.this {
    color: #333;
    text-decoration: none;
    border: 0;
}

.ec-base-paginate.typeSub .first {
    margin-right: 3px;
}

.ec-base-paginate.typeSub .last {
    margin-left: 3px;
}

.fix-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99;
}

.typeMoreview {
    margin: 0 auto;
    background-color: #fff;
    width: 86%;
    max-width: 400px;
    position: relative;
    top: 30%;
    border-radius: 10px;
    padding: 0 20px 20px;
}

.typeMoreview .modal-close {
    position: absolute;
    right: 0;
    top: 0;
    padding: 0;
    text-align: center;
    font-size: 24px;
    line-height: 40px;
    width: 40px;
    height: 40px;
    color: #fff;
    background-color: #111;
    border-radius: 50%;
    margin: -20px;
    vertical-align: middle;
}

.typeMoreview .modal-close:hover {
    background-color: #555;
}

.typeMoreview .btnMore {
    display: block;
    position: relative;
    border: 2px solid #000;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    padding: 0;
    font-size: 18px;
    line-height: 40px;
    margin: 20px auto;
    color: #000;
    font-weight: 600;
    width: 80%;
    overflow: hidden;
    text-align: center;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    z-index: 1;
}

.typeMoreview .btnMore:after {
    content: "";
    width: 0%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.typeMoreview .btnMore:hover {
    color: #fff;
}

.typeMoreview .btnMore:hover:after {
    width: 100%;
    z-index: -1;
}

@media all and (max-width:767px) {
    .typeMoreview .btnMore:after {
        background: #000;
    }
    .typeMoreview .btnMore:hover {
        color: #fff;
    }
}

.ec-base-tab {
    position: relative;
}

.ec-base-tab .menu {
    margin: 0 0 20px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.ec-base-tab .menu:after {
    content: "";
    display: block;
    clear: both;
}

.ec-base-tab .menu li {
    float: left;
    border: 1px solid #eee;
    background: #f8f8f8;
    border-radius: 8px;
    margin: 4px;
}

.ec-base-tab .menu li a {
    display: block;
    min-width: 140px;
    margin: 0;
    padding: 10px 2px 9px;
    font-size: 14px;
    color: #999;
    text-decoration: none;
    outline: 0;
    text-align: center;
}

.ec-base-tab .menu li:first-child a {
    margin-left: 0;
}

.ec-base-tab .menu li.selected a {
    position: relative;
    margin: 0;
    color: #333;
    font-weight: 400;
}

.ec-base-tab .menu li.selected a::after {
    content: "";
    width: 4px;
    height: 4px;
    background: #f0352e;
    border-radius: 100%;
    position: absolute;
    left: 50%;
    top: 6px;
}

.ec-base-tab>.right {
    position: absolute;
    top: 8px;
    right: 10px;
    line-height: 24px;
    color: #909090;
}

.ec-base-tab.typeLight .menu li.selected a {
    margin: 0 0 -2px;
    border-bottom: 1px solid #fff;
    color: #404040;
    background: #fff;
}

.ec-base-tab[class*="grid"] .menu {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.ec-base-tab[class*="grid"] .menu li {
    float: none;
    display: table-cell;
    vertical-align: middle;
}

.ec-base-tab[class*="grid"] .menu li a {
    display: inline-block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 11px 0;
    border: 0;
}

.ec-base-tab[class*="grid"] .menu li.selected {
    position: relative;
    top: 0;
    right: 0;
    border: 1px solid #eee;
    background: #f8f8f8;
}

.ec-base-tab[class*="grid"] .menu li:first-child.selected {
    right: 0;
}

.ec-base-tab[class*="grid"] .menu li.selected a {
    position: static;
    background: none;
}

.ec-base-tab.grid2 .menu li {
    width: 50.5%;
}

.ec-base-tab.grid3 .menu li {
    width: 34%;
}

.ec-base-tab.grid4 .menu li {
    width: 25.5%;
}

.ec-base-tab.grid5 .menu li {
    width: 20.5%;
}

.ec-base-tab.grid6 .menu li {
    width: 17%;
}

.ec-base-tab.gFlex .menu {
    display: flex;
    border-right: 0;
}

.ec-base-tab.gFlex .menu:after {
    display: none;
}

.ec-base-tab.gFlex .menu li {
    display: flex;
    align-items: center;
    float: none;
    flex: 1;
    position: relative;
}

.ec-base-tab.gFlex .menu li:last-child {
    border-right: 1px solid #cbcdce;
}

.ec-base-tab.gFlex .menu li a {
    width: 100%;
    min-width: 0;
    border-right: 0;
    background: none;
    word-break: break-all;
}

.ec-base-tab.gFlex .menu li a:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
}

.ec-base-tab.gFlex .menu li.selected {
    border: 1px solid #292929;
    border-bottom: 0;
    background: #4a5164;
}

.ec-base-tab.gFlex .menu li.selected a {
    left: 0;
    margin: 0 0 -1px -1px;
    background: #4a5164;
    border: 0;
    position: initial;
}

[class^='btnNormal'],
a[class^='btnNormal'] {
    display: inline-block;
    box-sizing: border-box;
    padding: 0 8px;
    border: 1px solid #eee;
    border-radius: 4px;
    font-size: 14px;
    line-height: 26px;
    font-weight: normal;
    text-decoration: none;
    vertical-align: middle;
    word-spacing: -0.5px;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
    color: #555;
    background-color: #fff;
    margin: 0;
}

[class^='btnSubmit'],
a[class^='btnSubmit'] {
    display: inline-block;
    box-sizing: border-box;
    padding: 4px 8px;
    border: 1px solid #222;
    border-radius: 4px;
    font-size: 13px;
    line-height: 18px;
    font-weight: normal;
    text-decoration: none;
    vertical-align: middle;
    word-spacing: -0.5px;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
    color: #fff;
    background-color: #222;
}

[class^='btnEm'],
a[class^='btnEm'] {
    display: inline-block;
    box-sizing: border-box;
    padding: 4px 8px;
    border: 1px solid #eee;
    border-radius: 4px;
    font-size: 13px;
    line-height: 18px;
    font-weight: normal;
    text-decoration: none;
    vertical-align: middle;
    word-spacing: -0.5px;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
    color: #555;
    background-color: #f8f8f8;
}

[class^='btnBasic'],
a[class^='btnBasic'] {
    display: inline-block;
    box-sizing: border-box;
    padding: 4px 8px;
    border: 1px solid #eee;
    border-radius: 4px;
    font-size: 13px;
    line-height: 18px;
    font-weight: normal;
    text-decoration: none;
    vertical-align: middle;
    word-spacing: -0.5px;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
    color: #222;
    background-color: #f5f5f5;
}

[class^='btnNormal']:not(.disabled):hover {
    background-color: #eee;
}

[class^='btnSubmit']:not(.disabled):hover {
    background-color: #fff;
    color: #222;
}

[class^='btnEm']:not(.disabled):hover {
    background-color: #eee;
}

[class^='btnBasic']:not(.disabled):hover {
    background-color: #eee;
}

[class^='btnNormal'].disabled {
    border-color: #e3e3e3;
    color: #999;
}

[class^='btnSubmit'].disabled {
    background-color: #9297a2;
    color: #f0f0f0;
}

[class^='btnEm'].disabled {
    background-color: #b5b6b9;
    color: #f0f0f0;
}

[class^='btnBasic'].disabled {
    color: #999;
}

[class^='btn'].sizeS {
    padding: 4px 12px;
}

[class^='btn'].sizeM {
    padding: 10px 16px;
}

[class^='btn'].sizeL {
    padding: 14px 16px;
    min-width: 80px;
    font-weight: 500;
}

[class^='btn'][class*='Fix'] {
    width: 72px;
    word-break: keep-all;
    word-wrap: break-word;
}

[class^='btn'][class*='Fix'].sizeS {
    width: 80px;
}

[class^='btn'][class*='Fix'].sizeM {
    width: 120px;
    padding-left: 8px;
    padding-right: 8px;
}

[class^='btn'][class*='Fix'].sizeL {
    width: 160px;
    padding-left: 8px;
    padding-right: 8px;
}

a.btnLink {
    color: #222;
}

a.btnLink:hover {
    text-decoration: none;
    -webkit-box-shadow: 0 1px 0 0 #222;
    -moz-box-shadow: 0 1px 0 0 #222;
    box-shadow: 0 1px 0 0 #222;
}

a.btnLink:after {
    content: "";
    display: inline-block;
    margin: -2px -2px 0 3px;
    vertical-align: middle;
    border: 0 0 0 10px;
    border-style: solid;
    border-color: transparent transparent transparent #77797d;
}

[class^='btn'] i {
}

[class^='btn'] .icoArrow {
    display: inline-block;
    width: 3px;
    height: 3px;
    margin: -2px 1px 0 1px;
    border: 2px solid #77797d;
    border-width: 0 2px 2px 0;
    vertical-align: middle;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
}

[class^='btnSubmit'] .icoArrow,
[class^='btnEm'] .icoArrow {
    border-color: #f0f0f0;
}

[class^='btn'] .icoDelete {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: -2px 2px 0 0;
    vertical-align: middle;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

[class^='btn'] .icoDelete:before {
    content: "";
    position: absolute;
    top: 0;
    right: 4px;
    width: 2px;
    height: 10px;
    background: #77797d;
}

[class^='btn'] .icoDelete:after {
    content: "";
    position: absolute;
    top: 4px;
    right: 0;
    width: 10px;
    height: 2px;
    background: #77797d;
}

[class^='btnSubmit'] .icoDelete:before,
[class^='btnSubmit'] .icoDelete:after,
[class^='btnEm'] .icoDelete:before,
[class^='btnEm'] .icoDelete:after {
    background: #ccc;
}

[class^='btn'] .icoAdd,
[class^='btn'] .icoRemove {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: -2px 2px 0 0;
    vertical-align: middle;
}

[class^='btn'] .icoAdd:before,
[class^='btn'] .icoAdd:after,
[class^='btn'] .icoRemove:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: #77797d;
}

[class^='btn'] .icoAdd:before,
[class^='btn'] .icoRemove:before {
    height: 2px;
    margin: -1px 0 0 -4px;
}

[class^='btn'] .icoAdd:after {
    width: 2px;
    margin: -4px 0 0 -1px;
}

[class^='btn'] img {
    margin: -2px 1px 0;
    vertical-align: middle;
}

.btnLogin,
a.btnLogin {
    display: inline-block;
    box-sizing: border-box;
    width: 100px;
    height: 70px;
    line-height: 70px;
    border-radius: 2px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    background-color: #4a5164;
}

.btnLogin:hover {
    background-color: #43495a;
}

.btnAgree,
a.btnAgree {
    display: inline-block;
    box-sizing: border-box;
    width: 80px;
    height: 70px;
    line-height: 70px;
    border: 1px solid #d1d1d1;
    border-radius: 2px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #222;
    text-decoration: none;
    background-color: #fff;
}

.btnAgree:hover {
    background-color: #f3f3f3;
}

.btnToggle {
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

.btnToggle button {
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid #d1d1d1;
    margin: 0 -1px 0 0;
    padding: 0 7px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-size: 12px;
    outline: 0;
    text-decoration: none;
    color: #222;
    background: #fff;
}

.btnToggle button:first-child {
    border-radius: 2px 0 0 2px;
}

.btnToggle button:last-child {
    border-radius: 0 2px 2px 0;
}

.btnToggle button.selected {
    position: relative;
    border: 1px solid #84868b;
    color: #fff;
    background: #84868b;
}

.ec-base-button {
    padding: 10px 0;
    text-align: center;
}
.ec-base-button h2 {
    margin-bottom: 20px;
    font-size: 24px;
}
.ec-base-button .padd {
    padding: 16px 8px;
}

.ec-base-button.justify {
    position: relative;
}

.ec-base-button:after {
    display: block;
    content: "";
    clear: both;
}

.ec-base-button .gLeft {
    float: left;
    text-align: left;
    margin: 4px 0;
}

.ec-base-button .gRight {
    float: right;
    text-align: right;
    margin: 4px 0;
}

.ec-base-button.justify .gLeft {
    position: absolute;
    left: 0;
}

.ec-base-button.justify .gRight {
    position: absolute;
    right: 0;
}

.ec-base-button .text {
    margin: 0 6px 0 10px;
    color: #353535;
    font-size: 12px;
    line-height: 24px;
}

.ec-base-button.typeBorder {
    margin-top: 24px;
    padding: 10px 20px;
}

.ec-base-button.typeBG {
    padding: 10px 20px;
}

.ec-base-button[class*="gColumn"] {
    margin: 0 auto;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
}

.ec-base-button[class*="gColumn"]:after {
    display: none;
}

.ec-base-button[class*="gColumn"] [class^='btn'] {
    margin: 0 2px;
    padding-left: 8px;
    padding-right: 8px;
    word-break: keep-all;
    word-wrap: break-word;
    white-space: normal;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
}

.ec-base-button[class*="gColumn"] [class^='btn'][class*='Fix'] {
    -webkit-flex: none;
    -moz-flex: none;
    -ms-flex: none;
    flex: none;
}

.ec-base-button[class*="gColumn"] .gFlex2 {
    -webkit-flex: 2;
    -moz-flex: 2;
    -ms-flex: 2;
    flex: 2;
}

.ec-base-button[class*="gColumn"] .gFlex3 {
    -webkit-flex: 3;
    -moz-flex: 3;
    -ms-flex: 3;
    flex: 3;
}

.ec-base-button[class*="gColumn"] .gFlex4 {
    -webkit-flex: 4;
    -moz-flex: 4;
    -ms-flex: 4;
    flex: 4;
}

.ec-base-button.gFixed {
    opacity: 0;
    pointer-events: none;
    position: fixed;
    z-index: 120;
    left: 0;
    bottom: 0;
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0 7px;
    box-sizing: border-box;
    background-color: #dbdbdb;
    -webkit-box-shadow: 0px -4px 4px 0px rgba(120, 120, 120, 0.5);
    -moz-box-shadow: 0px -4px 4px 0px rgba(120, 120, 120, 0.5);
    box-shadow: 0px -4px 4px 0px rgba(120, 120, 120, 0.5);
}

.ec-base-button.gFixed .state+.ec-base-button {
    margin-top: 3px;
}

.ec-base-button.gFixed .state {
    overflow: hidden;
    margin: 0 auto;
    font-size: 13px;
}

.ec-base-button.gFixed .state .count {
    float: left;
    padding: 7px 0;
}

.ec-base-button.gFixed .state .price {
    float: right;
    padding: 7px 0;
}

.ec-base-button.gFixed .price strong {
    font-weight: normal;
}

.ec-base-button.gFixed .count strong,
.ec-base-button.gFixed .price em {
    color: #000;
    font-weight: bold;
    font-style: normal;
}

.ec-base-box {
    padding: 20px 10px;
    margin-left: auto;
    margin-right: auto;
    color: #555;
}

.ec-base-box.gHalf {
    position: relative;
    padding: 20px 0;
}

.ec-base-box.gHalf:before {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    content: "";
    width: 1px;
    height: 100%;
    background-color: #eee;
}

.ec-base-box.typeBg {
    background-color: #fbfafa;
}

.ec-base-box.typeThin {
    border-width: 1px;
    border-color: #d7d5d5;
}

.ec-base-box.typeThin h3.boxTitle {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
}

.ec-base-box.typeThinBg {
    border-width: 1px;
    border-color: #eee;
    background-color: #f8f8f8;
}

.ec-base-box.center {
    text-align: center;
}

.ec-base-box.typeThinBg>.agree {
    padding: 20px;
    border: 1px solid #e6e6e6;
    background: #fff;
}

.ec-base-box.typeThinBg>.agree p {
    padding: 0 0 17px;
}

.ec-base-box.typeMember {
    padding: 0;
}

.ec-base-box.typeMember .information {
    display: table;
    table-layout: fixed;
    padding: 10px 0;
    width: 100%;
    box-sizing: border-box;
}

.ec-base-box.typeMember .information>.title,
.ec-base-box.typeMember .information>.thumbnail {
    display: table-cell;
    padding: 0 15px;
    width: 70px;
    text-align: center;
    vertical-align: middle;
}

.ec-base-box.typeMember .information>.title {
    vertical-align: middle;
}

.ec-base-box.typeMember .information>.thumbnail img {
    max-width: 70px;
}

.ec-base-box.typeMember .information .description {
    display: table-cell;
    padding: 0 10px;
    width: auto;
    line-height: 1.5em;
    border-left: 1px solid #e8e8e8;
    vertical-align: middle;
}

.ec-base-box.typeMember.gMessage {
    border-width: 1px;
    border-color: #d7d5d5;
}

.ec-base-box .message {
    display: block;
    padding: 10px 0 10px 35px;
    border-bottom: 1px solid #e8e7e7;
    background: #fbfbfb url("//img.echosting.cafe24.com/skin/base/common/ico_info.gif") no-repeat 10px center;
}

.ec-base-box.typeProduct {
    display: table;
    table-layout: fixed;
    padding: 15px 0;
    width: 100%;
    box-sizing: border-box;
}

.ec-base-box.typeProduct .thumbnail,
.ec-base-box.typeProduct .information {
    display: table-cell;
    padding: 0 16px;
    vertical-align: middle;
}

.ec-base-box.typeProduct .thumbnail {
    width: 100px;
}

.ec-base-box.typeProduct .thumbnail img {
    width: 100%;
    border: 1px solid #eee;
    border-radius: 4px;
    box-sizing: border-box;
}

.ec-base-box.typeProduct .information {}



@media all and (max-width:1299px) {
    #left_wrap {
        display: none;
    }
    #right_wrap {
        display: none;
    }
    .search_top .tet_box h3 {
        font-size: 30px !important;
    }
}

@media all and (max-width:1023px) {
    .path {
        display: none;
    }
    .dp_block {
        display: block !important;
    }
    .dp_none {
        display: none !important;
    }
    .titleArea {
        margin: 0 0 10px;
    }
    #popup_1,
    #popup_2 {
        display: none;
    }
    #header .xans-layout-logotop img {
    }
    .xans-board-function p,
    .boardChk {
        display: none !important;
    }
}

@media all and (max-width:767px) {
    .pc {
        display: none
    }
    .mobile {
        display: block;
    }
    .titleArea p {
        font-size: 13px;
    }
    #header .xans-layout-logotop img {
        /* max-width: 120px; */
    }
    #header .shoppinginfo li {
        min-width: 42px;
        padding: 0;
    }
    #header .shoppinginfo li a .count {
        right: 0;
    }
    #header .topCate .Cate ul li a {
        font-size: 14px;
    }
    .side {
        top: 0;
    }
    .main_popup .txt h3 {
        font-size: 17px;
    }
    .main_popup .txt p {
        font-size: 13px;
    }
    .mainSlide .swiper-slide .txt {
        left: 8%;
    }
    .mainSlide .swiper-slide .txt h3 {
        font-size: 24px;
    }
    .mainSlide .swiper-slide .txt p {
        font-size: 14px;
    }
    .main_title h2 {
        font-size: 18px;
    }
    .main_title .sub {
        font-size: 13px;
    }
    .main_video .video_area .txt_box p {
        font-size: 24px;
    }
    .mainBanner01 .txt h3 {
        font-size: 17px;
    }
    .mainBanner01 .txt span {
    
    }
    .mainBanner01 .txt p {
        font-size: 11px;
        line-height: 6px;
        color: #ddd;
    }
    .couponBanner01 .left h3 {
        font-size: 17px;
    }
    .couponBanner01 .left p {
        font-size: 13px;
    }
    .couponBanner01 .right span {
        font-size: 13px;
    }
    .couponBanner01 .right i {
        font-size: 50px;
    }
    .longBanner01 .txt {
        left: 8%;
    }
    .longBanner01 .txt h3 {
        font-size: 17px;
    }
    .longBanner01 .txt p {
        font-size: 13px;
    }
    .mainBanner02 .txt h3 {
        font-size: 17px;
    }
    .mainBanner02 .txt p {
        font-size: 13px;
    }
    .mainGallery .galleryList li .txt .subject {
        font-size: 14px;
    }
    .mainGallery .galleryList li .txt .cont {
        font-size: 12px;
        height: 36px;
    }
    .mainReview .inner {
        padding: 0;
    }
    .mainReview .reviewList li .txt .subject a {
        font-size: 14px;
    }
    .mainReview .reviewList li .txt .cont {
        font-size: 12px;
        height: 36px;
    }
    .mainReview .reviewList li .txt .writer {
        font-size: 11px;
    }
    .mainReview .reviewList li .txt .point_rate img {
        max-width: 60px;
    }
    #footer .footer02 .footer_info #acco h3 {
        font-size: 18px;
    }
    #footer .footer03 .footer_sns li {
        padding: 0 4px;
    }
    #footer .footer03 .footer_sns li:last-child {
        padding: 0 0 0 4px;
    }
    .fixed_btn {
        right: 2%;
        bottom: 150px;
        transform: none;
    }
    .fixed_btn2 {
    left: 0;
    margin-left: 0;
}
    .eventBanner .event_tit {
        font-size: 18px;
    }
    .searchCate h3 {
        font-size: 18px !important;
    }
    .ec-base-box.gHalf:before {
        background: transparent;
    }
    .ec-base-button.gFixed {
        opacity: 1;
        pointer-events: auto;
    }
    .ec-base-tab .menu li {
        width: calc(50% - 10px);
    }
    .ec-base-tab .menu li a {
        min-width: 10px;
        font-size: 13px;
    }
    .fr-toolbar .fr-btn-grp {
        margin: 0 !important;
    }
}

@media all and (max-width:599px) {
    #popup {
        width: 100%;
    }
    #wrap {
        border-width: 0;
    }
    input[type=text]#ucc {
        width: 60%;
    }
    .cateBanner .icon_area .icon_bg {
        max-width: 80px;
    }
}

li {
    list-style: none;
}

table {
    width: 100%;
    border: 0;
    border-spacing: 0;
    border-collapse: collapse;
}

caption {
    display: none;
}

h1,
h3 {
    margin: 0;
}

.xans-layout-multishopshipping {
    display: none;
}

.xans-layout-multishopshipping .worldshipLayer {
    top: 303px;
    left: 50%;
    width: 448px;
    margin: 0 0 0 -225px;
}

.xans-layout-multishopshipping .worldshipLayer .content {
    padding: 153px 20px 30px;
    line-height: 1.8;
    background: url("//img.echosting.cafe24.com/skin/base/link/bg_worldship.gif") center 21px no-repeat;
}

.xans-layout-multishopshipping .worldshipLayer .content .desc {
    display: block;
    margin: 4px 0 14px;
}

.xans-layout-multishopshipping .worldshipLayer .select {
    margin: 10px 0 0;
}

.xans-layout-multishopshipping .worldshipLayer .select select {
    width: 100%;
}

.xans-layout-conversionpc {
    background: #fff;
    padding: 45px;
    text-align: center;
}

.xans-layout-conversionpc a {
    margin: 20px;
    padding: 20px 40px 20px 110px;
    font-size: 68px;
    color: #63666e;
    text-decoration: none;
    text-align: center;
    border: 4px solid #9d9db0;
    border-radius: 10px;
    background: url("//img.echosting.cafe24.com/skin/base/layout/ico_mobile.png") no-repeat 40px 50%;
}

.searchCate {
    position: relative;
    width: 100%;
}

.searchCate h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 16px auto 10px;
    padding: 0 8px;
    box-sizing: border-box;
}

.searchCate .swiper-container {
    padding: 0 0 10px;
    overflow: visible;
}

.searchCate .icon_area>li {
    width: 25%;
}

.searchCate .icon_area>li:first-child {
    margin-left: 8px;
}

.searchCate .icon_area>li:last-child {
    margin-right: 8px;
}

.searchCate .icon_area>li .thumbnail {
    margin: 8px 0;
}

.searchCate .icon_area .icon {
    text-align: center;
}

.searchCate .icon_area .icon>a {
    display: flex;
    flex-direction: column;
    row-gap: 4px;
}

.searchCate .icon_area .icon_bg {}

.searchCate .icon_area .icon_bg img {
    width: 100%;
}

.searchCate .icon_area .icon_txt {
    font-size: 13px;
    font-weight: 400;
    color: #333;
}



#searchSidebar.searchData {
    z-index: 1001;
    position: fixed;
    top: 0;
    left: -231px;
    width: 230px;
    bottom: 0;
    border-right: 1px solid #c6cbd6;
    color: #2e2e2e;
    background: #f3f3f3;
}

#searchSticky.searchData {
    z-index: 100;
    width: 180px;
    margin: -15px 0 0;
    background: #fff;
}

#searchSticky.sticky {
    position: fixed;
    top: 0;
}

#searchSidebar.searchData.opened {
    left: 0;
}

#searchSidebar .btnSearch {
    position: absolute;
    top: 195px;
    right: -28px;
    padding: 0 7px 0 9px;
    width: 27px;
    outline: 0;
    color: #e5e5e5;
    font-size: 12px;
    background: url("//img.echosting.cafe24.com/skin/base/product/btn_search_sidebar.png") no-repeat 0 0;
}

#searchSidebar.gRight {
    left: inherit;
    right: -231px;
    border-right-width: 0;
    border-left: 1px solid #c6cbd6;
}

#searchSidebar.gRight.opened {
    left: inherit;
    right: 0;
}

#searchSidebar.gRight .btnSearch {
    left: -28px;
    right: inherit;
}

#searchSidebar .btnSearch:before {
    position: absolute;
    top: -44px;
    left: 0;
    display: block;
    content: "";
    width: 27px;
    height: 44px;
    background: url("//img.echosting.cafe24.com/skin/base/product/btn_search_sidebar_before.png") no-repeat 0 0;
}

#searchSidebar .btnSearch:after {
    position: absolute;
    top: 100%;
    left: 0;
    display: block;
    content: "";
    width: 27px;
    height: 29px;
    background: url("//img.echosting.cafe24.com/skin/base/product/btn_search_sidebar_after.png") no-repeat 0 0;
}

#searchSidebar.gRight .btnSearch {
    right: auto;
    left: -28px;
    background-image: url("//img.echosting.cafe24.com/skin/base/product/btn_search_sidebar_right.png");
}

#searchSidebar.gRight .btnSearch:before {
    background-image: url("//img.echosting.cafe24.com/skin/base/product/btn_search_sidebar_before_right.png");
}

#searchSidebar.gRight .btnSearch:after {
    background-image: url("//img.echosting.cafe24.com/skin/base/product/btn_search_sidebar_after_right.png");
}

#searchSidebar.searchData .searchCondition {
    overflow: hidden;
}

#searchSidebar.searchData .searchArea {
    overflow-y: scroll;
    position: relative;
    width: 217px;
    padding: 20px 15px;
}

#searchSidebar.searchData .searchArea {
    position: relative;
    padding: 20px 15px;
}

#searchSticky.searchData .searchArea {
    position: relative;
}

#searchSidebar.searchData .searchArea>.title {
    border-bottom: 1px solid #565960;
    padding: 0 0 17px;
    text-align: center;
    font-family: arial, sans-serif;
    font-size: 18px;
    color: #131313;
}

#searchSticky.searchData .searchArea>.title {
    border-bottom: 1px solid #565960;
    padding: 4px 0 10px 2px;
    font-family: arial, sans-serif;
    font-size: 14px;
    color: #0e0e0e;
}

#searchSticky.searchData .xans-product-searchfilterlist:last-of-type {
    margin: 0 0 30px 0;
}

.searchData .xans-product-searchfilterlist {
    border-bottom: 1px solid #d5d5d5;
}

.searchData .xans-product-searchfilterlist .title {
    position: relative;
    padding: 10px 19px 10px 5px;
    text-transform: uppercase;
    font-size: 12px;
    cursor: pointer;
}

#searchSticky.searchData .xans-product-searchfilterlist .title {
    position: relative;
    padding: 10px 19px 10px 5px;
    text-transform: uppercase;
    font-size: 12px;
    color: #444;
    cursor: pointer;
}

.searchData .xans-product-searchfilterlist .title:after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 6px;
    width: 7px;
    height: 5px;
    margin: -3px 0 0;
    background: url("//img.echosting.cafe24.com/skin/base/product/bg_search_toggle_title.gif") no-repeat 0 0;
}

.searchData .xans-product-searchfilterlist .content {
    display: none;
    margin: 0 0 13px;
}

.searchData .xans-product-searchfilterlist.selected .content {
    display: block;
}

#searchSidebar.searchData .xans-product-searchfilterlist .check .xans-product-filterform {
    overflow: hidden;
    overflow-y: auto;
    max-height: 100px;
    border: 1px solid #dfdfdf;
    background: #fff;
}

#searchSticky.searchData .xans-product-searchfilterlist .check .xans-product-filterform {
    overflow: hidden;
    overflow-y: auto;
    max-height: 90px;
}

#searchSidebar.searchData .xans-product-searchfilterlist .check li {
    margin: 0 10px 7px 27px;
    line-height: 14px;
    color: #525252;
    word-break: break-all;
    word-wrap: break-word;
}

#searchSticky.searchData .xans-product-searchfilterlist .check li {
    margin: 0 10px 9px 27px;
    line-height: 14px;
    color: #525252;
    word-break: break-all;
    word-wrap: break-word;
}

#searchSidebar.searchData .xans-product-searchfilterlist .check li:first-child {
    padding-top: 10px;
}

#searchSticky.searchData .xans-product-searchfilterlist .check li:first-child {
    padding-top: 7px;
}

.searchData .xans-product-searchfilterlist .check li.disabled {
    color: #d7d7d8;
}

.searchData .xans-product-searchfilterlist .check li label {
    cursor: pointer;
    vertical-align: top;
}

.searchData .xans-product-searchfilterlist .check li.disabled label {
    cursor: default;
}

.searchData .xans-product-searchfilterlist .check li input {
    margin: 0 0 0 -17px;
    vertical-align: top;
}

.searchData .xans-product-searchfilterlist .check .icoColor {
    display: inline-block;
    margin: 0 4px 0 0;
    width: 12px;
    height: 12px;
    background-image: url("//img.echosting.cafe24.com/skin/base/product/bg_color_circle.png");
    background-repeat: no-repeat;
    background-position: 0 0;
}

.searchData .xans-product-searchfilterlist .button .xans-product-filterform {
    margin: -6px 0 0 -5px;
    font-size: 0;
    line-height: 0;
}

.searchData .xans-product-searchfilterlist .button li {
    display: inline-block;
    padding: 6px 0 0 5px;
    min-width: 50%;
    max-width: 100%;
    vertical-align: top;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.searchData .xans-product-searchfilterlist .button li button {
    display: inline-block;
    width: 100%;
    border: 1px solid #ccc;
    padding: 6px;
    outline: 0;
    font-size: 12px;
    line-height: 16px;
    color: #525252;
    word-break: break-all;
    word-wrap: break-word;
    background: #fff;
}

.searchData .xans-product-searchfilterlist .button li:hover button {
    border-color: #508bed;
    color: #508bed;
}

.searchData .xans-product-searchfilterlist .button li.disabled button {
    border-color: #d7d7d8;
    color: #d7d7d8;
    cursor: default;
}

.searchData .xans-product-searchfilterlist .button li.selected button {
    border: 2px solid #508bed;
    padding: 5px;
    color: #508bed;
}

.searchData .xans-product-searchfilterlist .button.full .xans-product-filterform {
    margin: 0;
    border-top: 1px solid #ccc;
}

.searchData .xans-product-searchfilterlist .button.full li {
    width: 100%;
    padding: 0;
}

.searchData .xans-product-searchfilterlist .button.full li button {
    border-top: 0;
}

.searchData .xans-product-searchfilterlist .button.full li:hover button {
    margin-top: -1px;
    border-top: 1px solid #508bed;
}

.searchData .xans-product-searchfilterlist .button.full li.disabled button {
    position: relative;
    margin-top: -1px;
    border-top: 1px solid #d7d7d8;
}

.searchData .xans-product-searchfilterlist .button.full li.selected button {
    position: relative;
    margin: -1px 0 0;
    padding: 5px;
    border: 2px solid #508bed;
}

.searchData .xans-product-searchfilterlist .button.hashtag li {
    min-width: inherit;
}

#searchSidebar.searchData .xans-product-searchfilterlist .colorChip .xans-product-filterform {
    padding: 3px 5px;
    margin: -8px 0 0;
    font-size: 0;
    line-height: 0;
}

#searchSticky.searchData .xans-product-searchfilterlist .colorChip .xans-product-filterform {
    padding: 6px 5px 0;
    margin: -8px 0 0;
    font-size: 0;
    line-height: 0;
}

.searchData .xans-product-searchfilterlist .colorChip li {
    position: relative;
    display: inline-block;
    width: 20%;
    margin: 8px 0 0;
    text-align: center;
    vertical-align: middle;
}

#searchSidebar.searchData .xans-product-searchfilterlist .colorChip li .circle {
    display: inline-block;
    width: 25px;
    height: 25px;
    outline: 0;
    cursor: pointer;
    background-image: url("//img.echosting.cafe24.com/skin/base/product/bg_colorchip_circle.png");
    background-repeat: no-repeat;
    background-position: 0 0;
}

#searchSticky.searchData .xans-product-searchfilterlist .colorChip li .circle {
    display: inline-block;
    width: 29px;
    height: 29px;
    outline: 0;
    cursor: pointer;
    background-image: url("//img.echosting.cafe24.com/skin/base/product/bg_colorchip_circle_29.png");
    background-repeat: no-repeat;
    background-position: 0 0;
}

#searchSidebar.searchData .xans-product-searchfilterlist .colorChip li.selected .icoColorCheck {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 18px;
    height: 15px;
    margin: -7px 0 0 -9px;
    background: url("//img.echosting.cafe24.com/skin/base/product/ico_color_selected.png") no-repeat 0 0;
}

#searchSticky.searchData .xans-product-searchfilterlist .colorChip li.selected .icoColorCheck {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 18px;
    height: 15px;
    margin: -8px 0 0 -9px;
    background: url("//img.echosting.cafe24.com/skin/base/product/ico_color_selected.png") no-repeat 0 0;
}

.searchData .xans-product-searchfilterlist .colorChip li.disabled .circle {
    opacity: 0.1;
    filter: alpha(opacity=10);
    cursor: default;
}

.searchData .xans-product-searchfilterlist .colorChip li.disabled:after {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    content: "";
    width: 14px;
    height: 14px;
    margin: -8px 0 0 -6px;
    background: url("//img.echosting.cafe24.com/skin/base/product/ico_color_disable.png") no-repeat 0 0;
}

#searchSticky.searchData .xans-product-searchfilterlist .colorChip li.disabled:after {
    margin: -7px 0 0 -7px;
}

.searchData .xans-product-searchfilterlist .button .priceInput {
    margin: 9px 0 0;
}

.searchData .xans-product-searchfilterlist .button .priceInput>input[type="text"] {
    width: 47px;
    padding: 5px 4px;
    margin: 0 4px 0 0;
}

#searchSticky.searchData .xans-product-searchfilterlist .button .priceInput {
    position: relative;
    height: 30px;
    padding-right: 32px;
}

#searchSticky.searchData .xans-product-searchfilterlist .button .btnPriceSearch {
    position: absolute;
    right: 0;
    top: 0;
}

.searchData .xans-product-searchfilterlist .priceSlide .slider {
    position: relative;
    padding: 0 0 5px;
    margin: 7px 5px 5px 8px;
}

.searchData .xans-product-searchfilterlist .priceSlide .range {
    position: static;
    margin: 0 0 0 0;
    border-radius: 9px;
    border: 1px solid #d9d9d8;
    height: 9px;
    background: #e7e7e7;
}

.searchData .xans-product-searchfilterlist .priceSlide .noUi-base {
    position: static;
}

.searchData .xans-product-searchfilterlist .priceSlide .noUi-connect {
    position: absolute;
    top: -1px;
    height: 9px;
    border-top: 1px solid #3d7ce4;
    border-bottom: 1px solid #3d7ce4;
    font-size: 0;
    line-height: 0;
    background: #508bed;
}

.searchData .xans-product-searchfilterlist .priceSlide .noUi-handle {
    position: absolute;
    top: -4px;
    display: block;
    margin: 0 0 0 12px;
    width: 12px;
    height: 21px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    font-size: 0;
    line-height: 0;
    outline: 0;
    background: url("//img.echosting.cafe24.com/skin/base/product/btn_price_handle.png") no-repeat 0 0;
}

.searchData .xans-product-searchfilterlist .priceSlide .noUi-handle:before,
.searchData .xans-product-searchfilterlist .priceSlide .noUi-handle:after {
    display: none;
}

.searchData .xans-product-searchfilterlist .priceSlide .value {
    overflow: hidden;
    margin: 0 0 0 3px;
    text-align: right;
    font-size: 11px;
}

.searchData .xans-product-searchfilterlist .priceSlide .value .minPrice {
    float: left;
}


.xans-myshop-orderstate {
    margin: 0;
}

.xans-myshop-orderstate .title {
    text-align: center;
    padding: 11px 21px;
    margin: 0 0 10px;
}

.xans-myshop-orderstate .title h3 {
    padding: 0;
    font-size: 22px;
    font-weight: 400;
    color: #222;
}
.xans-myshop-orderstate .title p {

border-top: dashed 1px #111;

margin: 5px 0;

padding-top: 10px;

color: #efc89c;
}
.xans-myshop-orderstate .title p a {
    
display: block;
    
vertical-align: middle;
    
color: #efc89c;
}
.xans-myshop-orderstate .title p a i {
    
font-size: 18px;
    
margin: 0 5px;
}
.xans-myshop-orderstate .title p a strong {
    
font-size: 16px;
    
vertical-align: middle;
    
margin: 0 10px;
}
.xans-myshop-orderstate .desc {
    padding: 0 0 0 4px;
    font-weight: normal;
    font-size: 13px;
    color: #efc89c;
    vertical-align: middle;
}

.xans-myshop-orderstate i {
    color: #efc89c;
    font-style: normal;
    font-size: 28px;
    vertical-align: middle;
}

.xans-myshop-orderstate strong {
    color: #fff;
    font-style: normal;
    font-size: 24px;
    vertical-align: middle;
}

.xans-myshop-orderstate .state {
    overflow: hidden;
    padding: 19px 0;
    border: 1px solid #fff;
    border-width: 1px 0;
}
#myshopMain .btn {
    
display: block;
    
border: 0;
    
margin: 30px 0;
    
background-color: #000;
    
color: #fff;
    
border: #444 solid 1px;
}
.xans-myshop-orderstate .order {
    width: 100%;
}

.xans-myshop-orderstate .order::after {
    content: "";
    display: block;
    clear: both;
}

.xans-myshop-orderstate .order li {
    width: 50%;
    padding: 0 0 4px;
    margin: 0 -1px 0 0;
    border-left: 1px dotted #fff;
    text-align: center;
    float: left;
}

.xans-myshop-orderstate .order li:first-child {
    border: 0;
}

.xans-myshop-orderstate .order li strong {
    display: block;
    margin: 2px 0 7px;
    font-size: 14px;
    font-weight: 400 !important;
    color: #efc89c;
}

.xans-myshop-orderstate .order li span {
    color: #fff;
}

.xans-myshop-orderstate .order .count {
    font-weight: bold;
    font-size: 18px;
    color: #000;
}

.xans-myshop-orderstate .cs {
    width: 100%;
    text-align: center;
}

.xans-myshop-orderstate .cs li {
    float: left;
    width: 33.333%;
    margin: 20px 0 0;
    padding: 0 16px;
    box-sizing: border-box;
    letter-spacing: 0.04em;
    word-spacing: 4px;
}

.xans-myshop-orderstate .cs strong {
    font-weight: 400 !important;
    font-size: 14px;
    color: #555;
}

.xans-myshop-orderstate .cs .count {
    padding: 0 0 0 4px;
    font-weight: bold;
    color: #000;
}

.xans-myshop-orderstate .cs .icoDot {
    display: inline-block;
    width: 2px;
    height: 2px;
    margin: 6px 0 0 0;
    background: #4d4d4d;
    vertical-align: top;
}

#myshopMain {
    margin: 40px 0 0;
}

#myshopMain ul {}

#myshopMain ul:after {
    content: "";
    display: block;
    clear: both;
}

#myshopMain .shopMain {
    float: left;
    width: 50%;
    padding: 0px 6px;
    margin: 6px 0;
    box-sizing: border-box;
    text-align: center;
}

#myshopMain .shopMain .box {
    border: 1px solid #efc89c;
    padding: 25px 8px 0;
    box-sizing: border-box;
    height: 100%;
    min-height: 230px;
}

#myshopMain .shopMain .box:hover {
    border: 1px solid #000;
}

#myshopMain .shopMain h3 {
    position: relative;
    font-size: 12px;
    color: #fff;
    font-weight: normal;
}

#myshopMain .shopMain h3:before {
    display: block;
    content: "";
    width: 65px;
    height: 50px;
    margin: 0 auto;
    padding: 0 0 10px;
    background: url("../img/sfix_icon_shopMain.png") no-repeat 0 0;
}

#myshopMain .shopMain h3 strong {
    font-size: 18px;
}

#myshopMain .shopMain h3 span {
    display: block;
    font-size: 14px;
    padding: 6px 0 25px;
}

#myshopMain .shopMain a {
    display: block;
}

#myshopMain .shopMain a:hover {
    text-decoration: none;
}

#myshopMain .shopMain p {
    font-size: 13px;
    line-height: 18px;
    color: #efc89c;
}

#myshopMain .shopMain.order h3:before {
    background-position: 12px 0;
}

#myshopMain .shopMain.profile h3:before {
    background-position: -90px 8px;
}

#myshopMain .shopMain.wishlist h3:before {
    background-position: -188px 0;
}

#myshopMain .shopMain.likeIt h3:before {
    background-position: -288px 4px;
}

#myshopMain .shopMain.mileage h3:before {
    background-position: 8px -100px;
}

#myshopMain .shopMain.deposits h3:before {
    background-position: -92px -98px;
}

#myshopMain .shopMain.consult h3:before {
    background-position: -290px -93px;
}

#myshopMain .shopMain.coupon h3:before {
    background-position: -292px -96px;
}

#myshopMain .shopMain.board h3:before {
    background-position: 12px -200px;
}

#myshopMain .shopMain.address h3:before {
    background-position: -102px -194px;
}

#myshopMain .shopMain.inquiry h3:before {
    background-position: -200px -200px;
}

#myshopMain .shopMain.regularDelivery h3:before {
    background-position: -292px -200px;
}

@media all and (max-width: 767px) {
    #header .xans-layout-logotop {
        /* top: 50%; */
        /* left: 30%; */
        /* transform: translate(-50%, -50%); */
        /* width: fit-content; */
    }
    #myshopMain .shopMain {
        width: 50%;
    }
}

.boardMain_top {
    color: #efc89c;
    text-align: center;
    margin: 0 0 16px;
    padding: 32px 16px;
    box-sizing: border-box;
    background: #222;
}

.boardMain_top a {
    color: #222;
}

.boardMain_top .tit_box h3 {
    font-size: 16px;
    font-weight: 600;
}
.boardMain_top .tit_box h3 span {
    color: #999;
    font-weight: normal;
    font-size: 14px;
}
.boardMain_top .tit_box p {
    font-size: 14px;
    font-weight: 500;
    padding-top: 10px;
}

.boardMain_top ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 32px 0 0;
}

.boardMain_top ul li i {
    font-size: 32px;
    color: #222;
    margin: 0 0 8px;
}

.boardMain_top ul li h4 {
    font-size: 13px;
    font-weight: 500;
}

.boardMain_top ul li span {
    font-size: 13px;
    font-weight: 500;
}

@media all and (max-width: 767px) {
    .boardMain_top .tit_box h3 {
        font-size: 18px;
    }
    .boardMain_top .tit_box p {
        font-size: 13px;
    }
    .boardMain_top ul li h4 {
        font-size: 12px;
    }
    .boardMain_top ul li span {
        font-size: 12px;
    }
}

.gallery_cate {
    width: 100%;
    margin: 0 auto;
    padding: 0 4px;
    box-sizing: border-box;
}

.gallery_cate ul {
    display: flex;
    justify-content: center;
    align-items: center;
}

.gallery_cate ul li {
    padding: 0 5px;
}

.gallery_cate ul li a {
    display: block;
    padding: 6px 18px;
    font-size: 13px;
    color: #777;
    font-weight: 400;
    border: 1px solid #eee;
    border-radius: 8px;
}

.gallery_cate ul li.active a {
    color: #fff;
    background-color: #ff6723;
}

.xans-board-list {
    margin: 20px 0;
    font-size: 13px;
    border-top: 1px solid #ececec;
}

.xans-board-list li {
    position: relative;
    padding: 20px 14px;
    color: #757575;
    border-bottom: 1px solid #ececec;
}

.xans-board-list a {
    display: block;
    color: #555;
}

.xans-board-list .thumb {
    float: left;
    image-rendering: -webkit-optimize-contrast;
}

.xans-board-list .thumb img {
    width: 80px;
    margin: 0 8px;
    border-radius: 4px;
}

.xans-board-list .thumb_tit {
    display: block;
    text-align: center;
    font-size: 12px;
}

.xans-board-list .summary::after {
    content: "";
    display: block;
    clear: both;
}

.xans-board-list .summary>a>.right>span {
    padding: 0 6px 0 0;
}

.xans-board-list .subject {
    display: block;
    width: 100%;
    padding: 0 0 7px;
    font-size: 15px;
    line-height: 1.4em;
    color: #333;
    font-weight: normal;
}

.xans-board-list .comment {
    color: #000;
}

.xans-board-list .point img {
    width: auto;
    height: 11px;
    vertical-align: -1px;
}

.xans-board-empty {
    padding: 28px 0;
    text-align: center;
    font-size: 14px;
    border-bottom: 1px solid #d5d5d5;
    background: #fff;
}

.xans-board-list-11 {
    margin: -1px 0 0;
    font-size: 11px;
    border-top: 1px solid #d5d5d5;
    background: #fff;
}

.xans-board-paging-11 {
    margin: 0 0 29px;
    background: #fff;
}

.xans-board-listpackage-9 .boardSort span.consult {
    position: relative;
    padding: 0 49px 0 0;
    width: 32%;
}

.xans-board-listpackage-9 .boardSort span.consult select {
    width: 100%;
}

.xans-board-listpackage-9 .boardSort span.consult button {
    position: absolute;
    right: 0;
    top: 0;
}

.xans-board-listpackage-9 .summary .answer strong {
    color: #000;
}

.xans-board-listheader-8 {
    width: 100%;
    margin: 7px 0 0;
    background: #fff;
}

.xans-board-listheader-8 ul {
    height: 36px;
    border: 1px solid #c8cdd2;
    border-bottom: none;
    font-size: 0;
}

.xans-board-listheader-8 ul:after {
    content: "";
    display: block;
    clear: both;
}

.xans-board-listheader-8 li {
    float: left;
    width: 50%;
    height: 36px;
    text-align: center;
    vertical-align: middle;
    background: #f1f1f1;
}

.xans-board-listheader-8 li.selected {
    background: #fff;
}

.xans-board-listheader-8 li a {
    display: inline-block;
    width: 100%;
    border-left: 1px solid #c8cdd2;
    border-bottom: 1px solid #c8cdd2;
    color: #333;
    font-size: 14px;
    line-height: 35px;
}

.xans-board-listheader-8 li:first-child a {
    border-left: none;
}

.xans-board-listheader-8 li.selected a {
    border-bottom: none;
    color: #333;
    font-weight: bold;
}

.xans-board-paging-1002.ec-base-paginate.typeList {
    background: #fff;
}

.xans-board-4 li {
    display: flex;
    align-items: center;
}

.xans-board-4 .thumb {
    width: 96px;
}

.xans-board-4 .summary {
    width: calc(100% - 96px);
    padding: 0 0 0 16px;
}

@media all and (max-width: 767px) {
    .xans-board-notice .thumb img,
    .xans-board-fixed .thumb img,
    .xans-board-list .thumb img {
        width: 60px;
    }
    .xans-board-notice li,
    .xans-board-fixed li,
    .xans-board-list li {
        padding: 14px 8px;
    }
    .xans-board-notice-4 .thumb,
    .xans-board-fixed-4 .thumb,
    .xans-board-list-4 .thumb {
        width: 76px;
    }
    .xans-board-notice-4 .summary,
    .xans-board-fixed-4 .summary,
    .xans-board-list-4 .summary {
        width: calc(100% - 76px);
    }
    .xans-board-listsgroup-4 .descriptions .left {
        display: block;
        width: 100%;
        margin: 0 0 4px;
    }
    
}

.xans-product-action .ec-base-button ul {
    display: block;
    overflow: hidden;
    margin-bottom: 10px;
}
.xans-product-action .ec-base-button .write_div {
    margin: 20px 0;
    position: relative;
    width: 100%;
    display: table;
}
.xans-product-action .ec-base-button .write_div label.write_div_label {
    position: relative;
    display: block;
    vertical-align: middle;
    margin: 0 5px;
    border-right: 0;
    padding: 0 5px;
    border-radius: 3px 0 0 3px;
    text-align: right;
    color: #888;
    float: left;
    line-height: 50px;
}
.xans-product-action .ec-base-button .write_div label span {
    position: initial;
    width: auto !important;
    height: auto !important;
    font-size: 1rem;
    overflow: initial !important;
    margin-left: 5px !important;
    font-weight: bold;
}
.xans-product-action .ec-base-button .write_div .write_div_type {
    display: block;
    vertical-align: middle;
    width: 86%;
    min-height: fit-content;
    position: relative;
    float: left;
}
.xans-product-action .ec-base-button .write_div input {
    padding-left: 5px;
    margin-right: 5px;
    height: 50px;
    width: 100%;
}
.xans-product-action .ec-base-button .write_div button.btn {
    border-radius: 3px;
    margin-left: 5px;
    display: inline-block;
    color: #d13f4a !important;
    text-decoration: none;
    vertical-align: middle;
    background: #fff;
    border: 1px solid #d13f4a !important;
    position: absolute;
    right: 0;
    top: 0;
}
.xans-product-action .ec-base-button .write_div a.btn {
    border-radius: 3px;
    margin-left: 5px;
    display: inline-block;
    color: #333 !important;
    text-decoration: none;
    vertical-align: middle;
    background: #fff;
    border: 1px solid #333 !important;
}
.xans-product-action .ec-base-button .first {
    width: 98%;
    display: block;
    position: relative;
    border: 1px solid #000;
    background: #000;
    border-radius: 4px;
    line-height: 56px;
    margin: 0 auto 8px;
    box-sizing: border-box;
    overflow: hidden;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    z-index: 1;
    color: #fff;
}
.xans-product-action .ec-base-button .first span {

font-size: 24px;

line-height: 56px;

color: #fff;
}
.xans-product-action .ec-base-button .first span em {vertical-align: middle;color: #aaa;font-size: 12px;}
.xans-product-action .ec-base-button .first:after {
    content: "";
    width: 0%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #666;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.xans-product-action .ec-base-button .first.review {
    width: 80%;
    border-radius: 30px;
    line-height: 46px;
    height: 46px;
    padding: 0;
    font-size: 18px;
    border: 2px solid #000;
}

.xans-product-action .ec-base-button .first.review i {
    vertical-align: middle;
}

.xans-product-action .ec-base-button .first:hover {
    color: #222;
}

.xans-product-action .ec-base-button .first:hover:after {
    width: 100%;
    z-index: -1;
}

.xans-product-action .ec-base-button .btnBlack {
    width: 49.5%;
    margin: 0 1% 0 0;
    display: inline-block;
    height: 56px;
    line-height: 56px;
    font-size: 16px;
    font-weight: 400;
    background-color: #000;
    color: #fff;
    border: 1px solid #000;
    border-radius: 4px;
    box-sizing: border-box;
}

.xans-product-action .ec-base-button .btnWhite {
    width: 48%;
    margin: 0 1% 0 0;
    display: inline-block;
    font-size: 16px;
    padding: 20px 0;
    font-weight: 400;
    border: 1px solid #efc89c;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #222;
}
.xans-product-action .ec-base-button .btnWhite.money_list {
    width: 32%;
}
.xans-product-action .ec-base-button .btnWhite:last-child {
    margin: 0;
}

.xans-product-action .ec-base-button .btnWhite strong {
    display: block;
    font-weight: bold;
    color: #ff675c;
    font-size: 24px;
}

.xans-product-action .ec-base-button .btnWhite em {
    display: block;
    line-height: 36px;
}

.xans-product-action .ec-base-button .btnWhite em span {
    font-size: 12px;
    color: #efc89c;
}

#bo_cate #bo_cate_on {
    background: #ff6723;
}

.xans-myshop-asyncbenefit {
    margin: 0 0 20px;
    color: #353535;
}

.xans-myshop-asyncbenefit .thumbnail img {
    max-width: 70px;
    max-height: 70px;
}

.xans-myshop-asyncbenefit .description {
    min-height: 70px;
}

.xans-myshop-asyncbenefit .ec-base-box.typeThinBg {
    margin-top: -1px;
    padding-left: 110px;
}

.xans-myshop-asyncbenefit .invite>strong {
    display: block;
}

.xans-myshop-asyncbenefit .invite .copy {
    margin: 8px 0 0;
}

.xans-myshop-asyncbenefit .invite #reco_url {
    width: 439px;
}

.xans-myshop-asyncbenefit .invite ul {
    margin: 8px 0 0;
    font-size: 11px;
    line-height: 1.25;
    color: #757575;
}

.xans-myshop-asyncbenefit .invite ul li {
    margin: 3px 0 0;
}

.xans-myshop-asyncbankbook {
    border: 1px solid #ddd;
    border-width: 1px 0;
}

.xans-myshop-asyncbankbook ul:after {
    content: "";
    display: block;
    clear: both;
}

.xans-myshop-asyncbankbook ul li {
    margin: 5px 0;
    width: 100%;
    font-size: 14px;
    line-height: 46px;
    box-sizing: border-box;
    vertical-align: middle;
}

.xans-myshop-asyncbankbook ul li strong {
    vertical-align: middle;
    line-height: 46px;
    font-weight: normal;
    color: #555;
    display: inline-block;
}

.xans-myshop-asyncbankbook ul li figure {
    display: inline-block;
    width: 46px;
    line-height: 46px;
    vertical-align: middle;
    margin-right: 10px;
    float: right;
}

.xans-myshop-asyncbankbook ul li figure img {
    width: 100%;
}

.xans-myshop-asyncbankbook ul li span {
    float: right;
    border: 1px solid #eee;
    background-color: #fff;
    color: #333;
    padding: 0 10px;
    height: 36px;
    line-height: 36px;
    vertical-align: middle;
    margin-top: 5px;
    font-weight: bold;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -moz-box;
    display: -webkit-box;
    word-wrap: break-word;
    word-break: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.xans-myshop-asyncbankbook .title {
    float: left;
    width: 90%;
    font-weight: normal;
    box-sizing: border-box;
}

.xans-myshop-asyncbankbook .data {
    float: left;
    width: 43%;
    padding: 0 10px;
    text-align: right;
    box-sizing: border-box;
}

.xans-myshop-asyncbankbook .use {
    color: #000;
}

.xans-myshop-asyncbankbook a.btnNormal {
    float: right;
    margin: -2px 0 0;
}

.color_01,
.color_01:hover {
    background: #68d0a7 !important;
    color: #fff;
}

.color_02,
.color_02:hover {
    background: #fe528f !important;
    color: #fff;
}

#iconWall {
    background-color: #f0f0f0;
    margin: 20px auto;
    overflow: hidden;
    padding-top: 1%;
    list-style: none;
    text-align: center;
}

#iconWall li {
    width: 16%;
    height: 120px;
    background-color: transparent;
    margin-right: 1px;
    margin-bottom: 1px;
    position: relative;
    display: inline-block;
}

#iconWall li .img-back,
#iconWall li .img-front {
    position: absolute;
    left: 0;
    top: 0;
    background-color: #fff;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#iconWall li img {
    width: auto;
    display: block;
    margin: 60px auto;
    transform: translate(0, -30px);
    height: 60px;
}

#iconWall li .img-3d {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    height: 100%;
}

#iconWall li .img-back {
    transform: rotateY(180deg);
}

#bo_w .form_01 .write_div fieldset,
#bo_w .form_01 .write_div input[type=text],
#bo_w .form_01 .write_div input[type=number],
#bo_w .form_01 .write_div input[type=password] {
    width: 100% !important;
}

.review-alert {}

.review-alert .swal-button--confirm:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 18px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    content: "\f044";
    vertical-align: middle;
    margin-right: 5px;
}

.review-alert .swal-button--confirm {}

.home-wrap {
    padding: 10px;
    background-color: #1e1f23;
}

.home-wrap .custom-swiper {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: var(--card-radius);
    border: 3px solid transparent
}

.home-wrap .custom-swiper .van-swipe {
    border-radius: 8px;
    overflow: hidden
}

.home-wrap .custom-swiper .van-swipe .van-swipe__indicators {
    bottom: 15px!important
}

.home-wrap .custom-swiper .van-swipe .van-swipe__indicator--active {
    opacity: 1;
    background: var(--btn-text)
}

.home-wrap .custom-swiper .van-swipe .van-swipe-item {
    border-radius: 8px
}

.home-wrap .custom-swiper .van-swipe .van-swipe-item img {
    width: 100%;
    height: 175px;
    border-radius: 8px;
    object-fit: center
}
.home-wrap li {
    overflow: hidden;
    background-size: cover;
    border-radius: 10px;
    border: solid 2px #333;
}

.home-wrap .card1 {
    background: url(../img/7Z1kiAFyUcDaGohe6n.png) no-repeat right;
}

.home-wrap .card2 {
    background: url(../img/1L0DWnex5kBG8YrEpv.png) no-repeat right;
}
.home-wrap li a {
    position: relative;
    display: block;
    overflow: hidden;
    padding: 30px 10px;
    color: #efc89c;
}
.home-wrap li strong {position: absolute;right: 0;top: 0;margin: 30px 10px 0 0;font-size: 18px;color: #fe5d64;text-align: right;}
.home-wrap li strong span {
    color: #aaa;
    font-size: 11px;
    margin: 0 10px;
}
.home-wrap .customer-van-tabs .van-tabs__line {
    background: linear-gradient(to right,#28c7a0,#847cd5)
}

@media all and (max-width: 767px) {
    #iconWall li {
        width: 15%;
        height: 80px;
    }
    #iconWall li img {
        margin: 40px auto;
        transform: translate(0, -20px);
        height: 40px;
    }
    #footer .footer01 li {
        float: none;
        width: 100%;
        /* border-top: solid 1px #eee; */
        padding: 10px 0;
    }
    .round {

    }
    .round em {
        
        margin: 3% 20.5% 0 0;
                
        font-size: 16px;
    }
    .xans-product-action .ec-base-button .write_div .write_div_type {
        width: 100%;
    }
    .xans-product-action .ec-base-button .btnWhite.money_list {
        width: 30%;
    }
    .xans-product-action .ec-base-button .btnWhite strong {
        font-size: 14px;
    }
    .xans-product-action .ec-base-button .btnWhite em {
        font-size: 12px;
    }
    .xans-product-action .ec-base-button .btnWhite em span {
        font-size: 11px;
        display: block;
        line-height: 12px;
    }
	.home-wrap li p {
		margin-top: -10px;
	}
	.home-wrap
    li strong {
    margin-top: 45px;
    position: relative;
    top: 15px;
}
.grid-cols-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}		    
}

@media all and (min-width: 992px) {
    .mainSlide .swiper-slide img {
    }
    .cateBanner .icon_area.grid4 .icon {
        width: 25%;
    }
    .main_video .video_area .video_box {
        padding-bottom: 30%;
    }
    .round {
        max-height: 200px;
    }
    .main_video .video_area .video_box iframe {
        height: 190%;
    }
    .mainBanner01 {
        width: 50%;
        float: left;
        height: 200px;
        margin-bottom: 20px;
    }
}




.box {
    margin: 0;
    width: 100%;
    position: relative;
    z-index: 2;
    padding-bottom: 10px;
    background-color: #1e1f23;
}

.box #nav {
    width: 96%;
    height: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 auto;
}

.box #nav .Li {
    flex: 1;
    line-height: 0.88rem;
    color: #90A2B0;
    text-align: center;
    font-weight: bold;
    font-size: 0.24rem;
}

.box #nav .active {
    color: #aaa;
    width: 20%;
    margin: 0 auto;
    text-align: left;
    border-bottom: 2px solid #333;
    font-size: 16px;
    line-height: 50px;
    position: relative;
}
.box #nav .info {

position: absolute;

right: 0;

top: 0;

font-size: 11px;
}
.box #nav .info span {
    
margin: 0 5px 0 0;
    
font-size: 10px;
}
.box #nav .info span em {
    
font-size: 12px;
    
color: #fe5d64;
}
.live_list_table {
    width: 96%;
    margin: 0 auto;
    color: #aaa;
}

.live_list_table th {
    text-align: center;
    font-size: 11px;
    background: #555;
    padding: 6px;
    color: #efc89c;
    line-height: 30px;
}

.live_list_table tbody tr {
    background-color: #222;
	border-bottom: 1px solid #555;
    border-top: 1px solid #555;
    font-size: 13px;
    /*     cursor: pointer; */
}

.live_list_table tbody tr:hover {
    background-color: #666;
}

.live_list_table tbody tr td {
    height: 40px;
}
.live_list_table tbody tr td.td_center {
    text-align: center;
}
.live_list_table tbody tr td.td_right {
    text-align: right;
}
.live_list_table tbody tr td.td_left {
    text-align: left;
}
.live_list_table tbody tr td em {
    font-weight: bold;
    font-size: 11px;
}
.live_list_table tbody tr td span {
    font-size: 11px;
    margin: 0 5px;
    width:auto;
    background:none;
    text-align:center;
    padding:0 5px;
    text-indent:0;
    display:inline-block;
    position: relative;
    top: 0;
    right: auto;
}
.blue {
    color: #3883fc;
}
.green {
    color: green;
}
.red {
    color: #fe5d64;
}
.on {
    color: #09c497;
}

.in {
    color: #90a2b0;
}
.top-box {
    background: #fff;
    width: 100%;
    position: relative;
}

.top-box .notice {
    height: 40px;
    position: relative;
    width: 100%;
    background-color: #000;
    border: none;
    border-radius: 0;
    text-align: left;
    padding: 0 30px 20px;
    line-height: 40px;
    overflow: hidden;
    border-bottom: solid 1px #333;
}

.top-box .notice a {
    color: #efc89c;
    font-size: 14px;
}

.top-box .notice::after {
    content: "";
    display: block;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left: 5px solid #333;
}

.top-bottom {
    width: 100%;
}

.top-bottom .conatiner {
    box-sizing: border-box;
    background-color: #feda48;
    /* width: 100%; */
    border-radius: 0;
    margin: 0 auto;
    display: block;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0 0;
    font-size: 14px;
}

.minScroll {
    height: 108px;
    overflow: hidden;
}
.lt {
    background-color: #111;
    margin: 10px 0;
    padding: 0 0 20px 0;
}
.lt h2{
  margin-bottom: 10px !important;
}
.lt h2 a{
  display: block;
  color: #efc89c;
  width: 96%;
  margin: 0 auto;
  text-align: left;
  border-bottom: 2px solid #333;
  font-size: 16px;
  line-height: 50px;
}
.lt ul {
  padding:0 20px;
}
.lt li{
  text-align:left;
  background: #111;
  padding:0;
  height: 36px;
  line-height:36px;
  border-bottom: 1px solid #333;
}
.lt .noti-tit, .lt li .deco {
  float: left;
}
.lt li .time {
  float: right;
  color: #aaa;
  font-size: 12px;
}
.lt .noti-tit {
  display:inline-block;
  color:#aaa;
  text-decoration:none;
  padding-left: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lt li .deco {
  font-size: 15px;
  color: #585858;
  padding-right: 3px;
  line-height: 36px;
}
.lt .noti-tit span {
    color:#ff0000;
	font-weight:bold;
}
.lt li i{
  color:#ff0000;
}
.lt li .fa-heart{
  color:#ff0000;
}
.lt li .new_icon{display:inline-block;padding: 0 3px;line-height:15px ;font-size:0.92em;color:#fff;background:#c56bed}
.lt li .cnt_cmt{color:#48a3d5}

.bo_content_head, .bo_content_tail, .qa_content_head, .qa_content_tail, .co_content_head, .co_content_tail, .mc_content_head, .mc_content_tail, .ec_content_head, .ec_content_tail {
    border: solid 1px #efc89c;
    padding: 20px !important;
    line-height: 34px;
    background-color: #222;
    color: #efc89c;
}
#bo_w {
    background-color: #fff;
    padding: 10px;
}