/* 상단 레이아웃 */ header {} #head_wrapper {width:100%;z-index:100; margin: 0 0 40px} #head_wrapper:after {display:block;visibility:hidden;clear:both;height:0px;content:"상단"} .head_top_menu {position: relative;z-index: 101; margin:0 auto;max-width: 1000px; padding: 0 10px} .head_top_menu:after {display:block;visibility:hidden;clear:both;height:0px;content:"로고"} .head_top_menu .logo {float:left; width:70%; z-index:110; margin:0 auto; line-height: 5rem;} .head_top_menu .logo a {color: #000} .head_top_menu .logo img {width: 100%; max-width:100px} .head_top_menu .my {float: left; width: 30%; text-align: right; line-height: 5rem} .head_top_menu .my .alram {margin: 0 15px 0 0} .head_top_menu .my .alram img {width: 28px} .head_top_menu .my .mypage img {width: 42px; border-radius: 21px } #sub_head_wrapper {width:100%;z-index:100;border-bottom: 1px solid #ccc; margin: 0 0 40px} #sub_head_wrapper:after {display:block;visibility:hidden;clear:both;height:0px;content:"상단"} #sub_head_wrapper .head_top_menu {padding: 0 0px} #sub_head_wrapper .head_top_menu .logo {line-height: 5rem; padding: 0 0 0 36px} #sub_head_wrapper .head_top_menu .logo > a {position: absolute; left: 0px; top: 26px; width: 30px; height: 30px; background: url("/data/design/icon_home_on.png") no-repeat top center; background-size: 30px 30px;} #sub_head_wrapper .head_top_menu .logo img {max-width:34px;} #sub_box {width: 100%; max-width: 1000px; margin: 0 auto} /* nav_depth */ #head_wrapper nav {border-top: 1px solid #ddd;border-bottom: 1px solid #ddd; padding: 0 10px} #head_wrapper nav:after {display:block;visibility:hidden;clear:both;height:0px;content:"상단메뉴"} #head_wrapper nav .menu_box{margin:0 auto;max-width: 1000px} #head_wrapper nav .menu_box li {float:left; width: 27%; text-align:center;} #head_wrapper nav .menu_box li:nth-child(1) {width: 19%} #head_wrapper nav .menu_box li a{display:block; padding: 17px 0px;} #head_wrapper nav .menu_box li.on a {color:#00a0e9; border-bottom: 2px solid #00a0e9; opacity: 1} #head_wrapper nav .menu_box li a:hover {color:#00a0e9; border-bottom: 2px solid #00a0e9} #t_call{display:none;} .main_info {display:none; clear:both; position:relative; width:100%; font-size:22px; margin:0px auto; text-align:center; background:#000; color:#000; padding:20px 0 20px 0; color:#fff;font-weight:400;overflow:hidden} .main_info .box {width:100%;max-width: 768px;margin:0 auto} .main_info .box .tel{float:left;width:50%;} .main_info .box .bank{float:left;width:50%;} .head_main {width:100%;} .head_sub {width:100%;height:290px} .head_main_menu {width:790px;height:112px;position:absolute; top:300px; z-index:1;left:50%;margin-left:-500px} .head_sub_menu {width:790px;height:112px;position:absolute; top:197px; z-index:1;left:50%;margin-left:-500px} .sub_type_tab_on a{background:#0096ff;border:1px solid #0096ff} .submenu {text-align: center; margin: 10px 0;box-shadow: 0 2px 2px 0 rgb(0 0 0 / 10%);} .submenu li {display: inline-block; padding: 18px 30px 20px; font-size: 22px; margin: 0 0 0 -1px; opacity: 1; font-weight:400; color: #777} .submenu li a {color: #777} .submenu li.on {color: #796c62; font-weight: 600; border-bottom: 2px solid #796c62} .submenu li.on a {color: #796c62} .submenu_board {position: relative; width: 100%; max-width: 1000px; margin: 0 auto} .submenu_board a {float: left; display: inline-block; width: calc(33.333% - 7px); background: #f7f7f7; padding: 15px 0px; text-align: center; margin: 0 10px 0 0; color: #555; font-weight:500} .submenu_board a:nth-child(3n) {margin: 0} .submenu_board a.on {background: #00a0e9; color: #fff;} /* top_nav */ #top_nav {position:absolute; font-size:11px; color:#87a8d4; float:right; right:0; z-index:999999; font-weight:bold; height:42px} #top_nav ul {overflow:hidden} #top_nav ul li {float:left;padding:0 0 0 5px} #top_nav ul li a {color:#4c6688; text-decoration:none; font-weight:bold} .small {font-size:8px; line-height:1.5em; margin:0 5px 0 5px} /* 중간 레이아웃 */ content {position:relative;} #content_wrapper {position:relative;display:block;width:100%; margin: 0 0 50px} #content_wrapper:after {display:block;visibility:hidden;clear:both;height:0px;content:"본문내용";} #content_wrapper .content_box {width: 100%; padding: 0 10px} #content_wrapper .content_box .sub_board {width: 100%;} /*슬라이드 이미지*/ .content_slide {clear: both; position:relative;z-index:10;width:100%; max-width: 1000px; margin: 0px auto} .content_slide:after {display: block; content:""; clear: both; height: 0px} .content_slide img{width:100%;} .content_slide_sub {position:relative; z-index:10;width:100%;} .content_slide_sub img{width:100%;height:auto;margin:0 auto} .content_slide_sub .txt {position: absolute; width: 100%; max-width: 1000px; left:50%; top: 50%; margin: -15px 0 0 -660px; color: #fff; text-align: center; font-size: 40px; font-weight: 600; color: #fff; z-index: 11} .content_slide_sub .bg {position:relative; height: 290px; z-index: 10 } .slide_text {display:none;position:absolute;width:100%;bottom:16%;text-align:center;} .slide_text .stl {width:400px;margin:0 auto 10px auto;text-align:center;font-size:36px;color:#fff;letter-spacing:-3px;background:#1291cc;padding:5px} .slide_text .tl {margin:0 auto;font-size:75px;color:#fff;letter-spacing:-5px;line-height:90%;font-weight:bold} .content_box {position:relative;width:100%;margin:0 auto} .content_left {position:relative;width:150px;float:left} .content_left_box {width:150px;} .content_right {float:left;width:70px;} .sub_title {margin: 90px 0 50px; text-align: center} .sub_title span {position: relative; font-size: 36px; letter-spacing: -2px; color: #333; font-weight: 400} .sub_title span:before {display: inline-block; content:""; background-image: url("/data/design/title_dot_left.png"); background-size:30px 30px; width:30px; height:30px; margin: 0 10px 0 0; background-position: center center;} .sub_title span:after {display: inline-block; content:""; background-image: url("/data/design/title_dot_right.png"); background-size:30px 30px; width:30px; height:30px; margin: 0 0 0 10px; background-position: center center} .sub_title strong {display: inline-block; width: 80px; height: 1px; border-bottom: 1px solid #777;} .sub_title p {font-size: 24px; color: #777; margin: 15px 0 0; font-weight: 100} \ /*서브내용*/ .subcon .upper-bar:before { content: ''; position: absolute; top: 0; left: 0; width: 35px; height: 1px; background-color: #796c62;} .subcon {clear:both;position:relative;width:100%;margin:100px 0 0px 0; font-size: 18px; line-height: 32px} .subcon:after {display:block;visibility:hidden;clear:both;height:0px;content:"";height:0px} /* 목록 바로가기 */ .anchor {margin:0 20px 10px 21px;padding:0;zoom:1} .anchor:after {display:block;visibility:hidden;clear:both;height:0px;content:""} .anchor li {float:left;margin-left:-1px;list-style:none} .anchor a {display:inline-block;padding:5px 10px;border:1px solid #c8ced1;background:#d6dde1;text-decoration:none} .anchor a:focus, .anchor a:hover {background:#c8d2d8} /*help */ .help_text {font-size:8pt} /*테이블 리스트*/ .basic_tbl {width:100%;border-collapse:collapse;border-spacing:0;background:#fff;font-size:16px;border-top:2px solid #3e3e3e;border-bottom:1px solid #3e3e3e;letter-spacing:-1px} .basic_tbl caption {margin:0;padding:0;line-height:0;overflow:hidden} .basic_tbl thead {border-bottom:1px solid #3e3e3e} .basic_tbl thead th {height:60px;background:#f6f6f6;padding:0px;color:#000;font-weight:bold;text-align:center;border-bottom:1px solid #eaeaea;;border-right:1px solid #eaeaea;border-left:1px solid #eaeaea;font-size:16px;} .basic_tbl thead th a {} .basic_tbl tbody tr {} .basic_tbl tbody td {height:70px;text-align:center;border-bottom:1px solid #eaeaea;;border-right:1px solid #eaeaea;border-left:1px solid #eaeaea} .basic_tbl tbody td a{} .basic_tbl tfoot tr {background:#4a4a4a;height:70px;text-align:center;font-size:16px} .basic_tbl tfoot th {} .basic_tbl tfoot td {color:#fff;font-weight:bold} .basic_tbl td table {border-collapse:collapse;border-spacing:0;border:0px} .basic_tbl td table td {border:0px} .basic_tbl a {} .basic_tbl_c {height:100px} /* 페이지 내 안내문 */ .local_desc {} .local_desc ol, .local_desc ul {margin:0;padding:0 0 10px 0px} .local_desc li {margin:0 0 5px} .local_desc01 {margin:10px 0;padding:20px;min-width:920px;border:1px solid #f2f2f2;background:#f9f9f9} .local_desc01 strong {color:#ff3061} .local_desc01 a {text-decoration:underline} .local_desc02 {margin:0 20px 10px;min-width:960px} /* 주로 온라인 서식 관련 안내 내용에 사용 */ .local_desc02 p {padding:0;line-height:1.8em} /* 페이지 내 카운트 */ .local_ov {min-width:960px} .local_ov01 {position:relative;margin:-10px 0 10px;padding:10px 20px;border-bottom:1px solid #e9e9e9;background:#f2f5f9} .local_ov01 .ov_listall {display:inline-block;margin:0 5px 0 0;padding:0 10px 0 0;border-right:1px solid #ccc} .local_ov01 .ov_a {display:inline-block;margin:0 0 0 5px;padding:0 0 0 10px;border-left:1px solid #ccc;color:#ff3061} /* 배너관리 */ .sbn_img {text-align:center} .sbn_image {display:none;margin:0 0 10px;text-align:left} /* 새창 기본 스타일 */ .new_win {} .new_win h1 {margin:50px 0 20px;padding:0 20px;min-width:320px/* 적정값으로 변경하여 사용하세요. */;height:60px;border-top:0px solid #484848;border-bottom:1px solid #e9e9e9;background:#fff;font-size:1.2em;line-height:5em} .new_win h2 {margin:0 20px 10px} .new_win_ul {margin:-20px 0 20px 0;padding:0 0 0 20px;border-bottom:1px solid #515151;background:#484848;list-style:none;zoom:1} .new_win_ul:after {display:block;visibility:hidden;clear:both;height:0px;content:""} .new_win_ul li {float:left;margin-left:-1px} .new_win_ul a {display:block;padding:10px 10px 8px;border-right:1px solid #595959;border-left:1px solid #595959;color:#fff;font-family:dotum;font-weight:bold;text-decoration:none} .new_win_desc {margin:0 20px} .new_win .anchor {margin:0 20px 5px} .new_win .tbl_wrap {margin:0 20px 20px;padding:0} .new_win .win_btn {clear:both;padding:20px;text-align:center} /* 새창용 */ .new_win .win_btn button {display:inline-block;padding:0 10px;height:30px;border:0;background:#4b545e;color:#fff;line-height:2em;cursor:pointer} .new_win .win_btn input {padding:0 10px;height:30px;line-height:2em} .new_win .win_btn a {display:inline-block;padding:0 10px;height:30px;background:#4b545e;color:#fff;vertical-align:middle;line-height:2.4em} .new_win .win_btn a:focus, .new_win .win_btn a:hover {text-decoration:none} .new_win .local_sch, .new_win .local_cmd, .new_win .local_desc01, .new_win .local_desc02, .new_win .local_ov {min-width:320px} /* 자바스크립트 alert 대안 */ #validation_check {margin:100px auto;width:500px} #validation_check h1 {margin-bottom:20px;font-size:1.3em} #validation_check p {margin-bottom:20px;padding:30px 20px;border:1px solid #e9e9e9;background:#fff} /* 관리자 비밀번호 확인 */ #admin_confirm {padding:0 0 10px;background:#222;text-align:center} #admin_confirm p {margin:0 0 10px;color:#9ab9c5;background:#383a3f} #admin_confirm label {color:#fff} #admin_confirm .frm_input {border-color:#000} /* 사이드뷰 */ .sv_wrap {display:inline-block;position:relative;font-weight:normal;font-size:1em} .sv_wrap .sv {z-index:1000;display:none;margin:5px 0 0;border:1px solid #383838} .sv_wrap .sv a {display:inline-block;margin:0;padding:3px;width:94px;border-bottom:1px solid #383838;background:#111;color:#fff;text-decoration:none} .sv_wrap .sv a:focus, .sv_wrap .sv a:hover {background:#393939} .sv_on {display:block !important;position:absolute;top:10px;left:20px;width:auto;height:auto} .sv_nojs .sv {display:block} /* 우편번호 검색 */ #post_code p {margin:0 20px 10px} #post_code #code_sch {margin:0 20px} #post_code #code_sch .btn_submit {padding:2px 8px 1px;border:0;color:#fff} #post_code #result {margin:0 20px 20px} #post_code #result_b4 {display:block;padding:30px 0;border-bottom:1px solid #dde4e9;text-align:center} #post_code #result .result_msg {padding:15px 0} #post_code #result .result_fail {border:1px solid #dde4e9;background:#f0f5fc;color:#ff3061;text-align:center} #post_code #result ul {margin:0;padding:0;border-bottom:1px solid #dde4e9;background:#f0f5fc;list-style:none} #post_code #result li {padding:10px;border:1px solid #dde4e9;border-bottom:0} #post_code #result li div {margin:4px 0 0;color:#738D94} #post_code #result li div:before {content:"▶ "} /* 공통박스 */ .compare_wrap {margin:0 20px 10px;zoom:1} .compare_wrap:after {display:block;visibility:hidden;clear:both;height:0px;content:""} .compare_wrap section {margin:10px 0;padding:2%;background:#f2f5f9} .compare_wrap h3 {margin:10px 0 20px;text-align:center} .compare_wrap .tbl_frm {margin:0} .compare_wrap .frm_input, .compare_wrap .required {background-color:#fff !important} .compare_wrap .btn_confirm {padding:10px 0 0} .compare_left {float:left;width:49%} .compare_right {float:right;width:49%} /* 페이지 내 검색 */ .local_sch {min-width:960px} .local_sch .btn_submit {padding:0 5px;height:24px;border:0;color:#fff;font-size:0.95em;vertical-align:middle;cursor:pointer} .local_sch01 {margin:0 0 10px;padding:0 20px 10px;border-bottom:1px solid #e9e9e9} .local_sch01 span {display:block;margin:0 0 5px} .local_sch02 {margin:0 0 10px;padding:0 20px 5px;border-bottom:1px solid #e9e9e9} .local_sch02 div {padding:0 0 5px;margin:0 0 5px;border-bottom:1px solid #f4f4f4} .local_sch02 div.sch_last {margin:0;border:0} .local_sch02 strong {display:inline-block;width:80px} .local_sch02 strong.sch_long {width:160px} .local_sch02 label {display:inline-block;margin:0 5px 0 0} .local_sch02 button {margin:0;padding:5px;border:1px solid #ced9de;background:#f6f9fa;font-size:0.95em;vertical-align:middle;cursor:pointer} /* 페이지 내 실행 */ .local_cmd {min-width:960px} .local_cmd01 {margin:0 0 10px;padding:0 20px} .local_cmd01 .cmd_tit {font-weight:bold} .local_cmd01 .btn_submit {padding:3px 5px;border:1px solid #ff3061;color:#fff;font-size:0.95em;vertical-align:middle} /* 페이지 내 안내문 */ .local_desc {} .local_desc ol, .local_desc ul {margin:0;padding:0 0 10px 21px} .local_desc li {margin:0 0 5px} .local_desc01 {margin:0 20px 10px;padding:10px 20px 0;min-width:920px;border:1px solid #f2f2f2;background:#f9f9f9} .local_desc01 strong {color:#ff3061} .local_desc01 a {text-decoration:underline} .local_desc02 {margin:0 20px 10px;min-width:960px} /* 주로 온라인 서식 관련 안내 내용에 사용 */ .local_desc02 p {padding:0;line-height:1.8em} /* 페이지 내 카운트 */ .local_ov {min-width:960px} .local_ov01 {position:relative;margin:-10px 0 10px;padding:10px 20px;border-bottom:1px solid #e9e9e9;background:#f2f5f9} .local_ov01 .ov_listall {display:inline-block;margin:0 5px 0 0;padding:0 10px 0 0;border-right:1px solid #ccc} .local_ov01 .ov_a {display:inline-block;margin:0 0 0 5px;padding:0 0 0 10px;border-left:1px solid #ccc;color:#ff3061} /* div box 기본 스타일*/ #box {position:relative;zoom:1;border:1px #e7e7e7 solid;padding:10px} #box:after {display:block;visibility:hidden;clear:both;height:0px;content:""} .box_1st {float:left;width:7%;padding-top:5px;text-align:center} .box_2st {float:left;width:93%;vertical-align:middle;font-size:11px;line-height:160%} /*글읽기 cell 영역설정*/ .table_cell_col {width:20%} .table_cell_col2 {width:80%} /*배너*/ .sbn {float:right} .sbn li {float:left} /*페이지내용*/ .page_content {text-align:center;width:100%} .page_content_box {text-align:left;max-width: 768px;width:100%;margin:0 auto;padding:50px 0 70px 0;letter-spacing:-1px;} .page_content_tl {width:100%;text-align:center;font-size:40px;letter-spacing:-3px;} .page_content_ex {width:100%;text-align:center;font-size:22px;padding:10px 0 0px 0;letter-spacing:-2px;} .conbox {width:100%;max-width: 768px;margin:0 auto;letter-spacing:-1px} .conbox span{color:#ff4800;font-weight:bold} .conbox .tl {font-size:20px;padding:0 0 20px 0} .conbox .memo {font-size:16px;padding:0 10px 20px 10px;line-height:160%;} .conbox .detail {float:left;width:56%;font-size:16px;padding:0 2% 20px 2%;line-height:160%;} .conbox .detail2 {float:left;width:40%;text-align:right} .all_menu {display:none;} #all_category{display:none;} /*메인 풀페이지 슬라이드*/ .fp-controlArrow.fp-prev {left: 50px !important; opacity: 0.3; border-color: transparent #fff transparent transparent !important} .fp-controlArrow.fp-next {right: 50px !important; opacity: 0.3; border-color: transparent transparent transparent #fff !important} .fp-controlArrow.fp-prev:hover, .fp-controlArrow.fp-next:hover {opacity: 0.5} .fp-slidesNav {left: 50% !important} #fp-nav ul li .fp-tooltip {font-family: Raleway, 'Noto Sans KR', sans-serif, "맑은 고딕", dotum !important; letter-spacing: 1px;} #main_page {width: 100%; max-width: 1000px; margin: 0 auto} /*댓글/좋아요 아이콘*/ .challenge_icon {position: relative;} .challenge_icon .calendar {position: relative; margin: 0 15px 0 0; padding: 0 0 0 20px} .challenge_icon .calendar:before {position: absolute; top: 5px; left: 0px; content:""; background-image:url("/data/design/icon_calendar_on.png"); background-size:20px auto; width: 20px; height: 20px;} .challenge_icon .like {position: relative; margin: 0 15px 0 0; padding: 0 0 0 32px; cursor: pointer} .challenge_icon .like:before {position: absolute; top: 0px; left: 0px; content:""; background-image:url("/data/design/icon_like.png"); background-size:27px auto; background-repeat: no-repeat; width: 27px; height: 27px;} .challenge_icon .like.on:before { background-image:url("/data/design/icon_like_on.png"); background-size:27px auto;} .challenge_icon .certify:before {position: absolute; top: 9px; right: 0px; content:""; background-image:url("/data/design/icon_certify.png"); background-size:27px auto; background-repeat: no-repeat; width: 27px; height: 27px;} .challenge_icon .certify_on:before {position: absolute; top: 9px; right: 0px; content:""; background-image:url("/data/design/icon_certify_on.png"); background-size:27px auto; background-repeat: no-repeat; width: 27px; height: 27px;} .challenge_icon .comment {position: relative; margin: 0 15px 0 0; padding: 0 0 0 32px} .challenge_icon .comment:before {position: absolute; top: 2px; left: 0px; content:""; background-image:url("/data/design/icon_comment.png"); background-size:25px auto; background-repeat: no-repeat; width: 25px; height: 25px;} .challenge_icon .comment.on:before { background-image:url("/data/design/icon_comment_on.png"); background-size:18px auto;} .sub_tl {padding: 30px 0 15px} #group_banner {margin: 40px auto 30px; width: 100%; max-width: 1000px} #group_banner img {width: 100%;} #group_banner .pc {display: block} #group_banner .mobile {display: none} #foot_banner {width: 100%; margin: 40px auto 0; max-width: 1000px; padding: 0 0px} #foot_banner img {width: 100%;} .explain_box {position: relative; width: 100%; margin: 30px auto 20px; max-width: 1000px; background: #f7f7f7; padding: 20px 40px;} .explain_box .ex {margin: 15px 0 0;} .explain_box .sample {margin: 25px 0 0; text-align: center} .explain_box .sample .slick-slide {margin: 0 15px 10px 0} .explain_box .sample .slick-list {padding: 0 !important} .explain_box .sample span.samplego {display: inline-block; border-radius: 5px; font-size: 1rem; background: #e3f5fd; padding: 10px 15px; color: #555; cursor: pointer; font-weight: 300} .explain_box .sample .slick-track > div:nth-child(6n) span.samplego {background: #fdfbe3;} .explain_box .sample .slick-track > div:nth-child(6n-1) span.samplego {background: #fde3fc;} .explain_box .sample .slick-track > div:nth-child(6n-2) span.samplego {background: #e3fde5;} .explain_box .sample .slick-track > div:nth-child(6n-3) span.samplego {background: #fdebe3;} .explain_box .sample .slick-track > div:nth-child(6n-4) span.samplego {background: #ebebeb;} .explain_box .sample .slick-track > div:nth-child(6n-5) span.samplego {background: #e3f5fd;} .explain_box .ex2 { margin: 15px 60px 0 0} .explain_box .more {position: absolute; top: 50%; right: 30px; margin: -15px 0 0} .newchallenge_box {position: relative; width: 100%; margin: 40px auto 30px; max-width: 1000px; background: #00a0e9; padding: 20px 70px; text-align: center} .newchallenge_box .ex {color: #fff !important; margin: 0 0 0 0px} .newchallenge_box .more {position: absolute; top: 50%; left: 50%; margin: -51px 0 0 80px} .newchallenge_box .more img {width: 100px} .qna_box {position: relative; width: 100%; margin: 40px auto 30px; max-width: 1000px; background: #ffde00; padding: 20px 70px; text-align: center} .qna_box .ex {color: #fff !important; margin: 0 0 0 0px} .qna_box .more {position: absolute; top: 50%; left: 50%; margin: -51px 0 0 80px} .qna_box .more img {width: 100px} /*챌린지 관려*/ #challenge_box {width: 100%; max-width: 1000px; margin: 0px auto 20px; overflow: hidden} #challenge_box .txt_tl {position: relative; margin: 0px 0 0} #challenge_box .txt_tl a {margin: 0} #challenge_box .txt_tl a:after {display: none} #challenge_box .txt_img {margin: 15px 0 0} #challenge_box .txt_img:after {clear: both; display: block; content:""} #challenge_box .txt_img li {float: left;} #challenge_box .txt_img li.img {position: relative; width: 250px} #challenge_box .txt_img li.img img {width: 100%; height: auto !important} #challenge_box .txt_img li.img .time {display: none; position: absolute; top: 15px; left: 15px; background: #00000050; padding: 3px 10px; border-radius: 5px; color: #fff; font-size: 1rem} #challenge_box .txt_img li.img .mytime {display: inline-block} #challenge_box .txt_img li.txt {width: calc(100% - 270px); margin: 0px 0 0 20px} #challenge_box .txt_img li.txt > div {} #challenge_box .txt_img li.txt > div:after {clear: both; display: block; content:""} #challenge_box .txt_img li.txt .box {background: #f7f7f7; padding: 10px 30px} #challenge_box .txt_img li.txt .box:after {clear: both; display: block; content:""} #challenge_box .txt_img li.txt .box span {float: left; display: inline-block; width: 33.3%; height: 80px; text-align: center; padding: 55px 0 0} #challenge_box .txt_img li.txt .box span.like.on{background: url("/data/design/icon_like_on.png") no-repeat top+10px center; background-size: 36px auto;} #challenge_box .txt_img li.txt .box span.like{cursor:pointer; background: url("/data/design/icon_like.png") no-repeat top+10px center; background-size: 36px auto;} #challenge_box .txt_img li.txt .box span.comment {position: relative; background: url("/data/design/icon_comment.png") no-repeat top+10px center; background-size: 34px auto; } #challenge_box .txt_img li.txt .box span.certify {position: relative; background: url("/data/design/icon_certify.png") no-repeat top+10px center; background-size: 34px auto; } #challenge_box .txt_img li.txt .box span.certify_on {position: relative; background: url("/data/design/icon_certify_on.png") no-repeat top+10px center; background-size: 34px auto; } #challenge_box .txt_img li.txt .box span.certify_no {position: relative; background: url("/data/design/icon_certify.png") no-repeat top+10px center; background-size: 34px auto; } #challenge_box .txt_img li.txt div.stl {margin: 20px 0 10px} #challenge_box .txt_img li.txt div.star_box {margin: 10px 0 0} #challenge_box .txt_img li.txt div.rate {margin: 10px 0 0} #challenge_box .txt_img li.txt div.rate .progress {position: relative; background:#f7f7f7; display: block; border:0px solid #ccc; height: 16px; border-radius: 5px; overflow: hidden} #challenge_box .txt_img li.txt div.rate .progress .progress-bar{background: #e95000; height: 16px; line-height: 16px; text-align: center; font-size: 0.9rem; font-weight: 300; z-index: 9} #challenge_box .txt_img li.txt div.rate .progress .progress-bar-bg {position: absolute; top:0px; left: 0px; background:url('/data/design/rate_bg.png') no-repeat center left; background-size: 100% auto; z-index: 10; width: 100%; height: 16px} #challenge_box .con_box {background: #f7f7f7; padding: 20px 30px; margin: 20px 0;} #challenge_photo {width: 100%; max-width: 1000px; margin: 10px auto 30px; border: 1px solid #eee; padding: 30px 30px} #challenge_photo .stl {text-align: left} #challenge_photo .stl span {float: right;} #challenge_photo .con {margin: 15px 0 0 0} #challenge_photo .con img {width: 100%;} #challenge_photo .con_box {background: #f7f7f7; padding: 20px 30px; margin: 20px 0;} .like_box {position: relative; margin: 15px 0 0; text-align: left} .like_box .like.on{background: url("/data/design/icon_like_on.png") no-repeat center left; background-size: 30px auto; } .like_box .like{position: relative;display: inline-block; cursor:pointer; background: url("/data/design/icon_like.png") no-repeat top left; background-size: 30px auto; width: 32px; height: 32px; margin: 0 55px 0 0} .like_box .like span {position: absolute; left: 35px; top: 4px; width: 50px} .like_box .comment {position: relative;display: inline-block;background: url("/data/design/icon_comment.png") no-repeat top+3px left; background-size: 28px auto; width: 32px; height: 32px} .like_box .comment span {position: absolute; left: 32px; top: 3px; width: 50px} #my_challenge {padding: 0px 0 0} #my_challenge #challenge_box {margin: 15px auto 40px;} #my_challenge #challenge_box .txt_tl {margin: 0} #mypage_box {padding: 0px 0 0} #mypage_box .stats {} #mypage_box .stats span {background: #777; color: #fff !important; padding: 3px 10px; border-radius: 5px; margin: 0 30px 0 5px} #mypage_box .pic {position: relative; text-align: center} #mypage_box .pic img{width: 100%; max-width: 200px; max-height: 200px; margin: 0 auto; border-radius: 100px} #mypage_box .name {position: relative; text-align: center; padding: 30px 0 10px;} #mypage_box .set {text-align: center; margin: 10px 0 0 0px} #mypage_box .logout { border-radius: 3px; padding: 5px 15px 5px 30px; background: url("/data/design/icon_logout.png") no-repeat center left+7px #fff; background-size: 20px auto; color: #555; border: 1px solid #aaa} #mypage_box .modify { border-radius: 3px; padding: 5px 15px 5px 30px; background: url("/data/design/icon_setting.png") no-repeat center left+7px #fff; background-size: 20px auto; color: #555; border: 1px solid #aaa} #mypage_box .qna { border-radius: 3px; padding: 5px 15px 5px 30px; background: url("/data/design/icon_qna2_on.png") no-repeat center left+7px #ffde00; background-size: 20px auto; color: #00a0e9; border: 1px solid #ffde00} #mypage_box .new {position: relative; clear: both; display: block; border-radius: 3px; padding: 10px 0px 10px 30px; margin: 0 15px 10px; background: #00a0e9; text-align: center; color: #fff; border: 1px solid #00a0e9; letter-spacing: 0px} #mypage_box .new:before {position: absolute; left: 50%; top: 10px; background: url("/data/design/icon_make_w.png") no-repeat; content:""; width: 30px; height: 30px; background-size: 26px auto; margin: 0 0 0 -80px} #mypage_box .new a {color: #fff; display: block} .challenge_btn {margin: 0px 0 0px} .challenge_btn a, .challenge_btn button, .challenge_btn span {display: inline-block; float: left; text-align: center; padding: 10px 0; cursor: pointer} .challenge_btn a.certify, .challenge_btn button.certify{width: calc(50% - 10px); background: #00a0e9; border: 1px solid #00a0e9; color: #fff; margin: 0 10px 0 0;} .challenge_btn a.new {width: 50%; background: #fff; border: 1px solid #ddd; margin: 0 10px} .challenge_btn a.stop, .challenge_btn span.stop {width: 50%; background: #fff; border: 1px solid #ddd;} .challenge_btn a.upload {width: calc(50% - 20px); background: #f7f7f7; border: 1px solid #f7f7f7;} .challenge_btn2 {margin: 0px 0 0px} .challenge_btn2 a, .challenge_btn button, .challenge_btn2 span {display: inline-block; float: left; text-align: center; padding: 10px 0; cursor: pointer} .challenge_btn2 a.certify, .challenge_btn2 button.certify{width: calc(100%); background: #00a0e9; border: 1px solid #00a0e9; color: #fff; margin: 0px 0 15px} .challenge_btn2 a.new {width: calc(50% - 5px); background: #fff; border: 1px solid #ddd; margin: 0 10px 15px 0} .challenge_btn2 a.stop, .challenge_btn2 span.stop {width: calc(50% - 5px); background: #fff; border: 1px solid #ddd;} .challenge_btn2 a.done, .challenge_btn2 span.done {width: calc(100%); background: #fff; border: 1px solid #ddd;; margin: 0 0px 15px 0} .my_challenge_cnt {} .my_challenge_cnt:after {display: block; clear: both; content:""} .my_challenge_cnt li {float: left; width: 25%; text-align: center} .my_challenge_cnt li span {display: block; color: #00a0e9; padding: 0 0 10px 0; font-weight: 500} .my_challenge_cnt li span br{display: none} .mypage_info {} .mypage_info li {margin: 0 0 30px} .mypage_info li:last-child {margin: 0} .mypage_info li span {position: relative; display: inline-block; width: 120px; padding: 0 0 0 36px; font-weight: 500} .mypage_info li span:before {position: absolute; left: 0px; top: -3px; display: inline-block; content:""; background-repeat: no-repeat; background-position: left center; background-size: 26px 26px; width: 26px; height: 26px} .mypage_info li:nth-child(1) span:before {background-image:url("/data/design/icon_email.png")} .mypage_info li:nth-child(2) span:before {background-image:url("/data/design/icon_name.png")} .mypage_info li:nth-child(3) span:before {background-image:url("/data/design/icon_gender.png")} .mypage_info li:nth-child(4) span:before {background-image:url("/data/design/icon_age.png")} .mypage_info li:nth-child(5) span:before {background-image:url("/data/design/icon_phone.png")} .certify_box {} .certify_box .upload {display: none; width: 100%; max-width: 1000px; margin: 0 auto} .certify_box .upload img {width: 100%} .certify_box .upload_movie {display: none; width: 100%; max-width: 1000px; margin: 0 auto} .certify_box .upload_movie img {width: 100%} .certify_box .upload_sort {} .certify_box .upload_sort:after {display: block; content:""; clear: both} .certify_box .upload_sort span {width: calc(50% - 5px); display: inline-block; background: #f7f7f7; color: #aaa; text-align: center; padding: 15px 0; cursor: pointer} .certify_box .upload_sort span:nth-child(1) {margin: 0 10px 0 0} .certify_box .upload_sort span.on {background: #ffde00; color: #000;} .certify_box .youtube_link {display: none} .empty_li {text-align: center; height: 200px; line-height: 200px; border: 1px solid #eee;} /*이용안내*/ .guide {background: #feedb7} .guide p > img {width: 100%} .guide .example {background: #fff; margin: 0 7% 30px; border-radius: 20px; padding: 30px 20px} .guide .example a {float: left; width: calc(50% - 10px); margin: 0 20px 0 0; padding: 0 20px; display: inline-block;} .guide .example a img {width: 100%;} .guide .example a span {display: block; } .guide .example a span.subject {padding: 10px 0; font-weight: 500; font-size: 1.2rem} /*단체전*/ .group_join {} .group_join > ul {} .group_join > ul > li{margin: 10px 0} .group_join .etc {font-size: 1.6rem; text-align: center; color: #e95000; padding: 20px 0 } .group_join .btn_write {position: relative; clear: both; display: block; border-radius: 3px; padding: 10px 0px 10px 0px; background: #00a0e9; text-align: center; color: #fff; border: 1px solid #00a0e9; letter-spacing: 0px} .group_join .img img {width: 100%;} .group_join .movie {margin: 30px 0; background: #e8e6f3; padding: 20px 30px 30px} .group_join .movie .tl {padding: 10px 0 20px 0} .group_join .navi {margin: 0 0px 20px 0} .group_join .navi:after {display: block; clear: both; content:"";} .group_join .navi a {float: left; display: inline-block; margin: 0 10px 0 0; width: calc(25% - 7.5px); padding: 15px 0; text-align: center; background: #0041bf; color: #fff; font-size: 1.0rem; border-radius: 5px;} .group_join .navi a:last-child {margin: 0} .freeblox_select {border-bottom:1px solid #ddd; padding: 20px 0px 40px; margin: 0 0 40px} .freeblox_select .download {} .freeblox_select .download a{position: relative; display: inline-block; text-align: center; width: calc(50% - 10px); margin: 0 10px 0px 0; background: #2b7dd5; color: #fff; padding: 15px 0 15px 0px; font-size: 1.2rem; font-weight: 500} .freeblox_select .download a.google {padding: 15px 0 15px 30px; background: #1fa7c1;} .freeblox_select .download a:before {position: absolute; right:65%; top: 12px; content:""; content:""; width: 50px; height: 30px} .freeblox_select .download a.google:before {background: url("/data/design/icon_googleplay_w.png") no-repeat; background-size: 30px auto;} .freeblox_select .download a.app:before {background: url("/data/design/icon_appstore_w.png") no-repeat; background-size: 30px auto;} .freeblox_select .view a {display: inline-block; text-align: center; width: calc(50% - 10px); margin: 0 10px 10px 0;background: #eee; padding: 15px 0; font-size: 1.0rem; color: #555; font-weight: 400; letter-spacing: -1px} .freeblox_select .view a:nth-child(2n) {margin: 0 0 10px} .main_mychallenge .txt_img li.img {width: 200px !important} .main_mychallenge .txt_img li.txt {width: calc(100% - 220px) !important;} /*태블릿PC용*/ @media only screen and (max-width: 768px){ #head_wrapper {margin: 0 0 30px} #sub_head_wrapper {margin: 0 0 30px} #sub_head_wrapper .head_top_menu .logo {padding: 0 0 0 36px} #sub_head_wrapper .head_top_menu .logo > a {left: 0px; top: 22px; width: 34px; height: 34px; background-size: 28px 28px;} #content_wrapper {margin: 0 0 30px} #foot_banner {margin: 50px auto 0;} .head_top_menu .logo img {width: 100%; max-width:80px} /* nav_depth */ #head_wrapper nav .menu_box li a{display: block; padding: 15px 0px; } .sub_title {margin: 40px 10px 20px; text-align: center} .sub_title span {position: relative; font-size: 20px; letter-spacing: -2px; color: #333; font-weight: 400} .sub_title span:before {display: block; content:""; background-image: url("/data/design/title_dot_left.png"); background-size:20px 20px; width:20px; height:20px; margin: 0 auto 15px; background-position: center top;} .sub_title span:after {display: block; content:""; background-image: url("/data/design/title_dot_right.png"); background-size:20px 20px; width:20px; height:20px; margin: 15px auto 0; background-position: center bottom} .sub_title strong {display: inline-block; width: 80px; height: 1px; border-bottom: 1px solid #777;} .sub_title p {font-size: 18px; color: #777; margin: 15px 0 0; font-weight: 100; letter-spacing: -1px} /*슬라이드 이미지*/ .content_slide {clear: both; margin: 0px auto 0; padding: 0px 10px} .content_slide img{} .content_slide_sub {position:relative; z-index:10;width:100%;} .content_slide_sub img{width:100%;height:auto;margin:0 auto} .content_slide_sub .txt {position: absolute; width: 100%; max-width: 1000px; left:0%; top: 50%; margin: -15px 0 0 0px; color: #fff; text-align: center; font-size: 24px; font-weight: 600; color: #fff; z-index: 11} .content_slide_sub .bg {position:relative; height: 130px; z-index: 10 } .all_menu {display:block; position: absolute; right: 3px; top: 5px; z-index: 99;} .subcon {clear:both;position:relative;width:100%;margin:50px 0 0px 0} .subcon:after {display:block;visibility:hidden;clear:both;height:0px;content:"OUR SERVICE";height:0px} #main_page {width: 100%; padding: 0 0px} #main_page h1 {font-size: 32px; font-weight: 300; text-align: center; letter-spacing: -3px;} #main_page h1 strong {color: #796c62} #main_page h5 {font-size: 16px; font-weight: 300; letter-spacing: 0px; text-align: center; margin: 10px 0 0; opacity: 1; padding: 0 10px} #main_page .m_contents {margin: 50px 0 0;} #main_page .m_more { margin: 70px 0 70px; text-align: center; } #main_page .m_more a{ font-size: 16px; border: 1px solid #333; padding: 15px 100px 15px 60px; background: url('/data/design/more_arrow.png') no-repeat right+45px center;} #main_page .m_more a:hover {color: #fff; background: url('/data/design/more_arrow_w.png') no-repeat right+45px center #000;} #main_page .box {width: 100%; max-width: 1000px;} .submenu {text-align: center; margin: 0px 0;box-shadow: 0 2px 2px 0 rgb(0 0 0 / 10%);} .submenu li {display: inline-block; padding: 15px 0px; width: calc(33.3% - 2px); font-size: 16px; margin: 0 0 0 -1px; opacity: 1; font-weight:400; color: #777} .submenu li a {color: #777} .submenu li.on {color: #796c62; font-weight: 600; border-bottom: 2px solid #796c62} .submenu li.on a {color: #796c62} /*서브내용*/ .subcon .upper-bar:before { content: ''; position: absolute; top: 0; left: 10px; width: 35px; height: 1px; background-color: #796c62;} .subcon {clear:both;position:relative;width:100%;margin:40px 0 0px 0; font-size: 18px; line-height: 32px} .subcon:after {display:block;visibility:hidden;clear:both;height:0px;content:"";height:0px} .explain_box {padding: 20px 30px;} .explain_box .more {right: 20px;} #challenge_box .txt_img li.img {width: 250px} #challenge_box .txt_img li.txt {width: calc(100% - 260px); margin: 0px 0 0 10px} #challenge_box .txt_img li.txt div.stl {margin: 20px 0 0} #challenge_box .con_box {padding: 20px 20px;} #challenge_photo {padding: 20px 20px} #mypage_box .pic img{max-width: 150px; max-height: 150px;border-radius: 75px} #mypage_box .new {padding: 10px 0px 10px 30px; margin: 0 15px 10px; } #mypage_box .new:before {top: 7px; background: url("/data/design/icon_make_w.png") no-repeat; width: 30px; height: 30px; background-size: 26px auto; margin: 0 0 0 -70px} .newchallenge_box {margin: 30px auto 20px; padding: 20px 40px;} .newchallenge_box .more {top: 50%; right: 40px; margin: -47px 0 0} .newchallenge_box .more img {width: 90px} .qna_box {padding: 20px 40px;} .qna_box .more {top: 50%; right: 40px; margin: -47px 0 0} .qna_box .more img {width: 90px} /*댓글/좋아요 아이콘*/ .challenge_icon .calendar {position: relative; margin: 0 15px 0 0; padding: 0 0 0 20px} .challenge_icon .calendar:before {position: absolute; top: 5px; left: 0px; content:""; background-image:url("/data/design/icon_calendar_on.png"); background-size:20px auto; width: 20px; height: 20px;} .challenge_icon .like {position: relative; margin: 0 10px 0 0; padding: 0 0 0 24px; cursor: pointer} .challenge_icon .like:before {position: absolute; top: 0px; left: 0px; content:""; background-image:url("/data/design/icon_like.png"); background-size:23px auto; background-repeat: no-repeat; width: 23px; height: 23px;} .challenge_icon .like.on:before { background-image:url("/data/design/icon_like_on.png"); background-size:23px auto;} .challenge_icon .certify:before {position: absolute; top: 9px; right: 0px; content:""; background-image:url("/data/design/icon_certify.png"); background-size:23px auto; background-repeat: no-repeat; width: 23px; height: 23px;} .challenge_icon .certify_on:before {position: absolute; top: 9px; right: 0px; content:""; background-image:url("/data/design/icon_certify_on.png"); background-size:23px auto; background-repeat: no-repeat; width: 23px; height: 23px;} .challenge_icon .comment {position: relative; margin: 0 0px 0 0; padding: 0 0 0 22px} .challenge_icon .comment:before {position: absolute; top: 2px; left: 0px; content:""; background-image:url("/data/design/icon_comment.png"); background-size:21px auto; background-repeat: no-repeat; width: 21px; height: 21px;} .challenge_icon .comment.on:before { background-image:url("/data/design/icon_comment_on.png"); background-size:21px auto;} #group_banner {margin: 20px auto} #group_banner .pc {display: none} #group_banner .mobile {display: block} .freeblox_select .download a {padding: 15px 0 15px 50px} .freeblox_select .download a.google {padding: 15px 0 15px 70px} .freeblox_select .download a:before { right:60%; top: 8px;} .main_mychallenge .txt_img li.img {width: 120px !important} .main_mychallenge .txt_img li.txt {width: calc(100% - 140px) !important;} /*이용안내*/ .guide .example {margin: 0 7% 10px; padding: 20px 10px 10px} .guide .example a {width: calc(50% - 5px); margin: 0 10px 0 0; padding: 0 10px;} .guide .example a span.subject {font-size: 1.0rem} } @media only screen and (max-width:580px){ #foot_banner {margin: 30px auto 0;} #head_wrapper {margin: 0 0 20px} #sub_head_wrapper {margin: 0 0 30px} #sub_head_wrapper .head_top_menu .logo {padding: 0 0 0 36px} #sub_head_wrapper .head_top_menu .logo > a {left: 0px; top: 19px; width: 34px; height: 34px; background-size: 26px 26px;} .txt_item .slick-slide {margin: 0px 3px 0 0} .explain_box {padding: 20px 20px;} .explain_box .more {right: 15px;} .my_challenge_cnt li span br{display: inline} #challenge_box .txt_img li.img {width: 40%} #challenge_box .txt_img li.txt {width: calc(60% - 10px); margin: 0px 0 0 10px} #challenge_box .txt_img li.txt .box { padding: 10px 10px} .newchallenge_box {margin: 30px auto 20px; padding: 20px 20px; text-align: center} .newchallenge_box .ex {margin: 0 0 0 0px} .newchallenge_box .more {top: 50%; left: 50%; margin: -44px 0 0 40px} .newchallenge_box .more img {width: 85px} .qna_box {padding: 20px 20px; text-align: center} .qna_box .ex {margin: 0 0 0 0px} .qna_box .more {top: 50%; left: 50%; margin: -44px 0 0 40px} .qna_box .more img {width: 85px} .wd_box_bg {padding: 20px 20px} .freeblox_select .download a {padding: 15px 0 15px 30px; width: calc(100% - 0px);margin: 0 0px 10px 0;} .freeblox_select .download a.google {padding: 15px 0 15px 50px} .freeblox_select .download a:before { right:65%; top: 8px;} .group_join .movie {margin: 30px 0; background: #e8e6f3; padding: 10px 10px 10px} .group_join .navi a {margin: 0 10px 10px 0; width: calc(50% - 10px);} .group_join .navi a:nth-child(2n) {margin: 0 0 10px} }