/*****************공통*/ /*페이징*/ #paging{ margin-top:10px; } #paging:after{ display:block; content:""; clear:both;} #paging .pg_num{ float:left; width:calc(100% - 55px);} #paging .pg_num .pg_page{ display:inline-block; width:25px; height:25px; border:1px solid #ddd; color:#999; line-height:23px; border-radius:5px; background:#fff; text-align:center;} #paging .pg_num .pg_current{ background:#eee; color:#222;} #paging .pg_move{ float:right; text-align:center; width:55px;} #paging .pg_move .pg_arrow{ display:inline-block; width:25px; height:25px; border:1px solid #ddd; color:#ccc; line-height:25px; border-radius:5px; background:#fff;} @media screen and (min-width:767px) { #paging{ margin-top:30px;} #paging .pg_num{ width:calc(100% - 65px);} #paging .pg_num .pg_page{ width:30px; height:30px; border:1px solid #ccc; color:#888; line-height:28px;} #paging .pg_num .pg_current{ color:#222; border-color:#555;} #paging .pg_move{ width:65px;} #paging .pg_move .pg_arrow{ width:30px; height:30px; border:1px solid #ccc; color:#bbb; line-height:30px;} } /*등록된 내용없음*/ #no_contents{ text-align:center; padding:50px 0;} #no_contents .no_img{ width:130px; margin:0 auto 20px auto;} #no_contents .no_img img{ width:100%;} #no_contents p{ font-size:1.15em; font-weight:bold;} #no_contents span{ font-size:13px; font-weight:normal; color:#999;} #no_contents strong{ color:#3e59a8;} @media screen and (min-width:767px) { #no_contents{ padding:100px 0;} #no_contents .no_img{ width:200px; margin:0 auto 30px auto;} #no_contents p{ font-size:1.5em; line-height:1.5em;} #no_contents span{ font-size:15px;} } /*************쇼핑몰일감 리스트*/ /*신청당일일감*/ #today_wrap{ background:#f0f0f0; padding:30px 15px 40px 15px;} #today_wrap .to_tit{ font-size:1.3em; font-weight:600; color:#222; margin-bottom:15px;} #today_wrap .to_tit strong{ color:#0946da;} #today_wrap .swiper-container{ overflow:visible;} #today_wrap .swiper-slide{ position:relative;} #today_wrap .to_box{ width:100%; height:130px; position:relative; border-radius:20px; overflow:hidden;} #today_wrap .pro_img{ position:relative; top:50%; left:50%; transform:translate(-50%, -50%);} #today_wrap .pro_img img{ width:100%;} #today_wrap .pro_info{ position:absolute; top:0px; right:0px; z-index:10; width:50%; height:100%; background:rgba(0,0,0,0.5); padding:20px 10px 0 15px; color:#fff;} #today_wrap .pro_info .pi01{ color:rgba(250,250,250,0.8); font-weight:600;} #today_wrap .pro_info .pi02{ font-size:1.2em; font-weight:700;text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:100%; overflow:hidden;} #today_wrap .pro_info .pi03{ font-size:11px; margin-top:5px;} #today_wrap .pro_info .pi03 span{ float:left; display:block; border-radius:6px; border:1px solid #fff; line-height:25px; padding:0 5px; margin-right:3px;} #work_state{ position:absolute; top:-12px; right:20px; z-index:11; text-align:center;} #work_state .work_ing{ width:40px; height:40px; border-radius:50%; line-height:40px; font-size:12px; color:#fff; font-weight:bold; box-shadow:0 3px 5px rgba(95,95,95,0.5); background: #41d9ea; background: -webkit-linear-gradient(225deg, #41d9ea, #1dabd0); background: -moz-linear-gradient(225deg, #41d9ea, #1dabd0); background: -o-linear-gradient(225deg, #41d9ea, #1dabd0); background: linear-gradient(225deg, #41d9ea, #1dabd0);} #work_state .work_done{ width:40px; height:40px; border-radius:50%; line-height:40px; font-size:12px; color:#fff; font-weight:bold; box-shadow:0 3px 5px rgba(95,95,95,0.5); background: #f3606b; background: -webkit-linear-gradient(225deg, #f3606b, #e42b30); background: -moz-linear-gradient(225deg, #f3606b, #e42b30); background: -o-linear-gradient(225deg, #f3606b, #e42b30); background: linear-gradient(225deg, #f3606b, #e42b30);} #today_wrap .swiper-pagination{ bottom:-30px; text-align:center; width:100%;} #today_wrap .swiper-pagination-bullet{ margin:0 3px;} /*일감리스트*/ .area_search{} .area_search #sort input[type=text]{border-radius:2px; padding:5px; box-sizing:border-box; width:180px; height:33px;} #work_list{ padding:30px 15px;} #sort{ position:relative; margin-bottom:20px;} #sort p{} #sort p strong{ color:#3d59a8;} #sort .sort_m{ position:absolute; top:0px; right:0px; z-index:10;} #sort .dropdown-menu{ left:auto; right:0px; min-width:100px; font-size:12px;} #sort .dropdown-menu li{ padding:0 10px;} #sort h3.brand{font-size:20px; font-weight:bold; color:#222;} #shop_list{} #shop_list.top{background:#f9fbfc; padding:50px 10px 0; margin:0 0 50px; box-sizing:border-box; border:1px dashed #eee; border-radius:15px;} .shop_category{margin:0 0 25px;} .shop_category:after{ display:block; content:""; clear:both;} .shop_category > li{float:left; margin:0 20px 15px 0; padding:10px; width:calc((100% / 5) - 156px); width:-webkit-calc((100% / 5) - 16px); border:1px solid #eee; box-sizing:border-box; font-weight:600; font-size:16px; color:#333; text-align:center;} .shop_category > li:nth-child(5n){margin:0;} .shop_category > li.on{background:#3e59a8; border:1px solid #3e59a8; color:#fff !important;} .shop_category > li.on > a{color:#fff !important;} .shop_category > li a { display: block; cursor: pointer} #shop_list{} #shop_list li{ float:left; width:calc(50% - 14px); height:275px; margin:10px 7px 30px 7px; position:relative;} #shop_list .pick{ position:absolute; top:-5px; right:10px; z-index:11; font-size:2em;} #shop_list .ico_pick{ color:#ccc;} #shop_list .ico_pick_on{ color:#2482d9;} #shop_list .sl_img{ position:relative; height:165px; border-radius:20px; overflow:hidden;} #shop_list .sl_img img{ width:100%; height:100%; position:relative; transform:translate(-50%, -50%); top:50%; left:50%;} #shop_list .sl_img_done{ position:absolute; top:0px; left:0px; z-index:10; background:rgba(0,0,0,0.6); width:100%; height:100%;} #shop_list .sl_img_done p{ text-align:center; color:#fff; padding:53px 0; line-height:1.5em; font-weight:600;} #shop_list .sl_cont{ padding:20px 0 0 0; line-height:1.3em;} #shop_list .sl_t01{ font-weight:600; color:#999;} #shop_list .sl_t02{ font-weight:700; color:#222; font-size:1.2em; margin:3px 0 10px 0;text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:100%; overflow:hidden;} #shop_list .sl_t03{} #shop_list .sl_t03 span{display:inline-block;border-radius:30px;line-height:21px;border:1px solid transparent;font-size:11px;padding:0 10px;margin:0 1px 3px 0;color: #000;} #shop_list .sl_t03 span .ico_take{color:#fff;} #shop_list .ico_person{ background:#ffe668; color:#333;} #shop_list .ico_point{ border: 1px solid #DDD !important; padding: 2px 9px 0px 2px !important; background: #3cd3e6; } #shop_list .ico_point:before{ content: ''; display:inline-block; border-radius: 50%; text-align: center; background: #3cd3e6; color: #FFF; font-weight: 600; margin: 0 4px 0 8px; } #shop_list .ico_take{ background:#3d59a8; color:#fff !important;} #shop_list .ico_grade{ background:#fff; border:1px solid #ddd !important; color:#222;} #shop_list #work_state{ top:143px; right:5px;} #shop_list .ico_today{ position:absolute; top:7px; left:7px; z-index:11; background:#0946da; width:32px; border-radius:30px; box-shadow:0 3px 5px rgba(95,95,95,0.5); text-align:center;} #shop_list .ico_today i{ color:#fff; font-size:10px;} #shop_list .ico_today p{ color:#fff; font-size:10px; font-weight:bold; line-height:1.1em; padding-bottom:10px;} #sort > div{display:inline-block;} #sort input{border-radius:5px; line-height:1.3em; padding:5px;} #sort .btn_submit{background:#3e59a8; vertical-align:middle; margin:0 2px 0 0; padding:7px 12px 8px; box-sizing:border-box; border-radius:3px; color:#fff !important; line-height:1.4em;} #sort .btn_submit.sch{background:#555; margin:0 0 0 3px; padding:6px 12px;} #sort input[type=date]{width:200px;} /* instagram_210727 */ #shop_list.instaVer {} #shop_list.instaVer .ico_point{background: #3cd3e6;color:#FFF; border:1px solid #3cd3e6 !important; padding:0 10px !important;} #shop_list.instaVer .ico_point:before{margin:0;} #shop_list.instaVer #work_state{ top: -12px; right: inherit; left: 10px; } #shop_list.instaVer #work_state .work_ing { width: auto; border-radius: 30px; height: auto; line-height: 35px; padding: 0 17px; } .area_top.ins {position:relative;/* background: #f0f0f0; */z-index: 9;} .area_top.ins button{ outline: 0 !important; background: #565656; border: 0; padding: 10px 23px; position: absolute; right: 0; top: 0; } /*등록계정*/ .area_top.ins .text { display:inline-block; padding: 7px 20px; border-radius: 4px; margin-bottom: 13px; /* border: 1px solid #3e59a8; */ background: #f0f0f0; text-align: center; position: absolute; top: 0; right: 0; font-size: 14px; } .area_top.ins .text b{display: inline-block;font-weight: 600;font-size: 14px;margin-left: 7px;color: #3e59a8;} @media screen and (min-width:767px) { /*************쇼핑몰일감 리스트*/ /*신청당일일감*/ #today_wrap{/* width:1180px; background:#fff; margin:0 auto; border:1px solid #ddd; box-shadow:0px 0px 10px rgba(95,95,95,0.2);*/ border-radius:25px; padding:40px 40px;} #today_wrap .to_tit{ font-size:1.7em; margin-bottom:20px;} #today_wrap .to_tit strong{ font-weight:600;} #today_wrap .swiper-container{ overflow:hidden;} #today_wrap .to_box{ height:220px; border-radius:15px;} #today_wrap .pro_info{ right:auto; left:0; padding:50px 50px 50px 120px; width:45%;} #today_wrap .pro_info .pi01{ font-size:1.1em;} #today_wrap .pro_info .pi02{ font-size:1.5em;} #today_wrap .pro_info .pi03{ font-size:14px; margin-top:10px;} #today_wrap .pro_info .pi03 span{ line-height:28px; padding:0 10px; margin-right:5px; font-size:1.1em;} #work_state{ top:50px; right:auto; left:50px;} #work_state .work_ing{ width:50px; height:50px; line-height:50px; font-size:13px;} #work_state .work_done{ width:50px; height:50px; line-height:50px; font-size:13px;} #today_wrap .swiper-pagination{ bottom:30px; text-align:left; padding-left:50px; margin-top:5px;} #today_wrap .swiper-pagination-bullet{ margin:0 4px; width:10px; height:10px; background:#fff; opacity:0.5;} #today_wrap .swiper-pagination-bullet-active{ opacity:1;} /*일감리스트*/ #work_list{ padding:0px 0px 70px;} #sort{ font-size:1.1em;} #sort .dropdown-menu{ min-width:120px; font-size:13px;} #shop_list{} #shop_list li{ width:calc(25% - 40px); height:360px; margin:10px 20px 50px 20px; position:relative;} #shop_list .pick{ right:15px; font-size:2.2em;} #shop_list .sl_img{ height:240px;} #shop_list .sl_img img{ width:100%; position:relative; transform:translate(-50%, -50%); top:50%; left:50%;} #shop_list .sl_img_done p{ padding:100px 0; font-size:1.3em;} #shop_list .sl_t01{ font-size:1.2em;} #shop_list .sl_t02{ font-size:1.4em; margin:5px 0 20px 0;} #shop_list .sl_t03{} #shop_list .sl_t03 span{ display:inline-block; border-radius:30px; line-height:21px; border:1px solid transparent; font-size:11px; padding:0 10px; margin:0 1px 3px 0;} #shop_list .ico_person{ background:#ffe668; color:#333;} #shop_list .ico_take{ background:#3d59a8; color:#fff;} #shop_list .ico_grade{ background:#fff; border:1px solid #ddd !important; color:#222;} #shop_list #work_state{ top:210px; right:20px; left:auto;} #shop_list .ico_today{ width:35px;} #shop_list .ico_today i{ font-size:11px;} #shop_list .ico_today p{ font-size:11px; line-height:1.3em;} } @media screen and (max-width:1024px) { .shop_category > li{margin:0 10px 10px 0; padding:10px 5px; width:calc((100% / 3) - 8px); width:-webkit-calc((100% / 3) - 8px);} .shop_category > li:nth-child(5n){margin:0 10px 10px 0;} .shop_category > li:nth-child(3n){margin:0 0 10px;} } @media screen and (max-width:766px) { #shop_list.top{padding:25px 10px 10px; margin:0 0 20px;} .area_top.ins button {right: 0;top: -6px;font-size: 13px;border-radius: 0;} .area_top.ins .text {right: 0;top: -6px;font-size: 13px;border: 0;padding: 7px 10px;background: #ececec;} #sort input[type=date]{width:115px;} ::-webkit-calendar-picker-indicator{ margin-left: 0px;} } @media screen and (max-width:550px) { #shop_list.top{padding:15px 10px 15px; margin:0 0 15px;} #shop_list .sl_cont{padding:10px 0 0;} #work_list{padding:0 15px 30px;} .shop_category > li{margin:0 5px 5px 0; padding:10px 5px; width:calc((100% / 2) - 2.5px); width:-webkit-calc((100% / 2) - 2.5px);} .shop_category > li:nth-child(5n){margin:0 5px 5px 0;} .shop_category > li:nth-child(3n){margin:0 5px 5px 0;} .shop_category > li:nth-child(2n){margin:0;} } @media screen and (max-width:450px) { #shop_list li{height:250px;} #shop_list .sl_img{height:145px;} #shop_list #work_state{top:124px;} #shop_list .sl_t03 span{padding:0 6px;} #sort .btn_submit{padding:7px 8px 8px;} } @media screen and (max-width:375px) { #shop_list li{margin:10px 7px;} #shop_list .sl_img{height:130px;} #shop_list #work_state{top:110px;} .area_search #sort input[type=text]{width:120px;} #shop_list .sl_t03 span{letter-spacing:-1px; font-size:10px;} .shop_category > li{font-size:14px;} #sort .btn_submit, #sort .btn_submit.sch{padding:6px;} } @media screen and (max-width:345px) { #sort > div{display:block; margin:0 0 7px;} #sort > div:last-child{margin:0;} } @media screen and (max-width:320px) { #shop_list .sl_img{height:120px;} #shop_list #work_state{top:100px;} .shop_category > li{padding:5px; font-size:11px;} } /*************쇼핑몰일감 상세페이지*/ /*상단 제품소개관련*/ #sv_top{ position:relative; margin-bottom:30px;} #sv_top .sv_img{ overflow:hidden;} #sv_top .sv_img .fotorama__stage{ border-radius:30px;} #sv_top .sv_img .fotorama__nav-wrap{} #sv_top .sv_img .fotorama__thumb-border{ border-radius:10px; border-color:#ffe668;} #sv_top .sv_img .fotorama__thumb{ border-radius:10px;} #sv_top .sv_ping{ position:absolute; top:-10px; left:10px; z-index:11;} #sv_top .ico_ping{ width:100%; line-height:35px; color:#fff; font-size:1.1em; font-weight:bold; padding:0 20px; border-radius:30px; box-shadow:0 3px 5px rgba(95,95,95,0.5); background: #41d9ea; background: -webkit-linear-gradient(225deg, #41d9ea, #1dabd0); background: -moz-linear-gradient(225deg, #41d9ea, #1dabd0); background: -o-linear-gradient(225deg, #41d9ea, #1dabd0); background: linear-gradient(225deg, #41d9ea, #1dabd0);} #sv_cont{ padding:0 5px 30px 5px; line-height:1.3em; font-size:1.2em; position:relative;} #sv_cont .sv_t01{ font-weight:600; color:#999;} #sv_cont .sv_t02{ font-weight:bold; color:#222; font-size:1.5em; margin:5px 0 10px 0; line-height:1.3em;} #sv_cont .sv_price{ font-weight:bold; color:#3d59a8; font-size:1.8em;} #sv_cont .sv_ico{ margin-top:20px;} #sv_cont .sv_ico span{ display:inline-block; line-height:30px; padding:0 20px; border-radius:30px; margin:0 2px 5px 0; border:1px solid transparent; font-weight:600;} #sv_cont .ico_person{ background:#ffe668; color:#333;} #sv_cont .ico_take{ background:#3d59a8; color:#fff;} #sv_cont .ico_grade{ background:#fff; border:1px solid #ddd !important; color:#222;} #sv_cont .sv_pick{ position:absolute; top:-5px; right:5px; z-index:11;} #sv_cont .sv_pick span{ font-size:1.8em;} #sv_cont .ico_pick{ color:#ddd;} #sv_cont .ico_pick_on{ color:#2482d9;} /*일감 디테일내용*/ #sv_info{ margin-bottom:60px;} #sv_info dl{ font-size:1.1em; position:relative; margin-bottom:0; padding:10px 0; border-bottom:1px solid #eee;} #sv_info dt{ width:55px; position:absolute; top:10px; left:0px;} #sv_info dd{ margin-left:65px;} /*일감참여 버튼관련*/ #sv_btn{ position:fixed; bottom:0px; left:0px; z-index:12; width:100%; background:rgba(250,250,250,0.8); border-top:1px solid #eee; padding:15px 10px;} #sv_btn .btn_pick{ float:left; width:60px; margin-right:10px; text-align:center; font-size:2em; padding:5px 0 0 0;} #sv_btn .btn_pick p{ font-size:12px; line-height:1.5em;} #sv_btn .btn_pick .ico_bp{ color:#ddd;} #sv_btn .btn_pick .ico_bp_on{ color:#2482d9;} #sv_btn .btn_join{ float:left; width:calc(100% - 70px); text-align:center;} #sv_btn .btn_join input{ width:100%; height:50px; background:#ffe668; border:0; font-size:1.3em; font-weight:bold; color:#222; border-radius:7px;} /*제품설명 및 주의사항*/ #sv_content{} #sv_content .nav-tabs>li>a{ font-weight:600; color:#999; font-size:1.2em;} #sv_content .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{ font-weight:bold; color:#222;} #sv_content .tab-content{ padding:20px 5px;} #sv_content .more{ display:block; line-height:50px; border-radius:7px; border:2px solid #ffe668; text-align:center; background:#fff; font-size:1.3em; font-weight:bold; color:#222; margin-top:20px;} .sv_top_cont{position:relative;} #sv_cont .link{display:block; position:absolute; top:50%; right:0; width:50px; height:50px; border-radius:50%; box-sizing:border-box; border:1px solid #eee; background:url(./img/icon_shop_share.svg)no-repeat center; background-size:40% 40%; transform:translateY(-50%); box-shadow: 0px 5px 9px 1px rgba(27, 27, 27, 0.05);} #sv_info.v2{padding:20px 0; margin-bottom:0; border-bottom:1px solid #eee; border-top: 1px solid #eee;} #sv_info.v2 dl{border-bottom:none; padding:0; margin:0 0 20px;} #sv_info.v2 dl:last-child{margin:0;} #sv_info.v2 dt{ width:80px; top:50%; transform: translateY(-50%);} #sv_info.v2 dl dd select{display:inline-block; outline:none; -webkit-appearance:none; -moz-appearance:none; -o-appearance:none; appearance:none; width:100%; border:1px solid #ddd; box-sizing:border-box; background:#fff url(./img/icon_arrow.png) no-repeat center right 15px; background-size:10px 5px !important; padding:13px; font-size:16px; font-weight:400; color:#333; } #sv_right .option_box{position:relative; display:block; width:100%; padding:15px 20px; border-radius:20px; margin:20px 0; background:#f9f9f9;} #sv_right .option_box .option_info{display:block; font-size:14px; font-weight:400; color:#555;} #sv_right .option_box .close{position:absolute; top:15px; right:15px; width:12px; height:12px; background:url(./img/btn_cancel.svg)no-repeat center; background-size:contain; border:none; opacity:0.7;} #sv_right .option_box .price_box{position:relative; width:100%; margin:15px 0 0;} #sv_right .option_box .price_box:after{ display:block; content:""; clear:both;} #sv_right .option_box .price_box > .amount{float:left;} #sv_right .option_box .price_box > .amount:after{ display:block; content:""; clear:both;} #sv_right .option_box .price_box > .amount button{float:left; width:35px; height:35px; border:1px solid #eee; background:#fff; text-indent:-9999px;} #sv_right .option_box .price_box > .amount .minus{border-radius:5px 0 0 5px; background:#fff url(./img/btn_minus.svg)no-repeat center;} #sv_right .option_box .price_box > .amount .plus{border-radius:0 5px 5px 0; background:#fff url(./img/btn_plus.svg)no-repeat center;} #sv_right .option_box .price_box > .amount .number span{display:none} #sv_right .option_box .price_box > .amount .number{float:left; width:45px; height:35px; border-top:1px solid #eee; border-bottom:1px solid #eee; background:#fff; box-sizing:border-box; text-align:center; font-size:13px; line-height:33px; font-weight:400; color:#222;} #sv_right .option_box .price_box > .amount input{border:none; width:100%; text-align:center;} #sv_right .option_box .price_box > .price{float:right; font-size:15px; font-weight:400; color:#222;} #sv_right .option_box .price_box > .price em{vertical-align:middle; margin:0 2px 0 0; font-size:20px; font-weight:bold; color:#222;} #sv_right .price_result{position:relative; padding:30px 0; box-sizing:border-box; width:100%; border-top:1px solid #222;} #sv_right .price_result:after{ display:block; content:""; clear:both;} #sv_right .price_result strong{float:left; font-size:20px; font-weight:600; color:#222;} #sv_right .price_result .total{float:right; font-size:16px; font-weight:400; color:#222;} #sv_right .price_result .total em{vertical-align:middle; margin:0 2px 0 0; font-size:24px; font-weight:600; color:#222;} #sv_btn .btn_join.v2{width:100%;} .shop_link{margin:0 0 30px; background:#373d4d; padding:15px 10px; box-sizing:Border-box; border-radius:15px; width:100%; display:block; text-align:center;} .shop_link span{font-size:14px; font-weight:400; color:#fff;} .shop_link p{font-size:15px; font-weight:bold; color:#FFF; word-break:break-all; line-height:1.4em;} .shop_link .share{position:relative; top:2px; display:inline-block; margin:0 0 0 5px; width:12px; height:14px; background:url(./img/icon_share_wt.svg)no-repeat center; background-size:contain;} #sv_right2.insta{margin-top:70px;} @media screen and (min-width:767px) { /*************쇼핑몰일감 상세페이지*/ /*상단 제품소개관련*/ #sv_top{ float:left; width:38%; margin-bottom:0;} #sv_right{ float:left; width:calc(62% - 90px); margin-left:90px;} #sv_cont{ padding:0 0px 30px 0px;} #sv_cont .sv_pick{ display:none;} #sv_cont .sv_pick span{ font-size:2em;} #sv_left{ float:left; width:calc(50% - 80px);} #sv_left #sv_top{ float:none; width:100%; margin-bottom:30px;} #sv_right2{ float:left; width:50%; margin-left:80px;} .shop_link{margin:20px 0 0;} /*일감 디테일내용*/ #sv_info{ margin-bottom:50px;} #sv_info dl{ font-size:1.2em; padding:15px 0;} #sv_info dt{ width:80px; top:15px;} #sv_info dd{ margin-left:80px;} #sv_info.v2 dl{border-bottom:none; padding:0; margin:0 0 20px;} .shop_link p{font-size:16px; line-height:1.5em;} /*일감참여 버튼관련*/ #sv_btn{ position:relative; bottom:auto; left:auto; background:none; border-top:0; padding:0px;} #sv_btn .btn_pick{ width:100px; margin-right:30px; font-size:2.2em; padding:7px 0 0 0;} #sv_btn .btn_pick p{ font-size:13px;} #sv_btn .btn_join{ width:calc(100% - 130px);} #sv_btn .btn_join input{ height:60px; font-size:1.5em; border-radius:10px;} /*제품설명 및 주의사항*/ #sv_content{ margin-top:80px;} #sv_content .nav-tabs>li>a{ font-size:1.3em;} #sv_content .nav>li>a{ padding:13px 20px;} #sv_content .tab-content{ padding:30px 10px;} #sv_content .more{ line-height:60px; border-radius:10px;} } @media screen and (max-width:1300px) { #sv_right2.insta{margin-top:0px;} } /*************블로그일감 리스트*/ /*신청당일일감*/ #today_wrap2{ background:#fff;} #today_wrap2 .to_tit{ font-size:1.3em; font-weight:600; color:#222; border-bottom:1px solid #eee; padding:0 15px 15px 15px;} #today_wrap2 .to_tit strong{ color:#0946da;} #today_wrap2 .swiper-container{ overflow:visible; padding:25px 20px 20px 20px; border-bottom:1px solid #eee;} #today_wrap2 .swiper-slide{ position:relative;} #today_wrap2 .to_box{ width:100%; height:110px; position:relative;} #today_wrap2 .pro_info{} #today_wrap2 .pro_info .pi01{ line-height:1em; margin-bottom:5px;} #today_wrap2 .pro_info .pi_st{ float:left; color:#999; font-weight:600; line-height:19px; margin-right:5px;} #today_wrap2 .pro_info .ico_grade{ float:left; color:#fff; background:#dd4a43; border-radius:30px; padding:0px 10px; line-height:19px;font-size:11px; margin-right:5px;} #today_wrap2 .pro_info #work_state{ position:relative; top:auto; right:auto; float:left;} #today_wrap2 #work_state .work_ing{ width:auto; height:auto; padding:0px 10px; border-radius:30px; line-height:19px; font-size:11px; box-shadow:none;} #today_wrap2 #work_state .work_done{ width:auto; height:auto; padding:0px 10px; border-radius:30px; line-height:19px; font-size:11px; box-shadow:none;} #today_wrap2 .pro_info .pi02{ font-size:1.3em; font-weight:700; color:#222; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:100%; overflow:hidden;} #today_wrap2 .pro_info .pi03{ font-size:12px; margin-top:3px;text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:100%; overflow:hidden;} #today_wrap2 .pro_info .pi04{ font-size:12px; margin-top:5px;} #today_wrap2 .pro_info .pi04 span{ float:left; display:block; border-radius:6px; border:1px solid #ccc; line-height:25px; padding:0 10px; margin-right:3px; font-weight:bold;} #today_wrap2 .swiper-pagination{ position:relative; bottom:auto; left:auto; text-align:left; width:100%; margin-top:5px;} #today_wrap2 .swiper-pagination-bullet{ margin:0 3px;} #today_wrap2 .swiper-button-next, #today_wrap2 .swiper-button-prev{ top:-15px; background-size:13px 13px; margin-top:0; width:28px; height:28px; border-radius:50%; z-index:20; border:1px solid #ddd; background-color:#fff; box-shadow:0 3px 3px rgba(95,95,95,0.1); outline:none;} #today_wrap2 .swiper-button-next { right:10px;} #today_wrap2 .swiper-button-prev{ right:43px; left:auto;} #today_wrap2 .swiper-button-next.swiper-button-disabled, #today_wrap2 .swiper-button-prev.swiper-button-disabled{ opacity:0.8;} /*일감리스트*/ #blog_list{} #blog_list li{ height:150px; margin:15px 0; padding:20px 20px; background:#fff; border:1px solid #eee; border-radius:20px; box-shadow:0 3px 8px rgba(95,95,95,0.2); position:relative;} #blog_list .ico_today{ position:relative; top:auto; left:auto; background:#0946da; width:auto; line-height:22px; display:inline-block; border-radius:5px; text-align:center; padding:0 8px;} #blog_list .ico_today i{ color:#fff; font-size:11px;} #blog_list .ico_today p{ display:inline-block; color:#fff; font-size:11px; font-weight:bold; line-height:22px;} #blog_list .pick{ position:absolute; bottom:15px; right:20px; z-index:10; font-size:1.8em;} #blog_list .ico_pick{ color:#ccc;} #blog_list .ico_pick_on{ color:#2482d9;} #blog_list .sl_img_done{ position:absolute; top:0px; left:0px; z-index:11; background:rgba(0,0,0,0.6); width:100%; height:100%; border-radius:20px;} #blog_list .sl_img_done p{ text-align:center; color:#fff; padding:55px 0; line-height:1.5em; font-weight:600; font-size:1.2em;} #blog_list .sl_cont{ padding:5px 0 0 0; line-height:1.3em;} #blog_list .sl_t01{ margin:5px 0 5px 0; display:inline-block;font-weight:700; color:#222; font-size:1.3em;text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:100%; overflow:hidden;} #blog_list .sl_t01 span{ font-size:14px; font-weight:600; color:#999; display:inline-block;} #blog_list .sl_t02{ font-size:12px; margin-top:0px;text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:100%; overflow:hidden;} #blog_list .sl_t03{ margin-top:10px;} #blog_list .sl_t03 span{ display:inline-block; border-radius:30px; line-height:21px; border:1px solid transparent; font-size:11px; padding:0 10px; margin:0 1px 3px 0;} #blog_list .ico_person{ background:#ffe668; color:#333;} #blog_list .ico_take{ background:#3d59a8; color:#fff;} #blog_list .ico_grade{ background:#fff; border:1px solid #ddd !important; color:#222;} #blog_list #work_state{ top:-10px; right:20px;} #blog_list #work_state .work_ing{ width:40px; height:40px; border-radius:50%; line-height:40px; font-size:12px; box-shadow:0 3px 5px rgba(95,95,95,0.5); padding:0;} #blog_list #work_state .work_done{ width:40px; height:40px; border-radius:50%; line-height:40px; font-size:12px; box-shadow:0 3px 5px rgba(95,95,95,0.5); padding:0;} /*제품설명 및 주의사항*/ #sv_content .sv_box{ margin-bottom:30px; padding-bottom:30px; border-bottom:1px dotted #ddd;} #sv_content .sv_box:last-child{ margin-bottom:0; padding-bottom:0; border-bottom:0;} #sv_content .svb_t{ font-size:1.2em; font-weight:600; color:#222; margin-bottom:10px; line-height:1.3em;} #sv_content .svb_t p{ font-size:11px; color:#999;} #sv_content .svb_c{} #sv_content .svb_c .down_img{ float:left; width:calc(33% - 6px); height:100px; margin:3px 3px; border-radius:15px; overflow:hidden; position:relative;} #sv_content .svb_c .down_img img{ width:100%; height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);} #sv_content .btn_down{ text-align:center; margin-top:20px;} #sv_content .btn_down button{ width:100%; height:50px; border:2px solid #ddd; background:#fff; font-size:1.1em; font-weight:600; border-radius:5px;} @media screen and (min-width:767px) { /*************블로그일감 리스트*/ /*신청당일일감*/ #today_wrap2{ width:1180px; margin:0 auto; border:1px solid #ddd; border-radius:25px; padding:35px 30px; box-shadow:0px 0px 10px rgba(95,95,95,0.2);} #today_wrap2 .to_tit{ font-size:1.7em; padding:0 15px 20px 15px;} #today_wrap2 .to_tit strong{ font-weight:600;} #today_wrap2 .swiper-container{ overflow:hidden; padding:25px 25px;} #today_wrap2 .to_box{ width:100%; height:130px; position:relative;} #today_wrap2 .pro_info .pi01{ margin-bottom:10px;} #today_wrap2 .pro_info .pi_st{ font-size:1.1em; line-height:25px;} #today_wrap2 .pro_info .ico_grade{ line-height:25px;font-size:12px;} #today_wrap2 .pro_info #work_state{ position:relative; top:auto; left:auto; float:left;} #today_wrap2 #work_state .work_ing{ line-height:25px;font-size:12px;} #today_wrap2 #work_state .work_done{ line-height:25px;font-size:12px;} #today_wrap2 .pro_info .pi02{ font-size:1.5em;} #today_wrap2 .pro_info .pi03{ font-size:13px;} #today_wrap2 .pro_info .pi04{ font-size:14px; margin-top:10px;} #today_wrap2 .pro_info .pi04 span{ line-height:28px; font-size:1.1em;} #today_wrap2 .swiper-pagination-bullet{ margin:0 5px; width:10px; height:10px;} #today_wrap2 .swiper-button-next, #today_wrap2 .swiper-button-prev{ top:20px; background-size:16px 16px; width:35px; height:35px;} #today_wrap2 .swiper-button-next { right:25px;} #today_wrap2 .swiper-button-prev{ right:63px;} /*일감리스트*/ #blog_list:after{ display:block; content:""; clear:both;} #blog_list li{ float:left; width:calc(50% - 20px); height:180px; margin:10px 10px; padding:30px 30px; border-radius:10px; border-color:#ddd;} #blog_list .ico_today{ line-height:26px; padding:0 10px;} #blog_list .ico_today i{ font-size:12px;} #blog_list .ico_today p{ font-size:12px; line-height:26px;} #blog_list .sl_img_done{ border-radius:10px;} #blog_list .sl_img_done p{ padding:70px 0; font-size:1.3em;} #blog_list .sl_cont{ padding:10px 0 0 0;} #blog_list .sl_t01{ margin:0px 0 8px 0; font-size:1.5em;} #blog_list .sl_t01 span{ font-size:15px;} #blog_list .sl_t02{ font-size:13px;} #blog_list .sl_t03{ margin-top:12px;} #blog_list #work_state{ top:-10px; right:20px; left:auto;} /*제품설명 및 주의사항*/ #sv_content .sv_box{ margin-bottom:50px; padding-bottom:50px; position:relative;} #sv_content .svb_t{ font-size:1.4em; margin-bottom:20px;} #sv_content .svb_t p{ font-size:13px;} #sv_content .svb_c { font-size:1.2em;} #sv_content .svb_c .down_img{ width:130px; height:130px; margin:5px 5px; border-radius:20px;} #sv_content .btn_down{ position:absolute; top:0px; right:0; z-index:10; margin-top:0;} #sv_content .btn_down button{ padding:0 20px; transition:all 0.3s;} #sv_content .btn_down button:hover{ background:#444; border-color:#444; color:#fff; transition:all 0.3s;} } /*************인스타일감 리스트*/ #in_box{ float:left; width:calc(33% - 10px); margin:3px 5px;} #in_box a.in_box_a{ display:block; height:95px; width:95px; margin:0 auto; border-radius:20px; overflow:hidden; position:relative;} #in_box .in_img{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; height:100%;} #in_box .in_btn{ position:absolute; bottom:0px; left:0px; width:100%; height:28px; background:rgba(0,0,0,0.7); z-index:10; text-align:center;} #in_box .in_btn li{ display:inline-block; line-height:28px; vertical-align:top; color:#fff; padding:0 5px;} #in_box .in_check{ position:absolute; top:0px; left:0px; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:11; text-align:center;} #in_box .in_check i{ font-size:2em; color:#fff; padding-top:35px;} @media screen and (min-width:350px) { #in_box a.in_box_a{ height:100px; width:100px;} } @media screen and (min-width:370px) { #in_box a.in_box_a{ height:110px; width:110px;} } @media screen and (min-width:767px) { #in_box{ width:calc(20% - 10px); margin:5px 5px;} #in_box a.in_box_a{ height:110px; width:100%;} #in_box .in_check i{ padding-top:40px;} } /* mypage */ .area_mypage > div{float:left;} .area_mypage > div:after{ display:block; content:""; clear:both;} .area_mypage .area_left{width:380px;} .area_mypage .area_left .myinfo{position:relative; padding:25px; border:1px solid #ddd; border-radius:20px; box-shadow: 0px 7px 9px 1px rgba(151, 151, 151, 0.15); box-sizing:border-box; text-align:center;} .area_mypage .area_left .myinfo > i{ animation-name: signupbox; animation-duration: 4s; animation-iteration-count: infinite; position:absolute; top:-13px; left:50%; display:inline-block; margin:0; padding:0 15px; transform:translateX(-50%); background:#3350c7; border-radius:100px; box-sizing:border-box; font-size:13px; font-weight:600; font-style:normal; color:#fff;} .area_mypage .area_left .myinfo > i > a{display:block; font-size:13px; color:#fff;} .area_mypage .area_left .myinfo .myinfo_wrap{text-align:center;} .area_mypage .area_left .myinfo .area_photo{position:relative; margin:20px 0 0; display:inline-block; width:100px; height:100px; border-radius:50%; border:1px solid #eee; box-sizing:border-box; background:#f9f9f9;} .area_mypage .area_left .myinfo .area_photo img{max-width:100%;} .area_mypage .area_left .myinfo .area_photo .upload{position:absolute; right:-2px; width:25px; height:25px; border-radius:50%; box-sizing:border-box; background:#555 url(./img/icon_upload.svg)no-repeat 55% 49%; background-size:45% 45%;} .area_mypage .area_left .myinfo .id{margin:10px 0 20px;} .area_mypage .area_left .myinfo .id > i{display:inline-block; margin:0; padding:2px 8px; box-sizing:border-box; font-size:11px; font-weight:700; background:#f53d52; border-radius:50px; color:#fff; line-height:1.4em;} .area_mypage .area_left .myinfo .id > i.member{background:#1eb3ec;} .area_mypage .area_left .myinfo .id span{display:inline-block; margin:0 0 0 2px; font-size:17px; font-weight:600; color:#111; line-height:1.5em; vertical-align:middle;} .area_mypage .area_left .myinfo .link{display:inline-block; padding:7px 20px; border:1px dashed #eee; background:#f9f9f9; border-radius:5px; box-sizing:border-box;} .area_mypage .area_left .myinfo .link em{display:block; margin:0 0 3px; font-size:13px; font-weight:700; color:#222; line-height:1.5em;} .area_mypage .area_left .myinfo .link span{display:inline-block; width:100%; word-break:break-word; font-size:14px; font-weight:400; color:#222; line-height:1.3em;} .area_mypage .area_left .myinfo .link .share{position:relative; top:2px; display:inline-block; margin:0 0 0 4px; width:12px; height:14px; background:url(./img/icon_share.svg)no-repeat center; background-size:contain;} .area_mypage .area_left .myinfo_list{margin:30px 0 0;} .area_mypage .area_left .myinfo_list > li{display:inline-block; margin:0 10px 0 0; padding:13px 10px; width:calc((100% / 2) - 7px); width:-webkit-calc((100% / 2) - 7px); background:#ffe668; border-radius:10px; box-sizing:border-box; font-size:15px; font-weight:400; color:#333;} .area_mypage .area_left .myinfo_list > li:last-child{margin:0; background:#eee;} .area_mypage .area_left .mymenu{margin:20px 0 0;} .area_mypage .area_left .mymenu h2{display:block; padding:20px 30px; font-size:20px; font-weight:600; color:#222; line-height:1.5em; border-bottom:2px solid #222;} .mymenu_list{padding:20px 0 0;} .mymenu_list > li{display:block;} .mymenu_list > li > a{position:relative; display:block; padding:10px 30px; box-sizing:border-box; font-size:17px; font-weight:400; color:#555; transition:all 0.3s ease;} .mymenu_list > li > a:hover{color:#222; font-weight:bold;} .mymenu_list > li > a:before{content:''; position:absolute; top:50%; right:30px; width:7px; height:10px; background:url(./img/icon_myarrow.svg)no-repeat center; background-size:contain;} @keyframes signupbox { 0% {top:-13px;} 50% {top:-8px;} 100% {top:-13px;} } .area_mypage{} .area_mypage .area_right{width:calc(100% - 425px); width:-webkit-calc(100% - 425px); margin:0 0 0 45px; box-sizing:border-box;} .area_mypage .area_right .mywrok{padding:30px 0; width:100%; border:1px solid #ddd; border-radius:20px; box-shadow: 0px 7px 9px 1px rgba(151, 151, 151, 0.15); box-sizing:border-box;} .area_mypage .area_right .mywrok:after{ display:block; content:""; clear:both;} .area_mypage .area_right .mywrok > li{float:left; width:calc(100% / 3); width:-webkit-calc(100% / 3); text-align:center; border-right: 1px dashed #eee; box-sizing:border-box;} .area_mypage .area_right .mywrok > li:last-child{border-right:none;} .area_mypage .area_right .mywrok > li{display:block; padding:30px; box-sizing:border-box;} .area_mypage .area_right .mywrok > li h3 a{display:block; font-size:50px; font-weight:600; color:#111; line-height:1.5em;} .area_mypage .area_right .mywrok > li h3.complete a{color:#3350c7;} .area_mypage .area_right .mywrok > li span{display:block; box-sizing:border-box; font-size:17px; font-weight:400; color:#111;} .area_mypage .area_right .mypoint{position:relative; padding:28px 30px; margin:30px 0 0; width:100%; background:#555; border-radius:20px; box-shadow: 0px 7px 9px 1px rgba(151, 151, 151, 0.15); box-sizing:border-box;} .area_mypage .area_right .mypoint h3{font-size:20px; font-weight:600; color:#fff;} .area_mypage .area_right .mypoint p{position:absolute; top:50%; right:30px; font-size:20px; font-weight:600; color:#fff; transform:translateY(-50%);} .area_mypage .area_right .mypoint p span{position:relative; top:2px; font-size:20px; font-weight:600; color:#fff;} .area_mypage .area_right .mypoint p i{display:inline-block; margin:0 5px 0 0; width:23px; height:23px; background:#ffe668; border-radius:50px; font-size:15px; font-weight:800; color:#3350c7; line-height:23px; text-align:center;} .area_mypage .area_right .mypoint p a{vertical-align:middle; margin:0 0 0 7px; display:inline-block; border:2px solid #fff; padding:2px 8px 3px; border-radius:50px; box-sizing:border-box; font-size:13px; font-weight:300; color:#fff; line-height:1.5em;} .area_mypage .area_board{margin:50px 0 0;} .area_mypage .area_board .title{position:relative;} .area_mypage .area_board .title h3{font-size:17px; font-weight:600; color:#111; line-height:1.5em;} .area_mypage .area_board .title .arrow{position:absolute; top:50%; right:0; padding:0 12px 0 0; display:inline-block; text-align:right; font-size:14px; font-weight:400; color:#555; transform:translateY(-50%);} .area_mypage .area_board .title .arrow:before{content:''; position:absolute; top:50%; right:0; width:7px; height: 10px; background: url(./img/icon_myarrow_on.svg)no-repeat center; background-size:contain; transform:translateY(-50%);} .area_mypage .area_board .board_list{position:relative; padding:30px; margin:15px 0 0; border:1px solid #ddd; border-radius:20px; box-shadow: 0px 7px 9px 1px rgba(151, 151, 151, 0.15); box-sizing:border-box; text-align:center; min-height:120px;} .area_mypage .area_board .board_list .nodata{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);} .area_mypage .area_board .board_list .nodata p{font-size:15px; font-weight:400; color:#333;} .area_mypage .area_board .board_list > li{margin:0 0 5px;} .area_mypage .area_board .board_list > li:last-child{margin:0;} .area_mypage .area_board .board_list > li > a{position:relative; display:block; text-align:left;} .area_mypage .area_board .board_list > li > a em{position:relative; display:block; width:80%; font-size:15px; font-weight:400; padding:0 0 0 10px; color:#333; line-height:1.5em; word-break:keep-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .area_mypage .area_board .board_list > li > a em:before{content:''; position:absolute; top:10px; left:0; width:3px; height:3px; background:#333; border-radius:50px;} .area_mypage .area_board .board_list > li > a span{position:absolute; top:50%; right:0; font-size:15px; font-weight:400; color:#555; transform:translateY(-50%);} .area_mypage .area_right .mymenu{display:none;} @media screen and (max-width:1024px) { .area_mypage .area_left{width:300px;} .area_mypage .area_right{width:calc(100% - 340px); width:-webkit-calc(100% - 340px); margin:0 0 0 40px;} .area_mypage .area_left .myinfo > i{width:70%;} .area_mypage .area_board .board_list > li > a em{width:70%;} } @media screen and (max-width:767px){ .area_mypage{margin:0 3%;} .area_mypage .area_left .myinfo > i{width:auto;} .area_mypage .area_left{width:100%;} .area_mypage .area_left .mymenu{display:none;} .area_mypage .area_right .mymenu{display:block;} .area_mypage .area_right{width:100%; margin:20px 0 0;} .area_mypage .area_right .mypoint{margin:20px 0 0;} .area_mypage .area_board{margin:25px 0 0;} } @media screen and (max-width:550px){ .area_mypage .area_left .myinfo{padding:20px; border-radius:12px;} .area_mypage .area_left .myinfo_list > li{margin:0 6px 0 0; font-size:14px; width:calc((100% / 2) - 5px); width:-webkit-calc((100% / 2) - 5px);} .area_mypage .area_right{width:100%; margin:10px 0 0;} .area_mypage .area_right .mypoint{margin:10px 0 0;} .area_mypage .area_board{margin:20px 0 0;} .area_mypage .area_right .mywrok{padding:20px 0; border-radius:12px;} .area_mypage .area_right .mywrok > li{padding:10px;} .area_mypage .area_right .mywrok > li h3 a{font-size:35px; line-height:1.2em;} .area_mypage .area_right .mywrok > li span{font-size:14px;} .area_mypage .area_right .mypoint{padding:15px 20px; border-radius:12px;} .area_mypage .area_right .mypoint p, .area_mypage .area_right .mypoint h3{font-size:18px;} .area_mypage .area_right .mypoint p{right:20px;} .area_mypage .area_board .board_list{margin:10px 0 0; padding:20px; border-radius:12px; min-height:105px;} .mymenu_list > li > a{padding:10px 20px; font-size:16px;} .mymenu_list > li > a:before{right:20px;} .area_mypage .area_board .board_list .nodata p, .area_mypage .area_board .board_list > li > a em{font-size:14px;} } @media screen and (max-width:450px){ .area_mypage .area_left .myinfo > i{width:70%;} .area_mypage .area_left .myinfo{padding:15px;} .area_mypage .area_right .mywrok{padding:15px 0;} .area_mypage .area_right .mywrok > li{padding:5px;} .area_mypage .area_right .mywrok > li h3 a{font-size:30px;} .area_mypage .area_right .mypoint{padding:15px;} .area_mypage .area_right .mypoint p{right:15px;} .area_mypage .area_board .board_list{padding:15px;} .area_mypage .area_board .board_list > li > a em{width:100%;} .area_mypage .area_board .board_list > li > a span{display:none;} .mymenu_list > li > a{padding:7px 15px; font-size:15px;} .mymenu_list > li > a:before{right:15px;} } /* 포인트관리 */ .area_right > h2{display:block; margin:0 0 30px; font-size:18px; font-weight:700; color:#222;} .point_list{margin:40px 0 0;} .area_mypage .tabs{width:100%; } .area_mypage .tabs:after{content:''; display:block; clear:both;} .area_mypage .tabs li{position:relative; float:left; margin:0 20px 0 0; padding:0; box-sizing:border-box; transition:all 0.3s ease 0s; cursor:pointer; text-align:center;} .area_mypage .tabs li:before{opacity:0; content:''; position:absolute; top:-4px; right:-7px; width:5px; height:5px; background:#3350c7; border-radius:50px;} .area_mypage .tabs li span{font-size:17px; font-weight:300; line-height:1.3em; color:#222;} .area_mypage .tabs li span em{padding:2px 10px; box-sizing:border-box; background:#555; border-radius:50px; font-size:14px; font-weight:bold; color:#fff;} .area_mypage .tabs li.active span em{background:#f53d52;} .area_mypage .tabs li.active:before, .area_mypage .tabs li:hover:before{opacity:1;} .area_mypage .tabs li.active span, .area_mypage .tabs li:hover span{font-weight:600;} .tab_container{margin:20px 0 0; width:100%;} .tab_content{position:relative;} .table_wrap{border:1px solid #eee; border-radius:10px; box-sizing:border-box;} .tbl{} .tbl:after{ display:block; content:""; clear:both;} .tbl > li{float:left; padding:12px 10px;} .tbl_hd{border-radius:9px 9px 0 0; background:#f1f1f1; border-bottom:1px solid #eee;} .tbl_hd > li{font-size:16px; font-weight:600; color:#333; text-align:center;} .tbl > li.w1{width:10%;} .tbl > li.w2{width:15%;} .tbl > li.w3{width:20%;} .tbl > li.w4{width:45%;} .tbl > li.w5{width:50%;} .tbl > li.w6{width:25%;} .tbl_cont_wrap li:last-child{border-bottom:none;} .tbl_cont_wrap > li{font-size:15px; font-weight:400; color:#333; text-align:center; border-bottom:1px dashed #eee; line-height:1.4em;} .tbl_cont_wrap li.nodata{width:100%;} .tbl_list{position:relative;} .area_mypage .area_right .mypoint_type .mywrok > li{padding:0} .area_mypage .area_right .mypoint_type .mywrok > li h3{display:block; font-size:32px; font-weight:600; color:#111; line-height:1.5em;} .area_mypage .area_right .mypoint_type .mywrok > li h3.complete{color:#3350c7;} .area_mypage .area_right .mypoint_type .mywrok > li:first-child span{font-weight:bold;} @media screen and (max-width:1200px){ .tbl > li{padding:12px 7px;} .point_list .tbl > li.w2{width:20%;} .tbl > li.w3{width:25%;} .tbl > li.w5{width:35%;} .tbl > li.w4{width:30%;} .area_mypage .area_right .mypoint_type .mywrok > li h3{font-size:26px;} .area_mypage .area_right .mypoint_type .mywrok > li span{font-size:16px;} } @media screen and (max-width:1024px){ .area_mypage .area_right .mypoint_type .mywrok > li h3{font-size:24px;} } @media screen and (max-width:900px){ .tbl_hd{display:none;} .table_wrap .tbl > li.cont{display:block;} .tbl > li.w1, .tbl > li.w2, .tbl > li.w3, .tbl > li.w4, .tbl > li.w5{width:100%;} .tbl > li{padding:0; text-align:left;} .tbl_list{padding:20px;} .tbl_list .data{margin:0 0 5px; color:#555; font-size:13px;} .point_list .tbl_list .type{color:#222; font-weight:600;} .tbl_list .cont{color:#555;} .tbl_list .price{margin:5px 0 0; font-size:16px; font-weight:bold; color:#3350c7} .state{position:absolute; top:-1px; right:-1px; width:auto !important; display:inline-block; font-size:12px; padding:0 5px !important; line-height:1.4em; background:#3350c7; box-sizing:border-box; color:#fff;} .register_list .tbl_hd{display:block;} .register_list .tbl > li{padding:12px 7px; text-align:center;} .register_list .tbl_list{padding:0;} .register_list .tbl_list .data{font-size:15px; margin:0;} .tbl > li.w6:first-child{width:30%;} .tbl > li.w6{width:20%;} .tbl > li.w6:last-child{width:30%;} .area_mypage .area_right .mypoint_type .mywrok{border:none; padding:0; border-radius:0; box-shadow:none;} .area_mypage .area_right .mypoint_type .mywrok > li{width:100%; border:1px solid #ddd; padding:20px; margin:0 0 10px; border-radius:20px; box-shadow:0px 7px 9px 1px rgb(151 151 151 / 15%); box-sizing:border-box;} .area_mypage .area_right .mypoint_type .mywrok > li:last-child{margin:0;} .area_mypage.point .area_right .mypoint{margin:20px 0 0; padding:20px;} .area_mypage.point .area_right .mypoint h3, .area_mypage.point .area_right .mypoint p span{font-size:17px;} .area_mypage .area_right .mypoint p{right:20px;} } @media screen and (max-width:767px){ .area_mypage.point .area_left{display:none;} .area_mypage .area_right .mypoint_type .mywrok > li h3{font-size:27px;} .area_mypage .area_right .mypoint p a{font-size:12px; padding:1px 6px 1px; } } @media screen and (max-width:550px){ .tbl_list{padding:15px;} .register_list .tbl > li{font-size:14px; padding:10px 3px;} .register_list .tbl_list .data{font-size:14px;} .area_mypage.point .area_right .mypoint{margin:10px 0 0; padding:15px;} .area_mypage.point .area_right .mypoint h3{font-size:16px;} .area_mypage.point .area_right .mypoint p span{font-size:17px;} .area_mypage .area_right .mypoint p i{width:20px; height:20px; line-height:20px;} } @media screen and (max-width:400px){ .tbl_list{padding:10px;} .tbl > li.w6:first-child{width:35%;} .tbl > li.w6{width:20%;} .tbl > li.w6:last-child{width:25%;} .area_mypage .area_right .mypoint p{margin:10px 0 0; right:unset; position:relative; top:0; transform:none;} .area_mypage .area_right .mypoint p a{position:absolute; right:0;} } @media screen and (max-width:350px){ .register_list .tbl > li{font-size:13px; padding:8px 3px;} .register_list .tbl_list .data{font-size:13px;} .tbl > li.w6:first-child{width:36%;} .tbl > li.w6{width:17%;} .tbl > li.w6:last-child{width:30%;} } /* 출금하기 */ .withdraw_info{margin:30px 0 0} .withdraw_info h2{display:block; margin:0 0 20px; font-size:17px; font-weight:700; color:#222; text-align:left;} /* .withdraw_info ul > li:first-child{padding:20px; box-sizing:border-box; background:#f9f9f9; border:1px dashed #eee; border-radius:20px;} */ .withdraw_info ul{width:100%;} .withdraw_info ul:after{ display:block; content:""; clear:both;} .withdraw_info ul > li{float:left; width:100%; position:relative; margin:0 0 12px;} .withdraw_info ul > li:after{ display:block; content:""; clear:both;} .withdraw_info ul > li.col2{margin:0 10px 12px 0; float:left; width:calc((100% / 2) - 5px);} .withdraw_info ul > li:nth-child(2){margin:0 0 12px !important;} .withdraw_info ul > li span{display:block; margin:0 0 5px ;font-size:14px; font-weight:500; color:#333; line-height:1.5em; word-break:keep-all;} .withdraw_info ul > li span a{display:inline-block; margin:0 0 0 10px; box-sizing:border-box; background:#fff; border:1px solid #eee; font-size:12px; font-weight:400; color:#222;} .withdraw_info ul > li em{font-size:15px; font-weight:500; color:#333; line-height:1.5em; word-break:keep-all;} .withdraw_info ul > li .cont{display:block; width:100%;} .withdraw_info ul > li .cont input{border:1px solid #eee; width:100%; height:45px; padding:10px; line-height:45px; border-radius:5px; box-sizing:border-box; background:#f9f9f9; font-size:15px; font-weight:400; color:#333;} .withdraw_info ul .secret_num .cont{width:100%;} .withdraw_info ul .secret_num .cont:after{ display:block; content:""; clear:both;} .withdraw_info ul .secret_num i{position:relative; top:10px; float:left; display:inline-block; margin:0 5px;} .withdraw_info ul .secret_num .cont input{float:left; width:calc((100% / 2) - 7px);} .withdraw_info ul .secret_num em{display:block; margin:5px 0 0; font-size:14px; font-weight:400; color:#f53d52; word-break:keep-all; width:100%;} .withdraw_info.v2{text-align:center;} .withdraw_info.v2 ul > li input{text-align:right; padding:0 27px 0 0; font-size:18px; font-weight:bold; color:#3e59a8;} .withdraw_info ul > li label{position:absolute; top:50%; right:10px; transform:translateY(-50%); font-size:16px; font-weight:600; color:#222;} .withdraw_info .btn_withdraw{display:inline-block; margin:30px 0 0; padding:13px 40px; box-sizing:border-box; font-size:16px; font-weight:bold; color:#fff !important; background:#3e59a8; border-radius:10px;} /* 주문서 */ .area_product{} .area_product .top_info{position:relative; padding:15px 20px; border-top:1px solid #222; border-bottom:1px solid #ddd; box-sizing:border-box; background:#f9f9f9;} .area_product .top_info h3{position:relative; padding:0 0 0 25px; font-size:17px; font-weight:400; color:#222; line-height:1.5em; word-break:keep-all;} .area_product .top_info h3:before{content:''; position:absolute; top:50%; left:0; display:inline-block; width:18px; height:18px; background:url(./img/icon_shop.svg)no-repeat center; background-size:contain; transform:translateY(-50%);} .area_product .top_info span{position:absolute; top:50%; right:20px; font-size:14px; font-weight:400; color:#555; transform:translateY(-50%);} .product_list{border-bottom:1px solid #ddd;} .product_list > li{padding:20px; box-sizing:border-box;} .product_list > li .item{} .product_list > li .item:after{ display:block; content:""; clear:both;} .product_list > li .item > div{float:left;} .product_list > li .item .product_img{width:120px; height:120px; } .product_list > li .item .product_img > a{display:inline-block; position:relative; width:100%; height:100%; } .product_list > li .item .product_img > a img{width:100%; border-radius:10px; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; -webkit-transform:translate(-50%,-50%); transform: translate(-50%,-50%); -o-object-fit: cover; object-fit: cover;} .product_list > li .item .product_info{margin:0 0 0 20px; width:calc(100% - 140px);} .product_list > li .item .product_info:after{ display:block; content:""; clear:both;} .product_list > li .item .product_info > div{float:left; text-align:center; display:table; height:120px;} .product_list > li .item .product_info > div .wrap{height:100%; vertical-align:middle; display:table-cell;} .product_list > li .item .product_info .name{text-align:left; width:60%;} .product_list > li .item .product_info .name h3{font-size:15px; font-weight:500; color:#222; line-height:1.5em; word-break:keep-all;} .product_list > li .item .product_info .name .option{margin:2px 0 0;} .product_list > li .item .product_info .name .option span{display:block; color:#555; font-size:14px; font-weight:400; line-height:1.5em; word-break:keep-all;} .product_list > li .item .product_info .amount, .product_list > li .item .product_info .price, .product_list > li .item .product_info .order_state{width:20%; font-size:15px; font-weight:400; color:#555;} .product_list > li .item .product_info .price em{font-size:16px; font-weight:bold; color:#222;} .product_list > li .item .product_info .price span{margin:0 0 0 2px;} .order_wrap{position:relative;} .order_wrap:after{ display:block; content:""; clear:both;} .order_info{float:left; width:750px; margin:50px 50px 0 0; } .order_info h3, .pay_info > h3{font-size:19px; font-weight:600; color:#222; line-height:1.5em;} .order_box.v2{display:inline-block; margin:30px 0 0; padding:50px 0 0; border-top:1px dashed #eee;} .order_box.v2 h3{display:inline-block;} .delivery_info{margin:30px 0 0;} .order_info dl{width:100%;} .order_info dl:after{ display:block; content:""; clear:both;} .order_info dl dt{position:relative; font-size:15px; font-weight:600; color:#333;} .order_info dl dd{margin:10px 0 0;} .btn_post{display:inline-block; margin:0 0 0 7px; padding:13px 11px; vertical-align:middle; min-width:100px; box-sizing:border-box; border:1px solid #3e59a8; font-size:15px; font-weight:400; color:#3e59a8 !important; text-align:center; transition:all 0.3s ease;} .btn_post:hover{background:#3e59a8; color:#fff !important;} .order_info dl dd input{width:300px; height:50px; padding:11px; box-sizing:border-box; border:1px solid #ddd; font-size:15px; font-weight:400; color:#333;} .order_info dl dd input.inputFull{width:100%;} .order_info dl dd.hp input{width:calc((100% / 3) - 9.4px); width:-webkit-calc((100% / 3) - 9.4px);} .order_info dl dd.hp input i{margin:0;} .order_info dl dd.mail input{float:left;} .order_info dl dd.mail span{position: relative; top: 16px; float: left; margin: 0 5px;} .order_info dl dd input.mail1{width:200px;} .order_info dl dd input.mail2{width:250px;} .order_info dl dd select{display:inline-block; outline:none; -webkit-appearance:none; -moz-appearance:none; -o-appearance:none; appearance:none; margin:0 0 0 10px; width:267px; border:1px solid #ddd; box-sizing:border-box; background:#fff url(./img/icon_arrow.png) no-repeat center right 15px; background-size:10px 5px !important; padding:13px; font-size:16px; font-weight:400; color:#333; } .order_info dl dd .address{margin:10px 0;} .order_info dl dd textarea{width:100%; height:100px; box-sizing:border-box; padding:10px; font-size:15px; font-weight:400; border:1px solid #ddd; color:#333; line-height:1.5em; word-break:keep-all; resize:none;} .order_result{float:left; margin:50px 0 0; width:400px; background:#fff; border:1px solid #ddd; padding:22px; box-sizing:border-box; border-radius:10px;} .order_result.on{position:fixed; top:70px; left: 50%; margin-left: 200px;} .order_result h3{font-size:19px; font-weight:600; color:#222; line-height:1.5em;} .order_result .pay_list{margin:20px 0; width:100%;} .order_result .pay_list > li{position:relative; width:100%; margin:0 0 10px; font-size:15px; font-weight:400; color:#333;} .order_result .pay_list > li .price{position:absolute; top:50%; right:0; transform:translateY(-50%);} .order_result .pay_list > li .price em{display:inline-block; vertical-align:middle; margin:0 2px 0 0; font-size:17px; font-weight:bold; color:#222;} .pay_total{position:relative; border-top:1px solid #ddd; padding:20px 0; box-sizing:border-box;} .pay_total span{font-size:17px; font-weight:bold; color:#3e59a8;} .pay_total .price{position:absolute; top:50%; right:0; transform:translateY(-50%); font-size:16px; color:#3e59a8;} .pay_total .price p{display:inline-block; margin:0 3px 0 0; vertical-align:middle; margin:0 2px 0 0; font-size:27px; font-weight:bold; color:#3e59a8;} .order_result .btn_order{display:block; margin:20px 0 0; width:100%; text-align:center; background: #ffe668; font-weight: bold; color: #222; height: 60px; font-size: 18px; border-radius: 10px; line-height:60px;} .pay_info{margin:50px 0 100px;} .area_pay{margin:20px 0 0;} .area_pay > li{margin:0 0 10px;} .area_pay > li:last-child{margin:0;} .area_pay > li label{margin:0;} .area_pay > li label em{position:relative; top:-4px; font-size:15px; font-style:normal; font-weight:500; color:#444;} .area_pay input[type="radio"]{display:none; width:20px; height:20px; outline:none; margin:0;} .area_pay input[type="radio"] + label span{display:inline-block; margin-right:5px; width:20px; height:20px; background:url(./img/icon_check02.svg) no-repeat center; cursor: pointer;} .area_pay input[type="radio"]:checked + label span{background:url(./img/icon_check02_on.svg) no-repeat center;} .orderer{display:inline-block; margin:0 0 0 10px;} .orderer input[type="checkbox"]{display:none; width:20px; height:20px; outline:none; margin:0;} .orderer input[type="checkbox"] + label span{display:inline-block; margin-right:1px; width:23px; height:23px; background:url(./img/ico_check_on_off.png) no-repeat left top/23px auto; cursor: pointer;} .orderer input[type="checkbox"]:checked + label span{background-position:left bottom;} .orderer label{margin-bottom:0;} .orderer label em{position:relative; top:-6px; font-size:15px; font-weight:500; color:#777;} /* 주문조회 */ .area_product.list .top_info .data{width:100%; position:relative;} .area_product.list .top_info h3{padding:0; display:inline-block; font-weight:bold; vertical-align:bottom;} .area_product.list .top_info h3:before{display:none;} .area_product.list .top_info em{margin:0 0 0 5px; font-size:15px; color:#555; display:inline-block;} .area_product.list .top_info a.btn_more{position:absolute; top:50%; right:0; transform:translateY(-50%);} .area_product.list .top_info a.btn_more span{position:relative; padding:0 12px 0 0; font-size:14px; color:#333;} .area_product.list .top_info a.btn_more span:before{content:''; position:absolute; right:0; top:4px; width:8px; height:8px; background:url(./img/icon_shop_arrow.svg)no-repeat center; background-size:contain;} .area_product.list .product_list{border-bottom:none;} .area_product.list:last-child .product_list{border-bottom:1px solid #ddd;} .area_product.list .product_list > li .item .product_img{width:100px; height:100px;} .area_product.list .product_list > li .item .product_info > div{height:100px;} .area_product.list .product_list > li .item .product_info{width:calc(100% - 120px);} .area_product.list .product_list > li .item .product_info .name{width:80%;} .area_product.list .product_list > li .item .product_info .name .detail em{position:relative;display:inline-block; width:auto; font-size:14px;} .area_product.list .product_list > li .item .product_info .name .detail .amount{padding:0 7px 0 0; color:#555;} .area_product.list .product_list > li .item .product_info .name .detail .amount:before{content:''; position:absolute; top:6px; right:0; width:2px; height:12px; background:#ddd;} .area_product.list .product_list > li .item .product_info .name .detail .price{padding:0 0 0 7px; font-size:15px; font-weight:bold; color:#222;} .area_product.list .product_list > li .item .product_info .name .detail .price span{font-weight:400; font-size:14px; color:#555;} .area_product.list .product_list > li .item .product_info .order_state span{font-size:16px; font-weight:bold; color:#2f56ca;} .area_product.list .product_list > li .item .product_info .order_state span.s2{color:#07b7bb;} .area_product.list .product_list > li .item .product_info .order_state span.s3{color:#f53d52;} .area_product.list .product_list > li .item .product_info .order_state span .pstate{display:block; line-height:1.1em;} .area_product.list .product_list > li .item .product_info .order_state span .num{display:inline-block; font-size:13px; color:#555; font-weight:normal; line-height:1.4em;} /* 주문상세 */ #order_form .order_detail{margin:0 0 20px; width:100%; display:block;} #order_form .order_detail h3{display:inline-block; font-size:18px; font-weight:600; color:#222; line-height:1.5em; word-break:keep-all;} #order_form .order_detail em{display:inline-block; font-size:15px; font-weight:400; color:#777; line-height:1.5em; word-break:keep-all;} #order_form.detail .area_product{border:1px solid #ddd; border-radius:15px;} #order_form.detail .area_product .top_info{border-top:none; border-radius:15px 15px 0 0;} #order_form.detail .area_product.list .top_info h3{padding:0 0 0 20px;} #order_form.detail .area_product.list .top_info h3:before{display:block;} #order_form.detail .order_wrap h3{padding:0 0 15px;} #order_form.detail .order_info{float:unset; width:100%;} #order_form.detail .order_wrap dl{} #order_form.detail .order_wrap dl:after{ display:block; content:""; clear:both;} #order_form.detail .order_wrap dl dt{float:left; width:140px; font-size:16px;} #order_form.detail .order_wrap dl dd{margin:0; float:left; width:calc(100% - 140px); width:-webkit-calc(100% - 140px); font-size:16px;} #order_form.detail .order_wrap dl dd.price{color:#3e59a8; font-size:20px; font-weight:bold;} #order_form.detail .order_wrap h3{width:100%; border-bottom:1px solid #eee;} @media screen and (max-width:1300px){ .order_info{width:calc(100% - 450px);} .order_result.on{left: unset; margin-left: 0; right: 5%;} .order_info dl dd input.mail1, .order_info dl dd input.mail2, .order_info dl dd select{width:31.3%;} } @media screen and (max-width:1200px){ .order_result{width:340px;} .order_info{width:calc(100% - 390px);} } @media screen and (max-width:1100px){ .order_info dl dd select{width:31%;} } @media screen and (max-width:1024px){ .order_info{width:calc(100% - 370px); margin:50px 30px 0 0;} .order_info dl dd input.mail1, .order_info dl dd input.mail2{width:30%;} .order_info dl dd select{width:calc(40% - 33px);} } @media screen and (max-width:900px){ .order_result{width:100%;} .order_info{width:100%;} .order_result.on{position:static; top:0; left:0; margin-left:0;} .pay_info{margin:50px 0;} } @media screen and (max-width:767px){ #order_form{margin:0 3%;} .order_info dl dd input{width:100%;} .order_info dl dd input.address1{width:calc(100% - 110px);} .product_list > li .item .product_img{width:100px; height:100px;} .product_list > li .item .product_info{width:calc(100% - 120px);} .product_list > li .item .product_info > div{width:100% !important; height:auto; text-align:left;} .order_info{margin:30px 0 0 0;} .delivery_info{margin:20px 0 0;} .area_product.list .product_list > li .item .product_info > div{height:auto;} .area_product.list .product_list > li .item .product_info .order_state{height:auto;} .area_product.list .product_list > li .item .product_info .order_state > div{height:auto; display:block;} .product_list > li .item .product_info .name .option, .product_list > li .item .product_info .name .detail{display:inline-block;} .area_product.list .product_list > li .item .product_info > div{display:block;} .area_product.list .product_list > li .item .product_info > div .wrap{display:block;} .area_product.list .product_list > li .item .product_info .name .detail .amount{padding:0 7px;} .area_product.list .product_list > li .item .product_info .name .detail .amount:after{content: ''; position: absolute; top: 6px; right: 0; width: 2px; height: 12px; background: #ddd;} .area_product.list .product_list > li .item .product_info .order_state span .pstate{display:inline-block; margin:4px 0 0; line-height:1.2em;} } @media screen and (max-width:550px){ .area_product .top_info{padding:12px 15px;} .area_product .top_info span{right:15px;} .area_product .top_info h3{font-size:16px; padding:0 0 0 22px;} .area_product .top_info h3:before{width:16px; height:17px;} .product_list > li{padding:15px;} .product_list > li .item .product_info{margin:0 0 0 15px; width:calc(100% - 115px);} .product_list > li .item .product_info .name .option{margin:0;} .product_list > li .item .product_info .amount{font-size:14px;} .order_info{margin:20px 0 0;} .order_info > h3, .pay_info > h3{font-size:18px;} .order_info dl dt{font-size:14px;} .delivery_info{margin:12px 0 0;} .order_info dl{margin-bottom:12px;} .order_info dl dd{margin:5px 0 0;} .pay_info{margin:30px 0;} .order_result{margin:0 0 30px; padding:15px;} .area_pay > li{margin:0 0 6px;} .area_pay > li label em{top:-5px;} .area_product.list .product_list > li .item .product_img{width:80px; height:80px;} .area_product.list .product_list > li .item .product_info .name .title{margin:5px 0 0;} .area_product.list .product_list > li .item .product_info .order_state span{font-size:15px;} .area_product.list .product_list > li .item .product_info .name h3{width:100%; text-overflow:ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden;} .area_product.list .product_list > li .item .product_info{width:calc(100% - 95px);} .area_product.list .top_info{padding:7px 10px;} .order_info > h3, .pay_info > h3{font-size:17px;} #order_form.detail .order_wrap h3{padding:0 0 10px;} #order_form .order_detail{margin:0 0 10px;} #order_form .order_detail h3{font-size:17px;} #order_form .order_detail em{font-size:14px;} #order_form.detail .order_wrap dl dt, #order_form.detail .order_wrap dl dd{font-size:15px;} #order_form.detail .order_wrap dl{margin:0 0 15px;} #order_form.detail .order_wrap dl dt{width:100px;} #order_form.detail .order_wrap dl dd{width:calc(100% - 100px); width:-webkit-calc(100% - 100px);} #order_form.detail .order_wrap dl dd.price{font-size:18px; line-height:1.2em;} } @media screen and (max-width:450px){ .area_product .top_info{padding:12px 10px;} .area_product .top_info span{right:10px;} .product_list > li{padding:15px 10px;} .product_list > li .item .product_img{width:80px; height:80px;} .product_list > li .item .product_info{margin:0 0 0 10px; width:calc(100% - 90px);} .product_list > li .item .product_info .name h3{font-size:14px;} .product_list > li .item .product_info .name .option span, .product_list > li .item .product_info .amount{font-size:13px;} .product_list > li .item .product_info .amount, .product_list > li .item .product_info .price{line-height:1.4em;} .order_info dl dd select{margin:10px 0 0; width:100%;} .order_info dl dd input.mail1, .order_info dl dd input.mail2{width:calc((100% / 2) - 12px);} #order_form.detail .order_wrap dl{margin:0 0 10px;} #order_form.detail .order_wrap dl dt{width:90px;} #order_form.detail .order_wrap dl dd{width:calc(100% - 90px); width:-webkit-calc(100% - 90px);} } @media screen and (max-width:400px){ .area_product.list .product_list > li .item .product_img{width:60px; height:60px;} .area_product.list .product_list > li .item .product_info{margin:0 0 0 10px; width:calc(100% - 70px);} .area_product.list .top_info h3{font-size:15px;} .area_product.list .top_info em{font-size:13px;} .area_product.list .product_list > li .item .product_info .name .title{font-size:14px; margin:0; line-height:1.2em;} .area_product.list .product_list > li .item .product_info .order_state{line-height:1.2em;} .area_product.list .product_list > li .item .product_info .order_state span{font-size:13px; line-height:1.2em;} } .snb{margin:30px 0 40px; text-align:center;} .snb > li{display:inline-block; margin:0 5px 0 0;} .snb > li:last-child{margin:0;} .snb > li > a{padding:5px 15px; border:1px solid #ddd; background:#fff; border-radius:50px; box-sizing:border-box; box-shadow:1px 4px 7px -2px rgba(0,0,0,0.08); font-size:14px; font-weight:400; color:#333;} .snb > li > a.on{background:#3e59a8; border:1px solid #3e59a8; color:#fff;} .area_mypage.work .area_left, .area_mypage.pick .area_left{display:none;} #mywork_list #shop_list li{height:auto;} .detail_view{margin:10px 0 0; width:100%;} .detail_view .btn_detail{display:inline-block; padding:2px 20px; border-radius:15px; box-sizing:border-box; font-size:12px; background:#f9f9f9; border:1px solid #eee; color:#222; font-weight:600; text-align:center; transition:all 0.3s ease;} .detail_view .btn_detail:hover{background:#3e59a8; border:1px solid #3e59a8; color:#fff;} #mywork_list #blog_list li{margin:0 30px 30px 0; width:calc((100% / 2) - 15px);} #mywork_list #blog_list li:nth-child(2n){margin:0 0 30px 0;} @media screen and (min-width:767px) { .area_mypage.work .area_left, .area_mypage.pick .area_left{display:block;} #mywork_list #shop_list{margin:10px 0 0;} #mywork_list #shop_list .pick{font-size:1.8em; top:-6px;} #mywork_list #shop_list li{margin:0 30px 30px 0; width:calc((100% / 4) - 23px); width:-webkit-calc((100% / 4) - 23px); height:auto;} #mywork_list #shop_list li:nth-child(4n){margin:0 0 30px;} #mywork_list #shop_list .sl_img{height:150px;} #mywork_list #shop_list .sl_cont{padding:10px 0 0;} #mywork_list #shop_list .sl_t01{font-size:12px;} #mywork_list #shop_list .sl_t02{font-size:15px; margin:4px 0 8px 0;} #mywork_list #shop_list .sl_t03 span{border-radius:3px; line-height:17px; font-size:11px; padding:0 7px; margin:0 2px 0 0;} } @media screen and (max-width:1200px) { #mywork_list #shop_list .sl_img{height:120px;} #mywork_list #shop_list li{margin:0 20px 20px 0; width:calc((100% / 4) - 15px); width:-webkit-calc((100% / 4) - 15px);} #mywork_list #shop_list li:nth-child(4n){margin:0 0 20px;} #mywork_list #blog_list li{margin:0 20px 20px 0; width:calc((100% / 2) - 10px);} #mywork_list #blog_list li:nth-child(2n){margin:0 0 20px 0;} } @media screen and (max-width:1100px) { .snb > li{margin:0 3px 12px 0;} .area_mypage.work .tabs li{margin:0 15px 0 0;} #mywork_list #shop_list .sl_img{height:120px;} #mywork_list #shop_list li{margin:0 20px 20px 0; width:calc((100% / 3) - 13.5px); width:-webkit-calc((100% / 3) - 13.5px);} #mywork_list #shop_list li:nth-child(4n){margin:0 20px 20px 0;} #mywork_list #shop_list li:nth-child(3n){margin:0 0 20px;} } @media screen and (max-width:850px) { #mywork_list #shop_list .sl_img{height:120px;} #mywork_list #shop_list li{margin:0 20px 20px 0; width:calc((100% / 2) - 10px); width:-webkit-calc((100% / 2) - 10px);} #mywork_list #shop_list li:nth-child(4n){margin:0 20px 20px 0;} #mywork_list #shop_list li:nth-child(3n){margin:0 20px 20px 0;} #mywork_list #shop_list li:nth-child(2n){margin:0 0 20px;} } @media screen and (max-width:766px) { #mywork_list #shop_list .sl_img{height:150px;} .area_mypage.work .area_right{margin:0;} .area_mypage.work .tabs{text-align:center;} .area_mypage.work .tabs li{display:inline-block; float:unset;} .area_mypage.work .tabs li:last-child{margin:0;} .area_right > h2{margin:0 0 15px;} #mywork_list #blog_list li{padding:15px; margin:0 0 20px; width:100%;} #mywork_list #blog_list li:nth-child(2n){margin:0 0 20px;} } @media screen and (max-width:550px) { .snb{width:100%; margin:30px auto 30px;} .area_mypage.work .tabs li span{font-size:16px;} .area_mypage .tabs li span em{font-size:13px;} #mywork_list #shop_list .sl_img{height:120px;} #mywork_list #shop_list li{margin:0 10px 20px 0; width:calc((100% / 2) - 5px); width:-webkit-calc((100% / 2) - 5px);} #mywork_list #shop_list li:nth-child(4n){margin:0 10px 20px 0;} #mywork_list #shop_list li:nth-child(3n){margin:0 10px 20px 0;} #mywork_list #shop_list li:nth-child(2n){margin:0 0 20px;} } @media screen and (max-width:450px) { .area_mypage.work .tabs li{margin:0 9px 0 0;} .area_mypage .tabs li:before{top:-2px; right:-5px; width:4px; height:4px;} } @media screen and (max-width:400px) { .snb{width:100%;} } @media screen and (max-width:370px) { .area_mypage.work .tabs li{margin:0 7px 0 0;} .area_mypage.work .tabs li span{font-size:15px;} .area_mypage .tabs li span em{font-size:13px; padding:2px 6px;} } @media screen and (max-width:320px) { .area_mypage.work .tabs li{border:1px solid #ddd; border-bottom:none; box-sizing:border-box; padding:5px; margin:0; width:100%;} .area_mypage.work .tabs li:last-child{border-bottom:1px solid #ddd;} .area_mypage.work .tabs li:before{display:none;} .area_mypage.work .tabs li.active{background:#444; border:1px solid #444;} .area_mypage.work .tabs li.active span a{color:#fff !important;} } #mywork_list02{margin:0 0 20px;} #mywork_list.shop .tbl > li{font-size:14px; display:table;} #mywork_list.shop .tbl_cont_wrap > li a{position:relative; display:block; width:100%; height:100%;} #mywork_list.shop .v1 .tbl > li .list_wrap{display:table-cell; height:65px; vertical-align:middle;} #mywork_list.shop .v2 .tbl > li .list_wrap{display:table-cell; height:42px; vertical-align:middle;} #mywork_list.shop .tbl > li.work{display:block; text-align:left;} #mywork_list.shop .tbl > li span{font-weight:600;} #mywork_list.shop .tbl > li .color1{color:#666;} #mywork_list.shop .tbl > li .color2{color:#3e59a8;} #mywork_list.shop .tbl > li .color3{color:#f53d52;} #mywork_list.shop .tbl > li.count span{font-weight:400;} #mywork_list.shop .tbl > li .fas{font-size:12px; color:#777; margin:0 3px 0 0;} #mywork_list.shop .w1{width:10%;} #mywork_list.shop .w2{width:15%;} #mywork_list.shop .w3{width:45%;} #mywork_list.shop .work_img{display:inline-block; width:65px; height:65px;} #mywork_list.shop .work_img img{width:100%; border-radius:10px; box-sizing:border-box;} #mywork_list.shop .work_info{width:100%;} #mywork_list.shop .v1 .work_info{display:table-cell; width:calc(100% - 80px); vertical-align:middle; display:inline-block; margin:0 0 0 7px; text-align:left;} #mywork_list.shop .work_info span{font-size:12px; color:#555;} #mywork_list.shop .work_info h3{font-size:14px; font-weight:600; color:#222; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden;} @media screen and (max-width:1100px){ #mywork_list.shop .w3{width:42%;} } @media screen and (max-width:900px){ #mywork_list.shop .table_wrap{border:none; border-radius:0;} #mywork_list.shop .tbl_cont_wrap > li{border-radius:10px; border:1px solid #eee; margin:0 0 10px;} #mywork_list.shop .w1, #mywork_list.shop .w2, #mywork_list.shop .w3{width:100%;} #mywork_list.shop .tbl_list{padding:0;} #mywork_list.shop .tbl > li{ font-size:13px;} #mywork_list.shop .v1 .tbl > li{display:block;} #mywork_list.shop .v2 .tbl > li .list_wrap, #mywork_list.shop .v1 .tbl > li .list_wrap{display:block; height:auto;} #mywork_list.shop .work{padding:20px;} #mywork_list.shop .type{padding:10px 20px 0; background:#f9f9f9; border-top:1px dashed #eee; font-size:13px;} #mywork_list.shop .count{padding:0 20px 10px; background:#f9f9f9; font-size:13px; border-radius:0 0 10px 10px;} #mywork_list.shop .count .fas{font-size:11px;} #mywork_list.shop .price{position:absolute; width:auto !important; right:20px; bottom:20px;} #mywork_list.shop .state{background:#555; padding:1px 7px 2px !important;} #mywork_list.shop .state.v2{background:#3e59a8;} #mywork_list.shop .state.v3{background:#f53d52;} #mywork_list.shop .tbl > li .color1, #mywork_list.shop .tbl > li .color2, #mywork_list.shop .tbl > li .color3{color:#fff;} #mywork_list.shop .tbl > li.count span{color:#3e59a8;} #mywork_list.shop .tbl > li.price{font-size:16px;} } @media screen and (max-width:550px){ #mywork_list.shop .work{padding:15px;} #mywork_list.shop .type{padding:10px 15px 0;} #mywork_list.shop .count{padding:0 15px 10px;} #mywork_list.shop .price{right:15px;} } @media screen and (max-width:450px){ #mywork_list.shop .work{padding:10px;} #mywork_list.shop .type{padding:10px 10px 0;} #mywork_list.shop .count{padding:0 10px 10px;} #mywork_list.shop .price{right:10px;} } /* 나의 일감 상세페이지 */ #mywork_list.detail .mywork_info{width:100%; border:1px solid #ddd; padding:20px; box-sizing:border-box; border-radius:20px; box-shadow:0px 7px 9px 1px rgb(151 151 151 / 15%);} #mywork_list.detail .mywork_info ul > li{} #mywork_list.detail .mywork_info ul > li:after{ display:block; content:""; clear:both;} #mywork_list.detail .mywork_info ul > li > a{display:block; height:100%;} #mywork_list.detail .mywork_info ul > li .work_img{float:left; width:120px; height:120px;} #mywork_list.detail .mywork_info ul > li .work_img img{width:100%; height:100%; border-radius:10px; box-sizing:border-box;} #mywork_list.detail .work_info{float:left; width:calc(100% - 135px); width:-webkit-calc(100% - 135px); height:120px; margin:0 0 0 15px;} #mywork_list.detail .work_info .work_wrap{display:table; width:100%; height:100%;} #mywork_list.detail .work_info .work_wrap_txt{display:table-cell; height:100%; vertical-align:middle;} #mywork_list.detail .work_info span{font-size:14px; font-weight:600; color:#999;} #mywork_list.detail .work_info h3{font-size:16px; font-weight:400; color:#333; line-height:1.4em;} #mywork_list.detail .mywork_link{position:relative; margin:20px 0; background:#3d404b; border-radius:15px; box-sizing:border-box; padding:20px;} #mywork_list.detail .mywork_link h3{color:#fff; display:inline-block; font-size:17px; font-weight:600;} #mywork_list.detail .mywork_link h3 .share{position:relative; top:2px; display:inline-block; margin:0 0 0 5px; width:12px; height:14px; background:url(./img/icon_share_wt.svg)no-repeat center; background-size:contain;} #mywork_list.detail .mywork_link span{display:block; color:#fff; font-size:15px; font-weight:400; word-break:break-all;} .area_mypage.work .mywrok{box-shadow:none;} .area_mypage.work .area_right .mypoint_type .mywrok > li:first-child span{font-weight:400;} .order_list > h2{display: block; margin: 30px 0 20px; font-size: 18px; font-weight: 700; color: #222;} .order_list .tbl > li em{display:none;} #mywork_list.detail.blog .work_info{margin:0; width:100% !important; height:100%;} #mywork_list.detail.blog .work_info h3{font-weight:bold; font-size:17px;} #mywork_list.detail.blog .mywork_link .btn_blog{position:absolute; top:18px; right:20px; padding:1px 10px; border-radius:50px ;box-sizing:border-box; border:1px solid #fff; font-size:14px; font-weight:400; color:#fff;} #mywork_list.detail.blog .mywork_link span{margin:5px 0 0;} #mywork_list.detail.blog .mywork_link i{display:inline-block; margin:0; background:#ffe668; border-radius:5px; font-size:12px; text-align:center; color:#333; padding:0 7px; font-weight: bold; box-sizing:border-box;} @media screen and (max-width:1200px){ .area_mypage.work .order_list .tbl > li.w3{width:20%;} } @media screen and (max-width:900px){ #mywork_list.detail .mywork_info ul > li .work_img{float:left; width:100px; height:100px;} #mywork_list.detail .work_info{width:calc(100% - 115px); width:-webkit-calc(100% - 115px); height:100px;} .area_mypage.work .order_list .tbl > li.w3{width:100%; margin:0 0 3px; } .area_mypage.work .order_list .tbl > li:last-child.w3{margin:0;} .order_list .tbl > li em{display:inline-block;} #mywork_list.detail .mywork_link{margin:10px 0;} .area_mypage.work .area_right .mypoint_type .mywrok > li{box-shadow:none;} } @media screen and (max-width:550px){ .area_mypage.work .order_list .tbl > li.w3{font-size:14px; margin:0 0 1px;} #mywork_list.detail .mywork_info, #mywork_list.detail .mywork_link{padding:15px;} #mywork_list.detail .mywork_info ul > li .work_img{width:80px; height:80px;} #mywork_list.detail .work_info{margin:0 0 0 10px; width:calc(100% - 90px); width:-webkit-calc(100% - 90px); height:80px;} #mywork_list.detail .work_info h3{font-size:14px;} #mywork_list.detail .work_info span{font-size:13px;} #mywork_list.detail .detail_view{margin:5px 0 0;} #mywork_list.detail .detail_view .btn_detail{padding:1px 10px;} #mywork_list.detail .mywork_link h3{font-size:16px;} #mywork_list.detail .mywork_link span{font-size:14px; line-height:1.3em;} .order_list > h2{margin:20px 0 10px;} #mywork_list.detail.blog .mywork_link .btn_blog{top:15px; right:15px; padding:0 10px; font-size:13px;} #mywork_list.detail.blog .work_info h3{font-size:16px;} #mywork_list.detail.blog .mywork_link span{margin:2px 0 0;} } @media screen and (max-width:450px){ #mywork_list.detail .mywork_info, #mywork_list.detail .mywork_link{padding:10px;} #mywork_list.detail.blog .mywork_link .btn_blog{top:10px; right:10px; padding:0 7px; font-size:12px; line-height:1.7em;} #mywork_list.detail.blog .work_info h3{font-size:15px;} } @media screen and (max-width:400px){ #mywork_list.detail .work_info{height:auto;} } @media screen and (max-width:340px){ #mywork_list.detail .detail_view .btn_detail{font-size:11px;} } #layer{top:50% !important; left:50% !important; transform:translate(-50%, -50%);} #layer .add_title{display:none;} @media screen and (max-width:767px){ #layer #btnCloseLayer{display:none;} #layer{top:0 !important; left:0 !important; right:0 !important; bottom:0 !important; width:100% !important; height:100% !important; z-index:9999 !important; transform:none;} #layer .add_title{display:block;position:relative; padding:11px !important; height:50px; border-bottom:1px solid #ddd; text-align:center; box-sizing:border-box; background:#fff;} #layer .add_title > h2{padding:0; font-size: 18px; font-weight:bold; color:#333;} #layer .add_title .btn_close{position:absolute; top:50%; right:15px; transform:translateY(-50%);} #layer .btn_close{position:relative; display:inline-block; width:20px; height:20px; cursor:pointer;} #layer .btn_close > span{display:block; position:absolute; top:7px; left:0; width:100%; height:2px; background:#111;} #layer .btn_close > span:nth-of-type(1){transform: rotate(-45deg);} #layer .btn_close > span:nth-of-type(2){transform: rotate(45deg);} } .fotorama__wrap, .fotorama__stage, .fotorama__stage__shaft, .fotorama__img{width:100% !important;} /* 210727인스타그램 추가 */ #InstaModal .modal-header .modal-title{color:#FFF;font-weight:600;font-size: 20px;position:relative} #InstaModal .modal-header .modal-title:before{ content: ''; display: inline-block; width: 30px; height: 33px; background: url(./img/ico_insta.png) no-repeat center center; background-size: 24px; margin-left: -35px; position: absolute; margin-top: -1px; } #InstaModal .modal-body { text-align: left; padding: 20px; background: #f0f0f0; } #InstaModal .modal-body dl { padding: 10px 20px; margin-bottom: 0; } #InstaModal .modal-body dt label { color: #3d59a8; } #InstaModal .modal-body dd input { border: 1px solid #3d59a8; padding: 8px 10px; font-size: 13px; width: 100%; background: #FFF; } #InstaModal .modal-footer {text-align:center} #InstaModal .modal-footer .btn-primary { background: #3d59a8; padding: 10px 30px; font-size: 15px; } #InstaModal .modal-footer .btn-secondary { padding: 0 25px; font-size: 15px; line-height: 43px; } #pointFModal{} #pointFModal .modal-header h5{ color: #FFF; font-size: 22px; font-weight: 600; margin-top: 3px; } #pointFModal .modal-header h5 p{ font-size:15px; font-weight: 400; margin-bottom: 4px; } #pointFModal .modal-body{font-weight:400;color:#000;text-align:left} #pointFModal .modal-body p{font-weight:400;color: #3d59a8;text-align:left;} #pointFModal .modal-body p.tit{font-size:17px;font-weight: 600;margin-bottom: 5px;} #pointFModal .modal-body p.txt{font-size:13px;color: #000;margin-bottom: 5px;} #pointFModal .modal-body p.txt:last-child{margin-bottom:0} em{font-style: normal;}