@charset "UTF-8";
/* 말줄임 */
/*초기화*/
html, body, section, article, header, footer, nav, div, p, 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: 'lato','noto sans kr',돋움,'Apple SD Gothic Neo',sans-serif; font-size: 12px; font-weight: 500; color: #444; 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; }

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

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

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

.center { width: 1080px; margin: 0 auto; }

.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; }


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 */}


.menu-close {background: url(/img/m_close.png) no-repeat scroll center center transparent;opacity: 1;background-color:black;position: absolute;width: 50px;height: 50px;right: 0;top: 0;margin-bottom:0;text-indent: -9999px;transition: all 0.3s;}
.menu-top-wr {width: 100%;display: flex;flex-direction: row;flex-wrap: wrap;background: #2d61ad;box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);}
.menu-top-wr > a {width: 25%;text-align: center;line-height: 1em;color: #fff;}
.menu-top-wr > a > li {margin-bottom: 15px;margin-top: 15px;}
.menu-top-wr > a > li > i{font-size:18px;color: #fff;}
.menu-top-wr > a > li > p{margin-top: 15px;color:#fff;font-size: 12px;font-weight:100}


#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/btn_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%;}*/

/* 오늘 본 상품 모바일 */
.todayview { box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); }
#m_stv { background:#fff; letter-spacing:-1px;}
#m_stv h1 {position:relative; font-size:13px; border-bottom:1px solid #dcdcdc; padding:5px 10px;line-height: 30px;}
#m_stv h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#m_stv_ul {border-bottom:1px solid #dcdcdc; 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;text-align:center;}
#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; font-size:12px; margin-top:10px;}
#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:3px;}
#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:18px;color:#000; font-weight:300; line-height:24px;border:0; margin:0; padding:0; background:#fff;}
#m_stv_btn button#up_two {position:absolute;top:8.5px;right:40px}
#m_stv_btn button#down_two {position:absolute;top:8.5px;right:10px;}
#m_stv_pg { margin-left:7px; color:#134cab; font-size:12px;}


#sitemap { display: none; position: absolute; left: 0; top: 147px; 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; }
#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: 20px; }
#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: #3b444f;}
#main03 > div { width: 100%; margin: 0 auto; }
#main03 .main_title h2 { color: #666e79; }
#main03 .main_title h2 strong { color: #fff; }

#main04 { width: 1080px; margin: 0 auto; padding:60px 0; }
#main04:after { content: ""; display: block; clear: both; }
#main04 > div { float: left; width: 300px; height: 220px; -webkit-box-sizing: content-box; box-sizing: content-box; }
#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: 40px; 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; }

/*========= footer ===========*/
#footer { padding: 30px 0; border-top: 1px solid #ddd; }
#footer > h2 { position: absolute; left: -100%; top: -100%; overflow: hidden; width: 0; height: 0; font-size: 0; text-indent: -9999%; line-height: 0; }
#footer > div { width: 1080px; margin: 0 auto; position: relative; }
#footer .ft_ban { position: absolute; right: 0; top: 0px; }
#footer ul { text-align: left; margin-bottom: 10px; }
#footer ul > * { display: inline-block; }
#footer ul li { margin-right: 10px; line-height: 26px; font-size: 14px; color: #666; }
#footer ul li span{color: red;}
#footer ul li a { font-size: inherit; font-weight: inherit; color: inherit; font-weight: 700; }
#footer .copyright { font-size: 13px; font-weight: 700; color: #999; }
#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: 14px;}
#sub_menu ul li.on a {font-weight: 700; color: #222;}

#page_title { position: relative; padding: 30px 5% 0px 5%; font-size: 2rem; font-weight: bold; color: #222; }


#page_title h2 { font-size: 18px;font-weight: 600;color: #000;}
#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; width: 100%; margin: 0 auto; z-index: 100; padding:5% 20px; min-height:var(--cont_vh); }

.list #sub_contents { padding: 30px 5% 80px 5%; }

.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: 0px 10px;}
.view_top .set_pd_info .pd_name {padding: 10px 0;font-size: 16px;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-top: 50px; }
.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:#222 !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-bottom: 20px;}
.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; border:1px solid #ddd; background-color:#f4f4f4;}
.agreement .set_agree input {position: absolute; left:-100%; top:0; width:0; height:0; border:0; }
.agreement .set_agree label,
.agreement .set_agree a {display: inline-block;line-height:18px;}
.agreement .set_agree label {position:relative; padding-left:25px; font-size: 12px; }
.agreement .set_agree label::after {content:"";position: absolute; left:0; top:0;width:18px; height:18px; border-radius:4px; display:block; border:1px solid #aaa; background-image:url(/images/chk.svg); background-repeat:no-repeat; background-position:center; background-size:10px; box-sizing:border-box;}
.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 {margin-left:5px; padding:0 5px; border-radius:4px; background-color:#888; font-size:12px; color:#fff;}

.cuation_li {margin-top:10px;}
.cuation_li li {position: relative; padding-left:17px; margin-bottom:5px; line-height:22px; font-size:13px; color:#3d2a74;}
.cuation_li li::before {position: absolute; left:0; top:0; line-height:22px; font-size: 13px; 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; }

/*# sourceMappingURL=style.css.map */



/* 메인 */
.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 { position: relative; padding: 5px 0; -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);display: flex;justify-content: center;align-items: center;}
#header:after { content: ""; display: block; clear: both; }
#header a, #header img { display: block; }
#header a.logo { height: 50px; }
#header img { width: auto; height: 100%; }

#header #btn_nav {position: absolute;left: 20px;top: 50%;transform: translate(-0%, -50%);}

#header #btn_nav > a { display: block; position: relative; width: 22px; height: 24px; }
#header #btn_nav > a span, #header #btn_nav > a span:before, #header #btn_nav > a span:after { display: block; width: 100%; height: 1px; 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: -6px; }
#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: -1px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

/* menu */
#nav {display: block;overflow: auto;position: absolute;top: 0;left: 0;width: 100%;height: 100vh;transform: translate(-100%, 0%);background: #fff;z-index: 200;transition: all 0.4s;}
#nav > div.nav-wr { overflow-y:auto; height: 100%; }
#nav .btn_close { position: absolute; right: 10px; top: 10px; color: #fff; }
#nav .set_login { text-align: left; padding: 18px 5%; background-color: #3d2a74; }
#nav .set_login > * { display: inline-block; }
#nav .set_login li { position: relative; }
#nav .set_login li:after { content: ""; display: inline-block; width: 1px; height: 10px; background-color: #ccc; margin: 0 10px; right: 0; top: 0; }
#nav .set_login li:last-child:after { display: none; }
#nav .set_login li a { font-size: 1.25rem; color: #fff; }
#nav .set_cart:after, #nav .set_best:after { content: ""; display: block; clear: both; }
#nav .set_cart li, #nav .set_best li { float: left; width: 50%; border-right: 1px solid #eee; border-bottom: 1px solid #eee; }
#nav .set_cart li a, #nav .set_best li a { display: block; line-height: 32px; text-align: center; font-size: 1.3rem; color: #666; }
#nav .set_cart li:nth-child(2n), #nav .set_best li:nth-child(2n) { border-right: 0; }
#nav .nav_list a { display: block; padding: 0 5%; }
#nav .nav_list > li .dep1 { line-height: 40px; border-bottom: 1px solid #eee; font-size: 14px; font-weight: bold; color: #222; }
#nav .nav_list > li .dep2 li { padding: 5px 0; border-bottom: 1px solid #f0f0f0; background-color: #f9f9f9; }
#nav .nav_list > li .dep2 li a { line-height: 28px; font-size: 14px;; color: #555; padding-left:40px;}
.on #nav {transform: translateX(0%);transition: all 0.4s;transition-duration: 0.4s;transition-timing-function: ease;transition-delay: 0s;transition-property: all;}

#nav .btn-close {display: block;right: 0px;top: 0px;position: absolute;width: 55px;height: 55px;cursor:pointer;}
#nav .btn-close span {position: absolute;top: 50%;left: 50%;height: 1px;width: 30px;background: #000;transition: all 0.4s;}
#nav .btn-close span:first-child {transform: translate(-50%, -0%) rotate(45deg);}
#nav .btn-close span:nth-child(2) {opacity: 0;transform: translate(-50%, -0%);}
#nav .btn-close span:last-child {transform: translate(-50%, -0%) rotate(-45deg);}

.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; margin-top:7px; background:#fff; box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); border-top:1px solid #dcdcdc; }
.menubar a { width:50%; padding:6px 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; }


/*========= 쇼핑몰 공통 ===========*/
.pd_list:after { content: ""; display: block; clear: both; }
.pd_list > li { float: left; width: 49%; margin-right: 2%; margin-bottom: 10px; padding: 12px 8px 20px 8px; border-radius: 3px; background-color: #fff; }
.pd_list > li a { display: block; }
.pd_list > li .img_cont img { display: block; width: 100%; height: auto; }
.pd_list > li .tit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 15px; font-size: 16px; font-weight: bold; color: #222; }
.pd_list > li .ex { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 8px; font-size: 14px; color: #777; }
.pd_list > li .price { margin-top: 15px; font-size: 16px; font-weight: bold; color: #3d2a74; }
.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(2n) { margin-right: 0; }
.pd_list + .btn_more { display: block; line-height: 40px; border: 1px solid #ddd; background-color: #f6f6f6; text-align: center; color: #777; }

/*========= 하단 ===========*/
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}



/*------------------------------------------------- 핀정보 ----------------------------------------------------*/
#pin-wr {width:100%; height:100%;}
.pin-cont-wr {position: absolute;left: 50%;top: 0%;transform: translate(-50%,0%);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-wr .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);margin-bottom: 20px;}
.pin-cont-wr .pin-cont figure {margin:0px auto}
.pin-cont-wr .pin-cont:first-child {margin-top:50px;} 
.pin-cont-wr .pin-cont:last-child {margin-bottom:50px;} 

.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;}
/*------------------------------------------------- 핀정보 ----------------------------------------------------*/


@media ( max-width: 1024px ) {
	.vis-wr {display:none;}
	.cont-wr {width:100%;}
	.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:12px;}
	
	#sit_ov_btn button {width: 100%;margin-right: 0px;height: 45px;font-size: 14px; font-weight: 400;}
}

@media screen and (max-width:767px) {
	#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}
}