@charset "UTF-8";
/* 말줄임 */
/*초기화*/
html, body, section, article, header, footer, nav, div, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dd, dt, img, a, form, input, select, option, fieldset, textarea, button, label, figure, video { margin: 0; padding: 0; border: 0; background-repeat: no-repeat; background-position: center; line-height: 1; text-decoration: none; font-family:'Pretendard', 'lato','noto sans kr',돋움,'Apple SD Gothic Neo',sans-serif; /*font-size: 12px;*/ font-weight: 500; letter-spacing: -0.3px; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; list-style: none; }

a:link, a:visited, a:hover, a:focus, a:active {text-decoration: none;font-size:14px; color:#000}

table { width: 100%; border-spacing: 0; border-collapse: collapse; }


.div-wr {position:relative; width:100%;}
.div-cont {position:relative; width:1080px; margin:0px auto;}
.mobile_only {display: none;}

/* 폼초기화 */
select, button, input[type=text], input[type=submit], textarea { appearance: none; -moz-appearance: none; -webkit-appearance: none; }

select { -webkit-box-sizing: border-box; box-sizing: border-box; }

/*크롬사라피*/
@media screen and (-webkit-min-device-pixel-ratio: 0) { select { padding-right: 22px !important; background: url(../images/bg_select.png) no-repeat right center; background-size: contain; } }
/*파이어폭스*/
@-moz-document url-prefix() { select { padding-right: 22px !important; background: url(../images/bg_select.png) no-repeat right center; background-size: contain; } }
/* 섀도우 */
/*========= input ===========*/
.ip_comm{ display: block; width: 100%; height: 38px; padding: 0 10px; border: 0; background-color: transparent; -webkit-box-sizing: border-box; box-sizing: border-box; outline: none; }
.ip_comm:focus { background-color: #ffffee; }

select.ip_comm {padding-right: 0 !important; }
textarea.ip_comm {height: 150px; padding: 10px; line-height: 1.5; }


.clear:after { content: ""; display: block; clear: both; }
.hidden { position: absolute; left: -100%; top: -100%; overflow: hidden; width: 0; height: 0; font-size: 0; text-indent: -9999%; line-height: 0; }
.scrollLock { overflow: hidden; }

body::-webkit-scrollbar {width: 10px;}
body::-webkit-scrollbar-thumb {background-color: #2f3542;border-radius: 10px;}
body::-webkit-scrollbar-track {background-color: #fff;border-radius: 10px;box-shadow: inset 0px 0px 15px grey;}
body.active {ms-overflow-style: none; /* for Internet Explorer, Edge */scrollbar-width: none; /* for Firefox */overflow-y: scroll;height:100%; min-height:100%; overflow:hidden !important; touch-action:none;}
body.active::-webkit-scrollbar {display: none; /* for Chrome, Safari, and Opera */}


#nav::-webkit-scrollbar {width: 10px;}
#nav::-webkit-scrollbar-thumb {background-color: #2f3542;border-radius: 10px;}
#nav::-webkit-scrollbar-track {background-color: #fff;border-radius: 10px;box-shadow: inset 0px 0px 15px grey;}
.on #nav {ms-overflow-style: none; /* for Internet Explorer, Edge */scrollbar-width: none; /* for Firefox */overflow-y: scroll;height:100%; min-height:100%; overflow:hidden !important; touch-action:none;}
.on #nav::-webkit-scrollbar {display: none; /* for Chrome, Safari, and Opera */}




#partner-wr {margin:0px 0 50px 0; padding: 0px 10px;}
#partner-wr ul  {display:flex; flex-direction: column; width:100%;}
#partner-wr ul li {display:flex;align-items: center;justify-content: center; padding:10px 0}
#partner-wr ul li span {width:30%;    text-align: center;}
#partner-wr ul li span:last-child {width:70%;text-align:left;}
#partner-wr ul li span img {width:65%;}
article h3.cont-title {line-height:44px; color:#fff; background-color:#646464;padding-left: 20px;font-weight: 100;}
article h3.cont-title strong{font-weight:600; font-size:18px;}
#link-wr {margin:0px 0 30px 0; padding: 0px 10px;}
#link-wr ul  {display:grid; width:100%;grid-template-columns: auto auto ;column-gap: 15px;row-gap: 15px; padding:15px 0}
#link-wr ul li {position: relative;	border: 1px solid #dcdcdc;padding: 15px 50px 15px 15px;text-align: left; cursor: pointer;}
#link-wr ul li:after {position:absolute;right:15px;top:50%;transform: translate(0%, -50%);font-family: "Font Awesome 6 Free";font-size:21px; font-weight:600}
#link-wr ul li:nth-child(1):after {content: '\f028';}
#link-wr ul li:nth-child(2):after {content: '\f059';}
#link-wr ul li:nth-child(3):after {content: '\f4ff';}
#link-wr ul li:nth-child(4):after {content: '\f095';}
#link-wr ul li div.desc {font-size:14px;}
#link-wr ul li h3 {font-size:16px; font-weight:600;padding-top:5px;}


#link-banner-wr {margin:0px 0 30px 0; padding: 0px 0px;}
#link-banner-wr img{width:100%;}

#category-banner-wr {padding:20px}
#category-banner-wr ul {display:flex;width:100%;flex-wrap: wrap;background-color:#f0f0f0;border-radius: 10px;padding: 4px;}
#category-banner-wr ul li{display: inline-block;width: 33.33%;padding-top: 0px;zoom: 1;text-align: center;padding: 4px;}
#category-banner-wr ul li a {display: block;height: 125px;overflow: hidden;padding: 80px 0 0;font: 12px/34px '맑은 고딕','Malgun Gothic',AppleGothic,sans-serif;color: #000;text-align: center;text-overflow: ellipsis;white-space: nowrap;background-repeat: no-repeat;background-color: #fff;border: 1px solid #dcdcdc;border-radius: 10px;border: 1px solid #dcdcdc;}
#category-banner-wr ul li:nth-child(1) a {background-image: url(/img/main/btn_banner_01.png);background-position: center 35%;}
#category-banner-wr ul li:nth-child(2) a {background-image: url(/img/main/btn_banner_02.png);background-position: center 35%;}
#category-banner-wr ul li:nth-child(3) a {background-image: url(/img/main/btn_banner_03.png);background-position: center 35%;}
#category-banner-wr ul li:nth-child(4) a {background-image: url(/img/main/btn_banner_04.png);background-position: center 35%;}
#category-banner-wr ul li:nth-child(5) a {background-image: url(/img/main/btn_banner_05.png);background-position: center 35%;}
#category-banner-wr ul li:nth-child(6) a {background-image: url(/img/main/banner_06.png);background-position: center 35%;}

/*#category-banner-wr ul li:nth-child(1) a {background-image: url(/img/main/banner_01.png);background-position: center 35%;}
#category-banner-wr ul li:nth-child(2) a {background-image: url(/img/main/banner_02.png);background-position: center 35%;}
#category-banner-wr ul li:nth-child(3) a {background-image: url(/img/main/banner_03.png);background-position: center 35%;}
#category-banner-wr ul li:nth-child(4) a {background-image: url(/img/main/banner_04.png);background-position: center 35%;}
#category-banner-wr ul li:nth-child(5) a {background-image: url(/img/main/banner_05.png);background-position: center 35%;}
#category-banner-wr ul li:nth-child(6) a {background-image: url(/img/main/banner_06.png);background-position: center 35%;}*/


/* 오늘 본 상품 모바일 */
#m_stv {display:flex; flex-direction:column; background:#fff; letter-spacing:-1px;}
#m_stv h1 {position:relative; width:100% font-size:13px; border-bottom:1px solid #dcdcdc; padding:5px 10px; }
#m_stv h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#m_stv_ul { width:100%; display:flex; flex-direction:row; flex-wrap:wrap; list-style:none; background:#fff;}
#m_stv_ul li {width:25%; display:none;background:#fff; position:relative;border-bottom:0;padding:5px;text-align:left;word-break:break-all;font-size:12px;color:#666}
#m_stv_ul li:after {display:block;visibility:hidden;clear:both;content:""}
#m_stv_ul li .prd_img,
#m_stv_ul li .prd_cnt {display:inline-block;float:left}
#m_stv_ul li .prd_cnt {width:100%;}
#m_stv_ul li .prd_name,
#m_stv_ul li .prd_cost {display:block}
#m_stv_ul .qk_name { width:100%; line-height:1em; text-align:center; display:inline-block; padding:0 5px; transition:0.3s ease all; padding-top: 10px; padding-bottom: 5px;}
#m_stv_ul li .prd_name {font-size:1em}
#m_stv_ul li:hover .prd_name {color:#134cab}
#m_stv_ul li .prd_cnt .prd_cost {margin-top:5px;font-weight:bold}
#m_stv_ul li .prd_img img { width:100%; height: auto; border-radius: 20px;}
#m_stv .li_empty {background:#fff;font-size:1em; text-align:center; line-height:50px;color:#cecece}
#m_stv_ul li:hover .qk_name { color:#134cab; transition:0.3s ease all; } 
#m_stv_btn {font-size:12px; color:#134cab; font-weight:600; display:inline-block; margin-left:5px;}
#m_stv_btn button {font-size:24px;color:#fff; font-weight:300; line-height:24px;border:0; margin:0; padding:0; background:transparent;}
#m_stv_btn button#up_two {position: absolute;top: 50%;right: 40px;transform: translate(0%, -50%);}
#m_stv_btn button#down_two {position: absolute;top: 50%;right: 10px;transform: translate(0%, -50%);}
#m_stv_pg { margin-left:7px; color:#fff; font-size:14px;}

#sitemap { display: none; position: absolute; left: 0; top: 166px; width: 100%; padding: 30px 0; background-color: rgba(245, 245, 245, 0.95); z-index: 100; }
#sitemap > ul { width: 1080px; margin: 0 auto; }
#sitemap > ul:after { content: ""; display: block; clear: both; }
#sitemap > ul > li { float: left; width: 10%; border-right:1px solid #ddd;}
#sitemap > ul > li:last-child {border-right:0;}
#sitemap > ul .dep1 {display: block;text-align: center; font-weight: 700; color: #222; font-size: 14px;}
#sitemap > ul .dep2 { margin-top: 15px; }
#sitemap > ul .dep2 li { margin-bottom: 8px;  text-align: center;}
#sitemap > ul .dep2 li a { font-size: 13px; color: #666; }

.on #sitemap { display: block; }

/*========= main ===========*/
.swiper-button-prev, .swiper-button-next { left: 50%; width: 30px; background-size: contain; }
.swiper-button-prev { -webkit-transform: translateX(-660px); transform: translateX(-660px); }
.swiper-button-next { -webkit-transform: translateX(630px); transform: translateX(630px); }

#visual { position: relative; overflow: hidden; }
#visual h2 { position: absolute; left: -100%; top: -100%; overflow: hidden; width: 0; height: 0; font-size: 0; text-indent: -9999%; line-height: 0; }
#visual li.swiper-slide { position: relative;}
#visual li.swiper-slide img{width:100%;height:auto}

.main_title { margin-bottom: 40px; text-align: center; }
.main_title h2 { font-size: 34px; font-weight: 400; color: #222; letter-spacing: -1.5px; }
.main_title p { margin-top: 15px; line-height: 26px; font-size: 16px; color: #666; }


#main01 { position: relative; width: 100%; margin: 0 auto; margin-top: 0px; z-index: 100; padding: 0px; }
#main01:after { content: ""; display: block; clear: both; }
#main01 > a { position: relative; top: 0; float: left; display: block; width: 255px; margin-right: 20px; padding: 55px 0 40px 0; border-radius: 4px; background-color: #fff; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); text-align: center; -webkit-transition: all 0.5s; transition: all 0.5s; }
#main01 > a img { display: block; margin: 0 auto; margin-bottom: 30px; }
#main01 > a .tit { margin-bottom: 10px; font-size: 18px; font-weight: 700; color: #222; }
#main01 > a span { font-size: 13px; font-weight: 500; color: #3d2a74; }
#main01 > a:last-child { margin-right: 0; }
#main01 > a:hover { top: -20px; }

@keyframes btn {
  0% {box-shadow:0 0 0px rgba(0,0,0,0.5) }
  50% {box-shadow:3px 3px 10px rgba(0,0,0,0.8) }
  100% {box-shadow:0 0 0px rgba(0,0,0,0.5) }
}
#main02 { padding: 95px 0 85px 0; text-align: center; }
#main02 .set_btn a {overflow:hidden; display: inline-block; margin: 0 2px; border-radius:8px; animation-name:btn; animation-iteration-count: infinite; animation-duration:2s;}

#main03 { padding: 40px 5%;background-color: #fff;}

#main03 .main_title h2 { color: #666e79; }
#main03 .main_title h2 strong { color: #ce6cff; }

#main04 { width: 100%; margin: 0 auto; padding:60px 0; border-top: 1px solid #ddd; background-color: #f9f9f9;}
#main04:after { content: ""; display: block; clear: both; }
#main04 > div.div-cont {display: grid;grid-template-columns: 1fr 1fr 1fr;}
#main04 > div h2 { margin-bottom: 15px; font-size: 20px; font-weight: 700; color: #222; }
#main04 .cs {display:flex; flex-direction: column; justify-content: center; padding-right: 45px; text-align: center;}
#main04 .cs h2 {padding-top:60px; background-image:url(/images/icon_csface.svg); background-position:top center; background-size:auto 50px;}
#main04 .cs .tel {font-size: 36px; font-weight: 900; color: #3d2a74; }
#main04 .cs .ex {font-size: 14px; line-height:20px;}
#main04 .cs h3 { margin-bottom: 10px; margin-top: 15px; text-align: center;}
#main04 .cs h3 span { display: inline-block; padding: 0 10px; background-color: #3b444f; line-height: 22px; font-size: 13px; font-weight: 500; color: #fff; }
#main04 .cs dl {text-align: center;}
#main04 .cs dl dt,
#main04 .cs dl dd {display:inline-block; font-size: 14px; line-height:20px;}
#main04 .cs dl dt {margin-right: 5px; font-weight: 700;}
#main04 .cs dl dd {}
#main04 .cs .cnt { font-size: 20px; font-weight: 700; }
#main04 .cs .cnt span { margin-left: 2px; font-size: 15px; font-weight: 500; }
#main04 .latest { position: relative; }
#main04 .latest ul {height: 185px;}
#main04 .latest ul li { padding: 11px 0; line-height: 15px; }
#main04 .latest ul li:after { content: ""; display: block; clear: both; }
#main04 .latest ul li .date { float: right; font-size: 13px; color: #888; }
#main04 .latest .btn_more { position: absolute; top: 0; right: 0; font-size: 24px; font-weight: 700; color: #3d2a74; }
#main04 .la_nt { padding: 0 44px; border-left: 1px solid #eee; border-right: 1px solid #eee; }
#main04 .la_nt .btn_more { right: 44px; }
#main04 .la_qa { padding-left: 45px; }


#main05 {width: 100%;margin-bottom: 100px;background: url(../img/main_bg.png) no-repeat center center;background-size: cover;}
#main05 .mbg-wr {width: 100%;max-width: 1200px;margin: 0 auto;background: url(../img/main_bg_05_1.png) no-repeat center left;height: 100vh;max-height: 200px;display: flex;border-radius: 5px;align-items: center;}
#main05 .mbg-wr span.text-position {padding-left: 240px;}
#main05 .mbg-wr span.text-position h1{color: #fff;font-size: 30px;font-weight: 350;letter-spacing: -2px;}
#main05 .mbg-wr span.text-position h2{color: #fff;font-size: 40px;font-weight: 500;letter-spacing: -2px;margin-top: 10px;}


/*========= footer ===========*/
#footer { padding: 30px 0; border-top: 1px solid #f1f1f1;background-color: #fdfdfd;}
#footer > h2 { position: absolute; left: -100%; top: -100%; overflow: hidden; width: 0; height: 0; font-size: 0; text-indent: -9999%; line-height: 0; }

#footer .ft_ban { position: absolute; right: 0; top: 0px; }
#footer ul { text-align: left; margin-bottom: 10px; margin-top:20px;}
#footer ul > * { display: inline-block; }
#footer ul li { margin-right: 10px; line-height: 26px; font-size: 14px;  font-weight: 500; color: #000; }
#footer ul li span{color: red;}
#footer ul li a { font-size: inherit; font-weight: inherit; color: inherit; font-weight: 700; }
#footer ul li a.under {display:block; border-bottom:1px solid #000; padding-bottom: 5px;}
#footer .copyright { font-size: 13px; font-weight: 700; color: #000; }
#footer .copyright a { font-size: inherit; font-weight: inherit; color: inherit; }

/*========= quick ===========*/
#quick { position: fixed; right: 10px; bottom: 10px; overflow: hidden; border: 1px solid #f9e000; border-radius: 4px; z-index: 500; }
#quick figure { padding: 20px; background-color: #fff; }
#quick .tit { background-color: #f9e000; line-height: 30px; text-align: center; font-size: 13px; font-weight: 700; color: #3b1d1c; }
#quick .tit img { position: relative; top: -1px; width: auto; height: 16px; }

/*========= sub ===========*/
#sub_menu {padding:15px 0; border-bottom:1px solid #eee; background-color: #f4f4f4;}
#sub_menu ul {text-align: center;}
#sub_menu ul li {display: inline-block; margin:0 10px;}
#sub_menu ul li a {font-size: 15px;}
#sub_menu ul li.on a {font-weight: 700; color: #222;}

#page_title {padding: 50px 0 10px 0;}
#page_title > div {width: 1080px;margin: 0 auto;position: relative;}
#page_title h2 {font-size: 2.3rem;font-weight: 700;text-align: center;display: flex;justify-content: center;align-items: center;flex-direction: column;gap: 10px;color:rgb(0 147 255)}
#page_title h2 .dot{display:flex; gap:5px}
#page_title h2 .dot span {width: 4px;height: 4px;border-radius: 50%;background-color: rgb(52, 52, 52);margin-top: 8px;}


#page_title .location { position: absolute; right: 0; top: 20px; opacity: 0.5; text-align: right; display:none;}
#page_title .location > * { display: inline-block; }
#page_title .location li { font-size: 14px; color: #fff; }
#page_title .location li::after { content: "-"; display: inline-block; margin: 0 4px; font-size: 11px; color: #fff; }
#page_title .location li:last-child::after { display: none; }


#sub_contents { position: relative; z-index: 100; padding:50px 0px; min-height:var(--cont_vh); }

.list #sub_contents { padding: 50px 0}

.pd_list_top:after { content: ""; display: block; clear: both; }
.pd_list_top .total { float: left; font-size: 14px; }
.pd_list_top .total span { color: #3d2a74; }
.pd_list_top .align { float: right; text-align: right; }
.pd_list_top .align > * { display: inline-block; }
.pd_list_top .align li { position: relative; }
.pd_list_top .align li:after { content: ""; display: inline-block; width: 1px; height: 10px; background-color: #ccc; margin: 0 10px; right: 0; top: 0; }
.pd_list_top .align li:last-child:after { display: none; }

.pagination { margin-top: 60px; text-align: center; }
.pagination div, .pagination a { display: inline-block; }
.pagination .arr { margin: 0 15px; }
.pagination .arr a { margin: 0 5px; }
.pagination .num { width: 26px; margin: 0 2px; line-height: 24px; border: 1px solid #ddd; text-align: center; font-size: 13px; }
.pagination .num.on { background-color: #3d2a74; border-color: #3d2a74; color: #fff; }

.view_top:after { content: ""; display: block; clear: both; }
.view_top .thumb { overflow: hidden; float: left; width: 100%; padding:20px; }
.view_top .thumb img {width:100%; height:auto;}
.view_top .set_pd_info { width: 100%; padding: 20px 10px 0px 10px;}
.view_top .set_pd_info .pd_name {padding: 10px 0;font-size: 18px;font-weight: 600;color: #222;}
.view_top .set_pd_info .pd_info { margin-top: 0px; border-top: 1px solid #ddd; }
.view_top .set_pd_info .pd_info th, .view_top .set_pd_info .pd_info td { border-bottom: 1px solid #ddd; height: 40px; text-align: left; font-size:14px;}
.view_top .set_pd_info .pd_info th { width: 120px; font-weight: 700; }
.view_top .set_pd_info .pd_info .price1 { text-decoration: line-through; }
.view_top .set_pd_info .pd_info .price2 { font-weight: 600; color: #3d2a74; }

.view_btm { margin: 50px 0; }
.view_btm .detail_tab { border: 1px solid #ddd; }
.view_btm .detail_tab:after { content: ""; display: block; clear: both; }
.view_btm .detail_tab li { float: left; width: 25%; border-right: 1px solid #ddd; background-color: #f4f4f4; }
.view_btm .detail_tab li a { display: block; line-height: 60px; text-align: center; font-size: 16px; font-weight: 600; color: #888; }
.view_btm .detail_tab li a.on { background-color: #fff; color: #3d2a74; }
.view_btm .detail { padding: 0px 10px; }


/* 바코드 */
#pin_wrapper {width:100%; height:100%; background-color:#f4f9fc !important; }
#pin_wrapper .wrap_bcd {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
#pin_wrapper h1 {margin-bottom:20px; text-align:center; }
#pin_wrapper figure {text-align:center;}
#pin_wrapper .set_bcd {width:360px; padding:20px; padding-bottom:30px; border-radius:15px; background-color:#fff;}
#pin_wrapper .img_pd {margin-bottom:15px; text-align: center;}
#pin_wrapper .img_pd img {width:80%; height:auto;}

#pin_wrapper .info_bcd {width:100%; margin-top:30px;}
#pin_wrapper .info_bcd th,
#pin_wrapper .info_bcd td {vertical-align: top; text-align: left; line-height:1.3; font-size: 14px;}
#pin_wrapper .info_bcd p {line-height:inherit; font-size: inherit; font-weight:inherit}
#pin_wrapper .info_bcd th {width:65px; font-weight: bold;}
#pin_wrapper .info_bcd td {text-align: center;}
#pin_wrapper .info_bcd th.cont {padding-top:18px; padding-bottom: 8px;}
#pin_wrapper .info_bcd td.cont {padding-bottom: 18px;}
#pin_wrapper .info_bcd td.cont p {text-align: left;}


.tab_comm {display: flex;flex-wrap: wrap;margin: 30px 0px 0px 0px;}
.tab_comm a {display: flex;align-items: center;justify-content: center;margin-right: 10px;padding: 10px 15px;border-radius: 100px;border: 1px solid #ddd;font-size: 13px;;}

/* 주문폼 */
.agreement {}
.agreement .set_agree {position: relative;margin-bottom: 10px;padding: 10px 15px;background-color: #fff;display: flex;justify-content: space-between;align-items: center;}
.agreement .set_agree label,.agreement .set_agree a {display: inline-block;}
.agreement .set_agree input {width: 1.5rem;height: 1.5rem;}
.agreement .set_agree label {position:relative; padding-left:5px; font-size: 14px; font-weight: 600; cursor: pointer; }
.agreement .set_agree input:checked + label::after {border:1px solid #3d2a74; background-image:url(/images/chk_w.svg); background-color:#3d2a74;}
.agreement .set_agree a {padding: 7px 10px;border-radius: 4px;background-color: #d7d7d7;font-size: 12px; color: #fff;-webkit-transition: all 0.3s; transition: all 0.3s;}
.agreement .set_agree a:hover {background-color:rgb(85 189 239)}

.cuation_li {margin-top:10px;}
.cuation_li li {position: relative; padding-left:17px; margin-bottom:5px; line-height:22px; font-size:13px; color:#8f8f8f;}
.cuation_li li::before {position: absolute; left:0; top:0; line-height:22px; font-size: 13px; content:"※"}


/* 검색창 */
#header .hd-sch {border-bottom: 0;position: absolute;left: 50%;z-index: 101;top: 50%;transform: translate(-50%, -50%);}
#header .top-sch {position: absolute;top: -25px;left: 50%;right: auto;transform: translateX(-50%);border: 0;border-radius: 30px;overflow: hidden;border: 1px solid #3fc1ff;}
#header .top-sch.on {border:1px solid #3fc1ff}
#header .top-sch .top-text-cont {width: 342px;height: 52px;border-radius: 40px;}
#header .top-sch .top-text-cont .top-srarch-text {height: 100%;padding: 0 60px 0 30px;font-size: 16px;width: 100%;border-radius: 30px;-webkit-box-shadow: 0 0 0px transparent;;-moz-box-shadow: 0 0 0px transparent;;box-shadow: 0 0 0px transparent;}
#header .top-sch .top-text-cont input.top-srarch-text:focus {outline:0 !important;border:0 !important; -webkit-box-shadow: 0 0 0px transparent;;-moz-box-shadow: 0 0 0px transparent;;box-shadow: 0 0 0px transparent;}
#header .top-sch .top-text-cont .btn-top-srarch {top: 0px;right: 10px;border-left: 0;width: 50px;height: 50px;background-color: transparent;position: absolute;font-size: 24px;}
#header .top-sch .search-cont {margin-top: -28px;padding-top: 26px;border-top: 0;background-color: #fff;}

.recent-box {position: relative;width: 100%;margin: 0px;background: #f8f8f8;}
.recent-box .btn-top-search-all-del {position: absolute;top: 24px;right: 30px;line-height: 1;padding: 7px 15px;border: 1px solid #ddd;border-radius: 2px;background: #fff;}
.recent-box .btn-top-search-all-del strong {color: #797979;font-size: 14px;font-weight: 400;}
.recent-box ul {margin: 0;padding: 20px 0 0;}
.recent-box li {display: flex;align-items: center;justify-content: space-between;line-height: 1.4;margin: 0 0 10px;}
.recent-box li a {font-size: 14px;font-weight: 600;}
.recent-box li span {color: #a0a0a0;font-size: 14px;font-weight: 400;display: flex;align-items: center;gap: 10px;}

.btn-top-search-del { margin: 0px;padding: 10px;border-radius: 50%;width: 20px;height: 20px;display: flex;justify-content: center;align-items: center;background-color:#000; color:#fff;display:none;}
.recent-box dl {padding: 20px 30px 10px 30px;border-top: 1px solid #efefef;}
.recent-box dt {line-height: 1;color: #373737;font-size: 18px;font-weight: 700;}
.recent-box dd {color: #373737;font-size: 16px;font-weight: 400;}

#header .top-sch .search-hot-list .search-hot-tit {display: block;padding: 20px 30px;color: #373737;font-size: 18px;font-weight: 700;text-align: left;background: none;}
#header .top-sch .search-hot-list ul {margin: 0 30px 10px;text-align: left;}
#header .top-sch .search-hot-list ul li {display: inline-block;height: 32px;line-height: 32px;margin: 0 5px 5px 0;padding: 0 18px;border: 1px solid #40b4e6;border-radius: 40px;}
#header .top-sch .search-hot-list ul li a {border-left: 0;}
#header .top-sch .search-hot-list ul li a span {position: static;color: #40b4e6;font-size: 14px;font-weight: 500;}
#header .top-sch .search-hot-list ul li a span:hover {border-bottom: 0;}

.seach-top-all {height: 40px;text-align: center;border-top: 1px solid #eaeaea;background: none;}
.seach-top-all .btn-top-search-close {line-height: 40px;padding: 0 20px 0 0;background-color: transparent;}
.seach-top-all .btn-top-search-close strong::before {position: absolute;top: 8px;right: -18px;transform: rotate(45deg);width: 15px;height: 1px;background: #898989;content: '';}
.seach-top-all .btn-top-search-close strong {position: relative;color: #000000;font-size: 14px;font-weight: 600;}
.seach-top-all .btn-top-search-close strong::after {position: absolute;top: 8px;right: -18px;transform: rotate(-45deg);width: 15px;height: 1px;background: #898989;content: '';}

/* 모달팝업 */
#modal-content { display: none; width: 600px; max-width: 90%; height: 500px; -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0; outline: 0 none; }
#modal-content .modal-header { height: 20px; border-bottom: 1px solid #e5e5e5; padding: 15px; }
#modal-content .modal-header h4 { margin: 0; font: bold 18px 'Malgun Gothic'; color: #5d5d5d; }
#modal-content .modal-body { padding: 15px; }
#modal-content .modal-body .b-iframe { width: 570px; max-width: 100%; height: 430px; }
#modal-content .b-close { float: right; font: bold 21px Arial; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; opacity: .2; filter: alpha(opacity=20); padding: 0; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; }
#modal-content .b-close:hover, #modal-content .b-close:focus { color: #000; text-decoration: none; cursor: pointer; opacity: .5; filter: alpha(opacity=50); }
p.modal-frame-content { width: 550px; max-width: 100%; height: 400px; padding-right: 5px; overflow-x: hidden; overflow-y: auto; font: normal 12px 'Malgun Gothic'; color: #555; line-height: 1.65em; }
/*.popbtn {text-decoration:none;cursor:pointer;margin:0 5px}*/
.b-modal __b-popup1__ { max-width: 100%; }
#modal-content .modal-header, #modal-content .modal-body { -webkit-box-sizing: content-box !important; box-sizing: content-box !important; }
#modal-content2 { display: none; width: 400px; height: 560px; background: rgba(54, 54, 54, 0.9); border-radius: 4px; border: 0px; }
#modal-content2 .modal-header { position: relative; height: 28px; }
#modal-content2 .modal-body2 { padding: 0; }
#modal-content2 .b-close { position: absolute; top: 0; right: 16px; font-size: 40px; font-weight: 900; font-family: Tahoma; color: #fff; opacity: .5; filter: alpha(opacity=50); padding: 0; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; }
#modal-content2 .b-close:hover, #modal-content .b-close:focus { cursor: pointer; opacity: 1; filter: alpha(opacity=100); }
#modal-content2 .modal-body2 .b-iframe { width: 400px; height: 560px; }




/* 메인 */
.layout-wr{display: flex;-webkit-box-pack: center;justify-content: center;flex-direction: row;-webkit-box-align: center;align-items: center;background-color: #e3f9ff;}
.vis-wr {position: relative;width: 720px;}
.vis-layout {position: fixed;width: 720px;height: 720px;top: 50%;transform: translateY(-50%);text-align:center;display: flex; align-items: center;}

.vis-layout .app-wr {width: 100%;display: flex;flex-direction: column;}
.vis-layout .app-wr .app-logo {}
.vis-layout .app-wr .app-logo img {width:250px;}
.vis-layout .app-wr .app-title {margin: 30px 0px 0px 0px;}
.vis-layout .app-wr .app-title p{padding-top:10px; font-size:16px;}


.app-download {width: 100%;display: block;margin-top: 50px;}
.app-download h3 {font-family: 'Pretendard';font-size: 21px;font-weight: 600;text-align: center;margin-bottom: 15px;}
.app-download .app-button {display: flex;gap: 10px;justify-content: center;}
.app-download .app-button button {width: 162px;height: 50px;border: none;background-color: #fff;cursor: pointer;text-indent: -9999px;}
.app-download .app-button button:first-child {background: url(/images/btn_gp_on.gif) 0 0 no-repeat;background-size: contain;}
.app-download .app-button button:last-child {background: url(/images/btn_as_on.gif) 0 0 no-repeat;background-size: contain;}
.cont-wr {width: 576px;position: relative;background-color: rgb(255, 255, 255);overflow: hidden;}

.btn-link {position: absolute;right: 20px;top: 50%;transform: translate(-0%, -50%);display: flex;align-items: center;justify-content: center;gap:20px;}
.btn-link i {font-size:21px;} 

/*========= header ===========*/
/* header */
#header { background-color: #fff;border-bottom: 1px solid rgba(0, 0, 0, 0.2);}
#header > .hd_top {position: relative;padding: 20px 0;border-bottom: 1px solid #eee;display: flex;justify-content: space-between;align-items: center;}
#header > .hd_top > .hd_cont {display:flex; justify-content: space-between; align-items: center;z-index:100;}
#header > .hd_top > .hd_cont > ul {margin-top:7px; text-align: right; display: flex; align-items: center; gap:20px}
#header > .hd_top > .hd_cont > ul li a {font-size: 14px;color: #000;font-weight: 600;}
#header > .hd_top > .hd_cont > ul li a.btn_search {position: relative;display: block;width: 40px;height: 40px;line-height: 40px;font-size: 28px;text-align: center;color: #000;background-color: transparent;border-radius: 50em;}
#header > .hd_top > .hd_cont > ul li a.btn_cart {position: relative;display: block;width: 40px;height: 40px;line-height: 40px;font-size: 28px;text-align: center;color: #fff;background-color: rgb(85 189 239);border-radius: 50em;}
#header > .hd_top > .hd_cont > ul li a.btn_cart .cart_count {position: absolute;top: -3px;right: -3px;font-size: 10px;background: rgba(34,51,89,1);width: 1.5rem;height: 1.5rem;border-radius: 50em;display: flex;justify-content: center;}
#header > .hd_btm > .hd_cont > { position: relative; margin: 0 auto;  padding: 15px 0;}
#header > .hd_top > .background-overlay {opacity:0; top:-100%;left:0%;position:absolute}

#header > .hd_btm:after { content: ""; display: block; clear: both; }
#header h1,#header #btn_nav { position: relative; z-index: 100; }
#header h1 { float: left; }
#header #btn_nav { float: right; width:30px;}
#header #btn_nav > a { display: block; position: relative; width: 20px; height: 28px; }
#header #btn_nav > a span, #header #btn_nav > a span:before, #header #btn_nav > a span:after { display: block; width: 100%; height: 2px; background-color: #444; -webkit-transition: all 0.3s; transition: all 0.3s; }
#header #btn_nav > a span { position: absolute; left: 0; top: 50%; text-indent: -999%; font-size: 0; line-height: 0; }
#header #btn_nav > a span:before, #header #btn_nav > a span:after { content: ""; position: relative; }
#header #btn_nav > a span:before { top: -7px; }
#header #btn_nav > a span:after { top: 5px; }
#header #btn_nav.on span { background-color: transparent; }
#header #btn_nav.on span:before, #header #btn_nav.on span:after { background-color: #444; }
#header #btn_nav.on span:before { top: 0px; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
#header #btn_nav.on span:after { top: -2px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

#header #nav {float:left; width:100%;}
#header #nav ul {display: flex;height: 60px;align-items: center;gap: 25px;}
#header #nav ul > * { display: inline-block; width: -webkit-fill-available; text-align: center; }
#header #nav ul li .dep1 { position: relative; display: block; line-height: 28px; font-size: 16px; font-weight: 700; -webkit-transition: all 0.3s; transition: all 0.3s; color: #333; }
#header #nav ul li .dep1::after { content: ""; display: block; width: 100%; height: 2px; position: absolute; left: 0; bottom: 0; background-color: #3d2a74; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.5s; transition: all 0.5s; }
#header #nav ul li:hover .dep1 { color: #3d2a74; }
#header #nav ul li:hover .dep1::after { -webkit-transform: scaleX(1); transform: scaleX(1); }



.nav-link {display:flex;gap:0px;}
.nav-link a {font-size:13px;}
.nav-link a:first-child:after { content: "\00B7"; padding:0px 10px;}

.nav-top {display: flex;background: #fff;align-items: center;justify-content: space-between;padding-right: 60px;}
.nav-top .nav-title{color: #222;background: #fff;font-weight: 500;letter-spacing: -1px;margin: 0;line-height: 0;display: inline-block;text-align: left;padding: 0px 5px 5px 15px;}
.nav-top .nav-title a > img {max-height: 50px;}

.menubar {width: 100%;display: flex;flex-direction: row;flex-wrap: wrap;background: #fff;border-top: 1px solid #dcdcdc;}
.menubar a { width:50%; padding:10px 15px; border-right:1px solid #dcdcdc; text-align:left; font-size:13px; letter-spacing:-1px; border-bottom:1px solid #dcdcdc; }
.menubar a:nth-child(2n) { border-right:0; }
.menubar a ion-icon { vertical-align:middle; margin-right:3px; }
.menubar a .m_katok { max-height:13px; vertical-align:middle; margin-right:3px; }
.menubar a li {font-size:14px; font-weight:600}

/*========= 쇼핑몰 공통 ===========
.pd_list {margin-top:20px;}
.pd_list:after { content: ""; display: block; clear: both; }
.pd_list > li {position:relative; float: left;width: calc( 25% - 15px );margin-right: 20px;margin-bottom: 20px;padding: 0px;border: 1px solid #f1f1f1;border-radius: 8px;background: #fff;overflow: hidden;}
*/

.pd_list {margin: 20px 0px 50px 0px;display: grid;grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));grid-gap: 2em;}
.pd_list:after { content: ""; display: block; clear: both; }
.pd_list.no-item {grid-template-columns:1fr}



.pd_list > li {position: relative;padding: 0px;border: 1px solid #f1f1f1;border-radius: 8px;background: #fff;overflow: hidden;}

.pd_list > li a { display: block; }
.pd_list > li .img_cont img { display: block; width: 100%; height: 193px; }
.pd_list > li .tit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 15px; font-size: 16px; font-weight: bold; color: #222;padding: 0px 10px;}
.pd_list > li .ex { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 8px; font-size: 14px; color:#c3c3c3;padding: 0px 10px;min-height: 20px;}
.pd_list > li .price { margin-top: 15px; font-size: 16px; font-weight: bold; color: rgb(0 172 255);padding: 0px 10px 20px 10px;}
.pd_list > li .price .before { margin-left: 4px; font-size: 1.25rem; font-weight: normal; color: #888; text-decoration: line-through; }
.pd_list > li:nth-child(4n) { margin-right: 0; }
.pd_list + .btn_more { display: block; line-height: 40px; border: 1px solid #ddd; background-color: #f6f6f6; text-align: center; color: #777; }
.pd_list li {transition: all .5s;}
.pd_list li:hover {box-shadow: 0 0 1.2rem 0 rgba(0,0,0,.2)}
.pd_list li:hover .prdt_rate dd b {display: inline-block;-webkit-animation: move_down 1.5s ease-in-out infinite;-moz-animation: move_down 1.5s ease-in-out infinite;animation: move_down 1.5s ease-in-out infinite}
.pd_list.no-item li {display: flex;justify-content: center;align-items: center;line-height: 500px;text-align: center;font-size: 15px;border: none;border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;border-radius: 0;font-weight: 600;width: 100%;}
.pd_list.no-item li i {font-size: 24px;font-weight: 600;border: 1px solid;padding: 20px;background-color: #ddd;border-radius: 50%;border-width: 0px;margin-right: 20px;color: #ff0000;}
.pd_list.no-item li:hover {box-shadow:none}


.prdt_rate {display: -ms-flexbox;display: -webkit-flexbox;display: flex;justify-content: space-between;width:90%;position: absolute;top: 55%;left: 50%;transform: translate(-50%, -50%);}
.prdt_rate dl {width: 32%;padding: 1em 0;font-size: 1.6rem;text-align: center;border-radius: .5rem; background-color: #fff;}
.prdt_rate dl:nth-child(1) {color: rgba(81,136,245,1);border: 1px solid rgba(81,136,245,1);}
.prdt_rate dl:nth-child(2) {color: rgba(85,189,239,1);border: 1px solid rgba(85,189,239,1);}
.prdt_rate dl:nth-child(3) {color: rgba(34,51,89,1);border: 1px solid rgba(34,51,89,1);}
.prdt_rate dt {font-size: 14px;margin-bottom: 1ex;color: rgba(25,31,40,1);font-weight: 600;}
.prdt_rate dd {font-size: 1.3rem;font-weight: 600;overflow: hidden;}



/*========= 하단 ===========*/
footer.footer-wr{width: 100%;display: inline-block;padding: 0px 20px;position: relative;bottom: 0;background-color:#424656;font-family: 'Noto Sans Kr';}
footer.footer-wr .flogo img {width: 220px;}
footer.footer-wr .comp-info {width: 100%;max-width: 1200px;margin: 40px auto;font-size: 0;padding: 10px 0px;}
footer.footer-wr .comp-info ul{display: flex;flex-direction: column;color: #fff;justify-content: center;align-items: center;gap: 15px;}
footer.footer-wr .comp-info ul li {color: #fff;}
footer.footer-wr .comp-info ul li span {color: #fff;font-weight: 100;font-size:14px;}
footer.footer-wr .comp-info ul li:nth-child(2){margin-bottom:20px;}
footer.footer-wr .copyright {color:#fff;text-align: center;}
footer.footer-wr .flogo {text-align: center;margin: 20px 0 10px 0;padding-bottom: 10px;}
footer.footer-wr .flogo img {width:120px;}


#m_sod_bsk_tot{background:#f4f4f4;border-radius:5px;padding:5px 10px}
#m_sod_bsk_tot:after{display:block;visibility:hidden;clear:both;content:""}
#m_sod_bsk_tot dt{float:left;width:40%;padding:5px 0 ;line-height:20px;clear:both;font-size:13px;}
#m_sod_bsk_tot dd{float:left;width:60%;padding:5px 0;text-align:right;line-height:20px;font-size:13px;}
#m_sod_bsk_tot .sod_bsk_cnt{border-top:1px solid #cdcdcd;font-weight:bold;margin-top:5px;line-height:25px}
#m_sod_bsk_tot .sod_bsk_cnt strong{color:#3d2a74;font-size:1.25em}


/*========= 결제수단 선택 폼 ===========*/
.items_cnt {display: -ms-flexbox;display: -webkit-flexbox;display: flex;justify-content: space-between; align-items: center;}
.set_pd_info section h3 {margin-bottom: 1.5ex;font-size: 1.4rem;font-weight: 700;margin-top: 3.5ex;}
.set_pd_info section h3 b {color: rgb(85 189 239);}
.sheet_payment {margin-bottom: 1.5rem;}
.sheet_payment .radio_cst {width: 32.33%;}
.radio_cst label {cursor: pointer;}
.radio_cst label span.emphasis {margin-right: 5px; color:#ff0000;font-weight: 600;}
.radio_cst label span.ani {margin-right: 5px; color:#ff0000; display: inline-block;-webkit-animation: move_down 1.5s ease-in-out infinite;-moz-animation: move_down 1.5s ease-in-out infinite;animation: move_down 1.5s ease-in-out infinite}
.radio_cst input[type="radio"] {-webkit-appearance: none;-moz-appearance: none;appearance: none;position: absolute;left: 0;opacity: 0;height: 0;width: 0;font-size: 0;}
.sheet_payment input[type="radio"] + label {position: relative;flex-flow: column;display: -ms-flexbox;display: -webkit-flexbox;display: flex;width: 100%;padding: 10px;gap: 10px;border-radius: 0.5rem;color: rgba(182,187,197,1);font-size: 16px;background: rgba(245,247,249,1);border: 1px solid transparent;cursor: pointer;}
.sheet_payment input[type="radio"] + label .items_cnt {font-size: 14px;}
.sheet_payment input[type="radio"] + label .sale_val {overflow:hidden}
.sheet_payment input[type="radio"]:checked + label {color: #fff;background: rgb(85 189 239);}
.sheet_payment input[type="radio"]:checked + label .sale_val {color: #fff;}
.sheet_payment input[type="radio"]:checked + label .emphasis {color: #f9ff00;}
.sheet_payment input[type="radio"]:checked + label .items_cnt {color: #fff;font-size: 14px;}


[class*=" xi-"], [class^=xi-] {font-family: xeicon!important;display: inline-block;speak: none;font-style: normal;font-weight: 400;font-variant: normal;text-transform: none;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.pre {overflow-x: auto;white-space: pre-line;-webkit-appearance: none;-moz-appearance: none;appearance: none;font-family: Pretendard,apple sd gothic neo,noto sans kr,malgun gothic,sans-serif;color: var(--color-gray-900);}

.mobile_menu {display: block;position: absolute;right: 20px;font-size: 24px;color: #444;top: 16px;}

.burger_menu{position:absolute;flex-direction:column;width:20px;cursor:pointer;z-index:100;}
.burger_menu span{transition: .4s  cubic-bezier(0.68, -0.6, 0.32, 1.6);}
.burger_menu span:nth-of-type(1){width:50%;}
.burger_menu span:nth-of-type(2){width:100%;}
.burger_menu span:nth-of-type(3){width:75%;}
.burger_menu input[type="checkbox"]{display:none;}
.burger_menu input[type="checkbox"]:checked ~ span:nth-of-type(1){transform-origin:bottom;transform:rotatez(45deg) translate(2px,1px)}
.burger_menu input[type="checkbox"]:checked ~ span:nth-of-type(2){transform-origin:top;transform:rotatez(-45deg)}
.burger_menu input[type="checkbox"]:checked ~ span:nth-of-type(3){transform-origin:bottom;width:50%;transform: translate(9px,-4px) rotatez(45deg);}


.menu-wrap {background-color: #fafafa;padding: 0px 0;overflow: scroll;transition: all 0.3s;position: fixed;width: 100%;top: 0;left: -100%;bottom: 0;z-index: 999999;text-align:left;}
.menu-wrap ul.cate { background:#fff; }
.menu-overlay {background: rgba(0, 0, 0, 0.4);display: none;position: fixed;left: 0;right: 0;top: 0;bottom: 0;z-index: 900000;}
.menu-toggle {display: none;}
.menu-toggle:checked+.menu-wrap {left: 0;}
.menu-toggle:checked ~ .menu-overlay {display: block;}
.menu-title {color: #222;background:#fff;font-weight: 500;letter-spacing:-1px;margin:0;line-height:0;padding:10px;display:inline-block;text-align:left;}

.menu_top_title { display:flex; background:#fff; align-items: center; justify-content: space-between;height: 50px; padding:5px 0;}
.menu_top_title > .mtt_right { display:flex; padding-right:50px;  line-height:1em;position: relative;}
.menu_top_title > .mtt_right a {padding: 8px 12px;background-color: transparent;color: #000;border-radius: 3px;display: inline-block;margin-left: 10px;border: 1px solid #ddd;font-size: 13px;font-weight: 600;}
.menu_top_title > .mtt_right a.login {background-color:#7753e7; color:#fff}


.menu-title > a > img { max-height:23px; }

.menu_top_box {width: 100%;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: center;gap: 5px;background: #fafafa;border-top: 1px solid #ddd;padding: 10px 0;}
.menu_top_box > a { width:30%; text-align:center; line-height:1em; color:#fff; border-radius: 5px; border: 1px solid #fff; background: #7753e7;}
.menu_top_box > a ion-icon { font-size:24px; }
.menu_top_box > a > p { font-size:13px; letter-spacing:-1px; font-weight:500; }
.menu_top_box > a > li {margin: 15px 0;display: flex;flex-direction: column;gap: 5px;text-align: center;align-items: center;font-size:13px}

.menu-close {background: url(/img/m_close.png) no-repeat scroll center center transparent;opacity: 1;background-color: black;position: absolute;background-size: contain;width: 30px;height: 30px;right: 10px;top: 50%;border-radius: 30px;margin-bottom: 0;text-indent: -9999px;transition: all 0.3s;transform: translate(0%, -50%);}
.menu-list {position: relative;top: 0px;left: 0;bottom: 0px;width: 100%;height: inherit;padding:0px 0px;display: block;overflow: scroll;}


.table-list > ul{display:flex; width:100%;flex-wrap:wrap;flex-direction: column;}
.table-list > ul > li{width:100%; display:flex; align-items: center; font-size:14px}
.table-list > ul > li.title { background-color:#81d6ff;line-height:38px; color:#fff;border-radius: 5px; text-align: center;padding: 10px 0 10px 0;}
.table-list > ul > li.title > div {text-align:center; font-weight:600; font-size:14px;}



/*------------------------------------------------- 메뉴 관리 ----------------------------------------------------*/
.mypage-menu {position: relative;overflow-x: auto;white-space: nowrap;}
.mypage-menu ul{display: flex;width: 100%;padding: 10px 0;gap: 10px;}
.mypage-menu ul li {width: auto;justify-content: start;display: flex;align-items: center;line-height: 40px;cursor:pointer;}
.mypage-menu ul li a {display: block;padding: 8px 12px;font-weight: 500;font-size: 14px;line-height: 20px;letter-spacing: -0.4px;border: 1px solid rgba(0, 0, 0, 0.05);background: rgb(255, 255, 255);border-radius: 30px;}
.mypage-menu ul li a:hover {background-color:#f3f5f7}
.mypage-menu ul li a.active {background-color:#000; color:#fff}



/*------------------------------------------------- 핀정보 ----------------------------------------------------*/

#pin-wr {width:100%; height:100%; background-color:#f4f9fc }
.pin-cont-wr {position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);width: 100%;max-width: 360px;}
.pin-cont-wr h1 {text-align:center; margin-bottom:20px;}
.pin-cont-wr h1 img {width:100%; max-width:150px;}
.pin-cont {position: relative;width: 100%;max-width: 360px;border-radius: 15px;background-color: #fff;overflow: hidden;-webkit-box-shadow: 0 0 8rem rgba(0, 0, 0, 0.1); box-shadow: 0 0 8rem rgba(0, 0, 0, 0.1);}
.pin-cont figure {margin:0px auto}
.pin-info {display:flex;flex-direction:column}
.pin-info .pin-title {padding: 20px 50px 20px 20px;font-size: 16px;font-weight: 600;}
.pin-info ul {display: flex;flex-direction: column;padding: 0px 20px 30px 20px;gap: 10px;}
.pin-info ul li.pin-code {font-size: 18px;font-weight: 600;text-align: center;background-color: #ff0000;color: #fff;line-height: 45px;border-radius: 8px;height: 45px;cursor:pointer;}
.pin-info ul li.pin-desc  {display: block;padding: 10px;width: 100%;height: 100px;background: transparent;line-height: 1.65em;color: #666;box-sizing: border-box;font-size: 1.1em;overflow:hidden;overflow-y:auto;background-color: #f4f9fc;}
.pin-info ul li.pin-desc::-webkit-scrollbar {width: 5px;background-color: transparent}
.pin-info ul li.pin-desc::-webkit-scrollbar-thumb {width: 3px;border-radius: 5em;background-color: #dbe0e9}
.pin-info ul li.pin-desc::-webkit-scrollbar-track {width: 3px;background-color: transparent}
.pin-info ul li.pin-exp {display: flex;gap: 10px;align-items: center;}
.pin-info ul li.pin-exp span:first-child{background-color: #f4f9fc;padding: 0px 10px;border-radius: 5px;line-height: 24px;display: block;font-weight: 600;font-size: 1.1em;}
.pin-info ul li.pin-exp span:last-child{font-size: 1.1em;;font-weight:600;color:#ff0000}
.pin-cont .buyer-info {position: absolute;width: 100%;left: 0px;bottom: -118px;background-color:#fff;transition: all 0.3s;overflow: hidden;}
.pin-cont .buyer-info.active {bottom: 0px;}
.pin-cont .buyer-info dl {display: -ms-flexbox;display: -webkit-flexbox;display: flex;justify-content: space-between;align-items: baseline;border-bottom: 1px solid #eaeaea;}

.pin-cont .buyer-info dt {width: 8em;font-size: 1.1em;font-weight: 700;padding-left: 20px;}
.pin-cont .buyer-info dd {width: calc(100% - 8em);font-size: 1.1em;line-height: 18px;background-color: #fff;padding: 10px;}
.pin-cont .buyer-info .info-toggle {position: relative;height: 20px;background-color: #ebf8ff;border: 0px;border-bottom: 1px solid #c1e9ff;border-top: 1px solid #99dbff;width: 100%;padding: 0px;margin: 0px;}
.pin-cont .buyer-info .info-toggle:after {content: "\f077";font-family: "Font Awesome 6 Free";font-weight: 600;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
.pin-cont .buyer-info.active .info-toggle:after {transform: translate(-50%, -50%) rotate( -180deg );}
.pin-cont .order-toggle {position: absolute;right: 10px;top: 10px;line-height: 40px;border-radius: 20px;width: 40px;height:40px;font-size: 1.2em;font-weight: 600;border: none;background-color: #ff0000;color: #fff;transition: all ease 0.5s 0s;}
.pin-cont .order-toggle span {display:none;}
.pin-cont .order-toggle.active {width: 95%;text-align: center;display: flex;justify-content: center;gap: 10px;overflow:hidden}
.pin-cont .order-toggle.active span {display:block;animation: fadein 0.5s;  -moz-animation: fadein 0.5s; /* Firefox */  -webkit-animation: fadein 0.5s; /* Safari and Chrome */  -o-animation: fadein 0.5s; /* Opera */}
.ellipsis {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;word-break: break-all;}



@-webkit-keyframes move_down {
    0% {
        -webkit-transform: translate(0,-20px);
        opacity: 1
    }

    50% {
        opacity: 1
    }

    100% {
        -webkit-transform: translate(0,20px);
        opacity: 1
    }
}

@-moz-keyframes move_down {
    0% {
        -moz-transform: translate(0,-20px);
        opacity: 0
    }

    50% {
        opacity: 1
    }

    100% {
        -moz-transform: translate(0,20px);
        opacity: 0
    }
}

@keyframes move_down {
    0% {
        transform: translate(0,-20px);
        opacity: 0
    }

    50% {
        opacity: 1
    }

    100% {
        transform: translate(0,20px);
        opacity: 0
    }
}
@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media ( max-width: 1024px ) {
	.div-cont {width:100%;}
	.mobile_only {display: block;}
	.pc_only {display: none;}
	#page_title h2 {text-align:center;}
	
	.main_bg_05 {
		margin: 20px 0;
	}
	
	#sub_contents {width:100%;}
	#footer > div.div-cont {width:100%;}
	
	#main05 {margin: 20px 0;}
	#main05 .mbg-wr {width: 100%;max-width: 1200px;margin: 0 auto;background: url(/img/main_bg_05_1.png) no-repeat center left;height: 100vh;max-height: 200px;display: flex;border-radius: 5px;align-items: center;}
	#main05 .mbg-wr span.text-position {width: 100%;height: 100%;padding: 20px;display: flex;background: rgba(5,5,5,0.2);flex-wrap: wrap;flex-direction: row;justify-content: flex-start;align-items: center;align-content: center;box-sizing: border-box;}
	#main05 .mbg-wr span.text-position h1{font-size: min(24px, 5.5vw);letter-spacing: -1px;}
	#main05 .mbg-wr span.text-position h2{font-size: min(36px, 7vw);letter-spacing: -1px;}
	
	#header h1.logo {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
	#header h1.logo img{height:40px}
	#header > .hd_top {padding:10px 0}
	#header > .hd_top > .hd_cont {justify-content: flex-end;}
	#header > .hd_top.on > .background-overlay {position:relative;background-color:rgba(255,255,255,1);display: block;z-index: 200;width: 100%;height: 90px;position: absolute;left: 0px;top: 0px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;opacity:1; border-bottom:1px solid #d3d3d3}
	#header > .hd_top.on > .background-overlay > button {width: 30px;height: 30px;position: absolute;left: 50%;bottom: -18px;transform: translate(-50%, 0%);border-radius: 50%;background-color: #000;color: #fff;0%,-50%);}
	#header > .hd_top > .hd_cont > ul {padding-top: 0px; padding-right: 15px;margin-top:0px;gap: 5px;}
	#header > .hd_top > .hd_cont > ul li {display:none;}
	#header > .hd_top > .hd_cont > ul li:nth-child(4) {display:block;}
	#header > .hd_top > .hd_cont > ul li:last-child {display:block;}
	#header > .hd_top > .hd_cont > ul li a.btn_cart {width: 40px;height: 40px;line-height: 45px;font-size: 25px;}
	
	#m_stv h3 {position: relative;font-size: 13px;padding: 10px 10px;background-color: rgb(85 189 239);color: #fff;	}
	#page_title > div {width:100%;}	
	.burger_menu {right: inherit;font-size: 24px;position: absolute;top: 50%;left: 20px;transform: translate(1%, -50%);}
	
	.mo_cate_li_1:nth-last-child(1) { border-bottom:1px solid #dcdcdc; }
	.mo_cate_li_1 .sub_cate1 { display:none; width:100%; background:#f9f9f9; }
	.mo_cate_li_1_a { display:inline-block; position:relative; padding:13px 10px; width:100%; border-top:1px solid #dcdcdc;font-size:14px;font-weight:600}

	.sub_cate1 .mo_cate_li_2 { position:relative; border-top:1px solid #e1e1e1; }
	.sub_cate1 .mo_cate_li_2 > a { position:relative; width:100%; display:inline-block; padding:10px 25px; }

	.sub_cate1 .mo_cate_li_2 > a::before { content:''; position:absolute; top:8px; left:10px; width:1px; height:7px; border-left:1px dotted #000; }
	.sub_cate1 .mo_cate_li_2 > a::after { content:''; position:absolute; top:16px; left:10px; width:7px; height:1px; border-bottom:1px dotted #000; }

	.sub_cate1 .mo_cate_li_3 {position:relative;}
	.sub_cate1 .mo_cate_li_3 > a::before { content:''; position:absolute; top:7px; left:-14px; width:1px; height:7px; border-left:1px dotted #ccc; }
	.sub_cate1 .mo_cate_li_3 > a::after { content:''; position:absolute; top:15px; left:-14px; width:7px; height:1px; border-bottom:1px dotted #ccc; }

	.sub_cate1 .mo_cate_li_4 {position:relative;}
	.sub_cate1 .mo_cate_li_4 > a::before { content:''; position:absolute; top:8px; left:-14px; width:1px; height:7px; border-left:1px dotted #000; }
	.sub_cate1 .mo_cate_li_4 > a::after { content:''; position:absolute; top:16px; left:-14px; width:7px; height:1px; border-bottom:1px dotted #000; }
	.mo_cate_li_1 .sub_cate1.open { display:inline-block; }
	.sub_cate1 .mo_cate_li_2 > ul.opens { width:100%; display:inline-block; }
	.sub_cate1 .mo_cate_li_3 > ul.opens { display:inline-block; }
	.sub_cate1 .mo_cate_li_3 > ul { width:100%; display:none; padding-left:15px; padding-bottom:4px;}
	.sub_cate1 .mo_cate_li_2 > ul { display:none; padding-left:40px; padding-bottom:4px;}
	
	#main04 .div-cont {flex-direction: column;display: flex;}
	#main04 > div.div-cont {grid-template-columns: none; grid-template-rows: 1fr 1fr 1fr;}
	#main04 > div.div-cont > div {width:100%;}
	#main04 > div h2 {padding-top:10px;}
	#main04 .la_nt .btn_more, #main04 .latest .btn_more {right: 10px; top: 10px;}
	#main04 .la_nt, #main04 .la_qa {padding: 0px 10px; border: none; border-top: 1px solid #ddd;}
	#main04 .cs {padding:0px 10px 30px 10px;}
	
	.view_top .set_pd_info .pd_info th {font-size:12px;}
	.view_top .set_pd_info .pd_info th, .view_top .set_pd_info .pd_info td {font-size:14px;}
	
	#sit_ov_btn button {width: 100%;margin-right: 0px;height: 45px;font-size: 14px; font-weight: 400;}
	
	/* 상품 상세설명 페이지 */
	.view_top {display: flex;flex-direction: column;grid-template-columns: none;}
	.view_top .thumb {padding:20px 0px}
	
	
	/* 장바구니 페이지 */
	#sit_opt_added li {flex-direction: column;align-items: center;gap: 10px;}
	#sit_opt_added li .opt_name {display: flex;justify-content: space-between;width: 100%;flex-direction: column;}
	.view_btm .detail {padding:0px}
	
	#cart_list > ul {display: flex;width: 100%;flex-wrap: wrap;flex-direction: column;gap:10px;}
	#cart_list > ul > li.title {height:32px;border-radius: 0px;}
	#cart_list > ul > li.title > div:not(:first-child) {display:none;}
	#cart_list > ul > li.title > div:nth-child(1) {width: 100%;padding-left: 10px;text-align: left;display: flex;gap: 10px;}
	#cart_list > ul > li {position: relative;flex-direction: column;border: 1px solid #ddd;border-radius: 7px; padding: 10px 0 0px 0;}	
	#cart_list > ul > li:not(:first-child) > div:nth-child(1) {position:absolute; left:7px; top:10px}
	#cart_list > ul > li > div:nth-child(2) {width:100%; flex-direction: column;}
	#cart_list > ul > li > div.pd_info .sod_img {display:none;}
	#cart_list > ul > li > div.pd_info .sod_name {padding: 0px 10px 10px 10px;}
	#cart_list > ul > li > div.pd_info .sod_name a {padding-left:20px}
	#cart_list > ul > li > div:nth-child(3) {text-align:right;padding-right: 10px !important;}
	#cart_list > ul > li > div:nth-child(3), #cart_list > ul > li > div:nth-child(4), #cart_list > ul > li > div:nth-child(5), #cart_list > ul > li > div:nth-child(6) {display: flex;width: 100%;justify-content: space-between;border-top: 1px solid #ddd;align-items: center;line-height:28px;}
	#cart_list > ul > li > div:nth-child(3) span:first-child, #cart_list > ul > li > div:nth-child(4) span:first-child, #cart_list > ul > li > div:nth-child(5) span:first-child, #cart_list > ul > li > div:nth-child(6) span:first-child {min-width: 100px;padding: 0px 10px;text-align: center;background-color:rgba(245,247,249,1);border-right: 1px solid #ddd;font-weight: 600;font-size: 12px;}
	
	#sod_bsk #sod_bsk_tot li {padding: 15px 15px 15px 15px;}
	
	#sct {padding: 0px 10px;}
	
	#footer {padding: 30px 10px;background-color:#fff;}
	#footer .ft_ban {display:none;}
	#footer ul li {color:#000}
	#footer ul li a.under {border-bottom-color:#000}
	#footer .copyright {color:#caff00}
	
	#header .hd_top .hd-sch {display: block;position: absolute;top: -100%;left: 50%;width: 100%;background: #fff;box-sizing: border-box;transition: all .5s;z-index: 200; opacity:0}
	#header .hd_top.on .hd-sch {top: 70%; opacity:1}
	
}

@media screen and (max-width:767px) {
	/*========= 메인화면 ===========*/
	
	.main_title h2 {font-size: 24px;}
	
	#main01 {padding:0px;}
	#main02 {padding:35px 10px;}
	#main03 {padding:20px 10px;}
	
	.pd_list {grid-template-columns: repeat(auto-fill, minmax(35%, 1fr));grid-gap: 1em;}
	.pd_list > li .tit {font-size:14px}
	
	#sod_bsk #sod_bsk_tot ul {display:flex; flex-direction:column;}
	#sod_bsk #sod_bsk_tot li {border-left:none; border-top:1px solid #ddd}
	
	#sub_contents {  padding:5% 10px;  }

	#link-wr ul li div.desc {font-size:12px;}
	footer.footer-wr .comp-info ul li span {font-size:12px;}
	footer.footer-wr .copyright {font-size:13px}
}

@media (min-width:280px) and (max-width:768px) {
	#footer ul li {color: #000; }
	#footer ul li span{color: red;}
	#footer ul li a {color:#000 inherit; font-weight: 700; }
	#footer ul li a.under {border-bottom:1px solid #fff;}
	#footer .copyright {color: #000; }
	#footer .copyright a {}

}