/* Reset */
html,body,div,p,h1,h2,h3,h4,h5,h6,ul,dl,li,dt,dd,a,span,strong,form,input { margin:0; padding:0; }
a { border:0; text-decoration:none; font:normal 11px 'Noto Sans KR',sans-serif; color:#333; }
ul,dl,ol { list-style:none; }
img { border:0; vertical-align:top; }
a, a:hover, a:visited, a:active { text-decoration: none; }


body {  background: #000;}

/* mobile – 767px 이하 해상도에서 해석하는 코드 * /
@media ( max-width:767px ) {
/* */

    ::-webkit-scrollbar {
        width: 0px;  /* remove scrollbar space */
        background: transparent;  /* optional: just make scrollbar invisible */
    }
    /* optional: show position indicator in red */
    ::-webkit-scrollbar-thumb {
        background: #FF0000;
    }

    html, body, #roulette_wrap { min-height: 100vh; max-height:100vh; height:100vh; font-family: Trajan Pro; color: #fff; font-size: 6px;}
    a { color: #fff;}

    header,
    #contents, footer { width: 100vw; box-sizing: border-box; overflow: hidden; z-index:1; }
    header            { height: 7.2vh; position:relative; }
    section#header    { height: 10.4vh; border: 1px solid #979796; border-left:none; border-right: none; box-sizing: border-box; box-sizing: border-box; background: #000; text-align:center; }

    #content>.swiper-wrapper>div        { display:none;  }
    #content>.swiper-wrapper>div#home   { display:block; }
    #content>.swiper-wrapper>div:target { display:block; }

    /*
    #back { width: 4vw; height: 4.8vh; display:inline-block; position:absolute; top:2.7vh; left: 5.4vw; background: none; border: none;  display: none;}
    /* */

    h1 {   height: 5.2vh; margin-top: 2.5vh; background-size: 33.9vw 5.2vh}
    /* min-width:217px; min-height:50px; width: 33.9vw; height: 5.2vh; */
    section#header a {display:inline-block; width:33.9vw; height:5.2vh; text-indent:-9999px; background: url('../images/logo.png') center center no-repeat; background-size: 33.9vw 5.2vh; }

    ul#menu                        { height:7.2vh; box-sizing: border-box; /* border:0.5px solid #d4d3d4; border-bottom-color:#fff; */ border-bottom: none; border-left: none; border-right: none; display: table; overflow-y:hidden; overflow-x:scroll; will-change: trnasform; }
    ul#menu > li                   {  overflow: hidden; height:6.2vh; position: relative; display: table-cell; white-space: nowrap; }
    ul#menu > li > a               { display: inline-block; box-sizing: border-box; height:6.2vh; vertical-align: middle; line-height: 5.7vh}
    ul#menu > li > a > span        { display: inline-block; vertical-align:middle;}
    ul#menu > li > a::before       {content:"";vertical-align:middle;}
    ul#menu > li::after            { display:inline-block; content: "|"; color: #fff; }
    ul#menu > li:last-child::after { content: ""; }
    ul#menu > li:first-child       { padding-left: 5.6vw;}

    header > ul > li            {box-sizing: border-box; }
    header > ul > li a          { color: #fff; text-decoration:none; font-size: 1.67em; display: inline-block; padding: 0 3.7vw; }
    header > ul > li.selected   { }
    header > ul > li.selected a { color: #ffd100; border-bottom: 2px solid #fff; width: 90%;  }

    #contents     { height: 59.3vh; height: 82.4vh; height: 92.8vh; overflow:hidden;  }
    #home,
    #series_items,
    #review,
    #qna,
    #brand_story  { height: 92.8vh; overflow-x: hidden; overflow-y: auto;}
    #review       { padding-top: 0.75vh; }
    .review_image { display: none; }

    a[href='#info']      {  position:fixed;  display: inline-block;  width: 15vw;  height: 2.4vh;  padding: 1vh 1vw; text-align: center;  background: #000;  left:50%;  margin-left: -7.5vw;  color: #fff; font-size: 1.5em; line-height: 100%; z-index: 10;  bottom: 0;  }
    a[href='#info'].show { bottom: 23.1vh;  }

    footer                          { height:23.1vh; padding: 2.7vh 0 0 0.5vw; color: #fff; position:fixed; bottom: -23.1vh; background: #000; font-size: .75em; }
    footer.show                     { bottom: 0;}
    footer h2                       { font-size: 0.938px; margin-left: 2.5vw; }
    footer dl                       { margin-top: 3.3vh; font-size: 1em; width: 89vw;}
    footer dt, footer dd            { float:left; display: inline-block; height:3.5vh; line-height: 3.5vh; line-height:100%; letter-spacing:0px;}
    footer dt::before               { clear: both; display:block; content: "";}
    footer dt::after                { padding: 0 1.1vw; content: ":"; }
    footer dd::after                { display: inline-block; content: ""; }
    footer dd:nth-of-type(1)::after,
    footer dd:nth-of-type(2)::after { content: "|"; padding: 0 1.1vw; }
    footer dd:nth-of-type(4)        { padding-right: 36vw;}
    footer dd:nth-of-type(5)        { padding-right: 30vw;}
    footer p                        { margin: 2.5vh auto; padding: 0 0 3.3vh; font-size: 1em; width: 95vw; line-height: 3.5vh; letter-spacing:0px; }


#home img{ width: 100vw;}


    #series_lists                      { will-change: contents; }
    #series_lists>li                   { min-height: 220px; min-height: 22.91vh; text-align: left; border-bottom: 1px solid #626262; width: 100%; }
    #series_lists>li>div               { padding: 20px 20px; padding: 2vh 3.1vw; border-bottom: 1px solid #626262; min-height: 220px; min-height: 22.91vh; box-sizing: border-box;}
    #series_lists>li>div img           { width:176px; width:25.5vw; height:176px; height:18.3vh; margin-right: 20px; }
    #series_lists>li>div a             { color: #ffe53e; display: inline-block; position:absolute; left: 196px; left: 30.62vw; top: 68px; top: 7vh; font-size: 1.67em; }
    #series_lists>li>div p             { color: #fff; display: inline-block; position:absolute; left: 196px; left: 30.62vw; top: 103px; top: 10.72vh; max-width: 400px; max-width: 62.5vw; font-size: 1.67em; }

    #series_lists>li button        { color: #a9b7ff; background: none; border:none; display: inline-block; position:absolute;  }
    #series_lists>li button::after { content: "load more▽";}
    #series_lists>li button.more::after { content: "close△";}

    #series_lists>li>button        { position:absolute; bottom: 15px; bottom: 1.5vh; right: 28px; right:4.3vw; display:none; }
    #series_lists>li>div>button    { position:absolute; top: 340px; top: 17vh; right: 28px; right:4.3vw; }
    #series_lists>li button.more   { display: inline-block; }


    #series_lists li { box-sizing: border-box; position: relative; }

    .product_lists { display: none; padding: 12px 20px 50px; padding: 1.25vh 3.1vw 5vh; margin-bottom: 5vh; overflow: hidden;  }
    .product_lists>li { width: 290px; width: 45.31vw; height: 411px; height: 42.81vh; margin-top: 13px; margin-top: 1.35vh; background: #fff; float:left; }
    .product_lists>li:nth-child(odd) { margin-right: 16px; margin-right: 2.5vw; }
    .product_lists>li .product_thumbnail_image { background: #000; display: inline-block; min-width: 290px; min-width: 45.31vw; width: 100%; min-height: 290px; min-height: 30.2vh; position: relative;}
    .product_lists>li .product_thumbnail_image img { min-width: 290px; min-width: 45.31vw; width: 100%; min-height: 290px; min-height: 30.2vh; }

    .product_lists>li .wrap { width: 290px; width: 45.31vw; position: absolute; bottom: 0; left: 0; height: 2.5em; background: #000; opacity: 0.5; }


    .product_lists>li .price {color: #fff; font-size: 1.5em; position: absolute; text-align: left; display: inline-block; width: 120px; width: 18.75vw; width: 28vw; bottom: 5px; bottom: 0.52vh; left: 0;}
    .product_lists>li .price::after { font-size: 1.67em; }
    .product_lists>li .discount { color :#fff; font-size: 2em; position: absolute; text-align: right; display: inline-block; width: 120px; width: 18.75vw; bottom: 5px; bottom: 0.52vh;right: 15px; right: 1.5vw; }
    .product_lists>li .discount.hide {display: none;}


    .product_lists>li .discount::after { content: '%'; font-size: 0.5em; }
    .product_lists>li .product_name {  color: #2f2f2f; min-width: 290px; min-width: 45.31vw; width: 100%; font-size: 2em; box-sizing: border-box; padding: 20px 20px 15px; padding: 2vh 3.1vw 1.56vh;  display: inline-block; letter-spacing: -1px; line-height: 120%; }
    .shipping { display: inline-block; color: #8e8e8e; font-size: 1.5em; padding-left: 20px; padding-left: 3.1vw; }

    .product_lists[style*="display:none"] + button { color: #fff; }

    .review_lists                      { width: 100%; overflow: hidden; padding: 0 10px; will-change: contents; }
    .review_lists li                   { width: 290px; width: 45.31vw; background: #fff; color: #000; box-sizing: border-box; margin-bottom: 20px; float: left;}
    .review_lists div                  { width: 290px; width: 45.31vw; background: #fff; color: #000; box-sizing: border-box; padding: 0 0 13px 12px; padding: 0 0 1.35vh 1.87vw;}
    .review_lists li:nth-child(odd)    { /* margin-right: 20px; */ }
    .review_lists img                  { width: 100%;}
    .review_lists .product_name        { width: 100%; display: block; box-sizing: border-box; font-size:1vw; padding-top: 0.75vh; }
    .review_lists .product_name::after { display: block; content: ""; width: 79px; height: 1px; background: #000; border-top: 1px solid #a1a1a1; border-left: 1px solid #b9b9b9; border-right: 1px solid #4e4e4e; border-bottom: 1px solid #e3e3e3; margin-top: 14px; margin-top: 1.45vh; }
    .review_lists .content             { width: 100%; height: 92px; height: 10.58vh;box-sizing: border-box; padding: 14px 29px 0 0;  padding: 1.45vh 4.53vw 0 0; font-size: 1.34em; }
    /*  max-height: 92px; max-height: 9.58vh;  */
    .review_lists .content.more        { height: auto !important; max-height:none !important;}


    #brandstory_main               { box-sizing: border-box;clear: both;color:#fff;display: block;font-family: Arial, NanumGothic, 돋움, sans-serif;font-size: 13px;font-stretch: normal;font-style: normal;font-variant-caps: normal;font-variant-ligatures: normal;font-variant-numeric: normal;font-weight: normal;overflow-x: hidden;overflow-y: hidden;padding:0;position: relative;text-align: center;text-size-adjust: 100%;width: 100vw; }
    #brandstory_main .container    { box-sizing:border-box;display:block;font-family:Arial, NanumGothic, 돋움, sans-serif;font-size:13px;font-stretch:normal;font-style:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-weight:normal;margin:0;padding-bottom:0px;padding-left:20px;padding-right:20px;padding-left:3vw;padding-right:3vw;text-align:center;text-size-adjust:100%; }
    #brandstory_main .row          { box-sizing:border-box;display:block;font-family:Arial, NanumGothic, 돋움, sans-serif;font-size:13px;font-stretch:normal;font-style:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-weight:normal;margin-left:0px;text-align:center;text-size-adjust:100%; width: 93.7vw;}
    #brandstory_main .row::before,
    #brandstory_main .row::after   { box-sizing: border-box  ;  content:  ""  ;  display: table  ; }
    #brandstory_main .wrap         { box-sizing:border-box;display:block;float:none;font-family:Arial, NanumGothic, 돋움, sans-serif;font-size:13px;font-stretch:normal;font-style:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-weight:normal;margin-left:0px;min-height:1px;text-align:center;text-size-adjust:100%; width: 93.7vw; padding-bottom: 16vh;}
    #brandstory_main .wrap::before,
    #brandstory_main .wrap::after  { box-sizing:border-box;content:"";display:table;height:0px;line-height:0px; }
    #brandstory_main .wrap::after  { clear:both; }

    #brandstory_main div.title            { box-sizing:border-box;display:block;font-family:Arial, NanumGothic, 돋움, sans-serif;font-size:13px;font-stretch:normal;font-style:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-weight:normal;text-align:center;text-size-adjust:100%; }
    #brandstory_main h4.title             { box-sizing:border-box;display:block;font-family:Raleway, sans-serif;font-size:26px;font-stretch:normal;font-style:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-weight:bold;letter-spacing:3px;margin-left:0px;margin-right:0px;margin-top:33px;text-align:center;text-rendering:optimizeLegibility;text-size-adjust:100%;-webkit-margin-after:26px;-webkit-margin-before:66px;-webkit-margin-end:0px;-webkit-margin-start:0px; }
    #brandstory_main div.title p          { box-sizing:border-box;display:block;font-family:Arial, NanumGothic, 돋움, sans-serif;font-size:13px;font-stretch:normal;font-style:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-weight:normal;margin-bottom:20px;margin-left:0px;margin-right:0px;margin-top:0px;text-align:center;text-size-adjust:100%;-webkit-margin-after:40px;-webkit-margin-before:0px;-webkit-margin-end:0px;-webkit-margin-start:0px; }
    #brandstory_main .content             { bottom:auto;box-sizing:border-box;display:block;font-family:Arial, NanumGothic, 돋움, sans-serif;font-size:13px;font-stretch:normal;font-style:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-weight:normal;height:0px;left:auto;position:static;text-align:center;text-size-adjust:100%; }
    #brandstory_main .content article     { box-sizing:border-box;display:block;float:left;font-family:Arial, NanumGothic, 돋움, sans-serif;font-size:13px;font-stretch:normal;font-style:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-weight:normal;line-height:0px;margin-top:8vh;overflow-x:hidden;overflow-y:hidden;position:relative;text-align:center;text-size-adjust:100%; }
    #brandstory_main .content article img { width: 93.7vw; max-width: 93.7vw;}

    #qna { width: 100vw; max-width: 100vw; min-width: 100vw; }
    /* Q&A 테이블 그대로 가져 왔을 때
    .tb_lst{}
    ._qna_list_area{ width: 98vw; max-width: 98vw; min-width: 98vw; margin: 1vh 1vw 0 1vw;}
    #qna tr>:first-child { display: none; }
    #qna tr>:first-child+* {display: none;}
    #qna tr>:first-child+*+* {display: none;}
    #qna caption {display: none;}
    #qna .blind { display: none;}

    #qna tr>:first-child+*+*+* { width: 63vw; font-size: 0.75em; }
    #qna tr>:first-child+*+*+* a {max-width: 45vw; display: inline-block; overflow: hidden;}
    #qna tr>:first-child+*+*+*+* { width: 25vw; letter-spacing: -1px; text-align:center;}
    #qna tr>:first-child+*+*+*+*+* { width: 10vw; text-align:center;}
    #qna table a {text-decoration: underline; }
    table, tr, td { margin:0; padding:0; }
    [title="질문"] { display: none; }
    /* */

    #qna_list                       { will-change: contents; }
    #qna_list *                     { box-sizing: border-box;}
    #qna_list li,
    #qna_list li.answer_view::after { padding:10px 0 10px 5px; padding: 2vh 0 2vh 1.5vw; border-bottom: 2px solid #5a5a5a;}
    #qna_list li .img               { margin: 0 0 0 5px; margin: 0 0 0 1.5vw; display:inline-block; float:left; }
    #qna_list li .img,
    #qna_list li .img img           { max-width: 100px; max-width: 31.25vw; max-height:100px; max-height: 20.83vh; }
    #qna_list li .top               { max-width:100%; }
    #qna_list li .bottom            { max-width:100%; }
    #qna_list li span,
    #qna_list li a                  { display: inline-block;}
    #qna_list li .reply             { background:url(/images/icon_reply_complete.png) no-repeat; margin:0px 0 0 5px; margin:0 0 0 1.5vw; width: 45px; height:17.5px; text-indent: -9999px; color:transparent; background-size: 100% 100%; }
    #qna_list li .writer            { color:#765f4f;font-size:1em; }
    #qna_list li .date              { color:#765f4f;font-size:1em; }
    #qna_list li .subject           { margin:10px 0 0 5px; margin:2vh 0 0 1.5vw; display:inline-block; font-size:2em; color:#fff; line-height: 130%; }
    #qna_list li .product           { margin:2.5px 0 0 5px; margin:0.5vh 0 0 1.5vw; display:inline-block; font-size:1em; color:#7d7d7d; line-height: 120%; }
    #qna_list li .subject,
    #qna_list li .product           { min-width:176px; min-width:55vw; max-width:176px; max-width:55vw; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
    #qna_list li .secret            { background:url(/images/icon_lock.png) no-repeat; width:10px; height: 14px; background-size: 100% 100%; margin: 0 0 0 5px; }
    #qna_list li::after             { content:''; display: none; }
    #qna_list li.show               { border-bottom: none; }
    #qna_list li.show::after        { content: attr(data-content); display: list-item; white-space: pre-line; box-sizing: border-box; border-bottom: 2px solid #5a5a5a; padding-bottom: 10px; }

    body.view                   { width: 100vw; height: 100vw; overflow: hidden; position: relative; }
    #product_detail             { width: 100vw; height: 100vh; position:fixed; top:0; left:0; right:0; bottom:0; background: #000; z-index: 1000; display: none; }
    #product_view_header        { height: 8.4vh; border: 1px solid #979796; border-left:none; border-right: none; box-sizing: border-box; box-sizing: border-box; background: #000; padding: 3.2vh 0 0.75vh 12vw; font-size: 2vw; border-bottom: 1px solid #fff; position: relative; position: fixed; top: 0; width: 100vw; line-height: 100%; color: #fff; }
    #product_view_header+*      { margin-top: 8.4vh !important;}
    #product_detail :last-child { /*margin-bottom: 12.5vh; */ }

    #product_view               { width: 100vw; height: 87.5vh; overflow-x: hidden; overflow-y: scroll; background: #fff; color: #333; will-change: contents; }
    #product_view *             { max-width: 100vw; }
    #product_view .product_name { padding: 1.5vh 0 1.5vh 2vw; font-size: 1.25vw; border-bottom: 1px solid #fff;}
    #back                       { width: 4vw; height: 4.8vh; display:inline-block; position:absolute; top:1.35vh; left: 2.7vw; background: none; border: none;  }
    #back img                   { width: 4vw; height: 4.8vh; }

    #product_buttons                  { padding:0px 0 10px;text-align:center; width:100vw; background-color: #E9E9E9; height: 10.5vh; }
    #product_buttons button           {width: 150px; height: 40px;vertical-align:middle;box-sizing:border-box;background-color: #fff; border: 1px solid #d4d4d4; white-space:nowrap;box-sizing:border-box;font-family:'나눔고딕',NanumGothic,'애플산돌고딕네오',AppleSDGothicNeo,Helvetica,sans-serif !important;font-size:17px;font-weight: bold;}
    #product_buttons button span      { line-height:21px; }
    #product_buttons .talk_banner_div { display:inline-block;vertical-align:middle; width:150px; height:40px; line-height:100%;  box-sizing:border-box; }
    #product_buttons>*                {margin: 10px 0;}

    #product_price            { width:100%; text-align: center; color: #2a2027; height:0; overflow: hidden; width:100%; position: absolute; bottom: 12.4vh; display: none; will-change: auto; }
    #price_close              { color: #000; background: #fff; padding:5px 10px; margin-bottom: -5px; }
    #product_price table      { width:100%; padding:0 5%; margin:0 auto; border-top: 2px solid #E0E3E8; background:#fff; padding-top: 1vh;padding-bottom: 1vh; }
    #product_price table td   { line-height: 200%; border-bottom: 1px solid #F5F5F5; font-size: 3.5vw; }
    #product_price .mall_name { text-align: left;}
    #product_price .price     { text-align:right; color: #FC5653; }
    #product_price .price span {}
    #product_price .price span:first-child {}
    #product_price .link      { text-align: center; }
    #product_price .link a    { background: #3C3C3B; color: #fff; display: inline-block; padding: 5px 15px; line-height: 100%; }
    #product_price .link a span {}

    #price_body { will-change: contents; }

/* * /
}
/* */

/* tablet & desktop – 768px 이상 해상도에서 해석하는 코드 * /
@media ( min-width:768px ) {
    #wrap { width:1200px; margin:0 auto;}
}
/* */