:root {--vh: 100%; --inner-pd:5%; --inner-cont-pd:6.31067961165%; --header-hei:3.5em; --color-border01:#DFDFDF; --color-border02:#C3C9D1; --color-point:#0060FF; --color-point-or:#D72700; --color-tit:#112950; --color-more:#60646E; --color-g-tit:#262626; --color-g-s-tit:#535353; --text-line-hei:4.5rem; } 

@media all and (min-width: 1024px) { 
 :root { --header-hei:4em; } 
 } 
 @media all and (max-width: 490px) { 
 :root { --inner-cont-pd:5%; } 
 } 
.inner { padding: 0 var(--inner-pd); } 
.flex { display: flex; align-items: center; } 
.tit { color: var(--color-tit); font-size: 1.7rem; font-weight: 700; } 
.txt { word-break: keep-all; } 

.ham_menu_btn,
header.header .i-cart { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; } 


header.header { position: fixed; top:-1px; left: 50%; width: 100%; max-width: calc(1024px - 2px); background: #fff; transform: translateX(-50%); border-bottom: 1px solid transparent; text-align: center; z-index: 99999; transition: .3s; } 
header.header .inner { position: relative; display: flex; justify-content: center; align-items: center; height: var(--header-hei); padding-top: 0.5em; padding-bottom: 0.5em; } 
header.header .logo { width: 7.8em; height: 4.8rem; background: url(/img/logo_b.svg)no-repeat center / contain; } 
header.header .logo a { display: flex; justify-content: center; align-items: center; width:100%; height: 100%; } 
header.header .logo img { width: 76%; margin: 0 auto; } 
header.header .i-cart { position: absolute; top: 50%; right: calc(var(--inner-pd) + .6em); width: 4.8rem; height: 4.8rem; background: url(/img/icon_cart_c.svg)no-repeat center / contain; transform: translateY(-50%); background-size: calc(100% - 1.8rem) !important; background-position: right !important; } 
header.header .i-cart .num { display: inline-block; position: absolute; top: .3em; right: -1em; width: 1.5em; height: 1.5em; line-height: 1.6em; border-radius: 100%; background: var(--color-point-or); color: #fff; font-weight: 600; font-size: 0.644em; text-align: center; } 


@media (max-width: 1200px) { 
 header.header { max-width: 100%; } 
 } 
@media all and (min-width: 768px) { 
 header.header { padding-top: 1rem;} 
 header.header .logo { width: 12.8em; } 
 } 
@media (min-width: 768px) and (max-width: 1024px) { 
 header.header .inner { font-size: 2.5rem; } 
 header.header .logo img { width: 70%; } 
 } 

/*ham*/
.ham_menu_btn { position: absolute; left: var(--inner-pd); flex-wrap: wrap; align-content: space-evenly; width: 4.8rem; height: 4.8rem; padding: 0.9rem 1.8rem 0.9rem 0; margin-left: auto; font-size: 1.6rem; } 
.ham_menu_btn::before { display: block; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; min-width: 4.8rem; min-height: 4.8rem; background: transparent; content: ''; transform: translate(-50%, -50%); } 
.ham_menu_btn .ham-line { display: inline-block; width: 2.5rem; height: 3px; border-radius: 1em; overflow: hidden; background: #fff; } 
.ham_menu { position: fixed; left: -100%; top: 0; z-index: 999999; max-width: calc((100% - 1024px) / 1.5); width: 80%; height: 100vh; border-radius:0 1em 1em 0; background:#ecf3f4; overflow: hidden; overflow-y: auto; visibility: hidden; transition: .3s; } 
.ham_menu a { color: var(--light-color); } 
.ham_menu > ul { padding: 30px; padding-top: 0; } 
.ham_menu > ul > li { width: 100%; line-height: 2; position: relative; } 
.ham_menu > ul > li > .tit { position: relative; color: #091a37; font-size: 2rem; font-weight: 600; text-align: left; } 
.ham_menu > ul > li > .tit .icon { position: absolute; right: 0; top: 50%; width: .8em; transform: translateY(-50%); transition: .3s; } 
.ham_menu > ul > li > .gnb-depth { position: relative; height: 0; overflow: hidden; padding-left:1em; padding-right: 1em; border: 0 solid #dee2e6; background: rgba(255,255,255,.5); transition-duration: 0.4s } 
.ham_menu > ul > li > .gnb-depth-all { display: grid; grid-template-columns: repeat(4, 1fr); } 
.ham_menu > ul > li > .gnb-depth-my { display: grid; grid-template-columns: repeat(3, 1fr); } 
.ham_menu > ul > li > .gnb-depth a { display: block; line-height:3.3rem; color: var(--color-g-tit); font-size: 1.6rem; } 
.ham_menu > ul > li.active .tit .icon { transform:rotateZ(180deg) translateY(50%); } 
.ham_menu > ul > li.active .gnb-depth { padding-top: 0.5em; padding-bottom: .5em; border-radius: 0.5em; height: auto; } 
.ham_menu > ul > li.active > .gnb-depth { max-height: 20vh; border: 1px solid #dee2e6; overflow-y: auto; } 
.ham_menu.active { left:0; visibility: visible; } 
.ham_menu .close_ham { position: relative; display: flex; align-items: center; text-align: right; width: 100%; height: calc(var(--header-hei) / 1.5); margin-left: 0; padding-top: calc(var(--inner-pd) / 2); padding-right: calc(var(--inner-pd) / 2); border-radius: 0; } 
.ham_menu .close_ham .ham_menu_btn { position: relative; left: 0; padding: 0; } 
.ham_menu .close_ham .ham_menu_btn .ham-line { position: absolute; top: 50%; left: 50%; background: var(--color-tit); } 
.ham_menu .close_ham .ham_menu_btn .ham-line:nth-child(1) { transform:translate(-50%, -50%) rotateZ(45deg); } 
.ham_menu .close_ham .ham_menu_btn .ham-line:nth-child(2) { transform:translate(-50%, -50%) rotateZ(-45deg); } 
.ham_menu .ham-bg-img { position: absolute; bottom: 0; left: 0; width: 100%; padding: 2em; opacity: .2; } 
.ham_bg.active { position: fixed; width: 100%; background:rgba(29, 42, 40, 0.7); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); left: 0; top: 0; height: 100%; z-index: 99999; } 
.ham_menu .login-wr { margin:0 30px; justify-content: space-between; } 
.ham_menu .login-wr .btn-login ,.login-wr .btn-join,.login-wr .btn-logout { display: block; width: 14rem; min-height: 1.8rem; margin-top: .5rem; padding: 1rem 2rem; background: #54637d; border-radius: 13rem; color: #fff; font-size: 1.8rem; font-weight: 600; text-align: center; } 
.ham_menu .login-wr .btn-login { margin-right: 2%; } 



@media all and (min-width: 720px) { 
 .ham_menu { min-width: 40rem; } 
 } 
@media all and (max-width: 1024px) { 
 .ham_menu { max-width: 40rem; } 
 } 

@media all and (max-width: 500px) { 
 .ham_menu { max-width:100%; width: 100%; border-radius: 0; } 
 .ham_menu .login-wr { margin: 0 30px; } 
 .ham_menu > ul > li > .gnb-depth-all a ,
 .ham_menu > ul > li > .gnb-depth-my a { text-align: center; } 
 .ham_menu > ul > li.active > .gnb-depth-my { padding:.9em; } 
 } 
@media all and (max-width: 400px) { 
 .ham_menu > ul > li > .gnb-depth-all a ,
 .ham_menu > ul > li > .gnb-depth-my a { word-break: keep-all; line-height: 1.3; } 
 .ham_menu > ul > li > .gnb-depth-all { grid-template-columns: repeat(3, 1fr); } 
 .ham_menu > ul > li > .gnb-depth-my { grid-gap: 2rem 1rem !important; } 
 .ham_menu > ul > li > .gnb-depth-my li { display: flex; justify-content: center; align-items: center; } 
 .ham_menu > ul > li.active .gnb-depth { grid-gap: 1rem; } 
 
 } 
 @media all and (max-width: 350px) { 
 .ham_menu > ul > li.active > .gnb-depth { max-height: 15vh; } 
 .ham_menu > ul > li > .gnb-depth-my { grid-template-columns: repeat(2, 1fr); } 
 } 


 /*툴팁*/
 /* 240324 수정 */
 .tooltip-wr { display: inline-block; margin-left: 0.3rem; } 
 .tooltip-wr .tit-wr { justify-content: space-between; align-items: center; margin-bottom: 0; padding: .8rem 1rem; border-bottom: 1px solid #e8eaec; } 
 .tooltip-wr button { width: 1.5rem; height: 1.5rem; margin-bottom: 0.3rem; border-radius: 100%; border: 1px solid var(--color-tit); color: var(--color-tit); font-size: 1rem; font-weight: 500; vertical-align: text-bottom; } 
 .tooltip-wr button::before { display: block; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; min-width: 3.8rem; min-height: 3.8rem; background: transparent; content: ''; transform: translate(-50%, -50%); } 
 .tooltip-wr .tip { display: none; } 
 .tooltip-wr .tip .cont { position: absolute; top: 1rem; left: 11rem; width: 55%; line-height: 1.5; border-radius: .7rem; background: #fff; border: 1px solid var(--color-border02); color: var(--color-g-tit); font-size: 1.6rem; text-align: center; z-index: 2;word-break: keep-all; } 
 .tooltip-wr .tip .cont p { width: 100%; padding: .8rem 1rem; font-weight: 400; letter-spacing: -0.06em; text-align: left; } 
 .tooltip-wr .tip .cont .icon-close { width: 1.2rem; opacity: .5; } 
 .tooltip-wr #tip02 .cont { left: 16rem; } 
 .tooltip-wr #tip03 .cont { left: 14rem; } 
 
 @media screen and (max-width:500px) { 
 .tooltip-wr .tip::after { position: absolute; top: -100vw; left: -50%; width: 300vw; height: 300vh; background-color: rgba(0,0,0,.4); transform: translate(-50%, -50%); content: ''; z-index: 1; } 
 /* 알림창 가운데 배치 */ 
 /* .tooltip-wr .tip .cont { position: fixed; top: 50% !important; left: 50% !important; width: 60vw !important; margin-top: -5rem; border: 1px solid #1e2125; transform: translate(-50%, -50%); } */
 .tooltip-wr .tip .cont { left: 9.5rem; width: calc(100% - 8rem); max-width: 17rem; } 
 .tooltip-wr #tip02 .cont { left: 15.5rem; width: calc(100% - 13.5rem); } 
 .tooltip-wr #tip03 .cont { left: 14.5rem; width: calc(100% - 13rem); } 
 } 


/* 항목별 배경*/
.thumb-img { background-color: #f0f7ff; } 
[data-color="clam"] { background-color: #E1E8FF; } 
/* [data-color="crap"] { background-color: #FFE1E1; } 
[data-color="process"] { background-color: #F6F8E4; } 
[data-color="shrimp"] { background-color: #FFE5D4; } 
[data-color="fish"] { background-color: #E1FFF2; } 
[data-color="repair"] { background-color: #CBEEFF; } 
[data-color="de"] { background-color: #FFEFF9; } 
[data-color="squid"] { background-color: #FCEFE6; } 
[data-color="special"] { background-color: #FFFEEC; } 
[data-color="dry"] { background-color: #E1FFEE; } 
[data-color="su"] { background-color: #FCEFE6; } 
[data-color="meat"] { background-color: #FFDBE8; } 
[data-color="etc"] { background-color: #F7EFFF; } */


/*그리드스타일*/
.grid { display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: .5rem; } 
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: .5rem; } 
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: .5rem; } 
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: .5rem; } 
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: .5rem; } 

@media screen and (max-width:1200px) { 
 .m1200-grid-1 { grid-template-columns: repeat(1, 1fr); } 
 .m1200-grid-2 { grid-template-columns: repeat(2, 1fr); } 
 .m1200-grid-3 { grid-template-columns: repeat(3, 1fr); } 
 .m1200-grid-4 { grid-template-columns: repeat(4, 1fr); } 
 .m1200-grid-5 { grid-template-columns: repeat(5, 1fr); } 
 } 
 @media screen and (max-width:1024px) { 
 .m1024-grid-1 { grid-template-columns: repeat(1, 1fr); } 
 .m1024-grid-2 { grid-template-columns: repeat(2, 1fr); } 
 .m1024-grid-3 { grid-template-columns: repeat(3, 1fr); } 
 .m1024-grid-4 { grid-template-columns: repeat(4, 1fr); } 
 } 
 @media screen and (max-width:768px) { 
 .m768-grid-1 { grid-template-columns: repeat(1, 1fr); grid-gap: 1rem; } 
 .m768-grid-2 { grid-template-columns: repeat(2, 1fr); grid-gap: 1rem; } 
 .m768-grid-3 { grid-template-columns: repeat(3, 1fr); grid-gap: 1rem; } 
 .m768-grid-4 { grid-template-columns: repeat(4, 1fr); grid-gap: 1rem; } 
 } 
 @media screen and (max-width:500px) { 
 .m500-grid-1 { grid-template-columns: repeat(1, 1fr); grid-gap: 1rem; } 
 .m500-grid-2 { grid-template-columns: repeat(2, 1fr); grid-gap: 1rem; } 
 .m500-grid-3 { grid-template-columns: repeat(3, 1fr); grid-gap: 1rem; } 
 .m500-grid-4 { grid-template-columns: repeat(4, 1fr); grid-gap: 1rem; } 
 } 

/*검색*/
.search-wr { position: relative; z-index: 2; } 
.search-wr .search { height: 4rem; background-color: #F2F4F5; border-radius: 10rem; font-size: 1.8rem; } 
.search-wr input { width: calc(100% - 2.563em); height: 4.8rem; margin-left: 1em; padding: 0.4em 0.938em; background-color: transparent; color: #000; font-size: 1.6rem; } 
.search-wr input::placeholder { color: #000; } 
.search-wr button { height: 100%; width: 3.8em; height: 4.8rem; margin-right: 1em; padding: 0 1em; background: none; } 

@media all and (min-width: 720px) { 
 .search-wr .search { height: 6rem; } 
 } 

/*생산지태그*/
.place { display: inline-block; width: auto; min-width: 4.6rem; height: 1.8rem; line-height: 1.9rem; padding: 0 0.5em; background-color: var(--color-point-or); border-radius: .3rem; color: #fff; font-size: 1.1rem; text-align: center; white-space: nowrap; overflow: hidden; } 

/*화살표 배경*/
.arrow { background-image: url(/img/icon_arrow.svg); background-repeat: no-repeat; background-position: 93% 50%; } 


/*탭바*/
#tabBar { position: fixed; bottom: 0; width: 100%; max-width: 1024px; margin-top: 1em; border-top: 1px solid #ededed; background-color: #fff; filter: drop-shadow(0 0 1.1rem rgba(0, 0, 0, 0.07)); z-index: 999; } 
#tabBar .tab-wr { } 
#tabBar .tab-wr .btn-tab { width: 20%; padding-top:.5rem; padding-bottom: 1.4rem; margin-bottom:0; opacity: .4; } 
#tabBar .tab-wr .btn-tab a { display: flex; justify-content: center; align-items: center; width: 4.8rem; height: 4.8rem; margin: auto; border-radius: 100%; } 
#tabBar .tab-wr .btn-tab span { display: block; text-align: center; font-size: 1.2rem; } 
#tabBar .tab-wr .btn-tab a .icon-box { width: 2.4rem; height: 2.4rem; background-repeat: no-repeat; background-position: center; background-size: contain; } 
#tabBar .tab-wr .btn-tab.tab-home a .icon-box { background-image: url(/img/icon_tab_home_off.svg); } 
#tabBar .tab-wr .btn-tab.tab-heart a .icon-box { background-image: url(/img/icon_tab_heart_off.svg); } 
#tabBar .tab-wr .btn-tab.tab-order a .icon-box { background-image: url(/img/icon_tab_order_off.svg); } 
#tabBar .tab-wr .btn-tab.tab-ice a .icon-box { background-image: url(/img/icon_tab_ice_off.svg); } 
#tabBar .tab-wr .btn-tab.tab-my a .icon-box { background-image: url(/img/icon_tab_my_off.svg); } 
#tabBar .tab-wr .btn-tab.tab-regi a .icon-box { background-image: url(/img/icon_tab_regi_off.svg); } 
#tabBar .tab-wr .btn-tab.tab-check a .icon-box { background-image: url(/img/icon_tab_check_off.svg); } 

#tabBar .tab-wr .btn-tab.tab-home.index,
#tabBar .tab-wr .btn-tab.tab-heart.pick_list,
#tabBar .tab-wr .btn-tab.tab-order.order_details,
#tabBar .tab-wr .btn-tab.tab-order.order_manage,
#tabBar .tab-wr .btn-tab.tab-ice.pre_purchase_list,
#tabBar .tab-wr .btn-tab.tab-my.mypage,
#tabBar .tab-wr .btn-tab.tab-regi.product_regist,
#tabBar .tab-wr .btn-tab.tab-check.order_confirm_list { opacity: 1; } 
#tabBar .tab-wr .btn-tab.tab-home.index span,
#tabBar .tab-wr .btn-tab.tab-heart.pick_list span,
#tabBar .tab-wr .btn-tab.tab-order.order_details span,
#tabBar .tab-wr .btn-tab.tab-order.order_manage span,
#tabBar .tab-wr .btn-tab.tab-ice.pre_purchase_list span,
#tabBar .tab-wr .btn-tab.tab-my.mypage span,
#tabBar .tab-wr .btn-tab.tab-regi.product_regist span,
#tabBar .tab-wr .btn-tab.tab-check.order_confirm_list span { color: var(--color-tit); font-weight: 800; } 
#tabBar .tab-wr .btn-tab.tab-home.index a .icon-box { background-image: url(/img/icon_tab_home_on.svg?v=1); } 
#tabBar .tab-wr .btn-tab.tab-heart.pick_list a .icon-box { background-image: url(/img/icon_tab_heart_on.svg?v=1); } 
#tabBar .tab-wr .btn-tab.tab-order.order_details a .icon-box,
#tabBar .tab-wr .btn-tab.tab-order.order_manage a .icon-box { background-image: url(/img/icon_tab_order_on.svg?v=1); } 
#tabBar .tab-wr .btn-tab.tab-ice.pre_purchase_list a .icon-box { background-image: url(/img/icon_tab_ice_on.svg?v=1); } 
#tabBar .tab-wr .btn-tab.tab-my.mypage a .icon-box { background-image: url(/img/icon_tab_my_on.svg?v=1); } 
#tabBar .tab-wr .btn-tab.tab-regi.product_regist a .icon-box { background-image: url(/img/icon_tab_regi_on.svg?v=1); } 
#tabBar .tab-wr .btn-tab.tab-check.order_confirm_list a .icon-box { background-image: url(/img/icon_tab_check_on.svg?v=1); } 

@media all and (max-width: 1200px) { 
 #tabBar { max-width: 100%; } 
 } 

/* 체크박스 */
.checkmark { position: relative; background-color: #fff; border: 2px solid #c4c4c4; height: 2.6rem; width: 2.6rem; transition: all 0.2s ease 0s; cursor: pointer; transform-origin: 0px 10px; border-radius: 4px; padding: 0px; box-sizing: border-box; } 
.checkmark:after { content: ""; position: absolute; display: none; } 
.deta-chk input { position: absolute; opacity: 0; cursor: pointer; width: 4.8rem; height: 4.8rem; z-index: 1; } 
.deta-chk label { display: flex; flex-direction: column; align-items: center; -webkit-tap-highlight-color :transparent; } 
.deta-chk span { display: inline-block; margin-top: .6em;; font-size: 1.4rem; font-weight: 600; } 
.deta-chk input:checked ~ .checkmark { background-color: var(--color-point); border: 2px solid var(--color-point); } 
.deta-chk input:checked ~ .checkmark:after { display: block; } 
.deta-chk .checkmark:after { left: 50%; top: 50%; width: 60%; height: 100%; background: url(../img/input-chk.svg)no-repeat center / contain; transform: translate(-50%, -50%); transition: all 500ms ease-in-out; z-index: 3; } 

/**/
input[type="date"] { border: none; position: relative; background: url(../../img/icon_cal.svg) no-repeat 100% / contain; } 
input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: transparent; color: transparent; cursor: pointer; } 
input[type="date"]::before { content: attr(placeholder); width: 100%; height: 100%; } 
input[type="date"]:valid::before { display: none; } 


/*footer*/
.footer { background: #f6f6f6; word-break: keep-all; } 
.footer .inner { line-height: 1.8; padding-top: 3rem; padding-bottom: 3rem; border-radius: 1.2rem; color: var(--color-g-tit); font-size: 1.4rem; } 
.footer .terms-wr { margin-bottom: 1rem; } 
.footer .terms-wr a { color: #000; font-size: 1.6rem; } 
.footer .terms-wr a:not(:last-child) { margin-right: 1rem; } 
.footer .info-wr a { color: #124DAE; } 
.footer .ma-tp { margin-top: 1rem; } 

.ps-info { padding-top: 3rem; padding-bottom: 10rem; } 
.ps-info .info-wr { padding: 2rem 1.6rem; background: #f6f6f6; border-radius: 1.2rem; font-size: 1.4rem; } 
.ps-info .info-wr:not(:last-of-type) { margin-bottom: 1rem; } 
.ps-info .info-wr .tit { margin-bottom: 1rem; } 
.ps-info .info-wr ul li:not(:last-of-type) { margin-bottom: 1rem; } 
.ps-info .info-wr ul li .tit-m { margin-bottom: 0.5rem; color: #124DAE; font-weight: 600; } 
.ps-info .info-wr ul li .txt { margin-left: 0.5em; line-height: 1.5; font-weight: 300; } 
.ps-info .info-wr.info-wr-call { padding: 1.6rem; letter-spacing: -0.05em; } 
.ps-info .info-wr.info-wr-call .tit { margin-bottom: 0; } 
.ps-info .info-app-wr { cursor: pointer; } 
.ps-info .info-app-wr .info-app { display: inline-flex; padding: 1rem 2rem; border: 2px solid #022f79; border-radius: 1.2rem; background: #f6f6f6; } 
.ps-info .info-app-wr .info-app .icon { margin-right: 1rem; } 
.ps-info .info-app-wr.mo { display: none; } 
.ps-info .info-app-wr.mo .info-app { padding: .5rem 1rem .5rem .5rem; } 
.ps-info .info-app-wr.mo .info-app .icon { width: 3rem; margin-right: 0.3rem; } 
.ps-info .info-app-wr.mo .info-app .tit {font-size: 1.4rem;}

#info-app .modal-body { text-align: center; } 
#info-app .modal-body .icon { padding: 3rem 0; } 

@media screen and (any-pointer:coarse) { 
 .ps-info .info-app-wr.pc { display: none; } 
 .ps-info .info-app-wr.mo { display: inline-flex; gap: .5rem 1rem; flex-wrap: wrap; } 
 } 















/**/