@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");


/* ── 리셋 ── */
*{ margin:0; padding:0; box-sizing:border-box; }
ul, li{ list-style:none; }
a{ text-decoration:none; color:inherit; }
img{ vertical-align:middle; border:0; max-width:100%; }
.clearfix:after{ content:''; display:block; clear:both; }

body{ font-family:"Pretendard", sans-serif; font-size:14px; color:#333333; }
.txtnaB{ font-family:"Pretendard", sans-serif; font-size:12px; font-weight:bold; letter-spacing:-0.5px; }
.txtnB{ font-family:"Pretendard", sans-serif; font-size:13px; }

/* ── 유틸리티 ── */
.u-hide{ display:none; }
.u-pointer{ cursor:pointer; }
.u-fl{ float:left; }
.u-form-reset{ border:0; margin:0; }
.u-pl20{ padding-left:20px; }
.color_orange{ color:#f74d31; }
.color_carbohum{ color:#16467c; }
.font_b{ font-weight:700; }

/* ── 상단 헤더 ── */
#header{ width:100%; border-bottom:1px solid #e5e5e5; }
.top{
	display:flex; align-items:center; justify-content:space-between; gap:24px;
	max-width:1200px; width:100%; margin:0 auto; padding:18px 0; box-sizing:border-box;
}
.top_logo a{ display:flex; flex-direction: column; }
.top_logo img{ height:44px; width:auto; flex-shrink:0; }
.top_logo_text{ display:flex; flex-direction:column; justify-content:center; line-height:1.25; }
.top_label{ font-size:15px; color:#666; letter-spacing:-0.5px; display:block; }
.logo_txt{ font-size:24px; letter-spacing:-1px; color:#000; display:block; line-height:1.2; font-weight:600; }

.top_right{ display:flex; flex-direction:column; align-items:flex-end; flex-shrink:0; }
.nav_menu{ display:flex; justify-content:flex-end; gap:24px; white-space:nowrap; margin-top: 16px; }
.nav_menu li a{ font-weight:400; font-size:18px; color:#000; letter-spacing:-0.5px; }
.nav_menu li a:hover{ color:#16467c; }

.tel_no{ text-align:right; white-space:nowrap; }
.tel_pc_text{ display:inline-flex; align-items:center; gap:6px; font-weight:700; letter-spacing:-1px; line-height:1; font-size:22px; color:#000; }
.tel_pc_text img{ width:36px; }
.tel_mobile_btns{ display:none; }

.bt_hamburger{ display:none; }
.top_menu{ display:none; }
.top_menu_close{ display:none; }
.mob_menu_overlay{ display:none; }

/* ── 메인 배너 + 퀵링크 ── */
.banner-wrap{ max-width:1200px; margin:20px auto 0; padding:0; box-sizing:border-box; }
.banner{
	position:relative; display:flex; align-items:center; overflow:hidden; border-radius:16px; min-height:460px; padding:0 60px;
	box-sizing:border-box; gap: 68px;
	background: #EAF3FF;
}


.banner-content{ max-width:520px; color:#1c1c1c; }
.banner-badge{ display:inline-block; padding:6px 16px; border-radius:999px; background:#fff; font-size:16px; margin-bottom:14px; }
.banner-title{ font-size:40px; font-weight:700; line-height:1.2; margin-bottom:14px; letter-spacing:-1px; }
.banner-desc{ font-size:18px; color:#3a3a3a; margin-bottom:24px; }

.banner-form-float{
	position:absolute; top:40px; right:40px; width:380px; background:#fff; border-radius:14px;
	box-shadow:0 12px 30px rgba(0,0,0,0.16); padding:20px; box-sizing:border-box; z-index:6;
}

.banner-img {margin: 28px 0 0;}

.banner-quicklinks{ max-width:1160px; margin:-40px auto 0; padding:0 20px; box-sizing:border-box; position:relative; z-index:4; }
.banner-quicklinks ul{ display:flex; flex-wrap:wrap; gap:16px; background:#fff; border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,0.08); padding:24px; }
.banner-quicklinks li{ flex:1 1 0; min-width:0; }
.banner-quicklinks li a { display:flex; align-items:center; gap:12px; }
.banner-quicklinks .ql-icon{ width:56px; height:56px; border-radius:10px; background:#f5f5f5; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.banner-quicklinks .ql-icon img{ width:56px; height:56px; }
.banner-quicklinks .ql-title{ font-size:16px; font-weight:600; color:#2d2d2d; display:block; margin: 0 0 4px 0;}
.banner-quicklinks .ql-desc{ font-size:14px; color:#888; }
.pc_none {display: none;}

/* ── 상담 신청 폼 (배너 카드 안 / 팝업 공용) ── */
.mv_fields{ display:flex; flex-direction:column; gap:12px; width:100%; box-sizing:border-box; }
.mv_field_title {font-size: 18px; display: block; font-weight: 700; margin: 0 0 12px; text-align: center;}
.mv_field_row{ display:flex; align-items:center; gap:10px; }
.mv_field_label{ width:52px; flex-shrink:0; font-size:15px; }
.mv_field_row input[type="text"], .req_select_hp{ border:1px solid #ccc; border-radius:4px; }
.req_field_sm{ flex:1 1 auto; width:auto; height:38px; padding:0 8px; min-width:0; }
.mv_field_hp{ display:flex; width:100%; align-items:center; gap:6px; flex-wrap:wrap; }
.req_select_hp{ flex:0 0 66px; height:38px; }
.req_input_hp{ flex:1 1 0; height:38px; padding:0 8px; min-width:0; }
.mv_field_car{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.req_car_field{ flex:1 1 auto; height:38px; padding:0 8px; min-width:0; border:1px solid #ccc; border-radius:4px; width: 50%;}

.req_agree_box{ margin-top:12px; }
.req_agree_note{ font-size:15px; color:#666666; text-align:center; margin-bottom:6px; }
.req_agree_note_btn{ background:#888; color:#fff; font-size:13px; padding:2px 6px; margin-left:4px; }
.req_note_line{ font-size:12px; letter-spacing:-1px; color:#666666; text-align:center; }
.req_note_red{ color:#ff0000; font-weight:bold; }

.mv_submit{ margin-top:4px; }
.req_submit_link{
	cursor:pointer; font-family:"Pretendard", sans-serif; font-size:17px; color:#ffffff; letter-spacing:-1px;
	font-weight:600; display:block; line-height:48px; width:100%; text-align:center; background:#2e86de; border-radius:8px;
}

.radio.type2{ font-size:0; }
.radio.type2 input[type=radio]{ width:0; height:0; padding:0; margin:0; visibility:hidden; }
.radio.type2 label{ display:inline-block; }
.radio.type2 label span{ width:auto; display:block; border:1px solid #2d2d2d; padding:8px 10px; background:#2d2d2d; color:#fff; font-size:13px; line-height:20px; text-align:center; letter-spacing:-1px; border-radius:4px; }
.radio.type2 label + label span{ border-left:0; }
.radio.type2 label input:checked + span{ background-color:#16467c; color:#fff; font-weight:700; border:1px solid #16467c; }

/* ── 혜택 아이콘 영역 ── */
.content_top{ background-color:#f8f8f8; padding:30px 0; margin-bottom:30px; }
.content1{ max-width:1200px; margin:0 auto; }
.benefit_box{ width:100%; display:flex; align-items:center; flex-wrap:wrap; gap:16px; padding:0 20px; box-sizing:border-box; }
.benefit_title{ font-size:22px; color:#2d2d2d; font-weight:600; flex:0 0 auto; white-space:nowrap; margin:0 24px 0 0; line-height:1.3; }
.content_icon_box{ display:flex; gap:12px; flex-wrap:wrap; }
.content_icon{ width:120px; text-align:center; background:#fff; padding:16px; border-radius:12px; border:1px solid #e4e4e4; }
.content_icon a{ font-size:14px; color:#2d2d2d; font-weight:500; display:flex; flex-direction:column; align-items:center; }
.content_icon img{ width:44px; height:44px; margin:0 0 10px; }

/* ── 자동차보험 비교 가이드 12개 카드 ── */
.container{ max-width:1200px; margin:0 auto; padding:0; box-sizing:border-box; }
.section{ padding:20px 0; }
.section-head h2{ font-size:24px; padding:16px 0; letter-spacing:-1px; text-align:center; }
.grid{ display:grid; gap:16px; }
.grid--4{ grid-template-columns:repeat(4, 1fr); }
.media{
	display:block; border:1px solid #d5d5d5; border-radius:8px; overflow:hidden; background:#fff;
	transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.media:hover{ box-shadow:0 4px 14px rgba(0,0,0,0.12); }
.media img{ width:24%; display:block; object-fit:contain; padding:20px 0 4px; margin:0 auto; }
.media figcaption{ padding:10px 20px 20px; text-align:left; }
.media-title{ font-size:18px !important; letter-spacing:-1px; margin-bottom:6px; }
.media-desc{
	font-size:15px; line-height:1.4; color:#5d6b7b; margin-top:8px;
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ── 뉴스 + 주의사항 2단 ── */
.info-split{ display:flex; gap:20px; max-width:1200px; margin:40px auto 0; padding:0; box-sizing:border-box; }
.info_card_content { border-radius:12px; padding:28px; position:relative; overflow:hidden; box-sizing:border-box; flex:1; border: 1px solid #d5d5d5; background: #f8f8f8;}
.info-card{ display:flex; flex-direction:column; width: 50%;}
.info-card .info-card-icon{ position:absolute; right:20px; bottom:0; pointer-events:none; }
.info-card .info-card-icon img{ width:160px; }
.info-card-title{ font-size:22px; font-weight:700; margin:12px 0; text-align: center;}
.info-card-desc{ font-size:16px; line-height:24px; color:#3d3d3d; padding-right:80px; }

/* ── 계약시 유의사항 ── */
.contract-notice{ display:flex; max-width:1200px; margin:40px auto 0; gap:0;  padding:20px; box-sizing:border-box; flex-wrap:wrap; flex-direction: column; background-color:#f8f8f8; border-radius:12px; border:1px solid #d5d5d5;}
.contract-notice__item{ height:auto; min-height:70px; padding:20px; display:flex; box-sizing:border-box; }
.contract-notice__item:first-child {padding: 20px 20px 0 20px;}
.contract-notice__icon{ margin:0; line-height:0; margin: 0 8px 0 0;}
.contract-notice__icon img{ width:32px; }
.contract-notice__body{ display:flex; flex-direction:column; gap:10px; width:100%; padding-right:90px; box-sizing:border-box; padding-top: 2px;}
.contract-notice__title{ font-size:18px; color:#333333; font-weight:600; line-height:1.4; letter-spacing:-1px; }
.contract-notice__desc{ font-size:16px; line-height:1.6; letter-spacing:-1px; word-break:keep-all; overflow-wrap:break-word; }

/* ── 게시판 ── */
.car_board_box{ max-width:1200px; margin:0 auto; width: 50%;}
.car_board_title{font-size:22px; padding:0 0 2px; font-family: auto !important;}
.car_board_more{ font-size:13px; font-weight:400; color:#666; }
.car_board_content_title{ display:block; }
.car_board_content_list{ height:44px !important; line-height:44px !important; font-size:16px !important; font-family: auto !important; text-align: left !important;}
.car_board_list_con {width: 100% !important;}
.car_board_list_con_ {width: 100% !important;}
.car_board_list_con_ a{ display:block; width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── 패밀리사이트 / 하단(footer) ── */
.f_info_box2{ padding:10px 15px; background-color:#F8F8F8; box-sizing:border-box; text-align:left; max-width:1200px; width:100%; margin:40px auto; border:1px solid #d5d5d5; border-radius:8px; }
.f_info_box2_title{ font-size:16px; font-weight:bold; line-height:15px; padding:10px 0 10px 10px; }
.f_info_box2_content{ font-size:15px; line-height:25px; letter-spacing:-1px; margin:0 10px; float:left; color:#000; }

.footer_bottom_wrap{ width:100%; }
.footer_divider{ height:1px; background-color:#d4d4d4; width:100%; }
.footer_info_row{ width:100%; background-color:#333333; text-align:center; padding:12px 0; }
.footer_info_table{ max-width:1200px; width:100%; margin:0 auto; display:flex; align-items:center; text-align:left; box-sizing:border-box; padding:0 20px; }
.footer_logo_text{ flex:0 0 220px; width:220px; padding:15px 0; box-sizing:border-box; }
.footer_logo_text .logo_txt, .footer_logo_text .top_label{ color:#fff; }
.footer_info_dot{ flex:0 0 40px; width:40px; text-align:center; }
.footer_info_text{ flex:1 1 auto; color:#ffffff; text-align:left; }
.footer_addr_line{ line-height:24px; font-size:15px; }
.privacy_text{ font-weight:700; }

/* ── 팝업 (온라인 상담신청 / 상품상세) ── */
.request_center_layer, .bohum_view_layer{
	position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:1001;
	display:none; max-width:95vw; max-height:90vh; overflow:auto; -webkit-overflow-scrolling:touch;
}
.online_popup_bg{ background:url(https://cancerok.speedgabia.com/cancerok/direct_mycar/images/popup_bg_1.jpg); }
.popup_close_pos{ position:absolute; top:-20px; margin-top:5px; z-index:5; right:-17px; }
.bohum_close_top{ position:absolute; top:-5px; margin-top:-12px; z-index:5; right:-13px; }
.bohum_close_bottom{ position:absolute; top:810px; margin-top:-12px; z-index:5; right:0px; }

.req3_input_lg{ width:207px; height:25px; }
.req3_hp_select{ height:28px; width:57px; }
.req3_input_hp{ height:25px; width:60px; }
.req3_car_input{ width:118px; height:25px; margin-right:3px; }
.req3_agree_note{ font-size:12px; color:#666666; }


@media (max-width:1024px){

	.top {padding: 18px 20px;}
	.banner{ padding:0 40px; margin: 0 20px;}
	.banner-title{ font-size:32px; line-height: 1.3;}
	.banner-form-float{ margin-top:20px; box-shadow:0 12px 30px rgba(0,0,0,0.1); }
	.banner-quicklinks{ margin-top:20px; }
	.banner-quicklinks li{ flex-basis:calc(50% - 8px); }

	/* 자동차보험 비교 가이드 12개 카드 */
	.section {margin: 0 20px;}
	.grid--4{ grid-template-columns:repeat(2, 1fr); }

	/* 최근뉴스 + 갱신 주의사항 2단 */
	.info-split{ margin: 0 20px;}

	/* 주의사항*/
	.contract-notice {margin: 40px 20px 0;}

	.f_info_box2 {margin: 40px 20px; width: auto;}
}


@media (max-width:768px){

	.section {padding:0;}

	/* 상단 헤더 */
	.top{ padding:12px 16px; gap:10px; }
	.top_logo img{ height:34px; }
	.top_label{ font-size:14px; margin:0; }
	.logo_txt{ font-size:19px; }
	.top_right{ flex-direction:row; align-items:center; }
	.nav_menu{ display:none; }
	.tel_no{ width:auto; }
	.tel_pc_text{ display:none; }
	.tel_mobile_btns{ display:flex; align-items:center; gap:10px; }
	.tel_mobile_btns a{ display:block; line-height:0; }
	.tel_mobile_btns img{ display:block; width:auto; height:28px; }
	.bt_hamburger{ display:block; cursor:pointer; }
	.bt_hamburger img{ width:28px; height:28px; }

	.top_menu{
		display:none; position:fixed; top:0; right:0; width:100%; max-width:280px; height:100%;
		background:#fff; box-shadow:-4px 0 20px rgba(0,0,0,0.18); z-index:9999; overflow-y:auto;
		transition:transform .3s ease; transform:translateX(100%); box-sizing:border-box;
	}
	.top_menu.is_open{ display:block; transform:translateX(0); }
	.top_menu ul.top_menu_list{ width:100%; display:block; padding:8px 0; }
	.top_menu ul li{ width:100%; height:auto; border-bottom:1px solid #efefef; }
	.top_menu ul li a{ display:block; font-size:15px; padding:16px 24px; color:#2d2d2d; font-weight:500; }
	.top_menu_close{ display:block; position:sticky; top:0; width:100%; border:none; background:#fff; text-align:right; padding:20px; cursor:pointer; box-sizing:border-box; }
	.top_menu_close img{ width:22px; height:22px; }
	.mob_menu_overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:998; }
	.mob_menu_overlay.is_open{ display:block; }

	/* 메인 배너 + 퀵링크 */
	.banner-desc {font-size: 15px;}
	.banner-wrap{ padding:0; margin-top:0; }
	.banner{ border-radius:0; min-height:0; flex-direction:column; align-items:flex-start; padding:28px 20px; gap: 0; margin: 0;}
	.banner-title{ font-size:26px; }
	.banner-form-float{ position: static; margin:0; width:auto; border-radius:12px; }
	.banner-quicklinks{ padding:0 16px; }
	.banner-quicklinks ul{ flex-wrap:nowrap; padding:16px; gap:20px; }
	.banner-quicklinks .ql-desc {display: none;}
	.banner-img {margin: 0; position: absolute; right: -35%; top: 8%; z-index: 10;}
	.banner-img img {width: 52%;}
	.banner-quicklinks li a {flex-direction: column; gap: 8px;}
	.banner-quicklinks .ql-title {font-size: 15px; text-align:center; margin: 0;}
	.pc_none {display: block; text-align: center; font-weight:600; font-size: 15px;}
	.banner-quicklinks .ql-break{ display:block; }
	
	/* 상담 신청 폼 */
	.mv_field_row{ flex-wrap:nowrap; }
	.mv_field_label{ width:46px; font-size:14px; }
	.req_note_line {font-size: 13px;}

	/* 혜택 아이콘 영역 */
	.content_top{ padding:24px 20px; margin-bottom:28px; }
	.benefit_box{ padding:0; }
	.benefit_title{ width:100%; white-space:normal; margin:0 0 16px; font-size:20px; text-align:center; }
	.content_icon_box{ width:100%; flex-wrap:nowrap; justify-content:space-between; gap:8px; }
	.content_icon{ width:auto; flex:1 1 0; min-width:0; padding:10px 4px; background:transparent; border:none; }
	.content_icon img{ width:48px; height:48px; padding:10px; background:#fff; border-radius:50%; box-shadow:0 2px 8px rgba(0,0,0,0.08); box-sizing:content-box; }
	.content_icon a{ font-size:12px; }

	/* 자동차보험 비교 가이드 12개 카드 */
	.container{ padding:40px 0; }
	.grid--4{ grid-template-columns:1fr; gap:12px; }
	.section-head h2{ font-size:20px; padding:0 0 16px; }
	.media-title {font-size: 20px;}
	.media-desc {font-size: 16px;}

	/* 게시판 */
	.car_board {}
	.info-split{margin: 0; padding:0 16px; gap:16px; flex-direction: column;}
	.car_board_box {width: 100%;}
	.info-card {width: 100%;}
	.info-card-desc{ padding-right:0; }
	.info-card .info-card-icon{ display:none; }
	


	/* 계약시 유의사항 */
	.contract-notice{ flex-direction:column; padding:0; margin:28px 20px 0; }
	.contract-notice__item{ padding:20px; }
	.contract-notice__icon{ display:; }
	.contract-notice__body{ padding-right:0; }

	/* 패밀리사이트 / 하단(footer) */
	.f_info_box2{ margin:28px 16px; width:auto; }
	.footer_info_row{ padding:16px 0 24px; }
	.footer_info_table{ flex-direction:column; align-items:flex-start; padding:0 16px; }
	.footer_info_dot{ display:none; }
	.footer_info_text{ width:100%; padding-top:8px;}
	.footer_logo_text {flex: auto;}
	.f_info_box2_content {font-size: 15px;}
}