@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css); 
@import url(//cdn.rawgit.com/hiun/NanumSquare/master/nanumsquare.css);
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css); 




/*공통*/
*{ margin:0; padding:0; box-sizing:border-box;}
ul,ol,li{ list-style:none;}
a{ color:inherit; cursor:pointer; text-decoration:none;}
img{vertical-align:middle; border:0; max-width: 100%; height: auto;}
/*html { overflow-x: hidden; }
body { overflow-x: hidden; }*/

.clearfix:after{content:''; display: block; clear: both;}
.w1000{max-width:1000px; margin:0 auto;}
.txt{width: 25%; font-size: 20px; letter-spacing: -1.5px; text-align: center; float: left;}
body{ _height:100%; _width:100%; _overflow:auto; margin:0; padding:0; }
.clearfix:after{ content:''; display:block; clear:both; }

/* ── 헤더 ── */
.top_banner{ padding:15px 0; display: flex; justify-content: space-between;}

.top_logo{ width:80%; height:60px; float:left; padding-left:6%; text-align:left;            
background-image: url(	https://cancerok.speedgabia.com/cancerok/drive_1sec/top/logo_img.png); background-repeat:no-repeat; background-position:left; background-size: 60px;}
.top_logo a{ display:inline-block; }
.logo_txt1{ font-size:15px; color:#2d2d2d; line-height:20px; padding-left: 4px;}
.logo_txt2{ font-size:32px; line-height:30px; letter-spacing:-1px; font-weight:600; color:#0e51e8; }
.top_bar {width: 100%; border-bottom: 8px solid rgb(69, 99, 167);}

.bt_icons{ float:right; display:flex; align-items:center; gap:14px;}
.bt_kakao{ display:none; }
.bt_kakao img{ width:32px; }
.bt_tel_box{ display:flex; align-items:center; gap:8px; }
.top_r_text .bt_tel_text{ font-size:17px; color:#2d2d2d; line-height:18px; }
.top_r_text .bt_tel_num{ font-size:30px; line-height:40px; letter-spacing:-1px; font-weight:600; color:#0e51e8; }

.main_visual{ margin:0 0 12px; background: linear-gradient(to bottom, #EFFAFF 0%, #FFFFFF 100%); }
.main_visual_img{ width:1000px; max-width:100%; margin:0 auto; aspect-ratio: 964 / 261;
	    background-image: url(https://cancerok.speedgabia.com/cancerok/silvi_1sec/main/main_img.png);
        background-repeat: no-repeat;
        background-size: 100%;

}
.main_visual_img img{ display:block; width:100%; }


/* ── 계산 폼 (실시간 보험료계산) ── */
.main_form{ display:flex; align-items:flex-start; gap:0; }
.main_f_box{ width:35%; border-radius:12px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,0.08); background:#fff; max-height: 414px;}
.main_f_box ul{ }
.main_f_box ul li{ height:32px; margin-bottom:5px; }


.main_re_box{ width:60%; border-radius:12px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,0.08); background:#fff;}
.main_re_box ul{ display:grid; grid-template-columns:repeat(4, 1fr); column-gap:2%; row-gap:16px; }
.main_re_box ul li{ text-align:center; }
.main_re_box img.cursor[src*="btn_read"] { margin-left: 5%; }

.main_arrow{ width:5%; height:320px; background-image:url(https://cancerok.speedgabia.com/cancerok/silvi_1sec/main/arrow.gif); background-repeat:no-repeat; background-position:center; background-size:80%; }



.main_box_title{ line-height:1.4; padding:12px 10px; text-align:center; font-size:24px; font-weight:700; letter-spacing:-0.5px; color:#ffffff; background: #8093B3; margin: 0;}
.main_box_title .hl{ color:#FDFC01; }
.main_box_body{ padding:22px 24px 24px; }
.f_row{ display:flex; align-items:center; margin-bottom:12px; }
.f_label{ width:20%; flex-shrink:0;  font-size:14px; font-weight:700; color:#2d2d2d; }
.f_input{ flex:1; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.f_input input[type="text"],
.f_input select{ height:32px; border:1px solid #cccccc; border-radius:4px; padding:0 8px; font-size:13px; color:#333333; box-sizing:border-box; }
.f_input input[type="text"]{ flex:1; min-width:0; }
.f_input.f_radio label{ font-size:14px; color:#333333; margin-right:14px; cursor:pointer; }
.f_input.f_tel select{ width:22%; flex-shrink:0; }
.f_input.f_tel input[type="text"]{ width:19%; flex:none; text-align:center; }
.btn_auth{ display:inline-block; flex-shrink:0; cursor:pointer; background-color:#161616; color:#ffffff;
           font-size:12px; letter-spacing:-0.5px; line-height:1; padding:9px 8px; border-radius:4px; white-space:nowrap; }

.f_agree{ text-align:center; padding:6px 0 14px; width: 70%; font-size: 14px; color: #2d2d2d; margin: 0 auto;}
.f_submit{ text-align:center; }
.f_submit img{ cursor:pointer; }

.result_txt{ text-align:center; font-size:24px; font-weight:600; letter-spacing:-0.5px; color:#2d2d2d; padding:6px 0 23px; margin: 0;}
.result_txt .blank{ display:inline-block; min-width:70px; border-bottom:2px solid #2d2d2d; padding:0 6px 2px; }
.result_txt .blank.blank-sm{ min-width:36px; }

.icon_grid{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 2%; }
.icon_grid li{ width:23%; text-align:center; }
.icon_grid li p{ margin:0 0 4px; }

/* ── 상품 카드 리스트 ── */
.insu-card-wrap{ padding:10px 0 0; }
.section-head h2{ font-size:24px; padding:16px 0; letter-spacing:-1px; }
.insu-card-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.insu-card{ border:1px solid #cccccc; border-radius:8px; padding:20px 18px 16px; background:#fff; display:flex; flex-direction:column; gap:8px; }
.insu-card:hover{ box-shadow:0 4px 14px rgba(0,0,0,0.12); }
.insu-card-logo{ text-align:center; min-height:54px; display:flex; align-items:center; justify-content:center; }
.insu-card-logo img{ width:70%; object-fit:contain; }
.insu-card-name{ font-size:20px; font-weight:500; color:#1a1a1a; letter-spacing:-0.5px; padding:0 0 4px; text-align:center; }
.insu-card-desc{ font-size:13px; color:#5e5e5e; line-height:1.5; text-align:center; }
.insu-card-meta{ display:flex; justify-content:space-between; gap:6px; padding:8px 0; border-top:1px dashed #e0e0e0; border-bottom:1px dashed #e0e0e0; margin:6px 0; }
.insu-card-meta div{ flex:1; text-align:center; font-size:12px; color:#5e5e5e; }
.insu-card-meta img{ width:24px; display:block; margin:0 auto 4px; }
.insu-card-btns{ display:none; gap:8px; }
.insu-card-btn{ flex:1; display:block; text-align:center; padding:9px 0; border-radius:4px; font-size:14px; letter-spacing:-0.5px; cursor:pointer; color:#fff; }
.btn-gray{ background-color:#717171; }
.insu-card-pay-img{ width:100%; display:block; border-radius:4px; cursor:pointer; }
.btn-active {background: #5AB3D6;}
.insu-card-no {font-size: 14px; color: #1a1a1a; line-height: 1.5;}

/* 컨텐츠 */
.section_first {padding: 30px 0;}
.container {max-width: 1000px; margin: 0 auto;}

.media{ border:1px solid #cccccc; border-radius: 8px; height: 250px; overflow:hidden; background:#fff; transition: box-shadow .3s, transform .3s, border-color .3s; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; margin: 0px; }
.media-title {font-size: 20px !important;}
.media figcaption .media-desc {margin-top: 8px !important;}
.media img{width: 40%; height: 40%; display:block; object-fit: contain; text-align: center; padding-top: 12px; margin:0 auto;}
.media figcaption{padding:0 14px 12px 14px; line-height:1.5; text-decoration:none; text-align: left;}
.media figcaption a{color:var(--text);text-decoration: none; font-size: clamp(20px, 2.0vw, 25px); }

.media:hover{ box-shadow:0 4px 14px rgba(0,0,0,0.12); }

.media figcaption .media-desc{
  line-height: 1.55;
  color: #5d6b7b; 
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 3;    
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 16px;
}

.img-wrap {width: 100%; text-align: center; padding-top: 25px; box-sizing: border-box;}

.grid{display:grid; gap:10px}
.grid--4{grid-template-columns: repeat(4, 1fr)}

/* ── 푸터 ── */
.footer{ padding:20px 0; border-top:1px solid #cccccc; margin:20px 0 0;}
.footer_logo{ width:22%; float:left; padding-left:5%; margin-top:10px; }
.footer_info{ width:73%; float:right; padding-left:3%; border-left:1px solid #cccccc; }
.f_menu_txt a{ padding:0 10px; border-right:1px solid #cccccc; font-size:13px; color:#2d2d2d; line-height:20px; }
.f_menu_txt:last-child a {border-right:none;}
.f_info{font-size:15px; color:#2d2d2d; line-height:22px; }
.f_info_box{ padding:10px 15px; background-color:#f7f6f6; border:1px solid #d7d7d7; box-sizing:border-box; text-align:left; width:100%; margin:0 auto 20px; }
.f_info_box_{margin: 30px auto 0;}
.f_info_box_title{ font-size:16px; font-weight:bold; line-height:30px; }
.f_info_box_content{ font-size:15px; line-height:23px; letter-spacing:-0.5px; }
.f_info_box2{ padding:10px 15px; background-color:#fff; border:1px solid #d7d7d7; box-sizing:border-box; text-align:left; max-width:1000px; margin:0 auto 24px; overflow:hidden; }
.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; }
.f_info_box2_content a{ text-decoration:none; color:#333333; cursor:pointer; }

/* 서브페이지 */
.top { width:100%; border-bottom:1px #dddddd solid; }
.insurance-wrap { max-width:1000px; margin:0 auto; padding:40px 0 0; color:#222; line-height:1.85; word-break:keep-all; background:#ffffff; }
.insurance-wrap * { box-sizing:border-box; }
.insurance-wrap .main-title { margin:0 0 18px; font-size:34px; font-weight:800; line-height:1.4; color:#111; letter-spacing:-0.3px; }
.insurance-wrap .intro { margin:0 0 30px; font-size:17px; color:#444; }
.insurance-wrap .section { margin:0 0 26px; padding:28px 24px; border:1px solid #dfe9f5; border-radius:18px; background:#f8fbff; }
.insurance-wrap .section-title { margin:0 0 14px; font-size:25px; font-weight:800; color:#123d73; line-height:1.45; }
.insurance-wrap p { margin:0 0 16px; font-size:16px; color:#333; }
.insurance-wrap .point-box { margin:18px 0; padding:18px 20px; border:1px solid #e2ecf7; border-radius:14px; background:#ffffff; }
.insurance-wrap .point-title { margin:0 0 10px; font-size:18px; font-weight:700; color:#0e4a8a; }
.insurance-wrap .check-list { list-style:none; padding:0; margin:0; }
.insurance-wrap .check-list li { position:relative; margin:0 0 10px; padding-left:28px; font-size:16px; color:#333; }
.insurance-wrap .check-list li:before { content:"✔"; position:absolute; left:0; top:0; color:#0c8b4a; font-weight:700; }
.insurance-wrap .tip { margin-top:16px; padding:16px 18px; border:1px solid #f0d69e; border-radius:14px; background:#fff7e8; color:#654300; font-size:15px; }
.insurance-wrap .info-table { width:100%; margin:18px 0; border-collapse:collapse; background:#fff; overflow:hidden; border-radius:14px; }
.insurance-wrap .info-table th, .insurance-wrap .info-table td { border:1px solid #d8e4ef; padding:14px 12px; text-align:left; vertical-align:top; font-size:15px; }
.insurance-wrap .info-table th { background:#eaf3fc; color:#163e6b; font-weight:700; }
.insurance-wrap .final-box { margin-top:30px; padding:30px 24px; border-radius:20px; background:#123d73; }
.insurance-wrap .final-box h3 { margin:0 0 14px; font-size:24px; font-weight:800; color:#fff; }
.insurance-wrap .final-box p { margin:0 0 14px; color:#eef5ff; }
.insurance-wrap .summary-list { list-style:none; padding:0; margin:0; }
.insurance-wrap .summary-list li { position:relative; margin:0 0 10px; padding-left:28px; color:#f6fbff; font-size:16px; }
.insurance-wrap .summary-list li:before { content:"✅"; position:absolute; left:0; top:0; }
.insurance-wrap .faq-wrap { margin:0; padding:0; }
.insurance-wrap .faq-item { margin:0 0 14px; padding:20px 22px; border:1px solid #dce9f7; border-radius:14px; background:#fff; }
.insurance-wrap .faq-q { font-size:16px; font-weight:700; color:#123d73; margin:0 0 10px; }
.insurance-wrap .faq-a { font-size:15px; color:#444; line-height:1.75; margin:0; }


@media (max-width: 1024px){

	.w1000{
		width:100% !important; padding:0 20px;
	}

	.main_visual_img{
		box-sizing:border-box; padding:0 20px; background-origin:content-box;
	}
	.top_banner{
		padding:12px 20px;
	}

	.insu-card-wrap{
		margin: 20px 0 0;
	}
	.insu-card-grid{
		grid-template-columns:repeat(2, 1fr);
	}

	.grid--4 {
		grid-template-columns:repeat(2, 1fr) !important;
	}

	.container{
		padding: 0 20px;
	}

	.f_info_box_{
		padding:0 20px;
	}
	.f_info_box2{
		margin: 0 20px 24px;
		
	}
	

}

@media screen and (max-width: 768px){
	html, body{ overflow-x:hidden; max-width:100%; }

	.w1000{ width:100% !important; padding:0; box-sizing:border-box !important; }

	/* 헤더 */
	.top_banner{
		padding:8px 12px 12px;
		position:relative;
		min-height:56px;
		box-sizing:border-box;
		display:flex !important;
		align-items:center;
		justify-content:space-between;
		border-bottom:1px solid #e5e5e5;
	}

	.top_logo{
		flex: 1;
        min-width: 0;
        float: none;
        height: auto;
        padding-left: 40px;
        background-size: 40px !important;
        background-position: left center !important;
        box-sizing: border-box;
	}

	.logo_txt1{
		font-size:14px;
		line-height:14px;
	}

	.logo_txt2{
		font-size:20px;
		line-height:24px;
	}
	
	.bt_icons{
		display:flex;
		align-items:center; 
		gap:6px;
		flex-shrink:0;
		float:none;
	}

	.bt_tel_box{
		gap:4px;
	}
	.top_r_text {
		display: none;
	}

    /* 카카오 아이콘 */
    .bt_kakao {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
    }
    .bt_kakao img {
        width: 36px !important;
        height: 36px !important;
        object-fit: contain;
    }
    /* 전화 아이콘 */
    .bt_tel {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
    }
    .bt_tel img {
        width: 36px !important;
        height: 36px !important;
        object-fit: contain;
    }

	/* 메인비주얼 */
	.main_visual {margin: 0;}
	.main_visual_img{box-sizing:border-box; aspect-ratio: 720 / 230; background-origin:content-box;
	    background-image: url(https://cancerok.speedgabia.com/cancerok/silvi_1sec/mobile/main_img2.png);
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: right bottom;
	}

	/* 계산 폼 */
	.main_box_title {font-size: 17px; padding: 8px 4px;}
	.result_txt {font-size: 16px; line-height: 1.5; padding: 8px;}
	.main_form{ display:flex; flex-direction:column; padding:0 20px; box-sizing:border-box; }
	.main_f_box{ width:100% !important; float:none !important; margin-bottom:16px; }
	.main_arrow{ display:none !important; }
	.main_re_box{ width:100% !important; float:none !important; }
	.main_re_box ul{ grid-template-columns:repeat(2, 1fr); column-gap:4%; row-gap:12px; }
	.main_te_box_txt{ font-size:15px; line-height:1.5; padding:10px 6px; }
	.main_form_title{ font-size:16px; }
	.f_title{ width:28%; font-size:13px; }
	.f_content{ width:70%; }
	.form_bt{ width:90%; }
	.form_bt a{ font-size:16px; }

	/* 상품카드 1열 */
	.section-head h2 {font-size: 20px;}
	.insu-card-grid{ grid-template-columns:1fr !important; }
	.insu-card{margin: 0 20px;}
	.insu-card-name{ font-size:17px; }
	.insu-card-btn{ font-size:13px; padding:8px 0; }
	.insu-card-wrap .section-head{ padding:0 20px; }

	/* 컨텐츠 */
	.grid.grid--4 { grid-template-columns: repeat(1, 1fr) !important; gap: 12px !important; }
    .media { height: 220px; }
    .media-title { font-size: 19px !important; font-weight: 500; }
    .media figcaption .media-desc { font-size: 16px !important; }
	.img-wrap {display: none !important;}

	/* 푸터 */
	.footer{ padding:16px 20px; }
	.footer_logo{ width:100% !important; float:none !important; padding-left:0 !important; margin-top:0; margin-bottom:10px; }
	.footer_info{ width:100% !important; float:none !important; padding-left:0 !important; border-left:none !important; }
	.f_menu_txt a{ padding:0 5px; font-size:14px; }
	.f_info{ font-size:15px; line-height:20px; word-break:keep-all; }
	.f_info_box_{padding: 0 20px;}
	.f_info_box2{ margin:12px 20px; }

	/* 서브페이지 */
	.insurance-wrap { padding:24px 20px 0; }
	.insurance-wrap .main-title { font-size:28px; }
	.insurance-wrap .section-title { font-size:22px; }
	.insurance-wrap .section { padding:22px 18px; }

}

@media (max-width: 960px){
	body{ background:#fff !important; }
}



/* ===========================
   조재필 추가 2026-07-10
=========================== */

/* 배경 */
#layer_bg {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
}

/* 팝업 */
#result_popup {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    background: #fff;
    border-radius: 4px;
    z-index: 9999;
    overflow: hidden;
}

/* 헤더 */
.layer_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #ddd;
    background: #f5f5f5;
}

.layer_title {
    font-size: 16px;
    font-weight: bold;
    color: #222;
}

.layer_close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #888;
}

/* 본문 */
.layer_body {
    padding: 0;
    overflow-y: auto;
    max-height: calc(90vh - 50px);
}

/* iframe */
#layer_iframe {
    width: 100%;
    height: 70vh;
    border: none;
    display: block;
}

/* 모바일 */
@media (max-width: 480px) {
    #result_popup {
        width: 95%;
    }
    #layer_iframe {
        height: 60vh;
    }
}