/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.7.1778224586
Updated: 2026-05-08 07:16:26

*/
.sub-area 
{font-size: 1.6rem;}
.um-postmessage 
{letter-spacing: -0.08rem; line-height: 1.2;}
.um-header, .um-profile-edit {display: none;}
.um-col-alt .um-right {display: none;}
.um-col-alt .um-half {width: 100%;}

.temporary-box
{text-align: center;}
.temporary-box img
{border-radius: 2rem !important; overflow: hidden;}

/* m-visual-con */
.visual-flex {display: flex; overflow: hidden;}
.vis-left {width: 66%;}
.vis-top,.vis-bottom {height: 50%;}
.vis-paging-con {position: relative; height: 100%; padding: 4rem 6rem; display: flex;  flex-direction: column; justify-content: space-between;}
.vis-paging-con::before {content: ""; position: absolute; bottom: 28%; right: 8%; width: 30rem; height: 13rem; background: url(/wp-content/uploads/2026/05/vis-title-after.jpg) no-repeat center / contain; z-index: -1;}
.vis-paging-con .title {font-size: 3.6rem; color: #000; letter-spacing: -0.14rem; line-height: 1.8;}
.vis-paging-con .title b {font-size: 4.8rem; font-weight: 700; color: #000; letter-spacing: -0.14rem;}

.vis-paging-wrap  {width: 100%;}
.vis-paging-wrap .arrow-wrap {padding-bottom: 2rem; display: flex; justify-content: space-between;}
.vis-paging-wrap .arrow-wrap .arrow {font-size: 2rem; font-weight: 600; color: #000; cursor: pointer; transition: var(--trans);}
.vis-paging-wrap .arrow-wrap .arrow:hover {opacity: 0.5;}

.vis-paging-wrap .gage-bar {position: relative; width: 100%; height: 2px; background-color: #b2b2b2;}
.vis-paging-wrap .gage-bar .bar {position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 0; height: 4px; background-color: var(--sub-color);}
.vis-paging-wrap .gage-bar.active .bar{width: 100%; transition: 3s linear;}

.vis-bottom .vis-quick-wrap {display: flex; flex-flow: row wrap; height: 100%; overflow: hidden;}
.vis-bottom .vis-quick-wrap .btn {width: 50%; border: 1px solid #fff; margin: -1px; background-color: var(--main-color); transition: var(--trans);}
.vis-bottom .vis-quick-wrap .btn:hover {background-color: var(--sub-color);}
.vis-bottom .vis-quick-wrap .btn a {display: flex; width: 100%; height: 100%; align-items: flex-end; padding: 3.5rem 4.5rem; font-weight: 500; letter-spacing: -0.12rem;}
.vis-bottom .vis-quick-wrap .btn a .btn-name {font-size: 2.4rem; color: #fff; position: relative;}
.vis-bottom .vis-quick-wrap .btn a .btn-name::before {position: absolute; content: ""; right: -1rem; top: -1rem; width: 8px; height: 8px; border-radius: 50%; border: 2px solid #fff;}

/* .m-gallery-con */
.m-title {padding-bottom: 4rem; font-size: 3.4rem; letter-spacing: -0.14rem; color: #000; font-weight: 900; text-align: center;}

.gallery-con {position: relative; padding: 9rem 0; text-align: center;}
.gallery-con .more {padding-top: 5rem;}
.gallery-con .more a {display: inline-flex; gap: 1rem; padding: 1rem 1.5rem; font-size: 1.6rem; font-weight: 500; color: #000; letter-spacing: -0.1rem; border: 2px solid var(--main-color); justify-content: center; align-items: center; transition: var(--trans);}
.gallery-con .more a i {font-size: 2rem; color: var(--main-color); transition: var(--trans);}

.gallery-con .more a:hover {border-color: var(--sub-color); background-color: var(--sub-color); color: #fff;}
.gallery-con .more a:hover i {transform: rotate(90deg); color: #fff;}

/* m-quick-con */
.quick-con {background-color: var(--bg-color);}
.quick-wrap {padding: 6rem 0; display: flex; gap: 3rem; justify-content: space-between;}
.quick-wrap li {position: relative; width: 100%; background: no-repeat center / cover; transition: var(--trans); overflow: hidden;}
.quick-wrap li::before,
.quick-wrap li::after {content: ""; position: absolute; inset: 0; z-index: 0; transition: var(--trans);}
.quick-wrap li::before {opacity: 1; background: linear-gradient(to right, var(--main-color) 25%,  #004ea230 100%); }
.quick-wrap li::after {opacity: 0; background: linear-gradient(to right, var(--sub-color) 25%, #ec6a1d20 100%);}
.quick-wrap li:hover::after {opacity: 1;}
.quick-wrap li:hover::before {opacity: 0;}

.quick-wrap li a {position: relative; padding: 7rem 4rem; display: flex; justify-content: space-between; z-index: 2;}
.quick-wrap li a .btn-name {font-size: 2.4rem; color: #fff; font-weight: 500; letter-spacing: -0.12rem;}
.quick-wrap li a .more  {display: flex; align-items: center; gap: 1rem; font-size: 1.6rem; color: #fff; font-weight: 400; letter-spacing: -0.1rem;}
.quick-wrap li a .more i {font-size: 2rem; color: #fff; transition: var(--trans);}
.quick-wrap li:hover a .more i {transform: rotate(90deg);}

/* m-calender-con */
.calender-con {position: relative; background-color: var(--bg-color); overflow: hidden;}
.calender-con::before {content: ""; position: absolute; top: 0; right: -13%; width: 104rem; height: 45rem; background: url(/wp-content/uploads/2026/05/m-cal-after.png) no-repeat center / contain;}
.calender-wrap {position: relative; padding: 9rem 0;}

/******************
sub page
******************/

/* 회장 인사말 */
.greeting-wrap .gre-top .top-txt 
{font-size: 4.5rem; letter-spacing: -0.14rem; text-align: center; font-weight: 700; color: var(--main-color);}
.greeting-wrap .gre-flex 
{display: flex; justify-content: space-around;}
.greeting-wrap .gre-flex .gre-right
{width: 60%;}
.greeting-wrap .gre-flex .gre-right .txt-wrap p
{margin-bottom: 1.2rem; font-size: 1.7rem; color: #444; letter-spacing: -0.08rem; font-weight: 400; line-height: 1.6;}
.greeting-wrap .gre-flex .gre-right .txt-wrap p.thank,.greeting-wrap .gre-flex .gre-right .txt-wrap p b
{font-weight: 700; color: #333; letter-spacing: -0.08rem}
.greeting-wrap .gre-flex .gre-right .txt-wrap p:nth-last-of-type(1)
{font-size: 2rem; text-align: end;}

/* 찾아오시는길 */
.location-con .root_daum_roughmap 
{width: 100% !important;}
.location-con .cont 
{display: none;}
.location-con .location-wrap 
{padding: 4rem; border: 1px solid #d4dfe4;}
.location-con .location-wrap .adress-top
{padding-bottom: 4rem; text-align: center;}
.location-con .location-wrap .adress-top .adress
{padding-bottom: 1rem; font-size: 3rem; font-weight: 800; letter-spacing: -0.16rem; line-height: 1.6;}
.location-con .location-wrap .adress-top .tel-wrap
{display: flex; gap: 2rem; justify-content: center; align-items: center;}
.location-con .location-wrap .adress-top .tel-wrap li
{font-size: 2rem; font-weight: 600; letter-spacing: -0.14rem; line-height: 1.6; color: #555;}
.location-con .location-wrap .adress-bottom .traffic-wrap
{display: flex; justify-content: space-between; align-items: stretch;}
.location-con .location-wrap .adress-bottom .traffic-wrap .traffic-box
{padding: 4rem; display: flex; gap: 2rem; align-items: flex-start; width: 100%; background-color: #ebf4ff; border-right: 2px dotted #d4dfe4;}
.location-con .location-wrap .adress-bottom .traffic-wrap .traffic-box:nth-last-of-type(1)
{border-right: 0;}
.location-con .location-wrap .adress-bottom .traffic-wrap .traffic-box .icon
{padding: 2rem; font-size: 4rem; background: var(--main-color); color: #fff; border-radius: 50%;}
.location-con .location-wrap .adress-bottom .traffic-wrap .traffic-box .title-wrap .title 
{padding-bottom: 1rem; font-size: 2.4rem; font-weight: 800;}
.location-con .location-wrap .adress-bottom .traffic-wrap .traffic-box .title-wrap .detail 
{font-size: 1.7rem; color: #444; font-weight: 500; line-height: 1.6; letter-spacing: -0.14rem; font-family: 'pretandard';}
.adress-bottom .title-wrap
{display: block; padding-bottom: 0;}

.location-con .location-wrap .adress-bottom .traffic-wrap .traffic-box .color-wrap 
{margin-top: 1rem; color: #777;}
.location-con .location-wrap .adress-bottom .traffic-wrap .traffic-box .color-wrap li
{font-size: 1.6rem; color: #656565; letter-spacing: -0.08rem; line-height: 1.6;}
.location-con .location-wrap .adress-bottom .traffic-wrap .traffic-box .color-wrap li span
{margin-right: 1rem; padding: 0px 5px; color: #fff; font-size: 1.4rem; font-weight: 500;  border-radius: 4px;}
.location-con .location-wrap .adress-bottom .traffic-wrap .traffic-box .color-wrap li span.color1 {background-color: #09a200;}
.location-con .location-wrap .adress-bottom .traffic-wrap .traffic-box .color-wrap li span.color2 {background-color: var(--sub-color);}

/* 종목단체 */
.event-wrap
{margin: 6rem 0;}
.event-wrap .title-wrap
{margin-bottom: 2.5rem;}
.event-wrap .title-wrap .title
{position: relative; padding-left: 2.5rem; font-size: 3.2rem; font-weight: 700; letter-spacing: -0.12rem;}
.event-wrap .title-wrap .title::before 
{position: absolute; content: ""; left: 0; top: 55%; transform: translateY(-50%); width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 5px solid var(--main-color);}

.organ-img {text-align: center;}

/* 주요행사 */
.kboard-content .event-con br
{display: none;}
.kboard-content .event-wrap
{margin-top: 0;}
.kboard-content .event-wrap .sub-table-wrap table br
{display: block;}
.kboard-content .event-wrap .sub-table-wrap table.program-table br
{display: none;}
.sub-table-wrap.row
{margin-bottom: 6rem;}
.sub-table-wrap.row th
{background-color: #e8ecf1 !important;}
.sub-table-wrap.row td 
{padding: 2rem; font-weight: 500;}

/* 사무국현황 */
.organ-wrap .org-top {display: flex; flex-direction: column; align-items: center; position: relative;}
.organ-wrap .org-box {width: 30rem; border: 1px solid #ddd; border-radius: 2rem; overflow: hidden;}
.organ-wrap .org-box + .org-box {margin-top: 3.5rem;}
.organ-wrap .org-box .position,.member-box .position{padding: 1.5rem 0; font-size: 2.1rem; color: #fff; font-weight: 500; text-align: center; background-color: var(--main-color);}
.organ-wrap .org-box.president .position, .organ-wrap .org-box.president .name::before {background-color: var(--sub-color);}

.organ-wrap .org-box .name,.member-box .name {position: relative; padding: 2rem 0 1rem; text-align: center; font-size: 1.8rem; font-weight: 600;}
.organ-wrap .org-box .name::before,.member-box .name::before {content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 4rem; height: 2px; background-color: var(--main-color);}
.organ-wrap .org-box .desc {padding: 2rem;text-align: center;font-size: 1.6rem;letter-spacing: -0.08rem;color: #555;}
.organ-wrap .org-line {width: 1px; height: 5rem; background: #ddd;}

.organ-wrap .department-wrap {margin-top: 5rem;padding-top: 5rem;display: flex;justify-content: space-between;position: relative;}
.organ-wrap .department-wrap::before{content: ""; position: absolute; top: 0; left: 50%; transform: translate(-50%); height: 1px; width: 70%; background-color: #ddd;}
.organ-wrap .department-wrap::after {content: ""; position: absolute; left: 50%; top: -5rem; width: 1px; height: 5rem; background-color: #ddd;}
.organ-wrap .department {width: 30%; position: relative; display: flex; flex-direction: column; align-items: center;}
.organ-wrap .department::before {content: ""; position: absolute; top: -5rem; left: 50%; width: 1px; height:5rem; background-color: #ddd;}
.organ-wrap .dept-title {padding: 2rem; width: 30rem; margin-bottom: 5rem; text-align: center; font-size: 2.4rem; font-weight: 700; border: 1px solid #ddd; border-radius: 1rem; background-color: #fff;}

.organ-wrap .member-box {width: 100%; border-radius: 2rem; overflow: hidden; border: 1px solid #ddd;}
.organ-wrap .member-box + .member-box {margin-top: 3rem;}
.organ-wrap .member-box ul {padding: 2rem;}
.organ-wrap .member-box ul li {position: relative; padding-left: 1.5rem; margin-bottom: 5px; line-height: 1.4; font-size: 1.6rem; color: #444; letter-spacing: -0.08rem;}
.organ-wrap .member-box ul li:last-child {margin-bottom: 0;}
.organ-wrap .member-box ul li::before {content: "·"; position: absolute; left: 0; color: var(--sub-color); font-weight: 900;}

/* 생활체육지도자프로그램 */
.event-box-wrap 
{display: flex; justify-content: space-between;}
.event-box-wrap .title-wrap 
{width: 32%; padding: 3rem; border: 1px solid #ddd; border-top: 2px solid var(--main-color);}
.event-box-wrap .title-wrap .title 
{position: relative; margin-bottom: 2rem; padding-left: 2.5rem; font-size: 3.2rem; font-weight: 700; letter-spacing: -0.12rem;}
.event-box-wrap .title-wrap .title::before 
{position: absolute; content: ""; left: 0; top: 55%; transform: translateY(-50%); width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 5px solid var(--main-color);}
.event-box-wrap .title-wrap .detail 
{font-size: 1.7rem; color: #666; letter-spacing: -0.06rem; line-height: 1.4;}

.event-wrap .detail-wrap
{margin-bottom: 1.5rem;}
.event-wrap .detail-wrap .detail
{font-size: 1.8rem; letter-spacing: -0.08rem; color: #666;}

/* 연혁 */
.history-bg 
{position: relative; padding: 8% 0; overflow: hidden; width: 100%; height: 100%; background: url(/wp-content/uploads/2026/05/sub-his-bg.jpg) no-repeat center/ cover;}
.history-bg::before
{position: absolute; content: ""; left: 0; top: 0; border-top: 5rem solid #fff; border-bottom: 5rem solid transparent; border-right: 5rem solid transparent; border-left: 5rem solid #fff; z-index: 9;}

.history-bg::after
{position: absolute; content: ""; right: 0; bottom: 0; border-bottom: 5rem solid #fff; border-top: 5rem solid transparent; border-left: 5rem solid transparent; border-right: 5rem solid #fff; z-index: 9;}
.history-top 
{position: relative; padding-bottom: 5%; text-align: center;}
.history-top h3
{font-size: 3.8rem; color: #fff; font-weight: 700;}

.parallax-wrap 
{position: relative;}
.parallax-wrap::before
{content: ""; position: absolute; top: 3rem; left: 50%; transform: translateX(-50%); width: 1px; height: 100%; background-color: #fff;}

.parallax-wrap .para-item 
{position: relative; width: 50%; display: flex; flex-flow: row wrap;}
.parallax-wrap .para-item:nth-of-type(2n-1)
{text-align: left; padding-left: 3%; justify-content: flex-start; margin-left: auto;}
.parallax-wrap .para-item:nth-of-type(2n)
{text-align: right; padding-right: 3%; justify-content: flex-end;}

.parallax-wrap .para-item::before
{content: ""; position: absolute; top:1.5rem; width: 3rem; height: 3rem; border-radius: 50%; background-color: #ffffff30;}
.parallax-wrap .para-item::after
{content: ""; position: absolute; top: 3rem; transform: translate(-50%, -50%); width: 1rem; height: 1rem; border-radius: 50%; background-color: #ffffff;}

.parallax-wrap .para-item:nth-of-type(2n-1)::before{left: -2%;}
.parallax-wrap .para-item:nth-of-type(2n-1)::after{left: 0%;}
.parallax-wrap .para-item:nth-of-type(2n)::before{right: -2%;}
.parallax-wrap .para-item:nth-of-type(2n)::after{right: -1.25%;}

.parallax-wrap .para-item li 
{color: #fff; letter-spacing: -0.1rem; line-height: 1.8;}
.parallax-wrap .para-item .birth 
{width: 100%; font-size: 3rem; font-weight: 700;}
.parallax-wrap .para-item .text 
{width: 100%; font-size: 1.8rem;}
.parallax-wrap .para-item .text b 
{color: #fff;}
.parallax-wrap .para-item .img 
{margin-top: 2rem; width: 60%; height: 20rem; background: #fff; border-radius: 1rem;}