@charset "UTF-8"; 

/****************************** FONT ******************************/
@font-face { font-family:Pretendard; font-weight:400; font-style:normal; src:url('../../font/Pretendard-Regular.woff2'); }
@font-face { font-family:Pretendard; font-weight:700; font-style:normal; src:url('../../font/Pretendard-Bold.woff2'); } /* 사용 */

@font-face { font-family:wotfard; font-weight:400; font-style:normal; src:url('../../font/wotfard-regular.woff2'); }
@font-face { font-family:wotfard; font-weight:700; font-style:normal; src:url('../../font/wotfard-bold.woff2'); }

@font-face { font-family:suit; font-weight:700; font-style:normal; src:url('../../font/suit-bold.woff2'); } /* 사용 */

/****************************** RESET ******************************/
html { -webkit-text-size-adjust: none; }
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, input, select, textarea, button, a, span, main, figcaption, figure, label, footer, header { margin:0; padding:0; box-sizing:border-box; -webkit-text-size-adjust: none;}
body, input, select, textarea, button, table { font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic','맑은 고딕', sans-serif; font-size:20px; font-weight:400; line-height:1.8; color:#000; word-break:keep-all; word-wrap:break-word; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-weight:inherit; font-size:inherit; }
fieldset { border:0; }
img { border:0; vertical-align:middle; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display:block; }
dl, ul, ol, menu, li { list-style:none; }
em, address { font-style:normal; }
a { color:inherit; text-decoration:none; }
a:hover, a:active, a:focus { text-decoration:none; }
input, select, textarea, button { vertical-align:middle; border-radius:0; -webkit-appearance:none; }
button { font-size:100%; font-weight:inherit; cursor:pointer; width:auto; overflow:visible; color:inherit; vertical-align:middle; background:transparent; border:none; box-sizing:border-box; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline:none; }
div:focus { outline:none; }
sup { line-height:1; font-size:0.7em; }
table { table-layout:fixed; border-spacing:0; width:100%; empty-cells:show; }
th, td { text-indent:0; word-break:keep-all; word-wrap:break-word; }
caption, legend { text-indent:-9999px; width:0; height:0; font-size:1px; line-height:0; border:0; white-space:nowrap; overflow:hidden; }
input[type='text'], input[type='password'] { box-sizing:border-box; -webkit-appearance:none; appearance:none; resize:none; box-shadow:none !important; outline:none; }
input:checked[type='checkbox'] { -webkit-appearance:checkbox; }
input[type='text']::-ms-clear, input[type='tel']::-ms-clear{ display:none; }
input[disabled], select[disabled], input[readonly], textarea[disabled], button[disabled] { cursor:default; }
input, textarea { -webkit-tap-highlight-color:rgba(0, 0, 0, 0) }
select { vertical-align:middle; -webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:0; outline:none; }
select::-ms-expand { display:none; }
::-webkit-input-placeholder { color:#707070 !important; font-weight:300 !important; }
::-moz-placeholder { color:#707070 !important; font-weight:300 !important; }
:-ms-input-placeholder { color:#707070 !important; font-weight:300 !important; }
select.placeholder { color:#707070 !important; font-weight:300 !important; }
textarea:focus, select:focus, button:focus, input[type='text']:focus, input[type='password']:focus, a:focus, span[contenteditable='true']:focus { outline:dotted 1px #aaa; }

/****************************** LAYOUT ******************************/
.header { position:absolute; top:0; left:0; min-width:1240px; width:100%; line-height:0; }
.header > h1 { position:absolute; left:50%; top:65px; margin-left:-620px;; }
.landing-link { position:sticky; top:64px; margin:-64px auto 0 auto; width:1240px; height:40px; display:flex; z-index:11; gap:16px;justify-content:flex-end; line-height:0; align-items:center; }
.landing-link a { border-radius:100%; overflow:hidden; }
.landing-link > * { display:inline-block; vertical-align:top; }
.tit-ico{ color:#fff; line-height:20px; font-size:16px; font-weight:bold; }
.landing-qr { position:absolute; left:0; top:986px; width:100%; min-width:1240px; }
.landing-qr.fix { position:sticky; top:auto; bottom:70px; z-index:10; }
.landing-qr img { position:absolute; left:50%; bottom:0; width:165px !important; margin-left:-643px; z-index:10; }

.container { min-width:1240px; margin:0 auto; }
.footer { background:#f8f9fa; height:166px; }
.footer .section-in { display:flex; height:100%; justify-content:space-between; align-items:center; }
.footer .corp-logo { width:151px; margin-top:-14px; }
.footer .corp-logo img { width:100%; }
.footer .corp-info { margin:4px 60px 0 auto; }
.footer .corp-info ul { display:flex; font-size:14px; line-height:18px; }
.footer .corp-info li + li::before { content:'|'; display:inline-block; font-size:14px; line-height:18px; font-weight:300; color:#b1b1b1; margin:0 14px 0 13px; }
.footer .corp-copyright  { font-size:12px; line-height:16px; font-weight:300; color:#b1b1b1; margin-top:12px; }
.footer .corp-link { position:relative; display:inline-block; font-size:16px; line-height:36px; border:solid 1px #000; border-radius:20px; height:38px; padding:0 40px 0 24px; }
.footer .corp-link::after { content:''; position:absolute; right:20px; top:13px; display:block; width:8px; height:8px; border:solid 1px #000; border-width:0 1px 1px 0; transform:rotate(-45deg) }

/****************************** SLIDER ******************************/
[class*="wrap-slider"] { position:relative; overflow:hidden; }
[class*="wrap-slider"] > [data-slider], [class*="wrap-slider"] > .slide-area { position:relative; display:flex; transition-property:transform; }
[class*="wrap-slider"] > [data-slider] > li, [class*="wrap-slider"] > .slide-area > li { position:relative; flex-shrink:0; transition-property:transform; }
[class*="wrap-slider"].swiper-fade > [data-slider] .slide, [class*="wrap-slider"].swiper-fade > .slide-area .slide { transition-property:opacity; }
[class*="wrap-slider"] .pagination-bullets { text-align:center; font-size:0; }
[class*="wrap-slider"] .pagination-bullets > button:only-child { display:none; }
[class*="wrap-slider"] .pagination-bullets > button { overflow:hidden; position:relative; width:1.6rem; height:1.6rem; color:transparent; margin:var(--spc4) 0 var(--spc1-m); }
[class*="wrap-slider"] .pagination-bullets > button:before { content:''; display:block; position:absolute; top:50%; left:50%; margin:var(--spc1-m); width:0.8rem; height:0.8rem; border-radius:50%; background-color:var(--brand-colorBE5); box-sizing:border-box; }
[class*="wrap-slider"] .pagination-nav { position:absolute; bottom:138px; left:128px; line-height:0; width:90px; height:32px; }
[class*="wrap-slider"] .pagination-nav > button { position:absolute; overflow:hidden; color:transparent; font-size:0; width:32px; height:32px; }
[class*="wrap-slider"] .pagination-nav > button:before { content:''; position:absolute; left:0; top:0; background:url("../../img/b/pc/btn-slide.png") 0 0 no-repeat; background-size:auto 32px; width:32px; height:32px;  }
[class*="wrap-slider"] .pagination-nav > button.ui-prev { left:0; }
[class*="wrap-slider"] .pagination-nav > button.ui-next { right:0; }
[class*="wrap-slider"] .pagination-nav > button.ui-next:before { background-position:right 0; }
[class*="wrap-slider"] .pagination-nav > button:disabled { opacity:0.5; }
[class*="wrap-slider"] .ui-start.active, [class*="wrap-slider"] .ui-stop.active { display:none; }
.swiper-backface-hidden .swiper-slide { transform:translateZ(0); -webkit-backface-visibility:hidden; backface-visibility:hidden; }

.section-in { position:relative; margin:0 auto; width:1240px; }
.landing img { width:100%; }
.landing .section1 { padding-top:168px; background:url("../../img/b/pc/landing-bg.png") no-repeat center bottom; background-size: cover; }
.landing .section1 .section-in { padding:124px 0 0 129px; height:920px; }
.landing .section1 .img { position:absolute; width:488px; bottom:0; right:124px; transform:translateX(50px); opacity:0; transition:all 800ms; }
.landing .section1.ui-ani-appear .img { transform:translateX(0); opacity:1; }
.landing .section1 .txt { width:520px; transform:translateX(50px); opacity:0; transition:all 400ms 600ms ease-out; }
.landing .section1 .txt2 { margin-top:32px; width:524px; transform:translateX(50px); opacity:0; transition:all 400ms 600ms ease-out; }
.landing .section1.ui-ani-appear .txt { transform:translateX(0); opacity:1; }
.landing .section1.ui-ani-appear .txt2 { transform:translateX(0); opacity:1; }

.landing .section2 { padding:206px 0 204px 0; background:#051b52; }
.landing .section2 .section-in { width:1092px; }
.landing .section2 .item { display:flex; justify-content:space-between; padding-left:52px; }
.landing .section2 .item + .item { margin-top:250px; }
.landing .section2 .item .img { width:472px; border-radius:32px; overflow:hidden; }
.landing .section2 .item .des { width:440px; margin-top:14px; }
.landing .section2 .item .txt { font-family:'suit'; font-size:40px; font-weight:700; line-height:60px; color:#fee90f; }
.landing .section2 .item .txt2 { font-size:20px; line-height:36px; color:#fff; margin-top:30px; }
.landing .section2 .item:nth-child(even) .img { order:1; }
.landing .section2 .item:nth-child(even) .img { order:1; margin-right:56px; }

.landing .section3 { padding-bottom:261px; background:#051b52; }
.landing .section3 .section-in { height:600px; border-radius:32px; overflow:hidden; }
.landing .section3 .item { position:relative; width:100%; height:600px; }
.landing .section3 .item .des { position:absolute; top:144px; left:128px; width:384px; transform:translateX(50px); opacity:0; transition:all 900ms 300ms; }
.landing .section3 .slide.active .des, .landing .section3 .slide.swiper-slide-duplicate-active .des { transform:translateX(0); opacity:1; }
.landing .section3 .item .txt { font-family:'suit'; font-size:40px; font-weight:700; line-height:60px; color:#fff; }
.landing .section3 .item .txt2 { font-size:20px; line-height:30px; color:#fff; margin-top:34px; }
.landing .section3 .item .img { position:absolute; opacity:0; transition:all 1000ms; }
.landing .section3 .slide.active .img, .landing .section3 .slide.swiper-slide-duplicate-active .img { opacity:1; }
.landing .section3 .item.ty1 { background:#f2edff; }
.landing .section3 .item.ty1 .img { width:1240px; bottom:0; right:0; }
.landing .section3 .item.ty2 { background:#f2ddff; }
.landing .section3 .item.ty2 .img { width:1240px; bottom:0; right:0; }

.landing .section4 { position:relative; margin:-60px 0; width:100%; height:1200px; border-radius:60px 60px 0 0; background:#09132e; overflow:hidden; }
.landing .section4 .section-in { position:relative; padding-top:0; height:100%; }
.landing .section4 .section-in::before { content:''; display:block; position:absolute; top:0; left:50%; width:1px; background:#3cff6b; }
.landing .section4 .txt1 { position:absolute; left:0; top:194px; font-family:'suit'; font-size:40px; font-weight:700; line-height:60px; color:#3cff6b; }
.landing .section4 .deco { display:flex; flex-direction:column; justify-content:end; align-items:center; position:absolute; top:230px; left:50%; border-radius:100%; transform:translateX(-50%); font-family:'suit'; font-size:24px; font-weight:500; line-height:32px; color:#3cff6b; border:solid 2px rgba(60,255,107,0.5); }
.landing .section4 .deco strong { font-family:wotfard; font-weight:700; }
.landing .section4 .deco.ty1 { width:210px; height:210px; background:rgba(60,255,107,0.12); justify-content:center; z-index:4;}
.landing .section4 .deco.ty2 { width:326px; height:326px; background:rgba(60,255,107,0.08); padding-bottom:30px; z-index:3; }
.landing .section4 .deco.ty3 { width:470px; height:470px; background:rgba(60,255,107,0.04); padding-bottom:40px; z-index:2; }
.landing .section4 .deco.ty4 { width:620px; height:620px; background:rgba(60,255,107,0.08); padding-bottom:45px; z-index:1; }
.landing .section4 .deco.ty5 { width:750px; height:750px; background:rgba(60,255,107,0); padding-bottom:30px; z-index:1; }
.landing .section4 .txt2 { position:absolute; text-align:center; z-index:5; left:50%; right:0; width:1920px; margin-left:-960px; top:583px; display:flex; gap:170px; justify-content:center; }
.landing .section4 .txt2 img { height:76px; width:auto; }
.landing .section4 .txt3 { position:absolute; right:-82px; top:280px; font-size:12px; line-height:1; color:#3cff6b; letter-spacing:6px; transform:rotate(-90deg); }
.landing .section4 .txt4 { position:absolute; right:-7px; bottom:290px; font-size:12px; line-height:24px; color:#3cff6b; letter-spacing:6px; text-align:right; }
.landing .section4 .section-in::before { height:0; transition:all 800ms; }
.landing .section4.ui-ani-appear .section-in::before { height:160px; }
.landing .section4 .txt1 { transform:translateY(100px); opacity:0; }
.landing .section4.ui-ani-appear .txt1 { transform:translateY(0); opacity:1; transition:all 800ms 1000ms; }
.landing .section4 .deco[class*="ty"] { opacity:0; }
.landing .section4.ui-ani-appear .deco[class*="ty"] { opacity:1; transition:all 800ms 1000ms; }
.landing .section4.ui-ani-appear .deco.ty2 { transition-delay:1400ms; }
.landing .section4.ui-ani-appear .deco.ty3 { transition-delay:1800ms; }
.landing .section4.ui-ani-appear .deco.ty4 { transition-delay:2200ms; }
.landing .section4.ui-ani-appear .deco.ty5 { transition-delay:2600ms; }
.landing .section4 .txt2 {  opacity:0; transition:all 800ms 3000ms; }
.landing .section4.ui-ani-appear .txt2 { opacity:1; gap:132px; }
.landing .section4 .txt3 { opacity:0; transition:all 800ms 2600ms; }
.landing .section4.ui-ani-appear .txt3 { opacity:1; }
.landing .section4 .txt4 { opacity:0; transition:all 800ms 2600ms; }
.landing .section4.ui-ani-appear .txt4 { opacity:1; }

.landing .section5 { position:relative; height:1050px; border-radius:60px 60px 0 0; overflow:hidden; background:#522e92; }
.landing .landing-deco { position:absolute; left:50%; top:50%; margin:-238px 0 0 620px; z-index:10; }
.landing .landing-deco img { width:12px; }
.landing .section5-slide { height:1050px; }
.landing .section5 .item { position:relative; width:100%; height:1050px; }
.landing .section5 .item .img { position:absolute; bottom:0; width:1240px; height:950px; }
.landing .section5 li { color:var(--brand-font); background:var(--brand-color); }
.landing .section5 li .item { width:1240px; margin:0 auto 0; }
.landing .section5 li .des { position:absolute; display:flex; flex-direction:column; top:217px; left:0; }
.landing .section5 li .txt { font-family:wotfard; font-size:100px; font-weight:700; line-height:120px; color:var(--brand-color2); }
.landing .section5 li .txt2 { order:-1; font-family:Pretendard; font-size:28px; font-weight:700; line-height:36px; }
.landing .section5 li .txt3 { margin-top:10px; color:var(--brand-color2); line-height:36px; font-size:28px; font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic','맑은 고딕', sans-serif; }
.landing .section5 li .txt4 { font-size:20px; line-height:36px; margin-top:52px; }
.landing .section5 .pagination-bullets {  display:flex; position:absolute; left:50%; margin-left:-620px; bottom:376px; counter-reset:bullets-num; background-color:transparent; }
.landing .section5 .pagination-bullets > button { display:flex; order:2; width:37px; overflow:hidden; height:auto; text-align:center; overflow:visible; color:var(--brand-font); white-space:nowrap; opacity:0.5; transition:all 300ms; }
.landing .section5 .pagination-bullets > button::before { content:counter(bullets-num, decimal-leading-zero); counter-increment:bullets-num; font-size:20px; line-height:24px; font-weight:400; position:static; display:inline-block; margin:0; width:auto; height:auto; overflow:visible; vertical-align:middle; }
.landing .section5 .pagination-bullets span { position:absolute; width:0; display:block; height:2px; left:32px; top:12px; z-index:2; font-size:0; vertical-align:middle; white-space:nowrap; color:transparent; background-color:var(--brand-font); overflow:hidden; }
.landing .section5 .pagination-bullets > button.active { opacity:1; font-weight:700; order:0; width:122px; }
.landing .section5 .pagination-bullets > button.active ~ button { order:1; }
.landing .section5 .pagination-bullets > button.active::before { font-weight:700; }
.landing .section5 .item .img { transform:translateX(50px); opacity:0; transition:all 500ms 300ms ease-out; }
.landing .section5 .slide.active .img, .landing .section5 .slide.swiper-slide-duplicate-active .img { transform:translateX(0); opacity:1; }
.landing .section5 .pagination-bullets > button.active span { width:78px; transition:all 300ms 50ms; }
.landing .section5 .brand-forme { --brand-color:#884738; --brand-font:#fff; --brand-color2:#3bf6fd; }
.landing .section5 .brand-flex { --brand-color:#000f81; --brand-font:#fff; --brand-color2:#a7ff00; }
.landing .section5 .brand-fam { --brand-color:#060091; --brand-font:#fff; --brand-color2:#ff6ccc; }
.landing .section5 .brand-crew { --brand-color:#8b0a65; --brand-font:#fff; --brand-color2:#3cff6b; }
.landing .section5 .brand-villain { --brand-color:#2a006c; --brand-font:#fff; --brand-color2:#ffff00; }
.landing .section5 .brand-hero { --brand-color:#002f79; --brand-font:#fff; --brand-color2:#fc7730; }
.landing .section5 .brand-drive { --brand-color:#0e104a; --brand-font:#fff; --brand-color2:#9effbc; }
.landing .section5 .brand-forme + .slide-control .pagination-bullets,
.landing .section5 .brand-hero + .slide-control .pagination-bullets { --color:#000; }
.landing .section5 .brand-forme ~ .landing-deco img, .landing .section5 .brand-hero ~ .landing-deco img { width:12px; }

[data-intro-ani="y"] { transform:translateY(100px); opacity:0; transition:all 600ms 300ms; }
[data-intro-ani="y"].ui-ani-appear { transform:translateY(0); opacity:1; }

/* 230629 수정, 추가 */
.footer { background:#f8f9fa; height:252px; }
.footer .section-in { display:flex; height:100%; justify-content:space-between; align-items:flex-start; padding-top:64px; }
.footer .corp-logo { width:151px; margin-top:0px; }
.footer .corp-info { margin:0 auto; }
.footer .policy{ margin:4px 0 38px 0; font-size:16px; color:#000; font-weight:bold; line-height:1; }
.footer .policy a{ margin-right:36px; }
.footer .corp-info ul li{ color:#868686; font-weight:400; }

/* 230803 추가 : 준법감시확인필 */
.landing .section5 li .compliance { position: absolute; bottom:60px; right:0; font-size:16px; color:#fff; }

/* 랜딩 타입2 (자동차보험) */
.sec-wrap { position:absolute; top:100px; left:50%; width:100%; max-width:1240px; transform:translateX(-50%); z-index:1; }
.logo-landing-slide { display:inline-block; vertical-align:top; }
.logo-landing-slide img { height:41px; vertical-align:top; }
.landing[data-type="new"] .section5 { border-radius:0; }
.landing[data-type="new"] .section5 li .txt4 { order:-1; margin-top:0; }
.landing[data-type="new"] .section5 li .txt3 { font-weight:bold; }
.landing[data-type="new"] .section5 li .txt2 { order:4; margin-top:60px; font-weight:normal; }
.qr-code-area { position:absolute; top:210px; right:50%; margin-right:-620px; width:200px; }
.qr-code-area .txt { display:block; margin-top:20px; color:#fff; line-height:32px; font-size:24px; text-align:center; }
.qr-code-area .txt span { display:block; line-height:26px; font-size:20px; }
.qr-code { display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; padding:8px; width:100%; height:200px; border-radius:32px; background:rgba(0,0,0,0.4); }
.qr-code:before, .qr-code:after, .qr-code-wrap:before, .qr-code-wrap:after { content:""; position:absolute; top:10px; left:10px; width:26px; height:26px; border-radius:22px 0 0 0; border-top:2px solid var(--brand-color2); border-left:2px solid var(--brand-color2); }
.qr-code:after { left:auto; right:10px; transform:rotate(90deg); }
.qr-code-wrap:before { top:auto; bottom:10px; transform:rotate(270deg); }
.qr-code-wrap:after { top:auto; bottom:10px; left:auto; right:0.6rem; transform:rotate(180deg); }
.qr-code-wrap { display:flex; flex-direction:column; justify-content:center; align-items:center; }
.qr-code img { width:140px; height:140px; vertical-align:top; }

/* 자동차 보험료 알아보기 */
.header > h1 { display:flex; align-items:center; top:70px; height:52px; }
.landing-link { position:absolute; top:70px; left:50%; margin:0; height:52px; transform:translateX(-50%); }
.landing-link .btn-link-car { position:relative; padding:2px; color:#fff; line-height:32px; font-size:16px; font-weight:bold; border-radius:26px; background:linear-gradient(to right, #fa7bff, #47f067 50%, #fab100); }
.landing-link .btn-link-car span { display:block; padding:8px 22px 8px 22px; border-radius:24px; background:rgba(0,0,0,0.8); }
.landing-link .btn-link-car span:before { content:""; display:inline-block; margin-right:8px; width:32px; height:32px; background:url("../../img/b/pc/btn-link-car.png") center no-repeat; background-size:100% auto; vertical-align:top; }