/* BASIC css start */ .slickInit{opacity:0;visibility:hidden} .slickInit.slick-initialized{visibility:visible;opacity:1} .thumb-slide img{background:#f8f8f8;} .thumbSlider .slick-dots { margin-top:22px; text-align:center; width:100%; } .thumbSlider .slick-dots li { margin: 3px; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #fff;border:1px solid #000 } .thumbSlider .slick-dots li.slick-active { width: 9px; background: #000; } .thumbSlider .slick-dots li button {display:none;} #ch-plugin .eyavPk,#ch-plugin .cCCrnk{bottom: 80px !important;} #nhn_btn .npay_storebtn_bx { width: 100% !important;height: auto!important;margin:0 auto !important;} .shopdetail h3 {margin-top: 30px; font-size: 15px; font-weight: bold; color: #000;} .shopdetail h3 .fa {float:right; font-size: 1.5em;} .shopdetail .shopdetailInfo .shopdetailInfoTop { overflow: hidden; } .shopdetail .shopdetailInfo .shopdetailInfoTop figcaption {text-align:left; margin-top:16px;} .shopdetail .shopdetailInfo .shopdetailInfoTop img{background-color:#f8f8f8; background-size:cover; background-position: 50% 50%; background-repeat: no-repeat;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoValue {position: relative; border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; padding:18px 0px; margin-top: 20px; font-size: 13px; font-weight: 600; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoValue p {margin-bottom:5px;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoValue p:last-child {margin-bottom:0px;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoValue .shopdetailInfoName {width:30%; display:inline-block;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoValue .shopdetailInfoCont {width:70%; display:inline-block; margin-left: -4px; text-align: right; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoValue .region {margin-left: 10px;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoValue .btn_relation {position:absolute; top:50%; right:10px; text-align:center; margin-top: -25px;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoValue .btn_relation a {width:50px; height:50px; color:#fff; background-color:#636363; display: inline-block; font-size:0.917em; border-radius: 4px; border:1px solid #424242;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoValue .btn_relation a:first-child {} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoValue .btn_relation a .fa {display:block; margin:6px 0 3px 0;} .shopdetailInfoDelivery {padding:10px 0 40px 0;} .shopdetail .naverBox { display: inline-block; clear:both; width: 100%; } /* 장바구니 팝업 */ #basketpage { top: 260px !important } #basketpage .layer-confirm { border: 1px solid #000; background :#fff !important; z-index: 9999 !important } #basketpage .layer-confirm h4 { font-size: 15px !important; color: #000 !important; font-weight: 600 !important; padding: 10px 0 10px 15px !important; border-bottom: 1px solid #000 !important; } #basketpage .layer-confirm .txt { font-size: 15px !important; color: #000 !important; font-weight: 600 !important; line-height: 1.6 !important; } #basketpage .layer-confirm .btns-2 { font-size: 0 } #basketpage .layer-confirm .btns-2 a { background: #fff !important; border: 1px solid #000 !important; border-radius: 0 !important; font-size: 15px; } #basketpage .layer-confirm .btns-2 a.btn-conti { background: #000 !important; } #basketpage .layer-confirm .close { background: url(/design/cosrx/phps/common/basket_close.png) no-repeat center !important; background-size: 15px !important; top: 17px !important; right: -2px !important; } /* 상품옵션 */ .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area {} .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .MK_optAddWrap .shopdetailInfoBottom { display: none; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area.fixed .MK_optAddWrap .shopdetailInfoBottom { display: block; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area.fixed {width: auto; position: fixed; z-index: 10006; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; text-align: center; font-size: 0; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area.fixed {-webkit-animation: qbuy 150ms linear 1 normal; animation: qbuy 150ms linear 1 normal;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area.fixed:before { content: ''; width: 1px; height: 100%; display: inline-block; vertical-align: middle; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area.fixed .option_inner { display: inline-block; width: 90%; max-height: 90%; vertical-align: bottom; z-index: 10006; overflow: auto; margin-bottom: 20px; font-size: 13px } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area.fixed .shopdetailInfoTit { text-align:left; margin-top: 15px;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area.fixed .shopdetailInfoTop { display: table-cell; float: inherit; vertical-align: middle; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area.fixed .shopdetailInfoTop figure { padding: 5px 10px 5px 0 } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area.fixed .shopdetailInfoValue { display: table-cell; float: inherit; padding: 0px; vertical-align } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area.fixed .MK_optAddWrap .MK_inner-opt-cm .MK_btn-del { top: 0 } @-webkit-keyframes qbuy { from {bottom:-65px;} to {bottom:0;} } @keyframes qbuy { from {bottom:-65px;} to {bottom:0;} } /* fixed 팝업창 */ .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area.fixed .option_tk { padding: 40px 20px 10px; margin-bottom: 100px; overflow-y:auto; background-color: #fff; position: relative;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .fixed-btn {width:100%; box-sizing: border-box; position:relative; bottom:0; left:0; right:0; z-index: 101; text-align: center; font-size: 0; margin:0 auto; display:none;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .fixed-btn.fixed {display: block; position: fixed;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area.fixed .fixed-btn.fixed {display: block; position: relative;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .fixed-btn .btn_option {position: absolute; top: -16px; left: 50%; margin-left:-33px;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area.fixed .shopdetailButtonTop { display: none; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .option_close { display: none; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area.fixed .option_close { display: block; font-size: 0; width: 18px; height: 18px; background: url(/design/cosrx/phps/m/shopdetail_close.png) no-repeat center; background-size: cover; position: absolute; left: 50%; transform: translateX(-50%); top: 12px; } /* fixed 팝업창 안에 상품내용 */ .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoMultiSelect .shopdetailInfoBottom { padding: 0; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoMultiSelect .shopdetailInfoBottom h2 { margin-top:0; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoMultiSelect .shopdetailInfoBottom .engName, .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoMultiSelect .shopdetailInfoBottom .subName, .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area.fixed .shopdetailInfoMultiSelect .MK_optAddWrap #MK_innerOptScroll .MK_p-name { margin: 20px 0 10px 0; text-align: left; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area.fixed .option_tk .MK_optAddWrap .MK_inner-opt-cm li { padding: 0 0 20px 0; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area.fixed .option_tk .MK_optAddWrap .MK_inner-opt-cm .MK_qty-ctrl { margin-top: 0 } .shopdetail .shopdetailInfo .shopdetailInfoBottom .buy_on {background-color: #f6f6f6; text-align: center; font-size: 0; position: fixed; bottom: 20px; width: 90%;display:none;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .buy_on a {width:50%; height:50px; line-height: 50px; font-weight:bold; color: #000; background-color:#fff; border:1px solid #000; box-sizing: border-box; margin-left: -1px; display: inline-block; font-size: 15px; margin: 0;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .buy_on a.buy {background-color:#000; color:#fff; width: 100%} .shopdetail .shopdetailInfo .shopdetailInfoBottom .buy_on a.cart { border-right:0 none; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoSelect { clear: both; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoSelect p:first-of-type { padding-top: 5px } .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoSelect p:nth-last-of-type(1) { border-bottom: 1px solid #e5e5e5 } .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoSelect .optionBtn { margin-bottom: 30px; display: block; width: 100%; height: 50px; line-height: 50px; background: #fff; text-align: center; font-size: 15px; font-weight: 600; color: #000; border:1px solid #000; box-sizing: border-box; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoSelect .opt-com {text-align: right;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoSelect p { padding:0 0 5px 0;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoSelect p:last-child {margin-bottom:0px;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoSelect .shopdetailInfoName {width: 28%; padding-right: 5px; font-size: 13px; display:inline-block; padding-top: 3px; text-align: left; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoSelect .txt { width: 70%; display: inline-block; margin-left: -4px; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoSelect .shopdetailInfoCont {width:70%; display:inline-block; margin-left: -4px;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoSelect .shopdetailInfoCont select {width:100%;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoSelect .shopdetailInfoCount .txt-qnty {text-align:right; padding:0 6px; width: 50px !important;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoSelect .shopdetailInfoCount .fa-plus {background-color: #bbb; width: 35px; height: 35px; text-align: center; vertical-align: middle; line-height: 35px; color: #fff; margin: 0 5px;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoSelect .shopdetailInfoCount .fa-minus {background-color: #bbb; width: 35px; height: 35px; text-align: center; vertical-align: middle; line-height: 35px; color: #fff;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoMultiSelect .MK_optAddWrap #MK_innerOptScroll {background-color: #fff; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoSelect .add-option-sel {font-weight: bold; font-size: 1.1em; padding-top: 10px; display: none; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoSelect .add-option select {margin-bottom: 10px;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailInfoSelect .add-option .shopdetailInfoName {vertical-align: top; padding-top: 11px;} .shopdetail .shopdetailBoard { height: 50px; text-align:center; margin-bottom: 32px; font-size: 0;} .shopdetail .shopdetailBoard .shopBoardBox { height: 50px; } .shopdetail .shopdetailBoard .shopBoardBox.active { position: fixed;top: 90px; width: 100%; background: #fff; z-index: 10005} .shopdetail .shopdetailBoard a {width:33.33%; height: 50px; line-height: 50px; background-color:#fff; border-bottom:1px solid #ccc; display:inline-block; font-size: 13px; font-weight:600; color: #8d8d8d; box-sizing: border-box; } .shopdetail .shopdetailBoard a.active { font-weight:700; color: #000; border-bottom: 1px solid #000; } .MK_optAddWrap .MK_inner-opt-cm li {position:relative; border-bottom:1px solid #e5e5e5; padding: 27px 0;} .MK_optAddWrap .MK_inner-opt-cm .MK_p-name { padding-right: 30px; display: block; } .MK_optAddWrap .MK_inner-opt-cm .MK_p-name strong { font-size: 13px; font-weight: 600 } .MK_optAddWrap .MK_inner-opt-cm .MK_qty-ctrl {margin-top:15px; position:relative; height: 40px; } .MK_optAddWrap .MK_inner-opt-cm .MK_qty-ctrl input[type="tel"] {padding:0 6px; width: 100%; height: 40px; line-height: 40px; border: 1px solid #ccc; text-align: center !important; font-size: 13px; font-weight: 600; } .MK_optAddWrap .MK_inner-opt-cm .MK_btn-del {position:absolute; top:15px; right:2px; display: block; width: 17.5px; height: 17.5px; background: url('/design/cosrx/phps/m/shopdetail_close.png') no-repeat center; background-size: cover; } .MK_optAddWrap .MK_inner-opt-cm .MK_btn-del img {width: 20px; margin-right:5px; display: none;} .MK_optAddWrap .MK_inner-opt-cm .MK_price {position:absolute; bottom:21px; right:0; font-size: 1.3em; margin-right:5px;} .MK_optAddWrap .MK_inner-opt-cm .MK_qty-ctrl .btn-type-02 { position: absolute; background: url('/design/cosrx/phps/m/shopdetail_btns.jpg') no-repeat; background-size: cover; width: 40px; height: 40px; text-align: center; vertical-align: middle; line-height: 40px; color: #fff; display: inline-block;} .MK_optAddWrap .MK_inner-opt-cm .MK_qty-ctrl .btn-type-02:nth-child(2) { top:0; right:0; background-position: 0 -40px; } .MK_optAddWrap .MK_inner-opt-cm .MK_qty-ctrl .btn-type-02:nth-child(3) { top:0; left:0; background-position: 0 0; } .MK_optAddWrap .MK_inner-opt-cm .MK_qty-ctrl .btn-type-02 span { font-size: 0 } .MK_optAddWrap .MK_inner-opt-cm .MK_price { display: none; } .MK_optAddWrap_div { height:10px;padding:0;background:#f6f6f6;border-top:1px solid #c7c7c7; border-bottom:1px solid #c7c7c7; } .MK_optAddWrap_line { height:1px;padding:0;background:#f6f6f6; border-bottom:1px solid #c7c7c7; } #MK_innerOptTotal { padding:15px 0px; line-height: 30px; } #MK_innerOptTotal .left { font-size: 15px; font-weight: bold; } #MK_innerOptTotal .right { font-size:20px; text-align:right; color:#e92d4e; font-weight: 600 } /* //착불 아이콘 */ .shopdetail .shopdetailInfo .gray-delivery {padding: 2px;background-color: #fff;color: #656565;font-size: 0.875em;border-radius: 3px;border: 1px solid #656565;} /* //상품옵션 */ .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailTotal {background-color:#fff; text-align:right; padding:15px; font-size:1.2em;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailTotal em {color:#f1191f; font-size:1.333em; margin-left:16px;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailButton {text-align:center;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailButton .shopdetailButtonTop { margin: 0 -1px; font-size: 0 } .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailButton .shopdetailButtonTop a { display: inline-block; width: 50%; height: 50px; line-height: 50px; border:1px solid #000; box-sizing: border-box; vertical-align: top; margin-left: -1px; font-size: 15px; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailButton .shopdetailButtonTop a.info strike, .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailButton .shopdetailButtonTop a.info .dcPercent { color: #8d8d8d; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailButton .shopdetailButtonTop a.info {background-color:#000; color: #fff; font-size: 10px; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailButton .shopdetailButtonTop a.wish {background-color:#FFF; color: #000; font-weight:700} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailButton .shopdetailButtonTop a.cart {background-color:#FFF; color: #000; font-weight:700} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailButton .shopdetailButtonTop a.buy {background-color:#000; color: #fff;font-weight:700} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailButton .shopdetailButtonTop .soldout{width:100%; height:50px; font-size:16px; color:#fff; text-align:center; line-height:50px; background:#ccc; font-weight:600;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailButton .shopdetailButtonBottom {margin:20px 0;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailButton .shopdetailButtonBottom img {margin:0 2px; width:45px; height:auto;} .shopdetail .shopdetailCoupon {margin-top:15px;} .shopdetail .shopdetailCoupon .shopdetailCouponGet {padding:0 15px;} .shopdetail .shopdetailCoupon .shopdetailCouponGet .image_src {max-width: 100%; padding-bottom: 5px;} .shopdetail .shopdetailCoupon .shopdetailCouponGet li dl {height:34px; background:url("/images/d3/m_04/bg_coupon@2x.gif") no-repeat left center; padding:10px 0 10px 92px; border-bottom:1px dashed #cbcbcb; position:relative; background-size: 81px auto;} .shopdetail .shopdetailCoupon .shopdetailCouponGet li:last-child {border-bottom:0px none;} .shopdetail .shopdetailCoupon .shopdetailCouponGet .MS_coupon dt {width:82px; position:absolute; top:10px; left:0 ; color:#fff; text-align:center;} .shopdetail .shopdetailCoupon .shopdetailCouponGet .MS_coupon dt strong {font-weight: normal;} .shopdetail .shopdetailCoupon .shopdetailCouponGet .MS_coupon h4 {font-weight:bold;} .shopdetail .shopdetailItem .shopdetailItemPopup {display: none;text-align:center; padding:0 15px; margin:22px 0;} .shopdetail .shopdetailItem .shopdetailItemPopup a {font-weight:bold; color:#fff; background-color:#636363; display:block; padding:10px 0;} .shopdetail .shopdetailItem .shopdetailItemPopup .shopdetailItemZoom {height:60px; padding:0 0 0 75px; margin-top:10px; background:url("/images/d3/m_04/bg_hand@2x.gif") no-repeat 20px center; line-height: 60px; background-size: 50px auto;} .shopdetail .shopdetailItem .shopdetailImage img {max-width:100%; height: auto !important;} .shopdetail .shopdetailItem .shopdetailImage table {width:100% !important;} .shopdetail .shopdetailItem .shopdetailImage object {width:100% !important;} .shopdetail .shopdetailItem .shopdetailImage iframe {width:100% !important;} .shopdetail .shopdetailItem .shopdetailImage table {table-layout: auto !important;} .shopdetail .shopdetailItem .shopdetailImage div {width:100%;} .shopdetail .shopdetailItem .shopdetailImage video { } .shopdetail .shopdetailItem .shopdetailNotify {margin-top:24px;} .shopdetail .shopdetailItem .shopdetailNotify .shopdetailNotifyInfo {padding:0 15px;} .shopdetail .shopdetailItem .shopdetailNotify .shopdetailNotifyInfo dt {font-weight:bold; margin-bottom:2px;} .shopdetail .shopdetailItem .shopdetailNotify .shopdetailNotifyInfo dd {margin:0 0 25px 6px;} .shopdetail .shopdetailRelationItem {padding:0 15px 30px 15px;} .shopdetail .shopdetailRelationItem .listName input {float:right;} .shopdetail .shopdetailRelationItem .btn_cart {width:290px; text-align:center; font-weight:bold; color:#fff; background-color:#393939; display:block; padding:10px 0; margin:0 auto;} /* 관련상품 */ .shopdetailRelation {padding: 0 20px} .shopdetailRelation .list_shoppingRelationItem1x {} .shopdetailRelation .list_shoppingRelationItem1x ul {width:100%; display:table; table-layout: fixed; box-sizing: border-box;} .shopdetailRelation .list_shoppingRelationItem1x li {width:100%; display:inline-block; vertical-align: top; } .shopdetailRelation .list_shoppingRelationItem1x li figure { padding-left: 0; border: 0; font-size: 0} .shopdetailRelation .list_shoppingRelationItem1x li figure > a { display: inline-block; vertical-align: top; width: 30%; margin-right: 2%; padding: 15px 12px; padding-left: 0; border: 0; box-sizing: border-box; } .shopdetailRelation .list_shoppingRelationItem1x li:first-child {border:0px none;} .shopdetailRelation .list_shoppingRelationItem1x li img.listPic {width: 100%} .shopdetailRelation .list_shoppingRelationItem1x li figure select { margin-bottom: 10px } .shopdetailRelation .list_shoppingRelationItem1x .list_shoppingInfo { display: inline-block; margin-top: 15px; padding: 0; vertical-align: top; width: 68%; border: 0; color: #8d8d8d; font-size: 13px } .shopdetailRelation .list_shoppingRelationItem1x .list_shoppingInfo .listName { position: relative;color: #000; font-size: 13px; font-weight: 600; text-align: left; } .shopdetailRelation .list_shoppingRelationItem1x .list_shoppingInfo .options-select {width:100%;} .shopdetailRelation .list_shoppingRelationItem1x .MS_related_checkbox {position:absolute; top:0; right:0;} .shopdetailRelation .list_shoppingRelationItem1x .listCount {margin: 0px 0 12px 0; position: relative;} .shopdetailRelation .list_shoppingRelationItem1x .listCount .amount-input {text-align:center; border:1px solid #ccc; padding: 0} .shopdetailRelation .list_shoppingRelationItem1x .listCount .fa-plus { position: absolute; background: url(/design/cosrx/phps/m/shopdetail_btns.jpg) no-repeat; background-size: cover; width: 35px; height: 35px; text-align: center; vertical-align: middle; line-height: 40px; color: #fff; display: inline-block; top: 0; right: 0; background-position: 0 -35px;} .shopdetailRelation .list_shoppingRelationItem1x .listCount .fa-minus { position: absolute; background: url(/design/cosrx/phps/m/shopdetail_btns.jpg) no-repeat; background-size: cover; width: 35px; height: 35px; text-align: center; vertical-align: middle; line-height: 35px; color: #fff; display: inline-block; top: 0; left: 0; background-position: 0 0px;} .shopdetailRelation .list_shoppingRelationItem1x .list_shoppingInfo p { margin-bottom: 5px; font-size: 0; color: #8d8d8d; } .shopdetailRelation .list_shoppingRelationItem1x .list_shoppingInfo .relLeft { display: inline-block; width: 30%; text-align: left; font-size: 13px } .shopdetailRelation .list_shoppingRelationItem1x .list_shoppingInfo .relRight { width: 70%; display: inline-block; text-align: right;font-size: 13px } /* //관련상품 */ /* IOS 디바이스 옵션 선택 시 자동 확대 방지 */ input[type="text"], input[type="date"], input[type="tel"], input[type="number"], input[type="email"], input[type="password"], select {font-size:13px; width: 100%} /* //IOS 디바이스 옵션 선택 시 자동 확대 방지 */ /* OKDGG 버튼 */ .shopdetail .okdgg-checkout {margin-top: 15px;} .shopdetail .okdgg-checkout img {max-width: 90%; height: auto;} /* //OKDGG 버튼 */ /* 퀵바이 버튼 노출 시 커뮤니티 탭 위치 변경 */ .cs-button {bottom: 53px !important;} /* //퀵바이 버튼 노출 시 커뮤니티 탭 위치 변경 */ /* 임시품절 재입고 SMS 받기 */ .shopdetail .soldout_anchor { display:block !important; } .shopdetail .MK_btn-sms { display: inline-block; width: 100%; height: 35px; line-height: 35px; text-align: center; border: 1px solid #808080; color: #fff; font-weight: bold; background-color: #636363; background-image: -webkit-gradient(linear, left top, left bottom, from(#636363), to(#5e5e5e)); background-image: -webkit-linear-gradient(top, #636363, #5e5e5e); background-image: -moz-linear-gradient(top, #636363, #5e5e5e); background-image: -o-linear-gradient(top, #636363, #5e5e5e); background-image: linear-gradient(to bottom, #636363, #5e5e5e); -webkit-border-radius: 3px !important; border-radius: 3px !important; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .shopdetail .MK_btn-sms span { padding-left: 24px; background: url(/images/d3/m_01/bull/alarm_fff@2x.png) no-repeat 0 50%; background-size: 18px 14px; } /* 임시품절 재입고 SMS 받기 끝 */ #nhn_btn {padding-top:10px;} #payco_order_btn {padding-top:10px;} #kakaopay_order_btn {padding-top:10px;} /* 하이브리드 */ .shopdetail .shopdetailInfo {background:#fff;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .option-wrap { padding:5px 15px 10px; background:#f6f6f6; border-bottom:1px solid #c7c7c7; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .option-wrap .option-box:not(:last-child) { width:100%; border-bottom:1px solid #cecece; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .option-wrap .option-box.last { border-bottom:none; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .option-wrap .option-box .tit { width:100%; padding:10px 0; color:#3b3b3b; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .option-wrap .option-box .list:after { clear: both; content: ""; display: block; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .option-wrap .option-box .list { width:100%; font-size:0.875em; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .option-wrap .option-box .list li { float:left; width:20%; list-style:none; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .option-wrap .option-box .list li.last { } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .option-wrap .option-box .list li dl { width:54px; padding-bottom:10px; text-align:center; color:#333; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .option-wrap .option-box .list li dl dd.prdchk { text-align:left; padding-bottom:5px; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .option-wrap .option-box .list li dl dd.prdchk input { width:12px; height:12px; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .option-wrap .option-box .list li dl dd.prdimg { position:relative; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .option-wrap .option-box .list li dl dd.prdimg img { width:54px; height:54px; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .option-wrap .option-box .list li dl dd.prdimg.noimg { width:52px; height:52px; border:1px solid #d8d8d8; background:#fff url(/makeshop/newmanager/neoimages/h52_noimg.gif) no-repeat center center; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .option-wrap .option-box .list li dl dd.prdimg .soldout { position:absolute; top:0; left:0; display:inline-block; width:54px; height:54px; line-height:56px; color:#fff; text-align:center; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .option-wrap .option-box .list li dl dd.prdimg .soldout-bg { position:absolute; top:50%; left:0; display:inline-block; width:54px; height:20px; margin-top:-10px; background:#000; filter:alpha(opacity:40); opacity:0.4; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .option-wrap .option-box .list li dl dd.prdimg .sel-img { position:absolute; top:0; left:0; display:inline-block; width:54px; height:54px; background:#000; filter:alpha(opacity:40); opacity:0.4; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .option-wrap .option-box .list li dl dd.prdname { padding-top:5px; line-height:14px; word-wrap:break-word;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .option-wrap .option-box .list li dl dd.prdnote { padding-bottom:3px; line-height:14px; word-wrap:break-word;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .option-wrap .option-box .list li dl dd.prdprice { padding-bottom:3px; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .option-wrap .option-box .list li dl dd.prdqty { } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .option-wrap .option-box .list li dl dd.prdqty input { display:inline-block; width:20px; height:15px; line-height:17px; padding:0 5px; border:1px solid #707070; font-size:11px; text-align:right; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .option-wrap .option-box .list li dl dd.prdqty .btn-up-down { display:inline-block; width:11px; height:14px; line-height:0; font-size:0; vertical-align:top; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .option-wrap .option-box .list li dl dd.prdqty .btn-up-down a { display:inline-block; width:11px; height:9px; line-height:0; font-size:0; vertical-align:top; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .option-wrap .option-box .list li dl dd.prdqty .btn-up-down .btn-up { margin-bottom:1px; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .option-wrap .add-option-sel { font-weight: bold; font-size: 1.1em; padding: 10px 0; border-top:1px solid #cecece; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .option-wrap .shopdetailInfoName { width: 28%; padding-right: 5px; display:inline-block; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .option-wrap .shopdetailInfoCont {width:70%; display:inline-block; margin-left: -4px;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .option-wrap .shopdetailInfoCont select {width:100%;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .option-wrap .shopdetailInfoCount .txt-qnty {text-align:right; padding:0 6px; width: 50px !important;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .option-wrap .shopdetailInfoCount .fa-plus {background-color: #bbb; width: 35px; height: 35px; text-align: center; vertical-align: middle; line-height: 35px; color: #fff; margin: 0 5px;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .option-wrap .shopdetailInfoCount .fa-minus {background-color: #bbb; width: 35px; height: 35px; text-align: center; vertical-align: middle; line-height: 35px; color: #fff;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .MK_optAddWrap #MK_innerOptPrice, .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .MK_optAddWrap #MK_innerOptAdd { padding-bottom:5px; margin-right: 10px; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .MK_optAddWrap #MK_optAddWrapList {background-color:#f6f6f6; } /* 추가 구성 상품 */ .shopdetail .shopdetailInfo .shopdetailInfoTit { margin-top: 30px; font-size:15px; font-weight: bold; color:#000; } .shopdetail .shopdetailInfo .shopdetailInfoWrap:after { clear: both; content: ""; display: block; } .shopdetail .shopdetailInfo .shopdetailInfoWrap { width:100%; font-size: 0 } .shopdetail .shopdetailInfo .shopdetailInfoWrap .shopdetailInfoTop { display: inline-block; vertical-align: top; width:30%; margin-right:2%; } .shopdetail .shopdetailInfo .shopdetailInfoWrap .shopdetailInfoTop figure { padding:15px 12px; padding-left: 0; border:0; } .shopdetail .shopdetailInfo .shopdetailInfoWrap .shopdetailInfoValue { display: inline-block; margin-top: 15px; padding: 0; vertical-align: top; width:68%; border:0; color: #8d8d8d; } .shopdetail .shopdetailInfo .shopdetailInfoWrap .shopdetailInfoValue .shopdetailInfoprdName { color: #000; font-weight: 600; text-align: left; } .shopdetail .shopdetailInfo .shopdetailInfoWrap .shopdetailInfoValue .shopdetailInfoCont { float: right; margin:0; font-size: 13px; } .shopdetail .shopdetailInfo .shopdetailInfoWrap .shopdetailInfoValue .shopdetailInfoName { width:30%; text-align: left; } .shopdetail .shopdetailInfo .shopdetailInfoWrap .shopdetailInfoSelect p { padding:0; background:none; } .shopdetail .shopdetailInfo .shopdetailInfoWrap .shopdetailInfoSelect .shopdetailInfoCont .basic_option { width:100%; } .shopdetail .shopdetailInfo .shopdetailInfoWrap .shopdetailInfoSelect .shopdetailInfoName { display:none; width:100%; padding:0 0 5px 0; } /* 원클릭옵션 */ .shopdetailInfoOneclick {clear:both; background-color:#f6f6f6; padding: 5px 15px; overflow:hidden; zoom:1; } .shopdetailInfoOneclick > span {float:left; } .shopdetailInfoOneclick .shopdetailInfoList {float:left; width: 70%; } .MK-oneclick-list { overflow:hidden; zoom:1; } .MK-oneclick-list:after { content: ""; display: block; clear: both; } .MK-oneclick-list li { float:left; margin: 0 5px 5px 0; } .MK-oneclick-list li a { border:1px solid #231f20; display: inline-block; border-radius: 1px; box-sizing:border-box; } .MK-oneclick-list li.MK-oneclick-sel a { border:2px solid #000000; } .MK-oneclick-list li.MK-oneclick-dis a { filter:alpha(opacity=50); -moz-opacity:.5; opacity:.5; } .MK-oneclick-list li.MK-oneclick-color.MK-oneclick-sel a { padding:1px; filter:alpha(opacity=100); -moz-opacity:1; opacity:1; } .MK-oneclick-list li a span { display: block; text-align: center; vertical-align: middle; line-height: 19px; } .MK-oneclick-list li a img { width: 100%; height:100%;} .MK-oneclick-list li.MK-oneclick-image a {height:50px;} .MK-oneclick-list li.MK-oneclick-image a img {width: auto; height: 48px;;} .MK-oneclick-list li.MK-oneclick-image.MK-oneclick-sel a img {height:46px; width: auto;} .MK-oneclick-list li.MK-oneclick-color { width:50px; height: 50px; } .MK-oneclick-list li.MK-oneclick-color a { padding: 2px; } .MK-oneclick-list li.MK-oneclick-color span { width: 44px; height: 44px; } .MK-oneclick-list li.MK-oneclick-color .mk-oo-sel span { width: 27px; height: 27px; } .MK-oneclick-list li.MK-oneclick-text .MK-oneclick-list li.MK-oneclick-text {min-width:35px; max-width:100%; height: 50px; } .MK-oneclick-list li.MK-oneclick-text a { padding: 2px; } .MK-oneclick-list li.MK-oneclick-text.MK-oneclick-sel a {padding:1px;} .MK-oneclick-list li.MK-oneclick-text span { min-width: 29px; line-height: 44px; } .MK-oneclick-list li.MK-oneclick-text .MS-oneclick-sel span { min-width: 30px; line-height: 27px; } .MK-oneclick-value { padding-bottom: 3px; display:block; } .MK-oneclick-only-text li.MK-oneclick-text { height: auto; } .MK-oneclick-only-text li.MK-oneclick-text span { height: auto; line-height: 19px; } /* 추가CSS */ .shopdetail .shopdetailInfo .shopdetailInfoTop .thmbPagination { margin: 22px 0 0px 0; text-align: center; } .shopdetail .shopdetailInfo .shopdetailInfoTop .thmbPagination .swiper-pagination-bullet { margin: 0 5px; display: inline-block; width: 7px; height: 7px; border:1px solid #000; border-radius: 50%; background: #fff; opacity: 1 !important; } .shopdetail .shopdetailInfo .shopdetailInfoTop .thmbPagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #000; } .shopdetail .shopdetailInfo .shopdetailInfoBottom { padding: 0 20px; background-color:#fff;} .shopdetail .shopdetailInfo .shopdetailInfoBottom h2 { margin-top: 45px; line-height: 24px; letter-spacing: -1px; font-size:20px; font-weight:600;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .engName {font-family: 'Piek-Light'; font-size:15px; margin-top:5px; margin-bottom: 10px } .shopdetail .shopdetailInfo .shopdetailInfoBottom .subName table td { font-size: 13px; color: #8d8d8d; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .priceSell { font-size: 20px; font-weight: 700; margin-bottom: 25px } .shopdetail .shopdetailInfo .shopdetailInfoBottom .priceCon { font-size: 13px; color: #8d8d8d; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .priceSell .dcPercent { padding: 0px 10px; font-size: 15px; font-weight: 600; border: 1px solid #e72d4e; border-radius: 30px; color: #e72d4e; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .fixed-btn .shopdetailButtonTop { padding: 20px; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .fixed-btn .shopdetailButtonTop a { display: inline-block; width: 100%; height: 50px; line-height: 50px; border: 1px solid #000; box-sizing: border-box; vertical-align: top; margin-left: -1px; font-size: 15px; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .fixed-btn .shopdetailButtonTop .info { background-color: #000; color: #fff; font-size: 12px; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .fixed-btn .shopdetailButtonTop .info strike, .shopdetail .shopdetailInfo .shopdetailInfoBottom .fixed-btn .shopdetailButtonTop .info .dcPercent { font-size: 10px; color: #8d8d8d } .shopdetail .shopdetailInfo .shopdetailInfoBottom .fixed-btn .shopdetailButtonTop .buy { background-color: #000; color: #fff; font-weight: 700; } .shopdetail .shopdetailInfo .option_area .shopdetailInfoBottom { padding: 0; display: none; } .shopdetail .shopdetailInfo .option_area.fixed .shopdetailInfoBottom { display: block; text-align: left; } .shopdetail .shopdetailInfo .option_area.fixed #MK_innerOptTotal .left { text-align: left; } .shopdetail .shopdetailInfo .option_area .shopdetailInfoBottom h2 { margin-top: 0; line-height: 22px; font-size: 18px; } .shopdetail .shopdetailInfo .option_area .shopdetailInfoBottom .engName, .shopdetail .shopdetailInfo .option_area .shopdetailInfoBottom .subName { display: none; } .shopdetail .shopdetailInfo .option_area .shopdetailInfoBottom .priceCon { display: block; margin-top: 10px; } /*상품 상세페이지 NEW*/ /* mobile 상세페이지 추가 */ .shopdetail .shopdetailItem .shopdetailImage { width: 96% !important; margin: 0 2% !important; } /* 제목 */ .shopdetail .shopdetailItem .shopdetailImage h4, .shopdetail .shopdetailItem .shopdetailImage h1, .shopdetail .shopdetailItem .shopdetailImage h5 { WORD-BREAK: normal; width: 98% ; line-height: 1.2; } /* 한글 */ .shopdetail .shopdetailItem .shopdetailImage h4 { font-size: 2em; } /* 영문 */ .shopdetail .shopdetailItem .shopdetailImage h1 { font-size: 1.8em; } /* 설명문구 */ .shopdetail .shopdetailItem .shopdetailImage h5 { font-size: 1.2em; letter-spacing: 0 !important; } /* 부제목 */ .shopdetail .shopdetailItem .shopdetailImage h1 { font-weight: normal; margin-top: 10px; } /* 서브타이틀 01 description 등등 */ .shopdetail .shopdetailItem .shopdetailImage .wrap-subtitle {margin: 0 !important;} .shopdetail .shopdetailItem .shopdetailImage .wrap-subtitle div {display: inline-block !important;} .shopdetail .shopdetailItem .shopdetailImage .wrap-subtitle div img {display: none !important;} .shopdetail .shopdetailItem .shopdetailImage .number {font-size: 40px !important; font-weight: 100; color: #e8000b; margin-bottom:0;}/* 빨간숫자 */ .shopdetail .shopdetailItem .shopdetailImage .sub-title {font-size: 30px !important; font-weight:100; color: #333; margin:0 auto; font-family:Roboto; text-align:center; } /* 01디스크립션 */ .shopdetail .shopdetailItem .shopdetailImage .detail-contents {font-size: 13px !important; color:#999; line-height: 1.1; width: 96% !important; margin: 0 2% !important; padding: 0 !important;} .shopdetail .shopdetailItem .shopdetailImage .detail-contents strong {font-size: 13px !important;} .shopdetail .shopdetailItem .shopdetailImage .detail-contents p { font-size: 13px !important; word-break: normal !important; color: #666 !important; line-height: 1 !important; padding: 1% !important;} .shopdetail .shopdetailItem .shopdetailImage .detail-contents span {margin: 0 5px; color: #ff286a;} /* 소제목들 */ .shopdetail .shopdetailItem .shopdetailImage .font-black {color:#000 !important; font-size: 14px !important;} /* 엠블럼부분 */ H4.award{padding:20px 0 5px 0; color:#333333; border-bottom:1px solid #ddd; } .shopdetail .shopdetailItem .shopdetailImage .award {font-size: 12px; line-height: 1; color: #666; } .shopdetail .shopdetailItem .shopdetailImage .award li {display: inline-block; width:47% !important; vertical-align: middle; margin-left: 1%; margin-right: 1%;vertical-align: top; margin-top:20px; margin-bottom:10px; line-height:15px; text-align:center; } .shopdetail .shopdetailItem .shopdetailImage .award img {width:80px; margin-bottom: 20px; } .shopdetail .shopdetailItem .shopdetailImage .award li.sister_award img {width:150px; } .shopdetail .shopdetailItem .shopdetailImage .award tr td {} /* 베네핏부분 */ .shopdetail .shopdetailItem .shopdetailImage .wrap-benefit, .shopdetail .shopdetailItem .shopdetailImage .wrap-description-bottom {color: #666 !important;} .shopdetail .shopdetailItem .shopdetailImage .wrap-benefit .font-black, .shopdetail .shopdetailItem .shopdetailImage .wrap-description-bottom .font-black {color: #000 !important;} .shopdetail .shopdetailItem .shopdetailImage .benefit {font-size: 14px !important; line-height: 1;} .shopdetail .shopdetailItem .shopdetailImage .benefit li {display: inline-block; text-align: center; width: 23% !important;vertical-align: top !important; margin-left: 1%; margin-right: 1%;} .shopdetail .shopdetailItem .shopdetailImage .benefit img {width: 40px; margin-bottom: 5px; height: 40px;} #toggleButton{ text-align:center; font-size:20px; margin:20px auto; } #moreMenu table{border:1px solid #f1f1f1; width:1000px; background:#fff;} #moreMenu table th{background:#fafafa; border:1px solid #f1f1f1; width:80px; text-align:left; padding:10px; color:#666; font-size:12px; } #moreMenu table td{border:1px solid #f1f1f1; padding:10px; color:#666; font-size:12px;} #moreMenu table td.telnum{color:#333; font-weight:bold; } .shopdetail .shopdetailItem .shopdetailImage img { max-width: 100%; height: auto !important; } .shopdetail .shopdetailItem .shopdetailImage table { width: 98% !important; margin: 0 auto; } .shopdetail .shopdetailItem .shopdetailImage object { width: 98% !important; } .shopdetail .shopdetailItem .shopdetailImage iframe { width: 100%; margin-top:40px; /* height: 46% !important; */ } .shopdetail .shopdetailItem .shopdetailImage table { table-layout: auto !important; } .shopdetail .shopdetailItem .shopdetailImage div { width: 100%; } .shopdetail .shopdetailItem .shopdetailNotify { margin-top: 24px; } .shopdetail .shopdetailItem .shopdetailNotify .shopdetailNotifyInfo { padding: 0 15px; } .shopdetail .shopdetailItem .shopdetailNotify .shopdetailNotifyInfo dt { font-weight: bold; margin-bottom: 2px; } .shopdetail .shopdetailItem .shopdetailNotify .shopdetailNotifyInfo dd { margin: 0 0 25px 6px; } .shopdetail .shopdetailRelationItem { padding: 0 15px 30px 15px; } .shopdetail .shopdetailRelationItem .listName input { float: right; } .shopdetail .shopdetailRelationItem .btn_cart { width: 290px; text-align: center; font-weight: bold; color: #fff; background-color: #393939; display: block; padding: 10px 0; margin: 0 auto; } /* OKDGG */ .shopdetail .okdgg-checkout { margin-top: 15px; } .shopdetail .okdgg-checkout img { max-width: 90%; height: auto; } /* //OKDGG */ .cs-button { bottom: 53px !important; } p.product_tit{FONT-SIZE:35px; line-height:45px; margin:50px 0 20px 0; font-weight:bold; COLOR: #333; TEXT-ALIGN: center;} p.product_tit2{font-family:Roboto; font-size:20px; line-height:30px; text-align:center; color:#333; font-weight:400; margin-bottom:20px;} p.product_tit3{font-size:18px; line-height:30px; text-align:center; font-weight:bold; color:#333; margin-bottom:50px; } p.product_tit3_2{font-size:18px; line-height:30px; text-align:center; font-weight:bold; color:#333; margin-bottom:10px; } p.product_text{font-size:13px; line-height:23px; text-align:center; color:#666; margin-bottom:30px; padding:0 20px;} p.product_text_small{font-size:10px; line-height:20px; text-align:center; color:#999; margin-bottom:30px; padding:0 20px;} p.set_tit{FONT-SIZE:30px; margin:50px 0 30px 0; font-weight:bold; COLOR: #333; text-align:center; line-height:40px;} p.set_sub_tit{FONT-SIZE:16px; margin:0 0 50px 0; COLOR: #333; text-align:center; line-height:30px;} p.HOONION_text{font-size:15px; line-height:23px; text-align:center; color:#666; margin-bottom:30px; padding:0 20px;} p.youtube_tit{font-size:18px; line-height:40px; text-align:center; font-weight:bold; color:#333; margin-bottom:5px;} p.product_img{text-align:center; width:100%; margin-top:10%;} .ac_link {position:relative;} .ac_link ul li a.ac_01{position:absolute; top:32%; left:9%; width:28px; height:133px; } .ac_link ul li a.ac_02 {position:absolute; top:29%; left:20%; width:28px; height:133px; } .ac_link ul li a.ac_03{position:absolute; top:51%; left:30%; width:28px; height:78px; } .ac_link ul li a.ac_04{position:absolute; top:39%; left:41%; width:28px; height:115px; } .ac_link ul li a.ac_05{position:absolute; top:39%; right:40%; width:28px; height:115px; } .ac_link ul li a.ac_06{position:absolute; top:39%; right:29%; width:21px; height:115px; } .ac_link ul li a.ac_07{position:absolute; top:35%; right:6%; width:73px; height:130px; } p.product_tit4{font-size:18px; line-height:30px; text-align:center; font-weight:bold; color:#333; margin:80px 0 20px 0; letter-spacing:-1px; } p.product_tit4 span{color:#3ab050} p.AC_text{font-size:13px; line-height:25px; text-align:center; color:#333; margin-bottom:10px; padding:0 20px; font-weight:bold;} p.AC_text_small{FONT-SIZE:10px; COLOR:#999; TEXT-ALIGN: center; LINE-HEIGHT: 18px; margin-bottom:50px; } p.bigtitle{font-family: Roboto; font-size:1em; text-align:center; color:#333; font-weight:700; padding-top:50px; padding-bottom:30px; line-height:40px;} p.bigtitle_tit{font-family: Roboto; font-size:2em; text-align:center; color:#333; font-weight:700; padding-top:50px; padding-bottom:30px; line-height:40px;} p.bigtitle_2{font-size:13px; line-height:30px; text-align:center; color:#666; margin-bottom:50px;} p.bttm_text{FONT-SIZE:13px; line-height:23px; COLOR: #666; text-align:center; margin:20px 0; text-align:center;} p.top_text{FONT-SIZE:12px; line-height:22px; COLOR: #666; text-align:center; margin:0 0 20px 0; text-align:center;} p.bigtitle_left{font-family: Roboto; font-size:25px; text-align:left; color:#333; font-weight:700; padding:50px 15px 30px 15px; line-height:40px;} p.bigtitle_left_kr{font-size:20px; text-align:left; color:#333; font-weight:700; padding:50px 15px 30px 15px; line-height:30px;} .bigtitle_left_01 p.rx{font-family: Roboto; font-size:25px; text-align:left; color:#333; font-weight:700; padding:50px 15px 30px 15px; line-height:40px;} .common_con{text-align:center;} .common_con img{width:100%; text-align:center; max-width:500px; } ul.description_icon {margin:30px auto; border:0px solid red;} ul.description_icon li{display: inline-block; width:18%; border:0px solid red; vertical-align:top; text-align:center;} ul.description_icon li img{width:50%;} ul.description_icon li p{FONT-SIZE:13px; COLOR: #666; TEXT-ALIGN: center; MARGIN:30px 0; LINE-HEIGHT: 23px} ul.ingre_icon {margin:30px auto; border:0px solid red;} ul.ingre_icon li{display: inline-block; width:32%; border:0px solid red; vertical-align:top; text-align:center; margin:0 0 30px 0;} ul.ingre_icon li img{width:50%;} ul.ingre_icon li p{FONT-SIZE:12px; COLOR: #666; TEXT-ALIGN: center; MARGIN:10px 0 0 0; LINE-HEIGHT: 22px} ul.ingre_icon li p.small_text{FONT-SIZE:10px; COLOR: #999; TEXT-ALIGN: center; LINE-HEIGHT: 15px} dl.description{margin:50px auto 0 auto; } dl.description dt{DISPLAY:block; text-align:left; font-size:16px; line-height:26px; font-weight:bold; color:#333; margin:0 0 10px 20px;} dl.description dd{DISPLAY:block; font-size:16px; line-height:26px; color:#666; text-align:left; margin:0 20px 30px 20px;} dl.description dd span{color:#3ab050} dl.description_2{margin:50px auto 40px auto; } dl.description_2 dt{DISPLAY:block; text-align:left; font-size:16px; line-height:26px; font-weight:bold; color:#333; margin:0 0 10px 20px;} dl.description_2 dd{DISPLAY:block; font-size:16px; line-height:26px; color:#666; text-align:left; margin:0 20px 30px 20px;} dl.description_2 dd span{color:#3ab050} ul.coodi_product {margin:30px auto; border:0px solid red;} ul.coodi_product li{display: inline-block; width:30%; border:0px solid red; vertical-align:top; text-align:center;} ul.coodi_product li.two{display: inline-block; width:35%; border:0px solid red; vertical-align:top; text-align:center;} ul.coodi_product li.arrow{width:5%; height:100px; BACKGROUND: url(http://cosrx.playimage.co.kr/cosrx/product/Poreless/Poreless_14.png) no-repeat 50% 50%; background-size:70%; } ul.coodi_product li img{width:100%;} ul.coodi_product li p{FONT-SIZE:12px; COLOR: #666; TEXT-ALIGN: center; MARGIN:30px 0; LINE-HEIGHT: 20px} .lt_box{float:left; text-align:center;} .rt_box{float:right; text-align:center;} .bg_box{BACKGROUND: #fff5f6; width:98%; } .bg_box p.bg_tit {FONT-SIZE: 20px; line-height:30px; COLOR: #e9323e; TEXT-ALIGN: center; PADDING-TOP:30px; PADDING-LEFT: 30px; PADDING-RIGHT: 30px; font-weight:bold; } .bg_box p.bg_tit2 {FONT-SIZE: 20px; line-height:30px; COLOR: #e9323e; TEXT-ALIGN: center; PADDING-TOP:30px; PADDING-LEFT: 30px; PADDING-RIGHT: 30px; font-weight:bold; } .bg_box p {FONT-SIZE: 16px; line-height:26px; COLOR: #666; TEXT-ALIGN: center; PADDING-LEFT: 30px; PADDING-RIGHT: 30px; padding-bottom:30px;} .bg_box p span{font-size:12px; color:#999; } .lt_box2{text-align:center;} .lt_box2 img{width:250px;} .rt_box2{margin:0 0 50px 0;} .text_box{border:0px solid red; text-align:center;} .text_box p.text_tit {FONT-SIZE: 30px; line-height:40px; COLOR: #333; font-family:'Roboto'; font-weight:400; padding:20px 0; color:#333;} .text_box p.text_tit_kr {FONT-SIZE: 15px; line-height:30px; COLOR: #333; font-weight:bold; padding:10px 0; color:#333;} .text_box p{FONT-SIZE:13px; line-height:23px; COLOR: #666; padding:0 20px;} .text_box p.text_box_2{FONT-SIZE:13px; COLOR: #666; margin:10px;} .text_box p.text_info{ padding:20px 0 0 0; FONT-SIZE:13px; line-height:23px; COLOR: #666;} ul.all_list li p.tit_kr_2{FONT-SIZE:20px; COLOR: #333; TEXT-ALIGN: center; border-bottom:0; margin-top:10px; font-weight:bold;} ul.howtouse_img {margin:0 auto; border:0px solid red;} ul.howtouse_img li{display:inline-block; width:32%; border:0px solid red; vertical-align:top} ul.howtouse_img li p{FONT-SIZE:13px; COLOR: #666; TEXT-ALIGN: center; MARGIN:30px 0; LINE-HEIGHT: 23px; padding:0 5px;} ul.howtouse_img p.howtext{FONT-SIZE:13px; COLOR: #666; TEXT-ALIGN:center; MARGIN:20px; LINE-HEIGHT:23px;} ul.howtouse_img p.howtext_2{FONT-SIZE:15px; COLOR: #000; TEXT-ALIGN:center; MARGIN-top:50px;} p.caution{FONT-SIZE:13px; COLOR:#999; TEXT-ALIGN: center; LINE-HEIGHT: 23px; padding:0 20px; } ul.tip_img {margin:0 auto; border:0px solid red;} ul.tip_img li{display:inline-block; width:45%; border:0px solid red; vertical-align:top; margin:0 5px;} ul.tip_img li p{FONT-SIZE:13px; COLOR: #666; TEXT-ALIGN: center; MARGIN:30px 0; LINE-HEIGHT: 23px; padding:0 5px;} ul.review_list{width:100%;} ul.review_list li{WIDTH:32%; TEXT-ALIGN: center; DISPLAY: inline-block; vertical-align:top;} ul.review_list li img{width:50%;} ul.review_list li p.reviewer{FONT-SIZE:13px; COLOR: #333; TEXT-ALIGN: center; MARGIN:30px 0; font-weight:bold; font-family: Roboto;} ul.review_list li p{FONT-SIZE:13px; COLOR: #666; TEXT-ALIGN: center; MARGIN:30px 0; padding:0 10px; LINE-HEIGHT: 23px} ul.review_list2{width:100%;} ul.review_list2 li{WIDTH:100%; TEXT-ALIGN: center; float:left; vertical-align:top; margin:0 0 20px 0;} ul.review_list2 li img{width:100%;} ul.review_list2 li p.reviewer{FONT-SIZE:13px; COLOR: #333; TEXT-ALIGN: center; MARGIN:10px 0 0 0; font-weight:bold; font-family: Roboto;} ul.review_list2 li p{FONT-SIZE:13px; COLOR: #666; TEXT-ALIGN: left; padding:0 10px; LINE-HEIGHT: 23px} ul.review_list2 li ul li.review_list_lt{float:left; width:30%; border:0px solid red;} ul.review_list2 li ul li.review_list_lt img{width:50px;} ul.review_list2 li ul li.review_list_rt{float:left; width:70%; border:0px solid orange; } ul.review_list2 li ul li.review_list_rt img{width:100px; margin:20px 0 0 0;} ul.all_list{width:100%;} ul.all_list li{WIDTH:100%; TEXT-ALIGN: center; DISPLAY: inline-block; vertical-align:top; margin:0 0 50px 0; } ul.all_list li img{width:150px;} ul.all_list li p{FONT-SIZE:14px; COLOR: #666; TEXT-ALIGN: center; LINE-HEIGHT: 24px; width:100%; border-bottom:1px solid #ddd; padding:10px 0;} ul.all_list li p.tit_kr{FONT-SIZE:20px; COLOR: #333; TEXT-ALIGN: center; border-bottom:0; padding:0 0 5px 0; font-weight:bold;} ul.all_list li p.tit_en{FONT-SIZE:12px; COLOR: #333; TEXT-ALIGN: center; border-bottom:0; padding:0 0 30px 0;} ul.all_list li p span.sub_tit_en{FONT-SIZE:12px; COLOR: #333; TEXT-ALIGN: center; border-bottom:0; padding:0 0 30px 0;} ul.all_list_2{width:100%;} ul.all_list_2 li{WIDTH:100%; TEXT-ALIGN: center; DISPLAY: inline-block; vertical-align:top; margin:40px 0 50px 0; } ul.all_list_2 li img{width:150px;} ul.all_list_2 li p{FONT-SIZE:14px; COLOR: #666; TEXT-ALIGN: center; LINE-HEIGHT: 24px; width:100%; border-bottom:1px solid #ddd; padding:10px 0;} ul.all_list_2 li p.tit_kr{FONT-SIZE:20px; COLOR: #333; TEXT-ALIGN: center; border-bottom:0; padding:0 0 5px 0; font-weight:bold;} ul.all_list_2 li p.tit_en{FONT-SIZE:12px; COLOR: #333; TEXT-ALIGN: center; border-bottom:0; padding:0 0 30px 0;} ul.all_list_2 li p span.sub_tit_en{FONT-SIZE:12px; COLOR: #333; TEXT-ALIGN: center; border-bottom:0; padding:0 0 30px 0;} ul.all_list50{width:100%;} ul.all_list50 li{WIDTH:100%; TEXT-ALIGN: center; DISPLAY: inline-block; vertical-align:top; margin:0 0 50px 0; } ul.all_list50 li img{width:200px;} ul.all_list50 li p{FONT-SIZE:14px; COLOR: #666; TEXT-ALIGN: center; LINE-HEIGHT: 24px; width:100%; border-bottom:1px solid #ddd; padding:20px 0;} ul.all_list50 li p.tit_kr{FONT-SIZE:20px; COLOR: #333; TEXT-ALIGN: center; border-bottom:0; padding:20px 0 5px 0; font-weight:bold;} ul.all_list50 li p.tit_en{FONT-SIZE:12px; COLOR: #333; TEXT-ALIGN: center; border-bottom:0; padding:0;} ul.all_list50 li p span.sub_tit_en{FONT-SIZE:12px; COLOR: #333; TEXT-ALIGN: center; border-bottom:0; padding:0 0 30px 0;} ul.all_list50_2 li{WIDTH:100%; TEXT-ALIGN: center; DISPLAY: inline-block; vertical-align:top;} ul.all_list50_3{width:100%;} ul.all_list50_3 li{WIDTH:100%; TEXT-ALIGN: center; DISPLAY: inline-block; vertical-align:top; margin:0 0 50px 0; } ul.all_list50_3 li img{width:100%;} ul.all_list50_3 li p{FONT-SIZE:14px; COLOR: #666; TEXT-ALIGN: center; LINE-HEIGHT: 24px; width:100%; border-bottom:1px solid #ddd; padding:20px 0;} ul.all_list50_3 li p.tit_kr{FONT-SIZE:20px; COLOR: #333; TEXT-ALIGN: center; border-bottom:0; padding:20px 0 5px 0; font-weight:bold;} ul.all_list50_3 li p.tit_en{FONT-SIZE:12px; COLOR: #333; TEXT-ALIGN: center; border-bottom:0; padding:0;} ul.all_list50_3 li p span.sub_tit_en{FONT-SIZE:12px; COLOR: #333; TEXT-ALIGN: center; border-bottom:0; padding:0 0 30px 0;} p.ingre{FONT-SIZE: 12px; COLOR: #999; TEXT-ALIGN: center; LINE-HEIGHT: 22px; padding:0 20px; margin:0 0 30px 0;} p.ingre b{color:#333} p.ingre_e{FONT-SIZE: 12px; FONT-FAMILY: Roboto; FONT-WEIGHT: 400; COLOR: #999; TEXT-ALIGN: center; LINE-HEIGHT: 22px; padding:0 20px;} p.ingre_e b{color:#333} p.ingre_left{FONT-SIZE: 12px; COLOR: #999; TEXT-ALIGN: left; LINE-HEIGHT: 22px; padding:0 15px; margin:0 0 30px 0;} p.ingre_e_left{FONT-SIZE: 12px; FONT-FAMILY: Roboto; FONT-WEIGHT: 400; COLOR: #999; TEXT-ALIGN: left; LINE-HEIGHT: 22px; padding:0 15px;} .promotion_wrap{BOX-SIZING: border-box; MAX-WIDTH: 1000px; BORDER-TOP: #ddd 1px solid; BORDER-RIGHT: #ddd 1px solid; WIDTH: 100%; BORDER-BOTTOM: #ddd 1px solid; TEXT-ALIGN: center; MARGIN: 0 auto; BORDER-LEFT: #ddd 1px solid; -webkit-box-sizing: border-box; -moz-box-sizing: border-box} .promotion_wrap p.promotion_tit{FONT-SIZE: 25px; FONT-WEIGHT: bold; COLOR: #333; MARGIN: 20px 0px; LINE-HEIGHT: 35px} .promotion_box{BORDER-TOP: #ddd 1px solid; BACKGROUND: #f9f9f9; BOX-SIZING: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; PADDING:30px 10px; } .promotion_box p.subtit{display:none;} .promotion_box p.mobile_subtit{FONT-SIZE: 20px; LINE-HEIGHT: 30px; MARGIN: 0 0 30px 0; color:#666;} .promotion_box p{FONT-SIZE: 11px; LINE-HEIGHT: 25px; COLOR: #666} .promotion{display:none;} .mobile_promotion{text-align:center;} .faq_box{border-bottom:1px solid #ddd; overflow:hidden; } .faq_box .faq_box_lt{margin:20px 0 0 0;} .faq_box .faq_box_lt p{text-align:left; FONT-SIZE:16px; font-weight:bold; COLOR: #333; LINE-HEIGHT: 26px; padding:0 20px} .faq_box .faq_box_rt{margin:0 0 20px 0} .faq_box .faq_box_rt p{text-align:left; FONT-SIZE:12px; COLOR: #666; LINE-HEIGHT: 22px; padding:0 20px;} p.TEST_img{text-align:center; width:100%;} p.TEST_text{FONT-SIZE:15px; line-height:26px; COLOR: #666; text-align: center; margin:0 0 20px 0;} p.TEST_text_2{FONT-SIZE:15px; line-height:26px; COLOR: #666; text-align:center; margin:0 0 20px 0;} p.TEST_text_3{FONT-SIZE:13px; line-height:26px; COLOR: #666; text-align:center; margin:20px 0 20px 0;} p.TIP_text{FONT-SIZE:15px; COLOR:#666; text-align:center; LINE-HEIGHT:26px;} .TEST_IMG{display:inline-block; text-align:center; margin:0 0 30px 0;} .TEST_IMG_1{width:45%; display:inline-block; position:relative;} .TEST_IMG_1 p{FONT-SIZE:15px; COLOR:#000; text-align:left; position:absolute; bottom:10px; left:10px;} .TEST_IMG_2{width:45%; display:inline-block; position:relative;} .TEST_IMG_2 p{FONT-SIZE:15px; COLOR:#000; text-align:left; position:absolute; bottom:10px; left:10px;} .COLOR_IMG{display:inline-block; text-align:center; margin:0 0 30px 0;} .COLOR_IMG_1{width:40%; display:inline-block; position:relative;} .COLOR_IMG_1 p{FONT-SIZE:17px; line-height:23px; COLOR:#000; text-align:center; margin-top:20px;} .COLOR_IMG_2{width:40%; display:inline-block; position:relative;} .COLOR_IMG_2 p{FONT-SIZE:17px; line-height:23px; COLOR:#000; text-align:cenyer; margin-top:20px;} p.Feature_text{FONT-SIZE:16px; COLOR: #666; TEXT-ALIGN:center; MARGIN:20px; LINE-HEIGHT: 26px} ul.AC_award{margin:0 auto; text-align:center;} ul.AC_award li{width:30%; margin:20px 0; DISPLAY: inline-block; } ul.AC_award li img{width:90%; max-width:150px !important; } /*비디오재생*/ .howto_vedio{text-align:center; margin:30px auto; max-width:1200px; } .embed-container { position:relative; padding-bottom: 56.25%; height:0; overflow: hidden; max-width:100%; } .embed-container iframe, .embed-container object, .embed-container embed, .embed-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .product_motion{margin:0 auto; width:180px; height:180px; margin-bottom:10px;} .product_motion_2{margin:0 auto; width:180px; height:180px; text-align:center;} /*리뷰이벤트*/ .review_lt_box{float:left;} .review_rt_box{float:right;} .review_event_wrap{background:#fff; width:100%; margin:0 auto;} .review_event_con_01{border:1px solid #ddd; box-sizing:border-box; margin:0 0 10px 0; padding:20px 15px; overflow:hidden; position:relative; text-align:center; border-bottom-left-radius:10px; border-bottom-right-radius:10px; } .review_event_con_02{border:1px solid #ddd; box-sizing:border-box; margin:0 0 10px 0; padding:20px 15px; overflow:hidden; position:relative; text-align:center; border-bottom-left-radius:10px; border-bottom-right-radius:10px; } .review_event_con_03{border:1px solid #ddd; box-sizing:border-box; margin:0 0 10px 0; padding:20px 15px; overflow:hidden; position:relative; text-align:center; border-bottom-left-radius:10px; border-bottom-right-radius:10px; } .review_event_con_01 img, .review_event_con_02 img, .review_event_con_03 img{width:100px;} .review_event_wrap p.user_id{font-size:16px; color:#333; font-weight:bold; padding:20px 0 10px 0;} .review_event_wrap p{font-size:13px; color:#666; line-height:23px; text-align:left;} .review_event_wrap p.sale_item{font-size:14px; color:#ec2224; font-weight:bold; padding:10px 0 0 0;} a.more_btn{color:#fff; font-size:14px; background:#ec2224; padding:7px 0; text-align:center; border-radius:20px; width:80px; display:block; position:absolute; bottom:15px; right:15px;} p.review_text{font-size:16px; color:#ec2224; font-weight:bold; LINE-HEIGHT:26px; text-align:center; margin:20px 0; } p.review_text span{font-size:13px; color:#666;} p.hwahae_img{text-align:center; width:100%; margin-bottom:40px;} .sold_out_banner{text-align:center; font-size:13px; line-height:25px; padding:20px 0px 10px 0px; border:1px solid #9b9b9b; width:60px; height:255px;} p.sold_out_tit{text-align:center; font-size:23px; font-weight:bold;} p.BAcare_text{font-size:12px; text-align:center; font-family:Roboto; color:#fff; font-weight:700; padding:5px; background:#ec2224; width:30%; margin:30px auto 10px auto;} p.BAcare_text_2{font-size:17px; text-align:center; font-family:Roboto; color:#fff; font-weight:700; padding:10px; background:#ec2224; width:40%; margin:70px auto -15px auto;} .BAcare_box{text-align:center;} .BAcare_box img{width:200px; margin-top:50px; font-weight:bold;} .text_box p.BAcare_tit_kr {FONT-SIZE:15px; line-height:30px; COLOR:#333; font-weight:bold; padding:10px 0; color:#333;} .ingre_text{font-size:12px; color:#333; font-weight:bold; LINE-HEIGHT:20px; text-align:center; margin:30px 0 0 0;} /* 라인배너 */ .line_banner{background:#66b1e2 url('http://cosrx.playimage.co.kr/cosrx/product/Hydrium-Triple-Ampoule/line_banner_bg2.png') 50% 100% no-repeat; border:0px solid red; margin:0 0 30px 0; text-align:center; padding:20px 0; height:400px;} .line_banner p{color:#fff; font-size:15px; line-height:1.5; font-family: 'Nanum Myeongjo', serif;} .line_banner p.banner_tit_eng{font-size:25px; letter-spacing:1px; text-transform:uppercase; } .line_banner p.banner_tit_kr{font-size:30px; margin:0 0 20px; letter-spacing:-2px;} .line_banner p.banner_text_small{font-size:12px; color:#fff; margin-top:20px;} ul.hy_wrap{margin:0; padding:0;} ul.hy_wrap li{width:100%; margin:0 0 30px 0; } ul.hy_wrap_toner li{width:100%; margin:0 0 30px 0; } table.hytable { border:0px solid red;} table.hytable th{padding:10px ; border-top:1px solid #ddd; border-bottom:1px solid #ddd;} table.hytable td{padding:10px ; border-top:1px solid #ddd; border-bottom:1px solid #ddd;} table.hytable td.color_bg{background:#badcf2; font-size:20px; font-weight:bold; color:#fff; text-align:center; border-top:none; border-bottom:none;} table.hytable td.color_bg2{background:#66b1e2; font-size:20px; font-weight:bold; color:#fff; text-align:center; border-top:none; border-bottom:none;} table.hytable td p{text-align:center; margin:0 0 15px 0;} table.hytable td p img{width:250px;} table.hytable td p.tit{font-size:20px; font-weight:bold;} table.hytable td p.color_tag{color:#66b1e2;} table.hytable th:first-child{border-top:0px solid #ddd;} table.hytable td:first-child{border-top:0px solid #ddd;} table.hytable_1 { border:0px solid red;} table.hytable_1 th{padding:10px ; border-top:1px solid #ddd; border-bottom:1px solid #ddd;} table.hytable_1 td{padding:10px ; border-top:1px solid #ddd; border-bottom:1px solid #ddd;} table.hytable_1 td.color_bg2{background:#359dc6; font-size:20px; font-weight:bold; color:#fff; text-align:center; border-top:none; border-bottom:none;} table.hytable_1 td p{text-align:center; margin:0 0 15px 0;} table.hytable_1 td p img{width:250px;} table.hytable_1 td p.tit{font-size:20px; font-weight:bold;} table.hytable_1 td p.color_tag{color:#66b1e2;} table.hytable_1 th:first-child{border-top:0px solid #ddd;} table.hytable_1 td:first-child{border-top:0px solid #ddd;} .hy_coordi_001{background:#badcf2; font-size:20px; font-weight:bold; color:#fff; text-align:center; padding:10px 0; width:100%; } .hy_coordi_002{background:#66b1e2; font-size:20px; font-weight:bold; color:#fff; text-align:center; padding:10px 0; width:100%; } /* new 상품페이지 */ .con_top{border:0px solid red; margin-top:50px; position:relative;} .con_top img {width:100%;} .con_text_wrap{border:0px solid red; } .con_text, .con_text_right{text-align:center; margin:0 0 30px 0; } p.con_tit{FONT-SIZE:25px; line-height:35px; font-weight:bold; COLOR: #333; margin-bottom:20px; padding:0 15px; } p.con_tit2{font-family:Roboto; font-size:20px; line-height:30px; color:#333; font-weight:400; margin-bottom:20px; padding:0 15px; } p.con_info_text{font-size:15px; line-height:25px; color:#333; margin-bottom:20px; padding:0 15px; } p.con_tit3{font-size:15px; line-height:25px; font-weight:bold; color:#333; padding:0 15px;} .con_001_img, .con_001_img_left{border:0px solid red; text-align:right; width:100%;} .con_002{border:0px solid orange; width:100%; margin-top:20px; margin-bottom:50px; position:relative; overflow:hidden; } .con_003{border:0px solid orange; width:100%; margin-top:20px; margin-bottom:30px; position:relative; overflow:hidden; } .con_002 p.title, .con_003 p.title{font-size:15px; line-height:25px; font-weight:bold; margin:0 0 10px 0; padding:0 15px;} .con_002 p, .con_003 p{font-size:15px; line-height:25px; padding:0 15px;} .con_002_left, .con_003_left{width:100%; } .con_002_right, .con_003_right{width:100%; margin-top:20px;} .con_002_right_video, .con_003_right_video{width:100%; margin-top:20px;} .con_002_right_video video, .con_003_right_video video{width:100%; height:100%;} .con_004{border:0px solid orange; width:100%; position:relative; overflow:hidden; } .con_004 p.title, .con_004_text p.title, .con_004_text_2 p.title{font-size:15px; line-height:25px; font-weight:bold; margin:0 0 10px 0; padding:0 15px;} .con_004 p, .con_004_text p, .con_004_text_2 p{font-size:15px; line-height:25px; padding:0 15px;} .con_004_right, .con_004_text, .con_004_text_2{width:100%; margin-top:20px; } .con_004_text_2{width:100%; margin-top:20px; } .con_006_text p.title {text-align:center; font-size:16px; font-weight:bold; color:#000; margin-top:20px; } .con_004_left{border:0px solid red; width:100%; margin-top:20px;} .con_004_left video{width:100%; height:100%;} .con_004_left_2{border:0px solid red; width:100%;} .con_004_left video_2{width:100%; height:100%;} .con_007_text {margin-top: 20px;} .con_007_text li + li{margin-top: 20px;} .con_007_text li strong{font-size: 15px; font-weight: bold; padding: 0 15px;} .con_007_text li p{ font-size: 15px; margin-top: 17px; padding: 0 15px; line-height: 25px;} .con_center{border:0px solid orange; width:100%; margin-top:50px; position:relative; overflow:hidden; } .con_center img {width:100%;} .con_center_icon, .con_center_icon2{border:0px solid red;} .con_center_icon ul, .con_center_icon2 ul{margin:30px auto; border:0px solid red;} .con_center_icon li, .con_center_icon2 li{display: inline-block; width:25%; border:0px solid red; vertical-align:top; text-align:center;} .con_center_icon li img, .con_center_icon2 img{width:50px;} .con_center_icon li p, .con_center_icon2 p{FONT-SIZE:15px; COLOR: #666; TEXT-ALIGN: center; MARGIN:30px 0 ; line-height:26px;} .con_center_icon3{border:0px solid red;} .con_center_icon3 ul{margin:30px auto; border:0px solid red;} .con_center_icon3 li{display: inline-block; width:25%; border:0px solid red; vertical-align:top; text-align:center;} .con_center_icon3 img{width:50px;} .con_center_icon3 p{FONT-SIZE:15px; COLOR: #666; TEXT-ALIGN: center; MARGIN:30px 0 ; line-height:26px;} .con_center_text_wrap, .con_center_text_wrap_2{width:100%; border:0px solid blue; z-index:9999;} .con_center_text{ } .con_center_text p.title, .con_center_text_2 p.title{font-size:15px; line-height:25px; font-weight:bold; margin:0 0 10px 0; padding:0 15px;} .con_center_text_3 p.title {font-size:15px; line-height:25px; font-weight:bold; margin:20px 0 10px 0; padding:0 15px;} .con_center_text p, .con_center_text_2 p, .con_center_text_3 p{font-size:15px; line-height:25px; padding:0 15px;} .con_center_left, .con_center_left2{width:100%; margin-top:20px;} .con_center_right, .con_center_right2, .con_center_right3, .con_center_right4{width:100%; margin-top:20px;} .con_center_2, .con_center_6{border:0px solid orange; width:100%; margin-top:20px; position:relative; overflow:hidden; } .con_center_2 img{width:100%;} .con_center_2_text_wrap, .con_center_2_text_wrap2{width:100%; border:0px solid blue; z-index:9999;} .con_center_2_text{ } .con_center_2_text p.title, .con_center_3_text p.title{font-size:15px; line-height:25px; font-weight:bold; margin:0 0 10px 0; padding:0 15px;} .con_center_2_text p, .con_center_3_text p{font-size:15px; line-height:25px; padding:0 15px;} .con_center_2_left, .con_center_2_left2{width:100%; border:0px solid red; margin-top:20px;} .con_center_2_text p.title_01{text-align:center; font-size:16px; font-weight:bold; color:#000; margin-top:20px;} .con_center_3{border:0px solid orange; width:100%; margin-top:20px; position:relative; } .con_center_3 img{width:100%;} .con_center_3_left{border:0px solid green; width:100%; margin-top:20px; } .con_center_3_left_2{border:0px solid green; width:100%;} .con_center_3_left p.title, .con_center_3_left_2 p.title_2, .con_center_3_right p.title {font-size:15px; line-height:25px; font-weight:bold; margin:0 0 10px 0; padding:0 15px;} .con_center_3_left p, .con_center_3_left_2 p, .con_center_3_right p{font-size:15px; line-height:25px; margin:0 0 30px 0; padding:0 15px;} .con_center_3_right{width:100%; border:0px solid blue; margin-top:20px; } .con_center_3_right video{width:100%;} .con_center_4{border:0px solid orange; width:100%; margin-top:20px; position:relative; } .con_center_4_left{width:100%;} .con_center_4_left video{width:100%;} .con_center_4_left p.title{font-size:15px; line-height:25px; font-weight:bold; margin:0 0 10px 0; padding:0 15px;} .con_center_4_left p{font-size:15px; line-height:25px; margin:0 0 30px 0; padding:0 15px;} .con_center_4_right{ width:100%; } .con_center_4_right_2{ width:100%; } .con_center_4_right p.title{font-size:15px; line-height:25px; font-weight:bold; margin:0 0 10px 0; padding:0 15px;} .con_center_4_right p.title_2, .con_center_4_right_2 p.title_2{font-size:15px; line-height:25px; font-weight:bold; margin:20px 0 10px 0; padding:0 15px;} .con_center_4_right p, .con_center_4_right_2 p{font-size:15px; line-height:25px; margin:0 0 30px 0; padding:0 15px;} .con_center_4_text{margin-top: 20px;} .con_center_4_text strong.title_02 {font-size: 15px; font-weight: bold; padding: 0 15px;} .con_center_4_text p.title_03 {font-size: 15px; margin-top: 17px; padding: 0 15px; line-height: 25px;} .con_howto{border:0px solid orange; width:100%; margin-top:20px; position:relative; } .con_howto img{width:100%;} .con_howto_left{border:0px solid green; width:100%;} .con_howto_right { width:100%; border:0px solid blue; margin-top: 20px;} .con_howto_right p.title_05 {font-size: 15px; font-weight: bold; line-height: 25px; margin-top: 20px;} .con_howto_right p.title_06 {font-size: 15px; margin-top: 17px; padding: 0 15px; line-height: 25px;} .con_howto_right p.title{font-size:15px; line-height:25px; font-weight:bold; margin:0 0 10px 0; padding:0 15px; } .con_howto_right p{font-size:15px; line-height:25px; margin:0 0 30px 0; padding:0 15px; } .con_howto_right .con_howto_right_video{border:0px solid green; } .con_howto_right .con_howto_right_video video{width:100%;} .new_test_img{display:inline-block; text-align:center; margin:0 0 30px 0;} .new_test_img_1{width:45%; display:inline-block; position:relative;} .new_test_img_1 p{FONT-SIZE:15px; COLOR:#000; text-align:left; position:absolute; bottom:10px; left:10px;} .new_test_img_2{width:45%; display:inline-block; position:relative;} .new_test_img_2 p{FONT-SIZE:15px; COLOR:#000; text-align:left; position:absolute; bottom:10px; left:10px;} .test_icon{} .test_icon img{width:90px; margin:0 0 0 10px;} .test_img{border:0px solid #ddd; margin:0 0 30px 0; text-align:center;} /*하이드리움 프레스킷*/ .contents-center{ background:#f7f7f7; text-align:center;} .contents-center .contents_01{overflow:hidden; } .contents-center .contents_01 img{width:100%;} .contents-center .contents_01 .contents_text_box{ margin:0 0 20px 0;} .contents-center .contents_01 .contents_text_box p{font-size:14px; margin:0 15px 30px 15px; color:#333; line-height:24px;} .contents-center .contents_01 .contents_text_box p.tit_2{font-size:13px; margin:0 15px 20px 15px; color:#04b3a9; line-height:23px; font-weight:bold;} .contents-center .contents_01 .contents_text_box p.tit{font-size:22px; line-height:32px; margin:0 15px 20px 15px; font-weight:bold;} .contents-center .contents_01 .contents_text_box p.tit span{font-size:15px;} .contents-center .contents_01 .contents_text_box p.contents-center-btn{width:70px; height:50px; padding:20px 0 0 0; border:1px solid #333; display:block; font-size:15px; line-height:15px; color:#333; border-radius:50%; text-align:center; margin:0 auto; } /* 타임특가 */ .countDownLayer{border:0px solid red; margin:20px 0 0 0; } progress{width:100%; height:15px; -webkit-appearance:none; -moz-appearance:none; appearance: none; color:#e55d4d; background:#eee; border:0px solid #e55d4d; box-sizing:border-box; } progress::-webkit-progress-bar {background:#eee; } progress::-webkit-progress-value{background:#e55d4d;} .time_rt{text-align:center; color:#000; font-size:13px;} .time_rt span{font-weight:bold; font-size:16px;} /*뉴 상세페이지*/ .new_wrap, .new_wrap_1200{font-family: 'Noto Sans KR', sans-serif;} .new_wrap_1200 h1{margin:100px 0 10px 0 !important; font-size:2.5em !important; font-weight: 700 !important; letter-spacing: -1px; text-align:center !important;} .new_wrap_1200 h2{margin:0 0 10px 0; font-size:1.8em !important; font-weight: 700; text-align:center;} .new_wrap_1200 h3{margin:0 0 50px 0; font-size:1.3em !important; font-weight: 400; letter-spacing: -1px; text-align:center;} .main_type{font-size:25px; font-weight:600; color:#000; line-height:1.2; text-align:center;} .piek{font-size:15px; font-weight:lighter; color:#000; line-height:1; text-align:center; margin-top:5px; font-family: 'Piek-Light';} .piek span{font-size:10px; color:#000; font-family:'Noto Sans KR', sans-serif; margin-top:21px;} .new_img:first-child{margin-top:0;} .new_img img {width:100%; margin-top:40px;} .new_img img.top_division {margin-top:80px;} .new_img p{font-size:14px; color:#000; margin-top:60px; text-align:center; line-height:1.5; letter-spacing:-1px; } .new_img p b{font-size:22px; font-weight:600; display:block; line-height:1.5; } .new_img p strong{font-size:12px;} .new_img span{font-weight:700; color:#f54a39;} .new_img video {margin:40px 0 0 0; width:100%;} .new_img strong{font-size:22px; font-weight:600; display:block; line-height:1.5; margin-top:60px; margin-bottom:-50px; text-align:center; } .new_img .new_gif {text-align:center;} .new_img .new_gif img {width:96%;} .new_img2{margin-top:160px;} .new_img2 img{width:100%; margin-top:40px;} .new_img2 img.bottom_img{width:100%; margin-bottom:40px;} .new_img2 video {margin:40px 0 0 0; width:100%;} .new_img3{width:1000px; margin-top:50px; padding-bottom: 155%;} .new_img3 ul li{width:100%; font-size:15px; color:#000; text-align: center;} .vod_01{float:left;} .vod_01 video {width:100%; padding:5% 0;} .vod_02{float:right; padding:5% 0;} .vod_02 video {width:100%; padding:5% 0;} .img_detail{font-size:12px; text-align:center; margin-top:3%; color:#686868;} .img_story{position:relative;} .img_story > p{position:absolute; top:5%; left:0; width:100%; font-size:22px; text-align:center; line-height:1.5; font-weight:bold; letter-spacing:-1px;} .img_story > p > span{ color:#000; font-weight:normal; font-size:16px; line-height:1.3; display:inline-block; } .img_ingre{position:relative; } .img_ingre img{margin:0;} .img_ingre_text{width:50% !important; height:260px; position:absolute; bottom:50%; right:0; margin-bottom:-140px; display:table;} .img_ingre_text > p{display:table-cell; font-size:15px; text-align:left; line-height:1.8; font-weight:bold; letter-spacing:-1px; vertical-align:middle; margin:0; color:#0c5f35;} .img_ingre_text_info{position:absolute; top:10px; right:10px; font-weight:normal; font-size:11px; color:#999; text-align:right;} .img_why{position:relative; } .img_why_text{width:100%; height:220px; position:absolute; bottom:50%; left:0; margin-bottom:-140px; display:table;} .img_why_text > p{display:table-cell; font-size:20px; text-align:center; line-height:20px; font-weight:bold; letter-spacing:-1px; vertical-align:middle; margin:0;} .img_why_text > p > span{font-weight:normal; font-size:14px; color:#333; } .img_keypoint{position:relative; margin:30px 0 0 0;} .img_keypoint > p{position:absolute; top:10%; left:0; width:100%; font-size:18px; text-align:center; line-height:1.5; font-weight:bold; letter-spacing:-1px;} .img_title{position:relative;} .img_title > p{position:absolute; top:2%; left:0; width:100%; font-size:22px; text-align:center; line-height:1.2; font-weight:bold; letter-spacing:-1px;} .img_title > p > span{ font-family:'Piek-Light'; color:#000; font-size:16px; font-weight:normal;} .img_title > p > span.gothicfont {font-family:'Noto Sans KR'; color:#000; font-size:16px; font-weight:bold; } .banner_title1{font-size:22px; text-align:center; line-height:1.2; font-weight:700; letter-spacing:-1px; margin-top:40px; } .banner_title2{font-family:'Piek-Light'; color:#000; font-size:15px; text-align:center; font-weight:600; letter-spacing:-1px; margin:10px 0; } .banner_title3{color:#000; font-size:12px; text-align:center; font-weight:normal; letter-spacing:-0.5px; margin-bottom:40px;} .first_bg { width: 100%; height: 60vh; position: relative } .second_bg { width: 100%; height: 40vh; position: relative } .bg_banner_wrap { clip: rect(0, auto, auto, 0); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .bg_banner_title, .bg_banner{ position: fixed; display: block; top: 0; left: 0; width: 100%; height:100%; background-size:contain; background-position: center center; background-repeat:no-repeat; } .sub_tex{font-size:9px; color:#000; text-align:center; margin-top:10px;} .directions{font-size:13px; line-height:20px; letter-spacing:-1px; margin-top:15px; padding:0 10px; font-weight:500;} .ingredients {font-size:11px; color:#000; line-height:17px; text-align:center; margin:8px 20px 0 20px; font-weight:500; word-break:keep-all;} .how_img{margin-top:45px; text-align:center;} .how_img img {width:100%;} .how_img p{font-size:18px; color:#000; text-align:center; font-weight:500; margin:40px 0 20px 0; line-height:22px;} .new_icon{ margin:50px auto 0 auto; overflow:hidden; } .new_icon ul{text-align:center;} .new_icon ul li{display:inline-block; width:calc(100%/3.3); text-align:center; } .new_icon ul li + li {margin-left:0;} .new_icon ul li img{width:50% !important; margin:0 auto; } .new_icon > ul > li > p{font-size:15px; color:#000; font-weight:600; margin-top:20px;} .new_icon_1 { margin:50px auto 0 auto; overflow:hidden; } .new_icon_1 ul{text-align:center;} .new_icon_1 ul li{display:inline-block; width:calc(100%/4.5); text-align:center; } .new_icon_1 ul li + li {margin-left:0;} .new_icon_1 ul li img{width:50% !important; margin:0 auto;} .new_icon_1 > ul > li > p{font-size:15px; color:#000; font-weight:600; margin-top:20px;} .naver_review{margin-top:45px; width:100%; background-color:#f1f1f1; padding-bottom:20px; overflow:hidden;} .riview_sub {font-size:10px; color:#555; text-align:center;} .bubble_right { position: relative; width:80%; background: #FFFFFF; border-radius: 10px; border: #03cf5d solid 3px; margin:50px 6%; padding: 4%;} .bubble_right:after { content: ''; position: absolute; border-style: solid; border-width: 21px 20px 0; border-color: #FFFFFF transparent; display: block; width: 0; z-index: 1; bottom: -21px; right: 40px; } .bubble_right:before { content: ''; position: absolute; border-style: solid; border-width: 24px 23px 0; border-color: #03cf5d transparent; display: block; width: 0; z-index: 0; bottom: -26px; right: 37px; } .bubble_right p:nth-of-type(1){font-size:15px; color:#000; text-align:center; line-height:25px;} .bubble_right p:nth-of-type(2){font-size:13px; color:#555;text-align:right;} .bubble_left { position: relative; width: 80%; background: #FFFFFF; border-radius: 10px; border: #03cf5d solid 3px; margin:50px 6%; padding: 4%; } .bubble_left:after { content: ''; position: absolute; border-style: solid; border-width: 21px 20px 0; border-color: #FFFFFF transparent; display: block; width: 0; z-index: 1; bottom: -21px; left: 40px; } .bubble_left:before { content: ''; position: absolute; border-style: solid; border-width: 24px 23px 0; border-color: #03cf5d transparent; display: block; width: 0; z-index: 0; bottom: -26px; left: 37px; } .bubble_left p:nth-of-type(1){font-size:15px; color:#000; text-align:center; line-height:25px;} .bubble_left p:nth-of-type(2){font-size:13px; color:#555;text-align:right;} .new_ingredient { } .new_ingredient img { margin:10px 0; width:100%;} .new_ingredient dl{margin:0 0 20px 0; overflow:hidden; } .new_ingredient dt{float:left; font-size:15px; color:#000; font-weight:bold; width:40%;} .new_ingredient dt span{font-size:10px; font-weight:100; font-family: 'Piek-Light';} .new_ingredient dd{float:right; width:60%; font-size:11px; color:#000;} .new_ingredient p{font-size:11px; color:#999; text-align:right;} .pad_keypoint{position:relative; width:100%; margin-top:70px; text-align:center;} .pad_keypoint dl{position:absolute; top:0; left:0; padding:40px 0 0 10px; width:60%; text-align:center;} .pad_keypoint dl dt{font-size:12px; color:#f4301a; font-weight:bold; text-decoration: underline;} .pad_keypoint dl dd{font-size:11px; color:#000; margin:5px 0 10px 0; line-height:14px; letter-spacing:-1px;} .pad_keypoint img{width:100%;} .reason{position:relative; width:100%; margin-top:30px; text-align:center;} .reason dl{position:absolute; top:0; left:0; padding:40px 10% 0 10%; width:80%; text-align:center;} .reason dl dt{font-size:14px; color:#333; font-weight:bold; } .reason dl dt.reasontitle{font-size:18px; color:#0b6238; font-weight:bold; margin:0 0 30px 0} .reason dl dd{font-size:12px; color:#333; margin:5px 0 20px 0; line-height:1.3; letter-spacing:-1px;} .reason img{width:100%;} .pad_emblem{width:100%; margin:30px auto; overflow:hidden;text-align:center;} .pad_emblem li{display:inline-block; width:32.5%; text-align:center; font-size:12px; margin:20px 0 0 0; vertical-align:top;} .pad_emblem li img{max-width:80% !important;} .pad_emblem li p strong{font-size:12px; color:#000;} .pad_emblem2{width:100%; margin:30px auto; overflow:hidden;text-align:center;} .pad_emblem2 li{display:inline-block; width:48%; text-align:center; font-size:12px; margin:20px 0 0 0; vertical-align:top;} .pad_emblem2 li img{max-width:80%;} .pad_emblem2 li p strong{font-size:12px; color:#000;} .pad_emblem3{width:100%; margin:30px auto; overflow:hidden;text-align:center;} .pad_emblem3 li{display:inline-block; width:49%; text-align:center; font-size:12px; vertical-align:top;} .pad_emblem3 li img{max-width:100%;} .pad_emblem3 li p{display:block; border-bottom:1px solid #d8d8d8; padding:10px 0; } .pad_emblem3 li p strong{font-size:12px; color:#000;} .new_table{ margin:7% auto; overflow:hidden;} .new_table li{float:left; text-align:center; width:calc(100% / 3);} .new_table > li > p > img{width:80%;} .new_table > li > p{border-top:1px solid #e2e2e2; padding:10px 0; font-size:10px; color:#000; font-weight:600; line-height:18px;} .new_table > li > p:last-child{width:100%; border-bottom:1px solid #e2e2e2;} .new_table1 { margin:7% auto; overflow:hidden;} .new_table1 li{float:left; text-align:center; width:calc(100% / 2);} .new_table1 > li > p > img{width:80%;} .new_table1 > li > p{border-top:1px solid #e2e2e2; padding:10px 0; font-size:15px; color:#000; font-weight:600; line-height:30px;} .new_table1 > li > p:first-child{border-top:hidden;} .new_table1 > li > p:last-child{width:100%; border-bottom:1px solid #e2e2e2;} .new_link {position:relative;} .new_link ul li a.link_box_1{position:absolute; top:14%; left:15%; width:140px; height:82px; } .new_link ul li a.link_box_2 {position:absolute; bottom: 7%; left:22%; width:120px; height:89px;} .new_link ul li a.link_box_3{position:absolute; top:28%; right:8%; width:94px; height:159px; } dl.new_coordi{overflow:hidden; padding:10px 0 0 10px; margin:0 0 30px 0; } dl.new_coordi dt{font-size:12px; color:#000; font-weight:bold; float:left; width:25%; } dl.new_coordi dd{font-size:12px; color:#333; float:left; margin-left:3%; width:72%; } .line_sheet { width: 100%; border: 1px solid #444444; border-collapse: collapse; margin-top:50px; } .sheet_01 { text-align:center; } .sheet_01 td img { width:100%; } .sheet_01 th { border: 1px solid #e2e2e2; padding: 10px; } .sheet_01 td { border: 1px solid #e2e2e2; padding: 10px; } .sheet_02 th { border: 1px solid #e2e2e2; padding: 10px; } .sheet_02 td { border: 1px solid #e2e2e2; padding: 8px; text-align: center; font-size: 10px; line-height: 18px; } .fullfit_ev{margin-top:70px;} .fullfit_ev p{font-size:16px; text-align:center; line-height:25px; padding:0 15px;} .fullfit_ev p img{width:110%;} .fullfit_ev p b{font-size:21px; font-weight:bold;} .fullfit_ev p strong{font-weight:600; color:#000; } .fullfit_ev p em{font-weight:600; color:#000; line-height:22px;} .fullfit_ev p span{font-size:21px; font-weight:500;} /*배송비 프로모션*/ .ev_box{position:relative; margin:20px auto;} .ev_box p{font-size:25px; color:#000; text-align:center; margin-top:30px;} .ev_box img{width:100%;} .ev_logo{position:absolute; bottom:-7%; } .ev_top {padding-top:24%;} .ev_top p b{font-size:23px; color:#000; text-align:center; font-weight: 600; } .ev_top p{font-size:18px; color:#000; line-height: 30px; text-align:center; margin-top:32px; } .ev_top1 {margin-top:-9%;} .ev_top1 p {font-size:14px; color:#000; text-align:center; } .ev_box1{position:relative; margin:42px auto; } .ev_box1 img{width:100%;} p.more_text{ font-size:16px; color:#000; text-align:center;} .ev_main_text{margin-top:158px; } .ev_main_text p b{font-size:23px; line-height: 1; text-align:center; font-weight: 600;} .ev_main_text p{font-size:16px; color:#000; line-height: 28px; text-align:center; margin-top:40px;} p.ev_sub{font-size:18px; color:#000; line-height: 28px; text-align:center; margin-top:40px; font-weight: 600;} a.ev_more {display:inline-block; position:absolute; bottom:-18%; left:50%; transform:translateX(-50%); width:28%; line-height:43px; background-color:#000; font-size:16px; color:#fff; font-weight:500; padding:1% 6%; } a.ev_more:hover {content:""; border:1px solid #000; color:#000; background-color:#fff;} a.ev_more1 {display:inline-block; position:absolute; top:32%; left:50%; transform:translateX(-50%); width:32%; line-height:43px; background-color:#000; font-size:14px; color:#fff; font-weight:500; padding:1% 13%; } a.ev_more1:hover {content:""; border:1px solid #000; color:#000; background-color:#fff;} /*이벤트배너*/ .eventBanner img{width:100%;} /*화해그래프*/ .hh_graph_bg{position:relative; height:100%; padding:10% 0; margin-top:40px; } .hh_graph_tit_1{border:2px solid #23d2d4; width:200px !important; padding:5px; text-align:center; font-size:12px; font-weight:bold; color:#23d2d4; margin:0 auto; border-radius:30px;} .hh_graph_tit_1_white{border:2px solid #fff; width:200px !important; padding:5px; text-align:center; font-size:12px; font-weight:bold; color:#fff; margin:0 auto; border-radius:30px;} .hh_graph_tit_2{margin-top:10px;} .hh_graph_tit_2 p{text-align:center; font-size:20px; color:#000; line-height:1.4; } .hh_graph_tit_3{ margin:10% 0 0 0; padding:0 0 0 35%; width:60% !important;} .hh_graph_tit_3 img{width:30% !important;} .hh_graph{margin:0 0 0 35%; width:200px !important;} .hh_graph_text{ margin:10% 0 0 0;} .hh_graph_text p.title{float:left; font-size:12px; width:80%; margin:0 0 5px 0; } .hh_graph_text p.percent{float:right; font-size:16px; font-weight:bold; color:#23d2d4; width:20%; text-align:right;} .clear{clear:both;} #myProgress { width: 100%; height: 5px; background-color: #ddd; } #myBar1, #myBar2, #myBar3, #myBar4, #myBar5, #myBar6 { width: 1%; height: 5px; background-color: #23d2d4; } /*모공패드_만족도*/ .pore_graph_bg{position:relative; height:100%; padding:10% 0; margin-top:100px; } .pore_graph_tit_1{border:2px solid #7492c4; width:115px !important; padding:5px; text-align:center; font-size:12px; font-weight:bold; color:#7492c4; margin:0 auto; border-radius:30px;} .pore_graph_tit_2{margin-top:10px;} .pore_graph_tit_2 p{text-align:center; font-size:20px; color:#000; line-height:1.4; } .pore_graph_tit_3{ margin:10% 0 0 0; padding:0 0 0 35%; width:60% !important;} .pore_graph_tit_3 img{width:30% !important;} .pore_graph{margin:0 auto; width:200px !important;} .pore_graph_text{ margin:10% 0 0 0;} .pore_graph_text p.title{float:left; font-size:12px; width:80%; margin:0 0 5px 0; } .pore_graph_text p.percent{float:right; font-size:16px; font-weight:bold; color:#7492c4; width:20%; text-align:right;} .clear{clear:both;} #myProgress { width: 100%; height: 5px; background-color: #ddd; } #poreBar1, #poreBar2, #poreBar3, #poreBar4, #poreBar5, #poreBar6 { width: 1%; height: 5px; background-color: #7492c4; } /*모공패드_만족도 end*/ /*차트 그래프*/ canvas {-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;} .chart_wrap{ position:relative; margin:0 auto;} .chart_wrap img{width:50%; position:absolute; top:50%; left:50%; margin-top:-25%; margin-left:-25%;} .pdp-detail-chart{ margin:0 auto; } @keyframes chartjs-render-animation{from{opacity:.99}to{opacity:1}}.chartjs-render-monitor{animation:chartjs-render-animation 1ms}.chartjs-size-monitor,.chartjs-size-monitor-expand,.chartjs-size-monitor-shrink{position:absolute;direction:ltr;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1}.chartjs-size-monitor-expand>div{position:absolute;width:1000000px;height:1000000px;left:0;top:0}.chartjs-size-monitor-shrink>div{position:absolute;width:200%;height:200%;left:0;top:0} /*차트 그래프 end*/ /*스킨케어 step*/ .skincare-step { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; padding:50px 0; text-align: center; margin: 150px 0 0 0; } .skincare-step .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .skincare-step .bg_cica { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:url('//cosrxinc.jpg3.kr/cosrximg/cosrx/product/Pure-Fit-Cica-Oil/cica_oil_bg2.jpg')100% 100% no-repeat; background-size: cover; } .skincare-step .bg img.bg_img{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100% !important; -o-object-fit: cover; object-fit: cover; } .skincare-step .bg img.bg_img1{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height:100% !important; } .skincare-step h3 { position: relative; width:100%; margin: 0 auto 50px; text-align: center; word-break: keep-all; word-wrap: break-word; font-size: 15px; line-height: 1.2; font-family: Piek-Light; font-weight: lighter; } .skincare-step h3 em { font-size: 25px; font-weight: 600; color: #000; line-height: 1.2; font-family: 'Noto Sans KR'; margin:0 0 5px 0; } .skincare-step h4 { position: relative; width:100%; margin: 0 auto 30px; text-align: center; font-family: 'Noto Sans KR'; font-size: 20px !important; line-height: 1.2; font-weight:700; } .skincare-step dl{position: relative; width:85%; margin:0 auto; text-align:center; letter-spacing:-1px;} .skincare-step dt{font-size:14px; font-weight:700; line-height:1.6;} .skincare-step dd{font-size:14px; line-height:1.6; margin:20px 0 60px 0;} .skincare-step_carousel{ width:90% !important; margin: 0 auto; } .skincare-step .skincare-step-wrapper { display: flex; width:100%; height: 100%; margin-left: auto; margin-right: auto; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; box-sizing: content-box; } .skincare-step .skincare-step-box { width: 33.3% important; height: 100%; position: relative; } .skincare-step_thumb { position: relative; } .skincare-step_thumb img{ width:100%; max-width:300px; } .skincare-step_cap { display: inline-block; margin: 0 0 30px 0; border-radius: 1em; padding: .25em 2em; font-size: 10px; line-height: 1.6; color: #000; text-transform: uppercase; } .skincare-step_name { line-height:1.2; color: #000; font-size: 12px; word-break: keep-all; word-wrap: break-word; font-weight: 700; } .skincare-step_category { font-size: 11px; color: #000; margin:5px 0 0 0 } .skincare-step_sun{ margin-top:2px; } .skincare-step_link, .skincare-step_link2, .skincare-step_link3, .skincare-step_ac, .skincare-step_fullfit, .skincare-step_balancium, .skincare-step_cica, .skincare-step_poreless { display: block; position: relative; } .skincare-step_link::before { content: ''; position: absolute; left: 0; bottom: 65px; width: 100%; border-bottom: 2px solid #f8be74; } .skincare-step_link::after { content: ''; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; left: 50%; width: 10px; height: 10px; bottom: 65px; border-radius: 50%; margin-bottom: -4px; margin-left: -5px; background-color: #f8be74; } .skincare-step_link2::before { content: ''; position: absolute; left: 0; bottom: 65px; width: 100%; border-bottom: 2px solid #f8c6d2; } .skincare-step_link2::after { content: ''; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; left: 50%; width: 10px; height: 10px; bottom: 65px; border-radius: 50%; margin-bottom: -4px; margin-left: -5px; background-color: #f8c6d2; } .skincare-step_link3::before { content: ''; position: absolute; left: 0; bottom: 65px; width: 100%; border-bottom: 2px solid #a9c1d9; } .skincare-step_link3::after { content: ''; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; left: 50%; width: 10px; height: 10px; bottom: 65px; border-radius: 50%; margin-bottom: -4px; margin-left: -5px; background-color: #a9c1d9; } .skincare-step_ac::before { content: ''; position: absolute; left: 0; bottom: 85px; width: 100%; border-bottom: 2px solid #c3181e; } .skincare-step_ac::after { content: ''; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; left: 50%; width: 10px; height: 10px; bottom: 85px; border-radius: 50%; margin-bottom: -4px; margin-left: -5px; background-color: #c3181e; } .skincare-step_balancium::before { content: ''; position: absolute; left: 0; bottom: 85px; width: 100%; border-bottom: 2px solid #ee8483; } .skincare-step_balancium::after { content: ''; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; left: 50%; width: 10px; height: 10px; bottom: 85px; border-radius: 50%; margin-bottom: -4px; margin-left: -5px; background-color: #ee8483; } .skincare-step_cica::before { content: ''; position: absolute; left: 0; bottom: 85px; width: 100%; border-bottom: 2px solid #1d3911; } .skincare-step_cica::after { content: ''; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; left: 50%; width: 10px; height: 10px; bottom: 85px; border-radius: 50%; margin-bottom: -4px; margin-left: -5px; background-color: #1d3911; } .skincare-step_fullfit::before { content: ''; position: absolute; left: 0; bottom: 100px; width: 100%; border-bottom: 2px solid #fabf49; } .skincare-step_fullfit::after { content: ''; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; left: 50%; width: 10px; height: 10px; bottom: 100px; border-radius: 50%; margin-bottom: -4px; margin-left: -5px; background-color: #fabf49; } .skincare-step_poreless::before { content: ''; position: absolute; left: 0; bottom: 85px; width: 100%; border-bottom: 2px solid #7293c0; } .skincare-step_poreless::after { content: ''; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; left: 50%; width: 10px; height: 10px; bottom: 85px; border-radius: 50%; margin-bottom: -4px; margin-left: -5px; background-color: #7293c0; } .item-deco { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow:hidden; } .item-deco-bubble .bubble { position: absolute; width: 10px; height: 10px; background-image: url(//cosrxinc.jpg3.kr/cosrximg/cosrx/product/Real_fit_Vitamin_E/bubble.png); background-size: cover; opacity: 1; } @-webkit-keyframes animateBubble { 0% { margin-top: 100%; } 100% { margin-top: -100%; } } @-moz-keyframes animateBubble { 0% { margin-top: 100%; } 100% { margin-top: -100%; } } @keyframes animateBubble { 0% { margin-top: 100%; } 100% { margin-top: -100%; } } @-webkit-keyframes sideWays { 0% { margin-left:0px; } 100% { margin-left:50px; } } @-moz-keyframes sideWays { 0% { margin-left:0px; } 100% { margin-left:50px; } } @keyframes sideWays { 0% { margin-left:0px; } 100% { margin-left:50px; } } .x1 { -webkit-animation: animateBubble 2s linear infinite, sideWays 0.5s ease-in-out infinite alternate; -moz-animation: animateBubble 2s linear infinite, sideWays 0.5s ease-in-out infinite alternate; animation: animateBubble 2s linear infinite, sideWays 0.5s ease-in-out infinite alternate; } .x2 { -webkit-animation: animateBubble 4s linear infinite, sideWays 0.7s ease-in-out infinite alternate; -moz-animation: animateBubble 4s linear infinite, sideWays 0.7s ease-in-out infinite alternate; animation: animateBubble 4s linear infinite, sideWays 0.7s ease-in-out infinite alternate; } .x3 { -webkit-animation: animateBubble 3s linear infinite, sideWays 0.4s ease-in-out infinite alternate; -moz-animation: animateBubble 3s linear infinite, sideWays 0.4s ease-in-out infinite alternate; animation: animateBubble 3s linear infinite, sideWays 0.4s ease-in-out infinite alternate; } .x4 { -webkit-animation: animateBubble 5s linear infinite, sideWays 0.6s ease-in-out infinite alternate; -moz-animation: animateBubble 5s linear infinite, sideWays 0.6s ease-in-out infinite alternate; animation: animateBubble 5s linear infinite, sideWays 0.6s ease-in-out infinite alternate; } /*슬라이드*/ .section input[id*="slide"] {display:none;} .section .slidewrap {max-width:1000px;margin:0 auto;} .section .slidelist {white-space:nowrap;font-size:0;overflow:hidden;position:relative;} .section .slidelist > li {display:inline-block;vertical-align:middle;width:100%;transition:all .5s;} .section .slidelist > li > a {display:block;position:relative;} .section .slidelist > li > a img {width:100%;} .section .slidelist label {position:absolute;z-index:10;top:55%;transform:translateY(-50%);padding:40px;cursor:pointer;} .section .slidelist .textbox {position:absolute;z-index:1;top:25%;left:60%;transform:translate(-50%,-50%);line-height:1.6;text-align:left;} .section .slidelist .textbox h3 {font-size:14px;color:#fff;;transform:translateY(30px);transition:all .5s;} .section .slidelist .textbox p {font-size:14px;color:#fff;opacity:0;transform:translateY(30px);transition:all .5s;} /* input에 체크되면 슬라이드 효과 */ .section input[id="slide01"]:checked ~ .slidewrap .slidelist > li {transform:translateX(0%);} .section input[id="slide02"]:checked ~ .slidewrap .slidelist > li {transform:translateX(-100%);} .section input[id="slide03"]:checked ~ .slidewrap .slidelist > li {transform:translateX(-200%);} /* input에 체크되면 텍스트 효과 */ .section input[id="slide01"]:checked ~ .slidewrap li:nth-child(1) .textbox h3 {opacity:1;transform:translateY(0);transition-delay:.2s;} .section input[id="slide01"]:checked ~ .slidewrap li:nth-child(1) .textbox p {opacity:1;transform:translateY(0);transition-delay:.4s;} .section input[id="slide02"]:checked ~ .slidewrap li:nth-child(2) .textbox h3 {opacity:1;transform:translateY(0);transition-delay:.2s;} .section input[id="slide02"]:checked ~ .slidewrap li:nth-child(2) .textbox p {opacity:1;transform:translateY(0);transition-delay:.4s;} .section input[id="slide03"]:checked ~ .slidewrap li:nth-child(3) .textbox h3 {opacity:1;transform:translateY(0);transition-delay:.2s;} .section input[id="slide03"]:checked ~ .slidewrap li:nth-child(3) .textbox p {opacity:1;transform:translateY(0);transition-delay:.4s;} /* 좌,우 슬라이드 버튼 */ .slide-control > div {display:none;} .section .left {left:0px;background:url('http://cosrxinc.jpg3.kr/cosrximg/cosrx/common/left.png') center center / 50% no-repeat;} .section .right {right:0px;background:url('http://cosrxinc.jpg3.kr/cosrximg/cosrx/common/right.png') center center / 50% no-repeat;} .section input[id="slide01"]:checked ~ .slidewrap .slide-control > div:nth-child(1) {display:block;} .section input[id="slide02"]:checked ~ .slidewrap .slide-control > div:nth-child(2) {display:block;} .section input[id="slide03"]:checked ~ .slidewrap .slide-control > div:nth-child(3) {display:block;} /* 페이징 */ .slide-pagelist {text-align:center;} .slide-pagelist > li {display:inline-block;vertical-align:middle;} .slide-pagelist > li > label {display:block;padding:2px 20px; background:#ccc; margin:20px 5px;cursor:pointer;} .section input[id="slide01"]:checked ~ .slidewrap .slide-pagelist > li:nth-child(1) > label {background:#000;} .section input[id="slide02"]:checked ~ .slidewrap .slide-pagelist > li:nth-child(2) > label {background:#000;} .section input[id="slide03"]:checked ~ .slidewrap .slide-pagelist > li:nth-child(3) > label {background:#000;} /*슬라이드 end*/ /*체스 컨텐츠*/ .ches_con_bg{background:#cbc2db; margin: 50px auto 0 auto;} .ches_con{margin:0 auto; position:relative; background-image:url('//cosrxinc.jpg3.kr/cosrximg/cosrx/product/Poreless_pad/ches_img.png'); background-repeat:no-repeat; background-size:50%; background-position:100% 0; } .ches_con video{width:100%; margin:50px auto 0 auto; } .ches_con > p {color:#fff; font-size:15px; padding-top:50px; text-align:center; letter-spacing:-1px;line-height: 1.5} .ches_con > p > span{font-size:22px; font-weight:700; padding:0 5px;} .ches_tip{margin:30px 0 0 20px; background:#000; color:#fff; font-size:15px; letter-spacing:-1px; line-height: 1.5; padding:5px 10px; width:100px !important; border-radius:30px;} ul.ches_tip_txt{padding:0 0 30px 0;} ul.ches_tip_txt li{color:#000; font-size:14px; list-style-type:disc; margin:5px 20px 0 40px; } /* 이벤트*/ .event_wrap{background:#9eb68e url('//cosrxinc.jpg3.kr/cosrximg/cosrx/main/2103_event/cicacleansing_bg.jpg') 50% 0 no-repeat; background-size:200%; } .event_box{width:100%; margin:0 auto; max-width:690px; } .event_box h1{padding:80px 0 20px 0; font-family:Piek-Light; color:#fff; font-size:12px !important; text-align:center; } .event_box h2{color:#fff; font-size:20px; text-align:center;} .event_box h3{margin:10px 0 80px 0; color:#fff; font-size:50px; text-align:center; line-height: 1.0; font-weight:700; letter-spacing:-2px; } .event_box p{text-align:center; } .event_box dl{padding:10% !important; font-size:12px; line-height: 1.5; } .event_box dt{font-weight:700; margin-top:30px;} /* 상세움직임 parallax */ .wrap2_inner div img{animation:top 1s;} .wrap2_inner div strong {animation:top 1s ;} .wrap2_inner div p {animation:top 1s 0.5s backwards;} .wrap2_inner div strong, .wrap2_inner div img, .wrap2_inner div p {display:none;} .wrap2_inner div.on strong, .wrap2_inner div.on img, .wrap2_inner div.on p {display:block;} @keyframes top { from {transform:translateY(100px); opacity:0;} } .wrap3_inner div span {animation:right 1s backwards;} .wrap3_inner div:nth-child(2) span {animation-delay:.3s;} .wrap3_inner div:nth-child(3) span {animation-delay:.6s;} .wrap3_inner div span {display:none;} .wrap3_inner div.on span {display:block;} @keyframes right { from {transform:translateX(-100%);} } /*media Query*/ @media screen and (min-width:420px) and (max-width:767px) { } @media screen and (min-width:768px) { } @media screen and (min-width:720px) { .skincare-step .bg_cica { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:url('//cosrxinc.jpg3.kr/cosrximg/cosrx/product/Pure-Fit-Cica-Oil/cica_oil_bg1.jpg')100% 100% no-repeat; background-size: cover; } .new_wrap_1200 h1{font-size:3em !important;} .new_wrap_1200 h2{font-size:2.5em !important;} .new_wrap_1200 h3{font-size:2em !important;} .main_type{font-size:35px;} .piek{font-size:25px;} .directions{font-size:18px; line-height:1.5;} .new_img p{font-size:24px; line-height:1.5;} .new_img p b{font-size:32px; line-height:1.5;} .new_img strong{font-size:32px; line-height:1.5;} .img_keypoint p{font-size:24px; line-height:1.5;} .img_why_text p{font-size:32px; line-height:1.2;} .img_why_text p span{font-size:24px;} .img_ingre_text p{font-size:24px; line-height:2;} .pad_keypoint dl dt{font-size:20px; line-height:30px; margin:30px 0 0 0; } .pad_keypoint dl dd{font-size:20px; line-height:30px; margin:10px 0 20px 0; } .reason dl dt{font-size:20px; line-height:1.5; margin:30px 0 0 0; } .reason dl dt.reasontitle{font-size:30px; line-height:1.5; margin:50px 0; } .reason dl dd{font-size:20px; line-height:1.5; margin:10px 0 20px 0; } .new_ingredient dt{ font-size:20px; line-height:1.5;} .new_ingredient dt span, .new_ingredient dd, .new_ingredient p{font-size:15px; line-height:1.5;} .new_table > li > p{ font-size:18px; line-height:1.5;} dl.new_coordi dt, dl.new_coordi dd{font-size:20px; line-height:1.5;} .how_img p{font-size:28px; line-height:1.5;} .ingredients {font-size:20px; line-height:1.5;} .img_story > p , .img_title > p{font-size:32px;} .img_story > p > span, .img_title > p > span{font-size:26px;} .img_story > p > span, .img_title > p > span.gothicfont{font-size:26px;} .banner_title1{font-size:32px; } .banner_title2{font-size:25px;} .banner_title3{font-size:22px;} .hh_graph_tit_1{padding:10px; font-size:20px;} .hh_graph_tit_2 p{font-size:35px;} .hh_graph{width:50% !important;} .hh_graph_text p.title{font-size:20px;} #myProgress {height: 15px;} #myBar1, #myBar2, #myBar3, #myBar4, #myBar5, #myBar6 {height: 15px;} .skincare-step h3 {font-size: 25px;} .skincare-step h3 em{font-size: 35px;} .skincare-step_cap, .skincare-step_name, .skincare-step_category{font-size: 15px;} .skincare-step_link::before, .skincare-step_link::after, .skincare-step_link2::before, .skincare-step_link2::after, .skincare-step_link3::before, .skincare-step_link3::after{bottom:80px;} .skincare-step_ac::before, .skincare-step_ac::after, .skincare-step_balancium::before, .skincare-step_balancium::after, .skincare-step_cica::before, .skincare-step_cica::after, .skincare-step_poreless::before, .skincare-step_poreless::after{bottom:100px;} .skincare-step_fullfit::before, .skincare-step_fullfit::after{bottom:125px;} /* 슬라이드*/ .section .slidelist .textbox {top:15%;left:58%;} .section .left {left:5%;} .section .right {right:5%;} /*체스 컨텐츠*/ .ches_con{ position:relative; background-image:url('//cosrxinc.jpg3.kr/cosrximg/cosrx/product/Poreless_pad/ches_img.png'); background-repeat:no-repeat; background-size:50%; background-position:100% 0; } .ches_con video{margin:100px auto 0 auto; } .ches_con > p {font-size:25px; padding-top:100px; } .ches_con > p > span{font-size:32px;} /*이벤트*/ .event_box dl{font-size:18px; } } /* 아크네패치 상세페이지 mo */ .detail_page_wrap {width: 100%; height: auto; text-align: center; margin:0 auto;} .detail_page_wrap h5 {margin-bottom: 10%; font-family:'Piek-Light'; font-size:2em !important; width:100% !important;} /** 상단 타이틀 **/ .top_wrap {position: relative; width: 100%; height: 300px;} .top_wrap .txBox {position: absolute; width:80%; top: 50%; transform: translate(0, -50%); color: #fff; padding: 0 10%;} .top_wrap .txBox .txTit {font-size: 2.5em; font-family:'Piek-Light'; line-height:1.5;} .top_wrap .txBox .txSub {font-size: 1.5em; line-height:1.5; margin-bottom: 30px;} .top_wrap .txBox .txDes {font-size: 1.5em; line-height:1.5; } .top_wrap .topImg { height: 300px; background-repeat: no-repeat; background-size:cover; background-position:center; } .top_wrap .topImg img {display: block; width: 100%;} /** 엠블럼 / 어워드 **/ .award_wrap {width: 100%; height:auto; padding:20% 0;} .award_wrap .award_icon {width:100%; height: auto; margin: 0 auto; text-align: center;} .award_wrap .award_icon li {display: inline-block; width:20%; height: auto; padding:10px;} .award_wrap .award_icon li img{width:100%; max-width:150px !important;} .award_wrap .award_p {margin:0 auto; font-size: 1.2em; line-height:1.5; color: #000; padding-top:30px;} /** 제품소개 **/ .product_wrap {width: 100%; height: auto;} .product_wrap .product_01 {position: relative; width:100%; } .product_wrap .product_01 .product_focus {width:100%; height: auto;} .product_wrap .product_01 .product_focus img {position: absolute; top: 52%; left: 50%; transform: translate(-52%, -50%); width:50%; height: auto;} .product_wrap .product_01 .product_focus .focus-1 {z-index: 10; transition: all 1s;} .product_wrap .product_01 .product_focus .focus-2 {z-index: 1;} .product_wrap .product_01 .textBox {position: absolute; width:100%;} .product_wrap .product_01 .textBox .txTit {font-size:1.5em; font-weight:700; line-height:1.5; color:#fff; margin:7% 20px 0 20px; } .product_wrap .product_01 .textBox .txsub {font-size: 1.2em; line-height:1.5; color:#fff; margin:0 20px; font-family:'Piek-Light';} .product_wrap .product_01 .txDetail { position:absolute; bottom:6%; width:100%; font-size: 1.2em; line-height:1.5; color: #fff;} .product_wrap .product_01 img {width: 100%; height: auto;} .product_wrap .product_02 {position: relative; width: 100%; height: auto;} .product_wrap .product_02 .textBox {position:absolute; bottom: 6%; padding:0 10%; width:80% !important;} .product_wrap .product_02 .textBox p {font-size: 1.2em; line-height:1.5; color:#fff;} .product_wrap .product_02 img {width: 100%;} /** RX Point **/ .point_wrap {width: 100%; height:auto; margin-top:20%;} .point_wrap .point_content {width: 100%; height:auto; background-color:#FFF8F8;} .point_wrap .point_content .point_img {} .point_wrap .point_content .point_img img {width:100%; height:auto;} .point_wrap .point_content .point_detail {background-color:#FFF8F8; padding: 10% 0;} .point_wrap .point_content .point_detail .point_txt {text-align: left; width:80%; height: auto; margin:0 auto;} .point_wrap .point_content .point_detail .point_txt dt {margin-bottom:10px; font-size: 1.2em; line-height:1.5; font-weight: 700; color: #E12D25;} .point_wrap .point_content .point_detail .point_txt dd {margin-bottom: 35px; font-size: 1.2em; line-height:1.5; } .point_wrap .point_content .point_detail .point_txt dd .light {color:#777;} .point_wrap .point_content .point_icon {width:80%; height: auto; margin:50px 10% 0px 10%; text-align:left;} .point_wrap .point_content .point_icon li {display:inline-block; width:20%; padding:0 10% 5% 0; text-align: center; } .point_wrap .point_content .point_detail li img {display:inline-block; width:100%; max-width:100px !important; height: auto;} .point_wrap .point_content .point_detail li p {margin-top: 10px; font-size: 1.2em; line-height:1.5; text-align:center;} /** description **/ h6.des_wrap_tit {margin:20% 0; font-size:2em !important; font-weight:700; line-height:1.5 !important;} .des_wrap {width: 100%; margin: 0 auto;} .des_wrap img {width: 100%;} .des1 { width: 100%; padding: 30px 0 0 0; } .des2 { width: 100%; } .des_wrap p {font-size:1.2em; line-height:1.5; text-align:left; padding:0 10% 35px;} .des_wrap p b{font-weight: 700; margin-bottom: 10px;} /** effect **/ .effect_wrap {width:100%; height:auto; margin-top:20%; } .effect_wrap .effect_content {position: relative; width: 100%; height: auto;} .effect_wrap .effect_content .effect_product_img {position: absolute; z-index: 10; top: 50%; transform: translate(-15%, -50%); width:100%;} .effect_wrap .effect_content .effect_product_img img {width:40%;} .effect_wrap .effect_content .effect_txt {position: absolute; z-index:30; top: 50%; transform: translate(-10%, -50%); right:0; width:45%; text-align: left; } .effect_wrap .effect_content .effect_txt .txTit {font-size:1.5em; line-height:1.5; font-weight: 700;} .effect_wrap .effect_content .effect_txt .txSub {font-size:1em; line-height:1.5; margin-bottom: 10px; font-family:'Piek-Light';} .effect_wrap .effect_content .effect_txt .txDes {font-size:1em; line-height:1.5; } .effect_wrap .effect_content .effect_bg {width:100%; height:auto;} /** RX Tartget **/ .target_wrap {width:100%; height: auto; margin-top:20%;} .target_detail {width:100%; position:relative; height:150px;} .target_detail_img {width:100%; position:absolute; top:-150px;} .target_detail_img img {width:70%;} .target_detail_img p {font-size:1.2em; line-height:1.5; margin-bottom: 20px; background:#fff;} /** how to use **/ .how_wrap {width:100%; height:auto; margin-top:20%; overflow:hidden;} .how_wrap .how_content {width: 100%; height: auto; margin-top:30px;} .how_wrap .how_content .how_01 {width:100%; height: auto;} .how_wrap .how_content .how_01 img {width:100%; height: auto; display: block;} .how_wrap .how_content .how_01 p {padding: 30px 10%; font-size:1.2em; line-height:1.5;} .how_wrap .how_content .how_02 {width: 100%; height:auto; margin-top:20%;} .how_wrap .how_content .how_02 .how_02_img {width:60%; padding: 0 20%;} .how_wrap .how_content .how_02 .how_size{margin:5% 0;} .how_wrap .how_content .how_02 .how_size li {width:100%; } .how_wrap .how_content .how_02 .how_size li>p>img { vertical-align:middle; width:30%; } .how_wrap .how_content .how_02 .how_size li>p {font-size: 1.5em; margin: 0 5%;} .how_wrap .how_content .how_02 .how_size span.red {color: red; border: 1px solid red; border-radius: 50%; width: 80px; height: 40px; line-height:40px; display:inline-block; margin: 0 2%;} .how_wrap .how_content .how_03 {width: 100%; height: auto; margin-top:20%;} .how_wrap .how_content .how_03 .how_03_img_mo {} .how_wrap .how_content .how_03 .how_03_img{display:none;} .how_wrap .how_content .how_03 ul {margin: 10px auto 0; width:90%; height: auto;} .how_wrap .how_content .how_03 li {float: left; width: 33.3333333%; height: auto;} .how_wrap .how_content .how_03 p {border-bottom:1px solid #000; padding: 5% 0; font-size: 1.2em; line-height:1.5;} .how_wrap .how_content .how_03 p:first-child {font-size: 1.2em; line-height:1.5; font-weight: 700;} .how_wrap .how_content .how_03 p:last-child {border-bottom:none;} /** ingredients **/ .ingre_wrap {width:80% !important; height: auto; margin:20% 10% 0;} .ingre_wrap p{font-size: 1em; line-height: 1.5; margin-bottom:35px;} /** fsc **/ .fsc_wrap {width:100%; margin-top:20%;} .fsc_wrap .fsc_bg {position:relative; /*background-image:url('//cosrxinc.jpg3.kr/cosrximg/cosrx/detail/acne_patch/acne_fsc_bg_2x.jpg');*/ background-repeat:no-repeat; background-position:center;} .fsc_wrap .fsc_content {padding:10% 0;} .fsc_wrap .fsc_content img {width:20% !important; max-width:230px !important; } .fsc_wrap .fsc_content .fsc_txt {color: #fff; margin-top:5%; } .fsc_wrap .fsc_content .txTit {font-size:1.5em; font-weight:700; line-height:1.5; margin-bottom:10px; } .fsc_wrap .fsc_content .txDes {font-size:1.2em; line-height:1.5;} @media screen and (max-width:1024px) { .fsc_video{width:100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; } @media screen and (min-width:720px) { .award_wrap {padding: 10% 0;} .detail_page_wrap{font-size:1.2em;} .product_wrap .product_01 .textBox .txTit {font-size:2.5em;} .product_wrap .product_01 .textBox .txsub {font-size:2em;} .detail_page_wrap h5 {font-size: 2.5em !important; } h6.des_wrap_tit {font-size: 2.5em !important; margin:10% 0;} .target_detail {height:400px;} } /* RX 페이지 */ .pc_rx img{width:100%; max-width:1200px !important;} .pc_mo img{width:100%;} .mov_bg{position: fixed; left: 50%; top:0%; transform: translate(-50%, 0%); min-width:100%; min-height:100%; width: auto; height: auto; z-index: -99;} /*1.0 리뉴얼 페이지*/ .detail_renewal_page_wrap {width:100%;} .detail_renewal_page_wrap .desImg {margin-top:0;} .detail_renewal_page_wrap .description {padding:10px; box-sizing:border-box;} .detail_renewal_page_wrap .description_2 {margin-bottom:0;} .detail_renewal_page_wrap .pointWrap {padding-left:10px; padding-right:10px; box-sizing:border-box;} .detail_renewal_page_wrap .pointWrap_1 {padding-top:60px;} .detail_renewal_page_wrap .pointWrap_3 {padding-bottom:60px;} .detail_renewal_page_wrap .featWrap {padding:25px 0;} .detail_renewal_page_wrap .reviewWrap {margin: 0 auto; padding:30px 0;} .detail_renewal_page_wrap .reviewWrap .title {text-align:left; font-size:1.6rem; font-weight:600; margin:20px 0 15px 0; padding-left:25px;} .detail_renewal_page_wrap .reviewBox { max-width:600px; margin:0 auto; display:flex; flex-wrap: wrap; flex-direction: row; padding:25px; box-sizing:border-box;} .detail_renewal_page_wrap .reviewCon { position:relative; margin-bottom:50px;} .detail_renewal_page_wrap .reviewCon .imgBox{ float:left;} .detail_renewal_page_wrap .reviewCon .txtBox{ position:absolute; right:0; bottom:-25px;} .detail_renewal_page_wrap .ingreWrap {max-width:600px; margin:0 auto; padding:25px; box-sizing:border-box;} .detail_renewal_page_wrap .ingreWrap .title {text-align:left; font-size:1.3rem; font-weight:600; margin:20px 0 15px 0;} .detail_renewal_page_wrap .ingreWrap .texts {text-align:left; font-size:15px;} @keyframes slide{0% {transform: translate(0px);} 100% {transform: translate(-1000px);}} .flow_container {padding-top: 12px; padding-bottom: 12px; background-color: #000;} .flow_text {display: flex; flex: 0 0 auto; white-space: nowrap; overflow: hidden;} .flow_text_style {font-size: 18px; animation: slide 20s linear infinite;} /* 티벳동생 영상 */ .influencer_video video{ max-width: 100%; height: auto;} /* BASIC css end */