@charset "utf-8";
/* ========================================
 * DB손해보험 페이지별 공통 CSS
 * testDoc/css/pages.css
 * 
 * 현재 포함된 페이지:
 * - driver (운전자보험)
 * 
 * 향후 확장:
 * - cancer (암보험)
 * - young (청춘어람)
 * - tome (맞춤건강)
 * 등 반응형 페이지 추가 가능
 * 수정일: 2026-03-12
 * ======================================== */

/* 20260226 A2Z 폰트 */
@font-face {
  font-family: 'A2Z';
  src: url('./font/A2Z-1Thin.woff2') format('woff2');
  font-weight: 100;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'A2Z';
  src: url('./font/A2Z-2Regular.woff2') format('woff2');
  font-weight: 200;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'A2Z';
  src: url('./font/A2Z-3Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'A2Z';
  src: url('./font/A2Z-4Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'A2Z';
  src: url('./font/A2Z-5Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'A2Z';
  src: url('./font/A2Z-6SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'A2Z';
  src: url('./font/A2Z-7Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'A2Z';
  src: url('./font/A2Z-8ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'A2Z';
  src: url('./font/A2Z-9Black.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
  font-style: normal;
}

/* driver */

/* ===== driver main===== */
body.driver-page, body.driver-page * {font-family:'A2Z', 'pretendard', sans-serif !important; letter-spacing:-0.2px !important;}
body.driver-page, body.driver-page .mContents {font-size:16px;}

.driver#wrap .section01 {position:relative; padding:40px 16px; background:#F9FDF5;}
.driver#wrap .section01-con01 {padding:0 0 24px; text-align:center;}
.driver#wrap .section01-con01 .lead {color:#333; font-size:18px; font-weight:500; margin:0 0 12px; line-height:1.4;}
.driver#wrap .section01-con01 .tit {font-size:0; line-height:0;}
.driver#wrap .section01-con01 .tit .line {display:block; color:#058248; font-size:28px; font-weight:800; line-height:1.5; }
.driver#wrap .section01-con01 .sub {color:#333; font-size:28px; font-weight:500; margin:0 0 12px; line-height:1.5; }
.driver#wrap .section01-con01 .sub .opt, .tabContent .vqTitle .opt {color:#949494; font-size:28px; font-weight: 400; line-height: 1.5;}
.driver#wrap .section01-con01 .note {color:#333; font-size:12px; font-weight:500; margin:0; line-height:1.4; font-family:'Pretendard'; letter-spacing:0px;}

.driver#wrap .section01-con02 {padding:20px 0 28px; text-align:center;}
.driver#wrap .section01-con02 .visual {position:relative; display:flex; justify-content:center; align-items:center; min-height:140px;}
.driver#wrap .section01-con02 .visual img {max-width:100%; height:140px; object-fit:contain;}

.driver#wrap .section01-con03 {text-align:center;}
.driver#wrap .section01-con03 .roundBox {background:#FFF; border:1px solid #E4E4E4; border-radius:10px; padding:25px 16px 14px; text-align:left; overflow:hidden; box-sizing:border-box;}
.driver#wrap .section01-con03 .driverRoundSwiper {width:100%; overflow:hidden; transform:translateZ(0);}
.driver#wrap .section01-con03 .driverRoundSwiper .swiper-wrapper {width:100%; will-change:transform;}
.driver#wrap .section01-con03 .driverRoundSwiper .swiper-slide {width:100% !important; max-width:100%; height:auto; backface-visibility:hidden; -webkit-backface-visibility:hidden;}
.driver#wrap .section01-con03 .list {margin:0; padding:0; list-style:none;}
.driver#wrap .section01-con03 .list li {position:relative; padding-left:22px; color:#058248; font-size:16px; font-weight:600; line-height:1.5;}
.driver#wrap .section01-con03 .list li:last-child {margin-bottom:0;}
.driver#wrap .section01-con03 .list li .num {position:absolute; left:0; top:5px; display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; background:#28A745; color:#FFF; font-size:8px; font-family:'Pretendard'; font-weight:600; border-radius:50%;}
.driver#wrap .section01-con03 .list li .opt {color:#74A790; font-weight:400;}
.driver#wrap .section01-con03 .driverRoundSwiper .swiper-pagination {position:static; margin-top:12px; line-height:0; text-align:center;}
.driver#wrap .section01-con03 .driverRoundSwiper .swiper-pagination .swiper-pagination-bullet {width:7px; height:7px; margin:0 4px; background:#009658; opacity:.35;}
.driver#wrap .section01-con03 .driverRoundSwiper .swiper-pagination .swiper-pagination-bullet-active {background:#009658; opacity:1;}

/* ===== driver subComnWrap ===== */
.driver#wrap .subComnWrap {position:relative;}
.driver#wrap .subComnWrap .contTabMenu {display:flex; justify-content:flex-start; align-items:stretch; gap:0; background:#009658; padding-top:14px;}
.driver#wrap .subComnWrap .contTabMenu a {display:block; width:33.33334%; padding:15px 0; text-align:center; color:#FFF; font-size:16px; font-weight:600; font-family:'A2Z';}
.driver#wrap .subComnWrap .contTabMenu a.on {background:#FFF; color:#009658; border-radius:10px 10px 0 0;}
.driver#wrap .subComnWrap .contTabMenu .temp {display:block; width:25%; padding:15px 0; text-align:center; color:#FFF; font-size:14px; font-weight:700;}

.driver#wrap .subComnWrap .tabContent {position:relative; display:none;}
.driver#wrap .subComnWrap .tabContent[style*="display:block"] {display:block !important;}

.driver#wrap .subComnWrap .vQnaSec {position:relative; padding:50px 16px; background:#EDEDED;}
.driver#wrap .subComnWrap .vQnaSec .vQnaBox {position:relative; padding:0; border-radius:0; background:transparent; box-shadow:none; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; gap:20px;}
.driver#wrap .subComnWrap .vQnaSec .vQnaBox .vqTitle {color:#333; font-size:26px; line-height:1.3; font-weight:700; text-align:center; width:100%;}
.driver#wrap .subComnWrap .vQnaSec .vQnaBox .vqTitle .speTxt { font-size:16px;}
.driver#wrap .subComnWrap .vQnaSec .vQnaBox .dialogueBox {width:100%; background-color: #f6f6f6; border: 1px solid #E4E4E4; border-radius: 8px; padding: 30px 10px;}
.driver#wrap .subComnWrap .vQnaSec .vQnaBox .dialogue {position:relative; display:flex; justify-content:flex-start; align-items:flex-start; gap:5px; opacity:0; transform:translateY(50px); transition:all 0.8s ease;}
.driver#wrap .subComnWrap .vQnaBox .dialogue.fadeLeft {transform:translateY(-50px);}
.driver#wrap .subComnWrap .vQnaBox .dialogue.show {opacity:1; transform:translateY(0);}
.driver#wrap .subComnWrap .vQnaSec .vQnaBox .dialogue .ico {display:block; width:32px; flex:0 0 auto;}
.driver#wrap .subComnWrap .vQnaSec .vQnaBox .dialogue .txt {position:relative;}
.driver#wrap .subComnWrap .vQnaSec .vQnaBox .dialogue .txt .inTxt {color:#333; font-size:14px; font-weight:500; padding:14px 35px 14px 14px; background:#FFF; border-radius:0 10px 10px 10px; margin-top:15px; line-height: 1.5;}
.driver#wrap .subComnWrap .vQnaSec .vQnaBox .dialogue .txt .inTxt strong {font-family:'GmarketSansBold';}
.driver#wrap .subComnWrap .vQnaSec .vQnaBox .dialogue:nth-child(even) {flex-direction:row-reverse;}
.driver#wrap .subComnWrap .vQnaSec .vQnaBox .dialogue:nth-child(even) .txt .inTxt {border:1px solid #49AD6A; border-radius:10px 0 10px 10px;}

.driver#wrap .subComnWrap .nTab {display:flex; justify-content:flex-start; align-items:center;}
.driver#wrap .subComnWrap .nTab a {display:block; width:50%; padding:14px 0; text-align:center; color:#333; font-size:14px; font-weight:600; position:relative; line-height:1.0; font-family:'Pretendard Variable';}
.driver#wrap .subComnWrap .nTab a:after {content:''; position:absolute; left:0; bottom:0; width:100%; height:2px; background:#FFF;}
.driver#wrap .subComnWrap .nTab a.on:after {content:''; position:absolute; left:0; bottom:0; width:100%; height:2px; background:#13956A;}

.driver#wrap .subComnWrap .nCont {position:relative;}
.driver#wrap .subComnWrap .nCont .gender {position:relative; width:90px; top:10px; left:15px; height:30px; margin:0; display:flex; justify-content:flex-start; align-items:center; overflow:hidden;}
.driver#wrap .subComnWrap .nCont .gender a {display:block; width:50%; text-align:center; border:1px solid #317645; color:#317645; font-size:10px; font-weight:500; line-height:28px;}
.driver#wrap .subComnWrap .nCont .gender a:first-child {border-radius:25px 0 0 25px;}
.driver#wrap .subComnWrap .nCont .gender a:last-child {border-radius:0 25px 25px 0;}
.driver#wrap .subComnWrap .nCont .gender a.on {background:#317645; color:#FFF;}


/* ===== driver01 내용소개 ===== */
.driver#wrap .subComnWrap .perContWrap { padding:0;}
.driver#wrap .subComnWrap .perCont.driver01 {background:#F9FDF5; padding:50px 16px;}
.driver#wrap .subComnWrap .perCont.driver01 .perTitleSec {display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:24px; gap:0;}
.driver#wrap .subComnWrap .perCont.driver01 .perTitleSec .perDesc {color:#5C5C5C; font-size:16px; font-weight:500; line-height: 1.5; margin: 5px 0 10px;}
.driver#wrap .subComnWrap .perCont.driver01 .perTitleSec .perTitle {margin:0 0 6px; font-size:0; line-height:0;}
.driver#wrap .subComnWrap .perCont.driver01 .perTitleSec .perTitle .line {display:block; color:#00492B; font-size:26px; font-weight:700; line-height:1.3; letter-spacing:-0.5px;}
.driver#wrap .subComnWrap .perCont.driver01 .perTitleSec .perTitle .line02 {display:block; color:#057943; font-size:26px; font-weight:700; line-height:1.3; letter-spacing:-0.5px;}
.driver#wrap .subComnWrap .perCont.driver01 .perTitleSec .perNum {width:30px; height:30px; padding-top:3px;background:#13956A; color:#FFF; font-size:20px; font-weight:500; border-radius:50%; margin-bottom:10px; font-family:'Pretendard Variable' !important;}
.driver#wrap .subComnWrap .perCont.driver01 .perTitleSec .speTxt {color:#949494; font-size:26px; font-weight:400;}

.driver#wrap .subComnWrap .perCont.driver01 .contList.benefitCards {display:flex; flex-direction:column; gap:8px; }
.driver#wrap .subComnWrap .perCont.driver01 .imgSec {margin-bottom:28px; padding:0; justify-content:center;}
.driver#wrap .subComnWrap .perCont.driver01 .imgSec img {max-width:100%; height:auto; object-fit:contain;}

.driver#wrap .subComnWrap .perCont.driver01 .benefitCard {background:#FFF; border:1px solid #E4E4E4; border-radius:8px; padding:18px 20px; text-align:left;width: 100%;}
.driver#wrap .subComnWrap .perCont.driver01 .benefitCard .cardLead {color:#575757; font-size:14px; font-weight:500; margin:0 0 3px; line-height:1.4;}
.driver#wrap .subComnWrap .perCont.driver01 .benefitCard .cardTitle {color:#2A2A2A; font-size:16px; font-weight:600; margin:0 0 4px; line-height:1.3;}
.driver#wrap .subComnWrap .perCont.driver01 .benefitCard .cardDetail {color:#949494; font-size:14px; font-weight:400; margin:0; line-height:1.4;}

.driver#wrap .subComnWrap .perCont.driver01 .btnArea {margin-top:24px; padding:0;}
.driver#wrap .subComnWrap .perCont.driver01 .btnArea a.btnPopCal {display:flex; justify-content:center; align-items:center; gap:8px; width:100%; height:48px; background:#009658; color:#FFF; font-size:16px; font-weight:700; border-radius:8px; border:none; box-shadow:none;}
.driver#wrap .subComnWrap .perCont.driver01 .btnArea a.btnPopCal:before,
.driver#wrap .subComnWrap .perCont.driver01 .btnArea a.btnPopCal:after {display:none;}
.driver#wrap .subComnWrap .perCont.driver01 .btnArea a.btnPopCal .ar {display:block; width:24px; height:24px; background:url(../img/btn_ar.svg) no-repeat 50% 50%; background-size:contain; flex-shrink:0;}
.driver#wrap .subComnWrap .perCont.driver01 .btnArea a.btnPopCal p {position:relative; z-index:1; display:flex; justify-content:center; align-items:center; gap:4px; color:#FFF; font-size:15px; text-shadow:none; font-family:'A2Z'; font-weight:500 ;}
.driver#wrap .subComnWrap .perCont.driver01 .btnArea a.btnPopCal p .highlight {font-size:16px; font-weight:700;}

/* ===== driver02 내용소개 ===== */
.driver#wrap .subComnWrap .perCont.driver02 {background:#FCF5EC; padding:50px 16px;}
.driver#wrap .subComnWrap .perCont.driver02 .perTitleSec {display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:24px; gap:0;}
.driver#wrap .subComnWrap .perCont.driver02 .perTitleSec .perDesc {color:#5C5C5C; font-size:16px; font-weight:500; line-height: 1.5; margin: 5px 0 10px;}
.driver#wrap .subComnWrap .perCont.driver02 .perTitleSec .perTitle {margin:0 0 6px; font-size:0; line-height:0;}
.driver#wrap .subComnWrap .perCont.driver02 .perTitleSec .perTitle .line {display:block; color:#A04200; font-size:26px; font-weight:700; line-height:1.3; letter-spacing:-0.5px;}
.driver#wrap .subComnWrap .perCont.driver02 .perTitleSec .perTitle .line02 {display:block; color:#FE7214; font-size:26px; font-weight:700; line-height:1.3; letter-spacing:-0.5px;}
.driver#wrap .subComnWrap .perCont.driver02 .perTitleSec .perNum {width:30px; height:30px; padding-top:3px; background:#FF8442; color:#FFF; font-size:20px; font-weight:500; border-radius:50%; margin-bottom:10px; font-family:'Pretendard Variable' !important;}
.driver#wrap .subComnWrap .perCont.driver02 .perTitleSec .speTxt {color:#949494; font-size:26px; font-weight:400;}

.driver#wrap .subComnWrap .perCont.driver02 .contList.benefitCards {display:flex; flex-direction:column; gap:8px; }
.driver#wrap .subComnWrap .perCont.driver02 .imgSec {margin-bottom:28px; padding:0; justify-content:center;}
.driver#wrap .subComnWrap .perCont.driver02 .imgSec img {max-width:100%; height:auto; object-fit:contain;}

.driver#wrap .subComnWrap .perCont.driver02 .benefitCard {background:#FFF; border:1px solid #E4E4E4; border-radius:8px; padding:18px 20px; text-align:left;width: 100%;}
.driver#wrap .subComnWrap .perCont.driver02 .benefitCard .cardLead {color:#575757; font-size:14px; font-weight:500; margin:0 0 3px; line-height:1.4;}
.driver#wrap .subComnWrap .perCont.driver02 .benefitCard .cardTitle {color:#2A2A2A; font-size:16px; font-weight:600; margin:0 0 4px; line-height:1.3;}
.driver#wrap .subComnWrap .perCont.driver02 .benefitCard .cardDetail {color:#949494; font-size:14px; font-weight:400; margin:0; line-height:1.4;}

/* driver01/02 공통: cardTitle + cardDetail 가로 정렬 (모바일/PC 공통) */
.driver#wrap .subComnWrap .perCont.driver01 .benefitCard,
.driver#wrap .subComnWrap .perCont.driver02 .benefitCard {display:flex; flex-wrap:wrap; align-items:center; column-gap:6px; row-gap:2px;}
.driver#wrap .subComnWrap .perCont.driver01 .benefitCard .cardLead,
.driver#wrap .subComnWrap .perCont.driver02 .benefitCard .cardLead {width:100%; margin-bottom:2px;}
.driver#wrap .subComnWrap .perCont.driver01 .benefitCard .cardTitle,
.driver#wrap .subComnWrap .perCont.driver02 .benefitCard .cardTitle,
.driver#wrap .subComnWrap .perCont.driver01 .benefitCard .cardDetail,
.driver#wrap .subComnWrap .perCont.driver02 .benefitCard .cardDetail {margin:0;}

.driver#wrap .subComnWrap .perCont.driver02 .btnArea {margin-top:24px; padding:0;}
.driver#wrap .subComnWrap .perCont.driver02 .btnArea a.btnPopCal {display:flex; justify-content:center; align-items:center; gap:8px; width:100%; height:48px; background:#FE7214; color:#FFF; font-size:16px; font-weight:700; border-radius:8px; border:none; box-shadow:none;}
.driver#wrap .subComnWrap .perCont.driver02 .btnArea a.btnPopCal:before,
.driver#wrap .subComnWrap .perCont.driver02 .btnArea a.btnPopCal:after {display:none;}
.driver#wrap .subComnWrap .perCont.driver02 .btnArea a.btnPopCal .ar {display:block; width:24px; height:24px; background:url(../img/btn_ar_orange.svg) no-repeat 50% 50%; background-size:contain; flex-shrink:0;}
.driver#wrap .subComnWrap .perCont.driver02 .btnArea a.btnPopCal p {position:relative; z-index:1; display:flex; justify-content:center; align-items:center; gap:4px; color:#FFF; font-size:15px; text-shadow:none; font-family:'A2Z'; font-weight:500 ;}
.driver#wrap .subComnWrap .perCont.driver02 .btnArea a.btnPopCal p .highlight {font-size:16px; font-weight:700;}

/* ===== driver03 하단 추천 콘텐츠 ===== */
.driver#wrap .subComnWrap .perCont.driver03 {background:#F5F5F5; padding:50px 16px;}
.driver#wrap .subComnWrap .perCont.driver03 .extraTitle {color:#333; font-size:26px; line-height:1.3; font-weight:700; text-align:center; width:100%; margin-bottom: 24px;}
.driver#wrap .subComnWrap .perCont.driver03 .extraList {display:flex; flex-direction:column; gap:8px;}
.driver#wrap .subComnWrap .perCont.driver03 .extraCard {display:flex; justify-content:flex-start; align-items:center; gap:12px; background:#fff; border-radius:8px; padding:20px 16px; text-align:left;}
.driver#wrap .subComnWrap .perCont.driver03 .extraCard .ico {display:flex; justify-content:center; align-items:center; width:42px; flex:0 0 auto;}
.driver#wrap .subComnWrap .perCont.driver03 .extraCard .ico img {max-width:40px; max-height:40px;}
.driver#wrap .subComnWrap .perCont.driver03 .extraCard .txtSec {display:flex; flex-direction:column; gap:2px; flex:1 1 auto;}
.driver#wrap .subComnWrap .perCont.driver03 .extraCard .txtSec .title {color:#333; font-size:16px; font-weight:600; line-height:1.2;}
.driver#wrap .subComnWrap .perCont.driver03 .extraCard .txtSec .desc {color:#333; font-size:12px; font-weight:400; line-height:1.5;}
.driver#wrap .subComnWrap .perCont.driver03 .extraCard .txtSec .desc em {color:#9B9B9B;}
.driver#wrap .subComnWrap .perCont.driver03 .extraCard .ar {position:relative; width:24px; height:24px; border-radius:50%; background:#EFEFEF; flex:0 0 auto;}
.driver#wrap .subComnWrap .perCont.driver03 .extraCard .ar:after {content:''; position:absolute; left:5px; top:7px; width:8px; height:8px; border-top:2px solid #007F41; border-right:2px solid #007F41; transform:rotate(45deg);}

/* ===== driver04 FAQ ===== */
.driver#wrap .subComnWrap .perCont.driver04 {background:#fff; padding:50px 16px 0px; gap:22px;}
.driver#wrap .subComnWrap .perCont.driver04 .faqHead {display:flex; flex-direction:column; align-items:center; gap:10px; width:100%;}
.driver#wrap .subComnWrap .perCont.driver04 .faqBadge { display:inline-flex; align-items:center; justify-content:center; padding:5px 15px; border-radius:999px; background:#058248; color:#fff; font-size:16px; font-weight:500; line-height:1;}
.driver#wrap .subComnWrap .perCont.driver04 .faqTitle {font-size:26px; margin:0; color:#333; font-weight:600; line-height:1.5; text-align:center;  margin-bottom: 24px;}
.driver#wrap .subComnWrap .perCont.driver04 .faqList {display:flex; flex-direction:column; gap:0; width:100%;}
.driver#wrap .subComnWrap .perCont.driver04 .faqItem {background:#F8F8F8;}
.driver#wrap .subComnWrap .perCont.driver04 .qRow {display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:14px 20px; cursor:pointer;border-top:1px solid #D8D8D8;}
.driver#wrap .subComnWrap .perCont.driver04 .faqItem:first-child .qRow {border-top:0 none;}
.driver#wrap .subComnWrap .perCont.driver04 .qRow h3 {margin:0; color:#333; font-size:14px; font-weight:600; line-height:1.5; padding-left:22px; text-indent:-23px;}
.driver#wrap .subComnWrap .perCont.driver04 .qRow .qMark {color:#058248; font-size:16px; font-weight: 600; margin-right:4px;}
.driver#wrap .subComnWrap .perCont.driver04 .qRow .ar {position:relative; width:14px; height:14px; margin-top:2px; flex:0 0 auto;}
.driver#wrap .subComnWrap .perCont.driver04 .qRow .ar.up:before {content:''; position:absolute; left:2px; top:9px; width:8px; height:8px; border-left:2px solid #333; border-top:2px solid #333; transform:rotate(45deg);}
.driver#wrap .subComnWrap .perCont.driver04 .qRow .ar.down:before {content:''; position:absolute; left:2px; top:3px; width:8px; height:8px; border-left:2px solid #333; border-top:2px solid #333; transform:rotate(225deg);}
.driver#wrap .subComnWrap .perCont.driver04 .aRow {padding:24px 20px; background-color: #fff;}
.driver#wrap .subComnWrap .perCont.driver04 .aRow p {margin:0; color:#333; font-size:14px; font-weight:400; word-break:keep-all; line-height:1.5; padding-left:22px; text-indent:-23px;}
.driver#wrap .subComnWrap .perCont.driver04 .aRow .aMark {color:#058248; font-size:16px; font-weight: 600; margin-right:4px;}

/* ===== 텍스트 하단 콘텐츠 ===== */
.driver#wrap .subComnWrap .perContWrap .contRaTxt {color:#949494; font-size:8px; font-weight:400; line-height:1.5; text-align: center; margin:0 ; padding: 30px 16px; font-family: 'Pretendard Variable';}

/* ===== popup ===== */
.driver#wrap .snsCertify {display:none;}
.driver#wrap.renewFall .floatFunc {justify-content:flex-end; align-items:flex-end;}
.driver#wrap.renewFall .goSection {display:none;}
.driver#wrap.renewFall .snsCertify {display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; gap:10px; margin:0 0 15px; opacity:0; transition:.4s all; transform:translateX(150px);}
.driver#wrap.renewFall .snsCertify.on {opacity:1.0; transform:translateX(0);}
.driver#wrap.renewFall .snsCertify a {display:flex; justify-content:flex-start; align-items:center; gap:4px; font-size:12px; font-weight:500; padding:4px 15px; border-radius:100px; font-family:'Pretendard Variable';}
.driver#wrap.renewFall .snsCertify a.kakao {background:#FDE500; color:#222;}
.driver#wrap.renewFall .snsCertify a.kakao:before {content:''; width:20px; height:20px; background:url(../img/float/ico_kakao.png) no-repeat 50% 50%; background-size:100%;}
.driver#wrap.renewFall .snsCertify a.naver {background: linear-gradient(90deg, #86C340 0%, #19A44A 100%); color:#FFF;}
.driver#wrap.renewFall .snsCertify a.naver:before {content:''; width:20px; height:20px; background:url(../img/float/ico_naver.png) no-repeat 50% 50%; background-size:100%;}
.driver#wrap.renewFall .floatFunc .chatSection .goChatBot {width:54px; height:54px;}

.driver#wrap.renewFallTy01 .floatFunc {justify-content:flex-end; align-items:flex-end;}
.driver#wrap.renewFallTy01 .goSection {display:none;}
.driver#wrap.renewFallTy01 .snsCertify {display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; gap:6px; margin:0 0 6px; opacity:0; transition:.4s all; transform:translateX(150px);}
.driver#wrap.renewFallTy01 .snsCertify.on {opacity:1.0; transform:translateX(0);}
.driver#wrap.renewFallTy01 .snsCertify a {display:flex; justify-content:center; align-items:center; font-size:0px; font-weight:500; width:50px; height:50px; border-radius:50%; font-family:'Pretendard Variable'; text-indent:-99999px;}
.driver#wrap.renewFallTy01 .snsCertify a.kakao {background:#FDE500 url(../img/float/float_kakao.png) no-repeat 50% 50%; background-size:22px;}
.driver#wrap.renewFallTy01 .snsCertify a.naver {background:#03C75A url(../img/float/float_naver.png) no-repeat 50% 50%; background-size:22px;}
.driver#wrap.renewFallTy01 .floatFunc .chatSection .goChatBot {width:54px; height:54px;}


/* ========== driver 반응형: 모바일 기준, 1200px+ 웹에서 상단 보험료 간편확인 + 1200px ========== */
.driver-web-only { display: none; }

/* 탑 영역: 기본(모바일) 설정 */
.driver-top-mo { display: block !important; }
.driver-top-pc { display: none !important; }

/* ========================================
 * footer 스타일은 css/layout.css에서 관리
 * ======================================== */
.driverFooterMo {display:block;}
.driverFooterPc {display:none;}

@media (min-width: 1081px) {
	.driverFooterMo {display:none;}
	.driverFooterPc {display:block;}
}

/* PC (1200px 이상) */
@media (min-width: 1200px) {
	html:has(body.driver-page .mContents) {font-size:19px;}
	.driver-top-mo { display: none !important; }
	.driver-top-pc { display: block !important; }
}


/* ========================================
 * driver 페이지 formSec gender 스타일 (모든 화면 크기)
 * ======================================== */
.driver-page .driver-hero-form .formSec .insureForm .formBlock.gender .gender {display:flex !important; align-items:center; gap:0; width:100%; height:60px;}
.driver-page .driver-hero-form .formSec .insureForm .formBlock.gender label.m,
.driver-page .driver-hero-form .formSec .insureForm .formBlock.gender label.f 
{height: 60px !important; width:auto !important; display:flex !important; align-items:center; justify-content:center; flex:1; line-height:1 !important; text-align:center; border:1px solid #D1D5DC !important; border-radius:0 !important; font-size:16px !important; cursor:pointer; margin:0; color:#9E9E9E !important; background:#fff !important; float:none !important;}
.driver-page .driver-hero-form .formSec .insureForm .formBlock.gender label.m {border-radius:6px 0 0 6px !important; border-right:0 !important;}
.driver-page .driver-hero-form .formSec .insureForm .formBlock.gender label.f {border-radius:0 6px 6px 0 !important; border-left:1px solid #D1D5DC !important;}
.driver-page .driver-hero-form .formSec .insureForm .formBlock.gender input:checked + label {background:#04983F !important; border-color:#04983F !important; color:#fff !important;}

@media (min-width: 1200px) {
	body.driver-page .toastPop.renew { display: none !important; }
	body.driver-page .dim { display: none !important; }
	html,
	body.driver-page {height: auto !important;min-height: 0 !important;overflow-y: auto !important;overflow-x: hidden;}

	body.driver-page.noScroll { position: static !important; overflow-y: auto !important; touch-action: auto !important; }
	body.driver-page .toastPop.renew .formBtns.con,
	body.driver-page .toastPop.renew .formBtns.forPop { display: none !important; }
	body.driver-page .driver-hero-form .formBtns.con { display: flex !important; position: static !important; }
	body.driver-page .driver-hero-form .formBtns.con.fixed { position: static !important; left: auto !important; right: auto !important; bottom: auto !important; }

	.driver#wrap .subComnWrap .nCont .gender {position:relative; width:110px; top:15px; left:35px; height:40px; margin:30px 0 0; display:flex; justify-content:flex-start; align-items:center; overflow:hidden;}
	.driver#wrap .subComnWrap .nCont .gender a {display:block; width:50%; text-align:center; border:1px solid #317645; color:#317645; font-size:15px; font-weight:500; line-height:38px;}
	.driver#wrap .section01 {padding:60px 16px;}

	.driver#wrap .subComnWrap .vQnaSec .vQnaBox .dialogueBox { padding: 30px;}
	.driver#wrap .subComnWrap .vQnaSec .vQnaBox .vqTitle,
	.driver#wrap .subComnWrap .perCont.driver01 .perTitleSec .perTitle .line,
	.driver#wrap .subComnWrap .perCont.driver01 .perTitleSec .perTitle .line02,
	.driver#wrap .subComnWrap .perCont.driver01 .perTitleSec .speTxt,
	.driver#wrap .subComnWrap .perCont.driver02 .perTitleSec .perTitle .line,
	.driver#wrap .subComnWrap .perCont.driver02 .perTitleSec .perTitle .line02,
	.driver#wrap .subComnWrap .perCont.driver02 .perTitleSec .speTxt,
	.driver#wrap .subComnWrap .perCont.driver03 .extraTitle,
	.driver#wrap .subComnWrap .perCont.driver04 .faqTitle {font-size:32px;}

	.driver#wrap .subComnWrap .vQnaSec .vQnaBox .dialogue .txt .inTxt,
	.driver#wrap .subComnWrap .perCont.driver01 .benefitCard .cardLead, 
	.driver#wrap .subComnWrap .perCont.driver02 .benefitCard .cardLead,
	.driver#wrap .subComnWrap .perCont.driver01 .benefitCard .cardDetail,
	.driver#wrap .subComnWrap .perCont.driver02 .benefitCard .cardDetail,
	.driver#wrap .subComnWrap .perCont.driver01 .btnArea a.btnPopCal p,
	.driver#wrap .subComnWrap .perCont.driver02 .btnArea a.btnPopCal p,
	.driver#wrap .subComnWrap .perCont.driver03 .extraCard .txtSec .desc,
	.driver#wrap .subComnWrap .perCont.driver04 .qRow h3,
	.driver#wrap .subComnWrap .perCont.driver04 .aRow p {font-size:16px;}

	.driver#wrap .section01-con01 .tit .line,
	.driver#wrap .section01-con01 .sub {font-size:36px;}

	.driver#wrap .section01-con01 .note {font-size:14px;}

	.driver#wrap .section01-con03 .list li,
	.driver#wrap .section01-con03 .list li .opt, 
	.driver#wrap .subComnWrap .contTabMenu a, 
	.driver#wrap .subComnWrap .perCont.driver01 .perTitleSec .perDesc,
	.driver#wrap .subComnWrap .perCont.driver02 .perTitleSec .perDesc,
	.driver#wrap .subComnWrap .perCont.driver01 .benefitCard .cardTitle,
	.driver#wrap .subComnWrap .perCont.driver02 .benefitCard .cardTitle,
	.driver#wrap .subComnWrap .perCont.driver03 .extraCard .txtSec .title {font-size:18px;}

	.driver#wrap .section01-con03 .list li .num {font-size:12px; width: 16px; height: 16px;}

	/* .driver#wrap .subComnWrap .perCont.driver01 .perTitleSec .perNum {padding-top:1px; padding-right: 1px;}
	.driver#wrap .subComnWrap .perCont.driver02 .perTitleSec .perNum {padding-top:1px;} */
	.driver#wrap .subComnWrap .perCont.driver01,
	.driver#wrap .subComnWrap .perCont.driver02,
	.driver#wrap .subComnWrap .perCont.driver03,
	.driver#wrap .subComnWrap .perCont.driver04,
	.driver#wrap .subComnWrap .vQnaSec {padding-top:100px; padding-bottom:100px;}

	.driver-page .mContents { width:100%; margin-left:0; margin-right:0; }
	.driver-page .mContents > .mContents1200 {max-width:1200px; margin-left:auto; margin-right:auto; box-sizing:border-box; position:relative; overflow:visible;}
	.driver-page .mContents .mContents1200 > .section01,
	.driver-page .mContents .mContents1200 > .subComnWrap {max-width:700px; margin-left:0; margin-right:0; box-sizing:border-box;}
	.driver-web-only { display: block; }
	.driver-page .mContents .mContents1200 > .section01 {min-width:0; max-width:none; margin:0; padding-left:0; padding-right:0; background-color:#F9FDF5; position:relative; z-index:1; overflow:visible;}
	.driver-page .mContents .mContents1200 > .section01::before {content:''; position:absolute; left:calc(0% - 100dvw); right:calc(0% - 100dvw); top:0; height:100%; background:#F9FDF5; z-index:-1; pointer-events:none;}
	.driver-page .mContents .mContents1200 > .section01 > .section01-con01,
	.driver-page .mContents .mContents1200 > .section01 > .section01-con02,
	.driver-page .mContents .mContents1200 > .section01 > .section01-con03 {max-width:700px; margin-left:0; margin-right:0; text-align:left;}
	.driver-page .mContents .mContents1200 > .section01 > .section01-con01 {position:relative; max-width:500px; margin-left:0; margin-right:0; padding-left:0; padding-right:300px;}
	.driver-page .mContents .mContents1200 > .section01 > .section01-con02 {position:absolute; top:80px; left:400px; right:auto; width:280px; padding:0; text-align:left;}
	.driver-page .mContents .mContents1200 > .section01 > .section01-con02 .visual {justify-content:flex-start; min-height:auto;}
	.driver-page .mContents .mContents1200 > .section01 > .section01-con02 .visual img {height:210px;}
	.driver-page .mContents .mContents1200 > .section01 > .section01-con03 {max-width:700px; margin-left:0; margin-right:0; padding-top:12px;}
	.driver-page .mContents .subComnWrap .vQnaSec,
	.driver-page .mContents .subComnWrap .perCont.driver01,
	.driver-page .mContents .subComnWrap .perCont.driver02,
	.driver-page .mContents .subComnWrap .perCont.driver03,
	.driver-page .mContents .subComnWrap .perCont.driver04 {position:relative; z-index:1; overflow:visible;}
	.driver-page .mContents .subComnWrap .vQnaSec::before,
	.driver-page .mContents .subComnWrap .perCont.driver01::before,
	.driver-page .mContents .subComnWrap .perCont.driver02::before,
	.driver-page .mContents .subComnWrap .perCont.driver03::before,
	.driver-page .mContents .subComnWrap .perCont.driver04::before {content:''; position:absolute; left:calc(0% - 100dvw); right:calc(0% - 100dvw); top:0; height:100%; z-index:-1; pointer-events:none;}
	.driver-page .mContents .subComnWrap .vQnaSec::before {background:#EDEDED;}
	.driver-page .mContents .subComnWrap .perCont.driver01::before {background:#F9FDF5;}
	.driver-page .mContents .subComnWrap .perCont.driver02::before {background:#FCF5EC;}
	.driver-page .mContents .subComnWrap .perCont.driver03::before {background:#F5F5F5;}
	.driver-page .mContents .subComnWrap .perCont.driver04::before {background:#FFF;}
	.driver-page .mContents .subComnWrap .contTabMenu {position:relative; z-index:1;}
	.driver-page .mContents .subComnWrap .contTabMenu::before {content:''; position:absolute; left:calc(0% - 100dvw); right:calc(0% - 100dvw); top:0; height:100%; background:#009658; z-index:-1; pointer-events:none;}
	.driver-page .mContents .mContents1200 .section01 .section01-con03 .roundBox {width:100%; max-width:700px; margin:0;}
	.driver#wrap .section01-con03 .roundBox .list {display:table; margin:0 auto; text-align:left;}
	.driver-page .mContents .subComnWrap .perCont .imgSec {width:380px; max-width:100%; margin-left:auto; margin-right:auto; text-align:center;}
	.driver-hero-form.driver-web-only {flex: 0 0 440px; width:440px; max-width:100%; position:fixed; top:205px; right:max(0px, calc((100dvw - 1200px) / 2)); z-index:120;}
	.driver-page .driver-hero-form .formSec {background:#fff; border:2px solid #009658; border-radius:22px; box-shadow:0 0px 16px rgba(0,0,0,.22); padding:48px 32px; height:100%; box-sizing:border-box; position:static;}
	.driver-page .driver-hero-form .formTitle {color:#222; font-size:22px; font-weight:700; margin:0 0 20px; text-align:center; line-height:1.2; text-decoration:underline; text-decoration-color:#C0F3D9; text-decoration-thickness:10px; text-underline-offset:-3px;}
	.driver-page .driver-hero-form .formLabel {display:none;}

	
	
	/* layout.css 의 .formSec .insureForm 영향 배제: driver 전용 신규 정의 */
	.driver-page .driver-hero-form .formSec .insureForm {padding:0; margin:0; border:0; border-radius:0; background:transparent; box-shadow:none;}
	.driver-page .driver-hero-form .formSec .insureForm form {margin:0; padding:0;}
	.driver-page .driver-hero-form .formSec .insureForm .formBox {position:relative; padding:0; display:grid; grid-template-columns:1fr 128px; grid-template-areas:"name gender" "birth birth" "tel tel"; gap:8px;}
	.driver-page .driver-hero-form .formSec .insureForm .formBlock {position:relative; margin:0;}
	.driver-page .driver-hero-form .formSec .insureForm .formBtns {padding:0; margin-top:10px; gap:8px; display:grid; grid-template-columns:1fr 1fr;}

	/* formSec div 내부 적용 스타일 분리 */
	.driver-page .driver-hero-form .formSec div {box-sizing:border-box;}
	.driver-page .driver-hero-form .formSec .insureForm > div,
	.driver-page .driver-hero-form .formSec .insureForm form > div {width:100%;}
	.driver-page .driver-hero-form .formSec .insureForm .formBlock.name {grid-area:name;  padding-right: 0;}
	.driver-page .driver-hero-form .formSec .insureForm .formBlock.gender {grid-area:gender;}
	.driver-page .driver-hero-form .formSec .insureForm .formBlock.birth {grid-area:birth;}
	.driver-page .driver-hero-form .formSec .insureForm .formBlock.tel {grid-area:tel; display:grid !important; grid-template-columns:1fr 1fr 1fr; gap:0; position:relative; background:#F4F4F4; border:0 none !important; border-radius:6px !important; overflow:hidden; justify-content:normal !important; align-items:normal !important;}
	.driver-page .driver-hero-form .formSec .insureForm .formBlock.tel::before,
	.driver-page .driver-hero-form .formSec .insureForm .formBlock.tel::after {content:'-'; position:absolute; top:50%; transform:translateY(-50%); color:#9E9E9E; font-size:20px; z-index:1;}
	.driver-page .driver-hero-form .formSec .insureForm .formBlock.tel::before {left:33.333% !important;}
	.driver-page .driver-hero-form .formSec .insureForm .formBlock.tel::after {left:66.666% !important; right:auto !important;}
	.driver-page .driver-hero-form .formSec .insureForm .formBtns .btn {display:block; width:100%; text-align:center; border-radius:4px; height: 60px; line-height: 60px; font-size:18px; font-weight:700; border:none; cursor:pointer; padding: 0;}
	.driver-page .driver-hero-form .formSec .insureForm .formBtns .btn:before,
	.driver-page .driver-hero-form .formSec .insureForm .formBtns .btn:after {display:none !important; content:none !important; background:none !important;}
	.driver-page .driver-hero-form .formSec .insureForm .formBtns .btn.payment {background:#0C6A3A; color:#fff; font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;}
	.driver-page .driver-hero-form .formSec .insureForm .formBtns .btn.consulting {background:#F97316; color:#fff; font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;}
	.driver-page .driver-hero-form .formSec .insureForm .driverNaverBtn {margin-top:8px;}
	.driver-page .driver-hero-form .formSec .insureForm .driverNaverBtn .btn.naver {display:flex; align-items:center; justify-content:center; width:100%; height:60px; border-radius:4px; background:#03C75A; color:#fff; font-size:18px; font-weight:700; font-family:'Pretendard Variable','Pretendard',sans-serif !important;}
	.driver-page .driver-hero-form .formSec .insureForm .driverNaverBtn .btn.naver:before {content:'N'; display:inline-block; margin-right:6px; font-size:20px; font-weight:800; line-height:1;}

	/* formSec input 전용 분리 스타일 */
	.driver-page .driver-hero-form .formSec .insureForm input[type="text"],
	.driver-page .driver-hero-form .formSec .insureForm input[type="number"],
	.driver-page .driver-hero-form .formSec .insureForm .input {width:100%;height:52px;padding:0 12px;border:0 none !important; border-radius:6px;font-size:16px;line-height:50px;color:#444;background:#F4F4F4;box-sizing:border-box;letter-spacing:0;outline:none; font-family:'Pretendard Variable','Pretendard',sans-serif !important;}
	.driver-page .driver-hero-form .formSec .insureForm .formBox .formBlock input[type="text"],
	.driver-page .driver-hero-form .formSec .insureForm .formBox .formBlock input[type="number"] {height:60px; line-height:48px;}
	.driver-page .driver-hero-form .formSec .insureForm input::placeholder {color:#9E9E9E;}
	.driver-page .driver-hero-form .formSec .insureForm .formBlock.tel .input {border:0;border-radius:0;background:transparent;text-align:center;padding:0 8px;}

	/* driver 전용: formBlock input width 강제 100% */
	.driver-page .driver-hero-form .formSec .insureForm .formBox .formBlock input[type="text"],
	.driver-page .driver-hero-form .formSec .insureForm .formBox .formBlock input[type="number"] {display:block;width:100% !important;max-width:none;min-width:0;}
}

/* driver 모바일 전용 탑 배너 (PC 탑은 layout.css에서 1200px+ 적용) */
#wrap.driver .driver-top-mo .topBnr {height:53px; overflow:hidden; background-color: #EDF3CD;}
#wrap.driver .driver-top-mo .topBnr a {display:flex; justify-content:center; align-items:center; height:100%;}
#wrap.driver .driver-top-mo .topBnr a img {display:block; width:auto; height:53px; margin:0 auto;}