@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);
@import url('https://fonts.googleapis.com/css?family=Playfair+Display');
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  src: local('Playfair Display'), local('PlayfairDisplay-italic'), url(/design/bigjoy/renewal2017/PlayfairDisplay-BoldItalic.ttf);
}
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
#m_preview_wrap {display:none;} /* ¹Ì¸®º¸±â ¼û±â±â */
.brand {color:#86001d;}
/* base */
html {overflow-x:hidden;}
* {-webkit-text-size-adjust:none;}
body { font-family:'Pretendard-Regular', 'NanumSquare', "¸¼Àº °íµñ", "µ¸¿ò", Arial,sans-serif; position:relative;font-size:0.75em;color:#000;-webkit-text-size-adjust:none; }
body,input,textarea,select,button,table{font-family:'Pretendard-Regular', 'NanumSquare', "¸¼Àº °íµñ", "µ¸¿ò", Arial,sans-serif; font-feature-settings: 'ss01', 'ss02', 'ss08';}
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select,figure{margin:0;padding:0}
h1, h2, h3, h4, h5, h6 {font-weight:normal;}
ul, ol, li {list-style:none;}
fieldset, img {border:none;}
hr, button img {display:none;}
form, fieldset, legend, label {margin:0; padding:0;}
fieldset{border:0 none;}
fieldset legend {position:absolute; visibility:hidden; overflow:hidden; width:0; height:0; margin:0; padding:0; font:0/0 Arial;}
em,address{font-style:normal;}
input,textarea,select,button,table{font-size:inherit;font-family:inherit;line-height:inherit;color:#3b3b3b; margin-top: 5px;}
label { cursor:pointer; }
table {border-collapse: collapse; border-spacing: 0; width:100%;}
/* //base */

/* cross */
* html input { margin:-1px 0; }
*:first-child+html input { margin:-1px 0; }
input.checkbox { width:13px; height:13px; margin-top:-4px; vertical-align:middle;}
/* //cross */

/* a-style */
a {color:#000; text-decoration:none;}
a:hover, a:active {text-decoration:none;}
/* //a-style */

/* °øÅë */
address, article, aside, figure, footer, header, hgroup, menu, nav, section {display:block;}
caption {font-size:0; height:0;}
input[type="text"], input[type="date"], input[type="tel"], input[type="number"], input[type="email"], input[type="password"], select {height:40px; border:1px solid #000; vertical-align: middle; padding-left:10px; box-sizing: border-box; -webkit-border-radius:0; border-radius: 0; width: 100%;}
input[type="radio"], input[type="checkbox"] {vertical-align: middle;}
textarea {border:1px solid #bbb; vertical-align: middle; box-sizing:border-box; background-color:#fff; padding:10px; -webkit-border-radius:0; border-radius:0;}
.clearFix {position:relative; overflow:hidden; zoom:1;}
.bold {font-weight:bold;}
.response100 {width:100%;}
.location {padding:0 10px; margin-bottom:8px;}
.h_title {border-top:1px solid #464646; border-bottom:1px solid #464646; padding:6px 10px;}
.h_title h3 {font-weight:bold;}
#mask {width:100%; height:100%; position:fixed; top:0; left:0; right:0; bottom:0; background-color:#000; z-index:1000; display:none; opacity:0.8;}
.none-data {text-align: center; margin: 20px 0;}
.none-data img {margin-bottom:10px;}
.pd10 {padding:0 10px;}
.fr {float:right !important;}
.fl {float:left !important;}
.txt-input1 {width:100% !important;}
.txt-input2 {width:46% !important;}
.txt-input3 {width:29% !important;}
.txt-input4 {width:20% !important;}
.txt-area1 {width:100% !important;}
.mt5 {margin-top:5px;}
.page_location {padding:5px 5px;}
.page_location li {float:left;}
.page_location li::after {content: ">"; margin: 0 7px;}
.page_location li:last-child::after {content: ""; margin:0;}
.h_layerTitle {height:35px; line-height:35px; background-color:#f2f2f2; padding:0 10px; margin-bottom:10px;}
.h_layerTitle h3 {font-weight:bold;}
.h_layerTitle .fa-times {float:right; margin-top: 5px;}
.MK-product-icons img {padding:0 2px;}
.MK_top_banner { background-color: #fe7b8b; text-align: center; vertical-align: middle; }
.MK_top_banner + ul { margin-top:5px; }
/* //°øÅë */

/* ÆäÀÌ¡ */
.paging {text-align:center; margin:26px 0;}
.paging a {width:30px; height:30px; line-height:30px; background-color:#fff; border:1px solid #ddd; display:inline-block; margin:0 2px;}
.paging a.now {background-color:#3b3b3b; color:#fff; border:1px solid #3b3b3b;}
/* //ÆäÀÌ¡ */

/* ÆùÆ® °ü·Ã */
.color_1984f1 {color:#1984f1 !important;} /* Blue */
.color_f1191f {color:#f1191f !important;} /* Red */
.color_a63f42 {color:#a63f42 !important;} /* DarkRed */
.bgc077fe2 {background-color:#077fe2; color:#fff; padding:2px 5px; margin-right: 5px;}
.bgc464644 {background-color:#464644; color:#fff; padding:2px 5px; margin-right: 5px;}
.caution {color:#f1191f; text-align:center; font-size:0.917em;}
.ico_new {color: #ffffff; background-color: #ff8400; font-weight:bold; padding:1px 5px;}
.ico_hit {color: #ffffff; background-color: #f1191f; font-weight:bold; padding:1px 5px;}
/* //ÆùÆ® °ü·Ã */

/* ¹öÆ° °ü·Ã */
.btn_White {width:100%; height:40px; line-height:40px; background-color:#fff; text-align:center; display:block; border:1px solid #000; box-sizing: border-box; vertical-align: middle; font-size:1.167em;}
.btn_Black {width:100%; height:40px; line-height:40px; background-color:#000; color:#fff; text-align:center; display:block; border:1px solid #000; box-sizing: border-box; vertical-align: middle; font-size:1.167em;}
.btn_Red {width:100%; height:40px; line-height:40px; background-color:#86001d; color:#fff; text-align:center; display:block; border:1px solid #ab3e41; box-sizing: border-box; vertical-align: middle; font-size:1.167em;}
.btn_Grey {width:100%; height:40px; line-height:40px; background-color:#858585; color:#fff; text-align:center; display:block; border:1px solid #858585; box-sizing: border-box; vertical-align: middle; font-size:1.167em;}
.fixButtonR {position:relative; padding-right:120px;}
.fixButton {width:115px; position:absolute; top:0; right:0;}
.more {box-sizing:border-box; text-align:center; width:100%; margin-top:30px;}
.btn_moreGray {height:35px; line-height: 35px; border:1px solid #000;; font-weight:300; display: block; margin: 0 auto; font-size: 14px;}
.btn_moreGray span {color:#333;}
.btn_moreGray span em {color:#f1191f;}
/* ¹öÆ° °ü·Ã */

/* »óÇ°Áø¿­ */
.list_array {height:52px; border-bottom:1px solid #4a4a4a; border-top:1px solid #c7c7c7; padding:0 8px; margin-bottom: 20px;}
.list_array .list_arrayLeft {float:left; margin-top:12px;}
.list_array .list_arrayLeft select {height:28px;}
.list_array .list_arrayRight {float:right; margin-top:12px;}
.list_array .list_arrayRight img {margin-left:10px;}
.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-top:1px solid #d9d9d9;}
.list_shopping1x li a {display: block; padding:18px 4px; position:relative; overflow:hidden; zoom:1;}
.list_shopping1x li:first-child {border:0px none;}
.list_shopping1x li:first-child a {padding:0 4px 18px 4px;}
.list_shopping1x li img.listPic {width:50%; float:left;}
.list_shopping1x .list_shoppingInfo {width:46%; float:left; padding-left:4%; font-size:12px;}
.list_shopping2x {text-align:center;}
.list_shopping2x ul {width:100%; display:table; table-layout: fixed; box-sizing: border-box; padding:0 15px;  text-align:left; font-size:0; font-weight:300;}
.list_shopping2x li {width:50%; display:inline-block; vertical-align: top; text-align:left; border-bottom:1px solid #ccc;}
.list_shopping2x li a {display: block; padding:18px 4px;}
.list_shopping2x li img.listPic {width:100%;}
.list_shopping2x .list_shoppingInfo {margin-top:10px; text-align:center; font-size:12px;}
.list_shopping3x {text-align:center;}
.list_shopping3x ul {width:100%; display:table; table-layout: fixed; box-sizing: border-box; padding:0 2px; text-align:left; font-size:0;}
.list_shopping3x li {width:33.33%; display:inline-block; vertical-align: top;}
.list_shopping3x li a {display: block; padding:2px;}
.list_shopping3x li img.listPic {width:100%;}
.list_shopping3x .list_shoppingInfo {margin-top:10px; text-align:center; font-size:12px;}
.listBrand {font-weight:500; height:1em; overflow:hidden; line-height:1;}
.listName {margin-bottom:5px; line-height:1.4; height:2.8em; overflow:hidden;}
.listDiscount {color:#979797;}
.listPrice {color:#ed1c24; margin-bottom:4px; font-size:14px;}
.listSoldout {color:#D22525; margin-bottom:4px;}
.listReplace {color:#1b1b1b; margin-bottom:4px;}
.listReview {color: #DB2E2E; margin-bottom:4px;}
.listReserve {color:#7d7d7d; font-size:0.917em;}
.listPoint {color:#7d7d7d; font-size:0.917em;}
/* //»óÇ°Áø¿­ */

/* ·Î±×ÀÎ */
.login .caution {margin-bottom:10px;}
.member {padding:0 15px; margin-top: 30px;}
.login #keyboard {text-align:center; margin:20px auto 0;}
.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 {margin-top:20px;}
.login .loginMiddle .btn_Red {margin:10px 0;}
.login .loginBottom {margin:30px 15px 0; padding:15px; border:1px solid #000;}
.login .loginBottom h3 {font-size:14px; color:#86001d; text-align:center;}
.login .loginBottom h4 {background-color:#eaeaea; margin-bottom:5px; padding:0; font-weight:bold;}
.login .loginBottom p {margin-top:5px; text-align:center; color:#666;}
.login .loginBottom .btn-black {width:100%; margin-top:10px; text-align:center;}
.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: 100%; max-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: 311px; 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;}
    /* //´õº¸±â ¹öÆ° */
}

/* °Ë»ö */
.bbs-sch { margin-top: 30px; border:1px solid #ccc; padding: 10px; text-align: right; text-align: center;}
.bbs-sch label { margin:0 10px; font-size: 14px; display:inline-block;}
.bbs-sch label input {vertical-align: initial;}
.bbs-sch .key-wrap {display:inline-block; font-size: 0; line-height: 0; border-bottom: 1px solid #636363; padding:5px 0;}
.bbs-sch .key-wrap,
.bbs-sch .keyword,
.bbs-sch img { vertical-align: middle; }
.bbs-sch .MS_input_txt {border:0; width:80%; font-size:16px;}
.bbs-sch .keyword { width: 80%; height: 20px; padding: 2px 0 0 2px; margin-right: 3px; border: 1px solid #ededed; font-size:16px;}

/* °Ô½ÃÆÇ Å¸ÀÔ - ºñ¹Ð¹øȣã±â */
.bbs-table-pwd { margin-top:30px;}
.bbs-table-pwd tbody th,
.bbs-table-pwd tbody td  { padding:10px 0; border-top:1px solid #000; border-bottom:1px solid #000; color:#9d9d9d; font-weight:normal; color:#000;}
.bbs-table-pwd input[type=text],
.bbs-table-pwd input[type=password] {width: 90%}

/* renewal */
body {padding-top:0;}
body.no-scroll {overflow:hidden;}

a, button, input {outline:none;}
.em {color:#86001d;}
.btns-wrap {margin-top:20px; text-align:center;}
.btn-red,
.btn-white,
.btn-black {display:inline-block; height:40px; line-height:38px; padding:0 15px; font-size:14px; transition:box-shadow .2s; box-sizing:border-box; vertical-align: middle;}

.btn-red {background:#86001d; color:#fff;}
.btn-white {border:1px solid #000; color:#000;}
.btn-black {background:#000; color:#fff;}

.container-box {position:relative; padding:0 13px;}

.page-header {position:relative;}
.page-header .breadscrumb {padding-left:15px; height:24px; line-height:20px; background:#000; color:#fff;}
.page-header .breadscrumb a,
.page-header .breadscrumb span {margin-right:14px; padding-left:14px; font-size:10px; color:#fff; vertical-align:middle;}
.page-header .breadscrumb a:first-child {margin-left:0; padding-left:0;}
.page-header .breadscrumb img {vertical-align:middle;}
.page-header .title {padding-top:18px; height:70px; text-align:center; color:#fff;}
.page-header .title h2 {position:relative; font-size:30px; letter-spacing:-0.075em; text-transform:uppercase; font-weight:100;}

/*
.page-header .title h2:after {position:absolute; content:''; bottom:-7px; left:50%; margin-left:-10px; width:20px; border-bottom:1px solid #fff;}
*/
.page-header .title p {font-size:10px; font-weight:100;}

.page-header .title.login {background:url(/design/bigjoy/renewal2017/bg_page_login.jpg) no-repeat 50% 50%; background-size:cover;}
.page-header .title.sign {background:url(/design/bigjoy/renewal2017/bg_page_sign.jpg) no-repeat 50% 50%; background-size:cover;}
.page-header .title.event {background:url(/design/bigjoy/renewal2017/bg_page_event.jpg) no-repeat 50% 50%; background-size:cover;}
.page-header .title.review {background:url(/design/bigjoy/renewal2017/bg_page_review.jpg) no-repeat 50% 50%; background-size:cover;}
/*
.page-header .title.school {background:url(/design/bigjoy/renewal2017/bg_page_adultcollege.jpg) no-repeat 50% 50%; background-size:cover;}
*/
.page-header .title_ac {text-align:center; color:#fff;}
.page-header .title_ac h2 img { width:100%; height:auto; }

.login-title.border {margin-top:30px; padding-top:30px; border-top:1px dashed #ccc;}
.login-title h3 {font-size:16px; text-align:center;}
.login-title p {margin-top:15px; font-size:12px; line-height:18px; text-align:center; color:#666;}

.common_info {margin-top:30px; background:#343434;padding:15px 0; font-size:0; text-align:center;}
.common_info li {display:inline-block; box-sizing:border-box; width:30%; background:url(/design/bigjoy/renewal2017/bg_icon_info.png) no-repeat; background-size:40px; vertical-align:top;}
.common_info li + li :first-child {border-left:1px solid #656565;}
.common_info li a {display:block; padding-top:40px; height:22px; font-size:14px; font-weight:300; color:#fff;}
.common_info li.info1 {background-position:50% 0;}
.common_info li.info2 {background-position:50% -147px;}
.common_info li.info3 {background-position:50% -299px;}

.tab {margin:30px 15px 0;}
.tab:after {content:''; display:block; clear:both;}
.tab a {position:relative; float:left; display:block; padding:0 20px; box-sizing:border-box; border:1px solid #000; height:45px; line-height:42px; font-size:14px; color:#666; text-align:center;}
.tab a.act {color:#86001d; border-bottom:0;}
.tab a.act:after {content:''; position:absolute; bottom:-8px; left:50%; margin-left:-6px; border-top:8px solid #86001d; border-left:6px solid transparent; border-right:6px solid transparent;}
.tab a + a {border-left:0;}

.btn-viewmore {position:relative; display:block; font: 700 italic 14px/1 'Playfair Display', serif; padding:0 20px 5px 0; border-bottom:1px solid #000; background:url(/design/bigjoy/renewal2017/bg_btn_viewmore.png) no-repeat 100% 4px; transition:text-shadow .5s; background-size: 8px;}
.btn-viewmore:after {content:''; display:block; position:absolute; bottom:-1px; left:0; width:100%; transform:scale(0); border-bottom:1px solid #999; transform-origin:0 100%; transition:transform .5s;}
.btn-viewmore:hover {text-shadow:3px 2px rgba(153,153,153,0.7);}
.btn-viewmore:hover:after {transform:scale(1);}

.link-more {position:relative; margin-top:40px; border-top:1px solid #000; text-align:center;}
.link-more .bg {position:absolute; top:-21px; left:50%; margin-left:-30px; display:block; width:60px; height:52px; transition:transform .3s; transform-origin: 50% 19px;}
.link-more .bg:after {content:''; position:absolute; top:0; left:0; display:block; border-top:52px solid #000; border-left:30px solid transparent; border-right:30px solid transparent; transition:border-color .3s;;}
.link-more:hover .bg {transform:rotate(120deg); border-top-color:#bf002c;}
.link-more.on .bg {transform:rotate(180deg); border-top-color:#bf002c;}
.link-more:hover .bg:after,
.link-more.on .bg:after {border-top-color:#bf002c;}
.link-more a {position:relative; display:inline-block; width:60px; height:52px;top:-25px; color:#fff; font:700 italic 12px 'Playfair Display', serif; z-index:1; line-height:44px; }

.common-banner {margin-top:10px;}
.common-banner:after {content:''; display:block; clear:both;}
.common-banner a {display:block; box-sizing:border-box;}
.common-banner a + a {margin-top:2%;}
.common-banner a img {display:block; width:100%;}

.section-title {text-align:center;}
.section-title h3 {height:25px; font:700 italic 28px/1 'Playfair Display', serif; border-bottom:1px solid #000;}
.section-title p {margin-top:14px; font-size:12px; line-height:1.4;}

/* list */
.prd-list ul:after {content:''; display:block; clear:both;}
.prd-list li {position:relative; float:left; margin-top:15px; width:50%; box-sizing:border-box; padding:0 8px;}
.prd-list .item {position:relative; display:block; padding:10px 5% 30px; text-align:center; font-size:11px; overflow:hidden;}
.prd-list .item .frame {position:relative; padding-top:100%; padding-bottom: 5px; overflow:hidden; transition:transform .2s ease-out;}
.prd-list .item .frame img {position:absolute; top:0; left:0; width:100%;}
.prd-list .brand {font-weight:500; height:1.4em; overflow:hidden; font-size:14px;}
.prd-list .title {font-weight:400; line-height:1.2; height:3.5em; overflow:hidden; text-overflow:ellipsis; font-size:14px;}
.prd-list .title span {color: #999;}
.prd-list .icons {margin-top: -10px; margin-bottom: 15px; height:12px; }
.prd-list .icons img {margin-left:0px;}
.prd-list .over {position:absolute; bottom:-65px; left:0; box-sizing:border-box; padding:10px; width:100%; height:100px; transition:all .2s ease-out;}
.prd-list .over .price {font-size:16px; color:#ed1c24; font-weight:700; transition:all .2s ease-out; margin-top: -10px; }
.prd-list .over .price del {margin-right:5px; color:#979797; font-weight:400; transition:all .2s ease-out; font-size:12px;}
.prd-list .over .detail {margin-top:50px; opacity:0; text-align:left; font-weight:100; color:#fff; line-height:1.2; height:4.8em; overflow:hidden; transition:all .2s ease-out;}
.prd-list .btn-cart { position: absolute; bottom: 0; border-top: none !important; }
.prd-list .btn-cart,
.prd-list .btn-preview {width: 100%; display:block; float: left; height:40px; line-height:40px; text-align:center; box-sizing:border-box; border-top: 1px solid #ddd; border-bottom:1px solid #ccc;  background:#fff; font-size:12px; color:#979797; font-weight:700; transition:bottom .3s;}
/*
.prd-list .btn-preview { position: absolute; bottom: 40px; }
*/
.prd-list .btn-preview i { position: relative; }
.prd-list .btn-cart img,
.prd-list .btn-preview img{vertical-align:-2px; margin-right:5px;}


/* Ä«Æ® ¿À·ù·Î Àӽà º¯°æ by âÇö 20200604
.prd-list .btn-cart,
.prd-list .btn-preview {width: 50%; display:block; float: left;height:40px; line-height:40px; text-align:center; box-sizing:border-box; border-top: 1px solid #ddd; border-bottom:1px solid #ccc;  background:#fff; font-size:12px; color:#979797; font-weight:700; transition:bottom .3s;}
.prd-list .btn-preview i {margin-right: 5px;}
.prd-list .btn-cart img,
.prd-list .btn-preview img{vertical-align:-2px; margin-right:5px;}
*/

.prd-list .btn-preview {width: 100%; display:block; float: left;height:40px; line-height:40px; text-align:center; box-sizing:border-box; border-top: 1px solid #ddd; border-bottom:1px solid #ccc;  background:#fff; font-size:12px; color:#979797; font-weight:700; transition:bottom .3s;}
.prd-list .btn-preview i {margin-right: 5px;}
.prd-list .btn-preview img{vertical-align:-2px; margin-right:5px;}

.prd-list ul.list li {float:none; width: 100%; padding: 0 0 30px; margin-top:10px; overflow:hidden; border-bottom:1px solid #ccc;}
.prd-list ul.list .item {padding:0;}
.prd-list ul.list li .left {float:left; width: 40%;}
.prd-list ul.list li .right {float:left; width: 60%; box-sizing:border-box; padding-left:25px; margin-bottom: 15px; }
.prd-list ul.list li .right .title {margin-top:-15px; height:unset; overflow:hidden; margin-bottom: 5px;}
.prd-list ul.list li .right .price {font-size:16px; color:#ed1c24; font-weight:700; margin-top:5px;}
.prd-list ul.list li .right .price del {margin-right:5px; color:#979797; font-weight:300; font-size:12px;}
.prd-list ul.list li .right .detail {text-align:left; font-weight:100; line-height:1.2; height:3.6em; overflow:hidden; color:#777;}
.prd-list ul.list li .brand {padding-top:10px; height:2.4em; overflow:hidden; margin-bottom: 5px}
.prd-list ul.list .icons {top:-10px; margin:0; margin-bottom: -10px; width: 150px; text-align: center;}
.prd-list ul.list .btn-preview {position: absolute; bottom:0; right:30%; width: 30%; border-bottom:0; height:30px; line-height: 5px; border-top:0;}
.prd-list ul.list .btn-cart {position: absolute; bottom:0; right:0; width: 30%; border-bottom:0; height:30px; line-height: 30px; border-top:0;}


/*
.prd-list .badge {position:absolute; top:30%; left:0; box-sizing:border-box; width:50%; height:40px; background:rgba(191,0,44,0.8); padding:10px; font:700 italic 20px/1 'Playfair Display', serif; transition:opacity .2s; color:#fff; box-shadow:1px 1px 2px rgba(0,0,0,0.5);}
.prd-list .badge span {float:right; margin-top:-30px; font-size:80px; text-shadow:2px 2px rgba(0,0,0,0.8);}
*/
.prd-list .badge {position:absolute; top:0; right:0; box-sizing:border-box; padding-top:17px; width:46px; height:46px; text-align:center; background:url(/design/bigjoy/renewal2017/icon_best.png) no-repeat; background-size:100%; line-height:1; }
.prd-list .badge span {font-size: 12px;}
.prd-list .badge.top {color:#9e334a; background-image: url(/design/bigjoy/renewal2017/icon_best_red.png);}

.prd-list li.hover .frame {transform:scale(1.1);}
.prd-list li.hover .over {bottom:0; background:#86001d; display:block;}
.prd-list li.hover .over .price {font-size:18px; color:#fff; text-align:right; font-weight:100;}
.prd-list li.hover .over .price del {display:block; margin-bottom:3px; font-size:12px; color:#B65E5E;}
.prd-list li.hover .over .detail {margin-top:10px; opacity:1;}
.prd-list li.hover .btn-preview {color: #333;}
/*.prd-list li:hover .badge {opacity:0;}*/

/* pagination */
.pagination {padding:30px 0 0; text-align:center;}
.pagination a {display:inline-block; box-sizing:border-box; width:34px; height:34px; line-height:30px; font-size:15px; font-weight:400; text-align:center; border:1px solid transparent;}
.pagination a:hover {text-decoration:underline;}
.pagination a.now {color:#86001d; font-weight:500;}
.pagination .prev,
.pagination .next {text-indent:-9999px; background:url(/design/bigjoy/renewal2017/bg_arrow_page.png) no-repeat;}
.pagination .prev {margin-right:6px; background-position:-1px 50%;}
.pagination .next {margin-left:6px; background-position:-35px 50%;}

/* login */
.login-wrap {margin:0 auto; width:600px; padding:70px; 0;}
.login-wrap .login-title.border {margin-top:50px; padding-top:50px; border-top:1px dashed #ccc;}
.login-wrap .login-title h3 {font-size:24px; text-align:center;}
.login-wrap .login-title p {margin-top:15px; font-size:14px; line-height:18px; text-align:center; color:#666;}
.login-wrap .form {margin:45px auto 0; width:347px;}
.login-wrap .form + .form {margin-top:50px;}
.login-wrap .form .convenience {margin-top:20px;}
.login-wrap .form .convenience label {font-size:14px;}
.login-wrap .form .convenience label + label {margin-left:20px;}
.login-wrap .form .convenience label input {margin-right:5px; vertical-align:-1px;}

.input-wrap {position:relative; height:52px; border:1px solid #000; box-sizing:border-box;}
.input-wrap + .input-wrap {margin-top:10px;}
.input-wrap label {position:absolute; top:16px; left:29px; font-size:14px; color:#86001d;}
.input-wrap input {box-sizing:border-box; width:100%; height:100%; font-size:14px; font-weight:300; padding:0 30px; border:0; letter-spacing:0;}

.sns-login {margin:30px 15px;}
.sns-login p {margin-bottom:30px;height:11px; border-bottom:1px solid #bbb; color:#999; text-align:center;}
.sns-login p span {display:inline-block; background:#fff; padding:0 10px; font:italic 20px/1 'Playfair Display', serif;}
.sns-login a {display:block; height:50px; box-sizing:border-box; padding-left:100px; font-size:16px; line-height:48px; background:url(/design/bigjoy/renewal2017/logo_sns.png) no-repeat; color:#fff; transition:box-shadow .2s;}
.sns-login a:hover {box-shadow:0 2px 4px rgba(0,0,0,0.3);}
.sns-login a + a {margin-top:10px;}
.sns-login a.fb {background-color:#3d5a98; background-position:120px 10px; padding-left: 160px;}
.sns-login a.nv {background-color:#2db400; background-position:120px -40px; padding-left: 160px;}
.sns-login a.kk {background-color:#ffdc00; background-position:120px -90px; color:#3b1e1e; padding-left: 160px;}
.sns-login a.ap {background-color:#1d1d1f; background-position:120px -140px; padding-left: 160px;}

.login-links {margin-top:40px; border-top:1px solid #000; padding-top:18px; text-align:center;}
.login-links a {position:relative; padding-left:9px; font-size:14px;}
.login-links a:after {content:''; position:absolute; top:10px; left:0; width:2px; border-top:2px solid #000;}
.login-links a:hover {text-decoration:underline;}
.login-links a + a {margin-left:50px;}

.radio-wrap {margin-top:30px; text-align:center;}
.radio-wrap label {font-size:16px; color:#777; font-weight:300; cursor:pointer;}
.radio-wrap label + label {margin-left:20px;}
.radio-wrap label input {margin-right:3px; vertical-align:-1px;}

p.auth {line-height:1.7; color:#666; text-align:center;}
p.auth a {color:#86001d; vertical-align:top; text-decoration:underline;}

.find-result {padding:20px; text-align:center; background:#eee;}
.find-result p {line-height:1.3;}
.find-result p + p {margin-top:15px;}
.find-result .result-value {font-size:20px;}

.btn-login,
.btn-guest,
.btn-find {display:block; margin-top:15px; width:100%; height:62px; line-height:60px; font-size:18px; text-align:center; transition:box-shadow .2s; box-sizing:border-box;}

.btn-login:hover,
.btn-guest:hover,
.btn-find:hover {box-shadow:0 2px 4px rgba(0,0,0,0.3);}

.btn-login {background:#86001d; color:#fff;}
.btn-guest {border:1px solid #000; color:#000;}
.btn-find {background:#000; color:#fff;}

.prd-analysis {margin:2.9411% 0 25px;}
.prd-analysis img {display: block; width: 100%;}

/* comment */
.comment-list {margin-top:50px; padding:30px; border:1px solid #ccc; width: 100%;}
.comment-list .comment-cont {padding:15px 0;}
.comment-list td {padding-left: 10px;}

.comment-box {margin-top:30px; padding:15px; border:1px solid #ccc;}
.comment-box:after {content:''; display:block; clear:both;}
.comment-box p {font-weight:100; font-size:13px; color:#333;}
.comment-box input {border:0; padding:0; height:25px; font-size:14px; font-weight:300; vertical-align:middle;}
.comment-box label {vertical-align:middle;}
.comment-box .body {padding:12px 0 3px; border-bottom:1px solid #999;}
.comment-box .body > span {display:inline-block; height:25px; line-height:25px; font-size:16px; font-weight:300; vertical-align:middle;}
.comment-box .name {float:left; width:30%; box-sizing:border-box; padding-right:20px;}
.comment-box .name input {width:100%;}
.comment-box .pw {float:left; width:70%;}
.comment-box .pw input {margin-right:5px; font-size:14px;}
.comment-box .msg {padding-top:20px; clear:left;}
.comment-box .msg textarea {box-sizing:border-box; width:100%; height:100px; border:0;}
.comment-box .submit {clear:both; padding-top:15px; text-align:center;}

/* board */
.img-list:after {content:''; display:block; clear:both;} 
.img-list {text-align:center;}
.img-list li {margin:30px 13px 30px; min-width:294px; text-align: left;}
.img-list li a {position:relative; display:block; transition:box-shadow .3s;}
.img-list li a:hover {box-shadow:0 5px 15px rgba(0,0,0,0.25);}
.img-list-item .frame {height:148px; overflow:hidden;}
.img-list-item .frame img {width:100%; min-width:294px;}
.img-list-item .desc {padding:12px 9px; border:1px solid #d0d0d0; border-top:0;}
.img-list-item .desc .title {font-size:16px; line-height:1.4; height:2.8em; overflow:hidden;}
.img-list-item .desc .title img {vertical-align:middle;}
.img-list-item .desc .date {margin-top:10px; font-size:12px; color:#898989; overflow:hidden;}
.img-list-item .cover {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.5); color:#fff; font-size:20px; text-align:center; line-height:300px; opacity:0; transition:opacity .2s;}
.img-list-item:hover .cover {opacity:1;}

.img-list-view {margin-top: 35px;}
.img-list-view-header {overflow:hidden;}
.img-list-view-header .title {font-size: 1.3em; line-height:1.4;border-bottom:2px solid #000; padding-bottom:10px;}
.img-list-view-header .date {padding-top:5px; font-weight:300; text-align: right;}
.img-list-view-body {padding: 30px 0; text-align:center; line-height: 1.7; border-bottom: 1px solid #ccc;font-size:12px; color:#333; font-weight: 300;}
.img-list-view-body img {max-width: 100%;}
.img-list-view-body.align-left {text-align: left;}

.analysis-list:after {content:''; display:block; clear:both;} 
.analysis-list li {float:left; margin:60px 10px 0 0; width:232px;}
.analysis-list li.last {margin-right:0;}
.analysis-list li a {position:relative; display:block; transition:box-shadow .3s;}
.analysis-list li a:hover {box-shadow:0 5px 15px rgba(0,0,0,0.25);}
.analysis-list-item .frame {height:232px; overflow:hidden;}
.analysis-list-item .frame img {width:100%;}
.analysis-list-item .desc {padding:10px 18px; text-align:center;}
.analysis-list-item .desc .title {font-size:14px; line-height:1.4; height:2.8em; overflow:hidden;}
.analysis-list-item .desc .title img {vertical-align:middle;}

.board .breadscrumb {padding-left:15px; height:24px; line-height:20px; background:#000; color:#fff;}
.board .breadscrumb a,
.board .breadscrumb span {margin-right:14px; padding-left:14px; font-size:10px; color:#fff; vertical-align:middle;}
.board .breadscrumb a:first-child {margin-left:0; padding-left:0;}
.board .breadscrumb img {vertical-align:middle;}

.board-header {margin-top: 30px; text-align:center;}
.board-header h2 {font: bold 30px/1 'Playfair Display', serif; text-transform: uppercase;}
.board-header h2 span {font: 400 18px/1 'Noto Sans KR', AppleGothic, Helvetica, sans-serif;}
.board-header p {margin-top: 15px; font-size: 14px;}

.board-list {position:relative; margin-top: 30px;}
.board-list thead th {background-color:#f0f0f0; font-weight: normal; }
.board-list th,
.board-list td { padding: 5px 0;font-size:12px; text-align: center;}
.board-list tbody td {border-bottom:1px solid #ccc;}
.board-list tbody td .MS_review_mark_title {display:none;}
.board-list td .del-msg {display:block; margin-bottom:15px;}
.board-list .title {text-align:left; padding-left: 10px; line-height:1.4;}
.board-list .title img {vertical-align: middle;}
.board-list .title span {margin-left:5px;}
.board-list .writer div {display:inline-block;}
/* .board-btns */
.btn-list,
.board-btns {margin-top:30px; text-align: center;}
.board-btns a,
.board-btns a {display:block; text-align:center;}
.board-btns a + a,
.board-btns a + a {margin-top: 5px;}

/* board-write */
.board-write {margin-top:50px; padding:30px; border:1px solid #ccc;}
.board-write:after {content:''; display:block; clear:both;}
.board-write p {font-weight:100; font-size:16px; color:#333;}
.board-write input {border:0; height:25px; font-size:16px; font-weight:300; vertical-align:middle;}
.board-write label {vertical-align:middle;}
.board-write .body {padding:12px 0 3px; border-bottom:1px solid #999;}
.board-write .name {float:left; width:30%; box-sizing:border-box; padding-right:20px;}
.board-write .name input {width:100%;}
.board-write .passwd {float:left; width:70%;}
.board-write .passwd input {margin-right:5px; font-size:14px;}
.board-write .email {padding-top:20px; clear:left;}
.board-write .title {padding-top:20px; clear:left;}
.board-write .title .MS_input_txt {width: 70%;}
.board-write .msg {padding-top:20px; clear:left;}
.board-write .msg textarea {box-sizing:border-box; width:100%; height:200px; border:0;}
.board-write .attach {float:left; margin-top:20px; }
.board-write .attach a {float:left; width:40px; height:40px; text-indent:-9999px; background:#fafafa url(/design/bigjoy/renewal2017/icon_attach.png) no-repeat 50% 50%; box-sizing:border-box; border:1px solid #999; border-radius:3px;}
.board-write .attach a:hover {border-color:#666;}
.board-write .attach input {display:inline-block; margin:10px 0 0 20px;}
.board-write .submit {clear:both; text-align:center;}
.board-write .submit a {margin-left:3px; width:183px;}

/* my page */
.mypage-body {margin-top:30px; }
.mypage-body .grp {margin: 30px 0 30px; padding:15px; font-size: 14px; background-color: #000; color: #fff; text-align: center;}
.mypage-body .tit {position: relative; margin:30px 0 15px; padding-bottom:10px; font-size: 16px; font-weight: 300; text-align: center;}
.mypage-body .tit:after {content: ''; position:absolute; bottom: 0; left: 50%; margin-left: -10px; width: 20px; border-bottom: 2px solid #000;}
.mypage-body .tit-sub {margin-bottom:10px; font-size: 14px; font-weight: 400;}
.mypage-body .hd {margin-top:30px; position: relative;}
.mypage-body .hd h3 {font-size: 14px;}
.mypage-body .hd .view {position:absolute; top:-8px; right:0; height: 18px; font-size: 10px; color:#fff; line-height:18px; padding:0 15px 0 5px; background: #000 url(/design/bigjoy/renewal2017/bg_arrow1.png) no-repeat 59px 50%;}
.mypage-body .tbl {margin-top: 15px;}
.mypage-body .tbl th,
.mypage-body .tbl td {font-size: 12px; text-align: center; }
.mypage-body .tbl th {padding: 10px 0;background-color: #f9f9f9; font-weight: 300;}
.mypage-body .tbl td {padding: 15px 0; border-bottom: 1px solid #000;}
.mypage-body .use-dsc {padding: 15px; border: 1px solid #ccc; margin-top:30px; font-size: 12px;}
.mypage-body .use-dsc li {position: relative; padding-left:10px;}
.mypage-body .use-dsc li:after {position: absolute; content:''; display: block; top:6px;left:0; border: 1px solid #333; }
.mypage-body .use-dsc li + li {margin-top:10px;}
.mypage-body .use-dsc dd {margin-top:5px}


/* list */
.yfl-list-tile { margin: 0 auto; width: 90%; overflow: hidden; }
.yfl-list-tile li { float: left; margin-bottom: 40px; width: 33.33%; color: #4d4d4d; text-align: center; }
.yfl-list-tile li a { display: block; padding: 0 10%; color: inherit; transition: color .3s; }
.yfl-list-tile li a:hover { color: #000; }
.yfl-list-tile li .img { width: 100%; overflow: hidden; }
.yfl-list-tile li .img img { width: 100%; }
.yfl-list-tile li .icon { margin-top:10px; text-align: center; height: 20px; }
.yfl-list-tile li .name-en { margin-top:5px; height:40px; font-size: 10px; }
.yfl-list-tile li .name-kr { margin-top: 4px; height:30px; font-size: 10px; }
.yfl-list-tile li .price { margin-top: 10px; color: #b28139; font-size: 12px; }
.yfl-list-card { margin: 0 auto; width: 90%; overflow: hidden; }
.yfl-list-card li { padding: 10px; color: #4d4d4d; min-height: 130px; border-bottom: 2px solid #000; background: #fff; }
.yfl-list-card li a { position: relative; display: block; color: inherit; transition: color .3s; }
.yfl-list-card li a:hover { color: #000; }
.yfl-list-card li .img { float: left; width: 110px; height: 110px; overflow: hidden; }
.yfl-list-card li .img img { width: 100%; }
.yfl-list-card li .desc { margin-left: 115px; }
.yfl-list-card li .icon { margin-top: 10px; height: 25px; }
.yfl-list-card li .name-en { font-size: 10px; }
.yfl-list-card li .name-kr { margin-top: 5px; font-size: 12px; font-weight: bold; height: 40px;}
.yfl-list-card li .price { margin-top: 7px; color: #b28139; font-size: 14px; font-weight: bold; }
.yfl-list-card li .detail { margin-top: 5px; position: relative; padding-top: 5px; border-top: 1px solid #f0e6d7; }
.yfl-list-card li .detail p { font-size: 11px; line-height: 1.7; }
.yfl-list-card li .detail .spec { margin-top: 7px; }
.yfl-list-card li .detail .spec span + span { margin-left: 12px; }
.yfl-list-card li .best-rank { padding-left: 15px; color: #ff8e43; font-size: 11px; font-weight: bold; text-decoration: underline; text-transform: uppercase; background: url(/design/bigjoy/renewal2017/yfl_m_icon_best.png) no-repeat; background-size: 11px; opacity: 0.8; }
.yfl-list-card li:first-child .best-rank { color: #ff6600; font-size: 12px; opacity: 1; }
.yfl-page { margin-top: 30px; text-align: center; }
.yfl-page a { display: inline-block; width: 15px; color: #555; font-size: 12px; transition: color .2s; }
.yfl-page a:hover { color: #000; }
.yfl-page a.on { color: #000; font-weight: bold; }
.yfl-page .first { margin-right: 5px; }
.yfl-page .last { margin-left: 5px; }

.yfl-shop { padding-bottom: 23%; line-height: 1; background: url(/design/bigjoy/renewal2017/yfl_m_bg_bottom.png) no-repeat 50% 100%; background-size: 100%; }
.yfl-shop .header { height: 245px; text-align: center; color: #fff; letter-spacing: -1px; }
.yfl-shop .header h2 { display: inline-block; padding-top: 80px; font-size: 30px; font-weight: bold; border-bottom: 2px solid #fff; }
.yfl-shop .header p { margin-top: 7px; font-size: 15px; line-height: 1.3; }
.yfl-shop .header.lubricant { background: url(/design/bigjoy/renewal2017/yfl_m_bg_lubricant.jpg) no-repeat 50% 50%; background-size: 100%; }
.yfl-shop .header.pleasure { background: url(/design/bigjoy/renewal2017/yfl_m_bg_pleasure.jpg) no-repeat 50% 50%; background-size: 100%; }
.yfl-shop .header.care { background: url(/design/bigjoy/renewal2017/yfl_m_bg_care.jpg) no-repeat 50% 50%; background-size: 100%; }
.yfl-shop .header.sweet { background: url(/design/bigjoy/renewal2017/yfl_m_bg_sweet.jpg) no-repeat 50% 50%; background-size: 100%; }
.yfl-shop .header.perfume { background: url(/design/bigjoy/renewal2017/yfl_m_bg_perfume.jpg) no-repeat 50% 50%; background-size: 100%; }
.yfl-shop .header.set { background: url(/design/bigjoy/renewal2017/yfl_m_bg_set.jpg) no-repeat 50% 50%; background-size: 100%; }
.yfl-shop .header.acc { background: url(/design/bigjoy/renewal2017/yfl_m_bg_acc.jpg) no-repeat 50% 50%; background-size: 100%; }
.yfl-shop .story { margin: 30px auto 0; padding-bottom: 50%; text-align: center; background: url(/design/bigjoy/renewal2017/yfl_m_bg_story.jpg) no-repeat 50% 100%; background-size: 95%; }
.yfl-shop .story img { width: 75px; }
.yfl-shop .story h3 { margin-top: 20px; color: #b28139; font-size: 15px; font-weight: bold; }
.yfl-shop .story > p { margin-top: 10px; color: #130e16; font-size: 25px; line-height:1.2 }
.yfl-shop .story > p span { color: #cf7400; font-weight: bold; }
.yfl-shop .story > div { margin-top: 25px; }
.yfl-shop .story > div h4 { display: inline-block; color: #4d4d4d; font-size: 12px; border-bottom: 2px solid #6b6b6b; }
.yfl-shop .story > div p { margin-top: 10px; color: #4d4d4d; font-size: 11px; line-height: 1.5; }
.yfl-shop .story > div p em { color: #282020; font-weight: bold; }
.yfl-shop .category {display:block; margin:20px auto 0; box-sizing:border-box; height:45px; padding:12px; width:90%; font-size:12px; color:#4d4d4d; -webkit-appearance:none; background: url(/design/yesforlov/img/m/bullet2.png) no-repeat 95% 50%; background-size:13px;}
.yfl-shop .list-card { margin-top: 10px; }

.yfl-cate { 
    border: 1px #000 solid;
    margin: 20px auto 0;
    box-sizing: border-box;
    height: 45px;
    width: 90%;
    background: url(/design/bigjoy/renewal2017/bg_arrow7.png) no-repeat 95% 50%;
    background-size: 9px auto;
}
.yfl-cate li {position: relative; z-index: 200; display: none;background-color:#fff; border:1px solid #777; border-top:0; border-bottom: 0; padding: 0 12px;}
.yfl-cate li:last-child {border-bottom: 1px solid #777;}
.yfl-cate li.init {display:block; background-color: transparent;height:43px; line-height:43px; border:0;}
.yfl-cate li.init + li {border-top: 1px solid #ddd;}
.yfl-cate li.on { background: #ddd; }
.yfl-cate li a {display: block;  height:30px; line-height:30px;font-size: 12px; color: #4d4d4d;  }

.yfl-guide { line-height: 1; padding-bottom: 23%; background: url(/design/bigjoy/renewal2017/yfl_m_bg_bottom.png) no-repeat 50% 100%; background-size: 100%; }
.yfl-guide .header { height: 245px; text-align: center; color: #fff; letter-spacing: -1px; background: url(/design/bigjoy/renewal2017/yfl_m_bg_guide_header.jpg) no-repeat 50% 0; background-size: 100%; }
.yfl-guide .header h2 { display: inline-block; padding-top: 80px; font-size: 30px; font-weight: bold; border-bottom: 2px solid #fff; }
.yfl-guide .header p { margin-top: 7px; font-size: 15px; line-height: 1.3; }
.yfl-guide .yfl-guide-list { padding: 30px 0 30px; background: #f1f1f1; }
.yfl-guide .yfl-guide-list h2 { margin: 0 auto; padding-bottom: 5px; width: 90%; color: #130e16; font-size: 16px; font-weight: bold; text-align: center; border-bottom: 2px solid #000; }
.yfl-guide .yfl-guide-list ul a { box-sizing: border-box; display: block; padding: 4px; width: 100%; height: 147px; border: 1px solid #d9d8d9; border-radius: 2px; background: #fff; letter-spacing: -1px; transition: border-color .2s; }
.yfl-guide .yfl-guide-list ul a div { box-sizing: border-box; padding: 7px; height: 100%; }
.yfl-guide .yfl-guide-list ul a div h3 { position: relative; padding-top: 15px; line-height: 1.4; color: #fff; font-size: 11px; font-weight: bold; text-decoration: underline; transition: color .3s; }
.yfl-guide .yfl-guide-list ul a div h3 span { position: absolute; top: 0; left: 0; font-size: 10px; opacity: .49; }
.yfl-guide .yfl-guide-list ul a div p { margin-top: 5px; line-height: 1.5; font-size: 10px; color: #fff; transition: color .3s; }
.yfl-guide .yfl-guide-list ul a:hover, .yfl-guide .yfl-guide-list ul a.on { border-color: #ff6803; }
.yfl-guide .yfl-guide-list ul a:hover > div, .yfl-guide .yfl-guide-list ul a.on > div { background-color: #fff; }
.yfl-guide .yfl-guide-list ul a:hover > div h3, .yfl-guide .yfl-guide-list ul a.on > div h3 { color: #000; }
.yfl-guide .yfl-guide-list ul a:hover > div h3 span, .yfl-guide .yfl-guide-list ul a.on > div h3 span { color: #b28139; opacity: 1; }
.yfl-guide .yfl-guide-list ul a:hover > div p, .yfl-guide .yfl-guide-list ul a.on > div p { color: #000; }
.yfl-guide .yfl-guide-list ul a.guide1 > div { background:#b8b6b9  url(/design/bigjoy/renewal2017/yfl_m_bg_guide1_off.png) no-repeat 100% 95%; background-size: 58px; }
.yfl-guide .yfl-guide-list ul a.guide1:hover > div, .yfl-guide .yfl-guide-list ul a.guide1.on > div { background: #fff url(/design/bigjoy/renewal2017/yfl_m_bg_guide1_on.png) no-repeat 100% 95%; background-size: 58px; }
.yfl-guide .yfl-guide-list ul a.guide2 > div { background: #b8b6b9 url(/design/bigjoy/renewal2017/yfl_m_bg_guide2_off.png) no-repeat 100% 95%; background-size: 58px; }
.yfl-guide .yfl-guide-list ul a.guide2:hover > div, .yfl-guide .yfl-guide-list ul a.guide2.on > div { background: #fff url(/design/bigjoy/renewal2017/yfl_m_bg_guide2_on.png) no-repeat 100% 95%; background-size: 58px; }
.yfl-guide .yfl-guide-list ul a.guide3 > div { background: #b8b6b9 url(/design/bigjoy/renewal2017/yfl_m_bg_guide3_off.png) no-repeat 100% 95%; background-size: 58px; }
.yfl-guide .yfl-guide-list ul a.guide3:hover > div, .yfl-guide .yfl-guide-list ul a.guide3.on > div { background: #fff url(/design/bigjoy/renewal2017/yfl_m_bg_guide3_on.png) no-repeat 100% 95%; background-size: 58px; }
.yfl-guide .yfl-guide-list ul a.guide4 > div { background: #b8b6b9 url(/design/bigjoy/renewal2017/yfl_m_bg_guide4_off.png) no-repeat 100% 95%; background-size: 58px; }
.yfl-guide .yfl-guide-list ul a.guide4:hover > div, .yfl-guide .yfl-guide-list ul a.guide4.on > div { background: #fff url(/design/bigjoy/renewal2017/yfl_m_bg_guide4_on.png) no-repeat 100% 95%; background-size: 58px; }
.yfl-guide .yfl-guide-list ul a.guide5 > div { background: #b8b6b9 url(/design/bigjoy/renewal2017/yfl_m_bg_guide5_off.png) no-repeat 100% 95%; background-size: 58px; }
.yfl-guide .yfl-guide-list ul a.guide5:hover > div, .yfl-guide .yfl-guide-list ul a.guide5.on > div { background: #fff url(/design/bigjoy/renewal2017/yfl_m_bg_guide6_on.png) no-repeat 100% 95%; background-size: 58px; }
.yfl-guide .yfl-guide-list ul a.guide6 > div { background: #b8b6b9 url(/design/bigjoy/renewal2017/yfl_m_bg_guide1_off.png) no-repeat 100% 95%; background-size: 58px; }
.yfl-guide .yfl-guide-list ul a.guide6:hover > div, .yfl-guide .yfl-guide-list ul a.guide6.on > div { background: #fff url(/design/bigjoy/renewal2017/yfl_m_bg_guide1_on.png) no-repeat 100% 95%; background-size: 58px; }
.yfl-guide .bx-wrapper { margin: 15px auto 0; width: 90%; }
.yfl-guide .bx-wrapper .bx-controls { margin-top: 15px; }
.yfl-guide .bx-wrapper .bx-controls .bx-pager { text-align: center; }
.yfl-guide .bx-wrapper .bx-controls .bx-pager-item { display: inline-block; }
.yfl-guide .bx-wrapper .bx-controls .bx-pager-item a { display: block; margin: 0 4px; width: 7px; height: 7px; background: #b8b6b9; border-radius: 100%; text-indent: -9999px; }
.yfl-guide .bx-wrapper .bx-controls .bx-pager-item a.active { background: #b28139; }
.yfl-guide .category {display:block; margin:20px auto 0; box-sizing:border-box; height:45px; padding:12px; width:90%; font-size:12px; color:#4d4d4d; -webkit-appearance:none; background: url(/design/yesforlov/img/m/bullet2.png) no-repeat 95% 50%; background-size:13px;}
.yfl-guide .yfl-list-tile { margin-top: 10px; border-bottom: 2px solid #000; }

.common-gnb {background-color: #fff; overflow:hidden;}
.common-gnb li {float: left; width:25%;}
.common-gnb li a {display: block; margin: 1px;height: 30px; line-height: 30px; color:#000; text-align: center; border: 1px solid #ddd;}

@media all and (max-width: 360px) {
    .section-title {
        margin-top:10px;
    }
}

@media all and (max-width: 340px) {
    .section-title {
        margin-top:30px;
    }
}