.sub_con {width:100%;  margin:0 auto;   font-size:16px; font-weight:300; line-height:1.4 }
.sub_con .vi {position:relative; width:100%; height:700px; border-radius:0 0 50px 50px; overflow:hidden;  background:url('/common/img/sub_vi1.jpg') no-repeat center; background-size:cover; margin-bottom:150px}
.sub_con .vi.bg2 {background:url('/common/img/sub_vi2.jpg') no-repeat center; background-size:cover;}
.sub_con .vi.bg3 {background:url('/common/img/sub_vi3.png') no-repeat center; background-size:cover;}
.sub_con .vi.bg4 {background:url('/common/img/sub_vi4.jpg') no-repeat bottom; background-size:cover;}
.sub_con .vi.bg5 {background:url('/common/img/sub_vi5.jpg') no-repeat center; background-size:cover;}


.sub_con .vi:after {content:''; position:absolute; left:0; top:0; background:rgba(0,0,0,.5); width:100%; height:100%;}
.sub_con .vi .in {position:absolute; z-index:9; width:100%; display:flex; flex-direction:column; align-items:center; height:100%;  justify-content:center; max-width:100%;text-align:center}
.sub_con .vi .in h3 {font-size: 2.7em; font-weight:600; color:#fff; margin-top:70px; letter-spacing:1px }
.sub_con .vi .in p {font-size:1.2em; font-weight:400; color:#fff}

hr.sub_hr {height:100px}
hr.sub_hr2 {height:30px}

h3.guide {font-size:2em; margin-bottom:50px}
.b_t {font-size:1.5em; font-weight:600}


.sub_con img {max-width:100%}

aside {width:100%;background: rgba(255, 255, 255, 1); border-bottom:1px solid #ddd;  position:relative; z-index:99;  }
aside ul {width:100%; display:flex; justify-content:center;  }
aside ul li { font-size:1.15em;  padding:18px 0;  margin:0 20px; position:relative; box-sizing:border-box; text-align:Center; font-weight:400;}
aside ul li a {color:#222}
aside ul li.ov {border-bottom:4px solid var(--main_c);}
aside ul li.ov * {color:var(--main_c); font-weight:500}
.line {width:30px; height:3px; margin-bottom:15px; background-color:#333; display:inline-block}



@media all and (max-width:900px) {
		.sub_con {font-size:15px}
		.sub_con .vi {height:500px; border-radius:0; margin-bottom:70px }
		.sub_con .vi .in h3 {font-size:1.6em;  }
		.sub_con .vi .in p {font-size:1em; }

	h3.guide {font-size:1.5em; }

}

.about + footer {margin-top:0}
.about .img {width:100%; height:300px; background:url('/common/img/ .jpg') no-repeat center; background-color:#333; opacity:1; background-size:cover; } 
.about .text .t1 {font-size:1.5em; font-weight:600}
.about .text .t2 {line-height:1.55; font-size:1.06em; color:#222}
.about .text .t3 {line-height:1.55; font-size:1.3em; }
.about .div2 {background-color:#f5f5f5; padding:70px 0; box-sizing:border-box}
.about .div3 {background-color:#fff; padding:70px 0; box-sizing:border-box}

.contact .flex {gap:0; position:relative }
.contact .map {border-left:1px solid #ddd; flex-shrink:0; width:50%; padding-left:30px; margin-left:30px}
.contact .map dl {display:flex; flex-wrap:wrap;  gap:10px 0; margin-top:30px}
.contact .map dl dt {width:100px; flex-shrink:0; color:#111; font-weight:500}
.contact .map dl dd {width:calc(100% - 100px); flex-shrink:0; color: #333; }


@media all and (max-width:900px) {
        .about .text .t1 {font-size:1.2em;  }

		.contact .map {width:100%; margin-top:50px;  margin-left:0; padding-left:0; border-left:0}
 		.map iframe {height:200px !important}
		.map .box {flex-wrap:wrap; padding:20px}
		.map .box ul { width:100%}
		.map .box ul + img {display:none}

}


.why section.con > div {gap:0}
.why section.con .left_img {width:25%; background:url('/common/img/ .jpg') no-repeat; background-color:#f6f6f6;  box-sizing:border-box; padding:50px;  background-size:cover;  flex-shrink:0; font-size:35px; font-weight:700}
.why ul {display:flex; flex-direction:column; border-bottom:1px solid #ddd; }
.why ul li {display:flex; border:1px solid #ddd; border-bottom:none; border-left:4px solid var(--main_c); box-sizing:border-box; padding:30px }
.why ul li b {font-size:1.15em}
.why ul li p {margin-top:15px;}
.why ul li p.no {flex-shrink:0; width:75px; margin-top:0; line-height:1; font-size:25px; color:#999}


@media all and (max-width:900px) {
	.why section.con .left_img {width:100%; font-size:30px; padding:0; margin-bottom:20px; background:none}
	.why ul li p.no {display:none}


}
.product h3.guide {border-bottom:1px solid #ddd; padding-bottom:10px; margin-bottom:35px}
.product h4 {margin-bottom:15px; font-size:1.2em}
.product ul li {display:flex; gap:10px; margin-bottom:6px}
.product ul li:last-child {margin-bottom:0}
.product ul li:before {flex-shrink:0; content:''; margin-top:9px; width:5px; height:5px; display:inline-block; background-color:red; }
.product table th {border:1px solid #ddd; background-color:#333; font-weight:400; color:#fff; font-size:1em;  padding:10px}
.product table td {border:1px solid #ddd; font-size:.9em;  padding:10px;}

.product .text_box_wrap {display:flex; flex-wrap:wrap; gap:50px; margin-bottom:50px}
.product .text_box_wrap .text_box {width:calc(50% - 25px); box-sizing:border-box; }

.product .box_wrap {  gap:30px;  flex-wrap:wrap}
.product * {transition: all 0.3s ease-out;}
.product .box {width:calc(33% - 16px); position:relative; border:1px solid #ddd;box-sizing:border-box; line-height:0}
.product .box .img {width:100%; padding-bottom:100%; display:inline-block}


.product .box div.text { width:100%; height:100%; opacity:1; box-sizing:border-box; display:flex; flex-direction:column; text-align:center; align-items:center; justify-content:center; position:absolute; left:0; top:0; background-color:#fff;  padding:0 10px; }
.product .box div.text h5 {font-size:1.5em; font-weight:600; letter-spacing:0; line-height:1.3;  display:block;    }
.product .box div.text p {width:100%; margin-top:15px;  text-align:center; line-height:1.5;  text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:7; -webkit-box-orient: vertical; word-wrap: break-word; overflow:hidden}
.product .box:hover div.text  {opacity:0}

  @media all and (max-width:900px) {
	.product .text_box_wrap .text_box  {width:100%}
	.product .box  {width:100%;  }
	.product h4  {font-size:1.1em}
	.product .box div.text h5 {font-size:1.2em;   }


}
  /* 모달 오버레이 */
  .product-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.6);
    display: none; /* open 시 flex로 변경 */
    align-items: center; justify-content: center;
    z-index: 9999999999999999;
    padding: 20px;
  }
  .product-modal.open { display: flex; }

  /* 모달 컨텐츠 */
  .pm-dialog {
	position: relative;
	width:100%; 
	max-width:650px; 
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0,0,0,.35);
	display:flex;
	flex-direction:column;
 	gap: 0;
	overflow-y:auto;
	height:85vh; 
  }

.pm-image { width:100%; position:relative}
.pm-image img {width:100%}
.pm-index { position: absolute; bottom: 20px; right: 20px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 10px; }

.pm-content { width:100%; height:auto; box-sizing:border-box; padding: 28px;  text-align:center }
.pm-title { font-size:30px; }
.pm-desc { line-height: 1.6; color: #333; margin-top:20px }
 
  /* 닫기 버튼 */
.pm-close { 
right:20px; 
top:20px; 
 position:fixed;
    pointer-events: auto;
    width: 48px; height: 48px; border-radius: 50%;
    border: none; background: rgba(255,255,255,.95);
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    cursor: pointer; font-size: 40px;
    display: grid; place-items: center;
	  }

  /* 내비 버튼 */
  .pm-nav {
    position:fixed;
    top: 50%; 
	left:50%; 
    display: flex; justify-content: space-between; align-items: center;
   transform: translate(-50%, -50%);  
    pointer-events: none;
    max-width:650px; 
	width:100%;
    }
  .pm-btn {
   position:fixed;
    pointer-events: auto;
    width: 48px; height: 48px; border-radius: 50%;
    border: none; background: rgba(255,255,255,.95);
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    cursor: pointer; font-size: 22px;
    display: grid; place-items: center;
  }
   .pm-prev {left:10px}
   .pm-next {right:10px}

  .pm-btn:active { transform: scale(.98); }


@media all and (max-width:900px) {
	.pm-close {right:10px; top:10px;width:35px; height:35px;  font-size:30px}
	.pm-title {font-size:1.2em}		
	.pm-desc {margin-top:10px; font-size:.9em}
	 .pm-btn  {width:35px; height:35px; font-size:20px; line-height:.7}

}