@font-face {    /*  태나무 */
    font-family: 'Tenada';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2210-2@1.0/Tenada.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {  /*  강원도교욱튼튼체 */
    font-family: 'GangwonEduPowerExtraBoldA';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEduPowerExtraBoldA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face { /*  어그로체 */
    font-family: 'SBAggroB';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {/* 구름 산스 */
    font-family: 'goorm-sans-bold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408@1.0/goorm-sans-bold.woff2') format('woff2');
   font-weight: 400;
    font-style: normal;
}
@font-face {/* 수트 */
    font-family: 'SUIT-Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
/******************************************
*********** 공통페이지************************
*******************************************/

/*    상단메뉴   */
/* .fixed-top {border:2px solid red;} */

/*상단 메뉴   */
.navbar-nav li a{  font-family: 'SUIT-Regular';  font-weight:700; }


/******************************************
***********  컨텐츠    ************************
*******************************************/
/*   서브컨텐츠  */
p{margin-bottom: 0;}
.contents_container{max-width:1200px; margin:0 auto 50px auto; padding: 0 10px;}
#container_title,
#container_title span{margin: 0; padding:0; font-size:0;}





/******************************************
***********  체험 프로그램    ************************
*******************************************/

.experince_container-wrap{   }
.experince_container{max-width:1200px; margin:0 auto; }
.experince{display:flex; flex-direction: column;flex-direction: column-reverse;position:relative; width:48%;  margin:0 1% 16px 1%;    background-color:#fff;  border:1px solid #181818;}
.experince_period{position:absolute; z-index:10; display:block; width:100%; text-align:right;  }
.experince_period span{display:inline-block; background-color:#ff6600; color:#fff; font-size:13px; font-weight:600;  border-radius:16px; padding:4px 16px; margin:4px 4px 0 0; }
.experince_period .month-4{background-color:green ; }
.experince_period .month-6{background-color:blue ; }


.experince h3{color:#485766; font-size:17px;font-family: 'SUIT-Regular'; }
.experince_container dl{display:flex;flex-wrap: wrap; margin:0; }
.experince_container dl dt,
.experince_container dl dd{padding:8px 0; margin-bottom:0; border-top:1px solid #c4c4c4;  font-size:13px; }
.experince_container dl dt{width:5em; font-weight:400;  text-align:center;  }

.experince_container dl dd{width:calc(100% - 5em); padding-left:4px;   }
.experince_container dl dt:nth-child(2){height:50px;    }
.experince_container dl dd:nth-child(1)::after{content:"^^"; font-size:0.8rem; }
.experince_container dl dd:nth-child(2)::after{content:"분"; font-size:0.8rem; }
.experince_container dl dd:nth-child(4)::after{content:"원"; font-size:0.8rem; }
.experince_container dl dd:nth-child(5)::after{content:"&"; font-size:0.8rem; }

.ex-name{margin-top:12px; font-size:17px; text-align:center; }



/*  이미지 효과   */
.works_container {   position: relative;   z-index: 1;  
	width: 100%;
	height: 32vw;  
	margin: 0 auto;      display: flex;   justify-content: center;   align-items: center;
	background-position: center;
  background-size: cover;   overflow: hidden; } 


.works_container_1{  background: url("/skin/content/images/ex_01.jpg");background-position: center;background-size: cover;  }
.works_container_2{  background: url("/skin/content/images/ex_02.jpg");background-position: center;background-size: cover; }
.works_container_3{  background: url("/skin/content/images/ex_03.jpg");background-position: center;background-size: cover; }
.works_container_4{  background: url("/skin/content/images/ex_04.jpg");background-position: center;background-size: cover; }
.works_container_5{  background: url("/skin/content/images/ex_05.jpg"); background-position: center;background-size: cover; }
.works_container_6{  background: url("/skin/content/images/ex_06.jpg"); background-position: center;background-size: cover; }
.works_container_7{  background: url("/skin/content/images/ex_07.jpg"); background-position: center;background-size: cover; }
.works_container_8{  background: url("/skin/content/images/ex_08.jpg"); background-position: center;background-size: cover; }
.works_container_9{  background: url("/skin/content/images/ex_09.jpg");background-position: center;background-size: cover; }
.works_container_10{  background: url("/skin/content/images/ex_10.jpg");background-position: center;background-size: cover; }
.works_container_11{  background: url("/skin/content/images/ex_11.jpg");background-position: center;background-size: cover; }
.works_container_12{  background: url("/skin/content/images/ex_12.jpg");background-position: center;background-size: cover; }
.works_container_13{  background: url("/skin/content/images/ex_13.jpg");background-position: center;background-size: cover; }
.works_container_14{  background: url("/skin/content/images/ex_14.jpg");background-position: center;background-size: cover; }
.works_container_15{  background: url("/skin/content/images/ex_15.jpg");background-position: center;background-size: cover; }
.works_container_16{  background: url("/skin/content/images/ex_16.jpg");background-position: center;background-size: cover; }
.works_container_17{  background: url("/skin/content/images/ex_17.jpg");background-position: center;background-size: cover; }
.works_container_18{  background: url("/skin/content/images/ex_18.jpg");background-position: center;background-size: cover; }
.works_container_19{  background: url("/skin/content/images/ex_19.jpg");background-position: center;background-size: cover; }
.works_container_20{  background: url("/skin/content/images/ex_20.jpg");background-position: center;background-size: cover; }
.works_container_21{  background: url("/skin/content/images/ex_21.jpg");background-position: center;background-size: cover; }




.works_container::before,
.works_container::after {
  content: '';   position: absolute;  
  left: 0;   z-index: -1;  
  width: 100%;
  height: 250px;   
background-color: rgba(0,0,0,0.4);   transition: transform 1s 0.2s;}
.works_container::before {    top: 0;   clip-path: polygon(0 0, 100% 0, 100% 50%, 0% 100%);   transform: translateY(-100%);}
.works_container::after {   bottom: -1px;   clip-path: polygon(0 50%, 100% 0, 100% 100%, 0% 100%);   transform: translateY(100%); }
.works_container:hover::before,
.works_container:hover::after {   transform: translateY(0); }
.works_main {   opacity: 0;   transition: opacity 0.5s; }
.works_front { padding:0 1em;   font-size: 12px;   font-weight: bold;   color: #fff; }
.works_front p{font-family: 'SUIT-Regular'; font-size:1.2em; color:#fff;  }
.works_container:hover .works_main {   opacity: 1;   transition-delay: 0.7s; }



@media (min-width:1280px){
.experince{width:32%;  margin:0 10px 40px 10px;  padding:0 0 20px 0; border:1px solid #181818;  }
.experince_period span{ font-size:13px; margin:4px 12px 0 0; }
.experince h3{font-size:20px; }
.ex-name{font-size:24px; font-weight:600; margin:20px 0;}

.experince,
.works_container {width:370px; }

.experince_container dl dt,
.experince_container dl dd{ font-size:16px; padding:4px  0; border:0;}
.experince_container dl dt{width:8em; margin-bottom:0; }
.experince_container dl dt span{display:inline-block ; width:6em; background-color:#ececec; border:0; color:#181818; text-align:center; font-size:14px; font-weight:600;padding:4px 0; border-radius:20px; }
.experince_container dl dd{width:calc(100% - 8em)}
.experince_container dl dd:before{content:"";    }

/*  이미지 효과   */
.works_container {width: 100%;	height: 280px;   }
.works_front { padding:0 2em;   font-size: 16px; }

}

/******************************************
***********  체 험  일 정 표    ************************
*******************************************/
.expe-notice_container{margin-top:80px; }
.expe-notice-wrap{border-left:1px solid var(--orange); padding-left:1.5em; margin-left:1em;  }
.expe-notice_container-title{ font-family: 'Tenada'; font-size:2em; text-align:center; }

.expe-notice{margin-bottom:20px; }
.expe-notice_title::before{position:absolute; display:inline-block; content:''; width:12px;  height:1px;  margin-right:1em; top:0.7em;  left:-24px; background-color:red;   }
.expe-notice_title{position:relative; }
.expe-notice_title::after{position:absolute; display:inline-block; content:''; width:6px; height:6px;  border-radius:6px; left:-12px; top:0.6em;    background-color:var(--orange); }
.expe-notice_title span{display:inline-block;  margin-left:10px; font-weight:700;     font-size: 20px;}

.expe-notice ul{padding-left:14px; margin:0; font-weight:400;  }
.expe-notice ul li::before{content:'-'; margin-right:8px;   }
.expe-notice ul li{margin-bottom:2px;    }

.expe-point{ color:red; font-size:13px; margin-left:12px;  }

@media (min-width:768px){
.expe-notice-wrap{border-left:0; padding-left:0;  margin-left:0;}
.expe-notice_title::before, 
.expe-notice_title::after{ width:0; height:0; }
.expe-notice-wrap{display:flex; }
.expe-notice{position:relative; background-color:#f5f5f5;  height:260px; margin:4px; border-radius:20px; padding:2em 10px; }
.expe-notice_title {text-align:center; padding-bottom:8px ; }
.expe-notice_title span{  margin-left:0;  font-size:24px;  font-weight:700; letter-spacing:-4px; color:#1d7fbf; font-family: "Spoqa Han Sans Neo"}
.expe-notice {width:25%;    
            height: 500px /* 필요한 경우 조정 가능 */
            padding: 20px;
            border: 1px solid #ccc;        }
.expe-notice ul{padding-left:0; display:flex;   flex-wrap: wrap }
.expe-notice ul li::before{content:''; margin-right:0;   }
.expe-notice ul li{ font-weight:600; margin:0;   }
.expe-notice ul li span{ display:inline-block; background-color:#fff; padding:4px 6px ; margin:4px; border-radius:20px;  font-size:13px;font-weight:400;  }

.expe-point{ position:absolute; padding:0 1em; top:200px; left:-8px; font-size:12px;  }
}
@media (min-width:960px){
.expe-notice ul li span{  padding:4px 12px ; margin:4px ;  font-size:16px;  }

.expe-notice {height:300px; }
.expe-point{  top:240px; left:-8px; font-size:12px;  }
}
@media (min-width:1024px){
.expe-notice {margin:0 10px; }
.expe-notice ul li span{  padding:4px 16px ;   }
.expe-point{margin-bottom:0; }
}














 
nav.breadcrumb {
  font-size: 14px;
  margin-bottom: 10px;
}

nav.breadcrumb a {
  color: #007acc;
  text-decoration: none;
  margin-right: 5px;
  padding: 0 8px; /* 좌우 패딩 8px */
}

nav.breadcrumb a:hover {
  text-decoration: underline;
}

/* 메뉴 패널 공통 */
.menu-panel {
  display: none;
  border: 1px solid #ccc;
  padding: 20px; /* 텍스트 기준 여백 20px */
  position: absolute;
  z-index: 10;
  background: #eee;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 위치 조절 */
#p1 {
  margin-top: -10px;
  margin-left:50px; 
}

#p2 {
  margin-top: -10px;
  margin-left:150px;
}

/* 리스트 스타일 */
.menu-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-panel li {
  cursor: pointer;
  color: #007acc;
  margin: 5px 0;
}

.menu-panel li:hover {
  text-decoration: underline;
}
