/* - Project : makeshop - Author : odini84@gmail.com - Description : 프리미엄 3.0 - Create : 2011-08-22 - Modify : YYYY-MM-DD - 2013-04-26 [ 퍼블리셔팀 - 김두일 주임 ] */ /* ======================================================================== 레이아웃 ======================================================================== */ #contWrap { width: 997px; margin-left: auto; margin-right: auto; min-height: 600px; _height: 600px; } #premium { padding-bottom: 70px; } /* ======================================================================== 상단 ======================================================================== */ #contWrap .hd { position: relative; height: 42px; padding: 32px 0 0 20px; border-bottom: 1px solid #b8cad6; } #contWrap .hd h2 { font-size: 0; line-height: 0; } #contWrap .hd h2 span { display:inline-block; padding-left:20px; font-size: 12px; line-height: 47px; } #contWrap .hd a { position: absolute; right: 0px; top: 50px; margin-right: 27px; padding-right: 10px; background: url(../img/common/bull_h5_rarw.gif) no-repeat right 4px; } /* ======================================================================== 컨텐츠 ======================================================================== */ #contWrap .content-w { position: relative; margin-top: 18px; margin-left: 20px; margin-right: 20px; } /* hd-info */ #contWrap .hd-info { zoom: 1; position: relative; border-bottom: 1px solid #61788b; padding: 0 45px; } #contWrap .hd-info:after { content: ""; display: block; clear: both; } /* dsc */ #contWrap .hd-info .visual { position: relative; float: left; width: 606px; _height: 296px; padding-right: 40px; } #contWrap .hd-info .visual .txt { position: absolute; top: 170px; right: 40px; } #contWrap .hd-info .visual .txt a.btn-free { display: block; width: 213px; height: 40px; line-height: 43px; padding-left: 10px; font-size: 14px; color: #fff; font-weight: bold; letter-spacing: -1px; background: url("../img/premium/bg_txtbtn_blue.gif") no-repeat 0 0; } #contWrap .hd-info .visual .txt a span.font-y { color: #fff13e; } #contWrap .hd-info .visual .txt dl { margin-top: 5px; margin-left: 10px; } #contWrap .hd-info .visual .txt dl dt { font-weight: bold; font-size: 18px; } #contWrap .hd-info .visual .txt dl dd { color: #666; font-size: 12px; } #contWrap .hd-info .imgs { position: absolute; left: 285px; top: 0px; } #contWrap .hd-info h3 { font-size: 0; line-height: 0; } #contWrap .hd-info p { z-index: 2; position: relative; font-size: 12px; letter-spacing: -1px; } /* cs-info */ #contWrap .hd-info .cs-info { float: right; width: 220px; padding-top: 200px; padding-bottom: 5px; padding-left: 40px; border-left: 1px solid #e0e8ed; background: url("../img/premium/img_premium_cs.gif") no-repeat 40px 15px; } #contWrap .hd-info .cs-info a { display: block; width: 205px; margin-bottom: 7px; font-size: 0; } /* tabNav */ #tabNav { zoom: 1; position: relative; padding-top: 60px; border-bottom: 2px solid #b8cad6; } #tabNav ul:after { content: ""; display: block; clear: both; } #tabNav ul { position: relative; left:0; height: 42px; } #tabNav li { zoom: 1; position: relative; top: 6px; float: left; height: 35px; margin-right: -1px; border: 1px solid #dce5eb; border-bottom: 0; } #tabNav li.now { z-index: 1; top: 0; height: 42px; margin-bottom: -2px; border: 2px solid #b7cad8; border-bottom: 0; } #tabNav li.now .txt { color: #315fce; } #tabNav li a { float: left; padding: 0 21px; height: 100%; background-color: #fff; text-align: center; color: #818181; font-size: 14px; font-weight: bold; letter-spacing: -1px; } #tabNav li a .ico, #tabNav li a .txt { position: relative; display: inline-block; vertical-align: middle; cursor:pointer; } #tabNav li a .luv { top: 9px; width: 21px; height: 15px; margin-right: 5px; background: url(../img/premium/tab_luv_mark.gif) no-repeat 0 -15px; } #tabNav li a .new { top: 10px; width: 11px; height: 11px; margin-left: 5px; background: url(../img/premium/tab_new_mark.gif) no-repeat 0 0; } #tabNav li a .txt { top: 10px; } #tabNav li.now a .ico { top: 14px; } #tabNav li.now a .txt { top: 15px; } #tabNav li.now a .luv { background-position: 0px 0px; } #tabNav .btns { position: absolute; top: 34px; right:0; padding-right: 8px; font-size: 0; line-height: 0; } #tabNav .btns .btn-sp { margin-left: 5px; } /* btn-foot */ #premium .btn-foot { margin-top: 60px; text-align: center; } #tabContWrap { zoom: 1; } /* ======================================================================== 이달의 혜택 ======================================================================== */ #tabBenefit { margin-top: 50px; text-align: center; } #tabBenefit .evt { margin-top: 35px; } /* ======================================================================== 서비스 사양 ======================================================================== */ #tabSpec { margin-top: 50px; } #tabSpec .msg { text-align: center; } #tabSpec .table-w { margin-top: 25px; } #tabSpec .table-w thead th { padding: 12px 0; font-weight: bold; color: #333; font-size: 14px; border: 1px solid #b1c6d2; background: #d6e2e9; } #tabSpec .table-w tbody th, #tabSpec .table-w tbody td { padding: 12px 0; font-size: 12px; border: 1px solid #d6e2e9; } #tabSpec .table-w tbody th { color: #4f7492; background-color: #f6f9fa; } #tabSpec .table-w tbody .tb-l { padding: 0 10px 0 15px; } #tabSpec .table-w tbody .sp, #tabSpec .table-w tbody strong { color: #333; } #tabSpec .table-w tbody .sp { font-weight: bold; } #tabSpec .table-w tbody a { display: inline-block; margin-left: 10px; padding-right: 10px; color: #2460da; font-weight: bold; background: url(../img/common/bull_h4_btag.gif) no-repeat right 45%; } #tabSpec .table-w tbody .f-blue { color: #007ef0; } #tabSpec .table-w tr.bdr-db th, #tabSpec .table-w tr.bdr-db td { border-bottom: 3px double #a6bdca; } #tabSpec .table-w button { cursor: default; } #tabSpec h3 { height: 26px; margin-top: 40px; padding: 5px 0 0 30px; font-weight: bold; font-size: 14px; color: #4f7393; letter-spacing: -1px; border-bottom: 2px solid #d7e1ea; background: url(../img/common/bull_h24_sqr_crs.gif) no-repeat 0 45%; } #tabSpec .target { margin-top: 30px; } #tabSpec .target p { text-align: center; } #tabSpec .target ul { min-height: 190px; _height: 160px; margin-top: 25px; padding-left: 500px; padding-top: 15px; background: url(../img/premium/spec_target_people.gif) no-repeat 80px 0px; } #tabSpec .target ul li { margin-bottom: 3px; padding-left: 20px; font-size: 12px; background: url(../img/common/bull_h6_cbar_blue.gif) no-repeat 0px 5px; } #tabSpec .target ul li.gap { margin-bottom: 10px; } #tabSpec .target ul li strong { color: #333; } /* ======================================================================== 매출을 만드는 기능 ======================================================================== */ #tabSale { margin-top: 50px; } #tabSale .msg { text-align: center; padding-bottom: 25px; border-bottom: 2px solid #dbe4eb; } #tabSale .list-w { zoom: 1; position: relative; overflow: hidden; } #tabSale .list-w:after { content: ""; display: block; clear: both; } #tabSale .list-w .list-wrap { width: 732px; padding: 50px 0 0 265px; border-bottom: 2px solid #dbe4ea; overflow: hidden; } #tabSale .list-w .list-c1 { background: url("../img/premium/bg_tit_premium_sale_c1.gif") no-repeat 45px 50px #ffffcc; } #tabSale .list-w .list-c2 { background: url("../img/premium/bg_tit_premium_sale_c2.gif") no-repeat 45px 50px; } #tabSale .list-w .list-c3 { background: url("../img/premium/bg_tit_premium_sale_c3.gif") no-repeat 45px 50px; } #tabSale .list-w .list-c4 { background: url("../img/premium/bg_tit_premium_sale_c4.gif") no-repeat 45px 50px; } #tabSale .list-w .list-c5 { background: url("../img/premium/bg_tit_premium_sale_c5.gif") no-repeat 45px 50px; } #tabSale .list { overflow: hidden; } #tabSale .list li {float: left; width: 365px; height: 117px; *height: 147px; margin-bottom: 29px; padding-bottom: 29px; border-bottom: 1px solid #dbe4ea; } #tabSale .list li.no-bdr { border: 0 none; } #tabSale .list li .thumb, #tabSale .list li dl { float: left; width: 220px; } #tabSale .list li .thumb { width: 128px; height: 128px; margin-right: 10px; } #tabSale .list li dt { margin-left: 10px; padding-top: 8px; font-weight: bold; font-size: 16px; color: #222; letter-spacing: -1px; } #tabSale .list li dd { font-size: 12px; letter-spacing: -1px; color: #666; } #tabSale .list li .dsc1 { margin-left: 10px; height: 54px; margin-top: 7px; } #tabSale .list li .dsc2 { margin-top: 8px; font-size: 12px; } #tabSale .list li .btn { margin-left: 5px; font-size: 0; line-height: 0; } #tabSale .list li .btn .btn-sp a { line-height: 24px; } #tabSale .list li .btn .btn-sp, #tabSale .list li dt img, #tabSale .list li dd img { vertical-align: middle; margin-left: 3px; } /* ======================================================================== 쉬운기능 ======================================================================== */ #tabEasy { margin-top: 50px; } #tabEasy .msg { text-align: center; padding-bottom: 25px; border-bottom: 2px solid #dbe4eb; } #tabEasy .list-w { zoom: 1; position: relative; overflow: hidden; } #tabEasy .list-w:after { content: ""; display: block; clear: both; } #tabEasy .list-w .list-wrap { width: 732px; padding: 50px 0 0 265px; border-bottom: 2px solid #dbe4ea; overflow: hidden; } #tabEasy .list-w .list-c1 { background: url("../img/premium/bg_tit_premium_easy_c1.gif") no-repeat 45px 45px #ffffcc; } #tabEasy .list-w .list-c1 ul.list li { width: 720px; border: 0 none; } #tabEasy .list-w .list-c1 ul.list li dl { width: 570px; } #tabEasy .list-w .list-c1 ul.list li dl dt { padding-top: 0; } #tabEasy .list-w .list-c1 ul.list li dl dd.dsc1 { height: 100%; margin-top: 0; } #tabEasy .list-w .list-c1 ul.list li dl dd.info-btn { margin: 5px; } #tabEasy .list-w .list-c2 { background: url("../img/premium/bg_tit_premium_easy_c2.gif") no-repeat 45px 50px; } #tabEasy .list-w .list-c3 { background: url("../img/premium/bg_tit_premium_easy_c3.gif") no-repeat 45px 50px; } #tabEasy .list-w .list-c4 { background: url("../img/premium/bg_tit_premium_easy_c4.gif") no-repeat 45px 50px; } #tabEasy .list { overflow: hidden; } #tabEasy .list li { float: left; width: 365px; height: 117px; margin-bottom: 29px; padding-bottom: 29px; border-bottom: 1px solid #dbe4ea; } #tabEasy .list li.no-bdr { border: 0 none; } #tabEasy .list li .thumb, #tabEasy .list li dl { float: left; width: 220px; } #tabEasy .list li .thumb { width: 128px; height: 128px; margin-right: 10px; } #tabEasy .list li dt { margin-left: 10px; padding-top: 8px; font-weight: bold; font-size: 16px; color: #222; letter-spacing: -1px; } #tabEasy .list li dd { font-size: 12px; letter-spacing: -1px; color: #666; } #tabEasy .list li .dsc1 { margin-left: 10px; height: 54px; margin-top: 7px; } #tabEasy .list li .dsc2 { margin-top: 8px; font-size: 12px; } #tabEasy .list li .btn { margin-left: 5px; font-size: 0; line-height: 0; } #tabEasy .list li .btn .btn-sp a { line-height: 24px; } #tabEasy .list li .btn .btn-sp, #tabEasy .list li dt img, #tabEasy .list li dd img { vertical-align: middle; margin-left: 3px; } /* ======================================================================== 러브마크 ======================================================================== */ #tabLuv { margin-top: 45px; } #tabLuv .msg { text-align: center; } /* table */ #luvRankWrap { zoom: 1; position: relative; margin-top: 35px; } #luvRankWrap table { border: 3px solid #e6eef1; border-top: 12px solid #e6eef1; } #luvRankWrap th, #luvRankWrap td { border-bottom: 3px solid #e6eef1; } #luvRankWrap th { background-color: #f5fafb; } #luvRankWrap th .tb-c { zoom: 1; position: relative; height: 100%; } #luvRankWrap th.th-month { background-color: #ffbcaf; } #luvRankWrap th.th-new { background-color: #fbe67b; } #luvRankWrap th.th-accu { background-color: #aad9e1; } #luvRankWrap th .img-w { display: block; font-size: 0; line-height: 0; } #luvRankWrap th .tit { margin-top: 7px; } #luvRankWrap th .dsc { margin-top: 8px; margin-bottom: 13px; } #luvRankWrap td { padding: 25px 0; } /* list */ #luvRankWrap .rank-list { zoom: 1; position: relative; margin: 0 30px; } #luvRankWrap .rank-list:after { content: ""; display: block; clear: both; } #luvRankWrap .rank-list li { position: relative; float: left; width: 100%; } #luvRankWrap .rank-list li a { position: relative; zoom: 1; display: block; width: 100%; padding: 3px 0; color: #7b8f9c; border-bottom: 1px solid #e6eef1; } #luvRankWrap .rank-list li a:after { content: ""; display: block; clear: both; } #luvRankWrap .rank-list li .fc { float: left; height: 33px; line-height: 33px; } #luvRankWrap .rank-list li .fc { -webkit-transition: 0.3s all; -moz-transition: 0.3s all; -o-transition: 0.3s all; -ms-transition: 0.3s all; } #luvRankWrap .rank-list li .num, #luvRankWrap .rank-list li .ico, #luvRankWrap .rank-list li .txt, #luvRankWrap .rank-list li .status, #luvRankWrap .rank-list li .luv { cursor: pointer; } #luvRankWrap .rank-list li .num { width: 70px; text-align: center; font-weight: bold; color: #c2d3dc; } #luvRankWrap .rank-list li .ico { width: 32px; } #luvRankWrap .rank-list li .ico img { width: 100%; height: 100%; } #luvRankWrap .rank-list li .txt { width: 353px; padding-left: 24px; font-size: 12px; color: #333; } #luvRankWrap .rank-list li .status { width: 55px; } #luvRankWrap .rank-list li .status strong { font-size: 11px; font-weight: bold; font-family: Doutm; } #luvRankWrap .rank-list li .luv { width: 120px; } #luvRankWrap .rank-list li .status, #luvRankWrap .rank-list li .luv { position: relative; top: 10px; height: auto; line-height: 1.25; font-size: 10px; font-family: Tahoma; text-align: center; } /* now */ #luvRankWrap .rank-list li a.now { left: -3px; top: -3px; margin-bottom: -5px; } #luvRankWrap .rank-list li a.now .num, #luvRankWrap .rank-list li a.now .txt { font-size: 16px; color: #333; font-weight: bold; } #luvRankWrap .rank-list li a.now .txt { letter-spacing: -1px; } /* x월 러브마크 */ #luvRankWrap .rank-month li a.now { border: 4px solid #f86b01; } /* 신규 러브마크 */ #luvRankWrap .rank-new li a.now { border: 4px solid #f1ad0a; } /* 누적 러브마크 */ #luvRankWrap .rank-accu li a.now { border: 4px solid #3483e8; } /* btn */ #tabLuv .btn-foot { font-size: 0; line-height: 0; } #tabLuv .btn-foot .btn-wh50 { margin-left: 10px; } /* ======================================================================== 메이크샵 VS 타사 ======================================================================== */ #tabVs { margin-top: 50px; text-align: center; } #tabVs .evt { margin-top: 35px; } /* ======================================================================== 사업망 확장 ======================================================================== */ #tabExp { margin-top: 23px; } #tabExp .msg { text-align: center; padding-bottom: 25px; border-bottom: 2px solid #dbe4eb; } #tabExp h3 { height: 26px; margin-top: 40px; padding: 5px 0 0 30px; font-weight: bold; font-size: 14px; color: #4f7393; letter-spacing: -1px; border-bottom: 2px solid #d7e1ea; background: url(../img/common/bull_h24_sqr_crs.gif) no-repeat 0 45%; } #tabExp .list-w:after { content: ""; display: block; clear: both; } #tabExp .list-w { zoom: 1; } #tabExp .list-w .list-wrap { width:1109px; height:708px; margin-left:-56px; background: url("../img/premium/bg_premium_exp.gif") no-repeat 0 0; } #tabExp .list-w .list-c3 .list li { width:168px; } #tabExp .list-w .list-c3 .list li.last { width:172px; } #tabExp .list-w .list-c3 .list li.last .color-red { color:#ff5763; } #tabExp .list-w .list-c3 .list li .thumb { margin-right: 10px; } #tabExp .list { overflow: hidden; margin-left:346px; } #tabExp .list li { float: left; width: 233px; height: 177px; } #tabExp .list li .thumb, #tabExp .list li dl { float: left; padding-top:46px; } #tabExp .list li .thumb { margin-right: 14px; } #tabExp .list li dt { font-weight: bold; font-size: 16px; color: #222; letter-spacing: -1px; } #tabExp .list li dd { font-size: 12px; letter-spacing: -1px; color: #666; } #tabExp .list li .dsc1 { height: 40px; margin-top: 7px; } #tabExp .list li .btn { font-size: 0; line-height: 0; } #tabExp .list li .btn .btn-sp a { line-height: 24px; } #tabExp .list li .btn .btn-sp, #tabExp .list li dt img, #tabExp .list li dd img { vertical-align: middle; margin-left: 3px; } #tabExp .list-w .list-wrap2 { padding:0 46px; } #tabExp .list-w .list-wrap2 ol li { position:relative; height:122px; border-bottom:1px solid #ebf0f4; } #tabExp .list-w .list-wrap2 ol li.bd-none { border-bottom:none; } #tabExp .list-w .list-wrap2 ol li .num { position:absolute; top:27px; left:23px; font-size:36px; color:#96cbea; font-weight:bold; font-family:"Tahoma"; } #tabExp .list-w .list-wrap2 ol li .img { position:absolute; top:27px; right:28px; } #tabExp .list-w .list-wrap2 ol li dl { padding:22px 0 0 72px; letter-spacing:-1px; } #tabExp .list-w .list-wrap2 ol li dl dt { height:26px; font-size:16px; color:#000; font-weight:bold; } #tabExp .list-w .list-wrap2 ol li dl dd { font-size:12px; color:#656565; } #tabExp .list-w .list-wrap2 ol li dl dd.line { color:#d9e2eb; } #tabExp .list-w .list-wrap2 ol li dl dd.line1 strong { color:#fc8833; } #tabExp .list-w .list-wrap2 ol li dl dd.line2 strong { color:#3598db; } #tabExp .list-w .list-wrap2 ol li dl dd.line3 strong { color:#63d65d; } #tabExp .list-w .list-wrap2 ol li dl dd.line4 strong { color:#ff3040; } #tabExp .list-w .list-wrap3 { position:relative; height:297px; margin:34px 0 0 46px; background:url(../img/premium/exp_h297_proc.gif) no-repeat 0 0; } #tabExp .list-w .list-wrap3 a { display:block; position:absolute; top:269px; left:689px; width:132px; height:25px; text-indent:-9999px; background:none; } #tabExp .list-w .list-wrap4 { font-size:16px; color:#000; font-weight:bold; padding-top:20px; } #tabExp .list-w .list-wrap4 ul li:after { content:""; display:block; clear:both; } #tabExp .list-w .list-wrap4 ul li { width:100%; } #tabExp .list-w .list-wrap4 ul li dl { float:left; width:498px; } #tabExp .list-w .list-wrap4 ul li dl dt { float:left; padding-left:43px; } #tabExp .list-w .list-wrap4 ul li dl dd { float:left; color:#4f7393; } #tabExp .list-w .list-wrap4 ul li dl dd.sellpia-cs { letter-spacing: -1px; }