/* BASIC css start */ /* iOS 11.0 버전*/ constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left) /*iOS 11.2 이상*/ env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) /* iOS 11.0 버전 */ constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left) /* iOS 11.2 이상 */ env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) #wrap{ padding: 15px 0 calc(constant(safe-area-inset-bottom) + 15px); padding: 15px 0 calc(env(safe-area-inset-bottom) + 15px); } .header{top:0; top:constant(safe-area-inset-top); top:env(safe-area-inset-top); right:0; right:constant(safe-area-inset-right); right:env(safe-area-inset-right);} .Launcherstyled__Wrapper-oef45p-0{ bottom: calc(3px + env(safe-area-inset-bottom)) !important; bottom: calc(3px + constant(safe-area-inset-bottom)) !important; right: -9px !important; } .category-tab { margin-bottom: 8vw; } @charset "utf-8"; @import url('//fonts.googleapis.com/earlyaccess/nanumgothic.css'); @import url('/design/skinfood/mobile_skinfood/css/jqueryui/black-tie/jquery-ui-1.8.16.custom.css'); @charset "utf-8"; @font-face { font-family: YoonGothic; src: url(/design/skinfood/mobile_skinfood/fonts/YoonGothic740.eot), url(/design/skinfood/mobile_skinfood/fonts/YoonGothic740.woff), url(/design/skinfood/mobile_skinfood/fonts/YoonGothic740.ttf); font-weight: normal; font-style: normal; } @font-face { font-family: YoonGothic; src: url(/design/skinfood/mobile_skinfood/fonts/YoonGothic780.eot), url(/design/skinfood/mobile_skinfood/fonts/YoonGothic780.woff), url(/design/skinfood/mobile_skinfood/fonts/YoonGothic780.ttf); font-weight: bold; font-style: normal; } @charset "utf-8"; #reviewForm li,#reviewScore .score-total ul li.review{ padding: 0; margin: 0;} .rb_thumbs img{display:none} .imgbox br{display:none} #join .sequence{ margin-bottom: 30px; margin-top: 10px;} #join .sequence li.now .fa-circle,#join .sequence li.now{color:#000} #join .sequence li{ font-size: 15px;} #join .join{ padding: 0 5vw !important; background:none !important; } #join .join .tableBox table .txt-input{ padding: 5.5833333333vw 5.8958333333vw 3.8333333333vw; height: 12.75vw; border-width: 0.3125vw; border-color: #ddd; border-style: solid; box-sizing: border-box; font-weight: bold; padding-top: 4vw; padding-left: 12px;} #terms_agree .terms-agree dt{padding-left:0 !important;} #terms_agree .terms-agree dd{margin: 0 !important; padding: 15px 0px !important;} .hide,.dn{display:none !important} input[type="checkbox"]{ margin-right: 5px !IMPORTANT; width: 21px !important; height: 21px !important; padding: 0 0 0 20px !IMPORTANT; background-image: url(/design/skinfood/skinfood/images/icon/icon_checkbox_default.png); background-repeat: no-repeat; background-position:left top !important; cursor:pointer; background-size: 20px !important; -webkit-appearance: inherit; } input[type="checkbox"]:checked{ background-image: url(/design/skinfood/skinfood/images/icon/icon_checkbox_active.png); background-repeat: no-repeat; background-position:left top !important; cursor:pointer; background-size: 20px !important; font-weight: bold; } input[type="radio"]{ background-image: url(/design/skinfood/skinfood/images/icon/icon_radio_default.png); background-repeat: no-repeat; background-position:left top !important; cursor:pointer; background-size: 20px !important; width: 21px !important; height: 21px !important; padding: 0 0 0 20px !IMPORTANT; -webkit-appearance: inherit; } input[type="radio"]:checked{ background-image: url(/design/skinfood/skinfood/images/icon/icon_radio_active.png); background-repeat: no-repeat; background-position:left top !important; cursor:pointer; background-size: 20px !important; font-weight: bold; } #keyword{ background: none; width: 100%; height: 100%; box-sizing: border-box; height: 7.2916666667vw;} * {/*-webkit-text-size-adjust:none; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;*/} *:focus { outline: none; } html, body {width:100%; height:100%; margin:0px;} html.auto {height:100%; overflow:auto;} html.overflow {height:100%; overflow:hidden;} body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, form, fieldset, legend, input, textarea, button, select {margin:0; padding:0; /*vertical-align:middle;*/} img {vertical-align:middle;} form {clear:both} legend {visibility:hidden; overflow:hidden; position:absolute; top:0; left:0; width:0; height:0; padding:0; font-size:0; line-height:0} body, select, button, table {font-family:'나눔고딕',NanumGothic,'맑은 고딕',Malgun Gothic,'돋움',Dotum,'굴림',Gulim,HelveticaNeue-Light,AppleSDGothicNeo-Light,sans-serif; font-size:12px; color:#515151;} input, textarea {font-family:'나눔고딕',NanumGothic,'맑은 고딕',Malgun Gothic,'돋움',Dotum,'굴림',Gulim,HelveticaNeue-Light,AppleSDGothicNeo-Light,sans-serif; font-size:12px; color:#515151;} input[type="text"]:disabled, input[type="date"]:disabled, input[type="tel"]:disabled { background: #eee !important; } input[type=text], input[type=number], input[type=tel], input[type=date], input[type=password] {border:1px solid #ccc; background:#fff; height:50px; border-radius: 0 !important; box-shadow: none !important;} input[type=button], input[type=image], input[type=submit], button {border-radius:0; -webkit-appearance:none;} textarea {border:1px solid #ddd; background:#fff; padding:5px;} select {border:1px solid #ddd; background:#fff; height:30px; padding-left:5px; border-radius: 0;} input[type=checkbox], input[type=radio] {margin:0px; padding:0px; height:12px;} img, fieldset {border:0} ul, ol {list-style:none} em, address {font-style:normal} a {text-decoration:none} label {cursor:pointer} .hand, .pointer {cursor:pointer} .underline {text-decoration:underline} .relative {position:relative} .absolute {position:absolute} .small {font-size:11px; letter-spacing:-1px;} .desc {font-size:11px; /*font-family:dotum;*/ color:#848484; letter-spacing:-1px;} .totalprice {color:#bb0000; font-size:18px; /*font-family:tahoma;*/} .hide {display:none;} .unvisibility {visibility:hidden;} .bold {font-weight:600;} .not600 {font-weight:normal;} .txt_spacing {letter-spacing:-1px} .input-box-default-text {color:#aaa !important; letter-spacing:-1px;} .cover {display:inline-block; -webkit-background-size:cover !important; -moz-background-size:cover !important; -o-background-size:cover !important; background-size:cover !important; text-indent:-9999px;} .m_center {margin:0 auto;} /* 하이퍼링크*/ a:link, a:visited, a:active {color:inherit;} a:hover {color:inherit; text-decoration:none;} /* 폰트 색상 */ .white {color:#fff !important;} .red {color:#fd454d !important;} .blue {color:#2c8ff0 !important;} .orange {color:#ff8000 !important;} .green {color:#40a040 !important;} .gray {color:#999 !important;} .black {color:#000 !important;} .tahoma {font-family:'tahoma' !important;} .fb-like {width:100px;} /* 좌, 우 여백설정*/ .mg0 {margin:0px !important} .mg5 {margin:5px !important} .mg10 {margin:10px !important} .mg15 {margin:15px !important} .mg20 {margin:20px !important} .mg25 {margin:25px !important} .mg30 {margin:30px !important} .mg40 {margin:40px !important} .mg50 {margin:50px !important} .mr0 {margin-right:0px !important} .mr5 {margin-right:5px !important} .mr10 {margin-right:10px !important} .mr15 {margin-right:15px !important} .mr20 {margin-right:20px !important} .mr25 {margin-right:25px !important} .mr30 {margin-right:30px !important} .mr40 {margin-right:40px !important} .mr50 {margin-right:50px !important} .ml0 {margin-left:0px !important} .ml5 {margin-left:5px !important} .ml10 {margin-left:10px !important} .ml15 {margin-left:15px !important} .ml20 {margin-left:20px !important} .ml25 {margin-left:25px !important} .ml30 {margin-left:30px !important} .ml40 {margin-left:40px !important} .ml50 {margin-left:50px !important} .mt0 {margin-top:0px !important} .mt3 {margin-top:3px !important} .mt5 {margin-top:5px !important} .mt10 {margin-top:10px !important} .mt15 {margin-top:15px !important} .mt20 {margin-top:20px !important} .mt25 {margin-top:25px !important} .mt30 {margin-top:30px !important} .mt40 {margin-top:40px !important} .mt50 {margin-top:50px !important} .mb0 {margin-bottom:0px !important} .mb5 {margin-bottom:5px !important} .mb10 {margin-bottom:10px !important} .mb15 {margin-bottom:15px !important} .mb20 {margin-bottom:20px !important} .mb25 {margin-bottom:25px !important} .mb30 {margin-bottom:30px !important} .mb40 {margin-bottom:40px !important} .mb50 {margin-bottom:50px !important} .pd0 {padding:0px !important} .pd5 {padding:5px !important} .pd7 {padding:7px !important} .pd10 {padding:10px !important} .pd15 {padding:15px !important} .pd20 {padding:20px !important} .pd30 {padding:30px !important} .pd40 {padding:40px !important} .pd50 {padding:50px !important} .pdl0 {padding-left:0px !important} .pdl5 {padding-left:5px !important} .pdl10 {padding-left:10px !important} .pdl30 {padding-left:30px !important} .pdl40 {padding-left:40px !important} .pdl50 {padding-left:50px !important} .pdr0 {padding-right:0px !important} .pdr5 {padding-right:5px !important} .pdr10 {padding-right:10px !important} .pdr30 {padding-right:30px !important} .pdr40 {padding-right:40px !important} .pdr50 {padding-right:50px !important} .pdt0 {padding-top:0px !important} .pdt3 {padding-top:3px !important} .pdt5 {padding-top:5px !important} .pdt10 {padding-top:10px !important} .pdt15 {padding-top:15px !important} .pdt20 {padding-top:20px !important} .pdt30 {padding-top:30px !important} .pdt40 {padding-top:40px !important} .pdt50 {padding-top:50px !important} .pdb0 {padding-bottom:0px !important} .pdb5 {padding-bottom:5px !important} .pdb10 {padding-bottom:10px !important} .pdb20 {padding-bottom:20px !important} .pdb30 {padding-bottom:30px !important} .pdb40 {padding-bottom:40px !important} .pdb50 {padding-bottom:50px !important} .wp100 {width:100%} .wp95 {width:95%} .wp92 {width:92%} .wp85 {width:85%} .wp30 {width:30%} .wp27 {width:27%} .wx300 {width:300px} .wx500 {width:500px} .wx150 {width:150px !important} .wx140 {width:140px !important} .wx110 {width:110px} .wx200 {width:200px} .wx250 {width:250px} .wx80 {width:80px} .wx70 {width:70px} .wx50 {width:50px} .wx30 {width:30px} .wx20 {width:20px} .hx50 {height:50px} .hx100 {height:100px} .hx150 {height:150px} .hx200 {height:200px} .hx250 {height:250px} .hx300 {height:300px} .hx350 {height:350px} .hx400 {height:400px} .hx450 {height:450px} .hx650 {height:650px} .fx11 {font-size:11px;} .fx12 {font-size:12px;} .fx13 {font-size:13px;} .fx14 {font-size:14px;} .fx15 {font-size:15px;} .fx16 {font-size:16px;} .fx17 {font-size:17px;} .fx18 {font-size:18px;} .fx19 {font-size:19px;} .fx20 {font-size:20px;} /* 배경색*/ .bg_gray {background-color:#f2f2f2;} .bg_white {background-color:#ffffff;} .bg_yellow {background-color:#FEF9E0 !important;} .bg_darkgray {background-color:#43474e;} /* 정렬*/ .left {text-align:left !important} .right {text-align:right !important} .center {text-align:center !important} .hide {display:none} /* 클리어부스*/ .fleft {float:left} .fright {float:right} .cboth {clear:both} .clearbox {*zoom:1;} .clearbox:after {content:""; display:block; clear:both;} /* 모바일 스타일*/ .box_style {border:1px solid #bebebe; background-color:#f7f7f7;} .button_style {border:1px solid #bebebe; background-color:#eeeeee; font-size:12px; height:40px; line-height:40px;} .gray_button_style {border:1px solid #333333; background-color:#666; color:#fff; font-weight:600; font-size:12px; height:40px; line-height:40px;} .bbs_button_style {border:1px solid #ccc; background-color:#fff; color:#333; font-weight:normal; font-size:12px; height:30px; line-height:30px;} .bbs_gray_button_style {border:1px solid #333333; background-color:#666; color:#fff; font-weight:normal; font-size:12px; height:30px; line-height:30px;} span.input_round_style {display:inline-block; height:28px; max-width:1000px; broder:0px; padding-right:5px; background:url("/design/skinfood/mobile_skinfood/images/design/input_round_right.gif") no-repeat right;} span.input_round_style input {height:28px; width:100%; line-height:28px; border:0px; text-indent:5px; padding-left:2px; background:url("/design/skinfood/mobile_skinfood/images/design/input_round_left.gif") no-repeat;} .btn_graybox {width:33px; height:33px; border:0px; background-color:#ddd; text-align:center; color:#555; /* border-radius:5px*/} .inputbox_large {display:inline-block; height:28px !important; line-height:30px !important; border:1px solid #ccc !important; padding-left:5px !important; padding-right:5px !important; } .inputbox_medium {display:inline-block; height:20px !important; line-height:22px !important; border:1px solid #ccc !important; padding-left:5px !important; padding-right:5px !important; } /* 모바일 레이아웃*/ #wrap {position:relative; min-width:320px; -moz-transition:width ease-in-out 0.5s 0.1s; /* for Firefox 15*/ -webkit-transition:width ease-in-out 0.5s 0.1s; /* for Chrome and Safari*/ transition:width ease-in-out 0.5s 0.1s;} #layout_side {position:fixed; height:100%; left:0px; top:0; bottom:0; overflow-x: hidden; display:none; z-index: 102;} #layout_side ul.top_navigation {background-color:/*#fafbfb*/#0278f8; border-top:1px solid /*#ccc*/#333; text-align:center;} #layout_side ul.top_navigation li {display:inline-block; margin-top:10px; width:60px; height:65px; text-align:center;} #layout_side ul.top_navigation li a {position:relative; display:block; width:100%; font-size:12px; color:/*#5c5c5c*/#fff; letter-spacing:-1px;} #layout_side ul.top_navigation li.tn_recently a {padding-top:40px; background:url('/design/skinfood/mobile_skinfood/images/design/ver2/ico_lately.png') no-repeat center 0; background-size:34px 34px;} #layout_side ul.top_navigation li.tn_cart a {padding-top:40px; background:url('/design/skinfood/mobile_skinfood/images/design/ver2/ico_cart.png') no-repeat center 0; background-size:35px 34px;} #layout_side ul.top_navigation li.tn_wish a {padding-top:40px; background:url('/design/skinfood/mobile_skinfood/images/design/ver2/ico_wish.png') no-repeat center 0; background-size:36px 34px;} #layout_side ul.top_navigation li.tn_delivery a {padding-top:40px; background:url('/design/skinfood/mobile_skinfood/images/design/ver2/ico_delivery.png') no-repeat center 0; background-size:38px 34px;} #layout_side ul.top_navigation li.tn_mypage a {padding-top:40px; background:url('/design/skinfood/mobile_skinfood/images/design/ver2/ico_mypage.png') no-repeat center 0; background-size:27px 34px;} #layout_side div.top_userinformation {position:relative; z-index:5; *zoom:1; height:42px; line-height:44px; padding:0 12px 0 12px; background-color:#fff; overflow:hidden;} #layout_side div.top_userinformation:after {content:""; display:block; clear:both;} #layout_side div.top_userinformation .welcome {position:absolute; left:10px; top:0; width:130px; white-space:nowrap; overflow:hidden;} #layout_side div.top_userinformation .joinbtn, #layout_side div.top_userinformation .logoutbtn, #layout_side div.top_userinformation .myinfobtn, #layout_side div.top_userinformation .loginbtn {float:right; margin-left:2px} #layout_side div.top_userinformation .joinbtn input, #layout_side div.top_userinformation .logoutbtn input, #layout_side div.top_userinformation .myinfobtn input, #layout_side div.top_userinformation .loginbtn input {padding:3px 5px; border:1px solid #b0b5bb; border-radius:2px; background-color:#fff; font-size:11px; color:#555;} #layout_side div.menu_navigation_wrap {} #layout_side div.menu_navigation_wrap ul.tab {*zoom:1; border-top:1px solid #bbb; background-color:#e6e6e6;} #layout_side div.menu_navigation_wrap ul.tab:after {content:""; display:block; clear:both;} #layout_side div.menu_navigation_wrap ul.tab li {float:left; width:50%; height:40px; line-height:40px; text-align:center; box-sizing:border-box; background-color:#f6f6f6; border-left:1px solid #bbb; border-bottom:1px solid #bbb; font-size:13px; font-weight:600; cursor:pointer} #layout_side div.menu_navigation_wrap ul.tab li:first-child {border-left:none; width:50%;} #layout_side div.menu_navigation_wrap ul.tab li.current {background-color:#fff; border-bottom:none; color:#000} #layout_side div.menu_navigation_wrap ul.menu {} #layout_side div.menu_navigation_wrap ul.menu li.mitem {position:relative; border-bottom:1px solid #ddddd9; *zoom:1; padding-right:5px;} #layout_side div.menu_navigation_wrap ul.menu li.mitem:after {content:""; display:block; clear:both;} #layout_side div.menu_navigation_wrap ul.menu li.mitem a.mitem_title {width:100%; max-width:170px; padding-left:30px; display:block; float:left; box-sizing:border-box; padding-top:13px; padding-bottom:11px; min-height:40px; font-size:13px; color:#333; font-weight:400; letter-spacing:-1px; cursor:pointer} #layout_side div.menu_navigation_wrap ul.menu li.mitem_contents {position:relative; border-bottom:1px solid #ddddd9; *zoom:1; padding:10px;} #layout_side div.menu_navigation_wrap ul.menu li.mitem_contents ul.brandsort {width:calc(100% - 10px); border:1px solid #c6c6c6; border-radius:3px; overflow:hidden; margin:auto; *zoom:1; white-space:nowrap;} #layout_side div.menu_navigation_wrap ul.menu li.mitem_contents ul.brandsort:after {content:""; display:block; clear:both;} #layout_side div.menu_navigation_wrap ul.menu li.mitem_contents ul.brandsort li {float:left; width:calc(100% / 3); box-sizing:border-box; border-left:1px solid #c6c6c6; background-color:#f7f7f7; color:#676767; height:35px; line-height:35px; text-align:center; cursor:pointer} #layout_side div.menu_navigation_wrap ul.menu li.mitem_contents ul.brandsort li:first-child {border-left:none} #layout_side div.menu_navigation_wrap ul.menu li.mitem_contents ul.brandsort li.current {background-color:#fff; color:#000; font-weight:600;} #layout_side div.menu_navigation_wrap ul.menu li.mitem_contents ul.brandsort_words {width:238px; margin:6px auto 6px auto; *zoom:1;} #layout_side div.menu_navigation_wrap ul.menu li.mitem_contents ul.brandsort_words:after {content:""; display:block; clear:both;} #layout_side div.menu_navigation_wrap ul.menu li.mitem_contents ul.brandsort_words li {float:left; box-sizing:border-box; width:30px; height:30px; margin:6px 2px 0 2px; text-align:center; line-height:28px; font-weight:600; border-radius:15px; border:1px solid #b9b9b9; background-color:#f2f2f2; color:#454545; cursor:pointer} #layout_side div.menu_navigation_wrap ul.menu li.mitem_contents ul.brandsort_words li.current {border:1px solid /*#676771*/#b9b9b9; background-color:/*#757897*/#b9b9b9; color:#ffffff;} #layout_side div.menu_navigation_wrap ul.menu li.mitem_brand {display:none} #layout_side div.menu_navigation_wrap ul.menu li.mitemicon1 {background:url('/design/skinfood/mobile_skinfood/images/design/ico_arw_open.png') no-repeat 12px 18px; background-size:11px 7px} #layout_side div.menu_navigation_wrap ul.menu li.mitemicon2 {background:url('/design/skinfood/mobile_skinfood/images/design/ico_arw_close.png') no-repeat 12px 18px; background-size:11px 7px} #layout_side div.menu_navigation_wrap ul.menu li.mitemicon3 {background:url('/design/skinfood/mobile_skinfood/images/design/ico_arw_direct.png') no-repeat 15px 15px; background-size:7px 11px} #layout_side div.menu_navigation_wrap ul.menu li.mitem_subcontents {display:none;} #layout_side div.menu_navigation_wrap ul.menu li.mitem_subcontents ul.submenu {background-color:#f5f5f5; clear:both;} #layout_side div.menu_navigation_wrap ul.menu li.mitem_subcontents ul.submenu li.submitem {position:relative; border-bottom:1px solid #ddddd9; *zoom:1; padding-right:5px;} #layout_side div.menu_navigation_wrap ul.menu li.mitem_subcontents ul.submenu li.submitem:after {content:""; display:block; clear:both;} #layout_side div.menu_navigation_wrap ul.menu li.mitem_subcontents ul.submenu li.submitem a.submitem_title {width:100%; max-width:160px; padding-left:30px; display:block; float:left; box-sizing:border-box; padding-top:13px; padding-bottom:11px; min-height:40px; font-size:13px; color:#333; letter-spacing:-1px; cursor:pointer} #layout_side div.menu_navigation_wrap ul.menu li.mitem_subcontents ul.submenu li.submitem .submitem_contents {display:block; box-sizing:border-box; padding:10px; font-size:12px; color:#333; letter-spacing:-1px;} #layout_side div.menu_navigation_wrap ul.menu li.mitem_subcontents ul.bestbrands {padding:6px 0; width:252px; *zoom:1; text-align:left; margin:auto;} #layout_side div.menu_navigation_wrap ul.menu li.mitem_subcontents ul.bestbrands:after {content:""; display:block; clear:both} #layout_side div.menu_navigation_wrap ul.menu li.mitem_subcontents ul.bestbrands li {float:left; margin:0 2px} #layout_side div.menu_navigation_wrap ul.menu li.mitem_subcontents ul.bestbrands li a {display:block; width:80px; height:60px; line-height:60px; background-color:#fff; vertical-align:middle; text-align:center; margin:3px 0; white-space:nowrap; overflow:hidden;} #layout_side div.menu_navigation_wrap ul.menu li.mitem_subcontents ul.bestbrands li a img {max-width:70px; max-height:50px;} #layout_side div.menu_navigation_wrap ul.menu li.mitem_subcontents div.bestbrands_paging {text-align:center;} #layout_side div.menu_navigation_wrap ul.menu li.mitem_subcontents div.bestbrands_paging ul {margin-bottom:6px;} #layout_side div.menu_navigation_wrap a.mitem_favorite {float:right; margin-top:3px; margin-right:5px; width:20px; height:20px; background:url('/design/skinfood/mobile_skinfood/images/design/ico_fvr_off.png') no-repeat; background-size:20px 20px; cursor:pointer} #layout_side div.menu_navigation_wrap a.mitem_favorite_on {background:url('/design/skinfood/mobile_skinfood/images/design/ico_fvr_on.png') no-repeat; background-size:20px 20px;} #layout_side div.menu_navigation_wrap a.mitem_goodsview {float:right; margin-right:5px; padding:5px 5px; border:1px solid #b0b5bb; border-radius:2px; background-color:#fff; font-size:11px; color:#555; letter-spacing:-1px} #layout_side #category_favorite_alert {display:none; position:fixed; left:35px; top:35%; width:200px; height:200px; background:url('/design/skinfood/mobile_skinfood/images/design/alert_bg.png') no-repeat; background-size:200px 200px;} #layout_side #category_favorite_alert .cfa_on {position:absolute; left:50%; top:50%; margin-left:-34px; margin-top:-55px; width:68px; height:66px; background:url('/design/skinfood/mobile_skinfood/images/design/ico_fvr_big_on.png') no-repeat; background-size:68px 66px;} #layout_side #category_favorite_alert .cfa_off {position:absolute; left:50%; top:50%; margin-left:-34px; margin-top:-55px; width:68px; height:66px; background:url('/design/skinfood/mobile_skinfood/images/design/ico_fvr_big_off.png') no-repeat; background-size:68px 66px;} #layout_side #category_favorite_alert .cfa_msg {position:absolute; left:0; top:65%; width:100%; text-align:center; font-size:13px; color:#fff; font-weight:600;} /* #side_close {display:none; position:absolute; left:270px; top:0; background:url("/design/skinfood/mobile_skinfood/images/design/ver2/top_close.png") no-repeat center; background-size:28px 28px; width:42px; height:42px; text-indent:-9999px; z-index:5;} */ #layout_side_background {z-index:101; background-color:#000; opacity:0.5; filter:alpha(opacity=50); position:fixed; left:0px; top:0px; width:100%; height:200%; display:none;} #layout_wrap {position:relative; top:0; left:0;} #layout_header {position:relative; background-color:#fff;} #layout_header h1 {} #layout_header h1 a {color:#fff;} #layout_header a[href='#category'] {position:absolute; left:0; top:0;} #layout_header a[href='#cart'] {} #layout_header a[href='#search'] {} #layout_header .top_menu {background:url("/design/skinfood/mobile_skinfood/images/design/ver2/top_menu.png") no-repeat center; background-size:28px 24px; width:42px; height:42px; text-indent:-9999px;} #layout_header .top_cart {background:url("/design/skinfood/mobile_skinfood/images/design/ver2/top_cart.png") no-repeat center; background-size:25px 24px; width:44px; height:42px; text-indent:-9999px;} #layout_header .top_search {background:url("/design/skinfood/mobile_skinfood/images/design/ver2/top_search.png") no-repeat center; background-size:22px 24px; width:40px; height:42px; text-indent:-9999px;} #layout_header .top_close {background:url("/design/skinfood/mobile_skinfood/images/design/ver2/top_search_close.png") no-repeat center; background-size:24px 24px; width:42px; height:42px; text-indent:-9999px;} /* #layout_header ul {position:absolute; top:5px; right:5px; height:23px; white-space:nowrap;} #layout_header ul li {float:left; background:url('/design/skinfood/mobile_skinfood/images/design/header_gnb_bar.gif') no-repeat right 5px;} #layout_header ul li a {display:block; padding:5px 7px;} */ /* #layout_header form.search_form {} #layout_header form.search_form .search_text {box-sizing:border-box; width:100%; height:30px; line-height:30px; border:1px solid #999; text-indent:5px; background:none; background-color:#fff;} #layout_header form.search_form .search_text_bg {box-sizing:border-box; background:url('/design/skinfood/mobile_skinfood/images/design/input_i_search.png') no-repeat 7px 7px; background-color:#fff; background-size:16px 16px;} #layout_header form.search_form .search_btn {border:1px solid #1e4097; border-radius:5px; background-color:#2180e9; color:#fff; width:45px; height:30px;} */ #layout_body {} #layout_footer {} #layout_footer ul.fnb {text-align:center; padding-top:10px;} #layout_footer ul.fnb li {display:inline-block; font-size:14px;} #layout_footer ul.fnb li:first-child {background:none; padding-left:0px;} #layout_footer ul.fcp {text-align:left; padding:12px 10px 0 0; line-height:16px} #layout_footer ul.fcp li {display:inline-block; padding-left:10px; font-size:11px; color:#999;} #layout_footer ul.fcp li a {color:#888;} #layout_footer ul.fnav {text-align:center; padding:0; line-height:16px} #layout_footer ul.fnav li {display:inline-block; font-size:11px; color:#999; padding:0;} #layout_footer ul.fnav li span {display:inline-block; padding:0 3px 0 0; color:#ccc;} #quick_layer {position:fixed; z-index:100; bottom:0px; left:0px; width:100%;} #quick_layer table.common_quick {width:100%; border-collapse:collapse; border-top:2px solid #c5c6c7;} #quick_layer table.common_quick td {border:1px solid #d2d3d4; background-color:#e1e2e3; height:50px;} #quick_layer table.common_quick td a {display:block; width:100%; vertical-align:middle; color:#7a8285; text-align:center; font-size:13px; letter-spacing:-1px} /* 모바일 상품디스플레이 타이틀*/ .goods_display_title {border-top:1px solid #ddd; border-bottom:1px solid #ddd; background-color:#f5f5f5; *zoom:1; margin-bottom:5px;} .goods_display_title:after {content:""; display:block; clear:both;} .goods_display_title .gdt_title {float:left; padding-left:10px; height:35px; line-height:35px; font-size:14px; color:#000;} .goods_display_title .gdt_more {float:right; padding-right:7px; height:35px; line-height:38px; color:#666;} /* 모바일 서브페이지 버튼바*/ .sub_title_button_bar {position:relative; height:40px;} .sub_title_button_tb {height:100%; width:100%; text-align:center; table-layout:fixed; background-color:#fff; border-bottom:1px solid #616775;} .sub_title_button_tb th, .sub_title_button_tb td {line-height:16px; background-color:#efefef; font-size:12px; /*font-family:Dotum;*/ font-weight:normal; color:#999; letter-spacing:-1px; font-weight:normal; border-left:1px solid #ccc; cursor:pointer;} .sub_title_button_tb td:first-child {border-left:none;} .sub_title_button_tb span {font-size:14px; /*font-family:tahoma;*/ font-weight:600; color:#888;} .sub_title_button_tb .sel {background-color:#616775; font-size:12px; font-weight:600; color:#fff;} .sub_title_button_tb .sel span {color:#fff;} /* 모바일 일반리스트 스타일*/ .normal_list {} .normal_list > li {position:relative; background-color:#fff;} /*.normal_list li.even {background-color:#f5f5f5;} .normal_list li {background-color:#e5e5e5;}*/ .normal_list > li > a:first-child {display:block; padding:14px; font-size:12px; border-bottom:1px solid #ddd; background:url('/design/skinfood/mobile_skinfood/images/design/list_arrow.gif') no-repeat right 20px center;} .normal_list > li.arrow-up > a:first-child {background:url('/design/skinfood/mobile_skinfood/images/design/icon_arrow_up.gif') no-repeat right 20px center;} .normal_list > li.arrow-down > a:first-child {background:url('/design/skinfood/mobile_skinfood/images/design/icon_arrow_down.gif') no-repeat right 20px center;} .normal_list > li > a.option_btn {position:absolute; width:40px; height:100%; margin-left:-40px; left:100%; top:0px;} .normal_list > li > .nl_contents {display:none; border-top:1px solid #ccc; border-bottom:2px solid #ccc;} /* 모바일 카테고리 리스트 스타일*/ .category_list {} .category_list li {position:relative; background-color:#ffffff;} .category_list li.even {background-color:#ebebeb;} .category_list li > a:first-child {display:block; height:40px; line-height:40px; padding-left:12px; font-size:12px; border-bottom:1px solid #d9d9d9;} .category_list li > a.option_btn {position:absolute; width:34px; margin-left:-37px; left:100%; top:3px;} .category_list_depth {*zoom:1; padding:5px; background-color:#818181;} .category_list_depth:after {content:""; display:block; clear:both;} .category_list_depth li {float:left; background:url('/design/skinfood/mobile_skinfood/images/design/bullet_category.gif') no-repeat left center; padding:0 12px 0 20px;} .category_list_depth li:first-child {background:none; padding-left:5px;} .category_list_depth li a {font-size:14px; display:block; min-height:28px; line-height:28px; font-weight:600; color:#fff;} /* 모바일 장바구니 상품리스트 스타일*/ .cart_list { line-height:17px;} .cart_list .goods_name { display:inline-block; width:80%; font-size:14px; color:#000; font-weight:600; letter-spacing:-1px; word-wrap:break-word; word-break:break-all;/*white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis;*/ vertical-align:middle} .cart_list .cart_goods { border:1px solid #d9d9d9; border-top-width:0px; background-color:#fff;} .cart_list .cart_goods:first-child {border-top:1px solid #d9d9d9; } .cart_list .cart_ea {float:left; margin:0 0 5px;} .cart_list .cart_price {/*float:right;*/ margin:0 0 5px;} .cart_list .cart_price_num {} .cart_list .cart_option { color:#646464; padding-bottom:5px;} .cart_list .cart_goods_suboption {/* width:calc(100% - 30px); margin:0 auto; padding:0 10px;*/} .cart_list .cart_goods_suboption_under {border-top:1px solid #d9d9d9;} .cart_list .cart_goods_detail { padding:5px 10px; position:relative;} .cart_list .cart_goods_detail .btn_select_del {position:absolute; top:10px; right:10px; background:url('/design/skinfood/mobile_skinfood/images/icon/ico_del.png') no-repeat; background-color:transparent; width:12px; height:12px; background-size:12px 12px; border:0px; text-indent:-1000px; overflow:hidden;} .cart_list .cart_goods_sum {padding:10px 0 15px; text-align:center;} .cart_list .sum_price { font-size:15px; font-weight:600; /*font-family:tahoma;*/ letter-spacing:-0px;} .cart_list .goods_delivery_info {border:1px solid #d9d9d9; background-color:#fff; padding:8px 15px; margin-top:5px;} .cart_list .cart_sale_detail_table {border:1px solid #ddd; background-color:#f6f6f6; padding:7px; margin:5px 0;} .cart_list .cart_sale_detail_table table td {font-size:12px} /* .cart_contents {padding:10px; background-color:#f1f2f5;} */ .cart_contents .contents_area { border:1px solid #d9d9d9; background-color:#fff; } button.btn_select_all, button.btn_select_wishlist { border:0 } button.btn_ea_modify { border:0 } button.btn_select_del { cursor:pointer;} .btn_wrap {/*position:fixed; left:0; bottom:0;*/ width:100%; border-top:1px solid #ccc; background:#f1f2f5; padding:5px 0; z-index:1001; text-align:center;} /* 모바일 결제화면 상품리스트 스타일*/ .settle_cart_list {line-height:17px;} .settle_cart_list .goods_name {display:inline-block; font-size:14px; color:#000; font-weight:normal; letter-spacing:-1px; word-wrap:break-word; word-break:break-all;/*white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis;*/ vertical-align:middle} .settle_cart_list .cart_goods_detail { position:relative;} .settle_cart_list .cart_goods_detail .btn_select_del {position:absolute; right:10px; top:10px; background:url('..images/icon/ico_del.png') no-repeat; background-color:transparent; width:12px; height:12px; background-size:12px 12px; border:0px; text-indent:-1000px; overflow:hidden;} .settle_cart_list .cart_goods_sum {/*border-top:1px solid #d9d9d9; padding:5px 10px; background-color:#fbfbfb;*/} .settle_cart_list .cart_price_num {letter-spacing:-1px;} .settle_cart_list .sum_price {float:right; margin:0 0 5px;} .settle_cart_list .item_suboption {/* width:calc(100% - 30px); margin:0 auto; padding:0 10px;*/} .settle_cart_list .item_suboption .sum_price, .settle_cart_list .item_suboption .sum_price span {color:#000; font-size:12px;} .settle_cart_list .item_sum {border-top-width:1px; color:#000; font-size:16px; font-weight:600; letter-spacing:-1px; text-align:right; height:40px; line-height:40px;} .settle_cart_list .item_sum span {color:#e75829; letter-spacing:0px;} .settle_cart_list .item_shipping {padding:0px 10px; background-color:#ddd; line-height:30px; height:30px;} .settle_cart_list .goods_delivery_info {border:1px solid #d9d9d9; background-color:#fff; padding:8px; margin-top:5px;} .settle_cart_list .shipping_info {border:1px solid #d9d9d9; background-color:#fff; padding:8px; /*margin-top:5px;*/} .settle_cart_list .goods_delivery_info:first-child {margin-top:0px;} .settle_cart_list .cart_sale_detail_table {border:1px solid #ddd; background-color:#f6f6f6; padding:7px;} .settle_cart_list .cart_sale_detail_table table td {font-size:12px} .total_sum_price {padding:5px 0 !important;} /* 주문상세내역 PC 버젼 변경 스타일*/ /* .settle_cart_list li { padding:10px;} */ .settle_cart_list .item_step_cell {height:30px; line-height:30px; padding-top:0; padding-bottom:0; font-size:14px; color:#427fed; border-bottom:1px solid #e4e4e4; background-color:#f5f5f5;/*margin-bottom:5px;*/} /* 모바일 결제화면 쿠폰 테이블*/ .settle_coupon_table {border-collapse:collapse; margin-bottom:5px;} .settle_coupon_table tr th {border:1px solid #ddd; text-align:left; background-color:#f5f7f6; padding:8px;} .settle_coupon_table tr td {border:1px solid #ddd; border-left:none; padding:8px;} .settle_coupon_table tr td:first-child {border-left:1px solid #ddd; border-right:none;} /* 모바일 서브페이지 항목 제목*/ .sub_division_title {position:relative; height:13.5416666667vw; line-height:13.5416666667vw; box-sizing:border-box; font-weight:bold; font-size:4.375vw; color:#fff; cursor:pointer;} .sub_division_title span {font-size:13px; font-weight:normal;} .sub_division_title .sub_division_arw {position:absolute; right:13px; top:13px; background:url('/design/skinfood/mobile_skinfood/images/design/btn_arw_up_w.png') no-repeat; background-size:15px 15px; width:15px; height:15px;} .sub_division_title .sub_division_arw.closed {background:url('/design/skinfood/mobile_skinfood/images/design/btn_arw_dn_w.png') no-repeat; background-size:15px 15px;} .sub_division_title .sub_division_arw_x {position:absolute; right:5.7291666667vw; top:50%; background:url("/design/skinfood/mobile_skinfood/images/icon/icon_popup_close.png") no-repeat; background-size:cover; width:5.1041666667vw; height:5vw; transform: translateY(-50%);} .sub_division_contents { padding:0;} /* .sub_division_contents .sub_division_item {padding:5px 10px; background-color:#fff; min-height:30px; line-height:30px; border-top:1px dotted #d0d0d0;} */ .sub_division_contents .sub_division_item_sub {border-top:1px dashed #ddd; background-color:#f0f0f0; padding:5px 10px;} .sub_division_contents .sub_division_item .fleft {letter-spacing:-1px;} .sub_division_contents .sub_division_item_title {padding:0 10px; background-color:#d3d7d8; height:30px; line-height:30px; border-top:1px dashed #c2c6c9; color:#444; font-weight:600;} .sub_division_contents .sub_division_item_sum {padding:0 10px; background-color:#dee1e2; height:35px; line-height:35px; /*border-top:1px dashed #fff;*/} .sub_division_contents .sub_division_item_lastsum {padding:0 10px; background-color:#5d657a; height:45px; line-height:45px; color:#fff; font-sizE:14px; border-top:1px dotted #d6d8d7} .sub_division_contents .sub_division_item_lastsum span.settle_price {color:#fc7500; font-weight:600;} .sub_division_contents .sub_division_item_lastsum:first-child {border-top:0px;} .sub_division_contents ul .sub_division_item:first-child {border-top:none;} /* 모바일 결제화면 결제수단 테이블*/ .payment_method_select {padding:5px 0 10px 0; background-color:#f5f6f8; *zoom:1;} .payment_method_select:after {content:""; display:block; clear:both;} .payment_method_select li {float:left; width:50%; font-size:13px; font-weight:600; color:#4a4a4a} .payment_method_select li.selected {background:url('/design/skinfood/mobile_skinfood/images/design/i_check.png') no-repeat 5px center; background-size:17px 12px; background-color:#c1c6ca; color:#fff} /* .payment_method_select li label {display:block; width:100%; height:34px; line-height:34px; margin:-2px; text-indent:30px;} */ .payment_method_select li label input {display:none;} .payment_detail_table {width:100%; border-collapse:collapse; background:#fff;} .payment_detail_table th {border:1px solid #ddd; background:#f5f6f8; text-align:center; font-weight:normal;} .payment_detail_table td {padding-top:5px; height:30px; } /* 마이페이지 인덱스*/ .mypage_member {height:25px; line-height:30px; text-align:center; font-size:14px; color:#4a4a4a} .mypage_member .username {font-weight:bold; color:#4a4a4a} .mypage_member .usergroup {font-weight:bold; color:#007cd2} .mypage_list_table1 {border-collapse:collapse; table-layout:fixed; border:1px solid #ddd;} .mypage_list_table1 td {height:40px; line-height:40px; padding-left:10px; border:1px solid #ddd; background-color:#fff; cursor:pointer} .mypage_list_table1 th {height:40px; line-height:42px; background-color:#575e68; text-align:left; padding-left:10px; font-size:13px; font-weight:600; color:#fff;} .mypage_list_table1 td > div {position:relative; width:100%; height:100%;} .mypage_list_table1 td .icon {/*position:absolute; top:15px; left:6px;*/} .mypage_list_table1 td .title {/*position:absolute; bottom:12px; left:7px; */font-size:12px; color:#4a4a4a; font-weight:600;} .mypage_list_table1 td .count {position:absolute; top:0; right:7px; font-size:16px; /*font-family:tahoma;*/ color:#f05f30; font-weight:600;} .mypage_list_table1 td .num {font-size:12px; font-weight:normal} .mypage_list_table1 td, .mypage_list_table1 td a {font-size:12px; font-weight:600; color:#4a4a4a;} .mypage_list_table2 th {height:40px; line-height:42px; background-color:#575e68; text-align:left; padding-left:10px; font-size:13px; color:#fff; font-weight:600;} .mypage_list_table2 {border-collapse:collapse; table-layout:fixed; border:1px solid #ddd; font-weight:600; font-size:14px;} .mypage_list_table2 td.cell {background-color:#fff; border:1px solid #ddd; padding:12px;} .mypage_list_table2 td .count {font-size:16px; /*font-family:tahoma;*/ color:#f05f30; font-weight:600;} .mypage_list_table2 td .num {font-size:12px; font-weight:normal; color:#f05f30;} .mypage_list_table3 {border:1px solid #ddd; border-collapse:collapse; table-layout:fixed} .mypage_list_table3 th {border:1px solid #e1e1e1; height:40px; text-align:left; padding-left:10px; background:#fafafa url('');} .mypage_list_table3 td {border:1px solid #e1e1e1; height:40px; text-align:left; padding-left:10px; background:url('/design/skinfood/mobile_skinfood/images/common/my_i_arw.jpg') no-repeat right 10px center; background-size:6px 11px; background-color:#fff;} .mypage_list_table3 td, .mypage_list_table3 td a {font-size:12px; font-weight:600; vertical-align:middle; color:#4a4a4a;} .mypage_list_table3 tr td:first-child {border-left:none} .mypage_list_table3 tr:first-child td {border-top:none} /* 고객센터 인덱스 */ .cs_list_table .icon_cs {display:inline-block; margin-bottom:7px; width:30px; height:30px; background:#969696;} .cs_list_table {margin-top:2px; border:1px solid #e1e1e1; border-collapse:collapse; table-layout:fixed} .cs_list_table td {border-left:1px solid #f0f0f0; border-top:1px solid #f0f0f0; height:90px; text-align:center; background-color:#fff; cursor:pointer} .cs_list_table td, .cs_list_table td a {font-size:13px; font-weight:600; color:#4a4a4a;} .cs_list_table tr td:first-child {border-left:none} .cs_list_table tr:first-child td {border-top:none} .cs_info {font-weight:600;} .cs_info th, .cs_info td {text-align:left; padding:10px 0; border-top:1px solid #e0e2e1} .cs_info tr:first-child th, .cs_info tr:first-child td {border-top:none;} .cs_info th {text-align:left; width:60px; font-size:14px; color:#c0c4c5; letter-spacing:-1px} .cs_info td {text-align:left; padding-left:16px; font-size:16px;} /* 모바일 마이페이지 주문리스트*/ .order_list_table {border-collapse:collapse;/* margin-top:10px;*/} .order_list_table th.cell, .order_list_table td.cell {border:1px solid #aaaaaa} .order_list_table th.cell {background:url('/design/skinfood/mobile_skinfood/images/design/btn_arw_r_w.png') no-repeat right; background-size:15px 15px; background-position:99%; background-color:#fff; height:32px; line-height:17px; padding:0 12px; font-weight:normal; text-align:left; font-size:12px; color:#4b4b4b; /*font-family:tahoma;*/} .order_list_table th.cell b {font-weight:600; font-size:14px; /*font-family:tahoma;*/} .order_list_table th.goods_delivery_info { background-color:#fff; padding:8px; margin-top:5px;} .order_list_table td.cell {background-color:#fff; height:36px; padding:10px 12px; font-size:12px; color:#000} .order_list_table td.cell b {font-weight:600; font-sizE:14px;} .order_list_table td.item_cell {padding:10px 12px; border-top:1px dashed #ddd; border-bottom:1px dashed #aaa; border-left:1px solid #aaa; border-right:1px solid #aaa; background-color:#fff} .order_list_table td.step_cell {height:30px; line-height:30px; padding-top:0; padding-bottom:0; font-size:14px; color:#427fed; border-top:1px solid #e4e4e4; background-color:#f5f5f5;} .order_list_table td.suboption_wrap {border-top:1px solid #e4e4e4;} .order_list_table td.status_cell {background-color:#dfdfdf; height:42px; line-height:42px; padding:0 10px; border:1px solid #aaa; border-top:none} .order_list_table td.status_cell .mstep {color:#0050d2; font-size:14px} .order_list_table td.price_cell {background-color:#fbfbfb; height:32px; line-height:32px; padding:0 10px; border-left:1px solid #aaa; border-right:1px solid #aaa; color:#383838} .order_list_table tr:last-child td.item_cell {border-bottom:1px solid #aaaaaa;} /* 모바일 회원약관동의*/ .agreement_division {margin-bottom:0;} .agreement_header {position:relative; *zoom:1;border-top:1px solid #aaa; border-bottom:1px solid #ddd; background-color:#fff;} .agreement_header:after {content:""; display:block; clear:both;} .agreement_header .agreement_title {float:left; color:#000; line-height:40px; height:40px; padding-left:10px; font-weight:600;} .agreement_header .agreement_title .fold_icon {margin-left:7px; display:inline-block; width:15px; height:20px; background:url('/design/skinfood/mobile_skinfood/images/design/btn_arw_dn.png') no-repeat; background-size:15px 15px; background-position:0 8px;} .agreement_header .agreement_btn {float:left; line-height:23px; padding-top:6px; margin-top:3px; margin-bottom:3px; margin-right:10px;} .agreement_contents {display:block; border:1px solid #b6b6b6; height:120px; overflow:hidden; overflow-y:auto; padding:10px; margin:10px 10px 0;} .agreement_division_opened {background:#f1f1f1; padding-bottom:10px;} .agreement_division_opened .agreement_contents {display:block; background:#fff;} .agreement_division_opened .agreement_title .fold_icon {background:url('/design/skinfood/mobile_skinfood/images/design/btn_arw_up.png') no-repeat; background-size:15px 15px; background-position:0 8px;} .sub_page_tab {border-collapse:collapse; table-layout:fixed} .sub_page_tab td {background-color:#efefef; color:#858585; font-size:14px; height:40px; text-align:center; border-top:1px solid #999; border-bottom:1px solid #999; cursor:default; letter-spacing:-1px} .sub_page_tab td.current {background-color:#fff; color:#333; font-weight:600; border-left:1px solid #999; border-top:1px solid #999; border-right:1px solid #999; border-bottom:none} .sub_page_tab_contents {padding:20px 15px; letter-spacing:-1px; line-height:1.2em} /* 페이지네이션*/ .pagination {display:block; margin:5px auto 0 auto; width:100px; text-align:center;} .pagination li {list-style:none; margin:0px 1px; display:inline-block;} .pagination li a {width:12px; height:0px; overflow:hidden; padding-top:12px; display:block; background-image:url("/design/skinfood/mobile_skinfood/images/design/slide-pagination.png");} .pagination li.current a {background-position:0px -12px;} /* 상품목록 상단*/ .goods_list_top {padding:0 10px; border-bottom:1px solid #b9b9b9; background:#f3f3f3; height:40px; line-height:40px; z-index:999;} .goods_list_top .list_summary {font-size:11px; /*font-family:tahoma;*/ color:#9b9b9b} .goods_list_top .list_summary b {color:#000;} .goods_list_top .sort_item {font-size:11px; letter-spacing:-1px; /*font-family:dotum;*/} .goods_list_top .sort_item a {color:#606060} .goods_list_top .sort_item a b {font-weight:600; color:#d43c00} .goods_list_top ul.list_style {float:right; *zoom:1; margin:10px 0; border-left:1px solid #b9b9b9; padding-left:10px;} .goods_list_top ul.list_style:after {content:""; display:block; clear:both;} .goods_list_top ul.list_style li {/*float:left;*/ display:none; border-left:1px solid #d2d2d2;} .goods_list_top ul.list_style li.current {display:block; background-color:#0278f8;} .goods_list_top ul.list_style li:first-child {border-left:none;} .goods_list_top ul.list_style li a {display:block; width:21px; height:21px; text-indent:-9999px;} .goods_list_top ul.list_style li a.style_list {background:url('/design/skinfood/mobile_skinfood/images/design/ico_sort_list.png') no-repeat center center; background-size:21px 21px;} .goods_list_top ul.list_style li a.style_grid {background:url('/design/skinfood/mobile_skinfood/images/design/ico_sort_grid.png') no-repeat center center; background-size:21px 21px;} .goods_list_top ul.list_style li a.style_center {background:url('/design/skinfood/mobile_skinfood/images/design/ico_sort_center.png') no-repeat center center; background-size:21px 21px;} .goods_list_top ul.list_style li a.style_full {background:url('/design/skinfood/mobile_skinfood/images/design/ico_sort_full.png') no-repeat center center; background-size:21px 21px;} .goods_list_top ul.list_style li.current a.style_list {background:url('/design/skinfood/mobile_skinfood/images/design/ico_sort_list_on.png') no-repeat center center; background-size:21px 21px;} .goods_list_top ul.list_style li.current a.style_grid {background:url('/design/skinfood/mobile_skinfood/images/design/ico_sort_grid_on.png') no-repeat center center; background-size:21px 21px;} .goods_list_top ul.list_style li.current a.style_center {background:url('/design/skinfood/mobile_skinfood/images/design/ico_sort_center_on.png') no-repeat center center; background-size:21px 21px;} .goods_list_top ul.list_style li.current a.style_full {background:url('/design/skinfood/mobile_skinfood/images/design/ico_sort_full_on.png') no-repeat center center; background-size:21px 21px;} /* 기존_상단 카테고리*/ .sub_category_list {position:relative; z-index:10;} .sub_category_list ul {display:none; position:absolute; width:100%;} .sub_category_list ul li a {display:block; background:url('/design/skinfood/mobile_skinfood/images/design/btn_arw_r.png') no-repeat 98% center; background-size:15px 15px; background-color:#f4f4f4; height:40px; line-height:40px; text-indent:10px; border-bottom:1px solid #ddd;} .sub_category_btn {display:none; position:absolute; right:0px; top:50%; margin-top:-16px; height:28px; line-height:28px; width:40px; cursor:pointer; text-align:center; font-size:35px;} .goods_catalog_more_btn {display:block; width:100%; height:50px; border:1px solid #e3e3e3; background-color:#f8f8f8; font-size:14px; color:#7a7b83} .goods_catalog_more_btn .small {font-size:12px; color:#989ba0} /* 목록 테이블*/ table.list_table_style {border:1px solid #ddd; color:#444;} table.list_table_style thead th {height:35px; background-color:#ddd; text-align:center; font-weight:600;} table.list_table_style thead th:first-child {border-left:0px;} table.list_table_style tbody td.cell {padding:7px; text-align:center; border-top:1px solid #e0e0e0} table.list_table_style tbody tr td.cell:first-child {border-left:0px;} table.list_table_style tbody tr:first-child td.cell {border-top:0px;} table.list_table_style2 {border:1px solid #ddd; font-size:14px; color:#444; background-color:#fff} table.list_table_style2 td.cell {height:40px; padding:5px; text-align:center; border-top:1px solid #e0e0e0} table.list_table_style2 tr:first-child td.cell {border-top:0px;} .list_table_nodata {border:1px solid #ddd; padding:42px 30px; text-align:center; font-size:14px; color:#5c5c5c; background-color:#fff} .list_table_nodata2 {padding:42px 30px; text-align:center; font-size:14px; color:#5c5c5c; background-color:#fff} table.list_table_style {width:100%; border-collapse:separate; border-top:2px solid #7F858F; border-bottom:1px solid #aaa;} table.list_table_style > thead > tr > th {border-left:0px solid #eee; border-bottom:1px solid #aaa; background:#f9f9f9 url('') repeat-x; height:0; padding:10px 0; font-weight:normal;} table.list_table_style > thead > tr > th:first-child {border-left:0px;} table.list_table_style > tbody > tr > td {border-top:1px solid #ddd; border-left:1px solid #eee; padding:10px; text-align:center;} table.list_table_style > tbody > tr > td.nodata, .nodata {height:100px; line-height:100px; text-align:center; color:#999;} table.list_table_style > tbody > tr:first-child > td {border-top:0;} table.list_table_style > tbody > tr > td:first-child {border-left:0px;} table.list_table_style > tbody > tr.sub_bg {background:#fff;} table.list_table_style > tbody > tr.sub_bg > td {border-top:1px solid #eee;} /* 기본 정보 테이블 스타일*/ table.info_table_style {border-collapse:collapse; border-top:1px solid #aaa; border-right:1px solid #dadada;} table.info_table_style .its_section {border-left:1px solid #dadada; border-bottom:1px solid #dadada; padding:8px 5px 8px 5px; text-align:center; background-color:#f1f1f1; font-weight:normal;} table.info_table_style .its_th {border-left:1px solid #dadada; border-bottom:1px solid #dadada; padding:8px 0px 8px 28px; text-align:left; background-color:#f1f1f1; font-weight:normal;} table.info_table_style .its_td {border-left:1px solid #dadada; border-bottom:1px solid #dadada; padding:5px 0 5px 15px; line-height:180%; letter-spacing:0px;} table.info_table_style .its_th_center {border-left:1px solid #dadada; border-bottom:1px solid #dadada; padding:8px 0px 8px 0; background-color:#f1f1f1; font-weight:normal;} table.info_table_style .its_td_center {border-left:1px solid #dadada; border-bottom:1px solid #dadada; padding:5px 0 5px 0; line-height:180%; letter-spacing:0px;} table.info_table_style textarea {background-color:#f0f0f0;} table.info_table_style textarea.input_box_default_text {color:#a5a5a5 !important} /* 모바일 기본 테이블 스타일*/ table.default_table_style {border:1px solid #d0d0d0;} table.default_table_style th, table.default_table_style td {padding:7px 10px; font-weight:normal; text-align:left; border-top:1px solid #e0e0e0} table.default_table_style tr:first-child th, table.default_table_style tr:first-child td {border-top:0px;} table.default_table_style th {border-right:1px solid #e0e0e0; background-color:#f5f5f5;} table.default_table_style td {background:#fff;} table.default_table_style td li {margin-top:5px;} table.default_table_style td li:first-child {margin-top:0;} table.default_table_style.border_none {border:none!important;} table.default_table_style.border_none th {border-top:none!important;border-right:none!important; background-color:#ffffff!important;} table.default_table_style.border_none td {border-top:none!important;} /* 모바일 커스텀 테이블 스타일 */ dl.default_table_style { width: 100%; display: inline-block; list-style:none; background-color: #ffffff; } dl.default_table_style dt, dl.default_table_style dd { padding: 7px 10px; float:left; font-weight: normal; text-align: left; white-space:nowrap; } dl.default_table_style dt { width:130px; } dl.default_table_style dd { } /* 페이징 네비게이션*/ .paging_navigation {white-space:nowrap; *zoom:1; margin-top:10px; text-align:center;} .paging_navigation:after {display:block; content:""; clear:both;} .paging_navigation a {display:inline-block; margin:0 3px; padding:5px; min-width:15px; line-height:15px; font-size:3.75vw; color:#888; text-align:center;} .paging_navigation a:first-child {/*border-left:0px;*/} .paging_navigation a.on {color:#222; font-weight: bold;} .paging_navigation a.red {color:#222; font-weight: bold;} .paging_navigation a.prev, .paging_navigation a.next {padding:5px; margin:0 10px; font-weight:normal;height:23px;} .paging_navigation a.first, .paging_navigation a.last, .paging_navigation a.end {padding:5px; margin:0; font-weight:normal; height:23px;} .paging_navigation input.prev {background:url('/design/skinfood/mobile_skinfood/images/board/icon/icon_paging_prev.gif') repeat-x; height:22px; width:22px;} .paging_navigation input.next {background:url('/design/skinfood/mobile_skinfood/images/board/icon/icon_paging_next.gif') repeat-x; height:22px; width:22px;} .paging_navigation input.first {background:url('/design/skinfood/mobile_skinfood/images/board/icon/icon_paging_first.gif') repeat-x; height:22px; width:22px;} .paging_navigation input.end {background:url('/design/skinfood/mobile_skinfood/images/board/icon/icon_paging_end.gif') repeat-x; height:22px; width:22px;} /* 팝업*/ .designPopup {position:absolute; z-index:101;} .designPopup .designPopupBody {} .designPopup .designPopupBar {background-color:#000; color:#fff; font-weight:600; *zoom:1} .designPopup .designPopupBar:after {content:""; display:block; clear:both;} .designPopup .designPopupBar .designPopupTodaymsg {float:left; text-align:center; line-height:40px; width:70%; font-size:12px; color:#b2b2b2; letter-spacing:-1px; /*font-family:dotum;*/} .designPopup .designPopupBar .designPopupTodaymsg input {display:none;} .designPopup .designPopupBar .designPopupTodaymsg * {vertical-align:middle} .designPopup .designPopupBar .designPopupClose {float:right; text-align:center; line-height:40px; width:30%; cursor:pointer; font-size:12px; color:#fff; letter-spacing:-1px; /*font-family:dotum;*/} /* 상단 카테고리 뎁스*/ .category_depth {letter-spacing:-1px;} .category_depth ul.list {} .category_depth ul.list li.item {position:relative; color:#9f9f9f; float:left; padding-left:3px;} .category_depth ul.list li.item > a {color:#9f9f9f} .category_depth ul.list li.selected > a {color:#333333; font-weight:600; padding-right:10px; background:url("/design/skinfood/mobile_skinfood/images/design/right_quick_arrowdown.gif") no-repeat right center;} .category_depth ul.sub_menu_list {display:none; position:absolute; white-space:nowrap; z-index:10; border:1px solid #a0a5b8; background-color:#f2f2f2; padding:7px;} .category_depth ul.sub_menu_list li.sub_item a {display:block; color:#858585; padding:1px 0; font-weight:normal;} .category_depth ul.sub_menu_list li.sub_item a:hover {color:#202020} .category_depth ul.list li.selected ul.sub_menu_list {display:block;} .join_required {color:#f15f2e; /*display:inline-block; width:7px; height:6px; background:url('/design/skinfood/mobile_skinfood/images/common/icon_check_join.gif') no-repeat; vertical-align:middle;*/} .couponbtn {border:0px; background-color:#000; color:#fff; /*font-family:dotum;*/ font-size:11px; height:20px; letter-spacing:-1px; padding:0 7px; cursor:pointer} table.noborder-table, table.noborder-table th, table.noborder-table td {border:0px !important} .thumbnailvideo {position:absolute; z-index:5; background-position:center; background:url('/design/skinfood/mobile_skinfood/images/common/thumb_play.png') no-repeat center center; vertical-align:middle;} .mobilethumbnailvideo {position:absolute; z-index:5; background-position:center; background:url('/design/skinfood/mobile_skinfood/images/common/thumb_play.png') no-repeat; vertical-align:middle;} table.company_information {} table.company_information th, table.company_information td {padding:10px 0; border-top:1px solid #efefef; color:#000} table.company_information tr:first-child th, table.company_information tr:first-child td {border-top:none} table.company_information th {text-align:right; font-size:13px; font-weight:normal; color:#676d82; letter-spacing:-1px;} table.company_information td {padding-left:14px; padding-right:10px; font-size:13px; font-weight:600;} ul.gallery_menu {width:70%; margin:auto; *zoom:1} ul.gallery_menu:after {content:""; display:block; clear:both;} ul.gallery_menu li {float:left; width:50%;} .main_tabs_contents_title {border-bottom:1px solid #ddd; background-color:#f5f5f5; *zoom:1; padding-left:10px; height:36px; line-height:35px; font-size:14px; color:#000; font-weight:600;} ul.main_tabs {*zoom:1; border-bottom:2px solid #393e40;} ul.main_tabs:after {content:""; display:block; clear:both;} ul.main_tabs li {float:left; width:25%;} ul.main_tabs li a {display:block; width:100%; height:40px; line-height:40px; text-align:center; color:#697073; font-size:1.1em; font-weight:600; letter-spacing:-1px} ul.main_tabs li a.current {background-color:#393e40; color:#fff; font-weight:600} ul.mobile_menu {border-top:1px solid #ddddd9; background-color:#f5f5f1} ul.mobile_menu li.mitem {border-top:1px solid #fff; border-bottom:1px solid #ddddd9;} ul.mobile_menu li.mitem a {padding-left:12px; display:block; height:46px; line-height:46px; font-size:18px; color:#4a4a4a; font-weight:600; letter-spacing:-1px;} ul.mobile_menu li.mitem a img {margin-right:15px;} ul.mobile_menu li.mitemicon1 {background:url('/design/skinfood/mobile_skinfood/images/design/btn_arw_dn.png') no-repeat 96% 15px; background-size:15px 15px} ul.mobile_menu li.mitemicon2 {background:url('/design/skinfood/mobile_skinfood/images/design/btn_arw_r.png') no-repeat 96% center; background-size:15px 15px} ul.mobile_submenu {display:none; background-color:#e5e5e1} ul.mobile_submenu li.submitem {border-top:1px solid #fff; border-bottom:1px solid #ddddd9;} ul.mobile_submenu li.submitem a {height:30px; line-height:30px; font-size:11px; color:#666; font-weight:normal; padding-left:56px;} table.coupon_slide_item {} table.coupon_slide_item .coupon_slide_item_btn {position:relative; background:url('/design/skinfood/mobile_skinfood/images/design/cpn_bg.gif') no-repeat; width:228px; height:120px; cursor:pointer} table.coupon_slide_item .coupon_slide_item_btn_text {width:150px; padding:15px; font-weight:600; color:#000; font-size:12px; letter-spacing:-1px; word-break:break-all;} table.coupon_slide_item .coupon_slide_item_btn_text_content {padding-top:8px; font-size:16px; color:#c00900;} table.coupon_slide_item .coupon_slide_item_desc {font-size:11px; color:#aaa; line-height:20px;} div.radio_tab_wrapper {border:1px solid #888; border-radius:4px; overflow:hidden;} table.radio_tab_table {width:100%; border-collapse:collapse; table-layout:fixed} table.radio_tab_table td {height:30px; text-align:center; border-left:1px solid #888; color:#333; font-size:14px; background-color:#f8f8f8;} table.radio_tab_table td:first-child {border-left:none} table.radio_tab_table td.checked {background-color:#7e8190; color:#fff; font-weight:600;} table.radio_tab_table td label {display:block; width:100%; height:100%; line-height:30px;} table.radio_tab_table input[type='radio'] {display:none;} table.radio_tab_table input[type='checkbox'] {display:none;} /*select 디자인*/ select.common-select {color:#7C7E80 !important; font-size:14px; height:27px !important; line-height:26px; text-align:left; /* width:100% !important;*/} .styled select.common-select, .styled span.common-select {background:url("/design/skinfood/mobile_skinfood/images/design/select_arrow.png") no-repeat scroll right bottom / 26px 90px #F7F9FA; border:0px solid #D2D7D9; color:#7C7E80 !important; cursor:default; display:block; font-size:14px; height:40px; line-height:38px; padding-right:36px; text-align:left; width:100%;} .styled span.common-select {line-height:40px; padding-right:0; text-indent:10px;} .styled.select.disabled span.common-select {background-color:#E7E9EA; background-position:right top; color:#ACAEB0 !important;} table.radio_tab_table input[type='checkbox'] {display:none;} /***** 마이페이지 주문상세 *****/ span.goods-price {font-size:16px; color:#fa7600; font-weight:600;} #view_address_wrap .international { word-wrap:break-word; } /* 수량*/ .ea-title {font-size:11px; color:#000;} .ea-val {margin-top:5px; font-size:14px;} .remain-val {margin-bottom:3px; font-size:14px; color:#0085f5; font-weight:600;} /* 상단 date 및 주문번호*/ div.order-date-info {text-align:left; } div.order-date-info span.order-date {/*font-family:Tahoma;*/font-size:14px; font-weight:600;} div.order-date-info span.order-seq {/*font-family:Tahoma;*/font-size:12px;} /* 소제목*/ div.title-line-lay {width:100%; background-color:#d4d7d8; border-top:2px solid #c2c6c8; border-bottom:1px solid #c2c6c8;} div.title-line-lay table.title-line-table td {height:30px;} div.title-line-lay table.title-line-table td.line-title {text-align:left; padding-left:10px; font-weight:600;} div.title-line-lay table.title-line-table td.line-btn {text-align:right; padding-right:10px;} div.title-line-lay table.title-line-table td.line-btn span.arrow-btn {margin-left:8px;} /* 일반 라인*/ div.line-lay {background-color:#f5f7f7; border-bottom:1px dashed #d7d7d7;} div.line-lay.bd-line {border-bottom:1px solid #d7d7d7;} div.line-lay.bd-2line {border-bottom:2px solid #d7d7d7;} div.line-lay.no-bd {border:none;} div.line-lay.white {background-color:#fff;} div.line-lay.gray {background-color:#d6d6d6; border-color:#c4c4c4;} div.line-lay.light-gray {background-color:#e2e4e4;} div.line-lay table.line-table td {font-size:12px; height:30px;} div.line-lay table.line-table.hgt36 td {height:36px;} div.line-lay table.line-table.hgt55 td {height:55px;} div.line-lay table.line-table td.line-title {padding-left:8px; color:#646464;} div.line-lay table.line-table td.line-title.black {color:#000;} div.line-lay table.line-table td.line-title.rgt-line {border-right:1px solid #d7d7d7;} div.line-lay table.line-table td.line-val {text-align:center; color:#000; font-weight:600;} div.line-lay table.line-table td.line-val.left {text-align:left; padding-left:8px; font-weight:normal;} /* 상태 라인*/ div.status-line-lay {background-color:#b9bcbd; border-bottom:1px solid #a9abac;} div.status-line-lay table.status-line-table td {height:43px; color:#000; font-size:14px; font-weight:600;} div.status-line-lay table.status-line-table td.status {padding-left:8px;} div.status-line-lay table.status-line-table td.status-btn {text-align:right; padding-right:8px;} /* 소계 라인*/ div.sub-total-line-lay {background-color:#a6b0b9; border-bottom:1px dashed #d7d7d7;} div.sub-total-line-lay.no-bd {border:none;} div.sub-total-line-lay table.sub-total-line-table td {font-size:12px; height:36px;} div.sub-total-line-lay table.sub-total-line-table td.sub-total-title {padding-left:8px; color:#4a4a4a;} div.sub-total-line-lay table.sub-total-line-table td.sub-total-val {text-align:center; color:#000;} div.sub-total-line-lay table.sub-total-line-table td.sub-total-val.red {color:#cf0000;} /* 합계 라인*/ div.total-line-lay {background-color:#5d657a;} div.total-line-lay.dark-navy {background-color:#4e5567;} div.total-line-lay table.total-line-table td {font-size:16px; height:48px; font-weight:600;} div.total-line-lay table.total-line-table.hgt36 td {font-size:12px; height:36px;} div.total-line-lay table.total-line-table td.total-line-title {padding-left:8px; color:#fff;} div.total-line-lay table.total-line-table td.total-line-val {text-align:center; color:#ff602c;} /* 상품 상세*/ div.goods-info-lay {background-color:#fff; padding:10px;} div.goods-info-lay div.goods-name {font-size:14px; color:#000; font-weight:600; padding-bottom:8px;} div.goods-info-lay table.goods-info-table {} div.goods-info-lay table.goods-info-table td.goods-info {text-align:left; padding-left:5px; padding-top:0;} div.goods-info-lay table.goods-info-table td.goods-info div { margin-left:5px; margin:3px 0;} div.goods-info-lay table.goods-info-table td.goods-info div.goods-price { font-size:14px; color:#000; margin-top:-3px;} div.goods-info-lay table.goods-info-table td.goods-info div.goods-option { font-size:12px; color:#646464;} div.goods-info-lay table.goods-info-table td.goods-info div.goods-etc { font-size:12px; color:#000;} .ea_change, .recently_ea_change { text-align:center; box-sizing:border-box; vertical-align:middle;} .eaPlus, .recently_eaPlus, .recently_btn_add_suboption { border:0px; background:url('/design/skinfood/mobile_skinfood/images/common/m_plusbt.png') no-repeat; box-sizing:border-box; overflow:hidden; text-indent:-100px; vertical-align:middle;} .eaMinus, .recently_eaMinus, .recently_btn_del_suboption { border:0px; background:url('/design/skinfood/mobile_skinfood/images/common/m_minusbt.png') no-repeat; box-sizing:border-box; overflow:hidden; text-indent:-100px; vertical-align:middle;} /* 상품 소계금액*/ div.sum-price-lay {max-height:80px; border-bottom:1px solid #d7d7d7;} div.sum-price-lay table.sum-price-table td {height:30px; font-size:14px; font-weight:600; color:#0050d2} div.sum-price-lay table.sum-price-table td.price-info {padding-right:10px; text-align:right; padding-left:7px; background-color:#efefef;} div.sum-price-lay table.sum-price-table td.step-info {padding-left:10px; text-align:left; background-color:#efefef;} /* 주문자 정보*/ div.order-info-lay table.order-info-table td {font-weight:600; background-color:#f5f7f7; color:#4a4a4a; border-bottom:1px solid #d7d7d7; text-align:left; padding-left:10px; font-size:12px; height:30px;} div.order-info-lay table.order-info-table td.order-name {text-align:center; font-size:14px; border-right:1px solid #d7d7d7;} /* 추가옵션 상세*/ div.suboption-lay {background-color:#fff;} div.suboption-lay table.suboption-table td {font-size:12px; color:#646464; height:57px;} div.suboption-lay table.suboption-table td.suboption-name {padding-left:8px;} div.suboption-lay table.suboption-table td.suboption-name div.suboption-etc {margin:3px 15px;} div.suboption-lay table.suboption-table td.suboption-price {text-align:center; font-weight:600;} /* 환불신청화면 상품목록*/ div.refund-lay {} div.refund-lay div.shipping-info-lay {padding:8px; border-top:1px solid #ddd; border-bottom:1px solid #ddd; background-color:#f4f4f4} div.refund-lay div.refund-list-lay {} div.refund-lay div.refund-list-lay div.goods-info-lay {margin:auto; padding:10px 0 0 0; background-color:#fff; } div.refund-lay div.refund-list-lay div.goods-info-lay:first-child {border-top:0} div.refund-lay div.refund-list-lay div.goods-info-lay.sub { margin:5px auto 8px; border-top:1px dashed #ddd} div.refund-lay div.refund-list-lay div.goods-info-lay div.goods-name {padding-left:10px; padding-bottom:5px; margin:0px !important;} div.refund-lay div.refund-list-lay div.goods-info-lay div.goods-name a {font-size:14px; color:#000; font-weight:600;} div.refund-lay div.refund-list-lay div.goods-info-lay table.goods-info-table {} div.refund-lay div.refund-list-lay div.goods-info-lay table.goods-info-table td.goods-info {text-align:left; padding-left:5px; padding-top:0;} div.refund-lay div.refund-list-lay div.goods-info-lay table.goods-info-table td.goods-info div { margin-left:5px; margin:3px 0;} div.refund-lay div.refund-list-lay div.goods-info-lay table.goods-info-table td.goods-info .goods-price { font-size:14px; color:#000; margin-top:-3px;} div.refund-lay div.refund-list-lay div.goods-info-lay table.goods-info-table td.goods-info .goods-option { font-size:11px; color:#646464;} div.refund-lay div.refund-list-lay div.goods-info-lay table.goods-info-table td.goods-info .goods-etc { font-size:12px; color:#000; padding-right:10px;} div.refund-lay div.refund-list-lay div.sum-price-lay {border:none; margin-top:5px; color:#0050d2; font-size:14px;} div.refund-lay div.refund-list-lay div.sum-price-lay .goods-price {color:#000; font-size:14px;} div.refund-lay div.refund-status-lay { margin:8px;} div.refund-lay div.refund-status-lay .title { line-height:24px; font-size:14px; color:#0050d2;} div.refund-lay div.refund-list-lay table.ea-info-table {background-color:#f6f6f6; border-collapse:collapse;} div.refund-lay div.refund-list-lay table.ea-info-table td {padding:8px 5px; border-left:1px solid #ededf0;} div.refund-lay div.refund-list-lay div.suboption-lay {background-color:#fff;} div.refund-lay div.refund-list-lay div.suboption-lay div.goods-name {font-size:14px; color:#000; font-weight:600;} div.refund-lay div.refund-list-lay div.suboption-lay table.suboption-table td {font-size:12px; color:#646464; height:57px;} div.refund-lay div.refund-list-lay div.suboption-lay table.suboption-table td.suboption-name {padding-left:8px;} div.refund-lay div.refund-list-lay div.suboption-lay table.suboption-table td.suboption-name div.suboption-etc {margin:3px 15px;} div.refund-lay div.refund-list-lay div.suboption-lay table.suboption-table td.suboption-price {text-align:center; font-weight:600;} div.refund-lay div.total-price-lay {background-color:#a6b0b9;} div.refund-lay div.total-price-lay table.total-price-table td {height:48px; font-size:16px; color:#000; font-weight:600;} div.refund-lay div.total-price-lay table.total-price-table td.total-price-title {padding-left:8px;} div.refund-lay div.total-price-lay table.total-price-table td.total-price {text-align:center;} /* 쿠폰상세정보*/ div.coupon_title { padding:30px; border:3px solid #d7d7d7; background-color:#fff; font-size:16px; text-align:center; font-weight:600; /*font-family:Dotum;*/ color:#000; letter-spacing:-1px;} div.coupon_body { padding:20px 15px; background-color:#f5f7f6; font-size:11px; /*font-family:Dotum;*/ color:#000;} div.coupon_body table { font-size:11px; /*font-family:Dotum;*/ color:#000;} div.coupon_body .btn_use { padding-top:20px;} /* 푸쉬알림*/ .pushCount {display:inline-block; min-width:15px; padding:0 3px; min-height:20px; line-height:20px; background-color:red; color:#fff; font-weight:600; font-size:15px; border-radius:10px; text-align:center;} .pushCount.side {position:absolute; top:-2px; right:-2px;} .pushCount.header {position:absolute; top:3px; right:-2px; text-indent:0;} /* checkbox/radio image ezmark*/ .ez-hide {opacity:0; filter:alpha(opacity=0);} .ez-checkbox {background:transparent url('/design/skinfood/mobile_skinfood/images/icon/i_check_off.png') 0 0px no-repeat; background-size:cover;} .ez-checkbox-on {background:transparent url('/design/skinfood/mobile_skinfood/images/icon/i_check_on.png') 0 0px no-repeat; background-size:cover;} .ez-radio {background:transparent url('/design/skinfood/mobile_skinfood/images/icon/i_radio_off.png') 0 0px no-repeat;} .ez-radio-on {background:transparent url('/design/skinfood/mobile_skinfood/images/icon/i_radio_on.png') 0 0px no-repeat;} .ez-checkbox {display:inline-block; zoom:1; *display:inline; width:22px; height:22px; _height:22px; vertical-align:middle; background-size:cover; margin:-3px 3px 3px 0;} .ez-radio {display:inline-block; zoom:1; *display:inline; width:20px; height:20px; _height:20px; vertical-align:middle; background-size:cover; margin:-3px 3px 3px 0;} /* 상품디스플레이 탭 박스*/ .displayTabContentsContainer {} .displayTabContentsContainerBox {} /* 상품디스플레이 탭 스타일*/ ul.displayTabType1 {*zoom:1; border-bottom:none;} ul.displayTabType1:after {content:""; display:block; clear:both;} ul.displayTabType1 li {float:left; background-color:#efefef; color:#858585; font-size:11px; height:40px; line-height:40px; text-align:center; border-top:1px solid #d6d6d6; cursor:default;} ul.displayTabType1 li.current {background-color:#313642; color:#fff; border-top:1px solid #313642;} ul.displayTabType3 {*zoom:1; border-bottom:none;} ul.displayTabType3:after {content:""; display:block; clear:both;} ul.displayTabType3 li {float:left; background-color:#efefef; color:#858585; font-size:11px; height:40px; line-height:40px; text-align:center; border-top:1px solid #d6d6d6; cursor:default;} ul.displayTabType3 li.current {background-color:#727c8a; color:#fff; border-top:1px solid #727c8a;} ul.displayTabType4 {*zoom:1; border-bottom:none;} ul.displayTabType4:after {content:""; display:block; clear:both;} ul.displayTabType4 li {float:left; background-color:#e0e6f7; color:#8190b5; font-size:11px; height:40px; line-height:40px; text-align:center; border-top:1px solid #c9d0e7; cursor:default;} ul.displayTabType4 li.current {background-color:#4b69b1; color:#fff; border-top:1px solid #4b69b1;} ul.displayTabType5 {*zoom:1; border-bottom:none;} ul.displayTabType5:after {content:""; display:block; clear:both;} ul.displayTabType5 li {float:left; background-color:#fce8f5; color:#d783bb; font-size:11px; height:40px; line-height:40px; text-align:center; border-top:1px solid #eccbde; cursor:default;} ul.displayTabType5 li.current {background-color:#e08ac3; color:#fff; border-top:1px solid #e08ac3;} ul.displayTabType6 {*zoom:1; border-bottom:none;} ul.displayTabType6:after {content:""; display:block; clear:both;} ul.displayTabType6 li {float:left; background-color:#f9f0d7; color:#ba9857; font-size:11px; height:40px; line-height:40px; text-align:center; border-top:1px solid #decfa4; cursor:default;} ul.displayTabType6 li.current {background-color:#c99a32; color:#fff; border-top:1px solid #c99a32;} ul.displayTabType7 {*zoom:1; border-bottom:none;} ul.displayTabType7:after {content:""; display:block; clear:both;} ul.displayTabType7 li {float:left; background-color:#eef5e2; color:#88a845; font-size:11px; height:40px; line-height:40px; text-align:center; border-top:1px solid #cddab7; cursor:default;} ul.displayTabType7 li.current {background-color:#85a849; color:#fff; border-top:1px solid #85a849;} ul.displayTabType2 {*zoom:1; border-bottom:2px solid #393e40} ul.displayTabType2:after {content:""; display:block; clear:both;} ul.displayTabType2 li {float:left; height:40px; line-height:40px; font-weight:600; font-size:14px; text-align:center; color:#959595; cursor:default;} ul.displayTabType2 li:first-child {} ul.displayTabType2 li.current {color:#000;} ul.displayTabTypeImage {*zoom:1;} ul.displayTabTypeImage:after {content:""; display:block; clear:both;} ul.displayTabTypeImage li {float:left;} ul.displayTabTypeImage li.current {color:#000;} ul.displayTabTypeImage li span img {max-width:100%;} /* 빅데이터 상품 목록 layout css*/ div.bigdata-title-bar { border-top:1px solid #828282; border-bottom:1px solid #e3e3e3; line-height:38px; font-size:12px; color:#000; text-align:left; background-color:#fff;} div.bigdata-title-bar table td {color:#000; line-height:18px;} div.bigdata-title-bar img {width:25px; height:25px; margin:10px; margin-left:12px;} div.bigdata-goods-list { text-align:left; background-color:#fff;} /* 상품상세 위시리스트 알림창*/ #wish_alert {display:none; position:fixed; left:50%; top:45%; width:200px; margin-left:-100px; height:200px; margin-top:-100px; background:url('/design/skinfood/mobile_skinfood/images/design/alert_bg.png') no-repeat; background-size:200px 200px;z-index:102;} #wish_alert .wa_on {position:absolute; left:50%; top:50%; margin-left:-37.5px; margin-top:-55px; width:75px; height:66px; background:url('/design/skinfood/mobile_skinfood/images/design/ico_wish_big_on.png') no-repeat; background-size:75px 66px;} #wish_alert .wa_off {position:absolute; left:50%; top:50%; margin-left:-37.5px; margin-top:-55px; width:75px; height:66px; background:url('/design/skinfood/mobile_skinfood/images/design/ico_wish_big_off.png') no-repeat; background-size:75px 66px;} #wish_alert .wa_msg {position:absolute; left:0; top:65%; width:100%; text-align:center; font-size:13px; color:#fff; font-weight:600;} /* 티켓 정보*/ div.coupon_info { border:2px solid #CBCBCB; padding-left:20px; padding-top:15px; height:105px; background-image:url('/design/skinfood/mobile_skinfood/images/common/coupon_rbg.jpg'); background-repeat:no-repeat; background-size:34px 120px; background-position:100%;} div.coupon_info div.coupon_name { font-size:20px; font-weight:600; word-break:break-all;} div.coupon_info div.coupon_option { font-size:13px; font-weight:600; word-break:break-all; padding-top:15px; letter-spacing:1px;} div.coupon_info div.coupon_serial { font-size:13px; font-weight:600; word-break:break-all; padding-top:5px;} div.coupon_detail { height:35px; padding-left:3px; padding-top:10px; color:#727982; font-size:13px; font-weight:600; line-height:20px; letter-spacing:1px;} /* 쿠폰사용 버튼*/ .btn-coupon-use {width:100%; height:32px; border-radius:3px; border:1px solid #2346a1; background:linear-gradient(180deg, #5f7cc9 50%, #4063bf 100%); font-size:16px; color:#f9f9f9; font-weight:600; padding-bottom:4px; cursor:pointer;} .btn-coupon-use-disable {width:100%; height:32px; border-radius:3px; border:1px solid #c0c0c0; background:linear-gradient(180deg, #f9f9f9 50%, #eaeaea 100%); font-size:16px; color:#aaaaaa; font-weight:600; padding-bottom:4px; cursor:pointer;} .btn-blue-use {width:100%; height:32px; border-radius:3px; border:1px solid #2346a1; background:linear-gradient(180deg, #5f7cc9 50%, #4063bf 100%); font-size:16px; color:#f9f9f9; font-weight:600; padding-bottom:4px; cursor:pointer;} /* 상세내역 스타일*/ .sale_price_layer {display:none;} span.input_round_style_rounded {display:inline-block; height:28px; max-width:1000px; broder:0px; padding-right:5px; background:url("/design/skinfood/mobile_skinfood/images/design/input_round_right_red.gif") no-repeat right;} span.input_round_style_rounded input {height:28px; width:100%; line-height:28px; border:0px; text-indent:5px; padding-left:2px; background:url("/design/skinfood/mobile_skinfood/images/design/input_round_left_red.gif") no-repeat; letter-spacing:-1px;} /* 상품리스트 - 추천상품*/ .recom_wrap {border-bottom:1px solid #7f7f7f; padding:0 0 20px 0;} .recom_wrap .recom_tit {border-bottom:1px solid #ddd; line-height:38px; font-size:12px; font-weight:600; text-indent:10px;} /* 상품상세 판매자 정보 테이블*/ .provider_info_tit {font-size:13px; font-weight:600; padding-top:12px; padding-bottom:12px;} table.provider_info_table_style {border-collapse:collapse; border:0px solid #babec4; background-color:#f1f2f5; font-size:12px; color:#515151;} table.provider_info_table_style thead th {padding:10px 0px 10px 10px; border-bottom:1px solid #babec4; text-align:left;} table.provider_info_table_style thead td {padding:10px 0 10px 10px; border-bottom:1px solid #babec4} table.provider_info_table_style tbody th {padding:10px 0px 10px 10px; border-top:1px solid #e0e0e0; text-align:left;} table.provider_info_table_style tbody td {padding:10px 0 10px 10px; border-top:1px solid #e0e0e0} .btn-blue-use {width:100%; height:32px; border-radius:3px; border:1px solid #2346a1; background:linear-gradient(180deg, #5f7cc9 50%, #4063bf 100%); font-size:16px; color:#f9f9f9; font-weight:600; padding-bottom:4px; cursor:pointer;} span.input_round_style_rounded {display:inline-block; height:28px; max-width:1000px; broder:0px; padding-right:5px; background:url("/design/skinfood/mobile_skinfood/images/design/input_round_right_red.gif") no-repeat right;} span.input_round_style_rounded input {height:28px; width:100%; line-height:28px; border:0px; text-indent:5px; padding-left:2px; background:url("/design/skinfood/mobile_skinfood/images/design/input_round_left_red.gif") no-repeat; letter-spacing:-1px;} span.input_round_style_rounded input::-webkit-input-placeholder {/* WebKit browsers*/ color:red;} span.input_round_style_rounded input::-moz-placeholder {/* Mozilla Firefox 4 to 18*/ color:red; opacity:1;} span.input_round_style_rounded input::-moz-placeholder {/* Mozilla Firefox 19+*/ color:red; opacity:1;} span.input_round_style_rounded input::-ms-input-placeholder {/* Internet Explorer 10+*/ color:red;} span.input_round_style input::-webkit-input-placeholder {/* WebKit browsers*/ color:#515151;} span.input_round_style input::-moz-placeholder {/* Mozilla Firefox 4 to 18*/ color:#515151; opacity:1;} span.input_round_style input::-moz-placeholder {/* Mozilla Firefox 19+*/ color:#515151; opacity:1;} span.input_round_style input::-ms-input-placeholder {/* Internet Explorer 10+*/ color:#515151;} /* 상품리스트 - 추천상품*/ .recom_wrap {border-bottom:1px solid #7f7f7f; padding:0 0 20px 0;} .recom_wrap .recom_tit {border-bottom:1px solid #ddd; line-height:38px; font-size:12px; font-weight:600; text-indent:10px;} /* 상품리스트 - 카테고리(슬라이딩 메뉴)*/ .ctg_top > ul > li {float:left; text-align:center; width:22%; height:40px; line-height:40px; overflow:hidden;} .ctg_top > ul > li:last-child {width:12%;} .ctg_top > ul > li a {display:block; color:#333;} .ctg_top > ul > li a .icon {display:inline-block; margin-left:3px; background:#333 url("/design/skinfood/mobile_skinfood/images/design/ico_ctg_select.png") no-repeat right; background-size:7px 4px; width:7px; height:4px; vertical-align:middle; text-indent:-9999px;} .ctg_wrap {display:none; position:fixed; bottom:0; left:0; width:100%; height:70%; background:#fff; z-index:1000;} .ctg_wrap .ctg_sub {/*position:relative;*/} .ctg_sub .ctg_close {position:absolute; top:0; right:0; background:url("/design/skinfood/mobile_skinfood/images/design/btn_ctg_close.png") no-repeat center; background-size:15px 15px; width:30px; height:38px; text-indent:-9999px;} .ctg_sub h1 {border-top:1px solid #f9f9f9; line-height:37px; text-align:center; font-size:14px;} .ctg_sub .ctg_depth {border-top:1px solid #e5e5e5; background:#f5f5f6; padding:5px; /*height:33px;*/ line-height:23px; color:#949494; /*white-space:nowrap;*/} .ctg_depth li {float:left; background:url("/design/skinfood/mobile_skinfood/images/design/ico_ctg_arrow.png") no-repeat 5px 6px; background-size:5px 9px; text-indent:15px; color:#333;} .ctg_depth li:first-child {background:none; text-indent:5px;} .ctg_depth li a {color:#0278f8;} .ctg_depth li:last-child .decont {font-size:12px; color:#949494;} /*@media (min-width:0) and (max-width:360px) { .ctg_depth li {width:15%; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; white-space:nowrap; word-wrap:normal;} .ctg_depth li:last-child {width:55%; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; white-space:nowrap; word-wrap:normal;} }*/ .ctg_sub .ctg_list, .ctg_sub .ctg_result {border-top:1px solid #e5e5e5; width:100%; height:100%;} .ctg_list .ctg_list_sub, .ctg_result .ctg_result_sub {position:absolute; /*top:38px; bottom:0;*/ width:100%; overflow-y:auto; /*-webkit-overflow-scrolling:touch;*/} #ctg_category .ctg_list_sub {top:71px; bottom:0;} #ctg_brand .ctg_list_sub {top:73px; bottom:64px;} #ctg_search .ctg_result_sub {top:38px; bottom:64px;} #ctg_sort .ctg_list_sub {top:38px; bottom:0;} .ctg_list li {border-bottom:1px solid #e8e8e8; background:url("/design/skinfood/mobile_skinfood/images/design/ico_ctg_arrow2.png") no-repeat right 10px center; background-size:10px 16px; height:33px; line-height:33px; text-indent:10px;} .ctg_list li a, .ctg_list li label {display:block; color:#333;} .ctg_result ul {padding:10px;} .ctg_result li {height:30px;} .ctg_result li input[type="text"] {border:1px solid #cacaca; width:100%; height:30px; line-height:30px; text-indent:5px;} .ctg_result li .ctg_price {float:left; width:47%;} .ctg_result li .ctg_price2 {float:right; width:47%;} .ctg_sub .ctg_btn {position:absolute; left:0; bottom:0; width:100%;} .ctg_sub .ctg_btn ul {border-top:1px solid #e8e8e8; background:#fff; padding:10px 15px 10px 10px;} .ctg_sub .ctg_btn li {float:left; text-align:center; width:50%;} .ctg_sub .ctg_btn li:last-child {float:right;} .ctg_sub .ctg_btn li button[type="button"], .ctg_btn li input[type="button"] {width:100%;} .ctg_sub .ctg_btn li button[type="submit"], .ctg_btn li input[type="submit"] {width:100%;} .ctg_bg {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.5; filter:alpha(opacity=50); z-index:200;} /* 상품리스트 - 스와이프 안내 */ .swipe_guide {position:fixed; top:0; left:0; width:100%; height:100%; z-index:999;} .swipe_guide .swipe_atb {position:absolute; left:0; top:0; background:url('/design/skinfood/mobile_skinfood/images/design/img_swipe01.png') no-repeat; background-size:cover; width:224px; height:87px; text-indent:-9999px; z-index:1;} .swipe_guide .swipe_alr {position:absolute; left:50%; top:50%; margin:-80px 0 0 -80px; background:url('/design/skinfood/mobile_skinfood/images/design/img_swipe02.png') no-repeat; background-size:cover; width:160px; height:143px; text-indent:-9999px; z-index:1;} .swipe_guide .swipe_asl {position:absolute; right:60px; bottom:60px; background:url('/design/skinfood/mobile_skinfood/images/design/img_swipe03.png') no-repeat; background-size:cover; width:165px; height:53px; text-indent:-9999px; z-index:1;} .swipe_guide .swipe_close {position:absolute; left:50%; bottom:140px; margin-left:-42px; background:url('/design/skinfood/mobile_skinfood/images/design/btn_swipe_close.png') no-repeat; background-size:cover; width:85px; height:32px; text-indent:-9999px; z-index:1;} .swipe_guide .swipe_bg {width:100%; height:100%; background:#000; opacity:0.6; filter:alpha(opacity=60);} @media (min-width:640px) { .swipe_guide .swipe_asl {right:40px; bottom:5px; background:url('/design/skinfood/mobile_skinfood/images/design/img_swipe04.png') no-repeat; background-size:cover; width:163px; height:52px;} .swipe_guide .swipe_close {bottom:10px;} } /* 상품상세 - 상세설명탭 */ .goods_information_tabs {border-top:1px solid #7f7f7f; background:#fff; *zoom:1;z-index:101;} .goods_information_tabs:after {display:block; content:""; clear:both;} .goods_information_tabs li {float:left; width:23%; /*border-left:1px solid #babec4;*/ border-bottom:1px solid #c5c9ce; box-sizing:border-box; text-align:center;} .goods_information_tabs li a {display:block; width:100%; height:45px; line-height:43px; font-size:13px; letter-spacing:-1px; font-weight:600; color:#666; cursor:pointer} .goods_information_tabs li a .num {display:block; margin-top:-7px; line-height:0px; font-size:10px; color:#9f9f9f;} .goods_information_tabs li.current {border-bottom:2px solid #0278f8;} .goods_information_tabs li.current a {height:44px; color:#0278f8; font-weight:600; cursor:default;} .goods_information_tabs li:first-child {border-left:none;} .goods_information_tabs li:last-child {width:31%;} .goods_information_title {border-top:2px solid #babec4; border-bottom:1px solid #efefef; height:40px; line-height:40px; padding-left:12px; font-weight:600; color:#000; font-size:13px; background-color:#fff;} /* 상품상세 - 타임세일 */ .event_datetime .event_tit {display:table; margin:0 auto; text-align:center; font-size:16px; font-weight:600; color:#000; letter-spacing:-1px; opacity:0.7; filter:alpha(opacity=70);} .event_datetime .event_cont {display:table-cell;} .event_datetime .event_buy {display:table-cell; padding-left:3px; font-weight:normal; color:#000;} .event_datetime .event_time {padding-right:10px; font-size:14px;} .event_datetime .event_wrap {position:relative; width:40px; height:40px;} .event_datetime .event_wrap .event_date {position:absolute; margin-top:-12px; width:40px; height:40px; text-align:center; font-size:20px; font-weight:600; color:#fff; z-index:1;} .event_datetime .event_wrap .event_bg {position:absolute; margin-top:-20px; width:40px; height:40px; border-radius:50%; background:#000; opacity:0.2; filter:alpha(opacity=20);} .event_datetime .event_txt {padding:3px 5px 0 3px; font-size:16px; color:#333;} .event_datetime .event_txt2 {width:10px; padding-top:3px; text-align:center; font-size:16px; color:#333;} /* 최근 본 상품(사이드 레이어)*/ .recently_side {/*margin:10px;*/ position:relative; border-bottom:1px solid #d8d9d4;} .recently_side .btn_more {position:absolute; top:7px; right:5px;} .recently_side h1 {border-bottom:1px solid #d8d9d4; background:#f6f6f6; height:40px; line-height:40px; text-indent:10px; font-size:13px; font-weight:600; color:#333;} .recently_side .recently_thumb {position:relative; margin:5px; height:97px; overflow:hidden;} .recently_side .recently_thumb .thumb {position:relative; text-align:center;} .recently_side .recently_thumb .thumb h2 {background:#fff; height:97px; line-height:92px; font-size:13px; font-weight:normal; color:#666; z-index:99;} .recently_side .recently_thumb .thumb li {position:relative; float:left; width:33.3%;} .recently_side .recently_thumb .thumb li:last-child {width:33.4%;} .recently_side .recently_thumb .thumb li a {display:inline-block; margin:5px;} .recently_side .recently_thumb .thumb li img {border:1px solid #d5d5cb; width:67px; height:67px;} .recently_side .recently_thumb .thumb li .btn_delete {position:absolute; top:0; right:4px; background:url('/design/skinfood/mobile_skinfood/images/design/ico_recently_delete.png') no-repeat; width:15px; height:15px;} .recently_side .recently_page {position:absolute; bottom:0; width:100%; margin:0 auto; text-align:center;} .recently_side .recently_page .btn_page {margin:0 3px; display:inline-block; background:url('/design/skinfood/mobile_skinfood/images/design/ico_recently_navi.png') no-repeat center; width:8px; height:8px;} .recently_side .recently_page .btn_page.on {display:inline-block; background:url('/design/skinfood/mobile_skinfood/images/design/ico_recently_navi_on.png') no-repeat center; width:8px; height:8px;} /* 최근 본 상품(하단 레이어)*/ #recently_popup {display:none; position:absolute; bottom:85px; right:0; z-index:999;} .recently_popup {width:300px; margin:10px; position:relative; border:1px solid /*#5288da*/#a9a9a9; background:/*#e8ebf1*/#fff; -webkit-box-shadow:2px 2px 0 0 rgba(0, 0, 0, 0.1); -moz-box-shadow:2px 2px 0 0 rgba(0, 0, 0, 0.1); box-shadow:2px 2px 0 0 rgba(0, 0, 0, 0.1);z-index:1001;} .recently_popup .btn_close {position:absolute; top:0; right:0; background:url('/design/skinfood/mobile_skinfood/images/design/btn_recently_close.png') no-repeat center; background-size:10px 10px; width:35px; height:33px; text-indent:-9999px;} .recently_popup h1 {border-bottom:1px solid /*#c2cad9*/#a9a9a9; background:/*#5288da*/#a9a9a9; height:35px; line-height:35px; text-indent:10px; font-size:14px; color:#fff;} .recently_popup .recently_thumb {position:relative; margin:5px; height:95px; overflow:hidden; text-align:center;} .recently_popup .recently_thumb .thumb {position:relative; text-align:center;} .recently_popup .recently_thumb .thumb h2 {background:#fff; height:95px; line-height:90px; font-size:13px; font-weight:normal; color:#666; z-index:99;} .recently_popup .recently_thumb .thumb li {position:relative; float:left; width:25%;} .recently_popup .recently_thumb .thumb li:first-child {margin-left:0;} .recently_popup .recently_thumb .thumb li a {display:inline-block; margin:5px;} .recently_popup .recently_thumb .thumb li img {border:1px solid #d5d5cb; width:64px; height:64px;} .recently_popup .recently_thumb .thumb li .btn_delete {position:absolute; top:0; right:-5px; background:url('/design/skinfood/mobile_skinfood/images/design/ico_recently_delete.png') no-repeat; width:15px; height:15px;} .recently_popup .recently_page {position:absolute; bottom:0; width:100%; margin:0 auto; text-align:center;} .recently_popup .recently_page .btn_page {margin:0 3px; display:inline-block; background:url('/design/skinfood/mobile_skinfood/images/design/ico_recently_navi.png') no-repeat center; width:8px; height:8px;} .recently_popup .recently_page .btn_page.on {display:inline-block; background:url('/design/skinfood/mobile_skinfood/images/design/ico_recently_navi_on.png') no-repeat center; width:8px; height:8px;} .recently_bg {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.5; filter:alpha(opacity=50); z-index:1000;} /* 상품상세 - SNS 공유(레이어)*/ .sns_btn_area {position:relative; /*border-top:1px solid #b9bcc6; border-bottom:1px solid #b9bcc6;*/ background-color:#f1f2f5; padding:10px; text-align:center;} .sns_btn_area > ul li {float:left; width:49%;} .sns_btn_area > ul li:last-child {float:right;} .sns_btn_area > ul li button {width:100%;} .sns_btn_area > ul li button .ico_sns {display:inline-block; vertical-align:top; margin:6px 5px 0 0; background:url('/design/skinfood/mobile_skinfood/images/design/ico_view_sns.png') no-repeat; width:20px; height:24px;} .sns_btn_area > ul li button .ico_wish {display:inline-block; vertical-align:top; margin:10px 5px 0 0; background:url('/design/skinfood/mobile_skinfood/images/design/ico_view_wish.png') no-repeat; width:22px; height:19px;} .sns_btn_area .sns_pop {display:none; position:fixed; top:50%; left:50%; margin:-115px 0 0 -150px; width:300px; height:230px; border:1px solid #000; background:#fff; z-index:1001;} .sns_pop .sns_sub {position:relative;} .sns_sub h1 {border-bottom:1px solid #dbdbdb; height:40px; line-height:40px; text-align:left; text-indent:10px; font-size:14px;} .sns_sub .snsbox {padding:20px 10px;} .sns_sub .snsbox li {float:left; width:25%; height:80px; font-size:11px;} .sns_sub .snsbox img {width:42px; height:auto; margin-bottom:5px;} .sns_sub .sns_close {position:absolute; top:0; right:0; background:url("/design/skinfood/mobile_skinfood/images/design/ico_view_close.png") no-repeat center; background-size:14px 14px; width:40px; height:40px; text-indent:-9999px;} .sns_bg {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.5; filter:alpha(opacity=50); z-index:1002;} /* 상품상세 - 구매하기(슬라이딩 메뉴)*/ #goods_buy_wrap {position:fixed; left:0; bottom:0; width:100%; background:#fff; z-index:1001;} #goods_buy_wrap .buy_btn_wrap {padding:10px;} #goods_buy_wrap .buy_option_wrap {padding-top:10px;} #goods_buy_wrap .option_btn_wrap {position:relative;} #goods_buy_wrap .option_btn.off {position:absolute; left:50%; bottom:-10px; margin-left:-29px; background:url('/design/skinfood/mobile_skinfood/images/design/btn_quickbar_open.png') no-repeat center; width:59px; height:30px;} #goods_buy_wrap .option_btn.on {position:absolute; left:50%; bottom:-10px; margin-left:-29px; background:url('/design/skinfood/mobile_skinfood/images/design/btn_quickbar_close.png') no-repeat center; width:59px; height:30px;} #goods_buy_wrap .goods_option {max-height:250px; overflow:hidden; overflow-y:auto; /*-webkit-overflow-scrolling:touch;*/} @media (min-width:640px) { #goods_buy_wrap .goods_option {max-height:150px;} } #goods_buy_wrap .goods_btn {padding:10px;} #goods_buy_wrap .goods_npay {margin:0 10px 10px; border:1px solid #ddd; background:#fff; padding:10px; overflow:hidden;} .goods_bg {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.5; filter:alpha(opacity=50); z-index:1000;} .restock-popup-bg {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.5; filter:alpha(opacity=50); z-index:1000;} /* 상품상세 - 상품설명 탭(대쉬보드)*/ #goods_tabs.flyingMode {position:fixed; top:40px; left:0px; width:100%;z-index:101;} /* 플로팅 - BACK/TOP(대쉬보드)*/ #floating_over {} #floating_over .ico_floating_back {position:absolute; bottom:10px; left:10px; background:url('/design/skinfood/mobile_skinfood/images/design/btn_floating_back.png'); width:37px; height:37px;} #floating_over .ico_floating_top {position:absolute; bottom:10px; right:10px; background:url('/design/skinfood/mobile_skinfood/images/design/btn_floating_top.png'); width:37px; height:37px;} #floating_over .ico_floating_recently {position:absolute; bottom:53px; right:11px; /*background:url('/design/skinfood/mobile_skinfood/images/design/btn_floating_recently.png'); background-size:37px 37px; width:37px; height:37px;*/} #floating_over .ico_floating_recently img {-webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; width:34px; height:34px; border:1px solid #7d7d7d; -webkit-box-shadow:1px 1px 0 0 rgba(0, 0, 0, 0.5); -moz-box-shadow:1px 1px 0 0 rgba(0, 0, 0, 0.5); box-shadow:1px 1px 0 0 rgba(0, 0, 0, 0.5);} #floating_over .ico_floating_zoom {position:absolute; bottom:53px; right:10px; background:url('/design/skinfood/mobile_skinfood/images/design/btn_floating_zoom.png'); width:37px; height:37px;} /* 상품상세 - 상품명 */ .sub_title_bar h2 {width:80%; margin:0 auto; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; white-space:nowrap; word-wrap:normal;} #goods_title_bar.flyingMode {position:fixed; top:0px; left:0px; width:100%; z-index:101;} #goods_title_bar h2 {line-height:40px; width:80%; margin:0 auto; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; white-space:nowrap; word-wrap:normal;} .btn_orderlogin_large {display:inline-block; background-color:#93a7d9; border:1px solid #8197cd; border-radius:5px !important; height:42px; line-height:42px; font-size:16px; font-family:dotum; font-weight:bold; color:#ffffff; letter-spacing:-1px;} /* 메인 슬라이드 버튼(리사이징) */ ul.anibanner_navigation_paging_style_1 li, ul.anibanner_navigation_paging_style_2 li, ul.anibanner_navigation_paging_style_3 li {float:none !important; display:inline-block;} .anibanner_navigation_btn_style_1_prev {background-size:cover !important; width:40px !important; height:40px !important;} .anibanner_navigation_btn_style_1_next {background-size:cover !important; width:40px !important; height:40px !important;} .anibanner_navigation_btn_style_2_prev {background-size:cover !important; width:40px !important; height:40px !important;} .anibanner_navigation_btn_style_2_next {background-size:cover !important; width:40px !important; height:40px !important;} .anibanner_navigation_btn_style_3_prev {background-size:cover !important; width:24px !important; height:40px !important;} .anibanner_navigation_btn_style_3_next {background-size:cover !important; width:24px !important; height:40px !important;} .anibanner_navigation_btn_style_4_prev {background-size:cover !important; width:25px !important; height:40px !important;} .anibanner_navigation_btn_style_4_next {background-size:cover !important; width:25px !important; height:40px !important;} /* 하단 콘텐츠 */ .sub_contents {padding:15px 10px; line-height:16px;} .sub_contents h3 {padding-bottom:5px; font-size:13px; font-weight:bold;} /* npay */ #npay_btn {display:inline-block; background-color:#3f63bf; border:1px solid #2346a1; border-radius:5px !important; height:42px; line-height:32px; font-size:16px; font-weight:600; color:#ffffff; letter-spacing:-1px; border-color: #00bd39 !important; background-color: #00c73c !important;background:url('/design/skinfood/mobile_skinfood/images/design/npay.png') no-repeat center; background-size:45px;} /* 추가버튼 */ .btn_style {/*height:30px !important; line-height:30px !important; font-size:14px;*/} .btn_style.wid100 {width:100%;} .btn_style.small {padding:0 10px; height:25px !important; line-height:26px !important; font-size:12px; font-weight:normal; cursor:pointer;} /* 상품상세 */ .gilTable {border-collapse:collapse;} .gilTable th {width:70px;background-color:#e8e8e8; text-align:left; padding-left:5px; font-size:11px; font-weight:normal; color:#535353; letter-spacing:-1px; border-top:1px solid #fefefe; border-bottom:1px solid #Fefefe;} .gilTable td {background-color:#fff; padding-left:5px; font-size:11px; color:#000; letter-spacing:-1px; border:1px solid #ddd; height:50px;} .ddlTable tr th {padding:5px 10px 5px 0px; border-top:1px solid #ddd;} .ddlTable tr td {padding:5px 0; border-top:1px solid #ddd;} .ddlTable tr:first-child th, .ddlTable tr:first-child td {border-top:none;} .gilTable {border:collapse;} .gilTable td { padding-left:5px; font-size:11px; color:#616161; letter-spacing:-1px; border-bottom:1px solid #ddd;} #goods_view {/*padding-bottom:54px;*/} /* #goods_thumbs {border-bottom:1px solid #ddd;} */ #goods_view .goods_name {color:#222222; font-size:16px; letter-spacing:-1px; font-weight:600;} #goods_view .short_desc {padding:0 10px; color:#555555; font-size:12px; letter-spacing:-1px;} #goods_view .goods_description {} #goods_view .goods_description_images {/*text-align:center;*/ padding:10px;} #goods_view .goods_description_images img {max-width:100%;} #goods_view .exchange_guide {padding:10px; letter-spacing:-1px;} #goods_view .goods_price {padding:5px 10px 0 0;} /* 할인율 */ .sale_rate_wrap {position:relative; float:right;} .sale_rate_wrap .sale_rate_bg {position:absolute; bottom:-15px; right:0; /*border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%;*/ background:#fd454d; width:50px; height:50px;} .sale_rate_wrap .sale_rate_txt {position:absolute; bottom:0; right:7px; text-align:center; font-size:14px; color:#fff;} .sale_rate_wrap .sale_rate_txt span {font-size:20px;} .goods_spec_table, .info_goods_spec_table {border-bottom:1px solid #fff;} .goods_spec_table th.gst_th {border-bottom:1px solid #fff; padding:5px 0 2px 10px; text-align:left; font-weight:600; font-size:13px; color:#666; letter-spacing:-1px;} .goods_spec_table th.gst_th .line {margin:0 0 0 -10px; border-top:1px solid #ddd; padding-top:5px;} .goods_spec_table td.gst_td ul.shipping li {line-height:1.6;} .goods_spec_table td.gst_td td, .info_goods_spec_table td.gst_td td {font-size:13px; color:#333;} .goods_spec_table td.gst_td, .info_goods_spec_table td.gst_td {border-bottom:1px solid #fff; padding:2px 10px 2px 15px; height:20px; text-align:left; font-size:13px; color:#333;} .goods_spec_table td.gst_sub {border-bottom:1px solid #fff; padding:5px 10px;} .info_goods_spec_table td.gst_sub {/*padding:10px; border-bottom:1px solid #e0e0e0;*/} .goods_spec_table td.gst_sub .gst_sub_inner, .info_goods_spec_table td.gst_sub .gst_sub_inner {padding:2px 15px; border:1px solid #e0e0e0; background-color:#f1f1f1; } .goods_spec_table td.gst_sub .gst_sub_table td, .info_goods_spec_table td.gst_sub .gst_sub_table td {padding:7px 0; border-top:1px solid #ddd; font-size:13px;} .goods_spec_table td.gst_sub .gst_sub_table tr:first-child td, .info_goods_spec_table td.gst_sub .gst_sub_table tr:first-child td {border-top:0px;} .goods_spec_table td.gst_sub .gst_sub_table2, .info_goods_spec_table td.gst_sub .gst_sub_table2 {border-collapse:collapse; border:1px solid #e0e0e0;} .goods_spec_table td.gst_sub .gst_sub_table2 th, .info_goods_spec_table td.gst_sub .gst_sub_table2 th {border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0; height:35px; background-color:#ffffff; text-align:center;} .goods_spec_table td.gst_sub .gst_sub_table2 td, .info_goods_spec_table td.gst_sub .gst_sub_table2 td {border-top:1px solid #e0e0e0; height:35px; background-color:#f1f1f1; text-align:center;} .goods_spec_table .consumer, .info_goods_spec_table .consumer {font-size:13px; /*font-weight:600;*/ color:#999;} .goods_spec_table .price, .info_goods_spec_table .price {/*font-family:tahoma;*/ font-size:20px; color:#fd454d; font-weight:bold; vertical-align:middle;} .goods_spec_table .price .price_won, .info_goods_spec_table .price .price_won {font-family:helvetica,sans-serif;font-size:15px;} .goods_spec_table select, .info_goods_spec_table select {min-width:120px;} .goods_spec_table .coupon_btn, .info_goods_spec_table .coupon_btn {position:relative; display:inline-block; width:71px; height:34px; background:url("/design/skinfood/mobile_skinfood/images/design/coupon_bg.gif"); vertical-align:middle;} .goods_spec_table .coupon_btn span.cb_percent, .info_goods_spec_table .coupon_btn span.cb_percent {position:absolute; left:4px; top:14px; font-size:14px; /*font-family:tahoma;*/ color:#c00c0b; font-weight:600;} .goods_spec_table .coupon_btn span.cb_text, .info_goods_spec_table .coupon_btn span.cb_text {position:absolute; left:100%; top:20px; margin-left:3px; width:65px; color:#c00c0b; font-size:11px; /*font-family:dotum;*/ font-weight:600; text-decoration:underline;} /*.list_table_style {} .list_table_style th {height:32px; font-size:11px; font-weight:normal; border-top:2px solid #e7e7e7; border-bottom:2px solid #e7e7e7;} .list_table_style td {height:18px; padding:3px 0; font-size:11px; border-bottom:1px solid #e9e9e9;}*/ .shararea { background-color:#fff; padding:15px 5px 15px 5px; } .shararea img{ max-width:100% } .relation_area { background-color:#fff; padding:10px;} .goods_spec_line {margin-top:7px; border-bottom:1px solid #ddd;} .coupon_area {border-bottom:0px solid #e9e9e9; padding:0; text-align:center;} #goods_thumbs_paging {position:absolute; top:-45px; width:100%; text-align:center; z-index:10;} table.event_datetime {border-top:1px solid #d3d3d3; background-color:#fafafa; box-sizing:content-box;} table.event_datetime .event_datetime_box {background-color:#777; height:30px; line-height:30px; padding:0 8px; margin:5px 0 5px 5px; font-size:16px; color:#fff; font-weight:600; text-align:center; white-space:nowrap;} #floating_window {display:block; position:fixed; bottom:0px; left:0px; width:100%; background-color:#f4f4f4; z-index:1000;} #floating_window .fw_btn {position:absolute; top:100%; width:100%; height:51px;} #floating_window .fw_goods_option_area {overflow:hidden; overflow-y:auto;} #floating_window .fw_goods_option_area .goods_option_table {background-color:transparent; border:none !important;} #floating_window .fw_goods_option_area .goods_option_table th {background-color:transparent; border:none !important;} #floating_window .fw_goods_option_area .goods_quantity_table_container {background-color:#fff;} #floating_window .fw_goods_price_area {height:30px; padding-top:10px;} #floating_window .fw_goods_ea_area {height:30px; padding-top:10px;} #floating_window .fw_btn_open {background:url('/design/skinfood/mobile_skinfood/images/design/quickbar_btn_open.png') no-repeat center top; background-size:360px 25px;} #floating_window .fw_btn_close {background:url('/design/skinfood/mobile_skinfood/images/design/quickbar_btn_close.png') no-repeat center top; background-size:360px 25px;} .additions_table_style {border-top:1px solid #666} .additions_table_style th, .additions_table_style td {border-bottom:1px solid #d8d9dd} .additions_table_style th {padding:12px 0 12px 10px; text-align:left; width:65px;} .additions_table_style td {padding:12px 0 12px 10px;} .sub_info_table {background-color:#fff; margin-top:5px; border:1px solid #e0e0e0} .sub_info_table th, .sub_info_table td {border-top:1px solid #e0e0e0} .sub_info_table th {padding:12px 0 12px 10px; text-align:left; color:#000;} .sub_info_table td {padding:12px 0 12px 10px; color:#666;} .sub_info_table tr:first-child th, .sub_info_table tr:first-child td {border-top:0px;} .info_goods_spec_table {border-top:1px solid #ddd; border-bottom:0px solid #ddd;} .info_goods_spec_table th.gst_th {padding:3px 0 3px 10px; height:32px; text-align:left; font-weight:600; color:#515151; font-size:13px; border-bottom:1px solid #fff; letter-spacing:-1px} .info_goods_spec_table td.gst_td td {color:#515151; font-size:12px;} .info_goods_spec_table td.gst_td {padding:6px 10px 6px 15px; text-align:left; color:#515151; font-size:13px; border-bottom:1px solid #fff; line-height:20px;} .info_goods_spec_table td.gst_sub {padding:0 10px 10px; /*border-bottom:1px solid #e0e0e0;*/} .info_goods_spec_table td.gst_sub .gst_sub_inner {padding:5px 10px; border:1px solid #e0e0e0;} .info_goods_spec_table td.gst_sub .gst_sub_table td {padding:7px 0; border-top:1px solid #e0e0e0} .info_goods_spec_table td.gst_sub .gst_sub_table tr:first-child td {border-top:0px;} .ul_list {line-height:1.6;} .ul_list li {background:url('/design/skinfood/mobile_skinfood/images/common/ico_list2.png') no-repeat left 9px; padding-left:6px;} .ico_quest {display:inline-block; border:0; background:url('/design/skinfood/mobile_skinfood/images/common/ico_question.png') no-repeat; width:21px; height:21px; text-indent:-9999px; cursor:pointer;} .ico_down {display:inline-block; border:0; background:url('/design/skinfood/mobile_skinfood/images/common/ico_download.png') no-repeat; width:21px; height:21px; text-indent:-9999px; cursor:pointer;} /* 주문/결제 */ /* div.default_table_style {border:1px solid #d0d0d0; background:#fff; padding:10px;} */ div.default_table_style li:first-child {/*margin-top:0;*/} div.default_table_style.border_none { border:none!important; } /* 증빙자료 테이블 전용 */ div.default_table_style table.receipt_table { } div.default_table_style table.receipt_table tr td { padding: 0 0 5px 0; } .ship_message {margin-top:5px; position:relative; display:inline-block; border:1px solid #ddd; background:#fff url('/design/skinfood/mobile_skinfood/images/common/new_arrow.png') no-repeat right; width:100%; height:30px; vertical-align:middle;} .ship_message input {float:left; border:0; padding-left:5px; width:90%;} .ship_message .click {float:right; width:18px; height:18px;} .ship_message .add_message {display:none; position:absolute; top:30px; left:-1px; border:1px solid #ddd; background:#fff; width:100%; -webkit-box-shadow:2px 2px 1px 0 rgba(0,0,0, 0.05); -moz-box-shadow:2px 2px 1px 0 rgba(0,0,0, 0.05); box-shadow:2px 2px 1px 0 rgba(0,0,0, 0.05);z-index:2;} .ship_message .add_message li {border-top:1px dotted #ddd; height:30px; line-height:30px; padding-left:5px; color:#666; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .ship_message .add_message li:first-child {border-top:0;} /* .settle_tab {border-top:1px solid #ccc; border-left:1px solid #ccc;} .settle_tab li {float:left; width:50%;} .settle_tab li a {display:block; background:#fff; height:30px; line-height:30px; text-align:center; font-size:14px; letter-spacing:-1px; cursor:pointer;} .settle_tab li.current a {font-weight:600; color:#333;} .settle_tab_contents {border:1px solid #d0d0d0; padding:10px;} .settle_tab_contents li {margin-top:5px;} .settle_tab_contents li:first-child {margin-top:0;}*/ textarea.wid100 {width:96%; width: -webkit-calc(100% - 12px); width:-moz-calc(100% - 12px);width:calc(100% - 12px);} input.wid100 {width:96%; width: -webkit-calc(100% - 12px); width:-moz-calc(100% - 12px);width:calc(100% - 12px);} /* .ul_delivery > li {margin-top:10px; border-top:1px dotted #aaa; padding-top:10px; padding-bottom:0px;} .ul_delivery > li:first-child {margin-top:0; border-top:0; padding-top:0;} .ul_delivery > li ul {margin:-20px 0 0 30px} */ .ul_coupon > li {margin-top:10px; border-top:1px dotted #aaa; padding-top:5px; padding-bottom:0px; line-height:1.8;} .ul_coupon > li:first-child {margin-top:0; border-top:0; padding-top:0;} .settle_chg_wrap {position:absolute; bottom:0; right:0;} .coupon_goods_name {line-height:35px;white-space:nowrap;} .shipping_method {padding-right:10px;display:inline-block;} .policy_contents { border:1px solid #b6b6b6; height:120px; overflow:hidden; overflow-y:auto; padding:10px; background-color:#fff; } .coupon_btn {position:relative; display:inline-block; width:71px; height:34px; background:url("/design/skinfood/mobile_skinfood/images/design/coupon_bg.gif"); vertical-align:middle;} .coupon_btn span.cb_percent {position:absolute; left:4px; top:14px; font-size:14px; font-family:tahoma; color:#c00c0b; font-weight:bold;} .coupon_btn span.cb_text {position:absolute; right:100%; top:20px; margin-left:3px; width:65px; color:#c00c0b; font-size:11px; font-family:dotum; font-weight:bold; text-decoration:underline;} .promotionlay ul li {padding:3px;} .payment_method_select {background:none;} /* .payment_method_select li label {display:block; width:auto; height:auto; line-height:auto; margin:auto; text-indent:auto;} #payment_type {background:#fff;} #payment_type > li {float:left; width:25% !important; min-height:130px; text-align:center;} #payment_type > li:first-child {margin-left:0;} #payment_type > li > div {border-radius:10px; width:74px; height:74px; overflow:hidden; margin:0 auto;} #payment_type > li > div > label {background:#eee url('/design/skinfood/mobile_skinfood/images/common/bg_settle.png') no-repeat; width:100%; height:100%; text-align:center;} #payment_type > li > div > label input[type="radio"], #payment_type > li > div > label .ez-radio {display:none;} #payment_type > li > p {margin-top:10px; text-align:center; line-height:14px;} #payment_type > li > div.payco2 > label {background-position:-840px 0;} #payment_type > li > div.kakaopay2 > label {background-position:0 0;} #payment_type > li > div.card > label {background-position:-84px 0;} #payment_type > li > div.account > label {background-position:-168px 0;} #payment_type > li > div.escrow_account > label {background-position:-252px 0;} #payment_type > li > div.virtual > label {background-position:-336px 0;} #payment_type > li > div.escrow_virtual > label {background-position:-420px 0;} #payment_type > li > div.cellphonepay > label {background-position:-504px 0;} #payment_type > li > div.bank2 > label {background-position:-588px 0;} #payment_type > li > div.paypal > label {background-position:-672px 0;} #payment_type > li > div.eximbay > label {background-position:-756px 0;} #payment_type > li > div.active > label {background:#778ece url('/design/skinfood/mobile_skinfood/images/common/bg_settle.png') no-repeat;} #payment_type > li > div.active + p {font-weight:600;} #payment_type > li > div.payco2.active > label {background-position:-840px -80px;} #payment_type > li > div.kakaopay2.active > label {background-position:0 -80px;} #payment_type > li > div.card.active > label {background-position:-84px -80px;} #payment_type > li > div.account.active > label {background-position:-168px -80px;} #payment_type > li > div.escrow_account.active > label {background-position:-252px -80px;} #payment_type > li > div.virtual.active > label {background-position:-336px -80px;} #payment_type > li > div.escrow_virtual.active > label {background-position:-420px -80px;} #payment_type > li > div.cellphonepay.active > label {background-position:-504px -80px;} #payment_type > li > div.bank2.active > label {background-position:-588px -80px;} #payment_type > li > div.paypal.active > label {background-position:-672px -80px;} #payment_type > li > div.eximbay.active > label {background-position:-756px -80px;} */ /* 주문내역 */ table.myorder-top-bar { width:100%; } table.myorder-top-bar th {width:20%; height:40px; line-height:40px; font-size:12px; text-align:left; padding-left:5px; } table.myorder-top-bar td { position:relative;height:40px;line-height:40px;text-align:right;padding-right:5px; } table.myorder-top-bar td div {position:absolute;top:0;right:0;} select[name='sc_date'] { height:25px; padding:3px; background-color:#ffffff; } .order-mstep {font-size:16px;font-weight:bold;color:#ffffff;} /* 주문자 정보 */ div.order-info-lay table.order-info-table td {font-weight:bold;background-color:#f5f7f7;color:#4a4a4a;border-bottom:1px solid #d7d7d7;text-align:left;padding-left:10px;font-size:12px;height:30px;} div.order-info-lay table.order-info-table td.order-name {text-align:center;font-size:14px;border-right:1px solid #d7d7d7;} /* 배송 현황 */ div.shipping-title {font-weight:bold;background-color:#f5f7f7;color:#4a4a4a;border-bottom:1px solid #d7d7d7;text-align:left;padding:10px 0 10px 10px;font-size:12px;border-top:2px solid #d7d7d7;} div.multiShippingItem {padding:5px;border-bottom:1px solid #d7d7d7;;} div.export-shipping-address {/*margin:10px 2px 10px 8px;color:#000;*/} /* 매출증빙 */ .sales_tax {background-color:#EAEAEA; border:1px solid #BDBDBD;} .coupon-export-item {border:3px solid #d6d6d6; margin:5px; color:#000} .coupon-export-item-date {height:40px; line-height:37px; background-color:#e2e4e4; padding-left:5px;} .coupon-export-item-status {font-size:17px; font-weight:bold; color:#000; background-color:#d6d6d6; width:100%; height:40px;} .btn-coupon-use { width:100px; } div.cart-lay {background-color:#f5f7f7;padding:5px;} div.cart-lay div.cart-list-lay {border:1px solid #ddd;} /* 배송 현황 */ div.export-lay div.shipping-title {font-weight:bold;background-color:#f5f7f7;color:#4a4a4a;border-bottom:1px solid #d7d7d7;text-align:left;padding:10px 0 10px 10px;/*font-size:12px;*/border-top:2px solid #d7d7d7;} div.export-lay div.export-title-lay {background-color:#b9bcbd;border-top:1px solid #a9abac;} div.export-lay div.export-title-lay table.export-title-table td {height:36px;color:#444444;/*font-size:12px;*/} div.export-lay div.export-title-lay table.export-title-table td.export-date {padding-left:8px;} div.export-lay div.export-title-lay table.export-title-table td.export-btn {text-align:right;padding-right:8px;} div.export-lay div.export-shipping-address-title { padding-left:8px;line-height:36px;background-color:#d6d6d6; /*font-size:12px;*/font-weight:bold;color:#4a4a4a;} div.export-lay div.export-shipping-address {background-color:#fff;color:#000;/*padding:10px 0 10px 8px; font-size:12px;*/} div.export-lay div.export-shipping-address.multiShippingItem {padding:0; /*margin-bottom:20px;border-bottom:3px solid #c2c6c8;*/background-color:#f5f7f7;} div.export-lay div.export-ea-lay {border-bottom:1px solid #d7d7d7;} div.export-lay div.export-shipping-address div.shipping-address-btn {padding:0 10px; height:40px; line-height:40px; text-align:right;} div.export-lay div.export-shipping-address table.export-shipping-address-table {border-collapse:collapse;} div.export-lay div.export-shipping-address table.export-shipping-address-table th {padding-left:10px; /*font-size:12px;*/color:#4a4a4a;text-align:left; border-bottom:1px solid #e0e0e0; border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0; background-color:#f5f5f5;} div.export-lay div.export-shipping-address table.export-shipping-address-table td {text-align:left;padding:6px 0;padding-left:10px; border-top:1px solid #e0e0e0; border-bottom:1px solid #e0e0e0; background-color:#fff;} div.export-lay div.export-shipping-address table.export-shipping-address-table td input[type="text"] {height:29px;text-align:left;padding-left:5px;} div.export-lay div.export-shipping-address table.export-shipping-address-table td textarea {font-family:Dotum;font-size:11px;color:#b1b1b1;} div.export-lay div.export-ea-lay table.export-ea-table td {height:43px;/*font-size:12px;*/} div.export-lay div.export-ea-lay table.export-ea-table td.title {text-align:left;padding-left:8px;} div.export-lay div.export-ea-lay table.export-ea-table td.ea { text-align:right;padding-right:8px;} div.export-lay div.export-ea-lay table.export-ea-table td.ea.rgtbd {border-right:1px solid #d7d7d7;} .export-summary { font-size:12px; } .export-summary .export-summary-border { border-top:1px solid #ccc; } /* 404 에러페이지 */ #MOBILE {width:90%; margin:30px auto 0; text-align:center;} #MOBILE h1 {margin:20px auto; font-size:20px; font-weight:normal; color:#333; letter-spacing:-1.5px;} #MOBILE p {margin:0 auto; font-size:16px; font-weight:normal; color:#666; letter-spacing:-1px;} #MOBILE p .phone {font-family:'tahoma'; font-weight:bold; letter-spacing:0;} #MOBILE a.btn_important_large {width:100%; height:50px; line-height:50px; font-size:18px; font-weight:normal; color:#fff;} .ul_list li {background:url('/design/skinfood/mobile_skinfood/images/common/ico_list.png') no-repeat left 50%; padding-left:6px;} .ul_list2 li {background:url('/design/skinfood/mobile_skinfood/images/common/ico_list2.png') no-repeat left 50%; padding-left:8px;} /* 작은 레이어 */ .detailDescriptionLayer {/*min-width:200px;*/ position:absolute; z-index:9999;} .detailDescriptionLayer .layer_wrap {position:relative; border:1px solid #999; background:#fff; -webkit-box-shadow:2px 2px 1px 0 rgba(0,0,0, 0.1); -moz-box-shadow:2px 2px 1px 0 rgba(0,0,0, 0.1); box-shadow:2px 2px 1px 0 rgba(0,0,0, 0.1);text-align:left;} .detailDescriptionLayer .layer_wrap2 {margin:2px 0 0 -30px; position:relative; border:1px solid #aaa; border-radius:5px; box-shadow:2px 2px 2px rgba(0, 0, 0, 0.1); background:rgba(255, 255, 255, 0.95); padding:10px; line-height:1.4;} .detailDescriptionLayer .layer_wrap h1 {border-bottom:1px solid #ccc; background:#f1f1f1; padding-left:15px; text-align:left; height:30px; line-height:30px; font-family:'dotum'; font-size:13px; font-weight:bold; letter-spacing:-1px;} .detailDescriptionLayer .layer_wrap a.detailDescriptionLayerCloseBtn {position:absolute; top:0; right:0; display:inline-block; background:url('/design/skinfood/mobile_skinfood/images/common/btn_detail_close.png') no-repeat; width:30px; height:30px; text-indent:-9999px;} .detailDescriptionLayer .layer_wrap .layer_inner {padding:15px; text-align:left; font-size:13px; color:#666; line-height:1.8;} .detailDescriptionLayer .layer_wrap .layer_inner strong, .detailDescriptionLayer .layer_wrap .layer_inner a {font-size:inherit; color:inherit;} .detailDescriptionLayer .layer_wrap .layer_inner a.more {display:block; background:url('/design/skinfood/mobile_skinfood/images/common/btn_detail_more2.png') no-repeat right 7px; padding-right:8px; text-align:right; color:#2c8ff0;} .detailDescriptionLayer .layer_wrap .layer_inner .ul_list > li {margin-top:10px; background:url('/design/skinfood/mobile_skinfood/images/common/ico_detail_list.png') no-repeat left 3px; padding-left:15px;} .detailDescriptionLayer .layer_wrap .layer_inner .ul_list > li:first-child {margin-top:0;} .detailDescriptionLayer .layer_wrap .layer_inner .ul_list > li .ul_list2 {margin-left:-8px;} .detailDescriptionLayer .layer_wrap .layer_inner dl.ship_country {margin-bottom:5px; width:100%; padding:0;} .detailDescriptionLayer .layer_wrap .layer_inner dl.ship_country dt {float:left; width:65%;} .detailDescriptionLayer .layer_wrap .layer_inner dl.ship_country dt img {border:1px solid #ddd;} .detailDescriptionLayer .layer_wrap .layer_inner dl.ship_country dd {float:right; width:35%; text-align:right;} .detailDescriptionLayer .ddlTable tr th, .detailDescriptionLayer .ddlTable tr td {padding:0; border-top:1px solid #ddd; text-align:center;} .detailDescriptionLayer .ddlTable tr:first-child th, .detailDescriptionLayer .ddlTable tr:first-child td {border-top:none; line-height:inherit} .detailDescriptionLayer .tbl_row {border-collapse:collapse; font-size:12px; font-weight:normal; color:#666;} .detailDescriptionLayer .tbl_row tbody th {border:1px solid #ddd; background:#f9f9f9; text-align:left; padding:5px; line-height:inherit} .detailDescriptionLayer .tbl_row tbody td {border:1px solid #ddd; background:#fff; padding:5px; line-height:inherit} .detailDescriptionLayer .tbl_col {border-collapse:collapse; font-size:12px; font-weight:normal; color:#666;} .detailDescriptionLayer .tbl_col th, .detailDescriptionLayer .tbl_col td {border:1px solid #ddd; padding:5px; line-height:inherit} .detailDescriptionLayer .tbl_col thead th {background:#f1f1f1; text-align:center; line-height:inherit} .detailDescriptionLayer .tbl_col tbody th {background:#f9f9f9; text-align:left; line-height:inherit} .detailDescriptionLayer .tbl_col tbody td {background:#fff; text-align:right; line-height:inherit;} .currency_compare_lay .detailDescriptionLayer { margin-left:-50px;} .currency_compare_lay .detailDescriptionLayer.mlminus30 { margin-left:-30px;} .currency_compare_lay .detailDescriptionLayer.mlminus50 { margin-left:-50px;} .currency_compare_lay .detailDescriptionLayer.mlminus100 { margin-left:-100px;} .currency_compare_lay .detailDescriptionLayer.mtminus95 { margin-top:-95px;} .currency_compare_lay .detailDescriptionLayer.mtminus100 { margin-top:-100px;} .currency_compare_lay .detailDescriptionLayer.mtminus105 { margin-top:-105px;} .currency_open { cursor:pointer;} .currency_list li{ padding:0px;} /* 큰 레이어 팝업 */ .ui-dialog {/*border:1px solid #999 !important;*/} .ui-widget {font-size:13px;} .ui-dialog .ui-dialog-box {border:1px solid #ddd; padding:15px;} .ui-dialog .ui-dialog-box .ul_list2 li {margin-top:10px; color:#666;} .ui-dialog .ul_ship {} .ui-dialog .ul_ship > li {margin-top:15px;} .ui-dialog .ul_ship > li dl {margin-bottom:5px;} .ui-dialog .ul_ship > li dt {float:left; font-weight:bold;} .ui-dialog .ul_ship > li dd {float:right;} .ui-dialog .ico_de {display:inline-block; background:url('/design/skinfood/mobile_skinfood/images/common/ico_detail_list.png') no-repeat; width:11px; height:11px; text-indent:-9999px; vertical-align:middle;} .ui-dialog .address_box {position:relative; } .ui-dialog .address_box > dl {margin:10px 0 0 0; border:1px solid #ccc;} .ui-dialog .address_box:nth-child(odd) > dl {margin-left:0;} .ui-dialog .address_box > dl > dt {border-bottom:1px solid #e0e0e0; background:#f9f9f9; padding:8px 15px 5px; font-size:14px;} .ui-dialog .address_box > dl > dt p {font-size:13px; color:#888;} .ui-dialog .address_box > dl > dd {padding:13px 15px 10px;} .ui-dialog .address_box > .btns {position:absolute; top:10px; right:10px;} .ui-dialog .address_box > .btns a.more {display:inline-block; margin-left:5px; background:url('/design/skinfood/mobile_skinfood/images/common/btn_detail_more.png') no-repeat right 6px; padding-right:5px; text-align:right; color:#666;} .ui-dialog .pickup {width:100%; height:120px; margin:10px auto;} .ui-dialog .pickup li {float:left; padding-top:75px; text-align:center; line-height:1.2; color:#666;} .ui-dialog .pickup li.fir {background:url('/design/skinfood/mobile_skinfood/images/common/img_pickup1.png') no-repeat center top;} .ui-dialog .pickup li.sec {background:url('/design/skinfood/mobile_skinfood/images/common/img_pickup2.png') no-repeat center top;} .ui-dialog .pickup li.thi {background:url('/design/skinfood/mobile_skinfood/images/common/img_pickup3.png') no-repeat center top;} .ui-dialog .pickup li.fou {background:url('/design/skinfood/mobile_skinfood/images/common/img_pickup4.png') no-repeat center top;} .ui-dialog .pickup li.fiv {background:url('/design/skinfood/mobile_skinfood/images/common/img_pickup5.png') no-repeat center top;} .ui-dialog .pickup li:nth-child(odd) {width:25%;} .ui-dialog .pickup li:nth-child(even) {width:12.5%; font-size:11px;} .ui-dialog .pickup li.point {font-weight:bold; color:#8297d2;} .ui-dialog .ul_coupon > li {border-top:1px solid #ddd; margin-top:15px; padding-top:15px;} .ui-dialog .ul_coupon > li:first-child {border-top:0; margin-top:0; padding-top:0;} .ui-dialog .ul_coupon > li li {margin-top:5px;} /* 주문 완료페이지 */ .policy_area .btn_policy {cursor:pointer;} .complete_wrap {padding:0px;} .complete_wrap h3 {padding:10px 0; text-align:center; font-size:20px; font-weight:bold;} .complete_wrap p {text-align:center; font-size:15px;} .complete_wrap p strong {font-weight:600;} .complete_wrap h4 {margin:20px 0 10px; border-bottom:1px solid #666; line-height:30px; font-size:15px; font-weight:600; color:#333; letter-spacing:-1px;} .complete_wrap .complete_info_lay > li {line-height:20px;} .complete_wrap .complete_info_lay > dl {display:table; width:100%;} .complete_wrap .complete_info_lay > dl dt {display:table-cell; width:20%; vertical-align:top; line-height:20px;} .complete_wrap .complete_info_lay > dl dd {display:table-cell; line-height:20px;} /* 메인 */ .main_slider {} .main_display h3 {border-bottom:1px solid #333; padding:20px 0 10px; text-align:center; font-size:15px; font-weight:bold;} .main_bottom1 {margin-top: 20px;} .main_bottom1 ul {zoom:1;} .main_bottom1 ul:after {clear:both; display:block; content:'';} .main_bottom1 ul li {float:left; width:calc(100%/4 - 1px); text-align:center; border-top:1px solid #ddd; border-left:1px solid #ddd; padding:15px 0; font-size:12px;} .main_bottom1 ul li:first-child {border-left:none;} .main_bottom2 {} .main_bottom2 ul {zoom:1;} .main_bottom2 ul:after {clear:both; display:block; content:'';} .main_bottom2 ul li {float:left; width:calc(100%/2 - 1px); border-top:1px solid #ddd; border-left:1px solid #ddd; text-align:center; padding:15px 0; height: 100%; line-height:20px; font-size:12px;} .main_bottom2 ul li:first-child {border-left:none;} .main_bottom2 .tel {font-size:14px; font-weight:bold;} /* 상품디스플레이 - 리스트 */ .goods_list ol.gli_contents {} .goods_list ol.gli_contents.list_wrap {padding-top:0px !important; padding-bottom:0px !important;} .goods_list ol.gli_contents li .color {display:inline-block; border:1px solid #ddd; line-height:1.0;} /* 상품디스플레이 - 페이지뷰&찜하기 */ .goods_list ol.gli_contents li .goods_list_page_view {margin-right:6px;} .goods_list ol.gli_contents li .goods_list_page_view .goods_list_page_view_img {} .goods_list ol.gli_contents li .goods_list_page_view .goods_list_page_view_count {} .goods_list ol.gli_contents li .goods_list_goods_zzim {} .goods_list ol.gli_contents li .goods_list_goods_zzim:before {display:inline-block; content:''; position:relative; top:2px; left:0; width:1px; height:10px; margin-right:6px; background-color:#ccc;} .goods_list ol.gli_contents li .goods_list_goods_zzim label {vertical-align:top;} .goods_list ol.gli_contents li .goods_list_goods_zzim .goods_list_goods_zzim_img {} .goods_list ol.gli_contents li .goods_list_goods_zzim .goods_list_goods_zzim_count {} /*마이페이지 - 예약 표시*/ .hop_reserve_date_st {float:right;border:1px solid #FF5E00;padding-right:2px;padding-left:2px;color:#FF5E00;} /*----------------------------------*/ /* O2O /*----------------------------------*/ .o2o_join_form .hide { display:none; } /* O2O 가입 */ .resp_o2o_join_wrap { max-width:768px; margin:15px auto; line-height:1.5; background:#fff; border-radius:10px; box-shadow:0 0 30px #bbb; } .resp_o2o_join_wrap label { margin:0; } .resp_o2o_join_wrap .contents_area { max-width:479px; padding:20px 10px 30px; margin:0 auto; } .resp_o2o_join_wrap .title_a { text-align:center; padding-bottom:15px; } .resp_o2o_join_wrap .remain_time { padding-top:6px; font-size:14px; color:#000; } .resp_o2o_join_wrap .remain_time .time { font-weight:bold; font-size:16px; color:#fb0000; } .resp_o2o_join_wrap .all_agree { display:inline-block; margin-top:25px; margin-bottom:6px; height:24px; padding-left:28px; font-size:15px; line-height:24px; font-weight:600; color:#000; background:url(/design/skinfood/mobile_skinfood/images/common/icon_check_all_off.png) 0 50% no-repeat; background-size:24px; } .resp_o2o_join_wrap .all_agree.on { background-image:url(/design/skinfood/mobile_skinfood/images/common/icon_check_all_on.png); } .resp_o2o_join_wrap .all_agree input[type='checkbox'] { width:0; height:0; visibility:hidden; position:absolute; left:0; top:0; } .resp_o2o_join_wrap .agree_list2 { font-size:13px; } .resp_o2o_join_wrap .agree_list2>li { padding:2px 0; } .resp_o2o_join_wrap .agree_list2>li>label { display:inline-block; width:246px; padding-left:26px; background:url(/design/skinfood/mobile_skinfood/images/common/icon_check_off.png) 5px 4px no-repeat; background-size:14px; } .resp_o2o_join_wrap .agree_list2>li>label.on { background-image:url(/design/skinfood/mobile_skinfood/images/common/icon_check_on.png); } .resp_o2o_join_wrap .agree_list2 input[type='checkbox'] { width:0; height:0; visibility:hidden; position:absolute; left:0; top:0; } .resp_o2o_join_wrap .agree_link_btn { display:inline-block; box-sizing:border-box; height:24px; line-height:22px; padding:0 6px; font-size:12px; color:#666; text-decoration:none; text-align:center; border:1px #bbb solid; background:#fff; border-radius:2px; } .resp_o2o_join_wrap .btn_submit { width:100%; box-sizing:border-box; border:none; height:52px; background:#3c414c; font-size:22px; line-height:24px; color:#efefef; border-bottom-left-radius:10px; border-bottom-right-radius:10px; } .o2o_join_form { display:table; width:100%; table-layout:fixed; } .o2o_join_form>ul { display:table-row; } .o2o_join_form>ul>li { display:table-cell; vertical-align:top; padding:4px 0; } .o2o_join_form>ul>li.btns { width:124px; padding-left:8px; } .o2o_join_form .input_text { box-sizing:border-box; width:100%; height:52px; padding:16px 15px 0; font-size:16px; line-height:1.2; color:#000; border:1px #bbb solid; } .o2o_join_form .input_text:focus { border-color:#767676; } .o2o_join_form .btn_a { box-sizing:border-box; width:100%; height:52px; text-align:center; border:none; background:#7d7d7d; font-size:16px; line-height:50px; color:#fff; } .o2o_join_form .label1 { display:block; position:relative; cursor:text; } .o2o_join_form .label1 .title { position:absolute; left:0; top:18px; padding:0 0 0 15px; line-height:52px; font-size:16px; line-height:1.2; color:#767676; transition:all 0.2s; } .o2o_join_form .label1 .input_text.active + .title { color:#999; left:2px; top:5px; font-size:12px; } .o2o_join_form .label1 .input_text.complete { background:#faffbd; } .o2o_join_form ul.label1 { display:table; width:100%; table-layout:fixed; } .o2o_join_form ul.label1>li { display:table-cell; vertical-align:top; padding-left:16px; position:relative; } .o2o_join_form ul.label1>li:first-child { padding-left:0; } .o2o_join_form ul.label1>li:before { content:'-'; position:absolute; left:5px; top:17px; font-size:16px; font-weight:600; color:#999; } .o2o_join_form ul.label1 label { cursor:text; } .o2o_join_form ul.label1>li:first-child:before { content:''; display:none; } /* O2O layout_side */ .o2o_barcode_side { display:inline-block; position:absolute; left:5px; top:5px; width:38px; height:21px; padding:4px; border:2px #333 solid; border-radius:4px; line-height:0; font:0; background:url(/design/skinfood/mobile_skinfood/images/common/o2o_barcode.png) 50% 50% no-repeat; background-size:38px; cursor:pointer; } #layout_side div.top_userinformation .o2o_barcode_side + .welcome { top:6px; left:60px; width:100px; line-height:1.3; white-space:initial; } #layout_side div.top_userinformation .o2o_barcode_side + .welcome>strong { display:block; } /* O2O 쿠폰 */ .o2o_coupon_list { overflow:hidden; zoom:1; } .o2o_coupon_list>li { box-sizing:border-box; border:1px solid #cbcbcb; padding:10px 70px 10px 15px;; box-sizing:border-box; margin:10px 0 0 10px; height:124px; background:#fff url('/design/skinfood/mobile_skinfood/images/common/cpn_bg_r.jpg') no-repeat right top; background-size:38px 124px;} .o2o_coupon_list .coupon_name { padding-top:5px; font-size:14px; font-weight:600; color:#000; } .o2o_coupon_list .coupon_salepricetitle { padding-top:5px; font-size:22px; font-weight:600; letter-spacing:-1px; color:#000; } .o2o_coupon_list .coupon_date { padding-top:12px; font-size:12px; color:#888; } .o2o_coupon_list .coupon_use { padding-top:2px; font-size:12px; color:#888; } .o2o_coupon_list .coupongoodsreviewbtn { height:24px; box-sizing:border-box; border:1px #bbb solid; background:#f8f8f8; padding:0 8px; font-size:12px; line-height:22px; color:#333; border-radius:2px; } .o2o_barcode { position:absolute; right:0; top:0; width:60px; height:100%; background:#eeeeee; border-left:1px #c5c5c5 dashed; } .o2o_barcode:after { display:block; content:''; position:absolute; left:5px; top:50%; width:38px; height:34px; margin-top:-24px; padding:4px; border:2px #333 solid; border-radius:4px; line-height:0; font:0; background:url(/design/skinfood/mobile_skinfood/images/common/o2o_barcode.png) 50% 50% no-repeat; background-size:38px 34px; cursor:pointer; } .barcode_wrap { display: table; width: 100%; height: 100%; } .barcode_area { display: table-cell; vertical-align: middle; text-align: center; } .barcode_img { text-align: center;} .barcode_img img{ width: 90%; } .barcode_text { text-align: center; margin-top: 15px;} /*캡쳐방지*/ .captcha_code_refresh {display:inline-block; margin-left:5px; background:url('/design/skinfood/mobile_skinfood/images/common/icon_reload2.png') no-repeat center center; vertical-align:middle; background-size:25px; width:25px; height:25px;} .board_captcha {display:inline-block;} .captcha_code {margin-left:5px;} /*---------------------------------------------------------------------------------------------------------------*/ @charset "utf-8"; /******************************************* Author : 퍼스트몰(firstmall) Author URL : http://www.firstmall.kr Creation Date : 2016-06-01 Modify Date : 2017-07-31 *******************************************/ /* list*/ table.bbslist_table_style {border-top:2px solid #545454; border-bottom:1px solid #000; font-size:11px; color:#444;} table.bbslist_table_style thead th {height:26px; background:#fafafa; background:url('../..//design/skinfood/mobile_skinfood/images/design/tbl_th_bg.gif') repeat-x; border-left:1px solid #e0e0e0; border-bottom:1px solid #bbbbbb; font-weight:normal;} table.bbslist_table_style thead th:first-child {border-left:0px; border-top:1px solid #e0e0e0;} table.bbslist_table_style tbody td.cell {height:24px; padding-top:4px; padding-bottom:4px; border-top:1px solid #e0e0e0;} table.bbslist_table_style tbody td.cell:first-child {border-left:0px;} table.bbslist_table_style tbody tr td.cell:first-child {border-left:0px;} table.bbslist_table_style tbody tr:first-child td.cell {border-top:0px;} table.bbsview_table_style {border-top:2px solid #545454; font-size:11px; color:#444;} table.bbsview_table_style thead th {height:17px; background:#fafafa; background:url('../..//design/skinfood/mobile_skinfood/images/design/tbl_th_bg.gif') repeat-x; border-left:0px solid #e0e0e0; border-bottom:1px solid #bbbbbb; font-weight:normal;} table.bbsview_table_style thead th:first-child {border-left:0px;} table.bbsview_table_style tbody td.cell {height:24px; padding-top:4px; padding-bottom:4px; border-bottom:1px solid #e0e0e0; border-left:1px solid #e0e0e0;} table.bbsview_table_style tbody td.cell_bar {width:30px; text-align:center; color:#ccc;} table.bbsview_table_style tbody td.cell:first-child {border-left:0px;} table.bbsview_table_style tbody tr td.cell:first-child {border-left:0px;} table.bbsview_table_style tbody tr:first-child td.cell {border-top:0px;} table.bbswrite_table_style {border-collapse:collapse; border-top:2px solid #545454; font-size:11px; color:#444;} table.bbswrite_table_style th.cell, table.bbswrite_table_style td.cell {text-indent:10px; text-align:left; height:24px; padding-top:4px; padding-bottom:4px; border-bottom:1px solid #e0e0e0; border-left:1px solid #e0e0e0;} table.bbswrite_table_style th.cell {font-weight:normal; font-size:12px;} table.bbswrite_table_style td.cell {} table.bbswrite_table_style tr th.cell:first-child {border-left:0px;} table.bbswrite_table_style tr:first-child th.cell, table.bbswrite_table_style tr:first-child td.cell {border-top:0px;} table.comment_box_table {} table.comment_box_table {} .gray {color:#999} .bbs_btn {border:0px; background-color:#000; color:#fff; /*font-family:dotum;*/ font-size:11px; height:20px; letter-spacing:-1px; padding:0 7px; cursor:pointer} .bbs_btn_gray {border:0px; background-color:#777; color:#fff; /*font-family:dotum;*/ font-size:11px; height:20px; letter-spacing:-1px; padding:0 7px; cursor:pointer} #bbslist {margin:auto; padding:0 0 30px 0;} #bbslist .article_info {font-size:11px; /*font-family:gothic, dotum;*/color:#c0c0c0; padding:5px 0 0 5px;} #bbslist .article_info a {position:relative; top:3px; left:3px;} #bbslist table caption {display:none;} #bbslist thead .side1 {border-left:#D2D2D2 solid 1px;} #bbslist thead .side2 {border-right:#D2D2D2 solid 1px;} #bbslist tbody .noticetr td a {font-weight:600;} #bbslist tbody .datalist {padding:7px;} #bbslist .now {color:#ff0000; font-size:11px;} #bbslist .sbj {text-align:left; padding-left:10px; letter-spacing:0px;} #bbslist .sbj .imgpos {margin-bottom:-1px;} #bbslist .sbj a {font-size:12px; /*font-family:gothic, gulim;*/color:#222222; text-decoration:none; line-height:150%;} #bbslist .sbj a:hover {text-decoration:underline;} #bbslist .sbj .new {color:#ff0000;} #bbslist .sbj .comment {font:normal 11px arial; color:#FC6138;} #bbslist .sbj1 {text-align:left; padding:5px 0 3px 10px; font-size:12px; /*font-family:gothic, gulim;*/color:#222222; line-height:150%;} #bbslist .name {color:#222222; /*font-family:dotum;*/font-size:12px; color:#888;} #bbslist .name a {color:#888;} #bbslist .hit {font-size:11px; color:#515190;} #bbslist .searchform {padding:30px 0 0 0; text-align:center;} #bbslist .searchform select {font-size:12px; /*font-family:gulim;*/height:20px; vertical-align:bottom; padding:2px;} #prenextlist {margin:auto; padding:0 0 30px 0;} #prenextlist tbody .datalist {padding:7px;} #prenextlist span.sbj {text-align:left; padding:5px 0 3px 10px; letter-spacing:0px;} #prenextlist span.sbj .imgpos {margin-bottom:-1px;} #prenextlist span.sbj a {font-size:12px; /*font-family:gothic, gulim;*/color:#222222; text-decoration:none; line-height:150%;} #prenextlist span.sbj a:hover {text-decoration:underline;} #prenextlist span.sbj .new {color:#ff0000;} #prenextlist span.sbj .comment {font:normal 11px arial; color:#FC6138;} #prenextlist table {border-collapse:collapse;} #prenextlist table td, #prenextlist table th {line-height:30px; height:30px; border-top:1px solid #ddd; border-bottom:1px solid #ddd;} /* @list*/ /* view*/ #bbsview {margin:auto; padding:0 0 30px 0;} #bbsview .viewbox {} #bbsview .viewbox .icon {position:absolute; width:50px; height:50px; margin:10px 0 0 0; background:url('../../../../../_var/simbol/0.gif') center center no-repeat;} #bbsview .viewbox .subject {height:26px; line-height:26px; padding-left:10px; background:#fafafa; background:url('../..//design/skinfood/mobile_skinfood/images/design/tbl_th_bg.gif') repeat-x; border-top:2px solid #545454; border-bottom:1px solid #000; font-weight:normal;} #bbsview .viewbox .subject h1 {margin:0px; padding:0px; font-size:12px; font-weight:600; /*font-family:dotum;*/} #bbsview .viewbox .info {padding:10px 0 10px 3px; font-size:10px; /*font-family:'돋움', Dotum, AppleGothic, sans-serif;*/color:#c0c0c0;} #bbsview .viewbox .info .xleft {float:left;} #bbsview .viewbox .info .xright {float:right;} #bbsview .viewbox .info .xright ul {padding:0; margin:0;} #bbsview .viewbox .info .xright li {list-style-type:none; float:left;} #bbsview .viewbox .info .xright .g {padding:0 10px 0 0;} #bbsview .viewbox .info .xright .g img {position:relative; top:3px; right:3px;} #bbsview .viewbox .info .xright .g a {font-size:11px; /*font-family:dotum;*/color:#666;} #bbsview .viewbox .info .xright .g a:hover {text-decoration:underline;} #bbsview .viewbox .info .xright div {position:absolute; display:none;} #bbsview .viewbox .info .xright div ul {position:relative; top:17px; width:79px; border:#dfdfdf solid 1px; background:#ffffff; padding:1px;} #bbsview .viewbox .info .xright div li {float:none; display:block; padding:3px 0 3px 3px; color:#333; font-size:11px; cursor:pointer;} #bbsview .viewbox .info .xright div li:hover {background:#ECF0F6;} #bbsview .viewbox .info .split {padding:0 5px 0 5px; color:#dfdfdf; font-size:10px;} #bbsview .viewbox .info .han {/*font-family:dotum;*/font-size:11px;} #bbsview .viewbox .info .num {/*font-family:dotum;*/font-size:11px;} #bbsview .viewbox .content {padding:20px 10px; line-height:160%;} #bbsview .viewbox .content .scorebox {text-align:center; padding:20px 0 20px 0;} #bbsview .viewbox .content .snsbox {text-align:right;} #bbsview .viewbox .content .snsbox img {cursor:pointer;} #bbsview .bottom {padding:10px 0 0 0; text-align:right;} #bbsview .comment .icon1 {position:relative; top:3px;} /* @view*/ /* write*/ table.info-table-style {border-collapse:collapse; border-top:1px solid #aaa; border-right:1px solid #dadada;} table.info-table-style .its-th {border-left:1px solid #dadada; border-bottom:1px solid #dadada; padding:8px 0px 8px 28px; text-align:left; background-color:#f1f1f1; font-weight:normal;} table.info-table-style .its-td {border-left:1px solid #dadada; border-bottom:1px solid #dadada; padding:5px 0 5px 15px; line-height:180%; letter-spacing:0px;} table.info-table-style .its-th-align {border-left:1px solid #dadada; border-bottom:1px solid #dadada; padding:8px 0px 8px 0; background-color:#f1f1f1; font-weight:normal;} table.info-table-style .its-td-align {border-left:1px solid #dadada; border-bottom:1px solid #dadada; padding:5px 0 5px 0; line-height:180%; letter-spacing:0px;} table.info-table-style textarea {background-color:#f0f0f0;} table.info-table-style textarea.input-box-default-text {color:#a5a5a5 !important} #bbswrite table.simplelist-table-style {border-collapse:collapse;} #bbswrite table.simplelist-table-style th {background:url('/design/skinfood/mobile_skinfood/images/common/th_bg_popup.gif') repeat-x; height:24px; line-height:24px; border:1px solid #c8c8c8; color:#666; font-weight:normal;} #bbswrite table.simplelist-table-style td {padding:5px 0; border-bottom:1px solid #d7d7d7; color:#666} /* @write*/ /* view*/ #boardview {margin:auto; padding:0 0 30px 0;} #boardview {padding:20px 0 20px 0; line-height:160%;} #boardview .attach {padding:10px 0 0 0; line-height:120%;} #boardview .attach ul {padding:0; margin:0;} #boardview .attach li {list-style-type:none; padding:0 0 0 15px;} #boardview .attach li a {font-size:11px; /*font-family:dotum;*/color:#666;} #boardview .attach li a:hover {text-decoration:underline;} #boardview .attach li .size {font-size:11px; /*font-family:'돋움', Dotum, AppleGothic, sans-serif;*/color:#999;} #boardview .attach li .down {font-size:11px; /*font-family:'돋움', Dotum, AppleGothic, sans-serif;*/color:#333;} #boardview .scorebox {text-align:center; padding:20px 0 20px 0;} #boardview .snsbox {padding:50px 0 0 0; text-align:right;} #boardview .snsbox img {cursor:pointer;} #boardview .bottom {padding:10px 0 0 0; text-align:right;} #boardview .comment {padding:0 0 10px 0; color:#c0c0c0;} #boardview .comment a {font-weight:600; color:#3EA9CD;} #boardview .comment .icon1 {position:relative; top:3px;} #boardview .han {font-weight:600;} /* @view*/ #ui-datepicker-div { z-index:9999999;} /* write*/ .wrbox {padding:25px 0 0 0;} .mdbox {padding:0;} #cwrite {} #cwrite .box {padding:10px; border:#dfdfdf solid 0px; background:#FCFCFC;} #cwrite .box .inputbox {padding:8px 0 0 0;} #cwrite .box .inputbox div {padding:5px 0 0 0;} #cwrite .box .inputbox div span {position:relative; top:3px; font-size:11px; /*font-family:dotum;*/color:#c0c0c0; padding:0 10px 0 0;} #cwrite .box .inputbox .input1 {border:#dfdfdf solid 1px; padding:2px 0 0 5px; height:18px; width:150px;} #cwrite .box .inputbox .input2 {border:#dfdfdf solid 1px; padding:2px 0 0 5px; height:18px; width:355px;}w #cwrite .box .bottom {} #cwrite .box .bottom .l {float:left; font-size:12px; /*font-family:dotum;*/color:#999; letter-spacing:-1px;} #cmtlistlay {} #cmtlistlay .box {padding:0px 3px; border:#dfdfdf solid 0px; background:#FCFCFC;} #cmtlistlay .box .inputbox {padding:8px 0 0 0;} #cmtlistlay .box .inputbox div {padding:5px 0 0 0;} #cmtlistlay .box .inputbox div span {position:relative; top:3px; font-size:11px; /*font-family:dotum;*/color:#c0c0c0; padding:0 10px 0 0;} #cmtlistlay .box .inputbox .input1 {border:#dfdfdf solid 1px; padding:2px 0 0 5px; height:18px; width:150px;} #cmtlistlay .box .inputbox .input2 {border:#dfdfdf solid 1px; padding:2px 0 0 5px; height:18px; width:355px;} #cmtlistlay .box .bottom {padding-bottom:10px;} #cmtlistlay .box .bottom .l {float:left; font-size:12px; /*font-family:dotum;*/color:#999; letter-spacing:-1px;} .cmtlistlay {} .cmtlistlay .box {padding:0px 3px; border:#dfdfdf solid 1px; background:#FCFCFC;} .cmtlistlay .box .inputbox {padding:8px 0 0 0;} .cmtlistlay .box .inputbox div {padding:5px 0 0 0;} .cmtlistlay .box .inputbox div span {position:relative; top:3px; font-size:11px; /*font-family:dotum;*/color:#c0c0c0; padding:0 10px 0 0;} .cmtlistlay .box .inputbox .input1 {border:#dfdfdf solid 1px; padding:2px 0 0 5px; height:18px; width:150px;} .cmtlistlay .box .inputbox .input2 {border:#dfdfdf solid 1px; padding:2px 0 0 5px; height:18px; width:355px;} .cmtlistlay .box .bottom {padding-bottom:10px;} .cmtlistlay .box .bottom .l {float:left; font-size:12px; /*font-family:dotum;*/color:#999; letter-spacing:-1px;} /* @write*/ /* view*/ .BoardPwCk {border:#dfdfdf solid 0px; width:300px; padding:0px 10px 0px 10px; margin:10px auto 10px auto;} .BoardPwCk .msg {} .BoardPwCk .msg h3 {margin:0; padding:0 0 9px 0; font-size:14px; font-weight:600; /*font-family:"malgun gothic", "dotum";*/border-bottom:#dfdfdf dashed 1px;} .BoardPwCk .msg h3 img {position:relative; top:3px;} .BoardPwCk .msg div {padding:10px 0 0 22px; color:#999;} .BoardPwCk .ibox {padding:30px 0 10px 22px;} .BoardPwCk .input {width:150px;} .BoardPwCk .btnblue {width:80px;} .goodsviewbox {padding-bottom:15px; padding-left:0px; padding-right:0px; border-top:#efefef 0px solid; padding-top:15px;} .goodsviewbox .pic {width:60px; float:left; vertical-align:top;} .goodsviewbox .info {float:left; margin-left:10px;} .goodsviewbox .info .name {font-size:12px; /*font-family:dotum;*/padding-bottom:5px; padding-left:0px; padding-right:0px; color:#3c5899; font-weight:600; padding-top:0px;} .goodsviewbox .info .cont {font-size:11px; /*font-family:dotum;*/color:#333333;} .content .reply .sbj { padding-bottom:20px; margin:15px 0px 0px; padding-left:0px; padding-right:0px; color:#ff0000; border-top:#dfdfdf 1px solid; font-weight:600; padding-top:10px; } #cmtlist {margin:auto; padding-top:10px;} .attach {padding:10px 0 0 0; line-height:120%;} .attach ul {padding:0; margin:0;} .attach li {list-style-type:none; padding:0 0 5px 15px;} .attach li a {font-size:11px; /*font-family:dotum;*/color:#666;} .attach li a:hover {text-decoration:underline;} .attach li .size {font-size:11px; /*font-family:'돋움', Dotum, AppleGothic, sans-serif;*/color:#999;} .attach li .down {font-size:11px; /*font-family:'돋움', Dotum, AppleGothic, sans-serif;*/color:#333;} .bbssearchbox {position:relative;} .bbssearchbox input[type=text] { width:-moz-calc(100% - 45px); width:-webkit-calc(100% - 45px); width:-o-calc(100% - 45px); width:calc(100% - 45px); width:expression(100% - 45px); height:28px; line-height:28px; text-indent:5px; border:1px solid #3e3e3e; background-color:#fff; } .bbssearchbox input[type=image] {border:0px; width:36px; height:30px; padding-left:4px;} .info_table th { width:80px; height:40px; text-align:left; padding-left:15px;} /* list */ ul.bbslist_ul_style {*zoom:1; border-top:1px solid #ddd; border-left:1px solid #ddd; border-right:1px solid #ddd; background-color:#fff} ul.bbslist_ul_style:after {content:""; display:block; clear:both;} ul.bbslist_ul_style li {position:relative; border-bottom:1px solid #ddd;} ul.bbslist_ul_style li .bus_comment { position:absolute; top:50%; left:100%; width:36px; margin-left:-45px; margin-top:-17px; height:34px; line-height:32px; font-size:12px; color:#cc0000; text-align:center; background:url('../..//design/skinfood/mobile_skinfood/images/design/comment_box.gif') no-repeat; } ul.bbslist_ul_style li .bus_arrow {position:absolute; right:15px; top:50%; margin-top:-10px; width:12px; height:21px; background:url('../..//design/skinfood/mobile_skinfood/images/common/arrow.png') no-repeat; background-size:12px 21px;} ul.bbslist_ul_style li.board_contents {padding:0px;} ul.bbslist_ul_style li .bus_goods_image {float:left; margin-right:10px; width:48px; height:48px; overflow:hidden; border:1px solid #ccc} ul.bbslist_ul_style li .bus_goods_name {padding-bottom:4px;} ul.bbslist_ul_style li .bus_subject {display:block; font-weight:bold;} ul.bbslist_ul_style li .bus_record_info {display:inline-block;*zoom:1;} /* ul.bbslist_ul_style li .bus_record_info:after {content:""; display:inline-block; clear:both;} */ ul.bbslist_ul_style li .bus_record_info .cell {font-family:'돋움'; color:#999; border-left:1px solid #ddd;} ul.bbslist_ul_style li .bus_record_info .cell:first-child {border-left:none; padding-left:0px;} ul.bbslist_ul_style li .bus_record_info .cell_bar {float:left; color:#ccc; padding:0 5px;} ul.bbslist_ul_style li .bus_record_info .cell_bar:first-child {display:none; border-left:none;} .bbsview_style .bvs_subject {display:block; font-weight:bold; font-size:14px; padding-bottom:5px;} .bbsview_style .bvs_record_info {display:block;*zoom:1;} .bbsview_style .bvs_record_info:after {content:""; display:block; clear:both;} .bbsview_style .bvs_record_info .cell {float:left; font-size:12px; font-family:"dotum"; color:#999;} .bbsview_style .bvs_record_info .cell_bar {float:left; color:#ccc; padding:0 5px;} .bbsview_style .bvs_record_info .cell_bar:first-child {display:none;} .bbsview_style .bus_comment { position:absolute; top:50%; left:100%; width:36px; margin-left:-45px; margin-top:-17px; height:34px; line-height:32px; font-size:12px; color:#cc0000; text-align:center; background:url('../..//design/skinfood/mobile_skinfood/images/design/comment_box.gif') no-repeat; } #prenextlist {margin:auto;} #prenextlist li {padding:10px 15px; border-bottom:1px solid #ddd; *zoom:1;} #prenextlist li:after {content:""; display:block; clear:both;} #prenextlist span.pnl_title {text-align:left;padding:5px 0 3px 10px;letter-spacing:0px;} #prenextlist span.pnl_title .imgpos {margin-bottom:-1px;} #prenextlist span.pnl_title a {font-size:12px;font-family:gothic,gulim;color:#222222;text-decoration:none;line-height:150%;} #prenextlist span.pnl_title a:hover {text-decoration:underline;} #prenextlist span.pnl_title .new {color:#ff0000;} #prenextlist span.pnl_title .comment {font:normal 11px arial;color:#FC6138;} #prenextlist span.pnl_icon {} #prenextlist span.pnl_desc {padding-left:5px; padding-right:5px;} #prenextlist span.pnl_title {padding-right:10px; font-weight:bold;} #prenextlist span.pnl_name {} table.bbslist_table_style {border-top:2px solid #545454; border-bottom:1px solid #000; font-size:11px; color:#444;} table.bbslist_table_style thead th {height:26px; background:#fafafa; background:url('../..//design/skinfood/mobile_skinfood/images/design/tbl_th_bg.gif') repeat-x; border-left:1px solid #e0e0e0; border-bottom:1px solid #bbbbbb; font-weight:normal;} table.bbslist_table_style thead th:first-child {border-left:0px;border-top:1px solid #e0e0e0;} table.bbslist_table_style tbody td.cell {height:24px; padding-top:4px; padding-bottom:4px; border-top:1px solid #e0e0e0;} table.bbslist_table_style tbody td.cell:first-child {border-left:0px;} table.bbslist_table_style tbody tr td.cell:first-child {border-left:0px;} table.bbslist_table_style tbody tr:first-child td.cell {border-top:0px;} table.bbsview_table_style {border-top:2px solid #545454;font-size:11px; color:#444;} table.bbsview_table_style thead th {height:17px; background:#fafafa; background:url('../..//design/skinfood/mobile_skinfood/images/design/tbl_th_bg.gif') repeat-x; border-left:0px solid #e0e0e0; border-bottom:1px solid #bbbbbb; font-weight:normal;} table.bbsview_table_style thead th:first-child {border-left:0px;} table.bbsview_table_style tbody td.cell {height:24px; padding-top:4px; padding-bottom:4px; border-bottom:1px solid #e0e0e0; border-left:1px solid #e0e0e0;} table.bbsview_table_style tbody td.cell_bar {width:30px; text-align:center; color:#ccc;} table.bbsview_table_style tbody td.cell:first-child {border-left:0px;} table.bbsview_table_style tbody tr td.cell:first-child {border-left:0px;} table.bbsview_table_style tbody tr:first-child td.cell {border-top:0px;} table.bbswrite_table_style {border-collapse:collapse;border-top:2px solid #545454;font-size:11px; color:#444;} table.bbswrite_table_style th.cell, table.bbswrite_table_style td.cell {text-indent:10px; text-align:left; height:24px; padding-top:4px; padding-bottom:4px; border-bottom:1px solid #e0e0e0; border-left:1px solid #e0e0e0;} table.bbswrite_table_style th.cell {font-weight:normal; font-size:12px;} table.bbswrite_table_style td.cell {} table.bbswrite_table_style tr th.cell:first-child {border-left:0px;} table.bbswrite_table_style tr:first-child th.cell, table.bbswrite_table_style tr:first-child td.cell {border-top:0px;} table.comment_box_table {} table.comment_box_table {} .gray {color:#999} .bbs_btn {border:0px; background-color:#000; color:#fff; font-family:dotum; font-size:11px; height:20px; letter-spacing:-1px; padding:0 7px; cursor:pointer} .bbs_btn_gray {border:0px; background-color:#777; color:#fff; font-family:dotum; font-size:11px; height:20px; letter-spacing:-1px; padding:0 7px; cursor:pointer} #bbslist {margin:auto;padding:0 0 0 0;} #bbslist .article_info {font-size:11px;font-family:gothic,dotum;color:#c0c0c0;padding:5px 0 0 5px;} #bbslist .article_info a {position:relative;top:3px;left:3px;} #bbslist table caption {display:none;} #bbslist thead .side1 {border-left:#D2D2D2 solid 1px;} #bbslist thead .side2 {border-right:#D2D2D2 solid 1px;} #bbslist tbody .noticetr td a {font-weight:bold;} #bbslist tbody .datalist {padding:7px;} #bbslist .now {color:#ff0000;font-size:11px;} #bbslist .sbj {text-align:left;padding-left:10px;letter-spacing:0px;} #bbslist .sbj .imgpos {margin-bottom:-1px;} #bbslist .sbj a {font-size:12px;font-family:gothic,gulim;color:#222222;text-decoration:none;line-height:150%;} #bbslist .sbj a:hover {text-decoration:underline;} #bbslist .sbj .new {color:#ff0000;} #bbslist .sbj .comment {font:normal 11px arial;color:#FC6138;} #bbslist .sbj1 {text-align:left;padding:5px 0 3px 10px;font-size:12px;font-family:gothic,gulim;color:#222222;line-height:150%;} #bbslist .name {color:#222222;font-family:dotum;font-size:12px;color:#888;} #bbslist .name a {color:#888;} #bbslist .hit {font-size:11px;color:#515190;} #bbslist .searchform {padding:30px 0 0 0;text-align:center;} #bbslist .searchform select {font-size:12px;font-family:gulim;height:20px;vertical-align:bottom;padding:2px;} /* @list */ /* view */ #bbsview {margin:auto;padding:0 0 0px 0;} #bbsview .viewbox {} #bbsview .viewbox .icon {position:absolute;width:50px;height:50px;margin:10px 0 0 0;background:url('../../../../../_var/simbol/0.gif') center center no-repeat;} #bbsview .viewbox .subject {height:26px; line-height:26px; padding-left:10px; background:#fafafa; background:url('../..//design/skinfood/mobile_skinfood/images/design/tbl_th_bg.gif') repeat-x; border-top:2px solid #545454; border-bottom:1px solid #000; font-weight:normal;} #bbsview .viewbox .subject h1 {margin:0px; padding:0px; font-size:12px;font-weight:bold;font-family:dotum;} #bbsview .viewbox .info {padding:10px 0 10px 3px;font-size:10px;font-family:'돋움',Dotum,AppleGothic,sans-serif;color:#c0c0c0;} #bbsview .viewbox .info .xleft {float:left;} #bbsview .viewbox .info .xright {float:right;} #bbsview .viewbox .info .xright ul {padding:0;margin:0;} #bbsview .viewbox .info .xright li {list-style-type:none;float:left;} #bbsview .viewbox .info .xright .g {padding:0 10px 0 0;} #bbsview .viewbox .info .xright .g img {position:relative;top:3px;right:3px;} #bbsview .viewbox .info .xright .g a {font-size:11px;font-family:dotum;color:#666;} #bbsview .viewbox .info .xright .g a:hover {text-decoration:underline;} #bbsview .viewbox .info .xright div {position:absolute;display:none;} #bbsview .viewbox .info .xright div ul {position:relative;top:17px;width:79px;border:#dfdfdf solid 1px;background:#ffffff;padding:1px;} #bbsview .viewbox .info .xright div li {float:none;display:block;padding:3px 0 3px 3px;color:#333;font-size:11px;cursor:pointer;} #bbsview .viewbox .info .xright div li:hover {background:#ECF0F6;} #bbsview .viewbox .info .split {padding:0 5px 0 5px;color:#dfdfdf;font-size:10px;} #bbsview .viewbox .info .han {font-family:dotum;font-size:11px;} #bbsview .viewbox .info .num {font-family:dotum;font-size:11px;} #bbsview .viewbox .content {padding:20px 10px;line-height:160%;} #bbsview .viewbox .content .attach {padding:10px 0 0 0;line-height:120%;} #bbsview .viewbox .content .attach ul {padding:0;margin:0;} #bbsview .viewbox .content .attach li {list-style-type:none;padding:0 0 0 15px;} #bbsview .viewbox .content .attach li a {font-size:11px;font-family:dotum;color:#666;} #bbsview .viewbox .content .attach li a:hover {text-decoration:underline;} #bbsview .viewbox .content .attach li .size {font-size:11px;font-family:'돋움',Dotum,AppleGothic,sans-serif;color:#999;} #bbsview .viewbox .content .attach li .down {font-size:11px;font-family:'돋움',Dotum,AppleGothic,sans-serif;color:#333;} #bbsview .viewbox .content .scorebox {text-align:center;padding:20px 0 20px 0;} #bbsview .viewbox .content .snsbox {text-align:right;} #bbsview .viewbox .content .snsbox img {cursor:pointer;} #bbsview .bottom {padding:10px 0 0 0;text-align:right;} #bbsview .comment .icon1 {position:relative;top:3px;} /* @view */ /* write */ /* 기본 정보 테이블 스타일 */ table.info-table-style {border-collapse:collapse; border-top:1px solid #aaa; border-right:1px solid #dadada;} table.info-table-style .its-th {border-left:1px solid #dadada; border-bottom:1px solid #dadada; padding:8px 0px 8px 28px; text-align:left; background-color:#f1f1f1; font-weight:normal;} table.info-table-style .its-td {border-left:1px solid #dadada; border-bottom:1px solid #dadada; padding:5px 0 5px 15px; line-height:180%; letter-spacing:0px;} table.info-table-style .its-th-align {border-left:1px solid #dadada; border-bottom:1px solid #dadada; padding:8px 0px 8px 0; background-color:#f1f1f1; font-weight:normal;} table.info-table-style .its-td-align {border-left:1px solid #dadada; border-bottom:1px solid #dadada; padding:5px 0 5px 0; line-height:180%; letter-spacing:0px;} table.info-table-style textarea {background-color:#f0f0f0;} table.info-table-style textarea.input-box-default-text {color:#a5a5a5 !important} /* 간단 리스트 테이블 스타일 */ #bbswrite table.simplelist-table-style {border-collapse:collapse;} #bbswrite table.simplelist-table-style th {background:url('/design/skinfood/mobile_skinfood/images/common/th_bg_popup.gif') repeat-x; height:24px; line-height:24px; border:1px solid #c8c8c8; color:#666; font-weight:normal;} #bbswrite table.simplelist-table-style td {padding:5px 0; border-bottom:1px solid #d7d7d7; color:#666} /* @write */ /* view */ #boardview {margin:auto;padding:0 0 30px 0;} #boardview {padding:20px 0 20px 0;line-height:160%;} #boardview .attach {padding:10px 0 0 0;line-height:120%;} #boardview .attach ul {padding:0;margin:0;} #boardview .attach li {list-style-type:none;padding:0 0 0 15px;} #boardview .attach li a {font-size:11px;font-family:dotum;color:#666;} #boardview .attach li a:hover {text-decoration:underline;} #boardview .attach li .size {font-size:11px;font-family:'돋움',Dotum,AppleGothic,sans-serif;color:#999;} #boardview .attach li .down {font-size:11px;font-family:'돋움',Dotum,AppleGothic,sans-serif;color:#333;} #boardview .scorebox {text-align:center;padding:20px 0 20px 0;} #boardview .snsbox {padding:50px 0 0 0;text-align:right;} #boardview .snsbox img {cursor:pointer;} #boardview .bottom {padding:10px 0 0 0;text-align:right;} #boardview .comment {padding:0 0 10px 0;color:#c0c0c0;} #boardview .comment a {font-weight:bold;color:#3EA9CD;} #boardview .comment .icon1 {position:relative;top:3px;} #boardview .han {font-weight:bold;} /* @view */ #ui-datepicker-div { z-index: 9999999; } /* write */ .wrbox {padding:25px 0 0 0;} .mdbox {padding:0;} #cwrite {} #cwrite .box {padding:10px;border:#dfdfdf solid 0px;background:#FCFCFC;} #cwrite .box .inputbox {padding:8px 0 0 0;} #cwrite .box .inputbox div {padding:5px 0 0 0;} #cwrite .box .inputbox div span {position:relative;top:3px;font-size:11px;font-family:dotum;color:#c0c0c0;padding:0 10px 0 0;} #cwrite .box .inputbox .input1 {border:#dfdfdf solid 1px;padding:2px 0 0 5px;height:18px;width:150px;} #cwrite .box .inputbox .input2 {border:#dfdfdf solid 1px;padding:2px 0 0 5px;height:18px;width:355px;}w #cwrite .box .bottom {} #cwrite .box .bottom .l {float:left;font-size:12px;font-family:dotum;color:#999;letter-spacing:-1px;} #cmtlistlay {} #cmtlistlay .box {padding:0px 3px;border:#dfdfdf solid 0px;background:#FCFCFC;} #cmtlistlay .box .inputbox {padding:8px 0 0 0;} #cmtlistlay .box .inputbox div {padding:5px 0 0 0;} #cmtlistlay .box .inputbox div span {position:relative;top:3px;font-size:11px;font-family:dotum;color:#c0c0c0;padding:0 10px 0 0;} #cmtlistlay .box .inputbox .input1 {border:#dfdfdf solid 1px;padding:2px 0 0 5px;height:18px;width:150px;} #cmtlistlay .box .inputbox .input2 {border:#dfdfdf solid 1px;padding:2px 0 0 5px;height:18px;width:355px;} #cmtlistlay .box .bottom {padding-bottom:10px;} #cmtlistlay .box .bottom .l {float:left;font-size:12px;font-family:dotum;color:#999;letter-spacing:-1px;} .cmtlistlay {} .cmtlistlay .box {padding:0px 3px;border:#dfdfdf solid 1px;background:#FCFCFC;} .cmtlistlay .box .inputbox {padding:8px 0 0 0;} .cmtlistlay .box .inputbox div {padding:5px 0 0 0;} .cmtlistlay .box .inputbox div span {position:relative;top:3px;font-size:11px;font-family:dotum;color:#c0c0c0;padding:0 10px 0 0;} .cmtlistlay .box .inputbox .input1 {border:#dfdfdf solid 1px;padding:2px 0 0 5px;height:18px;width:150px;} .cmtlistlay .box .inputbox .input2 {border:#dfdfdf solid 1px;padding:2px 0 0 5px;height:18px;width:355px;} .cmtlistlay .box .bottom {padding-bottom:10px;} .cmtlistlay .box .bottom .l {float:left;font-size:12px;font-family:dotum;color:#999;letter-spacing:-1px;} /* @write */ /* view */ .BoardPwCk {border:#dfdfdf solid 0px;width:350px;padding:0px 10px 0px 10px;margin:10px auto 10px auto;} .BoardPwCk .msg {} .BoardPwCk .msg h3 {margin:0;padding:0 0 9px 0;font-size:14px;font-weight:bold;font-family:"malgun gothic","돋움";border-bottom:#dfdfdf dashed 1px;} .BoardPwCk .msg h3 img {position:relative;top:3px;} .BoardPwCk .msg div {padding:10px 0 0 22px;color:#999;} .BoardPwCk .ibox {padding:30px 0 10px 22px;} .BoardPwCk .input {width:150px;} .BoardPwCk .btnblue {width:80px;} .goodsviewbox {padding-bottom: 15px; padding-left: 0px; padding-right: 0px; border-top: #efefef 0px solid; padding-top: 15px;border-top:1px dashed #ddd; background-color:#f6f6f6; } .goodsviewbox .pic {width: 60px; float: left; vertical-align: top;} .goodsviewbox .info {float: left; margin-left: 10px;} .goodsviewbox .info .name {font-size:12px;font-family: dotum;padding-bottom: 5px; padding-left: 0px; padding-right: 0px; color: #3c5899; font-weight: bold; padding-top: 0px;} .goodsviewbox .info .cont {font-size:11px;font-family: dotum; color: #333333;} .content .reply .sbj { padding-bottom: 20px; margin: 15px 0px 0px; padding-left: 0px; padding-right: 0px; color: #ff0000; border-top: #dfdfdf 1px solid; font-weight: bold; padding-top: 10px; } #cmtlist {margin:auto;padding-top:10px;} .attach {padding:10px 0 0 0;line-height:120%;} .attach ul {padding:0;margin:0;} .attach li {list-style-type:none;padding:0 0 5px 15px;} .attach li a {font-size:11px;font-family:dotum;color:#666;} .attach li a:hover {text-decoration:underline;} .attach li .size {font-size:11px;font-family:'돋움',Dotum,AppleGothic,sans-serif;color:#999;} .attach li .down {font-size:11px;font-family:'돋움',Dotum,AppleGothic,sans-serif;color:#333;} .bbstopbox {position:relative; *zoom:1; line-height:40px; height:40px; border-bottom:1px solid #bdc4c6;} .bbstopbox:after {content:""; display:block; clear:both;} .bbstopbox .pleft {position:absolute; top:0px; left:5px;} .bbstopbox .pright {position:absolute; top:0px; right:5px;} .bbssearchbox {position:relative; } .bbssearchbox input[type=text] { width:-moz-calc(100% - 45px); width:-webkit-calc(100% - 45px); width:-o-calc(100% - 45px); width:calc(100% - 45px); width:expression(100% - 45px); height:28px; line-height:28px; text-indent:5px; border:1px solid #3e3e3e;background-color:#fff; } .bbssearchbox input[type=image] {border:0px;width:36px;height:30px;padding-left:4px;} .info_table th{ width:80px; height:40px; text-align:left; padding-left:15px;} .info_table td{ height:40px; text-align:left;} .agree_box{vertical-align:middle; border:1px solid silver; cursor:pointer;} /* review star */ .review_showScore{ text-align:center; font-size:13px;} .review_nowScore{ padding-left:10px; } .agree_box{vertical-align:middle; border:1px solid silver; cursor:pointer;} .scorebox{display:table-cell; width:30px; height:25px; text-align:center; vertical-align:middle; border:2px solid silver; cursor:pointer;} @charset "utf-8"; /******************************************* Author : 퍼스트몰(firstmall) Author URL : http://www.firstmall.kr Creation Date : 2016-06-01 Modify Date : 2017-07-31 *******************************************/ #buttons {padding:50px; text-align:center} /* 버튼 설정*/ .btn, .btn input , .btn a , .btn button {display:inline-block; overflow:visible; position:relative; margin:0; padding:0; border:0; background:url('/design/skinfood/mobile_skinfood/images/common/btnBg.gif') no-repeat; font-size:12px; /*font-family:'dotum';*/color:#333 !important; text-decoration:none !important; vertical-align:middle; white-space:nowrap; cursor:pointer} .btn-plus button {display:inline-block; width:12px; height:12px; overflow:visible; position:relative; margin:0; padding:0; border:0; background:url('/design/skinfood/mobile_skinfood/images/common/icon_plus.gif') no-repeat; cursor:pointer} .btn-minus button {display:inline-block; width:12px; height:12px; overflow:visible; position:relative; margin:0; padding:0; border:0; background:url('/design/skinfood/mobile_skinfood/images/common/icon_minus.gif') no-repeat; cursor:pointer} .btn-plus.gray button {width:28px; height:28px; background:url('/design/skinfood/mobile_skinfood/images/common/m_plusbt.png') no-repeat; background-size:28px 28px;} .btn-minus.gray button {width:28px; height:28px; background:url('/design/skinfood/mobile_skinfood/images/common/m_minusbt.png') no-repeat; background-size:28px 28px;} /* 사이즈 설정*/ .small {padding-right:1px; background-position:right 0; line-height:15px !important} .medium {padding-right:1px; background-position:right -100px; line-height:18px !important} .large {padding-right:1px; background-position:right -200px; height:30px; line-height:30px; line-height:20px !important} /* 디테일*/ .small a, .small input, .small button {height:17px; padding:3px 7px 0; background-position:0 0; font-size:11px; line-height:15px; letter-spacing:-1px} .medium a, .medium input, .medium button {height:20px; padding:5px 10px 0; background-position:0 -100px; font-size:12px; line-height:18px; font-weight:600; letter-spacing:-1px} .large a, .large input, .large button {height:25px; padding:7px 10px 0; background-position:0 -200px; font-size:12px; line-height:20px; font-weight:600; letter-spacing:-1px} .small input, .small button {height:20px; padding:0 7px; font-size:11px; line-height:20px} .medium input, .medium button {height:25px; padding:0 10px 0 13px; line-height:25px} .large input, .large button {height:31px; padding:0 13px; line-height:31px} /* 페이지 버튼*/ .btn .page {padding:4px 9px 0; font-size:12px !important; font-weight:700; color:#666; letter-spacing:-2px} /* 오버시*/ .small:hover {background-position:right -50px} .medium:hover {background-position:right -150px} .large:hover {background-position:right -250px} .small:hover a, .small:hover input, .small:hover button {background-position:0 -50px; color:#ff3232} .medium:hover a, .medium:hover input, .medium:hover button {background-position:0 -150px; color:#ff3232} .large:hover a, .large:hover input, .large:hover button {background-position:0 -250px; color:#ff3232} /* 컬러 설정*/ .small.black {background-position:right -350px} .medium.black {background-position:right -450px} .large.black {background-position:right -550px} .small.black a, .small.black input, .small.black button {background-position:0 -350px; color:#FFF !important} .medium.black a, .medium.black input, .medium.black button {background-position:0 -450px; color:#FFF !important} .large.black a, .large.black input, .large.black button {background-position:0 -550px; color:#FFF !important} .small.black input, .small.black button {color:#FFF !important} .medium.black input, .medium.black button {color:#FFF !important} .large.black input, .large.black button {color:#FFF !important} .small.black:hover {background-position:right -400px} .medium.black:hover {background-position:right -500px} .large.black:hover {background-position:right -600px} .small.black:hover a, .small.black:hover input, .small.black:hover button {background-position:0 -400px; color:#DDD !important} .medium.black:hover a, .medium.black:hover input, .medium.black:hover button {background-position:0 -500px; color:#DDD !important} .large.black:hover a, .large.black:hover input, .large.black:hover button {background-position:0 -600px; color:#DDD !important} .small.cyanblue {background-position:right -650px} .medium.cyanblue {background-position:right -750px} .large.cyanblue {background-position:right -850px} .small.cyanblue a, .small.cyanblue input, .small.cyanblue button {background-position:0 -650px; color:#FFF !important} .medium.cyanblue a, .medium.cyanblue input, .medium.cyanblue button {background-position:0 -750px; color:#FFF !important} .large.cyanblue a, .large.cyanblue input, .large.cyanblue button {background-position:0 -850px; color:#FFF !important} .small.cyanblue input, .small.cyanblue button {color:#FFF !important} .medium.cyanblue input, .medium.cyanblue button {color:#FFF !important} .large.cyanblue input, .large.cyanblue button {color:#FFF !important} .small.cyanblue:hover {background-position:right -700px} .medium.cyanblue:hover {background-position:right -800px} .large.cyanblue:hover {background-position:right -900px} .small.cyanblue:hover a, .small.cyanblue:hover input {background-position:0 -700px; color:#EEE} .medium.cyanblue:hover a, .medium.cyanblue:hover input {background-position:0 -800px; color:#EEE} .large.cyanblue:hover a, .large.cyanblue:hover input {background-position:0 -900px; color:#EEE} .small.red {background-position:right -950px} .medium.red {background-position:right -1050px} .large.red {background-position:right -1150px} .small.red a, .small.red input, .small.red button {background-position:0 -950px; color:#FFF !important} .medium.red a, .medium.red input, .medium.red button {background-position:0 -1050px; color:#FFF !important} .large.red a, .large.red input, .large.red button {background-position:0 -1150px; color:#FFF !important} .small.red input, .small.red button {color:#FFF !important} .medium.red input, .small.red button {color:#FFF !important} .large.red input, .small.red button {color:#FFF !important} .small.red:hover {background-position:right -1000px} .medium.red:hover {background-position:right -1100px} .large.red:hover {background-position:right -1200px} .small.red:hover a, .small.red:hover input, .small.red:hover button {background-position:0 -1000px; color:#EEE} .medium.red:hover a, .medium.red:hover input, .medium.red:hover button {background-position:0 -1100px; color:#EEE} .large.red:hover a, .large.red:hover input, .large.red:hover button {background-position:0 -1200px; color:#EEE} .btn.grayarrow {padding:0 15px; background-position:right -1240px} .btn.grayarrow a, .btn.grayarrow input, .btn.grayarrow button {background-position:0 -1240px; letter-spacing:-1px; height:20px; padding:2px 7px 0; font-size:11px; line-height:20px; color:#333;} .btn.grayarrow:hover {background-position:right -1240px} .btn.grayarrow:hover a, .btn.grayarrow:hover input, .btn.grayarrow:hover button {background-position:0 -1240px;} .btn.bluearrow {padding:0 15px; background-position:right -1270px} .btn.bluearrow a, .btn.bluearrow input, .btn.bluearrow button {background-position:0 -1270px; letter-spacing:-1px; height:20px; padding:2px 7px 0; font-size:11px; line-height:20px; color:#fff !important} .btn.bluearrow:hover {background-position:right -1270px} .btn.bluearrow:hover a, .btn.bluearrow:hover input, .btn.bluearrow:hover button {background-position:0 -1270px; color:#eee !important} .btn.bluegray {padding-right:2px; background-position:right -1300px} .btn.bluegray a, .btn.bluegray input, .btn.bluegray button {background-position:0 -1300px; letter-spacing:-1px; height:27px; padding:2px 7px 0; font-size:11px; line-height:25px; color:#fff !important} .btn.bluegray:hover {background-position:right -1300px} .btn.bluegray:hover a, .btn.bluegray:hover input, .btn.bluegray:hover button {background-position:0 -1300px; color:#eee !important} /* 아이콘설정(A태그에만 적용)*/ .icon a {vertical-align:middle;} .icon-right a {padding-right:5px;} .medium .plus {width:20px; height:14px; background-position:0px -300px; vertical-align:middle; margin-top:-3px;} .large .plus {width:20px; height:14px; background-position:0px -300px; vertical-align:middle;} .medium .pencle {width:20px; height:14px; background-position:-30px -300px; vertical-align:middle; margin-top:-3px;} .large .pencle {width:20px; height:14px; background-position:-30px -300px; vertical-align:middle;} .medium .minus {width:20px; height:14px; background-position:-60px -300px; vertical-align:middle; margin-top:-3px;} .large .minus {width:20px; height:14px; background-position:-60px -300px; vertical-align:middle;} .medium .check {width:20px; height:14px; background-position:-90px -300px; vertical-align:middle; margin-top:-3px;} .large .check {width:20px; height:14px; background-position:-90px -300px; vertical-align:middle;} .medium .people {width:20px; height:14px; background-position:-120px -300px; vertical-align:middle; margin-top:-3px;} .large .people {width:20px; height:14px; background-position:-120px -300px; vertical-align:middle;} .medium .config {width:20px; height:14px; background-position:-150px -300px; vertical-align:middle; margin-top:-3px;} .large .config {width:20px; height:14px; background-position:-150px -300px; vertical-align:middle;} .medium .search {width:20px; height:14px; background-position:-180px -300px; vertical-align:middle; margin-top:-3px;} .large .search {width:20px; height:14px; background-position:-180px -300px; vertical-align:middle;} .large .arrowleft {background:url('/design/skinfood/mobile_skinfood/images/common/btn_arrow_l.gif') no-repeat; width:15px; height:12px; vertical-align:middle; background-position:0px 1px;} .large .arrowright {background:url('/design/skinfood/mobile_skinfood/images/common/btn_arrow_r.gif') no-repeat; width:15px; height:12px; vertical-align:middle; background-position:10px 1px;} .small .checkleft {margin-left:-3px; background:url('/design/skinfood/mobile_skinfood/images/common/icon_check.gif') no-repeat; width:13px; height:7px; vertical-align:middle;} /* Drop*/ .drop {background-position:0 -1240px} .drop.hover, .drop:hover {background-position:0 -1271px} .drop.hover a, .drop.hover input, .drop:hover a, .drop:hover input {background-position:right -1271px; color:#fff !important;} .drop a, .drop input {height:20px; padding:3px 20px 2px 10px; background-position:right -1240px; font-size:11px; line-height:15px; letter-spacing:-1px; font-weight:normal;} .drop a {padding:0px 20px 0px 10px; line-height:20px;} /* Drop 확장형(a태그만 사용가능)*/ .drop_multi_main {background-position:0 -1240px} .drop_multi_main:hover {background-position:0 -1271px} .drop_multi_main:hover a {background-position:right -1271px; color:#fff !important;} .drop_multi_main a {height:20px; padding:0px 5px 0px 10px; line-height:20px; background:none; font-size:11px; letter-spacing:-1px; font-weight:normal;} .drop_multi_sub {background:url('/design/skinfood/mobile_skinfood/images/common/select_bg_back.gif') no-repeat; background-position:right 0px} .drop_multi_sub:hover {background-position:right -20px} .drop_multi_sub:hover a {background-position:right -1271px; color:#fff !important;} .drop_multi_sub a {height:20px; padding:0px 20px 0px 0px; line-height:20px; background-position:right -1240px; font-size:11px; line-height:15px; letter-spacing:-1px; font-weight:normal;} table.mqs-menu {border:0px; border-collapse:collapse;} table.mqs-menu td {background-color:#fbfbfb; border:1px solid #dfdfe4; border-bottom:1px solid #c5c7ce;} table.mqs-menu td.selected {background-color:#fff; border-bottom:0px;} table.mqs-menu td a {display:inline-block; padding:4px 0px; width:135px; text-align:center; color:#9194a1} table.mqs-menu td.selected a {font-weight:600; color:#333} .black_btn {border:0px; background-color:#000; color:#fff; /*font-family:dotum;*/ font-size:11px; height:20px; line-height:20px; letter-spacing:-1px; padding:0px 5px; cursor:pointer; vertical-align:middle;} .gray_btn {border:0px; background-color:#777; color:#fff; /*font-family:dotum;*/ font-size:11px; height:20px; line-height:20px; letter-spacing:-1px; padding:0 5px; cursor:pointer} .white_btn {padding:2px 5px 4px; border:1px solid #b0b5bb; border-radius:2px; background-color:#fff; font-size:13px; color:#555;} .round_btn {display:inline-block; background-color:#fff; height:25px; line-height:25px; padding:0px 10px; border:1px solid #bbb; border-radius:3px; font-size:12px; color:#000; white-space:nowrap;} .round_gray_btn {display:inline-block; background-color:#777; height:25px; line-height:25px; padding:0px 10px; border:1px solid #bbb; border-radius:3px; font-size:12px; color:#fff} .btn_small_normal {display:inline-block; padding:0 5px 0 5px; height:18px; line-height:18px; margin:1px auto; box-sizing:content-box; background-color:#fff; border-radius:3px; border:1px solid #c1c2c5; font-size:12px; color:#61656d;} .btn_small_sale {display:inline-block; padding:0 5px 0 5px; height:18px; line-height:18px; margin:1px auto; box-sizing:content-box; border-radius:3px; border:1px solid #c1c2c5; font-size:12px; color:#fff;} .btn_small_general {padding:0 13px 0 5px; height:23px; line-height:23px; box-sizing:content-box; background:url('/design/skinfood/mobile_skinfood/images/design/ico_arw_go.png') no-repeat; background-size:4px 7px; background-position:calc(100% - 5px) center; background-color:#fff; border-radius:3px; border:1px solid #c1c2c5; font-size:13px; color:#61656d; cursor:pointer} .btn_small_point {padding:0 13px 0 5px; height:23px; line-height:23px; box-sizing:content-box; background:url('/design/skinfood/mobile_skinfood/images/design/ico_arw_go.png') no-repeat; background-size:4px 7px; background-position:calc(100% - 5px) center; background-color:#fff; border-radius:3px; border:1px solid #3784da; font-size:13px; color:#116f99; cursor:pointer} .btn_open_small {margin-top:2px; margin-bottom:2px; padding:0 16px 0 5px; height:23px; line-height:23px; box-sizing:content-box; background:url('/design/skinfood/mobile_skinfood/images/design/ico_arw_open.png') no-repeat; background-size:8px 5px; background-position:calc(100% - 5px) center; background-color:#fff; border-radius:3px; border:1px solid #c1c2c5; font-size:13px; color:#61656d; cursor:pointer} .btn_close_small {margin-top:2px; margin-bottom:2px; padding:0 16px 0 5px; height:23px; line-height:23px; box-sizing:content-box; background:url('/design/skinfood/mobile_skinfood/images/design/ico_arw_close.png') no-repeat; background-size:8px 5px; background-position:calc(100% - 5px) center; background-color:#fff; border-radius:3px; border:1px solid #c1c2c5; font-size:13px; color:#61656d; cursor:pointer} .btn_radius_black {display:inline-block; height:34px; line-height:30px; margin:1px 0; box-sizing:border-box; background-color:#404040; border-radius:3px; border:1px solid #2d2d2d; font-size:13px; color:#fff;} .btn_radius_white {display:inline-block; height:34px; line-height:30px; margin:1px 0; box-sizing:border-box; background-color:#fff; border-radius:3px; border:1px solid #c0c0c0; font-size:14px; color:#333; font-weight:600; text-align:center;} .btn_open_white {border:1px solid #fff; border-radius:2px; background:url('/design/skinfood/mobile_skinfood/images/common/ico_arw_open_w.png') no-repeat 90% center; background-size:8px 5px; background-color:transparent; color:#fff; font-size:13px; padding:3px 20px 5px 5px;} .btn_close_white {border:1px solid #fff; border-radius:2px; background:url('/design/skinfood/mobile_skinfood/images/common/ico_arw_close_w.png') no-repeat 90% center; background-size:8px 5px; background-color:transparent; color:#fff; font-size:13px; padding:3px 20px 5px 5px;} @charset "utf-8"; /******************************************* Author : 퍼스트몰(firstmall) Author URL : http://www.firstmall.kr Creation Date : 2016-06-01 Modify Date : 2017-07-31 *******************************************/ /* 모바일 페이징 스타일*/ /* ul.mobile_pagination_paging_style_1 {display:inline-block; *zoom:1} ul.mobile_pagination_paging_style_1:after {content:""; display:block; clear:both} */ /* ul.mobile_pagination_paging_style_1 li {float:left; margin-left:8px; width:13px; height:13px; background:url('/design/skinfood/mobile_skinfood/images/common/paging/navi_dot.png') no-repeat; overflow:hidden; text-indent:-1000px;} */ /* ul.mobile_pagination_paging_style_1 li.current {background:url('/design/skinfood/mobile_skinfood/images/common/paging/navi_dot_on.png') no-repeat;} ul.mobile_pagination_paging_style_1 li:first-child {margin-left:0px;} */ ul.mobile_pagination_paging_style_2 {display:inline-block; *zoom:1} ul.mobile_pagination_paging_style_2:after {content:""; display:block; clear:both} ul.mobile_pagination_paging_style_2 li {float:left; margin-left:8px; width:12px; height:12px; background:url('/design/skinfood/mobile_skinfood/images/common/paging/navi_squ.png') no-repeat; overflow:hidden; text-indent:-1000px;} ul.mobile_pagination_paging_style_2 li.current {background:url('/design/skinfood/mobile_skinfood/images/common/paging/navi_squ_on.png') no-repeat;} ul.mobile_pagination_paging_style_2 li:first-child {margin-left:0px;} ul.mobile_pagination_paging_style_3 {display:inline-block; *zoom:1} ul.mobile_pagination_paging_style_3:after {content:""; display:block; clear:both} ul.mobile_pagination_paging_style_3 li {float:left; width:30px; height:5px; background-color:#a2a2a2; overflow:hidden; text-indent:-1000px;} ul.mobile_pagination_paging_style_3 li.current {background-color:#ff5212;} ul.mobile_pagination_paging_style_4 {display:inline-block; *zoom:1; padding:0 35px; height:20px; position:relative;} ul.mobile_pagination_paging_style_4:after {content:""; display:block; clear:both} ul.mobile_pagination_paging_style_4 li.paging_btn_prev {position:absolute; width:30px; height:20px; left:0px; top:0px; background:url('/design/skinfood/mobile_skinfood/images/common/paging/navi_btn_prev.png') no-repeat; overflow:hidden; text-indent:-1000px;} ul.mobile_pagination_paging_style_4 li.paging_btn_body {text-align:center; color:#aaaaaa; letter-spacing:3px; /*font-family:tahoma;*/} ul.mobile_pagination_paging_style_4 li.paging_btn_body .paging_btn_num_now {font-size:12px; color:#f04100; font-weight:600;} ul.mobile_pagination_paging_style_4 li.paging_btn_body .paging_btn_num_max {font-size:12px; color:#999999; font-weight:600;} ul.mobile_pagination_paging_style_4 li.paging_btn_next {position:absolute; width:30px; height:20px; right:0px; top:0px; background:url('/design/skinfood/mobile_skinfood/images/common/paging/navi_btn_next.png') no-repeat; overflow:hidden; text-indent:-1000px;} ul.mobile_pagination_paging_style_5 {display:inline-block; *zoom:1; width:94px; height:30px; position:relative; background:url('/design/skinfood/mobile_skinfood/images/common/paging/navi_btn2_bg.png') no-repeat;} ul.mobile_pagination_paging_style_5:after {content:""; display:block; clear:both} ul.mobile_pagination_paging_style_5 li.paging_btn_prev {position:absolute; width:8px; height:13px; left:10px; top:8px; background:url('/design/skinfood/mobile_skinfood/images/common/paging/navi_btn2_prev.png') no-repeat; overflow:hidden; text-indent:-1000px;} ul.mobile_pagination_paging_style_5 li.paging_btn_body {text-align:center; color:#eeeeee; letter-spacing:3px; /*font-family:tahoma;*/ line-height:28px;} ul.mobile_pagination_paging_style_5 li.paging_btn_body .paging_btn_num_now {font-size:12px; color:#00eaff; font-weight:600;} ul.mobile_pagination_paging_style_5 li.paging_btn_body .paging_btn_num_max {font-size:12px; color:#ffffff; font-weight:600;} ul.mobile_pagination_paging_style_5 li.paging_btn_next {position:absolute; width:8px; height:13px; right:10px; top:8px; background:url('/design/skinfood/mobile_skinfood/images/common/paging/navi_btn2_next.png') no-repeat; overflow:hidden; text-indent:-1000px;} /* 이 CSS파일은 아이디자인에 의해 강제로 변형되므로 임의수정시 주의하시기 바랍니다. 원본소스 : /admin/skin/default/css/quick_design_ver3_original.css */ #layout_header {} #layout_header h1 a {color:#333333;} .btn_style {display:inline-block; background-color:#ffffff; border:1px solid #c0c0c0; border-radius:2px !important; padding:0 10px; height:28px; line-height:29px; font-size:13px; font-weight:600; color:#565960; letter-spacing:-1px;} .btn_important_large {display:inline-block; background-color:#ea680a; border:1px solid #ea680a; border-radius:5px !important; height:42px; line-height:38px; font-size:15px; font-weight:600; color:#ffffff; letter-spacing:-1px;} .btn_important_small {display:inline-block; background-color:#ea680a; border:1px solid #ea680a; border-radius:3px !important; height:32px; line-height:32px; font-size:13px; font-weight:600; color:#ffffff; letter-spacing:-1px;} .btn_normal_large {display:inline-block; background-color:#ffffff; border:1px solid #c0c0c0; border-radius:5px !important; height:42px; line-height:38px; font-size:15px; font-weight:600; color:#363636; letter-spacing:-1px;} .btn_normal_small {display:inline-block; background-color:#ffffff; border:1px solid #c0c0c0; border-radius:3px !important; height:36px; line-height:32px; font-size:13px; font-weight:600; color:#363636; letter-spacing:-1px;} .btn_cancel_large {display:inline-block; background-color:#ffffff; border:1px solid #c0c0c0; border-radius:5px !important; height:42px; line-height:38px; font-size:15px; font-weight:600; color:#565960; letter-spacing:-1px;} .btn_cancel_small {display:inline-block; background-color:#ffffff; border:1px solid #c0c0c0; border-radius:3px !important; height:36px; line-height:32px; font-size:13px; font-weight:600; color:#565960; letter-spacing:-1px;} .btn_arw_up {position:relative; display:inline-block; min-width:40px; box-sizing:border-box; height:28px; line-height:28px; padding-left:10px; padding-right:25px; font-weight:600; color:#61656d; background-color:#fff; border:1px solid #c1c2c5; border-radius:3px !important; font-size:12px; text-align:left;} .btn_arw_up_icon {position:absolute; right:8px; top:50%; margin-top:-3px; width:8px; height:5px; background:url('/design/skinfood/mobile_skinfood/images/design/ico_arw_close_s.png') no-repeat right center; background-size:8px 5px;} .btn_arw_dn {position:relative; display:inline-block; min-width:40px; box-sizing:border-box; height:28px; line-height:28px; padding-left:10px; padding-right:25px; font-weight:600; color:#61656d; background-color:#fff; border:1px solid #c1c2c5; border-radius:3px !important; font-size:12px; text-align:left;} .btn_arw_dn_icon {position:absolute; right:8px; top:50%; margin-top:-1px; width:8px; height:5px; background:url('/design/skinfood/mobile_skinfood/images/design/ico_arw_open_s.png') no-repeat right center; background-size:8px 5px;} .btn_arw_up_gray {position:relative; display:inline-block; min-width:40px; height:28px; line-height:28px; padding-left:10px; padding-right:25px; font-weight:600; color:#61656d; background-color:#fff; border:1px solid #c1c2c5; border-radius:3px !important; font-size:12px; text-align:left;} .btn_arw_dn_gray {position:relative; display:inline-block; min-width:40px; height:28px; line-height:28px; padding-left:10px; padding-right:25px; font-weight:600; color:#61656d; background-color:#fff; border:1px solid #c1c2c5; border-radius:3px !important; font-size:12px; text-align:left;} /* 모바일 서브페이지 타이틀바 */ .sub_title_bar {position:relative; background-color:#464646; border-bottom:1px solid #363636; height:40px;} .sub_title_bar h2 {text-align:center; line-height:40px;} .sub_title_bar h2, .sub_title_bar h2 a {color:#ffffff; font-size:16px; font-weight:600;} .sub_title_bar .stb_back_btn {position:absolute; top:0; left:0; background:url('/design/skinfood/mobile_skinfood/images/design/ver3/btn_back.png') no-repeat center; background-size:24px 17px; width:43px; height:40px; text-indent:-9999px;} .sub_title_bar .stb_back_btn img {width:15px; height:15px;} .sub_title_bar .stb_relation_btn {position:absolute; right:5px; top:3px} .sbt_relation_contents {display:none; position:relative;z-index:10;} /* 가격 */ .total_sum_price {background-color:#5a5a5a; padding:15px 0px;} .total_sum_price table { font-size:13px; letter-spacing:-1px; color:#ffffff} .total_sum_price table th {height:27px; padding:0px 0px 0px 10px; font-weight:normal;} .total_sum_price table td {padding:0px 10px; font-weight:normal;} .total_sum_price table tbody.sub th, .total_sum_price table tbody.sub td {height:25px; background-color:#4a4a4a; font-size:14px} .total_sum_price .sum_price {font-size:14px;} /* 레이아웃 */ #layout_side ul.top_navigation {background-color:#e6e6e6; border-top:1px solid #cccccc;} #layout_side ul.top_navigation li a {color:#5c5c5c;} #layout_side ul.top_navigation li.tn_recently a {background:url('/design/skinfood/mobile_skinfood/images/design/ver3/ico_lately.png') no-repeat center 0; background-size:34px 34px;} #layout_side ul.top_navigation li.tn_cart a {background:url('/design/skinfood/mobile_skinfood/images/design/ver3/ico_cart.png') no-repeat center 0; background-size:35px 34px;} #layout_side ul.top_navigation li.tn_wish a {background:url('/design/skinfood/mobile_skinfood/images/design/ver3/ico_wish.png') no-repeat center 0; background-size:36px 34px;} #layout_side ul.top_navigation li.tn_delivery a {background:url('/design/skinfood/mobile_skinfood/images/design/ver3/ico_delivery.png') no-repeat center 0; background-size:38px 34px;} #layout_side ul.top_navigation li.tn_mypage a {background:url('/design/skinfood/mobile_skinfood/images/design/ver3/ico_mypage.png') no-repeat center 0; background-size:27px 34px;} #layout_header .top_menu {background:url("/design/skinfood/mobile_skinfood/images/design/ver3/top_menu.png") no-repeat center; background-size:28px 24px;} #layout_header .top_cart {background:url("/design/skinfood/mobile_skinfood/images/design/ver3/top_cart.png") no-repeat center; background-size:25px 24px;} #layout_header .top_search {background:url("/design/skinfood/mobile_skinfood/images/design/ver3/top_search.png") no-repeat center; background-size:22px 24px;} #layout_header .top_close {background:url("/design/skinfood/mobile_skinfood/images/design/ver3/top_search_close.png") no-repeat center; background-size:24px 24px;} #layout_header form.search_form .search_btn {border:1px solid #ea680a; border-radius:5px; background-color:#ea680a; color:#ffffff; width:45px; height:30px;} #layout_footer {} #layout_footer ul.fcp li {color:#888888;} #layout_footer ul.fcp li a {color:#333333;} /* 상품목록 상단*/ .goods_list_top ul.list_style li.current {background:#464646;} /* 상품리스트 - 카테고리(슬라이딩 메뉴)*/ .ctg_top > ul > li a.on {font-weight:600; color:#363636;} .ctg_top > ul > li a.on .icon.on {background:#464646 url("/design/skinfood/mobile_skinfood/images/design/ico_ctg_select.png") no-repeat right; background-size:7px 4px;} .ctg_depth li a {color:#363636;} /* 상품상세 */ .goods_information_tabs li.current {border-bottom:2px solid #464646;} .goods_information_tabs li.current a {color:#363636;} /* 고객센터 메인 */ .cs_list_table .icon_cs {background:#464646;} @charset "utf-8"; @import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&subset=latin-ext'); @import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900&subset=latin-ext'); /******************************************* Author : 퍼스트몰(firstmall) Author URL : http://www.firstmall.kr Creation Date : 2016-06-01 Modify Date : 2017-07-31 *******************************************/ /* 모바일 서브페이지 타이틀바 */ .sub_title_bar {border-bottom:1px solid #363636; background:#fff;} .sub_title_bar h2, .sub_title_bar h2 a {font-size:15px; color:#333;} .sub_title_bar .stb_back_btn {background:url('/design/skinfood/mobile_skinfood/images/design_new/btn_back.png') no-repeat center; background-size:24px 24px;} /* 모바일 서브페이지 탭메뉴바 */ .sub_title_button_tb {border-bottom:1px solid #ccc;} .sub_title_button_tb .sel {background-color:#fff; color:#666;} .sub_title_button_tb .sel span {color:inherit;} /* 모바일 서브페이지 제목바(열기/닫기) */ .sub_division_title { background-color:#fff; color:#222; text-align: center;} .sub_division_title .sub_division_arw {background:url("/design/skinfood/mobile_skinfood/images/icon/icon_popup_close.png") no-repeat; background-size:cover; width:5.1041666667vw; height:5vw; } .sub_division_title .sub_division_arw.closed {background:url('/design/skinfood/mobile_skinfood/images/design/btn_arw_dn_w2.png') no-repeat; background-size:15px 15px;} /* 디스플레이 상품정보 - 할인율 제거 */ .goods_list .gl_item .gli_contents li .sale_per {display:none;} /* 주문/결제 */ #payment_type > li > div.active > label {background-color:#555;} /* 상품상세 - 할인율 */ .sale_rate_wrap .sale_rate_bg {background:#333;} /* 상품상세 - 가격 */ .goods_spec_table .price, .info_goods_spec_table .price {color:#ea680a;} /******************************************* 스킨용 CSS *******************************************/ html, body, div, span, strong, a, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, ins, kbd, q, samp, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin:0; padding:0;} body, input, textarea, select, button, table { font-size: 3.75vw;font-family:YoonGothic !important; color:#212121;} h1, h2, h3, h4, h5, h6, .main_parallax a.pbtn, #layout_footer .nav_wrap .nav li a, .phone {font-family:'Roboto', sans-serif !important;} /* 버튼 라운드 제거 */ #layout_side div.top_userinformation .joinbtn input, #layout_side div.top_userinformation .logoutbtn input, #layout_side div.top_userinformation .myinfobtn input, #layout_side div.top_userinformation .loginbtn input, #layout_side div.menu_navigation_wrap a.mitem_goodsview, .btn_style, .btn_important_large, .btn_important_small, .btn_normal_large, .btn_normal_small, .btn_cancel_large, .btn_cancel_small, .btn_arw_up, .btn_arw_dn, .btn_arw_up_gray, .btn_arw_dn_gray {border-radius:0 !important;} /* 헤더 */ #layout_header {} #layout_header .util_wrap {border-bottom:1px solid #e7e7e7; position:relative;} #layout_header .util_wrap ul {width:70%; margin:0 auto;} #layout_header .util_wrap li {float:left; width:18%; height:34px; line-height:35px; text-align:center;} #layout_header .util_wrap li.cs {width:28%;} #layout_header .icon {display:none; position:absolute; left:7px; top:7px;} #layout_header .util_wrap li a {display:block; font-size:11px; color:#333;} #layout_header .util_wrap li a[href='#search'] {right:5px;} #layout_header .top_search {background:url('/design/skinfood/mobile_skinfood/images/design_new/top_search.png') no-repeat center; background-size:20px 20px; width:34px; height:34px;} #layout_header .top_close {background:url('/design/skinfood/mobile_skinfood/images/design_new/top_search_close.png') no-repeat center; background-size:20px 20px; width:34px; height:34px;} #layout_header .top_menu {background:url('/design/skinfood/mobile_skinfood/images/design_new/top_menu.png') no-repeat center; background-size:28px 28px;} #layout_header .top_cart {background:url('/design/skinfood/mobile_skinfood/images/design_new/top_cart.png') no-repeat center; background-size:28px 28px;} #layout_header .logo_wrap {position:relative; height:79px;} #layout_header .logo_wrap h1 {height:auto; line-height:79px;} #layout_header .logo_wrap a[href='#category']{top:20px; left:5px;} #layout_header .logo_wrap a[href='#cart']{top:18px; right:5px;} #layout_header .nav_wrap {border-top:1px solid #e7e7e7; margin:0 0 -1px 0;} #layout_header .nav_wrap li {float:left; width:25%; line-height:35px; text-align:center;} #layout_header .nav_wrap li > a {display:block; border-bottom:1px solid #e7e7e7; border-right:1px solid #e7e7e7; background:#fff; font-size:11px; color:#333; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;} #layout_header .nav_wrap li > a:hover {background:#fafafa;} /* 타이틀바 띄우기 */ #layout_header .logo_wrap.flying {position:fixed !important; width:100%; top:0; left:0; right:0; height:auto; border-top:none; background:rgba(255,255,255,0.9); z-index:10;} #layout_header .logo_wrap.flying h1 {height:auto; line-height:auto;} /* 풋터 */ #layout_footer ul.fnav {border-bottom:0px solid #e0e0e0; background:#2a2827; height:40px; line-height:41px;} #layout_footer ul.fnav li {padding:0 2px;;} #layout_footer ul.fnav li a {color:#FFF;} #layout_footer ul.fnb {padding:10px 0;} #layout_footer .cs_wrap {padding:0px 25px 0; text-align:center;} #layout_footer .cs_wrap > li {float:left; width:100%;} #layout_footer .cs_wrap > li:first-child {width:100%;} #layout_footer h3 {position:relative; font-size:12px; font-weight:500; color:#000; letter-spacing:1px;} #layout_footer h3.none {padding-top:0;} #layout_footer ul.fcp.none {border:none;} #layout_footer ul.fcp {border-bottom:none; padding:0;} #layout_footer ul.fcp li {display:block; padding-left:0; text-align:center; color:#fff; line-height:1.8;} #layout_footer ul.fcp li span {display:inline-block; width:60px; font-weight:400; color:#fff;} #layout_footer ul.fcp li.phone {margin:25px 0 20px; font-size:24px; font-weight:400; color:#fff; letter-spacing:2px; line-height:1.0;} #layout_footer ul.fcp li a, #layout_footer ul.fcp li.phone a{color:#FFF;} #layout_footer ul.fcp a.btn_black_large {float:left; width:48%; height:40px; line-height:40px; border:1px solid #555; background:#333; text-align:center; font-size:12px; font-weight:400; color:#fff;} #layout_footer ul.fcp a.btn_gray_large {float:right; width:48%; height:40px; line-height:40px; border:1px solid #e0e0e0; background:#fafafa; text-align:center; font-size:12px; font-weight:400; color:#333;} #layout_footer ul.fcp a.btn_black_small {background:#666; padding:5px 7px; font-size:11px; font-weight:400; color:#fff;} #layout_footer dl.fcp {border-bottom:1px solid #d0d0d0; padding:15px 0 20px; font-size:11px; line-height:1.8; *zoom:1;} #layout_footer dl.fcp:after {display:block; clear:both; content:'';} #layout_footer dl.fcp dt {float:left; width:70px; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden; font-weight:600; color:#666;} #layout_footer dl.fcp dd {margin-left:80px; color:#666;} #layout_footer .copy {background:#2a2827; padding:20px 0; text-align:center; font-size:11px; color:#aaa; line-height:1.8;} #layout_footer .copy dt {display:inline-block; padding:0 2px; color:#888;} #layout_footer .copy dd {display:inline-block; padding:0 2px; color:#aaa;} #layout_footer .copy a, #layout_footer .copy strong {color:inherit;} /* 좌측 레이아웃 */ /* #side_close {position:fixed; top:10px !important; left:calc(75% + 50px); background:url('/design/skinfood/mobile_skinfood/images/design_new/icon_close.png') no-repeat center; background-size:24px 24px; z-index:1002;} */ /* #layout_side {width:75%; border-top:none; padding:20px 25px; z-index:1002;} */ #layout_side div.top_userinformation {height:auto; background:transparent; padding:0; overflow:visible;} #layout_side div.top_userinformation .top_btns {margin:-15px -15px 0 -15px; *zoom:1;} #layout_side div.top_userinformation .top_btns:after {display:block; clear:both; content:'';} #layout_side div.top_userinformation .top_btns li {float:left; width:50%;} #layout_side div.top_userinformation .top_btns li a {display:block; border:1px solid #e7e7e7; line-height:35px; text-align:center; font-size:11px; color:#333;} #layout_side div.top_userinformation .top_btns li:first-child a {border-right:none;} #layout_side div.top_userinformation .welcome {position:relative; left:0; width:100%; padding:10px 0 25px; text-align:center; line-height:1.6;} #layout_side div.top_userinformation .joinbtn, #layout_side div.top_userinformation .myinfobtn {display:block; width:100%; float:left; margin:0;} #layout_side div.top_userinformation .logoutbtn, #layout_side div.top_userinformation .loginbtn {display:block; width:100%; float:left; margin:0; margi-top:10px;} #layout_side div.top_userinformation .logoutbtn input, #layout_side div.top_userinformation .loginbtn input {width:100%; line-height:40px; border:1px solid #ea680a; background:#ea680a; padding:0; text-align:center; font-size:14px; font-weight:300; color:#fff; cursor:pointer;} #layout_side div.top_userinformation .joinbtn input, #layout_side div.top_userinformation .myinfobtn input {width:100%; line-height:40px; border:1px solid #d0d0d0; background:#fff; padding:0; text-align:center; font-size:14px; font-weight:300; color:#333; cursor:pointer;} #layout_side ul.top_navigation {background:transparent; border-top:0px solid #555; padding:15px 0;} #layout_side ul.top_navigation li {width:24%;} #layout_side ul.top_navigation li a {font-size:12px; font-weight:400; color:#333; letter-spacing:0;} #layout_side ul.top_navigation li.tn_cart a {background:url('/design/skinfood/mobile_skinfood/images/design_new/micon_01.png') no-repeat center 0; background-size:36px 30px;} #layout_side ul.top_navigation li.tn_cart a .pushCount.side {position:relative; top:auto; right:auto; margin-right:0; min-width:10px; min-height:15px; line-height:15px;} #layout_side ul.top_navigation li.tn_wish a {background:url('/design/skinfood/mobile_skinfood/images/design_new/micon_02.png') no-repeat center 0; background-size:36px 30px;} #layout_side ul.top_navigation li.tn_delivery a {background:url('/design/skinfood/mobile_skinfood/images/design_new/micon_03.png') no-repeat center 0; background-size:36px 30px;} #layout_side ul.top_navigation li.tn_mypage a {background:url('/design/skinfood/mobile_skinfood/images/design_new/micon_04.png') no-repeat center 0; background-size:36px 30px;} #layout_side ul.top_navigation li img {height:30px;} #layout_side ul.top_navigation li em {display:block; padding-top:10px;} #layout_side form.search_form {margin-bottom:20px; border:1px solid #ddd; background-color:#fff; padding:5px;} #layout_side form.search_form .search_text {float:left; box-sizing:border-box; width:85%; height:30px; line-height:30px; border:none; background:none; text-indent:5px; color:#888;} #layout_side form.search_form .search_btn {float:right; border:none; width:30px; height:30px; background:url('/design/skinfood/mobile_skinfood/images/design_new/micon_05.png') no-repeat center; background-size:20px 20px; text-indent:-9999px;} #layout_side div.menu_navigation_wrap {background:#fff;} #layout_side div.menu_navigation_wrap ul.tab {border-top:none; background:none;} #layout_side div.menu_navigation_wrap ul.tab li, #layout_side div.menu_navigation_wrap ul.tab li:first-child {width:50%; border:0px solid #f0f0f0; border-bottom:1px solid #333; background:#f0f0f0; font-size:12px; font-weight:400; color:#999;} #layout_side div.menu_navigation_wrap ul.tab li.current {border:1px solid #333; border-bottom:none; background:#fff; font-weight:400; color:#000; line-height:38px;} #layout_side div.menu_navigation_wrap ul.menu > li {border-left:0px solid #ddd; border-right:0px solid #ddd;} #layout_side div.menu_navigation_wrap ul.menu li.mitemicon1 {background:url('/design/skinfood/mobile_skinfood/images/design_new/ico_arw_open2.png') no-repeat 15px 15px; background-size:11px 11px;} #layout_side div.menu_navigation_wrap ul.menu li.mitemicon2 {background:url('/design/skinfood/mobile_skinfood/images/design_new/ico_arw_close2.png') no-repeat 15px 15px; background-size:11px 11px;} #layout_side div.menu_navigation_wrap ul.menu li.mitemicon3 {background:url('/design/skinfood/mobile_skinfood/images/design_new/ico_arw_close2.png') no-repeat 15px 15px; background-size:11px 11px;} #layout_side div.menu_navigation_wrap ul.menu li.mitem a.mitem_title {max-width:100%; padding-left:0; text-indent:32px; color:#666; letter-spacing:0;} #layout_side div.menu_navigation_wrap a.mitem_goodsview {border:none; margin-right:6px; background:url('/design/skinfood/mobile_skinfood/images/design_new/ico_arw_direct.png') no-repeat left 7px; background-size:7px 11px; text-indent:-9999px;} #layout_side div.menu_navigation_wrap ul.menu.board li {position:relative; border-bottom:1px solid #e0e0e0; height:40px; line-height:41px;} #layout_side div.menu_navigation_wrap ul.menu.board li:after {display:block; content:''; position:absolute; top:15px; right:15px; width:7px; height:11px; background:url('/design/skinfood/mobile_skinfood/images/design_new/ico_arw_direct.png') no-repeat; background-size:cover;} #layout_side div.menu_navigation_wrap ul.menu.board li a {display:block; text-indent:15px; font-size:13px; font-weight:400; color:#333;} #layout_side .recently_side {border-left:0px solid #ddd; border-right:0px solid #ddd; border-bottom:1px solid #d8d9d4;} #layout_side .recently_side h1 {line-height:41px; text-indent:15px;} #layout_side .recently_side a.mitem_goodsview {right:-4px;} #layout_side .recently_side .recently_thumb {margin:10px;} #layout_side .recently_side .recently_thumb .thumb li .btn_delete {right:50%; margin-right:-35px;} #layout_side .side_cs_wrap {border-left:0 solid #e0e0e0; border-right:0 solid #e0e0e0; background:#fff; padding-top:20px;} #layout_side .side_cs_wrap h3 {position:relative; padding:10px 0 0; font-size:12px; font-weight:500; color:#000; letter-spacing:1px;} #layout_side .side_cs_wrap h3:after {/*position:absolute; bottom:0; left:15px; display:block; content:''; width:12px; height:1px; background:#aaa;*/} #layout_side .side_cs_wrap ul.fcp {border-bottom:0 solid #e0e0e0; padding:10px 0;} #layout_side .side_cs_wrap ul.fcp li {display:block; padding-left:0; font-size:11px; color:#666; line-height:1.8;} #layout_side .side_cs_wrap ul.fcp li span {display:inline-block; width:60px; font-weight:600; color:#666;} #layout_side .side_cs_wrap ul.fcp li.phone {margin-bottom:15px; font-size:30px; font-weight:600; color:#333; letter-spacing:3px; line-height:1.0;} #layout_side .side_cs_wrap ul.fcp a.btn_black_large {float:left; width:48%; border:1px solid #555; background:#333; padding:10px 0; text-align:center; font-size:12px; font-weight:400; color:#fff;} #layout_side .side_cs_wrap ul.fcp a.btn_gray_large {float:right; width:48%; border:1px solid #e0e0e0; background:#fafafa; padding:10px 0; text-align:center; font-size:12px; font-weight:400; color:#666;} #layout_side .side_cs_wrap ul.fcp a.btn_black_small {background:#666; padding:5px 7px; font-size:11px; font-weight:400; color:#fff;} #layout_side .side_cs_btn {display:block; margin-top:10px; line-height:40px; border:1px solid #d0d0d0; background:#fff; padding:0; text-align:center; font-size:14px; font-weight:400; color:#333; cursor:pointer;} #layout_side .language {padding:15px 0 45px;} #floating_over .ico_floating_back {background:url('/design/skinfood/mobile_skinfood/images/design_new/btn_floating_back.png');} #floating_over .ico_floating_zoom {background:url('/design/skinfood/mobile_skinfood/images/design_new/btn_floating_zoom.png');} #floating_over .ico_floating_top {background:url('/design/skinfood/mobile_skinfood/images/design_new/btn_floating_top.png');} .pushCount {border-radius:3px; background:#555; font-size:11px; font-weight:normal;} .pushCount.side {right:50%; margin-right:-30px;} /* 메인 - 탭메뉴 */ ul.displayTabType1 {width:101%; margin-top:15px; margin-bottom:10px; border-bottom:none; *zoom:1;} ul.displayTabType1:after {content:""; display:block; clear:both;} ul.displayTabType1 li {float:left; width:33% !important; height:38px; line-height:39px; border-top:1px solid #f1f1f1; border-right:1px solid #f1f1f1; border-bottom:1px solid #777; background:#f1f1f1; padding:0; text-align:center; font-weight:600; color:#858585; cursor:default;} ul.displayTabType1 li.current {margin-left:-1px; border:1px solid #777; border-bottom:1px solid #fff; background:#fff; color:#333; } .displayTabContentsContainerBox {border:1px solid #e4e4e4; border-top:0; padding:15px 10px 10px;} /* 메인 */ .main_display h3 {border-bottom:none; padding:40px 0 0; font-size:16px; color:#000;} .main_display h3 p {margin-bottom:5px; font-size:11px; font-weight:normal; color:#aaa;} .main_sub {min-height:200px;} .main_sub .tab_menu {width:110px; margin:30px auto 0; *zoom:1;} .main_sub .tab_menu:after {display:block; clear:both; content:'';} .main_sub .tab_menu li {float:left; margin:0 3px; width:30px; height:30px; background-size:contain !important; text-indent:-9999px; cursor:pointer;} .main_sub .tab_menu li.current {background-color:#888 !important;} .main_sub .tab_menu li.one {background:url('/design/skinfood/mobile_skinfood/images/design_new/sort_icon1.png') no-repeat;} .main_sub .tab_menu li.two {background:url('/design/skinfood/mobile_skinfood/images/design_new/sort_icon2.png') no-repeat;} .main_sub .tab_menu li.thr {background:url('/design/skinfood/mobile_skinfood/images/design_new/sort_icon3.png') no-repeat;} .main_sub .tab_menu li.one.current {background:url('/design/skinfood/mobile_skinfood/images/design_new/sort_icon1_over.png') no-repeat;} .main_sub .tab_menu li.two.current {background:url('/design/skinfood/mobile_skinfood/images/design_new/sort_icon2_over.png') no-repeat;} .main_sub .tab_menu li.thr.current {background:url('/design/skinfood/mobile_skinfood/images/design_new/sort_icon3_over.png') no-repeat;} .main_banner > ul > li {float:left; width:calc(50% - 5px); margin-left:5px; overflow:hidden;} .main_banner > ul > li:first-child {margin-left:0; margin-right:5px;} .main_banner > ul > li:last-child {width:100%; margin:10px 0 0 0;} .main_banner > ul > li img {width:100%; -webkit-transform:scale(1); transform:scale(1); -webkit-transition:0.5s ease-in-out; transition:0.5s ease-in-out;} .main_banner > ul > li:hover img {-webkit-transform:scale(1.05); transform:scale(1.05);} .main_banner .bnr_wrap{margin-top:30px;} .main_insta {padding:40px 15px 20px;} .main_insta h3 {padding:0 0 15px;} .main_insta h3 p {font-size:12px; color:#666;} .main_insta li {width:33% !important; height:auto !important; margin:0 0 0.3% 0.3% !important; overflow:hidden;} .main_insta li img {width:100% !important; opacity:1; transform:scale(1); transition:0.5s ease-in-out;} .main_insta li:hover img {opacity:0.8; transform:scale(1.05);} /* 메인영역 - 슬라이드 배너 */ .main_display .main_slider {margin-bottom:0;} .main_display .main_slider ul.anibanner_navigation_paging_style_3 li {width:10px; height:10px; margin:0 4px; border-radius:10px; border:2px solid #FFF; background-color:transparent; overflow:hidden; text-indent:-1000px;} .main_display .main_slider ul.anibanner_navigation_paging_style_3 li.current {width:10px; height:10px; background-color:#FFF;} .main_display .main_slider2 {padding:40px 15px 0;} .main_display .main_slider3 {padding:40px 0 0;} .main_display .main_slider2 ul.anibanner_navigation_paging_style_1 li, .main_display .main_slider3 ul.anibanner_navigation_paging_style_1 li, .showDesignDisplay1 ul.mobile_pagination_paging_style_1 li {width:10px; height:10px; margin:0 5px; border-radius:50px; background:#d5d5d5 url(); overflow:hidden; text-indent:-1000px;} .main_display .main_slider2 ul.anibanner_navigation_paging_style_1 li.current, .main_display .main_slider3 ul.anibanner_navigation_paging_style_1 li.current, .showDesignDisplay1 ul.mobile_pagination_paging_style_1 li.current {background:#333;} /* 메인영역 - 상품디스플레이 */ div.slide-wrap .slide .goods_list {padding:0 12px;} /* .goods_list {padding:7px;} */ .goods_list ol.gli_contents > li {line-height:1.8;} .goods_list ol.gli_contents > li .color {width:15px; height:3px; overflow:hidden;} /* 카테고리 상품 영역을 위한 스타일 주석 20200723 */ /* .goods_list ol.gli_contents > li .goods_name {display:block; margin-bottom:5px;} */ .goods_list ol.gli_contents > li .goods_summary {display:block; margin-bottom:10px;} .goods_list ol.gli_contents > li .sale_price {/*font-family:"verdana" !important;*/} .goods_list ol.gli_contents > li .shipping {display:block; margin-top:5px;} .goods_list ol.gli_contents > li .shipping li {display:inline-block; margin-right:5px; border:1px solid #bbb; background:#fafafa; padding:0 5px; font-size:11px; color:#666;} .showDesignDisplay1 .goods_list ol.gli_contents {border-top:1px solid #f0f0f0; padding:15px;} .showDesignDisplay1 .goods_list ol.gli_contents > li .goods_name {display:block; /*border-bottom:0px solid #ddd; margin-bottom:10px; padding-bottom:10px;*/} .showDesignDisplay1 .goods_list ol.gli_contents > li .goods_summary {display:block; margin-bottom:10px;} .showDesignDisplay1 .goods_display_more_btn {width:-webkit-calc(100% - 60%) !mportant; width:-moz-calc(100% - 60%) !mportant; width:calc(100% - 60%) !mportant; width:40% !important; margin:0 auto !important; border:1px solid #d0d0d0 !important; background:#fafafa !important;} .showDesignDisplay1 .displayTabContentsContainer .goods_list li.gl_item .gl_inner_item_wrap{border:1px solid #e0e0e0; margin:-0.5px;} .showDesignDisplay1 .displayTabContentsContainer .goods_list li.gl_item {padding:0px !important;} .showDesignDisplay2 .goods_list ol.gli_contents {text-align:left !important;} .showDesignDisplay2 .goods_display_more_btn{background:#FFF !important; border:1px solid #888 !important; width:200px !important;} /* image path */ /* color */ .mob-search-icon { background-image: url("/design/skinfood/mobile_skinfood/images/icon/icon_search.svg"); background-repeat: no-repeat; background-size: 100% auto; } .mob-search-close-icon { background-image: url("/design/skinfood/mobile_skinfood/images/icon/icon_close.svg"); background-repeat: no-repeat; background-size: 100% auto; } .mob-cart-icon { background-image: url("/design/skinfood/mobile_skinfood/images/icon/icon_cart.svg"); background-repeat: no-repeat; background-size: contain; } .mob-arrow-anchor { background-repeat: no-repeat; background-size: 100% auto; font-size: 0; } .mob-arrow-anchor--left { background-image: url("/design/skinfood/mobile_skinfood/images/common-kb/mob_btn_prev.png"); } .mob-arrow-anchor--right { background-image: url("/design/skinfood/mobile_skinfood/images/common-kb/icon_cart.svg"); } .mob-circle-dropdown { background-image: url("/design/skinfood/mobile_skinfood/images/common-kb/mob_ic_nav_more.png"); background-repeat: no-repeat; background-size: 100% 100%; font-size: 0; } .progress-animation-bar { display: inline-block; transition: width 0.5s ease-in-out; width: 100%; height: 4.8px; height: 0.625vw; background-color: #fdb812; } @media (max-width: 360px) { .progress-animation-bar { height: 2px; height: 0.625vw; } } .default-type-item-cotainer { box-sizing: border-box; display: inline-block; width: 337.6px; width: 43.9583333333vw; vertical-align: top; } @media (max-width: 360px) { .default-type-item-cotainer { width: 140.6666666667px; width: 43.9583333333vw; } } .default-type-item-cotainer__image { width: 337.6px; width: 43.9583333333vw; height: 337.6px; height: 43.9583333333vw; } @media (max-width: 360px) { .default-type-item-cotainer__image { width: 140.6666666667px; width: 43.9583333333vw; } } @media (max-width: 360px) { .default-type-item-cotainer__image { height: 140.6666666667px; height: 43.9583333333vw; } } .default-type-item-cotainer__image span.gli_image { background-color: #f9f9f9; } .default-type-item-cotainer-wrap { font-size: 0; } .default-type-item-cotainer__goods-name { font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .default-type-item-cotainer__goods-name { font-size: 12px; font-size: 3.75vw; } } .default-type-item-cotainer__goods-name span { display: inline-block; height: 72px; height: 9.375vw; line-height: 38.8px; line-height: 5.0520833333vw; margin-bottom: 12px; margin-bottom: 1.5625vw; font-size: 28.8px; font-size: 3.75vw; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: left; } @media (max-width: 360px) { .default-type-item-cotainer__goods-name span { height: 30px; height: 9.375vw; } } @media (max-width: 360px) { .default-type-item-cotainer__goods-name span { line-height: 16.1666666667px; line-height: 5.0520833333vw; } } @media (max-width: 360px) { .default-type-item-cotainer__goods-name span { margin-bottom: 5px; margin-bottom: 1.5625vw; } } @media (max-width: 360px) { .default-type-item-cotainer__goods-name span { font-size: 12px; font-size: 3.75vw; } } .default-type-item-cotainer__goods-cate { font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .default-type-item-cotainer__goods-cate { font-size: 12px; font-size: 3.75vw; } } .default-type-item-cotainer__goods-cate span { -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; color: #999999; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .default-type-item-cotainer__goods-cate span { font-size: 12px; font-size: 3.75vw; } } .default-type-item-cotainer__goods-price { text-align: left; } .default-type-item-cotainer__goods-price--origin span { display: inline-block; text-decoration: line-through; color: #999999; font-size: 26.4px; font-size: 3.4375vw; line-height: 1; } @media (max-width: 360px) { .default-type-item-cotainer__goods-price--origin span { font-size: 11px; font-size: 3.4375vw; } } .default-type-item-cotainer__goods-price--sale { color: #212121; font-weight: bold; font-size: 33.6px; font-size: 4.375vw; } @media (max-width: 360px) { .default-type-item-cotainer__goods-price--sale { font-size: 14px; font-size: 4.375vw; } } .default-type-item-cotainer__content { position: relative; text-align: left; margin-top: 28px; margin-top: 3.6458333333vw; padding: 0px 16px 48px 16px; padding: 0vw 2.0833333333vw 6.25vw 2.0833333333vw; } @media (max-width: 360px) { .default-type-item-cotainer__content { margin-top: 11.6666666667px; margin-top: 3.6458333333vw; } } @media (max-width: 320px) { .default-type-item-cotainer__content { padding: 0px 6.6666666667px 20px 6.6666666667px; padding: 0vw 2.0833333333vw 6.25vw 2.0833333333vw; } } .default-type-item-cotainer + .default-type-item-cotainer:nth-of-type(2n) { margin-left: 12.8px; margin-left: 1.6666666667vw; } @media (max-width: 360px) { .default-type-item-cotainer + .default-type-item-cotainer:nth-of-type(2n) { margin-left: 5.3333333333px; margin-left: 1.6666666667vw; } } .default-lattice-container__stamp01 { position: absolute; right: 0; display: inline-block; width: 280px; width: 36.4583333333vw; height: 273.6px; height: 35.625vw; top: 632px; top: 82.2916666667vw; font-size: 0; background-image: url(/design/skinfood/mobile_skinfood/images/common-kb/bg_stamp02.png); background-repeat: no-repeat; background-size: contain; } @media (max-width: 360px) { .default-lattice-container__stamp01 { width: 116.6666666667px; width: 36.4583333333vw; } } @media (max-width: 360px) { .default-lattice-container__stamp01 { height: 114px; height: 35.625vw; } } @media (max-width: 360px) { .default-lattice-container__stamp01 { top: 263.3333333333px; top: 82.2916666667vw; } } .default-lattice-container__stamp02 { position: absolute; right: 0; display: inline-block; width: 220px; width: 28.6458333333vw; height: 195.2px; height: 25.4166666667vw; top: 1880px; top: 244.7916666667vw; font-size: 0; background-image: url(/design/skinfood/mobile_skinfood/images/common-kb/bg_stamp01.png); background-repeat: no-repeat; background-size: contain; } @media (max-width: 360px) { .default-lattice-container__stamp02 { width: 91.6666666667px; width: 28.6458333333vw; } } @media (max-width: 360px) { .default-lattice-container__stamp02 { height: 81.3333333333px; height: 25.4166666667vw; } } @media (max-width: 360px) { .default-lattice-container__stamp02 { top: 783.3333333333px; top: 244.7916666667vw; } } .default-lattice-container-wrap--padding-top-md .default-lattice-title { margin-top: 20.8px; margin-top: 2.7083333333vw; } @media (max-width: 360px) { .default-lattice-container-wrap--padding-top-md .default-lattice-title { margin-top: 8.6666666667px; margin-top: 2.7083333333vw; } } .default-lattice-container-wrap--mt { /* margin-top: 96px; margin-top: 12.5vw; */ } @media (max-width: 360px) { .default-lattice-container-wrap--mt { /* margin-top: 40px; margin-top: 12.5vw; */ } } .default-lattice-title { font-size: 36.8px; font-size: 4.7916666667vw; margin-bottom: 44px; margin-bottom: 5.7291666667vw; color: #222; font-weight: bold; } @media (max-width: 360px) { .default-lattice-title { font-size: 15.3333333333px; font-size: 4.7916666667vw; } } @media (max-width: 360px) { .default-lattice-title { margin-bottom: 18.3333333333px; margin-bottom: 5.7291666667vw; } } .default-lattice-container__top-content { display: flex; justify-content: space-between; padding: 0px 14.4px; padding: 0vw 1.875vw; margin-bottom: 24px; margin-bottom: 3.125vw; align-items: center; } @media (max-width: 320px) { .default-lattice-container__top-content { padding: 0px 6px; padding: 0vw 1.875vw; } } @media (max-width: 360px) { .default-lattice-container__top-content { margin-bottom: 10px; margin-bottom: 3.125vw; } } .default-lattice-container__top-content--side-padding { padding: 0px 52px; padding: 0vw 6.7708333333vw; } @media (max-width: 320px) { .default-lattice-container__top-content--side-padding { padding: 0px 21.6666666667px; padding: 0vw 6.7708333333vw; } } .default-lattice-container__product-count { font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .default-lattice-container__product-count { font-size: 12px; font-size: 3.75vw; } } .default-lattice-container__search-filter-bar { position: relative; margin-left: 22.4px; margin-left: 2.9166666667vw; } @media (max-width: 360px) { .default-lattice-container__search-filter-bar { margin-left: 9.3333333333px; margin-left: 2.9166666667vw; } } .default-lattice-container__search-filter-bar select { width: 144px; width: 18.75vw; } @media (max-width: 360px) { .default-lattice-container__search-filter-bar select { width: 60px; width: 18.75vw; } } .default-lattice-container__search-filter-bar:before { content: ''; display: inline-block; vertical-align: text-bottom; width: 2.4px; width: 0.3125vw; height: 25.6px; height: 3.3333333333vw; background-color: #eee; } @media (max-width: 360px) { .default-lattice-container__search-filter-bar:before { width: 1px; width: 0.3125vw; } } @media (max-width: 360px) { .default-lattice-container__search-filter-bar:before { height: 10.6666666667px; height: 3.3333333333vw; } } .default-lattice-container__search-filter select { border: none; outline: none; text-align-last: right; font-size: 28.8px; font-size: 3.75vw; -webkit-appearance: none; -moz-appearance: none; background-color: transparent; background-image: url("/design/skinfood/mobile_skinfood/images/common-kb/button_down_arw.png"); background-size: 27.2px 15.2px; background-size: 3.5416666667vw 1.9791666667vw; background-repeat: no-repeat; background-position: right center; padding-right: 44px; padding-right: 5.7291666667vw; height: auto; } @media (max-width: 360px) { .default-lattice-container__search-filter select { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 320px) { .default-lattice-container__search-filter select { background-size: 11.3333333333px 6.3333333333px; background-size: 3.5416666667vw 1.9791666667vw; } } @media (max-width: 360px) { .default-lattice-container__search-filter select { padding-right: 18.3333333333px; padding-right: 5.7291666667vw; } } .default-lattice-container__bottom-content { margin-top: 80px; margin-top: 10.4166666667vw; } @media (max-width: 360px) { .default-lattice-container__bottom-content { margin-top: 33.3333333333px; margin-top: 10.4166666667vw; } } .default-lattice-container__bottom-content--center { text-align: center; } .default-lattice-container__bottom-content .cta { background-color: #ffffff; } .default-lattice-container__cta--arw .arrow { display: inline-block; width: 27.2px; width: 3.5416666667vw; height: 15.2px; height: 1.9791666667vw; background-image: url("/design/skinfood/mobile_skinfood/images/common-kb/button_down_arw.png"); background-size: 100% auto; background-repeat: no-repeat; } @media (max-width: 360px) { .default-lattice-container__cta--arw .arrow { width: 11.3333333333px; width: 3.5416666667vw; } } @media (max-width: 360px) { .default-lattice-container__cta--arw .arrow { height: 6.3333333333px; height: 1.9791666667vw; } } .default-lattice-container__cta--arw .text { font-weight: bold; margin-right: 19.2px; margin-right: 2.5vw; } @media (max-width: 360px) { .default-lattice-container__cta--arw .text { margin-right: 8px; margin-right: 2.5vw; } } .default-lattice-container__default-type-item-cotainer { margin-top: 48px; margin-top: 6.25vw; } @media (max-width: 360px) { .default-lattice-container__default-type-item-cotainer { margin-top: 20px; margin-top: 6.25vw; } } .default-lattice-container__default-type-item-cotainer:nth-of-type(1), .default-lattice-container__default-type-item-cotainer:nth-of-type(2) { margin-top: 0px; margin-top: 0vw; } @media (max-width: 360px) { .default-lattice-container__default-type-item-cotainer:nth-of-type(1), .default-lattice-container__default-type-item-cotainer:nth-of-type(2) { margin-top: 0px; margin-top: 0vw; } } .default-lattice-container-wrap { padding-left: 40px; padding-left: 5.2083333333vw; padding-right: 40px; padding-right: 5.2083333333vw; } @media (max-width: 360px) { .default-lattice-container-wrap { padding-left: 16.6666666667px; padding-left: 5.2083333333vw; } } @media (max-width: 360px) { .default-lattice-container-wrap { padding-right: 16.6666666667px; padding-right: 5.2083333333vw; } } .default-lattice-container-wrap--bg1 { position: relative; background-image: url("/design/skinfood/mobile_skinfood/images/common-kb/bg.png"); background-repeat: no-repeat; background-size: cover; } .default-lattice-container-wrap--bg1:before { position: absolute; top: -24px; top: -3.125vw; left: 0; display: block; width: 100%; height: 24.8px; height: 3.2291666667vw; content: ''; background-image: url("/design/skinfood/mobile_skinfood/images/common-kb/bg_before.png"); background-repeat: no-repeat; background-size: cover; } @media (max-width: 360px) { .default-lattice-container-wrap--bg1:before { top: -10px; top: -3.125vw; } } @media (max-width: 360px) { .default-lattice-container-wrap--bg1:before { height: 10.3333333333px; height: 3.2291666667vw; } } .default-lattice-container-wrap--bg2 { background-image: url("/design/skinfood/mobile_skinfood/images/common-kb/bg_2.png"); background-repeat: no-repeat; background-size: cover; } .default-lattice-container-wrap--padding-top-md { padding-top: 56px; padding-top: 7.2916666667vw; } @media (max-width: 360px) { .default-lattice-container-wrap--padding-top-md { padding-top: 23.3333333333px; padding-top: 7.2916666667vw; } } .default-lattice-container-wrap--padding-bottom-end { padding-bottom: 128px; padding-bottom: 16.6666666667vw; } @media (max-width: 360px) { .default-lattice-container-wrap--padding-bottom-end { padding-bottom: 53.3333333333px; padding-bottom: 16.6666666667vw; } } .common-popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; z-index: 10003; width: 90%; } .common-popup__popup-close-btn { position: absolute; display: inline-block; right: 39.2px; right: 5.1041666667vw; top: 39.2px; top: 5.1041666667vw; width: 39.2px; width: 5.1041666667vw; height: 39.2px; height: 5.1041666667vw; font-size: 0; } @media (max-width: 360px) { .common-popup__popup-close-btn { right: 16.3333333333px; right: 5.1041666667vw; } } @media (max-width: 360px) { .common-popup__popup-close-btn { top: 16.3333333333px; top: 5.1041666667vw; } } @media (max-width: 360px) { .common-popup__popup-close-btn { width: 16.3333333333px; width: 5.1041666667vw; } } @media (max-width: 360px) { .common-popup__popup-close-btn { height: 16.3333333333px; height: 5.1041666667vw; } } .common-popup__header { display: inline-block; box-sizing: border-box; width: 100%; height: 80px; height: 10.4166666667vw; margin-top: 40px; margin-top: 5.2083333333vw; padding-right: 48px; padding-right: 6.25vw; } @media (max-width: 360px) { .common-popup__header { height: 33.3333333333px; height: 10.4166666667vw; } } @media (max-width: 360px) { .common-popup__header { margin-top: 16.6666666667px; margin-top: 5.2083333333vw; } } @media (max-width: 360px) { .common-popup__header { padding-right: 20px; padding-right: 6.25vw; } } .common-popup__body { font-size: 31.2px; font-size: 4.0625vw; text-align: center; padding: 64px 48px 112px; padding: 8.3333333333vw 6.25vw 14.5833333333vw; } @media (max-width: 360px) { .common-popup__body { font-size: 13px; font-size: 4.0625vw; } } @media (max-width: 320px) { .common-popup__body { padding: 26.6666666667px 20px 46.6666666667px; padding: 8.3333333333vw 6.25vw 14.5833333333vw; } } .common-popup__footer { display: flex; } .common-popup__footer-btn { display: block; flex: 1 1 auto; line-height: 112px; line-height: 14.5833333333vw; font-size: 31.2px; font-size: 4.0625vw; text-align: center; font-weight: bold; } @media (max-width: 360px) { .common-popup__footer-btn { line-height: 46.6666666667px; line-height: 14.5833333333vw; } } @media (max-width: 360px) { .common-popup__footer-btn { font-size: 13px; font-size: 4.0625vw; } } .common-popup__footer-btn--black { background-color: #000000; color: #ffffff !important; } .common-popup__footer-btn--outline { background-color: #ffffff; border-width: 2.4px; border-width: 0.3125vw; border-color: #000000; border-style: solid; } @media (max-width: 360px) { .common-popup__footer-btn--outline { border-width: 1px; border-width: 0.3125vw; } } .common-popup-bg { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; opacity: 0.7; z-index: 10003; } .popup-close-btn { background-color: transparent; background-image: url("/design/skinfood/mobile_skinfood/images/icon/icon_popup_close.png"); background-repeat: no-repeat; background-size: 100% auto; } .goods-item-delete-btn { background-color: transparent; background-image: url("/design/skinfood/mobile_skinfood/images/common-kb/goods_option_delete.png"); background-repeat: no-repeat; background-size: 100% auto; } /*# sourceMappingURL=common_kb.css.map */ /* image path */ /* color */ .category-top-bar { position: relative; background-color: #ffffff; height: 104px; height: 13.5416666667vw; } @media (max-width: 360px) { .category-top-bar { height: 43.3333333333px; height: 13.5416666667vw; } } .category-top-bar + .header__gnb-list { border-top: none; } .category-top-bar button { background-color: transparent; border: none; } .category-top-bar__inner { background-color: #fff; position: relative; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; z-index: 101; } .category-top-bar__left { position: absolute; left: 38.4px; left: 5vw; } @media (max-width: 360px) { .category-top-bar__left { left: 16px; left: 5vw; } } .category-top-bar__right { position: absolute; right: 38.4px; right: 5vw; } @media (max-width: 360px) { .category-top-bar__right { right: 16px; right: 5vw; } } .category-top-bar__cart-icon { position: relative; display: inline-block; width: 47.2px; width: 6.1458333333vw; height: 44.8px; height: 5.8333333333vw; margin-left: 48px; margin-left: 6.25vw; font-size: 0; vertical-align: top; } @media (max-width: 360px) { .category-top-bar__cart-icon { width: 19.6666666667px; width: 6.1458333333vw; } } @media (max-width: 360px) { .category-top-bar__cart-icon { height: 18.6666666667px; height: 5.8333333333vw; } } @media (max-width: 360px) { .category-top-bar__cart-icon { margin-left: 20px; margin-left: 6.25vw; } } .category-top-bar__cart-count { position: absolute; top: 0; right: 0; transform: translate(40%, -12%); display: inline-block; text-align: center; width: 28.8px; width: 3.75vw; height: 28.8px; height: 3.75vw; border-radius: 50%; font-weight: 400; line-height: 1; font-size: 22.4px; font-size: 2.9166666667vw; color: #222222; background-color: #fdb812; line-height: 28.8px; line-height: 3.75vw; } @media (max-width: 360px) { .category-top-bar__cart-count { width: 12px; width: 3.75vw; } } @media (max-width: 360px) { .category-top-bar__cart-count { height: 12px; height: 3.75vw; } } @media (max-width: 360px) { .category-top-bar__cart-count { font-size: 9.3333333333px; font-size: 2.9166666667vw; } } @media (max-width: 360px) { .category-top-bar__cart-count { line-height: 12px; line-height: 3.75vw; } } .category-top-bar__search-icon { display: inline-block; width: 43.2px; width: 5.625vw; height: 44px; height: 5.7291666667vw; font-size: 0; vertical-align: top; } @media (max-width: 360px) { .category-top-bar__search-icon { width: 18px; width: 5.625vw; } } @media (max-width: 360px) { .category-top-bar__search-icon { height: 18.3333333333px; height: 5.7291666667vw; } } .category-top-bar__mob-arrow-anchor { display: inline-block; width: 23.2px; width: 3.0208333333vw; height: 42.4px; height: 5.5208333333vw; vertical-align: top; } @media (max-width: 360px) { .category-top-bar__mob-arrow-anchor { width: 9.6666666667px; width: 3.0208333333vw; } } @media (max-width: 360px) { .category-top-bar__mob-arrow-anchor { height: 17.6666666667px; height: 5.5208333333vw; } } .category-top-bar__cate-btn { font-size: 33.6px; font-size: 4.375vw; font-weight: bold; color: #222222; } @media (max-width: 360px) { .category-top-bar__cate-btn { font-size: 14px; font-size: 4.375vw; } } .category-top-bar__cate-btn--active .category-top-bar__mob-circle-dropdown { transform: rotate(-180deg); } .category-top-bar__mob-circle-dropdown { display: inline-block; transition: transform 0.2s ease-in-out; width: 28px; width: 3.6458333333vw; height: 28px; height: 3.6458333333vw; vertical-align: middle; margin-left: 14.4px; margin-left: 1.875vw; } @media (max-width: 360px) { .category-top-bar__mob-circle-dropdown { width: 11.6666666667px; width: 3.6458333333vw; } } @media (max-width: 360px) { .category-top-bar__mob-circle-dropdown { height: 11.6666666667px; height: 3.6458333333vw; } } @media (max-width: 360px) { .category-top-bar__mob-circle-dropdown { margin-left: 6px; margin-left: 1.875vw; } } .category-top-bar__search-bar { display: table; position: absolute; top: 0; left: 0; visibility: hidden; width: 100%; height: 100%; background-color: #ffffff; z-index: 101; } .category-top-bar__search-bar-form { height: 100%; width: 100%; } .category-top-bar__search-bar-inner { display: table-cell; box-sizing: border-box; width: 100%; padding: 12px 0px; padding: 1.5625vw 0vw; } @media (max-width: 320px) { .category-top-bar__search-bar-inner { padding: 5px 0px; padding: 1.5625vw 0vw; } } .category-top-bar__search-mob-search-icon { position: absolute; display: inline-block; left: 0; top: 50%; transform: translateY(-50%); width: 43.2px; width: 5.625vw; height: 44px; height: 5.7291666667vw; font-size: 0; vertical-align: top; border: none; background-color: transparent; z-index: 1; } @media (max-width: 360px) { .category-top-bar__search-mob-search-icon { width: 18px; width: 5.625vw; } } @media (max-width: 360px) { .category-top-bar__search-mob-search-icon { height: 18.3333333333px; height: 5.7291666667vw; } } .category-top-bar__search-mob-search-close-icon { position: absolute; display: inline-block; right: 0; top: 50%; transform: translateY(-50%); width: 43.2px; width: 5.625vw; height: 44px; height: 5.7291666667vw; font-size: 0; vertical-align: top; border: none; background-color: transparent; z-index: 1; } @media (max-width: 360px) { .category-top-bar__search-mob-search-close-icon { width: 18px; width: 5.625vw; } } @media (max-width: 360px) { .category-top-bar__search-mob-search-close-icon { height: 18.3333333333px; height: 5.7291666667vw; } } .category-top-bar__search-form-inner { position: relative; font-size: 0; margin: 0px 48px; margin: 0vw 6.25vw; height: 100%; } @media (max-width: 320px) { .category-top-bar__search-form-inner { margin: 0px 20px; margin: 0vw 6.25vw; } } .category-top-bar__search-form-inner input.category-top-bar__search-form-input { width: 100%; height: 100%; box-sizing: border-box; padding: 0px 48px; padding: 0vw 6.25vw; border: none; } @media (max-width: 320px) { .category-top-bar__search-form-inner input.category-top-bar__search-form-input { padding: 0px 20px; padding: 0vw 6.25vw; } } .category-top-bar__search-form-input-wrap { display: inline-block; height: 100%; width: 100%; } .category-top-bar__cate-dialog { visibility: hidden; position: fixed; transition: bottom 0.3s ease-in-out; top: 106.4px; top: 13.8541666667vw; left: 0; width: 100%; overflow-y: auto; background-color: #fff; z-index: 100; box-sizing: border-box; } @media (max-width: 360px) { .category-top-bar__cate-dialog { top: 44.3333333333px; top: 13.8541666667vw; } } .category-top-bar__cate-dialog-title { position: relative; font-size: 38.4px; font-size: 5vw; font-weight: bold; padding: 64px 0px; padding: 8.3333333333vw 0vw; margin: 0px 38.4px; margin: 0vw 5vw; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-bottom-style: solid; border-bottom-color: #eeeeee; line-height: 1; } @media (max-width: 360px) { .category-top-bar__cate-dialog-title { font-size: 16px; font-size: 5vw; } } @media (max-width: 320px) { .category-top-bar__cate-dialog-title { padding: 26.6666666667px 0px; padding: 8.3333333333vw 0vw; } } @media (max-width: 320px) { .category-top-bar__cate-dialog-title { margin: 0px 16px; margin: 0vw 5vw; } } @media (max-width: 360px) { .category-top-bar__cate-dialog-title { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .category-top-bar__cate-dialog--active { visibility: visible; bottom: 0; } .category-top-bar__cate-list { margin-top: 32px; margin-top: 4.1666666667vw; font-size: 0; } @media (max-width: 360px) { .category-top-bar__cate-list { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .category-top-bar__cate-list:after { content: ''; display: inline-block; width: 100%; height: 57.6px; height: 7.5vw; } @media (max-width: 360px) { .category-top-bar__cate-list:after { height: 24px; height: 7.5vw; } } .category-top-bar__cate-item { display: inline-block; width: 100%; font-size: 31.2px; font-size: 4.0625vw; font-weight: bold; } @media (max-width: 360px) { .category-top-bar__cate-item { font-size: 13px; font-size: 4.0625vw; } } .category-top-bar__cate-item-title { padding: 32px 64px; padding: 4.1666666667vw 8.3333333333vw; } @media (max-width: 320px) { .category-top-bar__cate-item-title { padding: 13.3333333333px 26.6666666667px; padding: 4.1666666667vw 8.3333333333vw; } } .category-top-bar__cate-item-title--exist-sub { position: relative; } .category-top-bar__cate-item-title--exist-sub:after { position: absolute; display: inline-block; width: 26.4px; width: 3.4375vw; height: 16.8px; height: 2.1875vw; right: 38.4px; right: 5vw; top: 50%; transform: translateY(-50%); content: ''; background-image: url("/design/skinfood/mobile_skinfood/images/common-kb/mob_ic_nav_open.png"); background-repeat: no-repeat; background-size: 100% auto; } @media (max-width: 360px) { .category-top-bar__cate-item-title--exist-sub:after { width: 11px; width: 3.4375vw; } } @media (max-width: 360px) { .category-top-bar__cate-item-title--exist-sub:after { height: 7px; height: 2.1875vw; } } @media (max-width: 360px) { .category-top-bar__cate-item-title--exist-sub:after { right: 16px; right: 5vw; } } .category-top-bar__cate-item-title--exist-sub-active:after { background-image: url("/design/skinfood/mobile_skinfood/images/common-kb/mob_ic_nav_close.png"); } .category-top-bar__sub-cate-list { display: none; padding-top: 16px; padding-top: 2.0833333333vw; padding-bottom: 32px; padding-bottom: 4.1666666667vw; background-color: #f6f6f6; font-size: 0; } @media (max-width: 360px) { .category-top-bar__sub-cate-list { padding-top: 6.6666666667px; padding-top: 2.0833333333vw; } } @media (max-width: 360px) { .category-top-bar__sub-cate-list { padding-bottom: 13.3333333333px; padding-bottom: 4.1666666667vw; } } .category-top-bar__sub-cate-item { display: inline-block; width: 100%; padding: 32px 96px; padding: 4.1666666667vw 12.5vw; font-size: 28.8px; font-size: 3.75vw; box-sizing: border-box; font-weight: normal; } @media (max-width: 320px) { .category-top-bar__sub-cate-item { padding: 13.3333333333px 40px; padding: 4.1666666667vw 12.5vw; } } @media (max-width: 360px) { .category-top-bar__sub-cate-item { font-size: 12px; font-size: 3.75vw; } } .category-top-bar__sub-cate-item--active { font-weight: bold; } [search-bar-animation] { transition: opacity 0.35s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1); } [search-bar-animation=init] { opacity: 0; transform: translate(-30px, -50%); -webkit-transform: translate(-30px, -50%); -moz-transform: translate(-30px, -50%); -ms-transform: translate(-30px, -50%); -o-transform: translate(-30px, -50%); } [search-bar-animation=animate] { opacity: 1; transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); } /*# sourceMappingURL=goods_list.css.map */ [opacity-init=visible] { opacity: 1; } [opacity-init=hidden] { opacity: 0; } .content { position: relative; } .content .slick-dots { position: relative; z-index: 1; margin-bottom: 30px; margin-bottom: 9.375vw; } .content-recommend { position: relative; margin-top: 104px; margin-top: 13.5416666667vw; background: url("/design/skinfood/mobile_skinfood/images/main/main_bg1.png") top/contain; } @media (max-width: 360px) { .content-recommend { margin-top: 43.3333333333px; margin-top: 13.5416666667vw; } } .content-recommend:before { content: ""; display: inline-block; width: 155.2px; width: 20.2083333333vw; height: 76px; height: 9.8958333333vw; background: url("/design/skinfood/mobile_skinfood/images/main/bg_tape1.png") center/contain no-repeat; position: absolute; top: -42.4px; top: -5.5208333333vw; right: 50.4px; right: 6.5625vw; } @media (max-width: 360px) { .content-recommend:before { width: 64.6666666667px; width: 20.2083333333vw; } } @media (max-width: 360px) { .content-recommend:before { height: 31.6666666667px; height: 9.8958333333vw; } } @media (max-width: 360px) { .content-recommend:before { top: -17.6666666667px; top: -5.5208333333vw; } } @media (max-width: 360px) { .content-recommend:before { right: 21px; right: 6.5625vw; } } .content-recommend:after { content: ""; display: inline-block; width: 235.2px; width: 30.625vw; height: 132px; height: 17.1875vw; background: url("/design/skinfood/mobile_skinfood/images/main/bg_logo_stamp.png") center/contain no-repeat; position: absolute; bottom: 0; right: 0; } @media (max-width: 360px) { .content-recommend:after { width: 98px; width: 30.625vw; } } @media (max-width: 360px) { .content-recommend:after { height: 55px; height: 17.1875vw; } } .content-recommend .content__title { margin-top: 0; padding-top: 92px; padding-top: 11.9791666667vw; } @media (max-width: 360px) { .content-recommend .content__title { padding-top: 38.3333333333px; padding-top: 11.9791666667vw; } } .content-recommend .content__subtitle { top: 36px; top: 4.6875vw; } @media (max-width: 360px) { .content-recommend .content__subtitle { top: 15px; top: 4.6875vw; } } .content-sns .slick-track { margin-left: -49.6px; margin-left: -6.4583333333vw; } @media (max-width: 360px) { .content-sns .slick-track { margin-left: -20.6666666667px; margin-left: -6.4583333333vw; } } .content-hot { margin-top: 76.8px; margin-top: 10vw; position: relative; padding-bottom: 18.4615384615px; padding-bottom: 2.4038461538vw; background: url("/design/skinfood/mobile_skinfood/images/main/main_bg_grape.png") top/cover; background-repeat: no-repeat; } @media (max-width: 360px) { .content-hot { margin-top: 32px; margin-top: 10vw; } } @media (max-width: 360px) { .content-hot { padding-bottom: 7.6923076923px; padding-bottom: 2.4038461538vw; } } .content-hot::before { content: ""; display: inline-block; position: absolute; width: 108.8px; width: 14.1666666667vw; height: 104px; height: 13.5416666667vw; top: -58.4px; top: -7.6041666667vw; left: 0; background: url("/design/skinfood/mobile_skinfood/images/main/bg_tape2.png") right/cover no-repeat; } @media (max-width: 360px) { .content-hot::before { width: 45.3333333333px; width: 14.1666666667vw; } } @media (max-width: 360px) { .content-hot::before { height: 43.3333333333px; height: 13.5416666667vw; } } @media (max-width: 360px) { .content-hot::before { top: -24.3333333333px; top: -7.6041666667vw; } } .content-hot .content__title { margin-top: 0; padding-top: 108px; padding-top: 14.0625vw; line-height: 1; } @media (max-width: 360px) { .content-hot .content__title { padding-top: 45px; padding-top: 14.0625vw; } } .content-review .content__title { margin-top: 64px; margin-top: 8.3333333333vw; } @media (max-width: 360px) { .content-review .content__title { margin-top: 26.6666666667px; margin-top: 8.3333333333vw; } } .content-review .content__subtitle { top: -44.8px; top: -5.8333333333vw; } @media (max-width: 360px) { .content-review .content__subtitle { top: -18.6666666667px; top: -5.8333333333vw; } } .content-review .slick-slide { height: auto; } .content-new { margin-top: 48px; margin-top: 6.25vw; } @media (max-width: 360px) { .content-new { margin-top: 20px; margin-top: 6.25vw; } } .content--margin { margin-bottom: 104px; margin-bottom: 13.5416666667vw; } @media (max-width: 360px) { .content--margin { margin-bottom: 43.3333333333px; margin-bottom: 13.5416666667vw; } } .content__title { position: relative; color: #212121; font-size: 55.2px; font-size: 7.1875vw; padding-left: 66.4px; padding-left: 8.6458333333vw; margin-top: 88.8px; margin-top: 11.5625vw; letter-spacing: -1.6px; letter-spacing: -0.2083333333vw; line-height: 67.2px; line-height: 8.75vw; } @media (max-width: 360px) { .content__title { font-size: 23px; font-size: 7.1875vw; } } @media (max-width: 360px) { .content__title { padding-left: 27.6666666667px; padding-left: 8.6458333333vw; } } @media (max-width: 360px) { .content__title { margin-top: 37px; margin-top: 11.5625vw; } } @media (max-width: 360px) { .content__title { letter-spacing: -0.6666666667px; letter-spacing: -0.2083333333vw; } } @media (max-width: 360px) { .content__title { line-height: 28px; line-height: 8.75vw; } } .content__title--arrow:after { content: ""; display: inline-block; background: url("/design/skinfood/mobile_skinfood/images/icon/icon_anchor.svg") center/cover; width: 28px; width: 3.6458333333vw; height: 48px; height: 6.25vw; } @media (max-width: 360px) { .content__title--arrow:after { width: 11.6666666667px; width: 3.6458333333vw; } } @media (max-width: 360px) { .content__title--arrow:after { height: 20px; height: 6.25vw; } } .content__title--skinfood { padding-left: 50.4px; padding-left: 6.5625vw; margin-top: 88px; margin-top: 11.4583333333vw; } @media (max-width: 360px) { .content__title--skinfood { padding-left: 21px; padding-left: 6.5625vw; } } @media (max-width: 360px) { .content__title--skinfood { margin-top: 36.6666666667px; margin-top: 11.4583333333vw; } } .content__title--margin-none { margin-top: 0px; margin-top: 0vw; } @media (max-width: 360px) { .content__title--margin-none { margin-top: 0px; margin-top: 0vw; } } .content__title--small { padding-left: 36px; padding-left: 4.6875vw; font-size: 48px; font-size: 6.25vw; line-height: 67.2px; line-height: 8.75vw; } @media (max-width: 360px) { .content__title--small { padding-left: 15px; padding-left: 4.6875vw; } } @media (max-width: 360px) { .content__title--small { font-size: 20px; font-size: 6.25vw; } } @media (max-width: 360px) { .content__title--small { line-height: 28px; line-height: 8.75vw; } } .content__title-wrap { padding-top: 64px; padding-top: 8.3333333333vw; padding-bottom: 160px; padding-bottom: 20.8333333333vw; margin-bottom: 112px; margin-bottom: 14.5833333333vw; } @media (max-width: 360px) { .content__title-wrap { padding-top: 26.6666666667px; padding-top: 8.3333333333vw; } } @media (max-width: 360px) { .content__title-wrap { padding-bottom: 66.6666666667px; padding-bottom: 20.8333333333vw; } } @media (max-width: 360px) { .content__title-wrap { margin-bottom: 46.6666666667px; margin-bottom: 14.5833333333vw; } } .content__title-wrap--bg { background-color: #f7eee0; } .content__subtitle { position: absolute; left: 37.6px; left: 4.8958333333vw; top: -56px; top: -7.2916666667vw; } @media (max-width: 360px) { .content__subtitle { left: 15.6666666667px; left: 4.8958333333vw; } } @media (max-width: 360px) { .content__subtitle { top: -23.3333333333px; top: -7.2916666667vw; } } .content__subtitle--rising { top: 40px; top: 5.2083333333vw; } @media (max-width: 360px) { .content__subtitle--rising { top: 16.6666666667px; top: 5.2083333333vw; } } .content__subtitle--like { height: 68.8px; height: 8.9583333333vw; } @media (max-width: 360px) { .content__subtitle--like { height: 28.6666666667px; height: 8.9583333333vw; } } .content__subtitle--fresh { height: 41.6px; height: 5.4166666667vw; } @media (max-width: 360px) { .content__subtitle--fresh { height: 17.3333333333px; height: 5.4166666667vw; } } .content__subtitle--star { height: 55.2px; height: 7.1875vw; } @media (max-width: 360px) { .content__subtitle--star { height: 23px; height: 7.1875vw; } } .content__subtitle--best { height: 56px; height: 7.2916666667vw; } @media (max-width: 360px) { .content__subtitle--best { height: 23.3333333333px; height: 7.2916666667vw; } } .content__subtitle--review { height: 54.4px; height: 7.0833333333vw; } @media (max-width: 360px) { .content__subtitle--review { height: 22.6666666667px; height: 7.0833333333vw; } } .content__sub-title { color: #888888; padding-left: 36px; padding-left: 4.6875vw; margin-bottom: 8px; margin-bottom: 1.0416666667vw; font-size: 28.8px; font-size: 3.75vw; line-height: 1; } @media (max-width: 360px) { .content__sub-title { padding-left: 15px; padding-left: 4.6875vw; } } @media (max-width: 360px) { .content__sub-title { margin-bottom: 3.3333333333px; margin-bottom: 1.0416666667vw; } } @media (max-width: 360px) { .content__sub-title { font-size: 12px; font-size: 3.75vw; } } .content-product__banner { padding-left: 38.4px; padding-left: 5vw; margin-top: 44px; margin-top: 5.7291666667vw; } @media (max-width: 360px) { .content-product__banner { padding-left: 16px; padding-left: 5vw; } } @media (max-width: 360px) { .content-product__banner { margin-top: 18.3333333333px; margin-top: 5.7291666667vw; } } .content-product__banner-img { max-width: 100%; } .content-product__banner-subtitle { display: inline-block; width: 681.6px; width: 88.75vw; margin-left: 48px; margin-left: 6.25vw; margin-top: -48px; margin-top: -6.25vw; word-break: keep-all; font-family: "Nanum Pen Script", cursive; color: #212121; padding: 30.4px 240px 52px 48px; padding: 3.9583333333vw 31.25vw 6.7708333333vw 6.25vw; font-size: 57.6px; font-size: 7.5vw; background-color: #fff; box-sizing: border-box; letter-spacing: -1.44px; letter-spacing: -0.1875vw; } @media (max-width: 360px) { .content-product__banner-subtitle { width: 284px; width: 88.75vw; } } @media (max-width: 360px) { .content-product__banner-subtitle { margin-left: 20px; margin-left: 6.25vw; } } @media (max-width: 360px) { .content-product__banner-subtitle { margin-top: -20px; margin-top: -6.25vw; } } @media (max-width: 320px) { .content-product__banner-subtitle { padding: 12.6666666667px 100px 21.6666666667px 20px; padding: 3.9583333333vw 31.25vw 6.7708333333vw 6.25vw; } } @media (max-width: 360px) { .content-product__banner-subtitle { font-size: 24px; font-size: 7.5vw; } } @media (max-width: 360px) { .content-product__banner-subtitle { letter-spacing: -0.6px; letter-spacing: -0.1875vw; } } .content-product__banner-subtitle--arrow:after { content: ""; display: inline-block; background: url("/design/skinfood/mobile_skinfood/images/main/half-arrow.svg") center/cover no-repeat; background-size: 28px 14.4px; background-size: 3.6458333333vw 1.875vw; width: 28px; width: 3.6458333333vw; height: 48px; height: 6.25vw; } @media (max-width: 320px) { .content-product__banner-subtitle--arrow:after { background-size: 11.6666666667px 6px; background-size: 3.6458333333vw 1.875vw; } } @media (max-width: 360px) { .content-product__banner-subtitle--arrow:after { width: 11.6666666667px; width: 3.6458333333vw; } } @media (max-width: 360px) { .content-product__banner-subtitle--arrow:after { height: 20px; height: 6.25vw; } } .content-product__list { max-width: 689.6px; max-width: 89.7916666667vw; margin-left: 13.6px; margin-left: 1.7708333333vw; font-size: 0; } @media (max-width: 360px) { .content-product__list { max-width: 287.3333333333px; max-width: 89.7916666667vw; } } @media (max-width: 360px) { .content-product__list { margin-left: 5.6666666667px; margin-left: 1.7708333333vw; } } .content-product__list--center { margin: 0 auto; } .content-product__list--sns { margin-left: 0; display: flex !important; justify-content: space-between; flex-wrap: wrap; max-width: 618.4px; max-width: 80.5208333333vw; margin-left: 49.6px; margin-left: 6.4583333333vw; } @media (max-width: 360px) { .content-product__list--sns { max-width: 257.6666666667px; max-width: 80.5208333333vw; } } @media (max-width: 360px) { .content-product__list--sns { margin-left: 20.6666666667px; margin-left: 6.4583333333vw; } } .content-product__list--sale { max-width: none; margin-left: 0; margin-right: 0; margin-top: 24px; margin-top: 3.125vw; } @media (max-width: 360px) { .content-product__list--sale { margin-top: 10px; margin-top: 3.125vw; } } .content-product__item { box-sizing: border-box; display: inline-block; width: 337.6px; width: 43.9583333333vw; margin-left: 13.6px; margin-left: 1.7708333333vw; } @media (max-width: 360px) { .content-product__item { width: 140.6666666667px; width: 43.9583333333vw; } } @media (max-width: 360px) { .content-product__item { margin-left: 5.6666666667px; margin-left: 1.7708333333vw; } } .content-product__item--sns { width: 284.8px; width: 37.0833333333vw; margin-bottom: 51.2px; margin-bottom: 6.6666666667vw; } @media (max-width: 360px) { .content-product__item--sns { width: 118.6666666667px; width: 37.0833333333vw; } } @media (max-width: 360px) { .content-product__item--sns { margin-bottom: 21.3333333333px; margin-bottom: 6.6666666667vw; } } .content-product__item--sns:nth-child(3n) { margin-left: 0; } .content-product__item:nth-child(2n-1) { margin-left: 0; } .content-product__item--sale { width: 480px; width: 62.5vw; margin-bottom: 56px; margin-bottom: 7.2916666667vw; margin-left: 64px; margin-left: 8.3333333333vw; } @media (max-width: 360px) { .content-product__item--sale { width: 200px; width: 62.5vw; } } @media (max-width: 360px) { .content-product__item--sale { margin-bottom: 23.3333333333px; margin-bottom: 7.2916666667vw; } } @media (max-width: 360px) { .content-product__item--sale { margin-left: 26.6666666667px; margin-left: 8.3333333333vw; } } .content-product__item--sale:first-child { margin-left: 144px; margin-left: 18.75vw; } @media (max-width: 360px) { .content-product__item--sale:first-child { margin-left: 60px; margin-left: 18.75vw; } } .content-product__item-category { -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; color: #999999; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .content-product__item-category { font-size: 12px; font-size: 3.75vw; } } .content-product__item-title { display: inline-block; height: 72px; height: 9.375vw; line-height: 38.8px; line-height: 5.0520833333vw; margin-bottom: 12px; margin-bottom: 1.5625vw; font-size: 28.8px; font-size: 3.75vw; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 360px) { .content-product__item-title { height: 30px; height: 9.375vw; } } @media (max-width: 360px) { .content-product__item-title { line-height: 16.1666666667px; line-height: 5.0520833333vw; } } @media (max-width: 360px) { .content-product__item-title { margin-bottom: 5px; margin-bottom: 1.5625vw; } } @media (max-width: 360px) { .content-product__item-title { font-size: 12px; font-size: 3.75vw; } } .content-product__images { display: inline-block; background-size: contain; background-position: center; width: 100%; height: 338.4px; height: 44.0625vw; background-color: #f9f9f9; } @media (max-width: 360px) { .content-product__images { height: 141px; height: 44.0625vw; } } .content-product__thumb { display: inline-block; position: relative; } .content-product__time { position: absolute; bottom: 32px; bottom: 4.1666666667vw; left: 0; right: 0; margin: auto; width: 332.8px; width: 43.3333333333vw; } @media (max-width: 360px) { .content-product__time { bottom: 13.3333333333px; bottom: 4.1666666667vw; } } @media (max-width: 360px) { .content-product__time { width: 138.6666666667px; width: 43.3333333333vw; } } .content-product__time--up { position: absolute; top: 64px; top: 8.3333333333vw; bottom: auto; } @media (max-width: 360px) { .content-product__time--up { top: 26.6666666667px; top: 8.3333333333vw; } } .content-product__price { text-align: left; margin-top: 16px; margin-top: 2.0833333333vw; padding: 0px 16px 48px 16px; padding: 0vw 2.0833333333vw 6.25vw 2.0833333333vw; } @media (max-width: 360px) { .content-product__price { margin-top: 6.6666666667px; margin-top: 2.0833333333vw; } } @media (max-width: 320px) { .content-product__price { padding: 0px 6.6666666667px 20px 6.6666666667px; padding: 0vw 2.0833333333vw 6.25vw 2.0833333333vw; } } .content-product__price-title { color: #212121; font-weight: bold; font-size: 33.6px; font-size: 4.375vw; line-height: 1.2 !important; } @media (max-width: 360px) { .content-product__price-title { font-size: 14px; font-size: 4.375vw; } } .content-product__price-discount { display: inline-block; text-decoration: line-through; color: #999999; font-size: 26.4px; font-size: 3.4375vw; line-height: 1.2 !important; } @media (max-width: 360px) { .content-product__price-discount { font-size: 11px; font-size: 3.4375vw; } } .content-product--2rows { margin-top: 32px; margin-top: 4.1666666667vw; } @media (max-width: 360px) { .content-product--2rows { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .content-product--2rows .content-product__item:first-child { margin-left: 0; } .content-product--2rows .content-product__item:nth-child(3n+3) { margin-left: 0; } .content-product--recommend { margin-top: 32px; margin-top: 4.1666666667vw; padding-bottom: 112px; padding-bottom: 14.5833333333vw; } @media (max-width: 360px) { .content-product--recommend { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } @media (max-width: 360px) { .content-product--recommend { padding-bottom: 46.6666666667px; padding-bottom: 14.5833333333vw; } } .content-product--recommend .content-product__list { max-width: initial; margin-left: 38.4px; margin-left: 5vw; } @media (max-width: 360px) { .content-product--recommend .content-product__list { margin-left: 16px; margin-left: 5vw; } } .content__paging-list { margin: 0 !important; position: absolute !important; width: 100%; bottom: 32px; bottom: 4.1666666667vw; } @media (max-width: 360px) { .content__paging-list { bottom: 13.3333333333px; bottom: 4.1666666667vw; } } .content__paging-item { transition: 0.3s all; background-color: #dddddd; border-width: 2.4px; border-width: 0.3125vw; border-color: #ddd; border-style: solid; box-sizing: content-box; border-radius: 50%; width: 12px; width: 1.5625vw; height: 12px; height: 1.5625vw; margin: 0px 5.6px; margin: 0vw 0.7291666667vw; } .content__paging-item.current { background-color: #222; border-radius: 10px; border: none; width: 40px; width: 5.2083333333vw; height: 16px; height: 2.0833333333vw; } @media (max-width: 360px) { .content__paging-item.current { width: 16.6666666667px; width: 5.2083333333vw; } } @media (max-width: 360px) { .content__paging-item.current { height: 6.6666666667px; height: 2.0833333333vw; } } @media (max-width: 360px) { .content__paging-item { border-width: 1px; border-width: 0.3125vw; } } @media (max-width: 360px) { .content__paging-item { width: 5px; width: 1.5625vw; } } @media (max-width: 360px) { .content__paging-item { height: 5px; height: 1.5625vw; } } @media (max-width: 320px) { .content__paging-item { margin: 0px 2.3333333333px; margin: 0vw 0.7291666667vw; } } .content__img-item--stamp { position: absolute; display: inline-block; left: 330.4px; left: 43.0208333333vw; top: -32px; top: -4.1666666667vw; width: 280px; width: 36.4583333333vw; height: 184px; height: 23.9583333333vw; } @media (max-width: 360px) { .content__img-item--stamp { left: 137.6666666667px; left: 43.0208333333vw; } } @media (max-width: 360px) { .content__img-item--stamp { top: -13.3333333333px; top: -4.1666666667vw; } } @media (max-width: 360px) { .content__img-item--stamp { width: 116.6666666667px; width: 36.4583333333vw; } } @media (max-width: 360px) { .content__img-item--stamp { height: 76.6666666667px; height: 23.9583333333vw; } } .content__img-item--stamp-top { top: -96px; top: -12.5vw; } @media (max-width: 360px) { .content__img-item--stamp-top { top: -40px; top: -12.5vw; } } .content--padding-top { padding-top: 88px; padding-top: 11.4583333333vw; } @media (max-width: 360px) { .content--padding-top { padding-top: 36.6666666667px; padding-top: 11.4583333333vw; } } .content-slider__dot { bottom: -1.5vw !important; } .layout-side__btn--prev:before { content: ""; display: inline-block; background: url("/design/skinfood/mobile_skinfood/images/main/mob_btn_prev.svg") center/cover; background-repeat: 100%; position: absolute; z-index: 9999; top: 48px; top: 6.25vw; left: 38.4px; left: 5vw; width: 23.2px; width: 3.0208333333vw; height: 42.4px; height: 5.5208333333vw; } @media (max-width: 360px) { .layout-side__btn--prev:before { top: 20px; top: 6.25vw; } } @media (max-width: 360px) { .layout-side__btn--prev:before { left: 16px; left: 5vw; } } @media (max-width: 360px) { .layout-side__btn--prev:before { width: 9.6666666667px; width: 3.0208333333vw; } } @media (max-width: 360px) { .layout-side__btn--prev:before { height: 17.6666666667px; height: 5.5208333333vw; } } .layout-side__title { text-align: center; font-weight: bold; position: absolute; width: 100%; left: 0; z-index: 999; color: #212121; top: 51.2px; top: 6.6666666667vw; font-size: 33.6px; font-size: 4.375vw; } @media (max-width: 360px) { .layout-side__title { top: 21.3333333333px; top: 6.6666666667vw; } } @media (max-width: 360px) { .layout-side__title { font-size: 14px; font-size: 4.375vw; } } .layout-side__bottom { position: relative; z-index: 1; transition: 0.4s all; } .layout-side__bottom--2depth { position: absolute; left: 0; top: 0; background: #fff; z-index: 2; width: 100%; height: 100%; transform: translateX(100%); } .layout-side__bottom--3depth { position: absolute; left: 0; top: 0; background: #fff; z-index: 3; width: 100%; height: 100%; transform: translateX(100%); } .layout-side__bottom--active { transform: translateX(0); } .layout-side__list { padding: 0px 48px 0px 37.6px; padding: 0vw 6.25vw 0vw 4.8958333333vw; } @media (max-width: 320px) { .layout-side__list { padding: 0px 20px 0px 15.6666666667px; padding: 0vw 6.25vw 0vw 4.8958333333vw; } } .layout-side { overflow: hidden; } .content-review__list .slick-dots { bottom: -48px; bottom: -6.25vw; } @media (max-width: 360px) { .content-review__list .slick-dots { bottom: -20px; bottom: -6.25vw; } } .slick-dots { display: flex; justify-content: center; } .slick-dots.slick-dots--goods-detail { bottom: 32px; bottom: 4.1666666667vw; } @media (max-width: 360px) { .slick-dots.slick-dots--goods-detail { bottom: 13.3333333333px; bottom: 4.1666666667vw; } } .slick-dots li button { transition: 0.3s all; background-color: #dddddd; box-sizing: content-box; border-radius: 50%; width: 16px; width: 2.0833333333vw; height: 16px; height: 2.0833333333vw; margin: 0px 8px; margin: 0vw 1.0416666667vw; font-size: 0; } @media (max-width: 360px) { .slick-dots li button { width: 6.6666666667px; width: 2.0833333333vw; } } @media (max-width: 360px) { .slick-dots li button { height: 6.6666666667px; height: 2.0833333333vw; } } @media (max-width: 320px) { .slick-dots li button { margin: 0px 3.3333333333px; margin: 0vw 1.0416666667vw; } } .slick-dots li.slick-active button { background: #212121; border-radius: 8px; border-radius: 1.0416666667vw; width: 40px; width: 5.2083333333vw; height: 16px; height: 2.0833333333vw; } @media (max-width: 360px) { .slick-dots li.slick-active button { border-radius: 3.3333333333px; border-radius: 1.0416666667vw; } } @media (max-width: 360px) { .slick-dots li.slick-active button { width: 16.6666666667px; width: 5.2083333333vw; } } @media (max-width: 360px) { .slick-dots li.slick-active button { height: 6.6666666667px; height: 2.0833333333vw; } } #wrap { width: 100%; height: 100%; top: 0; _position: fixed; overflow: auto; -webkit-overflow-scrolling: touch; } .search-autocomplete { box-sizing: border-box; width: 691.2px; width: 90vw; background-color: #fff; box-shadow: 0px 9px 9px 0px rgba(0, 0, 0, 0.1); } @media (max-width: 360px) { .search-autocomplete { width: 288px; width: 90vw; } } .search-autocomplete__list { width: 100%; box-sizing: border-box; padding: 48px 32px 80px; padding: 6.25vw 4.1666666667vw 10.4166666667vw; } @media (max-width: 320px) { .search-autocomplete__list { padding: 20px 13.3333333333px 33.3333333333px; padding: 6.25vw 4.1666666667vw 10.4166666667vw; } } .search-autocomplete__item { color: #222; font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .search-autocomplete__item { font-size: 12px; font-size: 3.75vw; } } .search-autocomplete__item ~ .search-autocomplete__item { margin-top: 48px; margin-top: 6.25vw; } @media (max-width: 360px) { .search-autocomplete__item ~ .search-autocomplete__item { margin-top: 20px; margin-top: 6.25vw; } } .counter { font-size: 0; } .counter__list { display: inline-block; } .counter__list ~ .counter__list:before { display: inline-block; content: ""; width: 4.8px; width: 0.625vw; height: 21.6px; height: 2.8125vw; margin-left: 16px; margin-left: 2.0833333333vw; margin-right: 16px; margin-right: 2.0833333333vw; vertical-align: middle; background-image: url(/design/skinfood/mobile_skinfood/images/icon/icon_dash.png); background-size: contain; background-position: center; } @media (max-width: 360px) { .counter__list ~ .counter__list:before { width: 2px; width: 0.625vw; } } @media (max-width: 360px) { .counter__list ~ .counter__list:before { height: 9px; height: 2.8125vw; } } @media (max-width: 360px) { .counter__list ~ .counter__list:before { margin-left: 6.6666666667px; margin-left: 2.0833333333vw; } } @media (max-width: 360px) { .counter__list ~ .counter__list:before { margin-right: 6.6666666667px; margin-right: 2.0833333333vw; } } .counter__item { display: inline-block; text-align: center; vertical-align: middle; width: 40px; width: 5.2083333333vw; height: 56px; height: 7.2916666667vw; line-height: 56px; line-height: 7.2916666667vw; border-radius: 8px; border-radius: 1.0416666667vw; background-color: #fdb812; font-size: 28.8px; font-size: 3.75vw; color: #222; font-weight: bold; } @media (max-width: 360px) { .counter__item { width: 16.6666666667px; width: 5.2083333333vw; } } @media (max-width: 360px) { .counter__item { height: 23.3333333333px; height: 7.2916666667vw; } } @media (max-width: 360px) { .counter__item { line-height: 23.3333333333px; line-height: 7.2916666667vw; } } @media (max-width: 360px) { .counter__item { border-radius: 3.3333333333px; border-radius: 1.0416666667vw; } } @media (max-width: 360px) { .counter__item { font-size: 12px; font-size: 3.75vw; } } .counter__item ~ .counter__item { margin-left: 6.4px; margin-left: 0.8333333333vw; } @media (max-width: 360px) { .counter__item ~ .counter__item { margin-left: 2.6666666667px; margin-left: 0.8333333333vw; } } .plan-content .displayTabContentsContainer { margin-top: 39.2px; margin-top: 5.1041666667vw; } @media (max-width: 360px) { .plan-content .displayTabContentsContainer { margin-top: 16.3333333333px; margin-top: 5.1041666667vw; } } .plan-content .goodsDisplayItemWrap { width: 340px; width: 44.2708333333vw; padding-bottom: 40px; padding-bottom: 5.2083333333vw; } @media (max-width: 360px) { .plan-content .goodsDisplayItemWrap { width: 141.6666666667px; width: 44.2708333333vw; } } @media (max-width: 360px) { .plan-content .goodsDisplayItemWrap { padding-bottom: 16.6666666667px; padding-bottom: 5.2083333333vw; } } .plan-content .goodsDisplayItemInfoWrap { margin-top: 30.4px; margin-top: 3.9583333333vw; padding-left: 16px; padding-left: 2.0833333333vw; box-sizing: border-box; } @media (max-width: 360px) { .plan-content .goodsDisplayItemInfoWrap { margin-top: 12.6666666667px; margin-top: 3.9583333333vw; } } @media (max-width: 360px) { .plan-content .goodsDisplayItemInfoWrap { padding-left: 6.6666666667px; padding-left: 2.0833333333vw; } } .plan-content .goodsDisplayItemImage { width: 100%; height: 339.2px; height: 44.1666666667vw; overflow: hidden; } @media (max-width: 360px) { .plan-content .goodsDisplayItemImage { height: 141.3333333333px; height: 44.1666666667vw; } } .plan-content .goodsDisplayItemImage img { width: 100%; height: 100%; background-color: #f6f6f6; } .plan-content .goodsDisplayItemWrap + .goodsDisplayItemWrap { margin-left: 12px; margin-left: 1.5625vw; } @media (max-width: 360px) { .plan-content .goodsDisplayItemWrap + .goodsDisplayItemWrap { margin-left: 5px; margin-left: 1.5625vw; } } .plan-content .goods_name { font-size: 28.8px; font-size: 3.75vw; color: #222; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.2; max-height: 69.6px; max-height: 9.0625vw; -webkit-box-orient: vertical; font-weight: bold; word-break: keep-all; } @media (max-width: 360px) { .plan-content .goods_name { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .plan-content .goods_name { max-height: 29px; max-height: 9.0625vw; } } .plan-content .goodsDisplayPrice { margin-top: 20px; margin-top: 2.6041666667vw; } @media (max-width: 360px) { .plan-content .goodsDisplayPrice { margin-top: 8.3333333333px; margin-top: 2.6041666667vw; } } .plan-content .sale_price { font-size: 26.4px; font-size: 3.4375vw; text-decoration: line-through; color: #888; } @media (max-width: 360px) { .plan-content .sale_price { font-size: 11px; font-size: 3.4375vw; } } .plan-content .price_default { font-size: 33.6px; font-size: 4.375vw; color: #222; font-weight: bold; } @media (max-width: 360px) { .plan-content .price_default { font-size: 14px; font-size: 4.375vw; } } .content-product-slick .slick-dots { /* margin-top: 54.4px; margin-top: 7.0833333333vw; */ bottom: 30px; } @media (max-width: 360px) { .content-product-slick .slick-dots { margin-top: 22.6666666667px; margin-top: 7.0833333333vw; } } .gl_item { min-height: 576.8px; min-height: 75.1041666667vw; } @media (max-width: 360px) { .gl_item { min-height: 240.3333333333px; min-height: 75.1041666667vw; } } /*# sourceMappingURL=main.css.map */ @import url(//fonts.googleapis.com/earlyaccess/nanumpenscript.css); .content__title--best { margin-top: 96px; margin-top: 12.5vw; margin-bottom: 48px; margin-bottom: 6.25vw; background-position-x: 38.4px; background-position-x: 5vw; background-position-y: bottom; background-size: contain; } @media (max-width: 360px) { .content__title--best { margin-top: 40px; margin-top: 12.5vw; } } @media (max-width: 360px) { .content__title--best { margin-bottom: 20px; margin-bottom: 6.25vw; } } @media (max-width: 360px) { .content__title--best { background-position-x: 16px; background-position-x: 5vw; } } .content__title--bold { font-weight: bold; } .content__title--skin { margin-top: 0; padding-left: 13.6px; padding-left: 1.7708333333vw; } @media (max-width: 360px) { .content__title--skin { padding-left: 5.6666666667px; padding-left: 1.7708333333vw; } } .content__container--sns { margin-top: 40px; margin-top: 5.2083333333vw; padding: 101.6px 0px 224px 38.4px; padding: 13.2291666667vw 0vw 29.1666666667vw 5vw; background: url("/design/skinfood/mobile_skinfood/images/main/bg_sns.png") no-repeat; background-size: cover; } @media (max-width: 360px) { .content__container--sns { margin-top: 16.6666666667px; margin-top: 5.2083333333vw; } } @media (max-width: 320px) { .content__container--sns { padding: 42.3333333333px 0px 93.3333333333px 16px; padding: 13.2291666667vw 0vw 29.1666666667vw 5vw; } } .content__desc { margin-top: 16px; margin-top: 2.0833333333vw; font-family: "Nanum Pen Script", cursive; font-size: 57.6px; font-size: 7.5vw; letter-spacing: -1.44px; letter-spacing: -0.1875vw; color: #212121; } @media (max-width: 360px) { .content__desc { margin-top: 6.6666666667px; margin-top: 2.0833333333vw; } } @media (max-width: 360px) { .content__desc { font-size: 24px; font-size: 7.5vw; } } @media (max-width: 360px) { .content__desc { letter-spacing: -0.6px; letter-spacing: -0.1875vw; } } .content-sns__inner { overflow: auto; } .content-sns__list { white-space: nowrap; font-size: 0; } .content-sns__list ~ .content-sns__list { margin-top: 48px; margin-top: 6.25vw; } @media (max-width: 360px) { .content-sns__list ~ .content-sns__list { margin-top: 20px; margin-top: 6.25vw; } } .content-sns__item { display: inline-block; width: 284px; width: 36.9791666667vw; height: auto; padding: 0px 48px 48px 0px; padding: 0vw 6.25vw 6.25vw 0vw; font-size: 0; box-sizing: border-box; } @media (max-width: 360px) { .content-sns__item { width: 118.3333333333px; width: 36.9791666667vw; } } @media (max-width: 320px) { .content-sns__item { padding: 0px 20px 20px 0px; padding: 0vw 6.25vw 6.25vw 0vw; } } .content-sns__item img { width: 100%; } .content-brand { width: 100%; height: 546.4px; height: 71.1458333333vw; background: url("/design/skinfood/mobile_skinfood/images/main/bg_brand.png") no-repeat; background-size: contain; text-align: center; } @media (max-width: 360px) { .content-brand { height: 227.6666666667px; height: 71.1458333333vw; } } .content-review { padding-bottom: 104px; padding-bottom: 13.5416666667vw; overflow: hidden; } @media (max-width: 360px) { .content-review { padding-bottom: 43.3333333333px; padding-bottom: 13.5416666667vw; } } .content-review__container { margin-top: 40px; margin-top: 5.2083333333vw; } @media (max-width: 360px) { .content-review__container { margin-top: 16.6666666667px; margin-top: 5.2083333333vw; } } .content-review__info { padding: 7.2px 48px; padding: 0.9375vw 6.25vw; text-align: center; } @media (max-width: 320px) { .content-review__info { padding: 3px 20px; padding: 0.9375vw 6.25vw; } } .content-review__title { margin-top: 48px; margin-top: 6.25vw; font-size: 52.8px; font-size: 6.875vw; color: #222; text-align: left; display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 360px) { .content-review__title { margin-top: 20px; margin-top: 6.25vw; } } @media (max-width: 360px) { .content-review__title { font-size: 22px; font-size: 6.875vw; } } .content-review__title--sub { margin-top: 8px; margin-top: 1.0416666667vw; font-family: "Nanum Pen Script", cursive; font-size: 48px; font-size: 6.25vw; } @media (max-width: 360px) { .content-review__title--sub { margin-top: 3.3333333333px; margin-top: 1.0416666667vw; } } @media (max-width: 360px) { .content-review__title--sub { font-size: 20px; font-size: 6.25vw; } } .content-review__desc { margin-top: 24px; margin-top: 3.125vw; font-size: 28.8px; font-size: 3.75vw; line-height: 44.8px; line-height: 5.8333333333vw; color: #888; text-align: left; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 360px) { .content-review__desc { margin-top: 10px; margin-top: 3.125vw; } } @media (max-width: 360px) { .content-review__desc { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .content-review__desc { line-height: 18.6666666667px; line-height: 5.8333333333vw; } } .content-review__btn { margin-top: 40px; margin-top: 5.2083333333vw; } @media (max-width: 360px) { .content-review__btn { margin-top: 16.6666666667px; margin-top: 5.2083333333vw; } } .content-review__indicator { margin-top: 64px; margin-top: 8.3333333333vw; } @media (max-width: 360px) { .content-review__indicator { margin-top: 26.6666666667px; margin-top: 8.3333333333vw; } } .content-category { white-space: nowrap; overflow: auto; padding-left: 38.4px; padding-left: 5vw; font-size: 0; overflow-x: auto; overflow-y: hidden; } @media (max-width: 360px) { .content-category { padding-left: 16px; padding-left: 5vw; } } .content-category__item { display: inline-block; vertical-align: top; width: 144px; width: 18.75vw; margin-right: 19.2px; margin-right: 2.5vw; } @media (max-width: 360px) { .content-category__item { width: 60px; width: 18.75vw; } } @media (max-width: 360px) { .content-category__item { margin-right: 8px; margin-right: 2.5vw; } } .content-category__name { display: block; margin-top: 12px; margin-top: 1.5625vw; font-size: 28.8px; font-size: 3.75vw; text-align: center; word-break: keep-all; white-space: initial; } @media (max-width: 360px) { .content-category__name { margin-top: 5px; margin-top: 1.5625vw; } } @media (max-width: 360px) { .content-category__name { font-size: 12px; font-size: 3.75vw; } } .content-skin { margin-top: 115.2px; margin-top: 15vw; padding: 96px 0px 100px 52.8px; padding: 12.5vw 0vw 13.0208333333vw 6.875vw; background: url("/design/skinfood/mobile_skinfood/images/main/bg_pesonal.png") no-repeat; background-size: cover; } @media (max-width: 360px) { .content-skin { margin-top: 48px; margin-top: 15vw; } } @media (max-width: 320px) { .content-skin { padding: 40px 0px 41.6666666667px 22px; padding: 12.5vw 0vw 13.0208333333vw 6.875vw; } } .content-skin__btn { margin-top: 40px; margin-top: 5.2083333333vw; } @media (max-width: 360px) { .content-skin__btn { margin-top: 16.6666666667px; margin-top: 5.2083333333vw; } } .content__icon-carrot { position: absolute; z-index: 1; } .content__icon-carrot--left { width: 186.4px; width: 24.2708333333vw; bottom: 80px; bottom: 10.4166666667vw; left: -48px; left: -6.25vw; } @media (max-width: 360px) { .content__icon-carrot--left { width: 77.6666666667px; width: 24.2708333333vw; } } @media (max-width: 360px) { .content__icon-carrot--left { bottom: 33.3333333333px; bottom: 10.4166666667vw; } } @media (max-width: 360px) { .content__icon-carrot--left { left: -20px; left: -6.25vw; } } .content__icon-carrot--right { width: 205.6px; width: 26.7708333333vw; bottom: 224px; bottom: 29.1666666667vw; right: -104px; right: -13.5416666667vw; } @media (max-width: 360px) { .content__icon-carrot--right { width: 85.6666666667px; width: 26.7708333333vw; } } @media (max-width: 360px) { .content__icon-carrot--right { bottom: 93.3333333333px; bottom: 29.1666666667vw; } } @media (max-width: 360px) { .content__icon-carrot--right { right: -43.3333333333px; right: -13.5416666667vw; } } .popup { position: fixed; top: 50%; left: 50%; width: 691.2px; width: 90vw; transform: translate(-50%, -50%); background: #fff; z-index: 1003; } @media (max-width: 360px) { .popup { width: 288px; width: 90vw; } } .popup-coupon__item + .popup-coupon__item { margin-top: 44px; margin-top: 5.7291666667vw; } @media (max-width: 360px) { .popup-coupon__item + .popup-coupon__item { margin-top: 18.3333333333px; margin-top: 5.7291666667vw; } } .popup--wide { width: 100%; bottom: 0; transform: none; left: 0; } .popup--side { top: auto; left: 0; bottom: 0; width: 100%; transform: none; } .popup--auto-height { width: 100%; height: auto; max-height: 90%; top: initial; transform: translateX(-50%); bottom: 0; overflow: hidden; } .popup--auto-height .popup__content { box-sizing: border-box; height: 100%; overflow: auto; } .popup--full { width: 100%; height: 100%; } .popup__header { position: relative; } .popup__title { line-height: 104px; line-height: 13.5416666667vw; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-bottom-style: solid; border-bottom-color: #ddd; font-size: 33.6px; font-size: 4.375vw; text-align: center; } @media (max-width: 360px) { .popup__title { line-height: 43.3333333333px; line-height: 13.5416666667vw; } } @media (max-width: 360px) { .popup__title { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } @media (max-width: 360px) { .popup__title { font-size: 14px; font-size: 4.375vw; } } .popup__title--bold { font-weight: bold; } .popup__btn-wrap { padding-bottom: 0; margin: 72px 0px 96px; margin: 9.375vw 0vw 12.5vw; height: 112px; height: 14.5833333333vw; } @media (max-width: 320px) { .popup__btn-wrap { margin: 30px 0px 40px; margin: 9.375vw 0vw 12.5vw; } } @media (max-width: 360px) { .popup__btn-wrap { height: 46.6666666667px; height: 14.5833333333vw; } } .popup__btn-close { display: inline-block; width: 39.2px; width: 5.1041666667vw; height: 38.4px; height: 5vw; position: absolute; right: 44px; right: 5.7291666667vw; top: 50%; transform: translateY(-50%); background: url("/design/skinfood/mobile_skinfood/images/icon/icon_popup_close.png") no-repeat; background-size: contain; font-size: 0; } @media (max-width: 360px) { .popup__btn-close { width: 16.3333333333px; width: 5.1041666667vw; } } @media (max-width: 360px) { .popup__btn-close { height: 16px; height: 5vw; } } @media (max-width: 360px) { .popup__btn-close { right: 18.3333333333px; right: 5.7291666667vw; } } .popup-after:after { content: ""; display: block; height: 108px; height: 14.0625vw; } @media (max-width: 360px) { .popup-after:after { height: 45px; height: 14.0625vw; } } .popup__content { padding: 64px 38.4px; padding: 8.3333333333vw 5vw; } @media (max-width: 320px) { .popup__content { padding: 26.6666666667px 16px; padding: 8.3333333333vw 5vw; } } .popup__content--non-padding { padding: 0; } .popup__content--wide { padding: 80px 38.4px; padding: 10.4166666667vw 5vw; max-height: 720px; max-height: 93.75vw; overflow-y: scroll; } @media (max-width: 320px) { .popup__content--wide { padding: 33.3333333333px 16px; padding: 10.4166666667vw 5vw; } } @media (max-width: 360px) { .popup__content--wide { max-height: 300px; max-height: 93.75vw; } } .popup__content--scroll { height: 100%; overflow-y: auto; } .popup__content-desc { margin-top: 20px; margin-top: 2.6041666667vw; font-size: 28.8px; font-size: 3.75vw; color: #222; } @media (max-width: 360px) { .popup__content-desc { margin-top: 8.3333333333px; margin-top: 2.6041666667vw; } } @media (max-width: 360px) { .popup__content-desc { font-size: 12px; font-size: 3.75vw; } } .popup__content-desc--slim { margin-top: 0; margin-bottom: 31.2px; margin-bottom: 4.0625vw; } @media (max-width: 360px) { .popup__content-desc--slim { margin-bottom: 13px; margin-bottom: 4.0625vw; } } .popup__content-title { font-size: 33.6px; font-size: 4.375vw; padding-bottom: 32px; padding-bottom: 4.1666666667vw; font-weight: bold; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-bottom-color: #eee; border-bottom-style: solid; } @media (max-width: 360px) { .popup__content-title { font-size: 14px; font-size: 4.375vw; } } @media (max-width: 360px) { .popup__content-title { padding-bottom: 13.3333333333px; padding-bottom: 4.1666666667vw; } } @media (max-width: 360px) { .popup__content-title { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .popup__content-title--regular { padding-bottom: 40px; padding-bottom: 5.2083333333vw; font-size: 32px; font-size: 4.1666666667vw; line-height: 1; border: none; font-weight: bold; } @media (max-width: 360px) { .popup__content-title--regular { padding-bottom: 16.6666666667px; padding-bottom: 5.2083333333vw; } } @media (max-width: 360px) { .popup__content-title--regular { font-size: 13.3333333333px; font-size: 4.1666666667vw; } } .popup__content-title--small { font-size: 28.8px; font-size: 3.75vw; word-break: keep-all; } @media (max-width: 360px) { .popup__content-title--small { font-size: 12px; font-size: 3.75vw; } } .popup__content-item { margin-top: 32px; margin-top: 4.1666666667vw; display: flex; justify-content: space-between; } @media (max-width: 360px) { .popup__content-item { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .popup__content-item--large-top { margin-top: 64px; margin-top: 8.3333333333vw; } @media (max-width: 360px) { .popup__content-item--large-top { margin-top: 26.6666666667px; margin-top: 8.3333333333vw; } } .popup__content-item-title { font-size: 28.8px; font-size: 3.75vw; color: #888; } @media (max-width: 360px) { .popup__content-item-title { font-size: 12px; font-size: 3.75vw; } } .popup__content-item-title--bold { font-weight: bold; color: #222; } .popup__content-item-desc { font-size: 28.8px; font-size: 3.75vw; color: #888; } @media (max-width: 360px) { .popup__content-item-desc { font-size: 12px; font-size: 3.75vw; } } .popup__content-item-desc--bold { font-weight: bold; color: #222; } .popup__content-sns .snsbox li { display: inline-block; width: 50%; margin-bottom: 64px; margin-bottom: 8.3333333333vw; text-align: center; font-size: 28.8px; font-size: 3.75vw; color: #888; line-height: 1; } @media (max-width: 360px) { .popup__content-sns .snsbox li { margin-bottom: 26.6666666667px; margin-bottom: 8.3333333333vw; } } @media (max-width: 360px) { .popup__content-sns .snsbox li { font-size: 12px; font-size: 3.75vw; } } .popup__content-sns .snsbox li img { padding-bottom: 23.2px; padding-bottom: 3.0208333333vw; width: 127.2px; width: 16.5625vw; height: auto; } @media (max-width: 360px) { .popup__content-sns .snsbox li img { padding-bottom: 9.6666666667px; padding-bottom: 3.0208333333vw; } } @media (max-width: 360px) { .popup__content-sns .snsbox li img { width: 53px; width: 16.5625vw; } } .popup__content-copy { display: flex; justify-content: space-between; width: 100%; height: 92.8px; height: 12.0833333333vw; line-height: 92.8px; line-height: 12.0833333333vw; border-width: 2.4px; border-width: 0.3125vw; border-style: solid; border-color: #ddd; } @media (max-width: 360px) { .popup__content-copy { height: 38.6666666667px; height: 12.0833333333vw; } } @media (max-width: 360px) { .popup__content-copy { line-height: 38.6666666667px; line-height: 12.0833333333vw; } } @media (max-width: 360px) { .popup__content-copy { border-width: 1px; border-width: 0.3125vw; } } .popup__content-url { flex: 1; padding: 0px 24px 0px 17.6px; padding: 0vw 3.125vw 0vw 2.2916666667vw; font-size: 28.8px; font-size: 3.75vw; color: #888; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } @media (max-width: 320px) { .popup__content-url { padding: 0px 10px 0px 7.3333333333px; padding: 0vw 3.125vw 0vw 2.2916666667vw; } } @media (max-width: 360px) { .popup__content-url { font-size: 12px; font-size: 3.75vw; } } .popup__content-url#shareUrl { border: none; height: auto; } .popup__content-btn-copy { display: inline-block; width: 173.6px; width: 22.6041666667vw; height: 92.8px; height: 12.0833333333vw; line-height: 92.8px; line-height: 12.0833333333vw; text-align: center; font-size: 28.8px; font-size: 3.75vw; background: #222; color: #fff; } @media (max-width: 360px) { .popup__content-btn-copy { width: 72.3333333333px; width: 22.6041666667vw; } } @media (max-width: 360px) { .popup__content-btn-copy { height: 38.6666666667px; height: 12.0833333333vw; } } @media (max-width: 360px) { .popup__content-btn-copy { line-height: 38.6666666667px; line-height: 12.0833333333vw; } } @media (max-width: 360px) { .popup__content-btn-copy { font-size: 12px; font-size: 3.75vw; } } .popup__content-iframe { position: absolute; width: 100%; height: 100%; left: 0; top: 108px; top: 14.0625vw; } @media (max-width: 360px) { .popup__content-iframe { top: 45px; top: 14.0625vw; } } .popup__content-footer { position: absolute; width: 100%; bottom: 0; } .popup__content-border { padding-top: 60px; padding-top: 7.8125vw; margin-top: 64px; margin-top: 8.3333333333vw; border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-color: #eee; border-top-style: solid; } @media (max-width: 360px) { .popup__content-border { padding-top: 25px; padding-top: 7.8125vw; } } @media (max-width: 360px) { .popup__content-border { margin-top: 26.6666666667px; margin-top: 8.3333333333vw; } } @media (max-width: 360px) { .popup__content-border { border-top-width: 1px; border-top-width: 0.3125vw; } } .popup__content--has-footer:after { content: ""; display: block; height: 118.4px; height: 15.4166666667vw; } @media (max-width: 360px) { .popup__content--has-footer:after { height: 49.3333333333px; height: 15.4166666667vw; } } .popup--sns { display: none; } .popup--review { left: 0; top: 0; width: 100%; height: 100%; transform: translate(0); } .popup__footer { z-index: 1; } .popup__footer--btn { position: relative; display: flex; justify-content: space-between; } .popup__footer--btn .cta { width: 50%; text-align: center; border-width: 2.4px; border-width: 0.3125vw; padding: 0; height: 112px; height: 14.5833333333vw; line-height: 112px; line-height: 14.5833333333vw; } @media (max-width: 360px) { .popup__footer--btn .cta { border-width: 1px; border-width: 0.3125vw; } } @media (max-width: 360px) { .popup__footer--btn .cta { height: 46.6666666667px; height: 14.5833333333vw; } } @media (max-width: 360px) { .popup__footer--btn .cta { line-height: 46.6666666667px; line-height: 14.5833333333vw; } } .popup__footer--btn .cta--border { background-color: #fff; } .popup__dimed { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; opacity: 0.7; z-index: 1002; } .popup-content__desc { margin-top: 17.6px; margin-top: 2.2916666667vw; font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .popup-content__desc { margin-top: 7.3333333333px; margin-top: 2.2916666667vw; } } @media (max-width: 360px) { .popup-content__desc { font-size: 12px; font-size: 3.75vw; } } /*# sourceMappingURL=main_ahn.css.map */ /* image path */ /* color */ body { -webkit-overflow-scrolling: touch; } #wrap { -webkit-overflow-scrolling: touch; } body { transition: padding-top 0.3s; } #layout_header { transition: top 0.3s; } body.active { transition: padding-top 0.3s; } #layout_header.active { transition: top 0.3s; } #actionFrame { display: none; } .ez-radio { width: 38.4px; width: 5vw; height: 38.4px; height: 5vw; margin: 0; font-size: 0; } @media (max-width: 360px) { .ez-radio { width: 16px; width: 5vw; } } @media (max-width: 360px) { .ez-radio { height: 16px; height: 5vw; } } .ez-checkbox { width: 36px; width: 4.6875vw; height: 36px; height: 4.6875vw; } @media (max-width: 360px) { .ez-checkbox { width: 15px; width: 4.6875vw; } } @media (max-width: 360px) { .ez-checkbox { height: 15px; height: 4.6875vw; } } .ez-checkbox-on { width: 36px; width: 4.6875vw; height: 36px; height: 4.6875vw; } @media (max-width: 360px) { .ez-checkbox-on { width: 15px; width: 4.6875vw; } } @media (max-width: 360px) { .ez-checkbox-on { height: 15px; height: 4.6875vw; } } .cta { display: inline-block; padding: 32.8px 64px; padding: 4.2708333333vw 8.3333333333vw; border-radius: 56px; border-radius: 7.2916666667vw; font-size: 28.8px; font-size: 3.75vw; line-height: 1; border-style: solid; font-weight: bold; text-align: center; } @media (max-width: 320px) { .cta { padding: 13.6666666667px 26.6666666667px; padding: 4.2708333333vw 8.3333333333vw; } } @media (max-width: 360px) { .cta { border-radius: 23.3333333333px; border-radius: 7.2916666667vw; } } @media (max-width: 360px) { .cta { font-size: 12px; font-size: 3.75vw; } } .cta-wrap--margin { margin-top: 8px; margin-top: 1.0416666667vw; margin-bottom: 32px; margin-bottom: 4.1666666667vw; } @media (max-width: 360px) { .cta-wrap--margin { margin-top: 3.3333333333px; margin-top: 1.0416666667vw; } } @media (max-width: 360px) { .cta-wrap--margin { margin-bottom: 13.3333333333px; margin-bottom: 4.1666666667vw; } } .cta--hide { display: none; } .cta--border-gray { box-sizing: border-box; border-width: 2.4px; border-width: 0.3125vw; border-color: #ddd; width: 193.6px; width: 25.2083333333vw; height: 72px; height: 9.375vw; padding: 0; line-height: 72px; line-height: 9.375vw; font-size: 26.4px; font-size: 3.4375vw; text-align: center; border-radius: 0; background-color: #fff; font-weight: normal; } @media (max-width: 360px) { .cta--border-gray { border-width: 1px; border-width: 0.3125vw; } } @media (max-width: 360px) { .cta--border-gray { width: 80.6666666667px; width: 25.2083333333vw; } } @media (max-width: 360px) { .cta--border-gray { height: 30px; height: 9.375vw; } } @media (max-width: 360px) { .cta--border-gray { line-height: 30px; line-height: 9.375vw; } } @media (max-width: 360px) { .cta--border-gray { font-size: 11px; font-size: 3.4375vw; } } .cta--border-gray + .cta--border-gray { margin-left: 16px; margin-left: 2.0833333333vw; } @media (max-width: 360px) { .cta--border-gray + .cta--border-gray { margin-left: 6.6666666667px; margin-left: 2.0833333333vw; } } .cta--black { background: #222 !important; border-color: #222; color: #fff !important; } .cta--yellow { background: #fdb812 !important; border-color: #fdb812; } .cta--white { background-color: #ffffff !important; color: #222222; } .cta--outline { border-width: 2.4px; border-width: 0.3125vw; border-color: #222; border-style: solid; background: #fff !important; } @media (max-width: 360px) { .cta--outline { border-width: 1px; border-width: 0.3125vw; } } .cta--box { border-radius: 0; } .cta--wide { width: 100%; box-sizing: border-box; } .cta--middle { display: inline-block; width: 50%; } .cta--underline { padding: 0; border-radius: 0; border: none; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-bottom-style: solid; border-bottom-color: #222; line-height: 36px; line-height: 4.6875vw; font-size: 28.8px; font-size: 3.75vw; letter-spacing: -0.288px; letter-spacing: -0.0375vw; font-weight: normal; background: none; } @media (max-width: 360px) { .cta--underline { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } @media (max-width: 360px) { .cta--underline { line-height: 15px; line-height: 4.6875vw; } } @media (max-width: 360px) { .cta--underline { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .cta--underline { letter-spacing: -0.12px; letter-spacing: -0.0375vw; } } .cta--close { display: inline-block; padding: 0; width: 40px; width: 5.2083333333vw; height: 40px; height: 5.2083333333vw; font-size: 0; background: url("/design/skinfood/mobile_skinfood/images/icon/icon_btn_close.png") no-repeat; background-size: contain; border: none; } @media (max-width: 360px) { .cta--close { width: 16.6666666667px; width: 5.2083333333vw; } } @media (max-width: 360px) { .cta--close { height: 16.6666666667px; height: 5.2083333333vw; } } .cta--outline-grey { padding: 20px 16px; padding: 2.6041666667vw 2.0833333333vw; border-width: 2.4px; border-width: 0.3125vw; border-color: #ddd; font-size: 26.4px; font-size: 3.4375vw; background: #fff; font-weight: normal; } @media (max-width: 320px) { .cta--outline-grey { padding: 8.3333333333px 6.6666666667px; padding: 2.6041666667vw 2.0833333333vw; } } @media (max-width: 360px) { .cta--outline-grey { border-width: 1px; border-width: 0.3125vw; } } @media (max-width: 360px) { .cta--outline-grey { font-size: 11px; font-size: 3.4375vw; } } .cta--arrow { border: none; padding: 0; padding-right: 32.8px; padding-right: 4.2708333333vw; background: url("/design/skinfood/mobile_skinfood/images/icon/icon_arrow_right.png") no-repeat; background-size: 16.8px 26.4px; background-size: 2.1875vw 3.4375vw; background-position-x: right; background-position-y: 4px; background-position-y: 0.5208333333vw; background-position-y: 0; } @media (max-width: 360px) { .cta--arrow { padding-right: 13.6666666667px; padding-right: 4.2708333333vw; } } @media (max-width: 320px) { .cta--arrow { background-size: 7px 11px; background-size: 2.1875vw 3.4375vw; } } @media (max-width: 360px) { .cta--arrow { background-position-y: 1.6666666667px; background-position-y: 0.5208333333vw; } } .cta--more-arrow:after { content: ""; display: inline-block; vertical-align: middle; width: 28px; width: 3.6458333333vw; height: 16px; height: 2.0833333333vw; margin-left: 15.2px; margin-left: 1.9791666667vw; background-image: url(/design/skinfood/mobile_skinfood/images/common-kb/button_down_arw.png); background-size: contain; background-repeat: no-repeat; } @media (max-width: 360px) { .cta--more-arrow:after { width: 11.6666666667px; width: 3.6458333333vw; } } @media (max-width: 360px) { .cta--more-arrow:after { height: 6.6666666667px; height: 2.0833333333vw; } } @media (max-width: 360px) { .cta--more-arrow:after { margin-left: 6.3333333333px; margin-left: 1.9791666667vw; } } .cta--more-arrow--active:after { background-image: url(/design/skinfood/mobile_skinfood/images/common-kb/button_up_arw.png); } .cta--add-icon:before { content: ''; display: inline-block; vertical-align: text-bottom; width: 33.6px; width: 4.375vw; height: 33.6px; height: 4.375vw; margin-right: 16px; margin-right: 2.0833333333vw; background-image: url(/design/skinfood/mobile_skinfood/images/icon/icon_plus_outline.svg); background-size: contain; background-repeat: no-repeat; } @media (max-width: 360px) { .cta--add-icon:before { width: 14px; width: 4.375vw; } } @media (max-width: 360px) { .cta--add-icon:before { height: 14px; height: 4.375vw; } } @media (max-width: 360px) { .cta--add-icon:before { margin-right: 6.6666666667px; margin-right: 2.0833333333vw; } } .cta--large { display: block; width: 100%; box-sizing: border-box; } .cta--center { text-align: center; } .cta--with-select { width: 217.6px; width: 28.3333333333vw; font-weight: normal; font-size: 28.8px; font-size: 3.75vw; height: 92.8px; height: 12.0833333333vw; padding: 9.6px; padding: 1.25vw; margin-left: 19.2px; margin-left: 2.5vw; } @media (max-width: 360px) { .cta--with-select { width: 90.6666666667px; width: 28.3333333333vw; } } @media (max-width: 360px) { .cta--with-select { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .cta--with-select { height: 38.6666666667px; height: 12.0833333333vw; } } @media (max-width: 360px) { .cta--with-select { padding: 4px; padding: 1.25vw; } } @media (max-width: 360px) { .cta--with-select { margin-left: 8px; margin-left: 2.5vw; } } .cta--download { width: 68px; width: 8.8541666667vw; height: 68px; height: 8.8541666667vw; padding: 0; background: url("/design/skinfood/mobile_skinfood/images/icon/icon_download.png") no-repeat !important; background-size: contain !important; font-size: 0 !important; border: none; } @media (max-width: 360px) { .cta--download { width: 28.3333333333px; width: 8.8541666667vw; } } @media (max-width: 360px) { .cta--download { height: 28.3333333333px; height: 8.8541666667vw; } } .ez-checkbox { width: 38.4px; width: 5vw; height: 38.4px; height: 5vw; background-size: 38.4px 38.4px; background-size: 5vw 5vw; margin: -2.4px 2.4px 2.4px 0px; margin: -0.3125vw 0.3125vw 0.3125vw 0vw; } @media (max-width: 360px) { .ez-checkbox { width: 16px; width: 5vw; } } @media (max-width: 360px) { .ez-checkbox { height: 16px; height: 5vw; } } @media (max-width: 320px) { .ez-checkbox { background-size: 16px 16px; background-size: 5vw 5vw; } } @media (max-width: 320px) { .ez-checkbox { margin: -1px 1px 1px 0px; margin: -0.3125vw 0.3125vw 0.3125vw 0vw; } } .designPopupBandMobile .designPopupClose { width: 13%; height: 100%; top: 0 !important; right: 0 !important; z-index: 1; } .designPopupBandMobile .designPopupClose img { display: none; } .top-banner { display: none; position: relative; } .top-banner__btn-close { position: absolute; top: 0; right: 0; width: 10%; height: 100%; background: url("/design/skinfood/mobile_skinfood/images/icon/icon_close.svg") no-repeat; background-position: center; background-size: 27.2px 27.2px; background-size: 3.5416666667vw 3.5416666667vw; font-size: 0; z-index: 11; } @media (max-width: 320px) { .top-banner__btn-close { background-size: 11.3333333333px 11.3333333333px; background-size: 3.5416666667vw 3.5416666667vw; } } .header { position: fixed !important; top: 0; width: 100%; z-index: 10; } .header__container { position: relative; vertical-align: middle; font-size: 0; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-bottom-style: solid; border-bottom-color: #ddd; } @media (max-width: 360px) { .header__container { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .header__logo { position: absolute; top: 0; /* left: 50%; */ left: 20%; width: 235.2px; width: 30.625vw; margin-left: -117.6px; margin-left: -15.3125vw; padding-top: 33.6px; padding-top: 4.375vw; display: inline-block; } @media (max-width: 360px) { .header__logo { width: 98px; width: 30.625vw; } } @media (max-width: 360px) { .header__logo { margin-left: -49px; margin-left: -15.3125vw; } } @media (max-width: 360px) { .header__logo { padding-top: 14px; padding-top: 4.375vw; } } .header__logo img { width: 100%; } .header__title { font-size: 33.6px; font-size: 4.375vw; font-weight: bold; } @media (max-width: 360px) { .header__title { font-size: 14px; font-size: 4.375vw; } } .header__button { display: inline-block; font-size: 0; background-size: contain; box-sizing: border-box; vertical-align: top; } .header__button--search { position: relative; width: 100%; /* padding: 40px 40px 32px 40px; padding: 5.2083333333vw 5.2083333333vw 4.1666666667vw 5.2083333333vw; } */ padding: 40px 128px 32px 40px; padding: 5.2083333333vw 14.5833333333vw 4.1666666667vw 5.2083333333vw; text-align: right; } @media (max-width: 320px) { .header__button--search { /* padding: 16.6666666667px 16.6666666667px 13.3333333333px 16.6666666667px; padding: 5.2083333333vw 5.2083333333vw 4.1666666667vw 5.2083333333vw; */ padding: 16.6666666667px 46.6666666667px 13.3333333333px 16.6666666667px; padding: 5.2083333333vw 14.5833333333vw 4.1666666667vw 5.2083333333vw; } } .header__button--cart { position: absolute; top: 0; right: 0; padding: 40px 48px 32px 31.2px; padding: 5.2083333333vw 6.25vw 4.1666666667vw 0vw; } @media (max-width: 320px) { .header__button--cart { padding: 16.6666666667px 20px 13.3333333333px 0px; padding: 5.2083333333vw 6.25vw 4.1666666667vw 0vw; } } .header__button--center { position: absolute; top: 0; right: 22%; padding-top: 31.2px; padding-top: 4.0625vw; } @media (max-width: 320px) { .header__button--center { padding-top: 13px; padding-top: 4.0625vw; } } .header__button--view { right: 128px; right: 16.6666666667vw; } @media (max-width: 360px) { .header__button--view { right: 53.3333333333px; right: 16.6666666667vw; } } .header__button-count { position: absolute; top: 0; top: -7.2px; top: -0.9375vw; right: -12px; right: -1.5625vw; width: 28.8px; width: 3.75vw; height: 28.8px; height: 3.75vw; font-size: 22.4px; font-size: 2.9166666667vw; color: #222; border-radius: 50%; background-color: #fdb812; text-align: center; } @media (max-width: 360px) { .header__button-count { top: -3px; top: -0.9375vw; } } @media (max-width: 360px) { .header__button-count { right: -5px; right: -1.5625vw; } } @media (max-width: 360px) { .header__button-count { width: 12px; width: 3.75vw; } } @media (max-width: 360px) { .header__button-count { height: 12px; height: 3.75vw; } } @media (max-width: 360px) { .header__button-count { font-size: 9.3333333333px; font-size: 2.9166666667vw; } } .header__anchor { display: inline-block; width: 46.4px; width: 6.0416666667vw; height: 48.8px; height: 6.3541666667vw; background-size: contain; background-repeat: no-repeat; } @media (max-width: 360px) { .header__anchor { width: 19.3333333333px; width: 6.0416666667vw; } } @media (max-width: 360px) { .header__anchor { height: 20.3333333333px; height: 6.3541666667vw; } } .header__anchor--search { vertical-align: top; background-image: url("/design/skinfood/mobile_skinfood/images/icon/icon_search.svg"); } .header__anchor--cart { position: relative; background-image: url("/design/skinfood/mobile_skinfood/images/icon/icon_cart.svg"); } .header__anchor--home { background-image: url("/design/skinfood/mobile_skinfood/images/icon/icon_home.svg"); margin-left: 52.8px; margin-left: 6.875vw; } @media (max-width: 360px) { .header__anchor--home { margin-left: 22px; margin-left: 6.875vw; } } .header__anchor--center { position: relative; background-image: url("/design/skinfood/mobile_skinfood/images/icon/skinfood_center_icon.png"); width: 61.6px; width: 8.0208333333vw; height: 61.6px; height: 8.0208333333vw; } @media (max-width: 360px) { .header__anchor--center { width: 25.6666666667px; width: 8.0208333333vw; } } @media (max-width: 360px) { .header__anchor--center { height: 25.6666666667px; height: 8.0208333333vw; } } .header__gnb { position: relative; z-index: 1; background-color: #fff; } .header__gnb-list { position: relative; height: 96px; height: 12.5vw; line-height: 96px; line-height: 12.5vw; padding: 0px 38.4px; padding: 0vw 5vw; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-bottom-style: solid; border-bottom-color: #ddd; white-space: nowrap; overflow-x: auto; overflow-y: hidden; background-color: #fff; z-index: 1; } .header__gnb-list::-webkit-scrollbar { display: none; } @media (max-width: 360px) { .header__gnb-list { height: 40px; height: 12.5vw; } } @media (max-width: 360px) { .header__gnb-list { line-height: 40px; line-height: 12.5vw; } } @media (max-width: 320px) { .header__gnb-list { padding: 0px 16px; padding: 0vw 5vw; } } @media (max-width: 360px) { .header__gnb-list { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .header__gnb-item { display: inline-block; font-size: 28.8px; font-size: 3.75vw; color: #999; margin-right: 40px; margin-right: 5.2083333333vw; } @media (max-width: 360px) { .header__gnb-item { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .header__gnb-item { margin-right: 16.6666666667px; margin-right: 5.2083333333vw; } } .header__gnb-item a { color: inherit; } .header__gnb-item--active { position: relative; color: #222; font-weight: bold; } .header__gnb-item--active:after { position: absolute; left: 0; bottom: -2.4px; bottom: -0.3125vw; width: 100%; height: 6.4px; height: 0.8333333333vw; background-color: #fdb812; content: ''; z-index: 1; } @media (max-width: 360px) { .header__gnb-item--active:after { bottom: -1px; bottom: -0.3125vw; } } @media (max-width: 360px) { .header__gnb-item--active:after { height: 2.6666666667px; height: 0.8333333333vw; } } .header__search { display: none; position: absolute; top: 0; left: 0; width: 100%; background-color: #fff; z-index: 9999; box-sizing: border-box; } .header__search form{ padding: 5.2083333333vw 4.2083333333vw 2.0833333333vw 4.2083333333vw;} @media (max-width: 320px) { .header__search { padding: 16.6666666667px 16.6666666667px 6.6666666667px 16.6666666667px; padding: 5.2083333333vw 5.2083333333vw 2.0833333333vw 5.2083333333vw; } } .header__search-container { position: relative; } .header__search-btn { position: absolute; border: none; background: none; background-size: contain; background-repeat: no-repeat; font-size: 0; z-index: 1; } .header__search-btn--submit { width: 46.4px; width: 6.0416666667vw; height: 48.8px; height: 6.3541666667vw; background-image: url("/design/skinfood/mobile_skinfood/images/icon/icon_search.svg"); } @media (max-width: 360px) { .header__search-btn--submit { width: 19.3333333333px; width: 6.0416666667vw; } } @media (max-width: 360px) { .header__search-btn--submit { height: 20.3333333333px; height: 6.3541666667vw; } } .header__search-btn--close { right: 0; width: 39.2px; width: 5.1041666667vw; height: 38.4px; height: 5vw; background-image: url("/design/skinfood/mobile_skinfood/images/icon/icon_close.svg"); } @media (max-width: 360px) { .header__search-btn--close { width: 16.3333333333px; width: 5.1041666667vw; } } @media (max-width: 360px) { .header__search-btn--close { height: 16px; height: 5vw; } } .header__search-input { position: relative; width: 100%; } .header__search input[type=text] { height: 56px; height: 7.2916666667vw; border-left: none; border-right: none; border-top: none; margin-top: 7.2px; margin-top: 0.9375vw; border-width: 4.8px; border-width: 0.625vw; padding-left: 68px; padding-left: 8.8541666667vw; padding-right: 60.8px; padding-right: 7.9166666667vw; padding-bottom: 26.4px; padding-bottom: 3.4375vw; font-size: 28.8px; font-size: 3.75vw; font-weight: bold; color: #222; border-bottom-style: solid; border-bottom-color: #fdb812; box-sizing: border-box; border-radius: 0; } @media (max-width: 360px) { .header__search input[type=text] { height: 23.3333333333px; height: 7.2916666667vw; } } @media (max-width: 360px) { .header__search input[type=text] { margin-top: 3px; margin-top: 0.9375vw; } } @media (max-width: 360px) { .header__search input[type=text] { border-width: 2px; border-width: 0.625vw; } } @media (max-width: 360px) { .header__search input[type=text] { padding-left: 28.3333333333px; padding-left: 8.8541666667vw; } } @media (max-width: 360px) { .header__search input[type=text] { padding-right: 25.3333333333px; padding-right: 7.9166666667vw; } } @media (max-width: 360px) { .header__search input[type=text] { padding-bottom: 11px; padding-bottom: 3.4375vw; } } @media (max-width: 360px) { .header__search input[type=text] { font-size: 12px; font-size: 3.75vw; } } .header__dockbar { display: none; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1; } .header__dockbar.active { display: block; } .header__dockbar-list { font-size: 0; background-color: #fff; } .header__dockbar-item { display: inline-block; width: 20%; border-width: 4.8px; border-width: 0.625vw; border-top-style: solid; border-top-color: #ddd; font-size: 0; color: #aaa; text-align: center; font-weight: bold; } @media (max-width: 360px) { .header__dockbar-item { border-width: 2px; border-width: 0.625vw; } } .header__dockbar-item--home { background: url("/design/skinfood/mobile_skinfood/images/icon/icon_home.png") center no-repeat; background-size: 40px 48px; background-size: 5.2083333333vw 6.25vw; background-position-y: 19.2px; background-position-y: 2.5vw; } @media (max-width: 320px) { .header__dockbar-item--home { background-size: 16.6666666667px 20px; background-size: 5.2083333333vw 6.25vw; } } @media (max-width: 360px) { .header__dockbar-item--home { background-position-y: 8px; background-position-y: 2.5vw; } } .header__dockbar-item--category { background: url("/design/skinfood/mobile_skinfood/images/icon/icon_category.png") center no-repeat; background-size: 46.4px 45.6px; background-size: 6.0416666667vw 5.9375vw; background-position-y: 20.8px; background-position-y: 2.7083333333vw; } @media (max-width: 320px) { .header__dockbar-item--category { background-size: 19.3333333333px 19px; background-size: 6.0416666667vw 5.9375vw; } } @media (max-width: 360px) { .header__dockbar-item--category { background-position-y: 8.6666666667px; background-position-y: 2.7083333333vw; } } .header__dockbar-item--mypage { background: url("/design/skinfood/mobile_skinfood/images/icon/icon_mypage.png") center no-repeat; background-size: 45.6px 47.2px; background-size: 5.9375vw 6.1458333333vw; background-position-y: 20px; background-position-y: 2.6041666667vw; } @media (max-width: 320px) { .header__dockbar-item--mypage { background-size: 19px 19.6666666667px; background-size: 5.9375vw 6.1458333333vw; } } @media (max-width: 360px) { .header__dockbar-item--mypage { background-position-y: 8.3333333333px; background-position-y: 2.6041666667vw; } } .header__dockbar-item--membership { background: url("/design/skinfood/mobile_skinfood/images/icon/icon_membership.png") center no-repeat; background-size: 47.2px 40px; background-size: 6.1458333333vw 5.2083333333vw; background-position-y: 23.2px; background-position-y: 3.0208333333vw; } @media (max-width: 320px) { .header__dockbar-item--membership { background-size: 19.6666666667px 16.6666666667px; background-size: 6.1458333333vw 5.2083333333vw; } } @media (max-width: 360px) { .header__dockbar-item--membership { background-position-y: 9.6666666667px; background-position-y: 3.0208333333vw; } } .header__dockbar-item--recently { background: url("/design/skinfood/mobile_skinfood/images/icon/icon_recently.png") center no-repeat; background-size: 46.4px 45.6px; background-size: 6.0416666667vw 5.9375vw; background-position-y: 20.8px; background-position-y: 2.7083333333vw; } @media (max-width: 320px) { .header__dockbar-item--recently { background-size: 19.3333333333px 19px; background-size: 6.0416666667vw 5.9375vw; } } @media (max-width: 360px) { .header__dockbar-item--recently { background-position-y: 8.6666666667px; background-position-y: 2.7083333333vw; } } .header__dockbar-item--active { border-color: #fdb812; } .header__dockbar-item--active.header__dockbar-item--home { background-image: url("/design/skinfood/mobile_skinfood/images/icon/icon_home_active.png"); } .header__dockbar-item--active.header__dockbar-item--mypage { background-image: url("/design/skinfood/mobile_skinfood/images/icon/icon_mypage_active.png"); } .header__dockbar-item--active.header__dockbar-item--membership { background-image: url("/design/skinfood/mobile_skinfood/images/icon/icon_membership_active.png"); } .header__dockbar-item--active.header__dockbar-item--recently { background-image: url("/design/skinfood/mobile_skinfood/images/icon/icon_recently_active.png"); } .header__dockbar-item--active a { color: #222; } .header__dockbar-item a { display: block; padding-top: 85.6px; padding-top: 11.1458333333vw; padding-bottom: 14.4px; padding-bottom: 1.875vw; font-size: 24px; font-size: 3.125vw; } @media (max-width: 360px) { .header__dockbar-item a { padding-top: 35.6666666667px; padding-top: 11.1458333333vw; } } @media (max-width: 360px) { .header__dockbar-item a { padding-bottom: 6px; padding-bottom: 1.875vw; } } @media (max-width: 360px) { .header__dockbar-item a { font-size: 10px; font-size: 3.125vw; } } .header-icon__container { position: relative; } .layout-side { position: relative; width: 640px; width: 83.3333333333vw; background-color: #fff; z-index: 11; } @media (max-width: 360px) { .layout-side { width: 266.6666666667px; width: 83.3333333333vw; } } .layout-side__inner { display: flex; flex-direction: column; height: 100%; } .layout-side__logo { width: 206.4px; width: 26.875vw; height: auto; margin: 0 auto; } @media (max-width: 360px) { .layout-side__logo { width: 86px; width: 26.875vw; } } .layout-side__logo img { width: 100%; height: auto; } .layout-side__top { padding: 48px 38.4px; padding: 6.25vw 5vw; background: #f9f9f9; background: url("/design/skinfood/mobile_skinfood/images/common/bg_lnb.svg") no-repeat; background-size: contain; } @media (max-width: 320px) { .layout-side__top { padding: 20px 16px; padding: 6.25vw 5vw; } } .layout-side__login-container { position: relative; margin-top: 49.6px; margin-top: 6.4583333333vw; } @media (max-width: 360px) { .layout-side__login-container { margin-top: 20.6666666667px; margin-top: 6.4583333333vw; } } .layout-side__login-desc { font-size: 28.8px; font-size: 3.75vw; color: #222; line-height: 38.4px; line-height: 5vw; } @media (max-width: 360px) { .layout-side__login-desc { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .layout-side__login-desc { line-height: 16px; line-height: 5vw; } } .layout-side__login-btn { font-weight: bold; } .layout-side__login-btn--underline { position: relative; } .layout-side__login-btn--underline:after { position: absolute; bottom: 0; left: 0; display: inline-block; width: 100%; height: 2.4px; height: 0.3125vw; background-color: #000; content: ''; } @media (max-width: 360px) { .layout-side__login-btn--underline:after { height: 1px; height: 0.3125vw; } } .layout-side__login-btn--gray { color: #999; } .layout-side__logout-btn { position: absolute; top: 0; right: 0; } .layout-side__logout-btn input { border: none; background: none; font-size: 28.8px; font-size: 3.75vw; color: #999; text-decoration: underline; font-weight: bold; } @media (max-width: 360px) { .layout-side__logout-btn input { font-size: 12px; font-size: 3.75vw; } } .layout-side__btn--close { display: none; position: fixed; width: 39.2px; width: 5.1041666667vw; height: 38.4px; height: 5vw; top: 48px; top: 6.25vw; right: 166.4px; right: 21.6666666667vw; background: url("/design/skinfood/mobile_skinfood/images/icon/icon_close.svg") no-repeat; font-size: 0; text-indent: -9999; z-index: 999; background-size: contain; } @media (max-width: 360px) { .layout-side__btn--close { width: 16.3333333333px; width: 5.1041666667vw; } } @media (max-width: 360px) { .layout-side__btn--close { height: 16px; height: 5vw; } } @media (max-width: 360px) { .layout-side__btn--close { top: 20px; top: 6.25vw; } } @media (max-width: 360px) { .layout-side__btn--close { right: 69.3333333333px; right: 21.6666666667vw; } } .layout-side__bottom { display: inline-block; width: 100%; flex-grow: 1; overflow-y: auto; padding-top: 64px; padding-top: 8.3333333333vw; } @media (max-width: 360px) { .layout-side__bottom { padding-top: 26.6666666667px; padding-top: 8.3333333333vw; } } .layout-side__bottom--2depth, .layout-side__bottom--3depth { padding-top: 0; } .layout-side__bottom--2depth .layout-side__title, .layout-side__bottom--3depth .layout-side__title { line-height: 1; top: 51.2px; top: 6.6666666667vw; font-size: 33.6px; font-size: 4.375vw; } @media (max-width: 360px) { .layout-side__bottom--2depth .layout-side__title, .layout-side__bottom--3depth .layout-side__title { top: 21.3333333333px; top: 6.6666666667vw; } } @media (max-width: 360px) { .layout-side__bottom--2depth .layout-side__title, .layout-side__bottom--3depth .layout-side__title { font-size: 14px; font-size: 4.375vw; } } .layout-side__bottom--2depth .layout-side__list, .layout-side__bottom--3depth .layout-side__list { margin-top: 146.4px; margin-top: 19.0625vw; } @media (max-width: 360px) { .layout-side__bottom--2depth .layout-side__list, .layout-side__bottom--3depth .layout-side__list { margin-top: 61px; margin-top: 19.0625vw; } } .layout-side__item { display: block; margin-top: 60px; margin-top: 7.8125vw; font-size: 38.4px; font-size: 5vw; font-weight: bold; line-height: 1; } @media (max-width: 360px) { .layout-side__item { margin-top: 25px; margin-top: 7.8125vw; } } @media (max-width: 360px) { .layout-side__item { font-size: 16px; font-size: 5vw; } } .layout-side__item--has-child { background: url("/design/skinfood/mobile_skinfood/images/icon/icon_arrow.svg") no-repeat; background-size: 16.8px 26.4px; background-size: 2.1875vw 3.4375vw; background-position: right center; } @media (max-width: 320px) { .layout-side__item--has-child { background-size: 7px 11px; background-size: 2.1875vw 3.4375vw; } } .layout-side__item:first-child { margin-top: 0; } .layout-side__item a { display: block; } .footer { position: relative; padding: 160px 38.4px 240px; padding: 20.8333333333vw 5vw 31.25vw; background: url("/design/skinfood/mobile_skinfood/images/common/bg_footer.svg") no-repeat; background-size: cover; } @media (max-width: 320px) { .footer { padding: 66.6666666667px 16px 100px; padding: 20.8333333333vw 5vw 31.25vw; } } .footer__util ~ .footer__util { margin-top: 64px; margin-top: 8.3333333333vw; } @media (max-width: 360px) { .footer__util ~ .footer__util { margin-top: 26.6666666667px; margin-top: 8.3333333333vw; } } .footer__util-list ~ .footer__util-list { margin-top: 30.4px; margin-top: 3.9583333333vw; } @media (max-width: 360px) { .footer__util-list ~ .footer__util-list { margin-top: 12.6666666667px; margin-top: 3.9583333333vw; } } .footer__util-list--small ~ .footer__util-list--small { margin-top: 19.2px; margin-top: 2.5vw; } @media (max-width: 360px) { .footer__util-list--small ~ .footer__util-list--small { margin-top: 8px; margin-top: 2.5vw; } } .footer__util-item { display: inline-block; margin-left: 14.4px; margin-left: 1.875vw; font-size: 28.8px; font-size: 3.75vw; line-height: 1; letter-spacing: -0.1vw; } @media (max-width: 360px) { .footer__util-item { margin-left: 6px; margin-left: 1.875vw; } } @media (max-width: 360px) { .footer__util-item { font-size: 12px; font-size: 3.75vw; } } .footer__util-item:first-child { margin-left: 0; } .footer__util-item--bar:after { display: inline-block; width: 2.4px; width: 0.3125vw; height: 26.4px; height: 3.4375vw; margin-left: 12.8px; margin-left: 1.6666666667vw; background-color: #999; content: ''; vertical-align: bottom; } @media (max-width: 360px) { .footer__util-item--bar:after { width: 1px; width: 0.3125vw; } } @media (max-width: 360px) { .footer__util-item--bar:after { height: 11px; height: 3.4375vw; } } @media (max-width: 360px) { .footer__util-item--bar:after { margin-left: 5.3333333333px; margin-left: 1.6666666667vw; } } .footer__util-item a { color: #fff; } .footer__util-item--light a { color: #ddd; } .footer__call { margin-top: 60px; margin-top: 7.8125vw; color: #ddd; } @media (max-width: 360px) { .footer__call { margin-top: 25px; margin-top: 7.8125vw; } } .footer__call-title { font-size: 31.2px; font-size: 4.0625vw; } @media (max-width: 360px) { .footer__call-title { font-size: 13px; font-size: 4.0625vw; } } .footer__call-number { margin-top: 21.6px; margin-top: 2.8125vw; font-size: 55.2px; font-size: 7.1875vw; text-decoration: underline; line-height: 1; } @media (max-width: 360px) { .footer__call-number { margin-top: 9px; margin-top: 2.8125vw; } } @media (max-width: 360px) { .footer__call-number { font-size: 23px; font-size: 7.1875vw; } } .footer__call-list { margin-top: 28px; margin-top: 3.6458333333vw; font-size: 28.8px; font-size: 3.75vw; line-height: 1; } @media (max-width: 360px) { .footer__call-list { margin-top: 11.6666666667px; margin-top: 3.6458333333vw; } } @media (max-width: 360px) { .footer__call-list { font-size: 12px; font-size: 3.75vw; } } .footer__call-number { color: #ddd; } .footer__call-item { display: inline; } .footer__call-item ~ .footer__call-item:before { display: inline-block; width: 2.4px; width: 0.3125vw; height: 26.4px; height: 3.4375vw; margin-left: 16px; margin-left: 2.0833333333vw; margin-right: 16px; margin-right: 2.0833333333vw; background-color: #999; content: ''; vertical-align: top; } @media (max-width: 360px) { .footer__call-item ~ .footer__call-item:before { width: 1px; width: 0.3125vw; } } @media (max-width: 360px) { .footer__call-item ~ .footer__call-item:before { height: 11px; height: 3.4375vw; } } @media (max-width: 360px) { .footer__call-item ~ .footer__call-item:before { margin-left: 6.6666666667px; margin-left: 2.0833333333vw; } } @media (max-width: 360px) { .footer__call-item ~ .footer__call-item:before { margin-right: 6.6666666667px; margin-right: 2.0833333333vw; } } .footer__sns-list { margin-top: 64px; margin-top: 8.3333333333vw; font-size: 0; } @media (max-width: 360px) { .footer__sns-list { margin-top: 26.6666666667px; margin-top: 8.3333333333vw; } } .footer__sns-item { display: inline-block; width: 92px; width: 11.9791666667vw; height: 92px; height: 11.9791666667vw; margin-left: 48.8px; margin-left: 6.3541666667vw; border-radius: 50%; font-size: 0; text-indent: -9999; background-size: 92px 92px; background-size: 11.9791666667vw 11.9791666667vw; } @media (max-width: 360px) { .footer__sns-item { width: 38.3333333333px; width: 11.9791666667vw; } } @media (max-width: 360px) { .footer__sns-item { height: 38.3333333333px; height: 11.9791666667vw; } } @media (max-width: 360px) { .footer__sns-item { margin-left: 20.3333333333px; margin-left: 6.3541666667vw; } } @media (max-width: 320px) { .footer__sns-item { background-size: 38.3333333333px 38.3333333333px; background-size: 11.9791666667vw 11.9791666667vw; } } .footer__sns-item a { display: inline-block; width: 100%; height: 100%; } .footer__sns-item:first-child { margin-left: 12px; margin-left: 1.5625vw; } @media (max-width: 360px) { .footer__sns-item:first-child { margin-left: 5px; margin-left: 1.5625vw; } } .footer__sns-item--youtube { background-image: url(/design/skinfood/mobile_skinfood/images/icon/icon_youtube.svg); } .footer__sns-item--facebook { background-image: url(/design/skinfood/mobile_skinfood/images/icon/icon_facebook.svg); } .footer__sns-item--instagram { background-image: url(/design/skinfood/mobile_skinfood/images/icon/icon_instagram.svg); } .small-select { position: relative; display: inline-block; margin-left: 32px; margin-left: 4.1666666667vw; } @media (max-width: 360px) { .small-select { margin-left: 13.3333333333px; margin-left: 4.1666666667vw; } } .small-select__btn { display: inline-block; width: 280px; width: 36.4583333333vw; height: 60px; height: 7.8125vw; padding-left: 22.4px; padding-left: 2.9166666667vw; line-height: 60px; line-height: 7.8125vw; box-sizing: border-box; font-size: 28.8px; font-size: 3.75vw; border-width: 2.4px; border-width: 0.3125vw; border-style: solid; border-color: #999; text-align: left; color: #ddd; letter-spacing: -0.288px; letter-spacing: -0.0375vw; } @media (max-width: 360px) { .small-select__btn { width: 116.6666666667px; width: 36.4583333333vw; } } @media (max-width: 360px) { .small-select__btn { height: 25px; height: 7.8125vw; } } @media (max-width: 360px) { .small-select__btn { padding-left: 9.3333333333px; padding-left: 2.9166666667vw; } } @media (max-width: 360px) { .small-select__btn { line-height: 25px; line-height: 7.8125vw; } } @media (max-width: 360px) { .small-select__btn { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .small-select__btn { border-width: 1px; border-width: 0.3125vw; } } @media (max-width: 360px) { .small-select__btn { letter-spacing: -0.12px; letter-spacing: -0.0375vw; } } .small-select__btn:before { position: absolute; right: 22.4px; right: 2.9166666667vw; top: 0; bottom: 0; margin: auto; display: inline-block; width: 20px; width: 2.6041666667vw; height: 18.4px; height: 2.3958333333vw; background: url("/design/skinfood/mobile_skinfood/images/icon/icon_select_arrow_gray.svg") no-repeat; background-size: contain; content: ''; transition: all 0.5s; } @media (max-width: 360px) { .small-select__btn:before { right: 9.3333333333px; right: 2.9166666667vw; } } @media (max-width: 360px) { .small-select__btn:before { width: 8.3333333333px; width: 2.6041666667vw; } } @media (max-width: 360px) { .small-select__btn:before { height: 7.6666666667px; height: 2.3958333333vw; } } .small-select__btn--active:before { transform: rotate(180deg); } .small-select__btn--active + .small-select__list { display: block; } .small-select__list { display: none; position: absolute; top: 52px; top: 6.7708333333vw; left: 0; width: 100%; padding: 24px; padding: 3.125vw; box-sizing: border-box; background-color: #3d3635; border-width: 2.4px; border-width: 0.3125vw; border-color: #999; border-style: solid; } @media (max-width: 360px) { .small-select__list { top: 21.6666666667px; top: 6.7708333333vw; } } @media (max-width: 360px) { .small-select__list { padding: 10px; padding: 3.125vw; } } @media (max-width: 360px) { .small-select__list { border-width: 1px; border-width: 0.3125vw; } } .small-select__anchor { width: 100%; } .small-select__anchor + .small-select__anchor { padding-top: 20.8px; padding-top: 2.7083333333vw; } @media (max-width: 360px) { .small-select__anchor + .small-select__anchor { padding-top: 8.6666666667px; padding-top: 2.7083333333vw; } } .small-select__anchor a { color: #ddd; font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .small-select__anchor a { font-size: 12px; font-size: 3.75vw; } } .floating { display: none; position: fixed; right: 39.2px; right: 5.1041666667vw; bottom: 160px; bottom: 20.8333333333vw; z-index: 1; } @media (max-width: 360px) { .floating { right: 16.3333333333px; right: 5.1041666667vw; } } @media (max-width: 360px) { .floating { bottom: 66.6666666667px; bottom: 20.8333333333vw; } } .floating-button { position: relative; display: inline-block; width: 88.8px; width: 11.5625vw; height: 86.4px; height: 11.25vw; padding-top: 24px; padding-top: 3.125vw; border: none; font-size: 19.2px; font-size: 2.5vw; color: #222; text-align: center; background: url("/design/skinfood/mobile_skinfood/images/common/button_floating.svg") no-repeat; background-size: contain; } @media (max-width: 360px) { .floating-button { width: 37px; width: 11.5625vw; } } @media (max-width: 360px) { .floating-button { height: 36px; height: 11.25vw; } } @media (max-width: 360px) { .floating-button { padding-top: 10px; padding-top: 3.125vw; } } @media (max-width: 360px) { .floating-button { font-size: 8px; font-size: 2.5vw; } } .floating-button:before { position: absolute; top: 21.6px; top: 2.8125vw; left: 0; right: 0; margin: auto; display: inline-block; width: 27.2px; width: 3.5416666667vw; height: 14.4px; height: 1.875vw; background: url("/design/skinfood/mobile_skinfood/images/icon/icon_arrow_top.svg") no-repeat; background-size: contain; content: ''; } @media (max-width: 360px) { .floating-button:before { top: 9px; top: 2.8125vw; } } @media (max-width: 360px) { .floating-button:before { width: 11.3333333333px; width: 3.5416666667vw; } } @media (max-width: 360px) { .floating-button:before { height: 6px; height: 1.875vw; } } .input__title { margin-bottom: 32px; margin-bottom: 4.1666666667vw; font-size: 28.8px; font-size: 3.75vw; line-height: 1; font-weight: bold; } @media (max-width: 360px) { .input__title { margin-bottom: 13.3333333333px; margin-bottom: 4.1666666667vw; } } @media (max-width: 360px) { .input__title { font-size: 12px; font-size: 3.75vw; } } .input__label { font-size: 28.8px; font-size: 3.75vw; color: #222222; } @media (max-width: 360px) { .input__label { font-size: 12px; font-size: 3.75vw; } } .input__container { position: relative; font-size: 0; width: 691.2px; width: 90vw; margin-bottom: 32px; margin-bottom: 4.1666666667vw; } @media (max-width: 360px) { .input__container { width: 288px; width: 90vw; } } @media (max-width: 360px) { .input__container { margin-bottom: 13.3333333333px; margin-bottom: 4.1666666667vw; } } .input__text { width: 100%; height: auto !important; border-radius: 0; border: 7.2px; border: 0.9375vw; border-color: #dddddd; padding: 32.8px 39.2px; padding: 4.2708333333vw 5.1041666667vw; color: #888888; font-size: 28.8px; font-size: 3.75vw; box-sizing: border-box; } @media (max-width: 360px) { .input__text { border: 3px; border: 0.9375vw; } } @media (max-width: 320px) { .input__text { padding: 13.6666666667px 16.3333333333px; padding: 4.2708333333vw 5.1041666667vw; } } @media (max-width: 360px) { .input__text { font-size: 12px; font-size: 3.75vw; } } .input__textarea { color: #888888; width: 100%; min-height: 640px; min-height: 83.3333333333vw; border: 2.4px auto; border: 0.3125vw auto; font-size: 28.8px; font-size: 3.75vw; padding: 31.2px 40.8px; padding: 4.0625vw 5.3125vw; box-sizing: border-box; resize: none; } @media (max-width: 360px) { .input__textarea { min-height: 266.6666666667px; min-height: 83.3333333333vw; } } @media (max-width: 320px) { .input__textarea { border: 1px auto; border: 0.3125vw auto; } } @media (max-width: 360px) { .input__textarea { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 320px) { .input__textarea { padding: 13px 17px; padding: 4.0625vw 5.3125vw; } } .input__textarea--bottom { position: absolute; left: 32px; left: 4.1666666667vw; bottom: 0; width: 627.2px; width: 81.6666666667vw; height: 88px; height: 11.4583333333vw; line-height: 88px; line-height: 11.4583333333vw; border: 0; border-top: 2.4px; border-top: 0.3125vw; border-style: solid; border-color: #eeeeee; font-size: 26.4px; font-size: 3.4375vw; color: #888888; letter-spacing: -.33px; } @media (max-width: 360px) { .input__textarea--bottom { left: 13.3333333333px; left: 4.1666666667vw; } } @media (max-width: 360px) { .input__textarea--bottom { width: 261.3333333333px; width: 81.6666666667vw; } } @media (max-width: 360px) { .input__textarea--bottom { height: 36.6666666667px; height: 11.4583333333vw; } } @media (max-width: 360px) { .input__textarea--bottom { line-height: 36.6666666667px; line-height: 11.4583333333vw; } } @media (max-width: 360px) { .input__textarea--bottom { border-top: 1px; border-top: 0.3125vw; } } @media (max-width: 360px) { .input__textarea--bottom { font-size: 11px; font-size: 3.4375vw; } } .input__button { width: 100%; box-sizing: border-box; background-color: transparent; border: 0.3125vw solid #000022; font-weight: bold; height: 92.8px; height: 12.0833333333vw; padding: 0px 40.8px; padding: 0vw 5.3125vw; font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .input__button { height: 38.6666666667px; height: 12.0833333333vw; } } @media (max-width: 320px) { .input__button { padding: 0px 17px; padding: 0vw 5.3125vw; } } @media (max-width: 360px) { .input__button { font-size: 12px; font-size: 3.75vw; } } .input__button--add:before { content: ""; display: inline-block; background: url(/design/skinfood/mobile_skinfood/images/icon/icon_add.svg) top/cover no-repeat; width: 27.2px; width: 3.5416666667vw; height: 28px; height: 3.6458333333vw; margin-right: 16px; margin-right: 2.0833333333vw; } @media (max-width: 360px) { .input__button--add:before { width: 11.3333333333px; width: 3.5416666667vw; } } @media (max-width: 360px) { .input__button--add:before { height: 11.6666666667px; height: 3.6458333333vw; } } @media (max-width: 360px) { .input__button--add:before { margin-right: 6.6666666667px; margin-right: 2.0833333333vw; } } .input__button--margin { margin-top: 32px; margin-top: 4.1666666667vw; } @media (max-width: 360px) { .input__button--margin { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .input__filetext { color: #888888; display: inline-block; width: 80%; font-size: 28.8px; font-size: 3.75vw; margin-bottom: 27.2px; margin-bottom: 3.5416666667vw; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } @media (max-width: 360px) { .input__filetext { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .input__filetext { margin-bottom: 11.3333333333px; margin-bottom: 3.5416666667vw; } } .input__fileremove { background: transparent; background: url(/design/skinfood/mobile_skinfood/images/icon/icon_file_remove.svg) top/cover no-repeat; width: 21.6px; width: 2.8125vw; height: 21.6px; height: 2.8125vw; margin-left: 24.8px; margin-left: 3.2291666667vw; vertical-align: top; font-size: 0; } @media (max-width: 360px) { .input__fileremove { width: 9px; width: 2.8125vw; } } @media (max-width: 360px) { .input__fileremove { height: 9px; height: 2.8125vw; } } @media (max-width: 360px) { .input__fileremove { margin-left: 10.3333333333px; margin-left: 3.2291666667vw; } } .single-desc-wrap { display: block; width: 583.2px; width: 75.9375vw; margin-left: 56px; margin-left: 7.2916666667vw; } @media (max-width: 360px) { .single-desc-wrap { width: 243px; width: 75.9375vw; } } @media (max-width: 360px) { .single-desc-wrap { margin-left: 23.3333333333px; margin-left: 7.2916666667vw; } } .single-desc__list { display: block; line-height: 1.527; width: 100%; } .single-desc__list-item { position: relative; font-size: 28.8px; font-size: 3.75vw; color: #888888; letter-spacing: -.36px; } @media (max-width: 360px) { .single-desc__list-item { font-size: 12px; font-size: 3.75vw; } } .single-desc__list-item:after { position: absolute; top: 18.4px; top: 2.3958333333vw; left: -12.8px; left: -1.6666666667vw; content: ''; width: 4.8px; width: 0.625vw; height: 4.8px; height: 0.625vw; background-color: #3d2323; border-radius: 100%; } @media (max-width: 360px) { .single-desc__list-item:after { top: 7.6666666667px; top: 2.3958333333vw; } } @media (max-width: 360px) { .single-desc__list-item:after { left: -5.3333333333px; left: -1.6666666667vw; } } @media (max-width: 360px) { .single-desc__list-item:after { width: 2px; width: 0.625vw; } } @media (max-width: 360px) { .single-desc__list-item:after { height: 2px; height: 0.625vw; } } .input-content { position: relative; } .input-content + .input-content { margin-top: 32px; margin-top: 4.1666666667vw; } @media (max-width: 360px) { .input-content + .input-content { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .input-content--phone input + input { margin-left: 19.2px; margin-left: 2.5vw; } @media (max-width: 360px) { .input-content--phone input + input { margin-left: 8px; margin-left: 2.5vw; } } .input-content--textarea { font-size: 0; } .input-content__cnt { position: absolute; left: 0; bottom: 0; width: 100%; height: 88px; height: 11.4583333333vw; line-height: 88px; line-height: 11.4583333333vw; padding: 0px 32px; padding: 0vw 4.1666666667vw; box-sizing: border-box; } @media (max-width: 360px) { .input-content__cnt { height: 36.6666666667px; height: 11.4583333333vw; } } @media (max-width: 360px) { .input-content__cnt { line-height: 36.6666666667px; line-height: 11.4583333333vw; } } @media (max-width: 320px) { .input-content__cnt { padding: 0px 13.3333333333px; padding: 0vw 4.1666666667vw; } } .input-content__cnt-txt { font-size: 26.4px; font-size: 3.4375vw; color: #888; border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-color: #eee; border-top-style: solid; font-weight: normal; } @media (max-width: 360px) { .input-content__cnt-txt { font-size: 11px; font-size: 3.4375vw; } } @media (max-width: 360px) { .input-content__cnt-txt { border-top-width: 1px; border-top-width: 0.3125vw; } } .input-content__label { position: absolute; left: 40.8px; left: 5.3125vw; top: 58.4px; top: 7.6041666667vw; color: #888; font-size: 28.8px; font-size: 3.75vw; z-index: 1; transition: all 0.4s; font-weight: normal; } @media (max-width: 360px) { .input-content__label { left: 17px; left: 5.3125vw; } } @media (max-width: 360px) { .input-content__label { top: 24.3333333333px; top: 7.6041666667vw; } } @media (max-width: 360px) { .input-content__label { font-size: 12px; font-size: 3.75vw; } } .input-content__label--active { left: 36.8px; left: 4.7916666667vw; top: 36.8px; top: 4.7916666667vw; font-size: 21.6px; font-size: 2.8125vw; } @media (max-width: 360px) { .input-content__label--active { left: 15.3333333333px; left: 4.7916666667vw; } } @media (max-width: 360px) { .input-content__label--active { top: 15.3333333333px; top: 4.7916666667vw; } } @media (max-width: 360px) { .input-content__label--active { font-size: 9px; font-size: 2.8125vw; } } .input-content--margin-bottom { margin-top: 0 !important; margin-bottom: 32px; margin-bottom: 4.1666666667vw; } @media (max-width: 360px) { .input-content--margin-bottom { margin-bottom: 13.3333333333px; margin-bottom: 4.1666666667vw; } } .input-content--margin-small { margin-top: 0 !important; margin-bottom: 16px; margin-bottom: 2.0833333333vw; } @media (max-width: 360px) { .input-content--margin-small { margin-bottom: 6.6666666667px; margin-bottom: 2.0833333333vw; } } .input-content input, .input-content .input-shape { width: 100%; height: 144px; height: 18.75vw; padding: 73.6px 37.6px 44.8px; padding: 9.5833333333vw 4.8958333333vw 5.8333333333vw; border-width: 2.4px; border-width: 0.3125vw; border-color: #ddd; border-style: solid; box-sizing: border-box; font-weight: bold; font-size: 28.8px; font-size: 3.75vw; color: #222; letter-spacing: -0.288px; letter-spacing: -0.0375vw; } @media (max-width: 360px) { .input-content input, .input-content .input-shape { height: 60px; height: 18.75vw; } } @media (max-width: 320px) { .input-content input, .input-content .input-shape { padding: 30.6666666667px 15.6666666667px 18.6666666667px; padding: 9.5833333333vw 4.8958333333vw 5.8333333333vw; } } @media (max-width: 360px) { .input-content input, .input-content .input-shape { border-width: 1px; border-width: 0.3125vw; } } @media (max-width: 360px) { .input-content input, .input-content .input-shape { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .input-content input, .input-content .input-shape { letter-spacing: -0.12px; letter-spacing: -0.0375vw; } } .input-content input:focus, .input-content .input-shape:focus { border-color: #222; } .input-content textarea { width: 100%; height: 640px; height: 83.3333333333vw; padding: 73.6px 37.6px 44.8px; padding: 9.5833333333vw 4.8958333333vw 5.8333333333vw; border-width: 2.4px; border-width: 0.3125vw; border-color: #ddd; border-style: solid; box-sizing: border-box; font-size: 28.8px; font-size: 3.75vw; color: #222; letter-spacing: -0.288px; letter-spacing: -0.0375vw; } @media (max-width: 360px) { .input-content textarea { height: 266.6666666667px; height: 83.3333333333vw; } } @media (max-width: 320px) { .input-content textarea { padding: 30.6666666667px 15.6666666667px 18.6666666667px; padding: 9.5833333333vw 4.8958333333vw 5.8333333333vw; } } @media (max-width: 360px) { .input-content textarea { border-width: 1px; border-width: 0.3125vw; } } @media (max-width: 360px) { .input-content textarea { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .input-content textarea { letter-spacing: -0.12px; letter-spacing: -0.0375vw; } } .input-content textarea:focus { border-color: #222; } .input-content--disabled input, .input-content--disabled .input-shape { background-color: #eee; } .input-content--placeholder input { padding: 48px 37.6px 44.8px; padding: 6.25vw 4.8958333333vw 5.8333333333vw; } @media (max-width: 320px) { .input-content--placeholder input { padding: 20px 15.6666666667px 18.6666666667px; padding: 6.25vw 4.8958333333vw 5.8333333333vw; } } .input-content--placeholder input::placeholder { font-size: 28.8px; font-size: 3.75vw; color: #888; font-weight: normal; } @media (max-width: 360px) { .input-content--placeholder input::placeholder { font-size: 12px; font-size: 3.75vw; } } .input-content--placeholder input::-webkit-input-placeholder { font-size: 28.8px; font-size: 3.75vw; color: #888; font-weight: normal; } @media (max-width: 360px) { .input-content--placeholder input::-webkit-input-placeholder { font-size: 12px; font-size: 3.75vw; } } .input-content button { width: 100%; height: 144px; height: 18.75vw; padding: 73.6px 37.6px 44.8px; padding: 9.5833333333vw 4.8958333333vw 5.8333333333vw; border-width: 2.4px; border-width: 0.3125vw; border-color: #ddd; box-sizing: border-box; font-weight: bold; font-size: 28.8px; font-size: 3.75vw; color: #222; letter-spacing: -0.288px; letter-spacing: -0.0375vw; } @media (max-width: 360px) { .input-content button { height: 60px; height: 18.75vw; } } @media (max-width: 320px) { .input-content button { padding: 30.6666666667px 15.6666666667px 18.6666666667px; padding: 9.5833333333vw 4.8958333333vw 5.8333333333vw; } } @media (max-width: 360px) { .input-content button { border-width: 1px; border-width: 0.3125vw; } } @media (max-width: 360px) { .input-content button { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .input-content button { letter-spacing: -0.12px; letter-spacing: -0.0375vw; } } .input-content button:focus { border-color: #222; } .default-table--gray { max-width: 100%; overflow: hidden; border-width: 2.4px; border-width: 0.3125vw; border-color: #eee; border-style: solid; margin-top: 32px; margin-top: 4.1666666667vw; border-collapse: collapse; } @media (max-width: 360px) { .default-table--gray { border-width: 1px; border-width: 0.3125vw; } } @media (max-width: 360px) { .default-table--gray { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .default-table--gray tr:first-child th { padding-top: 6.25vw !important; } .default-table--gray tr:first-child td { padding-top: 6.25vw !important; } .default-table--gray th { display: table-cell !important; width: auto !important; color: #222 !important; padding: 6.25vw 3.125vw !important; font-size: 26.4px; font-size: 3.4375vw; vertical-align: middle !important; font-weight: bold !important; border-width: 2.4px; border-width: 0.3125vw; border-color: #eee; border-style: solid; border-collapse: collapse; word-break: break-all; } @media (max-width: 360px) { .default-table--gray th { font-size: 11px; font-size: 3.4375vw; } } @media (max-width: 360px) { .default-table--gray th { border-width: 1px; border-width: 0.3125vw; } } .default-table--gray th:first-child { padding-top: 6.25vw !important; } .default-table--gray td { display: table-cell !important; width: auto !important; font-size: 26.4px; font-size: 3.4375vw; font-weight: normal !important; border-width: 2.4px; border-width: 0.3125vw; border-color: #eee; border-style: solid; border-collapse: collapse; vertical-align: middle !important; padding: 6.25vw 3.125vw !important; word-break: break-all; } @media (max-width: 360px) { .default-table--gray td { font-size: 11px; font-size: 3.4375vw; } } @media (max-width: 360px) { .default-table--gray td { border-width: 1px; border-width: 0.3125vw; } } .default-table--gray td:first-child { padding-top: 6.25vw !important; } .default-desc { margin-top: 46.4px; margin-top: 6.0416666667vw; font-size: 28.8px; font-size: 3.75vw; line-height: 44.8px; line-height: 5.8333333333vw; color: #222; } @media (max-width: 360px) { .default-desc { margin-top: 19.3333333333px; margin-top: 6.0416666667vw; } } @media (max-width: 360px) { .default-desc { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .default-desc { line-height: 18.6666666667px; line-height: 5.8333333333vw; } } .default-desc--gray { margin-top: 31.2px; margin-top: 4.0625vw; margin-bottom: 80px; margin-bottom: 10.4166666667vw; line-height: 1; color: #888; } @media (max-width: 360px) { .default-desc--gray { margin-top: 13px; margin-top: 4.0625vw; } } @media (max-width: 360px) { .default-desc--gray { margin-bottom: 33.3333333333px; margin-bottom: 10.4166666667vw; } } .default-desc--list { word-break: keep-all; } .default__tab { padding: 104px 38.4px 0px; padding: 13.5416666667vw 5vw 0vw; } @media (max-width: 320px) { .default__tab { padding: 43.3333333333px 16px 0px; padding: 13.5416666667vw 5vw 0vw; } } .default__tab--small { padding-top: 76px; padding-top: 9.8958333333vw; } @media (max-width: 360px) { .default__tab--small { padding-top: 31.6666666667px; padding-top: 9.8958333333vw; } } .default__tab-list { padding-bottom: 48px; padding-bottom: 6.25vw; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-bottom-style: solid; border-bottom-color: #ddd; font-size: 0; } @media (max-width: 360px) { .default__tab-list { padding-bottom: 20px; padding-bottom: 6.25vw; } } @media (max-width: 360px) { .default__tab-list { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .default__tab-list--border-none { border: none; } .default__tab-list--padding-none { padding-bottom: 0; } .default__tab-list--light-gray { border-bottom-color: #eee; } .default__tab-item { position: relative; display: inline-block; width: 50%; text-align: center; font-size: 33.6px; font-size: 4.375vw; color: #888; } @media (max-width: 360px) { .default__tab-item { font-size: 14px; font-size: 4.375vw; } } .default__tab-item + .default__tab-item:before { position: absolute; top: 0; bottom: 0; left: 0; width: 2.4px; width: 0.3125vw; height: 24px; height: 3.125vw; margin: auto; background: #ddd; content: ''; } @media (max-width: 360px) { .default__tab-item + .default__tab-item:before { width: 1px; width: 0.3125vw; } } @media (max-width: 360px) { .default__tab-item + .default__tab-item:before { height: 10px; height: 3.125vw; } } .default__tab-item--active .default__tab-anchor { position: relative; padding: 0px 8px; padding: 0vw 1.0416666667vw; z-index: 1; font-weight: bold; color: #222; } @media (max-width: 320px) { .default__tab-item--active .default__tab-anchor { padding: 0px 3.3333333333px; padding: 0vw 1.0416666667vw; } } .default__tab-item--active .default__tab-anchor:after { position: absolute; bottom: 0; left: 0; display: inline-block; width: 100%; height: 20px; height: 2.6041666667vw; background-color: #fdb812; content: ''; z-index: -1; } @media (max-width: 360px) { .default__tab-item--active .default__tab-anchor:after { height: 8.3333333333px; height: 2.6041666667vw; } } .default__tab--wide { padding-left: 0; padding-right: 0; } .default__tab--thin { padding-top: 32px; padding-top: 4.1666666667vw; } @media (max-width: 360px) { .default__tab--thin { padding-top: 13.3333333333px; padding-top: 4.1666666667vw; } } .default__tab--padding-bottom { padding-bottom: 48px; padding-bottom: 6.25vw; } @media (max-width: 360px) { .default__tab--padding-bottom { padding-bottom: 20px; padding-bottom: 6.25vw; } } .default__line-tab { margin-top: 64px; margin-top: 8.3333333333vw; } @media (max-width: 360px) { .default__line-tab { margin-top: 26.6666666667px; margin-top: 8.3333333333vw; } } .default__line-tab-list { border-bottom-color: #eeeeee; border-bottom-style: solid; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; height: 64px; height: 8.3333333333vw; margin-bottom: 64px; margin-bottom: 8.3333333333vw; padding: 0px 37.6px; padding: 0vw 4.8958333333vw; } @media (max-width: 360px) { .default__line-tab-list { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } @media (max-width: 360px) { .default__line-tab-list { height: 26.6666666667px; height: 8.3333333333vw; } } @media (max-width: 360px) { .default__line-tab-list { margin-bottom: 26.6666666667px; margin-bottom: 8.3333333333vw; } } @media (max-width: 320px) { .default__line-tab-list { padding: 0px 15.6666666667px; padding: 0vw 4.8958333333vw; } } .default__line-tab-list--no-margin { margin-bottom: 0; } .default__line-tab-item { position: relative; display: inline-block; color: #888888; box-sizing: border-box; font-size: 28.8px; font-size: 3.75vw; text-align: center; height: 100%; } @media (max-width: 360px) { .default__line-tab-item { font-size: 12px; font-size: 3.75vw; } } .default__line-tab-item ~ .default__line-tab-item { margin-left: 60px; margin-left: 7.8125vw; } @media (max-width: 360px) { .default__line-tab-item ~ .default__line-tab-item { margin-left: 25px; margin-left: 7.8125vw; } } .default__line-tab-item--active { color: #222222; font-weight: bold; position: relative; } .default__line-tab-item--active:before { content: ''; display: inline-block; position: absolute; width: 100%; background: #222222; left: 0; bottom: -2.4px; bottom: -0.3125vw; height: 6.4px; height: 0.8333333333vw; } @media (max-width: 360px) { .default__line-tab-item--active:before { bottom: -1px; bottom: -0.3125vw; } } @media (max-width: 360px) { .default__line-tab-item--active:before { height: 2.6666666667px; height: 0.8333333333vw; } } .default__line-container { padding: 32px 38.4px; padding: 4.1666666667vw 5vw; border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-color: #eee; border-top-style: solid; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-bottom-color: #eee; border-bottom-style: solid; margin-bottom: 0; box-sizing: border-box; } @media (max-width: 320px) { .default__line-container { padding: 13.3333333333px 16px; padding: 4.1666666667vw 5vw; } } @media (max-width: 360px) { .default__line-container { border-top-width: 1px; border-top-width: 0.3125vw; } } @media (max-width: 360px) { .default__line-container { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .default__line-container-wrap { padding-bottom: 11.2px; padding-bottom: 1.4583333333vw; } @media (max-width: 360px) { .default__line-container-wrap { padding-bottom: 4.6666666667px; padding-bottom: 1.4583333333vw; } } .default__line-container ~ .default__line-container { margin-top: 11.2px; margin-top: 1.4583333333vw; } @media (max-width: 360px) { .default__line-container ~ .default__line-container { margin-top: 4.6666666667px; margin-top: 1.4583333333vw; } } .default__line-container--fix-height { height: 112px; height: 14.5833333333vw; overflow: hidden; } @media (max-width: 360px) { .default__line-container--fix-height { height: 46.6666666667px; height: 14.5833333333vw; } } .default-title { position: relative; display: inline-block; font-size: 33.6px; font-size: 4.375vw; font-weight: bold; } @media (max-width: 360px) { .default-title { font-size: 14px; font-size: 4.375vw; } } .default-title--top { margin-top: 56px; margin-top: 7.2916666667vw; } @media (max-width: 360px) { .default-title--top { margin-top: 23.3333333333px; margin-top: 7.2916666667vw; } } .default-title--arrow:after { display: inline-block; width: 16.8px; width: 2.1875vw; height: 26.4px; height: 3.4375vw; margin-left: 16px; margin-left: 2.0833333333vw; background: url("/design/skinfood/mobile_skinfood/images/icon/icon_arrow.svg") no-repeat; background-position: right center; background-size: 16.8px 26.4px; background-size: 2.1875vw 3.4375vw; content: ''; } @media (max-width: 360px) { .default-title--arrow:after { width: 7px; width: 2.1875vw; } } @media (max-width: 360px) { .default-title--arrow:after { height: 11px; height: 3.4375vw; } } @media (max-width: 360px) { .default-title--arrow:after { margin-left: 6.6666666667px; margin-left: 2.0833333333vw; } } @media (max-width: 320px) { .default-title--arrow:after { background-size: 7px 11px; background-size: 2.1875vw 3.4375vw; } } .default-title--blank { padding: 0px 38.4px; padding: 0vw 5vw; } @media (max-width: 320px) { .default-title--blank { padding: 0px 16px; padding: 0vw 5vw; } } .default-title--padding { padding: 24px 32px 32px; padding: 3.125vw 4.1666666667vw 4.1666666667vw; } @media (max-width: 320px) { .default-title--padding { padding: 10px 13.3333333333px 13.3333333333px; padding: 3.125vw 4.1666666667vw 4.1666666667vw; } } .default-title--large { font-size: 38.4px; font-size: 5vw; } @media (max-width: 360px) { .default-title--large { font-size: 16px; font-size: 5vw; } } .default-title__txt { position: relative; padding: 0px 8px; padding: 0vw 1.0416666667vw; z-index: 1; } @media (max-width: 320px) { .default-title__txt { padding: 0px 3.3333333333px; padding: 0vw 1.0416666667vw; } } .default-title__txt:after { position: absolute; bottom: 0; left: 0; display: inline-block; width: 100%; height: 20px; height: 2.6041666667vw; background-color: #fdb812; content: ''; z-index: -1; } @media (max-width: 360px) { .default-title__txt:after { height: 8.3333333333px; height: 2.6041666667vw; } } .default-title--small { font-size: 31.2px; font-size: 4.0625vw; } @media (max-width: 360px) { .default-title--small { font-size: 13px; font-size: 4.0625vw; } } .default-title--margin-top { margin-top: 24px; margin-top: 3.125vw; font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .default-title--margin-top { margin-top: 10px; margin-top: 3.125vw; } } @media (max-width: 360px) { .default-title--margin-top { font-size: 12px; font-size: 3.75vw; } } .default-title__sub-txt { padding-left: 22.4px; padding-left: 2.9166666667vw; font-size: 28.8px; font-size: 3.75vw; color: #888; font-weight: normal; } @media (max-width: 360px) { .default-title__sub-txt { padding-left: 9.3333333333px; padding-left: 2.9166666667vw; } } @media (max-width: 360px) { .default-title__sub-txt { font-size: 12px; font-size: 3.75vw; } } .default-content { padding: 64px 38.4px 80px; padding: 8.3333333333vw 5vw 10.4166666667vw; } .default-content-title--border-gray { margin-top: 104px; margin-top: 13.5416666667vw; padding-bottom: 20px; padding-bottom: 2.6041666667vw; padding-left: 40.8px; padding-left: 5.3125vw; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-bottom-color: #eee; border-bottom-style: solid; font-size: 33.6px; font-size: 4.375vw; font-weight: bold; } @media (max-width: 360px) { .default-content-title--border-gray { margin-top: 43.3333333333px; margin-top: 13.5416666667vw; } } @media (max-width: 360px) { .default-content-title--border-gray { padding-bottom: 8.3333333333px; padding-bottom: 2.6041666667vw; } } @media (max-width: 360px) { .default-content-title--border-gray { padding-left: 17px; padding-left: 5.3125vw; } } @media (max-width: 360px) { .default-content-title--border-gray { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } @media (max-width: 360px) { .default-content-title--border-gray { font-size: 14px; font-size: 4.375vw; } } @media (max-width: 320px) { .default-content { padding: 26.6666666667px 16px 33.3333333333px; padding: 8.3333333333vw 5vw 10.4166666667vw; } } .default-content--large { padding-top: 80px; padding-top: 10.4166666667vw; } @media (max-width: 360px) { .default-content--large { padding-top: 33.3333333333px; padding-top: 10.4166666667vw; } } .default-content--thick { padding-bottom: 112px; padding-bottom: 14.5833333333vw; } @media (max-width: 360px) { .default-content--thick { padding-bottom: 46.6666666667px; padding-bottom: 14.5833333333vw; } } .default-content--thin { padding: 0px 24px; padding: 0vw 3.125vw; } @media (max-width: 320px) { .default-content--thin { padding: 0px 10px; padding: 0vw 3.125vw; } } .default-content--gray { padding-top: 80px; padding-top: 10.4166666667vw; padding-bottom: 80px; padding-bottom: 10.4166666667vw; background: url("/design/skinfood/mobile_skinfood/images/bg/bg_gray.png") no-repeat; background-size: 100% 100%; } @media (max-width: 360px) { .default-content--gray { padding-top: 33.3333333333px; padding-top: 10.4166666667vw; } } @media (max-width: 360px) { .default-content--gray { padding-bottom: 33.3333333333px; padding-bottom: 10.4166666667vw; } } .default-content--padding-none { padding: 0; } .default-content--padding-bottom-none { padding-bottom: 0; } .default-content--center { text-align: center; } .default-content--padding-top-none { padding-top: 0; } .default-content--border:before { display: block; height: 11.2px; height: 1.4583333333vw; border-top-width: 2.4px; border-top-width: 0.3125vw; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-top-style: solid; border-top-color: #eee; border-bottom-style: solid; border-bottom-color: #eee; background-color: #f6f6f6; content: ''; } @media (max-width: 360px) { .default-content--border:before { height: 4.6666666667px; height: 1.4583333333vw; } } @media (max-width: 360px) { .default-content--border:before { border-top-width: 1px; border-top-width: 0.3125vw; } } @media (max-width: 360px) { .default-content--border:before { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .default-content__top { height: 124px; height: 16.1458333333vw; line-height: 124px; line-height: 16.1458333333vw; background: #f6f6f6; color: #888; font-size: 26.4px; font-size: 3.4375vw; text-align: center; } @media (max-width: 360px) { .default-content__top { height: 51.6666666667px; height: 16.1458333333vw; } } @media (max-width: 360px) { .default-content__top { line-height: 51.6666666667px; line-height: 16.1458333333vw; } } @media (max-width: 360px) { .default-content__top { font-size: 11px; font-size: 3.4375vw; } } .default-content__top--row { height: auto; padding: 48px 38.4px; padding: 6.25vw 5vw; line-height: normal; } @media (max-width: 320px) { .default-content__top--row { padding: 20px 16px; padding: 6.25vw 5vw; } } .default-content__top--row p { line-height: 1; } .default-content__top--row p + P { margin-top: 22.4px; margin-top: 2.9166666667vw; } @media (max-width: 360px) { .default-content__top--row p + P { margin-top: 9.3333333333px; margin-top: 2.9166666667vw; } } .default-content--small { padding-bottom: 0px; padding-bottom: 0vw; } @media (max-width: 360px) { .default-content--small { padding-bottom: 0px; padding-bottom: 0vw; } } .default-content--bottom { margin-bottom: 112px; margin-bottom: 14.5833333333vw; } @media (max-width: 360px) { .default-content--bottom { margin-bottom: 46.6666666667px; margin-bottom: 14.5833333333vw; } } .default-info__list--margin-bottom { margin-bottom: 40px; margin-bottom: 5.2083333333vw; } @media (max-width: 360px) { .default-info__list--margin-bottom { margin-bottom: 16.6666666667px; margin-bottom: 5.2083333333vw; } } .default-info__item { position: relative; font-size: 0; } .default-info__item-title { display: inline-block; width: 24%; color: #888; font-size: 28.8px; font-size: 3.75vw; vertical-align: top; line-height: 44.8px; line-height: 5.8333333333vw; } @media (max-width: 360px) { .default-info__item-title { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .default-info__item-title { line-height: 18.6666666667px; line-height: 5.8333333333vw; } } .default-info__item-txt { display: inline-block; color: #222; width: 76%; font-size: 28.8px; font-size: 3.75vw; line-height: 44.8px; line-height: 5.8333333333vw; } @media (max-width: 360px) { .default-info__item-txt { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .default-info__item-txt { line-height: 18.6666666667px; line-height: 5.8333333333vw; } } .default-info__item ~ .default-info__item { margin-top: 21.6px; margin-top: 2.8125vw; } @media (max-width: 360px) { .default-info__item ~ .default-info__item { margin-top: 9px; margin-top: 2.8125vw; } } .default-info__item-more-btn { position: absolute; top: 50%; right: 0; transform: translateY(-50%); background-color: transparent; font-size: 28.8px; font-size: 3.75vw; color: #222222; } @media (max-width: 360px) { .default-info__item-more-btn { font-size: 12px; font-size: 3.75vw; } } .default__static-list { display: none; background-color: #fff; margin-top: -2.4px; margin-top: -0.3125vw; border-width: 2.4px; border-width: 0.3125vw; border-color: #dddddd; border-style: solid; border-top: 0; } @media (max-width: 360px) { .default__static-list { margin-top: -1px; margin-top: -0.3125vw; } } @media (max-width: 360px) { .default__static-list { border-width: 1px; border-width: 0.3125vw; } } .default__static-list-wrap { text-align: left; } .default__static-list-wrap--margin-top { margin-top: 64px; margin-top: 8.3333333333vw; } @media (max-width: 360px) { .default__static-list-wrap--margin-top { margin-top: 26.6666666667px; margin-top: 8.3333333333vw; } } .default__static-list-trigger { position: relative; box-sizing: border-box; width: 100%; padding: 24px 64px 24px 32px; padding: 3.125vw 8.3333333333vw 3.125vw 4.1666666667vw; font-size: 28.8px; font-size: 3.75vw; font-weight: bold; background-color: #fff; border-width: 2.4px; border-width: 0.3125vw; border-color: #dddddd; border-style: solid; } @media (max-width: 320px) { .default__static-list-trigger { padding: 10px 26.6666666667px 10px 13.3333333333px; padding: 3.125vw 8.3333333333vw 3.125vw 4.1666666667vw; } } @media (max-width: 360px) { .default__static-list-trigger { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .default__static-list-trigger { border-width: 1px; border-width: 0.3125vw; } } .default__static-list-trigger-icon { content: ''; display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); right: 32px; right: 4.1666666667vw; width: 26.4px; width: 3.4375vw; height: 16.8px; height: 2.1875vw; background-image: url(/design/skinfood/mobile_skinfood/images/icon/icon_arrow_down.png); background-size: 26.4px 16.8px; background-size: 3.4375vw 2.1875vw; background-repeat: no-repeat; } @media (max-width: 360px) { .default__static-list-trigger-icon { right: 13.3333333333px; right: 4.1666666667vw; } } @media (max-width: 360px) { .default__static-list-trigger-icon { width: 11px; width: 3.4375vw; } } @media (max-width: 360px) { .default__static-list-trigger-icon { height: 7px; height: 2.1875vw; } } @media (max-width: 320px) { .default__static-list-trigger-icon { background-size: 11px 7px; background-size: 3.4375vw 2.1875vw; } } .default__static-list-trigger--active .default__static-list-trigger-icon { background-image: url(/design/skinfood/mobile_skinfood/images/icon/icon_arrow_top.png); } .default-select { position: relative; width: 100%; margin-top: 32px; margin-top: 4.1666666667vw; } @media (max-width: 360px) { .default-select { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .default-select select { width: 100%; height: 90.4px; height: 11.7708333333vw; padding: 0px 106.4px 0px 40px; padding: 0vw 13.8541666667vw 0vw 5.2083333333vw; appearance: none; -moz-appearance: none; -webkit-appearance: none; color: #888888; font-size: 28.8px; font-size: 3.75vw; border-radius: none; } @media (max-width: 360px) { .default-select select { height: 37.6666666667px; height: 11.7708333333vw; } } @media (max-width: 320px) { .default-select select { padding: 0px 44.3333333333px 0px 16.6666666667px; padding: 0vw 13.8541666667vw 0vw 5.2083333333vw; } } @media (max-width: 360px) { .default-select select { font-size: 12px; font-size: 3.75vw; } } .default-select:after { content: ''; display: inline-block; position: absolute; right: 38.4px; right: 5vw; width: 26.4px; width: 3.4375vw; height: 100%; background-image: url(/design/skinfood/mobile_skinfood/images/icon/icon_arrow_down.png); background-size: 26.4px 16.8px; background-size: 3.4375vw 2.1875vw; background-repeat: no-repeat; background-position: center; } @media (max-width: 360px) { .default-select:after { right: 16px; right: 5vw; } } @media (max-width: 360px) { .default-select:after { width: 11px; width: 3.4375vw; } } @media (max-width: 320px) { .default-select:after { background-size: 11px 7px; background-size: 3.4375vw 2.1875vw; } } .default-select--with-btn { display: inline-block; width: 454.4px; width: 59.1666666667vw; } @media (max-width: 360px) { .default-select--with-btn { width: 189.3333333333px; width: 59.1666666667vw; } } .default-select-wrap { font-size: 0; padding: 0px 38.4px; padding: 0vw 5vw; } @media (max-width: 320px) { .default-select-wrap { padding: 0px 16px; padding: 0vw 5vw; } } .default-select-wrap--margin { margin-top: 64px; margin-top: 8.3333333333vw; } @media (max-width: 360px) { .default-select-wrap--margin { margin-top: 26.6666666667px; margin-top: 8.3333333333vw; } } .default-select-wrap--margin .cta { margin-top: 32px; margin-top: 4.1666666667vw; } @media (max-width: 360px) { .default-select-wrap--margin .cta { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .default-column { width: 100%; } .default-column__list { display: flex; justify-content: space-between; align-items: center; padding: 0px 38.4px; padding: 0vw 5vw; } @media (max-width: 320px) { .default-column__list { padding: 0px 16px; padding: 0vw 5vw; } } .default-column__list--wide { padding: 0; } .default-column__list--wide .default-column__item { width: 33.3%; } .default-column__item { position: relative; color: #222222; word-break: keep-all; font-size: 28.8px; font-size: 3.75vw; text-align: center; } @media (max-width: 360px) { .default-column__item { font-size: 12px; font-size: 3.75vw; } } .default-column__item:first-child { padding-left: 0; } .default-column__item:not(:first-child):after { content: ''; display: inline-block; background-color: #dddddd; position: absolute; top: 29.6px; top: 3.8541666667vw; left: 0; width: 2.4px; width: 0.3125vw; height: 24px; height: 3.125vw; } @media (max-width: 360px) { .default-column__item:not(:first-child):after { top: 12.3333333333px; top: 3.8541666667vw; } } @media (max-width: 360px) { .default-column__item:not(:first-child):after { width: 1px; width: 0.3125vw; } } @media (max-width: 360px) { .default-column__item:not(:first-child):after { height: 10px; height: 3.125vw; } } .default-column__item--arrow:not(:first-child):after { content: ''; display: inline-block; position: absolute; left: 0; top: 16.8px; top: 2.1875vw; left: -28px; left: -3.6458333333vw; width: 16.8px; width: 2.1875vw; height: 26.4px; height: 3.4375vw; background-color: transparent; background-image: url(/design/skinfood/mobile_skinfood/images/icon/icon_arrow-gray.png); background-size: 16.8px 26.4px; background-size: 2.1875vw 3.4375vw; background-repeat: no-repeat; } @media (max-width: 360px) { .default-column__item--arrow:not(:first-child):after { top: 7px; top: 2.1875vw; } } @media (max-width: 360px) { .default-column__item--arrow:not(:first-child):after { left: -11.6666666667px; left: -3.6458333333vw; } } @media (max-width: 360px) { .default-column__item--arrow:not(:first-child):after { width: 7px; width: 2.1875vw; } } @media (max-width: 360px) { .default-column__item--arrow:not(:first-child):after { height: 11px; height: 3.4375vw; } } @media (max-width: 320px) { .default-column__item--arrow:not(:first-child):after { background-size: 7px 11px; background-size: 2.1875vw 3.4375vw; } } .default-column__item--icon:before { content: ''; display: inline-block; width: 100%; height: 78.4px; height: 10.2083333333vw; margin-bottom: 16px; margin-bottom: 2.0833333333vw; background-repeat: no-repeat; background-position: center; } @media (max-width: 360px) { .default-column__item--icon:before { height: 32.6666666667px; height: 10.2083333333vw; } } @media (max-width: 360px) { .default-column__item--icon:before { margin-bottom: 6.6666666667px; margin-bottom: 2.0833333333vw; } } .default-column__item--icon--coupon:before { background-image: url(/design/skinfood/mobile_skinfood/images/icon/icon_coupon.png); background-size: 81.6px 54.4px; background-size: 10.625vw 7.0833333333vw; } @media (max-width: 320px) { .default-column__item--icon--coupon:before { background-size: 34px 22.6666666667px; background-size: 10.625vw 7.0833333333vw; } } .default-column__item--icon--wish:before { background-image: url(/design/skinfood/mobile_skinfood/images/icon/icon_wish_thin.png); background-size: 79.2px 72.8px; background-size: 10.3125vw 9.4791666667vw; } @media (max-width: 320px) { .default-column__item--icon--wish:before { background-size: 33px 30.3333333333px; background-size: 10.3125vw 9.4791666667vw; } } .default-column__item--icon--pencil:before { background-image: url(/design/skinfood/mobile_skinfood/images/icon/icon_pencil.png); background-size: 72.8px 76px; background-size: 9.4791666667vw 9.8958333333vw; } @media (max-width: 320px) { .default-column__item--icon--pencil:before { background-size: 30.3333333333px 31.6666666667px; background-size: 9.4791666667vw 9.8958333333vw; } } .default-column__item--icon--stemp:before { background-image: url(/design/skinfood/mobile_skinfood/images/icon/icon_stemp.png); background-size: 75.2px 78.4px; background-size: 9.7916666667vw 10.2083333333vw; } @media (max-width: 320px) { .default-column__item--icon--stemp:before { background-size: 31.3333333333px 32.6666666667px; background-size: 9.7916666667vw 10.2083333333vw; } } .default-column__item--gray { color: #888; } .default-column__count { display: inline-block; font-size: 55.2px; font-size: 7.1875vw; font-weight: bold; margin-bottom: 16px; margin-bottom: 2.0833333333vw; color: #212121; line-height: 1.2; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-bottom-color: #222; border-bottom-style: solid; } @media (max-width: 360px) { .default-column__count { font-size: 23px; font-size: 7.1875vw; } } @media (max-width: 360px) { .default-column__count { margin-bottom: 6.6666666667px; margin-bottom: 2.0833333333vw; } } @media (max-width: 360px) { .default-column__count { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .default-column__count-title { display: block; } .default-column__img-count { position: absolute; box-sizing: border-box; display: inline-block; text-align: center; line-height: 1; width: 38.4px; width: 5vw; padding: 7.2px 0px; padding: 0.9375vw 0vw; height: 38.4px; height: 5vw; background-color: #fdb812; border-radius: 50%; top: 0; right: 37.6px; right: 4.8958333333vw; } @media (max-width: 360px) { .default-column__img-count { width: 16px; width: 5vw; } } @media (max-width: 320px) { .default-column__img-count { padding: 3px 0px; padding: 0.9375vw 0vw; } } @media (max-width: 360px) { .default-column__img-count { height: 16px; height: 5vw; } } @media (max-width: 360px) { .default-column__img-count { right: 15.6666666667px; right: 4.8958333333vw; } } .default-row { position: relative; font-size: 0; box-sizing: border-box; } .default-row__item { padding: 32px 38.4px; padding: 4.1666666667vw 5vw; font-size: 28.8px; font-size: 3.75vw; color: #212121; line-height: 1; } @media (max-width: 320px) { .default-row__item { padding: 13.3333333333px 16px; padding: 4.1666666667vw 5vw; } } @media (max-width: 360px) { .default-row__item { font-size: 12px; font-size: 3.75vw; } } .default-row__item:first-child { padding-top: 0; } .default-row__item ~ .default-row__item { border-top-style: solid; border-top-color: #eee; border-top-width: 2.4px; border-top-width: 0.3125vw; } @media (max-width: 360px) { .default-row__item ~ .default-row__item { border-top-width: 1px; border-top-width: 0.3125vw; } } .default-address__list { border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-style: solid; border-top-color: #eee; } @media (max-width: 360px) { .default-address__list { border-top-width: 1px; border-top-width: 0.3125vw; } } .default-address__item { padding: 64px 38.4px; padding: 8.3333333333vw 5vw; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-bottom-style: solid; border-bottom-color: #eee; } @media (max-width: 320px) { .default-address__item { padding: 26.6666666667px 16px; padding: 8.3333333333vw 5vw; } } @media (max-width: 360px) { .default-address__item { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .default-address__item-info { font-size: 28.8px; font-size: 3.75vw; word-break: keep-all; } @media (max-width: 360px) { .default-address__item-info { font-size: 12px; font-size: 3.75vw; } } .default-address__item-info li { margin-top: 32px; margin-top: 4.1666666667vw; } @media (max-width: 360px) { .default-address__item-info li { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .default-address__item-info li:first-child { margin-top: 0; } .default-address__item-info li .gray { color: #888; } .default-address__item-info li .bar { margin-left: 23.2px; margin-left: 3.0208333333vw; } @media (max-width: 360px) { .default-address__item-info li .bar { margin-left: 9.6666666667px; margin-left: 3.0208333333vw; } } .default-address__item-info li .bar::before { display: inline-block; width: 2.4px; width: 0.3125vw; height: 24px; height: 3.125vw; margin-right: 22.4px; margin-right: 2.9166666667vw; background-color: #ddd; content: ''; } @media (max-width: 360px) { .default-address__item-info li .bar::before { width: 1px; width: 0.3125vw; } } @media (max-width: 360px) { .default-address__item-info li .bar::before { height: 10px; height: 3.125vw; } } @media (max-width: 360px) { .default-address__item-info li .bar::before { margin-right: 9.3333333333px; margin-right: 2.9166666667vw; } } .default-address__btn { margin-top: 22.4px; margin-top: 2.9166666667vw; text-align: right; font-size: 0; line-height: 1; } @media (max-width: 360px) { .default-address__btn { margin-top: 9.3333333333px; margin-top: 2.9166666667vw; } } .default-address__btn .cta { font-size: 26.4px; font-size: 3.4375vw; font-weight: normal; } @media (max-width: 360px) { .default-address__btn .cta { font-size: 11px; font-size: 3.4375vw; } } .default-address__btn .cta + .cta { margin-left: 49.6px; margin-left: 6.4583333333vw; } @media (max-width: 360px) { .default-address__btn .cta + .cta { margin-left: 20.6666666667px; margin-left: 6.4583333333vw; } } .default-address__icon { padding: 9.6px 16px; padding: 1.25vw 2.0833333333vw; background-color: #222; color: #fff; line-height: 1; } @media (max-width: 320px) { .default-address__icon { padding: 4px 6.6666666667px; padding: 1.25vw 2.0833333333vw; } } .default-border-content { position: relative; padding-top: 72px; padding-top: 9.375vw; padding-bottom: 56px; padding-bottom: 7.2916666667vw; box-sizing: border-box; font-size: 0; overflow: hidden; } @media (max-width: 360px) { .default-border-content { padding-top: 30px; padding-top: 9.375vw; } } @media (max-width: 360px) { .default-border-content { padding-bottom: 23.3333333333px; padding-bottom: 7.2916666667vw; } } .default-border-content--bottom { padding-bottom: 112px; padding-bottom: 14.5833333333vw; } @media (max-width: 360px) { .default-border-content--bottom { padding-bottom: 46.6666666667px; padding-bottom: 14.5833333333vw; } } .default-border-content-small-top-padding { padding-top: 64px; padding-top: 8.3333333333vw; } @media (max-width: 360px) { .default-border-content-small-top-padding { padding-top: 26.6666666667px; padding-top: 8.3333333333vw; } } .default-border-content--padding-bottom-small { padding-bottom: 32px; padding-bottom: 4.1666666667vw; } @media (max-width: 360px) { .default-border-content--padding-bottom-small { padding-bottom: 13.3333333333px; padding-bottom: 4.1666666667vw; } } .default-border-content:first-child { padding-top: 56px; padding-top: 7.2916666667vw; } @media (max-width: 360px) { .default-border-content:first-child { padding-top: 23.3333333333px; padding-top: 7.2916666667vw; } } .default-border-content + .default-border-content:before { position: absolute; top: 0; left: 0; content: ''; display: inline-block; box-sizing: border-box; width: 100%; height: 16px; height: 2.0833333333vw; background-color: #f6f6f6; border-top-width: 2.4px; border-top-width: 0.3125vw; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-top-style: solid; border-bottom-style: solid; border-top-color: #eee; border-bottom-color: #eee; } @media (max-width: 360px) { .default-border-content + .default-border-content:before { height: 6.6666666667px; height: 2.0833333333vw; } } @media (max-width: 360px) { .default-border-content + .default-border-content:before { border-top-width: 1px; border-top-width: 0.3125vw; } } @media (max-width: 360px) { .default-border-content + .default-border-content:before { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .default-border-content .default-title { padding: 0px 38.4px 45.6px; padding: 0vw 5vw 5.9375vw; } @media (max-width: 320px) { .default-border-content .default-title { padding: 0px 16px 19px; padding: 0vw 5vw 5.9375vw; } } .default-border-content .default-title--padding-none { padding: 0; } .default-border-list { margin-top: 64px; margin-top: 8.3333333333vw; border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-style: solid; border-top-color: #eee; } @media (max-width: 360px) { .default-border-list { margin-top: 26.6666666667px; margin-top: 8.3333333333vw; } } @media (max-width: 360px) { .default-border-list { border-top-width: 1px; border-top-width: 0.3125vw; } } .default-border-list--no-margin { margin-top: 0; border: none; } .default-border-list__item { display: flex; justify-content: space-between; justify-items: start; align-items: center; padding: 56px 38.4px 57.6px; padding: 7.2916666667vw 5vw 7.5vw; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-bottom-style: solid; border-bottom-color: #eee; } @media (max-width: 320px) { .default-border-list__item { padding: 23.3333333333px 16px 24px; padding: 7.2916666667vw 5vw 7.5vw; } } @media (max-width: 360px) { .default-border-list__item { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .default-border-list__item--top { align-items: inherit; } .default-border-list__item-left { width: 50%; } .default-border-list__item-left--wide { width: 70%; } .default-border-list__item-left--img { width: 240px; width: 31.25vw; height: 240px; height: 31.25vw; text-align: center; } @media (max-width: 360px) { .default-border-list__item-left--img { width: 100px; width: 31.25vw; } } @media (max-width: 360px) { .default-border-list__item-left--img { height: 100px; height: 31.25vw; } } .default-border-list__item-right--has-img { flex: 1; padding-left: 47.2px; padding-left: 6.1458333333vw; } @media (max-width: 360px) { .default-border-list__item-right--has-img { padding-left: 19.6666666667px; padding-left: 6.1458333333vw; } } .default-border-list__item-title { font-size: 28.8px; font-size: 3.75vw; font-weight: bold; color: #222; word-break: break-all; } @media (max-width: 360px) { .default-border-list__item-title { font-size: 12px; font-size: 3.75vw; } } .default-border-list__item-title--arrow { position: relative; display: inline-block; padding-right: 32px; padding-right: 4.1666666667vw; box-sizing: border-box; } @media (max-width: 360px) { .default-border-list__item-title--arrow { padding-right: 13.3333333333px; padding-right: 4.1666666667vw; } } .default-border-list__item-title--arrow:after { position: absolute; top: 0; right: 0; bottom: 0; margin: auto; display: inline-block; width: 16.8px; width: 2.1875vw; height: 26.4px; height: 3.4375vw; background: url("/design/skinfood/mobile_skinfood/images/icon/icon_arrow_right.png") no-repeat; background-position: center right; background-size: contain; content: ''; } @media (max-width: 360px) { .default-border-list__item-title--arrow:after { width: 7px; width: 2.1875vw; } } @media (max-width: 360px) { .default-border-list__item-title--arrow:after { height: 11px; height: 3.4375vw; } } .default-border-list__item-desc { margin-top: 22.4px; margin-top: 2.9166666667vw; line-height: 1; color: #888; font-size: 26.4px; font-size: 3.4375vw; } @media (max-width: 360px) { .default-border-list__item-desc { margin-top: 9.3333333333px; margin-top: 2.9166666667vw; } } @media (max-width: 360px) { .default-border-list__item-desc { font-size: 11px; font-size: 3.4375vw; } } .default-border-list__item-desc--black { margin-top: 40px; margin-top: 5.2083333333vw; line-height: 44.8px; line-height: 5.8333333333vw; color: #222; } @media (max-width: 360px) { .default-border-list__item-desc--black { margin-top: 16.6666666667px; margin-top: 5.2083333333vw; } } @media (max-width: 360px) { .default-border-list__item-desc--black { line-height: 18.6666666667px; line-height: 5.8333333333vw; } } .default-border-list__item-desc--black span { font-size: 26.4px; font-size: 3.4375vw; } @media (max-width: 360px) { .default-border-list__item-desc--black span { font-size: 11px; font-size: 3.4375vw; } } .default-border-list__item-desc--black span + span { margin-left: 19.2px; margin-left: 2.5vw; } @media (max-width: 360px) { .default-border-list__item-desc--black span + span { margin-left: 8px; margin-left: 2.5vw; } } .default-border-list__item-desc--black span + span:before { display: inline-block; width: 2.4px; width: 0.3125vw; height: 26.4px; height: 3.4375vw; margin-right: 24.8px; margin-right: 3.2291666667vw; background-color: #eee; content: ''; vertical-align: middle; } @media (max-width: 360px) { .default-border-list__item-desc--black span + span:before { width: 1px; width: 0.3125vw; } } @media (max-width: 360px) { .default-border-list__item-desc--black span + span:before { height: 11px; height: 3.4375vw; } } @media (max-width: 360px) { .default-border-list__item-desc--black span + span:before { margin-right: 10.3333333333px; margin-right: 3.2291666667vw; } } .default-empty { padding-top: 281.6px; padding-top: 36.6666666667vw; padding-bottom: 112px; padding-bottom: 14.5833333333vw; background: url(/design/skinfood/mobile_skinfood/images/icon/icon_sorry.png) no-repeat; background-size: 109.6px 105.6px; background-size: 14.2708333333vw 13.75vw; background-position-x: center; background-position-y: 112px; background-position-y: 14.5833333333vw; font-size: 28.8px; font-size: 3.75vw; font-weight: bold; text-align: center; } @media (max-width: 360px) { .default-empty { padding-top: 117.3333333333px; padding-top: 36.6666666667vw; } } @media (max-width: 360px) { .default-empty { padding-bottom: 46.6666666667px; padding-bottom: 14.5833333333vw; } } @media (max-width: 320px) { .default-empty { background-size: 45.6666666667px 44px; background-size: 14.2708333333vw 13.75vw; } } @media (max-width: 360px) { .default-empty { background-position-y: 46.6666666667px; background-position-y: 14.5833333333vw; } } @media (max-width: 360px) { .default-empty { font-size: 12px; font-size: 3.75vw; } } .default-empty--write { padding-top: 279.2px; padding-top: 36.3541666667vw; background: url(/design/skinfood/mobile_skinfood/images/icon/icon_empty_write.png) no-repeat; background-size: 100.8px 103.2px; background-size: 13.125vw 13.4375vw; background-position-x: center; background-position-y: 112px; background-position-y: 14.5833333333vw; } @media (max-width: 360px) { .default-empty--write { padding-top: 116.3333333333px; padding-top: 36.3541666667vw; } } @media (max-width: 320px) { .default-empty--write { background-size: 42px 43px; background-size: 13.125vw 13.4375vw; } } @media (max-width: 360px) { .default-empty--write { background-position-y: 46.6666666667px; background-position-y: 14.5833333333vw; } } .default-empty--has-desc { padding-bottom: 33.6px; padding-bottom: 4.375vw; } @media (max-width: 360px) { .default-empty--has-desc { padding-bottom: 14px; padding-bottom: 4.375vw; } } .default-empty__desc { margin-bottom: 63.2px; margin-bottom: 8.2291666667vw; font-size: 28.8px; font-size: 3.75vw; text-align: center; } @media (max-width: 360px) { .default-empty__desc { margin-bottom: 26.3333333333px; margin-bottom: 8.2291666667vw; } } @media (max-width: 360px) { .default-empty__desc { font-size: 12px; font-size: 3.75vw; } } .default__list { margin-top: 48px; margin-top: 6.25vw; } @media (max-width: 360px) { .default__list { margin-top: 20px; margin-top: 6.25vw; } } .default__list + .default__list { margin-top: 64px; margin-top: 8.3333333333vw; padding-top: 64px; padding-top: 8.3333333333vw; border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-style: solid; border-top-color: #eee; } @media (max-width: 360px) { .default__list + .default__list { margin-top: 26.6666666667px; margin-top: 8.3333333333vw; } } @media (max-width: 360px) { .default__list + .default__list { padding-top: 26.6666666667px; padding-top: 8.3333333333vw; } } @media (max-width: 360px) { .default__list + .default__list { border-top-width: 1px; border-top-width: 0.3125vw; } } .default__list--border { padding: 43.2px 38.4px 64px; padding: 5.625vw 5vw 8.3333333333vw; border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-style: solid; border-top-color: #eee; } @media (max-width: 320px) { .default__list--border { padding: 18px 16px 26.6666666667px; padding: 5.625vw 5vw 8.3333333333vw; } } @media (max-width: 360px) { .default__list--border { border-top-width: 1px; border-top-width: 0.3125vw; } } .default__list--small { padding: 0; } .default__item { display: flex; justify-content: space-between; font-size: 28.8px; font-size: 3.75vw; line-height: 1; } @media (max-width: 360px) { .default__item { font-size: 12px; font-size: 3.75vw; } } .default__item + .default__item { margin-top: 38.4px; margin-top: 5vw; } @media (max-width: 360px) { .default__item + .default__item { margin-top: 16px; margin-top: 5vw; } } .default__item--small + .default__item--small { margin-top: 32px; margin-top: 4.1666666667vw; } @media (max-width: 360px) { .default__item--small + .default__item--small { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .default__item--deco { position: relative; padding-left: 16.8px; padding-left: 2.1875vw; line-height: 44px; line-height: 5.7291666667vw; } @media (max-width: 360px) { .default__item--deco { padding-left: 7px; padding-left: 2.1875vw; } } @media (max-width: 360px) { .default__item--deco { line-height: 18.3333333333px; line-height: 5.7291666667vw; } } .default__item--deco:before { position: absolute; top: 18.4px; top: 2.3958333333vw; left: 0; margin: auto; display: inline-block; width: 4.8px; width: 0.625vw; height: 4.8px; height: 0.625vw; border-radius: 50%; background-color: #222; content: ''; } @media (max-width: 360px) { .default__item--deco:before { top: 7.6666666667px; top: 2.3958333333vw; } } @media (max-width: 360px) { .default__item--deco:before { width: 2px; width: 0.625vw; } } @media (max-width: 360px) { .default__item--deco:before { height: 2px; height: 0.625vw; } } .default-tag__list--overflow { overflow-x: auto; white-space: nowrap; padding-left: 38.4px; padding-left: 5vw; padding-right: 38.4px; padding-right: 5vw; } @media (max-width: 360px) { .default-tag__list--overflow { padding-left: 16px; padding-left: 5vw; } } @media (max-width: 360px) { .default-tag__list--overflow { padding-right: 16px; padding-right: 5vw; } } .default-tag__list--side-padding { padding-left: 38.4px; padding-left: 5vw; padding-right: 38.4px; padding-right: 5vw; } @media (max-width: 360px) { .default-tag__list--side-padding { padding-left: 16px; padding-left: 5vw; } } @media (max-width: 360px) { .default-tag__list--side-padding { padding-right: 16px; padding-right: 5vw; } } .default-tag__list--col { margin-top: -16px; margin-top: -2.0833333333vw; } @media (max-width: 360px) { .default-tag__list--col { margin-top: -6.6666666667px; margin-top: -2.0833333333vw; } } .default-tag__item { display: inline-block; line-height: 1; padding: 11.2px 22.4px; padding: 1.4583333333vw 2.9166666667vw; border-radius: 24px; border-radius: 3.125vw; font-size: 26.4px; font-size: 3.4375vw; color: #222; cursor: pointer; background-color: #f7f7f7; } @media (max-width: 320px) { .default-tag__item { padding: 4.6666666667px 9.3333333333px; padding: 1.4583333333vw 2.9166666667vw; } } @media (max-width: 360px) { .default-tag__item { border-radius: 10px; border-radius: 3.125vw; } } @media (max-width: 360px) { .default-tag__item { font-size: 11px; font-size: 3.4375vw; } } .default-tag__item--thick { padding: 23.2px 38.4px; padding: 3.0208333333vw 5vw; border-radius: 36px; border-radius: 4.6875vw; } @media (max-width: 320px) { .default-tag__item--thick { padding: 9.6666666667px 16px; padding: 3.0208333333vw 5vw; } } @media (max-width: 360px) { .default-tag__item--thick { border-radius: 15px; border-radius: 4.6875vw; } } .default-tag__item--thick ~ .default-tag__item--thick { margin-left: 16px; margin-left: 2.0833333333vw; } @media (max-width: 360px) { .default-tag__item--thick ~ .default-tag__item--thick { margin-left: 6.6666666667px; margin-left: 2.0833333333vw; } } .default-tag__item--col { margin-top: 16px; margin-top: 2.0833333333vw; } @media (max-width: 360px) { .default-tag__item--col { margin-top: 6.6666666667px; margin-top: 2.0833333333vw; } } .default-tag__item--gray { color: #888; } .default-tag__item--active { background-color: #222; color: #fff; } .default-tag__item--close:after { content: ''; display: inline-block; width: 27.2px; width: 3.5416666667vw; height: 27.2px; height: 3.5416666667vw; background: #fff url(/data/skin/mobile_skinfood/images/icon/icon_close_circle.svg) no-repeat; background-size: cover; vertical-align: middle; margin-left: 8px; margin-left: 1.0416666667vw; } @media (max-width: 360px) { .default-tag__item--close:after { width: 11.3333333333px; width: 3.5416666667vw; } } @media (max-width: 360px) { .default-tag__item--close:after { height: 11.3333333333px; height: 3.5416666667vw; } } @media (max-width: 360px) { .default-tag__item--close:after { margin-left: 3.3333333333px; margin-left: 1.0416666667vw; } } .default-filter { font-size: 28.8px; font-size: 3.75vw; padding-right: 40.8px; padding-right: 5.3125vw; background-image: url(/design/skinfood/mobile_skinfood/images/icon/icon_filter.svg); background-size: 24.8px 21.6px; background-size: 3.2291666667vw 2.8125vw; background-position: center right; background-repeat: no-repeat; } @media (max-width: 360px) { .default-filter { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .default-filter { padding-right: 17px; padding-right: 5.3125vw; } } @media (max-width: 320px) { .default-filter { background-size: 10.3333333333px 9px; background-size: 3.2291666667vw 2.8125vw; } } .dot-list--row { padding: 0px 38.4px; padding: 0vw 5vw; } @media (max-width: 320px) { .dot-list--row { padding: 0px 16px; padding: 0vw 5vw; } } .dot-list--row .dot-list__item { font-size: 28.8px; font-size: 3.75vw; line-height: 44.8px; line-height: 5.8333333333vw; word-break: keep-all; } @media (max-width: 360px) { .dot-list--row .dot-list__item { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .dot-list--row .dot-list__item { line-height: 18.6666666667px; line-height: 5.8333333333vw; } } .dot-list--row .dot-list__item + .dot-list__item { margin-top: 12px; margin-top: 1.5625vw; } @media (max-width: 360px) { .dot-list--row .dot-list__item + .dot-list__item { margin-top: 5px; margin-top: 1.5625vw; } } .dot-list--row .dot-list__item:before { top: 20px; top: 2.6041666667vw; bottom: auto; } @media (max-width: 360px) { .dot-list--row .dot-list__item:before { top: 8.3333333333px; top: 2.6041666667vw; } } .dot-list--margin { margin-top: 64px; margin-top: 8.3333333333vw; padding-top: 64px; padding-top: 8.3333333333vw; border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-color: #eee; border-top-style: solid; } @media (max-width: 360px) { .dot-list--margin { margin-top: 26.6666666667px; margin-top: 8.3333333333vw; } } @media (max-width: 360px) { .dot-list--margin { padding-top: 26.6666666667px; padding-top: 8.3333333333vw; } } @media (max-width: 360px) { .dot-list--margin { border-top-width: 1px; border-top-width: 0.3125vw; } } .dot-list__item { position: relative; padding-left: 17.6px; padding-left: 2.2916666667vw; line-height: 44px; line-height: 5.7291666667vw; letter-spacing: -0.288px; letter-spacing: -0.0375vw; } @media (max-width: 360px) { .dot-list__item { padding-left: 7.3333333333px; padding-left: 2.2916666667vw; } } @media (max-width: 360px) { .dot-list__item { line-height: 18.3333333333px; line-height: 5.7291666667vw; } } @media (max-width: 360px) { .dot-list__item { letter-spacing: -0.12px; letter-spacing: -0.0375vw; } } .dot-list__item--gray { color: #888; } .dot-list__item--gray:before { background-color: #888 !important; } .dot-list__item:before { position: absolute; top: 0; bottom: 0; left: 0; margin: auto; display: inline-block; width: 4.8px; width: 0.625vw; height: 4.8px; height: 0.625vw; border-radius: 50%; background-color: #222; content: ''; } @media (max-width: 360px) { .dot-list__item:before { width: 2px; width: 0.625vw; } } @media (max-width: 360px) { .dot-list__item:before { height: 2px; height: 0.625vw; } } .btn-wrap--2cols { margin-top: 32px; margin-top: 4.1666666667vw; font-size: 0; } @media (max-width: 360px) { .btn-wrap--2cols { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .btn-wrap--2cols .cta { width: 193.6px; width: 25.2083333333vw; } @media (max-width: 360px) { .btn-wrap--2cols .cta { width: 80.6666666667px; width: 25.2083333333vw; } } .btn-wrap--2cols .cta + .cta { margin-left: 16px; margin-left: 2.0833333333vw; } @media (max-width: 360px) { .btn-wrap--2cols .cta + .cta { margin-left: 6.6666666667px; margin-left: 2.0833333333vw; } } .progress-badge { display: inline-block; width: 122.4px; width: 15.9375vw; height: 122.4px; height: 15.9375vw; line-height: 120px; line-height: 15.625vw; font-size: 28.8px; font-size: 3.75vw; border-radius: 50%; text-align: center; font-weight: bold; color: #222; } @media (max-width: 360px) { .progress-badge { width: 51px; width: 15.9375vw; } } @media (max-width: 360px) { .progress-badge { height: 51px; height: 15.9375vw; } } @media (max-width: 360px) { .progress-badge { line-height: 50px; line-height: 15.625vw; } } @media (max-width: 360px) { .progress-badge { font-size: 12px; font-size: 3.75vw; } } .progress-badge--ing { border-width: 2.4px; border-width: 0.3125vw; border-color: #222; border-style: solid; } @media (max-width: 360px) { .progress-badge--ing { border-width: 1px; border-width: 0.3125vw; } } .progress-badge--fail { background-color: #f6f6f6; } .progress-badge--success { background-color: #fdb812; } .gray-badge { display: inline-block; margin-top: 22.4px; margin-top: 2.9166666667vw; padding: 11.2px 20px; padding: 1.4583333333vw 2.6041666667vw; line-height: 1; font-size: 26.4px; font-size: 3.4375vw; color: #222; background-color: #f6f6f6; } @media (max-width: 360px) { .gray-badge { margin-top: 9.3333333333px; margin-top: 2.9166666667vw; } } @media (max-width: 320px) { .gray-badge { padding: 4.6666666667px 8.3333333333px; padding: 1.4583333333vw 2.6041666667vw; } } @media (max-width: 360px) { .gray-badge { font-size: 11px; font-size: 3.4375vw; } } .content--margin-bottom { border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-bottom-color: #eee; border-bottom-style: solid; margin-bottom: 112px; margin-bottom: 14.5833333333vw; } @media (max-width: 360px) { .content--margin-bottom { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } @media (max-width: 360px) { .content--margin-bottom { margin-bottom: 46.6666666667px; margin-bottom: 14.5833333333vw; } } .content-empty { padding-top: 267.2px; padding-top: 34.7916666667vw; padding-bottom: 120px; padding-bottom: 15.625vw; text-align: center; } @media (max-width: 360px) { .content-empty { padding-top: 111.3333333333px; padding-top: 34.7916666667vw; } } @media (max-width: 360px) { .content-empty { padding-bottom: 50px; padding-bottom: 15.625vw; } } .content-empty--wish { background: url("/design/skinfood/mobile_skinfood/images/icon/icon_wish_empty.png") no-repeat; background-size: 100px 91.2px; background-size: 13.0208333333vw 11.875vw; background-position-y: 112px; background-position-y: 14.5833333333vw; background-position-x: center; } @media (max-width: 320px) { .content-empty--wish { background-size: 41.6666666667px 38px; background-size: 13.0208333333vw 11.875vw; } } @media (max-width: 360px) { .content-empty--wish { background-position-y: 46.6666666667px; background-position-y: 14.5833333333vw; } } .content-empty__title { font-size: 26.4px; font-size: 3.4375vw; font-weight: bold; } @media (max-width: 360px) { .content-empty__title { font-size: 11px; font-size: 3.4375vw; } } .content-empty__desc { margin-top: 24px; margin-top: 3.125vw; line-height: 38.4px; line-height: 5vw; font-size: 26.4px; font-size: 3.4375vw; } @media (max-width: 360px) { .content-empty__desc { margin-top: 10px; margin-top: 3.125vw; } } @media (max-width: 360px) { .content-empty__desc { line-height: 16px; line-height: 5vw; } } @media (max-width: 360px) { .content-empty__desc { font-size: 11px; font-size: 3.4375vw; } } .fixed-option__container { position: fixed; left: 0; bottom: 0; width: 100%; z-index: 1003; background: #fff; } .pop-content__table { width: 100%; color: #222; } .pop-content__table tr:first-child td { padding-top: 0; } .pop-content__table td { padding-top: 38.4px; padding-top: 5vw; font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .pop-content__table td { padding-top: 16px; padding-top: 5vw; } } @media (max-width: 360px) { .pop-content__table td { font-size: 12px; font-size: 3.75vw; } } .pop-content__table .left { color: #888; } .pop-container { margin-top: 64px; margin-top: 8.3333333333vw; margin-bottom: 80px; margin-bottom: 10.4166666667vw; padding-top: 64px; padding-top: 8.3333333333vw; border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-style: solid; border-top-color: #eee; } @media (max-width: 360px) { .pop-container { margin-top: 26.6666666667px; margin-top: 8.3333333333vw; } } @media (max-width: 360px) { .pop-container { margin-bottom: 33.3333333333px; margin-bottom: 10.4166666667vw; } } @media (max-width: 360px) { .pop-container { padding-top: 26.6666666667px; padding-top: 8.3333333333vw; } } @media (max-width: 360px) { .pop-container { border-top-width: 1px; border-top-width: 0.3125vw; } } .pop-container__list li { position: relative; padding-left: 17.6px; padding-left: 2.2916666667vw; line-height: 52px; line-height: 6.7708333333vw; letter-spacing: -0.288px; letter-spacing: -0.0375vw; font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .pop-container__list li { padding-left: 7.3333333333px; padding-left: 2.2916666667vw; } } @media (max-width: 360px) { .pop-container__list li { line-height: 21.6666666667px; line-height: 6.7708333333vw; } } @media (max-width: 360px) { .pop-container__list li { letter-spacing: -0.12px; letter-spacing: -0.0375vw; } } @media (max-width: 360px) { .pop-container__list li { font-size: 12px; font-size: 3.75vw; } } .pop-container__list li:before { position: absolute; top: 20px; top: 2.6041666667vw; left: 0; display: inline-block; width: 4.8px; width: 0.625vw; height: 4.8px; height: 0.625vw; border-radius: 50%; background-color: #222; content: ''; } @media (max-width: 360px) { .pop-container__list li:before { top: 8.3333333333px; top: 2.6041666667vw; } } @media (max-width: 360px) { .pop-container__list li:before { width: 2px; width: 0.625vw; } } @media (max-width: 360px) { .pop-container__list li:before { height: 2px; height: 0.625vw; } } /*# sourceMappingURL=default.css.map */ .product:before { display: block; height: 11.2px; height: 1.4583333333vw; border-width: 2.4px; border-width: 0.3125vw; border-top-style: solid; border-top-color: #ddd; background-color: #f7f7f7; content: ''; } @media (max-width: 360px) { .product:before { height: 4.6666666667px; height: 1.4583333333vw; } } @media (max-width: 360px) { .product:before { border-width: 1px; border-width: 0.3125vw; } } .product-tab { border-width: 2.4px; border-width: 0.3125vw; border-top-style: solid; border-bottom-style: solid; border-top-color: #ddd; border-bottom-color: #ddd; background-color: #fff; box-sizing: border-box; } @media (max-width: 360px) { .product-tab { border-width: 1px; border-width: 0.3125vw; } } .product-tab__list { font-size: 0; } .product-tab__item { display: inline-block; width: 25%; padding: 38.4px 0px 32px; padding: 5vw 0vw 4.1666666667vw; font-size: 26.4px; font-size: 3.4375vw; line-height: 1; color: #888; text-align: center; } @media (max-width: 320px) { .product-tab__item { padding: 16px 0px 13.3333333333px; padding: 5vw 0vw 4.1666666667vw; } } @media (max-width: 360px) { .product-tab__item { font-size: 11px; font-size: 3.4375vw; } } .product-tab__item--small { font-size: 24px; font-size: 3.125vw; font-weight: normal; } @media (max-width: 360px) { .product-tab__item--small { font-size: 10px; font-size: 3.125vw; } } .product-tab__item:first-child { margin-left: 0; } .product-tab__item--active { color: #222; border-bottom-width: 6.4px; border-bottom-width: 0.8333333333vw; border-bottom-style: solid; border-bottom-color: #222; } @media (max-width: 360px) { .product-tab__item--active { border-bottom-width: 2.6666666667px; border-bottom-width: 0.8333333333vw; } } .product-tab__item a { color: inherit; font-weight: bold; } .product-desc { margin-bottom: 64px; margin-bottom: 8.3333333333vw; } @media (max-width: 360px) { .product-desc { margin-bottom: 26.6666666667px; margin-bottom: 8.3333333333vw; } } .product-desc img { width: 100%; } .product-list--recommend { padding: 123.2px 38.4px 28px; padding: 16.0416666667vw 5vw 3.6458333333vw; background: url("/design/skinfood/mobile_skinfood/images/bg/bg_goods.png") no-repeat; background-size: cover; } @media (max-width: 320px) { .product-list--recommend { padding: 51.3333333333px 16px 11.6666666667px; padding: 16.0416666667vw 5vw 3.6458333333vw; } } .product-list--recommend .content-product__list { margin-left: 0; } .product__title { font-size: 38.4px; font-size: 5vw; padding: 0px 40.8px; padding: 0vw 5.3125vw; line-height: 96px; line-height: 12.5vw; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-bottom-style: solid; border-bottom-color: #eee; color: #212121; font-size: 33.6px; font-size: 4.375vw; font-weight: bold; } @media (max-width: 360px) { .product__title { font-size: 16px; font-size: 5vw; } } @media (max-width: 320px) { .product__title { padding: 0px 17px; padding: 0vw 5.3125vw; } } @media (max-width: 360px) { .product__title { line-height: 40px; line-height: 12.5vw; } } @media (max-width: 360px) { .product__title { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } @media (max-width: 360px) { .product__title { font-size: 14px; font-size: 4.375vw; } } .product__title--large { margin-bottom: 48px; margin-bottom: 6.25vw; border: none; padding: 0; font-size: 55.2px; font-size: 7.1875vw; text-align: center; line-height: 1; } @media (max-width: 360px) { .product__title--large { margin-bottom: 20px; margin-bottom: 6.25vw; } } @media (max-width: 360px) { .product__title--large { font-size: 23px; font-size: 7.1875vw; } } .product-review__score { margin-top: 52px; margin-top: 6.7708333333vw; text-align: center; line-height: 1; } @media (max-width: 360px) { .product-review__score { margin-top: 21.6666666667px; margin-top: 6.7708333333vw; } } .product-review__star { margin-right: 21.6px; margin-right: 2.8125vw; font-size: 0; } @media (max-width: 360px) { .product-review__star { margin-right: 9px; margin-right: 2.8125vw; } } .product-review__star img { display: inline-block; width: 35.2px; width: 4.5833333333vw; margin-left: 7.2px; margin-left: 0.9375vw; } @media (max-width: 360px) { .product-review__star img { width: 14.6666666667px; width: 4.5833333333vw; } } @media (max-width: 360px) { .product-review__star img { margin-left: 3px; margin-left: 0.9375vw; } } .product-review__sum { font-size: 28.8px; font-size: 3.75vw; vertical-align: bottom; vertical-align: sub; } @media (max-width: 360px) { .product-review__sum { font-size: 12px; font-size: 3.75vw; } } .product-review__sum--strong { font-size: 48px; font-size: 6.25vw; } @media (max-width: 360px) { .product-review__sum--strong { font-size: 20px; font-size: 6.25vw; } } .product-review__desc { margin-top: 40px; margin-top: 5.2083333333vw; line-height: 44.8px; line-height: 5.8333333333vw; font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .product-review__desc { margin-top: 16.6666666667px; margin-top: 5.2083333333vw; } } @media (max-width: 360px) { .product-review__desc { line-height: 18.6666666667px; line-height: 5.8333333333vw; } } @media (max-width: 360px) { .product-review__desc { font-size: 12px; font-size: 3.75vw; } } .product-review__anchor { font-weight: bold; text-decoration: underline; } .product-review__graph { margin-top: 56px; margin-top: 7.2916666667vw; padding: 0px 38.4px 56px; padding: 0vw 5vw 7.2916666667vw; border-bottom-width: 3.2px; border-bottom-width: 0.4166666667vw; border-bottom-color: #eee; border-bottom-style: solid; } @media (max-width: 360px) { .product-review__graph { margin-top: 23.3333333333px; margin-top: 7.2916666667vw; } } @media (max-width: 320px) { .product-review__graph { padding: 0px 16px 23.3333333333px; padding: 0vw 5vw 7.2916666667vw; } } @media (max-width: 360px) { .product-review__graph { border-bottom-width: 1.3333333333px; border-bottom-width: 0.4166666667vw; } } .product-review__graph-item { display: flex; justify-content: space-between; align-items: center; } .product-review__graph-item ~ .product-review__graph-item { margin-top: 24px; margin-top: 3.125vw; } @media (max-width: 360px) { .product-review__graph-item ~ .product-review__graph-item { margin-top: 10px; margin-top: 3.125vw; } } .product-review__graph-title { width: 144px; width: 18.75vw; font-size: 28.8px; font-size: 3.75vw; font-weight: bold; text-align: left; letter-spacing: -0.288px; letter-spacing: -0.0375vw; } @media (max-width: 360px) { .product-review__graph-title { width: 60px; width: 18.75vw; } } @media (max-width: 360px) { .product-review__graph-title { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .product-review__graph-title { letter-spacing: -0.12px; letter-spacing: -0.0375vw; } } .product-review__graph-percent { font-size: 31.2px; font-size: 4.0625vw; } @media (max-width: 360px) { .product-review__graph-percent { font-size: 13px; font-size: 4.0625vw; } } .product-review__graph-bg { position: relative; width: 440.8px; width: 57.3958333333vw; height: 13.6px; height: 1.7708333333vw; border-radius: 6.4px; border-radius: 0.8333333333vw; background-color: #eee; } @media (max-width: 360px) { .product-review__graph-bg { width: 183.6666666667px; width: 57.3958333333vw; } } @media (max-width: 360px) { .product-review__graph-bg { height: 5.6666666667px; height: 1.7708333333vw; } } @media (max-width: 360px) { .product-review__graph-bg { border-radius: 2.6666666667px; border-radius: 0.8333333333vw; } } .product-review__graph-active { position: absolute; left: 0; top: 0; height: 13.6px; height: 1.7708333333vw; border-radius: 6.4px; border-radius: 0.8333333333vw; background-color: #222; } @media (max-width: 360px) { .product-review__graph-active { height: 5.6666666667px; height: 1.7708333333vw; } } @media (max-width: 360px) { .product-review__graph-active { border-radius: 2.6666666667px; border-radius: 0.8333333333vw; } } .goods__img { position: relative; width: 100%; padding: 140px 0px 124px; padding: 18.2291666667vw 0vw 16.1458333333vw; vertical-align: middle; text-align: center; } @media (max-width: 320px) { .goods__img { padding: 58.3333333333px 0px 51.6666666667px; padding: 18.2291666667vw 0vw 16.1458333333vw; } } .goods__img .goods_thumbs_image { display: inline-block; width: 100%; } .goods__img .slick-dots { bottom: -76px; bottom: -9.8958333333vw; } @media (max-width: 360px) { .goods__img .slick-dots { bottom: -31.6666666667px; bottom: -9.8958333333vw; } } .goods__icon { position: absolute; top: 39.2px; top: 5.1041666667vw; left: 39.2px; left: 5.1041666667vw; z-index: 1; } @media (max-width: 360px) { .goods__icon { top: 16.3333333333px; top: 5.1041666667vw; } } @media (max-width: 360px) { .goods__icon { left: 16.3333333333px; left: 5.1041666667vw; } } .goods__spec { padding: 32px 38.4px 0px; padding: 4.1666666667vw 5vw 0vw; } @media (max-width: 320px) { .goods__spec { padding: 13.3333333333px 16px 0px; padding: 4.1666666667vw 5vw 0vw; } } .goods__name { font-size: 38.4px; font-size: 5vw; letter-spacing: -0.384px; letter-spacing: -0.05vw; font-weight: bold; } @media (max-width: 360px) { .goods__name { font-size: 16px; font-size: 5vw; } } @media (max-width: 360px) { .goods__name { letter-spacing: -0.16px; letter-spacing: -0.05vw; } } .goods__review { margin-top: 20px; margin-top: 2.6041666667vw; } @media (max-width: 360px) { .goods__review { margin-top: 8.3333333333px; margin-top: 2.6041666667vw; } } .goods__review-score { display: inline-block; vertical-align: middle; font-size: 0; } .goods__review-score img { display: inline-block; width: 24px; width: 3.125vw; height: auto; margin-left: 4.8px; margin-left: 0.625vw; } @media (max-width: 360px) { .goods__review-score img { width: 10px; width: 3.125vw; } } @media (max-width: 360px) { .goods__review-score img { margin-left: 2px; margin-left: 0.625vw; } } .goods__review-length { position: relative; display: inline-block; vertical-align: middle; margin-left: 11.2px; margin-left: 1.4583333333vw; font-size: 26.4px; font-size: 3.4375vw; } @media (max-width: 360px) { .goods__review-length { margin-left: 4.6666666667px; margin-left: 1.4583333333vw; } } @media (max-width: 360px) { .goods__review-length { font-size: 11px; font-size: 3.4375vw; } } .goods__review-length:before { position: absolute; left: 0; bottom: -2.4px; bottom: -0.3125vw; display: inline-block; width: 100%; height: 2.4px; height: 0.3125vw; background: #222; content: ''; } @media (max-width: 360px) { .goods__review-length:before { bottom: -1px; bottom: -0.3125vw; } } @media (max-width: 360px) { .goods__review-length:before { height: 1px; height: 0.3125vw; } } .goods__info ~ .goods__info { border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-color: #eee; border-top-style: solid; } @media (max-width: 360px) { .goods__info ~ .goods__info { border-top-width: 1px; border-top-width: 0.3125vw; } } .goods__info--price { padding: 28px 0px 33.6px; padding: 3.6458333333vw 0vw 4.375vw; } @media (max-width: 320px) { .goods__info--price { padding: 11.6666666667px 0px 14px; padding: 3.6458333333vw 0vw 4.375vw; } } .goods__info--tag { padding: 32px 0px 16px; padding: 4.1666666667vw 0vw 2.0833333333vw; } @media (max-width: 320px) { .goods__info--tag { padding: 13.3333333333px 0px 6.6666666667px; padding: 4.1666666667vw 0vw 2.0833333333vw; } } .goods__title { display: inline-block; font-size: 28.8px; font-size: 3.75vw; font-weight: bold; } @media (max-width: 360px) { .goods__title { font-size: 12px; font-size: 3.75vw; } } .goods__title--benefit { padding-right: 48.8px; padding-right: 6.3541666667vw; background: url("/design/skinfood/mobile_skinfood/images/icon/icon_info.png") no-repeat; background-position: right center; background-size: 30.4px 30.4px; background-size: 3.9583333333vw 3.9583333333vw; } @media (max-width: 360px) { .goods__title--benefit { padding-right: 20.3333333333px; padding-right: 6.3541666667vw; } } @media (max-width: 320px) { .goods__title--benefit { background-size: 12.6666666667px 12.6666666667px; background-size: 3.9583333333vw 3.9583333333vw; } } .goods__title--coupon { width: 145.6px; width: 18.9583333333vw; padding: 40px 0px; padding: 5.2083333333vw 0vw; } @media (max-width: 360px) { .goods__title--coupon { width: 60.6666666667px; width: 18.9583333333vw; } } @media (max-width: 320px) { .goods__title--coupon { padding: 16.6666666667px 0px; padding: 5.2083333333vw 0vw; } } .goods__title--tag { width: 145.6px; width: 18.9583333333vw; vertical-align: top; } @media (max-width: 360px) { .goods__title--tag { width: 60.6666666667px; width: 18.9583333333vw; } } .goods__price-container { float: right; line-height: 1; } .goods__price-after { padding-left: 14.4px; padding-left: 1.875vw; font-size: 38.4px; font-size: 5vw; color: #ff593e; font-weight: bold; } @media (max-width: 360px) { .goods__price-after { padding-left: 6px; padding-left: 1.875vw; } } @media (max-width: 360px) { .goods__price-after { font-size: 16px; font-size: 5vw; } } .goods__price-before { font-size: 26.4px; font-size: 3.4375vw; color: #888; text-decoration: line-through; } @media (max-width: 360px) { .goods__price-before { font-size: 11px; font-size: 3.4375vw; } } .goods__coupon { display: inline-block; width: 536px; width: 69.7916666667vw; height: 64px; height: 8.3333333333vw; padding-left: 16px; padding-left: 2.0833333333vw; padding-right: 98.4px; padding-right: 12.8125vw; background: url("/design/skinfood/mobile_skinfood/images/bg/bg_coupon.svg") no-repeat; background-size: contain; font-size: 26.4px; font-size: 3.4375vw; line-height: 64px; line-height: 8.3333333333vw; box-sizing: border-box; overflow: hidden; vertical-align: middle; } @media (max-width: 360px) { .goods__coupon { width: 223.3333333333px; width: 69.7916666667vw; } } @media (max-width: 360px) { .goods__coupon { height: 26.6666666667px; height: 8.3333333333vw; } } @media (max-width: 360px) { .goods__coupon { padding-left: 6.6666666667px; padding-left: 2.0833333333vw; } } @media (max-width: 360px) { .goods__coupon { padding-right: 41px; padding-right: 12.8125vw; } } @media (max-width: 360px) { .goods__coupon { font-size: 11px; font-size: 3.4375vw; } } @media (max-width: 360px) { .goods__coupon { line-height: 26.6666666667px; line-height: 8.3333333333vw; } } .goods__coupon--have { background-image: url("/design/skinfood/mobile_skinfood/images/bg/bg_coupon_have.svg"); } .goods__gift { display: inline-block; width: 70%; vertical-align: middle; font-size: 26.4px; font-size: 3.4375vw; } @media (max-width: 360px) { .goods__gift { font-size: 11px; font-size: 3.4375vw; } } .goods__tag { display: inline-block; width: 536px; width: 69.7916666667vw; } @media (max-width: 360px) { .goods__tag { width: 223.3333333333px; width: 69.7916666667vw; } } .goods__tag-item { display: inline-block; margin-left: 9.6px; margin-left: 1.25vw; margin-bottom: 16px; margin-bottom: 2.0833333333vw; padding: 10.4px 22.4px; padding: 1.3541666667vw 2.9166666667vw; border-radius: 23.2px; border-radius: 3.0208333333vw; background-color: #f7f7f7; line-height: 1; font-size: 26.4px; font-size: 3.4375vw; } @media (max-width: 360px) { .goods__tag-item { margin-left: 4px; margin-left: 1.25vw; } } @media (max-width: 360px) { .goods__tag-item { margin-bottom: 6.6666666667px; margin-bottom: 2.0833333333vw; } } @media (max-width: 320px) { .goods__tag-item { padding: 4.3333333333px 9.3333333333px; padding: 1.3541666667vw 2.9166666667vw; } } @media (max-width: 360px) { .goods__tag-item { border-radius: 9.6666666667px; border-radius: 3.0208333333vw; } } @media (max-width: 360px) { .goods__tag-item { font-size: 11px; font-size: 3.4375vw; } } .goods__tag-item:before { content: '#'; } .goods-detail__container:first-child { position: relative; } .goods-detail__container:first-child:before { display: inline-block; width: 164.8px; width: 21.4583333333vw; height: 165.6px; height: 21.5625vw; position: absolute; top: -82.4px; top: -10.7291666667vw; left: -104px; left: -13.5416666667vw; background: url("/design/skinfood/mobile_skinfood/images/icon/icon_tape.svg") no-repeat; background-size: contain; content: ''; } @media (max-width: 360px) { .goods-detail__container:first-child:before { width: 68.6666666667px; width: 21.4583333333vw; } } @media (max-width: 360px) { .goods-detail__container:first-child:before { height: 69px; height: 21.5625vw; } } @media (max-width: 360px) { .goods-detail__container:first-child:before { top: -34.3333333333px; top: -10.7291666667vw; } } @media (max-width: 360px) { .goods-detail__container:first-child:before { left: -43.3333333333px; left: -13.5416666667vw; } } .goods-detail__img { display: inline-block; width: 337.6px; width: 43.9583333333vw; height: 337.6px; height: 43.9583333333vw; margin-bottom: 24px; margin-bottom: 3.125vw; background-color: #f9f9f9; } @media (max-width: 360px) { .goods-detail__img { width: 140.6666666667px; width: 43.9583333333vw; } } @media (max-width: 360px) { .goods-detail__img { height: 140.6666666667px; height: 43.9583333333vw; } } @media (max-width: 360px) { .goods-detail__img { margin-bottom: 10px; margin-bottom: 3.125vw; } } .goods-detail__list { padding-left: 16px; padding-left: 2.0833333333vw; } @media (max-width: 360px) { .goods-detail__list { padding-left: 6.6666666667px; padding-left: 2.0833333333vw; } } .goods-detail__item { color: #212121; } .goods-detail__item--category { margin-bottom: 11.2px; margin-bottom: 1.4583333333vw; color: #999; font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .goods-detail__item--category { margin-bottom: 4.6666666667px; margin-bottom: 1.4583333333vw; } } @media (max-width: 360px) { .goods-detail__item--category { font-size: 12px; font-size: 3.75vw; } } .goods-detail__item--name { display: inline-block; height: 72px; height: 9.375vw; line-height: 38.8px; line-height: 5.0520833333vw; margin-bottom: 12px; margin-bottom: 1.5625vw; font-size: 28.8px; font-size: 3.75vw; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 360px) { .goods-detail__item--name { height: 30px; height: 9.375vw; } } @media (max-width: 360px) { .goods-detail__item--name { line-height: 16.1666666667px; line-height: 5.0520833333vw; } } @media (max-width: 360px) { .goods-detail__item--name { margin-bottom: 5px; margin-bottom: 1.5625vw; } } @media (max-width: 360px) { .goods-detail__item--name { font-size: 12px; font-size: 3.75vw; } } .goods-detail__item--price { font-size: 33.6px; font-size: 4.375vw; font-weight: bold; } @media (max-width: 360px) { .goods-detail__item--price { font-size: 14px; font-size: 4.375vw; } } .goods-detail__item--price-sale { font-size: 26.4px; font-size: 3.4375vw; color: #999; font-weight: normal; text-decoration: line-through; font-size: 26.4px; font-size: 3.4375vw; } @media (max-width: 360px) { .goods-detail__item--price-sale { font-size: 11px; font-size: 3.4375vw; } } @media (max-width: 360px) { .goods-detail__item--price-sale { font-size: 11px; font-size: 3.4375vw; } } .goods-detail__btn { margin-top: 45.6px; margin-top: 5.9375vw; } @media (max-width: 360px) { .goods-detail__btn { margin-top: 19px; margin-top: 5.9375vw; } } .goods-detail__btn .cta { padding: 16px 41.6px; padding: 2.0833333333vw 5.4166666667vw; font-size: 26.4px; font-size: 3.4375vw; font-weight: normal; } @media (max-width: 320px) { .goods-detail__btn .cta { padding: 6.6666666667px 17.3333333333px; padding: 2.0833333333vw 5.4166666667vw; } } @media (max-width: 360px) { .goods-detail__btn .cta { font-size: 11px; font-size: 3.4375vw; } } .goods-dockbar__container { display: flex; justify-content: space-between; } .goods-dockbar__container input { border: none; background: none; } .goods-dockbar__btn--wish { flex: 1; border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-style: solid; border-top-color: #222; background: #fff url("/design/skinfood/mobile_skinfood/images/icon/icon_wish.png") no-repeat; background-size: 48px 48px; background-size: 6.25vw 6.25vw; background-position: center; font-size: 0; } @media (max-width: 360px) { .goods-dockbar__btn--wish { border-top-width: 1px; border-top-width: 0.3125vw; } } @media (max-width: 320px) { .goods-dockbar__btn--wish { background-size: 20px 20px; background-size: 6.25vw 6.25vw; } } .goods-dockbar__btn--share { flex: 1; border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-style: solid; border-top-color: #222; border-left-width: 2.4px; border-left-width: 0.3125vw; border-left-style: solid; border-left-color: #222; background: #fff url("/design/skinfood/mobile_skinfood/images/icon/icon_share.png") no-repeat; background-size: 39.2px 48.8px; background-size: 5.1041666667vw 6.3541666667vw; background-position: center; font-size: 0; } @media (max-width: 360px) { .goods-dockbar__btn--share { border-top-width: 1px; border-top-width: 0.3125vw; } } @media (max-width: 360px) { .goods-dockbar__btn--share { border-left-width: 1px; border-left-width: 0.3125vw; } } @media (max-width: 320px) { .goods-dockbar__btn--share { background-size: 16.3333333333px 20.3333333333px; background-size: 5.1041666667vw 6.3541666667vw; } } .goods-dockbar__btn--buy input { width: 528px; width: 68.75vw; height: 120px; height: 15.625vw; line-height: 120px; line-height: 15.625vw; font-size: 31.2px; font-size: 4.0625vw; color: #222; background-color: #fdb80d; font-weight: bold; } @media (max-width: 360px) { .goods-dockbar__btn--buy input { width: 220px; width: 68.75vw; } } @media (max-width: 360px) { .goods-dockbar__btn--buy input { height: 50px; height: 15.625vw; } } @media (max-width: 360px) { .goods-dockbar__btn--buy input { line-height: 50px; line-height: 15.625vw; } } @media (max-width: 360px) { .goods-dockbar__btn--buy input { font-size: 13px; font-size: 4.0625vw; } } .goods-dockbar__btn--black input { width: 528px; width: 68.75vw; height: 120px; height: 15.625vw; line-height: 120px; line-height: 15.625vw; font-size: 31.2px; font-size: 4.0625vw; color: #fff; background-color: #222; } @media (max-width: 360px) { .goods-dockbar__btn--black input { width: 220px; width: 68.75vw; } } @media (max-width: 360px) { .goods-dockbar__btn--black input { height: 50px; height: 15.625vw; } } @media (max-width: 360px) { .goods-dockbar__btn--black input { line-height: 50px; line-height: 15.625vw; } } @media (max-width: 360px) { .goods-dockbar__btn--black input { font-size: 13px; font-size: 4.0625vw; } } .goods-option { position: fixed; left: 0; bottom: 0; width: 100%; background-color: #fff; z-index: 1001; } .goods-option__header { position: relative; height: 104px; height: 13.5416666667vw; text-align: center; font-weight: bold; } @media (max-width: 360px) { .goods-option__header { height: 43.3333333333px; height: 13.5416666667vw; } } .goods-option__header-title { line-height: 104px; line-height: 13.5416666667vw; font-size: 33.6px; font-size: 4.375vw; } @media (max-width: 360px) { .goods-option__header-title { line-height: 43.3333333333px; line-height: 13.5416666667vw; } } @media (max-width: 360px) { .goods-option__header-title { font-size: 14px; font-size: 4.375vw; } } .goods-option__header-btn--close { display: inline-block; width: 39.2px; width: 5.1041666667vw; height: 38.4px; height: 5vw; position: absolute; right: 44px; right: 5.7291666667vw; top: 50%; transform: translateY(-50%); background: url("/design/skinfood/mobile_skinfood/images/icon/icon_popup_close.png") no-repeat; background-size: contain; font-size: 0; } @media (max-width: 360px) { .goods-option__header-btn--close { width: 16.3333333333px; width: 5.1041666667vw; } } @media (max-width: 360px) { .goods-option__header-btn--close { height: 16px; height: 5vw; } } @media (max-width: 360px) { .goods-option__header-btn--close { right: 18.3333333333px; right: 5.7291666667vw; } } .goods-option__container { padding-bottom: 32px; padding-bottom: 4.1666666667vw; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-bottom-color: #eee; border-bottom-style: solid; } @media (max-width: 360px) { .goods-option__container { padding-bottom: 13.3333333333px; padding-bottom: 4.1666666667vw; } } @media (max-width: 360px) { .goods-option__container { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .goods-option__container--bottom { border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-color: #eee; border-top-style: solid; } @media (max-width: 360px) { .goods-option__container--bottom { border-top-width: 1px; border-top-width: 0.3125vw; } } .goods-option__name { margin-bottom: 24px; margin-bottom: 3.125vw; padding: 48px 38.4px 0px; padding: 6.25vw 5vw 0vw; font-size: 27.2px; font-size: 3.5416666667vw; } @media (max-width: 360px) { .goods-option__name { margin-bottom: 10px; margin-bottom: 3.125vw; } } @media (max-width: 320px) { .goods-option__name { padding: 20px 16px 0px; padding: 6.25vw 5vw 0vw; } } @media (max-width: 360px) { .goods-option__name { font-size: 11.3333333333px; font-size: 3.5416666667vw; } } .goods-option__count-container--single .goods-option__count-left { border-bottom: none; } .goods-option__count-container--single .goods-option__count-right { border-bottom: none; } .goods-option__count-left { padding-left: 38.4px; padding-left: 5vw; padding-bottom: 57.6px; padding-bottom: 7.5vw; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-bottom-style: solid; border-bottom-color: #eee; } @media (max-width: 360px) { .goods-option__count-left { padding-left: 16px; padding-left: 5vw; } } @media (max-width: 360px) { .goods-option__count-left { padding-bottom: 24px; padding-bottom: 7.5vw; } } @media (max-width: 360px) { .goods-option__count-left { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .goods-option__count-right { padding-right: 38.4px; padding-right: 5vw; padding-bottom: 57.6px; padding-bottom: 7.5vw; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-bottom-style: solid; border-bottom-color: #eee; } @media (max-width: 360px) { .goods-option__count-right { padding-right: 16px; padding-right: 5vw; } } @media (max-width: 360px) { .goods-option__count-right { padding-bottom: 24px; padding-bottom: 7.5vw; } } @media (max-width: 360px) { .goods-option__count-right { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .goods-option__price { float: right; font-size: 31.2px; font-size: 4.0625vw; } @media (max-width: 360px) { .goods-option__price { font-size: 13px; font-size: 4.0625vw; } } .goods-option__price-left { padding-top: 32px; padding-top: 4.1666666667vw; padding-left: 38.4px; padding-left: 5vw; } @media (max-width: 360px) { .goods-option__price-left { padding-top: 13.3333333333px; padding-top: 4.1666666667vw; } } @media (max-width: 360px) { .goods-option__price-left { padding-left: 16px; padding-left: 5vw; } } .goods-option__price-right { padding-top: 35.2px; padding-top: 4.5833333333vw; padding-right: 38.4px; padding-right: 5vw; font-size: 38.4px; font-size: 5vw; } @media (max-width: 360px) { .goods-option__price-right { padding-top: 14.6666666667px; padding-top: 4.5833333333vw; } } @media (max-width: 360px) { .goods-option__price-right { padding-right: 16px; padding-right: 5vw; } } @media (max-width: 360px) { .goods-option__price-right { font-size: 16px; font-size: 5vw; } } .goods-option__price-title { font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .goods-option__price-title { font-size: 12px; font-size: 3.75vw; } } .goods-option__price-count { font-size: 26.4px; font-size: 3.4375vw; color: #888; } @media (max-width: 360px) { .goods-option__price-count { font-size: 11px; font-size: 3.4375vw; } } .goods-option__price--close { font-size: 31.2px; font-size: 4.0625vw; } @media (max-width: 360px) { .goods-option__price--close { font-size: 13px; font-size: 4.0625vw; } } .goods-option__btn--count { width: 44.8px; width: 5.8333333333vw; height: 44.8px; height: 5.8333333333vw; background-size: contain; } @media (max-width: 360px) { .goods-option__btn--count { width: 18.6666666667px; width: 5.8333333333vw; } } @media (max-width: 360px) { .goods-option__btn--count { height: 18.6666666667px; height: 5.8333333333vw; } } .goods-option__btn--close { width: 44.8px; width: 5.8333333333vw; height: 44.8px; height: 5.8333333333vw; } @media (max-width: 360px) { .goods-option__btn--close { width: 18.6666666667px; width: 5.8333333333vw; } } @media (max-width: 360px) { .goods-option__btn--close { height: 18.6666666667px; height: 5.8333333333vw; } } .goods-option__input[type="number"] { width: 134.4px; width: 17.5vw; font-size: 31.2px; font-size: 4.0625vw; border: none; } @media (max-width: 360px) { .goods-option__input[type="number"] { width: 56px; width: 17.5vw; } } @media (max-width: 360px) { .goods-option__input[type="number"] { font-size: 13px; font-size: 4.0625vw; } } .goods-option__point { margin-top: 16px; margin-top: 2.0833333333vw; font-size: 26.4px; font-size: 3.4375vw; color: #999; } @media (max-width: 360px) { .goods-option__point { margin-top: 6.6666666667px; margin-top: 2.0833333333vw; } } @media (max-width: 360px) { .goods-option__point { font-size: 11px; font-size: 3.4375vw; } } .goods-option__total-price { font-size: 38.4px; font-size: 5vw; } @media (max-width: 360px) { .goods-option__total-price { font-size: 16px; font-size: 5vw; } } .goods_option_table { padding: 0px 38.4px; padding: 0vw 5vw; } @media (max-width: 320px) { .goods_option_table { padding: 0px 16px; padding: 0vw 5vw; } } .goods_quantity_table-wrap { padding: 0px 38.4px; padding: 0vw 5vw; } @media (max-width: 320px) { .goods_quantity_table-wrap { padding: 0px 16px; padding: 0vw 5vw; } } .goods-btn__cart input[type="button"] { height: 120px; height: 15.625vw; line-height: 120px; line-height: 15.625vw; background-color: #222; border: none; font-size: 31.2px; font-size: 4.0625vw; color: #fff; } @media (max-width: 360px) { .goods-btn__cart input[type="button"] { height: 50px; height: 15.625vw; } } @media (max-width: 360px) { .goods-btn__cart input[type="button"] { line-height: 50px; line-height: 15.625vw; } } @media (max-width: 360px) { .goods-btn__cart input[type="button"] { font-size: 13px; font-size: 4.0625vw; } } .goods-btn__buy input[type="button"] { height: 120px; height: 15.625vw; line-height: 120px; line-height: 15.625vw; background-color: #fdb80d; border: none; font-size: 31.2px; font-size: 4.0625vw; color: #222; } @media (max-width: 360px) { .goods-btn__buy input[type="button"] { height: 50px; height: 15.625vw; } } @media (max-width: 360px) { .goods-btn__buy input[type="button"] { line-height: 50px; line-height: 15.625vw; } } @media (max-width: 360px) { .goods-btn__buy input[type="button"] { font-size: 13px; font-size: 4.0625vw; } } .goods-search { margin-top: 33.6px; margin-top: 4.375vw; } @media (max-width: 360px) { .goods-search { margin-top: 14px; margin-top: 4.375vw; } } .goods-search .header__search { position: static; display: block; } .goods-search__result { margin-top: 43.2px; margin-top: 5.625vw; } @media (max-width: 360px) { .goods-search__result { margin-top: 18px; margin-top: 5.625vw; } } .goods-search__result--margin-bottom { margin-bottom: 108px; margin-bottom: 14.0625vw; } @media (max-width: 360px) { .goods-search__result--margin-bottom { margin-bottom: 45px; margin-bottom: 14.0625vw; } } .goods-search__result-title { text-align: center; font-size: 33.6px; font-size: 4.375vw; color: #222; font-weight: bold; } @media (max-width: 360px) { .goods-search__result-title { font-size: 14px; font-size: 4.375vw; } } .goods-search__result-text { text-align: center; font-size: 28.8px; font-size: 3.75vw; margin-top: 21.6px; margin-top: 2.8125vw; color: #222; } @media (max-width: 360px) { .goods-search__result-text { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .goods-search__result-text { margin-top: 9px; margin-top: 2.8125vw; } } .goods__view img { width: 522.4px; width: 68.0208333333vw; height: auto; } @media (max-width: 360px) { .goods__view img { width: 217.6666666667px; width: 68.0208333333vw; } } .review-detail__goods { display: flex; } .review-detail__goods-thumb { display: inline-block; vertical-align: top; width: 240px; width: 31.25vw; height: 240px; height: 31.25vw; } @media (max-width: 360px) { .review-detail__goods-thumb { width: 100px; width: 31.25vw; } } @media (max-width: 360px) { .review-detail__goods-thumb { height: 100px; height: 31.25vw; } } .review-detail__goods-thumb img { width: 100%; height: 100%; } .review-detail__goods-thumb + .review-detail__goods-info { margin-left: 48px; margin-left: 6.25vw; } @media (max-width: 360px) { .review-detail__goods-thumb + .review-detail__goods-info { margin-left: 20px; margin-left: 6.25vw; } } .review-detail__goods-info { display: inline-block; vertical-align: top; width: 400px; width: 52.0833333333vw; padding-bottom: 14.4px; padding-bottom: 1.875vw; } @media (max-width: 360px) { .review-detail__goods-info { width: 166.6666666667px; width: 52.0833333333vw; } } @media (max-width: 360px) { .review-detail__goods-info { padding-bottom: 6px; padding-bottom: 1.875vw; } } .review-detail__goods .review-detail__title { margin-top: 38.4px; margin-top: 5vw; } @media (max-width: 360px) { .review-detail__goods .review-detail__title { margin-top: 16px; margin-top: 5vw; } } .review-detail__goods .review-detail__content { margin-top: 14.4px; margin-top: 1.875vw; } @media (max-width: 360px) { .review-detail__goods .review-detail__content { margin-top: 6px; margin-top: 1.875vw; } } .review-detail__list--bg { background-color: #f6f6f6; } .review-detail__item { padding: 64px 0px 64px 38.4px; padding: 8.3333333333vw 0vw 8.3333333333vw 5vw; border-bottom-width: 3.2px; border-bottom-width: 0.4166666667vw; background-color: #fff; border-bottom-color: #eee; border-bottom-style: solid; } @media (max-width: 320px) { .review-detail__item { padding: 26.6666666667px 0px 26.6666666667px 16px; padding: 8.3333333333vw 0vw 8.3333333333vw 5vw; } } @media (max-width: 360px) { .review-detail__item { border-bottom-width: 1.3333333333px; border-bottom-width: 0.4166666667vw; } } .review-detail__item:first-child { border-top: none; } .review-detail__item--side-padding { padding-left: 38.4px; padding-left: 5vw; padding-right: 38.4px; padding-right: 5vw; } @media (max-width: 360px) { .review-detail__item--side-padding { padding-left: 16px; padding-left: 5vw; } } @media (max-width: 360px) { .review-detail__item--side-padding { padding-right: 16px; padding-right: 5vw; } } .review-detail__item--margin-top ~ .review-detail__item--margin-top { margin-top: 11.2px; margin-top: 1.4583333333vw; } @media (max-width: 360px) { .review-detail__item--margin-top ~ .review-detail__item--margin-top { margin-top: 4.6666666667px; margin-top: 1.4583333333vw; } } .review-detail__item--border-bottom { border-bottom-width: 3.2px; border-bottom-width: 0.4166666667vw; border-bottom-color: #eee; border-bottom-style: solid; } @media (max-width: 360px) { .review-detail__item--border-bottom { border-bottom-width: 1.3333333333px; border-bottom-width: 0.4166666667vw; } } .review-detail__item--active { background-color: #f6f6f6; } .review-detail__info { overflow: hidden; line-height: 1; padding-right: 38.4px; padding-right: 5vw; } @media (max-width: 360px) { .review-detail__info { padding-right: 16px; padding-right: 5vw; } } .review-detail__info--margin-top { margin-top: 38.4px; margin-top: 5vw; } @media (max-width: 360px) { .review-detail__info--margin-top { margin-top: 16px; margin-top: 5vw; } } .review-detail__info-left { float: left; } .review-detail__info-left img { width: 24px; width: 3.125vw; height: 24px; height: 3.125vw; } @media (max-width: 360px) { .review-detail__info-left img { width: 10px; width: 3.125vw; } } @media (max-width: 360px) { .review-detail__info-left img { height: 10px; height: 3.125vw; } } .review-detail__info-right { float: right; } .review-detail__user-name { font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .review-detail__user-name { font-size: 12px; font-size: 3.75vw; } } .review-detail__date { padding-left: 20px; padding-left: 2.6041666667vw; font-size: 28.8px; font-size: 3.75vw; color: #999; } @media (max-width: 360px) { .review-detail__date { padding-left: 8.3333333333px; padding-left: 2.6041666667vw; } } @media (max-width: 360px) { .review-detail__date { font-size: 12px; font-size: 3.75vw; } } .review-detail__date:before { display: inline-block; width: 2.4px; width: 0.3125vw; height: 24.8px; height: 3.2291666667vw; margin-right: 20px; margin-right: 2.6041666667vw; background-color: #eee; content: ''; } @media (max-width: 360px) { .review-detail__date:before { width: 1px; width: 0.3125vw; } } @media (max-width: 360px) { .review-detail__date:before { height: 10.3333333333px; height: 3.2291666667vw; } } @media (max-width: 360px) { .review-detail__date:before { margin-right: 8.3333333333px; margin-right: 2.6041666667vw; } } .review-detail__date--tight { padding-left: 14.4px; padding-left: 1.875vw; } @media (max-width: 360px) { .review-detail__date--tight { padding-left: 6px; padding-left: 1.875vw; } } .review-detail__date--tight:before { margin-right: 14.4px; margin-right: 1.875vw; vertical-align: middle; } @media (max-width: 360px) { .review-detail__date--tight:before { margin-right: 6px; margin-right: 1.875vw; } } .review-detail__title { margin-top: 28px; margin-top: 3.6458333333vw; font-size: 28.8px; font-size: 3.75vw; font-weight: bold; } @media (max-width: 360px) { .review-detail__title { margin-top: 11.6666666667px; margin-top: 3.6458333333vw; } } @media (max-width: 360px) { .review-detail__title { font-size: 12px; font-size: 3.75vw; } } .review-detail__title--row { -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .review-detail__content { display: none; margin-top: 28px; margin-top: 3.6458333333vw; font-size: 28.8px; font-size: 3.75vw; line-height: 44.8px; line-height: 5.8333333333vw; color: #888; } @media (max-width: 360px) { .review-detail__content { margin-top: 11.6666666667px; margin-top: 3.6458333333vw; } } @media (max-width: 360px) { .review-detail__content { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .review-detail__content { line-height: 18.6666666667px; line-height: 5.8333333333vw; } } .review-detail__content--padding-right { padding-right: 38.4px; padding-right: 5vw; } @media (max-width: 360px) { .review-detail__content--padding-right { padding-right: 16px; padding-right: 5vw; } } .review-detail__content--col { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 44.8px; line-height: 5.8333333333vw; margin-top: 9.6px; margin-top: 1.25vw; } @media (max-width: 360px) { .review-detail__content--col { line-height: 18.6666666667px; line-height: 5.8333333333vw; } } @media (max-width: 360px) { .review-detail__content--col { margin-top: 4px; margin-top: 1.25vw; } } .review-detail__review-wrap { display: flex; margin-top: 40.8px; margin-top: 5.3125vw; } @media (max-width: 360px) { .review-detail__review-wrap { margin-top: 17px; margin-top: 5.3125vw; } } .review-detail__thumb { display: inline-block; width: 160px; width: 20.8333333333vw; height: 160px; height: 20.8333333333vw; margin-top: 7.2px; margin-top: 0.9375vw; position: relative; } @media (max-width: 360px) { .review-detail__thumb { width: 66.6666666667px; width: 20.8333333333vw; } } @media (max-width: 360px) { .review-detail__thumb { height: 66.6666666667px; height: 20.8333333333vw; } } @media (max-width: 360px) { .review-detail__thumb { margin-top: 3px; margin-top: 0.9375vw; } } .review-detail__thumb + .review-detail__review { width: 483.2px; width: 62.9166666667vw; } @media (max-width: 360px) { .review-detail__thumb + .review-detail__review { width: 201.3333333333px; width: 62.9166666667vw; } } .review-detail__thumb img { width: 100%; height: 100%; } .review-detail__thumb-count { position: absolute; bottom: 0; right: 0; width: 64px; width: 8.3333333333vw; height: 64px; height: 8.3333333333vw; line-height: 64px; line-height: 8.3333333333vw; font-weight: bold; text-align: center; background-color: #222; opacity: 0.7; color: #fff; font-size: 26.4px; font-size: 3.4375vw; } @media (max-width: 360px) { .review-detail__thumb-count { width: 26.6666666667px; width: 8.3333333333vw; } } @media (max-width: 360px) { .review-detail__thumb-count { height: 26.6666666667px; height: 8.3333333333vw; } } @media (max-width: 360px) { .review-detail__thumb-count { line-height: 26.6666666667px; line-height: 8.3333333333vw; } } @media (max-width: 360px) { .review-detail__thumb-count { font-size: 11px; font-size: 3.4375vw; } } .review-detail__thumb + .review-detail__review { margin-left: 47.2px; margin-left: 6.1458333333vw; } @media (max-width: 360px) { .review-detail__thumb + .review-detail__review { margin-left: 19.6666666667px; margin-left: 6.1458333333vw; } } .review-detail__type { margin-top: 16px; margin-top: 2.0833333333vw; font-size: 28.8px; font-size: 3.75vw; padding-right: 19.2px; padding-right: 2.5vw; } @media (max-width: 360px) { .review-detail__type { margin-top: 6.6666666667px; margin-top: 2.0833333333vw; } } @media (max-width: 360px) { .review-detail__type { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .review-detail__type { padding-right: 8px; padding-right: 2.5vw; } } .review-detail__type-list--tight .review-detail__type-item ~ .review-detail__type-item:before { display: inline-block; width: 2.4px; width: 0.3125vw; height: 24px; height: 3.125vw; margin-right: 14.4px; margin-right: 1.875vw; margin-left: 14.4px; margin-left: 1.875vw; vertical-align: middle; background-color: #eee; content: ''; } @media (max-width: 360px) { .review-detail__type-list--tight .review-detail__type-item ~ .review-detail__type-item:before { width: 1px; width: 0.3125vw; } } @media (max-width: 360px) { .review-detail__type-list--tight .review-detail__type-item ~ .review-detail__type-item:before { height: 10px; height: 3.125vw; } } @media (max-width: 360px) { .review-detail__type-list--tight .review-detail__type-item ~ .review-detail__type-item:before { margin-right: 6px; margin-right: 1.875vw; } } @media (max-width: 360px) { .review-detail__type-list--tight .review-detail__type-item ~ .review-detail__type-item:before { margin-left: 6px; margin-left: 1.875vw; } } .review-detail__type-list--tight .review-detail__type-item:after { content: none; } .review-detail__type-item { display: inline-block; } .review-detail__type-item:after { display: inline-block; width: 2.4px; width: 0.3125vw; height: 24.8px; height: 3.2291666667vw; margin-right: 20px; margin-right: 2.6041666667vw; margin-left: 19.2px; margin-left: 2.5vw; background-color: #eee; content: ''; } @media (max-width: 360px) { .review-detail__type-item:after { width: 1px; width: 0.3125vw; } } @media (max-width: 360px) { .review-detail__type-item:after { height: 10.3333333333px; height: 3.2291666667vw; } } @media (max-width: 360px) { .review-detail__type-item:after { margin-right: 8.3333333333px; margin-right: 2.6041666667vw; } } @media (max-width: 360px) { .review-detail__type-item:after { margin-left: 8px; margin-left: 2.5vw; } } .review-detail__img { margin-top: 32px; margin-top: 4.1666666667vw; } @media (max-width: 360px) { .review-detail__img { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .review-detail__img-item { padding-left: 32px; padding-left: 4.1666666667vw; width: 656px; width: 85.4166666667vw; height: 456.8px; height: 59.4791666667vw; } @media (max-width: 360px) { .review-detail__img-item { padding-left: 13.3333333333px; padding-left: 4.1666666667vw; } } @media (max-width: 360px) { .review-detail__img-item { width: 273.3333333333px; width: 85.4166666667vw; } } @media (max-width: 360px) { .review-detail__img-item { height: 190.3333333333px; height: 59.4791666667vw; } } .review-detail__img-item:first-child { padding-left: 0; } .review-detail__star { margin-top: 16px; margin-top: 2.0833333333vw; } @media (max-width: 360px) { .review-detail__star { margin-top: 6.6666666667px; margin-top: 2.0833333333vw; } } .review-detail__star img { width: 48px; width: 6.25vw; height: 46.4px; height: 6.0416666667vw; } @media (max-width: 360px) { .review-detail__star img { width: 20px; width: 6.25vw; } } @media (max-width: 360px) { .review-detail__star img { height: 19.3333333333px; height: 6.0416666667vw; } } .review-detail__star img ~ img { margin-left: 9.6px; margin-left: 1.25vw; } @media (max-width: 360px) { .review-detail__star img ~ img { margin-left: 4px; margin-left: 1.25vw; } } .option__container .sbHolder { width: 100%; min-height: 90.4px; min-height: 11.7708333333vw; height: auto; line-height: 90.4px; line-height: 11.7708333333vw; border-width: 2.4px; border-width: 0.3125vw; border-style: solid; border-color: #ddd; color: #222; font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .option__container .sbHolder { min-height: 37.6666666667px; min-height: 11.7708333333vw; } } @media (max-width: 360px) { .option__container .sbHolder { line-height: 37.6666666667px; line-height: 11.7708333333vw; } } @media (max-width: 360px) { .option__container .sbHolder { border-width: 1px; border-width: 0.3125vw; } } @media (max-width: 360px) { .option__container .sbHolder { font-size: 12px; font-size: 3.75vw; } } .option__container .sbHolder .sbSelector { position: relative; padding-left: 39.2px; padding-left: 5.1041666667vw; } @media (max-width: 360px) { .option__container .sbHolder .sbSelector { padding-left: 16.3333333333px; padding-left: 5.1041666667vw; } } .option__container .sbHolder .sbSelector a { padding: 0px 38.4px; padding: 0vw 5vw; } @media (max-width: 320px) { .option__container .sbHolder .sbSelector a { padding: 0px 16px; padding: 0vw 5vw; } } .option__container .sbToggle { width: 103.2px; width: 13.4375vw; height: 90.4px; height: 11.7708333333vw; background: url("/design/skinfood/mobile_skinfood/images/icon/icon_arrow_down.png") no-repeat; background-size: 26.4px 16.8px; background-size: 3.4375vw 2.1875vw; background-position: center; } @media (max-width: 360px) { .option__container .sbToggle { width: 43px; width: 13.4375vw; } } @media (max-width: 360px) { .option__container .sbToggle { height: 37.6666666667px; height: 11.7708333333vw; } } @media (max-width: 320px) { .option__container .sbToggle { background-size: 11px 7px; background-size: 3.4375vw 2.1875vw; } } .option__container .sbToggle.sbToggleOpen { width: 103.2px; width: 13.4375vw; height: 90.4px; height: 11.7708333333vw; background: url("/design/skinfood/mobile_skinfood/images/icon/icon_arrow_down.png") no-repeat; background-size: 26.4px 16.8px; background-size: 3.4375vw 2.1875vw; background-position: center; transform: rotate(-180deg); } @media (max-width: 360px) { .option__container .sbToggle.sbToggleOpen { width: 43px; width: 13.4375vw; } } @media (max-width: 360px) { .option__container .sbToggle.sbToggleOpen { height: 37.6666666667px; height: 11.7708333333vw; } } @media (max-width: 320px) { .option__container .sbToggle.sbToggleOpen { background-size: 11px 7px; background-size: 3.4375vw 2.1875vw; } } .option__container .sbOptions { max-height: none !important; top: 0 !important; } .option__container .sbOptions li { border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-style: solid; border-top-color: #ddd; } @media (max-width: 360px) { .option__container .sbOptions li { border-top-width: 1px; border-top-width: 0.3125vw; } } .option__container .sbOptions li:first-child { display: none; } .option__container .sbOptions li a { padding: 0px 39.2px; padding: 0vw 5.1041666667vw; } @media (max-width: 320px) { .option__container .sbOptions li a { padding: 0px 16.3333333333px; padding: 0vw 5.1041666667vw; } } .option__container .btn_graybox { width: 44.8px; width: 5.8333333333vw; height: 44.8px; height: 5.8333333333vw; background-size: contain; } @media (max-width: 360px) { .option__container .btn_graybox { width: 18.6666666667px; width: 5.8333333333vw; } } @media (max-width: 360px) { .option__container .btn_graybox { height: 18.6666666667px; height: 5.8333333333vw; } } .option__title { font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .option__title { font-size: 12px; font-size: 3.75vw; } } .restock-desc { font-size: 28.8px; font-size: 3.75vw; height: 90.4px; height: 11.7708333333vw; padding: 0px 38.4px; padding: 0vw 5vw; line-height: 90.4px; line-height: 11.7708333333vw; background: #f6f6f6; } @media (max-width: 360px) { .restock-desc { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .restock-desc { height: 37.6666666667px; height: 11.7708333333vw; } } @media (max-width: 320px) { .restock-desc { padding: 0px 16px; padding: 0vw 5vw; } } @media (max-width: 360px) { .restock-desc { line-height: 37.6666666667px; line-height: 11.7708333333vw; } } .restock__container { margin-top: 60px; margin-top: 7.8125vw; padding: 0px 38.4px; padding: 0vw 5vw; } @media (max-width: 360px) { .restock__container { margin-top: 25px; margin-top: 7.8125vw; } } @media (max-width: 320px) { .restock__container { padding: 0px 16px; padding: 0vw 5vw; } } .restock__row { display: flex; align-items: center; margin-top: 28px; margin-top: 3.6458333333vw; justify-content: space-between; font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .restock__row { margin-top: 11.6666666667px; margin-top: 3.6458333333vw; } } @media (max-width: 360px) { .restock__row { font-size: 12px; font-size: 3.75vw; } } .restock__row:first-child { margin-top: 0; } .restock__row--wide { display: block; } .restock__title { width: 108.8px; width: 14.1666666667vw; font-size: 28.8px; font-size: 3.75vw; font-weight: bold; } @media (max-width: 360px) { .restock__title { width: 45.3333333333px; width: 14.1666666667vw; } } @media (max-width: 360px) { .restock__title { font-size: 12px; font-size: 3.75vw; } } .restock__title--wide { width: 100%; } .restock__info { flex: 1; font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .restock__info { font-size: 12px; font-size: 3.75vw; } } .restock__info--wide { width: 100%; margin-top: 28px; margin-top: 3.6458333333vw; } @media (max-width: 360px) { .restock__info--wide { margin-top: 11.6666666667px; margin-top: 3.6458333333vw; } } .restock__info--wide textarea { width: 100%; height: 240.8px; height: 31.3541666667vw; padding: 47.2px 40.8px; padding: 6.1458333333vw 5.3125vw; background-color: #f6f6f6; overflow-y: auto; box-sizing: border-box; font-size: 28.8px; font-size: 3.75vw; line-height: 44.8px; line-height: 5.8333333333vw; color: #222; } @media (max-width: 360px) { .restock__info--wide textarea { height: 100.3333333333px; height: 31.3541666667vw; } } @media (max-width: 320px) { .restock__info--wide textarea { padding: 19.6666666667px 17px; padding: 6.1458333333vw 5.3125vw; } } @media (max-width: 360px) { .restock__info--wide textarea { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .restock__info--wide textarea { line-height: 18.6666666667px; line-height: 5.8333333333vw; } } .restock__info--input { display: flex; justify-content: space-between; } .restock__info--input input[type="text"] { width: 200px; width: 26.0416666667vw; height: 92.8px; height: 12.0833333333vw; margin-left: 20.8px; margin-left: 2.7083333333vw; padding: 0px 39.2px; padding: 0vw 5.1041666667vw; line-height: 92.8px; line-height: 12.0833333333vw; border-width: 2.4px; border-width: 0.3125vw; border-color: #ddd; border-style: solid; font-size: 28.8px; font-size: 3.75vw; color: #888; } @media (max-width: 360px) { .restock__info--input input[type="text"] { width: 83.3333333333px; width: 26.0416666667vw; } } @media (max-width: 360px) { .restock__info--input input[type="text"] { height: 38.6666666667px; height: 12.0833333333vw; } } @media (max-width: 360px) { .restock__info--input input[type="text"] { margin-left: 8.6666666667px; margin-left: 2.7083333333vw; } } @media (max-width: 320px) { .restock__info--input input[type="text"] { padding: 0px 16.3333333333px; padding: 0vw 5.1041666667vw; } } @media (max-width: 360px) { .restock__info--input input[type="text"] { line-height: 38.6666666667px; line-height: 12.0833333333vw; } } @media (max-width: 360px) { .restock__info--input input[type="text"] { border-width: 1px; border-width: 0.3125vw; } } @media (max-width: 360px) { .restock__info--input input[type="text"] { font-size: 12px; font-size: 3.75vw; } } .restock__info--input input[type="text"]:first-child { margin-left: 0; } .restock__agree { margin: 32px 0px 69.6px; margin: 4.1666666667vw 0vw 9.0625vw; padding: 0px 38.4px; padding: 0vw 5vw; line-height: 1; font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 320px) { .restock__agree { margin: 13.3333333333px 0px 29px; margin: 4.1666666667vw 0vw 9.0625vw; } } @media (max-width: 320px) { .restock__agree { padding: 0px 16px; padding: 0vw 5vw; } } @media (max-width: 360px) { .restock__agree { font-size: 12px; font-size: 3.75vw; } } .restock__agree .ez-checkbox { width: 38.4px; width: 5vw; height: 38.4px; height: 5vw; } @media (max-width: 360px) { .restock__agree .ez-checkbox { width: 16px; width: 5vw; } } @media (max-width: 360px) { .restock__agree .ez-checkbox { height: 16px; height: 5vw; } } .restock__btn { width: 50%; height: 112px; height: 14.5833333333vw; line-height: 112px; line-height: 14.5833333333vw; font-size: 31.2px; font-size: 4.0625vw; border: none; } @media (max-width: 360px) { .restock__btn { height: 46.6666666667px; height: 14.5833333333vw; } } @media (max-width: 360px) { .restock__btn { line-height: 46.6666666667px; line-height: 14.5833333333vw; } } @media (max-width: 360px) { .restock__btn { font-size: 13px; font-size: 4.0625vw; } } .restock__btn-container { display: flex; width: 100%; } .restock__btn--submit { border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-style: solid; border-top-color: #222; color: #222; background: #fff; } @media (max-width: 360px) { .restock__btn--submit { border-top-width: 1px; border-top-width: 0.3125vw; } } .restock__btn--close { background-color: #222; color: #fff; } .goods-qna__header { position: relative; display: block; width: 100%; height: 104px; height: 13.5416666667vw; border: 0; border-bottom: 2.4px; border-bottom: 0.3125vw; border-style: solid; border-color: #dddddd; margin-bottom: 57.6px; margin-bottom: 7.5vw; } @media (max-width: 360px) { .goods-qna__header { height: 43.3333333333px; height: 13.5416666667vw; } } @media (max-width: 360px) { .goods-qna__header { border-bottom: 1px; border-bottom: 0.3125vw; } } @media (max-width: 360px) { .goods-qna__header { margin-bottom: 24px; margin-bottom: 7.5vw; } } .goods-qna__title { color: #222222; letter-spacing: -.42px; font-size: 33.6px; font-size: 4.375vw; } @media (max-width: 360px) { .goods-qna__title { font-size: 14px; font-size: 4.375vw; } } .goods-qna__title--popup { height: 104px; height: 13.5416666667vw; line-height: 104px; line-height: 13.5416666667vw; text-align: center; } @media (max-width: 360px) { .goods-qna__title--popup { height: 43.3333333333px; height: 13.5416666667vw; } } @media (max-width: 360px) { .goods-qna__title--popup { line-height: 43.3333333333px; line-height: 13.5416666667vw; } } .goods-qna__title--sub { font-size: 28.8px; font-size: 3.75vw; margin-top: 64px; margin-top: 8.3333333333vw; margin-bottom: 24px; margin-bottom: 3.125vw; letter-spacing: -.36px; } @media (max-width: 360px) { .goods-qna__title--sub { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .goods-qna__title--sub { margin-top: 26.6666666667px; margin-top: 8.3333333333vw; } } @media (max-width: 360px) { .goods-qna__title--sub { margin-bottom: 10px; margin-bottom: 3.125vw; } } .goods-qna__btn-close { position: absolute; top: 32.8px; top: 4.2708333333vw; right: 38.4px; right: 5vw; width: 39.2px; width: 5.1041666667vw; height: 38.4px; height: 5vw; background-repeat: no-repeat; font-size: 0; content: ''; } @media (max-width: 360px) { .goods-qna__btn-close { top: 13.6666666667px; top: 4.2708333333vw; } } @media (max-width: 360px) { .goods-qna__btn-close { right: 16px; right: 5vw; } } @media (max-width: 360px) { .goods-qna__btn-close { width: 16.3333333333px; width: 5.1041666667vw; } } @media (max-width: 360px) { .goods-qna__btn-close { height: 16px; height: 5vw; } } .goods-qna__column { padding-left: 37.6px; padding-left: 4.8958333333vw; } @media (max-width: 360px) { .goods-qna__column { padding-left: 15.6666666667px; padding-left: 4.8958333333vw; } } .goods-qna__column--wide-bottom { margin-bottom: 56px; margin-bottom: 7.2916666667vw; } @media (max-width: 360px) { .goods-qna__column--wide-bottom { margin-bottom: 23.3333333333px; margin-bottom: 7.2916666667vw; } } .goods-qna__checkbox { display: inline-block; font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .goods-qna__checkbox { font-size: 12px; font-size: 3.75vw; } } .goods-qna__checkbox-wrap { margin-bottom: 57.6px; margin-bottom: 7.5vw; } @media (max-width: 360px) { .goods-qna__checkbox-wrap { margin-bottom: 24px; margin-bottom: 7.5vw; } } .goods-qna__checkbox ~ .goods-qna__checkbox { margin-left: 64px; margin-left: 8.3333333333vw; } @media (max-width: 360px) { .goods-qna__checkbox ~ .goods-qna__checkbox { margin-left: 26.6666666667px; margin-left: 8.3333333333vw; } } .goods-view__review-btn { text-align: center; margin-top: 48px; margin-top: 6.25vw; margin-bottom: 64px; margin-bottom: 8.3333333333vw; } @media (max-width: 360px) { .goods-view__review-btn { margin-top: 20px; margin-top: 6.25vw; } } @media (max-width: 360px) { .goods-view__review-btn { margin-bottom: 26.6666666667px; margin-bottom: 8.3333333333vw; } } .content-plan__container { margin-bottom: 112px; margin-bottom: 14.5833333333vw; } @media (max-width: 360px) { .content-plan__container { margin-bottom: 46.6666666667px; margin-bottom: 14.5833333333vw; } } .content-plan .card-content__item-container { margin-top: -32px; margin-top: -4.1666666667vw; padding-left: 48px; padding-left: 6.25vw; } @media (max-width: 360px) { .content-plan .card-content__item-container { margin-top: -13.3333333333px; margin-top: -4.1666666667vw; } } @media (max-width: 360px) { .content-plan .card-content__item-container { padding-left: 20px; padding-left: 6.25vw; } } .content-plan .card-content__item-info { display: inline-block; padding: 40px 48px; padding: 5.2083333333vw 6.25vw; box-sizing: border-box; background-color: #fff; font-size: 40.8px; font-size: 5.3125vw; } @media (max-width: 320px) { .content-plan .card-content__item-info { padding: 16.6666666667px 20px; padding: 5.2083333333vw 6.25vw; } } @media (max-width: 360px) { .content-plan .card-content__item-info { font-size: 17px; font-size: 5.3125vw; } } .category-tab { position: relative; margin-top: 66.4px; margin-top: 8.6458333333vw; } @media (max-width: 360px) { .category-tab { margin-top: 27.6666666667px; margin-top: 8.6458333333vw; } } .category-tab__list { white-space: nowrap; overflow-x: auto; overflow-y: hidden; padding: 0px 30.4px 4.8px; padding: 0vw 3.9583333333vw 0.625vw; } @media (max-width: 320px) { .category-tab__list { padding: 0px 12.6666666667px 2px; padding: 0vw 3.9583333333vw 0.625vw; } } .category-tab__item { position: relative; z-index: 0; font-size: 33.6px; font-size: 4.375vw; display: inline-block; vertical-align: middle; color: #888; margin-top: 24px; margin-top: 3.125vw; padding: 0px 4px 4.8px; padding: 0vw 0.5208333333vw 0.625vw; } @media (max-width: 360px) { .category-tab__item { font-size: 14px; font-size: 4.375vw; } } @media (max-width: 360px) { .category-tab__item { margin-top: 10px; margin-top: 3.125vw; } } @media (max-width: 320px) { .category-tab__item { padding: 0px 1.6666666667px 2px; padding: 0vw 0.5208333333vw 0.625vw; } } .category-tab__item ~ .category-tab__item { margin-left: 24px; margin-left: 3.125vw; } .category-tab__item ~ .category-tab__item:before { content: ''; display: inline-block; vertical-align: middle; width: 2.4px; width: 0.3125vw; height: 24px; height: 3.125vw; background-color: #ddd; margin-right: 30.4px; margin-right: 3.9583333333vw; } @media (max-width: 360px) { .category-tab__item ~ .category-tab__item:before { width: 1px; width: 0.3125vw; } } @media (max-width: 360px) { .category-tab__item ~ .category-tab__item:before { height: 10px; height: 3.125vw; } } @media (max-width: 360px) { .category-tab__item ~ .category-tab__item:before { margin-right: 12.6666666667px; margin-right: 3.9583333333vw; } } @media (max-width: 360px) { .category-tab__item ~ .category-tab__item { margin-left: 10px; margin-left: 3.125vw; } } .category-tab__item--active { color: #222; font-weight: bold; } .category-tab__item--active a { position: relative; } .category-tab__item--active a:after { content: ''; display: inline-block; position: absolute; z-index: -1; bottom: 0; left: -7.2px; left: -0.9375vw; width: 100%; height: 20px; height: 2.6041666667vw; padding: 0px 7.2px; padding: 0vw 0.9375vw; background-color: #fdb812; } @media (max-width: 360px) { .category-tab__item--active a:after { left: -3px; left: -0.9375vw; } } @media (max-width: 360px) { .category-tab__item--active a:after { height: 8.3333333333px; height: 2.6041666667vw; } } @media (max-width: 320px) { .category-tab__item--active a:after { padding: 0px 3px; padding: 0vw 0.9375vw; } } .goods-plan-view__list .default-lattice-title { position: relative; padding: 0px 38.4px; padding: 0vw 5vw; z-index: 1; } @media (max-width: 320px) { .goods-plan-view__list .default-lattice-title { padding: 0px 16px; padding: 0vw 5vw; } } .goods-plan-view__list .goods-detail__container { display: inline-block; width: 50% !important; } .goods-plan-view__list .gli_image { background-color: #f9f9f9; } /*# sourceMappingURL=product.css.map */ #goods_contents_quick { position: relative; } .goods_review_frame { height: auto !important; } #goods_tabs.sticky { width: 100%; position: fixed; left: 0; top: 0; z-index: 21; } .review { margin: 64px 36.8px; margin: 8.3333333333vw 4.7916666667vw; padding-bottom: 64px; padding-bottom: 8.3333333333vw; position: relative; } @media (max-width: 320px) { .review { margin: 26.6666666667px 15.3333333333px; margin: 8.3333333333vw 4.7916666667vw; } } @media (max-width: 360px) { .review { padding-bottom: 26.6666666667px; padding-bottom: 8.3333333333vw; } } .review--has-btn { padding-bottom: 0; margin: 72px 0px; margin: 9.375vw 0vw; height: 112px; height: 14.5833333333vw; font-size: 0; } @media (max-width: 320px) { .review--has-btn { margin: 30px 0px; margin: 9.375vw 0vw; } } @media (max-width: 360px) { .review--has-btn { height: 46.6666666667px; height: 14.5833333333vw; } } .review--has-btn-bottom { padding-bottom: 0; margin: 72px 0px 96px; margin: 9.375vw 0vw 12.5vw; height: 112px; height: 14.5833333333vw; font-size: 0; } @media (max-width: 320px) { .review--has-btn-bottom { margin: 30px 0px 40px; margin: 9.375vw 0vw 12.5vw; } } @media (max-width: 360px) { .review--has-btn-bottom { height: 46.6666666667px; height: 14.5833333333vw; } } .review--add { padding-bottom: 0; } .review--no-margin { padding-bottom: 0; margin-bottom: 0; } .review--no-margin-top { margin-top: 32px; margin-top: 4.1666666667vw; padding-bottom: 0; margin-bottom: 0; } @media (max-width: 360px) { .review--no-margin-top { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .review--thin { margin-top: 0; margin-bottom: 0; padding-bottom: 0; } .review--btn { margin: 0; padding: 0; font-size: 0; } .review--border-bottom:before { content: ""; display: inline-block; width: 100%; background: #dddddd; position: absolute; bottom: 0; left: 0; height: 2.4px; height: 0.3125vw; } @media (max-width: 360px) { .review--border-bottom:before { height: 1px; height: 0.3125vw; } } .review__title { color: #222222; font-weight: bold; font-size: 28.8px; font-size: 3.75vw; margin-bottom: 32px; margin-bottom: 4.1666666667vw; } @media (max-width: 360px) { .review__title { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .review__title { margin-bottom: 13.3333333333px; margin-bottom: 4.1666666667vw; } } .review-detail__content--active { display: block; } .review-detail__content-group { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; margin-top: 4.1666666667vw; padding-right: 37.6px; padding-right: 4.8958333333vw; } @media (max-width: 360px) { .review-detail__content-group { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } @media (max-width: 360px) { .review-detail__content-group { padding-right: 15.6666666667px; padding-right: 4.8958333333vw; } } .review-detail__content-group .patch > button { margin-left: 46.4px; margin-left: 6.0416666667vw; } @media (max-width: 360px) { .review-detail__content-group .patch > button { margin-left: 19.3333333333px; margin-left: 6.0416666667vw; } } .review-detail__btn { position: relative; font-size: 28.8px; font-size: 3.75vw; color: #222222; font-weight: bold; background: none; } @media (max-width: 360px) { .review-detail__btn { font-size: 12px; font-size: 3.75vw; } } .review-detail__btn:before { position: absolute; bottom: 0; left: 0; content: ''; width: 100%; height: 2.4px; height: 0.3125vw; background-color: #222; } @media (max-width: 360px) { .review-detail__btn:before { height: 1px; height: 0.3125vw; } } .review-detail__btn--hide { display: none; } .review__product { display: flex; } .review__product-img { width: 235.2px; width: 30.625vw; height: 235.2px; height: 30.625vw; } @media (max-width: 360px) { .review__product-img { width: 98px; width: 30.625vw; } } @media (max-width: 360px) { .review__product-img { height: 98px; height: 30.625vw; } } .review__product-img img { width: 100%; height: 100%; } .review__product-summary { color: #999999; font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .review__product-summary { font-size: 12px; font-size: 3.75vw; } } .review__product-title { color: #212121; font-weight: bold; word-break: keep-all; font-size: 28.8px; font-size: 3.75vw; padding-top: 5.6px; padding-top: 0.7291666667vw; padding-bottom: 23.2px; padding-bottom: 3.0208333333vw; } @media (max-width: 360px) { .review__product-title { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .review__product-title { padding-top: 2.3333333333px; padding-top: 0.7291666667vw; } } @media (max-width: 360px) { .review__product-title { padding-bottom: 9.6666666667px; padding-bottom: 3.0208333333vw; } } .review__product-priceinfo { display: flex; align-items: center; } .review__product-discount { color: #999999; text-decoration: line-through; font-size: 26.4px; font-size: 3.4375vw; } @media (max-width: 360px) { .review__product-discount { font-size: 11px; font-size: 3.4375vw; } } .review__product-price { color: #212121; font-weight: bold; font-size: 33.6px; font-size: 4.375vw; margin-left: 36px; margin-left: 4.6875vw; } @media (max-width: 360px) { .review__product-price { font-size: 14px; font-size: 4.375vw; } } @media (max-width: 360px) { .review__product-price { margin-left: 15px; margin-left: 4.6875vw; } } .review__product-info { flex: 1; margin-left: 48px; margin-left: 6.25vw; } @media (max-width: 360px) { .review__product-info { margin-left: 20px; margin-left: 6.25vw; } } .review-rating { display: flex; align-items: center; justify-content: space-between; } .review-rating-wrap { padding-top: 28px; padding-top: 3.6458333333vw; margin-top: 28px; margin-top: 3.6458333333vw; border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-style: solid; border-top-color: #eee; } @media (max-width: 360px) { .review-rating-wrap { padding-top: 11.6666666667px; padding-top: 3.6458333333vw; } } @media (max-width: 360px) { .review-rating-wrap { margin-top: 11.6666666667px; margin-top: 3.6458333333vw; } } @media (max-width: 360px) { .review-rating-wrap { border-top-width: 1px; border-top-width: 0.3125vw; } } .review-rating:not(:last-child) { margin-bottom: 40px; margin-bottom: 5.2083333333vw; } @media (max-width: 360px) { .review-rating:not(:last-child) { margin-bottom: 16.6666666667px; margin-bottom: 5.2083333333vw; } } .review-rating__title { color: #222222; font-weight: bold; font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .review-rating__title { font-size: 12px; font-size: 3.75vw; } } .review-rating .product-review__star img { width: 60px; width: 7.8125vw; margin: 0px 12px; margin: 0vw 1.5625vw; } @media (max-width: 360px) { .review-rating .product-review__star img { width: 25px; width: 7.8125vw; } } @media (max-width: 320px) { .review-rating .product-review__star img { margin: 0px 5px; margin: 0vw 1.5625vw; } } .bbswrite_division--rm-padding { padding-top: 0 !important; } #goods-info { margin-bottom: 112px; margin-bottom: 14.5833333333vw; } @media (max-width: 360px) { #goods-info { margin-bottom: 46.6666666667px; margin-bottom: 14.5833333333vw; } } .goods-info { padding: 0px 37.6px; padding: 0vw 4.8958333333vw; } @media (max-width: 320px) { .goods-info { padding: 0px 15.6666666667px; padding: 0vw 4.8958333333vw; } } .goods-info--flex .goods-info__content { display: flex; } .goods-info--flex .goods-info__title { flex: 4; margin-bottom: 0; } .goods-info--flex .goods-info__list { flex: 6; width: 545.6px; width: 71.0416666667vw; padding-left: 28.8px; padding-left: 3.75vw; } @media (max-width: 360px) { .goods-info--flex .goods-info__list { width: 227.3333333333px; width: 71.0416666667vw; } } @media (max-width: 360px) { .goods-info--flex .goods-info__list { padding-left: 12px; padding-left: 3.75vw; } } .goods-info__content { padding-top: 20px; padding-top: 2.6041666667vw; padding-bottom: 24px; padding-bottom: 3.125vw; border-bottom-width: 3.2px; border-bottom-width: 0.4166666667vw; border-bottom-style: solid; border-bottom-color: #eeeeee; } @media (max-width: 360px) { .goods-info__content { padding-top: 8.3333333333px; padding-top: 2.6041666667vw; } } @media (max-width: 360px) { .goods-info__content { padding-bottom: 10px; padding-bottom: 3.125vw; } } @media (max-width: 360px) { .goods-info__content { border-bottom-width: 1.3333333333px; border-bottom-width: 0.4166666667vw; } } .goods-info__title { color: #222222; font-weight: bold; word-break: keep-all; font-size: 28.8px; font-size: 3.75vw; margin-bottom: 24px; margin-bottom: 3.125vw; } @media (max-width: 360px) { .goods-info__title { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .goods-info__title { margin-bottom: 10px; margin-bottom: 3.125vw; } } .goods-info__list { color: #888888; font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .goods-info__list { font-size: 12px; font-size: 3.75vw; } } .goods-info__item { position: relative; line-height: 44px; line-height: 5.7291666667vw; } @media (max-width: 360px) { .goods-info__item { line-height: 18.3333333333px; line-height: 5.7291666667vw; } } .goods-info__item--disc { padding-left: 14.4px; padding-left: 1.875vw; } @media (max-width: 360px) { .goods-info__item--disc { padding-left: 6px; padding-left: 1.875vw; } } .goods-info__item--disc:before { content: ''; display: inline-block; background: #888888; position: absolute; left: 0; border-radius: 50%; top: 14.4px; top: 1.875vw; width: 4.8px; width: 0.625vw; height: 5.6px; height: 0.7291666667vw; } @media (max-width: 360px) { .goods-info__item--disc:before { top: 6px; top: 1.875vw; } } @media (max-width: 360px) { .goods-info__item--disc:before { width: 2px; width: 0.625vw; } } @media (max-width: 360px) { .goods-info__item--disc:before { height: 2.3333333333px; height: 0.7291666667vw; } } .goods-info__item--break { word-break: keep-all; } .goods-tab { border-bottom-color: #eeeeee; border-bottom-style: solid; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; margin-bottom: 32px; margin-bottom: 4.1666666667vw; } @media (max-width: 360px) { .goods-tab { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } @media (max-width: 360px) { .goods-tab { margin-bottom: 13.3333333333px; margin-bottom: 4.1666666667vw; } } .goods-tab__list { display: flex; align-items: center; padding: 0px 38.4px; padding: 0vw 5vw; } @media (max-width: 320px) { .goods-tab__list { padding: 0px 16px; padding: 0vw 5vw; } } .goods-tab__item { color: #888888; font-size: 28.8px; font-size: 3.75vw; margin-right: 72px; margin-right: 9.375vw; padding: 28px 0px; padding: 3.6458333333vw 0vw; } @media (max-width: 360px) { .goods-tab__item { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .goods-tab__item { margin-right: 30px; margin-right: 9.375vw; } } @media (max-width: 320px) { .goods-tab__item { padding: 11.6666666667px 0px; padding: 3.6458333333vw 0vw; } } .goods-tab__item--active { color: #222222; border-bottom-color: #222222; border-bottom-style: solid; border-bottom-width: 6.4px; border-bottom-width: 0.8333333333vw; font-weight: bold; } @media (max-width: 360px) { .goods-tab__item--active { border-bottom-width: 2.6666666667px; border-bottom-width: 0.8333333333vw; } } .goods-empty { padding: 112px 0px 216px; padding: 14.5833333333vw 0vw 28.125vw; text-align: center; } @media (max-width: 320px) { .goods-empty { padding: 46.6666666667px 0px 90px; padding: 14.5833333333vw 0vw 28.125vw; } } .goods-empty__desc { padding-top: 160px; padding-top: 20.8333333333vw; font-size: 28.8px; font-size: 3.75vw; line-height: 44.8px; line-height: 5.8333333333vw; background: url("/design/skinfood/mobile_skinfood/images/icon/icon_nodata.png") no-repeat; background-size: 109.6px 105.6px; background-size: 14.2708333333vw 13.75vw; background-position: top center; font-weight: bold; } @media (max-width: 360px) { .goods-empty__desc { padding-top: 66.6666666667px; padding-top: 20.8333333333vw; } } @media (max-width: 360px) { .goods-empty__desc { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .goods-empty__desc { line-height: 18.6666666667px; line-height: 5.8333333333vw; } } @media (max-width: 320px) { .goods-empty__desc { background-size: 45.6666666667px 44px; background-size: 14.2708333333vw 13.75vw; } } /*# sourceMappingURL=product_min.css.map */ /* image path */ /* color */ .option__new-selector { box-sizing: border-box; width: 100%; min-height: 90.4px; min-height: 11.7708333333vw; height: auto; border-width: 2.4px; border-width: 0.3125vw; border-style: solid; border-color: #dddddd; color: #222222; font-size: 0; } @media (max-width: 360px) { .option__new-selector { min-height: 37.6666666667px; min-height: 11.7708333333vw; } } @media (max-width: 360px) { .option__new-selector { border-width: 1px; border-width: 0.3125vw; } } .option__new-selector-list { position: relative; display: none; background-color: #fff; margin: 0; padding: 0; width: 100%; border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-style: solid; border-top-color: #dddddd; max-height: 384px; max-height: 50vw; overflow-y: auto; } @media (max-width: 360px) { .option__new-selector-list { border-top-width: 1px; border-top-width: 0.3125vw; } } @media (max-width: 360px) { .option__new-selector-list { max-height: 160px; max-height: 50vw; } } .option__new-selector-item { font-size: 28.8px; font-size: 3.75vw; line-height: 1; min-height: 90.4px; min-height: 11.7708333333vw; text-align: left; } @media (max-width: 360px) { .option__new-selector-item { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .option__new-selector-item { min-height: 37.6666666667px; min-height: 11.7708333333vw; } } .option__new-selector-item-add-trigger { display: inline-block; height: 100%; width: 100%; box-sizing: border-box; line-height: 1; padding-left: 40px; padding-left: 5.2083333333vw; padding-right: 288px; padding-right: 37.5vw; padding-top: 32px; padding-top: 4.1666666667vw; padding-bottom: 32px; padding-bottom: 4.1666666667vw; } @media (max-width: 360px) { .option__new-selector-item-add-trigger { padding-left: 16.6666666667px; padding-left: 5.2083333333vw; } } @media (max-width: 360px) { .option__new-selector-item-add-trigger { padding-right: 120px; padding-right: 37.5vw; } } @media (max-width: 360px) { .option__new-selector-item-add-trigger { padding-top: 13.3333333333px; padding-top: 4.1666666667vw; } } @media (max-width: 360px) { .option__new-selector-item-add-trigger { padding-bottom: 13.3333333333px; padding-bottom: 4.1666666667vw; } } .option__new-selector-item-add-trigger--soldout { position: relative; color: #888888; background-color: #f6f6f6; } .option__new-selector-item-restock-trigger { position: absolute; right: 40px; right: 5.2083333333vw; top: 50%; transform: translateY(-50%); line-height: 1.4; background-color: transparent; color: #222222; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-bottom-style: solid; border-bottom-color: #222222; font-weight: bold; font-size: inherit; } @media (max-width: 360px) { .option__new-selector-item-restock-trigger { right: 16.6666666667px; right: 5.2083333333vw; } } @media (max-width: 360px) { .option__new-selector-item-restock-trigger { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .option__new-selector-item + .option__new-selector-item { border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-style: solid; border-top-color: #dddddd; } @media (max-width: 360px) { .option__new-selector-item + .option__new-selector-item { border-top-width: 1px; border-top-width: 0.3125vw; } } .option__new-selector-trigger { box-sizing: border-box; position: relative; background-color: transparent; display: inline-block; width: 100%; color: #222222; font-size: 28.8px; font-size: 3.75vw; min-height: 90.4px; min-height: 11.7708333333vw; height: 100%; text-align: left; padding-left: 40px; padding-left: 5.2083333333vw; } @media (max-width: 360px) { .option__new-selector-trigger { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .option__new-selector-trigger { min-height: 37.6666666667px; min-height: 11.7708333333vw; } } @media (max-width: 360px) { .option__new-selector-trigger { padding-left: 16.6666666667px; padding-left: 5.2083333333vw; } } .option__new-selector-trigger:after { position: absolute; display: inline-block; content: ''; right: 40px; right: 5.2083333333vw; top: 50%; transform: translateY(-50%); width: 26.4px; width: 3.4375vw; height: 16.8px; height: 2.1875vw; background: url("/design/skinfood/mobile_skinfood/images/icon/icon_arrow_down.png") no-repeat; background-size: contain; background-position: center; } @media (max-width: 360px) { .option__new-selector-trigger:after { right: 16.6666666667px; right: 5.2083333333vw; } } @media (max-width: 360px) { .option__new-selector-trigger:after { width: 11px; width: 3.4375vw; } } @media (max-width: 360px) { .option__new-selector-trigger:after { height: 7px; height: 2.1875vw; } } .option__new-selector-trigger--active:after { transform: translateY(-50%) rotate(-180deg); } .option__additional-item { padding: 48px 0px 49.6px; padding: 6.25vw 0vw 6.4583333333vw; } @media (max-width: 320px) { .option__additional-item { padding: 20px 0px 20.6666666667px; padding: 6.25vw 0vw 6.4583333333vw; } } .option__additional-item--icon { position: relative; padding-left: 64px; padding-left: 8.3333333333vw; } @media (max-width: 360px) { .option__additional-item--icon { padding-left: 26.6666666667px; padding-left: 8.3333333333vw; } } .option__additional-item--icon:before { content: ''; display: inline-block; position: absolute; width: 24px; width: 3.125vw; height: 24px; height: 3.125vw; top: 48px; top: 6.25vw; left: 0; background-image: url(/design/skinfood/mobile_skinfood/images/icon/icon__bracket.svg); background-size: contain; background-repeat: no-repeat; } @media (max-width: 360px) { .option__additional-item--icon:before { width: 10px; width: 3.125vw; } } @media (max-width: 360px) { .option__additional-item--icon:before { height: 10px; height: 3.125vw; } } @media (max-width: 360px) { .option__additional-item--icon:before { top: 20px; top: 6.25vw; } } .option__additional-item-delete-btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: inline-block; width: 44.8px; width: 5.8333333333vw; height: 44.8px; height: 5.8333333333vw; font-size: 0; background-color: transparent; } @media (max-width: 360px) { .option__additional-item-delete-btn { width: 18.6666666667px; width: 5.8333333333vw; } } @media (max-width: 360px) { .option__additional-item-delete-btn { height: 18.6666666667px; height: 5.8333333333vw; } } .option__additional-item-top-content { position: relative; } .option__additional-item-bottom-content { display: flex; justify-content: space-between; align-items: center; padding: 0px 38.4px; padding: 0vw 5vw; margin-top: 32px; margin-top: 4.1666666667vw; } @media (max-width: 320px) { .option__additional-item-bottom-content { padding: 0px 16px; padding: 0vw 5vw; } } @media (max-width: 360px) { .option__additional-item-bottom-content { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .option__additional-item-name { padding: 0px 38.4px; padding: 0vw 5vw; font-weight: bold; color: #222222; font-size: 28.8px; font-size: 3.75vw; padding-right: 89.6px; padding-right: 11.6666666667vw; } @media (max-width: 320px) { .option__additional-item-name { padding: 0px 16px; padding: 0vw 5vw; } } @media (max-width: 360px) { .option__additional-item-name { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .option__additional-item-name { padding-right: 37.3333333333px; padding-right: 11.6666666667vw; } } .option__additional-item-price { font-size: 31.2px; font-size: 4.0625vw; color: #222222; } @media (max-width: 360px) { .option__additional-item-price { font-size: 13px; font-size: 4.0625vw; } } .option__additional-item input.option__additional-item-number-input { pointer-events: none; font-weight: bold; text-align: center; color: #222222; background-color: transparent; border: none; font-size: 28.8px; font-size: 3.75vw; width: 136px; width: 17.7083333333vw; height: 44.8px; height: 5.8333333333vw; } @media (max-width: 360px) { .option__additional-item input.option__additional-item-number-input { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .option__additional-item input.option__additional-item-number-input { width: 56.6666666667px; width: 17.7083333333vw; } } @media (max-width: 360px) { .option__additional-item input.option__additional-item-number-input { height: 18.6666666667px; height: 5.8333333333vw; } } .goods-option-wrap { padding-bottom: 32px; padding-bottom: 4.1666666667vw; } @media (max-width: 360px) { .goods-option-wrap { padding-bottom: 13.3333333333px; padding-bottom: 4.1666666667vw; } } .goods-option__additional-list { border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-style: solid; border-top-color: #eeeeee; } @media (max-width: 360px) { .goods-option__additional-list { border-top-width: 1px; border-top-width: 0.3125vw; } } .goods-option__additional-item + .goods-option__additional-item { border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-style: solid; border-top-color: #eeeeee; } @media (max-width: 360px) { .goods-option__additional-item + .goods-option__additional-item { border-top-width: 1px; border-top-width: 0.3125vw; } } /*# sourceMappingURL=product_kb.css.map */ .common-board-popup { left: 0; top: 0; width: 100%; height: 100%; transform: translate(0); } .common-board__info { text-align: center; padding: 63.2px 0px; padding: 8.2291666667vw 0vw; } @media (max-width: 320px) { .common-board__info { padding: 26.3333333333px 0px; padding: 8.2291666667vw 0vw; } } .common-board__info-text { font-size: 28.8px; font-size: 3.75vw; color: #222; line-height: 44.8px; line-height: 5.8333333333vw; } @media (max-width: 360px) { .common-board__info-text { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .common-board__info-text { line-height: 18.6666666667px; line-height: 5.8333333333vw; } } .common-board__info-text ~ .common-board__info-text { margin-top: 32px; margin-top: 4.1666666667vw; } @media (max-width: 360px) { .common-board__info-text ~ .common-board__info-text { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .common-board__info-text--acnchor { font-weight: bold; text-decoration: underline; } .common-board__info-btn { margin-top: 40px; margin-top: 5.2083333333vw; } @media (max-width: 360px) { .common-board__info-btn { margin-top: 16.6666666667px; margin-top: 5.2083333333vw; } } .common-board__item { padding: 60px 0px; padding: 7.8125vw 0vw; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-bottom-color: #eee; border-bottom-style: solid; } @media (max-width: 320px) { .common-board__item { padding: 25px 0px; padding: 7.8125vw 0vw; } } @media (max-width: 360px) { .common-board__item { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .common-board__item:first-child { border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-color: #eee; border-top-style: solid; } @media (max-width: 360px) { .common-board__item:first-child { border-top-width: 1px; border-top-width: 0.3125vw; } } .common-board__item--active { background-color: #f6f6f6; } .common-board__item-info { position: relative; padding: 0px 38.4px; padding: 0vw 5vw; font-size: 28.8px; font-size: 3.75vw; display: flex; align-items: center; justify-content: space-between; } @media (max-width: 320px) { .common-board__item-info { padding: 0px 16px; padding: 0vw 5vw; } } @media (max-width: 360px) { .common-board__item-info { font-size: 12px; font-size: 3.75vw; } } .common-board__item-info font { font-weight: bold; } .common-board__item-info-detail { position: absolute; top: 0; right: 38.4px; right: 5vw; } @media (max-width: 360px) { .common-board__item-info-detail { right: 16px; right: 5vw; } } .common-board__item-record { display: inline-block; font-size: 28.8px; font-size: 3.75vw; margin-left: 21.6px; margin-left: 2.8125vw; } @media (max-width: 360px) { .common-board__item-record { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .common-board__item-record { margin-left: 9px; margin-left: 2.8125vw; } } .common-board__item-record:before { content: '|'; color: #eee; font-size: 28.8px; font-size: 3.75vw; margin-right: 21.6px; margin-right: 2.8125vw; } @media (max-width: 360px) { .common-board__item-record:before { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .common-board__item-record:before { margin-right: 9px; margin-right: 2.8125vw; } } .common-board__item-title { padding: 0px 38.4px 14.4px; padding: 0vw 5vw 1.875vw; margin-top: 24px; margin-top: 3.125vw; font-size: 28.8px; font-size: 3.75vw; display: inline-block; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 320px) { .common-board__item-title { padding: 0px 16px 6px; padding: 0vw 5vw 1.875vw; } } @media (max-width: 360px) { .common-board__item-title { margin-top: 10px; margin-top: 3.125vw; } } @media (max-width: 360px) { .common-board__item-title { font-size: 12px; font-size: 3.75vw; } } .common-board__item-title img { display: inline-block; width: 27.2px; width: 3.5416666667vw; } @media (max-width: 360px) { .common-board__item-title img { width: 11.3333333333px; width: 3.5416666667vw; } } .common-board__item-question { display: block; position: relative; } .common-board__item-question--row .common-board__item-question-content { display: none; } .common-board__item-question-btn-wrap { position: absolute; right: 38.4px; right: 5vw; bottom: -38.4px; bottom: -5vw; } @media (max-width: 360px) { .common-board__item-question-btn-wrap { right: 16px; right: 5vw; } } @media (max-width: 360px) { .common-board__item-question-btn-wrap { bottom: -16px; bottom: -5vw; } } .common-board__item-question-content { padding: 0px 38.4px; padding: 0vw 5vw; margin-bottom: 38.4px; margin-bottom: 5vw; font-size: 28.8px; font-size: 3.75vw; color: #888; line-clamp: initial; overflow: auto; } @media (max-width: 320px) { .common-board__item-question-content { padding: 0px 16px; padding: 0vw 5vw; } } @media (max-width: 360px) { .common-board__item-question-content { margin-bottom: 16px; margin-bottom: 5vw; } } @media (max-width: 360px) { .common-board__item-question-content { font-size: 12px; font-size: 3.75vw; } } .common-board__item-answer { display: none; padding: 0px 38.4px; padding: 0vw 5vw; } @media (max-width: 320px) { .common-board__item-answer { padding: 0px 16px; padding: 0vw 5vw; } } .common-board__item-answer-inner { padding-top: 48px; padding-top: 6.25vw; border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-style: solid; border-top-color: #eee; } @media (max-width: 360px) { .common-board__item-answer-inner { padding-top: 20px; padding-top: 6.25vw; } } @media (max-width: 360px) { .common-board__item-answer-inner { border-top-width: 1px; border-top-width: 0.3125vw; } } .common-board__item-answer-title { padding-bottom: 14.4px; padding-bottom: 1.875vw; font-size: 28.8px; font-size: 3.75vw; color: #222; font-weight: bold; } @media (max-width: 360px) { .common-board__item-answer-title { padding-bottom: 6px; padding-bottom: 1.875vw; } } @media (max-width: 360px) { .common-board__item-answer-title { font-size: 12px; font-size: 3.75vw; } } .common-board__item-answer-content { margin-bottom: 32px; margin-bottom: 4.1666666667vw; font-size: 28.8px; font-size: 3.75vw; color: #888; } @media (max-width: 360px) { .common-board__item-answer-content { margin-bottom: 13.3333333333px; margin-bottom: 4.1666666667vw; } } @media (max-width: 360px) { .common-board__item-answer-content { font-size: 12px; font-size: 3.75vw; } } .common-board__item-btn { position: relative; font-size: 28.8px; font-size: 3.75vw; color: #222; font-weight: bold; } @media (max-width: 360px) { .common-board__item-btn { font-size: 12px; font-size: 3.75vw; } } .common-board__item-btn:before { position: absolute; bottom: 0; left: 0; content: ''; width: 100%; height: 2.4px; height: 0.3125vw; background-color: #222; } @media (max-width: 360px) { .common-board__item-btn:before { height: 1px; height: 0.3125vw; } } .common-board__item-btn-wrap--active .common-board__item-btn-right { display: block; } .common-board__item-btn-wrap--active .common-board__item-btn--fold { display: block; } .common-board__item-btn-wrap--active .common-board__item-btn--unfold { display: none; } .common-board__item-btn-left { padding-left: 38.4px; padding-left: 5vw; } @media (max-width: 360px) { .common-board__item-btn-left { padding-left: 16px; padding-left: 5vw; } } .common-board__item-btn-right { display: none; padding-right: 38.4px; padding-right: 5vw; } @media (max-width: 360px) { .common-board__item-btn-right { padding-right: 16px; padding-right: 5vw; } } .common-board__item-btn-right .common-board__item-btn ~ .common-board__item-btn { margin-left: 38.4px; margin-left: 5vw; } @media (max-width: 360px) { .common-board__item-btn-right .common-board__item-btn ~ .common-board__item-btn { margin-left: 16px; margin-left: 5vw; } } .common-board__item-btn--fold { display: none; } .common-board__item-btn--unfold { display: block; } /*# sourceMappingURL=common_board.css.map */ /* @import url('../css/goods_qna.css'); */ /* image path */ /* color */ .service__title { display: inline-block; font-size: 33.6px; font-size: 4.375vw; margin: 79.2px 38.4px 41.6px; margin: 10.3125vw 5vw 5.4166666667vw; font-weight: bold; } @media (max-width: 360px) { .service__title { font-size: 14px; font-size: 4.375vw; } } @media (max-width: 320px) { .service__title { margin: 33px 16px 17.3333333333px; margin: 10.3125vw 5vw 5.4166666667vw; } } .service__title--active { position: relative; z-index: 1; padding: 0px 12.8px; padding: 0vw 1.6666666667vw; } @media (max-width: 320px) { .service__title--active { padding: 0px 5.3333333333px; padding: 0vw 1.6666666667vw; } } .service__title--active:after { content: ""; display: inline-block; position: absolute; bottom: 0; left: 0; z-index: -1; width: 100%; height: 16px; height: 2.0833333333vw; background-color: #fdb812; } @media (max-width: 360px) { .service__title--active:after { height: 6.6666666667px; height: 2.0833333333vw; } } .service-card { position: relative; background-color: #f6f6f6; width: 100%; } .service-card--small { height: 460.8px; height: 60vw; } @media (max-width: 360px) { .service-card--small { height: 192px; height: 60vw; } } .service-card--badge:after { content: ''; display: inline-block; background: url(/design/skinfood/mobile_skinfood/images/icon/icon_service_banner_logo.svg) top/cover no-repeat; position: absolute; top: 60px; top: 7.8125vw; right: 36px; right: 4.6875vw; width: 278.4px; width: 36.25vw; height: 194.4px; height: 25.3125vw; } @media (max-width: 360px) { .service-card--badge:after { top: 25px; top: 7.8125vw; } } @media (max-width: 360px) { .service-card--badge:after { right: 15px; right: 4.6875vw; } } @media (max-width: 360px) { .service-card--badge:after { width: 116px; width: 36.25vw; } } @media (max-width: 360px) { .service-card--badge:after { height: 81px; height: 25.3125vw; } } .service-card__content { text-align: center; padding: 110.4px 0px; padding: 14.375vw 0vw; } @media (max-width: 320px) { .service-card__content { padding: 46px 0px; padding: 14.375vw 0vw; } } .service-card__content--center { padding-top: 0; position: absolute; width: 100%; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); } .service-card__content--border { border-top-width: 2.4px; border-top-width: 0.3125vw; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-style: solid; border-color: #eeeeee; } @media (max-width: 360px) { .service-card__content--border { border-top-width: 1px; border-top-width: 0.3125vw; } } @media (max-width: 360px) { .service-card__content--border { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .service-card__icon { margin: 0 auto; } .service-card__icon--logo { max-width: 345.6px; max-width: 45vw; } @media (max-width: 360px) { .service-card__icon--logo { max-width: 144px; max-width: 45vw; } } .service-card__icon--logo img { width: 100%; } .service-card__icon--store { background: url(/design/skinfood/mobile_skinfood/images/icon/icon_store.svg) top/cover no-repeat; width: 97.6px; width: 12.7083333333vw; height: 100.8px; height: 13.125vw; } @media (max-width: 360px) { .service-card__icon--store { width: 40.6666666667px; width: 12.7083333333vw; } } @media (max-width: 360px) { .service-card__icon--store { height: 42px; height: 13.125vw; } } .service-card__title { color: #222222; margin-top: 63.2px; margin-top: 8.2291666667vw; font-size: 33.6px; font-size: 4.375vw; margin-bottom: 31.2px; margin-bottom: 4.0625vw; } @media (max-width: 360px) { .service-card__title { margin-top: 26.3333333333px; margin-top: 8.2291666667vw; } } @media (max-width: 360px) { .service-card__title { font-size: 14px; font-size: 4.375vw; } } @media (max-width: 360px) { .service-card__title { margin-bottom: 13px; margin-bottom: 4.0625vw; } } .service-card__title--font-small { font-size: 28.8px; font-size: 3.75vw; line-height: 1.5; } @media (max-width: 360px) { .service-card__title--font-small { font-size: 12px; font-size: 3.75vw; } } .service-card__title--active { border-bottom-color: #222222; border-bottom-style: solid; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; } @media (max-width: 360px) { .service-card__title--active { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .service-card__title--bold { font-weight: bold; } .service-card__info { color: #888888; line-height: 1.8666666667; font-size: 28.8px; font-size: 3.75vw; margin-bottom: 64px; margin-bottom: 8.3333333333vw; } @media (max-width: 360px) { .service-card__info { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .service-card__info { margin-bottom: 26.6666666667px; margin-bottom: 8.3333333333vw; } } .service-card__text { color: #222222; } .service-card__nonmember { margin-top: -16.8px; margin-top: -2.1875vw; } @media (max-width: 360px) { .service-card__nonmember { margin-top: -7px; margin-top: -2.1875vw; } } .service-card__nonmember-anchor { font-size: 28.8px; font-size: 3.75vw; color: #212121; } @media (max-width: 360px) { .service-card__nonmember-anchor { font-size: 12px; font-size: 3.75vw; } } .service-card__nonmember-anchor ~ .service-card__nonmember-anchor { margin-left: 48px; margin-left: 6.25vw; } @media (max-width: 360px) { .service-card__nonmember-anchor ~ .service-card__nonmember-anchor { margin-left: 20px; margin-left: 6.25vw; } } .service-card__nonmember-anchor ~ .service-card__nonmember-anchor:before { content: ''; display: inline-block; vertical-align: middle; width: 2.4px; width: 0.3125vw; height: 24px; height: 3.125vw; margin-right: 48px; margin-right: 6.25vw; background-color: #dddddd; } @media (max-width: 360px) { .service-card__nonmember-anchor ~ .service-card__nonmember-anchor:before { width: 1px; width: 0.3125vw; } } @media (max-width: 360px) { .service-card__nonmember-anchor ~ .service-card__nonmember-anchor:before { height: 10px; height: 3.125vw; } } @media (max-width: 360px) { .service-card__nonmember-anchor ~ .service-card__nonmember-anchor:before { margin-right: 20px; margin-right: 6.25vw; } } .service-icon { width: 100%; } .service-icon__list { display: flex; justify-content: space-between; align-items: center; } .service-icon__item { position: relative; color: #222222; word-break: keep-all; font-size: 28.8px; font-size: 3.75vw; padding: 0px 28.8px; padding: 0vw 3.75vw; } @media (max-width: 360px) { .service-icon__item { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 320px) { .service-icon__item { padding: 0px 12px; padding: 0vw 3.75vw; } } .service-icon__item:before { content: ''; display: inline-block; margin-bottom: 16px; margin-bottom: 2.0833333333vw; } @media (max-width: 360px) { .service-icon__item:before { margin-bottom: 6.6666666667px; margin-bottom: 2.0833333333vw; } } .service-icon__item:not(:first-child):after { content: ''; display: inline-block; background-color: #dddddd; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 2.4px; width: 0.3125vw; height: 24px; height: 3.125vw; } @media (max-width: 360px) { .service-icon__item:not(:first-child):after { width: 1px; width: 0.3125vw; } } @media (max-width: 360px) { .service-icon__item:not(:first-child):after { height: 10px; height: 3.125vw; } } .service-icon__item--faq:before { background: url(/design/skinfood/mobile_skinfood/images/icon/icon_faq.svg) top/cover no-repeat; width: 76.8px; width: 10vw; height: 77.6px; height: 10.1041666667vw; } @media (max-width: 360px) { .service-icon__item--faq:before { width: 32px; width: 10vw; } } @media (max-width: 360px) { .service-icon__item--faq:before { height: 32.3333333333px; height: 10.1041666667vw; } } .service-icon__item--notice:before { background: url(/design/skinfood/mobile_skinfood/images/icon/icon_notice.svg) top/cover no-repeat; width: 88px; width: 11.4583333333vw; height: 66.4px; height: 8.6458333333vw; } @media (max-width: 360px) { .service-icon__item--notice:before { width: 36.6666666667px; width: 11.4583333333vw; } } @media (max-width: 360px) { .service-icon__item--notice:before { height: 27.6666666667px; height: 8.6458333333vw; } } .service-icon__item--store:before { background: url(/design/skinfood/mobile_skinfood/images/icon/icon_store.svg) top/cover no-repeat; width: 73.6px; width: 9.5833333333vw; height: 76.8px; height: 10vw; } @media (max-width: 360px) { .service-icon__item--store:before { width: 30.6666666667px; width: 9.5833333333vw; } } @media (max-width: 360px) { .service-icon__item--store:before { height: 32px; height: 10vw; } } .service-icon__item--qna:before { background: url(/design/skinfood/mobile_skinfood/images/icon/icon_qna.svg) top/cover no-repeat; width: 74px; width: 9.6354166667vw; height: 76px; height: 9.8958333333vw; } @media (max-width: 360px) { .service-icon__item--qna:before { width: 30.8333333333px; width: 9.6354166667vw; } } @media (max-width: 360px) { .service-icon__item--qna:before { height: 31.6666666667px; height: 9.8958333333vw; } } .service-board { margin-bottom: 112px; margin-bottom: 14.5833333333vw; } @media (max-width: 360px) { .service-board { margin-bottom: 46.6666666667px; margin-bottom: 14.5833333333vw; } } .popup--myshop { left: 0; top: 0; width: 100%; height: 100%; transform: translate(0); } .popup--myshop .popup__content { height: 100%; } .popup__content-myshop { height: 100%; overflow: auto; } .popup__content-myshop:after { content: ''; display: block; padding: 96px; padding: 12.5vw; } @media (max-width: 360px) { .popup__content-myshop:after { padding: 40px; padding: 12.5vw; } } .popup__content-myshop-info { box-sizing: border-box; padding: 112px 38.4px; padding: 14.5833333333vw 5vw; font-size: 28.8px; font-size: 3.75vw; line-height: 1.527; color: #212121; text-align: center; } @media (max-width: 320px) { .popup__content-myshop-info { padding: 46.6666666667px 16px; padding: 14.5833333333vw 5vw; } } @media (max-width: 360px) { .popup__content-myshop-info { font-size: 12px; font-size: 3.75vw; } } .popup__content-myshop-info-img-wrap { margin-top: 69.6px; margin-top: 9.0625vw; display: flex; } @media (max-width: 360px) { .popup__content-myshop-info-img-wrap { margin-top: 29px; margin-top: 9.0625vw; } } .popup__content-myshop-info-img { padding-top: 112.8px; padding-top: 14.6875vw; background-repeat: no-repeat; background-position: top center; display: inline-block; width: 50%; } @media (max-width: 360px) { .popup__content-myshop-info-img { padding-top: 47px; padding-top: 14.6875vw; } } .popup__content-myshop-info-img--coupon { background-image: url(/design/skinfood/mobile_skinfood/images/icon/icon__coupon.svg); background-size: 102.4px 67.2px; background-size: 13.3333333333vw 8.75vw; } @media (max-width: 320px) { .popup__content-myshop-info-img--coupon { background-size: 42.6666666667px 28px; background-size: 13.3333333333vw 8.75vw; } } .popup__content-myshop-info-img--delivery { background-image: url(/design/skinfood/mobile_skinfood/images/icon/icon__delivery.svg); background-size: 104.8px 85.6px; background-size: 13.6458333333vw 11.1458333333vw; } @media (max-width: 320px) { .popup__content-myshop-info-img--delivery { background-size: 43.6666666667px 35.6666666667px; background-size: 13.6458333333vw 11.1458333333vw; } } .popup__content-myshop-info span { color: #888888; } .popup__content-myshop-notice { padding: 64px 38.4px; padding: 8.3333333333vw 5vw; box-sizing: border-box; background-color: #f2f2f2; } @media (max-width: 320px) { .popup__content-myshop-notice { padding: 26.6666666667px 16px; padding: 8.3333333333vw 5vw; } } .popup__content-myshop-notice-title { color: #212121; font-weight: bold; font-size: 28.8px; font-size: 3.75vw; line-height: 1.527; margin-bottom: 31.2px; margin-bottom: 4.0625vw; } @media (max-width: 360px) { .popup__content-myshop-notice-title { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .popup__content-myshop-notice-title { margin-bottom: 13px; margin-bottom: 4.0625vw; } } .popup__content-myshop-notice-item { color: #888888; font-size: 28.8px; font-size: 3.75vw; line-height: 1.527; } @media (max-width: 360px) { .popup__content-myshop-notice-item { font-size: 12px; font-size: 3.75vw; } } .popup__content-myshop-notice-item:before { content: ''; display: inline-block; vertical-align: middle; width: 4.8px; width: 0.625vw; height: 4.8px; height: 0.625vw; background-color: #888888; border-radius: 50%; } @media (max-width: 360px) { .popup__content-myshop-notice-item:before { width: 2px; width: 0.625vw; } } @media (max-width: 360px) { .popup__content-myshop-notice-item:before { height: 2px; height: 0.625vw; } } .popup__footer { position: absolute; bottom: 0; width: 100%; } .popup__footer-myshop-btn { box-sizing: border-box; text-align: center; } .board.board-top-middle { margin-top: 72px; margin-top: 9.375vw; } @media (max-width: 360px) { .board.board-top-middle { margin-top: 30px; margin-top: 9.375vw; } } .board.borad-search__container-top-middle { margin-top: 48px; margin-top: 6.25vw; } @media (max-width: 360px) { .board.borad-search__container-top-middle { margin-top: 20px; margin-top: 6.25vw; } } .board-btn-wrap { text-align: center; margin-top: 64px; margin-top: 8.3333333333vw; } @media (max-width: 360px) { .board-btn-wrap { margin-top: 26.6666666667px; margin-top: 8.3333333333vw; } } .board-btn--more { background-color: #fff; } .board-btn--more-arrow:after { content: ''; display: inline-block; vertical-align: middle; width: 27.2px; width: 3.5416666667vw; height: 15.2px; height: 1.9791666667vw; margin-left: 19.2px; margin-left: 2.5vw; background-image: url("/design/skinfood/mobile_skinfood/images/common-kb/button_down_arw.png"); background-size: contain; background-repeat: no-repeat; } @media (max-width: 360px) { .board-btn--more-arrow:after { width: 11.3333333333px; width: 3.5416666667vw; } } @media (max-width: 360px) { .board-btn--more-arrow:after { height: 6.3333333333px; height: 1.9791666667vw; } } @media (max-width: 360px) { .board-btn--more-arrow:after { margin-left: 8px; margin-left: 2.5vw; } } .board-tab { display: inline-block; font-size: 0; width: 100%; } .board-tab-item { box-sizing: border-box; position: relative; display: inline-block; width: 50%; text-align: center; font-size: 33.6px; font-size: 4.375vw; color: #888888; cursor: pointer; } @media (max-width: 360px) { .board-tab-item { font-size: 14px; font-size: 4.375vw; } } .board-tab-item--active span { color: #212121; font-weight: bold; position: relative; z-index: 1; padding: 0px 12.8px; padding: 0vw 1.6666666667vw; } @media (max-width: 320px) { .board-tab-item--active span { padding: 0px 5.3333333333px; padding: 0vw 1.6666666667vw; } } .board-tab-item--active span:after { content: ""; display: inline-block; position: absolute; bottom: 0; left: 0; z-index: -1; width: 100%; height: 16px; height: 2.0833333333vw; background-color: #fdb812; } @media (max-width: 360px) { .board-tab-item--active span:after { height: 6.6666666667px; height: 2.0833333333vw; } } .board-tab-item ~ .board-tab-item:before { content: ''; display: inline-block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 2.4px; width: 0.3125vw; height: 24px; height: 3.125vw; background-color: #dddddd; } @media (max-width: 360px) { .board-tab-item ~ .board-tab-item:before { width: 1px; width: 0.3125vw; } } @media (max-width: 360px) { .board-tab-item ~ .board-tab-item:before { height: 10px; height: 3.125vw; } } .board-tab__content-count { font-size: 28.8px; font-size: 3.75vw; color: #212121; padding: 0px 39.2px; padding: 0vw 5.1041666667vw; margin-top: 79.2px; margin-top: 10.3125vw; margin-bottom: 33.6px; margin-bottom: 4.375vw; } @media (max-width: 360px) { .board-tab__content-count { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 320px) { .board-tab__content-count { padding: 0px 16.3333333333px; padding: 0vw 5.1041666667vw; } } @media (max-width: 360px) { .board-tab__content-count { margin-top: 33px; margin-top: 10.3125vw; } } @media (max-width: 360px) { .board-tab__content-count { margin-bottom: 14px; margin-bottom: 4.375vw; } } .board-tab__item { box-sizing: border-box; border-top-width: 2.4px; border-top-width: 0.3125vw; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-top-style: solid; border-bottom-style: solid; border-top-color: #eeeeee; border-bottom-color: #eeeeee; font-size: 0; } @media (max-width: 360px) { .board-tab__item { border-top-width: 1px; border-top-width: 0.3125vw; } } @media (max-width: 360px) { .board-tab__item { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .board-tab__item ~ .board-tab__item { margin-top: -2.4px; margin-top: -0.3125vw; } @media (max-width: 360px) { .board-tab__item ~ .board-tab__item { margin-top: -1px; margin-top: -0.3125vw; } } .board-tab__item--active { background-color: #f6f6f6; } .board-tab__item--active .board-tab__item-info { margin-bottom: 48px; margin-bottom: 6.25vw; } @media (max-width: 360px) { .board-tab__item--active .board-tab__item-info { margin-bottom: 20px; margin-bottom: 6.25vw; } } .board-tab__item-info { position: relative; margin: 64px 38.4px 68.8px 39.2px; margin: 8.3333333333vw 5vw 8.9583333333vw 5.1041666667vw; } @media (max-width: 320px) { .board-tab__item-info { margin: 26.6666666667px 16px 28.6666666667px 16.3333333333px; margin: 8.3333333333vw 5vw 8.9583333333vw 5.1041666667vw; } } .board-tab__item-info-title { font-size: 28.8px; font-size: 3.75vw; color: #212121; font-weight: bold; letter-spacing: -0.864px; letter-spacing: -0.1125vw; } @media (max-width: 360px) { .board-tab__item-info-title { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .board-tab__item-info-title { letter-spacing: -0.36px; letter-spacing: -0.1125vw; } } .board-tab__item-info-star { width: 24px; width: 3.125vw; height: 24px; height: 3.125vw; margin-left: 16px; margin-left: 2.0833333333vw; } @media (max-width: 360px) { .board-tab__item-info-star { width: 10px; width: 3.125vw; } } @media (max-width: 360px) { .board-tab__item-info-star { height: 10px; height: 3.125vw; } } @media (max-width: 360px) { .board-tab__item-info-star { margin-left: 6.6666666667px; margin-left: 2.0833333333vw; } } .board-tab__item-info-desc { color: #212121; margin-top: 26.4px; margin-top: 3.4375vw; font-size: 28.8px; font-size: 3.75vw; letter-spacing: -0.864px; letter-spacing: -0.1125vw; } @media (max-width: 360px) { .board-tab__item-info-desc { margin-top: 11px; margin-top: 3.4375vw; } } @media (max-width: 360px) { .board-tab__item-info-desc { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .board-tab__item-info-desc { letter-spacing: -0.36px; letter-spacing: -0.1125vw; } } .board-tab__item-info-desc--gray { color: #888888; } .board-tab__item-info-desc ~ .board-tab__item-info-desc { margin-top: 16.8px; margin-top: 2.1875vw; } @media (max-width: 360px) { .board-tab__item-info-desc ~ .board-tab__item-info-desc { margin-top: 7px; margin-top: 2.1875vw; } } .board-tab__item-info-tell { display: inline-block; font-size: 28.8px; font-size: 3.75vw; text-decoration: underline; letter-spacing: -0.864px; letter-spacing: -0.1125vw; } @media (max-width: 360px) { .board-tab__item-info-tell { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .board-tab__item-info-tell { letter-spacing: -0.36px; letter-spacing: -0.1125vw; } } .board-tab__item-info-btn-wrap { position: absolute; top: 0px; top: 0vw; right: 0px; right: 0vw; } @media (max-width: 360px) { .board-tab__item-info-btn-wrap { top: 0px; top: 0vw; } } @media (max-width: 360px) { .board-tab__item-info-btn-wrap { right: 0px; right: 0vw; } } .board-tab__item-info-btn-wrap--active .board-tab__item-info-btn--fold { display: block; } .board-tab__item-info-btn-wrap--active .board-tab__item-info-btn--unfold { display: none; } .board-tab__item-info-btn { width: 47.2px; width: 6.1458333333vw; height: 48px; height: 6.25vw; background-position: center; background-repeat: no-repeat; } @media (max-width: 360px) { .board-tab__item-info-btn { width: 19.6666666667px; width: 6.1458333333vw; } } @media (max-width: 360px) { .board-tab__item-info-btn { height: 20px; height: 6.25vw; } } .board-tab__item-info-btn--fold { display: none; background-image: url(/design/skinfood/mobile_skinfood/images/icon/icon_minus.png); background-size: 48px 9.6px; background-size: 6.25vw 1.25vw; } @media (max-width: 320px) { .board-tab__item-info-btn--fold { background-size: 20px 4px; background-size: 6.25vw 1.25vw; } } .board-tab__item-info-btn--unfold { display: block; background-image: url(/design/skinfood/mobile_skinfood/images/icon/icon_plus.png); background-size: 48px 48px; background-size: 6.25vw 6.25vw; } @media (max-width: 320px) { .board-tab__item-info-btn--unfold { background-size: 20px 20px; background-size: 6.25vw 6.25vw; } } .board-tab__item-info-icon { width: 64px; width: 8.3333333333vw; height: 64px; height: 8.3333333333vw; background-size: 64px 64px; background-size: 8.3333333333vw 8.3333333333vw; } .board-tab__item-info-icon-wrap { position: absolute; bottom: 0; right: 0; } @media (max-width: 360px) { .board-tab__item-info-icon { width: 26.6666666667px; width: 8.3333333333vw; } } @media (max-width: 360px) { .board-tab__item-info-icon { height: 26.6666666667px; height: 8.3333333333vw; } } @media (max-width: 320px) { .board-tab__item-info-icon { background-size: 26.6666666667px 26.6666666667px; background-size: 8.3333333333vw 8.3333333333vw; } } .board-tab__item-info-icon--facebook { background-image: url(/design/skinfood/mobile_skinfood/images/icon/icon_facebook_gray.svg); } .board-tab__item-info-icon--instagram { background-image: url(/design/skinfood/mobile_skinfood/images/icon/icon_instagram_gray.svg); } .board-tab__item-content { margin-top: 52.8px; margin-top: 6.875vw; width: 100%; height: 768px; height: 100vw; display: none; } @media (max-width: 360px) { .board-tab__item-content { margin-top: 22px; margin-top: 6.875vw; } } @media (max-width: 360px) { .board-tab__item-content { height: 320px; height: 100vw; } } .board-tab__item-content img { width: 100%; height: auto; } .board-title--myshop { margin: 12px 38.4px 41.6px; margin: 1.5625vw 5vw 5.4166666667vw; } @media (max-width: 320px) { .board-title--myshop { margin: 5px 16px 17.3333333333px; margin: 1.5625vw 5vw 5.4166666667vw; } } .board-title--myshop.board-title--active { position: relative; z-index: 1; padding: 0px 12.8px 0px 0px; padding: 0vw 1.6666666667vw 0vw 0vw; } @media (max-width: 320px) { .board-title--myshop.board-title--active { padding: 0px 5.3333333333px 0px 0px; padding: 0vw 1.6666666667vw 0vw 0vw; } } .board-title--myshop.board-title--active:before { content: ""; display: inline-block; width: 61.6px; width: 8.0208333333vw; height: 48.8px; height: 6.3541666667vw; background-repeat: no-repeat; margin-right: 12.8px; margin-right: 1.6666666667vw; background-image: url(/design/skinfood/mobile_skinfood/images/icon/icon_call.svg); background-size: 45.6px 48.8px; background-size: 5.9375vw 6.3541666667vw; background-color: #fff; vertical-align: middle; } @media (max-width: 360px) { .board-title--myshop.board-title--active:before { width: 25.6666666667px; width: 8.0208333333vw; } } @media (max-width: 360px) { .board-title--myshop.board-title--active:before { height: 20.3333333333px; height: 6.3541666667vw; } } @media (max-width: 360px) { .board-title--myshop.board-title--active:before { margin-right: 5.3333333333px; margin-right: 1.6666666667vw; } } @media (max-width: 320px) { .board-title--myshop.board-title--active:before { background-size: 19px 20.3333333333px; background-size: 5.9375vw 6.3541666667vw; } } .board-title--myshop.board-title--active:after { content: ""; display: inline-block; position: absolute; bottom: 0; left: 0; z-index: -1; width: 100%; margin-left: 0; height: 16px; height: 2.0833333333vw; background-color: #fdb812; background-image: none; } @media (max-width: 360px) { .board-title--myshop.board-title--active:after { height: 6.6666666667px; height: 2.0833333333vw; } } .board--myshop { margin-bottom: 112px; margin-bottom: 14.5833333333vw; } @media (max-width: 360px) { .board--myshop { margin-bottom: 46.6666666667px; margin-bottom: 14.5833333333vw; } } .board--myshop .board-list { margin-top: 40px; margin-top: 5.2083333333vw; } @media (max-width: 360px) { .board--myshop .board-list { margin-top: 16.6666666667px; margin-top: 5.2083333333vw; } } .board--myshop .board-item { border-top-width: 2.4px; border-top-width: 0.3125vw; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-top-style: solid; border-bottom-style: solid; border-top-color: #eeeeee; border-bottom-color: #eeeeee; } @media (max-width: 360px) { .board--myshop .board-item { border-top-width: 1px; border-top-width: 0.3125vw; } } @media (max-width: 360px) { .board--myshop .board-item { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .board--myshop .board-item ~ .board-item { margin-top: -2.4px; margin-top: -0.3125vw; } @media (max-width: 360px) { .board--myshop .board-item ~ .board-item { margin-top: -1px; margin-top: -0.3125vw; } } .board-item__title { font-size: 28.8px; font-size: 3.75vw; color: #212121; font-weight: bold; letter-spacing: -0.864px; letter-spacing: -0.1125vw; } @media (max-width: 360px) { .board-item__title { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .board-item__title { letter-spacing: -0.36px; letter-spacing: -0.1125vw; } } .board-item__desc { color: #212121; margin-top: 26.4px; margin-top: 3.4375vw; font-size: 28.8px; font-size: 3.75vw; letter-spacing: -0.864px; letter-spacing: -0.1125vw; } @media (max-width: 360px) { .board-item__desc { margin-top: 11px; margin-top: 3.4375vw; } } @media (max-width: 360px) { .board-item__desc { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .board-item__desc { letter-spacing: -0.36px; letter-spacing: -0.1125vw; } } .board-item__desc--gray { color: #888888; } .board-item__desc ~ .board-item__desc { margin-top: 16.8px; margin-top: 2.1875vw; } @media (max-width: 360px) { .board-item__desc ~ .board-item__desc { margin-top: 7px; margin-top: 2.1875vw; } } .board-item__desc-tell { display: inline-block; font-size: 28.8px; font-size: 3.75vw; text-decoration: underline; letter-spacing: -0.864px; letter-spacing: -0.1125vw; } @media (max-width: 360px) { .board-item__desc-tell { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .board-item__desc-tell { letter-spacing: -0.36px; letter-spacing: -0.1125vw; } } .board-item__desc-mail { display: inline-block; font-size: 28.8px; font-size: 3.75vw; letter-spacing: -0.864px; letter-spacing: -0.1125vw; color: #888888; } @media (max-width: 360px) { .board-item__desc-mail { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .board-item__desc-mail { letter-spacing: -0.36px; letter-spacing: -0.1125vw; } } .board-item__desc-mail:before { content: ''; display: inline-block; vertical-align: middle; width: 2.4px; width: 0.3125vw; height: 24px; height: 3.125vw; background-color: #dddddd; margin: 0px 21.6px; margin: 0vw 2.8125vw; } @media (max-width: 360px) { .board-item__desc-mail:before { width: 1px; width: 0.3125vw; } } @media (max-width: 360px) { .board-item__desc-mail:before { height: 10px; height: 3.125vw; } } @media (max-width: 320px) { .board-item__desc-mail:before { margin: 0px 9px; margin: 0vw 2.8125vw; } } /*# sourceMappingURL=service.css.map */ .board { margin-top: 104px; margin-top: 13.5416666667vw; } @media (max-width: 360px) { .board { margin-top: 43.3333333333px; margin-top: 13.5416666667vw; } } .board ~ .board { margin-top: 136px; margin-top: 17.7083333333vw; } @media (max-width: 360px) { .board ~ .board { margin-top: 56.6666666667px; margin-top: 17.7083333333vw; } } .board-title { position: relative; display: inline-block; padding-left: 39.2px; padding-left: 5.1041666667vw; font-size: 33.6px; font-size: 4.375vw; font-weight: bold; } @media (max-width: 360px) { .board-title { padding-left: 16.3333333333px; padding-left: 5.1041666667vw; } } @media (max-width: 360px) { .board-title { font-size: 14px; font-size: 4.375vw; } } .board-title:after { display: inline-block; width: 16.8px; width: 2.1875vw; height: 26.4px; height: 3.4375vw; margin-left: 16px; margin-left: 2.0833333333vw; background: url("/design/skinfood/mobile_skinfood/images/icon/icon_arrow.svg") no-repeat; background-position: right center; background-size: 16.8px 26.4px; background-size: 2.1875vw 3.4375vw; content: ""; } @media (max-width: 360px) { .board-title:after { width: 7px; width: 2.1875vw; } } @media (max-width: 360px) { .board-title:after { height: 11px; height: 3.4375vw; } } @media (max-width: 360px) { .board-title:after { margin-left: 6.6666666667px; margin-left: 2.0833333333vw; } } @media (max-width: 320px) { .board-title:after { background-size: 7px 11px; background-size: 2.1875vw 3.4375vw; } } .board-title__txt { position: relative; padding: 0px 8px; padding: 0vw 1.0416666667vw; z-index: 1; } @media (max-width: 320px) { .board-title__txt { padding: 0px 3.3333333333px; padding: 0vw 1.0416666667vw; } } .board-title__txt:after { position: absolute; bottom: 0; left: 0; display: inline-block; width: 100%; height: 20px; height: 2.6041666667vw; background-color: #fdb812; content: ""; z-index: -1; } @media (max-width: 360px) { .board-title__txt:after { height: 8.3333333333px; height: 2.6041666667vw; } } .board-search { padding: 0px 38.4px; padding: 0vw 5vw; } @media (max-width: 320px) { .board-search { padding: 0px 16px; padding: 0vw 5vw; } } .board-search__container { display: flex; justify-content: space-between; border-bottom-width: 4.8px; border-bottom-width: 0.625vw; border-bottom-style: solid; border-bottom-color: #fdb812; margin-top: 80px; margin-top: 10.4166666667vw; padding-bottom: 13.6px; padding-bottom: 1.7708333333vw; } @media (max-width: 360px) { .board-search__container { border-bottom-width: 2px; border-bottom-width: 0.625vw; } } @media (max-width: 360px) { .board-search__container { margin-top: 33.3333333333px; margin-top: 10.4166666667vw; } } @media (max-width: 360px) { .board-search__container { padding-bottom: 5.6666666667px; padding-bottom: 1.7708333333vw; } } .board-search__btn input[type=image] { width: 43.2px; width: 5.625vw; height: 44px; height: 5.7291666667vw; padding-left: 0; } @media (max-width: 360px) { .board-search__btn input[type=image] { width: 18px; width: 5.625vw; } } @media (max-width: 360px) { .board-search__btn input[type=image] { height: 18.3333333333px; height: 5.7291666667vw; } } .board-search__input { flex: 1; padding: 0px 16px; padding: 0vw 2.0833333333vw; overflow: hidden; } @media (max-width: 320px) { .board-search__input { padding: 0px 6.6666666667px; padding: 0vw 2.0833333333vw; } } .board-search__input input[type=text] { width: 100%; height: 44px; height: 5.7291666667vw; line-height: 44px; line-height: 5.7291666667vw; border: none; font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .board-search__input input[type=text] { height: 18.3333333333px; height: 5.7291666667vw; } } @media (max-width: 360px) { .board-search__input input[type=text] { line-height: 18.3333333333px; line-height: 5.7291666667vw; } } @media (max-width: 360px) { .board-search__input input[type=text] { font-size: 12px; font-size: 3.75vw; } } .board-search__desc { font-size: 28.8px; font-size: 3.75vw; color: #888; } @media (max-width: 360px) { .board-search__desc { font-size: 12px; font-size: 3.75vw; } } .board-search__info { display: flex; justify-content: space-between; margin-top: 34.4px; margin-top: 4.4791666667vw; padding: 0px 39.2px; padding: 0vw 5.1041666667vw; } @media (max-width: 360px) { .board-search__info { margin-top: 14.3333333333px; margin-top: 4.4791666667vw; } } @media (max-width: 320px) { .board-search__info { padding: 0px 16.3333333333px; padding: 0vw 5.1041666667vw; } } .board-search__btn--border { padding: 0; border: 0; font-size: 28.8px; font-size: 3.75vw; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-bottom-style: solid; border-bottom-color: #222; border-radius: 0; } @media (max-width: 360px) { .board-search__btn--border { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .board-search__btn--border { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .board-select { margin-top: 45.6px; margin-top: 5.9375vw; padding: 0px 39.2px; padding: 0vw 5.1041666667vw; } @media (max-width: 360px) { .board-select { margin-top: 19px; margin-top: 5.9375vw; } } @media (max-width: 320px) { .board-select { padding: 0px 16.3333333333px; padding: 0vw 5.1041666667vw; } } .board-select__input { appearance: none; -webkit-appearance: none; width: 100%; height: 92.8px; height: 12.0833333333vw; padding: 0px 41.6px; padding: 0vw 5.4166666667vw; line-height: 92.8px; line-height: 12.0833333333vw; border-width: 2.4px; border-width: 0.3125vw; border-color: #ddd; border-style: solid; font-size: 28.8px; font-size: 3.75vw; background: #fff url("/design/skinfood/mobile_skinfood/images/icon/icon_arrow_down.png") no-repeat; background-position: right 5.4166666667vw center; background-size: 26.4px 17.6px; background-size: 3.4375vw 2.2916666667vw; } @media (max-width: 360px) { .board-select__input { height: 38.6666666667px; height: 12.0833333333vw; } } @media (max-width: 320px) { .board-select__input { padding: 0px 17.3333333333px; padding: 0vw 5.4166666667vw; } } @media (max-width: 360px) { .board-select__input { line-height: 38.6666666667px; line-height: 12.0833333333vw; } } @media (max-width: 360px) { .board-select__input { border-width: 1px; border-width: 0.3125vw; } } @media (max-width: 360px) { .board-select__input { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 320px) { .board-select__input { background-size: 11px 7.3333333333px; background-size: 3.4375vw 2.2916666667vw; } } .board-list { margin-top: 80px; margin-top: 10.4166666667vw; } @media (max-width: 360px) { .board-list { margin-top: 33.3333333333px; margin-top: 10.4166666667vw; } } .board-list--has-title { margin-top: 32px; margin-top: 4.1666666667vw; } @media (max-width: 360px) { .board-list--has-title { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .board-item { position: relative; padding: 56px 39.2px 60px; padding: 7.2916666667vw 5.1041666667vw 7.8125vw; border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-style: solid; border-top-color: #eee; } @media (max-width: 320px) { .board-item { padding: 23.3333333333px 16.3333333333px 25px; padding: 7.2916666667vw 5.1041666667vw 7.8125vw; } } @media (max-width: 360px) { .board-item { border-top-width: 1px; border-top-width: 0.3125vw; } } .board-item ~ .board-item { border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-bottom-style: solid; border-bottom-color: #eee; } @media (max-width: 360px) { .board-item ~ .board-item { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .board-item--active { background-color: #f6f6f6; } .board-item--active .board-item__btn { background-image: url("/design/skinfood/mobile_skinfood/images/icon/icon_minus.png"); } .board-item--active.board-item--notice { border: none; } .board-item--nodata { padding-top: 56px; padding-top: 7.2916666667vw; padding-bottom: 136px; padding-bottom: 17.7083333333vw; font-size: 28.8px; font-size: 3.75vw; font-weight: bold; color: #222; text-align: center; } @media (max-width: 360px) { .board-item--nodata { padding-top: 23.3333333333px; padding-top: 7.2916666667vw; } } @media (max-width: 360px) { .board-item--nodata { padding-bottom: 56.6666666667px; padding-bottom: 17.7083333333vw; } } @media (max-width: 360px) { .board-item--nodata { font-size: 12px; font-size: 3.75vw; } } .board-item__title { width: 572px; width: 74.4791666667vw; font-size: 28.8px; font-size: 3.75vw; color: #222; line-height: 44.8px; line-height: 5.8333333333vw; font-weight: bold; word-break: keep-all; } @media (max-width: 360px) { .board-item__title { width: 238.3333333333px; width: 74.4791666667vw; } } @media (max-width: 360px) { .board-item__title { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .board-item__title { line-height: 18.6666666667px; line-height: 5.8333333333vw; } } .board-item__title--full { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .board-item__date { display: inline-block; margin-top: 16px; margin-top: 2.0833333333vw; font-size: 28.8px; font-size: 3.75vw; color: #888; } @media (max-width: 360px) { .board-item__date { margin-top: 6.6666666667px; margin-top: 2.0833333333vw; } } @media (max-width: 360px) { .board-item__date { font-size: 12px; font-size: 3.75vw; } } .board-item__btn { position: absolute; top: 53.6px; top: 6.9791666667vw; right: 38.4px; right: 5vw; display: inline-block; width: 47.2px; width: 6.1458333333vw; height: 48px; height: 6.25vw; font-size: 0; background: url("/design/skinfood/mobile_skinfood/images/icon/icon_plus.png") no-repeat; background-size: contain; } @media (max-width: 360px) { .board-item__btn { top: 22.3333333333px; top: 6.9791666667vw; } } @media (max-width: 360px) { .board-item__btn { right: 16px; right: 5vw; } } @media (max-width: 360px) { .board-item__btn { width: 19.6666666667px; width: 6.1458333333vw; } } @media (max-width: 360px) { .board-item__btn { height: 20px; height: 6.25vw; } } .board-item__content { padding-top: 28px; padding-top: 3.6458333333vw; line-height: 44.8px; line-height: 5.8333333333vw; font-size: 28.8px; font-size: 3.75vw; color: #888; } @media (max-width: 360px) { .board-item__content { padding-top: 11.6666666667px; padding-top: 3.6458333333vw; } } @media (max-width: 360px) { .board-item__content { line-height: 18.6666666667px; line-height: 5.8333333333vw; } } @media (max-width: 360px) { .board-item__content { font-size: 12px; font-size: 3.75vw; } } .board-item__content table { width: 100% !important; } .board-item__content--gray { padding: 0px 39.2px 60px; padding: 0vw 5.1041666667vw 7.8125vw; background-color: #f6f6f6; } @media (max-width: 320px) { .board-item__content--gray { padding: 0px 16.3333333333px 25px; padding: 0vw 5.1041666667vw 7.8125vw; } } /*# sourceMappingURL=service_ahn.css.map */ .login { background: url("/design/skinfood/mobile_skinfood/images/bg/bg-login.png") no-repeat; background-size: 100% 100%; } .login--bg { padding-bottom: 112px; padding-bottom: 14.5833333333vw; margin-bottom: -112px; margin-bottom: -14.5833333333vw; } @media (max-width: 360px) { .login--bg { padding-bottom: 46.6666666667px; padding-bottom: 14.5833333333vw; } } @media (max-width: 360px) { .login--bg { margin-bottom: -46.6666666667px; margin-bottom: -14.5833333333vw; } } .login__input-content { margin-top: 64px; margin-top: 8.3333333333vw; padding: 0px 38.4px; padding: 0vw 5vw; } @media (max-width: 360px) { .login__input-content { margin-top: 26.6666666667px; margin-top: 8.3333333333vw; } } @media (max-width: 320px) { .login__input-content { padding: 0px 16px; padding: 0vw 5vw; } } .login__tab { margin-top: 104px; margin-top: 13.5416666667vw; padding: 0px 38.4px; padding: 0vw 5vw; } @media (max-width: 360px) { .login__tab { margin-top: 43.3333333333px; margin-top: 13.5416666667vw; } } @media (max-width: 320px) { .login__tab { padding: 0px 16px; padding: 0vw 5vw; } } .login__tab-list { padding-bottom: 48px; padding-bottom: 6.25vw; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-bottom-style: solid; border-bottom-color: #ddd; font-size: 0; } @media (max-width: 360px) { .login__tab-list { padding-bottom: 20px; padding-bottom: 6.25vw; } } @media (max-width: 360px) { .login__tab-list { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .login__tab-item { position: relative; display: inline-block; width: 50%; text-align: center; font-size: 33.6px; font-size: 4.375vw; color: #888; } @media (max-width: 360px) { .login__tab-item { font-size: 14px; font-size: 4.375vw; } } .login__tab-item + .login__tab-item:before { position: absolute; top: 0; bottom: 0; left: 0; width: 2.4px; width: 0.3125vw; height: 24px; height: 3.125vw; margin: auto; background: #ddd; content: ''; } @media (max-width: 360px) { .login__tab-item + .login__tab-item:before { width: 1px; width: 0.3125vw; } } @media (max-width: 360px) { .login__tab-item + .login__tab-item:before { height: 10px; height: 3.125vw; } } .login__tab-item--active .login__tab-anchor { position: relative; padding: 0px 8px; padding: 0vw 1.0416666667vw; z-index: 1; font-weight: bold; color: #222; } @media (max-width: 320px) { .login__tab-item--active .login__tab-anchor { padding: 0px 3.3333333333px; padding: 0vw 1.0416666667vw; } } .login__tab-item--active .login__tab-anchor:after { position: absolute; bottom: 0; left: 0; display: inline-block; width: 100%; height: 20px; height: 2.6041666667vw; background-color: #fdb812; content: ''; z-index: -1; } @media (max-width: 360px) { .login__tab-item--active .login__tab-anchor:after { height: 8.3333333333px; height: 2.6041666667vw; } } .login__save-id { margin-top: 32px; margin-top: 4.1666666667vw; text-align: left; color: #888; font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .login__save-id { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } @media (max-width: 360px) { .login__save-id { font-size: 12px; font-size: 3.75vw; } } .login__btn + .login__btn { margin-top: 32px; margin-top: 4.1666666667vw; } @media (max-width: 360px) { .login__btn + .login__btn { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .login__btn-wrap { margin-top: 64px; margin-top: 8.3333333333vw; } @media (max-width: 360px) { .login__btn-wrap { margin-top: 26.6666666667px; margin-top: 8.3333333333vw; } } .login__btn-list { display: flex; justify-content: space-between; } .login__btn-item { position: relative; width: 33.3%; color: #222; font-size: 28.8px; font-size: 3.75vw; text-align: center; } @media (max-width: 360px) { .login__btn-item { font-size: 12px; font-size: 3.75vw; } } .login__btn-item + .login__btn-item:before { position: absolute; left: 0; top: 0; bottom: 0; margin: auto; width: 2.4px; width: 0.3125vw; height: 24px; height: 3.125vw; background: #ddd; content: ''; } @media (max-width: 360px) { .login__btn-item + .login__btn-item:before { width: 1px; width: 0.3125vw; } } @media (max-width: 360px) { .login__btn-item + .login__btn-item:before { height: 10px; height: 3.125vw; } } .login-sns { margin-top: 104px; margin-top: 13.5416666667vw; margin-bottom: 112px; margin-bottom: 14.5833333333vw; padding: 0px 38.4px; padding: 0vw 5vw; text-align: center; font-size: 0; } @media (max-width: 360px) { .login-sns { margin-top: 43.3333333333px; margin-top: 13.5416666667vw; } } @media (max-width: 360px) { .login-sns { margin-bottom: 46.6666666667px; margin-bottom: 14.5833333333vw; } } @media (max-width: 320px) { .login-sns { padding: 0px 16px; padding: 0vw 5vw; } } .login-sns__list { margin-top: 64px; margin-top: 8.3333333333vw; } @media (max-width: 360px) { .login-sns__list { margin-top: 26.6666666667px; margin-top: 8.3333333333vw; } } .login-sns__item { position: relative; display: inline-block; margin-left: 51.2px; margin-left: 6.6666666667vw; } @media (max-width: 360px) { .login-sns__item { margin-left: 21.3333333333px; margin-left: 6.6666666667vw; } } .login-sns__item:first-child { margin-left: 0; } .login-sns__img img { width: 96.8px; width: 12.6041666667vw; height: 96.8px; height: 12.6041666667vw; } @media (max-width: 360px) { .login-sns__img img { width: 40.3333333333px; width: 12.6041666667vw; } } @media (max-width: 360px) { .login-sns__img img { height: 40.3333333333px; height: 12.6041666667vw; } } .login-sns__name { margin-top: 22.4px; margin-top: 2.9166666667vw; font-size: 28.8px; font-size: 3.75vw; line-height: 1; color: #888; } @media (max-width: 360px) { .login-sns__name { margin-top: 9.3333333333px; margin-top: 2.9166666667vw; } } @media (max-width: 360px) { .login-sns__name { font-size: 12px; font-size: 3.75vw; } } .find { padding-bottom: 192px; padding-bottom: 25vw; margin-bottom: -112px; margin-bottom: -14.5833333333vw; background-color: #f6f6f6; } @media (max-width: 360px) { .find { padding-bottom: 80px; padding-bottom: 25vw; } } @media (max-width: 360px) { .find { margin-bottom: -46.6666666667px; margin-bottom: -14.5833333333vw; } } .find-content { padding: 0px 38.4px; padding: 0vw 5vw; } @media (max-width: 320px) { .find-content { padding: 0px 16px; padding: 0vw 5vw; } } .find-container { padding-top: 64px; padding-top: 8.3333333333vw; } @media (max-width: 360px) { .find-container { padding-top: 26.6666666667px; padding-top: 8.3333333333vw; } } .find-container + .find-container { margin-top: 80px; margin-top: 10.4166666667vw; border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-style: solid; border-top-color: #ddd; } @media (max-width: 360px) { .find-container + .find-container { margin-top: 33.3333333333px; margin-top: 10.4166666667vw; } } @media (max-width: 360px) { .find-container + .find-container { border-top-width: 1px; border-top-width: 0.3125vw; } } .find-container--has-btn .cta + .cta { margin-top: 32px; margin-top: 4.1666666667vw; } @media (max-width: 360px) { .find-container--has-btn .cta + .cta { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .find-input { margin-bottom: 32px; margin-bottom: 4.1666666667vw; } @media (max-width: 360px) { .find-input { margin-bottom: 13.3333333333px; margin-bottom: 4.1666666667vw; } } .find-input__row { display: inline-block; font-size: 30.4px; font-size: 3.9583333333vw; color: #222; } @media (max-width: 360px) { .find-input__row { font-size: 12.6666666667px; font-size: 3.9583333333vw; } } .find-input__row + .find-input__row { margin-left: 64px; margin-left: 8.3333333333vw; } @media (max-width: 360px) { .find-input__row + .find-input__row { margin-left: 26.6666666667px; margin-left: 8.3333333333vw; } } .find-input__row .ez-radio + span { display: inline-block; color: #888; } .find-input__row .ez-radio-on + span { color: #222; } .find-capcha { display: flex; justify-content: space-between; margin-top: 32px; margin-top: 4.1666666667vw; } @media (max-width: 360px) { .find-capcha { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .find-capcha .captcha_table { width: 386.4px; width: 50.3125vw; border-width: 2.4px; border-width: 0.3125vw; padding: 16px; padding: 2.0833333333vw; border-color: #ddd; border-style: solid; background: #fff; } @media (max-width: 360px) { .find-capcha .captcha_table { width: 161px; width: 50.3125vw; } } @media (max-width: 360px) { .find-capcha .captcha_table { border-width: 1px; border-width: 0.3125vw; } } @media (max-width: 360px) { .find-capcha .captcha_table { padding: 6.6666666667px; padding: 2.0833333333vw; } } .find-capcha .captcha_table img { width: 94.4px; width: 12.2916666667vw; } @media (max-width: 360px) { .find-capcha .captcha_table img { width: 39.3333333333px; width: 12.2916666667vw; } } .find-capcha .captcha_table .captcha_img img { width: 258.4px; width: 33.6458333333vw; } @media (max-width: 360px) { .find-capcha .captcha_table .captcha_img img { width: 107.6666666667px; width: 33.6458333333vw; } } .find-capcha .captcha_table .captcha_td2 { padding-left: 3.2px; padding-left: 0.4166666667vw; } @media (max-width: 360px) { .find-capcha .captcha_table .captcha_td2 { padding-left: 1.3333333333px; padding-left: 0.4166666667vw; } } .find-capcha .captcha_text { width: 285.6px; width: 37.1875vw; border-width: 2.4px; border-width: 0.3125vw; border-color: #ddd; border-style: solid; } @media (max-width: 360px) { .find-capcha .captcha_text { width: 119px; width: 37.1875vw; } } @media (max-width: 360px) { .find-capcha .captcha_text { border-width: 1px; border-width: 0.3125vw; } } .find-capcha .captcha_text #captcha_id_search { border: none; width: 100%; height: 100%; font-size: 28.8px; font-size: 3.75vw; padding: 0px 40px; padding: 0vw 5.2083333333vw; box-sizing: border-box; } @media (max-width: 360px) { .find-capcha .captcha_text #captcha_id_search { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 320px) { .find-capcha .captcha_text #captcha_id_search { padding: 0px 16.6666666667px; padding: 0vw 5.2083333333vw; } } .find-capcha .captcha_text #captcha_pass_search { border: none; width: 100%; height: 100%; font-size: 28.8px; font-size: 3.75vw; padding: 0px 40px; padding: 0vw 5.2083333333vw; box-sizing: border-box; } @media (max-width: 360px) { .find-capcha .captcha_text #captcha_pass_search { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 320px) { .find-capcha .captcha_text #captcha_pass_search { padding: 0px 16.6666666667px; padding: 0vw 5.2083333333vw; } } .find__btn { margin-top: 64px; margin-top: 8.3333333333vw; } @media (max-width: 360px) { .find__btn { margin-top: 26.6666666667px; margin-top: 8.3333333333vw; } } .find-result-btn + .find-result-btn { margin-top: 32px; margin-top: 4.1666666667vw; } @media (max-width: 360px) { .find-result-btn + .find-result-btn { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .find-result__container { margin-top: 48px; margin-top: 6.25vw; padding: 152px 30.4px 64px; padding: 19.7916666667vw 3.9583333333vw 8.3333333333vw; text-align: center; } @media (max-width: 360px) { .find-result__container { margin-top: 20px; margin-top: 6.25vw; } } @media (max-width: 320px) { .find-result__container { padding: 63.3333333333px 12.6666666667px 26.6666666667px; padding: 19.7916666667vw 3.9583333333vw 8.3333333333vw; } } .find-result__container--email { padding-top: 136px; padding-top: 17.7083333333vw; background: url("/design/skinfood/mobile_skinfood/images/icon/icon_chk_email.png") no-repeat; background-size: 119.2px 88px; background-size: 15.5208333333vw 11.4583333333vw; background-position: top center; } @media (max-width: 360px) { .find-result__container--email { padding-top: 56.6666666667px; padding-top: 17.7083333333vw; } } @media (max-width: 320px) { .find-result__container--email { background-size: 49.6666666667px 36.6666666667px; background-size: 15.5208333333vw 11.4583333333vw; } } .find-result__container--phone { background: url("/design/skinfood/mobile_skinfood/images/icon/icon_chk_phone.png") no-repeat; background-size: 96.8px 104.8px; background-size: 12.6041666667vw 13.6458333333vw; background-position: top center; } @media (max-width: 320px) { .find-result__container--phone { background-size: 40.3333333333px 43.6666666667px; background-size: 12.6041666667vw 13.6458333333vw; } } .find-result__container--alert { margin-top: 112px; margin-top: 14.5833333333vw; background: url("/design/skinfood/mobile_skinfood/images/icon/icon_chk_alert.png") no-repeat; background-size: 91.2px 88px; background-size: 11.875vw 11.4583333333vw; background-position: top center; } @media (max-width: 360px) { .find-result__container--alert { margin-top: 46.6666666667px; margin-top: 14.5833333333vw; } } @media (max-width: 320px) { .find-result__container--alert { background-size: 38px 36.6666666667px; background-size: 11.875vw 11.4583333333vw; } } .find-result__desc { font-size: 28.8px; font-size: 3.75vw; line-height: 44.8px; line-height: 5.8333333333vw; letter-spacing: -0.288px; letter-spacing: -0.0375vw; } @media (max-width: 360px) { .find-result__desc { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .find-result__desc { line-height: 18.6666666667px; line-height: 5.8333333333vw; } } @media (max-width: 360px) { .find-result__desc { letter-spacing: -0.12px; letter-spacing: -0.0375vw; } } .find-result__desc--bold { font-weight: bold; } .find-result__desc--bottom { display: block; margin-bottom: 32px; margin-bottom: 4.1666666667vw; line-height: 1; font-size: 33.6px; font-size: 4.375vw; } @media (max-width: 360px) { .find-result__desc--bottom { margin-bottom: 13.3333333333px; margin-bottom: 4.1666666667vw; } } @media (max-width: 360px) { .find-result__desc--bottom { font-size: 14px; font-size: 4.375vw; } } .find-desc { margin: 32px 0px 64px; margin: 4.1666666667vw 0vw 8.3333333333vw; font-size: 30.4px; font-size: 3.9583333333vw; line-height: 1; color: #888; } @media (max-width: 320px) { .find-desc { margin: 13.3333333333px 0px 26.6666666667px; margin: 4.1666666667vw 0vw 8.3333333333vw; } } @media (max-width: 360px) { .find-desc { font-size: 12.6666666667px; font-size: 3.9583333333vw; } } .join-gate__content { padding: 112px 38.4px 120px; padding: 14.5833333333vw 5vw 15.625vw; } @media (max-width: 320px) { .join-gate__content { padding: 46.6666666667px 16px 50px; padding: 14.5833333333vw 5vw 15.625vw; } } .join-gate__btn { margin-top: 80px; margin-top: 10.4166666667vw; } @media (max-width: 360px) { .join-gate__btn { margin-top: 33.3333333333px; margin-top: 10.4166666667vw; } } .join__title { margin-top: 104px; margin-top: 13.5416666667vw; font-size: 33.6px; font-size: 4.375vw; font-weight: bold; letter-spacing: -0.336px; letter-spacing: -0.04375vw; line-height: 44.8px; line-height: 5.8333333333vw; } @media (max-width: 360px) { .join__title { margin-top: 43.3333333333px; margin-top: 13.5416666667vw; } } @media (max-width: 360px) { .join__title { font-size: 14px; font-size: 4.375vw; } } @media (max-width: 360px) { .join__title { letter-spacing: -0.14px; letter-spacing: -0.04375vw; } } @media (max-width: 360px) { .join__title { line-height: 18.6666666667px; line-height: 5.8333333333vw; } } .join__desc { margin-top: 32px; margin-top: 4.1666666667vw; font-size: 28.8px; font-size: 3.75vw; color: #888; letter-spacing: -0.288px; letter-spacing: -0.0375vw; line-height: 1; } @media (max-width: 360px) { .join__desc { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } @media (max-width: 360px) { .join__desc { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .join__desc { letter-spacing: -0.12px; letter-spacing: -0.0375vw; } } .join-auth__content + .join-auth__content { margin-top: 80px; margin-top: 10.4166666667vw; padding-top: 80px; padding-top: 10.4166666667vw; border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-style: solid; border-top-color: #ddd; } @media (max-width: 360px) { .join-auth__content + .join-auth__content { margin-top: 33.3333333333px; margin-top: 10.4166666667vw; } } @media (max-width: 360px) { .join-auth__content + .join-auth__content { padding-top: 33.3333333333px; padding-top: 10.4166666667vw; } } @media (max-width: 360px) { .join-auth__content + .join-auth__content { border-top-width: 1px; border-top-width: 0.3125vw; } } /*# sourceMappingURL=member.css.map */ /* image path */ /* color */ .agreement { background-color: #f6f6f6; padding: 80px 38.4px; padding: 10.4166666667vw 5vw; } @media (max-width: 320px) { .agreement { padding: 33.3333333333px 16px; padding: 10.4166666667vw 5vw; } } .agreement__header { padding-bottom: 67.2px; padding-bottom: 8.75vw; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-bottom-style: solid; border-bottom-color: #dddddd; } @media (max-width: 360px) { .agreement__header { padding-bottom: 28px; padding-bottom: 8.75vw; } } @media (max-width: 360px) { .agreement__header { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .agreement__header-btn { display: inline-block; } .agreement__header-label { font-size: 33.6px; font-size: 4.375vw; color: #212121; font-weight: bold; line-height: 44.8px; line-height: 5.8333333333vw; } @media (max-width: 360px) { .agreement__header-label { font-size: 14px; font-size: 4.375vw; } } @media (max-width: 360px) { .agreement__header-label { line-height: 18.6666666667px; line-height: 5.8333333333vw; } } .agreement__content { height: 240.8px; height: 31.3541666667vw; font-size: 28.8px; font-size: 3.75vw; line-height: 48px; line-height: 6.25vw; background-color: #fff; margin-top: 35.2px; margin-top: 4.5833333333vw; border: none; overflow-y: auto; } @media (max-width: 360px) { .agreement__content { height: 100.3333333333px; height: 31.3541666667vw; } } @media (max-width: 360px) { .agreement__content { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .agreement__content { line-height: 20px; line-height: 6.25vw; } } @media (max-width: 360px) { .agreement__content { margin-top: 14.6666666667px; margin-top: 4.5833333333vw; } } .agreement__content table { border-width: 2.4px; border-width: 0.3125vw; border-color: #222; border-style: solid; border-collapse: collapse; } @media (max-width: 360px) { .agreement__content table { border-width: 1px; border-width: 0.3125vw; } } .agreement__content table th, .agreement__content table td { border-width: 2.4px; border-width: 0.3125vw; border-color: #222; border-style: solid; word-break: keep-all; } @media (max-width: 360px) { .agreement__content table th, .agreement__content table td { border-width: 1px; border-width: 0.3125vw; } } .agreement__content-section { margin-top: 64px; margin-top: 8.3333333333vw; } @media (max-width: 360px) { .agreement__content-section { margin-top: 26.6666666667px; margin-top: 8.3333333333vw; } } .agreement__content-btn { display: inline-block; } .agreement__content-label { font-size: 33.6px; font-size: 4.375vw; color: #212121; line-height: 44.8px; line-height: 5.8333333333vw; } @media (max-width: 360px) { .agreement__content-label { font-size: 14px; font-size: 4.375vw; } } @media (max-width: 360px) { .agreement__content-label { line-height: 18.6666666667px; line-height: 5.8333333333vw; } } .agreement__content-label--small { display: inline-block; font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .agreement__content-label--small { font-size: 12px; font-size: 3.75vw; } } .agreement__content-label--small + .agreement__content-label--small { margin-top: 32px; margin-top: 4.1666666667vw; } @media (max-width: 360px) { .agreement__content-label--small + .agreement__content-label--small { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .agreement__footer { margin-top: 80px; margin-top: 10.4166666667vw; } @media (max-width: 360px) { .agreement__footer { margin-top: 33.3333333333px; margin-top: 10.4166666667vw; } } .register { padding: 80px 38.4px 0px; padding: 10.4166666667vw 5vw 0vw; } @media (max-width: 320px) { .register { padding: 33.3333333333px 16px 0px; padding: 10.4166666667vw 5vw 0vw; } } .register__content ~ .register__content { margin-top: 144px; margin-top: 18.75vw; } @media (max-width: 360px) { .register__content ~ .register__content { margin-top: 60px; margin-top: 18.75vw; } } .register__content-title { display: inline-block; position: relative; z-index: 1; padding: 0px 7.2px; padding: 0vw 0.9375vw; font-size: 33.6px; font-size: 4.375vw; font-weight: bold; color: #212121; } @media (max-width: 320px) { .register__content-title { padding: 0px 3px; padding: 0vw 0.9375vw; } } @media (max-width: 360px) { .register__content-title { font-size: 14px; font-size: 4.375vw; } } .register__content-title:after { position: absolute; bottom: 0; left: 0; display: inline-block; width: 100%; height: 20px; height: 2.6041666667vw; background-color: #fdb812; content: ""; z-index: -1; } @media (max-width: 360px) { .register__content-title:after { height: 8.3333333333px; height: 2.6041666667vw; } } .register__content-sub-title { margin-top: 24px; margin-top: 3.125vw; color: #888888; font-size: 28.8px; font-size: 3.75vw; line-height: 1.7; } @media (max-width: 360px) { .register__content-sub-title { margin-top: 10px; margin-top: 3.125vw; } } @media (max-width: 360px) { .register__content-sub-title { font-size: 12px; font-size: 3.75vw; } } .register__content-form { margin-top: 64px; margin-top: 8.3333333333vw; } @media (max-width: 360px) { .register__content-form { margin-top: 26.6666666667px; margin-top: 8.3333333333vw; } } .register__content-form--short-top { margin-top: 26.4px; margin-top: 3.4375vw; } @media (max-width: 360px) { .register__content-form--short-top { margin-top: 11px; margin-top: 3.4375vw; } } .register__content-form--small-top { margin-top: 48px; margin-top: 6.25vw; } @media (max-width: 360px) { .register__content-form--small-top { margin-top: 20px; margin-top: 6.25vw; } } .register__content-form--large-top { margin-top: 68.8px; margin-top: 8.9583333333vw; } @media (max-width: 360px) { .register__content-form--large-top { margin-top: 28.6666666667px; margin-top: 8.9583333333vw; } } .register__content-form-section__title { color: #212121; font-size: 30.4px; font-size: 3.9583333333vw; font-weight: bold; margin-bottom: 26.4px; margin-bottom: 3.4375vw; line-height: 1; } @media (max-width: 360px) { .register__content-form-section__title { font-size: 12.6666666667px; font-size: 3.9583333333vw; } } @media (max-width: 360px) { .register__content-form-section__title { margin-bottom: 11px; margin-bottom: 3.4375vw; } } .register__content-form-section ~ .register__content-form-section { margin-top: 63.2px; margin-top: 8.2291666667vw; } @media (max-width: 360px) { .register__content-form-section ~ .register__content-form-section { margin-top: 26.3333333333px; margin-top: 8.2291666667vw; } } .register__content-form-section--border ~ .register__content-form-section--border { border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-style: solid; border-top-color: #dddddd; padding-top: 64px; padding-top: 8.3333333333vw; } @media (max-width: 360px) { .register__content-form-section--border ~ .register__content-form-section--border { border-top-width: 1px; border-top-width: 0.3125vw; } } @media (max-width: 360px) { .register__content-form-section--border ~ .register__content-form-section--border { padding-top: 26.6666666667px; padding-top: 8.3333333333vw; } } .register__content-form-section--large-top { margin-top: 69.6px; margin-top: 9.0625vw; } @media (max-width: 360px) { .register__content-form-section--large-top { margin-top: 29px; margin-top: 9.0625vw; } } .register__content-form-section-radio-content { font-size: 30.4px; font-size: 3.9583333333vw; color: #888888; } @media (max-width: 360px) { .register__content-form-section-radio-content { font-size: 12.6666666667px; font-size: 3.9583333333vw; } } .register__content-form-section-radio-content label { margin-top: 41.6px; margin-top: 5.4166666667vw; } @media (max-width: 360px) { .register__content-form-section-radio-content label { margin-top: 17.3333333333px; margin-top: 5.4166666667vw; } } .register__content-form-section-radio-content label ~ label { margin-left: 63.2px; margin-left: 8.2291666667vw; } @media (max-width: 360px) { .register__content-form-section-radio-content label ~ label { margin-left: 26.3333333333px; margin-left: 8.2291666667vw; } } .register__content-form-section-radio-content .ez-radio { vertical-align: text-bottom; } .register__content-form-section-radio-content--2column { font-size: 0; margin-top: -41.6px; margin-top: -5.4166666667vw; } @media (max-width: 360px) { .register__content-form-section-radio-content--2column { margin-top: -17.3333333333px; margin-top: -5.4166666667vw; } } .register__content-form-section-radio-content--2column label { font-size: 30.4px; font-size: 3.9583333333vw; color: #888888; display: inline-block; width: calc(50% - 5px); } @media (max-width: 360px) { .register__content-form-section-radio-content--2column label { font-size: 12.6666666667px; font-size: 3.9583333333vw; } } .register__content-form-section-radio-content--2column label ~ label { margin-left: 0; } .register__content-form-section-radio-content + .input-content { margin-top: 43.2px; margin-top: 5.625vw; } @media (max-width: 360px) { .register__content-form-section-radio-content + .input-content { margin-top: 18px; margin-top: 5.625vw; } } .register__content-form-section-selectbox { position: relative; width: 100%; margin-top: 16px; margin-top: 2.0833333333vw; } @media (max-width: 360px) { .register__content-form-section-selectbox { margin-top: 6.6666666667px; margin-top: 2.0833333333vw; } } .register__content-form-section-selectbox select { width: 100%; height: 144px; height: 18.75vw; padding: 39.2px; padding: 5.1041666667vw; appearance: none; -moz-appearance: none; -webkit-appearance: none; color: #888888; font-size: 28.8px; font-size: 3.75vw; border-radius: 0; } @media (max-width: 360px) { .register__content-form-section-selectbox select { height: 60px; height: 18.75vw; } } @media (max-width: 360px) { .register__content-form-section-selectbox select { padding: 16.3333333333px; padding: 5.1041666667vw; } } @media (max-width: 360px) { .register__content-form-section-selectbox select { font-size: 12px; font-size: 3.75vw; } } .register__content-form-section-selectbox:after { content: ''; display: inline-block; position: absolute; right: 38.4px; right: 5vw; width: 26.4px; width: 3.4375vw; height: 100%; background-image: url(/design/skinfood/mobile_skinfood/images/icon/icon_arrow_down.png); background-size: 26.4px 16.8px; background-size: 3.4375vw 2.1875vw; background-repeat: no-repeat; background-position: center; } @media (max-width: 360px) { .register__content-form-section-selectbox:after { right: 16px; right: 5vw; } } @media (max-width: 360px) { .register__content-form-section-selectbox:after { width: 11px; width: 3.4375vw; } } @media (max-width: 320px) { .register__content-form-section-selectbox:after { background-size: 11px 7px; background-size: 3.4375vw 2.1875vw; } } .register__content-form-section-agreement-label { display: inline-block; font-size: 30.4px; font-size: 3.9583333333vw; color: #212121; margin-bottom: 36.8px; margin-bottom: 4.7916666667vw; } @media (max-width: 360px) { .register__content-form-section-agreement-label { font-size: 12.6666666667px; font-size: 3.9583333333vw; } } @media (max-width: 360px) { .register__content-form-section-agreement-label { margin-bottom: 15.3333333333px; margin-bottom: 4.7916666667vw; } } .register__content-form-section-agreement-btn { display: inline-block; } .register__content-form-section-agreement-info { box-sizing: border-box; height: 240.8px; height: 31.3541666667vw; background-color: #ffffff; overflow-y: auto; padding: 48px 39.2px 21.6px; padding: 6.25vw 5.1041666667vw 2.8125vw; font-size: 28.8px; font-size: 3.75vw; line-height: 48px; line-height: 6.25vw; } @media (max-width: 360px) { .register__content-form-section-agreement-info { height: 100.3333333333px; height: 31.3541666667vw; } } @media (max-width: 320px) { .register__content-form-section-agreement-info { padding: 20px 16.3333333333px 9px; padding: 6.25vw 5.1041666667vw 2.8125vw; } } @media (max-width: 360px) { .register__content-form-section-agreement-info { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .register__content-form-section-agreement-info { line-height: 20px; line-height: 6.25vw; } } .register__footer-btn-wrap { margin-top: 48px; margin-top: 6.25vw; margin-bottom: 80px; margin-bottom: 10.4166666667vw; padding: 0px 38.4px; padding: 0vw 5vw; } @media (max-width: 360px) { .register__footer-btn-wrap { margin-top: 20px; margin-top: 6.25vw; } } @media (max-width: 360px) { .register__footer-btn-wrap { margin-bottom: 33.3333333333px; margin-bottom: 10.4166666667vw; } } @media (max-width: 320px) { .register__footer-btn-wrap { padding: 0px 16px; padding: 0vw 5vw; } } .register-complete { text-align: center; padding: 112px 38.4px 62.4px; padding: 14.5833333333vw 5vw 8.125vw; } @media (max-width: 320px) { .register-complete { padding: 46.6666666667px 16px 26px; padding: 14.5833333333vw 5vw 8.125vw; } } .register-complete-wrap { margin-bottom: 112px; margin-bottom: 14.5833333333vw; } @media (max-width: 360px) { .register-complete-wrap { margin-bottom: 46.6666666667px; margin-bottom: 14.5833333333vw; } } .register-complete__img { width: 97.6px; width: 12.7083333333vw; height: 94.4px; height: 12.2916666667vw; } @media (max-width: 360px) { .register-complete__img { width: 40.6666666667px; width: 12.7083333333vw; } } @media (max-width: 360px) { .register-complete__img { height: 39.3333333333px; height: 12.2916666667vw; } } .register-complete__desc { font-size: 33.6px; font-size: 4.375vw; color: #212121; margin-top: 64px; margin-top: 8.3333333333vw; font-weight: bold; } @media (max-width: 360px) { .register-complete__desc { font-size: 14px; font-size: 4.375vw; } } @media (max-width: 360px) { .register-complete__desc { margin-top: 26.6666666667px; margin-top: 8.3333333333vw; } } .register-complete__desc-sub-text { font-size: 28.8px; font-size: 3.75vw; font-weight: normal; margin-top: 32px; margin-top: 4.1666666667vw; color: #888888; } @media (max-width: 360px) { .register-complete__desc-sub-text { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .register-complete__desc-sub-text { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .register-complete__btn { box-sizing: border-box; } .register-complete__btn-wrap { margin-top: 64px; margin-top: 8.3333333333vw; } @media (max-width: 360px) { .register-complete__btn-wrap { margin-top: 26.6666666667px; margin-top: 8.3333333333vw; } } .register-complete-banner { text-align: center; } .register-complete-banner__desc-sub-text { font-size: 28.8px; font-size: 3.75vw; color: #212121; margin-bottom: 4.8px; margin-bottom: 0.625vw; } @media (max-width: 360px) { .register-complete-banner__desc-sub-text { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .register-complete-banner__desc-sub-text { margin-bottom: 2px; margin-bottom: 0.625vw; } } .register-complete-banner__desc-text { font-size: 33.6px; font-size: 4.375vw; font-weight: bold; color: #212121; } @media (max-width: 360px) { .register-complete-banner__desc-text { font-size: 14px; font-size: 4.375vw; } } .register-complete-banner__desc-text--arrow:after { content: ''; display: inline-block; vertical-align: middle; margin-left: 16px; margin-left: 2.0833333333vw; width: 16.8px; width: 2.1875vw; height: 26.4px; height: 3.4375vw; background-image: url(/design/skinfood/mobile_skinfood/images/icon/icon_anchor.svg); background-size: cover; background-repeat: no-repeat; } @media (max-width: 360px) { .register-complete-banner__desc-text--arrow:after { margin-left: 6.6666666667px; margin-left: 2.0833333333vw; } } @media (max-width: 360px) { .register-complete-banner__desc-text--arrow:after { width: 7px; width: 2.1875vw; } } @media (max-width: 360px) { .register-complete-banner__desc-text--arrow:after { height: 11px; height: 3.4375vw; } } .register--padding-bottom { padding-bottom: 56px; padding-bottom: 7.2916666667vw; } @media (max-width: 360px) { .register--padding-bottom { padding-bottom: 23.3333333333px; padding-bottom: 7.2916666667vw; } } .register__sns-item { display: inline-block; width: 96.8px; width: 12.6041666667vw; height: 96.8px; height: 12.6041666667vw; } @media (max-width: 360px) { .register__sns-item { width: 40.3333333333px; width: 12.6041666667vw; } } @media (max-width: 360px) { .register__sns-item { height: 40.3333333333px; height: 12.6041666667vw; } } .register__sns-item img { width: 100%; height: auto; } .register__sns-item ~ .register__sns-item { margin-left: 51.2px; margin-left: 6.6666666667vw; } @media (max-width: 360px) { .register__sns-item ~ .register__sns-item { margin-left: 21.3333333333px; margin-left: 6.6666666667vw; } } .input-content--3column { display: flex; justify-content: space-between; } .input-content--3column input { width: 217.6px; width: 28.3333333333vw; } @media (max-width: 360px) { .input-content--3column input { width: 90.6666666667px; width: 28.3333333333vw; } } .input-content--email { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .input-content--email input { width: 316.8px; width: 41.25vw; } .input-content--email input.input-content__text--only-text { padding: 40px; padding: 5.2083333333vw; } @media (max-width: 360px) { .input-content--email input.input-content__text--only-text { padding: 16.6666666667px; padding: 5.2083333333vw; } } @media (max-width: 360px) { .input-content--email input { width: 132px; width: 41.25vw; } } .input-content--email-icon { font-size: 28.8px; font-size: 3.75vw; color: #888888; } @media (max-width: 360px) { .input-content--email-icon { font-size: 12px; font-size: 3.75vw; } } .input-content--has-btn { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .input-content--has-btn .input-content__text { width: 454.4px; width: 59.1666666667vw; } @media (max-width: 360px) { .input-content--has-btn .input-content__text { width: 189.3333333333px; width: 59.1666666667vw; } } .input-content--has-btn .cta { width: 217.6px; width: 28.3333333333vw; padding: 57.6px 0px; padding: 7.5vw 0vw; text-align: center; } @media (max-width: 360px) { .input-content--has-btn .cta { width: 90.6666666667px; width: 28.3333333333vw; } } @media (max-width: 320px) { .input-content--has-btn .cta { padding: 24px 0px; padding: 7.5vw 0vw; } } .input-content--has-btn .cta--long-text { padding: 0; font-weight: normal; line-height: 48px; line-height: 6.25vw; } @media (max-width: 360px) { .input-content--has-btn .cta--long-text { line-height: 20px; line-height: 6.25vw; } } .input-content__info { margin-top: 15.2px; margin-top: 1.9791666667vw; font-size: 28.8px; font-size: 3.75vw; color: #888888; letter-spacing: -0.64px; letter-spacing: -0.0833333333vw; } @media (max-width: 360px) { .input-content__info { margin-top: 6.3333333333px; margin-top: 1.9791666667vw; } } @media (max-width: 360px) { .input-content__info { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .input-content__info { letter-spacing: -0.2666666667px; letter-spacing: -0.0833333333vw; } } .input-content__info--margin-top { display: block; margin-top: 9.6px; margin-top: 1.25vw; } @media (max-width: 360px) { .input-content__info--margin-top { margin-top: 4px; margin-top: 1.25vw; } } .input-content input.input-content__text--birth { appearance: none; -moz-appearance: none; -webkit-appearance: none; } .input-thumb__list { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 69.6px; margin-bottom: 9.0625vw; } @media (max-width: 360px) { .input-thumb__list { margin-bottom: 29px; margin-bottom: 9.0625vw; } } .input-thumb__list--margin-top { margin-top: 63.2px; margin-top: 8.2291666667vw; } @media (max-width: 360px) { .input-thumb__list--margin-top { margin-top: 26.3333333333px; margin-top: 8.2291666667vw; } } .input-thumb__item-img-wrap { display: inline-block; position: relative; box-sizing: border-box; width: 337.6px; width: 43.9583333333vw; height: 337.6px; height: 43.9583333333vw; border-width: 2.4px; border-width: 0.3125vw; border-color: #dddddd; border-style: solid; background-color: #ffffff; text-align: center; } @media (max-width: 360px) { .input-thumb__item-img-wrap { width: 140.6666666667px; width: 43.9583333333vw; } } @media (max-width: 360px) { .input-thumb__item-img-wrap { height: 140.6666666667px; height: 43.9583333333vw; } } @media (max-width: 360px) { .input-thumb__item-img-wrap { border-width: 1px; border-width: 0.3125vw; } } .input-thumb__item-img-wrap:before { content: ''; display: inline-block; vertical-align: middle; height: 100%; } .input-thumb__item-img-wrap .ez-checkbox { position: absolute; top: 22.4px; top: 2.9166666667vw; left: 22.4px; left: 2.9166666667vw; } @media (max-width: 360px) { .input-thumb__item-img-wrap .ez-checkbox { top: 9.3333333333px; top: 2.9166666667vw; } } @media (max-width: 360px) { .input-thumb__item-img-wrap .ez-checkbox { left: 9.3333333333px; left: 2.9166666667vw; } } .input-thumb__item-img-wrap .ez-radio { position: absolute; top: 22.4px; top: 2.9166666667vw; left: 22.4px; left: 2.9166666667vw; } @media (max-width: 360px) { .input-thumb__item-img-wrap .ez-radio { top: 9.3333333333px; top: 2.9166666667vw; } } @media (max-width: 360px) { .input-thumb__item-img-wrap .ez-radio { left: 9.3333333333px; left: 2.9166666667vw; } } .input-thumb__item-text { margin-top: 29.6px; margin-top: 3.8541666667vw; display: inline-block; color: #888888; font-size: 28.8px; font-size: 3.75vw; word-break: break-all; } @media (max-width: 360px) { .input-thumb__item-text { margin-top: 12.3333333333px; margin-top: 3.8541666667vw; } } @media (max-width: 360px) { .input-thumb__item-text { font-size: 12px; font-size: 3.75vw; } } .input-thumb__item--active .input-thumb__item-text { color: #212121; font-weight: bold; } .input-thumb__item img { max-width: 268.8px; max-width: 35vw; max-height: 268.8px; max-height: 35vw; } @media (max-width: 360px) { .input-thumb__item img { max-width: 112px; max-width: 35vw; } } @media (max-width: 360px) { .input-thumb__item img { max-height: 112px; max-height: 35vw; } } .tooltip { position: relative; } .tooltip--info { color: #ff593e; } .tooltip__anchor { display: inline-block; vertical-align: middle; font-size: 0; width: 36.8px; width: 4.7916666667vw; height: 36.8px; height: 4.7916666667vw; margin-left: 15.2px; margin-left: 1.9791666667vw; background-image: url("/design/skinfood/mobile_skinfood/images/icon/icon_tooltip.png"); background-size: 36.8px 36.8px; background-size: 4.7916666667vw 4.7916666667vw; background-position: center; } @media (max-width: 360px) { .tooltip__anchor { width: 15.3333333333px; width: 4.7916666667vw; } } @media (max-width: 360px) { .tooltip__anchor { height: 15.3333333333px; height: 4.7916666667vw; } } @media (max-width: 360px) { .tooltip__anchor { margin-left: 6.3333333333px; margin-left: 1.9791666667vw; } } @media (max-width: 320px) { .tooltip__anchor { background-size: 15.3333333333px 15.3333333333px; background-size: 4.7916666667vw 4.7916666667vw; } } .tooltip__anchor--info { background-image: url("/design/skinfood/mobile_skinfood/images/icon/icon_tootip_info.png"); } .tooltip__content { display: none; box-sizing: border-box; position: absolute; left: 0; width: 100%; z-index: 2; padding: 48px 61.6px; padding: 6.25vw 8.0208333333vw; font-size: 28.8px; font-size: 3.75vw; color: #212121; background-color: #ffffff; border-width: 2.4px; border-width: 0.3125vw; border-color: #eeeeee; border-style: solid; } @media (max-width: 320px) { .tooltip__content { padding: 20px 25.6666666667px; padding: 6.25vw 8.0208333333vw; } } @media (max-width: 360px) { .tooltip__content { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .tooltip__content { border-width: 1px; border-width: 0.3125vw; } } .tooltip__content-item { line-height: 48px; line-height: 6.25vw; } @media (max-width: 360px) { .tooltip__content-item { line-height: 20px; line-height: 6.25vw; } } .tooltip__content-item--dot { position: relative; } .tooltip__content-item--dot:before { content: ''; position: absolute; top: 16px; top: 2.0833333333vw; left: -12.8px; left: -1.6666666667vw; display: inline-block; width: 4.8px; width: 0.625vw; height: 4.8px; height: 0.625vw; border-radius: 50%; background-color: #222222; } @media (max-width: 360px) { .tooltip__content-item--dot:before { top: 6.6666666667px; top: 2.0833333333vw; } } @media (max-width: 360px) { .tooltip__content-item--dot:before { left: -5.3333333333px; left: -1.6666666667vw; } } @media (max-width: 360px) { .tooltip__content-item--dot:before { width: 2px; width: 0.625vw; } } @media (max-width: 360px) { .tooltip__content-item--dot:before { height: 2px; height: 0.625vw; } } .tooltip__content-item ~ .tooltip__content-item { margin-top: 32px; margin-top: 4.1666666667vw; } @media (max-width: 360px) { .tooltip__content-item ~ .tooltip__content-item { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .tooltip__content-arrow { display: inline-block; position: absolute; top: 0; } .tooltip__content-arrow:before { content: ''; display: inline-block; width: 0; height: 0; border-left-width: 14.4px; border-left-width: 1.875vw; border-right-width: 14.4px; border-right-width: 1.875vw; border-bottom-width: 14.4px; border-bottom-width: 1.875vw; border-left-color: transparent; border-right-color: transparent; border-bottom-color: #eeeeee; border-left-style: solid; border-right-style: solid; border-bottom-style: solid; position: absolute; top: -14.4px; top: -1.875vw; left: 0; } @media (max-width: 360px) { .tooltip__content-arrow:before { border-left-width: 6px; border-left-width: 1.875vw; } } @media (max-width: 360px) { .tooltip__content-arrow:before { border-right-width: 6px; border-right-width: 1.875vw; } } @media (max-width: 360px) { .tooltip__content-arrow:before { border-bottom-width: 6px; border-bottom-width: 1.875vw; } } @media (max-width: 360px) { .tooltip__content-arrow:before { top: -6px; top: -1.875vw; } } .tooltip__content-arrow:after { content: ''; display: inline-block; width: 0; height: 0; border-left-width: 14.4px; border-left-width: 1.875vw; border-right-width: 14.4px; border-right-width: 1.875vw; border-bottom-width: 14.4px; border-bottom-width: 1.875vw; border-left-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-color: transparent; border-right-color: transparent; border-bottom-color: #ffffff; position: absolute; top: -12px; top: -1.5625vw; left: 0; } @media (max-width: 360px) { .tooltip__content-arrow:after { border-left-width: 6px; border-left-width: 1.875vw; } } @media (max-width: 360px) { .tooltip__content-arrow:after { border-right-width: 6px; border-right-width: 1.875vw; } } @media (max-width: 360px) { .tooltip__content-arrow:after { border-bottom-width: 6px; border-bottom-width: 1.875vw; } } @media (max-width: 360px) { .tooltip__content-arrow:after { top: -5px; top: -1.5625vw; } } label.active { font-weight: bold; color: #212121; line-height: 1.1; } /*# sourceMappingURL=member_jy.css.map */ /* image path */ /* color */ .order-delivery__title { color: #222222; font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .order-delivery__title { font-size: 12px; font-size: 3.75vw; } } .order-delivery__title-desc { color: #888888; } .order-delivery__title-number:before { content: ''; display: inline-block; background-color: #dddddd; width: 2.4px; width: 0.3125vw; height: 24px; height: 3.125vw; margin: 0px 11.2px; margin: 0vw 1.4583333333vw; } @media (max-width: 360px) { .order-delivery__title-number:before { width: 1px; width: 0.3125vw; } } @media (max-width: 360px) { .order-delivery__title-number:before { height: 10px; height: 3.125vw; } } @media (max-width: 320px) { .order-delivery__title-number:before { margin: 0px 4.6666666667px; margin: 0vw 1.4583333333vw; } } .order-delivery__item { margin-bottom: 32px; margin-bottom: 4.1666666667vw; } @media (max-width: 360px) { .order-delivery__item { margin-bottom: 13.3333333333px; margin-bottom: 4.1666666667vw; } } .order-delivery__content { color: #222222; font-size: 28.8px; font-size: 3.75vw; margin-top: 32px; margin-top: 4.1666666667vw; margin-bottom: 22.4px; margin-bottom: 2.9166666667vw; } @media (max-width: 360px) { .order-delivery__content { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .order-delivery__content { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } @media (max-width: 360px) { .order-delivery__content { margin-bottom: 9.3333333333px; margin-bottom: 2.9166666667vw; } } .order-delivery__modify { text-align: right; font-size: 26.4px; font-size: 3.4375vw; } @media (max-width: 360px) { .order-delivery__modify { font-size: 11px; font-size: 3.4375vw; } } .order-delivery__modify-btn { border-bottom: 0.3125vw solid #222222; } .order-delivery__modify-btn:not(:first-child) { margin-left: 49.6px; margin-left: 6.4583333333vw; } @media (max-width: 360px) { .order-delivery__modify-btn:not(:first-child) { margin-left: 20.6666666667px; margin-left: 6.4583333333vw; } } .order__title { padding-top: 64px; padding-top: 8.3333333333vw; padding-bottom: 56px; padding-bottom: 7.2916666667vw; } @media (max-width: 360px) { .order__title { padding-top: 26.6666666667px; padding-top: 8.3333333333vw; } } @media (max-width: 360px) { .order__title { padding-bottom: 23.3333333333px; padding-bottom: 7.2916666667vw; } } .order__title--padding-left { padding-left: 38.4px; padding-left: 5vw; } @media (max-width: 360px) { .order__title--padding-left { padding-left: 16px; padding-left: 5vw; } } .order__title--padding-small { padding-bottom: 32px; padding-bottom: 4.1666666667vw; } @media (max-width: 360px) { .order__title--padding-small { padding-bottom: 13.3333333333px; padding-bottom: 4.1666666667vw; } } .order__label { margin-top: 38.4px; margin-top: 5vw; } @media (max-width: 360px) { .order__label { margin-top: 16px; margin-top: 5vw; } } .order__tabs { display: flex; justify-content: space-around; align-items: center; border-bottom-color: #eeeeee; border-bottom-style: solid; background: #fff; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; height: 64px; height: 8.3333333333vw; margin-bottom: 48px; margin-bottom: 6.25vw; } @media (max-width: 360px) { .order__tabs { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } @media (max-width: 360px) { .order__tabs { height: 26.6666666667px; height: 8.3333333333vw; } } @media (max-width: 360px) { .order__tabs { margin-bottom: 20px; margin-bottom: 6.25vw; } } .order__tabs-btn { position: relative; display: inline-block; width: 100%; color: #888888; box-sizing: border-box; font-size: 28.8px; font-size: 3.75vw; text-align: center; } @media (max-width: 360px) { .order__tabs-btn { font-size: 12px; font-size: 3.75vw; } } .order__tabs-btn:first-child:after { position: absolute; right: 0; display: inline-block; width: 2.4px; width: 0.3125vw; height: 24px; height: 3.125vw; background: #ddd; content: ''; } @media (max-width: 360px) { .order__tabs-btn:first-child:after { width: 1px; width: 0.3125vw; } } @media (max-width: 360px) { .order__tabs-btn:first-child:after { height: 10px; height: 3.125vw; } } .order__tabs-btn.current a { color: #222222; font-weight: bold; position: relative; } .order__tabs-btn.current a:before { content: ''; display: inline-block; position: absolute; width: 100%; background: #222222; left: 0; bottom: -16px; bottom: -2.0833333333vw; height: 6.4px; height: 0.8333333333vw; } @media (max-width: 360px) { .order__tabs-btn.current a:before { bottom: -6.6666666667px; bottom: -2.0833333333vw; } } @media (max-width: 360px) { .order__tabs-btn.current a:before { height: 2.6666666667px; height: 0.8333333333vw; } } .order-settle__label-container { margin-top: 48px; margin-top: 6.25vw; } @media (max-width: 360px) { .order-settle__label-container { margin-top: 20px; margin-top: 6.25vw; } } .order-settle__label-container--border { padding-top: 48px; padding-top: 6.25vw; border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-style: solid; border-top-color: #eee; } @media (max-width: 360px) { .order-settle__label-container--border { padding-top: 20px; padding-top: 6.25vw; } } @media (max-width: 360px) { .order-settle__label-container--border { border-top-width: 1px; border-top-width: 0.3125vw; } } .settle__content { padding: 0px 38.4px; padding: 0vw 5vw; } @media (max-width: 320px) { .settle__content { padding: 0px 16px; padding: 0vw 5vw; } } .settle__content--padding-bottom { padding-bottom: 64px; padding-bottom: 8.3333333333vw; } @media (max-width: 360px) { .settle__content--padding-bottom { padding-bottom: 26.6666666667px; padding-bottom: 8.3333333333vw; } } .settle__content--border { border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-bottom-style: solid; border-bottom-color: #eee; } @media (max-width: 360px) { .settle__content--border { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .settle__content-info { font-size: 28.8px; font-size: 3.75vw; line-height: 44.8px; line-height: 5.8333333333vw; } @media (max-width: 360px) { .settle__content-info { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .settle__content-info { line-height: 18.6666666667px; line-height: 5.8333333333vw; } } .settle__content-info__title { color: #888888; } .settle__content-info__title--dark { color: #222222; } .settle__payment { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .settle__payment-item { margin-top: 16px; margin-top: 2.0833333333vw; text-align: center; font-size: 28.8px; font-size: 3.75vw; width: 337.6px; width: 43.9583333333vw; height: 92.8px; height: 12.0833333333vw; line-height: 92.8px; line-height: 12.0833333333vw; border-width: 2.4px; border-width: 0.3125vw; border-color: #ddd; border-style: solid; background: #f6f6f6; box-sizing: border-box; } @media (max-width: 360px) { .settle__payment-item { margin-top: 6.6666666667px; margin-top: 2.0833333333vw; } } @media (max-width: 360px) { .settle__payment-item { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .settle__payment-item { width: 140.6666666667px; width: 43.9583333333vw; } } @media (max-width: 360px) { .settle__payment-item { height: 38.6666666667px; height: 12.0833333333vw; } } @media (max-width: 360px) { .settle__payment-item { line-height: 38.6666666667px; line-height: 12.0833333333vw; } } @media (max-width: 360px) { .settle__payment-item { border-width: 1px; border-width: 0.3125vw; } } .settle__payment-item:first-child { margin-top: 0; } .settle__payment-item:nth-child(2) { margin-top: 0; } .settle__payment-item.active { background: #222; border-color: #222; color: #fff; font-weight: bold; } .settle__payment .ez-radio { display: none; } .settle__payment-label { display: inline-block; width: 100%; color: #222222; background: #f6f6f6; line-height: 92.8px; line-height: 12.0833333333vw; border: 0.3125vw solid #dddddd; } @media (max-width: 360px) { .settle__payment-label { line-height: 38.6666666667px; line-height: 12.0833333333vw; } } .settle__payment-label--active { background: #222222; color: #ffffff; font-weight: bold; } /*# sourceMappingURL=order.css.map */ .cta--long-text { padding: 0; } .cart-desc { height: 124px; height: 16.1458333333vw; line-height: 124px; line-height: 16.1458333333vw; background: #f6f6f6; color: #888; font-size: 26.4px; font-size: 3.4375vw; text-align: center; } @media (max-width: 360px) { .cart-desc { height: 51.6666666667px; height: 16.1458333333vw; } } @media (max-width: 360px) { .cart-desc { line-height: 51.6666666667px; line-height: 16.1458333333vw; } } @media (max-width: 360px) { .cart-desc { font-size: 11px; font-size: 3.4375vw; } } .cart-detail { margin-top: 32px; margin-top: 4.1666666667vw; } @media (max-width: 360px) { .cart-detail { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .cart-detail__top { display: flex; justify-content: space-between; padding: 0px 38.4px; padding: 0vw 5vw; height: 100px; height: 13.0208333333vw; line-height: 100px; line-height: 13.0208333333vw; border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-color: #eee; border-top-style: solid; font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 320px) { .cart-detail__top { padding: 0px 16px; padding: 0vw 5vw; } } @media (max-width: 360px) { .cart-detail__top { height: 41.6666666667px; height: 13.0208333333vw; } } @media (max-width: 360px) { .cart-detail__top { line-height: 41.6666666667px; line-height: 13.0208333333vw; } } @media (max-width: 360px) { .cart-detail__top { border-top-width: 1px; border-top-width: 0.3125vw; } } @media (max-width: 360px) { .cart-detail__top { font-size: 12px; font-size: 3.75vw; } } .cart-empty { padding: 0px 38.4px 112px; padding: 0vw 5vw 14.5833333333vw; text-align: center; background: url("/design/skinfood/mobile_skinfood/images/bg/bg_cart.png") no-repeat; background-size: 100% 100%; } @media (max-width: 320px) { .cart-empty { padding: 0px 16px 46.6666666667px; padding: 0vw 5vw 14.5833333333vw; } } .cart-empty--white { background: #fff; } .cart-empty--small { padding-bottom: 0; } .cart-empty__title { padding-top: 269.6px; padding-top: 35.1041666667vw; font-size: 28.8px; font-size: 3.75vw; font-weight: bold; line-height: 1; background: url("/design/skinfood/mobile_skinfood/images/icon/icon_cart_empty.png") no-repeat; background-size: 100px 93.6px; background-size: 13.0208333333vw 12.1875vw; background-position-y: 112px; background-position-y: 14.5833333333vw; background-position-x: center; } @media (max-width: 360px) { .cart-empty__title { padding-top: 112.3333333333px; padding-top: 35.1041666667vw; } } @media (max-width: 360px) { .cart-empty__title { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 320px) { .cart-empty__title { background-size: 41.6666666667px 39px; background-size: 13.0208333333vw 12.1875vw; } } @media (max-width: 360px) { .cart-empty__title { background-position-y: 46.6666666667px; background-position-y: 14.5833333333vw; } } .cart-empty__title--recent { background-image: url("/design/skinfood/mobile_skinfood/images/icon/icon_sorry.png"); background-size: 109.6px 105.6px; background-size: 14.2708333333vw 13.75vw; } @media (max-width: 320px) { .cart-empty__title--recent { background-size: 45.6666666667px 44px; background-size: 14.2708333333vw 13.75vw; } } .cart-empty__title--truck { padding-top: 261.6px; padding-top: 34.0625vw; background-image: url("/design/skinfood/mobile_skinfood/images/icon/icon_truck.png"); background-size: 104.8px 85.6px; background-size: 13.6458333333vw 11.1458333333vw; } @media (max-width: 360px) { .cart-empty__title--truck { padding-top: 109px; padding-top: 34.0625vw; } } @media (max-width: 320px) { .cart-empty__title--truck { background-size: 43.6666666667px 35.6666666667px; background-size: 13.6458333333vw 11.1458333333vw; } } .cart-empty__desc { margin-top: 32px; margin-top: 4.1666666667vw; font-size: 28.8px; font-size: 3.75vw; line-height: 1; } @media (max-width: 360px) { .cart-empty__desc { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } @media (max-width: 360px) { .cart-empty__desc { font-size: 12px; font-size: 3.75vw; } } .cart-empty__btn { margin-top: 64px; margin-top: 8.3333333333vw; } @media (max-width: 360px) { .cart-empty__btn { margin-top: 26.6666666667px; margin-top: 8.3333333333vw; } } .cart-empty__btn .cta + .cta { margin-top: 32px; margin-top: 4.1666666667vw; } @media (max-width: 360px) { .cart-empty__btn .cta + .cta { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .cart-slide { padding: 96px 38.4px; padding: 12.5vw 5vw; text-align: center; } @media (max-width: 320px) { .cart-slide { padding: 40px 16px; padding: 12.5vw 5vw; } } .cart-slide__title { font-size: 36.8px; font-size: 4.7916666667vw; letter-spacing: -0.368px; letter-spacing: -0.0479166667vw; font-weight: bold; } @media (max-width: 360px) { .cart-slide__title { font-size: 15.3333333333px; font-size: 4.7916666667vw; } } @media (max-width: 360px) { .cart-slide__title { letter-spacing: -0.1533333333px; letter-spacing: -0.0479166667vw; } } .cart-slide__list { margin-top: 64px; margin-top: 8.3333333333vw; font-size: 0; } @media (max-width: 360px) { .cart-slide__list { margin-top: 26.6666666667px; margin-top: 8.3333333333vw; } } .cart-slide__list .slick-dots { position: relative; margin-top: 16px; margin-top: 2.0833333333vw; bottom: 0; } @media (max-width: 360px) { .cart-slide__list .slick-dots { margin-top: 6.6666666667px; margin-top: 2.0833333333vw; } } .cart-slide__item { display: inline-block; width: 337.6px; width: 43.9583333333vw; padding-left: 14.4px; padding-left: 1.875vw; } @media (max-width: 360px) { .cart-slide__item { width: 140.6666666667px; width: 43.9583333333vw; } } @media (max-width: 360px) { .cart-slide__item { padding-left: 6px; padding-left: 1.875vw; } } .order-content { padding-top: 56px; padding-top: 7.2916666667vw; } @media (max-width: 360px) { .order-content { padding-top: 23.3333333333px; padding-top: 7.2916666667vw; } } .order-content__item { border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-style: solid; border-top-color: #eee; } @media (max-width: 360px) { .order-content__item { border-top-width: 1px; border-top-width: 0.3125vw; } } .order__top { margin-top: 32px; margin-top: 4.1666666667vw; position: relative; display: flex; justify-content: space-between; height: 100px; height: 13.0208333333vw; padding: 0px 38.4px; padding: 0vw 5vw; line-height: 100px; line-height: 13.0208333333vw; border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-color: #eee; border-top-style: solid; font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .order__top { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } @media (max-width: 360px) { .order__top { height: 41.6666666667px; height: 13.0208333333vw; } } @media (max-width: 320px) { .order__top { padding: 0px 16px; padding: 0vw 5vw; } } @media (max-width: 360px) { .order__top { line-height: 41.6666666667px; line-height: 13.0208333333vw; } } @media (max-width: 360px) { .order__top { border-top-width: 1px; border-top-width: 0.3125vw; } } @media (max-width: 360px) { .order__top { font-size: 12px; font-size: 3.75vw; } } .order__top--no-margin { margin-top: 0; } .order__btn-del { position: absolute; top: 0px; top: 0vw; right: 38.4px; right: 5vw; } @media (max-width: 360px) { .order__btn-del { top: 0px; top: 0vw; } } @media (max-width: 360px) { .order__btn-del { right: 16px; right: 5vw; } } .order__content { display: flex; padding: 32px 38.4px 40px; padding: 4.1666666667vw 5vw 5.2083333333vw; justify-content: space-between; } @media (max-width: 320px) { .order__content { padding: 13.3333333333px 16px 16.6666666667px; padding: 4.1666666667vw 5vw 5.2083333333vw; } } .order__content-right { flex: 1; padding-left: 47.2px; padding-left: 6.1458333333vw; } @media (max-width: 360px) { .order__content-right { padding-left: 19.6666666667px; padding-left: 6.1458333333vw; } } .order__content--border { border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-style: solid; border-top-color: #eee; } @media (max-width: 360px) { .order__content--border { border-top-width: 1px; border-top-width: 0.3125vw; } } .order__content--padding-middle { padding: 48px 38.4px 48px; padding: 6.25vw 5vw 6.25vw; } @media (max-width: 320px) { .order__content--padding-middle { padding: 20px 16px 20px; padding: 6.25vw 5vw 6.25vw; } } .order__content--side-padding-none { padding-left: 0; padding-right: 0; } .order__content--padding-top { padding-top: 48px; padding-top: 6.25vw; } @media (max-width: 360px) { .order__content--padding-top { padding-top: 20px; padding-top: 6.25vw; } } .order__item { min-height: 420px; min-height: 54.6875vw; border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-style: solid; border-top-color: #eee; } @media (max-width: 360px) { .order__item { min-height: 175px; min-height: 54.6875vw; } } @media (max-width: 360px) { .order__item { border-top-width: 1px; border-top-width: 0.3125vw; } } .order__item--empty { min-height: 315.2px; min-height: 41.0416666667vw; line-height: 315.2px; line-height: 41.0416666667vw; text-align: center; color: #222; font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .order__item--empty { min-height: 131.3333333333px; min-height: 41.0416666667vw; } } @media (max-width: 360px) { .order__item--empty { line-height: 131.3333333333px; line-height: 41.0416666667vw; } } @media (max-width: 360px) { .order__item--empty { font-size: 12px; font-size: 3.75vw; } } .order__item-top { position: relative; display: flex; justify-content: space-between; margin-top: 48px; margin-top: 6.25vw; padding: 0px 38.4px; padding: 0vw 5vw; font-size: 28.8px; font-size: 3.75vw; font-weight: bold; } @media (max-width: 360px) { .order__item-top { margin-top: 20px; margin-top: 6.25vw; } } @media (max-width: 320px) { .order__item-top { padding: 0px 16px; padding: 0vw 5vw; } } @media (max-width: 360px) { .order__item-top { font-size: 12px; font-size: 3.75vw; } } .order-list__btn { position: absolute; top: 60px; top: 7.8125vw; right: 38.4px; right: 5vw; font-weight: normal; } @media (max-width: 360px) { .order-list__btn { top: 25px; top: 7.8125vw; } } @media (max-width: 360px) { .order-list__btn { right: 16px; right: 5vw; } } .order__img { position: relative; width: 240px; width: 31.25vw; } @media (max-width: 360px) { .order__img { width: 100px; width: 31.25vw; } } .order__img--sold-out { position: absolute; top: 0; left: 0; width: 100%; height: 100%; line-height: 100%; background: rgba(0, 0, 0, 0.5); font-size: 28.8px; font-size: 3.75vw; font-weight: bold; color: #fff; text-align: center; padding-top: 45%; box-sizing: border-box; } @media (max-width: 360px) { .order__img--sold-out { font-size: 12px; font-size: 3.75vw; } } .order__img img { width: 100%; height: auto; } .order__name { width: 90%; word-break: keep-all; } .order__option-item { margin-top: 8px; margin-top: 1.0416666667vw; color: #888; font-size: 28.8px; font-size: 3.75vw; line-height: 39.2px; line-height: 5.1041666667vw; word-break: keep-all; } @media (max-width: 360px) { .order__option-item { margin-top: 3.3333333333px; margin-top: 1.0416666667vw; } } @media (max-width: 360px) { .order__option-item { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .order__option-item { line-height: 16.3333333333px; line-height: 5.1041666667vw; } } .order__option-item--btn { font-size: 0; margin-top: 32px; margin-top: 4.1666666667vw; } @media (max-width: 360px) { .order__option-item--btn { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .order__option-item--title { color: #222; font-weight: bold; } .order__option-item--title + .order__option-item { margin-top: 28px; margin-top: 3.6458333333vw; } @media (max-width: 360px) { .order__option-item--title + .order__option-item { margin-top: 11.6666666667px; margin-top: 3.6458333333vw; } } .order__option-btn { margin-top: 32px; margin-top: 4.1666666667vw; } @media (max-width: 360px) { .order__option-btn { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .order__price { margin-top: 40px; margin-top: 5.2083333333vw; } @media (max-width: 360px) { .order__price { margin-top: 16.6666666667px; margin-top: 5.2083333333vw; } } .order__price-item { margin-top: 12px; margin-top: 1.5625vw; color: #888; font-size: 28.8px; font-size: 3.75vw; line-height: 39.2px; line-height: 5.1041666667vw; } @media (max-width: 360px) { .order__price-item { margin-top: 5px; margin-top: 1.5625vw; } } @media (max-width: 360px) { .order__price-item { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .order__price-item { line-height: 16.3333333333px; line-height: 5.1041666667vw; } } .order__price-item--black { color: #222; font-weight: bold; } .order__price-item--line { text-decoration: line-through; } .order-sum:before { display: block; height: 11.2px; height: 1.4583333333vw; border-top-style: solid; border-top-color: #eee; border-bottom-style: solid; border-bottom-color: #eee; background-color: #f6f6f6; content: ''; } @media (max-width: 360px) { .order-sum:before { height: 4.6666666667px; height: 1.4583333333vw; } } .order-sum__top { position: relative; padding: 52px 38.4px 0px; padding: 6.7708333333vw 5vw 0vw; } @media (max-width: 320px) { .order-sum__top { padding: 21.6666666667px 16px 0px; padding: 6.7708333333vw 5vw 0vw; } } .order-sum__content { padding: 0px 38.4px; padding: 0vw 5vw; } @media (max-width: 320px) { .order-sum__content { padding: 0px 16px; padding: 0vw 5vw; } } .order-sum__content--inner { padding: 0; } .order-sum__title { margin-top: 48px; margin-top: 6.25vw; font-size: 28.8px; font-size: 3.75vw; font-weight: bold; line-height: 1; } @media (max-width: 360px) { .order-sum__title { margin-top: 20px; margin-top: 6.25vw; } } @media (max-width: 360px) { .order-sum__title { font-size: 12px; font-size: 3.75vw; } } .order-sum__item { display: flex; margin-top: 40px; margin-top: 5.2083333333vw; justify-content: space-between; font-size: 28.8px; font-size: 3.75vw; line-height: 1; } @media (max-width: 360px) { .order-sum__item { margin-top: 16.6666666667px; margin-top: 5.2083333333vw; } } @media (max-width: 360px) { .order-sum__item { font-size: 12px; font-size: 3.75vw; } } .order-sum__item--grey { margin-top: 15.2px; margin-top: 1.9791666667vw; color: #888; font-size: 26.4px; font-size: 3.4375vw; } @media (max-width: 360px) { .order-sum__item--grey { margin-top: 6.3333333333px; margin-top: 1.9791666667vw; } } @media (max-width: 360px) { .order-sum__item--grey { font-size: 11px; font-size: 3.4375vw; } } .order-sum__item--grey .order-sum__item-price { font-weight: normal; } .order-sum__total { margin-top: 48px; margin-top: 6.25vw; padding: 0px 38.4px; padding: 0vw 5vw; } @media (max-width: 360px) { .order-sum__total { margin-top: 20px; margin-top: 6.25vw; } } @media (max-width: 320px) { .order-sum__total { padding: 0px 16px; padding: 0vw 5vw; } } .order-sum__total--inner { padding: 0; } .order-sum__total--inner .order-sum__total-list { padding-bottom: 0; } .order-sum__total-list { padding: 52px 0px 80px; padding: 6.7708333333vw 0vw 10.4166666667vw; border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-style: solid; border-top-color: #eee; } @media (max-width: 320px) { .order-sum__total-list { padding: 21.6666666667px 0px 33.3333333333px; padding: 6.7708333333vw 0vw 10.4166666667vw; } } @media (max-width: 360px) { .order-sum__total-list { border-top-width: 1px; border-top-width: 0.3125vw; } } .order-sum__total-item { display: flex; justify-content: space-between; font-size: 28.8px; font-size: 3.75vw; line-height: 1; font-weight: bold; } @media (max-width: 360px) { .order-sum__total-item { font-size: 12px; font-size: 3.75vw; } } .order-sum__total-item + .order-sum__total-item { margin-top: 40px; margin-top: 5.2083333333vw; } @media (max-width: 360px) { .order-sum__total-item + .order-sum__total-item { margin-top: 16.6666666667px; margin-top: 5.2083333333vw; } } .order-sum__total-price--orange { font-size: 33.6px; font-size: 4.375vw; color: #ff593e; } @media (max-width: 360px) { .order-sum__total-price--orange { font-size: 14px; font-size: 4.375vw; } } .order-bottom { position: fixed; left: 0; bottom: 0; width: 100%; z-index: 100; } .order-bottom__btn { display: flex; width: 100%; justify-content: space-between; } .order-bottom__content { display: none; width: 100%; padding: 30.4px 38.4px; padding: 3.9583333333vw 5vw; border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-style: solid; border-top-color: #222; background-color: #fff; font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 320px) { .order-bottom__content { padding: 12.6666666667px 16px; padding: 3.9583333333vw 5vw; } } @media (max-width: 360px) { .order-bottom__content { border-top-width: 1px; border-top-width: 0.3125vw; } } @media (max-width: 360px) { .order-bottom__content { font-size: 12px; font-size: 3.75vw; } } .order-bottom__content--active { display: block; } .order-bottom__item { line-height: 1; } .order-bottom__item + .order-bottom__item { margin-top: 16px; margin-top: 2.0833333333vw; } @media (max-width: 360px) { .order-bottom__item + .order-bottom__item { margin-top: 6.6666666667px; margin-top: 2.0833333333vw; } } .order-bottom-btn--buy { width: 647.2px; width: 84.2708333333vw; } @media (max-width: 360px) { .order-bottom-btn--buy { width: 269.6666666667px; width: 84.2708333333vw; } } .order-bottom-btn--arrow { flex: 1; border-top-width: 2.4px; border-top-width: 0.3125vw; border-right-width: 2.4px; border-right-width: 0.3125vw; border-top-style: solid; border-right-style: solid; border-top-color: #222; border-right-color: #222; font-size: 0; background: #fff; } @media (max-width: 360px) { .order-bottom-btn--arrow { border-top-width: 1px; border-top-width: 0.3125vw; } } @media (max-width: 360px) { .order-bottom-btn--arrow { border-right-width: 1px; border-right-width: 0.3125vw; } } .order-bottom-btn--arrow:before { display: inline-block; width: 100%; height: 100%; background: #fff url("/design/skinfood/mobile_skinfood/images/icon/icon_arrow_top.png") no-repeat; background-size: 26.4px 16.8px; background-size: 3.4375vw 2.1875vw; background-position: center; content: ''; } @media (max-width: 320px) { .order-bottom-btn--arrow:before { background-size: 11px 7px; background-size: 3.4375vw 2.1875vw; } } .order-bottom-btn--active:before { display: inline-block; width: 100%; height: 100%; background: #fff url("/design/skinfood/mobile_skinfood/images/icon/icon_arrow_top.png") no-repeat; background-size: 26.4px 16.8px; background-size: 3.4375vw 2.1875vw; background-position: center; transform: rotate(180deg); content: ''; } @media (max-width: 320px) { .order-bottom-btn--active:before { background-size: 11px 7px; background-size: 3.4375vw 2.1875vw; } } .order-option__mod { position: fixed; left: 0; bottom: 0; width: 100%; z-index: 1003; background-color: #fff; } .order-empty { padding: 0px 38.4px 112px; padding: 0vw 5vw 14.5833333333vw; text-align: center; background: url("/design/skinfood/mobile_skinfood/images/bg/bg_cart.png") no-repeat; background-size: 100% 100%; } @media (max-width: 320px) { .order-empty { padding: 0px 16px 46.6666666667px; padding: 0vw 5vw 14.5833333333vw; } } .order-empty__title { padding-top: 281.6px; padding-top: 36.6666666667vw; font-size: 33.6px; font-size: 4.375vw; font-weight: bold; line-height: 1; background-position-x: center; background-size: 109.6px 105.6px; background-size: 14.2708333333vw 13.75vw; background-position-y: 112px; background-position-y: 14.5833333333vw; background-repeat: no-repeat; } @media (max-width: 360px) { .order-empty__title { padding-top: 117.3333333333px; padding-top: 36.6666666667vw; } } @media (max-width: 360px) { .order-empty__title { font-size: 14px; font-size: 4.375vw; } } @media (max-width: 320px) { .order-empty__title { background-size: 45.6666666667px 44px; background-size: 14.2708333333vw 13.75vw; } } @media (max-width: 360px) { .order-empty__title { background-position-y: 46.6666666667px; background-position-y: 14.5833333333vw; } } .order-empty__title--fail { background-image: url("/design/skinfood/mobile_skinfood/images/icon/icon_sorry.png"); } .order-empty__title--complete { background-image: url("/design/skinfood/mobile_skinfood/images/icon/icon_thanks.png"); } .order-empty__desc { margin-top: 32px; margin-top: 4.1666666667vw; font-size: 28.8px; font-size: 3.75vw; line-height: 1; } @media (max-width: 360px) { .order-empty__desc { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } @media (max-width: 360px) { .order-empty__desc { font-size: 12px; font-size: 3.75vw; } } .order-settle__label-container { margin-top: 32px; margin-top: 4.1666666667vw; } @media (max-width: 360px) { .order-settle__label-container { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .order-settle__label-container--border { padding-top: 32px; padding-top: 4.1666666667vw; border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-style: solid; border-top-color: #eee; } @media (max-width: 360px) { .order-settle__label-container--border { padding-top: 13.3333333333px; padding-top: 4.1666666667vw; } } @media (max-width: 360px) { .order-settle__label-container--border { border-top-width: 1px; border-top-width: 0.3125vw; } } .order-settle__label-container--margin-top { margin-top: 64px; margin-top: 8.3333333333vw; } @media (max-width: 360px) { .order-settle__label-container--margin-top { margin-top: 26.6666666667px; margin-top: 8.3333333333vw; } } .order-settle__nonmember-alert { margin-top: 28px; margin-top: 3.6458333333vw; font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .order-settle__nonmember-alert { margin-top: 11.6666666667px; margin-top: 3.6458333333vw; } } @media (max-width: 360px) { .order-settle__nonmember-alert { font-size: 12px; font-size: 3.75vw; } } .point-shop:before { display: block; height: 11.2px; height: 1.4583333333vw; border-top-width: 2.4px; border-top-width: 0.3125vw; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-top-style: solid; border-top-color: #eee; border-bottom-style: solid; border-bottom-color: #eee; background-color: #f6f6f6; content: ''; } @media (max-width: 360px) { .point-shop:before { height: 4.6666666667px; height: 1.4583333333vw; } } @media (max-width: 360px) { .point-shop:before { border-top-width: 1px; border-top-width: 0.3125vw; } } @media (max-width: 360px) { .point-shop:before { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .point-shop__top { position: relative; padding: 52px 38.4px 36px; padding: 6.7708333333vw 5vw 4.6875vw; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-bottom-style: solid; border-bottom-color: #eee; } @media (max-width: 320px) { .point-shop__top { padding: 21.6666666667px 16px 15px; padding: 6.7708333333vw 5vw 4.6875vw; } } @media (max-width: 360px) { .point-shop__top { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .point-shop__btn { position: absolute; top: 74.4px; top: 9.6875vw; right: 38.4px; right: 5vw; line-height: 1; } @media (max-width: 360px) { .point-shop__btn { top: 31px; top: 9.6875vw; } } @media (max-width: 360px) { .point-shop__btn { right: 16px; right: 5vw; } } .point-shop__content { padding: 48px 38.4px 80px; padding: 6.25vw 5vw 10.4166666667vw; } @media (max-width: 320px) { .point-shop__content { padding: 20px 16px 33.3333333333px; padding: 6.25vw 5vw 10.4166666667vw; } } .point-shop__title { font-size: 28.8px; font-size: 3.75vw; line-height: 1; } @media (max-width: 360px) { .point-shop__title { font-size: 12px; font-size: 3.75vw; } } .point-shop__num { margin-top: 21.6px; margin-top: 2.8125vw; font-size: 55.2px; font-size: 7.1875vw; font-weight: bold; line-height: 1; } @media (max-width: 360px) { .point-shop__num { margin-top: 9px; margin-top: 2.8125vw; } } @media (max-width: 360px) { .point-shop__num { font-size: 23px; font-size: 7.1875vw; } } .point-shop__num--empty { margin-top: 32px; margin-top: 4.1666666667vw; font-size: 26.4px; font-size: 3.4375vw; line-height: 1; color: #ff593e; font-weight: normal; } @media (max-width: 360px) { .point-shop__num--empty { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } @media (max-width: 360px) { .point-shop__num--empty { font-size: 11px; font-size: 3.4375vw; } } .point-shop__desc { display: flex; justify-content: space-between; margin-top: 44px; margin-top: 5.7291666667vw; font-size: 28.8px; font-size: 3.75vw; line-height: 1; } @media (max-width: 360px) { .point-shop__desc { margin-top: 18.3333333333px; margin-top: 5.7291666667vw; } } @media (max-width: 360px) { .point-shop__desc { font-size: 12px; font-size: 3.75vw; } } .cart_bg { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; opacity: 0.7; z-index: 1002; } .zipcode-content { border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-style: solid; border-top-color: #ddd; padding: 80px 38.4px; padding: 10.4166666667vw 5vw; box-sizing: content-box; } @media (max-width: 360px) { .zipcode-content { border-top-width: 1px; border-top-width: 0.3125vw; } } @media (max-width: 320px) { .zipcode-content { padding: 33.3333333333px 16px; padding: 10.4166666667vw 5vw; } } .zipcode-content--empty { border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-color: #eee; border-top-style: solid; } @media (max-width: 360px) { .zipcode-content--empty { border-top-width: 1px; border-top-width: 0.3125vw; } } .zipcode__container { display: flex; justify-content: space-between; padding-bottom: 64px; padding-bottom: 8.3333333333vw; } @media (max-width: 360px) { .zipcode__container { padding-bottom: 26.6666666667px; padding-bottom: 8.3333333333vw; } } .zipcode__input { width: 454.4px; width: 59.1666666667vw; } @media (max-width: 360px) { .zipcode__input { width: 189.3333333333px; width: 59.1666666667vw; } } .zipcode__btn { flex: 1; margin-left: 19.2px; margin-left: 2.5vw; } @media (max-width: 360px) { .zipcode__btn { margin-left: 8px; margin-left: 2.5vw; } } .zipcode__table { width: 100%; padding-top: 64px; padding-top: 8.3333333333vw; } @media (max-width: 360px) { .zipcode__table { padding-top: 26.6666666667px; padding-top: 8.3333333333vw; } } .zipcode__table td { padding: 0; padding-left: 24px; padding-left: 3.125vw; font-size: 26.4px; font-size: 3.4375vw; line-height: 42.4px; line-height: 5.5208333333vw; } @media (max-width: 360px) { .zipcode__table td { padding-left: 10px; padding-left: 3.125vw; } } @media (max-width: 360px) { .zipcode__table td { font-size: 11px; font-size: 3.4375vw; } } @media (max-width: 360px) { .zipcode__table td { line-height: 17.6666666667px; line-height: 5.5208333333vw; } } .zipcode__table td:first-child { padding-left: 16.8px; padding-left: 2.1875vw; } @media (max-width: 360px) { .zipcode__table td:first-child { padding-left: 7px; padding-left: 2.1875vw; } } .zipcode__table td:first-child:before { display: inline-block; width: 4.8px; width: 0.625vw; height: 4.8px; height: 0.625vw; background: #222; border-radius: 50%; vertical-align: inherit; content: ''; } @media (max-width: 360px) { .zipcode__table td:first-child:before { width: 2px; width: 0.625vw; } } @media (max-width: 360px) { .zipcode__table td:first-child:before { height: 2px; height: 0.625vw; } } .zipcode-empty { display: block; padding: 64px 0px; padding: 8.3333333333vw 0vw; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-bottom-color: #eee; border-bottom-style: solid; font-size: 28.8px; font-size: 3.75vw; line-height: 1; } @media (max-width: 320px) { .zipcode-empty { padding: 26.6666666667px 0px; padding: 8.3333333333vw 0vw; } } @media (max-width: 360px) { .zipcode-empty { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } @media (max-width: 360px) { .zipcode-empty { font-size: 12px; font-size: 3.75vw; } } .gift-item { margin-top: 67.2px; margin-top: 8.75vw; } @media (max-width: 360px) { .gift-item { margin-top: 28px; margin-top: 8.75vw; } } .gift-item--active .input-thumb__item-text { font-weight: bold; color: #222; } .settle-dockbar { position: fixed; left: 0; bottom: 0; width: 100%; z-index: 3; } .input-content__wrap { position: relative; } .input-content__fixed { position: absolute; right: 37.6px; right: 4.8958333333vw; bottom: 39.2px; bottom: 5.1041666667vw; font-size: 28.8px; font-size: 3.75vw; color: #888; transition: all 0.4s; } @media (max-width: 360px) { .input-content__fixed { right: 15.6666666667px; right: 4.8958333333vw; } } @media (max-width: 360px) { .input-content__fixed { bottom: 16.3333333333px; bottom: 5.1041666667vw; } } @media (max-width: 360px) { .input-content__fixed { font-size: 12px; font-size: 3.75vw; } } .default-title--border { box-sizing: border-box; display: block; width: 100%; height: 98.4px; height: 12.8125vw; padding: 0px 38.4px; padding: 0vw 5vw; line-height: 98.4px; line-height: 12.8125vw; border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-style: solid; border-top-color: #eee; } @media (max-width: 360px) { .default-title--border { height: 41px; height: 12.8125vw; } } @media (max-width: 320px) { .default-title--border { padding: 0px 16px; padding: 0vw 5vw; } } @media (max-width: 360px) { .default-title--border { line-height: 41px; line-height: 12.8125vw; } } @media (max-width: 360px) { .default-title--border { border-top-width: 1px; border-top-width: 0.3125vw; } } .address-desc { font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .address-desc { font-size: 12px; font-size: 3.75vw; } } .address-desc--side { padding: 80px 38.4px 0px; padding: 10.4166666667vw 5vw 0vw; } @media (max-width: 320px) { .address-desc--side { padding: 33.3333333333px 16px 0px; padding: 10.4166666667vw 5vw 0vw; } } .address-form__content { margin-top: 48px; margin-top: 6.25vw; padding: 0px 38.4px 80px; padding: 0vw 5vw 10.4166666667vw; } @media (max-width: 360px) { .address-form__content { margin-top: 20px; margin-top: 6.25vw; } } @media (max-width: 320px) { .address-form__content { padding: 0px 16px 33.3333333333px; padding: 0vw 5vw 10.4166666667vw; } } .address-form__content .address-desc { margin-top: 32px; margin-top: 4.1666666667vw; } @media (max-width: 360px) { .address-form__content .address-desc { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .address-form__content td { padding: 0; } /*# sourceMappingURL=order_ahn.css.map */ /* image path */ /* color */ .order__title--padding { padding: 56px 38.4px 43.2px; padding: 7.2916666667vw 5vw 5.625vw; } @media (max-width: 320px) { .order__title--padding { padding: 23.3333333333px 16px 18px; padding: 7.2916666667vw 5vw 5.625vw; } } .order__title--padding-large { padding: 93.6px 38.4px 40px; padding: 12.1875vw 5vw 5.2083333333vw; } @media (max-width: 320px) { .order__title--padding-large { padding: 39px 16px 16.6666666667px; padding: 12.1875vw 5vw 5.2083333333vw; } } .order-sum__item { flex-wrap: wrap; } .order-sum__item-sub { width: 100%; } .order-sum__item-sub-item { display: flex; justify-content: space-between; margin-top: 16px; margin-top: 2.0833333333vw; } @media (max-width: 360px) { .order-sum__item-sub-item { margin-top: 6.6666666667px; margin-top: 2.0833333333vw; } } .order-sum__item-sub-item-title { font-size: 26.4px; font-size: 3.4375vw; color: #888888; } @media (max-width: 360px) { .order-sum__item-sub-item-title { font-size: 11px; font-size: 3.4375vw; } } .order-sum__item-sub-item-price { font-size: 26.4px; font-size: 3.4375vw; color: #888888; } @media (max-width: 360px) { .order-sum__item-sub-item-price { font-size: 11px; font-size: 3.4375vw; } } .order-sum--border { border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-color: #eeeeee; border-top-style: solid; } @media (max-width: 360px) { .order-sum--border { border-top-width: 1px; border-top-width: 0.3125vw; } } .order-sum--border:before { content: none; } .order-sum--active + .order__cta-wrap { margin-top: 0; } .order__cta-wrap { position: fixed; left: 0; bottom: 0; width: 100%; font-size: 0; margin-top: 32px; margin-top: 4.1666666667vw; z-index: 1; } @media (max-width: 360px) { .order__cta-wrap { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .order__cta-wrap .cta--black { border-width: 2.4px; border-width: 0.3125vw; } @media (max-width: 360px) { .order__cta-wrap .cta--black { border-width: 1px; border-width: 0.3125vw; } } .order__content-right-name { font-size: 28.8px; font-size: 3.75vw; font-weight: bold; color: #212121; margin-top: 9.6px; margin-top: 1.25vw; } @media (max-width: 360px) { .order__content-right-name { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .order__content-right-name { margin-top: 4px; margin-top: 1.25vw; } } .order__content-right-name + .order__option { margin-top: 24px; margin-top: 3.125vw; } @media (max-width: 360px) { .order__content-right-name + .order__option { margin-top: 10px; margin-top: 3.125vw; } } .settle__content { padding-bottom: 48px; padding-bottom: 6.25vw; } @media (max-width: 360px) { .settle__content { padding-bottom: 20px; padding-bottom: 6.25vw; } } .settle__content--padding { padding-bottom: 40px; padding-bottom: 5.2083333333vw; } @media (max-width: 360px) { .settle__content--padding { padding-bottom: 16.6666666667px; padding-bottom: 5.2083333333vw; } } .settle__content-txt { font-size: 28.8px; font-size: 3.75vw; color: #212121; line-height: 1.7; } @media (max-width: 360px) { .settle__content-txt { font-size: 12px; font-size: 3.75vw; } } .settle__content-txt ~ .settle__content-txt { margin-top: 24px; margin-top: 3.125vw; } @media (max-width: 360px) { .settle__content-txt ~ .settle__content-txt { margin-top: 10px; margin-top: 3.125vw; } } .settle__content--border-top { padding-top: 56px; padding-top: 7.2916666667vw; border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-style: solid; border-top-color: #eee; } @media (max-width: 360px) { .settle__content--border-top { padding-top: 23.3333333333px; padding-top: 7.2916666667vw; } } @media (max-width: 360px) { .settle__content--border-top { border-top-width: 1px; border-top-width: 0.3125vw; } } .default__static-list .order__img { width: 200px; width: 26.0416666667vw; } @media (max-width: 360px) { .default__static-list .order__img { width: 83.3333333333px; width: 26.0416666667vw; } } .default__static-list .order__item { min-height: 375.2px; min-height: 48.8541666667vw; } @media (max-width: 360px) { .default__static-list .order__item { min-height: 156.3333333333px; min-height: 48.8541666667vw; } } .default__static-list .order__content { padding: 48px 32px 38.4px; padding: 6.25vw 4.1666666667vw 5vw; } @media (max-width: 320px) { .default__static-list .order__content { padding: 20px 13.3333333333px 16px; padding: 6.25vw 4.1666666667vw 5vw; } } .zipcode__container { padding-bottom: 56px; padding-bottom: 7.2916666667vw; padding-left: 38.4px; padding-left: 5vw; padding-right: 38.4px; padding-right: 5vw; } @media (max-width: 360px) { .zipcode__container { padding-bottom: 23.3333333333px; padding-bottom: 7.2916666667vw; } } @media (max-width: 360px) { .zipcode__container { padding-left: 16px; padding-left: 5vw; } } @media (max-width: 360px) { .zipcode__container { padding-right: 16px; padding-right: 5vw; } } .zipcode__result td { padding: 32px; padding: 4.1666666667vw; } @media (max-width: 360px) { .zipcode__result td { padding: 13.3333333333px; padding: 4.1666666667vw; } } .zipcode__empty { padding-left: 0; padding-right: 0; } .zipcode-empty { padding-left: 38.4px; padding-left: 5vw; padding-right: 38.4px; padding-right: 5vw; } @media (max-width: 360px) { .zipcode-empty { padding-left: 16px; padding-left: 5vw; } } @media (max-width: 360px) { .zipcode-empty { padding-right: 16px; padding-right: 5vw; } } .zipcode-content { padding-left: 0; padding-right: 0; } .zipcode-content--empty { padding-left: 0; padding-right: 0; padding-top: 0; } .zipcode__table { padding-top: 7.2px; padding-top: 0.9375vw; padding-left: 38.4px; padding-left: 5vw; padding-right: 38.4px; padding-right: 5vw; } @media (max-width: 360px) { .zipcode__table { padding-top: 3px; padding-top: 0.9375vw; } } @media (max-width: 360px) { .zipcode__table { padding-left: 16px; padding-left: 5vw; } } @media (max-width: 360px) { .zipcode__table { padding-right: 16px; padding-right: 5vw; } } .zipcode__table tr ~ tr td:first-child { padding-top: 16.8px; padding-top: 2.1875vw; } @media (max-width: 360px) { .zipcode__table tr ~ tr td:first-child { padding-top: 7px; padding-top: 2.1875vw; } } .zipcode__table tr ~ tr td:first-child:before { top: 36px; top: 4.6875vw; } @media (max-width: 360px) { .zipcode__table tr ~ tr td:first-child:before { top: 15px; top: 4.6875vw; } } .zipcode__table td { position: relative; padding-left: 16.8px; padding-left: 2.1875vw; } .zipcode__table td.zipcode__table-title { font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .zipcode__table td.zipcode__table-title { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .zipcode__table td { padding-left: 7px; padding-left: 2.1875vw; } } .zipcode__table td:first-child:before { position: absolute; top: 19.2px; top: 2.5vw; left: 0; } @media (max-width: 360px) { .zipcode__table td:first-child:before { top: 8px; top: 2.5vw; } } .zipcode__number { font-weight: bold; font-size: 28.8px; font-size: 3.75vw; line-height: 1; } @media (max-width: 360px) { .zipcode__number { font-size: 12px; font-size: 3.75vw; } } .zipcode__address { position: relative; margin-top: 16px; margin-top: 2.0833333333vw; padding-top: 2.4px; padding-top: 0.3125vw; padding-left: 132px; padding-left: 17.1875vw; font-size: 28.8px; font-size: 3.75vw; line-height: 1.5; } @media (max-width: 360px) { .zipcode__address { margin-top: 6.6666666667px; margin-top: 2.0833333333vw; } } @media (max-width: 360px) { .zipcode__address { padding-top: 1px; padding-top: 0.3125vw; } } @media (max-width: 360px) { .zipcode__address { padding-left: 55px; padding-left: 17.1875vw; } } @media (max-width: 360px) { .zipcode__address { font-size: 12px; font-size: 3.75vw; } } .zipcode__text-bg { box-sizing: border-box; position: absolute; top: 0; left: 0; display: inline-block; text-align: center; width: 100px; width: 13.0208333333vw; padding: 7.2px; padding: 0.9375vw; font-size: 26.4px; font-size: 3.4375vw; background-color: #f6f6f6; } @media (max-width: 360px) { .zipcode__text-bg { width: 41.6666666667px; width: 13.0208333333vw; } } @media (max-width: 360px) { .zipcode__text-bg { padding: 3px; padding: 0.9375vw; } } @media (max-width: 360px) { .zipcode__text-bg { font-size: 11px; font-size: 3.4375vw; } } .zipcode--has-btn { position: relative; padding-top: 60px; padding-top: 7.8125vw; border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-style: solid; border-top-color: #eee; } @media (max-width: 360px) { .zipcode--has-btn { padding-top: 25px; padding-top: 7.8125vw; } } @media (max-width: 360px) { .zipcode--has-btn { border-top-width: 1px; border-top-width: 0.3125vw; } } .zipcode-btn { position: absolute; top: 64px; top: 8.3333333333vw; right: 38.4px; right: 5vw; } @media (max-width: 360px) { .zipcode-btn { top: 26.6666666667px; top: 8.3333333333vw; } } @media (max-width: 360px) { .zipcode-btn { right: 16px; right: 5vw; } } .zipcode-btn .cta { font-size: 26.4px; font-size: 3.4375vw; font-weight: normal; } @media (max-width: 360px) { .zipcode-btn .cta { font-size: 11px; font-size: 3.4375vw; } } .default-table--border { height: 2.4px; height: 0.3125vw; background: #eee; } @media (max-width: 360px) { .default-table--border { height: 1px; height: 0.3125vw; } } .default-table tr:first-child th { padding-top: 0; } .default-table tr:first-child td { padding-top: 0; } .default-table th { display: inline-block; width: 30%; color: #888; font-size: 28.8px; font-size: 3.75vw; padding-top: 21.6px; padding-top: 2.8125vw; vertical-align: top; line-height: 44.8px; line-height: 5.8333333333vw; font-weight: normal; } @media (max-width: 360px) { .default-table th { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .default-table th { padding-top: 9px; padding-top: 2.8125vw; } } @media (max-width: 360px) { .default-table th { line-height: 18.6666666667px; line-height: 5.8333333333vw; } } .default-table th strong { font-weight: bold; color: #222; } .default-table td { display: inline-block; color: #222; width: 70%; font-size: 28.8px; font-size: 3.75vw; padding-top: 21.6px; padding-top: 2.8125vw; line-height: 44.8px; line-height: 5.8333333333vw; font-weight: bold; } @media (max-width: 360px) { .default-table td { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .default-table td { padding-top: 9px; padding-top: 2.8125vw; } } @media (max-width: 360px) { .default-table td { line-height: 18.6666666667px; line-height: 5.8333333333vw; } } .default-table td strong { font-weight: bold; color: #ff593e; font-size: 33.6px; font-size: 4.375vw; } @media (max-width: 360px) { .default-table td strong { font-size: 14px; font-size: 4.375vw; } } .order__title--wide { display: block; } .agreement--order { margin-top: 48px; margin-top: 6.25vw; border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-color: #eee; border-top-style: solid; background-color: transparent; padding: 64px 0px 0px; padding: 8.3333333333vw 0vw 0vw; } @media (max-width: 360px) { .agreement--order { margin-top: 20px; margin-top: 6.25vw; } } @media (max-width: 360px) { .agreement--order { border-top-width: 1px; border-top-width: 0.3125vw; } } @media (max-width: 320px) { .agreement--order { padding: 26.6666666667px 0px 0px; padding: 8.3333333333vw 0vw 0vw; } } .agreement--order .agreement__header { border-bottom-color: #eee; padding-bottom: 64px; padding-bottom: 8.3333333333vw; } @media (max-width: 360px) { .agreement--order .agreement__header { padding-bottom: 26.6666666667px; padding-bottom: 8.3333333333vw; } } .agreement--order .agreement__content { background-color: #f6f6f6; padding: 48px 38.4px; padding: 6.25vw 5vw; } @media (max-width: 320px) { .agreement--order .agreement__content { padding: 20px 16px; padding: 6.25vw 5vw; } } .agreement--order .agreement__content--style { font-size: 3.75vw !important; } .agreement--order .agreement__content--style table { width: 100%; } .agreement--order .agreement__content--style table td { font-size: 28.8px; font-size: 3.75vw; text-align: left; background: none !important; } @media (max-width: 360px) { .agreement--order .agreement__content--style table td { font-size: 12px; font-size: 3.75vw; } } .default-select + .input-content--with-select { margin-top: 16px; margin-top: 2.0833333333vw; } @media (max-width: 360px) { .default-select + .input-content--with-select { margin-top: 6.6666666667px; margin-top: 2.0833333333vw; } } .sub_division_item--margin-top { margin-top: 32px; margin-top: 4.1666666667vw; } @media (max-width: 360px) { .sub_division_item--margin-top { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .default-address__item--empty { height: 292px; height: 38.0208333333vw; line-height: 292px; line-height: 38.0208333333vw; font-size: 28.8px; font-size: 3.75vw; color: #222; text-align: center; } @media (max-width: 360px) { .default-address__item--empty { height: 121.6666666667px; height: 38.0208333333vw; } } @media (max-width: 360px) { .default-address__item--empty { line-height: 121.6666666667px; line-height: 38.0208333333vw; } } @media (max-width: 360px) { .default-address__item--empty { font-size: 12px; font-size: 3.75vw; } } /*# sourceMappingURL=order_jy.css.map */ /* image path */ /* color */ .mypage__member-content { background-image: url(/design/skinfood/mobile_skinfood/images/bg/bg_mypage_carrot.png); background-color: #fff4d9; background-repeat: no-repeat; background-size: 204.8px 124.8px; background-size: 26.6666666667vw 16.25vw; padding: 64px 38.4px 62.4px; padding: 8.3333333333vw 5vw 8.125vw; background-position: bottom right; font-size: 0; } @media (max-width: 320px) { .mypage__member-content { background-size: 85.3333333333px 52px; background-size: 26.6666666667vw 16.25vw; } } @media (max-width: 320px) { .mypage__member-content { padding: 26.6666666667px 16px 26px; padding: 8.3333333333vw 5vw 8.125vw; } } .mypage__member-content--point { background-color: #ffd570; padding: 34.4px 37.6px; padding: 4.4791666667vw 4.8958333333vw; font-size: 28.8px; font-size: 3.75vw; line-height: 1; font-weight: bold; } @media (max-width: 320px) { .mypage__member-content--point { padding: 14.3333333333px 15.6666666667px; padding: 4.4791666667vw 4.8958333333vw; } } @media (max-width: 360px) { .mypage__member-content--point { font-size: 12px; font-size: 3.75vw; } } .mypage__member-icon { display: inline-block; box-sizing: border-box; width: 264px; width: 34.375vw; height: 264px; height: 34.375vw; padding: 80px 8px; padding: 10.4166666667vw 1.0416666667vw; border-radius: 50%; border-color: #fdb812; border-width: 8px; border-width: 1.0416666667vw; border-style: solid; } @media (max-width: 360px) { .mypage__member-icon { width: 110px; width: 34.375vw; } } @media (max-width: 360px) { .mypage__member-icon { height: 110px; height: 34.375vw; } } @media (max-width: 320px) { .mypage__member-icon { padding: 33.3333333333px 3.3333333333px; padding: 10.4166666667vw 1.0416666667vw; } } @media (max-width: 360px) { .mypage__member-icon { border-width: 3.3333333333px; border-width: 1.0416666667vw; } } .mypage__member-name { font-size: 28.8px; font-size: 3.75vw; color: #212121; text-align: center; line-height: 1; } @media (max-width: 360px) { .mypage__member-name { font-size: 12px; font-size: 3.75vw; } } .mypage__member-group { margin-top: 12px; margin-top: 1.5625vw; font-size: 55.2px; font-size: 7.1875vw; color: #212121; text-align: center; line-height: 1.2; font-weight: bold; } @media (max-width: 360px) { .mypage__member-group { margin-top: 5px; margin-top: 1.5625vw; } } @media (max-width: 360px) { .mypage__member-group { font-size: 23px; font-size: 7.1875vw; } } .mypage__member-text { display: inline-block; vertical-align: top; padding-top: 60px; padding-top: 7.8125vw; padding-left: 63.2px; padding-left: 8.2291666667vw; font-size: 33.6px; font-size: 4.375vw; } @media (max-width: 360px) { .mypage__member-text { padding-top: 25px; padding-top: 7.8125vw; } } @media (max-width: 360px) { .mypage__member-text { padding-left: 26.3333333333px; padding-left: 8.2291666667vw; } } @media (max-width: 360px) { .mypage__member-text { font-size: 14px; font-size: 4.375vw; } } .mypage__member-text .text-underline { margin-top: 28.8px; margin-top: 3.75vw; } @media (max-width: 360px) { .mypage__member-text .text-underline { margin-top: 12px; margin-top: 3.75vw; } } .text-underline { display: inline-block; font-size: 26.4px; font-size: 3.4375vw; border-bottom-style: solid; border-bottom-color: #212121; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; } @media (max-width: 360px) { .text-underline { font-size: 11px; font-size: 3.4375vw; } } @media (max-width: 360px) { .text-underline { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .text-normal { font-weight: normal; } .text-basic { font-size: 28.8px; font-size: 3.75vw; color: #222; } @media (max-width: 360px) { .text-basic { font-size: 12px; font-size: 3.75vw; } } .text-basic--margin-top { margin-top: 32px; margin-top: 4.1666666667vw; } @media (max-width: 360px) { .text-basic--margin-top { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .text-gray { color: #888; } .text-bar ~ .text-bar { margin-left: 14.4px; margin-left: 1.875vw; } @media (max-width: 360px) { .text-bar ~ .text-bar { margin-left: 6px; margin-left: 1.875vw; } } .text-bar ~ .text-bar:before { content: ''; display: inline-block; vertical-align: middle; width: 2.4px; width: 0.3125vw; height: 24px; height: 3.125vw; margin-right: 21.6px; margin-right: 2.8125vw; background-color: #ddd; } @media (max-width: 360px) { .text-bar ~ .text-bar:before { width: 1px; width: 0.3125vw; } } @media (max-width: 360px) { .text-bar ~ .text-bar:before { height: 10px; height: 3.125vw; } } @media (max-width: 360px) { .text-bar ~ .text-bar:before { margin-right: 9px; margin-right: 2.8125vw; } } .myshop__more-btn { position: absolute; top: 8px; top: 1.0416666667vw; right: 38.4px; right: 5vw; } @media (max-width: 360px) { .myshop__more-btn { top: 3.3333333333px; top: 1.0416666667vw; } } @media (max-width: 360px) { .myshop__more-btn { right: 16px; right: 5vw; } } .myshop-slide { padding-left: 32px; padding-left: 4.1666666667vw; } @media (max-width: 360px) { .myshop-slide { padding-left: 13.3333333333px; padding-left: 4.1666666667vw; } } .myshop-slide__item { box-sizing: border-box; position: relative; width: 400px; width: 52.0833333333vw; height: 301.6px; height: 39.2708333333vw; padding: 24px 31.2px 37.6px; padding: 3.125vw 4.0625vw 4.8958333333vw; background-color: #f6f6f6; } @media (max-width: 360px) { .myshop-slide__item { width: 166.6666666667px; width: 52.0833333333vw; } } @media (max-width: 360px) { .myshop-slide__item { height: 125.6666666667px; height: 39.2708333333vw; } } @media (max-width: 320px) { .myshop-slide__item { padding: 10px 13px 15.6666666667px; padding: 3.125vw 4.0625vw 4.8958333333vw; } } .myshop-slide__item ~ .myshop-slide__item { margin-left: 32px; margin-left: 4.1666666667vw; } @media (max-width: 360px) { .myshop-slide__item ~ .myshop-slide__item { margin-left: 13.3333333333px; margin-left: 4.1666666667vw; } } .myshop-slide__star { position: absolute; top: 34.4px; top: 4.4791666667vw; right: 32px; right: 4.1666666667vw; width: 24px; width: 3.125vw; } @media (max-width: 360px) { .myshop-slide__star { top: 14.3333333333px; top: 4.4791666667vw; } } @media (max-width: 360px) { .myshop-slide__star { right: 13.3333333333px; right: 4.1666666667vw; } } @media (max-width: 360px) { .myshop-slide__star { width: 10px; width: 3.125vw; } } .myshop-slide__name { font-size: 28.8px; font-size: 3.75vw; color: #212121; font-weight: bold; } @media (max-width: 360px) { .myshop-slide__name { font-size: 12px; font-size: 3.75vw; } } .myshop-slide__address { margin-top: 14.4px; margin-top: 1.875vw; font-size: 26.4px; font-size: 3.4375vw; color: #888; line-height: 38.4px; line-height: 5vw; height: 153.6px; height: 20vw; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 360px) { .myshop-slide__address { margin-top: 6px; margin-top: 1.875vw; } } @media (max-width: 360px) { .myshop-slide__address { font-size: 11px; font-size: 3.4375vw; } } @media (max-width: 360px) { .myshop-slide__address { line-height: 16px; line-height: 5vw; } } @media (max-width: 360px) { .myshop-slide__address { height: 64px; height: 20vw; } } .myshop-slide__phone { font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .myshop-slide__phone { font-size: 12px; font-size: 3.75vw; } } input.sc-datepicker { box-sizing: border-box; text-align: left; width: 337.6px; width: 43.9583333333vw; height: 92.8px; height: 12.0833333333vw; font-size: 28.8px; font-size: 3.75vw; color: #888; padding: 32px 41.6px; padding: 4.1666666667vw 5.4166666667vw; border-color: #ddd; background: url("/design/skinfood/mobile_skinfood/images/icon/icon_datepicker.png") no-repeat; background-size: 32px 31.2px; background-size: 4.1666666667vw 4.0625vw; background-position: right 5.41vw center; } @media (max-width: 360px) { input.sc-datepicker { width: 140.6666666667px; width: 43.9583333333vw; } } @media (max-width: 360px) { input.sc-datepicker { height: 38.6666666667px; height: 12.0833333333vw; } } @media (max-width: 360px) { input.sc-datepicker { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 320px) { input.sc-datepicker { padding: 13.3333333333px 17.3333333333px; padding: 4.1666666667vw 5.4166666667vw; } } @media (max-width: 320px) { input.sc-datepicker { background-size: 13.3333333333px 13px; background-size: 4.1666666667vw 4.0625vw; } } input.sc-datepicker ~ input.sc-datepicker { margin-left: 16px; margin-left: 2.0833333333vw; } @media (max-width: 360px) { input.sc-datepicker ~ input.sc-datepicker { margin-left: 6.6666666667px; margin-left: 2.0833333333vw; } } .cart_contents--padding { padding: 48px 38.4px 13.6px; padding: 6.25vw 5vw 1.7708333333vw; } @media (max-width: 320px) { .cart_contents--padding { padding: 20px 16px 5.6666666667px; padding: 6.25vw 5vw 1.7708333333vw; } } .cart_contents--padding-top-small { padding-top: 16px; padding-top: 2.0833333333vw; } @media (max-width: 360px) { .cart_contents--padding-top-small { padding-top: 6.6666666667px; padding-top: 2.0833333333vw; } } .cart_contents--non-vertical-padding { padding-top: 0; padding-bottom: 0; } .cart_contents--border ~ .cart_contents--border { border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-color: #eee; border-top-style: solid; } @media (max-width: 360px) { .cart_contents--border ~ .cart_contents--border { border-top-width: 1px; border-top-width: 0.3125vw; } } .cart_goods_detail--border ~ .cart_goods_detail--border { border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-color: #eee; border-top-style: solid; } @media (max-width: 360px) { .cart_goods_detail--border ~ .cart_goods_detail--border { border-top-width: 1px; border-top-width: 0.3125vw; } } .border-content { margin: 64px 0px; margin: 8.3333333333vw 0vw; border-top-width: 2.4px; border-top-width: 0.3125vw; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-top-color: #eee; border-top-style: solid; border-bottom-color: #eee; border-bottom-style: solid; } @media (max-width: 320px) { .border-content { margin: 26.6666666667px 0px; margin: 8.3333333333vw 0vw; } } @media (max-width: 360px) { .border-content { border-top-width: 1px; border-top-width: 0.3125vw; } } @media (max-width: 360px) { .border-content { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .order__option-item .text-underline ~ .text-underline { margin-left: 36px; margin-left: 4.6875vw; } @media (max-width: 360px) { .order__option-item .text-underline ~ .text-underline { margin-left: 15px; margin-left: 4.6875vw; } } .default-border-content--export .settle_cart_list .cart_goods_detail:last-child .order__content { padding-bottom: 0; } .settle_cart_list--side-padding { padding: 0px 38.4px; padding: 0vw 5vw; } @media (max-width: 320px) { .settle_cart_list--side-padding { padding: 0px 16px; padding: 0vw 5vw; } } .settle_cart_list--item-border-none { border-top-style: solid; border-top-color: #eee; border-top-width: 2.4px; border-top-width: 0.3125vw; } @media (max-width: 360px) { .settle_cart_list--item-border-none { border-top-width: 1px; border-top-width: 0.3125vw; } } .settle_cart_list--item-border-none .item_option:first-child .order__content { border-top: none; } .settle_cart_list--different-padding .item_option ~ .item_option .order__content { padding-top: 48px; padding-top: 6.25vw; } @media (max-width: 360px) { .settle_cart_list--different-padding .item_option ~ .item_option .order__content { padding-top: 20px; padding-top: 6.25vw; } } .default-text__item { position: relative; margin-top: 24px; margin-top: 3.125vw; padding-left: 14.4px; padding-left: 1.875vw; font-size: 28.8px; font-size: 3.75vw; color: #222; line-height: 1.3; } @media (max-width: 360px) { .default-text__item { margin-top: 10px; margin-top: 3.125vw; } } @media (max-width: 360px) { .default-text__item { padding-left: 6px; padding-left: 1.875vw; } } @media (max-width: 360px) { .default-text__item { font-size: 12px; font-size: 3.75vw; } } .default-text__item:first-child { margin-top: 0; } .default-text__item:before { display: inline-block; content: ''; position: absolute; width: 4.8px; width: 0.625vw; height: 4.8px; height: 0.625vw; background-color: #222; border-radius: 50%; top: 15.2px; top: 1.9791666667vw; left: 0; } @media (max-width: 360px) { .default-text__item:before { width: 2px; width: 0.625vw; } } @media (max-width: 360px) { .default-text__item:before { height: 2px; height: 0.625vw; } } @media (max-width: 360px) { .default-text__item:before { top: 6.3333333333px; top: 1.9791666667vw; } } .default-text__item--sub-text { display: block; color: #888; font-size: 26.4px; font-size: 3.4375vw; } @media (max-width: 360px) { .default-text__item--sub-text { font-size: 11px; font-size: 3.4375vw; } } .default-bar-text { box-sizing: border-box; background-color: #f6f6f6; padding: 24px 38.4px; padding: 3.125vw 5vw; font-size: 28.8px; font-size: 3.75vw; color: #222; } @media (max-width: 320px) { .default-bar-text { padding: 10px 16px; padding: 3.125vw 5vw; } } @media (max-width: 360px) { .default-bar-text { font-size: 12px; font-size: 3.75vw; } } .default-box-content { border-width: 2.4px; border-width: 0.3125vw; border-color: #ddd; border-style: solid; } @media (max-width: 360px) { .default-box-content { border-width: 1px; border-width: 0.3125vw; } } .default-box-content ~ .default-box-content { margin-top: 48px; margin-top: 6.25vw; } @media (max-width: 360px) { .default-box-content ~ .default-box-content { margin-top: 20px; margin-top: 6.25vw; } } .settle__content--middle { padding: 40px 31.2px; padding: 5.2083333333vw 4.0625vw; } @media (max-width: 320px) { .settle__content--middle { padding: 16.6666666667px 13px; padding: 5.2083333333vw 4.0625vw; } } .settle__content--padding-bottom-small { padding-bottom: 16px; padding-bottom: 2.0833333333vw; } @media (max-width: 360px) { .settle__content--padding-bottom-small { padding-bottom: 6.6666666667px; padding-bottom: 2.0833333333vw; } } .btn-padding-wrap { padding: 14.4px 38.4px 112px; padding: 1.875vw 5vw 14.5833333333vw; } @media (max-width: 320px) { .btn-padding-wrap { padding: 6px 16px 46.6666666667px; padding: 1.875vw 5vw 14.5833333333vw; } } .eaMinus--disabled { background-image: url(/design/skinfood/mobile_skinfood/images/common/m_minusbt_disabled.png); } .eaControl { position: relative; margin-bottom: 56px; margin-bottom: 7.2916666667vw; } @media (max-width: 360px) { .eaControl { margin-bottom: 23.3333333333px; margin-bottom: 7.2916666667vw; } } .eaInput-wrap { position: absolute; top: 50%; right: 0; transform: translateY(-50%); } .refund-list-lay { border: none; } .refund-list-lay ~ .refund-list-lay { border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-color: #eee; border-top-style: solid; } @media (max-width: 360px) { .refund-list-lay ~ .refund-list-lay { border-top-width: 1px; border-top-width: 0.3125vw; } } .input-content + .input-content--margin-small { margin-top: 16px; margin-top: 2.0833333333vw; } @media (max-width: 360px) { .input-content + .input-content--margin-small { margin-top: 6.6666666667px; margin-top: 2.0833333333vw; } } .input-content + .input-content--margin-middle { margin-top: 48px; margin-top: 6.25vw; } @media (max-width: 360px) { .input-content + .input-content--margin-middle { margin-top: 20px; margin-top: 6.25vw; } } .cta--margin-top { margin-top: 32px; margin-top: 4.1666666667vw; } @media (max-width: 360px) { .cta--margin-top { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .cta--margin-middle { margin-top: 16px; margin-top: 2.0833333333vw; } @media (max-width: 360px) { .cta--margin-middle { margin-top: 6.6666666667px; margin-top: 2.0833333333vw; } } .coupon-padding { padding: 80px 38.4px 0px; padding: 10.4166666667vw 5vw 0vw; } @media (max-width: 320px) { .coupon-padding { padding: 33.3333333333px 16px 0px; padding: 10.4166666667vw 5vw 0vw; } } .radio-wrap { margin-bottom: 64px; margin-bottom: 8.3333333333vw; font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .radio-wrap { margin-bottom: 26.6666666667px; margin-bottom: 8.3333333333vw; } } @media (max-width: 360px) { .radio-wrap { font-size: 12px; font-size: 3.75vw; } } .radio-wrap label ~ label { margin-left: 48px; margin-left: 6.25vw; } @media (max-width: 360px) { .radio-wrap label ~ label { margin-left: 20px; margin-left: 6.25vw; } } /*# sourceMappingURL=mypage.css.map */ /* image path */ /* color */ .mypage-content { padding: 80px 38.4px 112px; padding: 10.4166666667vw 5vw 14.5833333333vw; } @media (max-width: 320px) { .mypage-content { padding: 33.3333333333px 16px 46.6666666667px; padding: 10.4166666667vw 5vw 14.5833333333vw; } } .mypage-form__list { margin-top: 48px; margin-top: 6.25vw; } @media (max-width: 360px) { .mypage-form__list { margin-top: 20px; margin-top: 6.25vw; } } .mypage-form__item { line-height: 1; font-size: 30.4px; font-size: 3.9583333333vw; color: #888; } @media (max-width: 360px) { .mypage-form__item { font-size: 12.6666666667px; font-size: 3.9583333333vw; } } .mypage-form__item .ez-radio { margin-right: 16px; margin-right: 2.0833333333vw; } @media (max-width: 360px) { .mypage-form__item .ez-radio { margin-right: 6.6666666667px; margin-right: 2.0833333333vw; } } .mypage-form__item + .mypage-form__item { margin-top: 32px; margin-top: 4.1666666667vw; } @media (max-width: 360px) { .mypage-form__item + .mypage-form__item { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .mypage-form__content { margin-top: 64px; margin-top: 8.3333333333vw; } @media (max-width: 360px) { .mypage-form__content { margin-top: 26.6666666667px; margin-top: 8.3333333333vw; } } .mypage-form__desc { margin-top: 64px; margin-top: 8.3333333333vw; font-size: 30.4px; font-size: 3.9583333333vw; line-height: -0.32px; line-height: -0.0416666667vw; word-break: keep-all; } @media (max-width: 360px) { .mypage-form__desc { margin-top: 26.6666666667px; margin-top: 8.3333333333vw; } } @media (max-width: 360px) { .mypage-form__desc { font-size: 12.6666666667px; font-size: 3.9583333333vw; } } @media (max-width: 360px) { .mypage-form__desc { line-height: -0.1333333333px; line-height: -0.0416666667vw; } } .mypage-form__agree { margin-top: 32px; margin-top: 4.1666666667vw; font-size: 30.4px; font-size: 3.9583333333vw; } @media (max-width: 360px) { .mypage-form__agree { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } @media (max-width: 360px) { .mypage-form__agree { font-size: 12.6666666667px; font-size: 3.9583333333vw; } } .mypage-form__agree .ez-checkbox { margin-right: 16px; margin-right: 2.0833333333vw; } @media (max-width: 360px) { .mypage-form__agree .ez-checkbox { margin-right: 6.6666666667px; margin-right: 2.0833333333vw; } } .mypage-form__btn { margin-top: 80px; margin-top: 10.4166666667vw; } @media (max-width: 360px) { .mypage-form__btn { margin-top: 33.3333333333px; margin-top: 10.4166666667vw; } } .mypage-form__btn-bottom { padding: 64px 38.4px 112px; padding: 8.3333333333vw 5vw 14.5833333333vw; } @media (max-width: 320px) { .mypage-form__btn-bottom { padding: 26.6666666667px 16px 46.6666666667px; padding: 8.3333333333vw 5vw 14.5833333333vw; } } .coupon-content { padding: 0px 38.4px; padding: 0vw 5vw; } @media (max-width: 320px) { .coupon-content { padding: 0px 16px; padding: 0vw 5vw; } } .coupon-content--gray { padding-top: 80px; padding-top: 10.4166666667vw; padding-bottom: 80px; padding-bottom: 10.4166666667vw; background: url("/design/skinfood/mobile_skinfood/images/bg/bg_gray.png") no-repeat; background-size: 100% 100%; } @media (max-width: 360px) { .coupon-content--gray { padding-top: 33.3333333333px; padding-top: 10.4166666667vw; } } @media (max-width: 360px) { .coupon-content--gray { padding-bottom: 33.3333333333px; padding-bottom: 10.4166666667vw; } } .coupon-content__btn { margin-top: 30.4px; margin-top: 3.9583333333vw; } @media (max-width: 360px) { .coupon-content__btn { margin-top: 12.6666666667px; margin-top: 3.9583333333vw; } } .coupon-content__btn.cta { font-weight: normal; } .coupon-list-content { padding: 64px 38.4px 112px; padding: 8.3333333333vw 5vw 14.5833333333vw; } @media (max-width: 320px) { .coupon-list-content { padding: 26.6666666667px 16px 46.6666666667px; padding: 8.3333333333vw 5vw 14.5833333333vw; } } .coupon__item { position: relative; width: 100%; padding: 38.4px; padding: 5vw; background: url("/design/skinfood/mobile_skinfood/images//bg/bg_coupon.png") no-repeat; background-size: 100% 100%; box-sizing: border-box; } @media (max-width: 360px) { .coupon__item { padding: 16px; padding: 5vw; } } .coupon__item--used { background-image: url(/design/skinfood/mobile_skinfood/images/bg/bg_coupon_used.png); } .coupon__item + .coupon__item { margin-top: 16px; margin-top: 2.0833333333vw; } @media (max-width: 360px) { .coupon__item + .coupon__item { margin-top: 6.6666666667px; margin-top: 2.0833333333vw; } } .coupon__item-name { font-size: 26.4px; font-size: 3.4375vw; color: #888; line-height: 1; } @media (max-width: 360px) { .coupon__item-name { font-size: 11px; font-size: 3.4375vw; } } .coupon__item-title { margin-top: 31.2px; margin-top: 4.0625vw; font-size: 39.2px; font-size: 5.1041666667vw; font-weight: bold; color: #222; } @media (max-width: 360px) { .coupon__item-title { margin-top: 13px; margin-top: 4.0625vw; } } @media (max-width: 360px) { .coupon__item-title { font-size: 16.3333333333px; font-size: 5.1041666667vw; } } .coupon__item-limit { margin-top: 19.2px; margin-top: 2.5vw; font-size: 26.4px; font-size: 3.4375vw; color: #222; line-height: 1; } @media (max-width: 360px) { .coupon__item-limit { margin-top: 8px; margin-top: 2.5vw; } } @media (max-width: 360px) { .coupon__item-limit { font-size: 11px; font-size: 3.4375vw; } } .coupon__item-limit .bar { margin-left: 23.2px; margin-left: 3.0208333333vw; } @media (max-width: 360px) { .coupon__item-limit .bar { margin-left: 9.6666666667px; margin-left: 3.0208333333vw; } } .coupon__item-limit .bar::before { display: inline-block; width: 2.4px; width: 0.3125vw; height: 24px; height: 3.125vw; margin-right: 22.4px; margin-right: 2.9166666667vw; background-color: #ddd; content: ""; } @media (max-width: 360px) { .coupon__item-limit .bar::before { width: 1px; width: 0.3125vw; } } @media (max-width: 360px) { .coupon__item-limit .bar::before { height: 10px; height: 3.125vw; } } @media (max-width: 360px) { .coupon__item-limit .bar::before { margin-right: 9.3333333333px; margin-right: 2.9166666667vw; } } .coupon__item-btn { position: absolute; right: 38.4px; right: 5vw; bottom: 38.4px; bottom: 5vw; } @media (max-width: 360px) { .coupon__item-btn { right: 16px; right: 5vw; } } @media (max-width: 360px) { .coupon__item-btn { bottom: 16px; bottom: 5vw; } } .coupon__item-btn--bold { font-weight: bold; font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .coupon__item-btn--bold { font-size: 12px; font-size: 3.75vw; } } .coupon__item-btn .cta { font-size: 26.4px; font-size: 3.4375vw; font-weight: normal; background: none; } @media (max-width: 360px) { .coupon__item-btn .cta { font-size: 11px; font-size: 3.4375vw; } } .coupon-empty { padding-top: 179.2px; padding-top: 23.3333333333vw; background: url(/design/skinfood/mobile_skinfood/images/icon/icon_coupon_empty.png) no-repeat; background-size: 102.4px 67.2px; background-size: 13.3333333333vw 8.75vw; background-position-x: center; background-position-y: 48px; background-position-y: 6.25vw; font-size: 28.8px; font-size: 3.75vw; font-weight: bold; text-align: center; } @media (max-width: 360px) { .coupon-empty { padding-top: 74.6666666667px; padding-top: 23.3333333333vw; } } @media (max-width: 320px) { .coupon-empty { background-size: 42.6666666667px 28px; background-size: 13.3333333333vw 8.75vw; } } @media (max-width: 360px) { .coupon-empty { background-position-y: 20px; background-position-y: 6.25vw; } } @media (max-width: 360px) { .coupon-empty { font-size: 12px; font-size: 3.75vw; } } .emoney-content { padding-bottom: 112px; padding-bottom: 14.5833333333vw; } @media (max-width: 360px) { .emoney-content { padding-bottom: 46.6666666667px; padding-bottom: 14.5833333333vw; } } .emoney-content__top { display: flex; justify-content: space-between; padding: 64px 38.4px 54.4px; padding: 8.3333333333vw 5vw 7.0833333333vw; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-bottom-color: #eee; border-bottom-style: solid; } @media (max-width: 320px) { .emoney-content__top { padding: 26.6666666667px 16px 22.6666666667px; padding: 8.3333333333vw 5vw 7.0833333333vw; } } @media (max-width: 360px) { .emoney-content__top { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .emoney-content__top-btn { font-weight: normal; } .emoney-content__top-left dt { font-size: 28.8px; font-size: 3.75vw; line-height: 1; } @media (max-width: 360px) { .emoney-content__top-left dt { font-size: 12px; font-size: 3.75vw; } } .emoney-content__top-left dd { margin-top: 22.4px; margin-top: 2.9166666667vw; font-size: 55.2px; font-size: 7.1875vw; line-height: 1; font-weight: bold; } @media (max-width: 360px) { .emoney-content__top-left dd { margin-top: 9.3333333333px; margin-top: 2.9166666667vw; } } @media (max-width: 360px) { .emoney-content__top-left dd { font-size: 23px; font-size: 7.1875vw; } } .emoney-content__top-right { text-align: right; } .emoney-content__top-right-desc { margin-top: 44.8px; margin-top: 5.8333333333vw; font-size: 28.8px; font-size: 3.75vw; line-height: 1; } @media (max-width: 360px) { .emoney-content__top-right-desc { margin-top: 18.6666666667px; margin-top: 5.8333333333vw; } } @media (max-width: 360px) { .emoney-content__top-right-desc { font-size: 12px; font-size: 3.75vw; } } .emoney-content__price { font-size: 33.6px; font-size: 4.375vw; font-weight: bold; } @media (max-width: 360px) { .emoney-content__price { font-size: 14px; font-size: 4.375vw; } } .emoney-content__price--gray { color: #888; } .emoney-content__icon { display: inline-block; width: 122.4px; width: 15.9375vw; height: 122.4px; height: 15.9375vw; margin-left: 47.2px; margin-left: 6.1458333333vw; line-height: 124px; line-height: 16.1458333333vw; font-size: 28.8px; font-size: 3.75vw; text-align: center; font-weight: bold; border-radius: 50%; background-color: #fdb812; } @media (max-width: 360px) { .emoney-content__icon { width: 51px; width: 15.9375vw; } } @media (max-width: 360px) { .emoney-content__icon { height: 51px; height: 15.9375vw; } } @media (max-width: 360px) { .emoney-content__icon { margin-left: 19.6666666667px; margin-left: 6.1458333333vw; } } @media (max-width: 360px) { .emoney-content__icon { line-height: 51.6666666667px; line-height: 16.1458333333vw; } } @media (max-width: 360px) { .emoney-content__icon { font-size: 12px; font-size: 3.75vw; } } .emoney-content__icon--gray { background-color: #f6f6f6; color: #888; } .level-title { position: relative; font-size: 33.6px; font-size: 4.375vw; font-weight: bold; z-index: 1; } @media (max-width: 360px) { .level-title { font-size: 14px; font-size: 4.375vw; } } .level-title:before { position: absolute; top: -12px; top: -1.5625vw; left: -20.8px; left: -2.7083333333vw; display: inline-block; width: 65.6px; width: 8.5416666667vw; height: 65.6px; height: 8.5416666667vw; border-radius: 50%; content: ""; z-index: -1; } @media (max-width: 360px) { .level-title:before { top: -5px; top: -1.5625vw; } } @media (max-width: 360px) { .level-title:before { left: -8.6666666667px; left: -2.7083333333vw; } } @media (max-width: 360px) { .level-title:before { width: 27.3333333333px; width: 8.5416666667vw; } } @media (max-width: 360px) { .level-title:before { height: 27.3333333333px; height: 8.5416666667vw; } } .level-title--sclass:before { background-color: #fdb812; } .level-title--vip:before { background-color: #ffd571; } .level-title--normal:before { background-color: #ffecbe; } .level-step { position: absolute; top: 50%; } .level-step__btn { margin-top: 30.4px; margin-top: 3.9583333333vw; font-weight: normal; background: none; } @media (max-width: 360px) { .level-step__btn { margin-top: 12.6666666667px; margin-top: 3.9583333333vw; } } .level-step--normal { left: 0; transform: translateX(-50%); } .level-step--vip { left: 50%; transform: translateX(-50%); } .level-step--sclass { right: 0; transform: translateX(40%); } .level-step__pin { display: inline-block; width: 24px; width: 3.125vw; height: 24px; height: 3.125vw; box-sizing: border-box; border-width: 4.8px; border-width: 0.625vw; border-style: solid; border-color: #ddd; border-radius: 50%; background: #fff; transform: translateY(-50%); line-height: 1; } @media (max-width: 360px) { .level-step__pin { width: 10px; width: 3.125vw; } } @media (max-width: 360px) { .level-step__pin { height: 10px; height: 3.125vw; } } @media (max-width: 360px) { .level-step__pin { border-width: 2px; border-width: 0.625vw; } } .level-step__pin--active { border-color: #fdb812; background-color: #fdb812; } .level-step__title { display: block; margin-top: 8px; margin-top: 1.0416666667vw; font-size: 26.4px; font-size: 3.4375vw; font-weight: bold; line-height: 1; white-space: nowrap; color: #888; } @media (max-width: 360px) { .level-step__title { margin-top: 3.3333333333px; margin-top: 1.0416666667vw; } } @media (max-width: 360px) { .level-step__title { font-size: 11px; font-size: 3.4375vw; } } .level-step__title--active { color: #222; } .level-step__circle { display: inline-block; width: 264px; width: 34.375vw; height: 264px; height: 34.375vw; padding: 72px 0px 82.4px; padding: 9.375vw 0vw 10.7291666667vw; box-sizing: border-box; border-radius: 50%; border-width: 8px; border-width: 1.0416666667vw; border-style: solid; border-color: #fdb812; text-align: center; } @media (max-width: 360px) { .level-step__circle { width: 110px; width: 34.375vw; } } @media (max-width: 360px) { .level-step__circle { height: 110px; height: 34.375vw; } } @media (max-width: 320px) { .level-step__circle { padding: 30px 0px 34.3333333333px; padding: 9.375vw 0vw 10.7291666667vw; } } @media (max-width: 360px) { .level-step__circle { border-width: 3.3333333333px; border-width: 1.0416666667vw; } } .level-step__circle-title { font-size: 28.8px; font-size: 3.75vw; line-height: 1; } @media (max-width: 360px) { .level-step__circle-title { font-size: 12px; font-size: 3.75vw; } } .level-step__circle-desc { margin-top: 21.6px; margin-top: 2.8125vw; font-size: 44.8px; font-size: 5.8333333333vw; font-weight: bold; line-height: 1; } @media (max-width: 360px) { .level-step__circle-desc { margin-top: 9px; margin-top: 2.8125vw; } } @media (max-width: 360px) { .level-step__circle-desc { font-size: 18.6666666667px; font-size: 5.8333333333vw; } } .level-step__desc { margin-top: 48px; margin-top: 6.25vw; line-height: 1; font-size: 28.8px; font-size: 3.75vw; color: #222; } @media (max-width: 360px) { .level-step__desc { margin-top: 20px; margin-top: 6.25vw; } } @media (max-width: 360px) { .level-step__desc { font-size: 12px; font-size: 3.75vw; } } .level-step__desc + .level-step__desc { display: block; margin-top: 24px; margin-top: 3.125vw; font-weight: bold; } @media (max-width: 360px) { .level-step__desc + .level-step__desc { margin-top: 10px; margin-top: 3.125vw; } } .level-step__bar { position: relative; height: 4.8px; height: 0.625vw; margin-top: 32px; margin-top: 4.1666666667vw; background: #ddd; font-size: 0; } @media (max-width: 360px) { .level-step__bar { height: 2px; height: 0.625vw; } } @media (max-width: 360px) { .level-step__bar { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .level-step__bar-container { margin-bottom: 64px; margin-bottom: 8.3333333333vw; padding: 0px 38.4px; padding: 0vw 5vw; } @media (max-width: 360px) { .level-step__bar-container { margin-bottom: 26.6666666667px; margin-bottom: 8.3333333333vw; } } @media (max-width: 320px) { .level-step__bar-container { padding: 0px 16px; padding: 0vw 5vw; } } .level-step__bar--progress { height: 4.8px; height: 0.625vw; position: absolute; top: 0; left: 0; background: #fdb812; } @media (max-width: 360px) { .level-step__bar--progress { height: 2px; height: 0.625vw; } } .level__btn { margin-top: 80px; margin-top: 10.4166666667vw; } @media (max-width: 360px) { .level__btn { margin-top: 33.3333333333px; margin-top: 10.4166666667vw; } } .level-item { padding: 64px 38.4px; padding: 8.3333333333vw 5vw; } @media (max-width: 320px) { .level-item { padding: 26.6666666667px 16px; padding: 8.3333333333vw 5vw; } } .level-item:first-child { border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-bottom-style: solid; border-bottom-color: #eee; } @media (max-width: 360px) { .level-item:first-child { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .level-item + .level-item { margin-top: 0; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-bottom-style: solid; border-bottom-color: #eee; } @media (max-width: 360px) { .level-item + .level-item { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .level-desc { display: block; margin-top: 16.8px; margin-top: 2.1875vw; font-size: 28.8px; font-size: 3.75vw; line-height: 44.8px; line-height: 5.8333333333vw; } @media (max-width: 360px) { .level-desc { margin-top: 7px; margin-top: 2.1875vw; } } @media (max-width: 360px) { .level-desc { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .level-desc { line-height: 18.6666666667px; line-height: 5.8333333333vw; } } .membership-desc { padding: 38.4px; padding: 5vw; font-size: 28.8px; font-size: 3.75vw; line-height: 1; color: #222; } @media (max-width: 360px) { .membership-desc { padding: 16px; padding: 5vw; } } @media (max-width: 360px) { .membership-desc { font-size: 12px; font-size: 3.75vw; } } .membership-content__list { padding: 64px 38.4px; padding: 8.3333333333vw 5vw; border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-style: solid; border-top-color: #eee; } @media (max-width: 320px) { .membership-content__list { padding: 26.6666666667px 16px; padding: 8.3333333333vw 5vw; } } @media (max-width: 360px) { .membership-content__list { border-top-width: 1px; border-top-width: 0.3125vw; } } .membership-content__item { padding: 40px 48px; padding: 5.2083333333vw 6.25vw; background: url("/design/skinfood/mobile_skinfood/images/bg/bg_kit.png") no-repeat; background-size: 100% 100%; } @media (max-width: 320px) { .membership-content__item { padding: 16.6666666667px 20px; padding: 5.2083333333vw 6.25vw; } } .membership-content__item + .membership-content__item { margin-top: 16px; margin-top: 2.0833333333vw; } @media (max-width: 360px) { .membership-content__item + .membership-content__item { margin-top: 6.6666666667px; margin-top: 2.0833333333vw; } } .membership-content__item-title { font-size: 26.4px; font-size: 3.4375vw; line-height: 1; color: #888; } @media (max-width: 360px) { .membership-content__item-title { font-size: 11px; font-size: 3.4375vw; } } .membership-content__item-desc { margin-top: 32px; margin-top: 4.1666666667vw; font-size: 28.8px; font-size: 3.75vw; line-height: 1; font-weight: bold; color: #222; } @media (max-width: 360px) { .membership-content__item-desc { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } @media (max-width: 360px) { .membership-content__item-desc { font-size: 12px; font-size: 3.75vw; } } .membership-content__item-btn { margin-top: 16px; margin-top: 2.0833333333vw; font-weight: normal; } @media (max-width: 360px) { .membership-content__item-btn { margin-top: 6.6666666667px; margin-top: 2.0833333333vw; } } .myinfo-btn { padding: 80px 38.4px 112px; padding: 10.4166666667vw 5vw 14.5833333333vw; background-color: #f6f6f6; } @media (max-width: 320px) { .myinfo-btn { padding: 33.3333333333px 16px 46.6666666667px; padding: 10.4166666667vw 5vw 14.5833333333vw; } } .myinfo-btn .cta + .cta { margin-top: 32px; margin-top: 4.1666666667vw; } @media (max-width: 360px) { .myinfo-btn .cta + .cta { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .restock-info { padding: 63.2px 38.4px 48px; padding: 8.2291666667vw 5vw 6.25vw; background: #f6f6f6; } @media (max-width: 320px) { .restock-info { padding: 26.3333333333px 16px 20px; padding: 8.2291666667vw 5vw 6.25vw; } } .restock-info__title { position: relative; font-size: 26.4px; font-size: 3.4375vw; font-weight: bold; line-height: 1; } @media (max-width: 360px) { .restock-info__title { font-size: 11px; font-size: 3.4375vw; } } .restock-info__title:after { position: absolute; top: 0; right: 0; bottom: 0; margin: auto; display: inline-block; width: 26.4px; width: 3.4375vw; height: 16.8px; height: 2.1875vw; background: url("/design/skinfood/mobile_skinfood/images/icon/icon_arrow_down.png") no-repeat; background-size: contain; transform: rotate(180deg); content: ""; } @media (max-width: 360px) { .restock-info__title:after { width: 11px; width: 3.4375vw; } } @media (max-width: 360px) { .restock-info__title:after { height: 7px; height: 2.1875vw; } } .restock-info__title--active:after { transform: rotate(0deg); } .restock-info__title--active + .restock-info__desc { display: none; } .restock-info__list { margin-top: 48px; margin-top: 6.25vw; } @media (max-width: 360px) { .restock-info__list { margin-top: 20px; margin-top: 6.25vw; } } .restock-info__item { position: relative; padding-left: 18.4px; padding-left: 2.3958333333vw; font-size: 28.8px; font-size: 3.75vw; word-break: keep-all; } @media (max-width: 360px) { .restock-info__item { padding-left: 7.6666666667px; padding-left: 2.3958333333vw; } } @media (max-width: 360px) { .restock-info__item { font-size: 12px; font-size: 3.75vw; } } .restock-info__item:before { position: absolute; top: 16px; top: 2.0833333333vw; left: 0; display: inline-block; width: 4.8px; width: 0.625vw; height: 4.8px; height: 0.625vw; background-color: #222; border-radius: 50%; content: ""; } @media (max-width: 360px) { .restock-info__item:before { top: 6.6666666667px; top: 2.0833333333vw; } } @media (max-width: 360px) { .restock-info__item:before { width: 2px; width: 0.625vw; } } @media (max-width: 360px) { .restock-info__item:before { height: 2px; height: 0.625vw; } } .restock-info__item + .restock-info__item { margin-top: 32px; margin-top: 4.1666666667vw; } @media (max-width: 360px) { .restock-info__item + .restock-info__item { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .myqna-content { padding: 80px 38.4px 0px; padding: 10.4166666667vw 5vw 0vw; } @media (max-width: 320px) { .myqna-content { padding: 33.3333333333px 16px 0px; padding: 10.4166666667vw 5vw 0vw; } } .myqna-content + .myqna-content { padding: 0px 0px 112px; padding: 0vw 0vw 14.5833333333vw; } @media (max-width: 320px) { .myqna-content + .myqna-content { padding: 0px 0px 46.6666666667px; padding: 0vw 0vw 14.5833333333vw; } } .myqna-list { margin-top: 48px; margin-top: 6.25vw; } @media (max-width: 360px) { .myqna-list { margin-top: 20px; margin-top: 6.25vw; } } .myqna-list + .cta { margin-top: 32px; margin-top: 4.1666666667vw; } @media (max-width: 360px) { .myqna-list + .cta { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .myqna-item { line-height: 1; margin-top: 20px; margin-top: 2.6041666667vw; font-size: 28.8px; font-size: 3.75vw; color: #222; } @media (max-width: 360px) { .myqna-item { margin-top: 8.3333333333px; margin-top: 2.6041666667vw; } } @media (max-width: 360px) { .myqna-item { font-size: 12px; font-size: 3.75vw; } } .board-content { position: relative; padding: 20px 38.4px 126.4px; padding: 2.6041666667vw 5vw 16.4583333333vw; background: #f6f6f6; } @media (max-width: 320px) { .board-content { padding: 8.3333333333px 16px 52.6666666667px; padding: 2.6041666667vw 5vw 16.4583333333vw; } } .board-content__desc { padding-left: 206.4px; padding-left: 26.875vw; font-size: 28.8px; font-size: 3.75vw; color: #222; } @media (max-width: 360px) { .board-content__desc { padding-left: 86px; padding-left: 26.875vw; } } @media (max-width: 360px) { .board-content__desc { font-size: 12px; font-size: 3.75vw; } } .board-content__btn { position: absolute; left: 0; bottom: 64px; bottom: 8.3333333333vw; padding-left: 38.4px; padding-left: 5vw; padding-right: 38.4px; padding-right: 5vw; display: flex; width: 100%; justify-content: space-between; box-sizing: border-box; } @media (max-width: 360px) { .board-content__btn { bottom: 26.6666666667px; bottom: 8.3333333333vw; } } @media (max-width: 360px) { .board-content__btn { padding-left: 16px; padding-left: 5vw; } } @media (max-width: 360px) { .board-content__btn { padding-right: 16px; padding-right: 5vw; } } .board-content__btn .cta { background: none; } .board-content__btn-right { font-size: 0; } .board-content__btn-right .cta + .cta { margin-left: 48.8px; margin-left: 6.3541666667vw; } @media (max-width: 360px) { .board-content__btn-right .cta + .cta { margin-left: 20.3333333333px; margin-left: 6.3541666667vw; } } .board-content__reply { margin-top: 32px; margin-top: 4.1666666667vw; padding-top: 32px; padding-top: 4.1666666667vw; border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-style: solid; border-top-color: #eee; } @media (max-width: 360px) { .board-content__reply { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } @media (max-width: 360px) { .board-content__reply { padding-top: 13.3333333333px; padding-top: 4.1666666667vw; } } @media (max-width: 360px) { .board-content__reply { border-top-width: 1px; border-top-width: 0.3125vw; } } .board-content__reply-title { font-size: 28.8px; font-size: 3.75vw; font-weight: bold; } @media (max-width: 360px) { .board-content__reply-title { font-size: 12px; font-size: 3.75vw; } } .board-content__reply-info { margin-top: 22.4px; margin-top: 2.9166666667vw; padding-bottom: 32px; padding-bottom: 4.1666666667vw; font-size: 28.8px; font-size: 3.75vw; line-height: 44.8px; line-height: 5.8333333333vw; word-break: keep-all; } @media (max-width: 360px) { .board-content__reply-info { margin-top: 9.3333333333px; margin-top: 2.9166666667vw; } } @media (max-width: 360px) { .board-content__reply-info { padding-bottom: 13.3333333333px; padding-bottom: 4.1666666667vw; } } @media (max-width: 360px) { .board-content__reply-info { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .board-content__reply-info { line-height: 18.6666666667px; line-height: 5.8333333333vw; } } .board-slide { margin-top: 32px; margin-top: 4.1666666667vw; height: 456.8px; height: 59.4791666667vw; overflow: hidden; } @media (max-width: 360px) { .board-slide { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } @media (max-width: 360px) { .board-slide { height: 190.3333333333px; height: 59.4791666667vw; } } .board-slide__item { display: inline-block; max-width: 656px; max-width: 85.4166666667vw; } @media (max-width: 360px) { .board-slide__item { max-width: 273.3333333333px; max-width: 85.4166666667vw; } } .board__list { margin-top: 64px; margin-top: 8.3333333333vw; border-top-width: 2.4px; border-top-width: 0.3125vw; border-top-color: #eee; border-top-style: solid; } @media (max-width: 360px) { .board__list { margin-top: 26.6666666667px; margin-top: 8.3333333333vw; } } @media (max-width: 360px) { .board__list { border-top-width: 1px; border-top-width: 0.3125vw; } } .board__list--border-none { border-top: none; margin-top: 0; } .board__item { padding: 67.2px 38.4px 55.2px; padding: 8.75vw 5vw 7.1875vw; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-bottom-color: #eee; border-bottom-style: solid; } @media (max-width: 320px) { .board__item { padding: 28px 16px 23px; padding: 8.75vw 5vw 7.1875vw; } } @media (max-width: 360px) { .board__item { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .board__item--active { background-color: #f6f6f6; border-bottom: none; padding-bottom: 0; } .board__item--active .boad_view_btn_m { display: none; } .board__item--active [unfold=true] { display: inline-block !important; } .board__item-wrap { display: flex; justify-content: space-between; } .board__item-img { position: relative; width: 160px; width: 20.8333333333vw; height: 160px; height: 20.8333333333vw; overflow: hidden; } @media (max-width: 360px) { .board__item-img { width: 66.6666666667px; width: 20.8333333333vw; } } @media (max-width: 360px) { .board__item-img { height: 66.6666666667px; height: 20.8333333333vw; } } .board__item-img img { width: 100%; height: 100%; } .board__item-img--large { width: 240px; width: 31.25vw; } @media (max-width: 360px) { .board__item-img--large { width: 100px; width: 31.25vw; } } .board__item-img-dimed { position: absolute; bottom: 0; right: 0; display: inline-block; width: 64px; width: 8.3333333333vw; height: 64px; height: 8.3333333333vw; line-height: 64px; line-height: 8.3333333333vw; color: #fff; text-align: center; font-size: 26.4px; font-size: 3.4375vw; font-weight: bold; background-color: rgba(34, 34, 34, 0.7); } @media (max-width: 360px) { .board__item-img-dimed { width: 26.6666666667px; width: 8.3333333333vw; } } @media (max-width: 360px) { .board__item-img-dimed { height: 26.6666666667px; height: 8.3333333333vw; } } @media (max-width: 360px) { .board__item-img-dimed { line-height: 26.6666666667px; line-height: 8.3333333333vw; } } @media (max-width: 360px) { .board__item-img-dimed { font-size: 11px; font-size: 3.4375vw; } } .board__item-container--has-img { flex: 1; width: 480px; width: 62.5vw; padding-left: 47.2px; padding-left: 6.1458333333vw; } @media (max-width: 360px) { .board__item-container--has-img { width: 200px; width: 62.5vw; } } @media (max-width: 360px) { .board__item-container--has-img { padding-left: 19.6666666667px; padding-left: 6.1458333333vw; } } .board__item-score { margin-top: 16px; margin-top: 2.0833333333vw; } @media (max-width: 360px) { .board__item-score { margin-top: 6.6666666667px; margin-top: 2.0833333333vw; } } .board__item-score img { display: inline-block; width: 48px; width: 6.25vw; margin-left: 9.6px; margin-left: 1.25vw; } @media (max-width: 360px) { .board__item-score img { width: 20px; width: 6.25vw; } } @media (max-width: 360px) { .board__item-score img { margin-left: 4px; margin-left: 1.25vw; } } .board__item-score img:first-child { margin-left: 0; } .board__item-name { margin-top: 48px; margin-top: 6.25vw; font-size: 28.8px; font-size: 3.75vw; font-weight: bold; } @media (max-width: 360px) { .board__item-name { margin-top: 20px; margin-top: 6.25vw; } } @media (max-width: 360px) { .board__item-name { font-size: 12px; font-size: 3.75vw; } } .board__item-option-list { margin-top: 20px; margin-top: 2.6041666667vw; font-size: 28.8px; font-size: 3.75vw; color: #888; } @media (max-width: 360px) { .board__item-option-list { margin-top: 8.3333333333px; margin-top: 2.6041666667vw; } } @media (max-width: 360px) { .board__item-option-list { font-size: 12px; font-size: 3.75vw; } } .board__item-bottom { margin-top: 42.4px; margin-top: 5.5208333333vw; } @media (max-width: 360px) { .board__item-bottom { margin-top: 17.6666666667px; margin-top: 5.5208333333vw; } } .board__item-bottom-title { font-size: 28.8px; font-size: 3.75vw; font-weight: bold; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 360px) { .board__item-bottom-title { font-size: 12px; font-size: 3.75vw; } } .board__item-bottom-desc { margin-top: 20px; margin-top: 2.6041666667vw; font-size: 28.8px; font-size: 3.75vw; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 360px) { .board__item-bottom-desc { margin-top: 8.3333333333px; margin-top: 2.6041666667vw; } } @media (max-width: 360px) { .board__item-bottom-desc { font-size: 12px; font-size: 3.75vw; } } .board__item-bottom-info { display: flex; width: 100%; justify-content: space-between; margin-top: 28px; margin-top: 3.6458333333vw; font-size: 26.4px; font-size: 3.4375vw; } @media (max-width: 360px) { .board__item-bottom-info { margin-top: 11.6666666667px; margin-top: 3.6458333333vw; } } @media (max-width: 360px) { .board__item-bottom-info { font-size: 11px; font-size: 3.4375vw; } } .board__item-bottom-date { color: #888; } .board__item-info { display: flex; justify-content: space-between; color: #888; } .board__item-info-status { font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .board__item-info-status { font-size: 12px; font-size: 3.75vw; } } .board__item-info-status span { color: #888 !important; } .board__item-info-date { font-size: 26.4px; font-size: 3.4375vw; } @media (max-width: 360px) { .board__item-info-date { font-size: 11px; font-size: 3.4375vw; } } .board__item-category { margin-top: 28px; margin-top: 3.6458333333vw; line-height: 1; font-size: 28.8px; font-size: 3.75vw; font-weight: bold; color: #222; } @media (max-width: 360px) { .board__item-category { margin-top: 11.6666666667px; margin-top: 3.6458333333vw; } } @media (max-width: 360px) { .board__item-category { font-size: 12px; font-size: 3.75vw; } } .board__item-title { margin-top: 48.8px; margin-top: 6.3541666667vw; line-height: 1; font-size: 28.8px; font-size: 3.75vw; font-weight: bold; color: #222; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } @media (max-width: 360px) { .board__item-title { margin-top: 20.3333333333px; margin-top: 6.3541666667vw; } } @media (max-width: 360px) { .board__item-title { font-size: 12px; font-size: 3.75vw; } } .board__item-content { margin-top: 44px; margin-top: 5.7291666667vw; font-size: 28.8px; font-size: 3.75vw; font-weight: bold; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 360px) { .board__item-content { margin-top: 18.3333333333px; margin-top: 5.7291666667vw; } } @media (max-width: 360px) { .board__item-content { font-size: 12px; font-size: 3.75vw; } } .board__item-btn-open { margin-top: 32px; margin-top: 4.1666666667vw; line-height: 1; font-weight: normal; } @media (max-width: 360px) { .board__item-btn-open { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .board__content { position: relative; padding: 64px 38.4px 112px; padding: 8.3333333333vw 5vw 14.5833333333vw; background-color: #f6f6f6; } @media (max-width: 320px) { .board__content { padding: 26.6666666667px 16px 46.6666666667px; padding: 8.3333333333vw 5vw 14.5833333333vw; } } .board__content--active { display: block !important; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-bottom-color: #eee; border-bottom-style: solid; } @media (max-width: 360px) { .board__content--active { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .board__content--active .board__content { padding-top: 0; } .board__content-btn { position: absolute; left: 0; bottom: 64px; bottom: 8.3333333333vw; padding-left: 38.4px; padding-left: 5vw; padding-right: 38.4px; padding-right: 5vw; display: flex; width: 100%; justify-content: space-between; box-sizing: border-box; } @media (max-width: 360px) { .board__content-btn { bottom: 26.6666666667px; bottom: 8.3333333333vw; } } @media (max-width: 360px) { .board__content-btn { padding-left: 16px; padding-left: 5vw; } } @media (max-width: 360px) { .board__content-btn { padding-right: 16px; padding-right: 5vw; } } .board__content-text { margin-bottom: 32px; margin-bottom: 4.1666666667vw; font-size: 28.8px; font-size: 3.75vw; } @media (max-width: 360px) { .board__content-text { margin-bottom: 13.3333333333px; margin-bottom: 4.1666666667vw; } } @media (max-width: 360px) { .board__content-text { font-size: 12px; font-size: 3.75vw; } } .event-content { padding-bottom: 112px; padding-bottom: 14.5833333333vw; } @media (max-width: 360px) { .event-content { padding-bottom: 46.6666666667px; padding-bottom: 14.5833333333vw; } } .event-view__item { width: 337.6px; width: 43.9583333333vw; height: 200px; height: 26.0416666667vw; margin-left: 14.4px; margin-left: 1.875vw; box-sizing: border-box; } @media (max-width: 360px) { .event-view__item { width: 140.6666666667px; width: 43.9583333333vw; } } @media (max-width: 360px) { .event-view__item { height: 83.3333333333px; height: 26.0416666667vw; } } @media (max-width: 360px) { .event-view__item { margin-left: 6px; margin-left: 1.875vw; } } .event-view__item.slick-active .event-view__item-img { position: relative; border-width: 7.2px; border-width: 0.9375vw; border-color: #fdb812; border-style: solid; } @media (max-width: 360px) { .event-view__item.slick-active .event-view__item-img { border-width: 3px; border-width: 0.9375vw; } } .event-view__item.slick-active .event-view__item-img:before { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: #000; opacity: 0.5; content: ""; } .event-view__item.slick-active .event-view__item-title { padding-top: 24px; padding-top: 3.125vw; font-weight: bold; color: #222; } @media (max-width: 360px) { .event-view__item.slick-active .event-view__item-title { padding-top: 10px; padding-top: 3.125vw; } } .event-view__item-title { padding: 32px 24px 0px 15.2px; padding: 4.1666666667vw 3.125vw 0vw 1.9791666667vw; font-size: 28.8px; font-size: 3.75vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #888; } @media (max-width: 320px) { .event-view__item-title { padding: 13.3333333333px 10px 0px 6.3333333333px; padding: 4.1666666667vw 3.125vw 0vw 1.9791666667vw; } } @media (max-width: 360px) { .event-view__item-title { font-size: 12px; font-size: 3.75vw; } } .event-view__container { margin-top: 80px; margin-top: 10.4166666667vw; padding-left: 38.4px; padding-left: 5vw; } @media (max-width: 360px) { .event-view__container { margin-top: 33.3333333333px; margin-top: 10.4166666667vw; } } @media (max-width: 360px) { .event-view__container { padding-left: 16px; padding-left: 5vw; } } .event-view__detail { margin-top: 96px; margin-top: 12.5vw; } @media (max-width: 360px) { .event-view__detail { margin-top: 40px; margin-top: 12.5vw; } } .event-view__btn { margin-top: 80px; margin-top: 10.4166666667vw; padding: 0px 38.4px; padding: 0vw 5vw; } @media (max-width: 360px) { .event-view__btn { margin-top: 33.3333333333px; margin-top: 10.4166666667vw; } } @media (max-width: 320px) { .event-view__btn { padding: 0px 16px; padding: 0vw 5vw; } } .event-sns { padding: 0px 38.4px; padding: 0vw 5vw; } @media (max-width: 320px) { .event-sns { padding: 0px 16px; padding: 0vw 5vw; } } .event-sns__list { font-size: 0; } .event-sns__item { display: inline-block; width: 96px; width: 12.5vw; height: 96px; height: 12.5vw; margin-left: 52px; margin-left: 6.7708333333vw; background-size: contain; background-repeat: no-repeat; } @media (max-width: 360px) { .event-sns__item { width: 40px; width: 12.5vw; } } @media (max-width: 360px) { .event-sns__item { height: 40px; height: 12.5vw; } } @media (max-width: 360px) { .event-sns__item { margin-left: 21.6666666667px; margin-left: 6.7708333333vw; } } .event-sns__item--facebook { background-image: url("/design/skinfood/mobile_skinfood/images/icon/icon_fb.png"); } .event-sns__item--instagram { background-image: url("/design/skinfood/mobile_skinfood/images/icon/icon_insta.png"); } .event-sns__item--kakao { background-image: url("/design/skinfood/mobile_skinfood/images/icon/icon_kakao.png"); } .event-sns__item--twitter { background-image: url("/design/skinfood/mobile_skinfood/images/icon/icon_twitter.png"); } .event-sns__item--link { background-image: url("/design/skinfood/mobile_skinfood/images/icon/icon_url.png"); } .event-sns__item:first-child { margin-left: 0; } .stamp-event { width: 100%; padding: 112px 38.4px; padding: 14.5833333333vw 5vw; background: url("/design/skinfood/mobile_skinfood/images/bg/bg_stamp_event.png") no-repeat; background-size: cover; box-sizing: border-box; } @media (max-width: 320px) { .stamp-event { padding: 46.6666666667px 16px; padding: 14.5833333333vw 5vw; } } .stamp-event__title { font-size: 28.8px; font-size: 3.75vw; font-weight: bold; color: #222; } @media (max-width: 360px) { .stamp-event__title { font-size: 12px; font-size: 3.75vw; } } .stamp-event__date { margin-top: 18.4px; margin-top: 2.3958333333vw; font-size: 26.4px; font-size: 3.4375vw; color: #888; line-height: 1; } @media (max-width: 360px) { .stamp-event__date { margin-top: 7.6666666667px; margin-top: 2.3958333333vw; } } @media (max-width: 360px) { .stamp-event__date { font-size: 11px; font-size: 3.4375vw; } } .stamp-event__content--bottom { margin-top: 112px; margin-top: 14.5833333333vw; } @media (max-width: 360px) { .stamp-event__content--bottom { margin-top: 46.6666666667px; margin-top: 14.5833333333vw; } } .stamp-event__content--bg { margin-top: 64px; margin-top: 8.3333333333vw; margin-bottom: 48px; margin-bottom: 6.25vw; background: url("/design/skinfood/mobile_skinfood/images/bg/bg_calandar.png") no-repeat; background-size: cover; } @media (max-width: 360px) { .stamp-event__content--bg { margin-top: 26.6666666667px; margin-top: 8.3333333333vw; } } @media (max-width: 360px) { .stamp-event__content--bg { margin-bottom: 20px; margin-bottom: 6.25vw; } } .stamp-event__content-top { padding: 64px 0px; padding: 8.3333333333vw 0vw; text-align: center; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-bottom-style: solid; border-bottom-color: #e8d0ab; } @media (max-width: 320px) { .stamp-event__content-top { padding: 26.6666666667px 0px; padding: 8.3333333333vw 0vw; } } @media (max-width: 360px) { .stamp-event__content-top { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .stamp-event__content-desc { font-size: 26.4px; font-size: 3.4375vw; color: #888; line-height: 1; } @media (max-width: 360px) { .stamp-event__content-desc { font-size: 11px; font-size: 3.4375vw; } } .stamp-event__content-title { margin-top: 18.4px; margin-top: 2.3958333333vw; font-size: 52.8px; font-size: 6.875vw; color: #222; font-weight: bold; } @media (max-width: 360px) { .stamp-event__content-title { margin-top: 7.6666666667px; margin-top: 2.3958333333vw; } } @media (max-width: 360px) { .stamp-event__content-title { font-size: 22px; font-size: 6.875vw; } } .stamp-event__content-info { margin-top: 16px; margin-top: 2.0833333333vw; font-size: 26.4px; font-size: 3.4375vw; line-height: 44.8px; line-height: 5.8333333333vw; color: #222; } @media (max-width: 360px) { .stamp-event__content-info { margin-top: 6.6666666667px; margin-top: 2.0833333333vw; } } @media (max-width: 360px) { .stamp-event__content-info { font-size: 11px; font-size: 3.4375vw; } } @media (max-width: 360px) { .stamp-event__content-info { line-height: 18.6666666667px; line-height: 5.8333333333vw; } } .stamp-event__benefit { padding: 64px 48px; padding: 8.3333333333vw 6.25vw; } @media (max-width: 320px) { .stamp-event__benefit { padding: 26.6666666667px 20px; padding: 8.3333333333vw 6.25vw; } } .stamp-event__benefit--small { padding: 64px 72px; padding: 8.3333333333vw 9.375vw; } @media (max-width: 320px) { .stamp-event__benefit--small { padding: 26.6666666667px 30px; padding: 8.3333333333vw 9.375vw; } } .stamp-event__benefit--small .stamp-event__benefit-item { position: relative; width: 200px; width: 26.0416666667vw; height: 200px; height: 26.0416666667vw; padding: 0; background-color: #f6f6f6; vertical-align: top; } @media (max-width: 360px) { .stamp-event__benefit--small .stamp-event__benefit-item { width: 83.3333333333px; width: 26.0416666667vw; } } @media (max-width: 360px) { .stamp-event__benefit--small .stamp-event__benefit-item { height: 83.3333333333px; height: 26.0416666667vw; } } .stamp-event__benefit--small .stamp-event__benefit-item-inner { margin-top: 50%; transform: translateY(-50%); } .stamp-event__benefit--small .stamp-event__benefit-item + .stamp-event__benefit--small .stamp-event__benefit-item { position: relative; margin-left: 144px; margin-left: 18.75vw; } @media (max-width: 360px) { .stamp-event__benefit--small .stamp-event__benefit-item + .stamp-event__benefit--small .stamp-event__benefit-item { margin-left: 60px; margin-left: 18.75vw; } } .stamp-event__benefit--small .stamp-event__benefit-item + .stamp-event__benefit--small .stamp-event__benefit-item::before { position: absolute; top: 0; bottom: 0; left: -72px; left: -9.375vw; margin: auto; display: inline-block; width: 2.4px; width: 0.3125vw; height: 25.6px; height: 3.3333333333vw; margin-right: 51.2px; margin-right: 6.6666666667vw; background-color: #e8d0ab; content: ""; } @media (max-width: 360px) { .stamp-event__benefit--small .stamp-event__benefit-item + .stamp-event__benefit--small .stamp-event__benefit-item::before { left: -30px; left: -9.375vw; } } @media (max-width: 360px) { .stamp-event__benefit--small .stamp-event__benefit-item + .stamp-event__benefit--small .stamp-event__benefit-item::before { width: 1px; width: 0.3125vw; } } @media (max-width: 360px) { .stamp-event__benefit--small .stamp-event__benefit-item + .stamp-event__benefit--small .stamp-event__benefit-item::before { height: 10.6666666667px; height: 3.3333333333vw; } } @media (max-width: 360px) { .stamp-event__benefit--small .stamp-event__benefit-item + .stamp-event__benefit--small .stamp-event__benefit-item::before { margin-right: 21.3333333333px; margin-right: 6.6666666667vw; } } .stamp-event__benefit-item { display: inline-block; width: 240px; width: 31.25vw; height: 240px; height: 31.25vw; padding: 56px 0px; padding: 7.2916666667vw 0vw; border-radius: 50%; background-color: #f7eee0; text-align: center; box-sizing: border-box; } @media (max-width: 360px) { .stamp-event__benefit-item { width: 100px; width: 31.25vw; } } @media (max-width: 360px) { .stamp-event__benefit-item { height: 100px; height: 31.25vw; } } @media (max-width: 320px) { .stamp-event__benefit-item { padding: 23.3333333333px 0px; padding: 7.2916666667vw 0vw; } } .stamp-event__benefit-item + .stamp-event__benefit-item { position: relative; margin-left: 102.4px; margin-left: 13.3333333333vw; } @media (max-width: 360px) { .stamp-event__benefit-item + .stamp-event__benefit-item { margin-left: 42.6666666667px; margin-left: 13.3333333333vw; } } .stamp-event__benefit-item + .stamp-event__benefit-item::before { position: absolute; top: 0; bottom: 0; left: -51.2px; left: -6.6666666667vw; margin: auto; display: inline-block; width: 2.4px; width: 0.3125vw; height: 25.6px; height: 3.3333333333vw; margin-right: 51.2px; margin-right: 6.6666666667vw; background-color: #e8d0ab; content: ""; } @media (max-width: 360px) { .stamp-event__benefit-item + .stamp-event__benefit-item::before { left: -21.3333333333px; left: -6.6666666667vw; } } @media (max-width: 360px) { .stamp-event__benefit-item + .stamp-event__benefit-item::before { width: 1px; width: 0.3125vw; } } @media (max-width: 360px) { .stamp-event__benefit-item + .stamp-event__benefit-item::before { height: 10.6666666667px; height: 3.3333333333vw; } } @media (max-width: 360px) { .stamp-event__benefit-item + .stamp-event__benefit-item::before { margin-right: 21.3333333333px; margin-right: 6.6666666667vw; } } .stamp-event__benefit-title { font-size: 33.6px; font-size: 4.375vw; color: #ff593e; line-height: 1; font-weight: bold; } @media (max-width: 360px) { .stamp-event__benefit-title { font-size: 14px; font-size: 4.375vw; } } .stamp-event__benefit-title--small { font-size: 26.4px; font-size: 3.4375vw; color: #ff593e; } @media (max-width: 360px) { .stamp-event__benefit-title--small { font-size: 11px; font-size: 3.4375vw; } } .stamp-event__benefit-info { margin-top: 16px; margin-top: 2.0833333333vw; font-size: 28.8px; font-size: 3.75vw; line-height: 44.8px; line-height: 5.8333333333vw; } @media (max-width: 360px) { .stamp-event__benefit-info { margin-top: 6.6666666667px; margin-top: 2.0833333333vw; } } @media (max-width: 360px) { .stamp-event__benefit-info { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .stamp-event__benefit-info { line-height: 18.6666666667px; line-height: 5.8333333333vw; } } .stamp-event__benefit-info--bold { font-weight: bold; } .stamp-event__benefit-info b { display: block; } .stamp-event__calendar { padding: 0px 32px 64px; padding: 0vw 4.1666666667vw 8.3333333333vw; } @media (max-width: 320px) { .stamp-event__calendar { padding: 0px 13.3333333333px 26.6666666667px; padding: 0vw 4.1666666667vw 8.3333333333vw; } } .stamp-event__row { display: flex; justify-content: space-between; margin-top: 32px; margin-top: 4.1666666667vw; } @media (max-width: 360px) { .stamp-event__row { margin-top: 13.3333333333px; margin-top: 4.1666666667vw; } } .stamp-event__row:first-child { margin-top: 0; } .stamp-event__col { width: 97.6px; width: 12.7083333333vw; height: 97.6px; height: 12.7083333333vw; line-height: 97.6px; line-height: 12.7083333333vw; border-radius: 50%; box-sizing: border-box; background-color: #f5e9d7; font-size: 28.8px; font-size: 3.75vw; text-align: center; } @media (max-width: 360px) { .stamp-event__col { width: 40.6666666667px; width: 12.7083333333vw; } } @media (max-width: 360px) { .stamp-event__col { height: 40.6666666667px; height: 12.7083333333vw; } } @media (max-width: 360px) { .stamp-event__col { line-height: 40.6666666667px; line-height: 12.7083333333vw; } } @media (max-width: 360px) { .stamp-event__col { font-size: 12px; font-size: 3.75vw; } } .stamp-event__col--active { font-weight: bold; background-color: #fdb812; } .stamp-event__bottom-title { font-size: 33.6px; font-size: 4.375vw; font-weight: bold; text-align: center; } @media (max-width: 360px) { .stamp-event__bottom-title { font-size: 14px; font-size: 4.375vw; } } .myreview-content { margin-top: 48px; margin-top: 6.25vw; margin-bottom: 112px; margin-bottom: 14.5833333333vw; } @media (max-width: 360px) { .myreview-content { margin-top: 20px; margin-top: 6.25vw; } } @media (max-width: 360px) { .myreview-content { margin-bottom: 46.6666666667px; margin-bottom: 14.5833333333vw; } } .myreview-content--border { border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-bottom-style: solid; border-bottom-color: #eee; } @media (max-width: 360px) { .myreview-content--border { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .mygdqna-content { margin-bottom: 112px; margin-bottom: 14.5833333333vw; } @media (max-width: 360px) { .mygdqna-content { margin-bottom: 46.6666666667px; margin-bottom: 14.5833333333vw; } } .myqna-content { padding: 80px 38.4px; padding: 10.4166666667vw 5vw; } @media (max-width: 320px) { .myqna-content { padding: 33.3333333333px 16px; padding: 10.4166666667vw 5vw; } } .myqna-goods-popup { position: absolute; max-height: 984px; max-height: 128.125vw; } @media (max-width: 360px) { .myqna-goods-popup { max-height: 410px; max-height: 128.125vw; } } .myqna-goods-popup__dimed { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1002; background-color: #000; opacity: 0.7; } .myqna-goods-popup .popup-goods { border-width: 2.4px; border-width: 0.3125vw; border-style: solid; border-color: #ddd; padding: 0px 32px; padding: 0vw 4.1666666667vw; max-height: 720px; max-height: 93.75vw; overflow-y: auto; } @media (max-width: 360px) { .myqna-goods-popup .popup-goods { border-width: 1px; border-width: 0.3125vw; } } @media (max-width: 320px) { .myqna-goods-popup .popup-goods { padding: 0px 13.3333333333px; padding: 0vw 4.1666666667vw; } } @media (max-width: 360px) { .myqna-goods-popup .popup-goods { max-height: 300px; max-height: 93.75vw; } } .myqna-goods-popup .popup-goods__item { display: flex; width: 100%; padding: 32px 0px; padding: 4.1666666667vw 0vw; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-bottom-style: solid; border-bottom-color: #ddd; } @media (max-width: 320px) { .myqna-goods-popup .popup-goods__item { padding: 13.3333333333px 0px; padding: 4.1666666667vw 0vw; } } @media (max-width: 360px) { .myqna-goods-popup .popup-goods__item { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .myqna-goods-popup .popup-goods__item:first-child { padding-top: 48px; padding-top: 6.25vw; } @media (max-width: 360px) { .myqna-goods-popup .popup-goods__item:first-child { padding-top: 20px; padding-top: 6.25vw; } } .myqna-goods-popup .popup-goods__item-img { width: 200px; width: 26.0416666667vw; } @media (max-width: 360px) { .myqna-goods-popup .popup-goods__item-img { width: 83.3333333333px; width: 26.0416666667vw; } } .myqna-goods-popup .popup-goods__item-info { flex: 1; padding-left: 54.4px; padding-left: 7.0833333333vw; } @media (max-width: 360px) { .myqna-goods-popup .popup-goods__item-info { padding-left: 22.6666666667px; padding-left: 7.0833333333vw; } } .myqna-goods-popup .popup-goods__item-name { display: block; margin-top: 16px; margin-top: 2.0833333333vw; font-size: 28.8px; font-size: 3.75vw; font-weight: bold; color: #222; } @media (max-width: 360px) { .myqna-goods-popup .popup-goods__item-name { margin-top: 6.6666666667px; margin-top: 2.0833333333vw; } } @media (max-width: 360px) { .myqna-goods-popup .popup-goods__item-name { font-size: 12px; font-size: 3.75vw; } } .myqna-goods-popup .popup-goods__item-price { display: block; padding-top: 28px; padding-top: 3.6458333333vw; font-size: 28.8px; font-size: 3.75vw; color: #222; } @media (max-width: 360px) { .myqna-goods-popup .popup-goods__item-price { padding-top: 11.6666666667px; padding-top: 3.6458333333vw; } } @media (max-width: 360px) { .myqna-goods-popup .popup-goods__item-price { font-size: 12px; font-size: 3.75vw; } } .myqna-goods-popup .popup__content--goods-select { height: auto; padding-top: 80px; padding-top: 10.4166666667vw; } @media (max-width: 360px) { .myqna-goods-popup .popup__content--goods-select { padding-top: 33.3333333333px; padding-top: 10.4166666667vw; } } /*# sourceMappingURL=mypage_ahn.css.map */ .content-event { margin-bottom: 112px; margin-bottom: 14.5833333333vw; overflow: hidden; margin-top: 48px; margin-top: 6.25vw; } @media (max-width: 360px) { .content-event { margin-bottom: 46.6666666667px; margin-bottom: 14.5833333333vw; } } @media (max-width: 360px) { .content-event { margin-top: 20px; margin-top: 6.25vw; } } .content-event__item { width: 656px; width: 85.4166666667vw; padding-left: 32px; padding-left: 4.1666666667vw; padding-bottom: 80px; padding-bottom: 10.4166666667vw; } @media (max-width: 360px) { .content-event__item { width: 273.3333333333px; width: 85.4166666667vw; } } @media (max-width: 360px) { .content-event__item { padding-left: 13.3333333333px; padding-left: 4.1666666667vw; } } @media (max-width: 360px) { .content-event__item { padding-bottom: 33.3333333333px; padding-bottom: 10.4166666667vw; } } .content-event__item.slick-active .content-event__info { display: block; } .content-event__info { display: none; } .content-event__title { margin-top: 48px; margin-top: 6.25vw; font-size: 28.8px; font-size: 3.75vw; line-height: 44.8px; line-height: 5.8333333333vw; font-weight: bold; color: #222; } @media (max-width: 360px) { .content-event__title { margin-top: 20px; margin-top: 6.25vw; } } @media (max-width: 360px) { .content-event__title { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .content-event__title { line-height: 18.6666666667px; line-height: 5.8333333333vw; } } .content-event__desc { margin-top: 21.6px; margin-top: 2.8125vw; font-size: 28.8px; font-size: 3.75vw; line-height: 44.8px; line-height: 5.8333333333vw; color: #888; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 360px) { .content-event__desc { margin-top: 9px; margin-top: 2.8125vw; } } @media (max-width: 360px) { .content-event__desc { font-size: 12px; font-size: 3.75vw; } } @media (max-width: 360px) { .content-event__desc { line-height: 18.6666666667px; line-height: 5.8333333333vw; } } .content-event__btn { margin-top: 40px; margin-top: 5.2083333333vw; } @media (max-width: 360px) { .content-event__btn { margin-top: 16.6666666667px; margin-top: 5.2083333333vw; } } .content-event__indicator { margin-top: 64px; margin-top: 8.3333333333vw; } @media (max-width: 360px) { .content-event__indicator { margin-top: 26.6666666667px; margin-top: 8.3333333333vw; } } /*# sourceMappingURL=event.css.map */ .ui-dialog .ui-widget-header.ui-dialog-titlebar { position: relative; height: 102.4px; height: 13.3333333333vw; line-height: 102.4px; line-height: 13.3333333333vw; background: #fff !important; padding-left: 0; text-align: center; border-bottom-width: 2.4px; border-bottom-width: 0.3125vw; border-bottom-color: #ddd; border-bottom-style: solid; } @media (max-width: 360px) { .ui-dialog .ui-widget-header.ui-dialog-titlebar { height: 42.6666666667px; height: 13.3333333333vw; } } @media (max-width: 360px) { .ui-dialog .ui-widget-header.ui-dialog-titlebar { line-height: 42.6666666667px; line-height: 13.3333333333vw; } } @media (max-width: 360px) { .ui-dialog .ui-widget-header.ui-dialog-titlebar { border-bottom-width: 1px; border-bottom-width: 0.3125vw; } } .ui-dialog .ui-widget-header.ui-dialog-titlebar .ui-dialog-title { line-height: 1; float: none; margin: 0; color: #222; font-size: 33.6px; font-size: 4.375vw; font-weight: bold; } @media (max-width: 360px) { .ui-dialog .ui-widget-header.ui-dialog-titlebar .ui-dialog-title { font-size: 14px; font-size: 4.375vw; } } .ui-dialog .ui-widget-header.ui-dialog-titlebar a.ui-dialog-titlebar-close { top: 0; bottom: 0; right: 38.4px; right: 5vw; width: 39.2px; width: 5.1041666667vw; height: 38.4px; height: 5vw; margin: auto; background-image: url("/design/skinfood/mobile_skinfood/images/icon/icon_popup_close.png"); background-size: contain; } @media (max-width: 360px) { .ui-dialog .ui-widget-header.ui-dialog-titlebar a.ui-dialog-titlebar-close { right: 16px; right: 5vw; } } @media (max-width: 360px) { .ui-dialog .ui-widget-header.ui-dialog-titlebar a.ui-dialog-titlebar-close { width: 16.3333333333px; width: 5.1041666667vw; } } @media (max-width: 360px) { .ui-dialog .ui-widget-header.ui-dialog-titlebar a.ui-dialog-titlebar-close { height: 16px; height: 5vw; } } .ui-dialog .ui-dialog-content { padding: 0; } /*# sourceMappingURL=jquery-ui-custom.css.map */ /* brand_story style */ /* story_list */ /* skinfood_story */ /* brand_sns style */ /* instagram */ /* youtube */ /* .mob_brand-sns_tab_youtube--video-more { padding-top: 4.166vw; color: #222222; font-family: "Yoon Gothic 740"; font-size: 3.4375vw; line-height: 5.833vw; letter-spacing: -0.034375vw; } */ /* facebook */ .mob_brand-story-introduce { width: 100%; height: 106.875vw; text-align: center; padding-top: 16.979vw; } .mob_brand-story-introduce .mob_brand-story-introduce--title { width: 51.145vw; height: 17.395vw; margin: 0 auto; } .mob_brand-story-introduce .mob_brand-story-introduce--desc { margin-top: 4.0625vw; color: #222222; font-family: "YoonGothic"; font-size: 3.75vw; line-height: 5.833vw; letter-spacing: -0.0375vw; } .mob_brand-story-introduce .mob_brand-story-introduce--title-en { margin-top: 10.3125vw; color: #222222; font-family: "YoonGothic"; font-size: 4.8vw; font-weight: bold; line-height: 9.375vw; letter-spacing: -0.04375vw; } .mob_brand-story-introduce .mob_brand-story-introduce--desc-en { margin-top: 0.0625vw; color: #222222; font-family: "YoonGothic"; font-size: 3.75vw; line-height: 5.833vw; letter-spacing: -0.0375vw; } .mob_brand-story-introduce--slide-info { height: 88.4375vw; padding: 14.479vw 0 0 5.208vw; text-align: left; background: url("/design/skinfood/mobile_skinfood/images/brand/mob_bg_brand-story_img02.png") no-repeat; background-position: center; background-size: cover; } .mob_brand-story-introduce--slide-info .mob_brand-story-introduce--slide-info--title { width: 39.062vw; height: 15.312vw; margin-bottom: 8.125vw; } .mob_brand-story-introduce--slide-info .mob_brand-story-introduce--slide-info--desc { color: #222222; font-family: "YoonGothic"; font-size: 3.5vw; line-height: 5.729vw; letter-spacing: -0.0375vw; } .mob_brand-story-introduce--slide .mob_brand-story-introduce--slide01 { height: 69.583vw; padding: 56.145vw 0 0 5vw; text-align: left; background: url("/design/skinfood/mobile_skinfood/images/brand/mob_bg_brand-story_img03.png") no-repeat; background-position: center; background-size: cover; } .mob_brand-story-introduce--slide .mob_brand-story-introduce--slide01--title { color: #222222; font-family: "YoonGothic"; font-size: 4.791vw; font-weight: bold; line-height: 5.729vw; letter-spacing: -0.047vw; } .mob_brand-story-introduce--slide .mob_brand-story-introduce--slide01--desc { margin-top: 8.125vw; color: #222222; font-family: "YoonGothic"; font-size: 3.75vw; line-height: 5.729vw; letter-spacing: -0.0375vw; } .mob_brand-story-introduce--slide .mob_brand-story-introduce--slide02 { margin-bottom: -11vw; height: 90.583vw; padding: 56.145vw 0 0 5vw; text-align: left; background: url("/design/skinfood/mobile_skinfood/images/brand/mob_bg_brand-story_img04.png") no-repeat; background-size: cover; } .mob_brand-story-introduce--slide .mob_brand-story-introduce--slide02--desc { margin-top: 28.583vw; color: #222222; font-family: "YoonGothic"; font-size: 3.75vw; line-height: 5.729vw; letter-spacing: -0.0375vw; } .mob_brand-story-history { width: 100%; height: 311.041vw; padding: 12.187vw 0 0 0; text-align: left; background: url("/design/skinfood/mobile_skinfood/images/brand/mob_bg_brand-story_img05.png") no-repeat; background-position: center; background-size: cover; } .mob_brand-story-history .mob_brand-story-history--title { margin-left: 5vw; margin-bottom: 5vw; color: #222222; font-family: "YoonGothic"; font-size: 6.25vw; font-weight: bold; line-height: 9.375vw; letter-spacing: -0.0625vw; } .mob_brand-story-history .mob_brand-story_history--tab { margin-bottom: 6.25vw; } .mob_brand-story-history .mob_brand-story_history--tab li { display: inline-block; } .mob_brand-story-history .mob_brand-story-history--tab01 { margin-left: 17.791vw; background-color: #fff; color: #222222; font-size: 4.375vw; line-height: 5.833vw; letter-spacing: -0.0125vw; } .mob_brand-story-history .mob_brand-story-history--tab02 { background-color: #fff; color: #888888; font-size: 4.375vw; line-height: 5.833vw; letter-spacing: -0.0125vw; } .mob_brand-story-history .mob_brand-story_history--list02::before { color: #888888; content: "|"; padding: 0 4.625vw 0 4.4375vw; } .button.active { position: relative; z-index: 1; color: #222; font-weight: bold; } .button.active::after { position: absolute; bottom: 0; left: 0; display: inline-block; width: 100%; height: 2.6041666667vw; background-color: #fdb812; content: ""; z-index: -1; } .mob_story-list_title { width: 72.687vw; margin: 10.312vw 0 0 5vw; } .mob_story-list_title--title { color: #222222; font-family: "YoonGothic"; font-size: 6.25vw; line-height: 9.375vw; letter-spacing: -0.0625vw; } .mob_story-list_title--desc { margin-top: 6.145vw; color: #222222; font-family: "Yoon Gothic 740"; font-size: 3.75vw; line-height: 5.833vw; letter-spacing: -0.0375vw; } .mob_story-list_content { margin: 8.333vw 0 14.583vw 0; } .mob_story-list_content--list { height: 44.375vw; border-top: 0.104vw solid #eee; border-bottom: 0.104vw solid #eee; } .mob_story-list_content--img { float: left; padding: 6.25vw 0 0 5vw; width: 31.25vw; height: 31.25vw; } .mob_story-list_content--info { display: inline-block; width: 51.52vw; height: 17.916vw; padding: 8.125vw 0 0 6.25vw; word-break: break-all; } .mob_story-list_content--title { display: inline-block; margin-bottom: 4.166vw; color: #222222; font-family: "YoonGothic"; font-size: 4.375vw; line-height: 5.833vw; letter-spacing: -0.109vw; } .mob_story-list_content--description { color: #222222; font-family: "YoonGothic"; font-size: 3.75vw; line-height: 5.833vw; letter-spacing: -0.093vw; } .mob_skinfood-story_main--title { margin: 10vw 0 0 5vw; font-size: 6.25vw; font-style: normal; letter-spacing: normal; line-height: 9.375vw; text-align: left; } .mob_skinfood-story_main--desc { margin: 6.145vw 0 6.145vw 5vw; font-size: 3.75vw; font-style: normal; letter-spacing: normal; line-height: 5.833vw; text-align: left; } .mob_skinfood-story_slide { margin: 10.416vw 0 12.083vw 5vw; } .mob_skinfood-story_slide img { display: block !important; width: 43.958vw; height: 26.041vw; margin: 2.083vw 2.083vw 0 0; } .mob_skinfood-story_slide--title { width: 42.187vw; height: 4.854vw; margin: 4.583vw 0 0 2.083vw; color: #888888; font-family: "YoonGothic"; font-size: 3.75vw; line-height: 4.997vw; letter-spacing: -0.0375vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mob_skinfood-story_slide--title.active { margin: 4.583vw 0 0 2.083vw; color: #212121; font-family: "YoonGothic"; font-size: 3.75vw; font-weight: bold; line-height: 4.997vw; letter-spacing: -0.0375vw; } .mob_skinfood-story_product { margin-top: 12.083vw; width: 100%; height: 141.145vw; background: url("/design/skinfood/mobile_skinfood/images/brand/mob_bg_skinfood-story_img01.png") no-repeat; background-position: center; background-size: cover; } .mob_skinfood-story_product--title { padding: 15.52vw 0 0 13.958vw; color: #222222; font-family: "YoonGothic"; font-size: 6.25vw; line-height: 5.833vw; letter-spacing: 0.0625vw; } .mob_skinfood-story_product--more { padding: 102.916vw 0 0 30.312vw; color: #222222; font-family: "YoonGothic"; font-size: 3.75vw; line-height: 5vw; letter-spacing: -0.0375vw; } .mob_skinfood-story_info { width: 100%; height: 130.104vw; background: url("/design/skinfood/mobile_skinfood/images/brand/mob_bg_skinfood-story_img02.png") no-repeat; background-position: center; background-size: cover; } .mob_skinfood-story_info--title { width: 76.041vw; height: 11.562vw; margin: 0 auto; padding-top: 10.416vw; } .mob_skinfood-story_info--more { width: 89.895vw; height: 28.541vw; margin: 0 auto; padding-top: 8.229vw; } .mob_skinfood-story_share--title { width: 18.75vw; height: 5.312vw; padding: 15.52vw 0 0 5vw; } .mob_skinfood-story_share--icon { display: inline-block; width: auto; height: 12.604vw; padding: 6.354vw 0 0 5vw; } .mob_skinfood-story_share--item { float: left; width: 12.604vw; height: 12.604vw; } .mob_skinfood-story_share--list { width: 90vw; height: 12.083vw; margin: 14.895vw auto 18.437vw auto; text-align: center; line-height: 12.083vw; background-color: #222222; } .mob_skinfood-story_share--list a { color: #ffffff; font-family: "YoonGothic"; font-size: 3.75vw; line-height: 5.833vw; letter-spacing: -0.0375vw; } .mob_brand-sns_info { padding: 0 5vw 0 5vw; word-break: break-all; } .mob_brand-sns_info--title { padding-top: 10.729vw; color: #222222; font-family: "YoonGothic"; font-size: 6.25vw; line-height: 9.375vw; letter-spacing: -0.0625vw; } .mob_brand-sns_info--desc { padding-top: 6.25vw; color: #222222; font-family: "YoonGothic"; font-size: 3.75vw; line-height: 5.833vw; letter-spacing: 0.0375vw; } .mob_brand-sns_tab { margin: 10.208vw 0 0 5vw; } .mob_brand-sns_tab ul li { display: inline-block; padding-right: 8.333vw; color: #222222; font-family: "YoonGothic"; font-size: 3.75vw; line-height: 5.833vw; letter-spacing: 0.0375vw; } .mob_brand-sns_tab ul li .mob_brand-sns_tab--button { background-color: #fff; color: #888888; font-family: "YoonGothic"; font-size: 18px; font-weight: 400; line-height: 45px; letter-spacing: -0.18px; } .mob_brand-sns_tab ul li .mob_brand-sns_tab--button.active { background-color: none; color: #222222; font-family: "YoonGothic"; font-size: 18px; font-weight: bold; line-height: 45px; letter-spacing: -0.18px; border-bottom: 5px solid #000; } .mob_brand-sns_tab--line { width: 100%; height: 0.312vw; background-color: #eeeeee; border: 0; margin: 0 0 8.229vw 0; } .mob_brand-sns_tab--title { padding-left: 5vw; color: #222222; font-family: "YoonGothic"; font-size: 3.75vw; line-height: 5.833vw; letter-spacing: 0.0375vw; } .mob_brand-sns_tab_instagram--content { height: 228.125vw; margin: 4.166vw 0 14.583vw 0; padding-left: 5vw; } .mob_brand-sns_tab_instagram--content li { display: inline-block; } .mob_brand-sns_tab_instagram--content img { margin: 2.083vw 2.083vw 0 0; float: left; width: 43.958vw; height: 43.958vw; } .mob_brand-sns_tab_instagram--item { background-color: #fff; } .mob_brand-sns_instagram--popup-header { width: 100%; height: 13.541vw; } .mob_brand-sns_instagram--popup-title { margin-left: 35vw; display: inline-block; font-size: 4.375vw; line-height: 13.541vw; text-align: center; font-weight: bold; font-style: normal; letter-spacing: normal; } .mob_brand-sns_instagram--popup-desc { margin: 10.416vw 5.208vw; } .mob_brand-sns_instagram--popup-desc_title { font-size: 3.75vw; font-weight: bold; font-style: normal; letter-spacing: normal; line-height: 5.833vw; } .mob_brand-sns_instagram--popup-desc_info { font-size: 3.75vw; font-weight: 4000; font-style: normal; letter-spacing: normal; line-height: 5.833vw; } .mob_brand-sns_instagram--popup-desc_hastag { font-size: 3.75vw; font-weight: 400; font-style: normal; letter-spacing: normal; line-height: 5.833vw; } .mob_brand-sns_instagram--popup-more { width: 100%; height: 14.583vw; margin-top: 10.416vw; background-color: #222222; text-align: center; line-height: 14.583vw; font-size: 4.062vw; font-weight: bold; font-style: normal; letter-spacing: normal; } .mob_brand-sns_tab_youtube--content { margin: 4.166vw auto 0 5vw; } .mob_brand-sns_tab_youtube--video { width: 90vw; } .mob_brand-sns_tab_youtube--video-title { padding-top: 9.479vw; color: #222222; font-family: "YoonGothic"; font-size: 3.75vw; line-height: 5.833vw; letter-spacing: -0.0375vw; } .mob_brand-sns_tab_youtube--video-info { display: inline-block; padding-top: 3.541vw; color: #222222; font-family: "Yoon Gothic 780"; font-size: 3.75vw; line-height: 5.833vw; } .mob_brand-sns_tab_youtube--video-info::before { width: 0.3125vw; height: 3.333vw; background-color: #eeeeee; } .mob_brand-sns_tab_youtube--video-date { display: inline-block; color: #888888; font-family: "Myriad Pro"; font-size: 3.75vw; line-height: 5.833vw; letter-spacing: -0.0375vw; } .mob_brand-sns_tab_youtube--video-slide { margin: 4.166vw 0 14.583vw 0; height: 98.25vw; } .more_btn { padding-top: 4.166vw; color: #222222; font-family: "Yoon Gothic 740"; font-size: 3.4375vw; line-height: 5.833vw; letter-spacing: -0.034375vw; } .mob_brand-sns_tab_facebook--content { margin: 4.166vw auto 14.479vw auto; width: 67vw; } .mob_brand-sns_tab_facebook--content img { width: 90vw; height: 90vw; } /*# sourceMappingURL=brand.css.map */ img { max-width:100%; } button { border:None; cursor:pointer; } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow-x: hidden; overflow-y: auto; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; /* display: block; */ display: flex; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; /* float: left; */ height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; overflow:hidden; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .slick-slide img { display:inline; } .slider_before_loading { display:none !important; } .slick-vertical .slick-slide { border:none; } .slick-list { z-index:1; } .slick-arrow { position:absolute; top:calc( 50% - 25px ); z-index:20; overflow:hidden; text-indent:-999px; width:50px; height:50px; border-radius:50%; background-color:#fff; background-repeat:no-repeat; background-size:30%; outline:none; transition:all 0.4s; } .slick-slider .slick-arrow { opacity:0; } .slick-slider:hover .slick-arrow { opacity:0.4; } .slick-slider:hover .slick-arrow:hover { opacity:0.8; } .slick-prev { left:20px; background-image:url('/design/skinfood/mobile_skinfood/images/arrow_left.gif'); background-position:42% center; } .slick-next { right:20px; background-image:url('/design/skinfood/mobile_skinfood/images/arrow_right.gif'); background-position:58% center; } .slick-slider:hover .slick-prev { transform:translateX( -5px ); } .slick-slider:hover .slick-next { transform:translateX( 5px ); } .slick-dots { position:absolute; z-index:8; bottom:20px; width:100%; text-align:center; font-size:0; line-height:0; } /* .slick-dots>li { display:inline-block; padding:0 3px; } .slick-dots>li>button { box-sizing:border-box; width:16px; height:8px; background:#fff; overflow:hidden; text-indent:-999px; border-radius:4px; opacity:0.6; transition:width 0.2s; box-shadow:0 0 3px #767676; outline:none; } .slick-dots>li.slick-active>button { width:40px; background:#000; box-shadow:0 0 3px #fff; } */ @media only screen and (max-width:1024px) { .slick-dots { bottom:10px; } /* .slick-dots>li>button { width:14px; height:8px; } */ } @media only screen and (max-width:767px) { .slick-slider .slick-arrow, .slick-slider:hover .slick-arrow { opacity:0; visibility:hidden; z-index:-1; } .slick-arrow { top:calc( 50% - 18px ); width:36px; height:36px; } } .sliderA, .sliderB { text-align:center; } .sliderB .sslide { position:relative; } .sliderB .slide_contents { position:absolute; left:0; right:0; top:0; bottom:0; } .sliderB .wrap1 { display:table; width:100%; height:100%; } .sliderB .wrap2 { display:table-cell; vertical-align:middle; text-align:center; font-size:14px; line-height:1.4; color:#000; } .sliderB .text_wrap { display:inline-block; margin:-20px 10px 0; padding:20px 30px 25px; border-radius:12px; background:rgba( 255, 255, 255, 0.2 ); } .sliderB .text1 { font-size:19px; line-height:1.3; font-weight:400; color:#444; } .sliderB .text2 { font-size:66px; line-height:1.2; font-weight:300; letter-spacing:-1px; } .sliderB .text3 { padding-top:5px; font-size:17px; font-weight:400; color:#666; } .sliderB .st1 { font-size:28px; font-weight:400; letter-spacing:-1px; color:#697da6; } .sliderB .sbtns1 { padding-top:20px; } .sliderB .sbtn { box-sizing:border-box; display:inline-block; height:46px; padding:0 25px; min-width:120px; text-align:center; font-size:15px; font-weight:300; line-height:46px; border-radius:43px; } .sliderB .sbtn1 { background-color:#333333; color:#fff; transition:all 0.2s; } .sliderB .sbtn1:hover { background-color:#767676; } .popup_slider { background:#fff; overflow:hidden; } .popup_slider .popup_slider_tab { padding:5px 0; } .popup_slider .pop_tab_list { display:table; width:100%; table-layout:fixed; text-align:center; } .popup_slider .pop_tab_list .sslide { display:table-cell; padding:0 2px; } .popup_slider .pop_tab_list .sslide>a { display:block; height:36px; line-height:37px; font-size:14px; font-weight:400; vertical-align:middle; border:1px #ddd solid; border-radius:2px; } .popup_slider .pop_tab_list .sslide.slick-current>a { border-color:#767676; background-color:#767676; color:#fff; } .popup_slider .slick-arrow { top:-90px; width:46px; height:80px; background-color:#000; background-size:none; opacity:0; } .popup_slider .slick-prev { left:-3px; border-radius:0 10px 10px 0; background-image:url('/design/skinfood/mobile_skinfood/images/icon_arr_prev2.png'); background-position:42% center; } .popup_slider .slick-next { right:-3px; border-radius:10px 0 0 10px; background-image:url('/design/skinfood/mobile_skinfood/images/icon_arr_next2.png'); background-position:58% center; } .popup_slider:hover .popup_slider_tab .slick-arrow { opacity:0.2; } .popup_slider:hover .popup_slider_tab .slick-arrow:hover { opacity:0.5; } @media only screen and (max-width:1023px) { .sliderB .text2 { font-size:50px; } } @media only screen and (max-width:767px) { .sliderB .text_wrap { padding:15px 20px 20px; } .sliderB .text1 { font-size:17px; } .sliderB .text2 { font-size:42px; } .sliderB .text3 { font-size:14px; } .sliderB .st1 { font-size:22px; } .sliderB .sbtns1 { padding-top:15px; } .sliderB .sbtn { height:34px; padding:0 20px; min-width:100px; line-height:34px; } .popup_slider { margin:0 !important; right:10px; } } @media only screen and (max-width:479px) { .sliderB .text2 { font-size:30px; } } /* 占쏙옙占쏙옙占싱듸옙B Motion */ .sliderB .simg { transition:transform 1s; } .sliderB .text1 { opacity:0; transform:translateY( 10px ); transition:all 0.6s 1.3s; } .sliderB .text2 { opacity:0; transform:translateX( 20px ); transition:all 0.6s 0.5s; } .sliderB .text3 { opacity:0; transform:translateY( -10px ); transition:all 0.6s 1.7s; } .sliderB .sbtns1 { opacity:0; transform:scale( 1.1 ); transition:all 0.6s 2.3s; } .sliderB .slick-active .simg { transition:transform 16s linear; transform:scale( 1.2 ); } .sliderB .slick-active .slide_contents .text1, .sliderB .slick-active .slide_contents .text2, .sliderB .slick-active .slide_contents .text3 { opacity:1; transform:translateY( 0 ) translateX( 0 ); } .sliderB .slick-active .slide_contents .sbtns1 { opacity:1; transform:scale( 1 ); } #designPopupModalBack { z-index:200 !important; } .designPopup {position:absolute; z-index:210; } /* Uneedcomms Keepgrow CSS */ /* #keepgrowLogin #formWrap .loginBtn, #keepgrowLogin #formWrap .nomemberLoginBtn, #keepgrowLogin #memberLogin .redirectBtn { color:#fff !important; } #keepgrowLogin #memberJoin .joinBtn, #keepgrowLogin #memberJoin .joinBtn a { background:#fff !important; } */ /* BASIC css end */