@font-face {
font-family: 'Pretendard';
font-weight: 900;
font-display: swap;
src: local('Pretendard Black'), url('/font/Pretendard-Black.woff2') format('woff2'), url('/font/Pretendard-Black.woff') format('woff');
}
@font-face {
font-family: 'Pretendard';
font-weight: 800;
font-display: swap;
src: local('Pretendard ExtraBold'), url('/font/Pretendard-ExtraBold.woff2') format('woff2'), url('/font/Pretendard-ExtraBold.woff') format('woff');
}
@font-face {
font-family: 'Pretendard';
font-weight: 700;
font-display: swap;
src: local('Pretendard Bold'), url('/font/Pretendard-Bold.woff2') format('woff2'), url('/font/Pretendard-Bold.woff') format('woff');
}
@font-face {
font-family: 'Pretendard';
font-weight: 600;
font-display: swap;
src: local('Pretendard SemiBold'), url('/font/Pretendard-SemiBold.woff2') format('woff2'), url('/font/Pretendard-SemiBold.woff') format('woff');
}
@font-face {
font-family: 'Pretendard';
font-weight: 500;
font-display: swap;
src: local('Pretendard Medium'), url('/font/Pretendard-Medium.woff2') format('woff2'), url('/font/Pretendard-Medium.woff') format('woff');
}
@font-face {
font-family: 'Pretendard';
font-weight: 400;
font-display: swap;
src: local('Pretendard Regular'), url('/font/Pretendard-Regular.woff2') format('woff2'), url('/font/Pretendard-Regular.woff') format('woff');
}
@font-face {
font-family: 'Pretendard';
font-weight: 300;
font-display: swap;
src: local('Pretendard Light'), url('/font/Pretendard-Light.woff2') format('woff2'), url('/font/Pretendard-Light.woff') format('woff');
}
@font-face {
font-family: 'Pretendard';
font-weight: 200;
font-display: swap;
src: local('Pretendard ExtraLight'), url('/font/Pretendard-ExtraLight.woff2') format('woff2'), url('/font/Pretendard-ExtraLight.woff') format('woff');
}
@font-face {
font-family: 'Pretendard';
font-weight: 100;
font-display: swap;
src: local('Pretendard Thin'), url('/font/Pretendard-Thin.woff2') format('woff2'), url('/font/Pretendard-Thin.woff') format('woff');
}
html,
body {
font-family: 'Pretendard', sans-serif !important;
}
/*
input:focus{
outline-style: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
*/
a,
a:link,
a:visited {
color: #000;
text-decoration: none;
}
.head_top_banner {
display: flex;
position: relative;
height: 48px;
width: 1250px;
margin: 0 auto;
box-sizing: border-box;
align-items: center;
}
.head_top_url {
font-size: 16px;
display: block;
margin: 0 auto;
font-weight: bold;
}
.head_top_url span {
color: rgba(51, 126, 169, 1);
display: inline-block;
font-size: 14px;
font-weight: 400;
}
.head_t_b_close {
z-index: 99;
font-size: 14px;
cursor: pointer;
color: #959595;
position: absolute;
right: 0;
}
.close_t_b {
z-index: 99;
width: 16px;
vertical-align: -3px;
}
.head_wrap {
width: 100%;
min-width: 1250px;
}
.header_li_box {
height: 38px;
background-color: #f2f2f2;
}
.header_li {
margin: 0 auto;
width: 1250px;
}
.header_li > .onchannel_btn{
float: left;
line-height: 38px;
color: #626262;
font-size: 12px;
font-weight: 600;
background-image: url(/images/bar.png);
background-repeat: no-repeat;
background-position: right center;
padding: 0 8px 0 22px;
margin-right: 8px;
background:
url(/images/bar.png) right center no-repeat,
url('data:image/svg+xml,') left no-repeat;
}
.header_li > .selleruniv_btn{
float: left;
line-height: 38px;
color: #626262;
font-size: 12px;
font-weight: 600;
background-image: url(/images/bar.png);
background-repeat: no-repeat;
background-position: right center;
padding: 0 8px 0 22px;
margin-right: 8px;
background:
url(/images/bar.png) right center no-repeat,
url('data:image/svg+xml,') left/16px no-repeat;
}
.header_li > .seltore_btn{
float: left;
line-height: 38px;
color: #626262;
font-size: 12px;
font-weight: 600;
background-image: url(/images/bar.png);
background-repeat: no-repeat;
background-position: right center;
padding: 0 8px 0 22px;
margin-right: 8px;
background:
url(/images/bar.png) right center no-repeat,
url('data:image/svg+xml,') left/16px no-repeat;
}
.header_li>.top_menu {
height: 38px;
line-height: 38px;
float: right;
}
.header_li>.top_menu::after {
clear: both;
content: '';
display: block;
}
.header_li>.top_menu>li {
float: left;
font-size: 12px;
padding: 0 11px;
color: #959595;
background-image: url(../images/bar.png);
background-repeat: no-repeat;
background-position: left center;
}
.header_li>.top_menu>li>a {
color: #626262;
}
.header_li>.top_menu>li:first-child {
background: none;
padding-left: 0px;
}
.header_li>.top_menu>li:last-child {
padding-right: 0px;
}
.main_redBack_banner {
background-color: #FCEBEE;
}
.main_redBack_banner .head_top_banner .head_top_url {
display:flex;
align-items: center;
}
.main_redBack_banner .head_top_banner .head_top_url span {
color: #E52E4D;
font-size: 14px;
font-weight: 700;
margin-left:8px;
}
.tm_new {
color: #f00;
font-weight: bold;
margin-right: 5px;
}
.header_li>.top_notice {
float: left;
height: 38px;
line-height: 38px;
}
.header_li>.top_notice::after {
clear: both;
content: '';
display: block;
}
.header_li>.top_notice>li {
float: left;
font-size: 12px;
color: #959595;
}
.header_li>.top_notice>li:first-child {
color: #686868;
font-weight: 600;
margin-right: 14px;
}
.header_li>.top_notice>li>a {
color: #959595;
}
.header_menu_box {
height: 105px;
box-sizing: border-box;
}
.header_menu {
width: 1250px;
margin: 0 auto;
position: relative;
display: flex;
align-items: center;
}
.logo {
background-image: url("https://onimg.onch3.co.kr/files/common/onch_new_logo2.png");
background-repeat: no-repeat;
background-position: top 30px center;
background-size: 160px;
width: 168px;
height: 104px;
display: inline-block;
}
/*검색필터*/
.search_box {
height: 45px;
border: 1px solid #00CCB8;
border-radius: 42px;
box-sizing: border-box;
display: flex;
}
.search_chanel_wrap{
width: 140px;
border: 0px;
outline: none;
box-sizing: border-box;
position: relative;
top: -1px;
left: -1px;
border-radius: 45px;
}
.search_channel_title{
width: 100%;
height: 44px;
padding: 10px 6px 9px 20px;
font-size: 14px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
box-sizing: border-box;
}
.search_channel_icon{
display: inline-block;
width: 24px;
height: 24px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: center;
transition: all 0.3s ease;
}
.search_channel_icon.on{
transform: rotate(180deg);
}
.search_channel{
visibility: hidden;
width: 100%;
position: absolute;
top: 0px;
z-index: 90;
font-size: 14px;
font-weight: 400;
background-color: white;
border: 1px solid #CCCCCC;
overflow: hidden;
border-radius: 22px;
filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.15));
}
.search_channel li.search_channel_title{
border-bottom: 1px solid #CCCCCC;
padding: 10px 5px 9px 19px;
}
.search_channel li:not(.search_channel_title){
padding: 8px 20px;
cursor: pointer;
}
.search_channel li.active{
color: #008073;
}
.search_channel li:not(.search_channel_title):hover{
background-color: #F7F7F7;
}
.search {
padding-left: 20px;
width: 398px;
height: 43px;
font-size: 14px;
border: none;
float: left;
font-family: 'Pretendard-Regular';
padding: 0px;
}
.search:focus {
outline: none;
}
.search_btn {
width: 38px;
height: 43px;
background-image: url(/images/onch_new_search.png);
background-repeat: no-repeat;
background-position: left center;
cursor: pointer;
display: inline-block;
}
.search_wrap {
margin-left: 24px;
}
.header_menu>ul {
float: right;
}
.header_menu>ul>li {
margin-left: 15px;
float: left;
box-sizing: border-box;
}
.header_menu>ul>li>a {
color: #818181;
font-size: 13px;
box-sizing: border-box;
text-decoration: none;
}
.ssc {
display: block;
padding-top: 64px;
height: 105px;
background-image: url(https://image.onch3.co.kr/img_data/2023/mini_sellenge_con/mini_3/mini3_icon.png);
background-repeat: no-repeat;
background-position: center 12px;
background-size: 55px;
}
.avatar {
display: block;
padding-top: 64px;
height: 105px;
background-image: url(../images/avatar.png);
background-repeat: no-repeat;
background-position: center 26px;
}
.package {
display: block;
padding-top: 64px;
height: 105px;
background-image: url(../images/package.png);
background-repeat: no-repeat;
background-position: center 28px;
}
.bag {
display: block;
padding-top: 64px;
height: 105px;
background-image: url(../images/bag.png);
background-repeat: no-repeat;
background-position: center 24px;
}
.sb_guide {
display: block;
padding-top: 64px;
height: 105px;
background-image: url(../images/sb_guide.png);
background-repeat: no-repeat;
background-position: center 24px;
}
.header_menubar {
height: 64px;
box-sizing: border-box;
border-bottom: 1px solid #e1e1e1;
}
.menubar {
width: 1250px;
box-sizing: border-box;
margin: 0 auto;
}
.menubar>li {
position: relative;
padding-left: 16px;
float: left;
}
.menubar>li:first-child {
padding-left: 0px;
}
.menubar::after {
clear: both;
content: '';
display: block;
}
.menubar>li.menu_toast {
position: relative;
z-index: 99;
}
@keyframes blink-and-hide{
12.5%, 25%, 37.5%{
opacity: 0;
}
6.25%, 18.75%, 31.25%, 50%{
opacity: 1;
}
/*1초*/
100% {
opacity: 1;
}
}
.blinking_text{
animation: blink-and-hide 8s infinite; /* 8초 동안 반복 */
}
.menubar>li.menu_toast .menu_toast_box {
position: absolute;
border-radius: 4px;
background: linear-gradient(270deg, #FF5E00 -0.56%, #FF3800 100%);
padding:8px 12px;
width: 207px;
bottom:-30px;
}
.menubar>li.menu_toast .menu_toast_box::after {
content:"";
display: block;
position: absolute;
width: 13px;
height: 13px;
background-color: #FF3D01;
transform: rotate(45deg);
top:-6px;
left:26px;
}
.menubar>li.menu_toast .menu_toast_box .mt_cont {
display: flex;
justify-content: space-between;
align-items: center;
}
.menubar>li.menu_toast .menu_toast_box .mt_tit {
color:#fff;
font-size:12px;
font-weight: 600;
line-height:135%;
}
.menubar>li.menu_toast .menu_toast_box .mt_close {
display: inline-block;
margin-left: 8px;
width: 20px;
height: 20px;
cursor: pointer;
background-image:url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position:center;
}
.menubar>li.cate_title {
background-color: #00B8A5;
color:#fff;
cursor: pointer;
padding:16.5px 16px;
display: flex;
align-items: center;
width: 168px;
box-sizing: border-box;
font-weight: bold;
position: relative;
font-size:16px;
}
.menubar>li.cate_title svg {
margin-top: -2px;
margin-right: 4px;
}
.menubar>li.cate_title.ct_data {
background-color: #fff;
color:#000;
}
.menubar>li.cate_title.ct_data svg rect {
fill:#000;
}
.menubar>li.cate_title.ct_data svg .hmm_back {
fill:#fff;
}
.menubar>li.cate_title .category_header {
float: none;
position: absolute;
left:0;
top:64px;
z-index: 99;
font-weight: normal;
display: none;
}
.menubar>li.cate_title .category_header .category_wrap {
background-color: #fff;
box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.1);
}
.menubar>li>a {
display: block;
height: 64px;
font-size: 16px;
flex-wrap: wrap;
font-weight: bold;
text-align: center;
line-height:64px;
}
.menubar>li>a .ht_smfont {
display: block;
font-size:12px;
}
.menubar>li>a.hm_twoline {
line-height:normal;
padding-top:15px;
box-sizing: border-box;
}
.menubar>li>a.menu_ss200 {
font-size: 15px;
box-sizing: border-box;
}
.menubar > li a.menu_1688 span {
color: #ff3800;
}
.icon_q {
position: absolute;
top: 16px;
right: -16px;
width: 14px;
height: 14px;
}
.q_box {
display: none;
position: absolute;
top: -24px;
right: -216px;
box-sizing: border-box;
width: 205px;
line-height: 140%;
border: 1px solid #d3d3d3;
background: #fff;
color: #666;
font-size: 12px;
padding: 5px;
}
.category {
float: left;
width: 168px;
height: 583px;
position: relative;
}
.category_wrap {
display: flex;
position: absolute;
z-index: 10;
display: none;
}
.category_wrap.header_catewrap {
display: flex;
}
.category ul.fir_cate {
width: 168px;
height: 582px;
box-sizing: border-box;
}
.category ul {
box-sizing: border-box;
background-color: white;
border-right: 1px solid #E6E9F5;
}
.category ul>li.cate_title {
border: 0px;
height: 50px;
background-color: #00B8A5;
background-image: url(../images/category.png);
background-repeat: no-repeat;
background-position: 20px center;
color: white;
font-weight: bold;
text-align: center;
line-height: 50px;
font-size: 16px;
}
.category ul>li {
height: 32px;
line-height: 32px;
/* padding: 14px 0 14px 18px; */
padding-left: 18px;
font-size: 14px;
color: #454545;
letter-spacing: -1px;
background-color: white;
cursor: pointer;
}
.category ul>li:not(.cate_title).active {
font-weight: bold;
color: #0C7368;
background-color: #F5F6FC;
}
.category ul:not(.fir_cate)>li.active {
background-color: #E6E9F5;
}
.category .se_cate,
.category .th_cate,
.category .last_cate {
display: none;
padding: 12px 0;
background-color: #F5F6FC;
box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.1);
}
.category .se_cate>li,
.category .th_cate>li,
.category .last_cate>li {
padding: none;
width: 168px;
border: none;
background-color: #F5F6FC;
}
.category ul .cate_start {
margin-top: 12px;
}
.category ul .cate_end {
margin-bottom: 12px;
}
a.btn_top {
display: none;
width: 50px;
height: 50px;
line-height: 47px;
background-color: #0066cc;
box-sizing: border-box;
border-radius: 15px;
position: fixed;
right: 20px;
bottom: 20px;
text-align: center;
color: #fff;
font-size: 14px;
padding: 2px;
}
.exhibit_new1::after {
content: '';
width: 14px;
height: 16px;
position: absolute;
display: inline-block;
background-repeat: no-repeat;
background-image: url(/dbcenter_renewal/images/exhibit_new1.png);
background-size: contain;
margin-left: 5px;
margin-top: -3px;
}
.exhibit_new2::after {
content: '';
width: 14px;
height: 16px;
/* position: absolute; */
display: inline-block;
background-repeat: no-repeat;
background-image: url(/dbcenter_renewal/images/exhibit_new2.png);
background-size: contain;
margin-left: 5px;
margin-top: -3px;
}
.new_icon::after {
content: '';
width: 14px;
height: 16px;
/*position: absolute;*/
display: inline-block;
background-repeat: no-repeat;
background-image: url(/dbcenter_renewal/images/exhibit_new2.png);
background-size: contain;
margin-left: 5px;
margin-top: -3px;
}
.header_menubar .new_icon::after{
width: 4px;
height: 4px;
background-image: none;
background-color: #F53838;
position: absolute;
top: 23px;
margin-left: 1px;
}
.new_icon2::after {
content: '';
width: 14px;
height: 16px;
display: inline-block;
background-repeat: no-repeat;
background-image: url(/dbcenter_renewal/images/exhibit_new2.png);
background-size: contain;
margin-left: 5px;
}
/* ranking */
.header_menu .header_prd_rank {
display: flex;
position: relative;
align-items: center;
font-size: 14px;
line-height: 14px;
gap: 12px;
margin-left: 24px;
cursor: pointer;
width: 228px;
}
.header_menu .header_prd_rank img {
width: 48px;
height: 48px;
background-color: white;
border-radius: 6px;
}
.header_menu .header_prd_rank>span {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.header_menu .header_prd_rank .head_rank_list {
position: absolute;
display: none;
top: 0;
width: 228px;
background: #FFFFFF;
box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.12);
border-radius: 6px;
color: black;
padding: 16px;
cursor: auto;
z-index: 100;
}
.header_menu .head_rank_title {
font-weight: 700;
font-size: 14px;
line-height: 14px;
margin-bottom: 12px;
}
.header_menu .head_rank_title span {
color: #737E88;
font-weight: 400;
font-size: 11px;
line-height: 11px;
margin: 0 14px 0 4px;
}
.header_menu .head_rank_title a {
font-weight: 400;
font-size: 12px;
line-height: 12px;
color: #0475D5;
}
.header_menu .head_rank_list li {
display: flex;
height: 52px;
font-size: 12px;
line-height: 12px;
padding: 6px 0;
gap: 8px;
align-items: center;
cursor: pointer;
}
.header_menu .head_rank_list li:hover {
cursor: pointer;
background-color: #f5f5f5;
}
.header_menu .head_rank_list img {
width: 40px;
height: 40px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 6px;
}
.header_menu .head_rank_list li>div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.header_menu .head_rank_list div>div {
font-weight: 700;
color: #535E68;
margin-bottom: 6px;
}
.header_menu .head_rank_list li:nth-child(-n+3) div>div {
color: #F4291B;
}
.header_menu .header_keyword {
display: flex;
font-size: 12px;
line-height: 12px;
gap: 6px;
justify-content: center;
margin-top: 8px;
}
.header_menu .header_keyword li {
border-radius: 3px;
background-color: #f1f1f1;
}
.header_menu .header_keyword a {
padding: 4px 8px;
display: block;
font-size:12px;
font-weight: 400;
color:#323232;
line-height: 16px;
}
.header_menu .header_thumb {
width: 64px;
height: 64px;
background-color: white;
border-radius: 6px;
position: absolute;
right: 0;
top: 28px;
overflow: hidden;
}
.header_menu .thumb_txt {
width: 100%;
color: white;
height: 24px;
font-size: 12px;
line-height: 12px;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(6px);
text-align: center;
padding-top: 5px;
position: absolute;
bottom: 0;
}
.header_menu .header_thumb img {
width: 100%;
}
/* 플로팅 버튼 */
.floating_button_wrap {
position:fixed;
bottom:16px;
right:16px;
z-index: 98;
width: 56px;
}
.floating_button_wrap .fb_prod_wrap {
padding:6px;
box-sizing: border-box;
width: 56px;
border: 1px solid #D7D8DB;
background-color: #FFF;
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
border-radius:22px;
}
.floating_button_wrap .fb_prod_wrap .fb_prod_list {
margin-bottom: 8px;
}
.floating_button_wrap .fb_prod_wrap .fb_prod_list .fb_prod {
width: 42px;
height: 42px;
border-radius:16px;
border:1px solid rgba(0, 0, 0, 0.10);
margin-top: 4px;
box-sizing: border-box;
overflow: hidden;
cursor: pointer;
}
.floating_button_wrap .fb_prod_wrap .fb_prod_list .fb_prod:first-child {
margin-top: 0;
}
.floating_button_wrap .fb_prod_wrap .fb_prod_list .fb_prod img {
width: 100%;
height: 100%;
}
.floating_button_wrap .fb_prod_wrap .fbb_link_box {
position: relative;
}
.floating_button_wrap .fb_prod_wrap .fbb_link_box .fbb_link {
border-radius: 16px;
border: 1px solid #D7D8DB;
background-color:#FFF;
width: 42px;
height: 42px;
cursor: pointer;
background-image:url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position:center;
}
.floating_button_wrap .fb_prod_wrap .fbb_link_box .fbb_link + .fbb_toast {
width: 100px;
height: 44px;
line-height:44px;
text-align: center;
color:#fff;
border-radius: 8px;
background-color:rgba(0, 0, 0, 0.9);
position: absolute;
font-size:13px;
bottom: 50px;
right: -28px;
display: none;
}
.floating_button_wrap .fb_prod_wrap .fbb_link_box .fbb_link + .fbb_toast::after {
content:"";
display: block;
width: 10px;
height: 10px;
background-color:rgba(0, 0, 0, 0.9);
position:absolute;
top:38px;
left:46px;
transform: rotate(45deg);
}
.floating_button_wrap .fb_prod_wrap .fbb_link_box .fbb_link:hover + .fbb_toast {
display: block;
}
.floating_button_wrap .fb_button {
margin-top: 8px;
float: right;
}
.floating_button_wrap .fb_button:first-child {
margin-top: 0;
}
.floating_button_wrap .fbb_guide {
cursor: pointer;
width: 56px;
height: 56px;
box-sizing: border-box;
border:1px solid #D7D8DB;
background-color: #fff;
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
border-radius: 24px;
display: flex;
align-items: center;
justify-content: center;
}
/* 메뉴 N 아이콘 */
.floating_button_wrap .fbb_guide.new_icon{
position: relative;
}
.floating_button_wrap .fbb_guide.new_icon::after{
position: absolute;
top: 0px;
right: 0px;
}
.floating_button_wrap .fbb_guide .fbbg_icon {
display: inline-block;
width: 24px;
height: 24px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position:center;
}
.floating_button_wrap .fbb_guide .fbbm_icon {
display: inline-block;
width: 24px;
height: 30px;
background-image: url('data:image/svg+xml,');
background-size: 35px;
background-repeat: no-repeat;
background-position:center;
}
.floating_button_wrap .fbb_guide .fbbg_txt {
font-size:13px;
font-weight: 600;
color:#47484D;
margin-left: 4px;
display: none;
}
.floating_button_wrap .fbb_guide:hover {
width: 120px;
}
.floating_button_wrap .fbb_guide:hover .fbbg_txt {
display: inline-block;
margin-top: 2px;
}
.floating_button_wrap .fbb_top,
.floating_button_wrap .fbb_bottom {
display: block;
width: 56px;
height: 56px;
border-radius: 22px;
background-color: rgba(0, 0, 0, 0.90);
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
border:none;
cursor: pointer;
background-repeat: no-repeat;
background-position: center;
}
.floating_button_wrap .fbb_top {
background-image:url('data:image/svg+xml,');
}
.floating_button_wrap .fbb_bottom {
background-image: url('data:image/svg+xml,');
}