/*=========================================================== 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; } 

#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; } 
.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: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){
 .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; } 
#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; } 

@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; } 
 }
/*=========================================================== 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; } 
@media (max-width:1399.98px){
 #about-cont-01 .cont-container { justify-content: unset; gap: 50px; } 
 }
@media (max-width:1023.98px){
 #about-cont-01 { padding: 100px 0; } 
 #about-cont-01 .cont-container { 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 { aspect-ratio: 1/1; } 
#postList .gal-item .link { border-radius: 0; 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(100%); justify-content: unset; text-align: left; text-shadow: none; overflow: hidden; } 
#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 - VIDEO */
#section-video { position: fixed; top: 0; left: 0; right: 0; bottom: 0; transition: all .3s; z-index: 9999; opacity: 0; visibility: hidden; } 
#section-video.active { opacity: 1; visibility: visible; } 
#section-video::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.8); } 
#section-video .arrow-left { background: url(/assets/img/common/overlay-view.png) no-repeat 0 0 transparent; width: 44px; height: 44px; cursor: pointer; outline: 0; user-select: none; position: fixed; top: 50%; left: 20px; transform: translateY(-50%); } 
#section-video .arrow-right { background: url(/assets/img/common/overlay-view.png) no-repeat -46px 0 transparent; width: 44px; height: 44px; cursor: pointer; outline: 0; user-select: none; position: fixed; top: 50%; right: 20px; transform: translateY(-50%); } 
#section-video .arrow-left:hover {background-position: 0 -46px;}
#section-video .arrow-right:hover {background-position: -46px -46px;}
/* #section-video .arrow-left { position: fixed; top: 50%; left: 50px; transform: translateY(-50%); cursor: pointer; height: fit-content; } 
#section-video .arrow-right { position: fixed; top: 50%; right: 50px; transform: translateY(-50%); cursor: pointer; height: fit-content; } 
#section-video .arrow-left i,
#section-video .arrow-right i { color: #fff; font-size: 34px; padding: 5px; } */
#section-video .iframe-wrap { width: 75%; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } 
#section-video .iframe-wrap .iframe { position: relative; padding-bottom: 56.25%; width: 100%; } 
#section-video .iframe-wrap .iframe iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 
#section-video .iframe-control { position: absolute; right: 30px; bottom: 30px; display: flex; gap: 20px; } 
#section-video .iframe-control > div { display: grid; gap: 10px; line-height: 1; text-align: center; } 
#section-video .iframe-control > div a { background: #fff; display: grid; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; overflow: hidden; } 
#section-video .iframe-control > div a i { font-size: 16px; color: #111; } 
#section-video .iframe-control > div p { font-size: 13px; font-weight: 400; color: #fff; } 

@media (max-width:1023.98px){
 #section-video .arrow-left { top: unset; transform: none; left: 72%; bottom: 30px; } 
 #section-video .arrow-right { top: unset; transform: none; right: 8%; bottom: 30px; } 
 #section-video .iframe-wrap { width: 90%; } 
 #section-video .iframe-control { right: unset; left: 30px; } 
 #section-video .iframe-control > div p { display: none; } 
 }

/* 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; } 
 }