/* v166: 메인 비주얼·회원박스 전환점 1024/1025 -> 1100/1101 — 헤더가 1100 에서 모바일로 바뀌므로
   1025~1100 구간이 '헤더는 모바일, 본문은 데스크톱 3열' 상태가 되어 회원박스가 잘리던 것. */
.blankTop{height:181px;display:block;position:relative;width:100%;clear:both;}
@media screen and (max-width: 991px) {
  .blankTop{height:65px;}
}
section.main_sec{ overflow:hidden; padding:181px 0 0;}
/* v196: 고정헤더 상단여백은 .blankTop 스페이서가 담당 — 첫 섹션이 될 수 있는 sec_01 은 자체 상단여백 해제.
   (photogallery_sec 도 main_sec 이지만 항상 하단이라 기존 181px 간격 유지) */
#sec_01.main_sec{ padding-top:0; }
/* v197: 헤더 아래 첫 섹션과의 간격 — 스페이서에 하단 마진으로 준다.
   섹션 순서를 바꿔도 항상 첫 섹션 위에 같은 간격이 생긴다(개별 섹션 padding 으로 주면 v196 문제가 재발). */
/* v198: 헤더 아래 첫 섹션(우리들 이야기 등) 상단 여백 축소 50 -> 24 / 모바일 24 -> 12
   v201: 0 으로 - content2 배경 밴드가 GNB 에 바로 붙어야 해서 흰 띠(24px)를 제거.
   섹션 순서를 바꿔도 첫 섹션은 항상 헤더에 붙는다. 간격이 필요하면 그 섹션의 padding-top 으로. */
#main_container > .blankTop{ margin-bottom:0; }
@media screen and (max-width: 1100px){
  #main_container > .blankTop{ margin-bottom:0; }
}
.main_sec .sec_con{ max-width:1240px; width:100%; padding:0 20px; margin:0 auto; box-sizing:border-box; }

/****************quickmenu****************/
.qm_wrap{ position:fixed; z-index:99; top:50%; left:20px; transform:translate(0, -50%); text-align:center;border:0px solid #000;}
.qm_link{ width:60px; height:60px; border-radius:100%; background-color:#669933; margin:10px auto 0 auto; transition-duration:0.3s; }
.qm_link:last-child{ margin-bottom:0;}
.qm_link i{ color:#fff; font-size:25px; }

/****************sec_01 type2****************/
.visual{width:100%; max-width:100%; padding:32px 0 40px; /* v196: 200px -> 32px, 고정헤더 오프셋(168px)은 .blankTop 이 담당 */ margin:0 0; position:relative; display:block; z-index:1; overflow:hidden; box-sizing:border-box; font-family:var(--font-base); background:url(../img/sec01_bg2.jpg)no-repeat; background-size:cover; background-position:center;}
/* 모바일 헤더(65px) 전환 구간과 일치: 데스크톱 고정헤더용 상단여백(181px) 해제.
   주의: 이 블록은 반드시 위의 .visual 기본 정의보다 뒤에 있어야 함 (같은 특이도는 뒤 선언이 승리) */
@media screen and (max-width: 991px) {
  .visual{padding:10px 0 30px;}
}

.visual .sec01_top_tit{font-size:50px; font-weight:900; color:var(--point-color2); text-align:center; display:block; padding:0; margin:0; font-family: 'bb';background: linear-gradient(90deg, #339900, #9ed13c, #30790b, #339900); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gradient 5s linear infinite;}

@keyframes gradient {
  to { background-position:200% center; }
}

.visual .sec01_top_tit{font-size:clamp(28px, 5vw, 50px); font-weight:800; color:var(--point-color2); text-align:center; display:block; padding:0; margin:0; font-family:'bb';}
/* fix: 메뉴바-콘텐츠 상단 여백 절반 축소 (헤더 잔여 13px + margin 45px = 58px -> 13+16 = 29px) */
.visual .visualInner{display:flex; justify-content:space-between; align-items:stretch; overflow:hidden; padding:0 20px; margin:16px auto 35px; width:100%; max-width:var(--site-w, 1560px); box-sizing:border-box;}
.visual .visualInner .left{width:50%; float:none; display:block; padding:0; margin:0; overflow:hidden; box-sizing:border-box;}
.visual .visualInner .left .head{display:block; overflow:hidden; padding:0;  margin:0 0 10px;}
.visual .visualInner .left .head h3{font-size:36px !important; line-height:1.3; font-weight:800; color:#222; margin:0 15px 0 0; display:inline-block;}
.visual .visualInner .left .head span{display:block; font-size:16px; line-height:1.2; color:#777; padding:3px 0 0; margin:0;}

.nm_warp {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  list-style: none;
  padding: 0; 
  margin: 0;
}

.nm_warp li {
  flex: 0 0 calc(50% - 9px);
  background: #ccc;
  min-height: 226px;
  height: auto;
  margin: 40px 0 0;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

.nm_warp li:nth-child(2) {
  background: #e61c1c;
}

.nm_warp li:nth-child(2) a {
  color: #fff;
  padding: 0;
  display: block;
  height: 100%;
}

.nm_warp li:nth-child(2) a .info {
  padding: 37px 32px;
  min-height: 226px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nm_warp li img {
  max-width: 100%;
  width: 100%;
  height: 100%;
  object-position: center;
  border-radius: 20px;
  display: block;
}

.nm_warp li a .info .tit {
  font-size: 25px;
  font-weight: 700;
  line-height: 1.7;
}

.nm_warp li a .info .baro {
  padding: 65px 0 0;
}

.nm_warp li a .info i {
  position: absolute;
  font-size: 50px;
  right: 30px;
  top: 33px;
  transition: transform 0.3s ease;
}

.nm_warp li a .info span {
  transition: all 0.4s ease;
}

.nm_warp li a:hover .info i {
  transform: rotate(5deg);
  filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3));
}

.nm_warp li a:hover .info span {
  padding-left: 10px;
}


@media (max-width: 1240px) {
  .nm_warp li {
    margin: 27px 0 0;
  }
  
  .nm_warp li a .info i {
    font-size: 40px;
	right: 15px;
    top: 35px;
  }
}

/* 태블릿 (768px ~ 1024px) */
@media (max-width: 1100px) {
  .nm_warp {
    gap: 15px;
  }
  
  .nm_warp li {
    flex: 0 0 calc(50% - 7.5px);
    min-height: 200px;
    border-radius: 15px;
    margin: 30px 0 0;
  }
  
  .nm_warp li:nth-child(2) a .info {
    padding: 30px 25px;
    min-height: 200px;
  }
  
  .nm_warp li a .info .tit {
    font-size: 22px;
  }
  
  .nm_warp li a .info .baro {
    padding: 40px 0 0;
  }
  
  .nm_warp li a .info i {
    font-size: 45px;
    right: 25px;
    top: 28px;
  }
}

/* 모바일 (767px 이하) */
@media (max-width: 767px) {
  .nm_warp {
    gap: 12px;
  }
  
  .nm_warp li {
    flex: 0 0 100%;
    min-height: 250px;
    border-radius: 12px;
    margin: 20px 0 0;
  }
  
  .nm_warp li:nth-child(2) a .info {
    padding: 30px 25px;
    min-height: 250px;
  }
  
  .nm_warp li img {
    border-radius: 12px;
    min-height: 250px;
  }
  
  .nm_warp li a .info .tit {
    font-size: 22px;
    line-height: 1.5;
  }
  
  .nm_warp li a .info .baro {
    margin-top: auto;
    padding: 0;
  }
  
  .nm_warp li a .info i {
    font-size: 45px;
    right: 25px;
    top: 30px;
  }
}

/* 작은 모바일 (480px 이하) */
@media (max-width: 480px) {
  .nm_warp li {
    min-height: 220px;
  }
  
  .nm_warp li:nth-child(2) a .info {
    padding: 25px 20px;
    min-height: 220px;
  }
  
  .nm_warp li img {
    min-height: 220px;
  }
  
  .nm_warp li a .info .tit {
    font-size: 20px;
  }
  
  .nm_warp li a .info i {
    font-size: 40px;
    right: 20px;
    top: 25px;
  }
}

.visual .visualInner .right{width:calc(50% - 20px); overflow:hidden; float:none; display:flex; flex-direction:column; padding:0; margin:0; box-sizing:border-box;}

/* 우측 상단 묶음(바로가기 2x2 + 로그인): 기본은 세로 스택(모바일), 데스크톱에서 가로 2단 */
.visual .visualInner .right .rightTop{display:flex; flex-direction:column; gap:17px; min-width:0;}
.visual .visualInner .right .baroGrid{display:grid; grid-template-columns:1fr 1fr; gap:12px; min-width:0;}
.visual .visualInner .right .baroGrid a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:#fff; border:1px solid #d6d6d6; border-radius:20px; padding:16px 8px; text-align:center; color:#232323; text-decoration:none; box-sizing:border-box; min-width:0; transition:all 0.25s ease;}
.visual .visualInner .right .baroGrid a .icon{display:block; line-height:0;}
.visual .visualInner .right .baroGrid a .icon img{width:58px; height:58px; object-fit:contain; transition:transform 0.25s ease;}
.visual .visualInner .right .baroGrid a p{margin:0; padding:0; font-size:22px; font-weight:600; line-height:1.25; word-break:keep-all;}
.visual .visualInner .right .baroGrid a:hover{border-color:#9dc23f; background:#f7fbee; color:#557f00; text-decoration:none;}
.visual .visualInner .right .baroGrid a:hover .icon img{transform:translateY(-2px);}

/* .left 하단 라인에 맞추기: 남는 높이를 contDiv1 이 채움 */
.visual .visualInner .right .contDiv1{flex:1 1 auto; display:flex; flex-direction:column; gap:0; padding:0; margin:17px 0 0;}
.visual .visualInner .right .contDiv1 > a{flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center; box-sizing:border-box;}

/* 로그인 전/후 높이 통일: 아래 --cd2-min-height 값 하나만 조절하면 됩니다 */
.visual .visualInner .right .contDiv2{--cd2-min-height:240px; display:block; padding:25px; margin:0; background:#fff; border-radius:20px; border:1px solid #d6d6d6; box-sizing:border-box; min-height:var(--cd2-min-height);}
.visual .visualInner .right .contDiv2 h3 {
  font-size:clamp(16px, 2.5vw, 25px);
  font-weight:400;
}

.visual .visualInner .right .contDiv2 .cd2_L{width:49%; display:flex; flex-direction:column; gap:16px; padding:40px 30px 38px; margin:0; border:1px solid #d6d6d6; border-radius:20px; background:#fff;}
.cd2_L .cd2_L_icon a{display:flex; align-items:center; padding:42px 50px 42px 65px; background:#fff; border:1px solid #d6d6d6; color:#232323; border-radius:20px; margin:0; flex:1; transition:all 0.3s ease; text-decoration:none;}
.cd2_L .cd2_L_icon a .icon{width:25%; display:block; padding:0; margin:0 20px 0 0; flex-shrink:0; transition:transform 0.3s ease;}
.cd2_L .cd2_L_icon a .icon img{max-width:100%; width:100%; display:block;}
.cd2_L .cd2_L_icon a p{flex:1; font-size:20px; padding:0; margin:0; font-weight:600;}
.cd2_L .cd2_L_icon a p span{font-size:14px; display:block; padding:10px 0 0; font-weight:500; color:#777;}
.cd2_L .cd2_L_icon a:hover{border:1px solid var(--point-color); box-shadow:0 0 0 2px inset var(--point-color);}
.cd2_L .cd2_L_icon a:hover .icon{transform:rotate(-7deg);}
.cd2_L .cd2_L_icon a:hover p{color: var(--point-color2);}

.cd2_L .head{display:block; overflow:hidden; padding:0;  margin:0 0 20px;}
.cd2_L .head h3{font-size:32px; line-height:1.3; font-weight:800; color:#424242; margin:0 15px 0 0; display:block;}
.cd2_L .head span{display:block; font-size:14px; line-height:1.3; color:#777; padding:7px 0 0; margin:0;}

.visual .visualInner .right .contDiv2 .cd2_R{width:49%; display:flex; flex-direction:column; gap:16px; padding:40px 30px 38px; margin:0; border:1px solid #d6d6d6; border-radius:20px; background:#fff;}
/* .visual .visualInner .right .contDiv2 .cd2_R img {
	object-fit: cover;
	max-width: 100%;
	width: 100%;
	height: 100%;
	object-position: center;
	border-radius: 20px;
	display: block;
}*/
.cd2_R .head{display:block; overflow:hidden; padding:0;  margin:0 0 20px;}
.cd2_R .head h3{font-size:32px; line-height:1.3; font-weight:800; color:#424242; margin:0 15px 0 0; display:block;}
.cd2_R .head span{display:block; font-size:14px; line-height:1.3; color:#777; padding:7px 0 0; margin:0;}

/* 태블릿 (1024px 이하) */
/* ===== 데스크톱(1025px 이상) : 좌 50% 슬라이더 4:3 / 우측 로그인+배너 재배치 =====
   좌측 박스를 aspect-ratio 4/3 으로 고정하고 슬라이더는 absolute+inset 으로 채움
   (위젯 캐시에 구버전 인라인 치수가 남아 있어도 4:3 이 보장됨).
   우측은 로그인 카드(위) + 배너(아래, 남는 높이 전부)로 좌측 하단 라인과 맞춤.
   height:100% 퍼센트 체인은 flex 높이에서 무너지므로 absolute+inset 방식 사용
   (701~1024 2단 구간에서 검증된 처방과 동일) */
@media (min-width:1101px) {
  .visual .visualInner .left {
    position:relative;
    aspect-ratio:4 / 3;
  }
  .visual .visualInner .left .effectSlider_Container {
    position:absolute !important;
    inset:0 !important;
    width:auto !important;
    height:auto !important;
    max-width:none !important;
    aspect-ratio:auto !important;
  }
  .visual .visualInner .left .effectSlider_Container .slider-viewport {
    width:100% !important;
    height:100% !important;
    aspect-ratio:auto !important;
  }

  /* 상단 묶음: 좌 바로가기 2x2 / 우 로그인 카드 (반반)  메인 로딩 pc 초기화면 설정 적용 부분*/
  .visual .visualInner .right .rightTop {
    flex:4 1 0;               /* 상단 묶음 40 : 하단 배너 60 분할 */
    flex-direction:row;
    align-items:stretch;
    gap:14px;
  }
  .visual .visualInner .right .rightTop .baroGrid,
  .visual .visualInner .right .rightTop .contDiv2 {
    flex:1 1 calc(50% - 7px);
    max-width:calc(50% - 7px);
    box-sizing:border-box;
    min-width:0;
  }
  .visual .visualInner .right .rightTop .baroGrid {
    grid-template-rows:1fr 1fr; /* 두 줄이 상단 높이를 균등하게 채움 */
    gap:10px;
  }
  .visual .visualInner .right .rightTop .baroGrid a {
    padding:8px 6px;
    gap:6px;
    border-radius:14px;
  }
  .visual .visualInner .right .rightTop .baroGrid a .icon img {
    width:50px;
    height:50px;
  }
  .visual .visualInner .right .rightTop .baroGrid a p {
    font-size:16px;
  }

  /* 로그인 카드 압축: 상단 절반(약 285px) 안에 들어가도록 여백/치수 축소 */
  .visual .visualInner .right .contDiv2 { padding:12px 15px; min-height:0; }
  .visual .visualInner .right .contDiv2 h3 { margin:0; font-size:18px !important; }
  .visual .visualInner .right .contDiv2 .login_default { padding-top:6px; font-size:13.5px; }
  /* 입력창 좌측 스택 + 로그인 버튼 우측(두 입력창 높이 스팬) 배치로 세로 공간 확보 */
  .visual .visualInner .right .contDiv2 .login_default fieldset .idpwWrap { display:flex; gap:8px; align-items:flex-start; }
  .visual .visualInner .right .contDiv2 .login_default fieldset .idpw { flex:1 1 auto; width:auto; min-width:0; float:none; }
  .visual .visualInner .right .contDiv2 .login_default fieldset .idpw input[type=text],
  .visual .visualInner .right .contDiv2 .login_default fieldset .idpw input[type=password] { height:34px; line-height:32px; margin-bottom:0; font-size:13.5px; border-radius:7px; padding:0 11px; }
  .visual .visualInner .right .contDiv2 .login_default fieldset .idpw input[type=password] { margin-top:7px; }
  .visual .visualInner .right .contDiv2 .login_default fieldset .login {
    flex:0 0 76px; width:76px; height:75px; /* 입력창 2개(34+34)+간격(7) 높이와 일치 */
    line-height:normal; margin:0; padding:0;
    font-size:14.5px; font-weight:600; border-radius:8px; letter-spacing:0;
  }
  .visual .visualInner .right .contDiv2 .login_default fieldset p.keep { margin:7px 0 0; }
  .visual .visualInner .right .contDiv2 .login_default fieldset p.keep label { font-size:12.5px; }
  .visual .visualInner .right .contDiv2 .login_default fieldset ul.help { margin-top:8px; padding-top:8px; }

  /* 로그인 후 카드: 하단 빈 공간 없이 세로 균등 배분 - 아이디 줄과 메뉴가 카드 바닥선까지 채움 */
  .visual .visualInner .right .contDiv2 { display:flex; flex-direction:column; }
  .visual .visualInner .right .contDiv2 h3 { flex:0 0 auto; }
  /* 위젯 출력이 래퍼 div 이든 form 직접이든 모두 스트레치 (script 태그는 제외) */
  .visual .visualInner .right .contDiv2 > form.login_default,
  .visual .visualInner .right .contDiv2 > div { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
  .visual .visualInner .right .contDiv2 .login_default.logged_in { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
  .visual .visualInner .right .contDiv2 .login_default.logged_in fieldset { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
  .visual .visualInner .right .contDiv2 .login_default.logged_in fieldset .userName { flex:0 0 auto; margin-top:4px; }
  .visual .visualInner .right .contDiv2 .login_default.logged_in fieldset ul.userMenu {
    flex:1 1 auto;
    grid-auto-rows:1fr;      /* 메뉴 행들이 남는 높이를 균등하게 나눠 가짐 */
    align-content:stretch;
    margin-top:12px;
    min-height:0;
  }
  .visual .visualInner .right .contDiv2 .login_default.logged_in .logged_btn a { height:100%; box-sizing:border-box; }
  .visual .visualInner .right .contDiv2 .login_default fieldset ul.help li a { font-size:12.5px; }

  /* 하단 배너: 좌측 슬라이드 높이의 약 60% */
  .visual .visualInner .right .contDiv1 {
    position:relative;
    flex:6 1 0;
    min-height:200px; /* 로그인 후처럼 상단이 길어져도 배너 비중 유지 */
  }
  .visual .visualInner .right .contDiv1 .effectSlider_Container {
    position:absolute !important;
    inset:0 !important;
    width:auto !important;
    height:auto !important;
    max-width:none !important;
    aspect-ratio:auto !important;
  }
  .visual .visualInner .right .contDiv1 .effectSlider_Container .slider-viewport {
    width:100% !important;
    height:100% !important;
    aspect-ratio:auto !important;
  }
}

@media screen and (max-width: 1100px) {
  .visual .sec01_top_tit {
    font-size: 40px;
  }

  .visual .visualInner {
    padding: 0 15px;
    margin: 35px auto 25px;
    flex-direction: column; /* 좌우 배치가 위아래로 바뀌는 구간 */
  }

  /* 세로 배치에서는 높이 맞춤 해제 */
  .visual .visualInner .right .contDiv1 {
    flex: 0 0 auto;
  }

  .visual .visualInner .left {
    width: 100%;
    float: none;
    margin-bottom: 20px;
  }

  .visual .visualInner .right {
    width: 100%;
    float: none;
  }

  .visual .visualInner .right .contDiv1 > a {
    padding: 35px 10px;
  }

  .visual .visualInner .right .contDiv1 > a .icon {
    width: 45%;
  }

  .visual .visualInner .right .contDiv1 > a p {
    font-size: 17px;
  }

  .cd2_L .cd2_L_icon a {
    padding: 30px 40px 30px 50px;
  }

  .cd2_L .cd2_L_icon a .icon {
    width: 30%;
  }

  .cd2_L .cd2_L_icon a p {
    font-size: 18px;
  }
  
  .cd2_L .head h3 {
	font-size:28px;
  }

  .cd2_R .head h3 {
    font-size: 28px;
  }
}

/* 태블릿~중간 폭: 좌우 배치가 세로로 바뀐 구간(1024px 이하)에서
   우측 콘텐츠(로그인 contDiv2 + 배너 슬라이더 contDiv1)를 2단 나란히 배치.
   화면이 더 좁아지면(700px 이하) 기존대로 세로 스택으로 복귀 */
@media (min-width:701px) and (max-width:1100px) { /* v171: 비주얼 우측컬럼 전환점 통일 */
  /* fix: 태블릿 구간 재배치 - [아이콘 2x2 | 로그인] 2단 + 배너 슬라이드 전폭 1단
     (기존 rightTop|배너 반반 구조에서 배너 이미지가 절반 폭 박스에 잘리던 문제) */
  .visual .visualInner .right {
    flex-direction: column;
    gap: 15px;
  }
  .visual .visualInner .right .rightTop {
    flex-direction: row; /* 아이콘 | 로그인 나란히 2단 */
    align-items: stretch;
    gap: 15px;
    flex: none;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
  }
  .visual .visualInner .right .rightTop .baroGrid,
  .visual .visualInner .right .rightTop .contDiv2 {
    flex: 1 1 calc(50% - 8px);
    max-width: calc(50% - 8px);
    box-sizing: border-box;
    min-width: 0;
    margin: 0;
  }
  .visual .visualInner .right .rightTop .baroGrid {
    grid-template-rows: 1fr 1fr; /* 카드 두 줄이 로그인 카드 높이를 균등 채움 */
  }
  /* 배너 슬라이드: 전폭 1단 - absolute inset 방식 해제, 위젯 자체 비율로 표시 */
  .visual .visualInner .right .contDiv1 {
    position: relative;
    flex: none;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    min-height: 0;
  }
  .visual .visualInner .right .contDiv1 .effectSlider_Container {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  .visual .visualInner .right .contDiv1 .effectSlider_Container .slider-viewport {
    width: 100% !important;
    height: auto !important;
  }

}

/* 모바일 (768px 이하) */
@media screen and (max-width: 768px) {
  .visual {
    padding: 10px 0;
  }

  .visual .sec01_top_tit {
    font-size: 32px;
  }

  .visual .visualInner {
    padding: 0 15px;
    margin: 25px auto 20px;
  }

  /* contDiv1: 예전 아이콘 4종용 2열 grid 였으나 현재는 슬라이더 위젯이 들어있어 단일 블록으로 */
  .visual .visualInner .right .contDiv1 {
    display: block;
  }

  .visual .visualInner .right .contDiv1 > a {
    padding: 30px 10px;
  }

  .visual .visualInner .right .contDiv1 > a .icon {
    width: 40%;
  }

  .visual .visualInner .right .contDiv1 > a p {
    font-size: 15px;
    padding: 15px 0 0;
  }

  .visual .visualInner .right .contDiv2 {
    padding: 20px 18px;  /* 로그인 위젯이 카드 모서리에 붙지 않도록 좌우·하단 패딩 복원 */
    min-height: 0; /* 모바일에서는 세로 배치라 높이 고정 해제 */
  }

  /* cd2_L을 2열로 변경 */
  .visual .visualInner .right .contDiv2 .cd2_L {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .cd2_L .head h3 {
    font-size: 24px;
    margin: 0;
    display: block;
  }
  .cd2_L .cd2_L_icon {
    flex: 0 0 calc(50% - 8px);
  }

  .cd2_L .cd2_L_icon a {
    padding: 25px 15px;
    flex-direction: column;
    text-align: center;
  }

  .cd2_L .cd2_L_icon a .icon {
    width: 40%;
    margin: 0 auto 15px;
  }

  .cd2_L .cd2_L_icon a p {
    font-size: 15px;
  }

  .cd2_L .cd2_L_icon a p span {
    font-size: 12px;
    padding: 8px 0 0;
  }

  .visual .visualInner .right .contDiv2 .cd2_R {
    width: 100%;
  }

  .cd2_R .head {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .cd2_R .head h3 {
    font-size: 24px;
    margin: 0;
    display: block;
  }

  .cd2_R .head span {
    width: 100%;
    float: none;
    padding: 0;
    display: block;
  }
}

/* 작은 모바일 (480px 이하) */
@media screen and (max-width: 480px) {
  .visual {
    padding: 0px 0;
  }

  .visual .sec01_top_tit {
    font-size: 28px;
  }

  .visual .visualInner .right .contDiv1 > a {
    padding: 25px 8px;
  }

  .visual .visualInner .right .contDiv1 > a .icon {
    width: 45%;
  }

  .visual .visualInner .right .contDiv1 > a p {
    font-size: 14px;
  }

  .cd2_L .cd2_L_icon a {
    padding: 20px 10px;
  }

  .cd2_L .cd2_L_icon a .icon {
    width: 45%;
  }

  .cd2_L .cd2_L_icon a p {
    font-size: 14px;
  }

  .cd2_L .cd2_L_icon a p span {
    font-size: 11px;
  }

  .cd2_R .head h3 {
    font-size: 22px;
  }

  .cd2_R .head span {
    font-size: 13px;
  }
}

/****************content2 type2****************/
.content2_wrap {
  width: 100%;
  max-width:var(--site-w, 1560px);
  padding: 0 20px;
  margin: 0px auto;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap; /* 폭이 좁아지면 다음 줄로 접히도록 */
  gap: 20px;
  align-items: stretch; /* 높이도 동일하게 */
}

.content2_wrap dl {
  /* 4개 배치: gap 20px * 3 = 60px 를 4등분(15px)해서 뺀 값 */
  flex: 1 1 calc(25% - 15px);
  min-width: 0; /* 긴 텍스트/URL이 flex item을 밀어내는 것 방지 */
  box-sizing: border-box; /* padding 포함해서 너비 계산 */
  border: 1px solid #d6d6d6;
  border-radius: 0.4rem;
  padding: 35px;
  background-color: #f6f6f6; /* 배경 이미지 넣기 전 임시 색 */
  /* 상단(글자 영역)은 흰색, 아래로 갈수록 투명 → 이미지가 비침 */
  overflow-wrap: break-word; /* 긴 URL 강제 줄바꿈 */
  word-break: break-all;     /* 공백 없는 긴 문자열(URL 등) 대응 */
  background-repeat: no-repeat;
  background-size: auto, cover;
  background-position: center, center bottom;
}
.content2_wrap dl:nth-child(1) {
   background-image: linear-gradient(to bottom, #f7f7f7 0%, #fefefe 38%, rgba(255,255,255,0) 72%), url('../img/main_cont2_bg1.jpg');
}
.content2_wrap dl:nth-child(2) {
   background-image: linear-gradient(to bottom, #f7f7f7 0%, #fefefe 38%, rgba(255,255,255,0) 72%), url('../img/main_cont2_bg2.jpg');
}
.content2_wrap dl:nth-child(3) {
   background-image: linear-gradient(to bottom, #f7f7f7 0%, #fefefe 38%, rgba(255,255,255,0) 72%), url('../img/main_cont2_bg3.jpg');
}
.content2_wrap dl:nth-child(4) {
   background-image: linear-gradient(to bottom, #f7f7f7 0%, #fefefe 38%, rgba(255,255,255,0) 72%), url('../img/main_cont2_bg4.jpg');
}
.content2_wrap dl .tit {
  font-size: clamp(23px, 2.2vw, 30px); /* 섹션 제목 확대: 아래 게시글 제목과 위계 구분 */
  font-weight:800;
  line-height:1.25;
  letter-spacing:-0.5px;
  margin:0 0 10px;
}
.content2_wrap dl .tit a {
  color:#333 !important;
}

/* 화면이 컨테이너보다 좁아지면 좌우 여백 확보 */
@media (max-width: 1550px) {
  .content2_wrap {
    padding: 0 20px;
  }
}

/* 4개 -> 2개 (gap 20px 를 2등분(10px)해서 뺀 값) */
@media (max-width: 1240px) {
  .content2_wrap dl {
    flex-basis: calc(50% - 10px);
  }
}

/* 2개 -> 1개 */
@media (max-width: 600px) {
  .content2_wrap {
    gap: 15px;
  }
  .content2_wrap dl {
    flex-basis: 100%;
    padding: 25px;
  }
}

/****************sec_02 type2****************/
.sec02_wrap{width:100%; max-width:100%; padding:0; margin:0; position:relative; display:block;}
.sec02_wrap:before{content:''; position:absolute; width:100vw; height:100%; min-width:280px; border-radius:0 55px 170px 0; background:#f1f7f1; top:0; right:23%; z-index:-1;}
.sec02_cont{width:100%; max-width:1450px; display:block; overflow:hidden; padding:85px 15px 100px; margin:0px auto;}
.sec02_cont .title_div{width:100%; max-width:1320px; border-bottom:0px; display:block; padding:15px 0px 25px; margin:0 auto; position:relative; z-index:5;}
.sec02_cont .title_div > .title{font-size:40px; color:#333; font-weight:700; margin:0; padding:0; line-height:1.3;}
.sec02_cont .title_div > .title_more{float:right; color:#333; font-size:15px; font-weight:500; font-family:var(--font-base); margin:0; padding:0px; display:inline-block; position:absolute; border:2px solid #ebebeb; border-radius:100px; width:85px; line-height:28px; right:0; top:20px; text-align:center; background:#fff;}
.sec02_cont .title_div > .title_more:before{content:"+"; font-size:16px; font-weight:700; color:#da4616; margin-right:10px;}
.sec02_cont .title_div > .title span{color:var(--point-color2);}
.sec02_cont .title_div >  p{display:inline-block; font-size:16px; line-height:1.5; font-weight:400; color:#999; margin-left:12px;}

@media( max-width:768px ){
	.sec02_wrap:before{border-radius:0 35px 170px 0;}
	.sec02_cont{width:90%; max-width:100%; padding:50px 0px 50px;}
	.sec02_cont .title_div{max-width:100%;}
	.sec02_cont .title_div > .title{font-size:25px;}
	.sec02_cont .title_div >  p{display:block; font-size:14px; margin:10px 0 0 0px;}
}
@media( max-width:380px ){
	.sec02_cont{padding:35px 0px 50px;}
	.sec02_cont .title_div > .title{font-size:24px;}
	.sec02_cont .title_div > .title_more{font-size:13px; width:75px; line-height:26px; top:18px;}
	.sec02_cont .title_div >  p{font-size:13px;}
}

/****************sec_03 type2****************/
.main_sec03 {position:relative; z-index:1; display:flex; flex-wrap:wrap;}
.at-container {max-width:1320px; margin:0px auto; padding:100px 15px;}
.main_sec03:before{content:""; width:625px; height:507px; background:url(/outpage/img/main_sec03_back.png) no-repeat center / contain; position:absolute; top:0px; left:calc(100% - 150px); z-index:-1;}
.main_sec03 .left_box{margin-right:40px;}
.main_sec03 > div{width:calc(50% - 20px);}
.main_sec03 .right_box ul{display:flex; flex-wrap:wrap; position:relative; background:#fff;}
.main_sec03 .right_box ul:before {content:""; width:58px; height:79px; background:url("") no-repeat center / contain; position:absolute; left:-46px; bottom:20px; z-index:1;}
.main_sec03 .right_box ul li.info{background:url("") no-repeat right center;}
.main_sec03 .right_box ul li:nth-child(2n+1){border-left:1px solid #dedede;}
.main_sec03 .right_box ul li:nth-child(-n+2){border-top:1px solid #dedede;}
.main_sec03 .right_box ul li a{display:block; width:100%; padding:55px 40px; color:#222;}
.main_sec03 .right_box ul li:nth-child(4) a{color:#fff;}
.main_sec03 .right_box ul li{display:flex; align-items:center; width:50%; border-right:1px solid #dedede; border-bottom:1px solid #dedede;}
.main_sec03 .right_box ul li a strong{display:block; font-size:22px; line-height:1.2; font-weight:600; margin-bottom:15px;}
.main_sec03 .right_box ul li a p{font-size:15px; line-height:1.5; color:#999;}
.main_sec03 .right_box ul li:nth-child(4) a p{color:#fff;}
.main_sec03 .right_box ul li a p span{margin-left:10px; transition:all 0.3s;}
.main_sec03 .right_box ul li a:hover p span{margin-left:15px;}
.main_sec03 .right_box ul:after{content:""; width:79px; height:182px; background:url(https://ojwelfare.or.kr/thema/Basic/img/main_sec03_fav03.png) no-repeat center / contain; position:absolute; right:-25px; top:-40px;}
.main_sec03 .right_box ul li.map{background:#fa8d66;}

.main_sec03 .title_div{width:100%; max-width:1320px; border-bottom:0px; display:block; padding:15px 0px 25px; margin:0 auto;}
.main_sec03 .title_div > .title{font-size:35px; color:#333; font-weight:700; margin:0; padding:0; line-height:1.3;}
.main_sec03 .title_div > .title_more{float:right; color:#333; font-size:15px; font-weight:500; font-family:var(--font-base); margin:0 50px 0 0; padding:6px 13px; display:inline-block; position:relative; border:2px solid #ebebeb; border-radius:100px; background:#fff;}
.main_sec03 .title_div > .title_more:before{content:"+"; font-size:16px; font-weight:700; color:#da4616; margin-right:10px;}
.main_sec03 .title_div > .title span{color:var(--point-color3);}
.main_sec03 .title_div > p{display:inline-block; font-size:16px; line-height:1.5; color:#999; margin-left:15px;}

@media( max-width:1080px ){
	.at-container {max-width:100%;}
	.main_sec03 .left_box{margin-right:0px;}
	.main_sec03 > div{width:calc(50% - 30px); margin:0 15px;}
}
@media( max-width:768px ){
	.at-container {max-width:90%; padding:50px 0px;}
	.main_sec03 > div{width:calc(100% - 0px);}
	.main_sec03 .left_box{margin-right:0px; margin-bottom:35px;}
	.main_sec03 .left_box img{width:100%; max-width:100%;}
	.main_sec03 .right_box ul li{width:100%;}
	.main_sec03 .right_box ul li:nth-child(1){border-top:1px solid #dedede !important;}
	.main_sec03 .right_box ul li:nth-child(2n+2){border-left:1px solid #dedede;}
	.main_sec03 .right_box ul li:nth-child(-n+2){border-top:0px solid #dedede;}
	.main_sec03 .right_box ul li a{padding:30px 25px;}
	.main_sec03 .right_box ul li a strong{font-size:18px; margin-bottom:10px;}
	.main_sec03 .right_box ul li a p{font-size:14px;}
	.main_sec03 .title_div{max-width:100%;}
	.main_sec03 .title_div > .title{font-size:25px;}
	.main_sec03 .title_div > .title_more{margin:0 0px 0 0;}
	.main_sec03 .title_div > p{display:block; font-size:14px; margin:10px 0 0 0px; }
}
@media( max-width:380px ){
	.main_sec03 .right_box ul li a strong{font-size:16px; margin-bottom:7px;}
	.main_sec03 .right_box ul li a p{font-size:13px;}
	.main_sec03 .title_div > .title{font-size:24px;}
	.main_sec03 .title_div > .title_more{font-size:13px; padding:5px 10px;}
	.main_sec03 .title_div >  p{font-size:13px;}
}


/****************sec_01****************/
#sec_01{ position:relative; background-color:#afdcef;}
#sec_01 .swiper-container{ min-height:25vw; height:100%; }
.sec01_sli{ min-height:25vw; height:25vw; background-color:#afdcef;background-size:cover; background-position:center; background-repeat:no-repeat; padding:0px 0px 0px; justify-content:center; align-items:center;}

.sec01_sli_txt{ max-width:950px; width:100%; text-align:center; margin-top:20px;}
.sec01_sli_txt > h1,
.sec01_sli_txt > p,
.sec01_sli_txt > a {
  opacity:0;
  transform:translate(0,50px);
  animation: fadeUp 1s ease forwards; /* 애니메이션 없음 */
}
.sec01_sli_txt > h1{font-size:33px; text-align:center; font-weight:700;line-height:1.5; margin-top:0; letter-spacing:-1px; filter:drop-shadow(5px 5px 5px rgba(0,0,0,1));}

.sec01_sli_txt > p{ font-size:45px; font-weight:700;text-align:center; line-height:1.6; margin-top:0px; filter:drop-shadow(5px 5px 5px rgba(0,0,0,1));}
.sec01_sli_txt > a{ color:#fff; /**display:inline-block;*/ display:none; padding-right: 30px; position: relative; margin-top: 40px;}

/* 처음 등장할 때만 애니메이션 */
.sec01_sli_txt.first-animate > h1 {
  opacity:0;
  transform:translate(0,50px);
  transition:0.8s transform 0.8s, 0.6s opacity 0.8s;
}
.sec01_sli_txt.first-animate > p {
  opacity:0;
  transform:translate(0,50px);
  transition:0.8s transform 1s, 0.6s opacity 1s;
}
.sec01_sli_txt.first-animate > a {
  opacity:0;
  transform:translate(0,50px);
  transition:0.8s transform 1.2s, 0.6s opacity 1.2s;
}

.swiper-slide-active .sec01_sli_txt.first-animate > h1,
.swiper-slide-active .sec01_sli_txt.first-animate > p,
.swiper-slide-active .sec01_sli_txt.first-animate > a {
  transform:translate(0,0);
  opacity:1;
}

/* ---- 타이틀 수정 ----------------------- */
.sec01_sli_txt2{ font-family:var(--font-base); max-width:1240px; width:100%; margin-top:0px;}
.sec01_sli_txt2 .box{max-width:450px; width:100%; padding:75px 20px; float:right; display:block; background:url(/outpage/img/mainimg_box.png)no-repeat;}
.sec01_sli_txt2 .box > h1,
.sec01_sli_txt2 .box > p,
.sec01_sli_txt2 .box > a {
  opacity:0;
  transform:translate(0,50px);
  animation: fadeUp 1s ease forwards; /* 애니메이션 없음 */
}
.sec01_sli_txt2 .box > h1{font-family:var(--font-base);font-size:48px; text-align:center; font-weight:700;line-height:1.5; margin-top:0; letter-spacing:-2px; color:#023082 !important;}

.sec01_sli_txt2 .box > p{ font-size:23px !important; font-weight:500;text-align:center; line-height:1.5; margin-top:20px; color:#023082 !important; letter-spacing:-1px !important;}
.sec01_sli_txt2 .box > a{ font-family:var(--font-base); color:#fff; /**display:inline-block;*/ display:none; padding-right: 30px; position: relative; margin-top: 40px;}

@media(max-width:1480px){
	#sec_01 .swiper-container{min-height:39vw;}
	.sec01_sli{min-height:39vw; height:39vw;}
	.sec01_sli_txt2 .box{background-size:100%; padding:65px 0px; max-width:400px;}
	.sec01_sli_txt2 .box > h1{font-size:42px;}
	.sec01_sli_txt2 .box > p{ font-size:20px !important;}
}
@media(max-width:1240px){
	#sec_01 .swiper-container{min-height:43.6vw;}
	.sec01_sli{min-height:43.6vw; height:43.6vw;}
	.sec01_sli_txt2{max-width:100%; width:95%;}
}
@media(max-width:1080px){
	#sec_01 .swiper-container{min-height:36vw;}
	.sec01_sli{min-height:36vw; height:36vw;}
}
@media(max-width:1100px){ /* v171 */
	#sec_01 .swiper-container{min-height:39vw;}
	.sec01_sli{min-height:39vw; height:39vw;}
	.sec01_sli_txt2 .box{background:none;}
}
@media(max-width:991px){
	section.main_sec{padding:90px 0 0;}
	.sec01_sli_txt2 .box{max-width:350px;}
	.sec01_sli_txt2 .box > h1{font-size:38px;}
	.sec01_sli_txt2 .box > p{ font-size:19px !important; margin-top:10px;}
}
@media(max-width:850px){
	#sec_01 .swiper-container{min-height:70.5vw !important;}
	.sec01_sli{min-height:70.5vw !important; height:70.5vw !important; background-position:left -235px top 0 !important; padding:90px 0 !important; position:relative;}
	.sec01_sli:before{content:''; position:absolute; width:100%; height:100%; background:rgba(0, 0, 0, 0.3); left:0; top:0;}
	.sec01_sli_txt2 .box{float:none; margin:0 auto; padding:0;}
	.sec01_sli_txt2 .box > h1{color:#fff !important; filter:drop-shadow(5px 5px 5px rgba(0,0,0,1));}
	.sec01_sli_txt2 .box > p{color:#fff !important; filter:drop-shadow(5px 5px 5px rgba(0,0,0,1));}
}
@media(max-width:768px){
	.sec01_sli{background-position:left -215px top 0 !important;}
}
@media(max-width:650px){
	.sec01_sli{background-position:left -185px top 0 !important;}
	.sec01_scr{display:none;}
}
@media(max-width:430px){
	#sec_01 .swiper-container{min-height:75vw !important;}
	.sec01_sli{min-height:75vw !important; height:75vw !important; background-position:left -155px top 0 !important;}
}
@media(max-width:390px){
	section.main_sec{padding:85px 0 0;}
	#sec_01 .swiper-container{min-height:90vw !important;}
	.sec01_sli{min-height:90vw !important; height:90vw !important; background-position:left -175px top 0 !important;}
	.sec01_sli_txt2 .box > h1{font-size:32px !important;}
	.sec01_sli_txt2 .box > p{font-size:17px !important;}
}

/* 처음 등장할 때만 애니메이션 */
.sec01_sli_txt2.box.first-animate > h1 {
  opacity:0;
  transform:translate(0,50px);
  transition:0.8s transform 0.8s, 0.6s opacity 0.8s;
}
.sec01_sli_txt2.box.first-animate > p {
  opacity:0;
  transform:translate(0,50px);
  transition:0.8s transform 1s, 0.6s opacity 1s;
}
.sec01_sli_txt2.box.first-animate > a {
  opacity:0;
  transform:translate(0,50px);
  transition:0.8s transform 1.2s, 0.6s opacity 1.2s;
}

.swiper-slide-active .sec01_sli_txt2.box.first-animate > h1,
.swiper-slide-active .sec01_sli_txt2.box.first-animate > p,
.swiper-slide-active .sec01_sli_txt2.box.first-animate > a {
  transform:translate(0,0);
  opacity:1;
}

@keyframes fadeUp {
  to {
    opacity:1;
    transform:translate(0,0);
  }
}

/**
.sec01_sli_txt{ font-family:var(--font-base); max-width:950px; width:100%; text-align:left; text-align:center;font-size:40px; margin-top:50px;}
.sec01_sli_txt > h1{font-family:var(--font-base);font-size:65px; text-align:center; font-weight:700;line-height:1.5; opacity:0; transform:translate(0, 50px); transition:0.8s transform 0.8s, 0.6s opacity 0.8s; margin-top:0%; letter-spacing:-2px; filter:drop-shadow(5px 5px 5px rgba(0,0,0,1));}  
@media(max-width:450px){
.sec01_sli_txt > h1{margin-top:10%;}
}
.sec01_sli_txt > p{ font-size:27px; font-weight:500;text-align:center; line-height:1.5; margin-top:20px; opacity:0; transform:translate(0, 50px); transition:0.8s transform 1s, 0.6s opacity 1s; filter:drop-shadow(2px 2px 2px rgba(0,0,0,1));}
.sec01_sli_txt > a{ font-family:var(--font-base);color:#fff; display:inline-block; padding-right: 30px; position: relative; margin-top: 40px; opacity:0; transform:translate(0, 50px);  transition:0.8s transform 1.2s, 0.6s opacity 1.2s; }

.sec01_sli_txt > a:after{ content: ''; position: absolute; top: 0; right: 0; border-top: 26px solid transparent; border-left:30px solid; border-bottom: 22px solid transparent; transition:0.4s border-color; }
.sec01_sli_txt > a p{ font-size: 16px; font-weight: 400; padding: 13px 36px; transition:0.4s background-color, 0.4s color; text-align:center;color:#fff !important;box-sizing:border-box;}
.sec01_sli_txt > a:hover:after{ border-left-color:#333; }
.sec01_sli_txt > a:hover p{ background-color:#333; }

.swiper-slide-active .sec01_sli_txt > h1{ transform:translate(0, 0); opacity:1; }
.swiper-slide-active .sec01_sli_txt > p{ transform:translate(0, 0); opacity:1; }
.swiper-slide-active .sec01_sli_txt > a{ transform:translate(0, 0); opacity:1; }
**/

.sec01_video{ position:absolute; top:0; bottom:0; left:0; right:0; z-index:1; }
.sec01_txt_wrap{ padding:170px 40px 140px; z-index:50; min-height:50.4688vw; }

.sec01_scr{ position:absolute; z-index:100; bottom:25px; left:50%; transform:translate(-50%, 0); text-align:center;  }
.sec01_scr > p{ font-size:12px; font-weight:400; color:#fff; margin-bottom:10px; }
.sec01_scr > div{ display:inline-block; width:35px; height:60px; border-radius:40px; border:2px solid #fff; position:relative; }
.sec01_scr > div:after{ content:''; width:7px; height:7px; border-radius:100%; background-color:#fff; position:absolute; top:15px; left:calc(50% - 2.5px); animation:2s scrmove infinite; -webkit-animation:2s scrmove infinite; -moz-animation:2s scrmove infinite; -o-animation:2s scrmove infinite; }


#sec01_page{ position:absolute; z-index:100; bottom:50px; left:auto; right:30px; width:auto;}
#sec01_page .swiper-pagination-bullet{ position:relative; width:40px; height:auto; font-family:'sh', serif; font-size:20px; font-weight:400; color:#fff; padding-bottom:15px; background:none; border-radius:0; opacity:1; text-align:center; }
#sec01_page .swiper-pagination-bullet:before{ content:''; position:absolute; bottom:0; left:0; width:100%; height:8px; background-color:#fff; transform:scaleY(0.4); transition-duration:0.6s; }
#sec01_page .swiper-pagination-bullet-active:before{ transform:scaleY(1);}



@-webkit-keyframes scrmove {
	0% { top:8px; opacity:1; }
	80% { top: 25px; opacity:0; }
	81%{ top:8px; opacity:0; }
	100%{ top:8px; opacity:1; }
}
@-o-keyframes scrmove {
	0% { top:8px; opacity:1; }
	80% { top: 25px; opacity:0; }
	81%{ top:8px; opacity:0; }
	100%{ top:8px; opacity:1; }
}
@-moz-keyframes scrmove {
	0% { top:8px; opacity:1; }
	80% { top: 25px; opacity:0; }
	81%{ top:8px; opacity:0; }
	100%{ top:8px; opacity:1; }
}
@keyframes scrmove {
	0% { top:8px; opacity:1; }
	80% { top: 25px; opacity:0; }
	81%{ top:8px; opacity:0; }
	100%{ top:8px; opacity:1; }
}

@media(max-width:850px){
	.sec01_sli{ padding:170px 30px 140px; }
	.sec01_sli_txt > h1{ font-size:45px; }
	.sec01_sli_txt > p{ font-size:16px; }
}

@media(max-width:520px){
	.sec01_sli{ padding:130px 30px; }
	.sec01_sli_txt > h1{ font-size:35px; }
	.sec01_sli_txt > p{ font-size:14px; }
	.sec01_sli_txt > a{ padding-right:25px; }
	.sec01_sli_txt > a p{ padding:12px 30px; }
	.sec01_sli_txt > a:after{ border-left-width:25px; border-top-width:23px; border-bottom-width:23px; }
}

/* 하단 sns바로가기 */
.baro-wrap {
	background-color: #f5f5f5;
	display: flex;
	justify-content: center;
	align-items: center;
}
.baro-container {
	display: flex;
	gap: 20px;
	padding: 20px;
	background-color: white;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}


/****************sec_02****************/
#sec_02{ padding:100px 20px;display:block;position:absolute;}
.sec02_title_wrap{ text-align:center; margin-bottom:80px; }
.sec02_title_wrap h1{ font-family:var(--font-base); font-size:36px; font-weight:700; color:#333; margin-bottom:10px; }
.sec02_title_wrap p{ font-size:15px; font-weight:300; color:#777; }
.sec02_pt.pt_right{ padding-left:75px; }
.sec02_left_title{ position:relative; padding-left:60px; padding-right:75px; word-break: keep-all; margin-bottom:40px; }
.sec02_left_title i{ position:absolute; top:5px; left:0; font-size:40px; }
.sec02_left_title h3{ font-size:17px; font-weight:400; color:#666; }
.sec02_sli_wrap{ padding-right:75px; position:relative; }
#sec02_sli .sec02_sli{ padding-bottom:66.66666666666667%; background-position:center; background-size:cover; background-repeat:no-repeat; cursor:pointer;}
.sec02_sli_wrap:after{ content:''; position:absolute; top:0; right:37px; width:1px; height:100%; background-color:#ebebeb; }
.sec02_sli_wrap #sec02_pagination{ z-index:20; width:auto; left:inherit; right:30px; top:0; padding-bottom:30px; background-color:#fff; }
.sec02_sli_wrap .swiper-pagination-bullet{ width:14px; height:14px; background-color:#ebebeb; margin:0 0 17px 0; border-radius:0; display:block; opacity:1; }
.sec02_sli_wrap .swiper-pagination-bullet:last-child{ margin-bottom:0; }
.sec02_sli_wrap h3{ font-size:23px; font-weight:400; color:#fff;padding:10px;position:relative;display:block;text-align:center;text-decoration:underline;padding:5px;}
.sec02_sli_wrap h3 p{text-shadow: 1px 1px 2px black;}

.pt_left{ transform:translate(-100px, 0); opacity:0; transition:1.4s transform, 1.4s opacity; }
.active.pt_left{ transform:translate(0, 0); opacity:1; }
.sec02_pt2_wrap{ margin:0 -20px; }
.sec02_pt2{ transform:translate(100px, 0); opacity:0; transition:0.8s transform, 0.8s opacity;}
.active .sec02_pt2{ transform:translate(0, 0); opacity:1; }
.sec02_pt2.delay_1{ transition-delay:0s; }
.sec02_pt2.delay_2{ transition-delay:0.2s; }
.sec02_pt2.delay_3{ transition-delay:0.4s; }
.sec02_pt2.delay_4{ transition-delay:0.6s; }
.sec02_pt2.delay_5{ transition-delay:0.8s; }

.sec02_pt2{ margin-bottom:20px; }
.sec02_pt2:last-child{width:100%;}
.sec02_pt2 i{ width:64px; height:64px; border-radius:100%; text-align:center; line-height:64px; font-size:30px; margin-bottom:20px; }
.sec02_pt2 h3{ font-size:18px; font-weight:400; color:#333; }
.sec02_pt2 > div{ width:60px; height:3px; margin:15px 0; }
.sec02_pt2 p{ font-size:14px; font-weight:300; color:#777; }


/****************sec_03****************/
#sec_03{ padding:100px 20px; background-size:cover; background-position:50% 100%;}
@media(max-width:450px){
#sec_03{ padding:75px 30px; background-position:55% 100% !important;}
}
#sec_03 .sec_con{ max-width:800px; }
.sec03_txt{ text-align:center; word-break:keep-all; transform:scale(1.2); opacity:0; transition:1.4s transform, 0.8s opacity;}
.active .sec03_txt{ transform:scale(1); opacity:1; }
.sec03_txt h3{ font-family:var(--font-base); font-size:16px; font-weight:400; margin-bottom:20px; }
.sec03_txt h1{ font-size:45px; font-weight:600; margin-bottom:10px; }
.sec03_txt p{ font-size:16px; font-weight:300; }
.sec03_txt > a{ font-family:var(--font-base); display:inline-block; padding-right: 30px; position: relative; margin-top:35px; }
.sec03_txt > a:after{ content: ''; position: absolute; top: 0; right: 0; border-top: 26px solid transparent; border-bottom: 26px solid transparent; transition-duration: 0.4s; }
.sec03_txt > a p{ font-size: 16px; font-weight: 400; padding: 15px 36px; transition-duration: 0.4s; }

/****************sec_04****************/
#sec_04{ padding:120px 50px; }
#sec_04 .sec_con{ max-width:100%; padding:85px 30px 115px; background-position:center; background-size:cover; background-repeat:no-repeat; }
.sec04_title_wrap{ text-align:center; margin-bottom:80px; }
.sec04_title_wrap h1{ font-family:var(--font-base); font-size:45px; font-weight:700; margin-bottom:10px; }
.sec04_title_wrap p{ font-size:15px; font-weight:300; }
.sec04_pt_wrap{ max-width:995px; width:100%; margin:0 auto; justify-content:center; }
.sec04_pt{ max-width:250px; width:100%; transition-duration:0.5s; position:relative; z-index:1; box-shadow:0 0 0 0 rgba(0,0,0,0.6); background-color:#fff; background-position:center; background-size:cover; background-repeat:no-repeat; }
.sec04_pt.selected{ transform:scale(1.1); z-index:3; box-shadow:3px 3px 6px 0 rgba(0,0,0,0.6); background-color:#333; }
.sec04_pt_in{ background-color:rgba(0,0,0,0.75); padding:60px 20px; text-align:center; transition-duration:0.5s; flex-direction:column; }
.sec04_pt.selected .sec04_pt_in{ background-color:transparent; }
.sec04_pt_ic{ font-size:65px; margin-bottom:25px;margin-top:30px; color:#fff; }
.sec04_pt.selected .sec04_pt_ic{ display:none; }
.sec04_pt_sub{ font-size:15px; font-weight:400; color:#999; margin-bottom:5px; transition-duration:0.5s; }
.sec04_pt.selected .sec04_pt_sub{ color:#fff; }
.sec04_pt_title{ font-size:26px; font-weight:400; color:#fff; transition-duration:0.5s; width:100%; }
.sec04_pt.selected .sec04_pt_title{ color:#fff; }
.sec04_pt_desc{ color:#fff; display:none; margin-top:10px; width:100%; }
.sec04_pt.selected .sec04_pt_desc{ display:block; }
.sec04_pt_cross{ position:relative; height:25px; margin-top:10px; display:none; }
.sec04_pt_cross:before{ content:''; position:absolute; top:0; left:calc(50% - 0.5px); width:1px; height:25px; background-color:#fff; }
.sec04_pt_cross:after{ content:''; position:absolute; top:calc(50% - 0.5px); left:calc(50% - 12.5px); width:25px; height:1px; background-color:#fff; }
.sec04_pt.selected .sec04_pt_cross{ display:block; }





/**************카드뉴스**************/

.bright_main_sec{ padding:100px 0; overflow:hidden; }
.bright_main_sec .sec_cont{ max-width:1240px; margin:0 auto; padding:0 20px; }
.bright_main_sec img{ max-width:100%; height:auto; /*display:block;*/ }


#bright_sec04{ padding:130px 0; }
#bright_sec04 .sec_cont{ max-width:100%;}

.bright_sec04_title_wrap{ margin-bottom:50px; text-align:center; }
.bright_sec04_title{ font-family:'Raleway', 'Noto Sans KR', sans-serif; font-size:50px; font-weight:400; color:#333; }
.bright_sec04_title span{ font-weight:600; }

.bright_sec04_sli{ padding:0 50px; max-width:1200px; width:100%;z-index:1; }
.bright_sec04_sli_img{ background-color:#fff; background-position:center; background-size:100% 100% !important; background-repeat:no-repeat;border:0px solid #000;height:650px;}
.bright_sec04_sli_txt{ background-color:#f4f4f4; padding:30px; }
.bright_sec04_sli_title{ font-size:30px; font-weight:700; color:#333; padding-left:10px; border-left:3px solid; line-height:1.2; margin-bottom:10px; }
.bright_sec04_sli_subtitle{ font-size:14px; font-weight:300; margin-bottom:20px; }
.bright_sec04_sli_desc{ font-size:14px; line-height:1.7; font-weight:300; margin-bottom:40px; }
.bright_sec04_sli_link{ display:inline-block; text-align:center; padding:10px 30px; background-color:#333; color:#fff; font-size:15px; max-width:140px; transition-duration:0.3s; z-index:100;}

#bright_sec04 .bx-wrapper{margin:0 auto;}
#bright_sec04 .bx-viewport{ overflow:visible !important; }
#bright_sec04 .bx-wrapper .bx-prev{ left:0; transform:translate(-50%, 0); }
#bright_sec04 .bx-wrapper .bx-next{ right:0; transform:translate(50%, 0); }



@media(max-width:850px){
	#bright_sec_04 .bx-viewport{ overflow:hidden !important }
	.bright_sec04_sli{ padding:0; }
	.bright_sec04_sli_img, .bright_sec04_sli_txt{ width:100%; }
	.bright_sec04_sli_img{ min-height:0; padding-bottom:52.28758169934641%; }
	.bright_sec04_sli_txt h3{font-size:25px;}
	
}

/* Neoncity widget */

.neon_wid{ margin:0px auto; display:flex;  border:0px solid #000;width:100%;max-width:1240px;}
.neon_wid li{ width:25%; padding:15px; flex-glow:1 1; border:1px solid #fff;margin:0px 15px;box-sizing:border-box; }
.neon_wid li .wid_box{ position:relative; width:100%; padding-bottom:0px; border:0px solid #000;}

.wid_img{ position:relative; }
.wid_img .wid_cat{ display:block; position:absolute; z-index:5; top:7%; left:5%; font-size:14px; font-weight:300; color:#fff; padding:5px 10px; }
.wid_img .wid_cat:hover{ text-decoration:none; }
.wid_nonimg{ position:relative; padding-bottom:71.94244604316547%; background-color:#888; }
.wid_nonimg p{ position:absolute; top:50%; left:0; width:100%; transform:translate(0, -50%); text-align:center; font-size:15px; font-weight:300; color:#333; }
.wid_img img{ width:100%; height:auto; display:block; }

.wid_txt{ word-break:keep-all; padding:25px 20px 10px; }
.wid_txt h5{ font-size:16px; font-weight:300; margin-bottom:15px; }
.wid_txt h3{ font-family:'LB','NM'; font-size:14px; font-weight:400; margin-bottom:0px; text-align:center;}
.wid_txt p{ font-size:16px; font-weight:300; }

.wid_link{ position:absolute; z-index:10;background:#336600; bottom:-1px; left:-1px; width:calc(100% + 2px); padding:16px 70px 16px 20px; font-size:18px; line-height:1em; font-weight:900; color:#fff; box-sizing:border-box; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-decoration:none !important; transition-duration:0.6s; }
.wid_link:hover{ color:#fff;background:#000; }
.wid_link i{ position:absolute; top:0; right:0; width:50px; height:100%; display:flex; justify-content:center; align-items:center; color:#fff; font-size:25px; }

/**리얼스토리**/
#photogallery_sec{padding:100px 0 100px 0; overflow:hidden;border:0px solid #000; background:#f6fdda url(/layouts/Solid_template/include/img/icon/sec04_wrap_bg2.jpg)no-repeat center top; background-size:cover;}
@media(max-width:450px){
#photogallery_sec{padding:50px 0;}
}
#photogallery_sec .sec_cont{max-width:100% !important; margin:0 auto; padding:0 20px; width:100%;}
#photogallery_sec img{ max-width:100%; height:auto; /*display:block;*/ } 

.photogallery_title_wrap{ text-align:center; margin-bottom:50px; }
.photogallery_title_wrap h1{ font-family:var(--font-base); font-size:46px; font-weight:800; color:#333; margin-bottom:10px; }
.photogallery_title_wrap p{ font-size:17px; font-weight:400; color:#333; padding:10px 0 0;}

@media(max-width:450px){
.photogallery_title_wrap{margin-bottom:7px; }
.photogallery_title_wrap h1{font-size:30px;}
.photogallery_title_wrap p{ font-size:14px;}
}
@media(max-width:380px){
.photogallery_title_wrap h1{letter-spacing:-0.5px;}
.photogallery_title_wrap p{ letter-spacing:-0.5px;}
}

.pc-none{display:none;}
@media(max-width:650px){
.mobile-none{display:none;}
.pc-none{display:block !important;}
}

/****************sec_05****************/
#sec_05{ padding:0px;}
.sec05_title_wrap{ text-align:center; margin-bottom:80px; }
.sec05_title_wrap h1{ font-family:var(--font-base); font-size:36px; font-weight:700; color:#333; margin-bottom:10px; }
.sec05_title_wrap p{ font-size:15px; font-weight:300; color:#777; }
.sec05_pt_wrap{ margin:0 -35px; justify-content:center; }
.sec05_pt{ max-width:25%; width:100%; transform:translate(0, 100px); opacity:0; transition:0.9s transform, 0.7s opacity; }
.sec05_pt_wrap.active .sec05_pt{ opacity:1; transform:translate(0, 0); }
.sec05_pt.delay_1{ transition-delay:0s; }
.sec05_pt.delay_2{ transition-delay:0.2s; }
.sec05_pt.delay_3{ transition-delay:0.4s; }
.sec05_pt.delay_4{ transition-delay:0.6s; }

.sec05_pt > a{ font-family:var(--font-base); display:inline-block; padding-right: 30px; position: relative; margin-top:20px; }
.sec05_pt > a:after{ content: ''; position: absolute; top: 0; right: 0; border-top: 22px solid transparent; border-bottom: 22px solid transparent; transition-duration: 0.4s; }
.sec05_pt > a p{ font-size: 16px; font-weight: 400; color:#fff; padding: 10px 25px; transition-duration: 0.4s; }
.sec05_pt > a:hover:after{ border-left-color:#333; }
.sec05_pt > a:hover p{ background-color:#333; color:#999 !important;}
.sec05_pt_img{ margin-bottom:20px; box-shadow:3px 3px 5px 0 rgba(0,0,0,0.2); }
.sec05_pt_img img{ max-width:100%; width:100%; height:auto; display:block; }
.sec05_pt h1{ font-size:28px; font-weight:600; color:#333; padding-bottom:25px; margin-bottom:25px; position:relative; }
.sec05_pt h1:after{ content:''; width:58px; height:3px; position:absolute; bottom:0; left:0; }
.sec05_pt p{ font-size:14px; font-weight:300; color:#928e92; line-height:1.5; }



/****************sec_06****************/
#sec_06{ padding:80px 30px; background-size:cover; background-position:center; background-repeat:no-repeat; }

#sec_06 a[x-apple-data-detectors],
#sec_06 a[href^="tel"]{
  color: inherit !important;
  text-decoration: none !important;
}

.sec06_pt_wrap{ margin:0 -40px; border:0px solid #000;min-height:400px;}
.sec06_pt{ transition:0.8s transform, 0.8s opacity; }
.sec06_pt_wrap.active .sec06_pt{ transform:translate(0, 0); opacity:1; }
.sec06_pt.direction_1{ transform:translate(-100px, 0); opacity:0; }
.sec06_pt.direction_2{ transform:translate(100px, 0); opacity:0; }
.sec06_pt.flex{ flex-direction:column; }
.sec06_title{ font-size:36px; font-weight:700; position:relative; padding-left:45px; line-height:1.35em; margin-bottom:30px; }
.sec06_title:before{ content:''; width:30px; height:30px; position:absolute; top:9px; left:0; }
.sec06_info{ padding-left:45px; margin-bottom:20px; }
.sec06_info ul li{ font-size:16px; font-weight:400; margin-bottom:15px; position:relative; }
.sec06_info ul li:last-child{ margin-bottom:0; }
.sec06_info ul li i{ position:absolute; top:3px; left:0; font-size:18px; }
.sec06_title2{ font-size:36px; font-weight:700; position:relative; padding-left:45px; line-height:1.35em; margin-bottom:30px; }
.sec06_title2:before{ content:''; width:30px; height:30px; position:absolute; top:9px; left:0; background:var(--point-color);}
/*.sec06_title2{ margin-bottom:40px; flex-direction:row; align-items:stretch; }
.sec06_title2 h1{ padding-left:20px; font-size:30px; font-weight:700; word-break: keep-all; text-align:right; }*/
.sec06_title2_str{ position:relative; min-width:100px; }
.sec06_title2_str:before{ content:''; width:100%; height:1px; background-color:#fff; position:absolute; left:0; top:22px; }
.sec06_map{max-height:260px; height:260px; position:relative; background-color:#222; overflow:hidden; }
/*google map*/
.sec06_map iframe{ position:absolute; z-index:0; top:0; left:0; width:100% !important; height:100% !important; }
/*naver map*/
.sec06_map table, .sec06_map table img{ position:absolute; z-index:0; display:block; top:50%; left:50%; width:100% !important; height:auto !important; transform:translate(-50%, -50%); }
.sec06_map table > tbody > tr > td > table{ display:none; }
/*daum map*/
.sec06_map .root_daum_roughmap.root_daum_roughmap_landing{ position:absolute; z-index:0; top:0; left:0; width:100% !important; height:100% !important; padding:0 !important; margin:0 !important; }
.sec06_map .root_daum_roughmap .wrap_map{ position:absolute; width:100% !important; height:100% !important; }






@media(max-width:1200px){
	.sec05_pt_wrap{ margin:0 -15px; }
	.sec05_pt.pdh-35{ padding:0 15px; }
}
@media(max-width:960px){
	.sec04_pt_in{ padding:30px 20px; }
	.ptwrap_05, .ptwrap_04{ flex-flow:row wrap; }
	.sec04_pt_wrap.ptwrap_05 .sec04_pt{ max-width:50%; }
	.sec04_pt_wrap.ptwrap_05 .sec04_pt:nth-child(-n + 3){ max-width:33.3333333%; }

	.sec04_pt_wrap.ptwrap_04 .sec04_pt{ max-width:50%; }
}
@media(max-width:850px){
	.sec02_pt.col-06{ width:100%; }
	.sec02_pt:first-child{ margin-bottom:50px; }
	.sec02_pt.pt_right{ padding-left:0; }
	.sec06_pt_wrap{ margin:0 -15px; }
	.sec06_pt.pdh-40{ padding-left:15px; padding-right:15px; }
}

@media(max-width:800px){
	.sec05_pt{ width:100%; max-width:450px; margin:0 auto 50px; }
	.sec05_pt:last-child{ margin-bottom:0; }

	.sec06_pt.col-06{ width:100%; margin-bottom:50px; }
	.sec06_pt.col-06:last-child{ margin-bottom:0; }
	.sec06_title{ margin-bottom:20px; }
	.sec06_info{ padding-left:0; }
	.sec06_title2{ margin-bottom:25px; }
	.sec06_map{ height:300px; }
}

@media(max-width:750px){
	.ptwrap_03, .ptwrap_02{ flex-flow:row wrap; }
	.sec04_pt_wrap.ptwrap_03 .sec04_pt{ max-width:33.33333333%; }
	.sec04_pt_wrap.ptwrap_02 .sec04_pt{ max-width:50%; }
}

@media(max-width:700px){
	.sec02_left_title{ padding-right:0; }
	.sec02_sli_wrap:after{ display:none; }
	.sec02_sli_wrap{ padding-right:0; }
	.sec02_sli_wrap #sec02_pagination{ left:0; top:inherit; bottom:15px; background-color:transparent; width:100%; padding-bottom:0; }
	.sec02_sli_wrap .swiper-pagination-bullet{ width:12px; height:12px; display:inline-block; margin:0 5px; }
}

@media(max-width:620px){
	.sec04_pt_wrap.ptwrap_05 .sec04_pt{ max-width:50%; }
	.sec04_pt_wrap.ptwrap_05 .sec04_pt:nth-child(-n + 3){ max-width:50%; }
	.sec04_pt_wrap.ptwrap_05 .sec04_pt:last-child{ max-width:100%; }
	.sec04_pt_wrap.ptwrap_03 .sec04_pt{ max-width:100%; }
	.sec06_pt{overflow:hidden; padding-bottom:30px;}
}

@media(max-width:500px){
	.sec01_sli{ min-height:50.4688vw; height:50.4688vw; background-color:#333; background-size:cover; background-position:left -280px top 0px; background-repeat:no-repeat; padding:150px 0px; justify-content:center; align-items:flex-start;}
	.sec01_sli_txt > h1{ font-size:34px; filter:drop-shadow(0px 0px 2px rgba(0,0,0,1));}
	.sec01_sli_txt > p{ font-size:19px; filter:drop-shadow(0px 0px 2px rgba(0,0,0,1));}
	.sec01_sli_txt > a{ font-family:var(--font-base);color:#fff; display:inline-block; padding-right: 30px; position: relative; margin-top: 40px; opacity:0; transform:translate(0, 50px);  transition:0.8s transform 1.2s, 0.6s opacity 1.2s; }
	.sec01_sli_txt > a:after{ content: ''; position: absolute; top: 0; right: 0; border-top: 20px solid transparent; border-left:30px solid; border-bottom: 21px solid transparent; transition:0.4s border-color; }
	.sec01_sli_txt > a p{ font-size: 12px; font-weight: 400; padding: 12px 10px; transition:0.4s background-color, 0.4s color; text-align:center;color:#fff !important;box-sizing:border-box;}

	#sec_02{ padding:30px 0px !important; border:0px solid #000;}
	.sec02_title_wrap{padding:0px 20px; border:0px solid #000;margin:0px 0 20px 0 !important;}
	.sec02_title_wrap p{font-size:12px;}
	.sec02_left_title{margin:0px;padding:10px 10px;}
	.sec02_left_title i{ position:relative; top:0px; margin:0 10px; font-size:40px; float:left;}
	.sec02_left_title h3{ font-size:20px; font-weight:400; color:#666; padding-top:5px;}
	.sec02_pt_wrap{margin:0px !important;padding:0px 20;border:0px solid #000;width:100%;}
	.pt_right{padding:0px 20px !important;}


	.sec03_txt h1{ font-size:27px; font-weight:600; margin-bottom:10px; }
	.sec03_txt p{ font-size:12px !important; font-weight:300; }
	.sec03_txt > a:after{border-top: 23px solid transparent; border-bottom: 23px solid transparent;}

	.sec04_title_wrap h1{ font-family:var(--font-base); font-size:25px; font-weight:700; margin-bottom:10px; }
	.sec04_title_wrap p{ font-size:11px; font-weight:300; }
	.sec04_pt_wrap.ptwrap_05 .sec04_pt,
	.sec04_pt_wrap.ptwrap_05 .sec04_pt:nth-child(-n + 3),
	.sec04_pt_wrap.ptwrap_04 .sec04_pt,
	.sec04_pt_wrap.ptwrap_02 .sec04_pt,
	.sec04_pt_wrap.ptwrap_01 .sec04_pt{ max-width:100%; }

	#sec_05{ padding:30px 15px !important; border:0px solid #000;}

	.sec05_pt > a{ font-family:var(--font-base); display:inline-block; padding-right: 30px; position: relative; margin-top:20px; }
	.sec05_pt > a:after{ content: ''; position: absolute; top: 0; right: 0; border-top: 17px solid transparent; border-bottom: 17px solid transparent; transition-duration: 0.4s; }
	.sec05_pt > a p{ font-size: 14px; font-weight: 400; color:#fff; padding: 7px 15px; transition-duration: 0.4s; }
	.sec05_pt > a:hover:after{ border-left-color:#333; }
	.sec05_pt > a:hover p{ background-color:#333; }

	#sec_06{ padding:50px 15px !important; border:0px solid #000;}
	#sec_06 .sec06_title2{padding:20px 0px  !important; border:0px solid #000;}
	.sec06_info{margin-top:20px;}
	.ft_quick{position:fixed !important;width:100%;padding:0;margin:0px;bottom:0px;z-index:1000;display:block;}
	.ft_quick ul{display:flex;}
	.ft_quick ul li{flex:1;padding:10px;background:#000;text-align:center;border-right:1px solid #fff;}
	.ft_quick ul li:nth-child(2){background:#ecba28;}
	.ft_quick ul li a{color:#fff;font-weight:bold;}
	.copyright{margin-bottom:0px; font-size:10px !important;}


	.sec06_title{ font-size:25px; font-weight:700; position:relative; padding-left:35px; line-height:1.2em; margin-bottom:20px; }
	.sec06_title:before{ content:''; width:20px; height:20px; position:absolute; top:6px; left:0; }
	.sec06_info ul li{ font-size:15px;}
	.sec06_info ul li i{ top:2px; font-size:20px; }
	.sec06_map{ height:200px; }
	.sec06_pt.col-06{margin-bottom:0px; }
	.sec06_title2 h1{ padding-left:0px; font-size:25px; text-align:left; }
	.sec06_title2_str{ min-width:35px; }
	.sec06_title2_str:before{ content:''; width:20px; height:20px; position:absolute; top:10px; left:0; background-color: #ff9900;}
}
@media(max-width:380px){
	.sec01_sli_txt > h1{ font-size:30px; filter:drop-shadow(0px 0px 2px rgba(0,0,0,1));}
	.sec01_sli_txt > p{ font-size:17px; filter:drop-shadow(0px 0px 2px rgba(0,0,0,1));}
}

/* sec03 바로가기 */
.sec03_icon_wrap {
	display: block; 
	padding: 25px 0 75px; 
	margin: 0; 
	overflow: hidden;
}

.sec03_icon_wrap h1{
	font-family:var(--font-base); 
	font-size:46px; 
	font-weight:800; 
	color:#333; 
	margin-bottom:70px;
	text-align:center;
}
.sec03_icon_wrap .sec03_icon {
	display: flex; 
	padding: 0; 
	margin: 0 auto 0; 
	gap: 25px; 
	width: 100%; 
	max-width: 1240px; 
	justify-content: center;
}
.sec03_icon_wrap .sec03_icon a {
	flex: 1;
	text-align: center;
	font-size: 24px;
	font-weight: 700;
	border: 0px solid #ddd;
	border-radius: 20px;
	padding: 0px 0 30px;
	margin: 0;
	color: #333;
	background-color: #fff;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	will-change: transform;
}
/*
.sec03_icon_wrap .sec03_icon a:nth-child(1){background-color: #ff9900;}
.sec03_icon_wrap .sec03_icon a:nth-child(2){background-color: #71cd43;}
.sec03_icon_wrap .sec03_icon a:nth-child(3){background-color: #5cb7f0;}
.sec03_icon_wrap .sec03_icon a:nth-child(4){background-color: #8c89f1;}*/

.sec03_icon_wrap .sec03_icon a img{
	display:block;
	margin:0;
	padding:0;
	max-width:100%;
	width:100%;
	border-radius: 20px 20px 0 0;
}
.sec03_icon_wrap .sec03_icon a p{
	padding:15px 0 0;
}
.sec03_icon_wrap .sec03_icon a span{
	display:inline-block;
	font-size:20px;
	font-weight:500;
	padding:0;
	border-bottom:2px solid rgba(255, 255, 255, 0.5);
}
.sec03_icon_wrap .sec03_icon a:hover {
	border: 0px solid var(--point-color3);
	transform: translateY(-15px);
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
	color:var(--point-color3);
}

@media (max-width: 1300px) {
	.sec03_icon_wrap .sec03_icon {gap:25px; max-width: 95%; padding:0 0px; box-sizing:border-box;}
}
@media (max-width: 1080px) {
	.sec03_icon_wrap .sec03_icon a {font-size: 22px;}
}
@media (max-width: 960px) {
	.sec03_icon_wrap .sec03_icon a {font-size: 20px;}
}
@media (max-width: 870px) {
	.sec03_icon_wrap .sec03_icon {gap:15px;}
}
@media (max-width: 700px) {
	.sec03_icon_wrap .sec03_icon {flex-wrap:wrap; gap:30px; padding:0 0px; max-width: 90%;}
	.sec03_icon_wrap .sec03_icon a {flex:1 1 40%;}
}
@media (max-width: 500px) {
	.sec03_icon_wrap {padding: 50px 0;}
	.sec03_icon_wrap h1{font-size:38px; margin-bottom:40px;}
	.sec03_icon_wrap .sec03_icon {gap:20px;}
	.sec03_icon_wrap .sec03_icon a {flex:1 1 100%; padding: 0 0 20px;}
	.sec03_icon_wrap .sec03_icon a:hover {transform: translateY(-10px);}
}
@media (max-width: 430px) {
	.sec03_icon_wrap {padding: 35px 0 50px;}
	.sec03_icon_wrap h1{font-size:36px;}
	.sec03_icon_wrap .sec03_icon a {font-weight: 700; border-radius: 15px;}
	.sec03_icon_wrap .sec03_icon a img{border-radius: 15px 15px 0 0;}
	.sec03_icon_wrap .sec03_icon a p{padding:12px 0 0;}
}
@media (max-width: 380px) {
	.sec03_icon_wrap {padding: 20px 0 40px;}
	.sec03_icon_wrap h1{font-size:34px;}
	.sec03_icon_wrap .sec03_icon {gap:15px;}
	.sec03_icon_wrap .sec03_icon a {font-size: 14px; padding: 0 0 15px;}
}

/* sec02 공지사항 및 바로가기 */
.sec02_icon_wrap {
	display: block; 
	padding: 75px 0 0; 
	margin: 0 auto; 
	max-width: 1240px; 
	overflow:hidden;
}
@media (max-width: 1300px) {
	.sec02_icon_wrap {padding: 35px 0 0; max-width: 95%;}
}
@media (max-width: 430px) {
	.sec02_icon_wrap {padding: 35px 0 0; max-width: 90%;}
}

.boardList {
	display: block;
	background-color: #fff;
	border:1px solid #ddd;
	width:49%;
	float:left;
	padding: 25px 30px;
	border-radius:20px;
	box-sizing:border-box;
	text-align: left;
	max-height:300px;
}
.title_div{width:100%;border-bottom:1px solid #ddd;display:block;padding:15px 0px 25px;}
.title_div > .title{font-size:35px; color:#333; font-weight:700; margin:0; padding:0; line-height:1;}
.title_div > .title_more{float:right; color:#333; font-size:14px; font-weight:normal; font-family:'Roboto',sans-serif; margin:0; padding:15px 7px 0 0;}

.title_div > .title span{color:var(--point-color3);}

@media(max-width:450px){
.boardList {width:100%; float:none; padding: 20px 20px; max-height:100%; overflow:hidden;}
.title_div > .title{font-size:30px;}
.title_div > .title_more{padding:5px 7px 0 0;}
}

.pgbox{padding:25px 0 0;}

.baro_list{
	display: block;
	width:49%;
	float:right;
	padding: 0 0 10px;
}
.baro_li_icon{
	display: flex; 
	padding: 0; 
	margin: 0 auto 0; 
	gap: 25px; 
	width: 100%; 
	max-width: 100%; 
	justify-content: center;
}
.baro_list .baro_li_icon a {
	flex: 1;
	text-align: center;
	font-size: 27px;
	font-weight: 700;
	border: 0px solid #ddd;
	border-radius: 20px;
	padding: 54px 0;
	margin: 0;
	color: #fff;
	background-color: #fff;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	will-change: transform;
}
.baro_list .baro_li_icon a:nth-child(1){background-color: #47b749;}
.baro_list .baro_li_icon a:nth-child(2){background-color: #2f9c90;}

.baro_list .baro_li_icon a img{
	display:block;
	margin:20px auto;
	max-width:100%;
	width:25%;
}
.baro_list .baro_li_icon a p{
	padding:0;
}
.baro_list .baro_li_icon a span{
	display:inline-block;
	font-size:20px;
	font-weight:500;
	padding:0;
	border-bottom:2px solid rgba(255, 255, 255, 0.5);
}
.baro_list .baro_li_icon a:hover {
	border: 0px solid var(--point-color3);
	color: #fff;
	transform: translateY(-15px);
	box-shadow: 0 3px 20px rgba(0, 0, 0, 0.15);
}

@media (max-width: 430px) {
	.baro_list{width:100%; float:none; padding: 20px 0 0px;}
	.baro_li_icon{gap: 10px;}
	.baro_list .baro_li_icon a {font-size: 20px; padding: 25px 0; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); will-change: transform;}
	.baro_list .baro_li_icon a img{margin:10px auto 5px; width:35%;}
	.baro_list .baro_li_icon a span{font-size:15px;}
}

@media (max-width: 380px) {
	.baro_list .baro_li_icon a {font-size: 17px;}
	.baro_list .baro_li_icon a span{font-size:14px;}
}


.board_list {
  max-width:var(--site-w, 1560px);
  width:100%;
  padding:50px 20px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(300px, 34%) 1fr;
  align-items:stretch;
  gap:40px;
  box-sizing:border-box;
}
.board_list .board_L {
  width:100%;
}

/* 우측 위젯(_tab_top.html 스킨) 내부에서 자동 출력되는 제목/설명은
   좌측 board_R에서 별도로 노출하므로 이 섹션 안에서만 숨김 처리 */
.board_list .board_L .head {
  display:none !important;
}

/* 좌측 컬럼: 제목 + 바로가기 아이콘 4개 */
.board_list .board_R {
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
}
.board_list .board_R .board_R_head {
  flex:0 0 auto;
  padding:14px 0 24px;
  margin:0;
}
.board_list .board_R .board_R_head h3 {
  font-size:clamp(24px, 3vw, 36px);
  line-height:1.3;
  font-weight:800;
  color:#222;
  padding:0;
  margin:0;
}
.board_list .board_R .board_R_head h3 span {
  color:var(--point-color);
}
.board_list .board_R .board_R_head p {
  font-size:clamp(12px, 2vw, 16px);
  line-height:1.4;
  color:#777;
  padding:8px 0 0;
  margin:0;
}

.board_list .board_R .board_R_icons {
  flex:1 1 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;   /* 카드 두 줄이 남는 높이를 균등 분할 - 소개문구 아래 빈 공간 제거 */
  align-content:stretch;
  gap:12px;
  margin-top:4px;
  min-height:0;
}
.board_list .board_R .board_R_icons a {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  text-align:center;
  background:#fff;
  border:1px solid #d6d6d6;
  border-radius:20px;
  padding:25px 10px;
  color:#232323;
  text-decoration:none;
  transition:all 0.3s ease;
}
.board_list .board_R .board_R_icons a:hover {
  border-color:var(--point-color);
  filter:drop-shadow(0px 0px 5px rgba(0,0,0,0.1));
}
.board_list .board_R .board_R_icons a .icon {
  display:block;
  width:clamp(25%, 3vw, 30%);
  margin:0 auto;
  transition:transform 0.3s ease;
}
.board_list .board_R .board_R_icons a .icon img {
  display:block;
  width:100%;
  max-width:100%;
}
.board_list .board_R .board_R_icons a:hover .icon {
  transform:translateY(-6px);
}
.board_list .board_R .board_R_icons a p {
  font-size:clamp(14px, 2vw, 17px);
  font-weight:500;
  padding:12px 0 0;
  margin:0;
}
.board_list .board_R .board_R_icons a:hover p {
  color:var(--point-color);
}

@media(max-width:1024px){
  .board_list {
    grid-template-columns:1fr;
    gap:35px;
    padding:40px 20px;
  }
  .board_list .board_R {
    height:auto;
    width:100%;
  }
  /* 세로 전환 구간(한 줄 배치): 아이콘 4개를 1x4 로 전체폭 사용
     (기존 max-width:420px 제한이 카드 묶음을 좌측에 가둬 우측이 비어 보였음) */
  .board_list .board_R .board_R_icons {
    flex:0 0 auto;
    grid-template-columns:repeat(4, 1fr);
    grid-template-rows:none;
    max-width:none;
    width:100%;
    gap:12px;
  }
}

/* 좁은 화면(2단 구간): 1x4 가 답답해지는 폭부터 2x2 전체폭 */
@media(max-width:620px){
  .board_list .board_R .board_R_icons {
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
}

@media(max-width:480px){
  .board_list .board_R .board_R_head h3 {
    font-size:28px;
  }
  .board_list .board_R .board_R_icons {
    gap:10px;
  }
  .board_list .board_R .board_R_icons a {
    padding:18px 8px;
    border-radius:16px;
  }
}


.endcont {
  display:block;
  padding:50px 0;
  margin:20px 0 0; 
  text-align:center;
  background:#f7f7f7;
}

.endcont .endcont_wrap {
  display:inline-flex;
  flex-wrap:wrap;
  padding:0 20px;
  margin:0 auto;
  width:100%;
  max-width:var(--site-w, 1560px);
  box-sizing:border-box;
  justify-content:center;
  gap:20px;
}

.endcont .endcont_wrap a {
  flex:1 1 calc(20% - 16px); /* 5개 배치: gap 20px*4=80px 를 5등분(16px)해서 뺀 값 */
  box-sizing:border-box;
  display:flex;
  align-items:center;
  padding:35px 18px 35px 94px;
  margin:0;
  background:#fff;
  border:1px solid #ececec;
  word-break:keep-all;
  border-radius:14px;
  box-shadow:0 2px 10px rgba(0,0,0,0.04);
  font-size:clamp(15px, 2vw, 19px);
  color:#333;
  font-weight:600 !important;
  position:relative;
  justify-content:flex-end;
  transition:transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.endcont .endcont_wrap a span {
  position:absolute;
  left:20px;
  top:50%;
  transform:translateY(-50%);
  width: clamp(21%, 3vw, 27%);
}
.endcont .endcont_wrap a span img {
  display: block;
  width: 100%;
  max-width: 100%;
}
.endcont .endcont_wrap a i {
  position:absolute;
  left:20px;
  top:50%;
  transform:translateY(-50%);
  width:60px;
  height:60px;
  border-radius:50%;
  background-color:var(--point-color3);      /* 회색 원 배경 */
}

.endcont .endcont_wrap a i::before {
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:45px;
  height:45px;
  background-color:#333;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}

.endcont_wrap a:nth-child(1) i::before {
  -webkit-mask-image:url('../img/subscription_5998673.svg');
  mask-image:url('../img/subscription_5998673.svg');
  width:55px; height:55px;   /* 여백이 가장 많아 크게 보정 */
}
.endcont_wrap a:nth-child(2) i::before {
  -webkit-mask-image:url('../img/location_17229957.svg');
  mask-image:url('../img/location_17229957.svg');
  width:42px; height:42px;   /* 여백이 거의 없어 살짝 축소 */
}
.endcont_wrap a:nth-child(3) i::before {
  -webkit-mask-image:url('../img/manual_18629416.svg');
  mask-image:url('../img/manual_18629416.svg');
  width:50px; height:50px;
}
.endcont_wrap a:nth-child(4) i::before {
  -webkit-mask-image:url('../img/contract_3631573.svg');
  mask-image:url('../img/contract_3631573.svg');
  width:40px; height:40px;
}
.endcont_wrap a:nth-child(5) i::before {
  -webkit-mask-image:url('../img/newsletter_3947138.svg');
  mask-image:url('../img/newsletter_3947138.svg');
  width:40px; height:40px;
}

.endcont .endcont_wrap a:hover {
  transform:translateY(-5px);
  box-shadow:0 8px 18px rgba(0,0,0,0.09);
  border-color:#c9dc9a;
}

.endcont .endcont_wrap a:hover i::before {
  background-color:var(--point-color);
}

/* 화면이 컨테이너보다 좁아지면 좌우 여백 확보 */
@media (max-width: 1550px) {
  .endcont .endcont_wrap {
    padding:0 20px;
  }
}

/* 5개 -> 2개씩 (gap 20px 를 2등분(10px)해서 뺀 값) */
@media (max-width: 1400px) {
  .endcont {
    padding:40px 0;
  }
  .endcont .endcont_wrap {
    justify-content:flex-start; /* 홀수로 남는 마지막 1개를 가운데가 아닌 좌측에 붙임 */
  }
  .endcont .endcont_wrap a {
    flex:0 1 calc(50% - 10px); /* 마지막 1개가 늘어나지 않고 같은 폭 유지 */
    padding:30px 20px 30px 90px;
  }
}

/* 2개 -> 1개 */
@media (max-width: 600px) {
  .endcont .endcont_wrap {
    gap:12px;
  }
  .endcont .endcont_wrap a {
    flex:0 1 100%;
    padding:25px 15px 25px 85px;
  }
  .endcont .endcont_wrap a i {
    left:15px;
    width:52px;
    height:52px;
  }
}

/* fix: 공지사항 더보기(+) 버튼 사각화 — 위젯 스킨 CSS 캐시/경로 무관하게 레이아웃에서 강제 */
.navplus, .navplus a, a.tab-more-link,
.board_L .widgetHeader a[href], .board_L .navWrap a{ border-radius:10px !important; }

/* v69: 메인 컨테이너 max-width 1560 -> var(--site-w) (레이아웃 설정 컨텐츠 너비 + 40) 로 통일 */

/* ---- v93: 메인 바로가기 2x2(baroGrid) 반응형 — 700px 이하 규칙이 없어 데스크톱 값(아이콘 58 / 글자 22px) 그대로 나오던 것.
   폭에 비례해 줄어들도록 clamp 로 통일 ---- */
@media (max-width:1100px){ /* v171 */
	.visual .visualInner .right .rightTop .baroGrid a{ padding:clamp(14px, 3vw, 26px) 8px; gap:clamp(6px, 1.2vw, 10px); border-radius:clamp(12px, 2.5vw, 20px); }
	.visual .visualInner .right .rightTop .baroGrid a .icon img{ width:clamp(36px, 7vw, 58px); height:clamp(36px, 7vw, 58px); }
	.visual .visualInner .right .rightTop .baroGrid a p{ font-size:clamp(14px, 2.6vw, 22px); }
}

/* ---- v94: 메인 4개 게시판 섹션(content2) 제목 줄임 해제 — 위젯 subject_cut_size 48→0 과 함께, 스킨(default_new4)이 CSS 로 한 줄 말줄임을 걸어도 풀어서 전체 제목이 줄바꿈으로 보이게 ---- */
.content2_wrap dl > div:not(.tit) a,
.content2_wrap dl > div:not(.tit) .title,
.content2_wrap dl > div:not(.tit) .subject,
.content2_wrap dl > div:not(.tit) h3,
.content2_wrap dl > div:not(.tit) h4{ white-space:normal !important; overflow:visible !important; text-overflow:clip !important; word-break:keep-all; line-height:1.45; height:auto !important; max-height:none !important; }

/* v96: 메인 4개 섹션 제목 뒷말(이야기·자료실·지식인·서적) 포인트색 강조 — '한사연 현장이야기' 와 동일 톤 */
.content2_wrap dl .tit a span{ color:var(--point-color); }


/* ---- v176: effectSlider 인라인 폭 무력화 (스킨 무관 안전망)
   jqBoxSlider 는 initialize 시점의 부모 폭을 #contentBox 와 각 슬라이드에 인라인 style 로 박아넣고,
   라이브러리에 resize 처리가 없어 이후 폭이 바뀌어도 옛 값을 유지한다(가로 100% 미달).
   높이는 애니메이션에 필요하므로 건드리지 않고 폭만 100% 로 되돌린다. ---- */
.effectSlider_Container,
.effectSlider_Container .slider-viewport,
.effectSlider_Container #contentBox,
.effectSlider_Container #contentBox > div{ width:100% !important; max-width:100% !important; }
.effectSlider_Container #contentBox > div img{ width:100%; height:auto; }


/* ---- v199: content2(우리들 이야기 등 4개 카드) 섹션 배경 밴드 + 상하 여백
   section.content2 에는 원래 아무 규칙도 없어서 배경도 여백도 없었다.
   카드는 흰색 계열이라 연한 톤 밴드를 깔면 카드가 떠 보인다.
   배경색은 포인트 컬러를 아주 연하게 섞어 인스턴스 테마(녹색/주황)를 따라간다. ---- */
.content2{
  background:#f5f7f1; /* color-mix 미지원 브라우저 폴백 */
  background:color-mix(in srgb, var(--point-color, #669900) 6%, #fff);
  padding:70px 0; /* v202: 상하 동일 (v201 로 GNB 흰 띠가 사라져 상단 여백을 되살림) */
}
@media (max-width:1024px){
  .content2{ padding:50px 0; }
}
@media (max-width:600px){
  .content2{ padding:36px 0; }
}