@charset "UTF-8"; /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ /* 입력폼 */ .import_form {font-size: 1rem;} .import_form[data-form-action=false] input::placeholder {color: #f00;} .import_form[data-form-action=false] input::-webkit-input-placeholder {color: #f00;} .import_form[data-form-action=false] input:-ms-input-placeholder {color: #f00;} .import_form[data-form-action=false] input:-moz-input-placeholder {color: #f00;} .import_form[data-form-action=true] input::placeholder {color: transparent;} .import_form[data-form-action=true] input::-webkit-input-placeholder {color: transparent;} .import_form[data-form-action=true] input:-ms-input-placeholder {color: transparent;} .import_form[data-form-action=true] input:-moz-input-placeholder {color: transparent;} .import_form .ico_ckeck {display: none;} .import_form input, .import_form label {width: 100%; height: 100%;} .import_form .label_css {background-color: #fff;} .import_form label input {width: 100%; text-indent: 10px;} .import_form[data-focus-action=true] label input {padding-top: 10px;} .import_form .select_wrap {position: relative;} .import_form .select_wrap i {position: absolute; top: 57%; right: 20px; margin: -8px; width: 16px; height: 16px; background-size: contain; pointer-events: none;} .import_form select {padding-left: 20%; width: 100%; height: 100%; color: inherit; font-size: 1em;} .import_form select option {color: #000;} .import_form button {width: 100%; height: 100%; background-color: #fff; border-width: 1px; white-space: nowrap;} .import_form .formRow:not([data-complete=true]) .button_css {background-color: #fff;} .import_form .formRow[data-complete=true] .button_css {color: #fff; background-color: #0b00b5;} .import_form .submit {color: #fff; background-color: #0b00b5; width: 100%;} .import_form .formRow {float: left; clear: both; position: relative; width: 100%;} .import_form .formRow {height: 44px;} .import_form .formRow .checkWrap {display: none; width: 100%; height: 44px;} .import_form .formRow>* {float: left;} .import_form .formRow+.formRow {margin-top: 10px;} .import_form .formRow .button_wrap {padding-left: 10px; width: 20%; height: 100%;} .import_form [data-type=region] {} .import_form [data-type=region] .select_wrap { width: 100%; height: 100%;} .import_form [data-type=region] .select_css {padding-left: 10px; background-color: #fff;} .import_form [data-type=regionDetail] {} .import_form [data-type=regionDetail] .select_wrap { width: 100%; height: 100%;} .import_form [data-type=regionDetail] .select_css {padding-left: 10px; background-color: #fff;} .import_form [data-type=name] {} .import_form [data-type=gender] {} .import_form [data-type=gender] label {float: left; width: 50%;} .import_form [data-type=gender] label em {display: block; position: relative; width: 100%; height: 100%; text-align: center; background-color: #fff;} .import_form [data-type=gender] label em::before {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap;} .import_form [data-type=gender] label:nth-child(1) em::before {content: "남자";} .import_form [data-type=gender] label:nth-child(2) em::before {content: "여자";} .import_form [data-type=gender] label :checked~em {color: #fff; background-color: #0b00b5;} .import_form [data-type=registNumber] i {float: left; width: 30%; height: 100%;} .import_form [data-type=registNumber] label {float: left; width: 70%;} .import_form [data-type=registNumber] label input {} .import_form [data-type=phone] .select_wrap {position: relative; padding-right: 10px; width: 20%; height: 100%; background-clip: content-box;} .import_form [data-type=phone] .select_wrap i {position: absolute; top: 57%; left: 70%; margin: -8px; width: 16px; height: 16px; background-size: contain; pointer-events: none;} .import_form [data-type=phone] label {width: 100%;} .import_form [data-type=phone] .select_wrap+label {width: 80%;} .import_form [data-type=phone] .button_wrap {display: none;} .import_form [data-type=check] {display: none;} .import_form [data-type=check] label {float: left; width: 80%;} .import_form [data-type=check] .button_wrap {float: left; width: 20%;} .import_form [data-type=passed] {display: none; height: auto;} .import_form[data-check=true][data-passed=true] [data-type=passed] {display: block;} .import_form [data-type=passed] .passedMessage {display: none; color: #13890a; line-height: 1.8;} .import_form[data-passed=true] [data-type=passed] .passedMessage {display: block;} .import_form [data-type=agree] {height: auto; font-size: 0.9em;} .import_form [data-type=agree] .agreement {float: left; width: auto;} .import_form [data-type=agree] .agreement span {float: left;} .import_form [data-type=agree] .agreement span::before {content: "개인정보수집 및 이용동의"; float: right; line-height: 26px; letter-spacing:-0.05em} .import_form [data-type=agree] .agreement span .ico_ckeck:nth-child(1) {float: left; display: block; position: relative; margin: 1px 10px 1px 0px; width: 24px; height: 24px; border: 1px solid #ddd; background-color: #ddd; background-clip: content-box; background-size: 100% 100%;} .import_form [data-type=agree] .agreement :checked~span .ico_ckeck:nth-child(1) {float: left; background-color: #f00;} .import_form [data-type=agree] .agreeText {float: right; width: 40px; line-height: 24px; background-color: #fff; cursor: pointer; border: 1px solid #ddd;} .import_form [data-type=agree] .agreeText::before {content: "보기"; display: block; width: 100%; height: 100%; color: #000; font-size: inherit; text-align: center; line-height: inherit;} .import_form [data-complete=true]~[data-type=agree][data-complete=false] .agreement span .ico_ckeck:nth-child(1) {animation: blinkAgree 0.4s infinite alternate;} .import_form [data-complete=true]~[data-type=agree][data-complete=true] .agreement span .ico_ckeck:nth-child(1), .import_form [data-complete=false]~[data-type=agree][data-complete=false] .agreement span .ico_ckeck:nth-child(1), .import_form [data-complete=false]~[data-type=agree][data-complete=true] .agreement span .ico_ckeck:nth-child(1) {animation: none;} /* .import_form .submit_wrap {position: relative;} .import_form .submit_wrap::before {content: "";} .import_form .submit_wrap::after {content: "";} */ .import_form .submit {margin-top: 10px; height: 44px;} .import_form[data-calc=true] .submit::before {content: "보험료 계산";} .import_form[data-calc=false] .submit::before {content: "무료 상담 신청";} /* data-check = true */ .import_form[data-check=true] [data-type=phone] .button_wrap {display: block;} .import_form[data-check=true] [data-type=phone] .select_wrap {width: 20%;} .import_form[data-check=true] [data-type=phone] .select_wrap+label {width: 60%;} .import_form[data-check=true] [data-type=phone] label {width: 80%;} /* data-focus-action = true */ .import_form[data-focus-action=true] {} .import_form[data-focus-action=true] label {position: relative;} .import_form[data-focus-action=true] label::before, .import_form[data-focus-action=true] label::after {position: absolute; z-index: 1; left: 10px; opacity: 1; pointer-events: none; color: #ddd; line-height: 1; transition: all 0.4s, opacity 0s;} .import_form[data-focus-action=true] label::before {} .import_form[data-focus-action=true] label::after {} .import_form[data-focus-action=true] label:not(.active)::before, .import_form[data-focus-action=true] label:not(.active)::after {top: 50%; transform: translateY(-50%); font-size: 1em;} /* .import_form[data-focus-action=true] label.active::before, .import_form[data-focus-action=true] label.active::after {top: 3px; transform: translateY(0); font-size: 0.6em;} .import_form[data-focus-action=true] label:not(.active)::after, .import_form[data-focus-action=true] label.active::before {opacity: 0;} .import_form[data-focus-action=true] label:not(.active)::before, .import_form[data-focus-action=true] label.active::after {opacity: 0.5;} */ .import_form[data-focus-action=true] [data-type=name] label::before {content: "이름을 입력하세요";} .import_form[data-focus-action=true] [data-type=name] label::after {content: "이름";} .import_form[data-focus-action=true] [data-type=birth] label::before {content: "생년월일을 입력하세요 (예 : 19850101)";} .import_form[data-focus-action=true] [data-type=birth] label::after {content: "생년월일 (예 : 19850101)";} .import_form[data-focus-action=true] [data-type=phone] label::before {content: "휴대폰번호를 입력하세요";} .import_form[data-focus-action=true] [data-type=phone] label::after {content: "휴대폰번호";} .import_form[data-focus-action=true] [data-type=check] label::before {content: "인증번호를 입력하세요";} .import_form[data-focus-action=true] [data-type=check] label::after {content: "인증번호";} /* data-target-device = mo */ [data-target-device=mo] .import_form {font-size: 3.8vw;} [data-target-device=mo] .import_form .submit {margin-top: 3vw; height: 12vw;} [data-target-device=mo] .import_form .formRow {height: 12vw;} [data-target-device=mo] .import_form .formRow+.formRow {margin-top: 2vw;} [data-target-device=mo] .import_form .formRow .button_wrap {padding-left: 2vw;} [data-target-device=mo] .import_form .formRow label input {text-indent: 3vw;} [data-target-device=mo] .import_form[data-focus-action=true] .formRow label input {padding-top: 1vw;} [data-target-device=mo] .import_form [data-type=phone] .select_wrap {padding-right: 2vw; width: 25%;} [data-target-device=mo] .import_form [data-type=phone] .select_wrap+label {width: 75%;} [data-target-device=mo] .import_form[data-check=true] [data-type=phone] .select_wrap+label {width: 55%;} [data-target-device=mo] .import_form [data-type=phone] .select_wrap i {margin: -1.5vw; width: 3vw; height: 3vw;} [data-target-device=mo] .import_form [data-type=gender] label:nth-child(1) em::before {content: "남";} [data-target-device=mo] .import_form [data-type=gender] label:nth-child(2) em::before {content: "여";} [data-target-device=mo] .import_form [data-type=agree] {height: auto;} [data-target-device=mo] .import_form [data-type=agree][data-complete=false] .agreement span {background: #bbb;} [data-target-device=mo] .import_form [data-type=agree] .agreement {float: right;} [data-target-device=mo] .import_form [data-type=agree] .agreement span {overflow: hidden; float: left; position: relative; width: 14vw; height: 6vw; color: #fff; border-radius: 10vw; border: 0.4vw solid #bbb;} [data-target-device=mo] .import_form [data-type=agree] .agreement :not(:checked)~span {background-color: #bbb;} [data-target-device=mo] .import_form [data-type=agree][data-complete=false] .agreement :not(:checked)~span {animation: blinkAgree 0.4s infinite alternate;} [data-target-device=mo] .import_form [data-type=agree] .agreement span::before {line-height: 5.2vw; padding-left: 4vw; width: 100%; text-align: center;} [data-target-device=mo] .import_form [data-type=agree] .agreement span .ico_ckeck:nth-child(1) {margin: 0.2vw 2vw 0.2vw 0; width: 5vw; height: 5vw;} [data-target-device=mo] .import_form [data-type=agree] .agreement span .ico_ckeck:nth-child(1) {display: none;} [data-target-device=mo] .import_form [data-type=agree] .agreement span .ico_ckeck+.ico_ckeck {position: absolute; top: 50%; left: 1.7vw; margin-top: -2vw; width: 4vw; height: 4vw; background-size: contain;} [data-target-device=mo] .import_form [data-type=agree] .agreement :not(:checked)~span .ico_ckeck:nth-child(2) {display: block;} [data-target-device=mo] .import_form [data-type=agree] .agreement :checked~span .ico_ckeck:nth-child(3) {display: block;} [data-target-device=mo] .import_form [data-type=agree] .agreement span::before {content: '동의';} [data-target-device=mo] .import_form [data-type=agree] .agreement :checked~span {background-color: #0b00b5;} [data-target-device=mo] .import_form [data-type=agree] .agreeText {float: left; position: relative; width: auto; height: 5.4vw; background-color: transparent; border: 0;} [data-target-device=mo] .import_form [data-type=agree] .agreeText::before {content: "개인정보수집 및 이용동의"; width: auto; line-height: 6vw; white-space: nowrap;} [data-target-device=mo] .import_form [data-type=agree] .agreeText i {position: absolute; top: 58%; left: 100%; margin-top: -1.4vw; width: 2.8vw; height: 2.8vw; background-size: contain;} [data-target-device=mo] .import_form [data-type=agree] .agreement span::after {content: none;} [data-target-device=mo] .import_form [data-type=passed] {height: auto;} [data-target-device=mo] .import_form [data-type=agree][data-complete=true] .agreement span {border-width : 0;} [data-target-device=mo] .import_form [data-type=agree][data-complete=true] .agreement span::before {line-height: 6vw;} [data-target-device=mo] .import_form [data-complete=true]~.formRow.formAgree[data-complete=false] .agreement span {animation: blinkAgree 0.4s infinite alternate;} [data-target-device=mo] .import_form [data-complete=true]~.formRow.formAgree[data-complete=true] .agreement span, [data-target-device=mo] .import_form [data-complete=false]~.formRow.formAgree[data-complete=false] .agreement span, [data-target-device=mo] .import_form [data-complete=false]~.formRow.formAgree[data-complete=true] .agreement span {animation: none;} /* data-target-device = mo */ [data-target-device=mo]~* .import_form {font-size: 3.8vw;} [data-target-device=mo]~* .import_form .submit {margin-top: 3vw; height: 12vw;} [data-target-device=mo]~* .import_form .formRow {height: 12vw;} [data-target-device=mo]~* .import_form .formRow+.formRow {margin-top: 2vw;} [data-target-device=mo]~* .import_form .formRow .button_wrap {padding-left: 2vw;} [data-target-device=mo]~* .import_form .formRow label input {text-indent: 3vw;} [data-target-device=mo]~* .import_form [data-type=phone] .select_wrap {padding-right: 2vw; width: 25%;} [data-target-device=mo]~* .import_form [data-type=phone] .select_wrap+label {width: 75%;} [data-target-device=mo]~* .import_form[data-check=true] [data-type=phone] .select_wrap+label {width: 55%;} [data-target-device=mo]~* .import_form [data-type=phone] .select_wrap i {margin: -1.5vw; width: 3vw; height: 3vw;} [data-target-device=mo]~* .import_form [data-type=gender] label:nth-child(1) em::before {content: "남";} [data-target-device=mo]~* .import_form [data-type=gender] label:nth-child(2) em::before {content: "여";} [data-target-device=mo]~* .import_form [data-type=agree] {height: auto;} [data-target-device=mo]~* .import_form [data-type=agree] .agreement {float: right;} [data-target-device=mo]~* .import_form [data-type=agree] .agreement span {overflow: hidden; float: left; position: relative; width: 14vw; height: 6vw; color: #fff; border-radius: 10vw; border: 0.4vw solid #bbb;} [data-target-device=mo]~* .import_form [data-type=agree] .agreement :not(:checked)~span {background: #bbb;} [data-target-device=mo]~* .import_form [data-type=agree] .agreement span::before {line-height: 5.2vw; padding-left: 4vw; width: 100%; text-align: center;} [data-target-device=mo]~* .import_form [data-type=agree] .agreement span .ico_ckeck:nth-child(1) {margin: 0.2vw 2vw 0.2vw 0; width: 5vw; height: 5vw;} [data-target-device=mo]~* .import_form [data-type=agree] .agreement span .ico_ckeck:nth-child(1) {display: none;} [data-target-device=mo]~* .import_form [data-type=agree] .agreement span .ico_ckeck+.ico_ckeck {position: absolute; top: 50%; left: 1.7vw; margin-top: -2vw; width: 4vw; height: 4vw; background-size: contain;} [data-target-device=mo]~* .import_form [data-type=agree] .agreement :not(:checked)~span .ico_ckeck:nth-child(2) {display: block;} [data-target-device=mo]~* .import_form [data-type=agree] .agreement :checked~span .ico_ckeck:nth-child(3) {display: block;} [data-target-device=mo]~* .import_form [data-type=agree] .agreement span::before {content: '동의';} [data-target-device=mo]~* .import_form [data-type=agree] .agreement :checked~span {background-color: #0b00b5;} [data-target-device=mo]~* .import_form [data-type=agree] .agreeText {float: left; position: relative; width: auto; height: 5.4vw; background-color: transparent; border: 0;} [data-target-device=mo]~* .import_form [data-type=agree] .agreeText::before {content: "개인정보수집 및 이용동의"; width: auto; line-height: 6vw; white-space: nowrap;} [data-target-device=mo]~* .import_form [data-type=agree] .agreeText i {position: absolute; top: 58%; left: 100%; margin-top: -1.4vw; width: 2.8vw; height: 2.8vw; background-size: contain;} [data-target-device=mo]~* .import_form [data-type=agree] .agreement span::after {content: none;} [data-target-device=mo]~* .import_form [data-type=passed] {height: auto;} [data-target-device=mo]~* .import_form [data-type=agree][data-complete=true] .agreement span {border-width : 0;} [data-target-device=mo]~* .import_form [data-type=agree][data-complete=true] .agreement span::before {line-height: 6vw;} [data-target-device=mo]~* .import_form [data-complete=true]~.formRow.formAgree[data-complete=false] .agreement span {animation: blinkAgree 0.4s infinite alternate;} [data-target-device=mo]~* .import_form [data-complete=true]~.formRow.formAgree[data-complete=true] .agreement span, [data-target-device=mo]~* .import_form [data-complete=false]~.formRow.formAgree[data-complete=false] .agreement span, [data-target-device=mo]~* .import_form [data-complete=false]~.formRow.formAgree[data-complete=true] .agreement span {animation: none;} /*:not([data-size="0"]) */ [data-focus-action=true] .formRow label {position: relative; padding-top: 0; transition: padding-top 0.4s;} [data-focus-action=true] .formRow label.select_wrap::before, [data-focus-action=true] .formRow label.select_wrap::after {content: none !important;} /* [data-focus-action=true] .formRow.focused label:not(.btnGender):not(.select_wrap), [data-focus-action=true] .formRow:not([data-size="0"]) label:not(.btnGender):not(.select_wrap) {padding-top: 20px;} */ [data-focus-action=true] .formRow label input::placeholder {color: transparent !important; opacity: 0 !important;} [data-focus-action=true] .formRow label input::-webkit-input-placeholder {color: transparent !important; opacity: 0 !important;} [data-focus-action=true] .formRow label input:-ms-input-placeholder {color: transparent !important; opacity: 0 !important;} [data-focus-action=true] .formRow label input:-moz-input-placeholder {color: transparent !important; opacity: 0 !important;} [data-focus-action=true] .formRow label::before, [data-focus-action=true] .formRow label::after {position: absolute; left: 10px; top: 50%; color: inherit; transform: translateY(-50%); transition: top 0.4s, opacity 0s;} [data-focus-action=true][data-icon=true] .formRow label::before, [data-focus-action=true][data-icon=true] .formRow label::after {left: 43px;} [data-focus-action=true] .formRow label::before {opacity: 0.6;} [data-focus-action=true] .formRow label::after {opacity: 0;} [data-focus-action=true] .formRow.focused[data-size="0"] label::before, [data-focus-action=true] .formRow.focused[data-size="0"] label::after, [data-focus-action=true] .formRow:not([data-size="0"]) label::before, [data-focus-action=true] .formRow:not([data-size="0"]) label::after {top: 10%; font-size: 0.75em; transform: translateY(0);} [data-focus-action=true] .formRow.focused label::before, [data-focus-action=true] .formRow:not([data-size="0"]) label::before {opacity: 0;} [data-focus-action=true] .formRow.focused label::after, [data-focus-action=true] .formRow:not([data-size="0"]) label::after {opacity: 0.6;} [data-focus-action=true] [data-type=name] label::before {content: "이름을 입력하세요";} [data-focus-action=true] [data-type=name] label::after {content: "이름";} [data-focus-action=true] [data-type=birth] label::before {content: "생년월일을 입력하세요 (예 : 19850101)";} [data-focus-action=true] [data-type=birth] label::after {content: "생년월일 (예 : 19850101)";} [data-focus-action=true] [data-type=phone] label::before {content: "핸드폰번호를 입력하세요";} [data-focus-action=true] [data-type=phone] label::after {content: "핸드폰번호 (숫자 7~8자리)";} [data-focus-action=true] [data-type=check] label::before {content: "인증번호를 입력하세요";} [data-focus-action=true] [data-type=check] label::after {content: "인증번호";} [data-target-device=mo][data-focus-action=true] .formRow:not(.btnGender):not(.select_wrap):not([data-size="0"]) label {padding-top: 4vw;} [data-target-device=mo][data-focus-action=true] .formRow label::before, [data-target-device=mo][data-focus-action=true] .formRow label::after {left: 0;} /* data-icon = true */ [data-icon=true] .formRow label .form_icon {position: absolute; top: 50%; left: 10px; margin-top: -12px; width: 24px; height: 24px; background-color: #bbb; background-size: 100% 100%;} [data-icon=true] .formRow.focused label .form_icon, [data-icon=true] .formRow:not([data-size="0"]) label .form_icon {background-color: #000;} [data-icon=true] .formName label, [data-icon=true] .formBirth label, [data-icon=true] .formPhone label+label, [data-icon=true] .formCheck label {position: relative; padding-left: 33px;} @keyframes blinkAgree { 0% {color: #666; background-color: #ddd;} 100% {color: #fff; background-color: #666;} } /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ .import_form[data-imported=form_02] .formBirth {clear: none; width: 45%;} .import_form[data-imported=form_02] .formRegistNumber {clear: none; padding-left: 10vw; width: 55%;} .import_form[data-imported=form_02] .formRegistNumber i {position: absolute; top: 0; left: 0; width: 10vw; height: 100%;} .import_form[data-imported=form_02] .formRegistNumber i::before {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 2px; background-color: #000;} .import_form[data-imported=form_02] .formRegistNumber label {float: left; width: 100%; background-color: transparent;} .import_form[data-imported=form_02] .formRegistNumber label input {float: left; width: 30%; text-align: center; text-indent: 0; background-color: #fff;} .import_form[data-imported=form_02] .formRegistNumber label em {float: left; position: relative; width: 70%; height: 100%; text-align: center;} .import_form[data-imported=form_02] .formRegistNumber label em::before {content: "●●●●●●"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} #wrap[data-target-device=pc] .import_form[data-imported=form_02] .formRegistNumber i {width: 10px;} /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ .import_form[data-imported=defaultForm] .formRegistNumber {clear: none; padding-left: 10vw;} .import_form[data-imported=defaultForm] .formRegistNumber i {position: absolute; top: 0; left: 0; width: 10vw; height: 100%;} .import_form[data-imported=defaultForm] .formRegistNumber i::before {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 2px; background-color: #000;} .import_form[data-imported=defaultForm] .formRegistNumber label {float: left; width: 100%; background-color: transparent;} .import_form[data-imported=defaultForm] .formRegistNumber label input {float: left; width: 30%; text-align: center; text-indent: 0; background-color: #fff;} .import_form[data-imported=defaultForm] .formRegistNumber label em {float: left; position: relative; width: 70%; height: 100%; text-align: center;} .import_form[data-imported=defaultForm] .formRegistNumber label em::before {content: "●●●●●●"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} #wrap[data-target-device=pc] .import_form[data-imported=defaultForm] .formRegistNumber {clear: none; padding-left: 30px;} #wrap[data-target-device=pc] .import_form[data-imported=defaultForm] .formRegistNumber i {width: 10px; left: 10px;} /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ /* 제휴사 PC A-type */ [data-imported=alliance_01] {} [data-imported=alliance_01] .wrap_alliance {position:relative} [data-imported=alliance_01] .wrap_alliance .box_alliance {overflow:hidden; position:relative; width:1060px; margin:0 auto; padding:25px 0} [data-imported=alliance_01] .wrap_alliance .list_alliance {position:relative} [data-imported=alliance_01] .wrap_alliance .list_alliance .item {height:33px;text-align:center} [data-imported=alliance_01] .wrap_alliance .list_alliance .item img {position:relative;top:50%;width:auto;max-width:90%;max-height:33px;transform:translateY(-50%)} [data-imported=alliance_01] .wrap_alliance .paging-button {position:absolute; top:25px; left:50%; width:1200px;margin-left:-600px} [data-imported=alliance_01] .wrap_alliance .swiper-button-prev, [data-imported=alliance_01] .wrap_alliance .swiper-button-next {width:32px; height:32px; margin:0; padding:0; border:1px solid #a4aeb8; border-radius:100%; font-size:15px; line-height:15px; background-size: 30%;} [data-imported=alliance_01] .wrap_alliance .swiper-button-prev {background-image: url(/images/prev02.png); background-position-x: 45%;} [data-imported=alliance_01] .wrap_alliance .swiper-button-next {background-image: url(/images/next02.png); background-position-x: 55%;} /* 제휴사 PC B-type */ .alliance_pc_b {padding:50px 0 60px;box-sizing:content-box} .alliance_pc_b * {box-sizing:content-box} .alliance_pc_b .inner {width:1280px;padding:0;margin:0 auto} .alliance_pc_b h3.tit_section {position:relative;margin-bottom:45px;color:#09181f;font-size:28px !important;font-weight:400;text-align:center;letter-spacing:-0.4px} .alliance_pc_b .tit_section::before{content: ''; position: absolute;top: -3px;left:19%;width:34px;height:27px;background:url(/images/quotes.png)0 0 no-repeat;opacity: 0.2} .alliance_pc_b .tit_section::after{content: ''; position: absolute;bottom:6px;right:17%;width:34px;height:27px;background:url(/images/quotes.png)0 0 no-repeat;opacity: 0.2;transform:rotate(180deg)} .alliance_pc_b .tit_swiper {float:left;padding-top:4px;font-size:28px;color:#333;line-height:1em;} .alliance_pc_b .swiper-container {float:right;position:relative;;width:1000px;padding:0 30px} .alliance_pc_b .swiper-container:after {content:'';position:absolute;top:0;left:0;z-index:2;width:30px;height:100%;background-color:#fff;} .alliance_pc_b .swiper-container:before {content:'';position:absolute;top:0;right:0;z-index:2;width:30px;height:100%;background-color:#fff;} .alliance_pc_b .swiper-slide {width:166.667px;height:38px} .alliance_pc_b .swiper-slide img {position:relative;top:50%;width:auto;max-width:90%;max-height:38px;transform:translateY(-50%)} .alliance_pc_b .swiper-button-prev, .alliance_pc_b .swiper-container-rtl .swiper-button-next {background-image:url(/images/prev02.png); left:0} .alliance_pc_b .swiper-button-next, .alliance_pc_b .swiper-container-rtl .swiper-button-prev {background-image:url(/images/next02.png); right:0} .alliance_pc_b .swiper-button-prev, .alliance_pc_b .swiper-button-next {height:25px;margin-top: -14px;background-size:contain} .alliance_pc_b .mb40 {margin-bottom:40px} .alliance_pc_b .clearfix:after {content:'';display:block;visibility:hidden;height:0;font-size:0;clear:both} /* 제휴사 PC C-type */ .alliance_pc_c {padding:50px 0 60px} .alliance_pc_c .inner {width:1280px;padding:0;margin:0 auto;box-sizing:content-box;} .alliance_pc_c h3.tit_section {position:relative; color:#09181f;font-size:28px !important;font-weight:400;text-align:center;letter-spacing:-0.4px} .alliance_pc_c .tit_section::before{content: ''; position: absolute;top: -3px;left:19%;width:34px;height:27px;background:url(/images/quotes.png)0 0 no-repeat;opacity: 0.2} .alliance_pc_c .tit_section::after{content: ''; position: absolute;bottom:6px;right:17%;width:34px;height:27px;background:url(/images/quotes.png)0 0 no-repeat;opacity: 0.2;transform:rotate(180deg)} .alliance_pc_c .tit_section em {font-weight:700} .alliance_pc_c .list_alliance {margin-top:45px} .alliance_pc_c .list_alliance:after {content:'';display:block;visibility:hidden;height:0;font-size:0;clear:both} .alliance_pc_c .list_alliance li {float: left; position: relative; width: 12.5%; height: 40px;} .alliance_pc_c .list_alliance li img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width:90%; max-height: 100%;} .alliance_pc_c .list_alliance li:nth-child(1n+9){margin-top: 30px;} /* 제휴사 PC custom list */ .alliance_custom_list .inner {} .alliance_custom_list .list_alliance {} .alliance_custom_list .logo {display:inline-block;padding:0 1%} .alliance_custom_list .swiper-button-prev, .alliance_custom_list .swiper-container-rtl .swiper-button-next {background-image:url(/images/prev02.png)} .alliance_custom_list .swiper-button-next, .alliance_custom_list .swiper-container-rtl .swiper-button-prev {background-image:url(/images/next02.png)} .alliance_custom_list .swiper-button-prev, .alliance_custom_list .swiper-button-next {height:25px;margin-top: -14px;background-size:contain} /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ /* 제휴사 MO A-type */ .alliance_mo_a {} .alliance_mo_a .inner {overflow:hidden;position:relative;height:100%;padding:0 4.4444vw;margin:0} .alliance_mo_a .tit_section {position:relative;margin:7.7777vw 0;font-family:"NotoSansKR", sans-serif;font-size:5vw;font-weight:400;color:#222223;text-align:center;letter-spacing:-0.04em} .alliance_mo_a .tit_section strong {color:#008ed4 } .alliance_mo_a .tit_section:before{content: '';position:absolute;top:0;left:9vw;width:4.722vw;height:3.75vw;background:url(/images/quotes.png)0 0 no-repeat;opacity: 0.2;background-size:contain;} .alliance_mo_a .tit_section:after{content: '';position:absolute;bottom:0;right:5vw;width:4.722vw;height:3.75vw;background:url(/images/quotes.png)0 0 no-repeat;opacity: 0.2;transform:rotate(180deg);background-size:contain;} .alliance_mo_a .wrap_swiper {position:relative;margin-bottom:7.7777vw} .alliance_mo_a .swiper-container {width:87%} .alliance_mo_a .logo {display:inline-block;width:25% !important;padding:1% 0;text-align:center} .alliance_mo_a .logo img {display:inline-block;max-width:80%;max-height:7vw;vertical-align:middle} .alliance_mo_a .swiper-button-prev, .alliance_mo_a .swiper-container-rtl .swiper-button-next {background-image:url(/images/prev02.png);left:0} .alliance_mo_a .swiper-button-next, .alliance_mo_a .swiper-container-rtl .swiper-button-prev {background-image:url(/images/next02.png);right:0} .alliance_mo_a .swiper-button-prev, .alliance_mo_a .swiper-button-next {height:25px;margin-top: -14px;background-size:contain} /* 제휴사 MO B-type */ .alliance_mo_b {padding:7.7777vw 0} .alliance_mo_b .inner {overflow:hidden;position:relative;height:100%;padding:0 4.4444vw;margin:0} .alliance_mo_b .wrap_swiper {position:relative} .alliance_mo_b .wrap_swiper.fst {margin-bottom:6vw} .alliance_mo_b .swiper-container {width:90%} .alliance_mo_b .tit_swiper {margin-bottom:2vw;font-family:"NotoSansKR", sans-serif;font-size:5vw;color:#222223;text-align:center} .alliance_mo_b .swiper-wrapper {} .alliance_mo_b .swiper-slide {display:flex;justify-content:center;align-items:center;height:7vw} .alliance_mo_b .swiper-slide img {display:inline-block;max-width:80%;max-height:95%} .alliance_mo_b .swiper-button-prev, .alliance_mo_b .swiper-container-rtl .swiper-button-next {background-image:url(/images/prev02.png);left:0} .alliance_mo_b .swiper-button-next, .alliance_mo_b .swiper-container-rtl .swiper-button-prev {background-image:url(/images/next02.png);right:0} .alliance_mo_b .swiper-button-prev, .alliance_mo_b .swiper-button-next {width:3.8vw;height:3.8vw;margin-top:-1.9vw;background-size:contain} /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ /* 게시판 페이징 */ .paging {text-align: center; font-size: 0;} .paging .pagingInner {overflow: hidden; display: inline-block;} .paging button {float: left;} .paging .start, .paging .prev, .paging .next, .paging .end {width: 30px; height: 30px;} .paging .start {margin-right: 4px; background-position: -32px -46px;} .paging .prev {margin-right: 4px; background-position: -1px -46px;} .paging .next {margin-left: 4px; background-position: -1px -77px;} .paging .end {margin-left: 4px; background-position: -32px -77px;} .paging .page {float: left;} .paging .page button {padding: 0 4px; min-width: 30px; height: 30px; font-size: 14px; color: #666;} .paging .page button:hover {text-decoration: underline;} .paging .page button.active {color: #da291c; text-decoration: underline;} /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ /* 수상 */ .awards[data-imported] {cursor: pointer;} .awards[data-imported][style*=pc_A] {height: 540px;} .awards[data-imported][style*=pc_B] {height: 323px;} .awards[data-imported][style*=pc_C] {height: 430px;} /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ /* TFA 현빈TV CF */ .tv_cf_list{height: 590px;background-image: url(/images/tvcflist_pc_bg.jpg);background-size:cover;letter-spacing: -0.03em;} .tv_cf_list .cfview{position: relative; padding-top: 100px;} .tv_cf_list .desc{position: absolute;z-index: 2;bottom:20px; width: 100%;text-align: center; color:#fff; font-size:20px; line-height: 1.5;text-shadow: 2px 0 0 rgba(0,0,0,1);} .tv_cf_list .viewBox{position: relative;z-index: 3; width: 690px;height: 390px;box-shadow: 8px 8px 13px rgba(0,0,0,.33);cursor: pointer;} .tv_cf_list .viewBox::after{content: '';position: absolute;display: block; z-index: 1;top: 0;left: 0;bottom: 0;right: 0; width: 100%;height: 100%;background-image: linear-gradient(to top, rgba(0,0,0,.88)0%, transparent 58%);} .tv_cf_list .viewBox i{position: absolute;z-index: 2;background-image: linear-gradient(37deg, #008ed4 0%, #1cc4bc 75%);} .tv_cf_list .viewBox i::before{content: '';position: absolute; display: block;} .tv_cf_list .viewBox i:nth-child(1){ top:23px; left:23px;padding-left: 8px; width: 86px;height: 30px;color:#fff;font-style: normal; font-size:14px;font-family: 'OpenSans', sans-serif; line-height: 30px; text-align: center; text-transform: uppercase;letter-spacing: -0.03em; border-radius: 22px;} .tv_cf_list .viewBox i:nth-child(1)::before{left:8px; top:50%;margin-top: -6px; width: 12px;height: 12px;background-color: #fff;border-radius: 100%;} .tv_cf_list .viewBox i:nth-child(2){top:50%; left:50%;width: 88px;height: 88px;border-radius:100%; transform:translate(-50%,-50%);} .tv_cf_list .viewBox i:nth-child(2)::before{margin-left: 5px;margin-top: 1px; top:50%; left:50%;width: 31px;height: 38px;background-image: url(/images/tvcflist_pc_play.png);background-size: cover; transform: translate(-50%,-50%);} .tv_cf_list .slidewrap{position: absolute; bottom: -20px; left:720px;overflow: hidden; width: 1020px;height: 275px;} .tv_cf_list .slideBox{margin-top: 55px; height: 220px;} .tv_cf_list .slideBox .slide{width:2400px;margin-left:-1384px} .tv_cf_list .slideBox ul{padding:20px 0;} .tv_cf_list .slideBox ul li {position: relative;height:180px;width:320px;margin-right:28px;background-size: cover;box-shadow: 8px 8px 10px rgba(0,0,0,.2);} .tv_cf_list .slideBox ul li::after{content: '';position: absolute;display: block; z-index: 1;top: 0;left: 0;bottom: 0;right: 0; width: 100%;height: 100%;background-image: linear-gradient(to top, rgba(0,0,0,.88)0%, transparent 60%);} .tv_cf_list .slideBox ul li.swiper-slide-active{opacity: 0; transition: opacity 0.22s cubic-bezier(0.4, 0, 1, 1)} /* .tv_cf_list .slideBox [data-caption="2019_first_type2"] {background-image: url(/images/tvcflist_2019_first_type2.jpg)} .tv_cf_list .slideBox [data-caption="2019_first_type1"] {background-image: url(/images/tvcflist_2019_first_type1.jpg)} .tv_cf_list .slideBox [data-caption="2019_second_type1"] {background-image: url(/images/tvcflist_2019_second_type1.jpg)} .tv_cf_list .slideBox [data-caption="2019_second_type2"] {background-image: url(/images/tvcflist_2019_second_type2.jpg)} .tv_cf_list .slideBox [data-caption="2020_second_type1"] {background-image: url(/images/tvcflist_2020_second_type1.jpg)} .tv_cf_list .slideBox [data-caption="2020_second_type2"] {background-image: url(/images/tvcflist_2020_second_type2.jpg)} */ .tv_cf_list .slidewrap .cfpage{position: absolute; bottom: 0; top:5px;margin-left: 60px;width: 40px;height: 40px;color:#008ed4; font-size: 18px; line-height: 40px;} .tv_cf_list .slidewrap .cfpage .swiper-pagination-current{font-weight: 700;} .tv_cf_list .slidewrap button{position: absolute; top:5px; left: 0; width: 40px;height: 40px;border:1px solid #0084c5;cursor: pointer;background-color: #efedef;} .tv_cf_list .slidewrap button::before{content:'';display: block; position: absolute;width: 12px;height: 17px; top:50%;left:50%; background-image: url(/images/tvcflist_pc_arrow.png);background-position: 0 0; background-size: cover;transform: translate(-50%,-50%);} .tv_cf_list .slidewrap .cfpage_next{left:120px} .tv_cf_list .slidewrap .cfpage_next::before{background-position-x: -14px;} .tv_cf_list .title{position: absolute;width: 450px;height: 115px; left:690px; top: 100px;background-image: linear-gradient(90deg, #008ed4 0%, #1cc4bc 80%, transparent 100%)} .tv_cf_list .title p{padding-left: 30px; color:#fff; font-size:30px;line-height: 115px;} /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ /* TFA 현빈TV CF MO */ .tv_cf_mo{font-size:2.222223vw; letter-spacing: -0.05em;padding-top:9.7222vw;padding-bottom: 6vw;} .tv_cf_mo .tit{color:#222223;text-align: center;} .tv_cf_mo .tit h3{font-size:3em;color:#222223;margin-bottom: 1.5vw;} .tv_cf_mo .tit p{font-size:1.75em;} .tv_cf_mo .tit .onair{width: 74%;padding:1.3% 0; margin:5% auto; border-radius: 40px;} .tv_cf_mo .tit .onair p{line-height: 5.3vw;} .tv_cf_mo .tit .onair p strong{font-weight: 700;} .tv_cf_mo .tit .onair p span{padding-right: 1%; font-weight: 600; font-family: 'OpenSans', sans-serif;font-size: 0.85em;text-transform:uppercase;} .tv_cf_mo .tit .onair p span i{display: inline-block;vertical-align: middle;margin-top: -2px;margin-right: 5px; width: 2vw;height: 2vw;border-radius: 100%;} .tv_cf_mo .viewBox{position: relative;z-index: 3;width: 100%;height: auto; } .tv_cf_mo .viewBox::before{content:'';display: block; position: absolute;z-index: 2; top: 0;right: 0;bottom: 0;left: 0; width: 100%;height: 100%;} /* A안 */ [data-viewtype=A] .tv_cf_mo{background-color: #f6f6f7;} [data-viewtype=A] .tv_cf_mo .inner{padding:0 !important} [data-viewtype=A] .tv_cf_mo .slidewrap{display: none;} [data-viewtype=A] .tv_cf_mo .slidebtn{display: none;} [data-viewtype=A] .tv_cf_mo .onair{background-image: linear-gradient(90deg, #008ed4 0%, #1cc4bc 100%);} [data-viewtype=A] .tv_cf_mo .onair p{color:#fff;} [data-viewtype=A] .tv_cf_mo .onair p span i{background-color:#fff;} [data-viewtype=A] .tv_cf_mo .viewBox::before{background-color: rgba(0,0,0,.45);} [data-viewtype=A] .tv_cf_mo .viewBox img{width: 100%;} [data-viewtype=A] .tv_cf_mo .cfview{position: relative;} [data-viewtype=A] .tv_cf_mo .cfview i{position: absolute;z-index: 5; display: block; top: 50%;left: 50%;width: 15vw;height: 15vw;border-radius: 100%; background-color: rgba(255,255,255,0.2); transform: translate(-50%,-50%);} [data-viewtype=A] .tv_cf_mo .cfview i::before{content: ''; position: absolute;display: block; z-index: 3;left:57%; top:50%;width: 10vw;height: 10vw;background-image:url(/images/tvcflist_pc_play.png);background-size: 60%;background-repeat: no-repeat;background-position: center; transform: translate(-50%,-50%);} [data-viewtype=A] .tv_cf_mo .cfview i::after{content: ''; position: absolute;display: block; z-index: 2;left:0; top:0;width: 15vw;height: 15vw;border-radius: 100%;animation:playborder 1.5s ease-out infinite;} [data-viewtype=A] .tv_cf_mo .listwrap{ position: relative; z-index: 5; margin-top: -5.55vw; display: block; padding:0 6.94444vw;} [data-viewtype=A] .tv_cf_mo .listwrap ul{width: 100%; border:1px solid #dbdbdb; background-color: #fff;} [data-viewtype=A] .tv_cf_mo .listwrap ul li{color:#222223;font-family: 'NanumSquare',sans-serif;height: 13.19vw;padding:0 0 0 4.1vw; line-height: 13vw;} [data-viewtype=A] .tv_cf_mo .listwrap ul li+li{border-top:1px solid #dbdbdb} [data-viewtype=A] .tv_cf_mo .listwrap ul li.on+li{border-color:transparent} [data-viewtype=A] .tv_cf_mo .listwrap ul li.on{position: relative;} [data-viewtype=A] .tv_cf_mo .listwrap ul li.on span{width: 10%;} [data-viewtype=A] .tv_cf_mo .listwrap ul li.on i{left: 4%;} [data-viewtype=A] .tv_cf_mo .listwrap ul li.on strong{position: relative;text-align: center; z-index: 5; font-size: 1.8em; font-family: 'NotoSansKR',sans-serif; background: linear-gradient(90deg, #008ed4 0%, #1cc4bc 100%); -webkit-background-clip: text;-webkit-text-fill-color: transparent;font-weight: 700;} [data-viewtype=A] .tv_cf_mo .listwrap ul li.on i{position: relative;z-index: 5; background-position: 0 -3.473vw; opacity: 1;} [data-viewtype=A] .tv_cf_mo .listwrap ul li.on::before{display: block;} [data-viewtype=A] .tv_cf_mo .listwrap ul li span{display: inline-block; width: 14%;font-size:1.875em;font-weight: 300;} [data-viewtype=A] .tv_cf_mo .listwrap ul li strong{display: inline-block; width: 72%;font-size:1.75em;font-weight: 700;} [data-viewtype=A] .tv_cf_mo .listwrap ul li i{display: inline-block;width: 4.584vw;height: 3.473vw;left:3%; background-image: url(/images/tvcflist_mo_check.png);background-size: cover;background-position: 0 0; opacity: 0.1;} [data-viewtype=A] .tv_cf_mo .listwrap ul li::before{content: '';position: absolute;z-index: 4; display: none; top: -5%;left: -4%; width: 108%;height: 110%; background-image: url(/images/tvcflist_mo_list.png);background-size: cover;} /* B안 */ [data-viewtype=B] .tv_cf_mo{height: 130vw; background-image: url(/images/tvcflist_mo_bgA.jpg);background-size: cover;box-sizing: border-box;} [data-viewtype=B] .tv_cf_mo .inner{position: relative; padding:0 4.4444vw; height: 100%;} [data-viewtype=B] .tv_cf_mo .listwrap{display: none;} [data-viewtype=B] .tv_cf_mo .onair{border:1px solid #222;} [data-viewtype=B] .tv_cf_mo .onair p{color:#404040;} [data-viewtype=B] .tv_cf_mo .onair p span i{background-color:#404040;} [data-viewtype=B] .tv_cf_mo .viewBox{width: 92%;} [data-viewtype=B] .tv_cf_mo .viewBox img{width: 100%;} [data-viewtype=B] .tv_cf_mo .cfview{position: relative;} [data-viewtype=B] .tv_cf_mo .cfview i{position: absolute;z-index: 5; display: block; top: 50%;left: 46%;width: 17vw;height: 17vw; background-image:url(/images/tvcflist_mo_play.png);background-size: cover; transform: translate(-50%,-50%);opacity: 0.3;} [data-viewtype=B] .tv_cf_mo .viewBox::before{background-image: linear-gradient(to top, rgba(0,0,0,.6)0%, rgba(0,0,0,.3) 100%);} [data-viewtype=B] .tv_cf_mo .slideBox{position: relative;z-index: 5; float: right; margin-top:-10%;padding:5%;width: 58%;height: 30vw; background-image: linear-gradient(70deg, #008ed4 0%, #1cc4bc 100%);box-shadow: 11px 0 29px rgba(0,0,0,0.25);box-sizing: border-box;} [data-viewtype=B] .tv_cf_mo .realnumber{position: relative; display: inline-block; color:#fff; font-family: 'NanumSquare';font-size: 1.625em; font-weight: 700;} [data-viewtype=B] .tv_cf_mo .realnumber::after{content:'';position: absolute;display: block;left:0; bottom: -2px; width: 4vw;height: 2px;background-color: #fff;} [data-viewtype=B] .tv_cf_mo .playname{margin-top: 2vw; color:#fff; font-size:4.5vw;font-weight: 300;line-height: 2;} [data-viewtype=B] .tv_cf_mo .playname strong{position: relative; padding:0 3.5vw;} [data-viewtype=B] .tv_cf_mo .playname strong::before{content: '';position: absolute; top:20%;left:0; display: block; width: 2.7vw;height: 2.7vw;background-image: url(/images/tvcflist_mo_quote.png);background-position: 0 0; background-size: cover;} [data-viewtype=B] .tv_cf_mo .playname strong::after{content: '';position: absolute; top:20%;right:0; display: block; width: 2.7vw;height: 2.7vw;background-image: url(/images/tvcflist_mo_quote.png);background-position: 105% 0;background-size: cover;} [data-viewtype=B] .tv_cf_mo .playbtn{font-family: 'OpenSans'; font-size:1.75em; color:#fff;} [data-viewtype=B] .tv_cf_mo .playbtn i{display: inline-block;vertical-align: middle;margin-top: -2px; margin-left: 1vw;width:12.5vw; padding:0 0 0 1.2vw;color:#fff;font-size:1.94vw;line-height:2; letter-spacing: 0.04em; text-transform: uppercase;border:2px solid #fff; border-radius: 4.5vw;font-style: inherit;} [data-viewtype=B] .tv_cf_mo .playbtn i::after{content: ''; display: inline-block;vertical-align: middle;margin-left: 6%; margin-top: -2px; border-width:1.2vw 0 0 1.2vw;border-style: solid;border-color: #fff transparent;transform: rotate(45deg);} [data-viewtype=B] .tv_cf_mo .slidebtn{position: relative; float: left;margin-top: 12.5%; height: 9.45vw; width: 38%;} [data-viewtype=B] .tv_cf_mo .slidebtn button{position: absolute;bottom:0;height: 9.45vw;width: 9.45vw;background-color: rgba(64,64,64,.15);} [data-viewtype=B] .tv_cf_mo .slidebtn button::before{content:'';display: block; position: absolute; top: 50%;left:50%; width: 2.7vw; height: 4.1vw; background-image: url(/images/tvcflist_mo_arrow.png); background-position: 0 0; transform: translate(-50%,-50%);background-size: cover;} [data-viewtype=B] .tv_cf_mo .slidebtn .cfpage_next{right: 0;} [data-viewtype=B] .tv_cf_mo .slidebtn .cfpage_next::before{ background-position: 100% 0;} [data-viewtype=B] .tv_cf_mo .slidebtn .cfpage_prev{left: 0;} [data-viewtype=B] .tv_cf_mo .slidebtn .cfpage{width: 45%;margin: 0 auto;color:#404040;font-family: 'OpenSans';font-size:1.875em; text-align: center;line-height: 9.6vw;} [data-viewtype=B] .tv_cf_mo .slidebtn .cfpage .swiper-pagination-current{font-weight: 700;} @keyframes playborder{ 0%{transform:scale(1);background-color: rgba(255,255,255,0.2);} 100%{transform:scale(1.5);background-color: rgba(255,255,255,0);} } /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ /* 수상 2020 - 공통 */ #awards2020 {overflow:hidden;margin:0;padding:0} #awards2020 .screen_out {overflow:hidden;position:absolute;width:0;height:0;line-height:0;text-indent:-9999px} /* 대체텍스트가 아닌 접근성을 위한 숨김텍스트를 제공할때 */ #awards2020 * {box-sizing:border-box} #awards2020 ~ #awards, #awards2020 ~ #section5 #awards {display:none} /* 수상 2020 - Mobile A-type*/ #awards2020 .awards_mo_a {position:relative} #awards2020 .awards_mo_a .item_awards {position:relative;overflow:hidden;border-bottom:1px solid #2c2c2d;} #awards2020 .awards_mo_a .item_awards:nth-child(1) {border-image:linear-gradient(to right, #2c2c2d 0%, #666 20%, #2c2c2d 60%);border-image-slice:1} #awards2020 .awards_mo_a .item_awards:nth-child(2) {border-image:linear-gradient(to right, #2c2c2d 40%, #666 80%, #2c2c2d 100%);border-image-slice:1} #awards2020 .awards_mo_a .item_awards:nth-child(3) {border-image:linear-gradient(to right, #2c2c2d 0%, #666 20%, #2c2c2d 60%);border-image-slice:1} #awards2020 .awards_mo_a .item_awards:nth-child(4) {border-image:linear-gradient(to right, #2c2c2d 20%, #666 50%, #2c2c2d 80%);border-image-slice:1} #awards2020 .awards_mo_a .item_awards .medal {display:block;position:absolute;bottom:50%;width:auto;height:29vw;margin-bottom:-14.5vw} #awards2020 .awards_mo_a .item_awards .medal.row1 {right:-19vw;bottom:-14vw;height:71.25vw;margin-bottom:0;transform:translateX(100%)} #awards2020 .awards_mo_a .item_awards .medal.row2 {left:-8vw;transform:translateX(-100%)} #awards2020 .awards_mo_a .item_awards .medal.row3 {right:-8vw;transform:translateX(100%)} #awards2020 .awards_mo_a .item_awards .medal.row4 {left:-8vw;transform:translateX(-100%)} #awards2020 .awards_mo_a .item_awards .bg {display:block;width:100%;height:auto} #awards2020 .awards_mo_a .btn_area {position:relative;z-index:1;height:22.5vw;padding:4.17vw;background-size:auto 22.5vw} #awards2020 .awards_mo_a .btn_awards {overflow: hidden; display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:100%; border-radius: 2.2vw;} #awards2020 .awards_mo_a .btn_awards::before {content: ""; position: absolute; top: 50%; left: 50%; margin: -50vw; width: 100vw; height: 100vw; background-image: url(/etc/img/import/awards2020/gold.png); background-size: contain; animation: rotateImg 4s infinite linear;} #awards2020 .awards_mo_a .btn_awards::after {content: ""; position: absolute; z-index: 1; top: 0.8vw; bottom: 0.8vw; left: 0.8vw; right: 0.8vw; background-color: #000; border-radius: 2vw; background-image: url(/etc/img/import/awards2020/awards2020_mo_a_btn_plus.png); background-size: 60%;} #awards2020 .awards_mo_a .btn_awards .txt {display:block;width:auto;height:8.333vw} #awards2020.on .awards_mo_a .item_awards .medal {opacity:1;transform:translateX(0) !important;transition:1.2s all cubic-bezier(.73,.01,.48,1.12)} #awards2020.on .awards_mo_a .item_awards .medal.row2 {transition-delay:0.2s} #awards2020.on .awards_mo_a .item_awards .medal.row3 {transition-delay:0.5s} #awards2020.on .awards_mo_a .item_awards .medal.row4 {transition-delay:0.7s} /* 수상 2020 - Mobile B-type*/ #awards2020 .awards_mo_b {position:relative} #awards2020 .awards_mo_b .box_awards img.postion-absolute {position:absolute;width:100%;height:auto} #awards2020 .awards_mo_b .box_awards .headline {top:14.58vw;z-index:2;opacity:0;transform:scale(2)} #awards2020 .awards_mo_b .box_awards .medal {top:32.78vw;opacity:0;transform:scale(0.8)} #awards2020 .awards_mo_b .box_awards .medal.center {z-index:1} #awards2020 .awards_mo_b .box_awards .subtit {top:71.39vw;opacity:0;transform:translateY(10%)} #awards2020 .awards_mo_b .box_awards .bg {display:block;width:100%;height:auto} #awards2020 .awards_mo_b .btn_area {position:relative;z-index:1;height:22.5vw;padding:4.17vw;background-size:auto 27.78vw} #awards2020 .awards_mo_b .btn_awards {display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:100%;border:2px solid #1793cc;border-radius:1.2vw;box-shadow:inset 1px 1px 2px #00000080;animation:awards2020_btnBorder1 0.6s infinite alternate cubic-bezier(.73,.01,.48,1.12)} #awards2020 .awards_mo_b .btn_awards .txt {display:block;width:auto;height:8.333vw} #awards2020.on .awards_mo_b .box_awards .headline {opacity:1;transform:scale(1);transition:1.2s all cubic-bezier(.73,.01,.48,1.12)} #awards2020.on .awards_mo_b .box_awards .medal.center {opacity:1;transform:scale(1);transition:1.2s all cubic-bezier(.73,.01,.48,1.12)} #awards2020.on .awards_mo_b .box_awards .medal.left {opacity:1;transform:scale(1);transition:1.2s 0.3s all cubic-bezier(.73,.01,.48,1.12)} #awards2020.on .awards_mo_b .box_awards .medal.right {opacity:1;transform:scale(1);transition:1.2s 0.4s all cubic-bezier(.73,.01,.48,1.12)} #awards2020.on .awards_mo_b .box_awards .subtit {opacity:1;transform:translateY(0);transition:0.8s 0.8s all cubic-bezier(.73,.01,.48,1.12)} /* 수상 2020 - Mobile C-type*/ #awards2020 .awards_mo_c {position:relative} #awards2020 .awards_mo_c .list_medal {position:absolute;top:0;left:0;width:100%} #awards2020 .awards_mo_c .list_medal .medal {position:absolute;top:0;left:0;width:100%;opacity:0;transform:translateY(-100%)} #awards2020 .awards_mo_c .box_headline {position:absolute;top:41vw;left:0;text-align:center} #awards2020 .awards_mo_c .box_headline .star {display:inline-block;width:5.14vw;height:5.14vw;margin:0 0.4vw;background:0 0 no-repeat;background-size:cover;opacity:0} #awards2020 .awards_mo_c .box_headline .headline {display:block;width:100%;padding-top:1vw;opacity:0;transform:scale(0.8)} #awards2020 .awards_mo_c .box_trophy {position:absolute;top:61vw;left:0;width:100%} #awards2020 .awards_mo_c .box_trophy .trophy {position:absolute;top:0;left:0;width:100%;opacity:0;transform:scale(0.95)} #awards2020 .awards_mo_c .box_trophy .trophy.shine {opacity:0} #awards2020 .awards_mo_c .btn_area {position:absolute;left:50%;bottom:18.61vw;z-index:1;width:80vw;height:22.5vw;margin-left:-40vw;padding:4.17vw} #awards2020 .awards_mo_c .btn_awards {overflow: hidden; display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:100%; border-radius: 2.2vw;} #awards2020 .awards_mo_c .btn_awards::before {content: ""; position: absolute; top: 50%; left: 50%; margin: -50vw; width: 100vw; height: 100vw; background-image: url(/etc/img/import/awards2020/gold.png); background-size: contain; animation: rotateImg 4s infinite linear;} #awards2020 .awards_mo_c .btn_awards::after {content: ""; position: absolute; z-index: 1; top: 0.8vw; bottom: 0.8vw; left: 0.8vw; right: 0.8vw; background-color: #000; border-radius: 2vw; background-image: url(/etc/img/import/awards2020/awards2020_mo_a_btn_plus.png); background-size: 60%;} #awards2020 .awards_mo_c .btn_awards .txt {display:block;width:auto;height:8.333vw} #awards2020 .awards_mo_c .subtit {position:absolute;bottom:8.61vw;left:0;width:100%} #awards2020 .awards_mo_c .bg {display:block;width:100%;height:auto} #awards2020.on .awards_mo_c .list_medal .medal:nth-child(1) {opacity:1;transform:translateY(0%);transition:1s all cubic-bezier(.73,.01,.48,1.12)} #awards2020.on .awards_mo_c .list_medal .medal:nth-child(2) {opacity:1;transform:translateY(0%);transition:1s 0.2s all cubic-bezier(.73,.01,.48,1.12)} #awards2020.on .awards_mo_c .list_medal .medal:nth-child(3) {opacity:1;transform:translateY(0%);transition:1s 0.4s all cubic-bezier(.73,.01,.48,1.12)} #awards2020.on .awards_mo_c .list_medal .medal:nth-child(4) {opacity:1;transform:translateY(0%);transition:1s 0.6s all cubic-bezier(.73,.01,.48,1.12)} #awards2020.on .awards_mo_c .list_medal .medal:nth-child(5) {opacity:1;transform:translateY(0%);transition:1s 0.8s all cubic-bezier(.73,.01,.48,1.12)} #awards2020.on .awards_mo_c .box_headline .star {opacity:1;transition:1s 2.5s all cubic-bezier(.73,.01,.48,1.12)} #awards2020.on .awards_mo_c .box_headline .star:nth-child(1) {animation:awards2020_topDown 1.5s 3.5s infinite} #awards2020.on .awards_mo_c .box_headline .star:nth-child(2) {animation:awards2020_topDown 1.5s 3.7s infinite} #awards2020.on .awards_mo_c .box_headline .star:nth-child(3) {animation:awards2020_topDown 1.5s 3.9s infinite} #awards2020.on .awards_mo_c .box_headline .star:nth-child(4) {animation:awards2020_topDown 1.5s 4.1s infinite} #awards2020.on .awards_mo_c .box_headline .star:nth-child(5) {animation:awards2020_topDown 1.5s 4.3s infinite} #awards2020.on .awards_mo_c .box_headline .headline {opacity:1;transform:scale(1);transition:2s 1s all cubic-bezier(.73,.01,.48,1.12)} #awards2020.on .awards_mo_c .box_trophy .trophy {opacity:1;transform:scale(1);transition:2s 1.4s all cubic-bezier(.73,.01,.48,1.12)} #awards2020.on .awards_mo_c .box_trophy .trophy.shine {opacity:1;transition:1.5s 2s all cubic-bezier(.73,.01,.48,1.12);animation:awards2020_opacity 2s 3.5s infinite alternate cubic-bezier(.73,.01,.48,1.12)} /* 수상 2020 - PC A-type*/ #awards2020 .awards_pc_a {position:relative} #awards2020 .awards_pc_a .inner {position:relative;z-index:1;width:1280px !important;height:541px;margin:0 auto} #awards2020 .awards_pc_a .box_headline {position:absolute;top:60px;left:400px} #awards2020 .awards_pc_a .box_headline .star {display:inline-block;margin:0 2px} #awards2020 .awards_pc_a .box_headline .star:nth-child(1) {animation:awards2020_topDown 1.5s infinite} #awards2020 .awards_pc_a .box_headline .star:nth-child(2) {animation:awards2020_topDown 1.5s 0.2s infinite} #awards2020 .awards_pc_a .box_headline .star:nth-child(3) {animation:awards2020_topDown 1.5s 0.4s infinite} #awards2020 .awards_pc_a .box_headline .star:nth-child(4) {animation:awards2020_topDown 1.5s 0.6s infinite} #awards2020 .awards_pc_a .list_medal .medal {display:block;position:absolute;opacity:0;} #awards2020 .awards_pc_a .list_medal .medal:nth-child(1) {top:185px;left:494px} #awards2020 .awards_pc_a .list_medal .medal:nth-child(2) {top:185px;left:292px} #awards2020 .awards_pc_a .list_medal .medal:nth-child(3) {top:185px;left:91px} #awards2020 .awards_pc_a .list_medal .medal:nth-child(4) {top:0;left:709px} #awards2020 .awards_pc_a .particle {position:absolute;z-index:0;top:0;left:0;width:100%;height:100%;opacity:0} #awards2020 .awards_pc_a .btn_area {position: absolute;;z-index:1;left:243px;bottom:50px; width: 220px; height: 48px;} #awards2020 .awards_pc_a .btn_awards {overflow: hidden; display:flex; justify-content:center;align-items:center;position:relative; width:100%;height:100%; border-radius: 5px;} #awards2020 .awards_pc_a .btn_awards::before {content: ""; position: absolute; top: 50%; left: 50%; margin: -200px; width: 400px; height: 400px; background-image: url(/etc/img/import/awards2020/gold.png); background-size: contain; animation: rotateImg 4s infinite linear;} #awards2020 .awards_pc_a .btn_awards::after {content: ""; position: absolute; z-index: 1; top: 4px; bottom: 4px; left: 4px; right: 4px; background-color: #000; border-radius: 4px; background-image: url(/etc/img/import/awards2020/awards2020_mo_a_btn_plus.png); background-size: 80%;} #awards2020 .awards_pc_a .btn_awards .txt {display:block;width:180px;height:auto;background:transparent} #awards2020.on .awards_pc_a .list_medal .medal:nth-child(1) {opacity:1;transition:1s 0.7s all cubic-bezier(.73,.01,.48,1.12)} #awards2020.on .awards_pc_a .list_medal .medal:nth-child(2) {opacity:1;transition:1s 0.5s all cubic-bezier(.73,.01,.48,1.12)} #awards2020.on .awards_pc_a .list_medal .medal:nth-child(3) {opacity:1;transition:1s 0.3s all cubic-bezier(.73,.01,.48,1.12)} #awards2020.on .awards_pc_a .list_medal .medal:nth-child(4) {opacity:1;transition:1.3s 1.1s all cubic-bezier(.73,.01,.48,1.12)} #awards2020.on .awards_pc_a .particle {opacity:1;transition:1.5s 1s all cubic-bezier(.73,.01,.48,1.12)} /* 수상 2020 - PC B-type*/ #awards2020 .awards_pc_b {position:relative;overflow:hidden} #awards2020 .awards_pc_b .inner {position:relative;width:1280px !important;height:323px} #awards2020 .awards_pc_b .list_medal .medal {display:block;position:absolute;top:85px;opacity:0;transform:translateY(10%)} #awards2020 .awards_pc_b .list_medal .medal:nth-child(1) {left:657px} #awards2020 .awards_pc_b .list_medal .medal:nth-child(2) {left:808px} #awards2020 .awards_pc_b .list_medal .medal:nth-child(3) {left:961px} #awards2020 .awards_pc_b .list_medal .medal:nth-child(4) {left:1110px} #awards2020 .awards_pc_b .list_medal .tag {position:absolute;top:71px;left:740px;opacity:0;transform:translateY(-10%)} #awards2020 .awards_pc_b .hand {position:absolute;left:16px;top:-120px;opacity:0;transform:translateY(5%)} #awards2020 .awards_pc_b .btn_area {position:absolute;left:150px;top:86px;opacity:0} #awards2020 .awards_pc_b .btn_awards {background:transparent;cursor:inherit} #awards2020 .awards_pc_b .btn_awards .txt {position:relative;z-index:1} #awards2020 .awards_pc_b .btn_awards .effect {position:absolute;top:108px;left:221px;width:79px;height:24px;border-radius:3px;background-color:#002d51;animation:awards2020_btnEffect 0.4s infinite alternate cubic-bezier(.73,.01,.48,1.12)} #awards2020.on .awards_pc_b .list_medal .medal:nth-child(1) {opacity:1;transform:translateY(0);transition:1.5s all cubic-bezier(.73,.01,.48,1.12)} #awards2020.on .awards_pc_b .list_medal .medal:nth-child(2) {opacity:1;transform:translateY(0);transition:1.5s 0.2s all cubic-bezier(.73,.01,.48,1.12)} #awards2020.on .awards_pc_b .list_medal .medal:nth-child(3) {opacity:1;transform:translateY(0);transition:1.5s 0.4s all cubic-bezier(.73,.01,.48,1.12)} #awards2020.on .awards_pc_b .list_medal .medal:nth-child(4) {opacity:1;transform:translateY(0);transition:1.5s 0.6s all cubic-bezier(.73,.01,.48,1.12)} #awards2020.on .awards_pc_b .list_medal .tag {opacity:1;transform:translateY(0);transition:1.3s 0.7s all cubic-bezier(.73,.01,.48,1.12)} #awards2020.on .awards_pc_b .hand {opacity:1;transform:translateY(0);transition:1s 2s} #awards2020.on .awards_pc_b .btn_area {opacity:1;transition:0.8s 2.2s all cubic-bezier(.73,.01,.48,1.12)} /* keyframes */ @keyframes rotateImg { 0% {transform: rotate(0deg)} 100% {transform: rotate(360deg)} } @keyframes awards2020_btnPop { 0% {background-position:110% 0%} 100% {background-position:0% 70%} } @keyframes awards2020_btnBorder { 0% {border-color:#b98955} 100% {border-color:#fff} } @keyframes awards2020_btnBorder1 { 0% {border-color:#1793cc} 100% {border-color:#6abe7d} } @keyframes awards2020_btnEffect { 0% {background-color:#002d51} 100% {background-color:#c7000a} } @keyframes awards2020_opacity { 0% {opacity:1} 100% {opacity:0.4} } @keyframes awards2020_topDown { 0% {transform:translateY(0)} 40% {transform:translateY(-15%)} 80% {transform:translateY(0)} 100% {transform:translateY(0)} } /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ .awards2021_pc_a {height: 540px; cursor: pointer;} .awards2021_pc_b {height: 540px; cursor: pointer;} .awards2021_pc_c {height: 100%; cursor: pointer; background-position: 100% 0;} /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ /* MO_3보 타이틀 - 배너 */ .mo_threeInsure_banner {position:relative;transition:all ease 0.5s 0s} .mo_threeInsure_banner .box_bg {position:relative} .mo_threeInsure_banner .box_bg .bg {display:block;width:100%;height:auto} .mo_threeInsure_banner .box_bg .hand {display:block;position:absolute;left:0;top:0;width:100%;height:auto;animation:mo_bnr3botit_hand 0.3s infinite alternate} .mo_threeInsure_banner .btn_close {position:absolute;right:15px;top:-33px;width:38px;height:38px;background:0 0 no-repeat} .mo_threeInsure_banner .btn_cont {overflow:visible;position:absolute;left:calc(50% + 1.5vw);bottom:9.722vw;width:81.53vw;height:12.22vw;border-radius:1.5vw;background-color:#ff4527;transform:translateX(-50%);transition:background-color 0.2s} .mo_threeInsure_banner .btn_cont .tit {display:inline-block;font-family:'HGGGothicssi',sans-serif;font-size:4.861vw;font-weight:600;color:#fff;line-height:1em;transition:color 0.2s} .mo_threeInsure_banner .btn_cont .tit .ico_arr {display:inline-block;;width:10px;height:10px;margin:0 9px;border-top:2px solid #fff;border-left:2px solid #fff;transform:rotate(135deg);vertical-align:middle;transition:border-color 0.2s} .mo_threeInsure_banner .btn_cont .pointer {position:absolute;top:2.1vw;right:-3.75vw} .mo_threeInsure_banner .btn_cont .pointer i {position:absolute;top:0;right:0;display:block;width:16.81vw;height:16.81vw;background-size:100%} .mo_threeInsure_banner .btn_cont .pointer i:nth-child(1) {margin:2.361vw -2.361vw 0 0; animation:mo_bnr3botit_pointer1 0.3s infinite alternate} .mo_threeInsure_banner .btn_cont .pointer i:nth-child(2) {opacity: 0; animation:mo_bnr3botit_pointer2 0.3s infinite alternate;} @keyframes mo_bnr3botit_hand { 0%,49.9% {opacity:1} 50%,100% {opacity:0} } @keyframes mo_bnr3botit_pointer1 { 0% {margin:2.361vw -2.361vw 0 0} 80% {margin: 0;} 100% {margin: 0;} } @keyframes mo_bnr3botit_pointer2 { 0% {opacity: 0;} 50% {opacity: 0;} 100% {opacity: 1;} } /* 무료상담신청 - importForm().form_01 수정 */ .layer_threeInsure_mo {color:#000} .layer_threeInsure_mo * {--mainColor:#ff4527;--invertedColor:#25258c} .layer_threeInsure_mo .top_threeInsure {padding-top:10vw} .layer_threeInsure_mo .top_threeInsure .ico {display:block;width:25vw;height:auto;margin:0 auto 4vw} .layer_threeInsure_mo .top_threeInsure .tit {margin-bottom:5vw;font-family:'HGGGothicssi',sans-serif;font-size:6vw;letter-spacing:-0.03em;text-align:center;line-height:1.3em} .layer_threeInsure_mo .top_threeInsure .tit strong {color:var(--mainColor)} .layer_threeInsure_mo .isIcon {position:relative} .layer_threeInsure_mo .isIcon i {position:absolute;left:3vw;top:50%;width:5vw;height:5vw;background-size:cover;transform:translateY(-50%)} [data-target-device=mo] ~ .layer_threeInsure_mo#formLayer01_wrap .loadForm form .form_box {padding: 4vw; border:1px solid #ddd; margin-top: 2vw; border-top: 1vw solid #25258c;} [data-target-device=mo] ~ .layer_threeInsure_mo#formLayer01_wrap .loadForm {padding:5vw 7vw 7vw; } [data-target-device=mo] ~ .layer_threeInsure_mo#formLayer01_wrap .loadForm::before {content:"※ 고객정보는 당사 외 제3자에게 절대 제공되지 않습니다.";display:block;font-size:3.7vw;color:#0d43a9;letter-spacing:-0.05em;} [data-target-device=mo] ~ .layer_threeInsure_mo#formLayer01_wrap .loadForm .row+.row {border:0} [data-target-device=mo] ~ .layer_threeInsure_mo#formLayer01_wrap .loadForm .row label input {line-height:1em;} [data-target-device=mo] ~ .layer_threeInsure_mo#formLayer01_wrap .loadForm [data-type=phone] .select_wrap {width:30%} [data-target-device=mo] ~ .layer_threeInsure_mo#formLayer01_wrap .loadForm [data-type=phone] .select_wrap+label {width:70%} [data-target-device=mo] ~ .layer_threeInsure_mo#formLayer01_wrap .loadForm [data-type=phone] .select_wrap+label input {width:100%} [data-target-device=mo] ~ .layer_threeInsure_mo#formLayer01_wrap .loadForm [data-type=agree] .agreement span {width:16vw;border:0} [data-target-device=mo] ~ .layer_threeInsure_mo#formLayer01_wrap .loadForm [data-type=agree] .agreeText:after {display:none} [data-target-device=mo] ~ .layer_threeInsure_mo#formLayer01_wrap .loadForm .btn_submit {height:14vw} [data-target-device=mo] ~ .layer_threeInsure_mo.layer_wrap[id*=formLayer01] .layer [id*=formLayer01] form .submit {width:100%;border:0;border-radius:1.5vw;line-height:1em;letter-spacing:0.02em;background-color:var(--mainColor) !important} .layer_threeInsure_mo#formLayer01_wrap .layer {padding:0;} .layer_threeInsure_mo#formLayer01_wrap form .row_cate label {border-radius:1.5vw;border:1px solid #ddd !important;background-color:#fff} .layer_threeInsure_mo#formLayer01_wrap select {width:100%;border:1px solid #ddd;border-radius:1.5vw;color:#000;text-indent:3vw;background:#fff url() !important} .layer_threeInsure_mo#formLayer01_wrap select:focus {border-color:var(--invertedColor)} .layer_threeInsure_mo#formLayer01_wrap label input {border:1px solid #ddd;border-radius:1.5vw;background-color:#fff} .layer_threeInsure_mo#formLayer01_wrap label input:focus {border-width:1px !important;border-color:var(--invertedColor)} .layer_threeInsure_mo#formLayer01_wrap form .label_css {background-color: transparent;} .layer_threeInsure_mo#formLayer01_wrap .top {display:none} .layer_threeInsure_mo#formLayer01_wrap .row:not(.focused):not([data-type=gender]) {border:0} .layer_threeInsure_mo#formLayer01_wrap .row_name {margin:2vw 0 0} .layer_threeInsure_mo#formLayer01_wrap .row_gender {margin:2vw 0 0} .layer_threeInsure_mo#formLayer01_wrap .row_gender label {border-bottom-color:#ddd !important} .layer_threeInsure_mo#formLayer01_wrap .row_gender label:nth-child(1) {overflow:hidden;border-top-left-radius:1.5vw;border-bottom-left-radius:1.5vw} .layer_threeInsure_mo#formLayer01_wrap .row_gender label:nth-child(2) {overflow:hidden;border-top-right-radius:1.5vw;border-bottom-right-radius:1.5vw} .layer_threeInsure_mo#formLayer01_wrap .row_phone .select_wrap select {padding-left: 0;} .layer_threeInsure_mo#formLayer01_wrap .row_phone .select_wrap+label {padding-left: 2vw;} .layer_threeInsure_mo#formLayer01_wrap .row_phone label {border:0} .layer_threeInsure_mo#formLayer01_wrap .row_agree {position:relative} .layer_threeInsure_mo#formLayer01_wrap .btn_submit::before {content:"무료상담신청";display:inline-block;font-family:'HGGGothicssi',sans-serif;font-size:4.9vw;font-weight:600;line-height:1em;vertical-align:middle} /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ /* PC_3보 타이틀 - 배너 */ .pc_threeInsure_banner {position:absolute;bottom:0;left:0;z-index:100;padding:30px;transform-origin:center bottom;transition:all ease 0.5s} .pc_threeInsure_banner .inner-fluid {position:relative} .pc_threeInsure_banner .box_bg {overflow:hidden;position:relative;border:5px solid #0d43a9;border-radius:25px;background-color:#0d43a9;box-shadow:8px 8px 10px rgba(0,0,0,0.3)} .pc_threeInsure_banner .box_bg .bg {display:block} .pc_threeInsure_banner .box_bg .hand {display:block;position:absolute;left:0;top:0;animation:pc_bnr3botit_hand 0.5s infinite alternate} .pc_threeInsure_banner .btn_close {position:absolute;right:-5px;top:-40px;width:38px;height:38px;background:0 0 no-repeat} .pc_threeInsure_banner .btn_cont {overflow: visible;;position:absolute;left:23px;bottom:23px;width:317px;border-radius:15px;background-color:#ff4527;transition:background-color 0.2s} .pc_threeInsure_banner .btn_cont .tit {display:inline-block;padding:12px 0;font-family:'HGGGothicssi',sans-serif;font-size:24px;font-weight:600;color:#fff;line-height:1em;transition:color 0.2s} .pc_threeInsure_banner .btn_cont .tit .ico_arr {display:inline-block;;width:10px;height:10px;margin:0 9px;border-top:2px solid #fff;border-left:2px solid #fff;transform:rotate(135deg);vertical-align:middle;transition:border-color 0.2s} .pc_threeInsure_banner .btn_cont .pointer {position:absolute;top:8px;right:-27px} .pc_threeInsure_banner .btn_cont .pointer i {position:absolute;top:0;right:0;display:block;width:75px;height:69px} .pc_threeInsure_banner .btn_cont .pointer i:nth-child(1) {margin:14px -14px 0 0; animation: pc_bnr3botit_pointer1 0.5s infinite alternate} .pc_threeInsure_banner .btn_cont .pointer i:nth-child(2) {opacity: 0; animation: pc_bnr3botit_pointer2 0.5s infinite alternate;} .pc_threeInsure_banner.hovering {transform:translateY(-5px) !important;} .pc_threeInsure_banner .btn_cont:hover {background-color:#ffd953} .pc_threeInsure_banner .btn_cont:hover .tit {color:#221e1f} .pc_threeInsure_banner .btn_cont:hover .tit .ico_arr {border-color:#221e1f} @keyframes pc_bnr3botit_hand { 0%,49.9% {opacity:1} 50%,100% {opacity:0} } @keyframes pc_bnr3botit_pointer1 { 0% {margin:14px -14px 0 0} 80% {margin: 0;} 100% {margin: 0;} } @keyframes pc_bnr3botit_pointer2 { 0% {opacity: 0;} 50% {opacity: 0;} 100% {opacity: 1;} } /* 무료상담신청 - formLayer01_consult_wrap 수정 */ .layer_threeInsure_pc .import_form [data-type=phone] .select_wrap {padding:0} .layer_threeInsure_pc .import_form label input {border:0} .layer_threeInsure_pc .import_form select {border:0;-webkit-appearance: none;-moz-appearance: none;appearance: none;} .layer_threeInsure_pc [type=checkbox],[type=radio] {display: none;} .layer_threeInsure_pc .layer [id*=formLayer01] form .formRow.focused {border-bottom-color:#ff4527} .layer_threeInsure_pc .layer [id*=formLayer01] form .formRow input:focus {border-bottom:transparent !important} .layer_threeInsure_pc .layer [id*=formLayer01] form .formGender label {border-bottom-color:#ddd !important} .layer_threeInsure_pc .layer [id*=formLayer01] form .formAgree {position:relative;} /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ /* TFA 무료상담 플로팅 배너 21 ver.6월 */ [data-theme-color="pink"] .mo_floating_banner{--mainColor :#e04443; --barColor : #003494; --borderColor : #e04443; --fomrColor :#ef3b3a;} [data-theme-color="yellow"] .mo_floating_banner{--mainColor :#f4d24c; --barColor : #f14e92; --borderColor : #f14e92; --fomrColor :#f26d7c;} [data-theme-color="blue"] .mo_floating_banner{--mainColor :#003494; --barColor : #ef3b3a; --borderColor : #ef3b3a; --fomrColor :#ef3b3a;} .mo_floating_banner{position: absolute;bottom:0;left:0; width: 100%; height: 20vw;border-radius: 6.94vw 6.94vw 0 0; background-color: var(--mainColor);transition:height 0.32s ease-out,background-color 0.5s linear;} .mo_floating_banner .close{position: absolute;z-index: 2; top:10%;right:3.6vw;width: 6.9vw;height: 6.9vw;border-radius: 100%;border:0.55vw solid #fff ;background-size: 55%;} .mo_floating_banner .screen_out{overflow: hidden;position: absolute;width: 0;height: 0;line-height: 0;text-indent: -9999px;} .mo_floating_banner .slideup_cnt{position: absolute;top:-6vw; left:50%;margin-left: -4.25vw; width: 8.5vw;height:8.5vw;border-radius: 100%;background-color: #fff;} .mo_floating_banner .arrow_wrap{position: absolute;top:50%; left:50%;width: 7.5vw;margin-left: -3.75vw;margin-top: -3.75vw;height:7.5vw;border-radius: 100%;box-shadow: 0 0 0 0.55vw var(--borderColor) inset;background-color: #fff;} .mo_floating_banner .arrow_wrap .arrow::before, .mo_floating_banner .arrow_wrap .arrow::after{content:''; display: block; position: absolute;top:20%;left:50%; width: 3.4vw;margin-left: -1.7vw; height:1.8vw;background-image: url(/images/mo_arrow.png); background-size: contain;} .mo_floating_banner .arrow_wrap .arrow::after{animation: otc-banner-arrow-movement 2s ease-in-out infinite} .mo_floating_banner .arrow_wrap .arrow::before{animation: otc-banner-arrow-movement 2s 1s ease-in-out infinite} .mo_floating_banner .main_banner{overflow: hidden;position: relative;height: 20vw;} .mo_floating_banner .main_banner h6{position: relative;z-index: 2; margin-left:7.2vw; width: 36%;height: 100%;transform: translateY(-3vw);} .mo_floating_banner .main_banner .content{position: absolute;width: 100%;height: 100%;top:0;left:0;} .mo_floating_banner .main_banner .content .rail_track{width: 100%;height: 100%;} .mo_floating_banner .main_banner .content .rail_track::after{content:'무료상담신청';position: absolute;font-family:'SCDream',sans-serif;right:22%;top:30%; opacity: 0;width: auto; color:#fff;transform: rotate(10deg)} .mo_floating_banner .main_banner .content .rail_track .train{position: absolute; top:20%; left:38%; width:12vw; height:4.5vw;} .mo_floating_banner .main_banner .content .rail_track .train img{position: relative;z-index: 2;} .mo_floating_banner .main_banner .content.active .rail_track::after{opacity: 1;transition: opacity 0.2s linear 0.55s;} .mo_floating_banner .form_area{font-family:'NotoSansKR',sans-serif;opacity: 0;transition:opacity 0.5s linear;} .mo_floating_banner .form_area .inner{margin-top: 10vw;} .mo_floating_banner .form_area .title{text-align: center;} .mo_floating_banner .form_area .title h5{color:#212121; font-size:7.2vw;font-family: 'NanumSquare',sans-serif; font-weight: 700;} .mo_floating_banner .form_area .title p{color:#777;font-size:4.1vw;} .mo_floating_banner .form_area .title h5::after{content: '보험리모델링 무료상담 신청';} .mo_floating_banner .form_area .title p.form_desc:nth-of-type(1){margin-top: 5vw;} .mo_floating_banner .form_area .title p.form_desc:nth-of-type(1)::before{content: '내가 가입한 모든 보험을 분석해';} .mo_floating_banner .form_area .title p.form_desc:nth-of-type(2){margin-bottom: 5vw;} .mo_floating_banner .form_area .title p.form_desc:nth-of-type(2) strong::before{content: '전문가가 꼼꼼하게 진단';} .mo_floating_banner .form_area .title p.form_desc:nth-of-type(2)::after{content: '해드립니다.';} .mo_floating_banner .form_area .row_css label, .mo_floating_banner .form_area .row_phone .select_css{border-radius: 0.695vw;} .mo_floating_banner .form_area .label_css:not(.select_wrap){border:1px solid #ccc;} .mo_floating_banner .form_area .select_css{border:1px solid #ccc;} .mo_floating_banner .form_area .loadForm form .row_name {width: 70%;} .mo_floating_banner .form_area .loadForm form .row_gender {clear: none;color:#fff; margin-left: 2%; margin-top: 0; width: 28%;} .mo_floating_banner .form_area .loadForm form .row_gender label {overflow: visible; border-width: 0; border-color: transparent;} .mo_floating_banner .form_area .loadForm form .row_gender label em {border-width: 0.5vw; border-color: inherit;} .mo_floating_banner .form_area .loadForm form .row_gender label:nth-child(1) em {border-right: 0; border-radius: 1vw 0 0 1vw;} .mo_floating_banner .form_area .loadForm form .row_gender label:nth-child(2) em {border-left: 0; border-radius: 0 1vw 1vw 0;} .mo_floating_banner .form_area .loadForm form .row_gender label :checked~em{background-color: var(--fomrColor);border-color: var(--fomrColor);} .mo_floating_banner .form_area .loadForm form .row_gender label em{background-color: #bfbfbf;} .mo_floating_banner .form_area .loadForm form .row_agree .agree_guide{color:#777; font-size:3.5vw;width: 14vw;height: 6vw;padding:0;} .mo_floating_banner .form_area .loadForm form .row_agree .agree_guide::before{color:#fff;width: 100%;margin-left: 1vw;line-height: 5.2vw;} .mo_floating_banner .form_area .loadForm form .row_agree .agree_guide i{width: 4vw;height: 4vw;} .mo_floating_banner .form_area .loadForm form .row_agree label :checked~em .agree_guide{background-color: var(--fomrColor);border-color: var(--fomrColor);} .mo_floating_banner .form_area .loadForm form .row_agree button{width: auto;} .mo_floating_banner .form_area .loadForm form .row_agree button::after{content:'';position:absolute;top:54%;left:42%;height:0.4em;width:0.4em;border-bottom:0.12em solid #333;border-right:0.12em solid #333;transform:translate(-50%, -50%) rotate(315deg)} .mo_floating_banner .form_area .loadForm form .row_phone .select_wrap{padding-right:0;width: 33%;} .mo_floating_banner .form_area .loadForm form .row_phone .select_wrap+label{margin-left: 2%;width: 65%;} .mo_floating_banner .form_area .loadForm form .row_phone .select_wrap i{left:78%;} .mo_floating_banner .form_area .loadForm form .btn_submit{position: relative; margin-top: 10vw; height:13.8vw; background-color: var(--fomrColor);border-radius: 100px;box-shadow: 0 2px 20px rgba(0,0,0,0.2) ;} .mo_floating_banner .form_area .loadForm form .btn_submit::before{content: '보험리모델링 신청하기';font-size:4.167vw;font-weight: 500;} .mo_floating_banner .form_area .loadForm form .btn_submit::after{content:'';position:absolute; top:52%;right:21%;width: 3.4vw;height: 3.4vw; background-image: url(/images/mo_arrow_white.png);background-size: contain; transform:translate(-50%, -50%)} .mo_floating_banner .form_area .loadForm::after{content: '고객정보는 당사 외 제3자에게 절대 제공하지 않습니다.';position: absolute;left:4.444vw;bottom:17%;color:#777;font-size:3.5vw} .mo_floating_banner .form_area .loadForm form[data-focus-action=true][data-icon=false] .row_name label::after{top:0.1em;} .mo_floating_banner .form_area .loadForm form[data-focus-action=true] .row label input{padding-top: 3vw;} .mo_floating_banner.active{height: 130vw;background-color:#f2f3f6;transition:height 0.5s linear,background-color 0.5s linear;} .mo_floating_banner.active .arrow_wrap{transform: rotate(180deg);} .mo_floating_banner.active .form_area{opacity: 1;transition:opacity 0.5s linear;} .mo_floating_banner.down{height: 10vw;transition:all 0.5s linear;} .mo_floating_banner.down .main_banner{display: none;} .mo_floating_banner.down .close{display: none;} .mo_floating_banner.active .main_banner{display: none;} .mo_floating_banner.active .close{top:-6%;} /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ /* OTC 무료상담 플로팅 배너 new version */ [data-theme-color="pink"] .mo_otc_new_banner{--mainColor :#df5958; --borderColor : #df5958; --fomrColor :#ef3b3a;} [data-theme-color="yellow"] .mo_otc_new_banner{--mainColor :#f4d24c; --borderColor : #f14e92; --fomrColor :#f26d7c;} [data-theme-color="blue"] .mo_otc_new_banner{--mainColor :#003494; --borderColor : #ef3b3a; --fomrColor :#ef3b3a;} .mo_otc_new_banner{position: absolute;bottom:0;left:0; width: 100%; height: 30vw;border-radius: 6.94vw 6.94vw 0 0; background-color: var(--mainColor);transition:height 0.4s linear,background-color 0.5s linear;} .mo_otc_new_banner .close{position: absolute;z-index: 2; top:3.61vw;right:2.63vw;width: 6.9vw;height: 6.9vw;border-radius: 100%;border:0.55vw solid #fff ;background-size: 55%;} .mo_otc_new_banner .screen_out{overflow: hidden;position: absolute;width: 0;height: 0;line-height: 0;text-indent: -9999px;} .mo_otc_new_banner .slideup_cnt{position: absolute;top:-4.25vw; left:50%;margin-left: -4.25vw; width: 8.5vw;height:8.5vw;border-radius: 100%;background-color: #fff;} .mo_otc_new_banner .arrow_wrap{position: absolute;top:50%; left:50%;width: 7.5vw;margin-left: -3.75vw;margin-top: -3.75vw;height:7.5vw;border-radius: 100%;box-shadow: 0 0 0 0.55vw var(--borderColor) inset;background-color: #fff;} .mo_otc_new_banner .arrow_wrap .arrow::before, .mo_otc_new_banner .arrow_wrap .arrow::after{content:''; display: block; position: absolute;top:20%;left:50%; width: 3.4vw;margin-left: -1.7vw; height:1.8vw;background-image: url(/images/mo_arrow.png); background-size: contain;} .mo_otc_new_banner .arrow_wrap .arrow::after{animation: otc-banner-arrow-movement 2s ease-in-out infinite} .mo_otc_new_banner .arrow_wrap .arrow::before{animation: otc-banner-arrow-movement 2s 1s ease-in-out infinite} .mo_otc_new_banner .main_banner{padding : 5vw 3vw 0;overflow: hidden;} .mo_otc_new_banner .main_banner h6{margin: 0 auto; width: 62%;} .mo_otc_new_banner .main_banner .content{position: relative;width: 100%;} .mo_otc_new_banner .main_banner .content .house{position: relative; width: 17vw; margin-top: -1.5vw;} .mo_otc_new_banner .main_banner .content .house img{position: relative;z-index: 2;} .mo_otc_new_banner .main_banner .content .house::after{content:'';position: absolute;z-index: 1; bottom:-2vw;left:-2vw;width:21vw;height:21vw; background-color: rgba(255,255,255,0.10);border-radius: 100%;} .mo_otc_new_banner .main_banner .content .rail_track{position: absolute;top:6vw; left:6vw;} .mo_otc_new_banner .main_banner .content .rail_track .train{position: absolute; top:5.5vw; left:-5vw; width:12vw; height:4.5vw;} .mo_otc_new_banner .main_banner .content .rail_track .train .money{position: absolute;z-index: 1; left:0.4vw;bottom:2vw; transform:rotate(-20deg);} .mo_otc_new_banner .main_banner .content .rail_track .train .money i{position: absolute;z-index: 1; left:0;bottom:-0.6vw; display: inline-block; width: 4.5vw;height: 3.3vw;background-image: url(/images/otc_banner_money.png);background-size: contain;opacity: 0;transform: translateY(-2vw);} .mo_otc_new_banner .main_banner .content .rail_track .train i:nth-of-type(2){bottom:1.2vw;} .mo_otc_new_banner .main_banner .content .rail_track .train i:nth-of-type(3){bottom:3.2vw;} .mo_otc_new_banner .main_banner .content .rail_track .train img{position: relative;z-index: 2;} .mo_otc_new_banner .main_banner .content.active .rail_track .train i{opacity: 1; transform: translateY(0);} .mo_otc_new_banner .main_banner .content.active .rail_track .train i:nth-of-type(1){transition: all 0.2s 0.5s linear;} .mo_otc_new_banner .main_banner .content.active .rail_track .train i:nth-of-type(2){transition: all 0.2s 0.7s linear;} .mo_otc_new_banner .main_banner .content.active .rail_track .train i:nth-of-type(3){transition: all 0.2s 0.9s linear;} .mo_otc_new_banner .main_banner .content .rail_track .fall{position: absolute;top:-7%; left:30%; width: 36.4vw; height: 15vw; background-image: url(/images/otc_banner_railtext.png); background-size: contain;} .mo_otc_new_banner .main_banner .content .coin_rain i{position: absolute;width: 5.14vw; height: 9.5vw; background-image: url(/images/otc_banner_coin2.png); background-size: contain;opacity: 0;transition: opacity 0.2s linear;animation : otc-banner-rain 0.8s linear infinite;} .mo_otc_new_banner .main_banner .content .coin_rain i:nth-child(2n){height:11.4vw; background-image: url(/images/otc_banner_coin1.png);} .mo_otc_new_banner .main_banner .content .coin_rain i:nth-of-type(1){top:5%;left:57%;transform:scaleX(-1);} .mo_otc_new_banner .main_banner .content .coin_rain i:nth-of-type(2){top:30%;right:5%; animation-delay : 0.2s} .mo_otc_new_banner .main_banner .content .coin_rain i:nth-of-type(3){top:0;left:84%; animation-delay : 0.4s} .mo_otc_new_banner .main_banner .content .coin_rain i:nth-of-type(4){top:30%;left:37%;transform:scaleX(-1); animation-delay : 0.6s} .mo_otc_new_banner .main_banner .content .arrow_rain{opacity: 0.16;} .mo_otc_new_banner .main_banner .content .arrow_rain i{position: absolute;right:20%;top:-20%; width: 6.25vw; height:12.9vw; background-image: url(/images/otc_banner_decrease.png);background-size: contain;animation : otc-banner-rain-arrow 1s linear infinite;} .mo_otc_new_banner .main_banner .content .arrow_rain i:nth-of-type(2){right:17.5%;top:-14%; width: 3.6vw;height:7.2vw;animation-delay : 0.3s} .mo_otc_new_banner .main_banner .content .arrow_rain i:nth-of-type(3){right:13%;top:12%; width:4.4vw;height:9.3vw;animation-delay : 0.6s} .mo_otc_new_banner .form_area{font-family:'NotoSansKR',sans-serif; } .mo_otc_new_banner .form_area .inner{margin-top: 10vw;} .mo_otc_new_banner .form_area .title{text-align: center;} .mo_otc_new_banner .form_area .title h5{color:#212121; font-size:7.2vw;font-family: 'NanumSquare',sans-serif; font-weight: 700;} .mo_otc_new_banner .form_area .title p{color:#777;font-size:4.1vw;} .mo_otc_new_banner .form_area .title h5::after{content: '보험리모델링 무료상담 신청';} .mo_otc_new_banner .form_area .title p.form_desc:nth-of-type(1){margin-top: 5vw;} .mo_otc_new_banner .form_area .title p.form_desc:nth-of-type(1)::before{content: '내가 가입한 모든 보험을 분석해';} .mo_otc_new_banner .form_area .title p.form_desc:nth-of-type(2){margin-bottom: 5vw;} .mo_otc_new_banner .form_area .title p.form_desc:nth-of-type(2) strong::before{content: '전문가가 꼼꼼하게 진단';} .mo_otc_new_banner .form_area .title p.form_desc:nth-of-type(2)::after{content: '해드립니다.';} .mo_otc_new_banner .form_area .formName label, .mo_otc_new_banner .form_area .formBirth label, .mo_otc_new_banner .form_area .formPhone .select_wrap, .mo_otc_new_banner .form_area .formPhone .select_wrap+label{border-radius: 0.695vw;border:1px solid #ccc;} .mo_otc_new_banner .form_area .loadForm form [data-type=name] {width: 70%;} .mo_otc_new_banner .form_area .loadForm form [data-type=gender] {clear: none;color:#fff; margin-left: 2%; margin-top: 0; width: 28%;} .mo_otc_new_banner .form_area .loadForm form [data-type=gender] label {overflow: visible; border-width: 0; border-color: transparent;} .mo_otc_new_banner .form_area .loadForm form [data-type=gender] label em {border-width: 0.5vw; border-color: inherit;} .mo_otc_new_banner .form_area .loadForm form [data-type=gender] label:nth-child(1) em {border-right: 0; border-radius: 1vw 0 0 1vw;} .mo_otc_new_banner .form_area .loadForm form [data-type=gender] label:nth-child(2) em {border-left: 0; border-radius: 0 1vw 1vw 0;} .mo_otc_new_banner .form_area .loadForm form [data-type=gender] label :checked~em{background-color: var(--fomrColor);border-color: var(--fomrColor);} .mo_otc_new_banner .form_area .loadForm form [data-type=gender] label em{background-color: #bfbfbf;} .mo_otc_new_banner .form_area .loadForm form [data-type=agree] .agreeText{color:#777; font-size:3.5vw} .mo_otc_new_banner .form_area .loadForm form [data-type=agree] .agreeText i{margin-left: 1vw;} .mo_otc_new_banner .form_area .loadForm form [data-type=agree] .agreement :checked~span{background-color: var(--fomrColor);} .mo_otc_new_banner .form_area .loadForm form [data-type=phone] .select_wrap{padding-right:0;width: 33%;} .mo_otc_new_banner .form_area .loadForm form [data-type=phone] .select_wrap+label{margin-left: 2%;width: 65%;} .mo_otc_new_banner .form_area .loadForm form [data-type=phone] .select_wrap i{left:78%;} .mo_otc_new_banner .form_area .loadForm form[data-calc=false] .submit{position: relative; margin-top: 10vw; height:13.8vw; background-color: var(--fomrColor);border-radius: 100px;box-shadow: 0 2px 20px rgba(0,0,0,0.2) ;} .mo_otc_new_banner .form_area .loadForm form[data-calc=false] .submit::before{content: '보험리모델링 신청하기';font-size:4.167vw;font-weight: 500;} .mo_otc_new_banner .form_area .loadForm form[data-calc=false] .submit::after{content:'';position:absolute; top:52%;right:21%;width: 3.4vw;height: 3.4vw; background-image: url(/images/mo_arrow_white.png);background-size: contain; transform:translate(-50%, -50%)} .mo_otc_new_banner .form_area .loadForm::after{content: '고객정보는 당사 외 제3자에게 절대 제공하지 않습니다.';position: absolute;left:4.444vw;bottom:17%;color:#777;font-size:3.5vw} .mo_otc_new_banner .form_area .loadForm form[data-focus-action=true] .formRow label::before, .mo_otc_new_banner .form_area .loadForm form[data-focus-action=true] .formRow label::after{left:3vw;} .mo_otc_new_banner .form_area .loadForm form[data-focus-action=true] .formRow.focused[data-size="0"] label::before, .mo_otc_new_banner .form_area .loadForm form[data-focus-action=true] .formRow.focused[data-size="0"] label::after, .mo_otc_new_banner .form_area .loadForm form[data-focus-action=true] .formRow:not([data-size="0"]) label::before, .mo_otc_new_banner .form_area .loadForm form[data-focus-action=true] .formRow:not([data-size="0"]) label::after{top:10%;} .mo_otc_new_banner.active{height: 130vw;background-color:#f2f3f6;transition:height 0.4s linear,background-color 0.4s linear;} .mo_otc_new_banner.active .arrow_wrap{transform: rotate(180deg);} .mo_otc_new_banner.down{height: 10vw;transition:all 0.4s linear;} .mo_otc_new_banner.down .main_banner{opacity: 0;transition:all 0.4s linear;} .mo_otc_new_banner.down .close{display: none;} .mo_otc_new_banner.active .main_banner{display: none;} .mo_otc_new_banner.active .close{top:-6%;} @keyframes otc-banner-arrow-movement { 0% {opacity: 0;top: 50%;} 70% {opacity: 1;} 100% {opacity: 0;} } @keyframes otc-banner-rain { 0% {opacity: 0;margin-top: -8vw;} 40% {opacity: 1;margin-top: 0;} 100% {opacity: 0;margin-top: 15vw;} } @keyframes otc-banner-rain-arrow { 0% {opacity: 0;margin-top: -4vw;} 30% {opacity: 1;margin-top: 0;} 100% {opacity: 0;margin-top: 8vw;} } /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ .familyMap_pc {position: relative; padding-top: 80px; height: 600px; font-family: 'NotoSansKR'; background-color: #f7f6f6; background-image: url(/images/bg01.png);} .familyMap_pc canvas {position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;} .familyMap_pc h3 {font-size: 33px; text-align: center;} .familyMap_pc h3 strong {display: block;} .familyMap_pc h3 span {display: block;} .familyMap_pc ul {overflow: hidden; margin-top: 70px;} .familyMap_pc ul li {position: relative; float: left; padding: 20px 30px 20px 134px; width: 32%; background-image: url(/images/ico01.png); background-position-x: 95%; cursor: pointer;} .familyMap_pc ul li:hover {background-image: url(/images/ico02.png);} .familyMap_pc ul li+li:not(:nth-child(3n+1)) {margin-left: 2%;} .familyMap_pc ul li:nth-child(3n)~li {margin-top: 3%;} .familyMap_pc ul li::before {content: ""; position: absolute; top: 50%; left: 20px; transform: translateY(-50%); width: 100px; height: 100px; background-color: #fff; background-size: contain; border: 4px solid transparent; border-radius: 50%; box-shadow: 0 3px 6px rgba(0,0,0,0.25);} .familyMap_pc ul li:hover::before {border-color: #487de1;} .familyMap_pc ul li[data-keyword=cancer]::before {background-image: url(/images/keywords_cancer.png);} .familyMap_pc ul li[data-keyword=zero]::before {background-image: url(/images/keywords_zero.png);} .familyMap_pc ul li[data-keyword=prevalence]::before {background-image: url(/images/keywords_prevalence.png);} .familyMap_pc ul li[data-keyword=nursing]::before {background-image: url(/images/keywords_nursing.png);} .familyMap_pc ul li[data-keyword=health]::before {background-image: url(/images/keywords_health.png);} .familyMap_pc ul li[data-keyword=kids]::before {background-image: url(/images/keywords_kids.png);} .familyMap_pc ul li[data-keyword=silbi]::before {background-image: url(/images/keywords_silbi.png);} .familyMap_pc ul li strong {display: block; color: #020219; font-size: 25px;} .familyMap_pc ul li:hover strong {color: #2b64d0;} .familyMap_pc ul li[data-keyword=cancer] strong:empty::after {content:"암보험";} .familyMap_pc ul li[data-keyword=zero] strong:empty::after {content:"저해지보험";} .familyMap_pc ul li[data-keyword=prevalence] strong:empty::after {content:"유병자보험";} .familyMap_pc ul li[data-keyword=nursing] strong:empty::after {content:"간병보험";} .familyMap_pc ul li[data-keyword=health] strong:empty::after {content:"건강보험";} .familyMap_pc ul li[data-keyword=kids] strong:empty::after {content:"자녀보험";} .familyMap_pc ul li[data-keyword=silbi] strong:empty::before {content: "실손의료비보험";} .familyMap_pc ul li span {display: block; color: #333; font-size: 16px; font-weight: 700;} .familyMap_pc ul li:hover span {color: #487de1;} /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ .familyMap_mo {} .familyMap_mo img {display: block; width: 100%;} .familyMap_mo ul {padding: 3vw 0 30vw; background-color: #f7f6f6; border-top-left-radius: 12vw;} .familyMap_mo ul li {position: relative; padding: 3.2vw 5.5vw 3.2vw 24vw; background-size: 3vw; background-image: url(/images/ico01.png); background-position-x: 95%;} .familyMap_mo ul li::before {content: ""; position: absolute; top: 50%; left: 5.5vw; transform: translateY(-50%); width: 16vw; height: 16vw; background-color: #fff; background-size: contain; border-radius: 50%;} .familyMap_mo ul li[data-keyword=cancer]::before {background-image: url(/images/keywords_cancer.png);} .familyMap_mo ul li[data-keyword=zero]::before {background-image: url(/images/keywords_zero.png);} .familyMap_mo ul li[data-keyword=prevalence]::before {background-image: url(/images/keywords_prevalence.png);} .familyMap_mo ul li[data-keyword=nursing]::before {background-image: url(/images/keywords_nursing.png);} .familyMap_mo ul li[data-keyword=health]::before {background-image: url(/images/keywords_health.png);} .familyMap_mo ul li[data-keyword=kids]::before {background-image: url(/images/keywords_kids.png);} .familyMap_mo ul li[data-keyword=silbi]::before {background-image: url(/images/keywords_silbi.png);} .familyMap_mo ul li strong {display: block; color: #020219; font-size: 4.2vw;} .familyMap_mo ul li[data-keyword=cancer] strong:empty::after {content:"암보험";} .familyMap_mo ul li[data-keyword=zero] strong:empty::after {content:"저해지보험";} .familyMap_mo ul li[data-keyword=prevalence] strong:empty::after {content:"유병자보험";} .familyMap_mo ul li[data-keyword=nursing] strong:empty::after {content:"간병보험";} .familyMap_mo ul li[data-keyword=health] strong:empty::after {content:"건강보험";} .familyMap_mo ul li[data-keyword=kids] strong:empty::after {content:"자녀보험";} .familyMap_mo ul li[data-keyword=silbi] strong:empty::before {content: "실손의료비보험";} .familyMap_mo ul li span {display: block; color: #333; font-size: 3vw; font-weight: 700;} /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ /* 보험클리닉 공식 온라인 몰 */ .bohumclinicMall_pc {background-color:#fff} .bohumclinicMall_pc .inner {width:1105px !important} .bohumclinicMall_pc .wrap_top {position:relative;z-index:1;height:450px;background-image:url(/images/pc_bg_top.jpg);background-size:cover} .bohumclinicMall_pc .wrap_top::after {content:"";position:absolute;bottom:-21px;left:50%;width:40px;height:21px;background-image:url(/images/pc_bg_top_arr.png);transform:translateX(-50%)} .bohumclinicMall_pc .wrap_top .banner {overflow:hidden;position:absolute;top:0;left:85px;} .bohumclinicMall_pc .wrap_top .banner img {transform:translateY(-100%)} .bohumclinicMall_pc .wrap_top .tit_top {position:absolute;top:40px;left:330px;font-family:"HGGGothicssi";font-size:48px;font-weight:400;line-height:1.3em;letter-spacing:-0.03em;opacity:0;transform:translateY(-20%)} .bohumclinicMall_pc .wrap_top .tit_top::after {content:"";position:absolute;bottom:-10px;left:-62px;width:58px;height:73px;background-image:url(/images/pc_ico_phone.png);animation:bohumclinicMallPcPhone 1s infinite alternate linear;} .bohumclinicMall_pc .wrap_top .tit_top .logo {margin-left:10px;transform:translateY(8px);} .bohumclinicMall_pc .wrap_top .tit_top mark {position:relative;font-weight:800;} .bohumclinicMall_pc .wrap_top .tit_top mark:after {content:"";position:absolute;z-index:-1;left:-4%;top:50%;height:14px;width:0;background-color:#fff35f;transform:translateY(-50%)} .bohumclinicMall_pc .wrap_top .info {position:absolute;top:265px;left:360px;opacity:0;transform:translateY(-20%)} .bohumclinicMall_pc .wrap_top .info .tit {margin-bottom:20px;font-family:"HGGGothicssi";font-size:24px;line-height:1em;letter-spacing:-0.05em} .bohumclinicMall_pc .wrap_top .info .btn_cont {overflow:hidden;display:block;position:relative;width:333px;height:70px;margin:0 auto;border-radius:4em;background-color:#079acf;box-shadow:0 0 10px rgba(0,0,0,.3);} .bohumclinicMall_pc .wrap_top .info .btn_cont span {display:inline-block;position:relative;z-index:1;padding-right:20px;font-family:"HGGGothicssi";font-size:30px;font-weight:800;color:#fff;line-height:1em;letter-spacing:-0.03em;text-shadow:0 0 6px rgba(0,0,0,.3);} .bohumclinicMall_pc .wrap_top .info .btn_cont span::after {content:"";position:absolute;top:50%;right:-20px;width:12px;height:18px;background-image:url(/images/pc_btn_ico.png);transform:translateY(-50%)} .bohumclinicMall_pc .wrap_top .info .btn_cont i {position:absolute;bottom: -530px;left: -260px;width: 700px;height: 700px;background:linear-gradient(to left, #079acf, #1cc4bc, #079acf);animation:bohumclinicMallPcBtnCont 3s infinite linear} .bohumclinicMall_pc .wrap_top .model {position:absolute;bottom:0;;right:-300px;opacity:0;transform:translateX(10%);} .bohumclinicMall_pc .wrap_bottom {position:relative;height:318px;background-image:url(/images/pc_bg_bottom.jpg);background-size:cover} .bohumclinicMall_pc .wrap_bottom .item {position:absolute;top:80px;width:290px;text-align:center;} .bohumclinicMall_pc .wrap_bottom .item.shop {left:116px;} .bohumclinicMall_pc .wrap_bottom .item.visit {right:116px;} .bohumclinicMall_pc .wrap_bottom .item .tit {display:block;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid #fff;font-size:24px;font-weight:400;color:#fff;line-height:1.2em;letter-spacing:-0.03em;text-shadow:0 0 3px rgba(0,0,0,.9)} .bohumclinicMall_pc .wrap_bottom .item .tit em {font-weight:600;text-shadow:0 0 3px rgba(0,0,0,.9)} .bohumclinicMall_pc .wrap_bottom .item .count {font-family:'NotoSansKR';font-size:50px;color:#fff;text-shadow:0 0 3px rgba(0,0,0,.9)} .bohumclinicMall_pc .wrap_bottom .item .count .num {margin-right:5px;font-family:'Godo';font-size:83px;color:#fff;letter-spacing:-0.05em;text-shadow:0 0 3px rgba(0,0,0,.9)} .bohumclinicMall_pc .wrap_bottom .source_count {position:absolute;bottom:15px;left:50%;font-size:16px;color:#fff;transform:translateX(-60%);} /* interaction */ .bohumclinicMall_pc .wrap_top.is-appear .banner img {transform:translateY(0);transition:all 0.4s ease-in-out} .bohumclinicMall_pc .wrap_top.is-appear .tit_top {opacity:1;transform:translateY(0);transition:all 0.4s 0.2s ease-in-out} .bohumclinicMall_pc .wrap_top.is-appear .tit_top mark:after {width:108%;translateY(0);transition:all 0.4s 0.8s ease-in-out} .bohumclinicMall_pc .wrap_top.is-appear .info {opacity:1;transform:translateY(0);transition:all 0.4s 0.4s ease-in-out} .bohumclinicMall_pc .wrap_top.is-appear .model {opacity:1;transform:translateX(0);transition:all 0.4s 0.6s ease-in-out} @keyframes bohumclinicMallPcPhone { 0%, 10%, 20%, 30%, 40%, 50% {transform:rotate(-5deg)} 5%, 15%, 25%, 35%, 45%, 55%, 100% {transform:rotate(5deg)} } @keyframes bohumclinicMallPcBtnCont { 100% {transform:rotate(360deg)} } /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ /* 보험클리닉 공식 온라인 몰 */ .bohumclinicMall_mo {padding-bottom:10.83333333vw;background-color:#fff} .bohumclinicMall_mo .inner {padding:0 8.333333333vw} .bohumclinicMall_mo .banner {overflow:hidden;position:absolute;top:0;left:4.166666667vw;width:21.52777778vw} .bohumclinicMall_mo .tit_section {position:relative;padding-top:2vw;margin-bottom:9.722222222vw;font-family:"Jalnan";font-size:8.333333333vw;color:#57463d;text-align:right;line-height:1.3em} .bohumclinicMall_mo .tit_section::after {content:"";position:absolute;top:18vw;right:-5vw;width:5.416666667vw;height:5.416666667vw;background-image:url(/images/mo_tit_ico1.png);background-size:cover;animation:bohumclinicMallMoTitIco1 0.5s infinite alternate} .bohumclinicMall_mo .tit_section::before {content:"";position:absolute;top:32.5vw;left:17vw;width:6.666666667vw;height:9.305555556vw;background-image:url(/images/mo_tit_ico2.png);background-size:cover;animation:bohumclinicMallMoPhone 1.5s infinite alternate linear} .bohumclinicMall_mo .tit_section .logo {margin-left:1.388888889vw;width:auto;height:16.66666667vw;transform:translateY(1.111111111vw)} .bohumclinicMall_mo .tit_section mark {color:#ff4b2e} .bohumclinicMall_mo .wrap_shop {margin-bottom:10.13888889vw} .bohumclinicMall_mo .wrap_shop .list_count {display:flex;justify-content:space-between;position:relative;margin-bottom:1vw} .bohumclinicMall_mo .wrap_shop .list_count .item {display:flex;align-content:center;opacity:0;transform:translateY(-80%)} .bohumclinicMall_mo .wrap_shop .list_count .item .tit {margin-right:1.388888889vw;font-size:2.5vw;font-weight:700;color:#8c8c8c;text-align:right;line-height:1.5em;} .bohumclinicMall_mo .wrap_shop .list_count .item .tit em {color:#3e3e3e} .bohumclinicMall_mo .wrap_shop .list_count .item .count {font-family:'NotoSansKR';font-size:6.388888889vw;color:#222;line-height:1em} .bohumclinicMall_mo .wrap_shop .list_count .item .count .num {display:inline-block;font-family:'Godo';font-size:6.666666667vw;color:#3e3e3e;line-height:1em;letter-spacing:-0.05em} .bohumclinicMall_mo .wrap_shop .list_count .item.shop .count .num {min-width:10vw} .bohumclinicMall_mo .wrap_shop .list_count .item.visit .count .num {min-width:19.3vw} .bohumclinicMall_mo .wrap_shop .source_count {margin-bottom:3.888888889vw;font-size:2.92vw;text-align:right;line-height:1em;opacity:0;transform:translateY(-80%)} .bohumclinicMall_mo .wrap_shop .list_thumb {display:flex;justify-content:space-between} .bohumclinicMall_mo .wrap_shop .list_thumb .item_thumb {width:32%;opacity:0;transform:translateY(-10%)} .bohumclinicMall_mo .wrap_shop .list_thumb .item_thumb img {border-radius:2.083333333vw} .bohumclinicMall_mo .wrap_info {} .bohumclinicMall_mo .wrap_info .tit {position:relative;margin-bottom:5.833333333vw;opacity:0;transform:translateY(-10%)} .bohumclinicMall_mo .wrap_info .tit img {display:block;width:100%;height:auto} .bohumclinicMall_mo .wrap_info .tit .ico {position:absolute;bottom: -2.5vw;right:5vw;width:14.16666667vw;height:15.83333333vw;background-image:url(/images/mo_info_tit_ico.png);background-size:cover;} .bohumclinicMall_mo .wrap_info .tit .ico::after {content:"";position:absolute;top:1vw;right:0;width:2.638888889vw;height:4.027777778vw;background-image:url(/images/mo_info_tit_phone.png);background-size:cover;animation:bohumclinicMallMoPhone 1.5s infinite alternate linear;} .bohumclinicMall_mo .wrap_info .btn_cont {overflow:hidden;display:block;position:relative;width:100%;height:15.27777778vw;border-radius:10vw;background-color:#ff4b2e;box-shadow:0 0 10px rgba(0,0,0,.3);-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0, 0, 0);opacity:0;transform:translateY(-10%)} .bohumclinicMall_mo .wrap_info .btn_cont span {display:inline-block;position:relative;z-index:1;padding-right:2.777777778vw;font-family:"HGGGothicssi";font-size:5vw;font-weight:800;color:#fff;line-height:1em;letter-spacing:-0.03em;text-shadow:0 0 6px rgba(0,0,0,.3);} .bohumclinicMall_mo .wrap_info .btn_cont span::after {content:"";position:absolute;top:50%;right:-3vw;width:2.5vw;height:3.888888889vw;background-image:url(/images/pc_btn_ico.png);background-size:cover;transform:translateY(-50%)} .bohumclinicMall_mo .wrap_info .btn_cont i {position:absolute;bottom:-100vw;left:-50vw;width:150vw;height:150vw;background:linear-gradient(to left, #ff4b2e, #ff8843, #ff4b2e);animation:bohumclinicMallMoBtnCont 3s infinite linear} /* interaction */ .bohumclinicMall_mo .wrap_shop.is-appear .list_count .item:nth-child(1) {opacity:1;transform:translateY(0);transition:all 0.4s 0s ease-in-out} .bohumclinicMall_mo .wrap_shop.is-appear .list_count .item:nth-child(2) {opacity:1;transform:translateY(0);transition:all 0.4s 0.2s ease-in-out} .bohumclinicMall_mo .wrap_shop.is-appear .source_count {opacity:1;transform:translateY(0);transition:all 0.4s 0.3s ease-in-out} .bohumclinicMall_mo .wrap_shop.is-appear .list_thumb .item_thumb:nth-child(1) {opacity:1;transform:translateY(0);transition:all 0.4s 0.2s ease-in-out} .bohumclinicMall_mo .wrap_shop.is-appear .list_thumb .item_thumb:nth-child(2) {opacity:1;transform:translateY(0);transition:all 0.4s 0.4s ease-in-out} .bohumclinicMall_mo .wrap_shop.is-appear .list_thumb .item_thumb:nth-child(3) {opacity:1;transform:translateY(0);transition:all 0.4s 0.6s ease-in-out} .bohumclinicMall_mo .wrap_info.is-appear .tit {opacity:1;transform:translateY(0);transition:all 0.4s 0.4s ease-in-out} .bohumclinicMall_mo .wrap_info.is-appear .btn_cont {opacity:1;transform:translateY(0);transition:all 0.4s 0.6s ease-in-out} @keyframes bohumclinicMallMoTitIco1 { 0% {opacity:0} 100% {opacity:1} } @keyframes bohumclinicMallMoPhone { 0%, 10%, 20%, 30%, 40%, 50% {opacity:1;transform:rotate(-10deg)} 5%, 15%, 25%, 35%, 45%, 55%, 100% {opacity:1;transform:rotate(10deg)} } @keyframes bohumclinicMallMoBtnCont { 100% {transform:rotate(360deg)} } /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ /* 금소법 */ .financial_ProtectionAct{font-family: 'NotoSansKR',sans-serif;} .financial_ProtectionAct ul {display:flex;flex-wrap:wrap;justify-content:space-between;overflow:hidden;padding:10px 0 40px} .financial_ProtectionAct ul li {margin-top:30px;padding:20px 30px;width:49%;border-radius: 10px; background-color: #eee;} .financial_ProtectionAct ul li:nth-of-type(3){margin-left: 0;} .financial_ProtectionAct ul li .act_icon{width:70px;height:70px;background-size:cover} .financial_ProtectionAct ul li:nth-of-type(1) .act_icon{background-image: url(/images/pc_financial_icon01.png);} .financial_ProtectionAct ul li:nth-of-type(2) .act_icon{background-image: url(/images/pc_financial_icon02.png);} .financial_ProtectionAct ul li:nth-of-type(3) .act_icon{background-image: url(/images/pc_financial_icon03.png);} .financial_ProtectionAct ul li:nth-of-type(4) .act_icon{background-image: url(/images/pc_financial_icon04.png);} .financial_ProtectionAct ul li:nth-of-type(5) .act_icon{background-image: url(/images/pc_financial_icon05.png);} .financial_ProtectionAct ul li:nth-of-type(6) .act_icon{background-image: url(/images/pc_financial_icon06.png);} .financial_ProtectionAct ul li .txt_contents{letter-spacing: -0.04em;} .financial_ProtectionAct ul li .txt_contents strong{display: block;padding-top: 10px;color:#000;font-size: 17px;line-height: 26px;word-break:keep-all;} .financial_ProtectionAct ul li .txt_contents p{margin-top: 8px; max-height: 145px;color:#444;font-size: 16px;font-weight: 400; line-height: 20px;word-break:keep-all;} .financial_ProtectionAct ul li .txt_contents p .line_reak{display: none;} [data-target-device=mo] #protectionAct {padding:0;} [data-target-device=mo] .financial_ProtectionAct .inner {padding:0;} [data-target-device=mo] .financial_ProtectionAct ul{padding:6vw 0 0 0;} [data-target-device=mo] .financial_ProtectionAct ul li{position: relative; clear: both;padding:5.5vw 4vw 5.5vw 7vw; margin-top: 0; margin-left: 0; width: 100%;height: auto;min-height: 29vw; overflow:hidden;border-radius: 0;} [data-target-device=mo] .financial_ProtectionAct ul li>div{float: left;} [data-target-device=mo] .financial_ProtectionAct ul li .act_icon{position: absolute;top:5.5vw;left:7vw; width:11.80555556vw;height:11.80555556vw} [data-target-device=mo] .financial_ProtectionAct ul li:nth-of-type(1) .act_icon{background-image: url(/images/mo_financial_icon01.png);} [data-target-device=mo] .financial_ProtectionAct ul li:nth-of-type(2) .act_icon{background-image: url(/images/mo_financial_icon02.png);} [data-target-device=mo] .financial_ProtectionAct ul li:nth-of-type(3) .act_icon{background-image: url(/images/mo_financial_icon03.png);} [data-target-device=mo] .financial_ProtectionAct ul li:nth-of-type(4) .act_icon{background-image: url(/images/mo_financial_icon04.png);} [data-target-device=mo] .financial_ProtectionAct ul li:nth-of-type(5) .act_icon{background-image: url(/images/mo_financial_icon05.png);} [data-target-device=mo] .financial_ProtectionAct ul li:nth-of-type(6) .act_icon{background-image: url(/images/mo_financial_icon06.png);} [data-target-device=mo] .financial_ProtectionAct ul li .txt_contents{width: 100%;padding-left: 17.64vw;} [data-target-device=mo] .financial_ProtectionAct ul li .txt_contents strong{font-size: 1em;padding-top: 0; line-height: 1.5;} [data-target-device=mo] .financial_ProtectionAct ul li .txt_contents p{height: auto;max-height: none;font-size: 0.9375em;line-height: 1.3; margin-top:2vw;} [data-target-device=mo] .financial_ProtectionAct ul li .txt_contents p .line_reak{display:block;font-size: 0;} [data-target-device=mo] .financial_ProtectionAct ul li:nth-child(odd){background-color: #fff;} /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ /* 이달의 보험종류 */ #theMonthInsure {padding:0 !important} .theMonthInsure {font-family:"NotoSansKR",sans-serif;padding:6.944444444vw 0;background:url(/images/bg.jpg) 0 0 repeat-y;background-size:100%} .theMonthInsure .tit_section {margin-bottom:6.944444444vw;font-size:7.222222222vw;font-weight:bold;color:#fff;text-align:center;line-height:1em} .theMonthInsure .list_insure {} .theMonthInsure .list_insure .link_insure {display:block;position:relative;height:35vw;padding:4.8vw 4.8vw 0 4.8vw;margin-top:2.777777778vw;border-radius:4.17vw;background-color:gray;opacity:0;transform:translateY(30%);transition:all 0.6s cubic-bezier(.58,.01,.23,1)} .theMonthInsure .list_insure .link_insure::after {content:"";position:absolute;bottom:4.17vw;right:4.17vw;width:25vw;height:25vw;background-size:cover} .theMonthInsure .list_insure .link_insure:nth-child(1) {margin-top:0} .theMonthInsure .list_insure .link_insure.bigyo {background-color:#ec5c90} .theMonthInsure .list_insure .link_insure.cancer {background-color:#28dbb3} .theMonthInsure .list_insure .link_insure.child {background-color:#fb9720} .theMonthInsure .list_insure .link_insure.silbi {background-color:#a75cec} .theMonthInsure .list_insure .link_insure.bigyo::after {background-image:url(/images/mo_ico_bigyo.png);} .theMonthInsure .list_insure .link_insure.cancer::after {background-image:url(/images/mo_ico_cancer.png);} .theMonthInsure .list_insure .link_insure.child::after {background-image:url(/images/mo_ico_child.png);} .theMonthInsure .list_insure .link_insure.silbi::after {background-image:url(/images/mo_ico_silbi.png);} .theMonthInsure .list_insure .tit {margin-bottom:4.8vw;font-size:5vw;font-weight:bold;color:#fff;line-height:1em} .theMonthInsure .list_insure .tit .ico {fill:#fff;margin-left:2vw;font-size:0.7em} .theMonthInsure .list_insure .desc {display:flex;align-items:center;height:16.5vw;font-size:3.7vw;color:#fff;line-height:1.4em} .is-appear .theMonthInsure .list_insure .link_insure {opacity:1;transform:rotateY(0);} .is-appear .theMonthInsure .list_insure .link_insure:nth-child(2) {transition-delay:0.2s} .is-appear .theMonthInsure .list_insure .link_insure:nth-child(3) {transition-delay:0.3s} /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ /* 인콜 */ #wrap #inCall, #inCall {padding:0;margin:0} /* 인콜 MO - GNB 버튼 */ [data-imported=incall_mo_gnb] {font-family:"HGGGothicssi";} [data-imported=incall_mo_gnb] .btn_incall {display:flex;justify-content:center;align-items:center;width:48.61vw;height:12.5vw;margin:0 auto;border:0.477777778vw solid #000;font-size:4.166666667vw;font-weight:800;} [data-imported=incall_mo_gnb] .btn_incall .ico {margin-right:1.6vw;height:6vw;font-size:6vw} /* 인콜 MO - A type */ [data-imported=incall_mo_a] {font-family:"NotoSansKR";padding-top:15.27777778vw;height:44.44444444vw} [data-imported=incall_mo_a] .tit_section {margin-bottom:2.8vw;font-size:5vw;color:#262a34;line-height:1.3em;letter-spacing:-0.04em} [data-imported=incall_mo_a] .list_info {} [data-imported=incall_mo_a] .list_info .item_info {display:flex;align-items:center;margin-bottom:1vw} [data-imported=incall_mo_a] .list_info .item_info .tit {display:inline-flex;align-items:center;height:3.888888889vw;padding:0 0.7em;border-radius:2em;font-size:2.5vw;color:#1d2088;line-height:1em;background-color:#fff;} [data-imported=incall_mo_a] .list_info .item_info .desc {padding-left:1.3vw;font-size:2.777777778vw;color:#fff;line-height:1em;} [data-imported=incall_mo_a] .box_phone {position:absolute;bottom:0;right:0;opacity:0;transform:translateX(30%);transition:all 0.6s cubic-bezier(.58,.01,.23,1)} [data-imported=incall_mo_a] .box_phone .ico {fill:#0b9ecb;position:absolute;left:50%;bottom:19vw;font-size:8.888888889vw;transform:translateX(-50%)} [data-imported=incall_mo_a] .box_phone .tit {position:absolute;left:50%;bottom:11.6vw;font-size:4.166666667vw;font-weight:500;color:#3d3d3e;line-height:1em;letter-spacing:-0.07em;white-space:pre;transform:translateX(-50%)} [data-imported=incall_mo_a] .box_phone .number {display:block;position:absolute;left:50%;bottom:5.138888889vw;font-family:"MyriadPro";font-size:5.555555556vw;font-weight:500;color:#0b9ecb;line-height:1em;white-space:pre;transform:translateX(-50%)} [data-imported=incall_mo_a] .box_phone .phone {display:block;width:41.66666667vw;height:auto;} [data-imported=incall_mo_a] .bg {position:absolute;bottom:0;left:0;right:0;z-index:-1;height:34.02777778vw;background-color:#a9a9a9;background-size:cover} [data-imported=incall_mo_a] .btn_incall {display:flex;align-items:center;justify-content:center;position:fixed;bottom:18.4444vw;right:4.4444vw;z-index:21;width:11.1111vw;height:11.1111vw;border-radius:50%;background-color:#fff;box-shadow: 0 0 2vw rgba(0,0,0,0.25);} [data-imported=incall_mo_a] .btn_incall .ico {font-size:5vw} .is-appear [data-imported=incall_mo_a] .box_phone {opacity:1;transform:rotateX(0);} /* 인콜 MO - b type */ [data-imported=incall_mo_b] {height:34.44444444vw;font-family:"NotoSansKR";background-color:#f2f2f2;} [data-imported=incall_mo_b] .box_phone {position:absolute;top:5vw;left:7.5vw;text-align:center} [data-imported=incall_mo_b] .box_phone .tit {margin-bottom:1vw;font-size:6.666666667vw;line-height:1em;letter-spacing:-0.06em;} [data-imported=incall_mo_b] .box_phone .number {display:block;font-family:"MyriadPro";font-size:8.333333333vw;font-weight:500;color:#f13c5f;line-height:1em;} [data-imported=incall_mo_b] .list_info {display:flex;justify-content:center;align-items:center;position:absolute;left:50%;bottom:3.75vw;width:91.66666667vw;height:7.5vw;border:0.477777778vw solid #dadada;background-color:#fff;;transform:translateX(-50%);} [data-imported=incall_mo_b] .list_info .item_info {flex-grow:1;flex-shrink:1;flex-basis:auto;position:relative;font-size:3.333333333vw;color:#464646;text-align:center;line-height:1em} [data-imported=incall_mo_b] .list_info .item_info:nth-child(1)::after {content:"";position:absolute;top:50%;right:0;height:3vw;width:0.477777778vw;background-color:#dadada;transform:translateY(-50%)} [data-imported=incall_mo_b] .list_info .model {position:absolute;bottom:100%;right:13%;width:auto;height:19.86111111vw;} [data-imported=incall_mo_b] .btn_incall {display:flex;align-items:center;justify-content:center;position:fixed;bottom:18.4444vw;right:4.4444vw;z-index:21;width:11.1111vw;height:11.1111vw;border-radius:50%;background-color:#fff;box-shadow: 0 0 2vw rgba(0,0,0,0.25);} [data-imported=incall_mo_b] .btn_incall .ico {font-size:5vw} /* 인콜 MO - c type */ [data-imported=incall_mo_c] {height:45.83333333vw;margin:4.444vw;border-radius:3.5vw;font-family:"NotoSansKR";background:linear-gradient(30deg, #3996de, #4dbccd)} [data-imported=incall_mo_c] .inner {padding:0 3vw} [data-imported=incall_mo_c] .box_phone {padding-top:5vw;text-align:center} [data-imported=incall_mo_c] .box_phone .tit {margin-bottom:1vw;font-size:5.833333333vw;color:#fff;line-height:1em} [data-imported=incall_mo_c] .box_phone .ico {fill:#fff;margin-right:1vw;font-size:4.722222222vw;} [data-imported=incall_mo_c] .box_phone .number {display:block;font-family:"MyriadPro";font-size:9.333333333vw;color:#fff;} [data-imported=incall_mo_c] .list_info {position:absolute;left:50%;bottom:3vw;width:calc(100% - 6vw);padding:2.5vw 0 2.5vw 2.5vw;border-radius:3.2vw;background-color:rgba(0,0,0,0.35);transform:translateX(-50%);} [data-imported=incall_mo_c] .list_info .item_info {font-size:4vw;color:#fff} [data-imported=incall_mo_c] .list_info .item_info:nth-child(1) {margin-bottom:1.5vw;} [data-imported=incall_mo_c] .list_info .item_info .ico {display:inline-block;width:auto;height:5vw;margin-right:2vw;vertical-align:middle;} [data-imported=incall_mo_c] .list_info .item_info .colon {padding:0 4vw;} [data-imported=incall_mo_c] .btn_incall {display:flex;align-items:center;justify-content:center;position:fixed;bottom:18.4444vw;right:4.4444vw;z-index:21;width:11.1111vw;height:11.1111vw;border-radius:50%;background-color:#fff;box-shadow: 0 0 2vw rgba(0,0,0,0.25);} [data-imported=incall_mo_c] .btn_incall .ico {font-size:5vw} /* 인콜 PC - GNB 버튼 */ [data-imported=incall_pc_gnb] {display:inline-block;position:relative;height:55px;padding:0 12px;border-radius:5px;background-color:#fff;box-shadow:-2px 2px 0 rgba(0,0,0,.2);} [data-imported=incall_pc_gnb]::before {content:"";position:absolute;left:-10px;top:50%;z-index:1;width:0;height:0;border-top:8px solid transparent; border-bottom:8px solid transparent; border-right:10px solid #fff;transform:translateY(-50%);} [data-imported=incall_pc_gnb]::after {content:"";position:absolute;left:-12px;top:50%;width:0;height:0;border-top:8px solid transparent; border-bottom:8px solid transparent; border-right:10px solid rgba(0,0,0,.2);transform:translateY(-49%);} [data-imported=incall_pc_gnb] .box_number {display:flex;align-items:center;height:100%} [data-imported=incall_pc_gnb] .box_number .ico {margin-right:5px;font-size:27px} [data-imported=incall_pc_gnb] .box_number .number {font-family:"OpenSans";font-size:18px;font-weight:bold;white-space:nowrap;} /* 인콜 PC - a type */ [data-imported=incall_pc_a] {height:200px;font-family:"NanumSquare";background:url(/images/pc_a_bg.jpg) 0 0 no-repeat;background-size:cover} [data-imported=incall_pc_a] .inner {display:flex;align-items:center;} [data-imported=incall_pc_a] .tit_section {flex-grow:1;flex-shrink:1;flex-basis:auto;font-size:30px;color:#fff;line-height:1.4em;opacity:0;transform:translateY(20%);transition:none;text-shadow:0.1em 0.1em 0.05em rgba(0,0,0,.33);} [data-imported=incall_pc_a] .tit_section em {font-size:36px;text-shadow:0.1em 0.1em 0.05em rgba(0, 0, 0, 0.33);} [data-imported=incall_pc_a] .box_phone {flex-grow:1;flex-shrink:1;flex-basis:auto;opacity:0;transform:translateY(20%);transition:none} [data-imported=incall_pc_a] .box_phone::after {content:'';display:block;visibility:hidden;height:0;font-size:0;clear:both} [data-imported=incall_pc_a] .box_phone .tooltip {display:flex;justify-content:center;align-items:center;float:left;width:92px;height:92px;margin-right:10px;background:url(/images/pc_a_tooltip.png) 0 0 no-repeat;background-size:cover} [data-imported=incall_pc_a] .box_phone .tooltip .ico {font-size:49px} [data-imported=incall_pc_a] .box_phone .tit {padding-top:5px;margin-bottom:5px;font-size:24px;color:#fff;line-height:1em} [data-imported=incall_pc_a] .box_phone .number {font-size:58px;font-weight:bold;line-height:1em;letter-spacing:-0.04em;white-space:nowrap} [data-imported=incall_pc_a] .list_info {display:inline-flex;flex-direction: column;align-items:flex-end;flex-grow:1;flex-shrink:1;flex-basis:auto;opacity:0;transform:translateY(20%);transition:none} [data-imported=incall_pc_a] .list_info .item_info {display:flex;align-items:center;width:240px} [data-imported=incall_pc_a] .list_info .item_info:nth-child(1) {margin-bottom:7px} [data-imported=incall_pc_a] .list_info .item_info .tit {margin-right:10px;padding:5px 10px;border-radius:3px;font-size:18px;line-height:1em;background-color:#fff;} [data-imported=incall_pc_a] .list_info .item_info .desc {font-size:20px;font-weight:bold;color:#fff;line-height:1em;text-shadow:0.1em 0.1em 0.05em rgba(0,0,0,.33);} .is-appear [data-imported=incall_pc_a] .tit_section {opacity:1;transform:rotateY(0);transition:all 0.6s cubic-bezier(.58,.01,.23,1);} .is-appear [data-imported=incall_pc_a] .box_phone {opacity:1;transform:rotateY(0);transition:all 0.6s 0.2s cubic-bezier(.58,.01,.23,1);} .is-appear [data-imported=incall_pc_a] .list_info {opacity:1;transform:rotateY(0);transition:all 0.6s 0.4s cubic-bezier(.58,.01,.23,1);} /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ /* 수상내역 */ [data-imported=swipingAwards] {overflow:hidden;position:relative;} [data-imported=swipingAwards] .tit_section {font-size:28px;font-weight:700;text-align:center} /* 수상내역 - .swiper-container */ [data-imported=swipingAwards] .swiper-container, [data-imported=swipingAwards] .swiper-container * {pointer-events:none} [data-imported=swipingAwards] .tit_slide {position:absolute;top:160px;font-size:20px;color:#457dd8} [data-imported=swipingAwards] .tit_slide.right {right:176px} [data-imported=swipingAwards] .tit_slide.left {left:186px} [data-imported=swipingAwards] .trophy {display:block;position:relative;z-index:1;margin:0 auto} [data-imported=swipingAwards] .year {position:absolute;top:154px;left:0;right:0;padding-bottom:20px;color:#21a2de;text-align:center;background:linear-gradient(0deg,#1e61ba,#27c2c6);-webkit-background-clip:text;-webkit-text-fill-color:transparent} [data-imported=swipingAwards] .year .shadow {position:absolute;left: 50%;bottom:0;width: 69%;height: 35px; background-size:cover;transform:translateX(-50%)} [data-imported=swipingAwards] .year i {margin-left:25px;font-family:'CenturyGothic',sans-serif;font-size:343px;font-weight:bold;line-height:1em;letter-spacing:-0.05em} [data-imported=swipingAwards] .year i:nth-of-type(1) {margin-left:0} [data-imported=swipingAwards] _:-ms-fullscreen, :root [data-imported=swipingAwards] .year {background:none} /* 수상내역 - .swiper-pagination */ [data-imported=swipingAwards] .swiper-pagination {position:relative;padding-bottom:20px} [data-imported=swipingAwards] .swiper-pagination::before {content:"";position:absolute;bottom:0;left:50%;width:400%;height:1px;background-color:#dcdee1;;transform:translateX(-50%);} [data-imported=swipingAwards] .swiper-pagination-bullet {width:185px;height:auto;;font-size:16px;text-align:center;background:none} [data-imported=swipingAwards] .swiper-pagination-bullet span::before {content:'';display:block;font-size:16px;;letter-spacing:-0.04em;white-space:pre;} [data-imported=swipingAwards] .swiper-pagination-bullet span::after{display: block;margin-top: 5px;font-size:15px;letter-spacing:-0.05em;transform: skew(-0.1deg);} [data-imported=swipingAwards] .swiper-pagination-bullet strong {display:block;margin-bottom:5px;font-family:'CenturyGothic',sans-serif;font-size:42px;line-height:1em} [data-imported=swipingAwards] .swiper-pagination-bullet-active strong {color:#457dd8} [data-imported=swipingAwards] .swiper-pagination-bullet strong::after {content:'';display:block} [data-imported=swipingAwards] .swiper-pagination-bullet:nth-child(1) span::before {content:'대한민국 소비자 선호도 \A 1위'} [data-imported=swipingAwards] .swiper-pagination-bullet:nth-child(1) span::after {content:'(주최 : 주간동아)'} [data-imported=swipingAwards] .swiper-pagination-bullet:nth-child(1) strong::after {content:'2021'} [data-imported=swipingAwards] .swiper-pagination-bullet:nth-child(2) span::before{content:'한국 소비자만족 지수 \A 1위'} [data-imported=swipingAwards] .swiper-pagination-bullet:nth-child(2) span::after {content:'(주최 : 한경비즈니스)'} [data-imported=swipingAwards] .swiper-pagination-bullet:nth-child(2) strong::after {content:'2020'} [data-imported=swipingAwards] .swiper-pagination-bullet:nth-child(3) span::before {content:'한국 고객만족도 \A 1위'} [data-imported=swipingAwards] .swiper-pagination-bullet:nth-child(3) span::after {content:'(주최 : 한경비즈니스)'} [data-imported=swipingAwards] .swiper-pagination-bullet:nth-child(3) strong::after {content:'2019'} [data-imported=swipingAwards] .swiper-pagination-bullet:nth-child(4) span::before {content:'한국 소비자만족지수\A 1위'} [data-imported=swipingAwards] .swiper-pagination-bullet:nth-child(4) span::after {content:'(주최 : 한경비즈니스)'} [data-imported=swipingAwards] .swiper-pagination-bullet:nth-child(4) strong::after {content:'2019'} [data-imported=swipingAwards] .swiper-pagination-bullet:nth-child(5) span::before {content:'고객감동 브랜드 지수\A 1위'} [data-imported=swipingAwards] .swiper-pagination-bullet:nth-child(5) span::after {content:'(주최 : G밸리뉴스)'} [data-imported=swipingAwards] .swiper-pagination-bullet:nth-child(5) strong::after {content:'2019'} [data-imported=swipingAwards] .swiper-pagination-bullet:nth-child(6) span::before {content:'대한민국 고객만족 \A 브랜드 대상'} [data-imported=swipingAwards] .swiper-pagination-bullet:nth-child(6) span::after {content:'(주최 : 주간동아)'} [data-imported=swipingAwards] .swiper-pagination-bullet:nth-child(6) strong::after {content:'2019'} [data-imported=swipingAwards] .swiper-pagination .bar {position:absolute;bottom:0;z-index:1;width:120px;height:4px;background-color:#457dd8;transition:left 0.3s ease-in-out;} [data-imported=swipingAwards] .swiper-pagination-bullet-active:nth-child(1) ~ .bar {left:77px} [data-imported=swipingAwards] .swiper-pagination-bullet-active:nth-child(2) ~ .bar {left:263px} [data-imported=swipingAwards] .swiper-pagination-bullet-active:nth-child(3) ~ .bar {left:448px} [data-imported=swipingAwards] .swiper-pagination-bullet-active:nth-child(4) ~ .bar {left:636px} [data-imported=swipingAwards] .swiper-pagination-bullet-active:nth-child(5) ~ .bar {left:819px} [data-imported=swipingAwards] .swiper-pagination-bullet-active:nth-child(6) ~ .bar {left:1004px} /* 수상내역 - .swiper-navigation */ [data-imported=swipingAwards] .swiper-navigation {position:absolute;left:0;right:0;top:0;bottom:0;margin:0 -100px} [data-imported=swipingAwards] .swiper-button-black {width:65px;height:65px;border:1px solid #d8dade;border-radius:100%;background-size:auto 20px}