.business-area {
	width: 100%;
	box-sizing: border-box;
}

.business-inner {
	margin: 0 auto;
	display: flex;
	gap: 80px;
}

.business-img {
	flex: 1;
}

.business-img img {
	width: 100%;
	display: block;
}

.business-cont {
	flex: 1;
}

.business-en {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: #2bb5c4;
	margin-bottom: 14px;
}

.business-title {
	font-size: 40px;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 26px;
	color: #111;
}

.business-lead {
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 26px;
	line-height: 1.6;
	color: #222;
}

.business-cont p {
	font-size: 16px;
	line-height: 1.85;
	color: #555;
	margin-bottom: 18px;
}

/* 태블릿 */
@media (max-width: 1024px) {
	.business-inner {
		gap: 50px;
	}

	.business-title {
		font-size: 34px;
	}
}

/* 모바일 */
@media (max-width: 768px) {
	.business-inner {
		flex-direction: column;
		gap: 40px;
	}

	.business-title {
		font-size: 28px;
	}

	.business-lead {
		font-size: 16px;
	}

	.business-cont p {
		font-size: 15px;
	}
}

/*회사소개*/

.history-sec{
  width:100%;
  box-sizing:border-box;
  background:#fff;
}

.history-inner{
  width:100%;
  margin:0 auto;
}

.history-list{
  position:relative;
  margin:0;
  padding:20px 0;
  list-style:none;
}

.history-list:before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:2px;
  background:#357c99;
  transform:translateX(-50%);
}

.history-item{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:40px;
  margin:0 0 60px;
}

.history-item:before{
  content:"";
  position:absolute;
  top:10px;
  left:50%;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#357c99;
  transform:translateX(-50%);
  z-index:2;
}

.history-col{
  width:calc(50% - 48px);
}

.history-col.left{
  text-align:right;
  padding-right:28px;
}

.history-col.right{
  text-align:left;
  padding-left:28px;
}

/* 기준 */
.history-year{
  font-size:24px;
  font-weight:700;
  margin-bottom:12px;
  color:#1f2a37;
}

.history-text{
  list-style:none;
  padding:0;
  margin:0;
}

.history-text li{
  font-size:16px;
  margin-top:6px;
  color:#333;
}

.history-text li:before{
  content:"- ";
  color:#357c99;
  font-weight:700;
}

@media (max-width:767px){
  .history-list:before{
    left:12px;
    transform:none;
  }

  .history-item{
    display:block;
    padding-left:40px;
    margin-bottom:40px;
  }

  .history-item:before{
    left:6px;
    transform:none;
  }

  .history-col{
    width:100%;
    padding:0;
    text-align:left;
  }

  .history-col.left:empty{
    display:none;
  }

  .history-year{
    font-size:26px;
  }

  .history-text li{
    font-size:14px;
  }
}

/*회사연혁*/


.org_card{
  width:100%;
}

.org_card *{
  box-sizing:border-box;
}

.org_card_inner{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:24px;
}

/* 공통 카드 */
.org_card_item,
.org_card_support{
  width:100%;
  padding:18px 16px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(53,124,153,0.15);
  font-size:16px;
  font-weight:400;
  color:#333;
  text-align:center;
}

/* CEO */
.org_card_ceo{
  width:100%;
  padding:20px;
  border-radius:12px;
  background:#073b50;
  color:#fff;
  font-size:24px;
  font-weight:700;
  text-align:center;
}

/* 지사 */
.org_card_branch{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

/* 지원부 */
.org_card_support{
  background:#eef4f7;
  font-weight:700;
  color:#2b5f73;
}

/* 팀 */
.org_card_team{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

/* 모바일 */
@media (max-width:767px){

  .org_card_inner{
    gap:12px;
  }

  .org_card_ceo{
    font-size:24px;
    padding:18px;
  }

  .org_card_branch{
    grid-template-columns:1fr;
  }

  .org_card_team{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  .org_card_item,
  .org_card_support{
    padding:14px 12px;
    font-size:16px;
  }

}

/*조직도*/


.section_address {display:none !important; }

/*오시는길*/


.wh-wrap{
  width:100%;
  color:#1b2430;
  font-size:16px;
  line-height:1.6;
}
.wh-wrap *{
  box-sizing:border-box;
}
.wh-wrap p,
.wh-wrap h2,
.wh-wrap em{
  margin:0;
}
.wh-wrap em{
  font-style:normal;
}

/* 상단 탭 */
.wh-tabs{
  width:100%;
  display:flex;
  gap:8px;
  border-bottom:1px solid #d9e1ea;
}
.wh-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 18px;
  border:1px solid #d9e1ea;
  border-bottom:none;
  border-radius:12px 12px 0 0;
  background:#f6f8fb;
  color:#324356;
  font-size:16px;
  font-weight:400;
  text-decoration:none;
  transition:all .2s ease;
}
.wh-tab:hover{
  color:#357c99;
  background:#f0f6f8;
}
.wh-tab.is-active{
  background:#357c99;
  border-color:#357c99;
  color:#fff;
  font-weight:700;
}

/* 패널 */
.wh-panel{
  display:none;
  width:100%;
}
.wh-panel.is-active{
  display:block;
}

/* 섹션 */
.wh-sec{
  width:100%;
  padding-top:40px;
}
.wh-sec-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.wh-sec-title{
  font-size:18px;
  line-height:1.4;
  font-weight:700;
  color:#1b2430;
  letter-spacing:-0.02em;
}
.wh-bullet{
  width:7px;
  height:14px;
  border-radius:4px;
  background:#357c99;
  flex:0 0 auto;
}

/* 카드 */
.wh-card{
  width:100%;
  border:1px solid #d9e1ea;
  border-radius:18px;
  padding:22px;
  background:#fff;
}
.wh-text{
  color:#415061;
  font-size:16px;
  font-weight:400;
}

/* 흐름도 */
.wh-flow-box{
  width:100%;
  border:1px solid #d9e1ea;
  border-radius:18px;
  background:#fff;
  padding:20px;
}
.wh-flow-pc{
  width:100%;
  border-radius:16px;
  padding:18px 16px 20px;
}
.wh-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.wh-row-reverse{
  flex-direction:row-reverse;
}

.wh-step{
  min-width:124px;
  padding:12px 14px;
  border:1px solid #d9e1ea;
  border-radius:12px;
  background:#f7f9fc;
  text-align:center;
  color:#2f3f52;
  font-size:16px;
  line-height:1.5;
  font-weight:700;
}
.wh-step-point{
  background:#357c99;
  border-color:#357c99;
  color:#fff;
}
.wh-step-soft{
  background:#eef6f8;
  color:#2b6176;
}
.wh-sub{
  display:block;
  margin-top:4px;
  font-size:13px;
  line-height:1.4;
  color:#7b8b9a;
  font-weight:400;
}
.wh-step-point .wh-sub{
  color:rgba(255,255,255,0.82);
}

.wh-stack{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.wh-stack-thin .wh-step{
  min-width:112px;
  background:#fff;
}

/* 화살표 */
.wh-arr{
  position:relative;
  width:28px;
  height:2px;
  background:#b8c6d6;
  flex:0 0 auto;
}
.wh-arr:after{
  content:"";
  position:absolute;
  right:-6px;
  top:-4px;
  border-left:6px solid #b8c6d6;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
}
.wh-arr-rev{
  transform:scaleX(-1);
}

/* 내려가는 화살표 위치 수정 */
.wh-drop{
  width:100%;
  padding:12px 0 14px;
}
.wh-down{
  display:block;
  width:124px;
  height:24px;
  position:relative;
  margin-left:auto;
  margin-right:110px;
}
.wh-down:before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:2px;
  height:15px;
  background:#b8c6d6;
  transform:translateX(-50%);
}
.wh-down:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  border-top:8px solid #b8c6d6;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  transform:translateX(-50%);
}

/* 모바일 흐름도 */
.wh-flow-m{
  display:none;
  list-style:none;
  padding:0;
  margin:0;
}
.wh-m-item{
  position:relative;
  border:1px solid #d9e1ea;
  border-radius:14px;
  background:#f7f9fc;
  padding:14px 12px;
  margin-bottom:18px;
  text-align:center;
  color:#2f3f52;
  font-size:16px;
  line-height:1.5;
  font-weight:700;
}
.wh-m-item:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-18px;
  width:2px;
  height:18px;
  background:#c9d6e2;
  transform:translateX(-50%);
}
.wh-m-item:last-of-type:after{
  display:none;
}
.wh-m-item-point{
  background:#357c99;
  border-color:#357c99;
  color:#fff;
}
.wh-m-item-soft{
  background:#eef6f8;
  color:#2b6176;
}
.wh-m-item-last{
  margin-bottom:0;
}
.wh-m-item-last:after{
  display:none;
}

.wh-m-group{
  position:relative;
  border:1px dashed #cfe0ee;
  border-radius:14px;
  background:linear-gradient(180deg,#fbfdff 0%, #ffffff 100%);
  padding:12px;
  margin:0 0 18px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
}
.wh-m-group:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-18px;
  width:2px;
  height:18px;
  background:#c9d6e2;
  transform:translateX(-50%);
}
.wh-m-chip{
  border:1px solid #d9e1ea;
  border-radius:12px;
  background:#fff;
  padding:12px 10px;
  text-align:center;
  color:#2f3f52;
  font-size:16px;
  line-height:1.5;
  font-weight:700;
}

/* 주요화면 하위탭 */
.wh-subtabs{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:18px;
}
.wh-subtab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 16px;
  border:1px solid #d9e1ea;
  border-radius:999px;
  background:#fff;
  color:#324356;
  font-size:16px;
  font-weight:400;
  text-decoration:none;
  transition:all .2s ease;
}
.wh-subtab:hover{
  color:#357c99;
  border-color:#b8d1db;
  background:#f7fbfc;
}
.wh-subtab.is-active{
  background:#357c99;
  border-color:#357c99;
  color:#fff;
  font-weight:700;
}

.wh-main-panel{
  display:none;
}
.wh-main-panel.is-active{
  display:block;
}

/* 주요화면 */
.wh-main-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.wh-shot{
  border:1px solid #d9e1ea;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
}
.wh-shot-thumb{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  aspect-ratio:16 / 10;
  background:linear-gradient(135deg,#eef6f8 0%, #f8fbfc 100%);
  color:#7b8b9a;
  font-size:16px;
  font-weight:700;
}
.wh-shot-body{
  padding:18px;
}
.wh-shot-tit{
  margin-bottom:8px;
  color:#1b2430;
  font-size:16px;
  line-height:1.4;
  font-weight:700;
}

@media (max-width:1024px){
  .wh-main-grid{
    grid-template-columns:repeat(2, 1fr);
  }

  .wh-down{
    margin-right:70px;
  }
}

@media (max-width:767px){
  .wh-tabs{
    gap:6px;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
  .wh-tab{
    flex:0 0 auto;
    min-height:46px;
    padding:0 14px;
    font-size:16px;
  }

  .wh-sec{
    padding-top:32px;
  }
  .wh-sec-title{
    font-size:18px;
  }

  .wh-card,
  .wh-flow-box{
    padding:16px;
  }

  .wh-flow-pc{
    display:none;
  }
  .wh-flow-m{
    display:block;
  }

  .wh-m-group{
    grid-template-columns:1fr;
  }

  .wh-subtabs{
    gap:6px;
    margin-bottom:14px;
  }
  .wh-subtab{
    min-height:40px;
    padding:0 14px;
    font-size:16px;
  }

  .wh-main-grid{
    grid-template-columns:1fr;
    gap:12px;
  }
}
.menu_cfg{
  width:100%;
  color:#1b2430;
}

.menu_cfg *{
  box-sizing:border-box;
}

.menu_cfg_head{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 18px;
}

.menu_cfg_bullet{
  width:14px;
  height:14px;
  border-radius:4px;
  background:#357c99;
  position:relative;
  flex:0 0 auto;
}

.menu_cfg_bullet:before{
  content:"";
  position:absolute;
  left:5px;
  top:3px;
  width:4px;
  height:6px;
  border-right:1.5px solid #fff;
  border-bottom:1.5px solid #fff;
  transform:rotate(-45deg);
}

.menu_cfg_title{
  margin:0;
  font-size:18px;
  line-height:1.4;
  font-weight:700;
  color:#357c99;
  letter-spacing:-0.02em;
}

.menu_cfg_table{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.menu_cfg_row{
  display:grid;
  grid-template-columns:116px 1fr;
  align-items:stretch;
  background:#f5f7fb;
}

.menu_cfg_label{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 12px;
  background:#dfe8f6;
  color:#4e5f76;
  font-size:16px;
  line-height:1.4;
  font-weight:700;
  text-align:center;
  word-break:keep-all;
}

.menu_cfg_items{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0;
  padding:0 10px;
  background:#f5f7fb;
}

.menu_cfg_item{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 14px;
  color:#4a4f57;
  font-size:16px;
  line-height:1.4;
  font-weight:400;
  text-align:center;
  word-break:keep-all;
}

@media (max-width:767px){
  .menu_cfg_head{
    margin-bottom:14px;
  }

  .menu_cfg_title{
    font-size:18px;
  }

  .menu_cfg_row{
    grid-template-columns:1fr;
  }

  .menu_cfg_label{
    justify-content:flex-start;
    min-height:auto;
    padding:12px 14px;
    font-size:16px;
  }

  .menu_cfg_items{
    padding:10px;
    gap:8px;
  }

  .menu_cfg_item{
    min-height:40px;
    padding:10px 12px;
    border:1px solid #d8e0ea;
    border-radius:10px;
    background:#fff;
    font-size:16px;
  }
}

/* 개요, 흐름도, 주요화면 기본 */


/* 도입효과 (원형 다이어그램) */
.erp-effect{
  border:1px solid #d9e1ea;
  border-radius:12px;
  background:#fff;
  padding:16px;
}

.erp-effect-center{
  position:relative;
  width:100%;
  max-width:560px;
  margin:0 auto;
  aspect-ratio:1 / 1;
}

.erp-center-node{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:30.357%;
  height:30.357%;
  border-radius:50%;
  background:linear-gradient(180deg, #eef3ff 0%, #dfe8ff 100%);
  border:2px solid #b9c8ee;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#2a3f74;
  box-shadow:0 10px 30px rgba(40,70,140,.14);
  z-index:2;
}

.erp-center-node strong{
  font-size:clamp(13px, 3vw, 18px);
  line-height:1.35;
  letter-spacing:-0.02em;
}

.erp-node{
  position:absolute;
  width:23.214%;
  height:23.214%;
  border-radius:50%;
  border:1px solid #cfe0ee;
  background:linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:2.5%;
  box-sizing:border-box;
  color:#2f5f86;
  font-weight:700;
  box-shadow:0 6px 18px rgba(20,35,55,.08);
  z-index:2;
  font-size:clamp(11px, 2.4vw, 16px);
  line-height:1.35;
  letter-spacing:-0.02em;
  word-break:keep-all;
}

/* 노드 위치 */
.erp-node--n1{
  left:50%;
  top:6%;
  transform:translate(-50%, 0);
}
.erp-node--n2{
  right:2%;
  top:26%;
  transform:translate(0, -50%);
}
.erp-node--n3{
  right:8%;
  bottom:16%;
  transform:translate(0, 0);
}
.erp-node--n4{
  left:50%;
  bottom:4%;
  transform:translate(-50%, 0);
}
.erp-node--n5{
  left:8%;
  bottom:16%;
  transform:translate(0, 0);
}
.erp-node--n6{
  left:2%;
  top:26%;
  transform:translate(0, -50%);
}

/* 연결선 */
.erp-line{
  position:absolute;
  left:50%;
  top:50%;
  width:1px;
  height:36%;
  background:#c7d3e3;
  transform-origin:bottom center;
  opacity:.9;
  z-index:1;
}

.erp-line--l1{ transform:translate(-50%, -100%) rotate(0deg); }
.erp-line--l2{ transform:translate(-50%, -100%) rotate(60deg); }
.erp-line--l3{ transform:translate(-50%, -100%) rotate(120deg); }
.erp-line--l4{ transform:translate(-50%, -100%) rotate(180deg); }
.erp-line--l5{ transform:translate(-50%, -100%) rotate(240deg); }
.erp-line--l6{ transform:translate(-50%, -100%) rotate(300deg); }

@media (max-width:767px){
  .erp-effect{
    padding:12px;
  }

  .erp-effect-center{
    max-width:none;
  }

  .erp-center-node{
    border-width:1px;
  }

  .erp-node{
    border-width:1px;
  }
}

/*도입효과*/


			.board-wrap{
			  width:100%;
			  font-family:inherit;
			}

			.board-head{
			  margin:0 0 18px;
			}

			.board-title{
			  margin:0;
			  font-size:28px;
			  font-weight:700;
			  line-height:1.3;
			  color:#1d2b3a;
			  letter-spacing:-0.03em;
			}

			.board-desc{
			  margin:8px 0 0;
			  font-size:15px;
			  line-height:1.6;
			  color:#6c7a89;
			  letter-spacing:-0.02em;
			}

			.board-list{
			  border-bottom:1px solid #d9e1e8;
			}

			.board-list-head,
			.board-row{
			  display:grid;
			  grid-template-columns:90px minmax(0, 1fr) 110px 120px 80px;
			  align-items:center;
			}

			.board-list-head{
			  background:#d9e8f8;
			  border-top:1px solid #b8cade;
			  border-bottom:1px solid #c9d7e5;
			}

			.board-list-head .col{
			  padding:16px 14px;
			  font-size:15px;
			  font-weight:700;
			  color:#26496f;
			  text-align:center;
			  letter-spacing:-0.02em;
			}

			.board-list-head .subject{
			  text-align:center;
			}

			.board-row{
			  text-decoration:none;
			  border-bottom:1px solid #e7edf3;
			  transition:background .2s ease, border-color .2s ease;
			}

			.board-row:hover{
			  background:#f7fbff;
			}

			.board-row .col{
			  padding:18px 14px;
			  font-size:15px;
			  line-height:1.5;
			  color:#44515e;
			  letter-spacing:-0.02em;
			}

			.board-row .num,
			.board-row .writer,
			.board-row .date,
			.board-row .hit{
			  text-align:center;
			  color:#6a7683;
			}

			.board-row .subject{
			  min-width:0;
			}

			.subject-text{
			  display:block;
			  overflow:hidden;
			  text-overflow:ellipsis;
			  white-space:nowrap;
			  color:#2a3340;
			}

			.board-row:hover .subject-text{
			  color:#1e5d9e;
			}

			@media (max-width:767px){
			  .board-title{
				font-size:22px;
			  }

			  .board-desc{
				font-size:14px;
			  }

			  .board-list-head{
				display:none;
			  }

			  .board-row{
				display:block;
				position:relative;
				padding:14px 0;
			  }

			  .board-row .col{
				padding:0;
			  }

			  .board-row .num{
				position:absolute;
				top:16px;
				left:0;
				min-width:42px;
				height:24px;
				padding:0 8px;
				border:1px solid #cbd8e5;
				border-radius:30px;
				background:#f5f9fd;
				font-size:12px;
				font-weight:700;
				line-height:22px;
				text-align:center;
				color:#53708e;
				box-sizing:border-box;
			  }

			  .board-row .subject{
				padding:0 0 0 56px;
			  }

			  .subject-text{
				white-space:normal;
				font-size:15px;
				font-weight:600;
				line-height:1.5;
			  }

			  .board-row .writer,
			  .board-row .date,
			  .board-row .hit{
				display:inline-block;
				margin:10px 10px 0 56px;
				font-size:13px;
				color:#7b8794;
				text-align:left;
				vertical-align:top;
			  }

			  .board-row .writer:before{
				content:"작성자 ";
				font-weight:600;
				color:#4d5b68;
			  }

			  .board-row .date:before{
				content:"작성일 ";
				font-weight:600;
				color:#4d5b68;
			  }

			  .board-row .hit:before{
				content:"조회 ";
				font-weight:600;
				color:#4d5b68;
			  }
			}

/*게시판*/

/* 1. 이미지를 감싸는 영역 (액자 역할) */
.wh-shot-thumb {
	width: 100%; /* 가로는 부모 너비에 맞춤 */
	height: 200px; /* 중요: 높이를 고정합니다. (원하는 높이로 조절하세요) */
	overflow: hidden; /* 영역 밖으로 나가는 것 방지 */
	background: #f8f9fa; /* 중요: 이미지 여백 부분에 보일 배경색 (선택사항) */
	border-radius: 8px; /* 테두리 둥글게 (선택사항) */
	margin-bottom: 10px; /* 아래 글자와의 간격 */
	/* [선택] 이미지를 상자 중앙에 배치하고 싶다면 아래 3줄 추가 */
	display: flex;
	align-items: center; /* 세로 가운데 정렬 */
	justify-content: center; /* 가로 가운데 정렬 */
}

	/* 2. 이미지 자체 스타일 (사진 역할) */
	.wh-shot-thumb img {
		width: 100%; /* 상자 너비에 맞춤 */
		height: 100%; /* 상자 높이에 맞춤 */
		/* [핵심] object-fit: contain */
		/* 원본 비율을 유지하면서, 이미지가 상자 안에 쏙 들어가도록 '축소'합니다. */
		/* 이미지가 상자보다 작으면 여백이 생기지만, 절대 잘리거나 찌그러지지 않습니다. */
		object-fit: contain;
		display: block; /* 하단 미세 공백 제거 */
	}

/* 전체 그리드 스타일 (선택사항) */
.wh-main-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* 모바일 2열 배치 예시 */
	gap: 15px; /* 아이템 간 간격 */
	padding: 10px;
}

.wh-shot {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 10px;
	text-align: center;
}

.wh-shot-tit {
	font-weight: bold;
	font-size: 14px;
	margin-top: 5px;
}
.p20 {padding:20px 0}
.flow_img img { width:100%}

.wh-main-panel .wh-main-grid {
	display: flex; /* 1. Grid 대신 Flex를 사용하면 줄바꿈 제어가 더 유연합니다. */
	flex-wrap: wrap; /* 2. 우측 끝에 닿으면 다음 줄로 자동으로 넘김 */
	justify-content: flex-start; /* 3. 무조건 좌측 시작점부터 배치 (가운데 정렬 해제) */
	gap: 20px; /* 4. 사진 카드 사이의 간격 */
	padding: 30px 0;
	width: 100%; /* 5. 부모 너비에 꽉 차게 설정 */
}

/* [수정] 각 사진 카드의 가로 크기를 고정하거나 비율로 설정 */
.wh-main-panel .wh-shot {
	/* 한 줄에 4개를 띄우고 싶다면 (100% / 4) - 간격값 */
	width: calc(25% - 15px);
	min-width: 220px; /* 6. 너무 작아지지 않도록 최소 크기 지정 (이 크기보다 작아지면 다음 줄로 이동) */
	background: #fff;
	border: 1px solid #e1e1e1;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* 사진 영역 높이 및 이미지 비율 (기존 유지) */
.wh-main-panel .wh-shot-thumb {
	width: 100%;
	height: 160px; /* 높이는 원하시는 만큼 조절 */
	background: #f8f9fa;
	border-bottom: 1px solid #e1e1e1;
}

	.wh-main-panel .wh-shot-thumb img {
		width: 100%;
		height: 100%;
		object-fit: contain; /* 사진이 잘리지 않고 영역 안에 쏙 들어감 */
		display: block;
	}

/* 모바일 대응 (한 줄에 2개씩) */
@media screen and (max-width: 768px) {
	.wh-main-panel .wh-shot {
		width: calc(50% - 10px); /* 모바일은 가로 2개 배치 */
		min-width: 140px;
	}
}
.wh-shot-thumb img {
	cursor: pointer;
	transition: opacity 0.2s;
}

	.wh-shot-thumb img:hover {
		opacity: 0.8;
	}

/* [신규] 이미지 팝업 모달 스타일 */
#whImageModal {
	display: none; /* 평소엔 숨김 */
	position: fixed;
	z-index: 10000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.85); /* 배경 어둡게 */
	cursor: zoom-out;
}

	#whImageModal .modal-content {
		margin: auto;
		display: block;
		max-width: 90%;
		max-height: 90%;
		position: relative;
		top: 50%;
		transform: translateY(-50%);
		border: 4px solid #fff;
		box-shadow: 0 0 20px rgba(0,0,0,0.5);
		animation: zoomIn 0.3s;
	}

/* 닫기 버튼 */
.modal-close {
	position: absolute;
	top: 20px;
	right: 30px;
	color: #fff;
	font-size: 50px;
	font-weight: bold;
	cursor: pointer;
}

@keyframes zoomIn {
	from {
		transform: translateY(-50%) scale(0.8);
		opacity: 0;
	}

	to {
		transform: translateY(-50%) scale(1);
		opacity: 1;
	}
}