/* Board List */ .board-list { padding: 160px 0 var(--section-bottom); } .board-list .section-heading { text-align: center; } .board-list .board-search { } .board-list-body { margin-top: 160px; } .board-list-head, .board-list-body { margin-right: auto; margin-left: auto; max-width: var(--inner); width: 90%; } .board-list-foot { display: flex; justify-content: flex-end; margin-top: 60px; margin-right: auto; margin-left: auto; max-width: var(--inner); width: 90%; } .board-search { text-align: center; } .board-search .search-bar { overflow: hidden; display: inline-flex; align-items: center; max-width: 530px; width: 100%; height: 60px; border: 1px solid var(--clr-primary); border-radius: 60px; } .board-search .search-bar .input { order: 2; flex: 1 1; padding: 0 24px 0 16px; width: 100%; height: 100%; border: none; color: var(--clr-primary); outline: none; } .board-search .search-bar .input::placeholder { color: var(--clr-primary); } .board-search .search-bar .button { order: 1; padding: 0; width: 64px; height: 100%; outline: none; } .board-search .search-bar .button::before { content: ''; display: block; width: 100%; height: 100%; background: url('/theme/basic/images/search-primary.svg') no-repeat center / auto 37.5%; } .board-search .search-bar .button::after { content: ''; display: block; position: absolute; top: 0; bottom: 0; right: 0; margin: auto; width: 1px; height: 30%; background: var(--clr-primary); } .board-lists .button-wrap { display: flex; align-items: center; gap: 10px; margin-top: 16px; } .board-lists .button-wrap .button { flex: 1 1; padding: 0 10px; font-size: 1.6rem; } .board-empty { text-align: center; padding: 120px 0; font-weight: 600; color: var(--clr-primary); } @media screen and (max-width: 1024px) { .board-list { padding-top: 120px; } .board-search .search-bar { height: 55px; } .board-search .search-bar .button { width: 54px; } .board-list-body { margin-top: 80px; } .board-list-foot { margin-top: 40px; } .board-empty { padding: 80px 0; } } @media screen and (max-width: 768px) { .board-list { padding-top: 80px; } .board-search .search-bar { height: 50px; } .board-list-body { margin-top: 60px; } .board-empty { padding: 60px 0; } } /* Board List - Download */ .board-list-download .board-list-body { display: flex; justify-content: center; position: relative; margin-top: 40px; padding-left: 320px; padding-right: min(16.9%, 320px); max-width: 1920px; width: auto; } .board-list-download .battery-side { z-index: 3; position: absolute; top: 0; left: 0; padding: 120px 0 0 40px; height: 100%; } .board-list-download .battery-side .sticky { overflow: hidden; position: sticky; top: 140px; left: 0; transition-property: top; transition-duration: 0.35s; transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } .board-list-download .battery-side .tab .button { justify-content: center; padding: 0 10px; width: 100%; height: 50px; line-height: 1.3; text-align: center; font-size: 1.5rem; font-weight: 600; color: var(--clr-primary); letter-spacing: -0.02em; background: #fff; border: 1px solid var(--clr-primary); border-radius: 50px; box-sizing: border-box; } .board-list-download .battery-side .tab .button[aria-selected="true"] { color: #fff; background: var(--clr-primary); } .board-list-download .battery-side .tab .button[aria-selected="true"] .icon { opacity: 1; transform: translateX(0); } /* .board-list-download .battery-contents { margin-right: auto; margin-left: auto; max-width: var(--inner); width: 90%; } */ .board-list-download .battery-contents { max-width: var(--inner); width: 100%; } .board-list-download .battery-contents .section { padding: 120px 0 0; } .board-list-download .battery-contents .heading { margin-bottom: 20px; font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: var(--clr-teal); } .board-list-download .battery-contents .button-wrap { display: flex; align-items: center; justify-content: center; gap: 30px; margin-top: 30px; } .board-list-download .board-lists { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .board-list-download .board-lists .article { border: 1px solid #8a9ab5; } .board-list-download .board-lists .thumbnail { background: #fff; border-bottom: 1px solid #8a9ab5; aspect-ratio: 0.71202; } .board-list-download .board-lists .thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; } .board-list-download .board-lists .link { display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: 60px; font-family: var(--font-display); font-weight: 600; color: var(--clr-primary); background: var(--background); } .board-list-download .board-lists .link::after { content: ''; display: inline-flex; width: 18px; height: 18px; background: url('/theme/basic/images/download-primary.svg') no-repeat center / auto 100%; } .board-list-download .board-empty { background: #f2f5f7; } .board-list-download .board-list-foot { padding-left: 320px; padding-right: min(16.9%, 320px); max-width: 1920px; width: auto; } .board-list-download .board-list-foot .button-wrap { margin-right: auto; margin-left: auto; max-width: var(--inner); width: 100%; text-align: right; } @media screen and (min-width: 1025px) { .board-list-download .battery-side .sticky { overflow-x: hidden; overflow-y: auto; width: 240px; } .board-list-download .battery-side .sticky::-webkit-scrollbar { width: 8px; } .board-list-download .battery-side .sticky::-webkit-scrollbar-thumb { background-color: #1D3641; border-radius: 8px; } .board-list-download .battery-side .sticky::-webkit-scrollbar-track { background-color: #D9D9D9; border-radius: 8px; } .board-list-download .battery-side .tab .list { display: block; transform: none !important; } .board-list-download .battery-side .tab .item { margin-bottom: 10px; } .board-list-download .battery-side .tab .item:last-child { margin-bottom: 0; } .board-list-download .battery-side .tab .button { width: 240px; } .board-list-download .battery-side .tab .button:hover { color: #fff; background: var(--clr-primary); } .board-list-download .battery-side .tab .button:hover .icon { transform: translateX(0); opacity: 1; } .board-list-download .battery-side .tab .swiper-scrollbar { display: none; } } @media screen and (max-width: 1830px) { .board-list-download .board-list-body { justify-content: flex-start; padding-right: 5%; } .board-list-download .board-list-foot { padding-right: 5%; } .board-list-download .board-list-foot .button-wrap { margin-left: 0; } } @media screen and (max-width: 1600px) { .battery { padding-left: 19%; } } @media screen and (max-width: 1024px) { .board-list-download { padding-top: 120px; } .board-list-download .flex { flex-direction: column; margin-top: 0; padding-left: 0; } .board-list-download .board-list-body { padding-left: 5%; } .board-list-download .board-list-foot { padding-left: 0; } .board-list-download .battery-side { position: absolute; top: 0; left: 0; padding: 0; width: 100%; height: 100%; pointer-events: none; } .board-list-download .battery-side .sticky { top: var(--header-height); padding: 0 5%; background: #fff; pointer-events: auto; } [data-header-hide] ~ .main .board-list-download .battery-side .sticky { top: 0; } .board-list-download .battery-side .tab { overflow: visible; padding: 10px 0; } .board-list-download .battery-side .tab .item { width: auto; } .board-list-download .battery-side .tab .button { padding-right: 1em; padding-left: 1em; height: 45px; } .board-list-download .battery-side .tab .button .icon { display: none; } .board-list-download .battery-main { margin: 30px auto 0; padding: 0 0 160px; max-width: var(--inner); width: 90%; } .board-list-download .battery-main .section { padding-top: 45px; } .board-list-download .battery-main .section-heading { font-size: 3.2rem; margin-bottom: 24px; } .board-list-download .battery-main .button-wrap { margin-bottom: 34px; } .board-list-download .battery-contents { width: 100%; } .board-list-download .battery-contents .heading { font-size: 2rem; margin-bottom: 14px; } /* .board-list-download .battery-side .tab .swiper-slide:first-child .button { padding-left: 0; } .board-list-download .battery-side .tab .swiper-slide:last-child .button { padding-right: 0; } */ /* .board-list-download .battery-side .tab .button[aria-selected="true"] { font-weight: 700; color: var(--clr-primary); background-color: transparent; border-color: transparent; } */ .board-list-download .board-lists { gap: 16px; } .board-list-download .board-lists .link { padding: 0 16px; font-size: 1.5rem; } .board-list-download .board-lists .link::after { width: 16px; height: 16px; } .board-list-download .battery-side .tab .button::before { content: none; } } @media screen and (max-width: 768px) { .board-list-download { padding-top: 80px; } .board-list-download .battery-contents .section { padding-top: 80px; } .board-list-download .battery-contents .section-heading { font-size: 2.4rem; margin-bottom: 20px; } .board-list-download .battery-contents .button-wrap { margin-bottom: 30px; } .board-list-download .battery-contents .heading { font-size: 1.8rem; } .board-list-download .board-lists { grid-template-columns: repeat(2, 1fr); } .board-list-download .board-lists .link { padding: 0 16px; font-size: 1.4rem; } .board-list-download .board-lists .thumbnail img { width: 100%; } } /* Board List - News */ .board-list-news .news-slide { margin: -16px; padding: 16px; } .board-list-news .news-slide .link { display: flex; flex-direction: row-reverse; justify-content: space-between; } .board-list-news .news-slide .side { width: 47.66667%; } .board-list-news .news-slide .contents { width: 40%; } .board-list-news .news-slide .badge { display: block; font-size: 2.8rem; font-weight: 700; color: var(--clr-teal); } .board-list-news .news-slide .title { overflow: hidden; margin: 40px 0; font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; color: var(--clr-primary); display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 4; text-decoration: underline; text-underline-offset: 0.4em; text-decoration-color: transparent; text-decoration-thickness: 2px; transition: all 0.1s ease; } .board-list-news .news-slide .date { display: block; font-weight: 700; color: #C4CED4; } .board-list-news .news-slide .thumbnail { overflow: hidden; position: relative; display: block; border-radius: 24px; box-shadow: 0 4px 12px 0 rgba(0 0 0 / 12%); } .board-list-news .news-slide .thumbnail::before { content: ''; display: block; padding-top: 75.17483%; width: 100%; } .board-list-news .news-slide .thumbnail .item { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all .65s ease; } .board-list-news .bottom-button { position: absolute; top: 0; right: 0; } .board-list-news .controls { display: flex; justify-content: flex-end; margin-right: auto; margin-left: auto; max-width: var(--inner); } .board-list-news .controls .flex { display: flex; align-items: center; justify-content: flex-end; margin-top: 16px; padding: 0 6px 0 16px; width: 47.66667%; } .board-list-news .controls .swiper-button-prev, .board-list-news .controls .swiper-button-next { position: static; margin: 0 0 0 14px; width: 34px; height: 34px; background-repeat: no-repeat; background-position: center; background-size: auto 100%; } .board-list-news .controls .swiper-button-prev { background-image: url('/theme/basic/images/chevron-left-primary.svg'); } .board-list-news .controls .swiper-button-next { background-image: url('/theme/basic/images/chevron-right-primary.svg'); } .board-list-news .controls .swiper-pagination { position: static; margin-right: auto; width: auto; text-align: left; font-size: 2rem; font-weight: 600; color: var(--clr-primary); letter-spacing: 0; } .board-list-news .controls .swiper-pagination-current { width: 30px; } .board-list-news .controls .swiper-pagination-total { margin-left: 0.25em; width: 30px; } .board-list-news .section-child { padding-top: 160px; } .board-list-news .section-child:first-child { padding-top: 0; } .board-list-news .section-child .heading { margin-bottom: 40px; font-size: 2.8rem; color: var(--clr-teal); } @media (hover: hover) and (pointer: fine) { .board-list-news .news-slide .link:hover .thumbnail .item { transform: scale(1.1); opacity: 0.9; } .board-list-news .news-slide .link:hover .title { text-decoration-color: currentColor; } } @media screen and (max-width: 1024px) { .board-list-news .news-slide .badge { font-size: 2rem; } .board-list-news .news-slide .title { font-size: 1.6rem; } .board-list-news .news-slide .date { font-size: 1.4rem; } .board-list-news .controls .swiper-pagination { font-size: 1.6rem; } .board-list-news .controls .swiper-button-prev, .board-list-news .controls .swiper-button-next { width: 30px; height: 30px; } .board-list-news .section-child { padding-top: 80px; } .board-list-news .section-child .heading { margin-bottom: 24px; font-size: 2rem; } } @media screen and (max-width: 768px) { .board-list-news .news-slide .link { flex-direction: column; } .board-list-news .news-slide .side { width: 100%; } .board-list-news .news-slide .contents { padding-top: 30px; width: 100%; } .board-list-news .news-slide .thumbnail { border-radius: 12px; } .board-list-news .news-slide .title { margin: 24px 0; } .board-list-news .controls .flex { margin-top: 30px; padding: 0; width: 100%; } .board-list-news .section-child { padding-top: 60px; } } /* Board List - Videos */ .board-list-videos .board-list-body { margin-top: 0; } .board-list-videos .board-heading { margin-bottom: 34px; } .board-list-videos .board-heading .badge { display: block; margin-bottom: 10px; font-size: 2.4rem; font-weight: 700; color: var(--clr-teal); } .board-list-videos .board-heading .title { font-family: var(--font-display); font-size: 3.6rem; font-weight: 700; color: var(--clr-primary); } .board-list-videos .lists .item { padding-top: 160px; } .board-list-videos .lists .media iframe { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1.7446; border-radius: 20px; } @media screen and (max-width: 1024px) { .board-list-videos .lists .item { padding-top: 80px; } .board-list-videos .board-heading { margin-bottom: 30px; } .board-list-videos .board-heading .badge { font-size: 2rem; margin-bottom: 8px; } .board-list-videos .board-heading .title { font-size: 2.4rem; } } @media screen and (max-width: 768px) { .board-list-videos .lists .item { padding-top: 60px; } .board-list-videos .board-heading { margin-bottom: 20px; } .board-list-videos .board-heading .badge { font-size: 1.5rem; margin-bottom: 2px; } .board-list-videos .board-heading .title { font-size: 1.8rem; } .board-list-videos .lists .media iframe { border-radius: 14px; } } /* Board View */ .board-view { padding: 240px 0 var(--section-bottom); } .board-view .article { margin-right: auto; margin-left: auto; max-width: var(--inner); width: 90%; } .board-view .article-head { padding-bottom: 60px; border-bottom: 1px solid var(--clr-dark); } .board-view .article-head .heading { line-height: 1.4; font-size: 4rem; font-weight: 600; color: var(--clr-black); } .board-view .article-head .info { margin-top: 20px; } .board-view .article-head .info .date { font-size: 1.6rem; color: #555; } .board-view .article-body { padding: 100px 0; } .board-view .article-foot { padding-top: 60px; border-top: 1px solid var(--clr-dark); } .board-view .function-buttons { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 30px; } .board-view .function-buttons .button { font-size: 1.6rem; font-weight: 500; } .board-view .attachments { margin-top: 60px; margin-bottom: -100px; } .board-view .attachments .file-lists { border-top: 1px solid var(--clr-dark); } .board-view .attachments .file-lists .item { padding: 30px 0; border-bottom: 1px solid var(--border); } .board-view .attachments .file-lists .item:last-child { border-bottom: none; } .board-view .attachments .file-lists .link { font-size: 1.5rem; color: var(--clr-dark); } .board-view .attachments .file-lists .info { display: block; margin-top: 4px; } .board-view .attachments .file-lists .name { font-weight: 600; } .board-view .attachments .file-lists .name::before { content: ''; display: inline-flex; margin-right: 4px; width: 16px; height: 16px; background: url('/theme/basic/images/download-primary-2.svg') no-repeat center / auto 100%; transform: translateY(2px); } .board-view .attachments .file-lists .size { color: #555; } .board-view .article-navigation .lists { display: flex; align-items: center; justify-content: space-between; } .board-view .article-navigation .lists .item { flex: 1; max-width: 250px; min-width: 0; } .board-view .article-navigation .lists .item-next { text-align: right; } .board-view .article-navigation .lists .link { display: block; width: 100%; } .board-view .article-navigation .lists .title { display: inline-flex; align-items: center; font-weight: 600; color: var(--clr-dark); } .board-view .article-navigation .lists .item-prev .title::before, .board-view .article-navigation .lists .item-next .title::after { content: ''; display: inline-flex; width: 24px; height: 24px; background-repeat: no-repeat; background-position: center; background-size: auto 100%; transition: all .35s ease; } .board-view .article-navigation .lists .item-prev .title::before { margin-right: 10px; background-image: url('/theme/basic/images/chevron-left.svg'); } .board-view .article-navigation .lists .item-next .title::after { margin-left: 10px; background-image: url('/theme/basic/images/chevron-right.svg'); } .board-view .article-navigation .lists .item-prev .text { margin-left: 34px; padding-right: 34px; } .board-view .article-navigation .lists .item-next .text { margin-left: -34px; padding-left: 34px; } .board-view .article-navigation .lists .text { overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; width: 100%; } .board-view .article-navigation .actions { display: flex; align-items: center; justify-content: center; margin-top: 30px; } .board-view .article-navigation .actions .button { padding: 0; width: 64px; height: 64px; border-radius: 50%; } .board-view .article-navigation .actions .button::before { content: ''; display: block; width: 100%; height: 100%; background: url('/theme/basic/images/list-light.svg') no-repeat center / auto 28%; } @media (hover: hover) and (pointer: fine) { .board-view .article-navigation .lists .link:hover .text { text-decoration: underline; text-underline-offset: 0.25em; } .board-view .attachments .file-lists .link:hover .name { text-decoration: underline; text-underline-offset: 0.25em; } .board-view .attachments .file-lists .link:hover .name, .board-view .attachments .file-lists .link:hover .size { color: var(--clr-primary); } } @media screen and (max-width: 1024px) { .board-view { padding-top: 180px; } } @media screen and (max-width: 768px) { .board-view { padding-top: 120px; } } /* */ #bo_v_img a.view_image { display: inline !important; } #bo_v_img img { display: inline !important; pointer-events: auto !important; } /* Board: Gallery */ #bo_gall { padding: 0 100px 200px; } #bo_gall .no-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('/theme/basic/images/no-image.jpg') no-repeat center / cover; border: 1px solid var(--border); } #bo_gall li.empty_list { padding: 100px 25px !important; width: 100%; } #bo_gall legend { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } #bo_gall .board_wr { border-top: none; border: none; } #bo_gall #bo_cate { border-bottom: none; } #bo_gall #bo_cate li { position: relative; padding: 0 30px; } #bo_gall #bo_cate li:first-child { padding-left: 0; } #bo_gall #bo_cate li:last-child::after { content: none; } #bo_gall #bo_cate li::after { content: ''; position: absolute; top: 14px; right: 0; width: 1px; height: 12px; background: var(--border); } #bo_gall #bo_cate a { font-size: 2rem; font-weight: 600; color: #aaaaaa; } #bo_gall #bo_cate #bo_cate_on { color: #111111; } #bo_gall #bo_cate #bo_cate_on::before { content: none; } #bo_gall #bo_cate_select { display: none; width: 100%; border: 1px solid var(--clr-dark); } #bo_gall .search { display: flex; max-width: 600px; border-bottom: 2px solid #000; } #bo_gall .search .search-bar { display: flex; } #bo_gall .search select, #bo_gall .search input { height: 60px; font-size: 1.6rem; font-weight: 500; color: #333; border: none; } #bo_gall .search select { width: 200px; } #bo_gall .search input { width: 360px; } #bo_gall .search button { display: inline-flex; align-items: center; width: 30px; } #bo_gall .search button i { display: inline-flex; width: 30px; height: 30px; } #bo_gall .search button i::before{ content: ''; display: block; width: 100%; height: 100%; background: url('/theme/basic/images/search.svg') no-repeat center / 100% auto; } #bo_gall .board-list-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 40px; } #bo_gall .lists { display: flex; flex-wrap: wrap; margin: -30px -25px; } #bo_gall .lists .item { padding: 30px 25px; width: 33.33333%; } #bo_gall .lists .thumbnail { overflow: hidden; position: relative; border: 1px solid var(--border); } #bo_gall .lists .thumbnail::before { content: ''; display: block; padding-top: 66.66666%; width: 100%; height: 0; } #bo_gall .lists .thumbnail img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform ease .45s; } #bo_gall .lists .mask { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); opacity: 0; transition: opacity ease .35s; } #bo_gall .lists .context { padding: 30px 0 0; } #bo_gall .lists .badge { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--clr-primary); } #bo_gall .lists .title { overflow: hidden; margin: 10px 0 20px; line-height: 1.3; font-size: 2rem; font-weight: 500; color: #111; white-space: nowrap; text-overflow: ellipsis; } #bo_gall .lists .datetime { line-height: 1.3; font-family: var(--font-display); font-size: 1.6rem; color: #777; } #bo_gall .bottomBtn { display: flex; align-items: center; justify-content: flex-end; margin-top: 60px; } @media screen and (max-width: 1024px) { #bo_gall { padding: 0 5% 120px; } #bo_gall #bo_cate { margin-bottom: 30px; } #bo_gall #bo_cate a { font-size: 1.8rem; } #bo_gall #bo_cate ul { display: none; } #bo_gall #bo_cate li { padding: 0 20px; } #bo_gall #bo_cate_select { display: block; } #bo_cate ul { display: flex; align-items: center; justify-content: center; } #bo_gall .search { max-width: none; } #bo_gall .search .search-bar { flex: 1 1 auto; } #bo_gall .search input { width: 100%; } #bo_gall .board-list-head { display: block; margin-bottom: 30px; } #bo_gall .lists { margin: -24px -16px; } #bo_gall .lists .item { padding: 24px 16px; } #bo_gall .lists .context { padding: 16px 0 0; } #bo_gall .lists .badge { font-size: 1.5rem; } #bo_gall .lists .title { font-size: 1.8rem; margin: 6px 0 10px; } #bo_gall .lists .datetime { font-size: 1.4rem; } #bo_gall li.empty_list { padding: 60px 25px !important; } } @media screen and (max-width: 768px) { #bo_gall { padding-bottom: 80px; } #bo_gall .board_wr { margin-top: 0; } #bo_gall #bo_cate li { padding: 0 10px; } #bo_gall #bo_cate a { font-size: 1.6rem; } #bo_gall .board-list-head { display: block; margin-bottom: 20px; } #bo_gall .lists { margin: -16px -10px; } #bo_gall .lists .item { padding: 16px 10px; width: 50%; } #bo_gall .lists .context { padding: 10px 0 0; } #bo_gall .lists .badge { font-size: 1.4rem; } #bo_gall .lists .title { font-size: 1.6rem; margin: 4px 0 8px; } #bo_gall .lists .datetime { font-size: 1.3rem; } #bo_gall .search select, #bo_gall .search input { font-size: 1.5rem; height: 50px; } } @media screen and (max-width: 600px) { #bo_gall .search { display: block; border-bottom: none; border: 1px solid var(--border); } #bo_gall .search select { width: 100%; } #bo_gall .search button { width: 54px; justify-content: center; } #bo_gall .search button i { width: 24px; height: 24px; } #bo_gall .search .search-bar { position: relative; } #bo_gall .search .search-bar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; margin: auto; width: calc(100% - 24px); height: 1px; background: var(--border); } } #bo_v { padding: 0 100px 200px !important; border-bottom: none !important; } #bo_v_title { padding-top: 0 !important; } #bo_v header { margin-top: 200px; margin-right: auto; margin-left: auto; padding: 0 0 40px; max-width: 1200px; width: 100%; border-bottom: 2px solid #111; } #bo_v .bo_v_cate { display: block; margin: 0; line-height: 1.3; font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--clr-primary); } #bo_v .bo_v_tit { margin: 12px 0 20px; line-height: 1.3; font-size: 4rem; font-weight: 600; color: #111; } #bo_v .info { display: flex; font-size: 1.6rem; color: #777; } #bo_v .info .col { display: flex; position: relative; padding: 0 30px; } #bo_v .info .col:first-child { padding-left: 0; } #bo_v .info .col:last-child { padding-right: 0; } #bo_v .info .col:last-child::after { content: none; } #bo_v .info .col::after { content: ''; position: absolute; top: 6px; right: 0; width: 1px; height: 12px; background: #ddd; } #bo_v .info dt { padding-right: 10px; font-weight: 600; } #bo_v .info dd { font-family: var(--font-display); } #bo_v .func-buttons { display: flex; margin-top: 30px; } #bo_v .func-buttons .button { margin-right: 5px; padding: 0 20px; height: 40px; font-size: 1.6rem; font-weight: 400; } #bo_v .func-buttons .button::before { content: none; } #bo_v #bo_v_atc { margin: 0 auto; padding: 100px 0; max-width: 1200px; width: 100%; } #bo_v_bottom { display: flex; justify-content: center; position: relative; margin: 0 auto; padding-top: 50px; max-width: 1200px; width: 100%; border-top: 1px solid var(--border); } #bo_v_bottom > div:nth-child(1) { position: absolute; top: 48px; left: 0; } #bo_v_bottom > div:nth-child(2) { position: absolute; top: 48px; right: 0; } #bo_v_bottom a { display: inline-flex; position: relative; padding: 0 44px; font-size: 18px; font-weight: 400; color: #111; } #bo_v_bottom a::before { content: ''; position: absolute; top: 0; bottom: 0; margin: auto; width: 14px; height: 14px; background: url('/theme/basic/images/chevron-right.svg') no-repeat center / auto 100%; } #bo_v_bottom a.btn_b03 { order: 2; position: static; padding: 0 0 4px; font-size: 1.6rem; font-weight: 600; background: none; border: none; background-image: linear-gradient(transparent calc(100% - 1px), #111 1px); background-size: 0% 100%; background-position: 0px -5px; background-repeat: no-repeat; transition: background-size .3s; } #bo_v_bottom a.btn_b03::before { content: none; } #bo_v_bottom div:nth-child(1) a::before { left: 0; transform: rotate(180deg); } #bo_v_bottom div:nth-child(2) a::before { right: 0; } @media (hover: hover) and (pointer: fine) { #bo_gall .lists .block:hover .thumbnail img { transform: scale(1.1); } #bo_gall .lists .block:hover .mask { opacity: 1; } #bo_gall .lists .block:hover .mask .link-hover .icon::before { background-position-x: 50px; } #bo_v_bottom a.btn_b03:hover { background-size: 100% 100%; } } @media screen and (max-width: 1024px) { #bo_v { padding: 0 5% 120px !important; } #bo_v_bottom { height: 50px; justify-content: center; } #bo_v_bottom a { padding: 0 30px; font-size: 16px; } /* #bo_v_bottom a.btn_b03 { width: 50px; height: 50px; } */ #bo_v_bottom > div:nth-child(1) { top: 40px; } #bo_v_bottom > div:nth-child(2) { top: 40px; } #bo_v header { margin-top: 140px; padding-bottom: 30px; } #bo_v .bo_v_cate { font-size: 1.4rem; } #bo_v .bo_v_tit { margin: 8px 0 10px; font-size: 2.4rem; } #bo_v .info { font-size: 1.4rem; } #bo_v .info .col { padding: 0 20px; } #bo_v .info .col::after { top: 4px; } #bo_v #bo_v_atc { padding: 40px 0; } #bo_v_con { font-size: 1.5rem !important; } #bo_v_bottom { padding-top: 40px; } } @media screen and (max-width: 768px) { #bo_v { padding: 0 5% 80px !important; } #bo_v_bottom > div { display: none; } #bo_v header { margin-top: 120px; padding-bottom: 20px; } #bo_v .bo_v_cate { font-size: 1.3rem; } #bo_v .bo_v_tit { margin: 4px 0 10px; font-size: 1.8rem; } #bo_v .info { font-size: 1.3rem; } #bo_v .info .col { padding: 0 16px; } #bo_v #bo_v_atc { padding: 30px 0; } #bo_v_con { font-size: 1.4rem !important; } #bo_v_bottom { padding-top: 30px; } } /* Board: Certificate */ #bo_gall.bo-certificate .board-list-head { justify-content: center; } #bo_gall.bo-certificate .lists { margin: -30px -20px; } #bo_gall.bo-certificate .lists .item { padding: 30px 20px; } #bo_gall.bo-certificate .lists .thumbnail { padding: 30px; border: 1px solid var(--border); } #bo_gall.bo-certificate .lists .thumbnail::before { padding-top: 147.05882%; } #bo_gall.bo-certificate .lists .thumbnail img { top: 30px; left: 30px; width: calc(100% - 60px); height: calc(100% - 60px); } #bo_gall.bo-certificate .lists .context { padding: 20px 0 0; } #bo_gall.bo-certificate .lists .title { position: relative; margin: 0; padding-right: 60px; overflow: visible; white-space: normal; } #bo_gall.bo-certificate .lists .title .icon { position: absolute; top: -4px; right: 0; width: 30px; height: 30px; } #bo_gall.bo-certificate .lists .title .icon::before { background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 15L14.5 24L5 15' stroke='black' stroke-width='3'/%3E%3Crect x='16' y='5' width='19' height='3' transform='rotate(90 16 5)' fill='black'/%3E%3C/svg%3E%0A"); } @media (hover: hover) and (pointer: fine) { #bo_gall.bo-certificate .lists .block:hover .thumbnail img { transform: none; } #bo_gall.bo-certificate .lists .block:hover .title .icon::before { background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 15L14.5 24L5 15' stroke='%230081bd' stroke-width='3'/%3E%3Crect x='16' y='5' width='19' height='3' transform='rotate(90 16 5)' fill='%230081bd'/%3E%3C/svg%3E%0A"); } } @media screen and (max-width: 1024px) { #bo_gall.bo-certificate .lists .thumbnail { padding: 24px; } #bo_gall.bo-certificate .lists .title .icon { top: 0; width: 24px; height: 24px; } #bo_gall.bo-certificate .lists .thumbnail img { top: 24px; left: 24px; width: calc(100% - 48px); height: calc(100% - 48px); } } @media screen and (max-width: 768px) { #bo_gall.bo-certificate .lists .thumbnail { padding: 16px; } #bo_gall.bo-certificate .lists .title { padding-right: 40px; } #bo_gall.bo-certificate .lists .thumbnail img { top: 16px; left: 16px; width: calc(100% - 32px); height: calc(100% - 32px); } } /* Board: Perfomance */ #bo_v.bo-perfomance #bo_v_atc { padding-top: 0; max-width: none; } #bo_v.bo-perfomance #bo_v_title { padding-top: 0; } #bo_v.bo-perfomance { display: flex; justify-content: space-between; margin: 170px 0 0; border: none; } #bo_v.bo-perfomance .side { position: relative; width: 24.4186%; } #bo_v.bo-perfomance .contents { width: 69.9%; } #bo_v.bo-perfomance .side-wrap { position: sticky; top: 120px; left: 0; width: 100%; } #bo_v.bo-perfomance header { margin: 0; padding-bottom: 0; border-bottom: none; } #bo_v.bo-perfomance .data { display: table; margin-top: 90px; font-size: 1.6rem; color: #666; } #bo_v.bo-perfomance .data .row { display: table-row; } #bo_v.bo-perfomance .data .dt { display: table-cell; padding: 8px 18px 8px 0; font-weight: 500; } #bo_v.bo-perfomance .data .dd { display: table-cell; padding: 8px 0; } #bo_v.bo-perfomance .data .icon { margin-right: 10px; width: 18px; height: 18px; } #bo_v.bo-perfomance .data .icon-edit::before { background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.2715 1.5L15.9987 4.22727' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.2266 3.54492L13.9538 6.27219' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.72656 13.7725L5.09016 9.68164' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.81736 12.4102L3.72656 13.7738' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.2714 1.5L5.08984 9.68182' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 4.22656L7.81836 12.4084' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1 15.1367C1 15.8908 1.60953 16.5004 2.3636 16.5004' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.0003 15.1367C16.0003 15.8908 15.3908 16.5004 14.6367 16.5004' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1 2.86364C1 2.10955 1.60953 1.5 2.3636 1.5' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.6357 16.5H2.36328' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1 2.86328V15.136' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 15.1365V8.31836' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.18127 1.5H2.36328' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); } #bo_v.bo-perfomance .data .icon-cube::before { background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.91016L8.81797 8.3191' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.6363 4.91016L8.81836 8.3191' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 4.90894L8.81797 1.5' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.6363 4.90894L8.81836 1.5' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 4.91016V13.0916' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.6367 4.91016V13.0916' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.81836 8.31836V16.4998' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 13.0898L8.81797 16.4988' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.6363 13.0898L8.81836 16.4988' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); } #bo_v.bo-perfomance .data .icon-user::before { background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_6880_2599)'%3E%3Cpath d='M9 17.5C13.4183 17.5 17 13.9183 17 9.5C17 5.08172 13.4183 1.5 9 1.5C4.58172 1.5 1 5.08172 1 9.5C1 13.9183 4.58172 17.5 9 17.5Z' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.1689 10.7088C11.6402 10.0635 12.3099 8.34761 11.6646 6.87624C11.0194 5.40486 9.30349 4.73518 7.83212 5.38046C6.36075 6.02573 5.69107 7.74161 6.33634 9.21298C6.98162 10.6844 8.6975 11.354 10.1689 10.7088Z' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.9082 14.5918V15.6725' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.0918 14.5918V15.6725' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.4551 10.9551C12.4638 10.9551 14.0914 12.5827 14.0914 14.5914' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.9082 14.5914C3.9082 12.5827 5.53584 10.9551 7.54457 10.9551' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.54492 10.9551H10.454' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_6880_2599'%3E%3Crect width='18' height='18' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); } #bo_v.bo-perfomance .data .icon-pin::before { background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_6880_2612)'%3E%3Cpath d='M8.54545 17.5C4.90909 14.5909 2 11.66 2 8.04545C2 4.43091 4.93091 1.5 8.54545 1.5C12.16 1.5 15.0909 4.43091 15.0909 8.04545C15.0909 11.66 12.1818 14.5909 8.54545 17.5Z' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.54581 10.9549C10.1525 10.9549 11.4549 9.65246 11.4549 8.04581C11.4549 6.43916 10.1525 5.13672 8.54581 5.13672C6.93916 5.13672 5.63672 6.43916 5.63672 8.04581C5.63672 9.65246 6.93916 10.9549 8.54581 10.9549Z' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_6880_2612'%3E%3Crect width='18' height='18' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); } #bo_v.bo-perfomance .section-child { padding-bottom: 100px; } #bo_v.bo-perfomance .section-child:last-child { padding-bottom: 0; } #bo_v.bo-perfomance .section-child .thumbnail { position: relative; } #bo_v.bo-perfomance .section-child .thumbnail::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid var(--border); } #bo_v.bo-perfomance .section-child .thumbnail img { display: block; width: 100%; } #bo_v.bo-perfomance .section-child .image { position: relative; } #bo_v.bo-perfomance .section-child .image img { width: auto !important; } #bo_v.bo-perfomance .grid { display: grid; gap: 10px; } #bo_v.bo-perfomance .grid-2 { grid-template-columns: 1fr 1fr; } #bo_v.bo-perfomance .grid-3 { grid-template-columns: 1fr 1fr 1fr; } #bo_v.bo-perfomance .grid-t { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; } #bo_v.bo-perfomance .grid-t .item:nth-child(1) { grid-row: span 2; grid-column: 1; } #bo_v.bo-perfomance .flex { display: flex; align-items: center; justify-content: space-between; } #bo_v.bo-perfomance .flex .side { width: 45.83333%; } #bo_v.bo-perfomance .flex .contents { width: 45.83333%; } #bo_v.bo-perfomance .flex-reverse { flex-direction: row-reverse; } #bo_v.bo-perfomance .column { display: flex; justify-content: space-between; margin: -15px; } #bo_v.bo-perfomance .column .item { flex: 1 1; padding: 15px; } @media screen and (max-width: 1024px) { #bo_v.bo-perfomance { display: block; margin-top: 140px; } #bo_v.bo-perfomance .side { position: static; width: 100%; } #bo_v.bo-perfomance .side-wrap { position: static; margin-bottom: 30px; } #bo_v.bo-perfomance .contents { width: 100%; } #bo_v.bo-perfomance .data { margin-top: 30px; font-size: 1.5rem; } #bo_v.bo-perfomance .data .dt { padding: 6px 18px 6px 0; } #bo_v.bo-perfomance .data .dd { padding: 6px 0; } #bo_v.bo-perfomance .data .icon { margin-right: 8px; width: 16px; height: 16px; } #bo_v.bo-perfomance .section-child { padding-bottom: 80px; } } @media screen and (max-width: 768px) { #bo_v.bo-perfomance { margin-top: 120px; } #bo_v.bo-perfomance .section-child { padding-bottom: 60px; } #bo_v.bo-perfomance .flex { display: block; } #bo_v.bo-perfomance .flex .side { width: 100%; } #bo_v.bo-perfomance .flex .contents { margin-top: 20px; width: 100%; } #bo_v.bo-perfomance .grid { gap: 6px; } #bo_v.bo-perfomance .data { margin-top: 20px; font-size: 1.4rem; } #bo_v.bo-perfomance .data .dt { padding: 4px 18px 4px 0; } #bo_v.bo-perfomance .data .dd { padding: 4px 0; } #bo_v.bo-perfomance .data .icon { margin-right: 6px; } } @media screen and (max-width: 600px) { #bo_v.bo-perfomance .section-child { padding-bottom: 46px; } #bo_v.bo-perfomance .column { display: block; } #bo_v.bo-perfomance .data { margin-top: 16px; font-size: 1.3rem; } } /* Basic: 작성 */ #bo_w { padding-top: 140px; padding-bottom: 180px; padding-right: 0; padding-left: 0; position: relative; max-width: 1500px; width: 90%; margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto; } #bo_w .btn_top.write_div { display: flex; align-items: center; justify-content: flex-end; margin-top: 50px; } #bo_w .btn_b01, #bo_w .btn_submit { display: inline-flex; align-items: center; justify-content: center; margin: 0 2px; min-width: 120px; height: 50px; line-height: 50px; text-align: center; font-weight: 600; border: 0; outline: none; background: #f4f4f4; } #bo_w .btn_submit { background: var(--clr-primary); } /*글쓰기*/ #bo_w { margin-right: auto; margin-left: auto; max-width: var(--inner); width: 90%; } #bo_w .cke_sc {display: none;} #bo_w .form_01{margin:10px 0} #bo_w .bo_w_select select{border:1px solid #3497d9;background:#fff;width:100%} #bo_w .bo_w_link { position: relative; } #bo_w .bo_w_link label{position:absolute;top:1px;left:1px;border-radius:3px 0 0 3px;height:38px;line-height:38px;width:40px;text-align:center} #bo_w .bo_w_link .frm_input{padding-left:50px} #bo_w .bo_w_flie .lb_icon{position:absolute;top:2px !important;left:0px;border-radius:3px 0 0 3px;height:38px;line-height:38px;width:40px;text-align:center} #bo_w .bo_w_flie .frm_file{padding-left:50px;padding-top: 0;padding-bottom: 0;padding-right: 0;height: auto;width: 100%;background: transparent;border: none;} #bo_w .bo_w_flie .file_wr{position: relative;border:1px solid #ccc;background:#fff;color:#000;vertical-align:middle;border-radius:3px;padding:5px;height:44px !important;margin:0} #bo_w .bo_w_flie .frm_input{margin:5px 0 0 } .write_div{text-align:right;margin:10px 0} @media (max-width: 969px){ #bo_w .form_01 {margin:10px} .write_div{text-align:right;margin:10px} }