@charset "utf-8";
@import url("./font-awesome/css/font-awesome.min.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&family=Poppins:wght@100;200;300;400;500;600;700&display=swap'); 

/* ========================== 초기화 [s] */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block}
body{line-height:1;font-family:'Noto Sans KR'}
ol, ul, dl, dt, dd{list-style:none}
blockquote, q{quotes:none}
blockquote:before, blockquote:after,q:before, q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}
input, button{margin:0;padding:0;font-family:'Noto Sans KR'}
input[type="submit"]{cursor:pointer}
button{cursor:pointer}
textarea, select{font-family:'Noto Sans KR'}
select{margin:0}
a{color:#222;text-decoration:none}
label, input, button, select, img{vertical-align:middle}
body{font-size:0.81em}
*, :after, :before{box-sizing:border-box}
*{-webkit-text-size-adjust:none}
.sound_only{display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}
/* ========================== 초기화 [e] */

#sh_wrapper, #sh_wrapper , #sh_wrapper :before, #sh_wrapper {box-sizing:border-box}
#sh_wrapper{position:relative;width:100%;font-weight:400;background-color:#fff}
#sh_wrapper.sub{background-color:#fff;background:none}

/* =========================== HEADER */
#sh_hd{position:relative;z-index:999;width:100%} 
#sh_hd_wrapper{position:absolute;width:100%;margin:0 auto;padding:0;zoom:1}
#sh_hd_wrapper:after{display:block;clear:both;content:"";width:100%;height:1px;background:rgba(255,255,255,.15)}
#sh_nav_wrap{position:fixed;top:0;left:0;right:0;height:96px;z-index:9999;}
#sh_nav_wrap.fixed{border-bottom:1px solid #e1e1e1; background:#ffffff;}
#sh_nav_wrap.fixed #sh_nav > li > a{color:#111}
#sh_nav_wrap.on{border-bottom:1px solid #e1e1e1; background:#ffffff;}
#sh_nav_wrap.on #menuLine{background-color:#666}

/* 네비게이션 컨테이너 추가 */
.sh_nav_inner {
    position: relative;
    max-width: 1200px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

/* 로고 */
#sh_top_logo{position:absolute; left:20px; top:50%; transform:translateY(-50%);}
#sh_top_logo img{width:280px; height:auto; display:block; transition: width 0.3s ease;}

/* 대분류  */
#sh_nav{position:absolute;top:0;right:0;z-index:5001;min-width:400px;height:96px}
#sh_nav:after{display:block;content:"";visibility:hidden;clear:both}
#sh_nav > li{float:left;position:relative;padding:0 35px;line-height:96px}
#sh_nav > li > a{display:block;font-size:16px;color:#222;transition:all .2s;font-weight:500}
#menuLine{position:absolute;bottom:-1px;left:50%;width:0;height:1px;background-color:transparent;transition:all 0.5s ease-in-out}
.top_nav_bg{
    position:fixed; 
    width:100%; 
    left:0; transform:none; 
    display:none; top:96px; 
    height:170px; /* 요청하신 170px로 수정 */
    background:rgba(255,255,255,0.95); /* 반투명 효과 */
    border-bottom:1px solid rgba(0,0,0,0.05);
    box-shadow:0px 10px 20px rgba(0,0,0,0.05);
    z-index:9998;
}
/* 소분류 */
.sh_nav_s{display:none;position:absolute;width:100%;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);padding:15px 0 25px}
.sh_nav_s li a{display:block;margin:0px;font-size:13.5px;line-height:26px;text-align:center;color:#444;transition:color .2s;font-weight:400}
.sh_nav_s li a:hover{color:#000;font-weight:500}
/* 오픈메뉴 */
#pfBtn{float:none;position:absolute;right:96px;top:50%;transform:translateY(-50%);z-index:5003;padding:10px;cursor:pointer;}
#pfBtn.no_pointer{pointer-events:none;cursor:alias}
#pfWrap{display:none;position:fixed;top:0;right:-100%;z-index:5002;width:100%;height:100%}
.pf_cate{display:none;position:absolute;right:0;top:0;width:0;height:100%;background:rgb(118,76,162);
background:linear-gradient(360deg, rgba(118,76,162,1) 0%, rgba(102,126,234,1) 100%);border-top-left-radius:100px}
.pf_cate ul{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.pf_cate ul li{margin:0 0 12px 100px;font-weight:200;text-align:center;opacity:0}
.pf_cate ul li > a{display:inline-block;position:relative;font-size:24px;line-height:1.6;color:#fff;letter-spacing:0;-webkit-transition:all .3s;transition:all .3s}
.pf_cate ul li:nth-child(1){animation-delay:.4s}
.pf_cate ul li:nth-child(2){animation-delay:.5s}
.pf_cate ul li:nth-child(3){animation-delay:.6s}
.pf_cate ul li:nth-child(4){animation-delay:.7s}
.pf_cate ul li:nth-child(5){animation-delay:.8s}
.pf_cate ul li a.off{color:#acb2b9}
.pf_cate ul li a .nav_num{position:absolute;left:0;top:5px;font-size:11px;font-weight:600;color:#fff;opacity:0;letter-spacing:1px;-webkit-transition:all .3s;transition:all .3s;font-family:'Poppins'}
.pf_cate ul li a:hover{padding-left:30px}
.pf_cate ul li a:hover .nav_num{opacity:1}
.pf_cate .ct_link{position:absolute;bottom:100px;left:50%;transform:translateX(-50%);font-size:40px;font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.2);-webkit-transition:all .3s;transition:all .3s;cursor:pointer;font-family:'Poppins'}
.pf_cate .ct_link:hover{color:#fff;border:none}
.pf_img{position:absolute;right:0;top:0;width:50%;height:100%}
#pfVisual{overflow:hidden;position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:0;height:700px;background-color:#7d3951;opacity:0}
#pfSlide li{position:absolute;left:0;top:0;width:500px;height:700px}
/* 반응형 메뉴 [s] */
#topmenuM{display:none;position:relative;width:100%;padding:20px 15px;line-height:1.8;background-color:#fff;font-family:'Noto Sans KR'}	
/* 로고 */
#m_logo{position:relative}
#m_logo a{display:inline-block}
#m_logo img{}
/* 상단 버튼 및 오픈메뉴 */
#m_navBtn{position:absolute;top:16px;right:15px;z-index:5;width:30px;height:30px}
#m_navBtn span{display:block;position:relative;top:50%;transform:translateY(-50%);width:100%;height:2px}
#m_navBtn span:before, #m_navBtn span:after{display:block;content:"";position:absolute;top:-6px;width:30px;height:2px;background-color:#222;-webkit-transition:all .1s;transition:all .1s}
#m_navBtn span:after{top:6px;width:16px;right:0;background-color:#6e62c3}
#m_navBtn.on{position:fixed}
#m_navBtn.on span:before{top:0;right:-4px;transform:rotate(45deg)}
#m_navBtn.on span:after{top:0;right:-4px;width:30px;transform:rotate(-45deg);background-color:#222}
#navWrap{display:none;position:fixed;left:0;top:0;z-index:4;width:100%;height:100%;background-color:rgba(0,0,0,.7)}
#navWrap .inner{overflow-y:scroll;opacity:0;position:fixed;right:-40px;top:0;z-index:6;min-width:300px;width:75%;height:100%;padding:60px 0;background-color:#fff;-webkit-transition:all .1s;transition:all .1s}
#navWrap.on .inner{opacity:1;right:0;-webkit-transition:all .4s;transition:all .4s}
#navWrap .inner:before, #navWrap .inner:after{opacity:0;display:block;position:fixed;top:0;right:-40px;z-index:1;content:"";min-width:300px;width:70%;height:60px;background-color:#fff;-webkit-transition:all .1s;transition:all .1s}
#navWrap .inner:after{top:auto;bottom:0}
#navWrap.on .inner:before, #navWrap.on .inner:after{opacity:1;right:0;-webkit-transition:all .4s;transition:all .4s}
#navWrap .inner .mo_hd_copy{position:fixed;right:0;bottom:15px;z-index:2;min-width:300px;width:70%;font-size:12px;text-align:center;color:#888}
#navWrap .user_tip{padding:10px 20px;background-color:#f5f5f5}
#navWrap .user_tip li{display:inline-block}
#navWrap .user_tip li+li{margin-left:10px}
/* 대분류 */
#topmenuM .m_lnb .m_bmenu{display:block;position:relative;width:100%;height:52px;padding:0 20px;border:none;border-bottom:1px solid #ddd;background:none;font-size:16px;font-weight:400;line-height:52px;color:#222;text-align:left;font-family:'Noto Sans KR'}
#topmenuM .m_lnb .m_bmenu:after{float:right;content:"\f107";font-family:'fontawesome'}
#topmenuM .m_lnb .m_bmenu.on:after{content:"\f106"}
/* 소분류 */
#topmenuM .m_smenu{display:none;padding:15px 20px;border-bottom:1px solid #ddd;background-color:#f2f3f5}
#topmenuM .m_smenu li a{font-size:14px;color:#777}
@media (max-width:1200px){
.sh_nav_inner{padding:0 2%}
#sh_nav{right:2%; min-width:auto}
#sh_nav > li{padding:0 20px}
#sh_top_logo{left: 2%;}
#pfBtn{right:2%;}
}
/* 데스크탑에서 햄버거 버튼 숨김 */
#sh_m_nav_btn{display:none}

@media (max-width: 1024px){
#sh_hd{height:60px}
#sh_nav_wrap{display:block !important; position:absolute; top:0; left:0; width:100%; height:60px; background:#fff !important; z-index:9999; border-bottom:1px solid #eee; overflow:visible !important;}
#sh_top_logo{position:absolute; left:20px; top:50%; transform:translateY(-50%); margin:0; float:none; display:block !important;}
#sh_top_logo img{width:130px !important; height:auto !important; display:block;}

/* 햄버거 버튼: 위치 및 크기 최적화 */
#sh_m_nav_btn{
    display:block !important; 
    position:absolute; right:15px; top:18px; 
    width:26px; height:20px; 
    z-index:10005 !important; cursor:pointer;
} 
#sh_m_nav_btn span{
    display:block; position:absolute; left:0;
    width:100%; height:2px; background:#333;
    border-radius:2px; transition: all .3s;
}
#sh_m_nav_btn span:nth-child(1){top:0}
#sh_m_nav_btn span:nth-child(2){top:9px}
#sh_m_nav_btn span:nth-child(3){top:18px}

/* 클릭 시 X 모양 */
#sh_nav_wrap.on #sh_m_nav_btn span:nth-child(1){top:9px; transform:rotate(45deg)}
#sh_nav_wrap.on #sh_m_nav_btn span:nth-child(2){opacity:0}
#sh_nav_wrap.on #sh_m_nav_btn span:nth-child(3){top:9px; transform:rotate(-45deg)}

/* 메뉴 리스트: 깔끔하고 컴팩트한 드롭다운 */
#sh_nav{display:none !important; list-style:none; margin:0; padding:0;}
#sh_nav_wrap.on #sh_nav{
    display:block !important;
    position:absolute; 
    left:3%; width:94%; /* 양옆 여백 부여하여 튀어나가지 않게 함 */
    top:65px; 
    height:auto !important;
    background:#fff; border:1px solid #eee; 
    border-radius:15px; /* 라운드 처리 */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    padding:0;
    overflow: hidden;
}

#sh_nav_wrap.on #sh_nav > li.menu-item{display:block !important; width:100%; border-bottom:1px solid #f1f1f1;}
#sh_nav_wrap.on #sh_nav > li.menu-item:last-child{border-bottom:none;}
#sh_nav_wrap.on #sh_nav > li.menu-item > a{display:block; padding:0 20px; line-height:48px; font-size:14px; color:#333; font-weight:500;}

/* 소메뉴: 메인 박스 안에 쏙 들어가는 라운드 박스 형태 */
#sh_nav_wrap.on .sh_nav_s{
    position:static; 
    display:block !important; 
    transform:none; 
    width:92%; /* 가로폭을 줄여서 양옆 여백 확보 */
    margin:0 auto 15px; /* 아래쪽 경계선과 간격을 둠 */
    padding:8px 0; 
    background:#f7f8f9; /* 약간 더 깊은 회색으로 입체감 부여 */
    border-radius:10px; /* 둥근 모서리 */
    box-shadow:none;
}

#sh_nav_wrap.on .sh_nav_s li a{
    display:block; 
    text-align:left; 
    padding:0 25px; 
    line-height:36px; 
    font-size:13px; 
    color:#777;
}

#pfBtn, #topmenuM{display:none !important;}
}
@media(max-width:768px){.psh_form-table,.psh_form-table tbody,.psh_form-table tr,.psh_form-table th,.psh_form-table td{display:block;width:100%;}}
@media(max-width:768px){.psh_form-table th{margin-top:14px;font-size:14px;}}
@media(max-width:768px){.psh_form-table td{margin-top:6px;}}

@media(max-width:768px){
#sh_container_wrapper{display:block}
#sh_aside{width:100%;margin-bottom:30px}
#sh_content{width:100%}
}
@media(max-width:768px){
#sh_sub_banner{height:220px}
.section_title{font-size:20px}
.process_timeline li{padding:15px}
}


/* 반응형 메뉴 [e] */

/* =========================== SUB */
#sh_sub_banner{width:100%;height:400px;margin-top:97px;background:url(../img/sub/sub_main_banner.jpg)no-repeat;animation:main 25s linear infinite}
@keyframes main{from{background-position:top center}50%{background-position:bottom center}100%{background-position:top center}}
@media(max-width:768px){#sh_sub_banner{width:100%;height:220px;margin-top:70px;background:url(../img/sub/sub_main_banner.jpg)center/cover no-repeat;animation:main 25s linear infinite}}

/* =========================== SNB */
#sh_aside{position:relative;width:100%;max-width:1200px;margin:-25px auto 0;text-align:center;background-color:transparent}

/* =========================== MAIN */
#sh_section{position:relative;width:100%;padding-top:80px}
#sh_section .grid{position:absolute;left:50%;top:0;transform:translateX(-50%);width:1200px;height:100%}
#sh_section .grid span{position:absolute;left:0;top:0;bottom:0;width:1px;background-color:#e1e1e1}
#sh_section .grid span:nth-child(2){left:25%}
#sh_section .grid span:nth-child(3){left:50%}
#sh_section .grid span:nth-child(4){left:75%}
#sh_section .grid span:nth-child(5){left:100%}

/* =========================== CONTAINER */
#sh_container{position:relative;z-index:15}
#sh_content{position:relative;z-index:200;width:100%;max-width:1200px;min-height:580px;padding:0;margin:70px auto 40px;font-size:14px;color:#888;zoom:1}
#sh_content:after{display:block;visibility:hidden;clear:both;content:""}
#sh_content_tit{padding-top:205px;text-align:center;font-size:15px;color:#fff}
#sh_content_tit h3{display:inline-block;position:relative;z-index:100;margin-bottom:17px;font-size:34px;font-weight:400}
#sh_content_tit h3:after{display:block;position:absolute;z-index:99;width:41px;height:42px;content:'';top:-12px;right:-22px}
#sh_content_tit .fa-home{color:#fff}
#sh_content_tit .fa-angle-right{padding:0 5px;color:#b5b5b5}

/* =========================== FOOTER */
#sh_ft {
    position: relative;
    z-index: 10;
    width: 100%;
    background: #0a0a0a; /* 더 깊은 리얼 블랙에 가까운 색 */
    padding: 60px 0;
    color: #999;
    font-size: 13.5px;
    border-top: 1px solid #1f1f1f; /* 테두리도 더 어둡게 */
}

#sh_ft .sh_ft_inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center; /* 수직 중앙 정렬 */
    justify-content: space-between; /* 양 끝 정렬 */
}

/* 좌측: 푸터 로고 (통 이미지 영역) */
#sh_ft .ft_logo {
    width: 280px; 
    
    /* [위치 조절] 로고 위치 미세 조정 */
    margin-right: 60px; /* 우측 텍스트와의 간격 */
    margin-top: -60px;    /* 위아래 이동: (-)값은 위로, (+)값은 아래로 */
    margin-left: 0px;   /* 좌우 이동 */
    
    display: flex;
    align-items: center; /* 기본 수직 중앙 정렬 */
}

#sh_ft .ft_logo a {
    display: block;
    width: 100%;
}

#sh_ft .ft_logo img {
    max-width: 100%;
    height: auto;
    display: block;
    filter: brightness(0.85) contrast(1.1); /* 살짝 어둡고 진하게 설정 */
    transition: filter 0.3s ease;
}

#sh_ft .ft_logo img:hover {
    filter: brightness(1) contrast(1); /* 마우스 올리면 원래 밝기로 */
}

/* 우측: 회사 정보 */
#sh_ft .ft_info {
    flex: 1;
    text-align: right;
}

#sh_ft .ft_info .ft_txt {
    line-height: 1.8; /* 줄간격 조정 */
    margin-bottom: 0;
    color: #888;
}

#sh_ft .ft_info .bar {
    display: inline-block;
    color: #333;
    margin: 0 10px;
}

#sh_ft .ft_info .copy {
    display: block;
    margin-top: 10px; /* 위쪽 정보와 간격 */
    font-size: 13px;
    color: #666;
}

#sh_ft .ft_info .terms {
    display: block;
    margin-top: 5px;
}

#sh_ft .ft_info a {
    color: #999;
    margin: 0 5px;
    text-decoration: none;
    font-size: 13px;
}

#sh_ft .ft_info a b {
    color: #fff; /* 개인정보처리방침 강조 */
    font-weight: 500;
}

#sh_ft .ft_info a {
    color: #777;
    margin-left: 15px;
    text-decoration: none;
    transition: color 0.2s;
}

#sh_ft .ft_info a:hover {
    color: #2ba6ff;
}

/* 모바일 반응형 */
@media screen and (max-width: 1024px) {
    #sh_ft .sh_ft_inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    #sh_ft .ft_logo {
        margin-right: 0;
		margin-top: -40px;
        margin-bottom: 30px;
    }
    
    #sh_ft .ft_info {
        text-align: center;
    }

}

/* =========================== 반응형 하단 버튼 */
#fix_tel{opacity:0;display:none;position:fixed;right:15px;bottom:20px;z-index:101;width:65px;height:65px;margin-right:-10px;border-radius:50%;font-size:30px;text-align:center;line-height:65px;color:#fff;background-color:#6e62c3;box-shadow:5px 5px 5px rgba(0,0,0,.2);-webkit-transition:all .2s;transition:all .2s}
#fix_tel.active{opacity:1;margin-right:0}
#sh_ft_btns{display:none;padding:15px}
#sh_ft_btns .btns{overflow:hidden}
#sh_ft_btns a{float:left;display:block;width:100%;height:55px;font-size:16px;font-weight:600;line-height:55px;color:#fff;text-align:center;background-color:#6e62c3;font-family:'Noto Sans KR'}
#sh_ft_btns a.tel{font-size:18px;font-weight:700;letter-spacing:0;font-family:'Poppins'}
#sh_ft_btns a i{padding-right:5px;font-size:18px}

/* 반응형 [s] */
@media (max-width:1200px){
#sh_section .grid{width:100%}
#sh_section .grid span:nth-child(1), #sh_section .grid span:nth-child(5){display:none}
}
@media (max-width:1024px){
#sh_hd_wrapper{position:relative}
#sh_sub_banner{height:260px}
#sh_content_tit{padding-top:90px}
#sh_content{margin:0 auto}
#sh_aside{display:none}
#sh_section{padding-top:90px}
}
@media (max-width:768px){
#sh_ft{padding-top:80px}
#sh_ft .info{margin-bottom:40px}
#sh_ft .info span{font-size:16px}
#sh_ft .copy{height:auto}
#sh_ft .copy .copy_wrap{padding:15px;line-height:1;text-align:center}
#sh_ft .copy .icon{position:relative;right:auto;top:auto;margin-top:10px}
}
@media (max-width:480px){
#sh_content{min-height:350px}
#sh_sub_banner{height:auto;background:none}
#sh_content_tit{padding:15px 0;border-top:1px solid #d1d1d1;border-bottom:1px solid #eee;color:#222}
#sh_content_tit h3{margin:0;font-size:16px;font-weight:500}
#sh_content_tit p{display:none}
#fix_tel{display:block}
#sh_ft_btns{display:block}
#sh_section{padding-top:60px}
}
/* 반응형 [e] */
.icon_new{display:inline-block;margin-bottom:3px;margin-left:4px;padding:2px 4px;font-size:8px;font-weight:700;color:#fff;background:#e53935;border-radius:4px;vertical-align:middle;}
.icon_img::before{content: "\f03e";font-family: "FontAwesome";font-size: 13px;color: #888;margin-left: 4px;}


/* 2025-12-11 박상현 CSS */

/* ===== 섹션 전체 ===== */
#psh_list_section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 0;
    background-color: #f5f5f5;
}

/* ===== 상단 카테고리 버튼 ===== */
.psh_list_menu {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.psh_category-btn {
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 600;
    border: 2px solid #2c3e50;
    background: #fff;
    color: #2c3e50;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
}

.psh_category-btn.active {
    background: #2c3e50;
    color: #fff;
}

/* ===== 기존 디자인 보완 ===== */
.psh_list_txt_area{
	left: -0px;
}
.psh_list_content {
    position: relative;
    display: flex;
    width: 85%;
    max-width: 1300px;
    background: white;
    border-radius: 20px;
	margin: 0 auto;
	padding: 60px 20px; 
    overflow: visible;
}

.psh_list_txt_area {
    width: 32%;
    max-width: 380px;
    background: #f2f5f7;
    padding: 32px;
    border-radius: 14px;
    font-weight: bold;

    position: relative;
    left: -180px;   
    z-index: 3;      

    box-shadow: 0 20px 50px rgba(0,0,0,0.12);;  
}

.psh_list_txt_area h2 {
    font-size: 38px;
    margin: 0 0 8px 0;
}

.psh_list_txt_area p {
    font-size: 25px;
    font-weight: 400;
    color: #6b7b8c;
    margin: 0;
}

@media (max-width: 1024px), (max-height: 500px){
  .psh_list_content{
    flex-direction: column;
    width: 100%;
    padding: 24px 16px;
  }

  .psh_list_txt_area{
    width: 100%;
    max-width: none;
    left: 0;
    margin-bottom: 20px;
  }
}


/* ===== 오른쪽 상품 리스트 영역 ===== */
.psh_product_list {
    width: 70%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 0 40px 32px 0;
    flex-wrap: nowrap;
    gap: 60px;
}

/* ===== 개별 상품 카드 ===== */
.psh_product {
    position: relative;
    flex: 0 0 22%;                   
    margin: 0;
    background: #ffffff;
    border-radius: 14px;
    box-sizing: border-box;
    border: 2px solid transparent;
    transition:
        border-color 0.2s ease-out,
        transform 0.2s ease-out,
        box-shadow 0.2s ease-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 18px 14px;
    min-height: 270px;
    
    /* [애니메이션] 등장 효과 */
    opacity: 0;
    animation: fadeUp 0.6s ease-out forwards;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.psh_product:hover {
    border-color: #3498db;
    transform: translateY(-6px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}

/* 상품 이미지 */
.psh_product_img {
    width: 100%;
    max-width: 260px;
    height: 200px;          
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* 브랜드명 텍스트 */
.psh_product p {
    margin-top: 10px;
    color: #000000;
    font-family: 'Noto-medium';
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    pointer-events: none;
}

/* ===== 더보기 버튼 ===== */
.psh_product.psh_plus-item {
    flex: 0 0 25%;
    min-height: 220px;       
    padding: 0;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    cursor: pointer;
}


.psh_product.psh_plus-item img {
    width: 100px;
    height: 100px;
    transition: transform 0.4s ease-out;
}




/* ===== 반응형 (모바일) ===== */
@media screen and (max-width: 768px) {
    .psh_list_content {
        width: 95%;
        padding: 20px;
        flex-direction: column;      
        align-items: center;
    }

    .psh_list_txt_area {
        width: 100%;
        max-width: none;
        margin: 0 0 20px 0;
        border-radius: 12px;
    }

    .psh_product_list {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        padding: 0;
    }

    .psh_product {
        width: 100%;
        max-width: 260px;
    }

    .psh_product_img {
        max-width: 120px;
    }

    .psh_product.psh_plus-item {
        width: 80px;
        align-self: center;
    }
}
@media (max-width: 1024px), (max-height: 500px){
  .psh_product_list{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;

    padding: 0;
  }

  .psh_product{
    flex: none;        /* 🔥 flex 규칙 완전 해제 */
    min-width: 0;      /* 🔥 잘림 방지 핵심 */
    width: 100%;
    max-width: none;
  }

  .psh_product_img{
    max-width: 140px;
    height: 140px;
  }
}

/*-----------------------------------------------------------------------리스트 상세목록 CSS*-----------------------------------------------------------------------/
/* 전체 영역 */
.detail_top_wrap {
    width: 100%;
    margin-top: 20px;
}

/* 상단 라인 */
.detail_line {
    width: 100%;
    height: 1px;
    background-color: #eaeaea;
    margin-bottom: 20px;
}

/* 다음글 / 목록 버튼 */
.detail_nav {
    display: flex;
    justify-content: space-between;
    padding: 0 50px;
}

.nav_btn {
    border: 1px solid #ccc;
    background: #fff;
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 3px;
    cursor: pointer;
}

/* 타이틀 */
.detail_title {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    margin-top: 40px;
    margin-bottom: 40px;
}

/* 제품 메인 이미지 */
.detail_img_wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
}

.detail_img_wrap img {
    width: 420px;        /* 필요시 조정 가능 */
    object-fit: contain;
}

/*----------------------------------------신청하기----------------------------------------*/
/* 폼 전용 스타일 */
.form_hero { position: relative; width: 100%; height: 380px; background-size: cover; background-position: center; background-repeat: no-repeat; margin-top: 96px; display: flex; align-items: center; justify-content: center; text-align: center; }
.form_hero::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.4); z-index: 1; }
.form_hero_txt { position: relative; z-index: 2; color: #fff; }
.form_hero_txt .sub { font-size: 16px; opacity: 0.9; margin-bottom: 15px; font-weight: 500; }
.form_hero_txt h2 { font-size: 54px; font-weight: 800; letter-spacing: -1px; }

.form_container { max-width: 1000px; margin: 80px auto 120px; padding: 0 20px; }
.form_row { display: flex; margin-bottom: 25px; align-items: center; } /* 기본 중앙 정렬 */
.form_row.align_top { align-items: flex-start; } /* 문의내용 등은 상단 정렬 */
.form_label { width: 180px; font-size: 17px; font-weight: 700; color: #0040ff; flex-shrink: 0; }
.form_label span { color: #2ba6ff; }
.form_content { flex: 1; }

/* 지원사업 선택 버튼 그룹 */
.support_type_group { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
.type_btn { display: inline-flex; align-items: center; justify-content: center; width: calc(33.33% - 7px); height: 48px; border: 1px solid #ccc; border-radius: 50px; background: #fff; color: #888; font-size: 15px; cursor: pointer; transition: all 0.2s; box-sizing: border-box; }
.type_btn:hover { border-color: #999; color: #555; }
.type_btn.active { border-color: #2ba6ff; color: #2ba6ff; font-weight: 700; background: #eaf7ff; }

/* 입력 필드 공통 */
.form_input, .form_select, .form_textarea { width: 100%; padding: 14px 25px; border: 1px solid #ccc; border-radius: 50px; font-size: 15px; color: #333; outline: none; transition: border-color 0.2s; box-sizing: border-box; }
.form_select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") no-repeat right 35px center; padding-right: 60px; } /* 화살표 위치 왼쪽으로 이동 */
.form_textarea { border-radius: 20px; height: 200px; resize: none; line-height: 1.6; padding: 20px 25px; }
.form_input:focus, .form_select:focus, .form_textarea:focus { border-color: #2ba6ff; box-shadow: 0 0 0 3px rgba(43, 166, 255, 0.1); }

/* 반반 나누기 (담당자명, 전화번호) */
.form_half_wrap { display: flex; gap: 0; width: 100%; align-items: center; }
.form_half { flex: 1; display: flex; align-items: center; }
.form_half .form_label { width: 180px; } /* 담당자명 라벨 너비 고정 */
.form_half .form_content { padding-right: 20px; }
.form_half:last-child { margin-left: 20px; }
.form_half:last-child .form_label { width: 100px; text-align: right; padding-right: 25px; } /* 전화번호 라벨 */

/* 안내 문구 */
.form_guide { margin-top: 10px; font-size: 14px; color: #888; padding-left: 10px; }

/* 하단 버튼 */
.form_btn_area { margin-top: 60px; text-align: right; }
.btn_submit { display: inline-block; background: #2ba6ff; color: #fff; font-size: 18px; font-weight: 700; padding: 18px 60px; border-radius: 50px; border: none; cursor: pointer; transition: background 0.3s; box-shadow: 0 5px 15px rgba(43, 166, 255, 0.3); }
.btn_submit:hover { background: #008ce3; }

/* 모달 스타일 */
.psh_modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:9999;}
.psh_modal-box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:40px;border-radius:20px;text-align:center;min-width:320px;box-shadow:0 10px 30px rgba(0,0,0,0.2);}
.psh_modal-btns{display:flex;gap:10px;justify-content:center;margin-top:20px;}
.psh_modal-confirm{padding:10px 30px;border:none;border-radius:8px;background:#2ba6ff;color:#fff;cursor:pointer;}
.psh_modal-cancel{padding:10px 30px;border:none;border-radius:8px;background:#eee;color:#333;cursor:pointer;}

@media (max-width: 768px) {
    .form_hero { height: 260px; margin-top: 64px; }
    .form_hero_txt h2 { font-size: 32px; }
    .form_container { margin: 40px auto; }
    
    .form_row { flex-direction: column; margin-bottom: 25px; }
    .form_label { width: 100%; margin-bottom: 10px; font-size: 16px; padding-top: 0; }
    
    /* 모바일 버튼 2열 */
    .type_btn { width: calc(50% - 5px); font-size: 14px; padding: 10px 5px; }
    
    /* 반반 입력창 세로 배치 */
    .form_half_wrap { flex-direction: column; gap: 20px; }
    .form_half { width: 100%; display: block; }
    .form_half:first-child .form_label,
    .form_half:last-child .form_label { width: 100%; text-align: left; padding-right: 0; margin-bottom: 10px; }
    
    .btn_submit { width: 100%; padding: 15px 0; font-size: 16px; }
}
/*----------------------------------------신청하기 끝----------------------------------------*/

@media screen and (max-width: 768px) {

    /* 전체 영역 여백 줄이기 */
    .detail_top_wrap {
        margin-top: 10px;
    }

    /* 상단 라인 간격 살짝 줄이기 */
    .detail_line {
        margin-bottom: 12px;
    }

    /* 다음글 / 목록 버튼 : 패딩/폰트 줄이고 좌우 여백 줄이기 */
    .detail_nav {
        padding: 0 16px;
    }

    .nav_btn {
        padding: 4px 8px;
        font-size: 12px;
    }

    /* 타이틀 글자 크기 줄이고 간격도 줄이기 */
    .detail_title {
        font-size: 18px;
        margin-top: 24px;
        margin-bottom: 24px;
    }

    /* 제품 이미지 : 화면 폭에 맞게 */
    .detail_img_wrap {
        margin-bottom: 30px;
    }

    .detail_img_wrap img {
        width: 80%;          
        max-width: 320px;    
    }

    /* 상세 카드 : 폭을 넓게, 패딩과 글자 크기 줄이기 */
    .detail_card {
        width: 92%;
        padding: 20px 18px;
        border-radius: 10px;
        gap: 12px;
    }

    .detail_card_num {
        font-size: 18px;
    }

    .detail_card_text {
        font-size: 16px;
    }

    .detail_card_icon img {
        width: 40px;
    }
	.psh_list_txt_area{
	left: -0px;
}