/*=========================================================== Common Class Style ===========================================================*/
section {position: relative;}
video {width: 100%; height: 100%; object-fit: cover;}
legend {border: 0;}

canvas {position: fixed;}
picture {display: inline-flex;}

.thumb img {width: 100%;}
.thumb.cover img {width: 100%; height: 100%; object-fit: cover;}

a.btn-item {display: grid; align-items: center; justify-content: center; border: 1px solid #fff; color: #fff; border-radius: 30px; padding: 17px; width: 100%; max-width: 150px; line-height: var(--line-height-tiny); transition: all .4s cubic-bezier(0.84, 0, 0.16, 1);}
a.btn-item span {font-size: 14px; font-weight: 500;}
a.btn-item:hover {background: #fff; color: #000;}
a.btn-item.black {border-color: #000; color: #000;}
a.btn-item.black:hover {background: #000; color: #fff;}

.marquee {width:100%; padding: 0; margin:0; position: relative; z-index: 2; overflow: hidden;}
.marquee .marquee-inner {text-transform: uppercase; white-space: nowrap; margin:0; font-size: 180px; font-weight: 900; display: flex; gap: 100px; line-height: var(--line-height-tiny);}
.marquee .marquee-inner:nth-child(1) {margin-left: 400px;}
.marquee .marquee-inner span .thumb {width: 140px; display: inline-flex; align-items: center; justify-content: center; margin: 0 20px;}
.marquee .marquee-inner .marquee-inner-box {display: flex; gap: var(--gap);}
.marquee .marquee-inner#marquee-1 .marquee-inner-box {transform: translateX(-5%);}
.marquee .marquee-inner#marquee-2 {flex-direction: row-reverse;}

#common-point-bar {background: var(--point-color); color: #fff;}
#common-point-bar .cont-container {display: grid; grid-template-columns: repeat(2, auto); align-items: center; justify-content: space-between; padding: 70px 0; line-height: var(--line-height-tiny); cursor: pointer;}
#common-point-bar .cont-container > p {font-size: 30px;}
#common-point-bar .cont-container h3 {font-size: 80px; display: flex; align-items: center; gap: 10px;}
#common-point-bar .cont-container h3 p {transition: all .3s; transform: translateX(-5%);}
#common-point-bar .cont-container h3 .thumb {width: 90px; display: grid; transition: all .3s;}
#common-point-bar.active .cont-container h3 p {transform: translateX(-2%);}
#common-point-bar.active .cont-container h3 .thumb {transform: rotate(25deg);}

#container {overflow: hidden; position: fixed; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0;}
#scroll-container {position: absolute; width: 100%; overflow: hidden; z-index: 10; display: flex; justify-content: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform-style: preserve-3d;}
#content {width: 100%; position: relative;}
#content > section {z-index: 2;}
#content > #contents {background: #fff;}

.common-page {position: relative; line-height: var(--line-height-tiny); width: 100%; background: #fff; display: flex; padding: 350px 0 0;}
.common-page .cont-container {display: flex; justify-content: space-between;}
.common-page .cont-container .text {display: grid; grid-template-columns: 1fr; gap: var(--gap);}
.common-page .cont-container .visual {display: flex; flex-direction: column; align-self: end; gap: 20px;}
.common-page .cont-container .visual .thumb:nth-child(1) {width: 320px;}
.common-page .cont-container .visual .thumb:nth-child(2) {width: 170px; align-self: end;}

.common-cont {line-height: var(--line-height-tiny); margin: 200px 0 0;}
.common-cont .cont-container .text {display: grid; grid-template-columns: 1fr; gap: var(--gap);}

.landing-menu {font-size: 50px; font-weight: 900; margin-bottom: 100px; color: var(--point-color);}
.landing-title {font-size: 150px; font-weight: 900; margin-bottom: 50px;}
.landing-subtitle {font-size: 36px; line-height: var(--line-height);}
.landing-desc {font-size: 20px; font-weight: 600; line-height: var(--line-height);}

/* DATA CURSOR */
[data-cursor] {position: relative; transition: none; cursor: none;}
[data-cursor]::after {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%;}
[data-cursor][data-cursor-direction=horizontal]::after {width: 200%; height: 150%;}
[data-cursor][data-cursor-direction=vertical]::after {width: 150%; height: 200%;}
[data-cursor][data-cursor-direction=square]::after {width: 130%; height: 130%;}

/* DATA RIPPLE */
#root #container [data-cursor-style^=ripple] {box-shadow: none; border-radius: 4rem; padding: 1.5rem 2.5rem; line-height: 1; height: auto; overflow: hidden;}
#root #container [data-cursor-style^=ripple-large] {padding: 2rem 2.5rem;}
#root #container [data-cursor-style^=ripple]::before {content: none;}
#root #container [data-cursor-style^=ripple] .title {display: block; position: relative; z-index: 2; transition: color .3s;}
#root #container [data-cursor-style^=ripple] .ripple {display: block; border-radius: inherit; overflow: hidden; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;}
#root #container [data-cursor-style^=ripple] .ripple span {display: block; width: 100%; height: 100%; transform: translateY(105%); border-radius: 50%; background: var(--point-color); transition: transform 0.3s cubic-bezier(0.785,  0.135,  0.150,  0.860), border-radius 0.3s cubic-bezier(0.785,  0.135,  0.150,  0.860);}
#root #container [data-cursor-style^=ripple].current .title,
#root #container [data-cursor-style^=ripple]:hover .title {color: #fff;}
#root #container [data-cursor-style^=ripple].current .ripple span,
#root #container [data-cursor-style^=ripple]:hover .ripple span {transform: translateY(0); border-radius: 0; transition-duration: 0s; animation: ripple 0.3s cubic-bezier(0.785,  0.135,  0.150,  0.860);}
@keyframes ripple {
    0% {transform: translateY(-105%) translateZ(0); border-radius: 100%;}
    100% {transform: translateY(0) translateZ(0); border-radius: 0;}
}

@media (max-width:1779.98px){
    #common-point-bar .cont-container {padding: 70px 20px;}
}
@media (max-width:1599.98px){
    .landing-title {font-size: 120px;}
}
@media (max-width:1399.98px){
    .landing-subtitle {font-size: 28px;}
    .landing-desc {font-size: 18px;}

    .common-cont .landing-title {font-size: 60px; margin-bottom: 30px;}
    .common-cont .landing-subtitle {font-size: 18px;}
    .common-cont .landing-desc {font-size: 16px;}
}
@media (max-width:1299.98px){
    .landing-title {font-size: 100px;}
}
@media (max-width:1023.98px){
    .marquee .marquee-inner {font-size: 80px;}
    .marquee .marquee-inner:nth-child(1) {margin-left: -400px;}
    .marquee .marquee-inner span .thumb {width: 64px; margin: 0 10px;}

    #common-point-bar .cont-container {grid-template-columns: 1fr; gap: 10px; padding: 50px 20px 30px;}
    #common-point-bar .cont-container > p {font-size: 18px;}
    #common-point-bar .cont-container h3 {font-size: 36px; justify-self: end;}
    #common-point-bar .cont-container h3 .thumb {width: 70px;}

    .common-page {padding: 0;}
    .common-page .cont-container {display: grid; grid-template-columns: 1fr; grid-auto-rows: max-content; padding: 120px 20px 0; gap: var(--gap);}
    .common-page .cont-container .text {gap: var(--gap-m);}
    .common-page .cont-container .visual {align-items: end;}
    .common-page .cont-container .visual .thumb:nth-child(1) {width: 150px;}
    .common-page .cont-container .visual .thumb:nth-child(2) {width: 100px; margin-right: 10px;}

    .common-cont {margin: var(--cont-margin-m);}
    .common-cont .cont-container .text {gap: var(--gap-m);}

    .landing-menu {font-size: 36px; margin: 0;}
    .landing-title {font-size: 50px; margin-bottom: 30px;}
    .landing-subtitle {font-size: 16px;}
    .landing-desc {font-size: 14px;}

    .common-cont .landing-title {font-size: 40px;}

    #root #container [data-cursor-style=ripple] {padding: 1rem 1.5rem;}
    
    #root #container [data-cursor-style^=ripple].ts-btn .title,
    #root #container [data-cursor-style^=ripple]#btn-submit .title {transition: none;}
    #root #container [data-cursor-style^=ripple].ts-btn .ripple span,
    #root #container [data-cursor-style^=ripple]#btn-submit .ripple span {transition: none;}
    #root #container [data-cursor-style^=ripple].ts-btn:hover .ripple span,
    #root #container [data-cursor-style^=ripple]#btn-submit:hover .ripple span {animation: none;}
}
/*=========================================================== Main Page Style ===========================================================*/
#intro {width: 100%; z-index: 1; background: #f6f6f6;}
#intro .visual {position: fixed; z-index: 1; width: 100%; height: 100vh;}
#intro .visual .grid {display: grid; align-items: center; width: 100%; height: 100%; max-width: 1300px; margin: 0 auto;}
#intro .visual .grid .thumb {width: 400px; justify-self: end;}
#intro .text {position: relative; width: 100%; max-width: 1300px; padding: 350px 0 200px; margin: 0 auto; z-index: 2; line-height: var(--line-height-tiny); display: grid;}
#intro .text .title {font-size: 130px; font-weight: 900; line-height: var(--line-height); margin: 0 0 100px 0;}
#intro .text .desc p {font-size: 20px; line-height: var(--line-height);}

.main-cont-common {padding: 150px 0 0; line-height: var(--line-height-tiny); overflow: hidden;}
.main-cont-common .cont-container {display: grid; gap: var(--gap);}
.main-cont-common .cont-container h3 {font-size: 50px; font-weight: 900; color: #000;}

#main-cont-01 .cont-container ul {display: grid; grid-template-columns: 1fr;}
#main-cont-01 .cont-container ul li {border-top: 1px solid #000; padding: 50px 0; display: grid; gap: 30px; /*z-index: 2;*/}
#main-cont-01 .cont-container ul li strong {font-size: 30px; font-weight: 900;}
#main-cont-01 .cont-container ul li strong span {color: var(--point-color);}
#main-cont-01 .cont-container ul li p {font-size: 24px; font-weight: 500;}
#main-cont-01 .cont-container ul li:last-child {border-bottom: 1px solid #000;}
/* #main-cont-01 .cont-container ul li.li-bar {position: fixed; left: 0; background: var(--point-color); width: 100%; z-index: 1; transition: transform .3s;} */

#main-cont-02 .cont-container ul {display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;}
#main-cont-02 .cont-container ul li {border-radius: 20px; overflow: hidden; position: relative; width: 100%; aspect-ratio: 1/1;}

#main-cont-03 {padding-bottom: 150px; display: grid; grid-template-columns: 1fr; gap: var(--gap);}
#main-cont-03 .marquee-auto {width:100%; padding: 0; margin:0; position: relative; z-index: 2; overflow: hidden;}
#main-cont-03 .marquee-auto .marquee-inner {display: grid; grid-auto-flow: row; gap: var(--gap);}
#main-cont-03 .marquee-auto .marquee-inner .marquee-inner-box {display: grid; grid-auto-flow: column; gap: var(--gap); position: relative;}
#main-cont-03 .marquee-auto .marquee-inner .marquee-inner-box .marquee-content {display: grid; grid-auto-flow: column; gap: var(--gap);}
#main-cont-03 .marquee-auto .marquee-inner .marquee-inner-box .marquee-content .thumb {width: 250px; aspect-ratio: 1/1; background: #f8f8f8; border-radius: 20px; overflow: hidden;}
#main-cont-03 .marquee-auto .marquee-inner .marquee-inner-box .marquee-content .thumb img {width: 100%; height: 100%; transition: transform .3s;}
#main-cont-03 .marquee-auto .marquee-inner .marquee-inner-box .marquee-content .thumb:hover img {transform: scale(1.1);}

@media (max-width:1399.98px){
    #intro .visual .grid {padding: 0 20px;}
    #intro .text {padding: 350px 20px 200px;}
}
@media (max-width:1023.98px){
    #intro .visual .grid {align-items: end; padding: 100px 20px 80px;}
    #intro .visual .grid .thumb {width: 280px;}
    #intro .text {height: 100vh; grid-auto-rows: max-content; gap: 20px; padding: 120px 20px;}
    #intro .text .title {font-size: 38px; margin: 0;}
    #intro .text .desc p {font-size: 16px;}

    .main-cont-common {padding: var(--cont-margin-m);}
    .main-cont-common .cont-container {gap: var(--gap-m);}
    .main-cont-common .cont-container h3 {font-size: 38px;}

    #main-cont-01 .cont-container ul li {padding: 40px 0; gap: 20px;}
    #main-cont-01 .cont-container ul li strong {font-size: 24px; line-height: var(--line-height);}
    #main-cont-01 .cont-container ul li p {font-size: 16px; line-height: var(--line-height);}

    #main-cont-02 .cont-container ul {grid-template-columns: repeat(2, 1fr);}

    #main-cont-03 {padding-bottom: 100px; gap: var(--gap-m);}
    #main-cont-03 .marquee-auto .marquee-inner {gap: var(--gap-m);}
    #main-cont-03 .marquee-auto .marquee-inner .marquee-inner-box {gap: var(--gap-m);}
    #main-cont-03 .marquee-auto .marquee-inner .marquee-inner-box .marquee-content {gap: var(--gap-m);}
    #main-cont-03 .marquee-auto .marquee-inner .marquee-inner-box .marquee-content .thumb {width: 180px;}
}
/*=========================================================== Sub Page Style ===========================================================*/
#about-cont-01 {background: url(/page/img/about/visual.webp) center no-repeat; background-size: cover; background-position: 0% 0%; padding: 200px 0 100px;}
#about-cont-01 .cont-container {display: grid; grid-template-columns: repeat(2, auto); align-items: center; justify-content: space-between; color: #fff;}
#about-cont-01 .cont-container .text {align-self: start;}
#about-cont-01 .cont-container .item {background: rgba(255,255,255,.3); border-radius: 100px; overflow: hidden; display: grid; gap: 80px; align-self: end; margin-top: 250px; padding: 120px 40px 40px;}
#about-cont-01 .cont-container .item h3 {font-size: 60px; font-weight: 900; text-align: center;}
#about-cont-01 .cont-container .item ul {display: grid; gap: 30px;}
#about-cont-01 .cont-container .item ul li {background: var(--point-color); border-radius: 100px; overflow: hidden; display: grid; gap: 15px; align-items: center; padding: 30px 100px;}
#about-cont-01 .cont-container .item ul li h4 {font-size: 34px;}
#about-cont-01 .cont-container .item ul li strong {font-size: 24px;}
#about-cont-01 .cont-container .item ul li p {font-size: 16px; margin-top: 10px;}

#about-cont-02 {margin-bottom: 200px;}
#about-cont-02 .cont-container {display: grid; gap: 150px;}
#about-cont-02 .cont-container .item ul {display: flex; gap: var(--gap);}
#about-cont-02 .cont-container .item ul li {border-radius: 20px; overflow: hidden; aspect-ratio: 1/1; position: relative;}
#about-cont-02 .cont-container .item ul li .thumb {position: relative;}
#about-cont-02 .cont-container .item ul li .thumb::after {content: attr(data-attr); color: #fff; position: absolute; top: 35%; left: 50%; transform: translate(-50%,-35%); font-size: 60px; width: max-content;}
#about-cont-02 .cont-container .item ul li .desc {background: var(--point-color); display: grid; align-items: center; justify-content: center; padding: 50px 0; position: absolute; bottom: 0; left: 0; width: 100%;}
#about-cont-02 .cont-container .item ul li .desc p {font-size: 20px; color: #fff; line-height: var(--line-height); text-align: center;}
@media (max-width:1399.98px){
    #about-cont-01 .cont-container {justify-content: unset; gap: 50px;}
    #about-cont-01 .cont-container .item {margin: 0; border-radius: 20px; padding: 80px 0; gap: 50px;}
    #about-cont-01 .cont-container .item h3 {font-size: 40px;}
    #about-cont-01 .cont-container .item ul li {border-radius: 20px; padding: 20px 40px; margin: 0 30px;}
    #about-cont-01 .cont-container .item ul li h4 {font-size: 28px;}
    #about-cont-01 .cont-container .item ul li strong {font-size: 18px;}
    #about-cont-01 .cont-container .item ul li p {font-size: 14px; font-weight: 600; margin: 0; line-height: var(--line-height);}

    #about-cont-02 .cont-container {gap: 100px;}
    #about-cont-02 .cont-container .item ul {gap: var(--gap-m);}
    #about-cont-02 .cont-container .item ul li .thumb::after {font-size: 40px;}
    #about-cont-02 .cont-container .item ul li .desc {padding: 30px 0;}
    #about-cont-02 .cont-container .item ul li .desc p {font-size: 16px;}
}
@media (max-width:1023.98px){
    #about-cont-01 {padding: 100px 0;}
    #about-cont-01 .cont-container {grid-template-columns: 1fr;}
    #about-cont-01 .cont-container .item {padding: 40px 0;}
    #about-cont-01 .cont-container .item h3 {font-size: 30px;}
    #about-cont-01 .cont-container .item ul li {margin: 0 20px;}

    #about-cont-02 {margin-bottom: 100px;}
    #about-cont-02 .cont-container {gap: 50px;}
    #about-cont-02 .cont-container .item ul {display: grid; grid-template-columns: 1fr;}
}
/*=========================================================== Board Page Style ===========================================================*/
/* COMMON CUSTOM */
#board-cont-01 {margin-bottom: 200px; overflow: unset;}
#board-cont-01 *:not(i) {font-weight: 400;}
#board-cont-01 .wrap {width: 100%;}
#board-cont-01 .board-noresult {font-size: 14px; font-weight: 400; background: transparent; border: 1px solid #ddd; margin: 10px 0 0; border-radius: 20px;}
#board-cont-01 .board-btn {margin: 50px auto 0; padding: 0;}
#board-cont-01 .board-btn div.flex {display: flex; gap: 10px;}
#board-cont-01 .board-btn div.flex.left {justify-content: start;}
#board-cont-01 .board-btn div.flex.center {justify-content: center;}
#board-cont-01 .board-btn div.flex.right {justify-content: end;}
#board-cont-01 .board-btn div.flex .ts-btn {border-radius: 20px; padding: 0 30px; margin: 0;}
#board-cont-01 .board-btn div.flex .ts-btn .innerHover {background: var(--point-color);}

/* CATEGORY CUSTOM */
#board-cont-01 .div-cate {margin: 0 0 50px; position: relative; gap: 10px;}
#board-cont-01 .div-cate button {font-size: 14px; font-weight: 500; color: #000; text-decoration: none; padding: 1.5rem 2.5rem; position: relative; transition: none; border: 1px solid #ddd; border-radius: 4rem; background: #fff; width: max-content;}

/* POSTLIST CUSTOM - 메인 동일 적용 */
#postList .gal-item .link {border-radius: 20px; overflow: hidden; display: block; width: 100%; height: 100%;}
#postList .gal-item .link * {cursor: pointer;}
#postList .gal-item .link > .thumb {display: block; width: 100%; height: 100%; background: #f0f0f0; transition: all .3s;}
#postList .gal-item .link .subject {display: grid; gap: 20px; position: absolute; bottom: 0; left: 0; width: 100%; background: var(--point-color); padding: 30px; transition: all .3s; transform: translateY(105%); justify-content: unset; text-align: left; text-shadow: none; overflow: hidden;}
#postList .gal-item .link .subject .category {color: #fff; font-size: 14px;}
#postList .gal-item .link .subject .thumb {width: 18px;}
#postList .gal-item .link .subject .title {font-size: 24px; font-weight: var(--font-weight); color: #fff; text-align: left; text-shadow: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.5;}
#postList .gal-item .link:after {content: none;}
#postList .gal-item .link:hover > .thumb {transform: scale(1.05);}
#postList .gal-item .link:hover .subject {transform: translateY(0);}

/* API - POST */
.section-post {position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden;}
.section-post .div-post {position: absolute; left: 26%; right: 0; top: 0; bottom: 0; background: #fff; transform: translate(100%, 0);}
.section-post .div-post .postInner {overflow-y: scroll; width: 100%; height: 100%; position: relative;}
.section-post .div-post .postInner .postUtils {position: fixed; top: 0; right: 0; z-index: 1; background: var(--point-color); width: 100%; display: grid; grid-auto-flow: column; gap: 30px; align-items: center; justify-content: end; padding: 30px;}
.section-post .div-post .postInner .postUtils .buttons {position: relative; display: flex; gap: 15px; line-height: 1; z-index: 1;}
.section-post .div-post .postInner .postUtils .buttons a {font-size: 16px; color: #333; border-radius: 50px; padding: 18px; background: #fff; display: block;}
.section-post .div-post .postInner .postUtils .postClose {position: relative;}
.section-post .div-post .postInner .postUtils .postClose a {display: block; width: 30px; height: 30px;}
.section-post .div-post .postInner .postUtils .postClose a span {position: absolute; width: 100%; background: #fff; height: 2px; top: 15px;}
.section-post .div-post .postInner .postUtils .postClose a span:nth-child(1) {transform: rotate(45deg);}
.section-post .div-post .postInner .postUtils .postClose a span:nth-child(2) {transform: rotate(-45deg);}
.section-post .div-post .postInner .postHead {background: var(--point-color); color: #fff; padding: 8vw 5vw; display: grid; grid-template-columns: minmax(300px, 28%) 1fr; gap: 100px; line-height: 1;}
.section-post .div-post .postInner .postHead .headTitle {display: grid; gap: 50px;}
.section-post .div-post .postInner .postHead .headTitle .title {font-size: 40px; font-weight: var(--font-weight); line-height: 1.5;}
.section-post .div-post .postInner .postHead .headTitle .custom {display: grid; gap: 30px;}
.section-post .div-post .postInner .postHead .headTitle .custom li {display: grid; gap: 5px;}
.section-post .div-post .postInner .postHead .headTitle .custom li span.name {font-size: 15px; font-weight: var(--font-weight);}
.section-post .div-post .postInner .postHead .headTitle .custom li span.val {font-size: 15px; font-weight: 500; line-height: 1.5;}
.section-post .div-post .postInner .postHead .headCont {padding-top: 10px;}
.section-post .div-post .postInner .postHead .headCont .val {color: #fff; font-size: 15px; font-weight: 500; line-height: 1.5; padding-top: 50px; border: 0; border-top: 1px solid #fff;}
.section-post .div-post .postInner .postCont {padding: 5vw; display: grid; grid-template-columns: 1fr; gap: 30px; position: relative;}
.section-post .div-post .postInner .postCont p {font-size: 14px; font-weight: 400;}
.section-post .div-post .postInner .postCont iframe {width: 100%; display: inline-block; aspect-ratio: 16/9;}
.section-post .div-post .postInner .postCont img {width: 100%;}
.section-post .div-post .postInner::-webkit-scrollbar {width: 0;}

/* LIST CUSTOM */
#board-cont-01 .board-list .paging-wrap .more-wrap {margin: 0;}
#board-cont-01 .board-list .paging-wrap .more-wrap .btn-more {margin: 20px 0;}

/* READ CUSTOM */
#board-cont-01 .board-read .div-tbl {display: grid; gap: var(--gap); border-bottom: 1px solid #ddd;}
#board-cont-01 .board-read .div-tbl li.tr {padding: 0; min-height: auto;}
#board-cont-01 .board-read .div-tbl li.tr .td {padding: 0; color: #000;}
#board-cont-01 .board-read .div-tbl li.tr .td.thm-subject {line-height: var(--line-height-tiny); font-size: 38px; font-weight: var(--font-weight);}

/* EDIT CUSTOM */
#board-cont-01 .board-edit .div-tbl li.tr .td.thumb {width: 100%; max-width: 500px;}
@media (max-width: 1779.98px) {
    #board-cont-01 .wrap {padding: 0;}
}
@media (max-width: 1023.98px) {
    #board-cont-01 {margin-bottom: 100px;}
    #board-cont-01 .wrap:not(.board-list) {margin-top: 50px;}
    #board-cont-01 .board-btn {margin: 30px auto 0;}

    #board-cont-01 #form-category {overflow-x: scroll; margin-bottom: 50px;}
    #board-cont-01 #form-category::-webkit-scrollbar {width: 0; height: 0;}
    #board-cont-01 .div-cate {margin: 0 !important; flex-wrap: nowrap;}
    #board-cont-01 .div-cate button {font-size: 13px;}

    #board-cont-01 .board-read .div-tbl {gap: var(--gap-m);}
    #board-cont-01 .board-read .div-tbl li.tr .td.thm-subject {font-size: 30px; line-height: var(--line-height);}

    #postList {margin: -5px !important;}
    #postList .gal-item .link .subject {gap: 5px; padding: 15px 20px;}
    #postList .gal-item .link .subject .thumb {width: 10px;}
    #postList .gal-item .link .subject .title {font-size: 16px; line-height: var(--line-height);}

    .section-post .div-post {left: 0;}
    .section-post .div-post .postInner .postUtils {gap: 20px; padding: 20px;}
    .section-post .div-post .postInner .postUtils .buttons a {font-size: 14px; padding: 15px;}
    .section-post .div-post .postInner .postHead {grid-template-columns: 1fr; padding: 22vw 8vw; gap: 50px;}
    .section-post .div-post .postInner .postHead .headTitle .title {font-size: 30px;}
    .section-post .div-post .postInner .postHead .headCont {padding: 0;}
    .section-post .div-post .postInner .postCont {padding: 8vw;}
}
@media (max-width: 767.98px) {
    #board-cont-01 .board-list .board-btn div.flex .ts-btn {border-radius: 4px;}
    #board-cont-01 .wrap:not(.board-list) .board-btn {flex-direction: row;}
    #board-cont-01 .wrap:not(.board-list) .board-btn div.flex {flex-basis: fit-content;}
    #board-cont-01 .wrap:not(.board-list) .board-btn div.flex .ts-btn {width: fit-content;}
}
/*=========================================================== Contact Page Style ===========================================================*/
#contact-cont-01 {margin-bottom: 200px;}
#contact-cont-01 .contact-contents {position: relative; z-index: 2;}
#contact-cont-01 .contact-contents input {font-size: 14px; font-weight: 400; border:none; border-bottom:1px solid #ddd; box-sizing: border-box; width: 100%; height: 100%; padding-bottom: 10px; transition: all .4s; background: transparent;}
#contact-cont-01 .contact-contents input:focus {border:none; border-bottom:1px solid var(--point-color);}
#contact-cont-01 .contact-contents .contact-section-stage {display: grid; gap: 200px;}
#contact-cont-01 .contact-contents .contact-stage {display: grid; gap: var(--gap);}
#contact-cont-01 .contact-contents .contact-stage .contact-title {font-size: 28px;}
#contact-cont-01 .contact-contents .contact-stage .contact-line-box {display: grid; gap: 100px;}
#contact-cont-01 .contact-contents .contact-stage .contact-line {display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap);}
#contact-cont-01 .contact-contents .contact-stage .contact-line-4,
#contact-cont-01 .contact-contents .contact-stage .contact-line-6 {grid-template-columns: 1fr;}
#contact-cont-01 .contact-contents .contact-stage .contact-line .contact-box {display: grid; gap: 20px;}
#contact-cont-01 .contact-contents .contact-stage .contact-line .contact-box label span {position: relative; top: 2px; left: 2px;}
#contact-cont-01 .contact-contents .contact-stage .contact-line .contact-message-box {width: 100%; height: 200px; padding: 20px; border:1px solid #ddd; transition:border 0.4s; background: transparent; resize: none; font-weight: 400;}
#contact-cont-01 .contact-contents .contact-stage .contact-line .contact-message-box:focus{border:1px solid var(--point-color);}
#contact-cont-01 .contact-contents .contact-stage .contact-line .padding-line {position: relative; width: 100%; height: 100%;}
#contact-cont-01 .contact-contents .contact-stage .contact-line .agree-text-box {height: 200px; border:1px solid #ddd; overflow-y: scroll; padding:20px;}
#contact-cont-01 .contact-contents .contact-stage .contact-line .agree-text-box::-webkit-scrollbar {width:6px;}
#contact-cont-01 .contact-contents .contact-stage .contact-line .agree-text-box::-webkit-scrollbar-thumb {background: var(--point-color);}
#contact-cont-01 .contact-contents .contact-stage .contact-line .agree-text-box p {line-height: 26px;}
#contact-cont-01 .contact-contents .contact-stage .contact-line .contact-agree-box {margin-top: 20px;}
#contact-cont-01 .contact-contents .contact-stage .contact-line .contact-agree-box > label {display: inline-flex; align-items: center;}
#contact-cont-01 .contact-contents .contact-stage .contact-line .contact-agree-box .contact-agree-checkbox {display: block; border:1px solid #ddd !important; width:20px; height:20px !important; float: left; transition: all 0.4s; cursor: pointer;}
#contact-cont-01 .contact-contents .contact-stage .contact-line .contact-agree-box .contact-agree-checkbox:checked {background-color: var(--point-color); border:1px solid var(--point-color) !important;}
#contact-cont-01 .contact-contents .contact-stage .contact-line .contact-agree-box span {cursor: pointer;}
#contact-cont-01 .contact-contents .contact-stage .contact-line .btn-submit-box {display: flex; justify-content: center; align-items: center; margin-top: 50px;}
#contact-cont-01 .contact-contents .contact-stage .contact-line .btn-submit-box .btn {border-radius: 40px; padding: 0; background-color: transparent; width: 230px; height: 70px; line-height: 70px; position: relative; border: 1px solid #ddd; overflow: hidden;}
#contact-cont-01 .contact-contents .contact-stage .contact-line .btn-submit-box .btn span {color:#000; font-size: 18px; font-weight: var(--font-weight); transition: all 0.4s;}
#contact-cont-01 .contact-contents .contact-stage .contact-line .btn-submit-box .btn::before {content: ''; position: absolute; bottom:-100%; width: 100%; height:100%; background-color: var(--point-color); left:0px; transition: bottom 0.4s; z-index: -1;}
#contact-cont-01 .contact-contents .contact-stage .contact-line .btn-submit-box .btn:hover {border-color: var(--point-color);}
#contact-cont-01 .contact-contents .contact-stage .contact-line .btn-submit-box .btn:hover::before {bottom:0%;}
#contact-cont-01 .contact-contents .contact-stage .contact-line .btn-submit-box .btn:hover span {color:#fff;}
@media (max-width: 1023.98px) {
    #contact-cont-01 {margin-bottom: 100px;}
    #contact-cont-01 .contact-contents .contact-section-stage {gap: 100px;}
    #contact-cont-01 .contact-contents .contact-stage {gap: var(--gap-m);}
    #contact-cont-01 .contact-contents .contact-stage .contact-line-box {gap: 50px;}
    #contact-cont-01 .contact-contents .contact-stage .contact-line {grid-template-columns: 1fr; gap: 50px;}
    #contact-cont-01 .contact-contents .contact-stage .contact-line-4,
    #contact-cont-01 .contact-contents .contact-stage .contact-line-6 {gap: 20px;}
    #contact-cont-01 .contact-contents .contact-stage .contact-line-4 .contact-agree-box,
    #contact-cont-01 .contact-contents .contact-stage .contact-line-6 .contact-agree-box {margin: 0;}
}
/*=========================================================== Aside Style ===========================================================*/
aside {position: fixed; bottom: 4%; right: 1.5%; z-index: 101; display: grid; grid-template-columns: 1fr; gap: 20px;}
aside .thumb {display: block; width: 68px; height: 68px; border-radius: 50%; position: relative;}
@media (max-width:1023.98px){
    aside {bottom: 3%; right: 4%;}
    aside .thumb {width: 60px; height: 60px;}
}
/*=========================================================== Cursor Style ===========================================================*/
.cursor { position: fixed; background-color: black; width: 10px; height: 10px; border-radius: 100%; z-index: 1; transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, .2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity; user-select: none; pointer-events: none; z-index: 10000; transform: scale(1); cursor: none; mix-blend-mode: difference; background: #fff;}
.cursor.active { opacity: 1; transform: scale(0); }
.cursor-follower { position: fixed; width: 40px; height: 40px; border-radius: 100%; z-index: 1; transition: 0.4s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) background; user-select: none; pointer-events: none; z-index: 10000; transform: translate(2px, 2px); border: 1px solid #ccc;}
.cursor-follower.active {opacity: 1; transform: scale(2); border: 1px solid var(--point-color);}
.cursor-follower.active-1 {border-color: #1ad5ff;}

@media (max-width: 1023.98px) {
    .cursor,
    .cursor-follower {display: none;}
}