: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; } 
html { font-size: 62.5%; -ms-touch-action: none;}

body{padding-top:90px;margin:0;background-color:#f5f7f8;font-family:"Noto Sans KR",sans-serif;color:var(--txt)}



ol,ul,li { list-style: none; } 
/*ham*/
.ham_menu_btn { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; }

.ham_menu_btn {  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 .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: 500; 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: 48px; 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%; } 

#before_login{display:flex;  }



@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 {display:flex; justify-content: space-between; align-items: center; margin-bottom: 0; padding: .8rem 1rem; border-bottom: 1px solid #e8eaec; } 
 .tooltip-wr button { width: 20px; height: 20px; margin-bottom: 0.3rem; border-radius: 100%; border: 1px solid var(--color-tit); color: var(--color-tit);text-align:center; font-size: 1rem; font-weight: 500; vertical-align: text-bottom; display:inline-block} 
 
 .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; margin:0px } 
 .tooltip-wr .tip .cont .icon-close { width: 1.2rem; opacity: .5; } 
 .tooltip-wr #tip02 .cont { left: 16rem; } 
 .tooltip-wr #tip03 .cont { left: 14rem; } 
 .tooltip-wr h5{margin:0px 0px}
 

 
 @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%; }