@charset "utf-8";
@import url("pretendard.css");

@font-face { font-family: 'SCDream'; src: url('../../../../../../gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-1Thin.woff') format('woff'); font-weight: 100; }

@font-face { font-family: 'SCDream'; src: url('../../../../../../gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-2ExtraLight.woff') format('woff'); font-weight: 200; }

@font-face { font-family: 'SCDream'; src: url('../../../../../../gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff'); font-weight: 300; }

@font-face { font-family: 'SCDream'; src: url('../../../../../../gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff'); font-weight: 400; }

@font-face { font-family: 'SCDream'; src: url('../../../../../../gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff'); font-weight: 500; }

@font-face { font-family: 'SCDream'; src: url('../../../../../../gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff'); font-weight: 600; }

@font-face { font-family: 'SCDream'; src: url('../../../../../../gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff') format('woff'); font-weight: 700; }

@font-face { font-family: 'SCDream'; src: url('../../../../../../gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-8Heavy.woff') format('woff'); font-weight: 800; }

@font-face { font-family: 'SCDream'; src: url('../../../../../../gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-9Black.woff') format('woff'); font-weight: 900; }


/* CSS Document */
*:focus{outline: 0 !important}
html{font-size:16px; /*overflow-x: hidden;*/}
body{
	-webkit-text-size-adjust:none;
	font-family:'Pretendard', 'Malgun Gothic', 'Dotum';
	line-height: 1.5;
	color: #6d6d6d;
	overflow-y: scroll;
	font-weight: 400;
	letter-spacing: -0.03em
}
body {overflow-x: hidden;}
.roboto{font-family: 'Roboto'}
/* .dot{font-family: 'dotum';} */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video,img {
	margin: 0;
	padding: 0;
	border: 0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
html,body{height: 100%;}

/* 공통 */
a{text-decoration:none; color: inherit}
a:focus{outline:2px solid black;}
input[type="text"],input[type="password"],textarea{
	appearance:none ;-webkit-appearance:none;-moz-appearance:none;
	border:1px solid #d7d7d7;
	border-radius: 3px; -moz-border-radius: 0; -webkit-border-radius: 0;
}
input[type="text"],textarea{
	font:inherit
}
input[type="password"]{
font-size: inherit;
}
input[type="button"]{
	appearance:none ;-webkit-appearance:none;-moz-appearance:none;
	border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0;
	font: inherit;
	border: 0
}
input[type="radio"],input[type="checkbox"]{margin: 0;}
input[type="radio"],input[type="checkbox"],label{vertical-align: middle;}
select{
	border: 1px solid #ccc;
	border-radius: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	font: inherit;
	font-size: 1em;
	background:url('../images/renew/common/select-st1.png') calc(100% - 17px) 50% no-repeat #fff;
	padding: 0 25px 0 5px;
}
select::-ms-expand {
    display: none;
}
*{box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
img{max-width: 100%}
.mt0{margin-top:0px !important}
.mt10{margin-top:10px !important}
.mt15{margin-top:15px !important}
.mt20{margin-top:20px !important}
.mt30{margin-top:30px !important}
.mt40{margin-top:40px !important}
.mt50{margin-top:50px !important}

.mt1p{margin-top: 1% !important}
.mt2p{margin-top: 2% !important}
.mt3p{margin-top: 3% !important}
.mt4p{margin-top: 4% !important}
.mt5p{margin-top: 5% !important}
.mt6p{margin-top: 6% !important}
.mt7p{margin-top: 7% !important}
.mt8p{margin-top: 8% !important}
.mt9p{margin-top: 9% !important}
.mt10p{margin-top: 10% !important}
.mb0{margin-bottom: 0 !important}

.mb20 {margin-bottom:20px !important;}
.mb10 {margin-bottom:10px !important;}

.ml35 {margin-left:35px !important;}

h1,h2,h3,h4,h5{font-size: 1em}
button,input[type="button"]{
	margin: 0;
  padding: 0;
  border: none;
  background: none;
	font:inherit;
	font-size: 1em
}
button,label{cursor: pointer;}
address,em{font-style: normal}

.wide {width: 100vw; margin-left: calc(-50vw + 50%);}

.header_admincss{padding: 1em;text-align: center; font-weight: 700; border-bottom:1px solid #ccc}

.align_l{text-align: left}
.align_c{text-align: center}
.align_r{text-align: right}
.fl{float: left !important}
.fr{float: right !important}
.clearfix:after{content: ''; display: block; clear: both}
.mobile{display: none}

/* 세로 가운데 정렬 */
.table{display: table; width: 100%; height: 100%}
.vertical{display: table-cell; vertical-align: middle;}
#action_ifrm{
	position: absolute;
	left: 20px;
	top: 3000px;
	display: none;
}
.ellipsis{display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.hide,caption,legend,.hidden{position:absolute;left:-300px;width:0;height:0;margin:0;padding:0;background:none;line-height:0;overflow: hidden}
.accessibilityWrap dd a{display:block;position:absolute;top:-10000px;left:0;z-index:500;width:100%;font-size:1.3em;text-align:center}
.accessibilityWrap dd a:hover,.accessibilityWrap dd a:focus,.accessibilityWrap dd a:active{position:absolute;top:0;z-index:500;padding:15px 0;background:#1d60a7;font-weight:bold;color:#fff}
.w100p{width: 100%}
#wrap{position: relative;overflow: hidden;}
.modal{display: none}
.slick-dots{text-align:center; margin-top: 40px;}
.slick-dots li{display: inline-block;cursor: pointer}
.slick-dots button{display:block;white-space: nowrap;overflow: hidden;text-indent: -999px}
.tablet{display: none !important}
.mobile{display: none !important}
.block-pc{display: block}
.pc{display: block;}
.trans{
	-moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.slick-arrow{white-space: nowrap;overflow: hidden;text-indent: -999px;display: block}

/* .w100{width: 100% !important} */
.tal{text-align: left !important;}
.tac{text-align: center !important;}
.tar{text-align: right !important;}

.topbg {position: relative;}
.topbg div.couponarea {position: relative; margin: 0 auto;text-align:center; display: flex; align-items: center;  justify-content: center; width:100%;}
.topbg div.couponarea a {display: flex; align-items: center; height:100%; justify-content: center;}
/*.topbg div.couponarea .slick-list {height:120px !important;}*/
.topbg div.couponarea .slick-slide {height:120px;}
.topbg div.couponarea .slick-slide img { height:120px;}
.topbg .arrow {position: absolute; right: calc(50% - 820px); display: flex; justify-content: flex-end; flex-direction: column; align-items: flex-end; gap:1px; }
.topbg .btnarea {position: absolute; right:20px; top: 50%; transform: translate(0, -50%); z-index: 999;}
.topbg .btnarea .closebtn {display: block; width:41px; height:41px; background:url('../images/renew/common/icon_close.png') center no-repeat; cursor: pointer; text-indent: -999px; position: relative; top:0px; opacity: 0; overflow: hidden;}
.topbg .btnarea .closebtn.on {top:26px; opacity:1; overflow: visible;}
.topbg .btnarea .openbtn {display: block; width:60px; height:60px; background:url('../images/renew/common/icon_open.png') 50% no-repeat #df1b38; cursor: pointer; text-indent: -999px; overflow: hidden; position: relative; top:20px; opacity: 0; overflow: hidden;}
.topbg .btnarea .openbtn.on { top:9px; opacity:1; overflow: visible;}
.topbg .btn_close {position: absolute; right:20px; top: 50%; transform: translate(0, -50%);}
.topbg .prevArrow2 {display: block; width:31px; height:31px; background:url('../images/renew/main/top_slide_prev.png') no-repeat; cursor: pointer;}
.topbg .nextArrow2 {display: block; width:31px; height:31px; background:url('../images/renew/main/top_slide_next.png') no-repeat; cursor: pointer;}
.topbg .slick-vertical .slick-slide {border:none;}

.inner {max-width:1640px; margin: 0 auto; padding:0 20px;}

.sch_new {display: inline-block; position: relative; display: flex; gap:75px;}
.top-sch .in{position: relative; display: flex;}
/*.top-sch .in::before {content: url('../images/renew/common/search_left.jpg'); vertical-align: middle;}
.top-sch .in::after {content: url('../images/renew/common/search_rgh.jpg'); vertical-align: middle;}*/
.top-sch .in input[type="text"]{border:0; background: #fff; border-bottom:1px solid #000; width: 445px; height: 50px; border-radius: 0; padding:0 53px 0 5px; font-size:18px; box-shadow: 0 0 1px transparent;}
.top-sch .in input[type="text"]::placeholder{color:#999999;}
/*.top-sch .in::before {content: ''; display: block; width: 1px; height: 25px; background: #787878; position: absolute; right: 35px; top: 10px;}*/
.top-sch .sch {position: absolute;right:0;top:-4px; width:25px; height: 100%; white-space: nowrap; overflow: hidden;text-indent: -999px; background: url('../images/renew/common/btn-sch.png') center center no-repeat; background-size:contain; border:0; cursor: pointer;}
A:visited,A:link {
    color: inherit;
}

#top_nav{position: relative; width:100%; border-bottom:1px solid #e4e4e4;}
#top_nav.is-fixed {position: fixed; top:126px;}
.header_mid.is-fixed {position: fixed; top:0;}
#top_nav > ul {display: inline-block; vertical-align: top;}
#top_nav > ul > li{float: left; margin-left: 38px; position: relative;}
#top_nav > ul > li:first-child{margin-left: 0;}
#top_nav > ul > li > a{font-weight: 700; font-size: 18px; padding-bottom: 30px; line-height: 1.15; position: relative; color: #000}
#top_nav > ul > li > a:after{width: 0; left: 50%; position: absolute; bottom: 0; height: 3px; content: ''; transition: all ease-in-out .3s; background: #333}
#top_nav > ul > li.color-pink > a{color: #ff0066 !important}
#top_nav > ul > li.color-pink > a:after{background-color: #ff0066;}
#top_nav > ul > li:hover > a:after{width: 100%; left: 0}
#top_nav > ul > li.r_menu a { color: #0048ae; font-weight: 800;}
#top_nav > ul > li.r_menu:first-child {margin-left:40px;}
#top_nav a{display: block;}
#top_nav .gnb  a:hover{color:#db082f; }
#top_nav .gnb .sub_menu a:hover{color:#000; }
#top_nav .gnb .sub_menu li.active2 a, 
#top_nav .gnb .sub_menu li.active2 a:hover{color:#db082f; }
#top_nav .gnb .sub_menu li.parent_category a::after {content: ''; display: inline-block; width:23px; height:23px; background:url(../images/renew/common/icon_more.png) no-repeat; position: absolute; top:50%;  right:10px; transform: translate(0, -50%); opacity: 1;transition: all ease-in-out .3s; }
/*#top_nav .gnb .sub_menu li.active2 a::after {content: ''; display: inline-block; width:8px; height:13px; background:url(../images/renew/common/gnb_icon_arrow.png) no-repeat; position: absolute; top:50%;  right:10px; transform: translate(0, -50%); opacity: 0;transition: all ease-in-out .3s; }
#top_nav .gnb .sub_menu li.active2 a::after,
#top_nav .gnb .sub_menu li.active2 a:hover::after {opacity: 1; right:20px;}*/
#top_nav .depth{position: absolute; white-space: nowrap; left: 50%; transform: translateX(-50%); top: 100%}
#top_nav .depth > li{display: inline-block; margin-left: 10px;}
#top_nav .depth > li:first-child{margin-left: 0;}
#top_nav .depth > li > a{padding: 0 10px; position: relative; line-height: 50px; height: 50px}
#top_nav .depth > li > a:after{position: absolute;left: 50%;bottom: -1px; width: 0; height: 1px; background: #333; content: ''; transition: all ease-in-out .3s; z-index: 1}
#top_nav .depth > li:hover > a:after{left: 0; width: 100%}
#top_nav .category{position: absolute; background: #fff; top: 100%; padding: 20px; white-space: nowrap; text-align: left; left: -50px; line-height: 1.15; font-size: 0; box-shadow: 0 5px 5px rgba(0,0,0,.15);}
#top_nav .category > li{display: inline-block; width: 130px; vertical-align: top; margin-left: 20px; font-size: 14px;}
#top_nav .category > li:first-child{margin-left: 0;}
#top_nav .category > li li{border-bottom: 1px solid #ccc;}
#top_nav .category a{padding: 10px 30px}
#top_nav .category a:hover{color: #000; font-weight: 700;}
#top_nav .category .big,
#top_nav .category .t{color: #333; font-size: 15px;}
#top_nav .category li:hover .big,#top_nav .category li:hover .t{background: #000; color: #fff}
.depth_bg{position: absolute;left: 0;top:; background: #fff; height: 50px;box-shadow: 0 5px 5px rgba(0,0,0,.15); width: 100%; z-index: 100}
#top_nav .depth,#top_nav .category,.depth_bg{display: none;}

.slick-dots{width: 100%;font-size: 0;text-align: center;}
.slick-dots li{width: 10px;height: 10px;border-radius: 50%;margin: 0 8px;background: #eeeeee;}
.slick-dots .slick-active{background: #2e2e2e}
.slick-dots button{display: block;}

/*.sub_top{text-align: center; margin-bottom: 35px; padding-top: 20px; max-width: 1680px; margin: 0px auto;}*/
.tit-st1{font-size: 32px; color: #000; font-weight: 700;  text-align: left; margin-top: 27px; font-family: 'SCDream'; text-align: center;}
.tit-stnew{font-size: 32px; color: #000; font-weight: 700;  text-align: left; position: absolute; top:66px; left:300px;}
.tabs_st1_w{text-align: center; margin-top: 30px}
.tabs_st1_w.pb{margin-bottom: 70px; display: none;}
.tabs-st1{display: flex; justify-content: center; gap:5px; align-items: center; border-right: 0; border-bottom: 0; border-top: 0;}
.tabs-st1 > li > a {width: 175px;height:50px;line-height:50px; text-align: center; background:#efefef; display: block; color:#666666; border-radius: 5px;}

/* category page event banner. 2021.06.25 Lee youngju for uniana */
#sub_banner {overflow: hidden; position: relative; background:#fff; color:#fff;}
#sub_banner .in {position: relative; width:100%; max-width:1520px; margin:0 auto;}
#sub_banner img{width: 100%;display: block;margin: 0 auto;}
#sub_banner .s li {background-repeat: no-repeat; background-size:cover;}
#sub_banner .pager .btn_prev3 {position:absolute; width:30px; left:3%; top:50%; transform: translate(0,-50%); cursor: pointer;}
#sub_banner .pager .btn_next3 {position:absolute; width:30px; right:3%; top:50%; transform: translate(0,-50%);cursor: pointer;}

.tabs-st1 > li > a > span{display: table-cell;vertical-align: middle;}
.tabs-st1 .depth{position: absolute; white-space: nowrap; left: 50%;transform: translateX(-50%); border:1px solid #000;z-index: 1; padding: 1em 2em; font-size: .938em; display: none; color: #6d6d6d; background: #fff}
.tabs-st1 .depth li{display: inline-block;; margin-left: 1.8em;}
.tabs-st1 .depth li .on{color:#000; font-weight:bold;}
.tabs-st1 .depth li:first-child{margin-left: 0;}

.tabs-st1 .active a {color:#fff; background:#f04768; font-weight: 700;}
.tabs-st1 .active .depth{display: block; padding-left: 40px;padding-right: 40px;}
.tabs-st1 .tab-st1 > .active > a:before{position: absolute;left: -1px; top: -1px; right: -1px; bottom: -1px; border:1px solid #000; content: ''}

#sub_br{padding-bottom: 100px;}
.emailinput{height: 3em}

.dyn_alert_item{border:0 !important}
/*.modal-body{border:1px solid #000 !important}*/
.modal-header{background: #000 !important;}
.modal-content{border:1px solid #000 !important; border-radius: 5px; overflow: hidden;}
.modal-footer .type-warning {border:1px solid #000;background-color:#000; color:#fff;margin-right:-8px;}
.modal-footer .unactive {border:1px solid #000;}
#dyn_alert_div {border-radius: 5px;}

.dyn_alert_item,.dyn_alert_item *{max-width: 100% !important;}
.dyn_alert_item .dyn_alert .modal-body {border-radius: 0; }
.dyn_alert_item .dyn_alert .modal-footer {position: relative; border-radius: 0;}
#top_nav_m{display: block;position:fixed;top:0;right:-100%;width:100%;z-index:99999;-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;  -webkit-backface-visibility: hidden; overflow-y: auto; background: #fff; height:100% !important;-webkit-transition: all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out -o-transition:all 0.3s ease-in-out; transition::all 0.3s ease-in-out;}
#top_nav_m.active {display: block; right:0;}
#btn-menu_m {position:relative; width:40px;height:29px;border:0;background:url(https://www.sujinpet.co.kr/front/_customskin/_skintpl/sedefault_responsive/common/images/renew/common/btn-menu.gif) no-repeat 50% 50%;color:#fff;font-size:1em;text-indent:-9999px;-webkit-appearance:none;background-size: contain}
#etc_m{position: absolute;right: 0;top:50%;transform: translateY(-50%)}
#etc_m > *{display: inline-block; vertical-align: middle;}
#etc_m img{display: block;}
#btn-cart{position: relative; margin-left: .3em;}
#btn-cart span{position: absolute;right: -10px;top:-5px;width: 1.5em; height: 1.5em; display: block;border-radius: 50%; line-height: 1.5em; text-align: center; background: #000; color: #fff; font-size: .8em;}

#top_nav_m{font-size: 1.25em;}
#top_nav_m .top_m{text-align: center;background: #262626; color: #fff; padding: 1em 0; font-size: .938em;}
#top_nav_m .top_m > li{float: left; width: 33.3333333333%}
#top_nav_m .top_m img{display: block;margin: 0 auto; width: 2.4em; max-width: 80%}
#top_nav_m .top_m .txt{margin-top: 10px;}
#menu_m{color: #262626}
#menu_m .m_link .inner {padding:0 20px;}
#menu_m .m_link ul {display: flex; flex-wrap: wrap; gap:10px; padding:15px 0; width:100%;}
#menu_m .m_link ul > li {flex:1 1 calc(25% - 8px);}
#menu_m .m_link ul > li > a {display: block; width:100%; height:100%; border:1px solid #fa7b93; border-radius: 5px; color:#db0930; font-size:16px; text-align: center; padding:20px 0;}
#menu_m a{display: block;line-height: 1.5; font-weight: 500; word-break: keep-all;}
/* #menu_m > ul > li{border-bottom: 1px solid #ddd} */
#menu_m > ul > li > a{padding:10px .938rem; font-weight: 700; border-bottom: 1px solid #ccc; position: relative;}
#menu_m > ul > li > a:after{position: absolute;right: .938rem; width: 1.3rem; height: 0.630rem; background: url('https://www.sujinpet.co.kr/front/_customskin/_skintpl/sedefault_responsive/common/images/renew/common/arrow.png') center center no-repeat; background-size: 100%; content: ''; top:50%; transform:translateY(-50%)}
#menu_m .depth,#menu_m .category{display: none;}
#menu_m .depth > li > a{padding:10px 2rem; font-weight: 700; border-bottom: 1px solid #ccc; position: relative;}
#menu_m .depth > li.arrow > a:after{position: absolute;right: .938rem; width: 1.3rem; height: 0.630rem; background: url('https://www.sujinpet.co.kr/front/_customskin/_skintpl/sedefault_responsive/common/images/renew/common/arrow.png') center center no-repeat; background-size: 100%; content: ''; top:50%; transform:translateY(-50%)}
#menu_m .category{background: #f1f1f1;}
#menu_m .category > li > a{padding:10px 3rem; font-weight: 700; position: relative; border-top: 1px solid #ccc;}
#menu_m .category > li:first-child > a{border-top: 0;}
#menu_m .category .in{display: none;}
#btn-close_m{display: block; position:absolute;top:20px;right:20px;width:1.3em; z-index: 99999;}
#btn-close_m img{display: block;}
#menu_m > ul > li > a.on:after,#menu_m .depth > li > a.on:after{background-image: url('https://www.sujinpet.co.kr/front/_customskin/_skintpl/sedefault_responsive/common/images/renew/common/arrow_on.png')}

#btn-sch_m, #btn-menu_m,#etc_m{display: none;}


#sch_m{position: absolute; left: 0;top:85px;width: 100%;     z-index: 99999; display: none;}
#sch_m.is-fixed {position: fixed; top:85px;}
#sch_m .in{position: relative; z-index: 3; background: #fff;padding: 0 .938rem 1.8em .938rem;}
#sch_m .in input[type="text"]{border:0; background: none; width: 100%; height: 3em; padding: 0 3.5em 0 10px; border-bottom: 1px solid #ccc;}
#sch_m .sch{position: absolute;right: 0;top:0;width: 3.5em; height: 3em; white-space: nowrap; overflow: hidden;text-indent: -999px; background: url('../images/renew/common/btn-sch_m.gif') center center no-repeat; border:0; background-size: 1.5em}
.close_sch_m{height: 2.692em;width: 2.692em;border-radius:50%;background: #fff url('../images/renew/common/btn-close.png') center 55% no-repeat;display: block;white-space: nowrap;overflow: hidden;text-indent: -999px;background-size:1rem;position: absolute;left: 50%;bottom:-1.15em;margin-left: -1.347em;}

.sch_bg{    background: rgba(0,0,0,.7);
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: auto;
    left: 0;
    top: 0}

.member_m{font-size: 1rem; text-align: center; padding:1.5em 1em 0}
.member_m ul{margin-left: -3%;}
.member_m li{float: left; width: 47%; margin-left: 3%; border-radius: 3px; border:1px solid #000; color: #000}
.member_m a{line-height: 3em; display: block;}
.member_m li:first-child{background: #000; color: #fff}

.tab_cont_w .tab_cont img{height: auto !important}

.bg-green_r{border:1px solid #009999; font-weight: 700; color: #009999}
.color-green{color: #009999; font-weight: 700;}

.pop_bg{    background: rgba(0,0,0,.5);
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0; overflow-y: auto; font-size: 0;}
.pop_bg img{display: block;margin: 0 auto;}
.pop-main{margin: 0 auto; display: inline-block; position: relative; left: 50%; top:50%; transform: translate(-50%,-50%); max-width: 98%;}
.pop_dragdrop {font-size:0; line-height: 0; padding:0;}
.pop-btns{height: 65px; line-height: 65px; font-size: 1rem; background: #ececec; font-weight: 700; color: #333; border-radius: 0 0 20px 20px; display: flex; padding:0 20px;}
.pop-btns a{float: left; width: 50%;}
.pop-btns a:first-child{border-right: 1px solid #ccc;}
.pop-btns .btn_frontpopupclose {flex: 0 0 80%; text-align: left; position: relative;}
.pop-btns .btn_frontpopupclose_close {display: block; width:100%; text-align: center; padding-left:20px;}
.pop-btns .btn_frontpopupclose::after {content: ''; width:1px; height:26px; background:#cacaca; position: absolute; right:0; top:50%; transform: translate(0, -50%);}
.pop-btns .btn_frontpopupclose::before {content:url('../images/renew/common/popup_check.png'); padding: 9px 10px 0 0; display: inline-block; vertical-align: top;} 
.pop-review_write .form > li.noti_txt {border:none;}
.pop-review_write .form > li.noti_txt span {color:#7aae00; font-weight: bold;}

#igear_ovlwhitespace .p_cloase {right:20px; }

.transition{
  -webkit-transition: all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out
    -o-transition:all 0.3s ease-in-out;
    transition::all 0.3s ease-in-out;
}
div.poplayout > div.message {
    text-align: left;
    font-size: 1em;
    color: #111;
    line-height: 1.62em;
/*    margin-bottom: 1.111em;*/
    font-weight: 500;
    position: relative;
}
.bbs2 >  table {border-top: 3px solid #232323;}
.bbs2 >  table  th {border-bottom: 1px solid #000; color: #000;  padding: 10px 5px;}
.order_detail div.viewctrldiv div.is_send_div div ul li.subject {width:auto;}
#orderlist_table .basic_btn:hover {background:#990017; color:#fff !important; text-decoration: none;}

#main_quick {position:fixed; bottom:90px; right:10px; width:70px; z-index: 999;}
#main_quick .inner {padding:0; display: flex; flex-direction: column; gap:10px;}
#main_quick .inner > ul {border:1px solid #e4e4e4; border-radius: 10px; text-align: center; font-size:14px; font-weight: 300; color:#000; width:100%; background:#fff;}
#main_quick .cart b {display: block; font-weight: 300;}
#main_quick .cart li {padding:10px 0;}
#main_quick .view {height:214px; overflow: hidden;}
#main_quick .view b {display: block; font-weight: 600; margin:8px 0; }
#main_quick .view ul {height:200px; overflow: hidden;}
#main_quick .view ul li {line-height: 20px; padding:0 4px;}
#main_quick .view ul li > div {border:1px solid #efefef; border-radius: 5px;}
#main_quick .view ul li:first-child {padding-bottom:5px;}
#main_quick .view .spot_right_product_today_div ul {display: flex; flex-direction: column; gap:5px;}
#main_quick .gototop {}
#main_quick .gototop a {display: block; width:40px; height:40px; border-radius: 100%; background:#f04768; margin:0 auto; text-align: center; color:#fff; font-size:22px; line-height: 35px;}

/* header */
#header_new {position: relative;z-index: 150;}
#header_new .header_top {position: relative; border-bottom:1px solid #e4e4e4;}
#header_new .header_top .inner {position: relative; display: flex; justify-content:space-between; align-items: center; height:58px;}
#header_new .header_top ul {display: flex; justify-content: flex-end; flex:1 1 30%;}
#header_new .header_top ul > li {display: flex; }
#header_new .header_top ul > li a {color:#000000; font-weight: 300;}
#header_new .header_top ul > li a:hover {color:#c61747; }
#header_new .header_top ul > li a::before {content: '★'; color:#ffa500; display: inline-block; marign-right:5px;}
#header_new .header_top ul > li a::after {content: ''; display: inline-block; width:1px; height:9px; background:#e0e0e0; vertical-align: middle; margin:0 12px;}
#header_new .header_top ul > li:last-child a::after {display: none;}

#header_new .header_mid {border-bottom:1px solid #e4e4e4; background: #fff; width:100%;}
#header_new .header_mid .inner {display: flex; justify-content: space-between; align-items: center; height:125px;}
#header_new .logo_wrap {display: flex; gap:75px;}

#header_new .header_bt {flex:1 1 70%; text-align: left; position: relative; z-index: 0; background:#fff;}
#header_new .header_bt .inner {position: relative;}
#header_new  span.notice_tit {width:70px; font-weight: 600; color:#000; font-size:18px !important;}
#header_new .header_bt a {display: flex; justify-content: center; color:#000; font-size:1.125em;}
#header_new .header_bt a span {font-size:0.88em;}

#header_new #bn__toplogo{}
#header_new #bn__toplogo img{display: block;}
#header_new .etc {position: relative; display: flex; justify-content: center; align-items: center;}
#header_new .etc > *{display: inline-block; vertical-align: middle;}
#header_new .gnb_new{ display: inline-block; font-size: 0.875em; color: #000; font-weight: 300;}
#header_new .gnb_new > ul {display: flex; gap:19px;}
#header_new .gnb_new > ul > li {position: relative; }
#header_new .gnb_new > ul > li a {display: flex; flex-direction: column; align-items: center; justify-content: center;}
#header_new .gnb_new > ul > li a:hover {color:#c61747; }
#header_new .gnb_new > ul > li a span {display: flex; align-items: center;  justify-content: center; height:36px;}
#header_new .etc .top_banner { position: relative; width:230px; display: flex; align-items: center; justify-content: flex-start; margin-right:30px;}
#header_new .etc .top_banner .slick-arrow {width:31px; height:31px; cursor: pointer;}
#header_new .etc .top_banner .indicaotr {position: absolute; right:0; top: 50%; transform: translate(0, -50%);}
#header_new .etc .top_banner .indicaotr .prevArrow {background:url('../images/renew/common/bn_top_menu_prev.jpg') center no-repeat; }
#header_new .etc .top_banner .indicaotr .nextArrow {background:url('../images/renew/common/bn_top_menu_next.jpg') center no-repeat; width:31px; height:31px;}
#header_new .rangking {position: relative; width:290px; border-left:1px solid #e4e4e4; margin:21px 0 19px 20px; font-size:0.9em; font-weight: 400;}
#header_new .rangking:hover {color:#c61747;}
#header_new .rangking::after {content: url('../images/renew/common/rangkin_icon.png'); vertical-align: middle; margin-right:7px; position: absolute; right: 7px; top: 50%; transform: translate(0, -50%); display: none;}
#header_new .rangking > ul {background:#fff; width:280px; padding-left:22px;}
#header_new .rangking.acitve > ul {position: absolute; background:#fff;  -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1); -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1); box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);}

.search_wrap {display: none;}

.gnb_warp {position:relative; width:100%; display: block; font-size:1.25em; font-weight: 500; color:#000; background: #fff; z-index: 99;}
#top_nav.is-fixed .gnb_warp {}
.gnb_warp .inner {position:relative; width:100%; display: flex; flex-wrap: nowrap; justify-content: space-between;}
.gnb_warp .inner .gnb {position: relative; flex: 1 1 auto;}
.gnb_warp .inner .gnb > ul {display: flex; justify-content: space-between; } 
.gnb_warp .inner .gnb > ul > li {position:relative; display: inline-block;text-align: center;}
.gnb_warp .inner .gnb > ul > li a {display: block; padding:21px 0 19px 0; }
.gnb_warp .inner .gnb > ul > li:first-child {border-right:1px solid #dcdcdc;}
.gnb_warp .inner .gnb > ul.banking {position: absolute; right:0; flex-direction: column; font-size:12px;}
.gnb_warp .inner .gnb .all_view {cursor: pointer; background:#f04768; color:#fff; padding:21px  25px 19px 25px; height:100%; display: flex;align-items: center; justify-content: center; gap:5px; width: 285px;}
.gnb_warp .inner .gnb .sub_menu_wrap {z-index: 999; position: absolute; top:70px; left:0px; display: none; overflow: visible !important; }
.gnb_warp .inner .gnb .sub_menu {display: flex;}
.gnb_warp .inner .gnb .sub_menu > .all_view {margin-bottom:20px; left: -17px; position: relative;}
.gnb_warp .inner .gnb .sub_menu ul > li {text-align: left;}
.gnb_warp .inner .gnb .sub_menu ul > li a {position: relative; display: block; padding:8px 25px; font-size:16px; font-weight: 400; }
.gnb_warp .inner .gnb .sub_menu ul > li > ul {margin:10px 0;}
.gnb_warp .inner .gnb .sub_menu ul > li > ul > li {font-size:14px; padding:0 0 0 10px; line-height: 26px;}
.gnb_warp .inner .gnb .sub_menu .sc_container {width: 274px; height:71vh;}
.gnb_warp .inner .gnb .sub_menu .dept_1 { background-color: #fff;padding:0 5px; border: 1px solid #E73826;}
.gnb_warp .inner .gnb .sub_menu .dept_2 { background-color: #fff; border: 1px solid #E73826; padding:0 5px; flex:1 1 265px; position: relative; left:-1px;}
/*.gnb_warp .inner .gnb .sub_menu .dept_2 li:hover {background:#ededed;}*/
.gnb_warp .inner .gnb .sub_menu .dept_3 {flex:0 0 255px; background-color: #fff; border: 1px solid #E73826; padding:0 5px; position: relative; left:-2px;}
/*.gnb_warp .inner .gnb .sub_menu .dept_3 li:hover {background:#ededed;}*/

.gnb_warp .inner .gnb_right {position: relative; top:-2px;}
.gnb_warp .inner .gnb_right ul li {position: relative; display: inline-block; margin:0 10px; vertical-align: middle;}
.gnb_warp .inner .gnb_right ul li a {position: relative;}
.gnb_warp .inner .gnb_right ul li:first-child {margin:11px 0 0 0; padding-right:15px;}
.gnb_warp .inner .gnb_right ul li:nth-child(2) {margin:11px 0 0 8px; padding-right:15px;}
.gnb_warp .inner .gnb_right ul li:last-child {margin:0 0 0 8px;}
.gnb_warp .inner .gnb_right span {position: absolute; top: -10px; right:-19px; display: inline-block;  width:22px; height:22px; border-radius: 100%; font-size:14px; font-weight: 500; text-align: center; color:#fff; background:#db082f; }
/* header fix */
.gnb_warp.active {position: fixed; left:0; top:10px; background:#fff; padding:35px 0 20px 0; z-index:999; }
/*.gnb_warp.active .inner .gnb ul li span.tool {display: none;}*/
.gnb_warp .inner li.active a {color:#c61747;}
.gnb_warp .inner .gnb li.active a::before {content: ''; display: inline-block; width: 100%; height: 5px; background: #c61747; position: absolute; bottom: -26px; left: 0;}
.gnb_warp .inner .gnb_right li.active a::before {content: ''; display: inline-block; width: 100%; height: 5px; background: #c61747; position: absolute; bottom: -26px; left: 0;}
.topbg.active {position: fixed; height:50px; display: block; left:0; top:0px; z-index:999; }

/* 인터넷뱅킹 GO */
.banking_go {padding: 21px 0 19px 0;} 
.banking_go:hover {color:#c61747; cursor: pointer;}
.banking_list {position: absolute; right: -10px; bottom: -320px; display: flex; flex-direction: column; background:#fff; -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2); visibility: hidden; opacity: 0; border-radius: 10px;}
.banking_list.view {visibility: visible; opacity: 1;}
.gnb_warp .inner .gnb > ul.banking_list > li.tit {text-align: center; padding:20px;border-bottom:1px solid #e4e4e4; font-size:20px; font-weight: 600; color:#000;}
.gnb_warp .inner .gnb > ul.banking_list > li {margin:0; font-size:16px;}
.gnb_warp .inner .gnb > ul.banking_list > li a {padding:10px 15px; font-weight: 400; }
.gnb_warp .inner .gnb > ul.banking_list > li a:hover {font-weight: 400 !important;}
.gnb_warp .inner .gnb > ul.banking_list > li a::before {content: ''; display: inline-block; vertical-align: middle; width:20px; height:20px; margin-right:8px;}
.gnb_warp .inner .gnb > ul.banking_list > li:nth-child(2) a::before {background:url(../images/renew/common/icon_banking01.png) no-repeat; background-size:contain;}
.gnb_warp .inner .gnb > ul.banking_list > li:nth-child(3) a::before {background:url(../images/renew/common/icon_banking02.png) no-repeat; background-size:contain;}
.gnb_warp .inner .gnb > ul.banking_list > li:nth-child(4) a::before {background:url(../images/renew/common/icon_banking03.png) no-repeat; background-size:contain;}
.gnb_warp .inner .gnb > ul.banking_list > li:nth-child(5) a::before {background:url(../images/renew/common/icon_banking04.png) no-repeat; background-size:contain;}
.gnb_warp .inner .gnb > ul.banking_list > li:nth-child(6) a::before {background:url(../images/renew/common/icon_banking05.png) no-repeat; background-size:contain;}
.gnb_warp .inner .gnb > ul.banking_list > li:nth-child(7) a::before {background:url(../images/renew/common/icon_banking06.png) no-repeat; background-size:contain;}

#top_nav .gnb .all_view  a:hover{color:#db082f; font-weight: 600;}
#top_nav .gnb .sub_menu .dept_2 a:hover{color:#000; font-weight: 600;}
#top_nav .gnb .sub_menu li.active2 a, 
#top_nav .gnb .sub_menu li.active2 a:hover{color:#db082f; font-weight: 600;}
/*#top_nav .gnb .sub_menu li.active2 a::after {content: ''; display: inline-block; width:8px; height:13px; background:url(../images/renew/common/gnb_icon_arrow.png) no-repeat; position: absolute; top:50%;  right:10px; transform: translate(0, -50%); opacity: 0;transition: all ease-in-out .3s; }
#top_nav .gnb .sub_menu li.active2 a::after,
#top_nav .gnb .sub_menu li.active2 a:hover::after {opacity: 1; right:20px;}*/

/*모바일에서 전체보기 */
.gnb_warp .m_top{position: relative; width:100%; padding:20px;}
.gnb_warp .m_top h3{font-size:20px; font-weight: 600; color:#000; margin-bottom:10px;}
.gnb_warp .m_top ul{display: flex; flex-wrap: nowrap; width:100%; border-radius:3px; padding:12px 0; background:#fff;}
.gnb_warp .m_top ul > li {width:25%; flex:1; text-align: center;font-size:14px; text-align: center;}
.gnb_warp .m_top ul > li:nth-child(2), .gnb_warp .m_top ul > li:nth-child(3) , .gnb_warp .m_top ul > li:nth-child(4) {border-left:1px solid #e2e2e2; }
.gnb_warp .m_body{border-top:20px solid #f4f4f4; border-bottom:20px solid #f4f4f4;}
.gnb_warp .m_body h3{font-size:16px; font-weight: 600; color:#000; padding:15px 20px;}
.gnb_warp .m_body ul {display: flex; flex-wrap: wrap; width:100%; border-top:1px solid #eeeeee;}
.gnb_warp .m_body ul li {width:50%; border-right:1px solid #eeeeee; border-bottom:1px solid #eeeeee;}
.gnb_warp .m_body ul li:nth-child(2n) {border-right:none;}
.gnb_warp .m_body ul li a {display: block; padding:10px 0px 10px 25px;font-size:14px;}
.gnb_warp .m_fot{position: relative; width:100%; padding:20px; font-weight: 400;}
.gnb_warp .m_fot ul {display: flex; width:100%; flex-wrap: wrap; gap: 20px 0;}
.gnb_warp .m_fot ul > li{flex: 0 0 25%; text-align: center;}
.gnb_warp .m_fot ul > li a {color:#000; border-right:1px solid #e2e2e2;font-size:0.54em;}
.gnb_warp .m_fot ul > li:last-child a {border:0;}
.gnb_warp .m_fot div.txt {width:100%; text-align: center; font-size:14px; color:#888888; line-height:24px; margin-top:20px;}

/* 모바일 메뉴 */
.gnb_wrap_m {display: none; background: #f3f3f3; font-size:16px;}
.gnb_wrap_m a {display: block;}
.gnb_wrap_m .mg_top {display: block; width:100%; position: relative; background:#aa3253; padding:30px 20px 20px 20px;}
.gnb_wrap_m .mg_top .m_close {position: absolute; right:15px; top:30px; width:27px; }
.gnb_wrap_m .mg_top h1 img {width:100px;}
.gnb_wrap_m .mg_top > .m_login {display: block; padding-top:30px;}
.gnb_wrap_m .mg_top > .m_login a {color:#fff; font-size:14px; font-weight: 400;}
.gnb_wrap_m .mg_top > .m_login a::after {content:''; display: inline-block; width:10px; height:14px; background:url('https://www.sujinpet.co.kr/front/_customskin/_skintpl/sedefault_responsive/common/images/renew/common/m_login_arrw.png') left no-repeat; vertical-align: middle;    margin-left: 10px; background-size: cover;} 

.mgnb {display: flex;}
.gnb_warp .m_body ul > li {display: flex;}
.gnb_warp .m_body ul > li:last-child {border-bottom:none;}

.gnb_wrap_m .mg_icon {display: block; width:100%; position: relative; margin-bottom:15px; background:#fff; padding:15px;}
.gnb_wrap_m .mg_icon > ul {display: flex; width:100%; flex-wrap: nowrap; gap: 0 20px;}
.gnb_wrap_m .mg_icon > ul > li {display: inline-block; flex:1 1 25%; text-align: center; border:1px solid #efefef; border-radius: 20px;}
.gnb_wrap_m .mg_icon > ul > li a { padding:20px; font-size:14px;}
.gnb_wrap_m .mg_icon img {display: block; margin:0 auto 10px auto;}

.gnb_wrap_m .mg_menu {display: block; width:100%; position: relative; margin-bottom:15px; background:#fff; padding:15px; }
.gnb_wrap_m .mg_menu > ul {}
.gnb_wrap_m .mg_menu > ul > li {position: relative;font-size:16px; font-weight: 800; border-bottom:1px solid #f3f3f3; padding:0 15px;}
.gnb_wrap_m .mg_menu > ul > li > a {padding:15px 0;}
.gnb_wrap_m .mg_menu > ul > li:last-child {border-bottom:none;}
.gnb_wrap_m .mg_menu > ul > li span.tool {border: 2px dotted #7c7c7c; text-align: center; padding: 4px 8px; font-size: 12px; border-radius: 5px; word-break: keep-all; font-weight: 400; margin-left:10px;} 
.gnb_wrap_m .mg_menu > ul > li.event_m {padding:0 15px; color:#c71748;}
.gnb_wrap_m .mg_menu > ul > li.event_m > ul {padding:0 20px; font-size:14px; margin-top:5px;}
.gnb_wrap_m .mg_menu > ul > li.event_m > ul > li a {padding:5px 0;font-weight: 500; color:#595959; }

.gnb_wrap_m .mg_bot {display: block; position: relative; width:100%; background:#fff; padding:15px; }
.gnb_wrap_m .mg_bot > ul {display: flex; flex-wrap: wrap; width: 100%; gap:10px;}
.gnb_wrap_m .mg_bot > ul > li {flex:1 1 48%; background:#f7f7f7; padding:15px;}
.gnb_wrap_m .mg_bot > ul > li span {display:inline-block; width:calc(100% - 70px); margin-left:10px;}
.gnb_wrap_m .mg_bot > ul > li a > * {vertical-align: middle;}

/* sub _warp */
.sub_top h2.tit-st1 {width: 100% !important; font-weight: 700; font-family: 'SCDream'; color: #000; text-align: center; padding:0; margin: 27px 0;}
.sub_top div.tabs_st1_w {text-align: left;}

.custo{position: relative; width:100%; display: block; margin-top:28px; color:#000;}
.custo .ti {display: block; font-size:18px; font-weight: 500;}
.custo .txt {display: block; font-size:26px; font-weight: 700; margin:5px 0 15px 0;}
.custo ul li {display: block; color:#999999; font-size:14px; line-height: 22px;}

.spot_right_product_today_div {}
/*.spot_right_product_today_div li {margin:10px 0; border-bottom:1px solid #e3e3e3}*/
.spot_right_product_today_div  a {display: block; font-weight: 300; font-size:12px; line-height:15px;}
/*.spot_right_product_today_div  img {border:1px solid #ddd;}*/

/* footer */
#footer_top {background:#121212; color: #999999; padding:23px 0;}
#footer_top ul {display: flex; }
#footer_top ul > li::after {content: ''; display: inline-block; width:1px; height:14px; background:#3f3f3f; vertical-align: middle;}
#footer_top ul > li:last-child::after {display: none}
#footer_top ul > li a {padding:0 17px;}

#footer_new {background:#1d1e1f; color: #999999; padding:70px 0 110px 0;}
#footer_new .inner {display: flex; justify-content: space-between; width:100%;}
#footer_new .copyright {}
#footer_new .copyright .b_info {line-height: 26px; margin-bottom:50px; word-break: keep-all;}
#footer_new .copyright .mid {color:#fff; font-weight: 700; margin-bottom:50px;}
#footer_new .copyright .bt p  {font-size:0.875em; line-height: 22px; margin-bottom:60px;}
#footer_new .area_right {display: flex; gap:200px;}
#footer_new .area_right .tel_wrap {color:#fff; font-weight: 700;}
#footer_new .area_right .tel_wrap span {font-size:1.625em; line-height: 33px; display: block; margin-bottom:30px;}
#footer_new .area_right .time {color:#999999; font-weight: 400; line-height: 26px;}
#footer_new .money_wrap .tit {color:#fff; font-weight: 700; margin-bottom:6px;}
#footer_new .money_wrap .top {line-height: 25px;}
#footer_new .money_wrap span {display: block; font-weight: 800; color:#fff; margin-top:10px;}
#footer_new .money_wrap select {color:#000; font-weight: 700; padding:10px 30px 9px 11px; width:250px; margin-top:40px; background:url(../images/renew/common/select_arrow.png) calc(100% - 17px) 50% no-repeat #fff;}
#footer_new .money_wrap .mark ul {display: flex; gap:19px; margin-top:40px;}
  
.sc_container {
    overflow: auto;
}
.sc_container::-webkit-scrollbar {
    width: 5px;
}
.sc_container::-webkit-scrollbar-thumb {
    background-color: #dadada;
    border-radius: 10px;
    background-clip: padding-box;
/*    border: 2px solid transparent;*/
}
.sc_container::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 10px;
/*box-shadow: inset 0px 0px 5px white;*/
}

input[type="checkbox"].renew {
    display:none;
}

input[type="checkbox"].renew + label {
    color:#000;
	font-size:20px;
	cursor: pointer;
}

input[type="checkbox"].renew + label span {
    display:inline-block;
    width:26px;
    height:26px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url('../images/renew/common/icon_select.png') no-repeat;
    cursor:pointer;    vertical-align: text-top;
}

input[type="checkbox"].renew:checked + label span {
    background:url('../images/renew/common/icon_select_on.png') no-repeat;
}

input[type="radio"].renew {
    display:none;
}

input[type="radio"].renew + label {
    color:#000;
	cursor: pointer;
	font-size:16px;
}

input[type="radio"].renew + label span {
    display:inline-block;
    width:26px;
    height:26px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url('https://www.sujinpet.co.kr/front/_customskin/_skintpl/sedefault_responsive/common/images/renew/common/icon_radio.png')  no-repeat;
    cursor:pointer;
}

input[type="radio"].renew:checked + label span {
    background:url('https://www.sujinpet.co.kr/front/_customskin/_skintpl/sedefault_responsive/common/images/renew/common/icon_radio_on.png') no-repeat;
}


#_swordsdiv {width:522px !important; left:0 !important; top:52px !important;}

.main_nodata {min-height: 250px; display: flex; justify-content: center; align-items: center;}

.m_footer {display: none;}

/* check box */
input.dccnp_checkBox{display:none;}
input.dccnp_checkBox + label{cursor:pointer;}
input.dccnp_checkBox + label > span{vertical-align: middle; padding-left: 5px; color:#666666;}
/* label:before에 체크하기 전 상태 CSS */
input.dccnp_checkBox + label:before{content:""; display:inline-block; width:21px; height:21px; border:1px solid #dddddd; border-radius: 4px; vertical-align:middle;}  
/* label:before에 체크 된 상태 CSS */  
input.dccnp_checkBox:checked + label:before{content:""; background:url('https://www.sujinpet.co.kr/front/_customskin/_skintpl/sedefault_responsive/common/images/renew/common/icon_check.png') center #0073b8 no-repeat; border:1px solid #0073b8;  }

/* radio box */
input.dccnp_radioBox{display:none;}
input.dccnp_radioBox + label{cursor:pointer;}
input.dccnp_radioBox + label > span{vertical-align: middle; padding-left: 5px; color:#666666;}
/* label:before에 체크하기 전 상태 CSS */
input.dccnp_radioBox + label:before{content:""; display:inline-block; width:23px; height:23px; background:#d7d7d7; border-radius: 50%; vertical-align:middle;}  
/* label:before에 체크 된 상태 CSS */  
input.dccnp_radioBox:checked + label:before{content:""; background:url('https://www.sujinpet.co.kr/front/_customskin/_skintpl/sedefault_responsive/common/images/renew/common/icon_check.png') center #232323 no-repeat; background-size: 50%; }

/* 파일 첨부 */
.filebox input[type="file"] {position: absolute;width: 1px;	height: 1px;padding: 0;	margin: -1px;overflow: hidden;clip:rect(0,0,0,0);border: 0;}
.filebox label {display: inline-block;padding: 0 1em; width:147px; height:70px; text-align: center; line-height:70px; color: #fff;font-size: inherit;vertical-align: middle;cursor: pointer;background:#232323; border-radius:10px;}
/* named upload */
.filebox .upload-name {display: inline-block; padding: .5em .75em;font-size: inherit;font-family: inherit;line-height: normal;vertical-align: middle;background-color: #f5f5f5; border: 1px solid #e4e4e4; border-radius: 10px; height:70px; line-height: 70px; width: calc(100% - 158px); margin-left: 7px;-webkit-appearance: none; -moz-appearance: none; appearance: none;}
.filebox.bs3-primary label {color: #fff;background-color:#000;}

@media (max-width:1545px){
    
    .gnb_warp .inner .gnb > ul > li {margin-right:10px;}
    
}
@media (max-width:1440px){
    
    #header_new .header_top .inner {flex-direction: column; align-items: flex-end; height: auto;}
    #header_new .header_bt {padding:15px 0;}
    #header_new .header_top ul {flex:1 1 100%;}
    
    .gnb_warp {overflow-x: scroll; overflow-y: visible;}
    .gnb_warp .inner {min-width: 1640px;}   
    
}
@media (max-width:1280px){
	.over-pc {display: none !important;}
	
	/*	header */
	.gnb_warp.active {padding:0 15px ;}
	.gnb_warp .inner .gnb ul li {margin-right:22px;}
	.gnb_warp .inner .gnb_right ul li {margin-right:18px;}
	.gnb_warp .inner .gnb_right ul li:nth-child(3) {padding-right: 15px; }
	.gnb_warp .inner .gnb_right ul li:nth-child(3)::after {left:20%;}
}
@media (max-width:1062px){
	.gnb_warp .inner .gnb_right ul li {margin-right:9px;}
}
@media (min-width:1025px){
	
	.only-m {display:none;}
	.only-pc {display:block;}
	.viewall {display:none;}
}

@media (max-width:1024px){
	.only-m {display:block;}
	.only-pc {display:none !important;}	
	.inner {padding:0 15px;}
	#container_all {overflow-x:hidden;}
    html{font-size:14px; }
    

	/*	header */
    
    #btn-sch_m {display: block;}
    
	.header_top {align-items: center; padding:0;}
	.top_banner, header .top_menu {display: none;}
        
    #header_new .header_bt a {display: flex; justify-content: space-between; align-items: center;} 
    #header_new .header_bt a span {position: relative; right:0;}
    
    #header_new .header_mid .inner {height:85px;}
	
	#btn-menu_m {background:url(../images/renew/common/btn-menu_m.png) no-repeat 50% 50%; background-size:contain;}
    
    #header_new .rangking {display: none;}    
    .gnb_warp .inner .gnb ul li.banking_go {display: none; line-height: 37px;}
	 
	.search_wrap {width: 100vw; margin-left: calc(-50vw + 50%); display: block; border-bottom:1px solid #e1e1e1; padding:10px 0;}
	.search_wrap .search a {display: block;}
	.search_wrap .search a::before {content: ''; display: inline-block; background:url('https://www.sujinpet.co.kr/front/_customskin/_skintpl/sedefault_responsive/common/images/renew/common/icon_sewr01.png') center no-repeat; width:20px; height:28px; vertical-align: middle; margin-right:10px;}
	.search_wrap .search a::after {content: ''; display: inline-block; position: absolute; right:20px; top:7px; background:url('https://www.sujinpet.co.kr/front/_customskin/_skintpl/sedefault_responsive/common/images/renew/common/icon_sewr02.png') center no-repeat; width:21px; height:16px; vertical-align: middle; background-size:cover;}
	
    .topbg {background-color:#b8dde6; width:100%;}
	.topbg .btn_close {right:10px; top:20px;}
	.topbg .btn_close img {width:80%;}
/*	.topbg div.couponarea {padding:0 15px; text-align: left;}    */
    .topbg .btnarea {width:100%; right:0;}
    .topbg .btnarea .openbtn {left:50%; transform: translate(-50%, 0); width:30px; height:30px;}
    .topbg .btnarea .openbtn.on {top:14px;}
    .topbg .btnarea .closebtn { position: absolute; }
    .topbg .btnarea .closebtn.on {top: -2px; right:10px;}
    .topbg div.couponarea .close_top {width:15px; height:15px; top:15px; right:5px;}
    .topbg .prevArrow2 {left:20px;}
    .topbg .nextArrow2 {right:20px;}
    .topbg .slick-list {height:90px !important;}
    .topbg .slick-slide {height:90px;}
    .topbg .slick-slide img {height:90px !important;}
	
	.header_top .logo {left: auto; padding:20px 0; text-align: center;}
	.header_top .logo img {width:70%;}
	.header_top .m_my img {width:27px; margin-top:10px;}
	
	.gnb_warp {padding:0 0 0 0;}
    #top_nav.is-fixed {top: 86px;}
	#top_nav.is-fixed .gnb_warp {padding:0;}
	.gnb_warp .inner .gnb ul {text-align: left; padding:0 0 0 20px;}
	.gnb_warp .inner .gnb .all_view {background:none; padding:0;}
	.gnb_warp .inner .gnb_right {display: none;}
	.gnb_warp {overflow-x: scroll; margin:0;}
	.gnb_warp .inner {padding:0; display: block; width: 100%; min-width:970px; overflow: hidden;}
	.gnb_warp .inner .gnb ul li a {display: block; padding:5px 0 5px 0;}
/*	.gnb_warp .inner .gnb ul li span.tool {display: none;}*/
	/*header .gnb_warp .inner .gnb ul li span.lock {top:12px;}*/
	.gnb_warp .inner .gnb ul li:first-child {display: none;}
	.gnb_warp .inner .gnb li.active a::before {bottom:0;}
	.gnb_warp .inner .gnb > ul li span.tool {font-size:11px; padding:2px 4px; top: -3px; left: 9px; position: relative;}
	.gnb_warp .inner .gnb ul li {padding: 15px 0;}
	
	.gnb_warp.active {top:0 !important;}

	/* 모바일 GNB */
    .gnb_warp .m_top {background:#f3f3f3;}
	.gnb_wrap_m {display: block; position: fixed; top:0; left:-100%; width:100%; height:100%; z-index: 999; overflow: scroll; padding-bottom:110px;}
	.gnb_wrap_m.active {left:0;}	
	
    #menu_m {}
    #menu_m .gnb_warp .inner {min-width: auto; overflow: auto; flex-direction: column; align-items: flex-start; gap: 10px; height: auto;}
    #menu_m .gnb_warp  .gnb ul {display: flex; flex-direction: column;}
    
	/* footer */	
    #footer_new .inner {flex-direction: column; position: relative; padding-bottom:220px;}
    #footer_top ul > li a {padding:0 5px;}
    #footer_new .copyright .bt {position: absolute; bottom:0;}
    #footer_new .area_right {gap:0;}
    #footer_new .area_right > div {flex:0 0 50%;}
    #footer_new .area_right .tel_wrap span {font-size:1.425em;}
    #footer_new .money_wrap select {width:180px;}

    #main_quick {right:0;}
	#main_quick .cart,
	#main_quick .view {display: none;}
	
    #main_visual .inner {padding:0;}
    #main_visual .slick-slide {height:auto;}
    #main_visual .slick-slide div a {height:auto;}
    
	/* 모바일 하단 메뉴 */
	footer .fo_menu {width:100%; position: fixed; bottom:0; display: block; border-top:1px solid #e8e8e8; background:#fff; z-index: 1;}
	footer .fo_menu .inner {}
	footer .fo_menu .inner .f_menu > ul {display: flex; width:100%; flex-wrap: nowrap;}
	footer .fo_menu .inner .f_menu  > ul > li {display: inline-block; width: 25%; font-size:16px; text-align: center; padding:10px 0 ;}
	footer .fo_menu .inner .f_menu  > ul > li a {display: block; color:#1a1a1a;font-size:14px;}
	footer .fo_menu .inner .f_menu  > ul > li a:hover  {color:#c61747;}
	footer .fo_menu .inner .f_menu  > ul > li span {display: block; width:36px; height:35px; margin: 0 auto; background-size:85% !important;}
	footer .fo_menu .inner .f_menu  > ul > li:nth-child(1) a span {background:url('https://www.sujinpet.co.kr/front/_customskin/_skintpl/sedefault_responsive/common/images/renew/common/f_menu01.png') center no-repeat;}
	footer .fo_menu .inner .f_menu  > ul > li:nth-child(2) a span {background:url('https://www.sujinpet.co.kr/front/_customskin/_skintpl/sedefault_responsive/common/images/renew/common/f_menu02.png') center no-repeat;}
	footer .fo_menu .inner .f_menu  > ul > li:nth-child(3) a span {background:url('https://www.sujinpet.co.kr/front/_customskin/_skintpl/sedefault_responsive/common/images/renew/common/f_menu03.png') center no-repeat;}
	footer .fo_menu .inner .f_menu  > ul > li:nth-child(4) a span {background:url('https://www.sujinpet.co.kr/front/_customskin/_skintpl/sedefault_responsive/common/images/renew/common/f_menu04.png') center no-repeat;}
	footer .fo_menu .inner .f_menu  > ul > li:nth-child(1) a:hover span {background:url('https://www.sujinpet.co.kr/front/_customskin/_skintpl/sedefault_responsive/common/images/renew/common/f_menu01_ov.png') center no-repeat;}
	footer .fo_menu .inner .f_menu  > ul > li:nth-child(2) a:hover span {background:url('https://www.sujinpet.co.kr/front/_customskin/_skintpl/sedefault_responsive/common/images/renew/common/f_menu02_ov.png') center no-repeat;}
	footer .fo_menu .inner .f_menu  > ul > li:nth-child(3) a:hover span {background:url('https://www.sujinpet.co.kr/front/_customskin/_skintpl/sedefault_responsive/common/images/renew/common/f_menu03_ov.png') center no-repeat;}
	footer .fo_menu .inner .f_menu  > ul > li:nth-child(4) a:hover span {background:url('https://www.sujinpet.co.kr/front/_customskin/_skintpl/sedefault_responsive/common/images/renew/common/f_menu04_ov.png') center no-repeat;}
	
	footer .fo_top .inner .fsns > div > ul li:first-child {padding: 0 13px 0 15px;}
	
	footer .flo_warp {bottom:100px;}
	footer .flo_warp ul li {width:38px; height:38px;}
	footer .flo_warp ul li:nth-child(1) {background:url('https://www.sujinpet.co.kr/front/_customskin/_skintpl/sedefault_responsive/common/images/renew/common/flo_kakamo.png') center no-repeat; background-size: cover;}
	footer .flo_warp ul li:nth-child(2) {background:url('https://www.sujinpet.co.kr/front/_customskin/_skintpl/sedefault_responsive/common/images/renew/common/flo_topmo.png') center no-repeat; background-size: cover;}	
        
    .m_footer {display: block; position: fixed; bottom:0; left:0; width: 100%; background:#fff; z-index: 99; border-top:1px solid #e8e8e8;}
    .m_footer ul {display: flex; width:100%;}
    .m_footer ul li {flex:1 1 auto; width:25%}
    .m_footer ul li:nth-child(1) {background:url(../images/renew/common/fot_icon_home.png) center no-repeat; background-size:35%;}
    .m_footer ul li:nth-child(2) {background:url(../images/renew/common/fot_icon_menu.png) center no-repeat; background-size:35%;}
    .m_footer ul li:nth-child(3) {background:url(../images/renew/common/fot_icon_my.png) center no-repeat; background-size:35%;}
    .m_footer ul li:nth-child(4) {background:url(../images/renew/common/fot_icon_cart.png) center no-repeat; background-size:35%;}
    .m_footer ul li:nth-child(5) {background:url(../images/renew/common/fot_icon_his.png) center no-repeat; background-size:35%;}
    .m_footer a {display: block; width:100%; height:80px; }
	
	.sub_top h2.tit-st1 {font-size:35px;}
	
	.vat_board {display: block; width:100%;}
	
	/*	원격지원 */
	.rem_01 {width:100%;height:auto; background-size: cover;}
	.rem_01 .txt_wrap ul {width:100%; flex-direction: column;}
	.rem_01 .txt_wrap ul > li {width:100%; border-radius: 10px; margin-bottom:10px;}
	.rem_01 .txt_wrap ul > li > .cont {position: relative; width:100%; top:auto; left:auto; transform: none; text-align: left; padding:10px 15px; font-size:20px;}
	.rem_01 .txt_wrap ul > li > .cont p {position: absolute; right:20px; bottom:23px; font-size:14px;}
	.rem_01 .txt_wrap ul > li::after {display: none;}
	.rem_02 {flex-direction: column; margin-top:20px;}	
	.rem_02 .rem_l {width:100%; padding:0 0 10px 0; border-right:none; border-bottom:1px solid #eeeeee}
	.rem_02 .rem_r {width:100%; padding:10px 0 0 0;}
	.rem_03 {flex-direction: column; margin-top:30px;}
	.rem_03 .list_wrap {margin-top:40px;}
	.rem_03 .txt_wrap p {margin-top:20px;}
	.rem_03 .img_wrap {text-align: right;}
    .rem_03 .list_wrap > div {margin-bottom:10px;}
    
    .tabs-st1 {display: flex !important;}
    .tabs-st1 > li > a {display: block; width:100%;}
    
    #menu_m .m_link ul > li {flex: 1 1 calc(35% - 8px);}
    
    input[type="checkbox"].renew + label {font-size:14px;}

}
@media screen and (max-width:768px) {
	
	/*	원격지원 */
	.rem_01 {padding:20px; }	
    .rem_01 .txt_wrap .txt {margin:15px 0;}
	
}

@media screen and (max-width:520px){
	
	footer .fo_bt .inner .num > ul li span {width:60px;}
	footer .fo_bt .inner .num > ul li {display: block;}
	footer .fo_bt .inner .num > ul li:last-child {padding-left:0;}
	
    #footer_new .copyright {padding:0;}
	footer .fo_bt .inner .rec > div {flex-wrap: wrap; flex-direction: column-reverse;}
    #footer_new .area_right .tel_wrap span {margin-bottom:14px;}
    #footer_new .area_right {flex-direction: column;}
    #footer_top ul > li a {padding:0 2px;}
	
	.gnb_wrap_m .mg_icon > ul {gap:0 5px;}
	.gnb_wrap_m .mg_icon > ul > li a {padding:8px;}
	
}
@media screen and (max-width:425px) {	
	
	footer .fo_top .inner .com_menu .fmenu li a {padding:15px 4px;}
	
	/*	원격지원 */
	.rem_01 .txt_wrap .tit b {display: block;}
	.rem_02 .rem_l a {width: 96px;}
	.rem_02 .rem_l img {margin-left:5px;}

}

@media screen and (max-width:375px) {
	html{font-size: 14px;}
	
	.gnb_wrap_m .mg_icon > ul {flex-wrap: wrap; gap: 10px;}
	.gnb_wrap_m .mg_icon > ul > li {flex: 1 1 45%;}	
	.gnb_wrap_m .mg_bot > ul > li a {text-align: center;}
	.gnb_wrap_m .mg_bot > ul > li span {display: block; width:100%; text-align: center; margin:0;}
	
/*	footer .fo_top .inner .fsns {top:180px;}*/
	footer .fo_top .inner .fsns > div > ul li {padding:0 3px;}
	footer .fo_top .inner .fsns > div > ul li:first-child {padding:0 3px 0 15px;}
	footer .fo_bt .inner > * {padding:30px 20px;}
	footer .fo_top .inner .com_menu .fmenu li a {padding:15px 2px;}
}

@media (max-width:320px){
	html{font-size: 13px;}
}