/* Pretendard (same as dodo1) */ @font-face { font-family: 'Pretendard'; font-weight: 100; font-style: normal; font-display: block; src: url('./fonts/Pretendard-Thin.subset.woff2') format('woff2'); } @font-face { font-family: 'Pretendard'; font-weight: 200; font-style: normal; font-display: block; src: url('./fonts/Pretendard-ExtraLight.subset.woff2') format('woff2'); } @font-face { font-family: 'Pretendard'; font-weight: 300; font-style: normal; font-display: block; src: url('./fonts/Pretendard-Light.subset.woff2') format('woff2'); } @font-face { font-family: 'Pretendard'; font-weight: 400; font-style: normal; font-display: block; src: url('./fonts/Pretendard-Regular.subset.woff2') format('woff2'); } @font-face { font-family: 'Pretendard'; font-weight: 500; font-style: normal; font-display: block; src: url('./fonts/Pretendard-Medium.subset.woff2') format('woff2'); } @font-face { font-family: 'Pretendard'; font-weight: 600; font-style: normal; font-display: block; src: url('./fonts/Pretendard-SemiBold.subset.woff2') format('woff2'); } @font-face { font-family: 'Pretendard'; font-weight: 700; font-style: normal; font-display: block; src: url('./fonts/Pretendard-Bold.subset.woff2') format('woff2'); } @font-face { font-family: 'Pretendard'; font-weight: 800; font-style: normal; font-display: block; src: url('./fonts/Pretendard-ExtraBold.subset.woff2') format('woff2'); } @font-face { font-family: 'Pretendard'; font-weight: 900; font-style: normal; font-display: block; src: url('./fonts/Pretendard-Black.subset.woff2') format('woff2'); } /* Thin (100) */ @font-face { font-family: 'Noto Sans KR'; src: url('./fonts/NotoSans-Thin.woff2') format('woff2'); font-weight: 100; font-style: normal; font-display: auto; } /* Light (300) */ @font-face { font-family: 'Noto Sans KR'; src: url('./fonts/NotoSans-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: auto; } /* DemiLight (350) */ @font-face { font-family: 'Noto Sans KR'; src: url('./fonts/NotoSans-DemiLight.woff2') format('woff2'); font-weight: 350; font-style: normal; font-display: auto; } /* Regular (400) */ @font-face { font-family: 'Noto Sans KR'; src: url('./fonts/NotoSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: auto; } /* Medium (500) */ @font-face { font-family: 'Noto Sans KR'; src: url('./fonts/NotoSans-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: auto; } /* Bold (700) */ @font-face { font-family: 'Noto Sans KR'; src: url('./fonts/NotoSans-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: auto; } /* Black (900) */ @font-face { font-family: 'Noto Sans KR'; src: url('./fonts/NotoSans-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: auto; } /* Thin (100) */ @font-face { font-family: 'Montserrat'; src: url('./fonts/montserrat-v31-latin-100.woff2') format('woff2'); font-weight: 100; font-style: normal; font-display: auto; } /* Light (300) */ @font-face { font-family: 'Montserrat'; src: url('./fonts/montserrat-v31-latin-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: auto; } /* Regular (400) @font-face { font-family: 'Montserrat'; src: url('./fonts/montserrat-v31-latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: auto; } */ /* Medium (500) */ @font-face { font-family: 'Montserrat'; src: url('./fonts/montserrat-v31-latin-500.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: auto; } /* SemiBold (600) @font-face { font-family: 'Montserrat'; src: url('./fonts/montserrat-v31-latin-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: auto; } */ /* Bold (700) */ @font-face { font-family: 'Montserrat'; src: url('./fonts/montserrat-v31-latin-700.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: auto; } /* ExtraBold (800) */ @font-face { font-family: 'Montserrat'; src: url('./fonts/montserrat-v31-latin-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: auto; } /* Black (900) */ @font-face { font-family: 'Montserrat'; src: url('./fonts/montserrat-v31-latin-900.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: auto; } :root { --family: 'Montserrat', "Pretendard", sans-serif; --color: #3d3d3d; --color: #6896ff; --color: #8f68ff; --color2: #ffd587; --colorBg: #f2f3f3; --border-radius-8: 8px; --border-radius-12: 12px; --border-radius-20: 20px; --border-radius-40: 40px; } /* ========== 스크롤바 CSS ========== */ ::-webkit-scrollbar { width: 12px; height: 12px; background: transparent; } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.12); border-radius: 12px; } ::-webkit-scrollbar-thumb { width: 12px; background: linear-gradient( 180deg, var(--color, #8f68ff) 0%, #88a7ff 99% ); border-radius: 12px; box-shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.5); } ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment { height: 12px; background: transparent; } /* Firefox 전용 */ @supports (-moz-appearance: none) { * { scrollbar-width: auto; scrollbar-color: var(--color, #88a7ff) rgba(0, 0, 0, 0.12); } } /* ========== reset ========== */ ::selection { background: #dedede; } ::-ms-selection { background: #dedede; } ::-webkit-selection { background: #dedede; } ::-moz-selection { background: #dedede; } *, *::before, *::after { box-sizing: border-box; } * { margin:0; padding:0; } body, div, span, i, em, header, footer, nav, article, section, a, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, caption, form, fieldset, legend, input, textarea, select, button { font-weight: 400; color: #000; letter-spacing: -0.5px; font-size: 19px; font-family: "Pretendard", -apple-system, "Malgun Gothic", sans-serif; line-height: 1.5; } body { line-height: 1.5; } ul,ol,li {list-style-type:none; } em , address , i { font-style: normal; } img { max-width: 100%; border: none; image-rendering: -webkit-optimize-contrast !important; object-fit: cover; } img[loading="lazy"] { background-color: #f4f4f4; } .program img[loading="lazy"] { background-color: #f9f9f9; } input, textarea, select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } input[name="secret"], input[name="notice"] { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; } a { text-decoration: none; letter-spacing: -0.5px; } a:hover { color: #000; font-weight: 400; letter-spacing:-0.5px; } .clear:after { display: block; content: ''; clear: both; } .clear > li { float: left; } .clear > .left { float: left; } .clear > .right { float: right; } .table { display: table; } .table.full { table-layout: fixed; width: 100%; } .table > .cell { display: table-cell; vertical-align: middle; } .table > .cell.left { text-align: left; } .table > .cell.right { text-align: right; } .table > .cell.center { text-align: center; } #wrap { padding: 0 40px; } .width { width: 100%; max-width: 1200px; margin: 0 auto; } .admin { color: red !important; display: inline-block !important; word-break: break-all; } .admin a { padding: 7px 15px; background: #fff7f7; border-radius: 10px; display: inline-block; font-size: 15px !important; margin: 5px 3px; font-weight: 500; } .admin a:hover { color: red !important; } .admin * { color: #ff4e4e !important; } #naver_dic-window { display: none; } a.kakaoChat { position: absolute; left: auto; right: 25px; top: 34px; display: block; width: 48px; height: 48px; line-height: 48px; overflow: hidden; font-size: 0; letter-spacing: -1px; padding: 0; box-sizing: border-box; border: none; border-radius: 12px; background: var(--color2); text-align: center; z-index: 2; display: none; } a.kakaoChat div { position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; display: inline-block; background: url('./img/icon_kakaochat_black.png') no-repeat center / 22px; width: 26px; height: 26px; vertical-align: middle; } /* ========== 툴팁 플러그인 ========== */ .tooltipster-base { margin-top: -14px !important; } .tooltipster-sidetip .tooltipster-content { color:#fff !important; font-size:15px !important; padding: 9px 14px !important; letter-spacing: 0 !important ; } body .tooltipster-sidetip .tooltipster-box { border:none !important; background:var(--color); !important; } .tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border { border:none !important; } body .tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background { top:3px; border-bottom-color:var(--color); !important; } .tooltip.info { padding-left:17px; } /* ========== 상단 공통 ========== */ #head .headIn { position: relative; z-index: 10; font-size: 0; text-align: center; } #head .headIn .width { font-size: 0; } #head .headIn .logo { position: absolute; top: 25px; left: 30px; } #head .headIn .logo img { height: 44px; } #head .navi { display: flex; align-items: center; justify-content: center; gap: 0 35px; flex-wrap: wrap; } #head .navi li a { display: block; padding: 20px 10px; } #head .navi li a span { display: flex; align-items: center; position: relative; color: #555; font-size: 20px; font-weight: 600; line-height: 28px; } #head .navi li a span b { color: var(--color); padding: 1px 8px; display: inline-block; background: #f5f2ff; margin: 0 0 0 6px; border-radius: 12px; font-weight: 600; font-size: 14px; } #head .navi li a.on span, #head .navi li a:hover span { color: #000; font-weight: 700; } #head .navi li a em { position: absolute; left: 50%; margin-left: -55px; bottom: -45px; display: block; width: 110px; padding: 6px 0; background: var(--color); font-size: 15px; text-align: center; border-radius: 40px; display: none; font-weight: 600; color: #fff; letter-spacing: -0.5px; } #head .navi li a em:before { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 8px solid var(--color); position: absolute; content: ''; top: -5px; right: 0; margin-right: 24px; } #head .navi .new { position: absolute; right: -12px; top: -4px; font-size: 0; width: 7px; height: 7px; line-height: 7px; border-radius: 7px; background: var(--color); display: inline-block; } #head .navi.footer { position: fixed; left: 50%; top: auto; bottom: -100px; z-index: 10; margin-left: -345px; background: #f6f6f6; border-radius: 40px; padding: 0 20px; transition: all 400ms; opacity: 0; display: none; } #head .navi.footer { padding: 0 15px; } #head .navi.footer.on.up { bottom: 30px; opacity: 1; } /* ========== 최상단 검색 영역 ========== */ #top { padding: 30px 0; } #top .topH { height: 0; } /* #top .width { display: flex; align-items: center; justify-content: center; position: relative; } */ #top form { } #top h1.logo { position: fixed; left: 30px; display: flex; align-items: center; z-index: 2; } #top h1.logo a { width: 146px; height: 50px; display: block; vertical-align: middle; font-size: 0; background: url('./img/playdev_logo_vertical.svg') no-repeat center / 100%; } #top h1.logo img { height: 58px; } #top a.kakao { position: absolute; right: 0; display: flex; align-items: center; z-index: 2; background: #ffd972 url(./img/icon_kakaochat_black.png) no-repeat 21px 16px / 22px; font-weight: 500; color: #000; height: 52px; line-height: 52px; padding: 0 25px 0 52px; font-size: 17px; border-radius: 10px; letter-spacing: 0; display: none; } /* 검색영역 */ #top .search { height: 70px; } #top .fixed { position: fixed; left: 40px; right: 40px; top: 30px; margin: auto; max-width: 630px; z-index: 11; } #top .fixedIn { position: relative; border: 2px solid #444; border-radius: 20px; box-shadow: 10px 10px 0 0 rgba(0,0,0,0.01); overflow: hidden; z-index: 20; } #top .fixedIn .searchIn { position: relative; } #top .search .contents { width: 100%; height: 66px; vertical-align: middle; padding: 0 65px 0 30px; background: #fff; border: none; font-weight: 400; font-size: 19px; text-align: left; color: #000; max-width: 630px; } #top .search .contents:focus { outline: none; border-color: #000; } #top .search .contents::placeholder { color: #ccc; font-weight: 400; } #top .search .contents:focus::placeholder { color: transparent; } #top .search span { position: absolute; right: 0; top: 0; width: 60px; height: 100%; text-align: center; } #top .search span a { display: block; height: 100%; background: url('./img/btnSearch_b.png') no-repeat center; background-size: 24px; } #top .search span a input { background: none; width: 100%; height: 100%; cursor: pointer; font-size: 0; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* ========== 자동완성 ========== */ #top .autocomplate { background: #fff; display: none; overflow: hidden; transition: all 400ms; } #top .autocomplate.on { display: block; } #top .autocomplate ul { position: relative; max-height: 500px; overflow-y: auto; } #top .autocomplate ul li { min-height: 50px; } #top .autocomplate ul li a:hover { background: #f4f4f4; } #top .autocomplate ul li a:visited p { color: #99209b; } #top .autocomplate ul li.on a { background: #f4f4f4; } #top .autocomplate ul li a { display: block; text-align: left; padding: 9px 10px 10px 28px; border-bottom: 1px solid #f4f4f4; cursor: pointer; } #top .autocomplate ul li:last-child a { border-bottom: 1px solid transparent; } #top .autocomplate ul li img { width: 100px; height: 70px; border-radius: 6px; display: inline-block; vertical-align: middle; margin: 0 20px; border: 1px solid #ddd; display: none; } #top .autocomplate ul li p { display: block; height: 30px; line-height: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 400; font-size: 18px; color: #222; } /* #top .autocomplate ul li.on a p { font-weight: 500; }*/ /* #top .autocomplate ul li a:hover p { font-weight: 500; }*/ #top .autocomplate ul li p b { font-weight: 500; color: var(--color); } #top .autocomplate ul li em { width: 70px; display: inline-block; vertical-align: middle; padding: 3px 0; font-size: 16px; font-weight: 500; background: #f4f4f4; border-radius: 40px; color: #000; margin-right: 20px; text-transform: uppercase; text-align: center; border: 1px solid #f4f4f4; letter-spacing: 0; white-space: nowrap; display: none; } #top .autocomplate ul::-webkit-scrollbar { width: 7px; height: 7px; } #top .autocomplate ul::-webkit-scrollbar-track { width: 7px; border-radius: 7px; } #top .autocomplate ul::-webkit-scrollbar-thumb { width: 7px; border-radius: 7px; } #top .autocomplate ul::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment { height: 7px; } #top .autocomplate ul { scrollbar-width: thin; scrollbar-color: #aaa #f1f1f1; } #top .autocomplate .close { margin-top: -1px; font-size: 17px; border-top: 1px solid #f4f4f4; padding: 10px 0; cursor: pointer; color: #888; font-weight: 500; text-align: center; } #top .autocomplate .close:hover { color: #000; font-weight: 500; } /* 최신순 정렬 */ #list .searchH { text-align: center; padding: 50px 0 60px 0; } #list .searchH .sort { padding: 20px 0 0 0; } #list .searchH .sort a { display: inline-block; padding: 7px 24px; font-size: 14px; background: #f2f4f6; border-radius: 40px; color: #888; } #list .searchH .sort a.on { color: var(--color); font-weight: 500; background: var(--color); color: #fff; } #list .searchH .sort a em { font-size: 13px; color: #888; } #list .viewType { display: flex; align-items: center; justify-content: center; gap: 12px; } #list .viewType button { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; padding: 0; border: 2px solid #f2f4f6; border-radius: 0; background: #f2f4f6; color: #ccc; cursor: pointer; appearance: none; -webkit-appearance: none; border-radius: 10px; } #list .viewType button.on { background: #fff; border-color: #444; color: #444; } #list .viewType button .list { display: block; width: 18px; height: 3px; background: currentColor; box-shadow: 0 -8px currentColor, 0 8px currentColor; } /* 네 칸 아이콘 */ #list .viewType .grid { position: relative; display: block; width: 18px; height: 18px; } #list .viewType .grid::before { content: ""; position: absolute; left: 0; top: 0; width: 8px; height: 8px; background: currentColor; box-shadow: 12px 0 currentColor, 0 12px currentColor, 12px 12px currentColor; } #list .viewType button.on .grid::before { border-color: #888; } #list .listOut { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; } #list .listOut .list { flex: 0 0 calc((100% - 20px) / 2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #list .listOut .listIn:hover .sub { font-weight: 500; } #list .listOut .hit { position: static; display: none; } #list .listOut .num { flex: 0 0 50px; position: static; color: #000; opacity: 0.1; z-index: 2; right: 18px; top: 18px; font-weight: 800; font-size: 24px; letter-spacing: 0; line-height: 1; } #list .listOut .info { display: flex; align-items: center; gap: 15px; } #list .listOut .cont { display: flex; align-items: center; flex-direction: row-reverse; justify-content: flex-end; gap: 15px; } #list .listOut.list .thumb { border: none; display: flex; align-items: flex-end; justify-content: space-between; width: 100%; height: auto; border-radius: 0; flex: 0 0 100px; display: none; } #list .listOut .new { position: static; bottom: auto; left: 15px; top: 15px; right: auto; color: #ff7070; width: auto; height: auto; line-height: initial; border-radius: 0; background: none; font-weight: 700; font-size: 14px; } #list .listOut .secret { position: static; bottom: auto; left: 15px; top: 15px; right: auto; color: #ff2c2c; padding: 0 10px; height: 28px; line-height: 28px; border-radius: 28px; background: #ffe3e3; box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.1); font-weight: 700; font-size: 14px; z-index: 1; } #list .listOut .cont .sub { font-size: 19px; font-weight: 400; text-align: left; letter-spacing: -1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #444; } #list .listOut.grid { display: flex; gap: 25px 30px; flex-wrap: wrap; } #list .listOut.grid .list { flex: 0 0 calc(25% - (30px * 3 / 4)); white-space: normal; } #list .listOut.grid .listIn { display: block; border: none; padding: 0; margin: 0; } #list .listOut.grid .list .thumb { position: relative; width: 100%; height: auto; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--border-radius-20); } #list .listOut.grid .cont { display: block; padding: 20px 10px; text-align: center; } #list .listOut.grid .cont .sub { font-size: 20px; font-weight: 500; margin: 0; text-overflow: ellipsis; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 56px; color: #444; white-space: normal } #list .listOut.grid .cont .desc { display: none; } #list .listOut.grid .cont .info .cate { display: none; } #list .listOut.grid .cont .info .cate.hit { position: absolute; right: 15px; top: 15px; background: #fff; display: block; } #list .listOut.grid .cont .info .regdt { display: none; } #list .listOut.grid .thumbIn .cnt { position: absolute; right: 15px; bottom: 15px; } #list .listOut.grid .info .hit { position: absolute; background: #fff; display: block; } #list .listOut.grid .info .new { position: absolute; top: 170px; left: 20px; } #list .listOut.grid .info .num { position: absolute; } #list .listArea { display: flex; gap: 20px 30px; flex-wrap: wrap; } #list .listArea .listIn { display: block; border: none; padding: 0; margin: 0; } #list .listArea .list { flex: 0 0 calc(25% - (30px * 3 / 4)); } #list .listArea .list .thumb { position: relative; width: 100%; height: auto; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--border-radius-20); } #list .listArea .cont { display: block; padding: 20px 5px; } #list .listArea .cont .sub { font-size: 20px; font-weight: 600; margin: 5px 0 15px 0; text-overflow: ellipsis; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 60px; color: #6B7684; } #list .listArea .cont .desc { text-overflow: ellipsis; font-size: 18px; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #6B7684; white-space: normal; line-height: 1.6; margin: 10px 0 15px 0; } #list .listArea .shareLink { position: absolute; top: 16px; right: 16px; width: 46px; height: 46px; line-height: 46px; text-align: center; vertical-align: middle; background-size: 17px; font-size: 0; border-radius: var(--border-radius-40); } .selectbox { position: absolute; bottom: 0; right: 0; width: 170px; user-select: none; -webkit-user-select: none; -ms-user-select: none; overflow: hidden; } .selectbox .value { height: 60px; line-height: 60px; padding: 0 22px; background: #fff; border-radius: 10px; position: relative; color: #444; font-size: 17px; font-weight: 500; letter-spacing: 0; text-transform: uppercase; text-align: left; cursor: pointer; border: 2px solid #ddd; } .selectbox .value:after { content: ''; position: absolute; right: 20px; top: 50%; width: 7px; height: 7px; border-right: 2px solid #888; border-bottom: 2px solid #888; transform: translateY(-70%) rotate(45deg); transition: all 100ms; } .selectbox .options { opacity: 0; visibility: hidden; overflow: hidden; position: absolute; bottom: 100%; left: 0; width: 100%; background: #fff; border: 2px solid #000; border-radius: 12px; z-index: 10; margin: 0 0 0 0; padding: 10px; transition: all 100ms; } .selectbox .options li { position: relative; height: 48px; line-height: 48px; padding: 0 16px; white-space: nowrap; border-radius: 10px; cursor: pointer; font-size: 17px; } .selectbox .options li:hover { background: #eee; } .selectbox .options li img { height: 18px; padding: 0 5px 0 0; vertical-align: middle; } .selectbox .options li img.commerce { height: 20px; } .selectbox .options li i { font-size: 16px; color: #42b649; display: inline-block; font-style: normal; padding: 0; font-weight: 800; } .selectbox.active { overflow: visible; } .selectbox.active .options { opacity: 1; visibility: visible; margin: 0 0 12px 0; } .selectbox.active .value { color: #666; border-color: #444; } .selectbox.active .value::after { transform: translateY(-30%) rotate(225deg); } /* ========== 게시판 리스트 ========== */ #list .listIn { display: flex; align-items: flex-start; gap: 30px; position: relative; overflow: hidden; padding: 0; } #list .listIn .thumb img { width: 100%; height: 100%; opacity: 0.8; transition: all 300ms ease; } #list .listIn:hover .thumb img { opacity: 1; transform: scale(1.05); } #list .listIn:hover .cont .sub { color: #000; } #list .listIn:hover .cont .desc { color: #3f4852; } #list .list { position: relative; text-align: left; } #list .list:last-child .listIn { border: none; } #list .list .thumb { position: relative; flex: 0 0 170px; width: 100%; height: auto; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--border-radius-20); } #list .list.empty { text-align: center; color: #ccc; font-size: 15px; font-weight: 400; padding: 80px 0; background: #f2f4f6; border-radius: 12px; } #list .cont { flex: 1 1 auto; } #list .cont .sub { display: block; font-size: 22px; font-weight: 600; margin: 0; color: #444; word-break: keep-all; } #list .cont .sub div { position: relative; display: inline-block; } #list .cont .desc { text-overflow: ellipsis; font-size: 18px; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; color: #6B7684; white-space: normal; line-height: 1.6; margin: 10px 0 15px 0; } #list .list .cont .info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } #list .list .cont .info .cate { padding: 6px 15px; background: #f2f4f6; border-radius: var(--border-radius-8); font-size: 16px; color: #888; border: 1px solid #f2f4f6; letter-spacing: 0; } #list .list .cont .info .cate.n { background: var(--color); color: #fff; } #list .list .cont .info .cate.btn { background: #f2f4f6; } #list .list .cont .info .cate.hit { color: #bbb; font-size: 15px; min-height: 38px; } #list .list .cont .info .cate.hit span { display: inline-block; width: 20px; height: 20px; vertical-align: middle; background: url('./img/dodo_icon_eye_b.png') no-repeat center center / 20px; vertical-align: middle; opacity: 0.2; margin: 0 4px 0 0; } #list .list .listIn .cont .info .cate.visited { color: #fff; background: #fff; border-color: #fff; } #list .list .listIn:visited .cont .info .cate.visited { color: #888; background: #f2f4f6; border-color: #f2f4f6; } /* ========== 하단 공통 ========== */ #foot #info .logo { margin: 0 0 20px 5px; width: 140px; height: 50px; background: url('./img/playdev_logo_vertical.svg') no-repeat center / 100%; font-size: 0; text-indent: -9999px; } #foot #info .logo a { display: block; height: 100%; } #foot #info { padding: 80px 0 100px 0; } #foot #info .infoIn { position: relative; display: flex; flex-direction: column; gap: 22px; } #foot #info .infoIn * { letter-spacing: 0; } #foot #info .infoIn .call { padding: 0 0 0 48px; background-size: 29px; } #foot #info .infoIn .email { padding: 0 0 0 48px; background-size: 24px; background-position: 3px center; } #foot #info .infoIn .download { padding: 0 0 0 48px; background-size: 21px; background-position: 4px center; } #foot #info .infoIn .home { padding: 0 0 0 48px; background-size: 19px; background-position: 4px center; } #foot #info .infoIn p { flex-basis: 100%; display: flex; align-items: center; gap: 5px; padding: 5px 0; color: #444; text-align: left; } #foot #info .adminArea { display: flex; gap: 10px; padding: 30px 0 0 0; } #foot #info .adminArea a { margin: 0; padding: 8px 16px; } #foot #info .infoIn p a.button { margin: 0 10px 0 0; } #foot #info .infoIn p a.button:hover { text-decoration: underline; text-underline-position: under; color: #000 !important; text-decoration-thickness: 1px; text-underline-offset: 1px; } #foot #info .infoIn p a strong { font-weight: 700; } #foot #info .color { color: var(--color); } #foot #info .color a { color: var(--color); } #foot .right p { font-family: var(--family); font-size: 15px; color: #ccc; padding-top: 20px; text-transform: uppercase; display: none; } #selectbox { position: absolute; bottom: -18px; right: 0; width: 180px; user-select: none; -webkit-user-select: none; -ms-user-select: none; overflow: hidden; } #selectbox .value { height: 60px; line-height: 60px; padding: 0 22px; background: #f4f4f4; border-radius: 10px; position: relative; color: #aaa; font-size: 17px; font-weight: 600; letter-spacing: 0; text-transform: uppercase; text-align: left; cursor: pointer; border: none; } #selectbox .value:after { content: ''; position: absolute; right: 20px; top: 50%; width: 7px; height: 7px; border-right: 2px solid #888; border-bottom: 2px solid #888; transform: translateY(-70%) rotate(45deg); transition: all 100ms; } #selectbox .options { opacity: 0; visibility: hidden; overflow: hidden; position: absolute; bottom: 100%; left: 0; width: 100%; background: #fff; border: 2px solid #000; border-radius: 12px; z-index: 10; margin: 0 0 0 0; padding: 10px; transition: all 100ms; } #selectbox .options li { position: relative; height: 48px; line-height: 48px; padding: 0 16px; white-space: nowrap; border-radius: 10px; cursor: pointer; font-size: 17px; } #selectbox .options li:hover { background: #f4f4f4; } #selectbox .options li img { height: 18px; padding: 0 5px 0 0; vertical-align: middle; } #selectbox .options li img.commerce { height: 20px; } #selectbox .options li i { font-size: 16px; color: #42b649; display: inline-block; font-style: normal; padding: 0; font-weight: 800; } #selectbox.active { overflow: visible; } #selectbox.active .options { opacity: 1; visibility: visible; margin: 0 0 12px 0; } #selectbox.active .value { color: #666; border-color: #444; } #selectbox.active .value::after { transform: translateY(-30%) rotate(225deg); } .call { background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(18.31 14.3)' fill='none' stroke='%23000' stroke-width='5' stroke-miterlimit='10'%3E%3Cpath d='M2.81 19c.03-3.06.64-5.97 2.07-8.7 1.23-2.34 2.99-4.12 5.45-5.17 2.36-1.01 4.76-1.91 7.27-2.48 2.29-.52 4.25.28 5.57 2.23.87 1.29 1.52 2.69 2.12 4.12 1.02 2.45 2 4.91 2.97 7.38.41 1.05.56 2.14.31 3.26-.27 1.23-.98 2.2-1.96 2.95-1.14.87-2.32 1.71-3.52 2.49-1.35.87-2.76 1.66-4.13 2.5-.12.07-.23.23-.26.37-.14.55-.17 1.12.04 1.65.41 1.03.8 2.07 1.32 3.04 1.16 2.18 2.53 4.22 4.01 6.19 2.6 3.47 5.55 6.62 8.89 9.38.93.77 1.9 1.48 3 1.99.19.09.4.17.6.22.52.15.96.09 1.41-.31 2.03-1.78 4.19-3.4 6.5-4.79.58-.35 1.18-.66 1.8-.93 1.42-.62 2.82-.49 4.21.13 1.11.49 2.07 1.22 3.02 1.96 1.8 1.41 3.48 2.98 5.02 4.67.49.54.94 1.12 1.35 1.72 1.24 1.81 1.29 3.7.32 5.65-1.22 2.46-2.96 4.49-5.07 6.22-2.74 2.25-5.85 3.61-9.37 4.03-3.47.41-6.83-.08-10.09-1.31-4.05-1.54-7.57-3.94-10.81-6.77-3.14-2.75-5.87-5.88-8.43-9.17-2.14-2.75-4.12-5.61-5.89-8.61-2.03-3.44-3.74-7.04-5.13-10.78-1.04-2.81-1.88-5.68-2.28-8.65-.2-1.48-.28-2.97-.42-4.46h.09Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat left center / 26px; } .call.fill { background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(18.31 14.3)' fill='%23000' stroke='%23000' stroke-width='5' stroke-miterlimit='10'%3E%3Cpath d='M2.81 19c.03-3.06.64-5.97 2.07-8.7 1.23-2.34 2.99-4.12 5.45-5.17 2.36-1.01 4.76-1.91 7.27-2.48 2.29-.52 4.25.28 5.57 2.23.87 1.29 1.52 2.69 2.12 4.12 1.02 2.45 2 4.91 2.97 7.38.41 1.05.56 2.14.31 3.26-.27 1.23-.98 2.2-1.96 2.95-1.14.87-2.32 1.71-3.52 2.49-1.35.87-2.76 1.66-4.13 2.5-.12.07-.23.23-.26.37-.14.55-.17 1.12.04 1.65.41 1.03.8 2.07 1.32 3.04 1.16 2.18 2.53 4.22 4.01 6.19 2.6 3.47 5.55 6.62 8.89 9.38.93.77 1.9 1.48 3 1.99.19.09.4.17.6.22.52.15.96.09 1.41-.31 2.03-1.78 4.19-3.4 6.5-4.79.58-.35 1.18-.66 1.8-.93 1.42-.62 2.82-.49 4.21.13 1.11.49 2.07 1.22 3.02 1.96 1.8 1.41 3.48 2.98 5.02 4.67.49.54.94 1.12 1.35 1.72 1.24 1.81 1.29 3.7.32 5.65-1.22 2.46-2.96 4.49-5.07 6.22-2.74 2.25-5.85 3.61-9.37 4.03-3.47.41-6.83-.08-10.09-1.31-4.05-1.54-7.57-3.94-10.81-6.77-3.14-2.75-5.87-5.88-8.43-9.17-2.14-2.75-4.12-5.61-5.89-8.61-2.03-3.44-3.74-7.04-5.13-10.78-1.04-2.81-1.88-5.68-2.28-8.65-.2-1.48-.28-2.97-.42-4.46h.09Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat left center / 26px; } .email { background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(4.635 17.72)' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='2.5' width='85.73' height='59.56' rx='8.96'/%3E%3Cpath d='M2.78 9.27S34.86 42.11 43.91 42.11 87.95 9.27 87.95 9.27M64.79 30.27 88.23 53.09M24.69 32.28 3.32 53.09'/%3E%3C/g%3E%3C/svg%3E") no-repeat left center / 22px; } .home { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(1.7 0) scale(1.5835)'%3E%3Cpath fill='none' stroke='%23000' stroke-width='4' stroke-miterlimit='10' d='M58.51 55.02c0 3.1-2.53 5.63-5.63 5.63H8.13c-3.1 0-5.63-2.53-5.63-5.63V27.89c0-3.1 2-7.19 4.44-9.09L26.06 3.93c2.44-1.9 6.45-1.9 8.89 0L54.07 18.8c2.44 1.9 4.44 5.99 4.44 9.09v27.13Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat left center / 20px; } .download { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='translate(0 3.39) scale(1.5977)' fill='none' stroke='%23000' stroke-width='5' vector-effect='non-scaling-stroke'%3E%3Cpath stroke-miterlimit='10' d='M60.09 34.32v14.92c0 3.65-2.96 6.61-6.61 6.61H9.11c-3.65 0-6.61-2.96-6.61-6.61V34.32'/%3E%3Cpolyline stroke-linejoin='round' points='15.2 21.05 31.3 37.86 31.3 0'/%3E%3Cline stroke-linejoin='round' x1='31.3' y1='37.86' x2='47.89' y2='21.27'/%3E%3C/g%3E%3C/svg%3E") no-repeat left center / 22px; } .send { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 99.33 95.9'%3E%3Cpolygon fill='%23dbdbdb' points='99.33 0 31.57 59 43.29 89.33 43.29 66 99.33 0'/%3E%3Cpolygon fill='%23a1a0a3' points='59.67 64.67 43.29 89.33 43.29 66 59.67 64.67'/%3E%3Cpolygon fill='%23efefef' points='99.33 0 0 36.33 31.57 59 99.33 0'/%3E%3Cpolygon fill='%23efefef' points='99.33 0 43.29 66 86.17 95.9 99.33 0'/%3E%3C/svg%3E") no-repeat left center / 24px; } /* ========== 게시판 리스트형 상세 공통 ========== */ #view { padding: 0; } #view .titleTb { width: 100%; text-align: center; padding-bottom: 30px; } #view .td { padding:10px; } #view .td.time { display: none; } #view .td * { font-size: 16px !important; line-height: 1.7; } /* #view .td img { max-width: 800px; }*/ #view .subject span { font-size:23px !important; font-weight: bold; } #view .time span { padding-right: 10px; } #view .time span em { padding-left: 10px; } #view .textarea { padding: 20px 0; } #view .btnBack { display: inline-block; width: 100px; height: 48px; position: relative; background: var(--color2); margin: 20px 0 0 0 ; border-radius:50px; } #view .btnBack span { margin: 0 auto; display: block; width: 18px; height: 3px; background: #fff; margin-top: 4px; } #view .btnBack span:first-child { margin-top: 15px; } /* ========== 게시판 리스트형 리스트 공통 ========== */ #list table.list { width: 100%; padding-bottom: 25px; table-layout: fixed; } #list table.list th { font-weight: normal; padding: 19px 0; background: #fafafa; border-bottom: 1px solid #aaa; } #list table.list thead { display: none; } #list table.list thead tr td { background: #f6f6f6; text-align: center; font-size: 17px; } #list table.list td { } #list table.list tr:first-child td { border: none; } #list table.list td a { position: relative; display: block; font-size: 16px; padding: 14px; } #list table.list tr:hover { background: #f6f6f6; } #list table.list td .new { position: absolute; top: 10px; left: 8px; display: inline-block; font-size: 0; width: 5px; height: 5px; background: var(--color2); border-radius:6px; } #list table.list td.regdt { text-align: center; font-size: 16px; } #list table.list td.hit { text-align: center; } #list table.list td.hit em { display: inline-block; width: 25px; height: 20px; background: url('./img/icons8/icons8-eye-90.png') no-repeat left center; background-size:15px; vertical-align: middle; opacity: 0.3; } #list table.list td.name { text-align: center; font-size: 16px; } #list table.list td .empty { padding: 50px 0; text-align: center; font-size: 18px; color: #ccc; } /* 게시판 리스트 섬네일 디자인 변경 table -> dl 태그로 */ #requestList .list { font-size: 0; } #requestList .list dl { width: 25%; display: inline-block; font-size: 18px; font-weight: 800; vertical-align: top; } #requestList .list dl a { position: relative; display: block; padding: 25px; margin: 10px; border: 1px solid #f7f7f7; background: #f7f7f7; border-radius: 14px; } #requestList .list dl a:hover { background: #fff; border-color: #000; } #requestList .list dl dd.title { font-size: 20px; font-weight: 600; } #requestList .list dl dd.regdt { position: absolute; left: 25px; bottom: 22px; padding: 10px 0 5px 5px; color: #999; font-size: 17px; font-weight: normal; } #requestList .list dl dd.name { padding: 12px 5px; } #requestList .list dl dd.number { position: relative; top: 10px; font-weight: 600; color: #dedede; font-size: 35px; text-align: right; } #requestList .list .new { position: relative; right: auto; top: -2px; left: 0; padding: 2px 8px; background: #fff; color: #000; text-align: center; text-transform: uppercase; font-weight: 600; border-radius: 40px; border: 1px solid var(--color); margin-right: 8px; vertical-align: middle; font-size: 15px; display: inline-block; } #grboard1 { display: none; } .gr_write { text-align: center; padding: 0; } /* ========== 포트폴리오 게시판 리스트 공통 ========== */ #progList .width, #progList .secIn { font-size: 0; } #progList h4 { padding-bottom: 50px; } #progList .list { display: inline-block; width: 25%; } #progList .list.secret a { border-color: red; } #progList .list.notice a { background: #fff; } #progList .list a { transition:all 200ms; display: block; margin: 5px; padding: 15px; border: 1px solid #ddd; border-radius: 4px; background: #fff; } #progList .list .table { position: relative; width: 100%; display: block; } #progList .list .table .cell { overflow: hidden; display: block; } #progList .list .table .lt { width: 200px; text-align: center; } #progList .list .table .lt img { max-height: 58px; } #progList .list .table .rt .cate { transition:all 200ms; display: block; font-family: var(--family); font-weight: bold; font-size: 15px; color: #ddd; padding-bottom: 15px; text-transform: capitalize; } #progList .list.secret .table .rt .cate { color: red; } #progList .list a:hover { border-color: #aaa; } #progList .list a:hover .table .rt .cate { color: #999; } #progList .list .table .rt .title { display: block; text-overflow:ellipsis; overflow: hidden; white-space: nowrap; font-size: 16px; } #progList .list .table .rt .title .new { position: absolute; top: -5px; right: -5px; display: inline-block; font-size: 0; width: 6px; height: 6px; background: var(--color2); border-radius:6px; } #progList .list .table .rt .text { font-size: 16px; display: none; } #progList .list .table .rt .view { position: absolute; right: 0; top: 0; display: inline-block; color: #bbb; font-size: 14px; display: none; } #progList .list .table .rt .view em { display: inline-block; width: 25px; height: 20px; background: url('./img/icons8/icons8-eye-90.png') no-repeat center; background-size: 13px; vertical-align: top; opacity: 0.3; } .filterArea { overflow: hidden; padding: 40px 0; } .tags { float: none; display: inline-block; font-size: 0; } .tags a { display: inline-block; padding: 4px; font-size: 15px; color: #666; margin: 4px; text-decoration: underline; } .tags a.on { background: var(--color2); color: #fff; } .sort { float: right; text-align: left; display: none; } .sort a { display: inline-block; background: var(--colorBg); padding: 7px 16px; border-radius:40px; margin-left: 2px; font-size: 14px; font-family: var(--family); font-weight: bold; letter-spacing: 0; color: #999; } .sort a em { color: #999; font-size: 7px; padding-left: 4px; } .sort a:hover, .sort a.on { background: #aaa; color: #fff; } .sort a:hover em, .sort a.on em { color: #fff; } .empty { padding: 100px 0; text-align: center; color: #999; background: #f6f6f6; border-radius:10px; } /* 비밀글 조회 */ form[name="frmSecret"] #requestView .loop td { border: none; display: block; } form[name="frmSecret"] #requestView .loop td:first-child { display: block; width: auto; background: none; border: none; text-align: center; font-size: 24px; font-weight: 600; padding: 20px 0 40px 0; } form[name="frmSecret"] #requestView .loop td input[name="password"] { width: 400px; margin: 0 auto; display: block; border-radius: 40px; height: 52px; line-height: 52px; text-align: center; font-size: 17px; font-weight: 400; letter-spacing: -1px; outline: none; background: #f4f4f4; border-color: #f4f4f4; } form[name="frmSecret"] #requestView .loop td input[name="password"]:focus { background: #fff; border-color: #000; } /* ========== 게시판 공통 상단 ========== */ .boardHead { text-align: center; } .boardHead .table { padding: 50px 0 70px 0; } .boardHead .table .left { display: block; text-align: center; font-size: 41px; font-weight: 600; font-family: var(--family); text-transform: capitalize; } .boardHead .table .left.blog { color: #00bd39; } .boardHead .table .right { display: block; font-size: 0; text-align: center; } .boardHead ul { display: inline-block; padding: 60px 0 0 0; } .boardHead ul li a { position: relative; display: block; font-weight: 500; padding: 10px 0; letter-spacing: 0; margin: 0 6px; background: #fff; text-transform: lowercase; border-radius: 40px; font-size: 16px; border: 1px solid #ccc; min-width: 120px; color: #666; } .boardHead ul li.qa { display: none; } .boardHead ul li a small { color: #999; padding-left: 4px; font-size: 15px; font-weight: 600; letter-spacing: 0; } .boardHead ul li a:hover, .boardHead ul li a.on { border-color: #222; background: #222; color: #fff; font-weight: 500; } .boardHead ul li a:hover small, .boardHead ul li a.on small { color: #ccc; } .boardHead ul li.admin a { color: red; border-color: red; padding: 10px 20px; } .boardHead ul li.admin a:hover, .boardHead ul li.admin a.on { color: red; } .boardHead ul li a .new { position: absolute; right: 16px; top: 8px; font-size: 0; width: 7px; height: 7px; background: var(--color2); border-radius: 7px; } .boardHead ul li a:hover .new { background: var(--color2); } .boardHead ul li a.on .new { background: var(--color2); } /* ========== 페이징 ========== */ .page-list { padding: 60px 0; } .page-list table tr td.arrow a { positi.page-list table tr td.center table td font.on bon:relative; display:inline-block; width: 50px; height: 50px; line-height: 50px; text-align:center; font-size: 19px; color: var(--color2); font-weight: bold; margin: 0 4px; } .page-list table tr td.arrow:first-child, .page-list table tr td.arrow:last-child { display: none; } .page-list table tr td.arrow span { display: none; } .page-list table tr td.arrow span.sp { display:block; font-size: 0; height: 50px; line-height: 50px; } .page-list table tr td.arrow span.sp.prev { background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg transform='rotate(180,16,16)'%3E%3Cpath stroke='%23000000' stroke-width='2.286' stroke-linecap='round' stroke-linejoin='round' d='M12.571 9.143L19.43 16l-6.858 6.857' fill='none' fill-rule='evenodd'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 20px; } .page-list table tr td.arrow span.sp.next { background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg transform='rotate(0,16,16)'%3E%3Cpath stroke='%23000000' stroke-width='2.286' stroke-linecap='round' stroke-linejoin='round' d='M12.571 9.143L19.43 16l-6.858 6.857' fill='none' fill-rule='evenodd'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 20px; } .page-list table tr td.center table td font { position:relative; display:inline-block; width: 50px; height: 50px; line-height:50px; text-align:center; font-size: 19px; margin: 0; color: #000; border: none; font-weight: 500; } .page-list table tr td.center table td font:hover { font-weight: 600; } .page-list table tr td.center table td font.on { font-weight: bold; } .page-list table tr td.center table td font.on:hover { background: #fff; } .page-list table tr td.center table td font.on b { color: #000; text-decoration: underline; text-underline-position: under; font-size: 19px; font-weight: 600; } /* ========== 메인 페이지 main/index.php ========== */ #main .visual { width: 1200px; height: 385px; overflow: hidden; margin:0 auto 15px auto;} #main .visual .swiper-slide { width: 100%; height: 100%; } #main .visual .table { width: 1200px; height: 440px; margin:0 auto; text-align: left; } #main .visual .table hr { width:62px; display: inline-block; margin: 40px 0; border-color:#ddd; } #main .visual h2 div { color: #eee; font-weight: 200; font-size: 37px; line-height: 130%; } #main .visual h2 div:first-child + div { font-weight: 400; } #main .visual .visual02 h2 div:first-child { letter-spacing: -2px; } #main .visual p { font-weight: 200; color: #eee; line-height: 1.6; font-size: 16px; letter-spacing: -0.5px; } /* swiper reset */ #main .visual .swiper-container { width: 100%; height: 100%; } #main .visual .swiper-pagination { bottom: 29px; } #main .swiper-pagination-bullet { width: 5px; height: 5px; margin: 0 6px; background: #fff; } /* 메인 비쥬얼 */ #main .sec { padding: 55px 0; } #main .sec.white { padding: 10px 0 0 0; } #main .black { background: #fff; } #main .black .table { background: url("./proc/images/bgCoding.png") no-repeat right -20px; background-size: 450px; padding: 20px; } #main .sec h2 p { font-family: var(--family); font-size: 32px; font-weight: bold ; } #main .sec h2 p span { display: inline-block; vertical-align: top; width: 11px; height: 11px; background: var(--color2); position: relative; top: 1px; margin-left: 8px; border-radius:8px; } #main .sec h3 { font-weight: bold; padding: 10px 0 20px 0; font-size: 18px; color: #ccc; } #main .btn { display: inline-block; text-align: center; margin: 20px 0 10px 0 ; font-size: 13px; padding: 8px 20px; font-family: var(--family); text-transform: uppercase; background: #fff; border-radius: 40px; font-weight: bold; min-width: 100px; color: #aaa; } #main .btn a { font-family: var(--family); font-weight: bold; } #main .btn.font { font-weight: bold; background: var(--color2); color: #000; padding: 12px 20px; font-size: 15px; } #main .btn.font em { padding-left: 10px; font-size: 17px; color: #000; font-family: var(--family); } #main .btn a em { padding-left: 10px; font-size: 12px; color: #c6c7ff; font-family: var(--family); } /* 메인 컨텐츠 */ #main .main { margin-top: 30px; border-radius:10px; } #main .mainTb { width: 100%; } #main .mainTb .cell { width: 33.33%; padding:0; border-left: none; } #main .mainTb .cell .inner { display: block; padding: 15px 20px; background: var(--colorBg); border: none; margin: 10px; border-radius: 10px; text-align: center; } #main .mainTb .cell .inner:hover { background: #eee; } #main .mainTb .cell .inner:hover .btn { color: #000; } #main .mainTb h2 { font-family: var(--family); font-weight: 600; font-size: 20px; color: #ccc; text-transform: capitalize; display: none; } #main .mainTb h3 { font-size: 21px; padding: 20px 0 10px 0; font-weight: 600; color: #000; } #main .mainTb { font-size: 0; } #main .mainTb a { display: inline-block; text-align: center; background: #fff; margin:15px 0 8px 0; font-size: 13px; padding: 8px 20px; font-family: var(--family); text-transform: uppercase; margin-top: 20px; border-radius:40px; color: #222; } #main .mainTb a em { padding-left: 10px; font-size: 12px; color: var(--color); font-family: var(--family); display: none; } /* ========== 인트로 proc/about.htm ========== */ #intro { margin-top: 20px; } #intro .sec { padding: 60px 0; } #intro .black { background: #fff; } #intro .black .table { background: url("./proc/images/bgCoding.png") no-repeat right -20px; background-size: 450px; padding: 20px 0; } #intro .black.cart .table { background: url("./proc/images/bgCoding2.png") no-repeat right -50px; background-size: 450px; } #intro .desc { font-family: var(--family); font-size: 18px; font-weight: bold ; text-transform: capitalize; color: #999; } #intro h2 p { font-family: var(--family); font-size: 32px; font-weight: bold; } #intro h2 p span { display: inline-block; vertical-align: top; width: 11px; height: 11px; background: var(--color2); position: relative; top: 7px; margin-left: 8px; border-radius:8px; } #intro h3 { font-family: var(--family); font-weight: bold; padding:10px 0 20px 0 ; font-size: 18px; color: #ccc; } #intro .btn { font-size: 0; padding-top: 14px; text-align: left; } #intro .btn a { display: inline-block; text-align: center; margin-right: 15px; font-size: 15px; font-weight: bold; padding: 10px 20px ; font-family: var(--family); text-transform: uppercase; background: var(--color2); border-radius: 40px; } #intro .btn a em { padding-left: 10px; font-size: 17px; color: #000; font-family: var(--family); font-weight: bold; } #intro .history { border-top: 1px solid #eee; border-bottom: 1px solid #eee; } #intro .history h4 { font-family: var(--family); font-size: 21px; padding-bottom: 12px; color: #aaa; } #intro .history .cell.left { vertical-align: top; } #intro .history .year { margin-top: 20px; } #intro .history .year.hidden { display: none; } #intro .history .year .more { display: inline-block; font-size: 16px; padding: 8px 35px; border-radius: 40px; background: var(--color2); cursor: pointer; font-weight: 500; text-align: center; width: auto; margin-top: 40px; } #intro .history .year .more a { font-size: 16px; font-weight: bold; font-family: var(--family); text-transform: uppercase; } #intro .history .year .more:before { display: none; } #intro .history .year:first-child { border-top: none; padding-top:0; margin: 0; } #intro .history ul li { position: relative; width: 50%; padding: 6px; white-space: nowrap; } #intro .history ul li:before { content: ''; position: absolute; top: 15px; left: -8px; display: inline-block; width: 3px; height: 3px; background: #c6c7ff; border-radius: 10px; } .table > .cell.wide { width: 600px; } /* ========== Q&A proc/faq.htm ========== */ #faq .review { background: #fff; border-radius:10px; height: 290px; margin: 20px; text-align: center; } #faq .review .swiper-wrapper { height: auto; } #faq .review .swiper-container { width: 650px; text-align: center; } #faq .review .swiper-slide .inner { display: inline-block; padding: 20px 0; } #faq .review .swiper-slide .inner h2 img { width: 80px; height: 80px; margin-bottom: 18px; border-radius:65px; background: #fff; padding: 8px; } #faq .review .swiper-slide div { font-size: 21px; font-weight: 600; padding: 2px 0; } #faq .review .swiper-slide span { display: inline-block; padding-top: 20px; color: #999; font-weight: 400; font-size: 17px; } #faq .review .swiper-pagination-fraction, .swiper-pagination-custom, #faq .review .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 30px; } #faq .review .swiper-pagination-bullet { width: 5px; height: 5px; background: #666; margin: 0 5px; opacity: 0.3; } #faq .review .swiper-pagination-bullet-active { background: #000; opacity: 1; } #faq .faq { padding: 10px 0 20px 0; } #faq .faq article div { padding: 14px; } #faq .faq article div b { font-weight: 800; font-size: 20px; padding:0 40px 0 20px; text-transform: uppercase; color: #999; } #faq .faq article div.q { position: relative; cursor: pointer; background: #fff; overflow: hidden; font-size: 19px; font-weight: 400; } #faq .faq article div.q.on { font-weight: 600; } #faq .faq article div.q em { position: absolute; top: 50%; margin-top: -12px; right: 8px; float: right; display: inline-block; background: url('./proc/images/icons8-expand-arrow-50.png') no-repeat 98% center; background-size: 14px; width: 17px; height: 24px; vertical-align: middle; display: inline-block; margin-right: 20px; opacity: 0.4; } #faq .faq article div.q.on em { background: url('./proc/images/icons8-expand-arrow-50T.png') no-repeat 98% center; background-size: 14px; } #faq .faq article div.q.on b { color: #000; } #faq .faq article div.q b { font-weight: 600; color: #ddd ; font-size: 19px; font-family: 'Montserrat', "Pretendard", sans-serif; } #faq .faq article div.a { letter-spacing: 0; display: none; background: var(--colorBg); border-radius: 40px; } #faq .faq article div.a b { color: #ddd; opacity: 0; } #faq .faq article div a { text-decoration: underline; padding-right: 4px; } #faq .keyword { padding: 40px 0 20px 0; } #faq .keyword .left { font-size: 0; text-align: center; white-space: nowrap; padding-bottom: 40px; display: none; } #faq .keyword .left a { display: inline-block; padding: 10px 15px; font-size: 15px; } #faq .keyword .left a em { font-style: normal; padding-right: 4px; } #faq .keyword .right { position: relative; width: auto; } #faq .keyword .right .inner { position: relative; z-index: 2; left: 0; top: 0; height: 54px; overflow: hidden; } #faq .keyword .right .inner .swiper { height: 54px; } #faq .keyword .right .inner .swiper-slide a { display: block; padding: 0; height: 54px; line-height: 54px; padding-left: 30px; font-weight: 500; } #faq .keyword .right .inner .swiper-slide a em { position: relative; top: -1px; font-size: 17px; padding-right: 2px; width: 25px; transition: all 400ms; height: 25px; display: inline-block; background: var(--color2); border: 1px solid var(--color2); color: #000; text-align: center; line-height: 21px; border-radius: 25px; font-weight: 800; margin-right: 4px; padding-left: 2px; text-align: center; } #faq .keyword .right .inner .swiper-slide a span { font-size: 15px; padding-right: 40px; transition:all 400ms; } #faq .keyword .right .search { position: absolute; z-index: 1; right: 0; top: 0; width: 100%; text-align: right; background: var(--colorBg); border-radius:40px; overflow: hidden; height: 54px; } #faq .keyword .right .search span { display: inline-block; padding: 7px 14px; background: #ccc; text-align: center; display: none; } #faq .keyword .right .search span img {width: 26px; padding: 3px; } #faq .keyword .right .txt { position: absolute; top: -68px; right: 10px; font-size: 14px; color: #999; display: none; } #progList .searchIn {z-index: 1; right: 0; top: 0; width: 100%; text-align: right; background: var(--colorBg); border-radius:40px; } #faq .keyword .right .search span img {width: 26px; padding: 3px; } #faq .keyword .right .txt { position: absolute; top: -68px; right: 10px; font-size: 14px; color: #999; display: none; } .map { text-align: center; } .map img { border-radius:4px; border: 1px solid #000; } .map div { padding: 20px 0 0 0; color: #999; font-size: 13px; letter-spacing: 2px; font-weight: 300; } #faq .notice { height: 50px; padding: 15px 0; margin: -49px 0 50px 0; background: #f6f6f6; border-bottom: 1px solid #ccc; } #faq .notice .title { width: 6%; text-align: center; } #faq .notice .title a { background: url('./img/main/btn_blog.png') no-repeat 15px center; background-size:40px; font-size: 0; display: block; height: 100%; cursor: pointer; } #faq .notice .cont { width: 94%; height: 20px; line-height: 20px; } #faq .notice .cont span { width: 80%; display: inline-block; text-align: left; } #faq .notice .cont a:hover { text-decoration: underline; text-underline-position: under; text-decoration-color: #999; } #faq .notice .cont em { width: 20%; display: inline-block; text-align: right; font-size: 12px; color: #999; padding-right: 15px; } /* swiper reset */ #faq .swiper-container { width: 100%; height: 100%; } /* ========== 문의하기 proc/request.htm ========== */ #request input, #request select, #request textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; } #request .write .selectArea { position: relative; background: none; } #request .write .selectArea:after { content: ''; position: absolute; right: 18px; top: 50%; width: 0; height: 0; margin-top: -3px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #444; } #request .write input { height: 60px; line-height: 60px; padding-left: 0; text-indent: 20px; font-size: 18px; } #request .write input, #request .write textarea { border:none; background: var(--colorBg); width: 100%; border: 2px solid var(--colorBg); font-size: 19px; border-radius: 10px; } #request .write textarea { padding: 10px 15px; height: 150px; } #request .write input:focus, #request .write textarea:focus { border-color: #000; background: #fff; } #request .write input.datePicker { position: relative; z-index: 5; background: transparent; text-align: left; font-size: 16px; } #request .write div { margin-top: 11px; clear: both; text-align: center; } #request .write div:first-child { margin-top: 0; } #request .write div.half { float: left ; width: 49.5%; clear: none; } #request .write div.half.first { margin-right: 1%; font-size: 0; } #request .write div.priceWrap { position: relative; } #request .write div.priceWrap select { width: 100%; height: 60px; line-height: 60px; padding-left:10px; letter-spacing: 0; border: 1px solid var(--colorBg); background: var(--colorBg); font-size: 16px; border-radius:4px; } #request .write div.priceWrap select:focus { outline: none; border:1px solid var(--color); background: #fff; } #request .write div.limitDay { position: relative; } #request .write div.limitDay:after { position: absolute; content: '프로젝트 마감일'; right: 15px; bottom: 15px; color: #999; font-size: 16px; } #request .write div select { width: 100%; height: 60px; line-height: 60px; left:0; bottom: 0; text-indent: 20px; letter-spacing: 0; background: var(--colorBg); border:none; border-radius: 10px; } #request .write div select:focus { outline:none; } #request .write div.phone div { display: inline-block; width: 33.3%; padding: 0; margin: 0; } #request .write div.phone span { display: block; padding: 0 0 0 10px; } #request .write div.phone .one span { padding: 0; } #request .write div.phone input { width: 100%; border-radius:4px; } #request .write div.phone input.one { margin-left: 0; padding-right: 5px; } #request .write .require { width: 100%; position: relative; float: left; } #request .write .require:after { position: absolute; left: 6px; top: 7px; width: 7px; height: 7px; border-radius: 7px; content: ''; font-size: 0; background: var(--color2); font-size: 18px; } #request .write .submit button { padding: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: var(--color); letter-spacing: 1px; color: #fff; cursor: pointer; font-size: 19px; border: none; font-weight: 600; height: 60px; line-height: 60px; } /* 상단 비교표 */ .compare { position: relative; margin-bottom: 40px; overflow: hidden; } .compare .vs { position: absolute; left: 50%; top: 50%; margin-top: -6px; margin-left: -50px; width: 60px; height: 60px; line-height: 60px; background: #fff; border:1px solid #000; text-align: center; font-size: 22px; z-index: 3; border-radius:100%; color: #000; letter-spacing: 1px; } .compare .left { width: 50%; } .compare .inner:before { position: absolute; right: 0; bottom: 0; content: ''; width: 100%; height: 100%; display: block; } .compare h2 { position: relative; height: 53px; line-height: 53px; text-align: center; margin-bottom: 8px; margin-left: 12px; } .compare h2:before { position: absolute; right: 0; bottom: 0; content: ''; width: 100%; height: 100%; display: block; z-index: 1; } .compare h2 div { position: relative; z-index: 2; font-size: 18px; margin-left: -50px; color: #888; } .compare ul { position: relative; z-index: 3; padding: 10px 60px 10px 150px; } .compare ul li { padding: 10px 0; border-top: 1px dashed #f1f1f1; } .compare ul li:first-child { border: none; } .compare .lt { position: relative; top: 16px; } .compare .lt h2:before { border-right: 14px solid transparent; border-top: 53px solid #f1f1f1; bottom:auto; top: 0; } .compare .lt ul { background: #f1f1f1; } .compare .lt ul li { padding: 8px 0; color: #888; } .compare .rt:before { position: absolute; width: 100%; right: 0; bottom: 0; width: 100%; height: 18px; background: var(--color); content: ''; z-index: 8; } .compare .rt h2 { color: #fff; background:var(--color); } .compare .rt h2:before { border-left:14px solid transparent; border-bottom:53px solid var(--color); } .compare .rt h2 div { color: #fff; } .compare .rt ul { z-index: 3; } .compare .rt li { color: #fff; font-size: 16px; border-top: 1px dashed #bbb; } .compare .rt .inner { position: relative; } .compare .rt .inner:before { border-bottom:198px solid var(--color); border-left:51px solid transparent; z-index: 3; } /* 파일 첨부 */ #request #table input { padding: 0; width: 80%; float: left; border: none; } #request #table input:focus { background: #ededed; } #request #table a { display: inline-block; width: calc( 20% - 15px ); margin: 0 0 0 13px; height: 60px; line-height: 60px; text-align: center; float: left; background: var(--colorBg); border: 1px solid var(--colorBg); font-size: 16px; border-radius: 10px; color: #888; } #request #table tr { height: 60px; line-height: 60px; } #request #table tr:first-child ~ tr td { padding-top: 8px; } /* ========== 갤러리게시판 board/news/list.htm ========== */ #galleryList table.list { width: 100%; table-layout: fixed; } #galleryList .thumb { height: 100%; } #galleryList .thumbArea { position: relative; height: 220px; background: #f4f4f4; padding: 25px; border-radius: 8px; } #galleryList .thumbArea .thumb { width: 100%; height: 100%; opacity:1; border-radius: 8px; box-sizing: border-box; } #galleryList .imgArea { position: relative; margin: 10px; display: block; padding: 20px; border-radius: 20px; overflow: hidden; background: #fff; box-shadow : 4px 8px 30px 0px rgba(0,0,0,10%); transition: box-shadow 200ms; } /* #galleryList .imgArea:visited .sub { color: #99209b; }*/ #galleryList .imgArea:hover { box-shadow : 4px 8px 30px 0px rgba(0,0,0,20%); } #galleryList .imgArea:hover .cont .desc { color: #000; } #galleryList .imgArea .cate { display: inline-block; padding: 5px 18px; background: #fff; color: #000; font-weight: 400; font-size: 16px; margin-right: 4px; border-radius: 40px; border: 1px solid #ddd; } #galleryList .imgArea .regdt { position: absolute; left: 32px; top: 28px; color: #ddd; font-family: sans-serif; font-weight: bold; font-size: 0; opacity: 0.95; } #galleryList .imgArea .type { display: inline-block; padding: 3px 14px; background: var(--colorBg); border-radius: 20px; color: #888; vertical-align: top; font-size: 14px; margin-left: -2px; font-weight: bold; display: none; } #galleryList .imgArea .regdt .o { background: red; font-family: sans-serif; font-weight: bold; color: #fff; letter-spacing: -1px; } #galleryList .imgArea .cate.visited { color: #fff; background: #fff; border-color: #fff; } #galleryList .imgArea:visited .cate.visited { color: #444; background: #f4f4f4; border-color: #f4f4f4; } #galleryList .cont .sub { font-size: 20px; height: 64px; max-height: 64px; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #000; font-weight: 600; white-space: normal; line-height: 1.6; text-align: left; margin: 15px 0 10px 0; } #galleryList .cont .desc { text-overflow: ellipsis; font-size: 17px; height: 60px; max-height: 60px; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #666; white-space: normal; line-height: 1.6; text-align: left; margin-bottom: 15px; } #galleryList .imgArea .new { position: absolute; top: 10px; left: 10px; display: inline-block; vertical-align: middle; padding: 4px 14px; font-size: 15px; font-weight: 600; background: #fff; border-radius: 40px; color: #000; text-transform: uppercase; text-align: center; border: 1px solid #000; letter-spacing: 0; } #galleryList .imgArea .new.o { z-index: 2; color: red; } #galleryList .imgArea .regdt b { color: #fff; font-size: 12px; display: none; } #galleryList .imgArea .type b { color: #888; font-size: 14px; } #galleryList .imgArea .new.blog { background: #00bd39; } #galleryList .imgArea .shareLink { position: absolute; right: 25px; top: 25px; width: 44px; height: 44px; line-height: 44px; border-radius: 44px; text-align: center; background: #fff; border: none; display: none; } #galleryList .imgArea:hover .shareLink { display: block; } #galleryList .imgArea .shareLink span { display: block; width: 100%; height: 100%; background: url('./img/free-icon-link-7046086.png') no-repeat center / 22px; } /* #galleryList .imgArea .shareLink span { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 32 32' height='100%' width='100%' aria-hidden='true'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23fff'%3E%3C/circle%3E%3Cpath fill='%23aaa' d='M13 21a2 2 0 0 0 2 2h5a3 3 0 0 0 3-3v-5a2 2 0 0 0-2-2v5a3 3 0 0 1-3 3h-5Z'%3E%3C/path%3E%3Cpath fill='%23aaa' d='M10 12a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-6Z'%3E%3C/path%3E%3C/svg%3E"); background-size: cover; background-repeat: no-repeat; background-position: center; }*/ /* #galleryList .imgArea .shareLink span:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 32 32' height='100%' width='100%' aria-hidden='true'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23ddd'%3E%3C/circle%3E%3Cpath fill='%23666' d='M13 21a2 2 0 0 0 2 2h5a3 3 0 0 0 3-3v-5a2 2 0 0 0-2-2v5a3 3 0 0 1-3 3h-5Z'%3E%3C/path%3E%3Cpath fill='%23666' d='M10 12a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-6Z'%3E%3C/path%3E%3C/svg%3E"); background-size: cover; background-repeat: no-repeat; background-position: center; }*/ /* #galleryList .imgArea .shareLink:hover { background: var(--color); border-color: var(--color); }*/ /* #galleryList .imgArea .shareLink:hover span { background: url('./img/free-icon-link-7046086_w.png') no-repeat center / 24px; }*/ #galleryList.addPost .imgArea { box-shadow: none; margin: 24px 12px; background: #f4f4f4; } #galleryList.addPost .thumbArea { background: #fff; } #galleryList.addPost .cont .sub { font-size: 18px; height: 80px; max-height: 80px; margin: 0; padding: 15px 0 0 0; font-weight: 500; } #progView .cell { position: relative; text-align: center; } #progView .cell .shareLink { margin: 35px auto; padding: 9px 0; width: 135px; background: #f4f4f4; border-radius: 40px; cursor: pointer; } #progView .cell .shareLink span { padding: 0 28px 0 8px; font-weight: 500; font-size: 17px; color: #000; background: url('./img/free-icon-link-7046086.png') no-repeat right 3px / 21px; } /* #progView .loop .rt .title div:hover .shareLink { background: #000; }*/ /* #progView .loop .rt .title div:hover .shareLink span { color: #fff; background: url('./img/free-icon-link-7046086_w.png') no-repeat center right 3px / 21px; }*/ #progView .cell .shareLink span { background: url('./img/free-icon-link-7046086.png') no-repeat center right / 19px; } /* #progView .cell .shareLink span { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 32 32' height='100%' width='100%' aria-hidden='true'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23F1F2F5'%3E%3C/circle%3E%3Cpath fill='%23aaa' d='M13 21a2 2 0 0 0 2 2h5a3 3 0 0 0 3-3v-5a2 2 0 0 0-2-2v5a3 3 0 0 1-3 3h-5Z'%3E%3C/path%3E%3Cpath fill='%23aaa' d='M10 12a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-6Z'%3E%3C/path%3E%3C/svg%3E"); background-size: 38px; background-repeat: no-repeat; background-position: right center; padding: 0 35px 0 15px; }*/ /* ========== 튜닝 게시판 board/view/list.htm ========== */ #progView .loop { padding: 0 0 40px 0; } #progView .loop .table { width: 100%; padding: 50px 0; } #progView .loop .lt { width: 100px; padding-right: 20px; } #progView .loop .lt.cate { font-family: var(--family); font-weight: bold; width: 190px; color: #ddd; font-size: 48px; letter-spacing: -2px; padding-left: 10px; color:var(--color2); display: none; } #progView .loop .lt img { max-height:80px; } #progView .loop .rt .title { font-size: 23px; font-weight: 600; text-align: center; } #progView .loop .rt .title div { position: relative; display: inline-block; font-size: 25px; font-weight: 600; cursor: pointer; } #progView .loop .rt .regdt { font-size: 17px; display: none; } #progView .loop .rt .regdt em { display: inline-block; width: 28px; height: 20px; background: url('./img/icons8/icons8-eye-90.png') no-repeat top center; background-size:17px; vertical-align: middle; margin-right: 4px; } #progView .loop .text { font-size: 17px; margin: 20px 0 10px 0; color: var(--color); text-align: center; } #progView .loop .text.admin { text-align: left; word-wrap: break-word; } #progView .loop .text.admin.log { padding: 20px; } #progView .loop .text.admin.link { margin: 10px 0 0 0; } #progView .loop .text.admin.link a { color: #666 !important; } #progView .loop .cont { margin-bottom: 40px; } #progView .loop .cont, #progView .loop .cont * { font-size: 19px !important; font-weight: 400 !important; line-height: 1.7 !important; font-family: "Pretendard", -apple-system, "Malgun Gothic", sans-serif !important; word-wrap: break-word; } #progView .loop .cont img { max-width: 100%; box-shadow: 10px 10px 50px 5px rgba(0,0,0,0.1); margin: 30px 0; border-radius: 20px; cursor: zoom-in !important; } #progView .loop .cont a { text-decoration: underline; text-underline-position: under; font-weight: 500 !important; } .btn { text-align: center; padding-top: 40px; } .btn .inner { display: inline-block; } .btn .inner a { display: inline-block; width: 180px; padding: 10px 0; text-align: center; background: var(--colorBg); margin-left: 2px; border-radius:42px; font-weight: bold; font-weight: 500; } .btn .inner a.list { background: var(--color); color: #fff; margin: 0; } #progView .sec .inner { background: #fff; } #progView .sec h4 { padding: 40px 0; font-size: 25px; font-weight: bold; border: none; margin: 0; text-transform: capitalize; text-align: left; } #progView .sec h4 span { font-size: 20px; } #progView .sec .ralaIn { width: 100%; padding: 40px 0 0 0; } #progView .sec .process { padding-bottom: 40px; text-align: center; } #progView .sec .process ul { display: inline-block; } #progView .sec .process li { display: table; background: #fff; width: 180px; height: 180px; text-align: center; border-radius:100%; margin-left: 40px; box-shadow: 5px 10px 30px 0 rgba(0,0,0,0.1); } #progView .sec .process li img { max-height: 55px; } #progView .sec .process li:first-child { margin-left: 0; } #progView .sec .process li div { position: relative; display: table-cell; vertical-align: middle; } #progView .sec .process li div:after { position: absolute; left: -70px; top: 50%; margin-top: -25px; content: ''; width: 50px; height: 50px; content: ' '; line-height: 50px; left: -47px; display: none; } #progView .sec .process li:first-child div:after { display: none; } /* #progView .sec .process li:hover { background: #ddd; }*/ /* #progView .sec .process li:hover p { color: #fff; }*/ #progView .sec .process li div p { padding-top: 15px; font-weight: 500; } #progView .sec dl { padding-bottom: 10px; text-align: left; } #progView .sec dl dd { padding-bottom: 10px; } #progView #contents .contents { padding: 20px 0; } /* ========== 문의하기 게시판 board/view/list.htm ========== */ #requestView { padding: 10px 0 0 0; } #requestView .loop table { width: 100%; border-collapse: collapse; table-layout: fixed; background: #fff; } #requestView .loop .table { padding: 40px 0; background: #fff; } #requestView .loop td { padding: 12px 10px; font-size: 17px; border:1px solid #eee; } #requestView .loop h4 { border: none; padding: 0; font-size: 22px; font-weight: bold; text-align: left; color: var(--color); } #requestView .loop td:first-child { width: 200px; padding-left: 20px; background: #eee; } #requestView .loop td.fileTd { font-weight: 400; color: #999; font-size: 12px; } #requestView .loop td.fileTd b { font-weight: 400; } #requestView .loop td.fileTd a { text-decoration: underline; text-underline-position: under; font-size: 14px; padding-right: 4px; } body #requestView .loop td.contTd { padding: 0; } #requestView { min-height:300px; } #requestView .loop td input { width: 200px; border:1px solid #ddd; padding: 0; padding-left: 10px; height: 30px; line-height: 30px; } #requestView .loop td em { padding-left: 10px; } #requestView .loop .btn { text-align: center; margin-top: 40px; } #requestView .loop .btn .inner { display: inline-block; } #requestView .loop .btn .inner a { display: inline-block; width: 200px; padding: 10px 14px; text-align: center; background: var(--colorBg); border-radius:40px; font-size: 15px; margin-left: 4px; font-weight: bold; font-family: 'Montserrat', "Pretendard", sans-serif; text-transform: capitalize; color: #888; } #requestView .loop .btn .inner a.list { background: #000; color: #fff; margin: 0; } #requestView .loop td input[name="password"] { color: var(--color); height: 36px; line-height: 36px; } #requestView .loop td input[name="password"]:focus { border: 1px solid #000; background: #fff; } .mOnly { display: none !important; } body #galleryList { position: relative; } body .swiper-pagination { position: relative; padding: 20px 0 0 0; } body .swiper-pagination-bullet { width: 6px; height: 6px; margin: 0 8px !important; background: #666; } body .swiper-pagination-bullet-active { background: var(--color); } body .swiper-button-prev { left: -60px; margin-top: -40px; background-image : url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23fcbe4d'%2F%3E%3C%2Fsvg%3E"); background-size: 24px; } body .swiper-button-next { right: -60px; margin-top: -40px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23fcbe4d'%2F%3E%3C%2Fsvg%3E"); background-size: 24px; } body .swiper-button-prev.swiper-button-disabled, body .swiper-button-next.swiper-button-disabled { opacity: 0; } .gd_clipboard_email { cursor: pointer; } .gd_clipboard_email:hover { text-decoration: underline; text-underline-position: under; color: #000 !important; text-decoration-thickness: 1px; text-underline-offset: 3px; } #poll .box .btnArea button { transition: all 250ms; } #poll .box .btnArea button:hover { position: relative; z-index: 2; transition: all 250ms; transform: scale(1.01); animation: pulse_2 800ms; box-shadow: 0 0 0 8px rgba(0,0,0, 0); } #poll .box .btnArea button[disabled] { transition: none; } #poll .box .btnArea button[disabled]:hover { transition: none; animation: none; box-shadow:none; transform: none; } /* ========== 메인페이지 ========== */ #shop .titleArea { padding: 120px 0 80px 0; } #shop .titleArea.first { padding: 70px 0 80px 0; } #shop .titleArea h3 { font-size: 41px; text-align: center; font-weight: 600; letter-spacing: -2px; } #shop .titleArea.first h3 { letter-spacing: -1px; } #shop .titleArea div { display: flex; justify-content: center; font-size: 24px; text-align: center; font-weight: 500; color: #888; margin: 15px 0; letter-spacing: -1px; } #shop .titleArea div a { display: flex; align-items: center; height: 66px; line-height: 66px; text-align: center; padding: 0 60px 0 30px ; font-size: 20px; font-weight: 500; color: #fff; background: var(--color) url('./img/playdev_icon_arrow_r.svg') no-repeat calc( 100% - 25px ) center / 32px; border-radius: 40px; letter-spacing: -1px; margin: 40px 0 0 0; } #shop .titleArea div a:hover { background-color: #7e58ed; } #shop .titleArea div a em { display: inline-block; width: 30px; height: 30px; background: url('./img/playdev_icon_package.svg') no-repeat 0 -2px; margin: 0 5px 0 0; } #shop .boxArea { display: flex; align-items: stretch; justify-content: center; text-align: center; gap: 0 50px; } #shop .boxArea section { flex: 1 1 50%; border-radius: 40px; padding: 100px 0 60px 0; overflow: hidden; } #shop .boxArea h4 { padding: 0 30px 60px 30px; } #shop .boxArea h4 div { font-size: 26px; font-weight: 600; color: #444; line-height: 1.4; } #shop .boxArea img { } #shop .boxArea section.zero { background: #E9F6FD; } #shop .boxArea section.zero h4 div { color: #4cd6dd; } #shop .boxArea section.chart { background: var(--colorBg); } #shop .boxArea section.sns { background: #eef6f9; } #shop .boxArea section.sns h4 { padding: 0 30px 70px 30px; } #shop .boxArea section.sns img { padding: 0 50px; } #shop .boxArea section.patch { background: #FFF8E3; justify-content: flex-end; flex-direction: column; display: flex; padding: 120px 0 0 0; } #shop .boxArea section.patch h4 { padding: 0 0 51px 0; } #shop .boxArea section.reason h4 { padding: 0 ; } #shop .boxArea section.reason { background: #edf1f4; justify-content: flex-end; flex-direction: column; display: flex; padding: 90px 0 0 0; } #shop .boxArea section.oneday { background: #d2f0f0; } #shop .boxArea section.oneday h4 { padding: 0 30px; } #shop .articleArea h4 { display: flex; justify-content: space-between; align-items: center; padding: 0 0 40px 0; } #shop .articleArea.blog h4 { } #shop .articleArea h4 div { font-size: 28px; font-weight: 600; } #shop .articleArea h4 a { font-size: 20px; font-weight: 500; color: #373e3f; padding: 0 34px 0 0 ; background: url('./img/playdev_icon_arrow_right_b.svg') no-repeat right center / 32px; } #shop .articleArea.blog h4 a { background: url('./img/playdev_icon_arrow_right_up_b.svg') no-repeat right center / 32px; } #shop .articleArea ul li { padding: 0 12px; } #shop .articleArea ul li a { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 14px 0; } #shop .articleArea ul li a div.subject { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #373e3f; padding: 0 30px 0 0; font-size: 20px; } #shop .articleArea ul li a .new { position: absolute; right: auto; left: -12px; top: 6px; font-size: 0; width: 7px; height: 7px; line-height: 7px; border-radius: 7px; background: var(--color); display: inline-block; } #shop .articleArea ul li a:hover div.subject { font-weight: 500; color: #000; } #shop .articleArea ul li a div.regdt { flex-shrink: 0; color: #999; letter-spacing: -1px; } /* ========== 회사소개 ========== */ #about .titleArea { padding: 120px 0 80px 0; } #about .titleArea.first { padding: 70px 0 80px 0; } #about .titleArea h3 p { font-size: 41px; text-align: center; font-weight: 600; letter-spacing: -2px; } #about .titleArea div { display: flex; justify-content: center; font-size: 24px; text-align: center; font-weight: 500; color: #888; margin: 15px 0; letter-spacing: -1px; } #about .titleArea div a { display: flex; align-items: center; height: 66px; line-height: 66px; text-align: center; padding: 0 60px 0 30px ; font-size: 20px; font-weight: 500; color: #fff; background: var(--color) url('./img/playdev_icon_arrow_r.svg') no-repeat calc( 100% - 25px ) center / 30px; border-radius: 40px; letter-spacing: -1px; margin: 40px 0 0 0; } #about .titleArea div a.pdf { background: var(--color) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='line-icon'%3E%3Cg fill='%23fff'%3E%3Cpath d='M11.21 15.4c.21.21.5.32.78.32s.56-.11.78-.32L18 10.16c.43-.43.43-1.13 0-1.56s-1.13-.43-1.56 0l-3.35 3.35V2.78c0-.61-.49-1.1-1.1-1.1s-1.1.49-1.1 1.1v9.18L7.53 8.61c-.43-.43-1.13-.43-1.56 0s-.43 1.13 0 1.56l5.24 5.23z'/%3E%3Cpath d='M21.38 13.09c-.61 0-1.1.49-1.1 1.1v4.21c0 .72-.58 1.3-1.3 1.3H5c-.72 0-1.3-.58-1.3-1.3v-4.21c0-.61-.49-1.1-1.1-1.1s-1.1.49-1.1 1.1v4.21c0 1.93 1.57 3.5 3.5 3.5h13.98c1.93 0 3.5-1.57 3.5-3.5v-4.21c0-.61-.49-1.1-1.1-1.1z'/%3E%3C/g%3E%3C/svg%3E") no-repeat calc( 100% - 26px ) center / 24px; } #about .titleArea div a:hover { background-color: #7e58ed; } #about .titleArea div a em { display: inline-block; width: 30px; height: 30px; background: url('./img/playdev_icon_package.svg') no-repeat 0 -2px; margin: 0 5px 0 0; } #about .reviewArea { display: flex; gap: 0 30px; } #about .reviewArea section { display: flex; flex-direction: column; justify-content: space-around; flex: 1; background: var(--colorBg); border-radius: 40px; padding: 40px; } #about .reviewArea section .text { font-size: 21px; font-weight: 500; line-height: 1.7; letter-spacing: -1px; color: #373e3f; } #about .reviewArea section .cont { display: flex; flex-wrap: wrap; align-items: center; padding: 50px 0 0 0; } #about .reviewArea section .cont img { max-height: 85px; padding: 0 20px 0 0; } #about .reviewArea section .cont p { flex: 1; } #about .reviewArea section .cont p span { display: block; color: #999; font-size: 16px; font-weight: 400; } #about .reviewArea section .cont p span:first-child { color: #444; font-size: 18px; font-weight: 500; } #about .clients ul { display: flex; gap: 15px; flex-wrap: wrap; align-items: center; } #about .clients ul li { height: 150px; display: flex; align-items: center; justify-content: center; flex: 1 1 calc(100% / 6 - 15px); background: var(--colorBg); border-radius: 20px; padding: 0px; text-align: center; line-height: 1; } #about .clients ul li img { height: 40px; object-fit: contain; } #about .clients ul li:nth-child(1) img { height: 44px; } #about .clients ul li:nth-child(2) img { height: 40px; } #about .clients ul li:nth-child(3) img { height: 40px; } #about .clients ul li:nth-child(4) img { height: 42px; } #about .clients ul li:nth-child(5) img { height: 46px; } #about .clients ul li:nth-child(6) img { height: 54px; } #about .clients ul li:nth-child(7) img { height: 58px; } #about .clients ul li:nth-child(8) img { height: 20px; } #about .clients ul li:nth-child(9) img { height: 40px; } #about .clients ul li:nth-child(10) img { height: 38px; } #about .clients ul li:nth-child(11) img { height: 22px; } #about .clients ul li:nth-child(12) img { height: 22px; } #about .clients ul li:nth-child(13) img { height: 66px; } #about .clients ul li:nth-child(14) img { height: 28px; } #about .clients ul li:nth-child(15) img { height: 54px; } #about .clients ul li:nth-child(16) img { height: 34px; } #about .clients ul li:nth-child(17) img { height: 48px; } #about .clients ul li:nth-child(18) img { height: 26px; } /* ========== 개발놀이터 서비스 차별화 ========== */ #compare .compareIn { padding: 80px 0; } #compare .titleArea { padding: 80px 0; } #compare .table { display: flex; justify-content: center; gap: 15px; margin-top: 20px; } #compare .table section { flex: 1; overflow: hidden; background: #fff; text-align: center; } #compare .table section h4 { padding: 20px 0; font-weight: 600; letter-spacing: -1px; font-size: 19px; color: #999; } #compare .table section div { padding: 20px 0; letter-spacing: -1px; font-size: 19px; color: #666; border-radius: 10px; } #compare .table section div small { font-size: 16px; padding-left: 10px; color: #999; font-weight: 400; } #compare .table section div:nth-child(even) { background: #f6f6f6; } #compare .table section:first-child { flex: 0 0 160px; } #compare .table section:first-child div { background: #fff; color: #bbb; font-weight: 500; } #compare .table section.playdev { position: relative; z-index: 2; top: -10px; background: linear-gradient(180deg, #000 0%,#444 99%); color: white; font-weight: 600; border-radius: 20px; background: #fff; border: 2px solid #444; } #compare .table section.playdev h4 { padding: 35px 0; font-size: 0; background: url('./img/playdev_logo_vertical.svg') no-repeat center 22px / 120px; } #compare .table section.playdev div { background: inherit; font-size: 20px; color: #444; font-weight: 600; background: url('./img/playdev_icon_check_w.svg') no-repeat 20px center / 14px; background: none; padding: 21px 0; } #compare .table section.playdev div small { color: #e8e0fd; font-size: 16px; } /* 자주하는 질문과 답변 */ #faq .titleArea { padding: 120px 0 60px 0; } #faq .titleArea h3 p { font-size: 41px; text-align: center; font-weight: 600; letter-spacing: -2px; } #faq .titleArea div { display: flex; justify-content: center; font-size: 20px; text-align: center; font-weight: 500; color: #888; margin: 10px 0; letter-spacing: -1px; } #faq .faqIn section { margin: 20px 0; cursor: pointer; background: var(--colorBg); border-radius: var(--border-radius-20); padding: 10px 20px; border-radius: 20px; } #faq .faqIn section:hover { background: #eceff3; } #faq .faqIn section.on .ask { display: block; } #faq .faqIn .ques { position: relative; margin: 10px; padding: 0 36px 0 0; background: url("data:image/svg+xml,%3Csvg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid meet'%3E%3Cpath d='m1 10.9c-.2 0-.5-.1-.6-.3-.4-.4-.4-.9 0-1.3l3.8-3.8-3.9-3.9c-.4-.4-.4-.9 0-1.3s.9-.4 1.3 0l4.5 4.5c.4.4.4.9 0 1.3l-4.5 4.5c-.2.2-.4.3-.6.3' fill='%23b0b8c1' fill-rule='evenodd' transform='rotate(270,12,12) matrix(0 1 -1 0 17.65 9.25)'/%3E%3C/svg%3E") no-repeat right 0px / 28px; color: #444; font-size: 19px; font-weight: 500; letter-spacing: 0; } #faq .faqIn section:hover .ques { color: #222; background: url("data:image/svg+xml,%3Csvg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid meet'%3E%3Cpath d='m1 10.9c-.2 0-.5-.1-.6-.3-.4-.4-.4-.9 0-1.3l3.8-3.8-3.9-3.9c-.4-.4-.4-.9 0-1.3s.9-.4 1.3 0l4.5 4.5c.4.4.4.9 0 1.3l-4.5 4.5c-.2.2-.4.3-.6.3' fill='%23666' fill-rule='evenodd' transform='rotate(270,12,12) matrix(0 1 -1 0 17.65 9.25)'/%3E%3C/svg%3E") no-repeat right 0px / 28px; } #faq .faqIn section.on .ques { color: #222; background: url("data:image/svg+xml,%3Csvg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid meet'%3E%3Cpath d='m1 10.9c-.2 0-.5-.1-.6-.3-.4-.4-.4-.9 0-1.3l3.8-3.8-3.9-3.9c-.4-.4-.4-.9 0-1.3s.9-.4 1.3 0l4.5 4.5c.4.4.4.9 0 1.3l-4.5 4.5c-.2.2-.4.3-.6.3' fill='%23666' fill-rule='evenodd' transform='rotate(180,12,12) matrix(0 1 -1 0 17.65 9.25)'/%3E%3C/svg%3E") no-repeat right 0px / 28px; } #faq .faqIn .ques b { display: inline-block; padding-right: 10px; } #faq .faqIn .ask { margin: 20px 10px 20px 42px; display: none; color: #6b7684; font-size: 18px; line-height: 1.7; font-weight: 600; letter-spacing: 0; } #faq .faqIn .ask p { line-height: 1.7; word-break: keep-all; } #faq .faqIn .ask b { color: #222; padding: 0 2px; } /* ========== 하단 전화,메일,카카오#cs .csIn .btnArea a톡 ========== */ #cs { padding: 80px 0 0 0; } #cs .csIn { display: flex; justify-content: space-between; align-items: center; background: #fff; box-shadow: 10px 10px 50px 0 rgba(0,0,0,0.05); border-radius: 40px; padding: 80px; } #cs .csIn section img { height: 180px; } #cs .csIn .title { padding: 0 0 40px 0; } #cs .csIn .title p { font-size: 34px; font-weight: 600; line-height: 1.4; letter-spacing: -2px; color: #000; } #cs .csIn .btnArea { display: flex; align-items: center; gap: 0 10px; } #cs .csIn .btnArea a { background: var(--color); padding: 17px 35px 17px 25px; font-size: 18px; border-radius: 12px; word-break: keep-all; line-height: 1; } #cs .csIn .btnArea a.request { display: flex; align-items: center; gap: 8px; background: #000; color: #fff; font-weight: 500; } #cs .csIn .btnArea a.request em { display: block; width: 28px; height: 28px; background: url('./img/playdev_icon_package.svg') no-repeat 0 -2px; } #cs .csIn .btnArea a.phone { background: #eee; display: none; } #cs .csIn .btnArea a.phone em { padding: 0 0 0 38px; background: url('./img/playdev_icon_call_b.png') no-repeat center / 20px; color: #888; font-weight: 600; } #cs .csIn .btnArea a.kakao { display: flex; align-items: center; gap: 8px; background: #ffd972; font-weight: 500; } #cs .csIn .btnArea a.kakao em { display: block; width: 28px; height: 28px; background: url('./img/icon_kakaochat_black.png') no-repeat center / 21px; font-weight: 500; color: #000; } /* ========== 문의하기 ========== */ #shop .list { display: flex; gap: 0 80px; justify-content: center; align-items: center; padding: 80px 0; } #shop .list section { flex: 1 1 50%; padding: 60px 0; box-sizing: border-box; min-width: 0; } #shop .list section .sub { display: inline-block; padding: 10px 20px; background: #f4f4f4; border-radius: 40px; color: #999; font-size: 17px; font-weight: 500; text-align: center; margin: 0 0 20px 0; } #shop .list section.bg { display: flex; overflow: hidden; padding: 60px 0 0 20px; background: #f6f7f9; border-radius: 40px; text-align: center; } #shop .list section.bg.tuning1 { background: #deefff; } #shop .list section.bg.tuning3 { padding: 0; } #shop .list section.bg img { max-height: 360px; } #shop .list section.text .desc p { letter-spacing: -1px; color: #888; line-height: 1.7; font-size: 21px; font-weight: 500; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } #shop .list section.text h3 { color: #000; font-size: 36px; font-weight: 700; margin: 0 0 30px 0; letter-spacing: -1px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } #shop .list section.text h3.zero { padding: 0 0 0 60px; background: url('./img/dodo_icon_card.png') no-repeat left center / 54px; } #request .requestIn { display: flex; gap: 60px; justify-content: center; align-items: center; padding: 0 0 80px 0; } #request .requestIn section { width: calc( 50% - 80px ); padding: 40px; box-sizing: border-box; } #request .requestIn section.form { border-radius: var(--border-radius-40); background: var(--colorBg); padding: 40px; } #request .requestIn .write { width: 440px; } #request .write .rows { position: relative; margin-top: 15px; } #request .write .rows:after { position: absolute; left: 12px; top: 10px; content: ''; width: 6px; height: 6px; background: var(--color); border-radius: 6px; } #request .write .rows.selectArea:after { display: none; } #request .write .rows.submit:after { display: none; } #request .write .rows.file:after { display: none; } #request .write .rows.submit button { display: flex; align-items: center; justify-content: center; width: 100%; background: var(--color); border-radius: 12px; color: #fff; text-indent: 0; letter-spacing: 0px; } #request .write .rows.submit button:hover { background: #7e58ed; border-radius: 12px; color: #fff; } #request .write .rows.submit button em { display: inline-block; width: 30px; height: 30px; background: url('./img/playdev_icon_package.svg') no-repeat 0 0; margin: 0 10px 0 0; } #request .requestIn h3.request { margin: 0 0 25px 0; padding: 0 0 0 60px; background: url('./img/dodo_icon_mission.png') no-repeat left 0 / 50px; } #request .requestIn h3.request p { color: #333d4b; font-size: 36px; font-weight: 700; letter-spacing: -1px; } #request .write .rows.selectArea { position: relative; background: none; } #request .write .rows.selectArea:after { content: ''; position: absolute; right: 18px; top: 50%; left: auto; background: none; width: 0; height: 0; margin-top: -3px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #444; display: block; } #request ::-webkit-input-placeholder { color: #888; font-size: 18px; } #request ::-moz-placeholder { color: #888; font-size: 18px; } #request :-ms-input-placeholder { color: #888; font-size: 18px; } #request :-moz-placeholder { color: #888; font-size: 18px; } #request .titleArea { padding: 120px 0 80px 0; } #request .titleArea.first { padding: 70px 0 80px 0; } #request .titleArea h3 p { font-size: 41px; text-align: center; font-weight: 600; letter-spacing: -2px; } #request .titleArea div { display: flex; justify-content: center; font-size: 24px; text-align: center; font-weight: 500; color: #888; margin: 15px 0; letter-spacing: -1px; } #request .titleArea div a { display: flex; align-items: center; height: 66px; line-height: 66px; text-align: center; padding: 0 60px 0 30px ; font-size: 20px; font-weight: 500; color: #fff; background: var(--color) url('./img/playdev_icon_arrow_r.svg') no-repeat calc( 100% - 25px ) center / 30px; border-radius: 40px; letter-spacing: -1px; margin: 40px 0 0 0; } #request .titleArea div a:hover { background-color: #7e58ed; } #request .titleArea div a em { display: inline-block; width: 30px; height: 30px; background: url('./img/playdev_icon_package.svg') no-repeat 0 0; margin: 0 5px 0 0; } /* ========== 갤러리 게시판 board/gallery/list.htm ========== */ #list .listIn .thumb img { transition: all 250ms; } #list .listIn:hover .thumb img { opacity: 1; transform: scale(1.05); } #list .listIn:hover .cont .sub { color: #000; } #list .listIn:hover .cont .desc { color: #444; } #list .list { position: relative; text-align: left; } #list .list:last-child .listIn { border: none; } #list .list .thumb { position: relative; flex: 0 0 240px; width: 240px; height: 180px; overflow: hidden; border-radius: var(--border-radius-12); border: 1px solid #f4f4f4; } #list .list.empty { text-align: center; color: #ccc; font-size: 17px; font-weight: 400; padding: 200px 0; background: #fff; } #list .list .thumb img { width: 100%; height: 100%; } #list .shareLink { position: absolute; top: 12px; right: 12px; width: 46px; height: 46px; line-height: 46px; text-align: center; vertical-align: middle; background: #fff url('./img/free-icon-link-7046086.png') no-repeat center / 21px; font-size: 0; border-radius: var(--border-radius-8); } #list .shareLink:hover { background: #000 url('./img/free-icon-link-7046086_w.png') no-repeat center / 20px; } #list .list .cont .info .cate { display: inline-block; padding: 6px 18px; background: var(--colorBg); border-radius: var(--border-radius-8); font-size: 15px; margin-right: 8px; } #list .list .cont .info .cate.btn { background: var(--colorBg); } #list .list .listIn .cont .info .cate.visited { color: #fff; background: #fff; } #list .list .listIn:visited .cont .info .cate.visited { color: var(--color); background: #f6f3ff; } #list .listRelaTitle { padding: 40px 5px; font-size: 22px; font-weight: 600; flex-basis: 100%; } #list .listRelaTitle a { display: block; font-size: 22px; font-weight: 600; } #list .regdt { color: #ccc; font-size: 14px; font-weight: normal; text-align: left; padding: 15px 0 0; } #list .hit { position: absolute; left: 14px; top: 14px; color: #bbb; font-size: 14px; font-weight: 500; border-radius: 28px; background: #fff; padding: 5px 12px; background: #f4f4f4; } #list .hit span { display: inline-block; width: 20px; height: 20px; vertical-align: middle; background: url('./img/playdev_icon_eye_b.png') no-repeat center center / 18px; vertical-align: middle; opacity: 0.2; margin-right: 3px; } #list .link { position: absolute; right: 14px; top: 14px; width: 30px; height: 30px; display: block; background: url("./img/icons8/icons8-external-link-100.png") no-repeat center center; background-size:20px; } #list .link:hover { background:#fff url("./img/icons8/icons8-external-link-100.png") no-repeat center center; background-size:20px; border-color:var(--color2); } #list .new { position: absolute; width: 52px; height: 32px; line-height: 32px; background: #000; text-align: center; text-transform: uppercase; font-weight: 600; border-radius: var(--border-radius-12); vertical-align: middle; font-size: 12px; top: 12px; left: 12px; z-index: 1; color: #fff; } #list .new.secret { position: absolute; left: auto; top: 15px; right: 15px; background: red; border-color: red; z-index: 1; } #list .list.post .listIn { align-items: center; border: none; padding: 20px 0; margin: 0; } #list .list.post .listIn:hover .thumb { background-color: #eceff3; } #list .list.post .thumb { width: auto; height: 110px; line-height: 110px; border-radius: var(--border-radius-20); flex: 0 0 180px; font-weight: 600; color: #444; font-size: 17px; background: var(--colorBg) url('./img/playdev_icon_arrow_left_b.svg') no-repeat calc( 100% - 30px ) center / 30px; text-align: center; text-indent: -15px; } #list .list.post .thumb.next { background: var(--colorBg) url('./img/playdev_icon_arrow_right_b.svg') no-repeat calc( 100% - 30px ) center / 30px; text-align: center; } #list .list.post .cont .desc { margin: 12px 0; } /* ========== 게시글 상세보기 ========== */ #view .top { display: flex; justify-content: space-between; font-size: 16px; padding: 0; display: none; } #view .top .category { display: flex; color: #000; font-weight: 700; } #view .top .category a { display: inline-block; background: var(--colorBg); padding: 12px 30px; text-align: center; font-weight: 500; font-size: 16px; border-radius: var(--border-radius-8); margin: 0 14px 0 0; min-width: 130px; } #view .top .category a.list { background: var(--colorBg) url('./img/playdev_icon_arrow_left_b.svg') no-repeat 10px center / 32px; padding: 12px 20px 12px 40px; } #view .top .category a.list:hover { background-color: #ededed; } #view .top .regdt { color: #000; font-weight: 500; } #view .top .hit { display: inline-block; text-align: right; padding-left: 24px; vertical-align: middle; background: url('./img/playdev_icon_eye_w.png') no-repeat left 5px / 18px; vertical-align: middle; opacity: 0.5; color: #ccc; font-size: 15px; } #view .titleArea { position: relative; } #view .sub { display: flex; justify-content: space-between; margin: 30px 0; text-align: center; } #view .sub .title { flex: 1; font-size: 34px; font-weight: 600; letter-spacing: -1px; } #view .shareBtn { width: 52px; height: 52px; line-height: 52px; text-align: center; vertical-align: middle; background: #f4f4f4 url('./img/free-icon-link-7046086.png') no-repeat center / 24px; font-size: 0; border-radius: 12px; cursor: pointer; } #view .shareBtn:hover { background: #000 url('./img/free-icon-link-7046086_w.png') no-repeat center / 24px; } #view .hashtag { font-size: 0; text-align: left; overflow-y: auto; white-space: nowrap; } #view .hashtag a { display: inline-block; font-size: 14px; padding: 8px 16px; border-radius: var(--border-radius-8); margin: 0 8px 0 0; background: #1d1d1d; color: #aaa; } #view .contents { font-size: 19px; font-weight: 400; line-height: 1.8; color: #2d2d2d; padding: 40px 0; } #view .contents * { font-size: 19px !important; line-height: 1.8; word-break: keep-all; font-family: "Pretendard", -apple-system, "Malgun Gothic", sans-serif; } #view .contents a { text-decoration: underline; text-underline-position: under; text-underline-offset : 1px; } #view .contents b { font-size: 22px !important; font-weight: 600; color: #000; letter-spacing: -1px; } #view .contents font[size="1"] { font-size: 16px !important; } #view .contents font[size="1"] * { font-size: 16px !important; } #view .contents img { border-radius: 12px; box-sizing: border-box; border: 10px solid #f9f9f9; margin: 20px 0; } #view .contents img[onload] { cursor: zoom-in !important; } #view .contents img::selection { background: none; } #view .contents img::-ms-selection { background: none; } #view .contents img::-webkit-select#list .listRelaTitleon { background: none; } #view .contents img::-moz-selection { background: none; } #view .btnArea { text-align: center; padding: 40px 0; font-size: 0; } #view .btnArea a { display: inline-block; padding: 12px 40px; border-radius: 12px; background: var(--colorBg); text-align: center; font-size: 16px; margin: 0 5px; font-weight: 500; min-width: 130px; } #view .btnArea a.list { background: var(--colorBg); color: #000; font-size: 18px; border-radius: 40px; padding: 14px 50px; } #view .btnArea a:hover { background-color: #eee; } #view .sub .letter { opacity: 0; transform: translateY(15px); transition: all 1000ms ease; } #view .sub .letter.space { width: 9px; } /* 관련 게시글 #view #list .width { padding: 0; } #view #list .list { position: static; } #view #list .list .cont .info .cate { background: #fff; } #view #list .list .listIn .cont .info .cate.visited { background: var(--colorBg); color: var(--colorBg); } #view #list .shareLink { background-color: #fff; } #view #list .shareLink:hover { background: #000 url('./img/free-icon-link-7046086_w.png') no-repeat center / 20px; } #view #list .thumbIn img { border: none; } */ /* ========== 이전글, 다음글 ========== */ #pageNav { padding: 40px 0 20px 0; flex-basis: 100%; } #pageNav div { border: none; } #pageNav a { display: flex; align-items: center; gap: 20px; padding: 20px 0; } #pageNav a span { flex: 0 0 200px; font-weight: 500; color: #ccc; font-size: 19px; } #pageNav a p { flex: 1 1 auto; color: #444; font-size: 19px; } #pageNav a:hover p { flex: 1 1 auto; color: #000; } #pageNav .prev a { background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" style="transform%3A rotate(180deg)%3B"%3E%3Cpath d="M16.5303 10L22.5303 16M9 16.0803H23M16.5303 22.0607L22.5303 16.0607" stroke="%23888" stroke-width="1.5"%3E%3C/path%3E%3C/svg%3E') no-repeat right center / 40px; } #pageNav .prev a:hover { background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" style="transform%3A rotate(180deg)%3B"%3E%3Cpath d="M16.5303 10L22.5303 16M9 16.0803H23M16.5303 22.0607L22.5303 16.0607" stroke="%23444" stroke-width="1.5"%3E%3C/path%3E%3C/svg%3E') no-repeat right center / 40px; } #pageNav .next a { background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none"%3E%3Cpath d="M16.5303 10L22.5303 16M9 16.0803H23M16.5303 22.0607L22.5303 16.0607" stroke="%23888" stroke-width="1.5"%3E%3C/path%3E%3C/svg%3E') no-repeat right center / 40px; } #pageNav .next a:hover { background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none"%3E%3Cpath d="M16.5303 10L22.5303 16M9 16.0803H23M16.5303 22.0607L22.5303 16.0607" stroke="%23444" stroke-width="1.5"%3E%3C/path%3E%3C/svg%3E') no-repeat right center / 40px; } /* 자동 완성 시 배경색과 글자색 유지 */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-text-fill-color: #000; /* 글자색 */ -webkit-box-shadow: 0 0 0px 1000px var(--colorBg) inset; /* 배경색을 흰색으로 덮어버림 */ transition: background-color 5000s ease-in-out 0s; /* 배경색 변화를 아주 느리게 설정 */ } /* ========== 빠른 문의 ========== */ #quickFrm { position: fixed; bottom: 35px; background: #fff; min-width: 280px; border-radius: 20px; display: inline-block; text-align: right; transition: all 250ms ease; font-size: 0; z-index: 109; box-shadow: -10px -10px 0px 0 rgba(0, 0, 0, 0.01); left: 20px; right: 20px; margin: 0 auto; max-width: 460px; } #quickFrm .in .arrow { position: absolute; z-index: 2; top: 0px; right: 0; width: 100%; height: 74px; background: none; cursor: pointer; padding: 0; display: inline-block; margin: 0; } #quickFrm .in .arrow:after { position: absolute; top: 0; bottom: 0; right: 0; margin: auto; content:''; display: inline-block; width: 60px; height: 60px; background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg transform='rotate(270,16,16)'%3E%3Cpath stroke='%23444' stroke-width='2.286' stroke-linecap='round' stroke-linejoin='round' d='M12.571 9.143L19.43 16l-6.858 6.857' fill='none' fill-rule='evenodd'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 32px; transform: rotate(180deg); } #quickFrm .in .notice { letter-spacing: -1px; font-size: 21px; color: #444; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; max-width: 480px; height: 74px; line-height: 74px; padding: 0 40px; } #quickFrm .in .notice b { font-weight: 600; } #quickFrm.on { bottom: -82px; box-shadow: -10px -10px 0px 0 rgba(0,0,0,0.01); } #quickFrm.on .in .arrow:after { transform: rotate(0); } #quickFrm .in form .inputArea { padding: 0 20px 20px 20px; display: flex; align-items: center; justify-content: center; gap: 0 12px; } #quickFrm .in form .inputArea .require { flex: 0 1 60%; } #quickFrm .in form .inputArea .submit { flex: 0 1 40%; } #quickFrm .in form input { border: 2px solid #fff; border-radius: 8px; width: 100%; padding: 0; text-indent: 15px; text-align: left; height: 56px; box-sizing: border-box; font-size: 19px; background: var(--colorBg); font-weight: 400; } #quickFrm .in form input:focus { outline: none; border: 2px solid #000; background: #fff; } #quickFrm .in form input[type="submit"] { } #quickFrm .in form input[type="submit"]:acitve { background: #fff; border-color: #fff; } #quickFrm .in form input::placeholder { color: #888; font-size: 18px; } /* #quickFrm .in form input:focus::placeholder { color: transparent; }*/ #quickFrm #submitBtn2 { display: flex; align-items: center; justify-content: center; width: 100%; background: var(--color) ; height: 54px; color: #fff; text-indent: 0; border: none; border-radius: 8px; font-size: 18px; font-weight: 500; cursor: pointer; letter-spacing: 0; } #quickFrm #submitBtn2:before { display: inline-block; width: 26px; height: 26px; background: url('./img/playdev_icon_package.svg') no-repeat 0 0 / 160px; margin: 0 4px 0 -14px; content: ''; } #quickFrm #submitBtn2:disabled { color: #aaa; background: #eee; cursor: default; } #quickFrm #submitBtn2.on { background: none; cursor: default; border-color: transparent; } #quickFrm #submitBtn2.on .text { color: #ccc; } #quickFrm #submitBtn2.on .spinner { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 24px; height: 24px; border: 3px solid var(--color); border-bottom-color: transparent; border-radius: 50%; display: inline-block; box-sizing: border-box; animation: rotation 1s linear infinite; } /* ========== 포트폴리오 게시판 ========== */ #btnTop { position: fixed; bottom: 30px; right: 30px; width: 66px; height: 66px; line-height: 66px; border-radius: 66px; background: var(--colorBg) url('./img/playdev_icon_arrow_top_b.svg') no-repeat center center / 40px; z-index: 12; cursor: pointer; } #btnTop:hover { background-color: #eee; } #btnTopShare { position: fixed; right: 30px; bottom: 115px; width: 66px; height: 66px; line-height: 66px; text-align: center; vertical-align: middle; background: #f4f4f4 url('./img/free-icon-link-7046086.png') no-repeat center / 24px; font-size: 0; border-radius: 66px; cursor: pointer; } #btnTopShare:hover { background-color: #eee; } #list .searchHIn { display: flex; align-items: center; justify-content: space-between; gap: 0 12px; } #list .selectbox { position: relative; width: 120px; user-select: none; -webkit-user-select: none; -ms-user-select: none; overflow: hidden; } #list .selectbox.active { overflow: visible; } #list .selectbox.active .options { opacity: 1; visibility: visible; margin: 0 0 12px 0; } #list .selectbox .options { margin: 12px 0 0 0; bottom: auto; top: 100%; } #list .selectbox.active .options { margin: 12px 0 0 0; } #list.program .empty .btnArea a { display: inline-block; padding: 14px 30px 14px 60px; border-radius: 12px; background: #eee url('./img/playdev_icon_arrow_left_b.svg') no-repeat 10px center / 32px; text-align: center; font-size: 16px; margin: 120px auto 0 auto; font-weight: 500; } #list.program .empty { padding: 100px 0 0 0; max-width: initial; background: none; flex: 0 0 100%; } #list.program .cont .day { font-size: 16px; color: #888; padding: 0 0 4px 0; } #list.program .cont .star { font-size: 16px; color: #888; } #list.program .thumbIn { position: relative; text-align: left; font-size: 0; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; } #list.program .thumbIn .cnt { display: flex; align-items: center; position: absolute; right: 15px; bottom: 15px; width: auto; height: 30px; padding: 0 10px; line-height: 30px; text-align: center; background: #f9f9f9; color: #ccc; font-weight: 600; font-size: 14px; z-index: 2; border-radius: 10px; display: none; } #list.program .thumbIn .cnt span { display: inline-block; width: 20px; height: 20px; background: url('./img/playdev_icon_eye_b.png') no-repeat center center / 18px; vertical-align: middle; opacity: 0.2; margin: 0 5px 0 0; } #list.program .listIn .thumbIn img { transition: all 250ms; transform: scale(1); } #list.program .listIn:hover .thumbIn img { transform: scale(1.05); } #list.program .list .cont .desc { display: none; } #list.program .list .cont .icon { display: flex; align-items: center; margin: 0; font-size: 0; flex-wrap: wrap; display: none; } #list.program .list .cont .icon div { position: static; margin: 5px 5px 0 0; font-size: 14px; letter-spacing: -1px; padding: 6px 12px; background: #fff; border-radius: 5px; width: auto; height: auto; line-height: initial; } #list.program .list .cont .icon div.new { background: #000; font-size: 13px; text-transform: uppercase; font-weight: 500; } #list.program .list .listIn .cont .icon .visited { background: var(--colorBg); color: var(--colorBg); } #list.program .list .listIn:visited .cont .icon .visited { background: #fff; color: #000; } #list.program .page { flex-basis: 100%; display: none; } #list.program .page-list table tr td.center table td * { color: #999; } #list.program .page-list table tr td.center table td font.on b { color: #fff; } #list.program .page-list table tr td.center table td font:hover { color: #fff; background: none; } #list.program .page-list table tr td.arrow span.sp.prev { background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg transform='rotate(180,16,16)'%3E%3Cpath stroke='%23999' stroke-width='2.286' stroke-linecap='round' stroke-linejoin='round' d='M12.571 9.143L19.43 16l-6.858 6.857' fill='none' fill-rule='evenodd'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 20px; } #list.program .page-list table tr td.arrow span.sp.next { background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg transform='rotate(0,16,16)'%3E%3Cpath stroke='%23999' stroke-width='2.286' stroke-linecap='round' stroke-linejoin='round' d='M12.571 9.143L19.43 16l-6.858 6.857' fill='none' fill-rule='evenodd'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 20px; } #list.program .shareLink { top: auto; right: auto; bottom: 15px; left: 15px; display: none; } #list.program .category { flex-wrap: wrap; gap: 10px; justify-content: flex-start; } /* ========== 포트폴리오 탭 ========== */ #tabs { text-align: center; } #tabs ul { display: inline-flex; flex-wrap: wrap; text-align: center; gap: 12px; justify-content: center; border-radius: 40px; } #tabs ul li a { position: relative; display: block; font-weight: 400; padding: 13px 20px; letter-spacing: -1px; margin: 0; text-transform: lowercase; border-radius: 40px; font-size: 17px; background: #f4f4f4; color: #888; min-width: 140px; border: 2px solid #f4f4f4; } #tabs ul li.qa { display: none; } #tabs ul li a small { color: #ccc; padding-left: 6px; font-size: 15px; font-weight: 600; } #tabs ul li a:hover, #tabs ul li a.on{ font-weight: 500; background: #fff; color: #222; border-color: #666; } #tabs ul li a:hover small, #tabs ul li a.on small { color: #999; } #tabs ul li.admin a { color: red; } #tabs ul li.admin a:hover, #tabs ul li.admin a.on { color: red; } #tabs ul li a .new { position: absolute; right: 16px; top: 8px; font-size: 0; width: 7px; height: 7px; background: var(--color2); border-radius: 7px; } #tabs ul li a:hover .new { background: var(--color2); } #tabs ul li a.on .new { background: var(--color2); }