@charset "utf-8";

/* =========================== SUB */
#subBnr{position:relative;z-index:20;width:100%;height:394px;color:#fff;background:url(../img/sub/sub_bg.jpg) center no-repeat;font-family:var(--kr-font)}
#subBnr .txt_area{position:relative;top:170px;opacity:0;padding-top:30px;text-align:center}
/* 서브 페이지의 대표 제목은 h1 입니다. (원본의 p 스타일을 그대로 물려받게 함) */
#subBnr .txt_area p,#subBnr .txt_area h1{padding-top:20px;font-size:38px;font-weight:700}
#subBnr .txt_area span{font-size:16px;color:rgba(255,255,255,.6)}
/* 반응형 [s] */
@media (max-width:1024px){
#subBnr{height:300px}
#subBnr .txt_area{top:50%;transform:translateY(-50%)}
#subBnr .txt_area p,#subBnr .txt_area h1{font-size:30px}
}
@media (max-width:768px){
#subBnr{height:220px}
#subBnr .txt_area span{font-size:15px}
#subBnr .txt_area p,#subBnr .txt_area h1{padding-top:15px;font-size:25px}
}
@media (max-width:480px){
#subBnr{height:auto;padding:15px 0;border-top:1px solid #e1e1e1;border-bottom:1px solid #e1e1e1;color:#222;background:#fff}
#subBnr .txt_area{position:initial;transform:none;opacity:1;padding:0}
#subBnr .txt_area span{display:none}
#subBnr .txt_area p,#subBnr .txt_area h1{padding:0;font-weight:500;font-size:15px}
}
/* 반응형 [e] */

/* =========================== SNB */
#sh_snb{display: table;overflow:hidden;margin:0 auto;padding-right:18px;font-family:var(--kr-font)}
#sh_snb li{float:left;margin-left:3px}
#sh_snb li a{display:block;position:relative;height:60px;padding:0 28px;font-size:15px;line-height:60px;color:#222;letter-spacing:-.2px;-webkit-transition:all .3s;transition:all .3s}
#sh_snb li a:after{display:block;content:"";position:absolute;bottom:0;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:0;height:1px;background-color:var(--primary)}
#sh_snb li.snb_on a{font-weight:500;color:var(--primary)}
#sh_snb li.snb_on a:after{width:100%}

/* =========================== PAGE */
#greeting{font-size:15px;font-weight:400;line-height:1.8;letter-spacing:-.2px;color:#777;font-family:'Noto Sans KR'}
#greeting .tit_area{padding:0 0 40px 5%;font-size:34px;font-weight:100;line-height:1.35;letter-spacing:-.5px;color:#222}
#greeting .tit_area p{font-weight:600}
#greeting .img{height:320px;background:url(../img/sub/greeting_img.jpg) center no-repeat;background-size:cover}
#greeting .cont{padding:40px 0 0 15%}
#greeting .cont .pl{white-space:pre-line}
#greeting .cont .sign{margin-top:30px;font-weight:500;color:#222}
#greeting .cont .sign span{margin-left:10px;font-size:17px}
@media(max-width:1024px){
#greeting{padding:20px;font-size:14px;line-height:1.6}
#greeting .tit_area{padding:0;font-size:28px;line-height:1.4;color:#222;word-break:keep-all}
#greeting .img{height:200px;margin:15px 0}
#greeting .cont{padding:0}
#greeting .cont .sign{margin-top:20px}
#greeting .cont .sign span{margin-left:0;font-size:15px}
}
@media(max-width:768px){
#greeting .cont .pl{white-space:normal}
}
@media(max-width:480px){
#greeting{padding:15px 12px}
#greeting .tit_area{font-size:22px}
}

/* =========================== 서브 공통 소제목 (체어핏 추가분) */
.pagecommon{font-family:var(--kr-font);color:#777}
.sec_head{margin-bottom:40px}
.sec_head .eng{display:block;margin-bottom:14px;font-size:14px;font-weight:700;letter-spacing:.14em;color:var(--primary);font-family:var(--eng-font)}
.sec_head .kr{font-size:30px;font-weight:600;line-height:1.4;letter-spacing:-.5px;color:#222;word-break:keep-all}
.sec_head .desc{margin-top:16px;font-size:15px;line-height:1.8;letter-spacing:-.2px;color:#777;word-break:keep-all}
.sec_wrap + .sec_wrap{margin-top:100px;padding-top:90px;border-top:1px solid #e8e8e8}

/* 카드 목록 (원칙 · 기준) */
.card_list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card_list li{padding:38px 32px;border:1px solid #e8e8e8;transition:all .25s}
.card_list li:hover{border-color:var(--primary);box-shadow:0 18px 40px rgba(31,94,88,.10);transform:translateY(-4px)}
.card_list .no{font-size:14px;font-weight:700;letter-spacing:.1em;color:var(--primary);font-family:var(--eng-font)}
.card_list .tit{margin:16px 0 12px;font-size:19px;font-weight:600;line-height:1.45;color:#222;word-break:keep-all}
.card_list .txt{font-size:15px;line-height:1.8;letter-spacing:-.2px;color:#777;word-break:keep-all}

/* 좌우 교차 배치 블록 */
.tech_row{display:flex;align-items:center;gap:60px}
.tech_row + .tech_row{margin-top:70px}
.tech_row:nth-child(even){flex-direction:row-reverse}
.tech_row .thumb{flex:0 0 46%;height:320px;background-position:center;background-size:cover;background-repeat:no-repeat}
.tech_row .body{flex:1}
.tech_row .body .step{font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--primary);font-family:var(--eng-font)}
.tech_row .body .tit{margin:14px 0 16px;font-size:26px;font-weight:600;line-height:1.4;color:#222;word-break:keep-all}
.tech_row .body .txt{font-size:15px;line-height:1.9;letter-spacing:-.2px;color:#777;word-break:keep-all}
.tech_row .body .point{margin-top:22px;padding-top:22px;border-top:1px solid #e8e8e8}
.tech_row .body .point li{position:relative;padding-left:16px;font-size:15px;line-height:1.9;color:#555}
.tech_row .body .point li:before{content:"";position:absolute;left:0;top:13px;width:5px;height:5px;border-radius:50%;background:var(--primary)}

/* 연혁 */
.history_list{position:relative;padding-left:34px}
.history_list:before{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:1px;background:#e1e1e1}
.history_list > li{position:relative;padding-bottom:46px}
.history_list > li:last-child{padding-bottom:0}
.history_list > li:before{content:"";position:absolute;left:-34px;top:8px;width:11px;height:11px;border-radius:50%;background:#fff;border:2px solid var(--primary)}
.history_list > li:first-child:before{background:var(--primary);box-shadow:0 0 0 5px rgba(31,94,88,.16)}
.history_list .year{font-size:24px;font-weight:700;letter-spacing:.02em;color:var(--primary);font-family:var(--eng-font)}
.history_list .items{margin-top:12px}
.history_list .items li{position:relative;padding-left:74px;font-size:15px;line-height:1.9;letter-spacing:-.2px;color:#666;word-break:keep-all}
.history_list .items li + li{margin-top:6px}
.history_list .items li span{position:absolute;left:0;top:0;font-weight:600;color:#222}

/* 정보 표 */
.info_table{width:100%;border-top:2px solid #222}
.info_table th,.info_table td{padding:18px 20px;border-bottom:1px solid #e8e8e8;font-size:15px;line-height:1.7;text-align:left;letter-spacing:-.2px;word-break:break-all}
.info_table th{width:200px;font-weight:600;color:#222;background:#fafafa}
.info_table td{color:#666}

/* 약관 · 방침 문서 */
.doc_sec + .doc_sec{margin-top:38px}
.doc_sec h3{margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #e8e8e8;font-size:18px;font-weight:600;color:#222}
.doc_sec p,.doc_sec li{font-size:15px;line-height:1.9;letter-spacing:-.2px;color:#777;word-break:keep-all}
.doc_sec ul{margin-top:6px}
.doc_sec li{position:relative;padding-left:14px}
.doc_sec li:before{content:"";position:absolute;left:0;top:13px;width:4px;height:4px;border-radius:50%;background:#bbb}
.doc_date{margin-bottom:34px;font-size:14px;color:#999}

@media(max-width:1024px){
.sec_head .kr{font-size:25px}
.sec_wrap + .sec_wrap{margin-top:70px;padding-top:60px}
.card_list{grid-template-columns:1fr 1fr;gap:14px}
.card_list li{padding:30px 26px}
.tech_row,.tech_row:nth-child(even){flex-direction:column;gap:26px}
.tech_row + .tech_row{margin-top:50px}
.tech_row .thumb{flex:none;width:100%;height:230px}
.tech_row .body .tit{font-size:22px}
.info_table th{width:130px;padding:14px}
.info_table td{padding:14px}
}
@media(max-width:768px){
.card_list{grid-template-columns:1fr}
.history_list .items li{padding-left:0}
.history_list .items li span{position:static;display:block}
}
@media(max-width:480px){
.sec_head{margin-bottom:28px}
.sec_head .kr{font-size:21px}
.tech_row .thumb{height:180px}
.history_list .year{font-size:20px}
.info_table th,.info_table td{display:block;width:100%}
.info_table th{border-bottom:0}
}