@charset "UTF-8";
/* CSS Document */


/****************************************************************************
	common
****************************************************************************/
/* PC */
.closemenu, .menu div {display:none !important;} #background, #background2 { position:fixed; display:none; width:100vw; height:100vh; top:0; left:0; background:rgba(0, 0, 0, 0.7); z-index:70; }


/****************************************************************************
	layout
***************************************************************************/
/* Frame */
#wrap {font-family:'NotoSansKR',sans-serif}

/* HEADER */
header { position: absolute;; width:100%; height:84px; top:0; border-bottom:1px solid #EBEBEB; z-index:20; background-color: transparent !important; border: 0 !important; }
header h1 {float:left; padding:19px;padding-left:0;}
header h1 ~ img {float:left; margin:13px 0;}
header .menu {float:right;}
header .menu li {float:left; line-height:84px;}
header .menu li:not(:first-of-type) {margin-left:20px;}
header .menu li a {font-size:17px; color:#09181f;}
header .menu li a.on {color:#328ee9;}


/****************************************************************************
	Layer 팝업
****************************************************************************/
#modal_box_terms,
#modal_box_terms2{ position:fixed; display:none; width:900px; height:90vh; top:50%; left:50%; margin:-45vh 0 0 -500px; background:white; z-index:9999999999; }
#modal_box_terms a,
#modal_box_terms2 a{ position:absolute; right:30px; top:0; height:50px; line-height:50px; color:white; font-size:24px; font-weight:bold; }
#modal_box_terms iframe,
#modal_box_terms2 iframe{ width:100%; height:100%; }


/****************************************************************************
	content area
****************************************************************************/
/* 공통 - loadForm().form_01 수정 */
#wrap [data-imported=form_01] .formLabel {height:auto;margin:20px auto -10px;font-size: 15px;font-weight:bold;color:#0c3646}
#wrap [data-imported=form_01] .formLabel.name {margin-top:auto}
#wrap [data-imported=form_01] .formLabel.name::before {content:'이름'}
#wrap [data-imported=form_01] .formLabel.gender {margin:20px auto 0}
#wrap [data-imported=form_01] .formLabel.gender::before {content:'성별'}
#wrap [data-imported=form_01] .formLabel.birth::before {content:'생년월일'}
#wrap [data-imported=form_01] .formLabel.phone::before {content:'전화번호'}
#wrap [data-imported=form_01] label input {text-indent:0}
#wrap [data-imported=form_01] [data-type=name] label {border-bottom:1px solid #9C9C9C}
#wrap [data-imported=form_01] [data-type=gender] label em {border:1px solid #9C9C9C}
#wrap [data-imported=form_01] [data-type=gender] label :checked~em {border:0;background-color:#0b9ecb}
#wrap [data-imported=form_01] [data-type=birth] label {border-bottom:1px solid #9C9C9C}
#wrap [data-imported=form_01] [data-type=phone] .select_wrap {width:30%;border-bottom:1px solid #9C9C9C}
#wrap [data-imported=form_01] [data-type=phone] .select_wrap+label {width:70%;border-bottom:1px solid #9C9C9C}
#wrap [data-imported=form_01] [data-type=agree] {margin-bottom:20px}
#wrap [data-imported=form_01] .submit {height:55px;border-radius:2em;font-size:22px;background-color:#0b9ecb;transition:all ease 0.5s 0s}
#wrap [data-imported=form_01] .submit:hover {color:#0b9ecb;border:1px solid #0b9ecb;background:#fff;}


/* 메인 비주얼 */
#visual {height:880px; background:url("/images/visual_bg_ver3.jpg") no-repeat center bottom}
#visual .tit_visual {position:absolute;left:220px;top:180px;}
#visual .tit_visual .txt {display:block}
#visual .tit_visual .txt1 {margin:0 0 0 48px;opacity:0}
#visual .tit_visual .txt2 {margin-top:-20px;opacity:0}
#visual .tit_visual .box_hand {overflow:hidden;position:absolute;top:-54px;left:193px;width:150px;height:90px;text-align:center;opacity:0}
#visual .tit_visual .hand {transform:rotate(12deg);transform-origin:center bottom;animation:visualthreeInsure_hand 0.8s infinite alternate cubic-bezier(.73,.01,.48,1.12)}
#visual .model {position:absolute;left:300px;bottom:0;opacity:0;transform:translateX(-10%)}
[data-device=pc] #visual .tit_visual .txt1 {opacity:1;transition:all 1s 0.5s ease-in-out}
[data-device=pc] #visual .tit_visual .txt2 {opacity:1;transition:all 1s 0.7s ease-in-out}
[data-device=pc] #visual .tit_visual .box_hand {opacity:1;transition:all 1s 1.1s ease-in-out}
[data-device=pc] #visual .model {opacity:1;transform:translateX(0);transition:all 1s 1.1s ease-in-out}
@keyframes visualthreeInsure_hand {
	0%			{transform:rotate(12deg)}
	100%		{transform:rotate(-12deg)}
}

/* 메인 비주얼 - loadForm().form_01 수정 */
#visual .loadForm {position:absolute;width:364px;padding:25px; top:50%; right:40px; margin-top:-300px; background:white; border:3px solid #3797f6; border-radius:5px; }
#visual .loadForm .tit_loadForm {margin-bottom:30px}


#freeConsult h2 { position:relative; height:40px; line-height:40px; font-size:40px; font-weight:normal; color:#09181F; }
.ask_btn { position:absolute; display:block; width:170px; height:170px; padding:60px 0; bottom:0; right:0; line-height:1.3; text-align:center; font-size:18px; font-weight:400; color:white; border-radius:85px; background:#F13C5F; } .ask_btn span { position:absolute; display:block; width:80px; height:22px; left:50%; bottom:0; margin:0 0 -25px -40px; background:url("/images/shadow.png") no-repeat center center; cursor:default; }



#cont3 {position:relative;background-color:#f8f8f8;}
#cont3 .bg{padding-top:70px;}
#cont3 .bg .inner {}
#cont3 .bg .inner .txt_con{line-height:1.2;}
#cont3 .bg .inner .txt_con .txt1{margin-bottom:25px;font-size:22px;color:#6b6b6b;}
#cont3 .bg .inner .txt_con .txt2{font-size:46px;color:#09181f;}
#cont3 .bg .inner .img{margin:204px 0 0 -40px;}
#cont3 .bg .inner .img_inter{position:absolute;bottom:0;right:-260px;width:522px;height:100%;text-align:center;}
#cont3 .bg .inner .img_inter .img1{position:absolute;bottom:0;right:-15px;}
#cont3 .bg .inner .img_inter .img1 img{}
#cont3 .bg .inner .img_inter .img2{position:absolute;bottom:0;right:0;}
#cont3 .bg .inner .img_inter .img2 img{}
#cont3 .bg .inner .img_inter .txt{position:absolute;bottom:30px;left:0;width:100%;line-height:1.2;font-size:34px;color:#fff;}
#cont3 .ask_btn {left:50%;margin:0px 0 412px 64px;}

#productList{padding: 77px 0 20px;}
#productList .inner {width: 1125px;}
#productList h2 {margin-bottom:40px;; color:#09181F;font-size:44px; font-weight:normal;text-align: left;letter-spacing: -0.05em; line-height: 1.2;}
#productList h2>span{font-size:28px; font-weight: 400;}
#productList h2 p{font-weight: 500;line-height: 52px;}
#productList h2 p em{color:#3797f6;font-weight: 500;}
#productList article {width: 100%;}
#productList article h3{position: relative; padding-left:20px;color:#0c3646; font-size:28px; font-weight:400; letter-spacing: -0.05em;text-align: left;}
#productList article h3::before{content: '';position: absolute; top: 50%;left:0; width: 10px;height:10px;border-radius: 100%;transform: translateY(-50%);}
#productList article h3::after{color:#6b6b6b;padding-left:10px;font-size: 16px; font-weight: 400;}
#productList article.type0 h3::before{background-color: #5a6ece;}
#productList article.type0 h3::after{content: '3대질병(암/뇌/심장)진단비 구성과 입원/수술시 정액보장 구성';}
#productList article.type1 h3::before{background-color: #ff8033;}
#productList article.type1 h3::after{content: '암진단비, 암수술비, 암입원비, 항암약물치료비에 대한 보장구성';}
#productList article.type2 h3::before{background-color: #18a87d;}
#productList article.type2 h3::after{content: '유병자도 가입가능한 실손보험';}
#productList article+article {margin-top: 40px;}
#productList article>div{position: relative; margin-top: 17px;height:300px;}
#productList article>div ul li{padding:10px;cursor: pointer;box-sizing: border-box;}
#productList article>div ul li dt{word-break:normal}
#productList article>div ul li dt img{display: block;margin: 0 auto; max-width: 100%;}
#productList article>div ul li:hover{margin-top: -8px; transition: margin 0.4s ease-in-out;}
#productList article>div ul li .desc{margin-top: 10px; width: 100%;color:#020219;font-family: 'NotoSansKR',sans-serif;font-size:13px; font-weight: 500;letter-spacing: -0.05em;text-align: left;opacity: 0.5;word-break:break-all;}
#productList article>div ul li dl{width: 100%;border-radius: 6px;padding:18px 0 0;background-color: #fff;box-shadow:3px 0 10px rgba(0,0,0,.22);text-align: left;box-sizing: border-box;word-break:break-all;text-overflow: ellipsis;}
#productList article>div ul li dl dd{margin-top: 17px; padding:0 24px;height:130px;box-sizing: border-box;}
#productList article>div ul li dl dd span{display: block;color:#221e1f;width: 100%;font-family: 'NotoSansKR',sans-serif;font-size: 16px; font-weight: 300; letter-spacing: -0.05em;}
#productList article>div ul li dl dd .clamp3{overflow: hidden; height:72px;}
#productList article>div ul li dl dd .clamp3 span{line-height: 24px;}
#productList article>div ul li dl dd .money{position: relative; display: inline-block;width: 100%;padding:0 27px; margin:15px 0; font-size:20px;line-height: 24px; font-weight: 700;letter-spacing:-0.3px;text-align: right;box-sizing: border-box;}
#productList article>div ul li dl dd .money::before{content: '월'; left:0;position: absolute;bottom:0}
#productList article>div ul li dl dd .money::after{content: '원'; right:0; position: absolute;bottom:0}
#productList article>div ul li dl dd .money em{font-family: 'NanumSquare',sans-serif; font-size: 34px; font-style: italic; font-weight: 800;letter-spacing:-0.3px;}
#productList article>div ul li dl .Insurance_btn{width: 100%;height:52px;color:#fff;font-size:20px;font-weight:400;border-radius: 0 0 6px 6px;text-align: center;letter-spacing: -0.05em;outline: 0 solid transparent;}
#productList article.type0 .money em{color:#5a6ece;}
#productList article.type1 .money em{color:#ff8033;}
#productList article.type2 .money em{color:#18a87d;}
#productList article.type0 .Insurance_btn{background-color: #5a6ece;}
#productList article.type1 .Insurance_btn{background-color: #ff8033;}
#productList article.type2 .Insurance_btn{background-color: #18a87d;}
#productList article .noswiper ul li{width: 25%;}
#productList article .swiper-button-next{top: 48%; right: -35px; width: 16px; height: 27px; background: url(/images/arrow.png)-16px 0 no-repeat}
#productList article .swiper-button-prev{top: 48%; left: -35px; width: 16px; height: 27px; background: url(/images/arrow.png)0 0 no-repeat;}

#freeConsult {padding: 77px 0 20px;}
#freeConsult h2 {margin-bottom:30px}
#freeConsult .loadForm {width: 360px;}
#freeConsult .inner > dl {float:left;width:680px}
#freeConsult .inner > dl dt {padding:22px 24px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:18px;color:#6B6B6B;line-height:1em;background-color:#F4F4F4; border-bottom:3px solid white; border-radius:5px; cursor:pointer; }
#freeConsult .inner > dl dt span:not(.arr) {display:inline-block; margin-right:15px; font-weight:bold; color:#0b9ecb;}
#freeConsult .inner > dl dt span.arr { float:right; display:block; width:18px; height:10px; margin:4px 0; background-image:url("/images/qna_btn.png"); background-position:top center; background-repeat:no-repeat; }
#freeConsult .inner > dl dt.on {color:white; background:#0b9ecb;}
#freeConsult .inner > dl dt.on span:not(.arr) {color:white;}
#freeConsult .inner > dl dt.on span.arr {background-position:bottom center;}
#freeConsult .inner > dl dd {display:none; padding:22px 16px 25px 50px; font-size:16px;word-break:keep-all; color:#222;}
#freeConsult .loadForm { float:right; padding:25px; background:white; border:3px solid #3797f6; border-radius:5px; }

#cont6 {padding:56px 0; background:#F9FAFC;}
#cont6 h2 {position:relative; margin-bottom:30px; text-align:center; font-size:26px; font-weight:500; color:#09181F;}
#cont6 h2 img {position:absolute; display:block; width:29px; height:22px;}
#cont6 h2 .open {top:0; left:150px;}
#cont6 h2 .close {bottom:0; right:150px;}
#cont6 h2 span {color:#F13C5F;}
#cont6 .logos {display:table; width:100%;}
#cont6 .logos p {display:table-cell; width:calc(12.5% - 20px); padding:20px 10px; text-align:center;}
#cont6 .logos p img {vertical-align:middle; width:100%;max-width:100%;}

#submit {width:730px; padding:20px 0; margin:0 auto; text-align:center;}
#submit h2 { position:relative; padding-top:85px; line-height:1.4; font-size:32px; font-weight:normal; color:#09181F; }
#submit h2 span:not(.m_break):not(.pc_break) {display:inline-block; height:26px; line-height:40px; border-bottom:20px solid rgba(11, 158, 203, 0.2);}
#submit h2 + p {margin:20px 0; font-size:18px; color:#666;}
#submit h2 + p span {color:#F13C5F;}
#submit #modal_box {background:#F5F5F5; border-top:3px solid #3797f6;}
#submit #modal_box dl {padding:30px;}
#submit #modal_box dl dt,
#submit #modal_box dl dd {padding-top:10px; font-size:16px; text-align:left; color:#0c3646;}
#submit #modal_box dl dt {font-weight:600;}
#submit #modal_box dl dd {padding-bottom:10px;}
#submit #modal_box dl dd:not(:last-of-type) {border-bottom:1px dotted rgba(0, 0, 0, 0.1);}
#submit a { display:block; margin:20px auto 0 auto; width:400px; height:60px; line-height:60px; text-align:center; font-size:22px; color:#0b9ecb; border:2px solid #0b9ecb; border-radius:35px; }
#submit a:hover {color:white; background:#0b9ecb;} 

/* 보장내용 */
#guarantee {padding-bottom:80px;background-color:#f3f3f3}
#guarantee .tit_section {margin-bottom:60px;padding-top:85px;font-size:44px;font-weight:500;line-height:1em;text-align:center;letter-spacing:-0.05em}
#guarantee .tit_section strong {font-weight:500;color:#3797f6}

/* 보장내용 - 3가지 질문 */
.wrap_guarantee_three {padding:40px;margin-bottom:20px;background-color:#fff;} 
.wrap_guarantee_three .tit_wrap {margin-bottom:60px;font-size:24px;font-weight:500;line-height:1em}
.wrap_guarantee_three .desc_wrap {margin-bottom:55px;font-size:22px;color:#0c3646;text-align:center;}
.wrap_guarantee_three .desc_wrap strong {font-weight:500;color:#3797f6;}
.wrap_guarantee_three .graph {display:block;margin:0 auto}
.wrap_guarantee_three .list_graph {display:flex;margin-bottom:60px}
.wrap_guarantee_three .list_graph .item_graph {font-size:16px;color:#0c3646;letter-spacing:-0.05em}
.wrap_guarantee_three .list_graph .item_graph:nth-child(1) {padding-left:150px}
.wrap_guarantee_three .list_graph .item_graph:nth-child(2) {padding-left:55px}
.wrap_guarantee_three .list_graph .item_graph:nth-child(3) {padding-left:65px}
.wrap_guarantee_three .cmt {font-size:16px;font-weight:500;color:#6b6b6b;line-height:1em}

/* 보장내용 - 가입시 보장 */
.wrap_guarantee_join {padding:40px;background-color:#fff;} 
.wrap_guarantee_join .tit_wrap {margin-bottom:60px;font-size:24px;font-weight:500;line-height:1em}
.wrap_guarantee_join .list_join {display:flex;justify-content:space-between;position:relative;padding:0 30px 120px;margin:0 70px}
.wrap_guarantee_join .list_join::after {content:"";position:absolute;bottom:80px;left:0;width:100%;height:1px;background:url(/images/guarantee_border_dotted.png) 0 0 repeat-x;}
.wrap_guarantee_join .list_join img {margin-bottom:10px}
.wrap_guarantee_join .list_join .tit {font-size:18px;color:#0c3646;text-align:center;line-height:1.3em}
.wrap_guarantee_join .box_graph {display:table;position:relative;margin:0 auto;}
.wrap_guarantee_join .box_graph .tooltip {display:flex;justify-content:center;position:absolute;top:-50px;left:-30px;width:474px;height:121px;padding-top:25px;font-size:20px;color:#020219;background-image:url(/images/guarantee_join_tooltip.png);}

/* 제휴사 */
.alliance_pc_c {background-color:#F9FAFC;}

/* 인콜 */
#inCall .box_phone .tooltip {fill:#0b9ecb}
#inCall .box_phone .number {color:#0b9ecb}
#inCall .list_info .tit {color:#fff;background:#0b9ecb}



/****************************************************************************
	keyframes
****************************************************************************/   
@keyframes awardbtn {
	0% {background: #f13c5f;}
	50% {background: #f13c5f;}
	51% {background: #293350;}
	100% {background: #293350;}
}
@keyframes arrowbtn {
	0% {z-index: 1;visibility: visible;}
	50% {z-index: 1;visibility: visible;}
	51% {z-index: 0;visibility: hidden;}
	100% {z-index: 0;visibility: hidden;}
}
@keyframes rearrowbtn {
	0% {z-index: 0;visibility: hidden;}
	50% {z-index: 0;visibility: hidden;}
	51% {z-index: 1;visibility: visible;}
	100% {z-index: 1;visibility: visible;}
}
@keyframes askBtn {
	100%		{margin-bottom:0}
}