.main-sec h2 { font-size: 6.5rem; } 
.container { width: 162rem; margin: 0 auto; } 

/********************************************
* animation delay 애니메이션 딜레이
********************************************/

body { animation: fadeIn 1s ease forwards; } 

@keyframes fadIn { 
 0% { opacity: 0; } 
 100% { opacity: 1; } 
 }

.sec-tit { opacity: 0; transform: translate(0, -150px); transition: all 2s; } 
.article { opacity: 0; transform: translate(0, 100px); transition: all 2s; } 
.section.active .sec-tit { opacity: 1; transform: translate(0, 0); } 
.section.active .article { opacity: 1; transform: translate(0, 0); } 

.delay01 { transition: all 1s ease-out 0s; transition-delay: 0.1s } 
.delay02 { transition: all 1s ease-out 0s; transition-delay: 0.2s } 
.delay03 { transition: all 1s ease-out 0s; transition-delay: 0.3s } 
.delay04 { transition: all 1s ease-out 0s; transition-delay: 0.4s } 
.delay05 { transition: all 1s ease-out 0s; transition-delay: 0.5s } 
.delay06 { transition: all 1s ease-out 0s; transition-delay: 0.6s } 
.delay07 { transition: all 1s ease-out 0s; transition-delay: 0.7s } 
.delay08 { transition: all 1s ease-out 0s; transition-delay: 0.8s } 
.delay09 { transition: all 1s ease-out 0s; transition-delay: 0.9s } 
.delay10 { transition: all 1s ease-out 0s; transition-delay: 1.0s } 
.delay12 { transition: all 1s ease-out 0s; transition-delay: 1.2s } 
.delay15 { transition: all 1s ease-out 0s; transition-delay: 1.5s } 



/********************************************
* SUB COMMON
********************************************/
span.lg-icon,
button.lg-icon,
.lg-counter { font-family: lg !important; }

.lg-backdrop { background-color: rgba(0, 0, 0, 0.9) !important; backdrop-filter: blur(7px); }

.sub-area strong,
.sub-area p,
.sub-area em,
.sub-area span,
.sub-area h2,
.sub-area h3,
.sub-area h4,
.sub-area h5,
.sub-area a { font-family: 'pretendard' !important; } 
.sub-visual { height: 25rem; background-color: #f8f8f8; } 
.sub-visual .container { display: flex; flex-direction: column; justify-content: center; height: 25rem; } 
.sub-visual h2 { margin-bottom: 2rem; font-family: 'Roboto' !important; font-size: 6.5rem; font-weight: 800; } 

.sub-tit-wrap h2 { margin-bottom: 1rem; font-size: 4rem; font-weight: 700; } 
.sub-tit-wrap p { margin-bottom: 3rem; font-size: 2rem; font-weight: 500; color: #ccc; } 
.sub-tit-wrap span { font-size: 1.8rem; } 

.sub-tit-wrap h3 { font-size: 3.5rem; } 
.sub-area { padding: 10rem 0; } 
.sub-area2 { padding: 0 0 15rem 0; } 
.sub-tit-wrap em { display: block; margin-bottom: 2rem; font-size: 2rem; color: var(--main-color2); } 
.sub-tit-wrap h3 { font-size: 4.5rem; font-weight: 700; } 

.sub-tit2-wrap { margin-bottom: 5rem; } 
.sub-tit2-wrap h4 { position: relative; padding-bottom: 2rem; padding-left: 2rem; border-bottom: 1px solid #ddd; font-size: 3rem; font-weight: 700; } 
.sub-tit2-wrap h4:before { content: ""; position: absolute; left: 0; top: 1.3rem; width: 1rem; height: 1rem; background-color: var(--main-color2); } 

.sub-table-wrap table thead, .sub-table-wrap th, .sub-table-wrap td { border: 1px solid #eaeaea; } 
.sub-table-wrap th { background-color: var(--main-color2); } 
.sub-table-wrap th { color: #fff; } 
.sub-table-wrap td { text-align: center; font-weight: 300; color: #3b3b3b; } 

/********************************************
* SUB VISUAL
********************************************/

#sub-visual-wrap .sub-visual { position: relative; height: 100vh; animation: subVis 4s linear forwards; background-size: 100%; background-position: center center !important; } 

@keyframes subVis { 
 0% { background-size: 100%; } 
 100% { background-size: 105%; } 
 }

#sub-visual-wrap .sub-visual .container { height: 100%; display: flex; flex-direction: column; align-items: center; padding-top: 30rem; } 

#sub-visual-wrap .sub-visual01 { background: url(/wp-content/uploads/2025/05/sub-visual01.jpg); } 
#sub-visual-wrap .sub-visual02 { background: url(/wp-content/uploads/2025/05/sub-visual02.jpg); } 
#sub-visual-wrap .sub-visual03 { background: url(/wp-content/uploads/2025/05/sub-visual03.jpg); } 
#sub-visual-wrap .sub-visual04 { background: url(/wp-content/uploads/2025/05/sub-visual04.jpg); } 
#sub-visual-wrap .sub-visual05 { background: url(/wp-content/uploads/2025/05/sub-visual045.jpg); } 

#sub-visual-wrap .sub-visual .container p, #sub-visual-wrap .sub-visual .container h2, #sub-visual-wrap .sub-visual .container span { color: #fff; } 
#sub-visual-wrap .sub-visual .container p { margin-bottom: 1rem; font-family: 'Montserrat' !important; font-size: 2.2rem; } 
#sub-visual-wrap .sub-visual .container h2 { margin-bottom: 3rem; font-size: 7.2rem; } 
#sub-visual-wrap .sub-visual .container span { font-size: 2.6rem; } 
.sub-lnb-wrap { position: absolute; top: 56rem; left: 0; z-index: 999; } 
.sub-lnb-wrap nav > ul { gap: 1rem; } 
.sub-lnb-wrap nav > ul > li.current_page_item > a,
.sub-lnb-wrap nav > ul > li > a:hover { background-color: var(--main-color); } 
.sub-lnb-wrap nav > ul > li > a { justify-content: center; min-width: 20rem; padding: 2rem 3rem !important; border-radius: 3rem !important; background-color: rgba(0, 0, 0, 0.5); transition: all .3s; } 

.sub-scroll-wrap { position: absolute; left: 0; bottom: 2rem; display: flex; justify-content: center; width: 100%; } 
.sub-scroll-wrap .sub-scroll { display: flex; justify-content: center; width: 2.4rem; height: 4.5rem; padding-top: 1rem; border-radius: 2rem; border: 2px solid #fff; } 
.sub-scroll-wrap .sub-scroll .wheel { display: block; width: 2px; height: 6px; background-color: #fff; animation: wheel 2s linear infinite; } 

@keyframes wheel { 
 0% { transform: translate(0, 0); } 
 50% { transform: translate(0, 15px); } 
 100% { transform: translate(0, 0); } 
 }




/********************************************
* BOARD 게시판
********************************************/

.sub-area .kboard-list a { display: flex; align-items: center; gap: 2rem; padding: 3rem 4rem; border-radius: 1rem; border: 2px solid #ddd; transition: all .3s; } 
.sub-area .kboard-list a:hover { border: 2px solid var(--main-color2); } 
.sub-area .kboard-list a + a { margin-top: 2rem; } 
.sub-area .kboard-list .kboard-list-title { margin-right: auto; } 
.sub-area .kboard-list-uid { min-width: 10rem; text-align: center; padding: 0.5rem 0; border-radius: 2rem; font-size: 1.8rem; background-color: #ddd; transition: all .3s; } 
.sub-area .kboard-list a:hover .kboard-list-uid { color: #fff; background-color: var(--main-color2); } 
.sub-area .kboard-list .kboard-list-title .kboard-default-cut-strings { font-size: 2rem; } 
.sub-area .kboard-list .kboard-list-date { font-size: 2rem; color: #999; font-weight: 300; } 

.sub-board-top-wrap { display: flex; justify-content: space-between; border-top: 2px solid var(--main-color2); padding: 3rem; } 
.content-view img { display: block !important; } 
.sub-area .detail-attr { display: flex; gap: 2rem; } 
.sub-area #kboard-default-document .kboard-title h1 { font-size: 3rem; color: var(--main-color2); } 
.sub-area #kboard-default-document .kboard-detail .detail-attr .detail-name { color: var(--main-color2); } 
.sub-area #kboard-default-document .kboard-detail .detail-attr .detail-value { color: #999; } 
.sub-area #kboard-default-document .kboard-content .content-view { border-radius: 2rem; border: 2px solid #ddd; padding: 5rem; font-size: 1.8rem; } 

.sub-area a.kboard-default-button-small, input.kboard-default-button-small, button.kboard-default-button-small { padding: 0.3rem 2rem; border-radius: 1rem; color: var(--main-color2) !important; font-size: 1.6rem !important; font-weight: 500 !important; } 
a.kboard-default-button-small:hover,
a.kboard-default-button-small:focus,
a.kboard-default-button-small:active,
input.kboard-default-button-small:hover,
input.kboard-default-button-small:focus,
input.kboard-default-button-small:active,
button.kboard-default-button-small:hover,
button.kboard-default-button-small:focus,
button.kboard-default-button-small:active { color: #fff !important; background-color: var(--main-color2) !important; opacity: 1 !important; } 


.top-btn { position: fixed; right: 6rem; bottom: 23rem; z-index: 999; display: none; } 
.top-btn .top-btn-wrap { display: flex; justify-content: center; align-items: center; width: 5.5rem; height: 5.5rem; border-radius: 100%; background-color: var(--main-color); cursor: pointer; transition: all .3s; } 
.top-btn:hover .top-btn-wrap { background-color: var(--main-color2); } 

@media screen and (max-width: 1620px) {
.container {width: 100%; padding: 0 2rem;}
}
@media screen and (max-width: 1300px) {
.sub-about-sec+.sub-about-sec {margin-top: 6rem;}
.sub-about-txt-wrap {gap: 3rem;}
.sub-about-sec em {margin-bottom: 4rem;}
.sub-about-txt-wrap {margin-top: 6rem;}




}
@media screen and (max-width: 1024px) {
.sub-visual h2 {font-size: 4.5rem; margin-bottom: 1rem;}
.sub-area {padding: 6rem 0;}
.sub-tit-wrap h2 {font-size: 2.8rem;}
.sub-tit-wrap p {font-size: 1.8rem; margin-bottom: 1rem;}
.sub-tit-wrap span{font-size: 1.6rem;}
}
@media screen and (max-width: 650px) {
.sub-visual, .sub-visual .container {height: 18rem;}
.sub-visual h2 {font-size: 3.5rem;}
}