﻿/*
    [제목] 핀업 이벤트/프로모션 CSS
    [생성일] 2020-04-17
    [내용] 핀업의 중/장기 또는 반복성 이벤트 페이지에 사용되는 스타일.
           * 예외, 일회성 이벤트는 해당 페이지 안에 작성할 것.
    [비고] CSS 작성시 핀업 디자인팀 내부에 규정하고 있는 CSS 작성 규칙를 준수하여 작성할 것.
*/
/* 회원가입혜택 */
.member_benefit { position:relative; margin-top:105px; overflow:hidden; }
.member_benefit img { display:block; position:relative; top:0; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); z-index:1; }
.member_benefit .btn_floating { position:fixed; bottom:0; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); width:100%; height:auto; z-index:2; }
.member_benefit .btn_floating.stop { position:absolute; }
.member_benefit .btn_floating a::before { display:block; content:''; position:absolute; top:0; width:100%; height:100%; background-image:-webkit-linear-gradient(top bottom, #fff 0%, #fff 30%); background-image:-webkit-gradient(linear, top, bottom, from(rgba(255,255,255,0)0%), to(rgba(255,255,255,1)30%)); background-image:linear-gradient( to bottom,rgba(255,255,255,0)0%,rgba(255,255,255,1)30%); }
.member_benefit .btn_floating img { display:block; width:1920px; height:auto; }
.member_benefit .btn_link { position:absolute; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); width:830px; height:105px; background:red; opacity:0; z-index:2; }

/*우리원몰 페이지*/
.oorione_wrap { width:1200px; margin:70px auto; overflow:hidden; }
.oorione_imgbox { position:relative; padding:0 50px; }
.oorione_imgbox img { display:inline-block; position:relative; left:50%; transform:translateX(-50%); width:1100px; height:640px; }
.oorione_imgbox .point_sum { position:absolute; left:417px; top:64px; font-family:'BMDOHYEON'; font-size:60px; font-weight:700; letter-spacing:2px; color:#e53d4e; background:-webkit-linear-gradient(to bottom, #ff8c55, #e53d4e 50%); }
.oorione_listbox { padding:50px; overflow:hidden; }
.oorione_list { position:relative; float:left; width:258px; height:445px; margin:0 20px 20px 0; border:1px solid #eaeaea; box-sizing:border-box; font-family:'Noto Sans KR'; }
.oorione_list:hover { border-color: #ff7500; }
.oorione_list:nth-child(4n) { margin-right:0; }
.oorione_list .product_thm { position:relative; height:279px; border:0; }
.oorione_list .product_thm img { width:100%; max-width:255px; height:100%; }
.oorione_list .product_thm .point { position:absolute; right:10px; bottom:15px; width:115px; line-height:30px; border-radius:30px; background:#fff; border:2px solid #262961; box-sizing:border-box; font-size:115%; font-weight:bold; color:#222; text-align:center; }
.oorione_list .product_thm .point small { display:block; float:right; margin:2px 3px 0 0; width:25px; height:25px; border-radius:25px; background:#ff7500; text-align:center; line-height:25px; font-size:85%; color:#fff; }
.oorione_list .product_con { padding:19px; }
.oorione_list .product_con .con_wrap { display:block; position:relative; height:50px; margin-bottom:20px; font-size:17px; font-weight:400; line-height:25px; overflow:hidden; }
.oorione_list .product_con .con_wrap .product_name { display:inline-block; width:100%; color:#555; }
.oorione_list .product_con .fixed_price { float:right; height:25px; line-height:25px; vertical-align:middle; font-size:17px; color:#999; text-decoration:line-through; }
.oorione_list .product_con .product_reward { clear:both; height:30px; line-height:30px; vertical-align:middle; overflow:hidden; }
.oorione_list .product_con .product_reward small { font-size:17px; font-weight:normal; }
.oorione_list .product_con .product_reward .sale { float:left; font-size:25px; font-weight:bold; color:#ff7500; }
.oorione_list .product_con .product_reward .price { float:right; line-height:30px; font-size:25px; font-weight:bold; color:#222;  }
