/* BASIC css start */
/*----------------------------------------------
메인 영역 CSS 시작 / 
----------------------------------------------*/

.main {padding-bottom:17px;}

.main_sc {width:100%;margin:0;overflow:hidden;position:relative;}

.main_sc .bx-wrapper {
    width:100%;
}

.main_sc .bxslider_sc {width:100%;margin:0;}
.main_sc .bxslider_sc li {margin:0;text-align:center;float:left;}
.main_sc .bxslider_sc li img {width:100%;height:auto;}
.main_sc .bx-controls {display:none;}


/* 롤링배너 */
.main #event .MS_img-wrap { position: relative; width: 100%; overflow: hidden; border-bottom:2px #ededeb solid;}
.main #event .event-imgs { position: relative; }
.main #event .MS_img-area {float:left;}
.main #event .MS_img-area:not(:first-child) {display:none;}
.main #event .MS_img-area img {width:100%;}
.main #event .pagination {display:none;}

/* 메인베너 */
.main_bnr_wrap {padding:7px 0 25px 0;}
.main_bnr_wrap li {}
.main_bnr_wrap li.fl {width:32.8125%;}
.main_bnr_wrap li.fr {width:34.375%;}
.main_bnr_wrap li a {}
.main_bnr_wrap li a img {width:100%;height:auto;}

/* 메인 상품 영역 */
.main .more {margin-top:0;}
.best_wrap {margin:23.4% 3.125% 18px 3.125%;border:1px #e3dac4 solid;padding:0 0 17px 0;}
.best_wrap h3 {background:url(/design/sunny6789/mobile/m_bg_main_title.gif) repeat-x left top;background-size:auto 24px;border-bottom:1px #e3dac4 solid;text-align:left;text-indent:3.125%;height:24px;line-height:24px;margin-bottom:12px;font-size:1em;color:#2f2d2a;}
.best_wrap h3 strong {color:#2f2d2a;}
.best_wrap.list_shopping3x ul {width:98%;margin:0 auto;}
.new_wrap {margin:0;}
.new_wrap h3 {border-top:1px #e5e5e5 solid;border-bottom:1px #e5e5e5 solid;background:#fafafa;color:#323232;text-align:left;text-indent:3.125%;height:24px;line-height:24px;margin:0 3.125% 12px 3.125%;font-size:1em;}
.new_wrap h3 strong {color:#323232;}
.new_wrap h3 span {color:#393939;font-size: .825em;display:inline-block;margin-left:1.35%;padding-left:0;text-indent:0;}
.new_wrap.list_shopping3x ul {width:96.5%;margin:0 auto;}

/*----------------------------------------------
메인 영역 CSS 끝 / 
----------------------------------------------*/

/* 버튼 관련 */
.btn_White {width:100%; height:35px; line-height:35px; background-color:#fff; text-align:center; display:block; border:1px solid #c6c6c6; box-sizing: border-box; vertical-align: middle;}
.btn_Black {width:100%; height:35px; line-height:35px; background-color:#393939; color:#fff; text-align:center; display:block; border:1px solid #393939; box-sizing: border-box; vertical-align: middle;}
.btn_Red {width:100%; height:40px; line-height:40px; background-color:#ab3e41; color:#fff; text-align:center; display:block; border:1px solid #ab3e41; box-sizing: border-box; vertical-align: middle;}
.btn_Grey {width:100%; height:35px; line-height:35px; background-color:#858585; color:#fff; text-align:center; display:block; border:1px solid #858585; box-sizing: border-box; vertical-align: middle;}
.fixButtonR {position:relative; padding-right:120px;}
.fixButton {width:115px; position:absolute; top:0; right:0;}
.more {text-align:center; width:100%; margin-top:12px;}
.more a {width:46.875%;margin:0 auto;display:inline-block;border:1px #c1df9f solid;height:38px;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#81c13d+0,70b328+100 */
background: #81c13d; /* Old browsers */
background: -moz-linear-gradient(top,  #81c13d 0%, #70b328 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #81c13d 0%,#70b328 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #81c13d 0%,#70b328 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#81c13d', endColorstr='#70b328',GradientType=0 ); /* IE6-9 */}
.more a button {background:url(/design/sunny8875/mobile/m_bg_btn_more.png) repeat left top;background-size:5px 10px;border:0 none;border-radius:0;color:#fff;font-family:'Roboto Slab', serif;display:inline-block;font-weight:400;height:36px;line-height:36px;font-size:1.45em;width:99.6%;margin:1px auto;box-shadow:inset 1px 1px #96c862;}
.btn_moreGray {}
.btn_moreGray span {}
.btn_moreGray span em {}
/* 버튼 관련 */


/* 상품진열 */
#contents .list_array {border-top:1px #ccc solid;border-bottom:1px #694f3d solid;padding:12px 3.125%;margin:0 0 10px 0;}
#contents .list_array:after {clear:both;content:"";display:block;}
#contents .list_array .list_arrayLeft {float:left;font-family: 'Noto Sans KR';color:#000;line-height:24px;width:50%;font-size:.95em;font-weight:700;}
#contents .list_array .list_arrayLeft select {width:79.5%; height:22px;border:1px #d3d3d3 solid;color:#2a2a2a;line-height:22px;}
#contents .list_array .list_arrayRight {float:right;line-height:24px;text-align:right;}
#contents .list_array .list_arrayRight img {margin-left:10px;}
#contents .shopbrand .list_array .list_arrayRight img {width:22px;height:auto;}
#contents .shopbrand {padding-bottom:20px;}
#contents .shopbrand .list_shopping3x,
#contents #search .list_shopping3x {width:96.5%;margin:0 auto;}

.list_shopping1x {text-align:center;}
.list_shopping1x ul {width:100%; display:table; table-layout: fixed; box-sizing: border-box; text-align:left; font-size:0;}
.list_shopping1x li {width:100%; display:inline-block; vertical-align: top; border-bottom:1px solid #ccc;}
.list_shopping1x li a {display: block; padding:12px 3.125%; position:relative; overflow:hidden; zoom:1;}
.list_shopping1x li:first-child {}
.list_shopping1x li:first-child a {padding-top:0;}
.list_shopping1x li img.listPic {width:50%; float:left;}
.list_shopping1x .list_shoppingInfo {width:46%; float:left; padding-left:4%; padding-top:9%; font-size:12px;}
.list_shopping2x {text-align:center;}
.list_shopping2x ul {width:100%; display:table; table-layout: fixed; box-sizing: border-box; padding:0 2px;  text-align:left; font-size:0;}
.list_shopping2x li {width:50%; display:inline-block; vertical-align: top; text-align:left;}
.list_shopping2x li.clear_l {clear:both;float:left;}
.list_shopping2x li a {display: block; padding:0 2px 18px 2px;}
.list_shopping2x li img.listPic {width:100%;}
.list_shopping2x .list_shoppingInfo {margin-top:10px; text-align:center; font-size:12px;}
.list_shopping3x {text-align:left;}
.list_shopping3x ul {width:100%; display:table; table-layout: fixed; box-sizing: border-box; padding:0; text-align:left; font-size:0;}
.list_shopping3x li {width:33.32%; margin:0 auto;padding-bottom:10px;display:inline-block; text-align:center; vertical-align: top;}
.list_shopping3x li.clear_l {}
.list_shopping3x li a {display: block; padding:0; margin:0 4%;width:92%; text-align:center;}
.list_shopping3x li img.listPic {width:100%;border:1px #e7e7e7 solid;height:auto;}
.list_shopping3x .list_shoppingInfo {margin-top:5px; text-align:left; font-size:12px;}
.listName {color:#6d6d6d; word-break: break-all;font-size:.875em;font-weight:normal;}
.listDiscount {color:#b5b5b5;font-weight:bold;font-size:.975em;}
.listPrice {color:#604737; margin:2px 0 4px 0;font-weight:bold;}
.listSoldout {color:#D22525; margin-bottom:4px;}
.listReplace {color:#1b1b1b; margin-bottom:4px;}
.listReview {color: #DB2E2E; margin-bottom:4px;}
.listReserve {color:#7d7d7d; font-size:0.875em;}
.listPoint {color:#7d7d7d; font-size:0.875em;}
.list_shopping3x .listReserve,
.list_shopping3x .listReview,
.list_shopping3x .listPoint {display:none;}
/* //상품진열 */

/* 로그인 */
.login .caution {margin-bottom:10px;}
.member {padding:0 15px; margin-top: 20px;}
.login #keyboard {text-align:center; margin:0 auto;}
.login #keyboard p {text-align:right; margin-bottom:12px;}
.login #keyboard img {display:none; width:100%;}
.login .loginInput {margin-top:18px;}
.login .loginInput input {width:100%; display:block; margin-bottom:10px;}
.login .loginCheck {margin-top:10px;}
.login .loginCheck label {margin-right:12px;}
.login .loginCheck label input {vertical-align: middle;}
.login .loginMiddle .btn_Red {font-size:1.167em; margin:10px 0;}
.login .loginMiddle .btn_White {font-size:1.167em;}
.login .loginBottom {background-color:#eaeaea; padding:18px 15px; margin-top:20px;}
.login .loginBottom h4 {background-color:#eaeaea; margin-bottom:5px; padding:0; font-weight:bold;}
.login .loginBottom a {font-size:1.167em;}
.login .loginBottom a.btn_Black {margin-top:16px;}
.login .loginBottom a.btn_Black:last-child {margin-top:10px;}
.login .loginBottom a.btn_White {margin-top:10px;}
.sns-login { position: relative; margin: 20px 10px 0; }
.sns-login .sns-title img { width:300px; }
.sns-login ul li { position: relative; margin-top: 10px; padding-left: 50px; height: 40px; line-height: 40px; border: 1px solid #dfdfdf; border-radius: 4px; list-style: none; }
.sns-login ul li a { display: block; padding-left: 20px; border-left: 1px solid #dfdfdf; color: #999; font-size: 1.25em; font-weight: bold; letter-spacing: -1px; }
.sns-login ul li span { position: absolute; top: 0; left: 0; width: 50px; height: 40px; }
.sns-login ul li.facebook span { background: url(/images/d3/m_01/icon/ico_sns_facebook.gif) no-repeat 50% 50%; background-size: 12px auto; }
.sns-login ul li.naver span { background: url(/images/d3/m_01/icon/ico_sns_naver.gif) no-repeat 50% 50%; background-size: 18px auto; }
.sns-login ul li.kakaotalk span { background: url(/images/d3/m_01/icon/ico_sns_kakaotalk.gif) no-repeat 50% 50%; background-size: 20px auto; }
/* //로그인 */

#check_auth {padding:15px 0;}
#check_auth .head {text-align:center; color:#f46b00; margin-bottom:10px;}
#check_auth .contents table {margin:0 auto;}
#check_auth .contents table td {padding:5px 0;}
#check_auth .contents table td input {width:100% !important; height:35px !important; margin-bottom:0 !important;}

/* 레이어팝업 */
.layer {width: 100%; min-height: 100%; z-index: 3; position: fixed; left: 0; top: 0; background:rgba(60,60,60,0.8);}
.layer .layer-pop {width:90%; background-color: #fff; position: relative; box-shadow: 0px 1px 10px #494949; margin:80px auto;}
.layer .layer-pop h3  {background-color: #efefef; height: 36px; line-height: 36px; font-weight: bold; padding: 0 10px; }
.layer .layer-pop .txt {max-height: 300px; overflow-y: auto; padding:10px;}
.layer .layer-pop .close {width:45px; height:36px; color:#fff; line-height: 42px; position:absolute; top:0; right:0;  background-color: #4f4f4f; text-align: center;}
body #comment_password {border-radius:0 !important; font-size:1em;}
body #comment_password .head {background-color: #efefef; height: 36px; line-height: 36px; font-weight: bold; text-align:left !important; padding: 0 10px;}
body #comment_password .head h5 {border-bottom:0px none !important; font-size:1em !important; padding:0 !important;}
body #comment_password .head a.close {width:45px; height:36px; color:#fff; line-height: 42px; top:0 !important; right:0 !important; text-align: center;}
body #comment_password .contents p {font-size:1em !important; font-weight:normal;}
body #comment_password .contents .form-wrap2 input {height: 35px;}
body #comment_password .contents .form-wrap2 p:last-child a {display:block; background-color: #393939; color:#fff; position:initial !important; padding:10px 0; margin-top: 10px;}
/* //레이어팝업 */

/* 팝업 */
.popup .pop h3  {background-color: #efefef; height: 36px; line-height: 36px; font-weight: bold; padding: 0 10px; }
.popup .pop .txt {padding:10px;}
.popup .pop .close {width:45px; height:36px; color:#fff; line-height: 42px; position:absolute; top:0; right:0;  background-color: #4f4f4f; text-align: center;}
#passimg {width: 90%; background-color: #fff; top:50%; left: 0; right: 0; margin: 0 auto; text-align: center; padding: 20px 0; box-shadow: 0 1px 10px #717171;}
#passimg .head {color:#f26c09;}
#passimg .btns {padding:0 10px; margin-top: 10px;}
#passimg .btns a {display:block; background-color: #393939; color:#fff; padding:10px 0;}
/* //팝업 */

@media screen and (max-width:319px) {
    .tabletOnly {display:none !important;}
}
@media screen and (min-width:320px) and (max-width:419px) {
    .tabletOnly {display:none !important;}
}
@media screen and (min-width:420px) and (max-width:767px) {
    .tabletOnly {display:none !important;}

    /* 상품진열 */
    .list_shopping1x li {width:50%;}
    .list_shopping1x li a {padding:4px;}
    .list_shopping1x li:first-child a {padding:4px;}
    .list_shopping1x li:nth-child(2) {border:0px none;}
    .list_shopping2x li {width:33.3%;}
    .list_shopping3x li {width:25%;}
    /* //상품진열 */
    
    /* 더보기 버튼 */
    .btn_moreGray {width:335px;}
    /* //더보기 버튼 */
    /* .layer .layer-pop .txt {max-height: 150px;} G패드에서 사이즈가 작게 나와서 제거함 */
    .layer .layer-pop {margin:20px auto;}
}
@media screen and (min-width:768px) {
    body {font-size:0.813em;}
    .mobileOnly {display:none !important;}

    /* 상품진열 */
    .list_shopping1x li {width:50%;}
    .list_shopping1x li a {padding:10px;}
    .list_shopping1x li:first-child a {padding:10px;}
    .list_shopping1x li:nth-child(2) {border:0px none;}
    .list_shopping2x ul {padding:0 5px;}
    .list_shopping2x li {width:33.3%;}
    .list_shopping2x li a {padding:5px;}
    .list_shopping3x ul {padding:0 5px;}
    .list_shopping3x li {width:25%;}
    .list_shopping3x li a {padding:5px;}
    /* //상품진열 */
    
    /* 더보기 버튼 */
    .btn_moreGray {width:335px;}
    /* //더보기 버튼 */
}


/* BASIC css end */

