@charset "utf-8";

/* reset */
*{margin:0; padding:0;}
html, body{margin:0;padding:0;background-color:#fff; width:100%; height:100%; font-family:'Noto Sans KR',arial,sans-serif,'dotum'; font-weight:400}
hr{display:none;}
img,fieldset{border:0 none;}
dl,ul,ol,li{list-style:none;}
h1,h2,h3,h4,h5,dl,dt,dd,ul,li,ol,th,td,p,blockquote,form,fieldset,legend{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6 {font-weight:400; margin:0;}
table{border-collapse:collapse;}
a{text-decoration:none;color:#333;}
a:hover{text-decoration:none;color:#333;}
input,textarea{color:#333; font-size:13px;border:1px solid #dfdfdf;vertical-align:middle;font-family:'Noto Sans KR',arial,sans-serif,'dotum'; }
input[type=text]{border:1px solid #dfdfdf; font-size:13px}
input[type=checkbox]{border:none !important}
input[type=radio]{border:none !important}
select{background:#fff;color:#333; font-size:13px;vertical-align:middle;font-family:'Noto Sans KR',arial,sans-serif,'dotum'; border:1px solid #dfdfdf;}
body,th,td{font-size:13px; color:#333;letter-spacing:-0.5px}
em{font-style:normal}
caption{ display:none;}
table {border-spacing:0; border-collapse: separate;}
input {color:#555; overflow:visible; vertical-align:middle; padding:3px}
input[type=text]{border:1px solid #d7d7d7; background:#f6f6f6}
input[type=checkbox]{border:none !important}
select,label {padding:2px; margin:0 ;vertical-align:middle;}
em,address {font-style:normal;}
textarea {vertical-align:top;margin:0;padding:0; border:1px solid #d7d7d7;}
article,aside,canvas,details,figcaption,figure, footer,header,hgroup,menu,nav,section,summary {display:block;}
option{padding:0}
.pd_none{padding:0 !important;}

/* font */
@font-face { 
    font-family: 'Noto Sans KR'; 
    font-style: normal; 
    font-weight: 100; 
    src: url(../fonts/noto/NotoSansKR-Thin.woff2) format('woff2'),
         url(../fonts/noto/NotoSansKR-Thin.woff) format('woff'),
         url(../fonts/noto/NotoSansKR-Thin.otf) format('opentype');
} 
@font-face { 
    font-family: 'Noto Sans KR'; 
    font-style: normal; 
    font-weight: 300; 
    src: url(../fonts/noto/NotoSansKR-Light.woff2) format('woff2'),
         url(../fonts/noto/NotoSansKR-Light.woff) format('woff'),
         url(../fonts/noto/NotoSansKR-Light.otf) format('opentype');
}
@font-face{
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/noto/NotoSansKR-Regular.woff2) format('woff2'),
         url(../fonts/noto/NotoSansKR-Regular.woff) format('woff'),
         url(../fonts/noto/NotoSansKR-Regular.otf) format('opentype');
}
@font-face{
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 500;
    src: url(../fonts/noto/NotoSansKR-Medium.woff2) format('woff2'),
         url(../fonts/noto/NotoSansKR-Medium.woff) format('woff'),
         url(../fonts/noto/NotoSansKR-Medium.otf) format('opentype');
}
@font-face{
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/noto/NotoSansKR-Bold.woff2) format('woff2'),
         url(../fonts/noto/NotoSansKR-Bold.woff) format('woff'),
         url(../fonts/noto/NotoSansKR-Bold.otf) format('opentype');
}
@font-face{
    font-family: 'ONEMobile-Title';
    font-style: normal;
    font-weight: normal;
    src: url(../fonts/ONEMobile-Title/ONE-Mobile-Title.woff2) format('woff2'),
         url(../fonts/ONEMobile-Title/ONE-Mobile-Title.woff) format('woff'),
         url(../fonts/ONEMobile-Title/ONE-Mobile-Title.otf) format('opentype');
}

/* 공통 */
body        { overflow: visible;}
#wrap       {position:relative; width:100%; min-width: 320px;}
main        { width:100%;}
.inner      { position: relative; max-width: 720px; padding: 0 16px; margin: 0 auto; box-sizing: border-box;}
.commonbg              { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); transition: 1s;}

/* header */
header         { display: block; position: absolute; top: 0; z-index: 1; width: 100%; border-bottom: 1px solid rgba(255,255,255,0.4);}
header h1      { font-size: 0; text-align: center;}
header h1 img  { height: 50px;}
header a       { display: inline-block;}

/* visual */
#visual               { display: block; position: relative; height: 485px;  background-color: #7ea3b8;}
#visual .visual_inner { position: relative; max-width: 610px; height: 100%; margin:0 auto; background: url(//img.adinsu.co.kr/adinsu/insu-directcar/mo/gate/bg1.png) no-repeat center; background-size: cover;}
#visual .visual_cont  { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 250px; margin-top: -55px; text-align: center;}
#visual .visual_tit   { line-height: 53px; font-size: 45px; font-weight: 300; color: #fff; text-shadow: 0 0 7px rgba(0,0,0,0.2);}
#visual .visual_txt   { line-height: 22px; margin-top: 10px; font-size: 14px; font-weight: 400; color: #Fff; text-shadow: 0 0 7px rgba(0,0,0,0.2);}

/* mid */
.mid .inner { margin: 60px auto 40px; font-size: 0;}
.mid .cont h2           { margin-bottom: 40px; font-family: 'ONEMobile-Title'; font-size: 25px; text-align: center; color: #333;}
.mid .cont ul           { display: block; width: 100%; font-size:0;}
.mid .cont ul li        { display: inline-block; position: relative; width: 100%; text-align: center; transition: .35s; vertical-align: top; cursor: pointer;}
.mid .cont ul li+li     { margin-top: 25px;}
.mid .cont .thum                { display: inline-block; position: relative; width: calc(100% - 75px); height: 60px; margin-right: 10px; background-color: #f7f7f7; border-radius: 20px; vertical-align: top;}
.mid .cont .thum .thum_sub      { display: block; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 160px; line-height: 20px; border-radius: 20px; background-color: #00c3e0; font-family: 'ONEMobile-Title'; font-size: 10px; color: #fffefb; letter-spacing: 0;}
.mid .cont .thum .thum_sub span { color: #fffc00;}
.mid .cont .thum > img          { max-height: 30px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.mid .cont .btn_wrap            { display: inline-block; width: 65px; margin: 0 auto; font-size: 0;}
.mid .cont .btn_wrap a          { display: inline-block; position: relative; width: 65px; line-height: 1.2; padding: 10px 0; border-radius: 20px; font-family: 'ONEMobile-Title'; font-size: 15px; box-sizing: border-box;}
.mid .cont .btn_wrap .btn_calcul{ z-index: 1; border: 1px solid transparent; background-color: #555; color: #fff; box-shadow: 0 5px 24px rgba(0,0,0,0.3); transition: .35s;}
.mid .cont .item_crf .btn_wrap .btn_calcul:hover { background-color: #f05014;}
.mid .cont .item_lif .btn_wrap .btn_calcul:hover { background-color: #efa100;}
.mid .cont .item_dbf .btn_wrap .btn_calcul:hover { background-color: #21a861;}
.mid .cont .item_axf .btn_wrap .btn_calcul:hover { background-color: #133382;}
.mid .cont .item_hdf .btn_wrap .btn_calcul:hover { background-color: #ff8400;}
.mid .cont .item_mzf .btn_wrap .btn_calcul:hover { background-color: #ee3722;}
.mid .cont .item_hkf .btn_wrap .btn_calcul:hover { background-color: #e9158b;}
.mid .cont .item_hhf .btn_wrap .btn_calcul:hover { background-color: #ff8400;}
.mid .cont .item_hnf .btn_wrap .btn_calcul:hover { background-color: #00908f;}
.mid .detail      { margin-top: 40px; text-align: center;}
.mid .detail span { display: block; line-height: 1.538; padding-top: 30px; background: url(//img.adinsu.co.kr/adinsu/insu-directcar/mo/gate/icon_detail1.png) no-repeat top center; font-family: 'ONEMobile-Title'; font-size: 13px; color: #82a6ab;}
    /* .mid .cont .btn_wrap a+a             { margin-left: 5px;} */
    /* .mid .cont .btn_wrap .btn_benefit    { z-index: 2; border: 1px solid #555; color: #333; background-color: #fff;} */

/* noti */
.noti            { padding: 35px 0; background-color: #f7f7f7;}
.noti li         { position: relative; line-height: 1.538; padding-left: 10px; font-weight: 500;}
.noti li+li      { margin-top: 13px;}
.noti li::before { content: ''; position: absolute; top: 8px; left: 0; width: 3px; height: 3px; background-color: #00c3e0; border-radius: 4px;}
.noti .noti_dlbrt::before { display: none;}

/* footer */
.footer_v1              { padding: 40px 0; background-color:#333; text-align: center;}
.footer_v1 *            { line-height: 17px; font-size: 12px; color: #999;}
.footer_v1 .footer_logo { display: block; line-height: 22px; font-size: 14px; font-weight: 700; color: #bbb;}
.footer_v1 .footer_num  { margin: 2px 0 12px; font-weight: 500;}
.footer_v1 .footer_bar  { line-height: 16px; padding: 0 8px; font-size: 10px; vertical-align: top;}




/* ================================= layerpopup ================================= */
.layer_popup {
    display: none; position:fixed; top:50%; left: 50%; transform: translate(-50%,-50%); z-index:999;
    width: 100%; max-width: 500px; min-width: 320px; background-color:#fff; box-shadow: 0 0 15px rgba(0,0,0,0.3);
}
.layer_popup.is_active  { display: block;}
.layer_container        { position: relative; height: 100%;}
.layer_area             { height: 100%;}

/* partner_head */
.partner_head                               { position: relative; padding: 40px 16px 35px; background-color: #f7f7f7; text-align: center;}
.partner_head .partner_logo                 { display: block; font-size: 0;}
.partner_head .partner_logo img             { height: 28px;}
.partner_head .partner_text                 { display: block;}
.partner_head .partner_text .partner_name   { display: block; margin: 10px 0 30px; font-size: 12px; color: #555;}
.partner_head .partner_text .partner_title  { display: block; line-height: 1.277; font-size: 18px; font-weight: 500;}
.partner_head .partner_btn                  { position: absolute; bottom: 0; right: 0;}
.partner_head .partner_btn a                { display: block;}
.partner_head .partner_btn .btn_calc        {
    display: inline-block; width: 180px; height: 45px; line-height: 45px; background: #000; border-radius: 25px;
    font-family: 'ONEMobile-Title'; font-size: 20px; font-weight: 400; color: #fff; text-align: center; box-shadow: 5px 7px 10px rgba(0,0,0,0.2);
}
.partner_head.partner_crf .partner_text .partner_title   { color: #f05014;}
.partner_head.partner_crf .partner_btn .btn_calc         { background-color: #f05014;}
.partner_head.partner_lif .partner_text .partner_title   { color: #efa100;}
.partner_head.partner_lif .partner_btn .btn_calc         { background-color: #efa100;}
.partner_head.partner_dbf .partner_text .partner_title   { color: #21a861;}
.partner_head.partner_dbf .partner_btn .btn_calc         { background-color: #21a861;}
.partner_head.partner_axf .partner_text .partner_title   { color: #133382;}
.partner_head.partner_axf .partner_btn .btn_calc         { background-color: #133382;}
.partner_head.partner_hdf .partner_text .partner_title   { color: #ff8400;}
.partner_head.partner_hdf .partner_btn .btn_calc         { background-color: #ff8400;}
.partner_head.partner_mzf .partner_text .partner_title   { color: #ee3722;}
.partner_head.partner_mzf .partner_btn .btn_calc         { background-color: #ee3722;}
.partner_head.partner_hkf .partner_text .partner_title   { color: #e9158b;}
.partner_head.partner_hkf .partner_btn .btn_calc         { background-color: #e9158b;}
.partner_head.partner_hhf .partner_text .partner_title   { color: #ff8400;}
.partner_head.partner_hhf .partner_btn .btn_calc         { background-color: #ff8400;}
.partner_head.partner_hnf .partner_text .partner_title   { color: #00908f;}
.partner_head.partner_hnf .partner_btn .btn_calc         { background-color: #00908f;}

/* partner_body */
.partner_body                      { overflow-y: scroll; overflow: auto; height: auto; max-height: calc(100vh - 230px); padding: 30px 16px; box-sizing: border-box;}
.partner_body .info_List p         { display: block; position: relative; line-height: 1.642; padding-left: 13px; font-size: 14px; color: #333; letter-spacing: -0.5px;}
.partner_body .info_List p::before { content: ''; position: absolute; left: 2px; top: 10px; width: 4px; height: 4px; border-radius: 2px; background-color: #999;}
.partner_body .info_List p .text01 { color: #0063c9;}
.partner_body .info_List p .text02 { color: #0063c9; font-weight: 700;}
.partner_body .info_auth           { margin-top: 20px; font-size: 12px; color:#999;}

/* layer_close_area */
.layer_close_area               { position: absolute; top: 15px; right: 15px;}
.layer_close                    { display: block; width: 25px; height: 25px; cursor: pointer;}  
.layer_close span               { display: block; position: absolute; left: 0; transform: rotate(0deg); height: 2px; width: 100%; background: #999;}
.layer_close span:nth-child(1)  { top: 9px; transform: rotate(45deg);}
.layer_close span:nth-child(2)  { top: 9px; transform: rotate(-45deg);}

@media screen and (max-width: 720px) {
    .layer_popup    { top: 0; transform: translate(-50%, 0); max-width: 720px; height: 100%;}
    .partner_body   { height: 100%;}
}