@charset "utf-8"; /*-------------------------------------------------------------------------------- Description: 모바일 main, contents --------------------------------------------------------------------------------- # 메인 : 모바일용 ---------------------------------------------------------------------------------*/ #wrapper {min-width:320px;} /* 메인컨텐츠영역 공통 */ #container.main {padding:5.0rem 2.0rem 20.0rem;} /* 메인1 : 상단 비주얼컨텐츠 */ .main section {max-width:100%;height:auto;} .main section.main-section1 {height:auto;padding:2.5rem 0 0;} div.banner-visual1 .bx-pager-item > a.active {line-height:inherit;} div.banner-visual1 .list > li {height:20.0rem;padding:3.5rem 0 0;} div.banner-visual1 .list > li .banner-card {max-width:33.5rem;} div.banner-visual1 .list > li > .tit {height:16.5rem;max-width:50%;} div.banner-visual1 .list > li > .tit > strong {font-size:2.3rem;line-height:3.2rem;white-space:nowrap;} div.banner-visual1 .list > li > .tit > strong span + span {padding:0 6.0rem 0 0;} div.banner-visual1 .list > li > .tit > strong span + span:after {bottom:1.5rem;margin:0 0 0 -5.0rem;} div.banner-visual1 .list > li > .tit > strong + span {display:none;} div.banner-visual1 .list > li.active > .tit > strong span + span:after {width:5.0rem;} /* 메인2 : 보험료계산 */ .main section.main-section2 {height:auto;padding:0 0 2.0rem;} .main section.main-section2:before {content:'';display:block;width:100%;height:0;padding:42% 0 0;} .main-section2:after {left:-2.0rem;width:100vw;margin:0;background-position:10% right;}/* background-position:10% 0; 백그라운드 이미지 포지션 수정 - 200211 */ .main-section2 h2 {font-size:2.7rem;line-height:3.2rem;} .main-section2 h2 + p {margin:1.0rem 0 0;font-size:1.4rem;line-height:1.8rem;} .main-section2 h2 + p br {display:block;} div.label-scroll .list.icon-pro1 label span span {font-size:1.2rem;display:block;margin:0;padding:0;width:55px;} div.label-scroll .list.icon-pro1 label:before {width:2.5rem;height:2.5rem;background-position:0 -2.5rem;background-size:30.0rem 30.0rem;} div.label-scroll .list.icon-pro1 label.ic0:before {background-position:-144px -72px;} div.label-scroll .list.icon-pro1 label.ic1:before {background-position:-36px -72px;} div.label-scroll .list.icon-pro1 label.ic2:before {background-position:-72px -72px;} div.label-scroll .list.icon-pro1 label.ic3:before {background-position:-108px -72px;} div.label-scroll .list.icon-pro1 label.ic4:before {background-position:-181px -72px;} .form-calculator {position:static;width:auto;margin:-10.0rem auto 0;background:#fff;text-align:center;box-shadow:0 5px 40px rgba(0,0,0,0.2);-ms-transform:translateX(0%);-webkit-transform:translateX(0%);transform:translateX(0%);max-width:45%;} .form-calculator div.calculator_info > input {height:5.0rem;font-size:1.4rem;padding:1.2rem 0.4rem 1.2rem 1.8rem;width:50%}/* 20200401 보험료 계산하기 버튼 수정 */ .form-calculator .label-icon1 {padding:0.8rem 0.5rem 0.7rem;} .form-calculator .label-icon1 label { border:0;width:50%;min-width:70px;} /* 20200317 메인보험료 계산하기 수정 */ .form-calculator .label-icon1 label > span {font-size:1.4rem;} .form-calculator .label-icon1 label:first-child > input + span:before {background-position:-3rem -18.0rem;} /* 20200519 - 남자여자 수정 */ .form-calculator .label-icon1 label:last-child > input + span:before {background-position:0 -18.0rem;} /* 20200519 - 남자여자 수정 */ .form-calculator .label-icon1 label:first-child > input:checked+ span:before {background-position:-3rem -24.0rem;} /* 20200519 - 남자여자 수정 */ .form-calculator .label-icon1 label:last-child > input:checked + span:before {background-position:0 -24.0rem;} /* 20200519 - 남자여자 수정 */ .form-calculator .btn button {height:5.0rem;font-size:1.4rem;line-height:4.8rem;} .form-calculator .btn button:before {content:'';display:inline-block;width:30px;height:30px;margin:1.0rem 1.5rem 0 0;vertical-align:top;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Svpba2_20200716.cat) no-repeat -324px 0;background-position:-324px 0;background-size:360px 360px;}/* 20200317 보험계산하기 버튼 수정 */ /* 20181105 포인트 환급, 20190528 - 위치수정*/ .form-calculator .tips {width:7.3rem; height:7.0rem; top:-48px; left:65.98%; background-size:auto 70px; font-size:1.2rem; padding-top:3.5rem;} .form-calculator .tips .close { top:50px; left:45px; width:15px; height:15px; background-size:15px auto; } .form-calculator .tips2 {width:7.3rem; height:7.0rem; top:-48px; left:36.98%; background-size:auto 70px; font-size:1.2rem; padding-top:3.5rem;} @media (orientation: landscape) { .form-calculator .tips { left:63.8%; } } /* 기기별 사이즈 조정 - 20200401 보험료계산 생년월일 수정*/ @media only screen and (max-width: 320px){ .form-calculator div.calculator_new > input, .form-calculator div.calculator_info > input {width:45%;}/* 20200813 보험료 계산하기 버튼 수정 */ .form-calculator .label-icon1 input {padding:0;} } @media only screen and (min-width: 375px){ .form-calculator .label-icon1 input {padding:0;width:40%;} } /* 메인3 : 계산결과 */ .main section.main-section3:before, .main section.main-section3:after {height:30.0rem;margin:0;} .main section.main-section3:before {left:3.0rem;} .main section.main-section3:after {right:3.0rem;} div.list-product1 {font-size:1.4rem;padding:0 3.0rem;} div.list-product1:before {left:3.0rem;right:3.0rem;width:auto;height:30.0rem;margin:auto;} div.list-product1 .list > li {height:30.0rem;padding:3.0rem 2.0rem 0;/*font-size:1.4rem;line-height:2.0rem;*/} div.list-product1 .list > li > em:first-child {font-size:1.4rem;} div.list-product1 .list > li > .tit {margin:0 0 1.0rem;font-size:2.4rem;line-height:3.0rem;} div.list-product1 .list > li > .tit i {font-size:1.7rem;line-height:1.5rem;display:block;} /* 대중교통안전보험 220321 */ div.list-product1 .list > li > .tit > b {margin:0.4rem 0 0;font-size:1.4rem;} div.list-product1 .list > li > em:first-child + .tit {margin-top:0.5rem;} div.list-product1 .list > li > .con {margin:1.0rem 0;/*font-size:1.4rem;line-height:2.0rem;*/} div.list-product1 .list > li > .con > ul, div.list-product1 .list > li > .con > p:only-child {max-width:70%;} div.list-product1 .list > li > .con > ul {padding:0.5rem 0;} div.list-product1 .list > li > .con > ul > li:first-child span + span {font-size:1.5rem;} div.list-product1 .list > li > .btn {left:2.0rem;right:2.0rem;bottom:4.0rem;line-height:3.8rem;} div.list-product1 .list > li.active > .con ~ .btn {bottom:2.8rem;} div.list-product1 .list > li.active > .con > ul + p {margin:0.8rem -1.5rem 0;font-size:1.3rem;line-height:1.7rem;} div.list-product1 .bx-wrapper .bx-viewport {overflow:hidden !important;} div.list-product1 .bx-controls {padding:2.0rem 0;} div.list-product1 .list > li .tips { width:6.5rem; height:6.4rem; top:10%; left:50%; margin-left:5.5rem; padding-top:1.25rem; font-size:1.2rem; line-height:1.4rem; } /* 20181105 포인트 환급*/ div.list-product1 .list > li .tips2 { width:6.5rem; height:6.4rem; top:10%; left:51.8%; margin-left:5.5rem; padding-top:1.25rem; font-size:1.2rem; line-height:1.4rem; } /* 20181105 포인트 환급*/ /* 200521 신상품 계산결과 ------------------------------------------------------- */ .list-product_new .list .tit {font-size:2.75rem;letter-spacing:-0.3rem;} .list-product_new .list .box {display:table;width:100%;margin:0;} .list-product_new .list .box:last-child {margin-top:2.0rem;} .list-product_new .list .box .btn {overflow:hidden;display:table;width:100%;max-width:40.0rem;margin:2.0rem 0;border-spacing:0.5rem 0;border-collapse:separate;} .list-product_new .list .box .btn > a {display:table-cell;width:33%;padding:0;line-height:1.8rem;vertical-align:middle;} .list-product_new .list > li {float:left;width:100%;} .list-product_new .list .box .selectbox {min-width:14.0rem;} .list-product_new .list li:last-child .box ul li span.box_text {min-width:14.0rem;} .q_box {padding:2.0rem;width:100%;margin:1.0rem 0 0 0;} .mes-info3.m1.box2 {margin:2.0rem 0 0;} /* 200305 암보험 계산결과 갱신형/비갱신형 */ .list-product3 {display:none} /* 200305 암보험 계산결과 갱신형/비갱신형 toggle */ .wrap-result .toggle-list {display:table;width:100%;margin:0} .wrap-result .toggle-list li {display:table;width:100%;margin-bottom:2.0rem} .wrap-result .toggle-list .toggle-tit:before, .wrap-result .toggle-list .toggle-con:before {display:none} .wrap-result .toggle-list .toggle-tit .tit {display:block;height:40px;letter-spacing:-0.5rem;font-weight:normal;color:#000;line-height:3.0rem;border-bottom:0.2rem solid #2e3133;font-size:2.4rem;margin-bottom:1.0rem;} .wrap-result .toggle-list .toggle-tit .tit a {color:#0081d1;} .wrap-result .toggle-list .toggle-tit span {font-size:1.4rem;float:right;color:#666;text-align:right;letter-spacing:-0.2rem;width:170px;} .wrap-result .toggle-list .toggle-tit span span {font-size:2.0rem;color:#0081d1;float:right;text-align:right;margin-right:30px;letter-spacing:-0.1rem;width:90px;} .wrap-result .toggle-list .toggle-tit a {display:block;padding:1.3rem;font-size:1.4rem;color:#0081d1} .wrap-result .toggle-list .toggle-tit a:before, .wrap-result .toggle-list .toggle-tit a:after {content:'';display:block;position:absolute;top:28px;font-size:5.0rem;-webkit-transition:all 0.4s;transition:all 0.4s;} .wrap-result .toggle-list .toggle-tit a:before {right:2.0rem;} .wrap-result .toggle-list .toggle-tit a:after {right:2.7rem;} .wrap-result .toggle-list .toggle-tit .product_info {display:block;border-radius:0.5rem;border:1px solid #e6edf2;background-color:#f6f7f8;padding:0.5rem 0.5rem 0.5rem 0;margin:0} .wrap-result .toggle-list .toggle-tit .product_info p.mes-info2 {margin:0 0 0.5rem 0.8rem;line-height:1.6rem;font-size:1.4rem;padding:0.2rem 0 0 2.0rem} .wrap-result .toggle-list .toggle-tit ul {display:table;width:100%;margin:0;padding:0} .wrap-result .toggle-list .toggle-tit ul li {display:block;float:left;width:100%;margin:1.0rem 2.0rem 0;padding:0 1.0rem} .wrap-result .toggle-list .toggle-con {padding:0;margin:0 2.0rem;} .wrap-result .toggle-list .toggle-con ul {padding:0 1.0rem;margin:0;width:100%;display:table;border-bottom:1px solid #ced4d9;} .wrap-result .toggle-list .toggle-con ul li {display:block;float:left;width:100%;margin:0;padding:0; line-height:3.3rem} .wrap-result .toggle-list .toggle-con ul li span {display:inline-block;font-size:1.5rem;width:45%;color:#666} .wrap-result .toggle-list .toggle-con ul li span:nth-child(2) {width:55%;float:right;text-align:right;} .wrap-result .toggle-list .toggle-con ul li span.point_c {font-weight:bold;font-size:1.5rem;color:#ff8800;} .wrap-result .toggle-list .toggle-con ul li .selectbox {width:55%;float:right;text-align:right;font-size:1.5rem;vertical-align:top;} .wrap-result .toggle-list .toggle-con .btn {overflow:hidden;display:table;width:100%;max-width:40.0rem;margin:2.0rem 0;border-spacing:0.5rem 0;border-collapse:separate;} .wrap-result .toggle-list .toggle-con .btn > a {display:table-cell;width:33%;padding:0;line-height:1.8rem;vertical-align:middle;} @media only screen and (max-width: 360px){ .wrap-result .toggle-list .toggle-con ul li:last-child span:nth-child(1) {letter-spacing:-0.3rem} .wrap-result .toggle-list .toggle-con .btn > a {font-size:1.4rem !important;} .btn2_icon2 label span {font-size:1.4rem !important;padding:0.8rem 1.2rem 0 4.5rem !important;} } /* 토글컨텐츠 */ .toggle-info {position:relative;margin:1.0rem 0;} .toggle-info:before {content:'';position:absolute;left:0;right:0;top:0;bottom:0;display:block;border:0.1rem solid #ced4d9;border-radius:1.0rem;} .toggle-info > dt {position:relative;z-index:1;font-size:1.8rem;line-height:2.3rem;} .toggle-info > dt a {position:relative;display:block;padding:2.2rem 8.0rem 2.2rem 3.0rem;color:#333;} .toggle-info > dt a:after {content:'';display:block;position:absolute;top:50%;right:4.0rem;width:1.4rem;height:1.4rem;border-left:0.2rem solid #333;margin:-1.0rem 0 0;border-bottom:0.2rem solid #333;-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);} .toggle-info > dd {display:none;position:relative;line-height:2.2rem;padding:2.0rem 3.0rem 2.0rem;} .toggle-info > dd:before {content:'';position:absolute;left:3.0rem;right:3.0rem;top:0;border-top:0.1rem dashed #ced4d9;} .toggle-info > dd .mes-info3.num li {font-size:1.5rem;} .toggle-info.active > dt a:after {margin:-0.6rem 0 0;-ms-transform:rotate(135deg);-webkit-transform: rotate(135deg);transform: rotate(135deg);} .toggle-info.active > dd {display:block;} .toggle-info .mes-info2.tit {margin:2.0rem 0 1.0rem;font-size:1.6rem;color:#333;} .toggle-info .sub-txt, .toggle-info > dd .sub-txt .mes-info3.num li {font-size:1.4rem;} /* 메인4 : 이벤트배너 */ div.banner-area1 {padding:0/* 0 6.0rem; 2021-02-15 메인 하단 수정 */} div.banner-area1 .list > li {height:auto;} div.banner-area1 .bx-controls {left:0;right:0;top:100%;margin:-6.0rem 0 0;padding:2.0rem 0;-ms-transform:translateY(0%);-webkit-transform:translateY(0%);transform:translateY(0%);overflow: hidden;display: none;top: 0px;width: 0px;height: 0px;]} div.banner-area1 .bx-controls > .bx-controls-direction, div.banner-area1 .bx-controls > .bx-controls-auto, div.banner-area1 .bx-controls > .bx-controls-auto > .bx-controls-auto-item, div.banner-area1 .bx-controls > .bx-pager, div.banner-area1 .bx-controls > .bx-pager > .bx-pager-item {display:inline-block;} div.banner-area1 .bx-pager-item {margin:0 0 0 0.4rem !important;} /* 메인5 : 공지사항 및 콜센터 */ .main section.main-section5 {padding:0 0 0 13.0rem;} .main-section5 {font-size:1.3rem;} .main-section5 h2 {width:12.0rem;padding:0 0 0 4.0rem;font-size:1.3rem;line-height:1.6rem;} .main-section5 h2:before, .main-section5 h2:after {left:2.0rem;} .main-section5 h2:before {width:1.6rem;height:1.6rem;} .main-section5 h2:after {margin:0.3rem 0.7rem;border-top:0.6rem solid #45494d;} .main-section5 .info {position:relative;display:block;padding:1.4rem 2.0rem 1.4rem 0;background:none;} .main-section5 .info dt, .main-section5 .info dd {display:block;padding:0;} .main-section5 .info dt:first-child + dd {width:100%;} .main-section5 .info dd {max-width:100.0rem;} .main-section5 .info dd ~ dt, .main-section5 .info dd ~ dd {display:none;} .main-section5 .info a {color:#fff;} .main-section5 .info a.link:after {border-left:1.0rem solid #fff;} /* 메인6 : 스마트가이드 */ .main section.main-section6 {margin:1.5rem 0;padding:0;} .main-section6 > p {display:none;} .main-section6 .list-nav {font-size:1.3rem;} /* .main-section6 .list-nav > li {width:46%;width:-webkit-calc(53% - 1.0rem);width:calc(47% - 1.0rem);line-height:5.5rem;margin:0 !important;} */ .main-section6 .list-nav > li[class*="ic"] > a:before {width:2.5rem;height:2.5rem;background-size:30.0rem 30.0rem;} /* .main-section6 .list-nav > li:nth-child(2n) {margin:0 0 0 2.0rem !important;} */ .main-section6 .list-nav > li:nth-child(2n) ~ li {border-top:1px solid #ced4d9;} /* .main-section6 .list-nav > li:last-child {float:right !important;} */ .main-section6 .list-nav > li.ic1 > a:before {background-position:0 -12.0rem;} .main-section6 .list-nav > li.ic2 > a:before {background-position:-3.0rem -12.0rem;} .main-section6 .list-nav > li.ic3 > a:before {background-position:-6.0rem -12.0rem;} .main-section6 .list-nav > li.ic4 > a:before {background-position:-9.0rem -12.0rem;} .main-section6 .list-nav > li.ic5 > a:before {background-position:-12.0rem -12.0rem;} .main-section6 .list-nav > li.ic6 > a:before {background-position:-15.0rem -12.0rem;} .main-section6 .list-nav > li[class*="ic"] > a:before {margin:0 0.5rem 0 0;} /* 메인7 : 기업공신력 수정 2021-02-15 ------------------------------------------------------- */ .main-section7 {padding:2.0rem 0;} .banner-area2 {font-size:1.3rem;margin:0 -1.0rem;} .banner-area2 .list > li {float:left;width:100%;/*width:-webkit-calc(50% - 0.5rem);width:calc(50% - 0.5rem);*/display:block;height:auto;text-align:center;margin-bottom:2.0rem;} /* .banner-area2 .list > li:nth-child(2n) {float:right;} .banner-area2 .list > li:nth-child(2n) ~ li {margin-top:2.0rem !important;} */ .banner-area2 .list > li:last-child {margin-bottom:0;} .banner-area2 .list > li > span {display:inline-block;text-align:center;} .banner-area2 .list > li > span:first-child {font-size:2.3rem;} .banner-area2 .list > li > span strong {margin:0;} .banner-area2 .list > li > span + span {padding:0;text-align:center;} /* 메인 : 제휴배너 ------------------------------------------------------- */ div.banner-area3 .list a {display:block;width:100%;height:0;padding:20% 0 0;} div.banner-area3 .list a img {position:absolute;left:0;right:0;top:0;bottom:0;} /*-------------------------------------------------------------------------------- # 메인 : 분기별설정 ---------------------------------------------------------------------------------*/ @media only screen and (min-width: 768px) and (max-width: 1024px){ /* 메인1 : 상단 비주얼컨텐츠 .main section.main-section1 {height:30.0rem;} */ /* 메인2 : 보험료계산 */ .main section.main-section2:before {padding:8.0rem 0 0;} /* 메인3 : 계산결과 */ .main section.main-section3:before {left:20%;} .main section.main-section3:after {right:20%;} div.list-product1 {padding:0 20%;} div.list-product1:before {left:20%;right:20%;} div.banner-visual1 .list > li > .tit > strong{font-size:2.7rem} } @media only screen and (max-width: 767px) { /* 메인1 : 상단 비주얼컨텐츠 */ div.banner-visual1 .list > li .banner-card {position:relative;left:0;right:0;top:0;margin:0 auto;-ms-transform:translate(0%, -25%);-webkit-transform:translate(0%, -25%);transform:translate(0%, -25%);} div.banner-visual1 .list > li > .tit {max-width:100%;} /* 이강인 추가 메인 베너 글자 잘림현상 수정 20180307*/ /* 메인2 : 보험료계산 */ .main-section2:after {background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Sivfhny_znva1_z.wct) no-repeat 0 50% !important;background-size:100% auto !important;} .form-calculator {margin:3.0rem auto 0;max-width:100%;} .form-calculator_m {margin:3.0rem auto 0;max-width:100%;} } @media only screen and (min-width: 420px) and (max-width: 767px) { .main section.main-section2:before {padding:14.0rem 0 0;} .main-section2:after {height:45.0rem;} /* 이강인 추가 메인 베너 글자 잘림현상 수정 20180307*/ div.banner-visual1 .list > li > .tit > strong{font-size:2.0rem} } @media only screen and (max-width: 419px) { .main-section2:after {width:100vw;height:auto;bottom:11.0rem;margin:0;} } @media only screen and (max-width: 359px) { div.list-product1 .list > li > .btn {left:1.5rem;right:1.5rem;bottom:2.5rem !important;} div.list-product1 .list > li > .btn a {font-size:1.3rem;} } /*-------------------------------------------------------------------------------- # 보험상품 : 모바일용 ---------------------------------------------------------------------------------*/ /* 상품 기본정보 : 비주얼영역 ----------------------------------------------- */ .wrap-basic {height:auto;padding:2.0rem 0 3.0rem;} .wrap-basic:before {left:-2.0rem;right:-2.0rem;top:0;bottom:0;width:auto;margin:0;background-size:100% 100% !important;} .wrap-basic h1 {font-size:2.0rem;line-height:2.4rem;} .wrap-basic h1:before {width:3.0rem;height:3.0rem;background-size:30.0rem 30.0rem;} .wrap-basic h1.farmer {font-size:2.0rem;line-height:2.4rem;} .wrap-basic h1.farmer:before {width:3.0rem;height:3.0rem;background-size:30.0rem 30.0rem;} .wrap-basic h1 span {display:block;} .wrap-basic .txt, .wrap-basic .info, .wrap-basic .txt2 {display:none;} .product1 .wrap-basic:before {background-image:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Scebqhpg%2Sivfhny_cebqhpg1_z.wct);} .product2 .wrap-basic:before {background-image:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Scebqhpg%2Sivfhny_cebqhpg2_z.wct);} .product3 .wrap-basic:before {background-image:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Scebqhpg%2Sivfhny_cebqhpg3_z.wct);} .product4 .wrap-basic:before {background-image:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Scebqhpg%2Sivfhny_cebqhpg4_z.wct);} /* 20190531 추가 */ .product5 .wrap-basic:before {background-image:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Scebqhpg%2Sivfhny_cebqhpg5_z.wct);} /* 190102 : 신상품 추가 */ .product7 .wrap-basic:before {background-image:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Scebqhpg%2Sivfhny_cebqhpg7_z.wct);} /* 200619 : 뇌심장 신상품 추가 */ .product8 .wrap-basic:before {background-image:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Scebqhpg%2Sivfhny_cebqhpg8_z.wct);} /* 20201120 : 쏙쏙골라암 신상품 추가 */ .product9 .wrap-basic:before {background-image:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Scebqhpg%2Sivfhny_cebqhpg9_z.wct);} /* 20210726 : 아나파스면 신상품 추가 */ .product11 .wrap-basic:before {background-image:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Scebqhpg%2Sivfhny_cebqhpg11_z.wct);} /* 20220321 : 안전보험 신상품 추가 */ .product1 .wrap-basic h1:before {background-position:-3.0rem -9.0rem;} .product2 .wrap-basic h1:before {background-position:-6.0rem -9.0rem;} .product3 .wrap-basic h1:before {background-position:-9.0rem -9.0rem;} .product4 .wrap-basic h1:before {background-position:-12.0rem -9.0rem;} .product5 .wrap-basic h1:before {background-position:-15rem -9.0rem; background-size:30rem 30rem;} /* 190102 : 신상품추가, 20190527 - 아이콘사이즈변경 */ .product6 .wrap-basic h1:before {background-position:-15rem 0.5rem;} .product7 .wrap-basic h1:before {background-position:-9.0rem -27.0rem;} .product8 .wrap-basic h1:before {background-size:310px 310px;background-position:-274px -156px;}/* 20201120 : 쏙쏙골라암 신상품 추가 */ .product9 .wrap-basic h1:before {background-size:330px 330px;background-position:-296px -198px;}/* 20210726 : 아나파스면 신상품 추가 */ .product11 .wrap-basic h1:before {height:3.3rem;background-size:330px 330px;background-position:-225px -295px;}/* 20220321 : 안전보험 신상품 추가 */ /* 20200619 - 뇌심장 */ .area-visual.img3 img {display:block;width:80%;margin:auto;} .area-visual.img3 img:nth-child(2) {width:30%;transform:rotate(90deg);} /* 상품 보험료계산 통일 2020-04-21 -------- ------------------------------------------------- */ /* 보험료계산기 : 공통 */ .wrap-basic .wrap-calculator_n {position:static;width:100%;margin:2.0rem auto 0;} .wrap-basic .wrap-calculator_n .heading {font-size:1.5rem;line-height:4.0rem;} .wrap-basic .wrap-calculator_n .text.inp_n3 {font-size:1.3rem;} .product5 .wrap-calculator1 .text.inp_n3 {font-size:1.3rem;} /* 상품 보험료계산 -------- ------------------------------------------------- */ /* 보험료계산기 : 상품형(공통) */ .wrap-calculator1 {} .wrap-calculator1 .heading {font-size:1.5rem;line-height:4.0rem;} 계산하기 아이콘 삭제 2022-04-05 .wrap-calculator1 .btn button {height:5.0rem;line-height:5.0rem;} .wrap-calculator1 fieldset ul > li {padding:0.7rem 1.0rem;} .wrap-basic .wrap-calculator1 {position:static;width:100%;margin:2.0rem auto 0;} /*.wrap-calculator1 .btn button:before {width:2.5rem;height:2.5rem;margin:1.2rem 1.0rem 0 0;background-position:-21.0rem -27.0rem;background-size:30.0rem 30.0rem;} 2022 보험료계산 버튼 수정 */ /* 200204 보험로계산 이벤트 */ #uiFormCalculator1 dl.event1, #uiFormCalculator1 dl.event2, #uiFormCalculator1 dl.event3 {height:50px} #uiFormCalculator1 dl.event1 dd, #uiFormCalculator1 dl.event2 dd, #uiFormCalculator1 dl.event3 dd {line-height:1.5rem; padding-top:0.75rem;} @keyframes event {0% {transform: translateY(0%);} 50% {transform: translateY(20%);} 100% {transform: translateY(0%);}} @-webkit-keyframes event {0% {-webkit-transform: translateY(0%);} 50% {-webkit-transform: translateY(20%);} 100% {-webkit-transform: translateY(0%);}} /* 보험료계산기 : 상품형 : 레이어팝업 변형 */ .pop-modal1 .wrap-calculator1 {margin:-2.5rem -2.0rem;} .pop-modal1 .wrap-calculator1 fieldset ul > li {padding:1.0rem;} /* 보험료계산기 : 하단형 */ .wrap-calculator2 {padding:2.0rem;} .wrap-calculator2 .heading {margin:0 0 1.8rem;font-size:1.5rem;line-height:1.8rem;font-weight:normal;} .wrap-calculator2 fieldset > ul, .wrap-calculator2 fieldset > div, .wrap-calculator2 fieldset > ul > li {display:block;margin:0;} .wrap-calculator2 fieldset > ul > li + li, .wrap-calculator2 fieldset > .btn {margin:1.0rem 0 0;} .wrap-calculator2 .text, .wrap-calculator2 .selectbox, .wrap-calculator2 button {min-width:100%;width:100%;} .wrap-calculator2 .label-icon1 {width:100%;} /* 보험료계산결과 */ .wrap-result {padding:2.0rem 0 3.5rem;} .wrap-result .heading {margin:0 0 1.5rem;padding:0 0 1.0rem;} .wrap-result .heading h3 {font-size:0;line-height:0;} .wrap-result .heading h3 b {font-weight:bold;font-size:2.0rem;line-height:4.0rem;} .wrap-result .heading h3 b + b:before {content:'·';display:inline-block;text-align:center;margin:0 0.3rem;} .wrap-result .heading h3 b + b ~ b, .wrap-result .heading h3 b + b ~ span {display:none;} .wrap-result .heading .sub {bottom:1.0rem;} .wrap-result .heading .sub .btn-icon1.ic2 {display:inline-block;} .wrap-result .list-product2 + p {text-align:center;font-size:1.3rem;font-weight:bold;} .list-product2 {overflow:hidden;padding:0 0 3.0rem;font-size:1.4rem;max-width:65%;margin:0 auto;} .list-product2 .tab-mobile {display:table;width:100%;margin:0 0 2.0rem;} .list-product2 .tab-mobile a {position:relative;display:table-cell;text-align:center;font-size:2.0rem;line-height:2.8rem;color:#888;} .list-product2 .tab-mobile a.active {font-weight:bold;color:#333;} .list-product2 .tab-mobile a.active:before {content:'';position:absolute;left:10%;right:10%;bottom:0;display:block;height:0.1rem;background:#333;} .list-product2 .tab-mobile span {display:none;} .list-product2 .list > li {width:100%;} .list-product2 .list .tit {margin:0 0 2.5rem;font-size:1.3rem;} .list-product2 .list .tit > span:first-child {display:none;} .list-product2 .list .box {margin:0;padding:2.5rem 9%;} .list-product2 .list .box > ul {padding:0 0 1.0rem;} .list-product2 .list .box > ul:after {left:0;right:0;} .list-product2 .list .box > ul > li > span {line-height:3.5rem;} .list-product2 .list .box > ul > li > span + span {letter-spacing:0;} .list-product2 .list .box > ul > li:first-child > span + span {font-size:1.7rem;} .list-product2 .list .box > ul > li:first-child .label-unit .unit {font-size:1.7rem;} .list-product2 .list .box > ul > li:first-child .label-unit .text {font-size:1.7rem;max-width:10.6rem;letter-spacing:0;} .list-product2 .list .box .text, .list-product2 .list .box .selectbox {min-width:15.0rem;font-size:1.4rem;} .list-product2 .list .box .btn {/*display:block;*/margin:1.0rem 0 0;max-width:100%;} .list-product2 .list > li[aria-hidden="true"] .box:before {border-color:rgba(255,255,255,0);} .list-product2 .list > li[aria-hidden="false"] .box:before {border:0.5rem solid #2e3133;box-shadow:0 5px 20px rgba(0,0,0,0.2);} .list-product2 div.list .box > ul > li:first-child ~ li {width:100%;position:static;} .list-product2 div.list .box > ul > li.etc ul.label-check {padding:0.7rem 1.0rem;} .list-product2 div.list .box > ul > li.etc .label-check {margin:0;} .product1 .list-product2 .list .box > ul > li:first-child .label-unit {padding-right:4.5rem;} /* 20201007 쏙쏙골라 암보험 계산결과 ------------------------------------------------------- */ .list-product4 .list > li{width:100%;position:relative;} .list-product4 .list .box {margin:0;padding:2.0rem;border:none;font-size:1.8rem;position:relative;left:-2.0rem;right:-2.0rem;width:calc(100% + 4.0rem);background:#fff;} .list-product4 .list .box > ul > li.fl-n > ul.ss_list:last-child > li:first-child {border:none;padding-top:1.0rem;} .list-product4 .list .box > ul > li.fl-n > ul.ss_list > li {width:100% !important;float:left;padding:0.5rem 0;} .list-product4 .list .box > ul > li.fl-n > ul.ss_list > li:first-child {width:100%;float:left;font-size:2.0rem;font-weight:bold;border:none;padding:0;} .list-product4 .list .box > ul > li.fl-n > ul.ss_list > li.ss_list_check {float:left;} .list-product4 .list .box > ul > li.fl-n > ul.ss_list span.txt {letter-spacing:-1px;} .list-product4 .list .box > ul > li.fl-n > ul.total_list {width:100%;float:left;} .list-product4 .list .box > ul > li.fl-n > ul.total_list span {margin-left:0;} .list-product4 .list .box > ul > li.fl-n > ul.total_list span:first-child {font-size:1.4rem;width:35%;line-height:120%;letter-spacing:-1px;} .list-product4 .list .box > ul > li.fl-n > ul.total_list span:last-child {float:right;font-size:1.4rem;width:62%;padding-top:0.8rem;;text-align:right;} /* 20201119 쏙쏙암보험 툴팁 추가 */ .list-product4 .tips {width:100%;z-index:50;opacity:1;display:inline-block;} .list-product4 .tips:before {content:'';z-index:1;position:absolute;top:-100.0rem;left:-2.0rem;right:-2.0rem;width:calc(100% + 4.0rem);height:1000%;background:#000;opacity:0.5;} .list-product4 .tips p:first-child {z-index:50;width:20%;text-indent:-9999px;position:absolute;top:1.0rem;right:0;margin:0;padding:2.0rem;} .list-product4 .tips p:first-child:before {content:'';position:absolute;left:50%;top:50%;width:3.4rem;height:0.4rem;margin:-0.1rem 0 0 -1.1rem;background:#fff;-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);} .list-product4 .tips p:first-child:after {content:'';position:absolute;left:50%;top:50%;width:3.4rem;height:0.4rem;margin:-0.1rem 0 0 -1.1rem;background:#fff;-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg);} .list-product4 .tips p:first-child .close {display:block;position:absolute;right:0.5rem;top:-0.5rem;padding:2.5rem;} .list-product4 .tips span.tips_img1 {z-index:50;position:absolute;left:0;top:23.0rem;color:#fff;} .list-product4 .tips span.tips_img2 {z-index:50;position:absolute;right:-1.0rem;bottom:12.5rem;color:#fff;} .list-product4 .tips p:last-child {z-index:50;text-align:center;border-radius:1.0rem;padding:1.0rem 0.8rem;border:0.8rem solid #fff;color:#fff;font-size:2.0rem;font-weight:bold;position:absolute;width:80%;right:10%;left:10%;bottom:4.5rem;color:#fff;} .list-product4 .tips p:last-child .close {display:block;position:absolute;width:106%;left:-1.0rem;top:-2.0rem;padding:4.0rem;} /* 20201120 쏙쏙암보험 팝업스타일 추가 */ .pop-modal2.info .box-type1 ul {width:80%;} .pop-modal2.info .box-type1 ul li.pop_num:before {bottom:0.5rem;} .pop-modal2.info .box-type1 ul li.pop_num:after {bottom:0.5rem;} /* 체크박스 : 수정 */ @media only screen and (min-width: 768px) and (max-width: 1024px){ .list-product4 .tips p {width:65%;margin-left:16%;} .list-product4 .tips p .close {display:block;position:absolute;top:1.0rem;right:7%;width:25px;height:25px; background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Soga_gvcf_pybfr.cat) no-repeat 0 0;} .list-product4 .tips span.tips_img1 {z-index:50;position:absolute;left:19.5%;top:22.0rem;color:#fff;} .list-product4 .tips span.tips_img2 {z-index:50;position:absolute;right:21%;bottom:12.5rem;color:#fff;} } @media only screen and (max-width: 375px) { .list-product4 .list .box > ul > li.fl-n > ul.ss_list ul.label-check label span {font-size:1.45rem;} } @media only screen and (max-width: 360px) { .list-product4 .list .box > ul > li.fl-n > ul.ss_list ul.label-check label > input ~ span:not(:only-of-type) {padding-right:1.0rem;} .list-product4 .list .box > ul > li.fl-n > ul.ss_list ul.label-check label span {font-size:1.35rem;line-height:1.8rem;} .product_tips span {font-size:1.4rem;} .pop-modal2.info .box-type1 ul {width:100%;} } @media only screen and (max-width: 320px) { .list-product4 .list .box > ul > li.fl-n > ul.ss_list ul.label-check label span {font-size:1.2rem;line-height:1.9rem;} } /* 190102 : 보험계산기 추가 */ .product5 .wrap-calculator1 fieldset ul > li{width:100%;float:none;padding:0.7rem 1.0rem !important} .product5 .wraptype-base{text-align: center; font-size:0} .product5 .wraptype-base > *{display:inline-block;} .product5 .wrap-basic .wrap-calculator1 fieldset ul > li:nth-child(2){background:#fff;} .product5 .wraptype-base.type-tbl{display: block;} .product5 .wraptype-base.type-tbl dt{width:100%;font-size:1.4rem;} .product5 .wraptype-base.type-tbl dd{margin-bottom:0.5rem;} .product5 .wraptype-base.type-tbl dd .selectbox{width:100%;height:2.5rem;background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Ssbez_fryrpg2.cat) no-repeat 100% 50%; background-size:8%;font-size:1.3rem;} .wraptype-base .txt-mark{top:6px;} /* 20190521 - 레저보험 */ .area-visual.visual-top {margin-top:3rem;} .product6 .wrap-basic:before {background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Scebqhpg%2Sivfhny_cebqhpg6_z.wct);} /* 20190531 추가 */ /* 중간 네비게이션영역 ------------------------------------------------------ */ .wrap-navigation {height:5.5rem;z-index:-1;} .wrap-navigation .list-select {width:66%;min-width:0 !important;height:5.5rem;border:0;} .wrap-navigation .list-select .headline, .wrap-navigation .list-select ul li a {height:auto;padding-left:2.0rem;font-size:1.5rem;line-height:1.85rem;color:#fff;} .wrap-navigation .list-select .headline {height:5.5rem;line-height:3.7rem;} .wrap-navigation .list-select .headline span {display:block;} .wrap-navigation .btn {width:34%;} .wrap-navigation .btn-recal, .wrap-navigation .btn-menu {width:50%;height:5.5rem;padding:0 0 0 50%;line-height:5.5rem;} .wrap-navigation .btn-recal:before {left:50%;margin:-1.25rem 0 0 -1.25rem;} /* 상품 상세정보 공통 -------------------------------------------------------- */ .wrap-detail {margin:0;} .wrap-detail .tab-nav1 {width:auto;left:-2.0rem;right:-2.0rem;top:0;-ms-transform:translateX(0%);-webkit-transform:translateX(0%);transform:translateX(0%);} .wrap-detail .tab-nav1 > li {width:33%;height:5.5rem;} /* 2022-10 웹접근성 height:5.5rem;*/ .wrap-detail .tab-nav1 > li:nth-child(3) {width:34%;} .product5 .wrap-detail .tab-nav1 > li:last-child {display:none;} /* 2021-04-01 상품개정 상품기본탭 숫자 조정 */ /* 상품 상세정보 탭1,2 : 그거아세요? 특장점 ------------------------------- */ /* 20180719 - 신상품 추가 */ .info-new-con { min-height: 850px; } .info-new-con li > a { margin-bottom: 8px; } .info-new-con li > div { top: 102px; } .info-new-con li > div > span { float: none; margin: 0; background: none; } .info-new-con li > div > span:before { content: ''; display: block; position: absolute; left: 0; width: 100%; height: 1px; background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Scebqhpg%2ScebObahf_yvar2.cat) repeat-x; } .point1.uarr { padding-right: 22px; background-size: 19px auto; } .info-new-con li > div > span:first-child {border-right:none} /* 섹션기본스타일 */ .info-con1 {font-size:1.4rem;line-height:2.0rem;} .info-con1 > li {padding:3.5rem 0;} .info-con1 > li:first-child {padding-top:2.0rem;} .info-con1 > li > .tit {margin:0 0 0.6rem;font-size:2.4rem;line-height:2.8rem;} .info-con1 > li > .tit strong {font-weight:normal;} .info-con1 > li > .tit > span:first-child {margin:0 0 0.5rem;font-size:2.0rem;line-height:2.6rem;} .info-con1 > li > .tit ~ p .mes-info3 {font-size:inherit;} .info-con1 > li .wrap-area1 {margin:2.0rem 0 0;} .info-con1 .wrap-area1.s1 > .area.area-visual:nth-child(2n-1) img {max-width:60%;} .info-con1 .wrap-area1.s2 > .area.area-visual:nth-child(2n-1) img {max-width:80%;} .info-con1 .wrap-area1.s3 > .area.area-visual:nth-child(2n) img {max-width:80%;} .info-con1 > li .sub-info{font-size:11px;} .info-con1 .wrap-area1 > .area.area-visual.mobile{margin-left:0!important} /*li의 첫번째 이미지가 width:100%일 경우 모바일에서만 두번째 li에 적용 */ /* 상품 상세정보 탭3 : 상품정보 -------------------------------------------- */ .wrap-detail .tbl-list {table-layout:fixed;} .wrap-detail .tbl-list th, .wrap-detail .tbl-list td {padding:0.8rem 0.5rem;font-size:1.3rem;line-height:2.0rem;} .wrap-detail .tbl-list tbody th:only-of-type {width:30%;} .wrap-detail .tbl-list td .mes-info3:not(ul), .wrap-detail .tbl-list td ul.mes-info3 > li, .wrap-detail .tbl-list td dl.mes-info3 > dd {font-size:1.3rem;line-height:2.0rem;} .wrap-detail .wrap-area1 .area > p.mes-txt2 {margin:-1.0rem 0 1.0rem;font-size:1.3rem;} .wrap-detail .wrap-area1 .tbl-list td {padding:1.5rem 1.0rem;} /* 배너박스 - 이메일상담 2021-04-01 상품개정 모바일 화면 추가 */ .banner-box {height:100%;padding:2.0rem 12.0rem 2.0rem 2.0rem;} .banner-box .btn {width: 10.0rem;padding-top:9.0rem;} .banner-box .btn:before {top:5.0rem;} @media only screen and (min-width: 568px) and (max-width:1366px) { .banner-box .btn {padding-top:5.0rem;} .banner-box .btn:before {top:2.0rem;} } /* 자주하는 질문 모바일 타이틀 수정 2021-04-01 */ .wrap-detail .mes-headline1 {font-size:2.2rem;line-height:2.4rem;} /* 메인 롤링 상품리스트 타이틀 수정 2021-04-01 */ div.list-product1 .list > li > .tit > span + span + span {font-size:1.8rem;line-height:2.2rem;} /* 상품공통하단 ------------------------------------------------------------- */ .wrap-bottom {} /* 상품템플릿 예외 레이아웃 ----------------------------------------------- */ #container[class*="product"] .wrap-detail > .ui-tab-con {padding:7.5rem 0 3.0rem;} #container[class*="product"] .wrap-detail > .ui-tab-con .tab-sub1 {margin:0 -2.0rem -0.5rem;} .scrolling #container[class*="product"] .wrap-detail > .ui-tab-con {padding-top:13.0rem;} /* 상품템플릿 : 상단 고정 변형스타일 */ .scrolling .wrap-detail .tab-nav1 {left:0;right:0;top:5.5rem;} .scrolling .wrap-navigation {} .scrolling .wrap-navigation .list-select ul {left:0;right:0;position:fixed;padding:0.5rem 0;border:0;border-left:0;border-right:0;border-bottom:0.1rem solid #5c6166;} .pop-modal1.w700 .content iframe, .pop-modal1.w700 .content embed {width:100%;height:auto;} @media only screen and (min-width: 768px) and (max-width: 1024px){ /* 상품 보험료계산 --------------------------------------------------------- */ /* 보험료계산기 : 상품형(공통) */ .wrap-basic .wrap-calculator1 {max-width:65%;} .wrap-basic .wrap-calculator_n {max-width:65%;} .imgList li{float:left;width:40% !important;background-size:auto 23.5rem !important} .list-product4 .list {padding-left:2.5%;} .list-product4 .list .box {max-width:65%;margin:auto;} .pop-modal2.info .box-type1 ul {width:60%;} } @media only screen and (max-width: 767px){ .list-product2 {max-width:100%;} .list-product2 .list .box .btn {display:block;} .list-product2 .list .box .btn > a {display:block;width:100%;padding:1.0rem;font-size:1.4rem;} .list-product2 .list .box .btn > a + a {margin:0.5rem 0 0;} .list-product2 .list .box .btn > a:nth-child(1):nth-last-child(3), .list-product2 .list .box .btn > a:nth-child(2):nth-last-child(2) {float:left;width:49%;width:-webkit-calc(50% - 0.25rem);width:calc(50% - 0.25rem);margin:0 0 0.5rem;} .list-product2 .list .box .btn > a:nth-child(2):nth-last-child(2) {margin-left:0.5rem;} .list-product2 .list .box .btn > a:nth-child(3):nth-last-child(1) {clear:both;} } @media only screen and (max-width: 320px){ .imgList li{background-size:100% 23.5rem !important} .list-product2 .list.type-two .box > ul > li:first-child {font-size:1.6rem;} .list-product2 .list.type-two .box > ul > li:first-child > span + span {font-size:2.0rem;} } @media only screen and (max-width: 360px){ .list-product2 .list.type-two .box > ul > li:first-child {font-size:1.6rem;} .list-product2 .list.type-two .box > ul > li:first-child > span + span {font-size:2.0rem;} } /*-------------------------------------------------------------------------------- # 고객센터 모바일용 ---------------------------------------------------------------------------------*/ /* 고객센터 : 서브메인 */ .submain.cc h1 {padding:1.3rem 0 0.4rem;font-size:2.7rem;text-align:center;} .submain.cc .input-wrap1 {margin:0 auto 2.0rem;width:100%;padding:0;border:0.2rem solid #333;} .submain.cc .input-wrap1 .btn-icon2 {right:0.5rem;top:0;} .submain ~ div[class*="pattern"] {display:none;} .nav-menu {padding:3.0rem 0;} .nav-menu > li {float:left;} .nav-menu > li > a {padding:4.5rem 0 0;} .nav-menu > li > a:before, .nav-menu > li > a:after {display:none;} .submain.cc .info-data1 {margin:-13.0rem 0 0;padding:15.5rem 0 2.5rem;} .submain.cc .wrap-area1 {margin:3.0rem 0 0;} .board-newline {font-size:1.3rem;} .board-newline > li > a {line-height:4.0rem;} .board-newline > li.nodata {line-height:12.0rem;} .board-img > a {height:auto;} .board-img.nodata {line-height:12.0rem;} /* 이벤트 */ .tbl-event li div{display:block;width:100%;padding:1.5rem 0;} .tbl-event li div.text{padding:0 0 1.8rem;width:100%;} .tbl-event .thumb img {width:100%;max-width:520px;margin:0 auto;} .tbl-event .subject {font-size:2.0rem;line-height:2.4rem;margin:0 0 1.0rem;} .tbl-event .date{line-height:1.5em;} .tbl-view.event .subject{width:100%;font-size:2.0rem;padding-left:2.0rem;} /* 20220224 이벤트 이미지 모바일 여백 없애기 */ .tbl-view.event .date, .tbl-view.event .winner{display:inline-block;width:50%;margin-top:1.0rem;text-align:left;font-size:1.4rem;} .tbl-view.event .winner {text-align:right;} .tbl-view.event .tbl-cont{padding:0;} /* 20220224 padding:2.5rem 0 4.0rem; 이벤트 이미지 모바일 여백 없애기 */ .tbl-view.event {margin:0 -2.0rem;}/* 20220224 이벤트 이미지 모바일 여백 없애기 */ /* 이미지 떨어짐 확인 이은실과장 요청 20180123 수정자 이강인 */ .tbl-view.event .event-wrap{margin:0;} /* 2020416 이벤트 이미지 모바일 여백 없애기 */ .tbl-view.event .event-wrap p {padding:0;} .tbl-view.event .event-wrap p.notice {padding:3.0rem;} /* 20220809 이벤트 텍스트 모바일 여백 조정 */ /* 2020416 이벤트 이미지 pc용 숨김 추가 */ .tbl-view.event .event-wrap img[title="pc.jpg"] {display:none} .tbl-view.event .event-wrap img[title="pc.png"] {display:none} .tbl-view.event .event-wrap img[title="mobile.jpg"] {display:block} .tbl-view.event .event-wrap img[title="mobile.png"] {display:block} /* 20210706 아나파스면 안내 이미지 */ ul.pc_mobile img[title="pc"] {display:none;} ul.pc_mobile img[title="mobile"] {display:block;margin:auto;} /* 20210724 503 이미지 교체 */ #inspectionInfo ul {margin:0 auto;} /* #inspectionInfo .cont-visual, #inspection_503 .cont-visual {display:none;}*/ #inspectionInfo .cont-visual {margin-bottom:0;} #inspection_503 ul {margin:-10px auto;} #inspectionInfo ul li, #inspection_503 ul li {text-align:center;} #inspectionInfo ul li:first-child, #inspection_503 ul li:first-child {display:none;} #inspectionInfo ul li:nth-child(2), #inspection_503 ul li:nth-child(2) {display:block;} #inspectionInfo ul li:last-child, #inspection_503 ul li:last-child {display:none;} #container > .contents#inspectionInfo, #container > .contents#inspection_503 {padding:0} /* 모바일 메인 리뉴얼 이벤트 2021-05-11 */ .pop-modal1.mo .content .area-btn1 {margin:0;} .pop-modal1.mo .area-btn1 .btn-com {height:6.0rem;} .pop-modal1.mo .area-btn1.area-btn_pop {width:100%;} .pop-modal1.mo .box-type1 {margin:0;padding:0;border:none;} .form-area.toggle.check_list {margin:0;} /*-------------------------------------------------------------------------------- # layout : 503 이미지 모바일 가로 사이즈 조정 2021-02-10 ---------------------------------------------------------------------------------*/ @media only screen and (min-width: 568px) and (max-width:1366px) { /*#inspectionInfo ul li:nth-child(2), #inspection_503 ul li:nth-child(2) {display:none;} #inspectionInfo ul li:last-child, #inspection_503 ul li:last-child {display:block;} */ #container > .contents#inspectionInfo, #container > .contents#inspection_503 {margin:auto;} } /*-------------------------------------------------------------------------------- # layout : 503 이미지 모바일 가로 사이즈 조정 2023-01-12 ---------------------------------------------------------------------------------*/ @media only screen and (min-width: 541px) and (max-width:1368px) { #inspectionInfo ul li:nth-child(2), #inspection_503 ul li:nth-child(2) {display:none;} #inspectionInfo ul li:last-child, #inspection_503 ul li:last-child {display:block;} } .sns-wrap {padding:2.0rem 0;} .sns-wrap .tit{display:none;} .sns-wrap .btn-sns{text-align:center;} /* 자주하는 질문 */ .popopen #container.cc {z-index:100;} .form-group {display:none;border:0;} .form-group legend {float:none;position:static;visibility:visible;width:100%;height:4.0rem;margin:0;padding:0 4.0rem 0 2.0rem;border-bottom:0.2rem solid #33302e;font-size:1.6rem;line-height:3.8rem;background:#fff;opacity:1;} .form-group > ul {padding:2.0rem;overflow-y:scroll;} .form-group > ul li {margin:0;border-top:0.1rem solid #ced4d9;} .form-group > ul button {display:block !important;position:static !important;width:100%;padding:0 1.2rem !important;font-size:1.3rem;line-height:5.0rem !important;left:0 !important;top:0 !important;-ms-transform:translateY(0%) !important;-webkit-transform:translateY(0%) !important;transform:translateY(0%) !important;text-align:left;} .form-group > ul button:after {content:'';position:absolute;right:1.0rem;top:50%;border-top:0.6rem solid transparent;border-bottom:0.6rem solid transparent;border-left:0.7rem solid #5c6166;-ms-transform:translateY(-50%);-webkit-transform:translateY(-50%);transform:translateY(-50%);} .form-group > ul > li > button {background:#edf1f5 !important;color:#333 !important;} .form-group > ul > li > ul button {color:#666 !important;} .form-group > ul > li:first-child {position:static;left:0;top:0;bottom:0;width:auto;border-top:0.1rem solid #2e3133;} .form-group > ul > li:first-child ~ li, .form-group > ul > li:first-child ~ li > ul, .form-group > ul > li:first-child ~ li > ul > li {float:none;padding:0;} .form-group > ul > li:first-child ~ li + li {margin:0;} .form-group > ul > li:first-child ~ li > ul:before {left:16.0rem;top:1.1rem;} .form-group > ul > li:last-child {border-bottom:0.1rem solid #2e3133;} .form-group > ul > li:first-child:before, .form-group > ul > li:first-child:after, .form-group > ul > li:first-child ~ li > ul:before, .form-group > ul > li:first-child ~ li > ul > li + li:before {display:none;} .form-group .ui-close {display:block;} .ios .form-group .ui-close {position:fixed;} .form-group.open {display:block;position:fixed;left:0;right:0;top:0 !important;bottom:0;background:#fff;z-index:9999;} .form-group.open > ul {position:absolute;left:0;right:0;bottom:0;top:4.0rem;padding:2.0rem;overflow-y:auto;} .form-group.open .ui-close:before {-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg);} .form-group.open .ui-close:after {-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);} .form-group ~ .btn-com.pop {position:relative;display:block;left:0;top:0;padding:0 2.0rem;text-align:left;} .form-group ~ .btn-com.pop:after {content:'';position:absolute;right:2.0rem;top:50%;width:1.6rem;height:1.6rem;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Svpba1_20221006.cat) no-repeat -15.0rem -3.0rem;background-size:30.0rem 30.0rem;-ms-transform:translateY(-50%);-webkit-transform:translateY(-50%);transform:translateY(-50%);} .form-group ~ .btn-com.pop a {overflow:hidden;display:block;position:absolute;left:0;right:0;top:0;bottom:0;height:4.0rem;padding:0;color:rgba(255,255,255,0);z-index:1;} /*모바일 공인인증 안내*/ .certify-wrap{margin-top:3.0rem;} .certify-wrap > div{float:none;width:100%;height:auto;margin:0;} .certify-wrap > div + div{margin-top:10px;} .certify-wrap h3{padding:1.0rem 0 10.0rem;font-size:2.0rem;} .certify-wrap h3:after{top:5.0rem;} .certify-wrap .area-btn1{position:static;-webkit-transform:translateX(0);transform:translateX(0);} .certify-wrap .area-btn1 a {width:100%;} .certify-info {margin:3.0rem 0;} .certify-info > img, .certify-info .con{display:inline-block;} .certify-info > img {margin:0 auto 2.0rem;max-width:30.0rem;width:100%;} .certify-info .con {max-width:35.0rem;font-size:1.8rem;color:#333;font-family:NanumSquareR;line-height:2.6rem;} .certify-info .area-btn2 {margin:30px 0 0;} .certify-info .area-btn2 a {padding:0;width:100%;} .certify-step dt{padding:2.5rem 1.0rem 2.5rem 9.0rem;} .certify-step dt strong{position:absolute;top:2.2rem;left:0;font-size:2.2rem;font-weight:normal;line-height:2.4rem;} .certify-step li{float:none;width:100%;min-height:auto;padding:2.5rem;text-align:center;} .certify-step li img{display:inline-block;margin-bottom:2.5rem;text-align:center;} .certify-step li .step-tit{display:block;position:relative;padding:0 0 0 2.5rem;text-align:left;} .certify-step li .step-tit:not(only-child) + p{margin-top:1.5rem;} .certify-step li .step-tit .num{top:0.2rem;} .certify-step li + li{margin:4.0rem 0 0 0;} .certify-step li + li:before{top:-3.5rem;left:50%;border-right:1.0rem solid transparent;border-left:1.0rem solid transparent;border-top:1.7rem solid #0081d1;-ms-transform:translateX(-50%);-webkit-transform:translateX(-50%);transform:translateX(-50%);} .certify-step > dl + dl{margin-top:3.5rem;} .certify-step dl.long li{min-height:auto;} @media only screen and (max-width:767px){ .nav-menu > li {width:50%;} .nav-menu > li:after {top:0.8rem;bottom:0.8rem;} .nav-menu > li:nth-child(2n-1) {clear:left;} .nav-menu > li:nth-child(2n) ~ li {margin:3.7rem 0 0;} } @media only screen and (min-width:768px) and (max-width: 1024px) { .nav-menu > li {width:33%;} .nav-menu > li:nth-child(3n-2) {clear:left;} .nav-menu > li:nth-child(3n) ~ li {margin:3.7rem 0 0;} .newslatter{height:100rem!important} } /*-------------------------------------------------------------------------------- # 마이페이지 및 기타페이지 : 모바일용 ---------------------------------------------------------------------------------*/ .tab-wrap{margin:0 -2.0rem 2.0rem;} .tab-wrap .tab-sub1{margin:1.5rem 0 0} .myflow > li {display:block;} .myflow:before {left:7px;} .myflow > li:first-child:before, .myflow > li:last-child:before, .myflow > li:only-child:after {left:5px;} .mystep {display:block;width:auto;margin-left:30px;padding:1.0rem 3.0rem 0 0;text-align:left;} .mystep strong {font-size:1.7rem;} .mystep strong, .mystep span {display:inline-block;margin-left:10px;vertical-align:bottom;} .myinfo {display:block;} .myinfo:before {left:0} .myinfo:after {left:4px;} .myinfo .info-data4 {padding:2.5rem;} .myinfo .info-data4 dt {margin:0 0 1.0rem;font-size:1.8rem;line-height:inherit;} .myinfo .info-data4 .result, .myinfo .info-data4 .btn {position:relative;top:auto;left:auto;right:auto;} .myinfo .info-data4 .result {margin-top:2.0rem;} .myinfo .info-data4 .result strong {font-size:2.4rem;} .myinfo .info-data4 .btn {margin:0;} .myinfo .info-data4 .btn .btn-com{width:100%;margin-top:0.5rem;} .mypage .area-btn1 .btn-com {width:100%;} /*-------------------------------------------------------------------------------- # 스마트가이드 : 모바일용 ---------------------------------------------------------------------------------*/ /* 공통UI */ .pop-section header h1 {padding:0.9rem 2.0rem;font-size:1.6rem;border-bottom:0.2rem solid #33302e;background:#fff;color:#333;} .pop-section header h1 span {display:none;} .pop-section header > button {overflow:hidden;display:block;position:absolute;right:0;top:0;width:4.0rem;height:0;padding:4.0rem 0 0;background:#45494d;} .pop-section header > button:before, .pop-section header > button:after {content:'';display:block;position:absolute;left:50%;top:50%;width:2.0rem;height:0.2rem;margin:-0.1rem 0 0 -0.9rem;background:#fff;-ms-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-webkit-transition:all 0.3s ease;} .pop-section header > button:before {-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg);} .pop-section header > button:after {-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);} .pop-section .content {padding:2.0rem;} .pop-section .content > .tab-sub1 {left:0;right:0;top:0;} /* 왜 NH농협생명일까요? */ .visual-scroll1 {height:calc(100vh - 10.0rem);margin:-2.0rem;} .visual-scroll1 .list > li {height:calc(100vh - 10.0rem);background-size:auto 100% !important;} .visual-scroll1 .list > li > div {left:2.0rem;right:2.0rem;letter-spacing:-0.1rem;top:50%;margin:-3.0rem 0 0;-ms-transform:translateY(-50%);-webkit-transform:translateY(-50%);transform:translateY(-50%);} .visual-scroll1 .list > li > div > .info {line-height:2.3rem;} .visual-scroll1 .list > li:not(.scene1) > div > em {font-size:1.8rem;line-height:2.4rem;} .visual-scroll1 .list > li:not(.scene1) > div > strong {margin:1.8rem 0 2.0rem;font-size:3.4rem;line-height:4.0rem;} .visual-scroll1 .list > li.scene1 > div .txt-logo {margin:0 auto 1.8rem;padding:2.7rem 0 0;width:18.0rem;background-position:0 -40.5rem;background-size:45.0rem 45.0rem} .visual-scroll1 .list > li.scene1 > div > em {font-size:2.0rem;line-height:2.6rem;} .visual-scroll1 .list > li.scene1 > div > strong {margin:1.5rem 0;font-size:3.0rem;line-height:3.5rem;} .visual-scroll1 .list > li.scene2 .info ul {display:flex;justify-content: center;} .visual-scroll1 .list > li.scene2 .info ul > li {/* display:block;float:left;width:20%; */font-size:1.4rem;margin:1rem;padding:0.5rem 1rem}/* 20200813 추가 */ .visual-scroll1 .list > li.scene3 {background-position:20% 0} .visual-scroll1 .list > li.scene5 {background-position:80% 0} div[class*="visual-scroll"] .bx-controls-direction > a.bx-prev {left:0;} div[class*="visual-scroll"] .bx-controls-direction > a.bx-next {right:0} /* 보험가입가이드 */ .visual-scroll2 {height:calc(100vh - 10.0rem);margin:-2.0rem} .visual-scroll2 .list > li {height:calc(100vh - 10.0rem);padding:6.0rem 0 5.0rem} .visual-scroll2 .list > li > div {position:absolute;left:3.0rem;right:3.0rem;top:50%;margin:1.0rem 0 0;-ms-transform:translateY(-50%);-webkit-transform:translateY(-50%);transform:translateY(-50%)} .visual-scroll2 .list > li p {font-size:1.4rem;line-height:2.0rem} .visual-scroll2 .list > li p > strong {margin:0 0 1.2rem;font-size:2.2rem;line-height:2.8rem;letter-spacing:-0.2rem} .visual-scroll2 .list > li p .icon-tip.icon {vertical-align:middle;margin:0 0.2rem 0 0} .visual-scroll2 .list > li .visual {margin:1.5rem 0 0} .visual-scroll2 .list > li .visual + .info-tip {margin:1.0rem 0 0} #uiTabCon2 .visual-scroll2 .list > li.scene5 .visual img {max-width:22.0rem;} @media only screen and (max-width:768px) and (max-height: 639px) { .pop-section .content > .tab-sub1 > li {font-size:1.4rem;} .visual-scroll1 .list > li:not(.scene1) > div > em {font-size:1.7rem;line-height:2.4rem;} .visual-scroll1 .list > li:not(.scene1) > div > strong {font-size:3.0rem;line-height:3.6rem;} .visual-scroll1 .list > li:not(.scene1) > div > .info span br {display:none;} .visual-scroll1 .list > li:not(.scene1) > div > .info strong {font-size:1.6rem;} .visual-scroll1 .list > li.scene2 .info ul > li {font-size:1.3rem;} /*div[class*="visual-scroll"] .bx-controls-direction > a.bx-prev {left:1.0rem;} div[class*="visual-scroll"] .bx-controls-direction > a.bx-next {right:1.0rem;}*/ .visual-scroll2 .list > li > div {left:2.0rem;right:2.0rem;} .visual-scroll2 .list > li p {font-size:1.3rem;line-height:1.8rem;} .visual-scroll2 .list > li p > strong {margin:0 0 1.0rem;font-size:2.0rem;line-height:2.6rem;} } /*-------------------------------------------------------------------------------- # 청약 모바일용 ---------------------------------------------------------------------------------*/ #container.sc > .contents:only-child {padding:0 1.0rem 5.0rem;} .sc .pt0 {padding-top:1.0rem !important;} .sc .tit-info {padding-left:0;} /* 청약컨텐츠랩 */ .sc-wrap {padding-top:8.9rem;} .step1 .sc-wrap {padding-top:8.9rem} .sc-step {width:100%;} .sc-wrap.step_sign {padding-top:6.4rem} .step-wrap {margin:0 -1.0rem;padding:0 1.0rem;width:auto;background-size:auto 10.0rem;background-image:none;} .scrolling .top-static {left:0;right:0;width:100%;margin:0;padding:0 1.0rem;} /* 청약컨텐츠랩 보험금 지급 이력 사전 알림 서비스 2022-09-27 */ .sc-wrap.history {padding-top:5.0rem;} .sc-wrap.history .step-wrap {padding-top:0;} .sc-wrap.history .step-wrap.list_fold {padding-top:3.0rem;} .sc-wrap.history .step-wrap.list {padding-top:19.0rem;} .sc-wrap.history .step-wrap h2 {max-width:100%;} .sc-wrap.history .step-wrap header h2 b {font-size:2.3rem;} .sc-wrap.history .step-wrap header:before, .sc.step2.plus .sc-wrap h2:before {display:none;} .sc-wrap.history .step-wrap header {text-align:left;width:100%;} .sc-wrap.history .step-wrap header strong {font-size:2.2rem;color:#0878d1;} .sc-wrap.history .step-wrap:before, .sc-wrap.history .step-wrap:after {display:none;} .sc-wrap.history .step-wrap .sc-step .box-type1 .mes-info2 {padding-bottom:2.0rem;} .sc-wrap.history .step-wrap .sc-step .box-type1 .mes-sub1 .ad_btn {padding:0 2.0rem 0;} .sc-wrap.history .step-wrap .sc-step .box-type1 .mes-sub1:before {top:1.0rem;} .sc-wrap.history .cal-result {height:5.0rem;} .sc-wrap.history .cal-result:before {display:none;} .sc.step2 .cal-history {position:relative;top:auto;left:auto;width:100%;padding:0.5rem 0;} .sc.step2 .cal-history h3 {font-size:1.8rem;padding-right:4.0rem;} .sc.step2 .cal-history #btn_detail2 {width:calc(100% + 2.0rem);top:2.5rem;left:-1.0rem;right:-1.0rem;text-align:left;} .sc.step2 .cal-history h3 .ad_his a {right:0.5rem;top:0.5rem;width:5.5rem;height:2.5rem;font-size:1.3rem;} /* 최근 5년내 치료 내역 스와이프 2022-09-27 */ /* .sc-wrap.history .swiper-wrapper {} .sc-wrap.history .swiper-slide {width:100%;max-width:300px ! important;/*margin-left:-30px ! important;} */ .sc-wrap.history .swiper-slide:nth-child(1) .swip_list {background:#eaf7fc;} .sc-wrap.history .swiper-slide:nth-child(2) .swip_list {background:#e4f4e5;} .sc-wrap.history .swiper-slide:nth-child(3) .swip_list {background:#fee6ea;} .sc-wrap.history .swiper-slide:nth-child(4) .swip_list {background:#e3f0f2;} .sc-wrap.history .swiper-slide:nth-child(5) .swip_list {background:#f4e6fd;} .sc-wrap.history .swip_list {width:260px;padding:1.0rem;margin-bottom:1.0rem;} .sc-wrap.history .swip_list li {padding:0.2rem;} .sc-wrap.history .swip_list li span:first-child {padding:0.2rem 0.8rem;} .sc-wrap.history .swip_list li span + span {font-size:1.5rem;letter-spacing:-0.1rem;padding-left:0.5rem;} /*.swiper-slide {margin-right:0 ! important;text-align:left;background:#fff;width:270px ! important; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }*/ .cal-history ul.mes-info3 > li {text-align:left;font-size:1.2rem;margin:0 1.0rem;line-height:1.4rem;} /* 보험료계산결과 */ .cal-result {position:relative;padding:1.0rem 0 1.5rem;height:6.0rem;text-align:center;} .cal-result:before {content:'';display:inline-block;vertical-align:middle;height:4.5rem;width:0;margin-left:-5px;} .cal-result h1 {float:none;margin:0;padding:0;padding-right:35px;font-size:1.6rem;line-height:2.2rem;display:inline-block;text-align:left!important} .cal-result h1:before {display:none;} .cal-result .cal-price {position:absolute;bottom:1.4rem;width:100%;text-align:center;float:none;font-size:1.5rem;} .cal-result .cal-price b {font-size:3.0rem;line-height:3.2rem;} .cal-result .cal-price .no{display:none;visibility:hidden} .cal-result .cal-price button {position:absolute;top:-3rem;right:.5rem;margin:0;} .cal-result .cal-price .info {width:auto;left:0;top:100%;right:0;text-align:left;} /* 스텝영역 */ .step-nav {height:3.0rem;padding:0.3rem 0;} .step-nav ol {width:auto;} .step-nav li {float:left;display:block;width:6.0rem;height:3.0rem;padding:0 1.5rem;font-size:1.5rem;line-height:2.2rem;text-align:left;} .step-nav li:before {display:inline-block;width:2.2rem;height:2.2rem;vertical-align:top;line-height:2.2rem;} .step-nav li + li:after {left:-1.5rem;right:100%;top:1.5rem;margin:0 -1.5rem 0 0;} .step-nav li span {overflow:hidden;display:inline-block;vertical-align:top;width:0;} .step-nav li span:after {left:1.1rem;margin:0.7rem 0 0 1.0rem;} .step-nav li.on {width:auto;} .step-nav li.on:before {margin:0 1.0rem 0 0;} .step-nav li.on span {width:auto;} .step-nav li.on:not(:last-child) span {padding-right:1.0rem;} .step-wrap header {padding:2.0rem 0 0;} .step-wrap header h2{font-size:1.7rem;max-width:66%;letter-spacing:-2px;line-height:2.9rem;} /* 간편 비밀번호 수정 2023-11-14 */ .step-wrap header h2 b{font-weight:normal;} .step-wrap header:before, header.sc-donebox1 h2:before {width:6.0rem;height:5.5rem;background-position:0 -18.0rem;background-size:90.0rem 45.0rem;} header.sc-donebox1 h2:before {top:50%;-ms-transform:translateY(-50%);-webkit-transform:translateY(-50%);transform:translateY(-50%);} .sc-step h3{margin:2.5rem 0 1.0rem;font-size:1.8rem !important;line-height:inherit;} /* 가입전단계 */ .sc-prepage{padding:0 2.0rem 0;} .sc-prepage > li {min-height:6.0rem;} .sc-prepage > li div{padding:15px 0 15px 60px;font-size:1.7rem;} .sc-prepage > li div:after{top:50%;margin-top:-2.0rem;} .sc-prepage + .box-type1 input{width:100%;} .step0 .area-btn1 a{width:100%;} .step0 .smart li {border:0;color:#333;} .step0 .smart li + li {padding-top:0;} .step0 .smart li > p{margin:1.0rem 0 0;} .step0 .smart li > p + p {margin-top:0.5rem;} .step0 .tbl-input > dt:nth-of-type(2) {padding-left:0;} .step1 .tit-sub1 {margin-bottom:1.5rem;padding-left:37px;overflow:inherit;} .step1 .tit-sub1:before {left:0;top:-3px;width:30px;height:30px;} .step1 .tit-sub1:after {left:8px;top:7px;} .step1 .tbl-input > dd > .label-check label > input:first-child + span {min-width:0rem;} .step1 .form-area .basic strong.tit:only-child {padding-top:0;} .step2 .mes-sub1{padding-top:0;} /* 1단계 수정 2022-06-30 */ .sc-step .tit-sub1.confirm:before{left:0;top:-3px;} .sc-step .tit-sub1.confirm:after{left:8px;top:7px;} /* 스마트가이드 가입전 확인사항 2021-05-11 */ .pop-section .sc-prepage_m {padding:0} /* 청약0단계 모바일 개편 2021-05-11 */ /*-------------------------------------------------------------------------------- # layout ---------------------------------------------------------------------------------*/ #container.sc.step_m {background:#fff;color:#333;} #container.sc.step_m > .contents {padding:0;} .sc-wrap_m {position:relative;width:100%;height:auto;padding:0;background:#fff;} .step-wrap_m header {padding:2.0rem 0 2.0rem 2.0rem;} .step-wrap_m header h2 {display:inline-block;vertical-align:middle;font-size:2.4rem;font-weight:bold;color:#000;text-align:left;} /* 청약단계 개선 2023-04-11 */ .step-wrap_m header h2 span + span {font-size:1.5rem;font-weight:normal;}/* 금융인증서 추가 2023-08-17 */ .step-wrap_m header h2 span.textGbn {display:inline-block;vertical-align:middle;font-size:2.4rem;font-weight:bold;color:#000;text-align:left;} /* 청약단계 개선 2023-04-11 */ .sc-step_m {position:relative;width:100%;margin-bottom:4.0rem;} /* 청약단계 개선 2023-04-11 */ .area-btn1 a:nth-child(2):nth-last-child(1), .area-btn1 a:nth-child(1):nth-last-child(2) {float:left;} .area-btn1 a:nth-child(2):nth-last-child(1) {float:inherit;} .sc.step3.plus .area-btn1 a#mkakaoLogin, .sc.step3.plus .area-btn1 a#mdelfinoLogin, .sc.step3.plus .area-btn1 a#pinLogin, .sc.step3.plus .area-btn1 a#appLogin {float:left;} /* 공동인증 버튼 수정 2023-05-04 */ .area-btn1.mblock.mb-show a#mkakaoLogin, .area-btn1.mblock.mb-show a#mdelfinoLogin, .area-btn1.mblock.mb-show a#pinLogin, .area-btn1.mblock.mb-show a#appLogin {float:none;} /* 마이페이지 인증 제외 */ .sc.step3.plus .area-btn1 a#naverLogin {float:left;} /* 네이버 인증 2023-05-27 */ .area-btn1.mblock.mb-show a#mnaverLogin {float:none;} /* 마이페이지 인증 제외 2023-05-27 */ /* 키패드 수정 2023-11-14 */ .dimm {position:fixed;top:188px;left:0;right:0;bottom:0;background:rgb(255 255 255);z-index:999;} .dimm .box-type1 .tbl-input {display:block;margin-top:0;} /* 화면사이즈별 예외스타일 : 테블릿 대응 */ @media only screen and (min-width: 768px) and (max-width:1024px) { /* 인증 버튼 2023-05-27 */ .area-btn1.mblock a#mkakaoLogin, .area-btn1.mblock a#mdelfinoLogin, .area-btn1.mblock a#pinLogin, .area-btn1.mblock a#appLogin, .area-btn1.mblock a#naverLogin, .sc.step3.plus .area-btn1 a#mkakaoLogin, .sc.step3.plus .area-btn1 a#mdelfinoLogin, .sc.step3.plus .area-btn1 a#pinLogin, .sc.step3.plus .area-btn1 a#appLogin, .sc.step3.plus .area-btn1 a#naverLogin {display:inline-block;margin:0;min-width:30% !important;width:49% !important;} .sc.step3.plus .area-btn1 a#mkakaoLogin, .sc.step3.plus .area-btn1 a#mdelfinoLogin, .sc.step3.plus .area-btn1 a#pinLogin, .sc.step3.plus .area-btn1 a#appLogin, .sc.step3.plus .area-btn1 a#naverLogin {float:inherit;} } .sc-prepage_m {width:100%;margin:0;padding:0 2.0rem;} .sc-prepage_m > li{display:table;width:100%;padding:0;padding-bottom:2.0rem;border:none;margin-bottom:0;} .sc-prepage_m > li:last-child{border-bottom:0;margin-bottom:8.0rem;} /* 금융인증서 추가 2023-08-17 */ .sc-prepage_m > li.none_line {border-bottom:0;} .sc-prepage_m > li div.icon_list {display:table-cell;width:100%;height:100%;position:relative;vertical-align:middle;padding:1.0rem 0 1.0rem 5.5rem;} .sc-prepage_m > li div.icon_list b {line-height:2.5rem;font-weight:bold;font-size:2.0rem;} .sc-prepage_m > li div.icon_list:after {content:'';position:absolute;top:0.2rem;left:0;width:5.0rem;height:5.0rem;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Svpba3_231024.cat) no-repeat;background-size:1200px 600px;} /* 금융인증서 네이버인증 간편인증 추가 2023-05-18 .sc-prepage_m > li div.icon_list:after {content:'';position:absolute;top:0.2rem;left:0;width:5.0rem;height:5.0rem;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Svpba3_230601.cat) no-repeat;background-size:1200px 600px;} */ .sc-prepage_m > li div.icon_list.list0:after {background-position:-160px -400px;}/* 설명의무 가이드라인 23-11-23 */ .sc-prepage_m > li div.icon_list.list1:after {background-position:-400px -400px;}/* 설명의무 가이드라인 23-11-23 */ .sc-prepage_m > li div.icon_list.list2:after {background-position:-240px -400px;} .sc-prepage_m > li div.icon_list.list3:after {background-position:-320px -400px;} .sc-prepage_m > li div.icon_list.list4 {padding:1.0rem 0;} .sc-prepage_m > li div.icon_list.list4 ul {margin-top:0.5rem;} .sc-prepage_m > li div.icon_list.list4 ul li {font-size:1.5rem;} .sc-prepage_m > li div.icon_list.list5 {padding:0 0 0 3.0rem;} .sc-prepage_m > li div.icon_list.list5 b {font-size:1.8rem;} .sc-prepage_m > li div.icon_list.list5 ul {margin-top:0.5rem;} .sc-prepage_m > li div.icon_list.list5:after {background:none;width:1.0rem;height:0.5rem;top:0;margin:0.4rem 0 0 1.0rem;border-left:0.3rem solid #1A1A1A;border-bottom:0.3rem solid #1A1A1A;transform:rotate(-45deg);} .sc-prepage_m > li div.icon_list.list6 {padding:2.0rem 0 2.0rem 3.5rem;} .sc-prepage_m > li div.icon_list.list6 b {font-size:1.8rem;font-weight:normal;} .sc-prepage_m > li div.icon_list.list6:before {display:none;} .icon_list.list3 .mes-info1 li:last-child {font-weight:bold;} /* 설명의무 가이드라인 23-11-23 */ .icon_list.list1 ul:nth-child(3) > li:first-child {padding-right:90px;position:relative;} .icon_list.list1 ul:nth-child(3) > li:first-child span > span:last-child {position:absolute;top:50%;right:0;transform:translate(0, -50%);text-align:right;width:90px;color:#333;} .sc-prepage_s {width:100%;margin:0;padding:0 2.0rem;font-size:1.3rem;} .sc-prepage_s b {display:block;line-height:2.5rem;font-weight:bold;font-size:1.4rem;} .sc-prepage_s li {padding-bottom:0.5rem} .icon_list ul{margin-top:1.0rem;} .icon_list a:link, .check_list .box-policy a:link, .sc-prepage_s a:link {color:#0081d1;text-decoration:underline;} .icon_list ul > li {line-height:150%;font-size:1.7rem;color:#888;} .icon_list.list5 ul > li {line-height:140%;font-size:1.5rem;color:#888;} .icon_list ul.mes-info1 > li:before {left:-0.5rem;top:0.5rem;width:2.0rem;height:2.0rem;background:#a1aab3;border-radius:50%;} .icon_list ul.mes-info1 > li:after {left:0.4rem;top:0.9rem;width:0.3rem;height:0.3rem;border-top:0.6rem solid #fff;border-bottom:0.3rem solid #fff;} .sc-prepage_m > li > .mes-sub1 {background:#efefef;padding:1.0rem 1.0rem 1.0rem 2.0rem;font-size:1.4rem;line-height:140%;} .sc-prepage_m > li > .mes-sub1:before {display:none;} .sc-prepage_m > li > .mes-sub1 ul {width:100%;} .sc-prepage_m > li > .mes-sub1 ul li {padding:0.5rem 0; color:#666;} .sc-prepage_m .name, .sc-prepage_m .number, .sc-prepage_m .jumin {padding-top:1.0rem;} .sc-prepage_m .phone {padding:1.0rem 0 2.0rem;} .sc-prepage_m .phone > .selectbox:first-child {width:60%;width:-webkit-calc(68% - 1.2rem);width:calc(68% - 1.2rem);max-width: 22.0rem;} .sc-prepage_m ul.mphone li {padding-top:1.0rem;font-size:1.2rem;} .sc-prepage_m ul.mphone li:last-child {border-bottom:none;} .sc-prepage_m ul.mphone li span {display:block;} .form-area.toggle.check_list {margin-bottom:2.0rem;} .sc-prepage_m .tbl-input li {border-bottom:none;} .sc-prepage_m .tbl-input .label-check span {text-decoration:underline;color:#666;} .sc-prepage_m .tbl-input .check_list {margin:1.0rem 0;padding:1.0rem;width:100%;} .sc-prepage_m .tbl-input .check_list .btn_viewAdd, .sc-prepage_m .tbl-input .check_list .btn_viewRemove {padding:2.0rem;left:0;} .sc-prepage_m .tbl-input dt {color:#1A1A1A;font-size:1.8rem;font-weight:bold;} /* 금융인증서 네이버인증 간편인증 추가 2023-07-03 */ .sc.step_m .sc-wrap_m .step-wrap_m .sc-prepage_m > li {padding-bottom:0;} .sc.step_m .sc-wrap_m .step-wrap_m .sc-prepage_m .tbl-input dt {padding:2.0rem 0 0;} .btn-confirm {position:relative;height:4.0rem;font-size:1.5rem;line-height:3.8rem;padding:0 1.0rem;font-weight:bold;display:block;background:#edf1f5;border:0.1rem solid #edf1f5;color:#666;border-radius:1.0rem;margin:2.0rem 0 1.0rem;}/* 금융인증서 추가 2023-08-17 */ a.mes-confirm {font-weight:bold;color:#0081d1;text-decoration:underline;}/* 금융인증서 추가 2023-08-17 */ .pop-modal1.change_confirm {width:30.0rem;height:24.0rem;top:auto !important;bottom:15.0rem !important;min-height:auto;border-radius:1.0rem;}/* 금융인증서 추가 2023-08-17 */ .pop-modal1.change_confirm .content {padding:2.0rem 4.0rem 2.0rem 2.0rem;} .pop-modal1.change_confirm .header {border-bottom:0;} .pop-modal1.change_confirm .header button {background:#fff;} .pop-modal1.change_confirm .header button:before, .pop-modal1.change_confirm .header button:after {background:#45494d;} .change_confirm .box-scroll1.form {height:auto;border-top:0;border-bottom:0;margin:0;} .change_confirm .box-scroll1.form div.list label > input + span {padding:0.5rem 0 0.5rem 2.0rem;line-height:2.5rem;border-radius:1.0rem;} .change_confirm .box-scroll1.form div.list label > input:checked ~ span {font-weight:bold;} /* 계약자 주요내용 확인서 설명의무 가이드라인 23-11-23 */ #uiPOPContratConfirm .form-area .detail2 {padding: 1.5rem 0 1.5rem 3.5rem;} #uiPOPContratConfirm .label-btn.label-btn3 label span {white-space:inherit;height:5.0rem;line-height:1.5rem;font-size:1.35rem;padding:1.0rem 0;} /*-------------------------------------------------------------------------------- # slide_tab 인증방법 ---------------------------------------------------------------------------------*/ #slide_tab {position:relative;overflow:hidden;margin:0;} #slide_tab > ul{width:100%;margin-bottom:5.0rem;} #slide_tab > ul > li {width:100%;padding:0 2.0rem;} #slide_tab label{display:inline-block;float:left;vertical-align:middle;width:33.3%;height:80px;margin-bottom:2.0rem;cursor:pointer;} #slide_tab label:last-child {width:33.2%;} #slide_tab .sc-prepage_m {padding:0;} #slide_tab>label {padding-top:5.0rem;font-size:1.8rem;color:#999;text-align:center;line-height:2.0rem;background:#fff;} #slide_tab>label:before {content:'';position:absolute;top:0;width:8.0rem;height:4.2rem;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Svpba3_231024.cat) no-repeat;background-size:1200px 600px;} #slide_tab>label:nth-child(1) {border-bottom:1px solid #ced4d9;} #slide_tab>label:nth-child(2) {border-bottom:1px solid #ced4d9;} #slide_tab>label:nth-child(3) {border-bottom:1px solid #ced4d9;} #slide_tab>label:nth-child(1):before {background-position:-536px -533px;} #slide_tab>label:nth-child(2):before {background-position:-704px -533px;} #slide_tab>label:nth-child(3):before {background-position:-916px -533px;} #slide_tab label input[type="radio"] {display:none;} #slide_tab>label.tab_check {color:#0081d1;border-bottom:4px solid #0081d1;} #slide_tab>label.tab_check:nth-child(1):before {background-position:-536px -480px;} #slide_tab>label.tab_check:nth-child(2):before {background-position:-704px -480px;} #slide_tab>label.tab_check:nth-child(3):before {background-position:-916px -480px;} /*-------------------------------------------------------------------------------- # slide_tab 금융인증서 네이버인증 간편인증 추가 2023-05-18 #slide_tab>label {position:relative;padding-top:5.0rem;display:inline-block;width:33.3%;float:left;font-size:1.8rem;color:#999;text-align:center;line-height:2.0rem;background:#fff;} #slide_tab>label:before {content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);width:5.0rem;height:4.2rem;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Svpba3_230601.cat) no-repeat;background-size:1200px 600px;} #slide_tab>label:nth-child(1) {border-bottom:1px solid #ced4d9;} #slide_tab>label:nth-child(2) {border-bottom:1px solid #ced4d9;} #slide_tab>label:nth-child(3) {border-bottom:1px solid #ced4d9;float:right;} #slide_tab>label:nth-child(1):before {background-position:-477px -533px;} #slide_tab>label:nth-child(2):before {background-position:-557px -533px;} #slide_tab>label:nth-child(3):before {background-position:-637px -533px;} #slide_tab label input[type="radio"] {display:none;} #slide_tab>label.tab_check {color:#0081d1;border-bottom:4px solid #0081d1;} #slide_tab>label.tab_check:nth-child(1):before {background-position:-477px -480px;} #slide_tab>label.tab_check:nth-child(2):before {background-position:-557px -480px;} #slide_tab>label.tab_check:nth-child(3):before {background-position:-637px -480px;} #slide_tab .simple {height:8.0rem;margin-top:2.0rem;} #slide_tab .simple li {width:32%;display:inline-block;text-align:center;} #slide_tab .simple label {position:relative;display:block;border-radius:1.2rem;width:6.6rem;height:6.3rem;overflow:hidden;float:none;margin-bottom:0;} #slide_tab .simple label:before {content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);width:6.6rem;height:6.3rem;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Svpba3_230601.cat) no-repeat;background-size:1800px 900px;} #slide_tab .simple li:nth-child(1) label:before {background-position:-720px -600px;} #slide_tab .simple li:nth-child(2) label:before {background-position:-840px -600px;} #slide_tab .simple li:nth-child(3) label:before {background-position:-960px -600px;} #slide_tab .simple label.tab_check {border:0.2rem solid #000;border-radius:1.2rem;width:7.0rem;height:6.7rem;} ---------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------- # 동의서 ---------------------------------------------------------------------------------*/ .agree_list {width:100%; margin:0;padding:0 2.0rem 2.0rem 2.0rem;} .agree_list li {padding-bottom:1.0rem;} .btn-agree {position:relative;display:inline-block;width:100%;mins-height:50px;border-radius:10px;border:1px solid #BBB;font-size:1.7rem;padding:1.4rem 4.0rem 1.4rem 1.0rem;margin-bottom:4px;overflow:inherit;line-height:2.0rem;color:#333;} .btn-agree:before {content:'확인';position: absolute;right:1.0rem;top:30%;display:inline-block;width:3.0rem;height:3.0rem;text-decoration:underline !important;font-size:1.4rem;color:#999;} .btn-agree:active {transform:translateY(4px)} .btn-agree.complete {border:2px solid #0081d1;font-weight:bold;background-color:#0081d1;color:#fff;} .btn-agree.complete:before {content:'완료';color:#b2d9f1;} .btn-agree.complete:active {transform:translateY(4px);-webkit-transition: all 0.3s ease;} .form-area.toggle.check_list {margin-bottom:2.0rem;} .form-area.toggle.check_list > li {padding:2.0rem 0;border-bottom:1px dashed #999;border-top:none;} .form-area.toggle.check_list > li #btn_detail {margin-top:2.0rem;} .form-area.toggle.check_list .tbl-input dt {font-weight:bold;margin-top:2.0rem;} .form-area.toggle.check_list .list-tit1:nth-child(2) {display:block;padding-top:2.0rem;} .pop-modal1.mo ul.tbl-input_ul {position:relative;display:block;width:100%;border:none;margin-top:2.0rem;} .pop-modal1.mo ul.tbl-input_ul li {display:inline-block;width:49%;vertical-align:top;border:none;} .pop-modal1.mo ul.tbl-input_li {border:none;margin:2.0rem 0 1.0rem;} .pop-modal1.mo ul.tbl-input_li li {border:none;} .pop-modal1.mo ul.tbl-input_li li:first-child {color:#1A1A1A;font-size:1.8rem;font-weight:bold;padding-bottom:1.0rem;} .pop-modal1.mo .mes-info3.m4.default li {border:none;} .pop-modal1.mo .box-policy .list1 li {border:none;padding:0 0 0 1.0rem;} .pop-modal1.mo .box-policy .list3 li {border:none;padding:0 0 0 1.0rem;} .pop-modal1.mo .box-policy .mes-info3.m4 li {border:none;} .tbl-input_ul .label-check label {width:100%;display:block;} .check_list .label-check {width:100%;} .check_list .label-check label > input + span {width:100%;min-width:100%;padding: 0.8rem 4.0rem 0.7rem 3.2rem;} .check_list .tbl-input_ul.list .label-check label > input + span {padding:0.8rem 0 0.7rem 3.2rem;} .check_all.label-check {width:100%;margin:2.0rem 0;} .check_all.label-check label {width:48%;height:4.0rem;} .check_all.label-check label:first-child {margin-right:2%;} .check_all.label-check label > input + span {width:100%;border:0.1rem solid #0081d1;height:4.0rem;border-radius:2.0rem;padding:0.9rem 0.8rem 0.9rem 1.2rem;font-size:1.8rem;text-align:center;color:#666;} .check_all.label-check label:last-child > input + span {border:0.1rem solid #999;padding:0.9rem 0.8rem 0.9rem 1.8rem;} .check_all.label-check label > input + span:after {content:'';position:absolute;left:10%;top:0.7rem;width:1.0rem;height:0.4rem;margin:0.8rem 0.7rem;border-left:0.2rem solid #ced4d9;border-bottom:0.2rem solid #ced4d9;-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);} .check_all.label-check label > input + span:before {display:none} .check_all.label-check label > input:checked + span {/* content:''; */position:absolute;left:-0.1rem;right:-0.1rem;top:-0.1rem;bottom:-0.1rem;height:4.0rem;border-radius:2.0rem;background:#0081d1;color:#fff;z-index:-1;} .check_all.label-check label:last-child > input:checked + span {background:#999;} .check_all.label-check label > input:checked + span:after {border-left:0.2rem solid #fff;border-bottom:0.2rem solid #fff;} /* 20230201 경품수령 동의 팝업 */ #uiSCEvent .content {padding-top:5.0rem;} #uiSCEvent .content .area-btn_pop {margin:0} #uiSCEvent .check_all.label-check.radio label:after {height:0;} /*-------------------------------------------------------------------------------- # 동의 버튼 하나 일 경우 2021-06-01 ---------------------------------------------------------------------------------*/ .check_all.label-check label:only-child {width:100%;} .check_all.label-check label:only-child > input + span {border:0.1rem solid #0081d1;padding:0.9rem 30% 0.9rem 30%;} .check_all.label-check label:only-child > input:checked + span {background:#0081d1;} .check_all.label-check label:only-child > input + span:after {left:30%;} .agree_m .form-area.toggle {margin:1.0rem 0; padding:2.0rem 0;border-top:1px dashed #999;border-bottom:1px dashed #999;} .agree_m .form-area.toggle > li {padding-bottom:2.0rem;} .agree_m .form-area.toggle #btn_detail {padding:2.0rem 0;} .box-policy.hi2 {height:35.0rem;} .agree_m .form-area > li ~ li {border-top:none;} .btn_viewAdd {position:absolute;right:-1.0rem;top:0;padding:1.0rem;text-decoration:underline !important;font-size:1.4rem;} .btn_viewRemove {position:absolute;right:-1.0rem;top:0;padding:1.0rem;text-decoration:underline !important;font-size:1.4rem;} .form-area.toggle.check_list .btn_viewAdd, .form-area.toggle.check_list .btn_viewRemove {top:0;} /*-------------------------------------------------------------------------------- # 이벤트 투표 팝업 2021-05-11 ---------------------------------------------------------------------------------*/ .pop-modal1.mo .check_list .phone_list {font-size:1.4rem;} .pop-modal1.mo .check_list .phone_list .btn_viewAdd, .pop-modal1.mo .check_list .phone_list .btn_viewRemove {left:12.0rem;font-size:1.4rem;} .label-check span.phoneview {display:block;font-size:1.2rem;width:100%;} .msg-confirm-box {padding-top:10px;color:#D40000;font-size:1.3rem;} /*-------------------------------------------------------------------------------- # 청약0단계 모바일 하단 버튼 조정 2021-05-11 ---------------------------------------------------------------------------------*/ .area-btn_m {position:fixed;left:0;right:0;bottom:0 !important;width:100%;height:6.0rem;z-index:99;} .area-btn1_m {text-align:center;overflow:hidden;margin:0;padding:0;} .area-btn1_m li {float:left;width:50%;height:6.0rem;overflow:hidden;display:inline-block;color:#fff;} .area-btn1_m li:first-child {width:40%;background:#a1aab3;} .area-btn1_m li:last-child {width:60%;background:#0081d1;} .btn-m {position:relative;display:inline-block;width:100%;height:6.0rem;font-size:2.5rem;padding:0 4.0rem;line-height:6.0rem;} .area-btn_pop {position:fixed;left:0;right:0;bottom:0 !important;width:calc(100% + 4.0rem);height:6.0rem;margin:2.0rem -2.0rem 0;} /* 팝업창 전체화면으로 수정 2022-04-18 bottom:5.0rem !important; */ .area-btn_pop .btn-m {text-align:center;overflow:hidden;margin:0;padding:0;background:#0081d1;color:#fff;} .area-btn_pop .btn-m:before {display:none;} /* 청약0단계 모바일 하단 이전 버튼 조정 2023-02-20 */ .area-btn1_m li img {position:absolute;height:6.0rem;width:40%;left:0;top:0;height:100%;z-index:1;} .area-btn1_m li span {z-index:0;} .pop-modal1 .sc-prepage_m {padding:0;} .pop-modal1 .agree_list {padding:0;} /*-------------------------------------------------------------------------------- # 카드버튼 위치 확인 2021-05-11 ---------------------------------------------------------------------------------*/ #cardArea button.btn-icon3 {margin: 0 0 0 1.0rem;} /*-------------------------------------------------------------------------------- # 카카오톡 인증 팝업/시너지 팝업 2022-08-31 ---------------------------------------------------------------------------------*/ #popPntExcKakao.pop-modal1 .content {padding:2.0rem 2.0rem 3.0rem;} .kakakopy_cert, .naverpy_cert {font-size:18px;} /* 20230726 네이버페이 인증 팝업 추가 */ .kakakopy_cert strong, .naverpy_cert strong {font-size: 21px;} /* 20230726 네이버페이 인증 팝업 추가 */ #uiPOPSinergeUser .area-btn1.area-btn_pop {position:absolute;margin:0;padding:0;} /*-------------------------------------------------------------------------------- # 팝업 2021-05-11 ---------------------------------------------------------------------------------*/ .pop-modal1 .content {padding:2.0rem 2.0rem 10.0rem;}/* 20220407 padding:2.0rem 2.0rem 10.0rem; 하단 버튼 여백 간격 조정 */ .pop-modal1 .content .area-btn1 {margin:1.5rem 2.0rem 0;} /* 하단 버튼 여백 간격 조정 */ .box-scroll1.img {margin: 2.0rem 0 0;} /* 하단 버튼 여백 간격 조정 */ .pop-modal1 .box-scroll1.img { height: calc(100vh - 38.0rem);} /* 하단 버튼 여백 간격 조정 */ #uiPOPDoc2.pop-modal1 .content .area-btn1 {margin:1.5rem 0 0;} /* 2023-05-04 청약완료 확인 버튼 수정 */ #uiPOPDoc2.pop-modal1 .area-btn1 .btn-com, section[class*="pop-modal"] .area-btn1 .btn-com {padding:0 1.0rem;letter-spacing:-0.1rem;} /* 2023-05-04 청약완료 확인 버튼 수정 */ .pop-modal1.mo .content {margin:0 0 -20.0rem;padding:5.0rem 2.0rem 22.0rem 2.0rem;} /* 20220426 max-height:calc(100vh - 12.0rem);padding-bottom:12.0rem; 조정 */ .pop-modal1.mo .content {max-height:calc(100vh - 4.0rem);} /* 20220426 추가 */ .pop-modal1.mo {display:block;position:fixed;left:0;right:0;top:0 !important;z-index:1000;transform:translateY(120%);transition: opacity 250ms 250ms ease, transform 300ms 250ms ease;} .pop-modal1.mo.open {height:100%;display:block;position:fixed;left:0;right:0;top:0 !important;z-index:1000;transform:translateY(0.0rem);transition:opacity 500ms 250ms ease, transform 500ms 250ms ease;}/* 팝업창 전체화면으로 수정 2022-04-18 transform:translateY(5.0rem); */ .pop-modal1.mo .header {position:absolute;top:0 !important;width:100%;padding:0 5.0rem 0 1.0rem;border-bottom:0.2rem solid #fff;background:#fff;height:5.0rem;z-index:1000;}/* 뒷배경 스크롤 수정 2022-04-91 overflow:hidden; *//* 20220506 팝업 헤더 포지션 위드 수정 */ .pop-modal1.mo .header h2 {font-size:1.75rem;letter-spacing:-0.2rem;line-height:5.0rem;color: #333;height:5.0rem;overflow:hidden;} /* 20230201 헤더글자 */ .pop-modal1.mo .header button {overflow:hidden;text-indent:-9999px;display:block;position:absolute;right:0;top:0;width:5.0rem;height:5.0rem;padding:4.0rem 0 0;background:#fff;} .pop-modal1.mo .header button:before, .pop-modal1.mo .header button:after {content:'';display:block;position:absolute;left:50%;top:50%;width:2.0rem;height:0.2rem;margin:-0.1rem 0 0 -0.9rem;background:#000;-webkit-transition:all 0.3s ease;-moz-transition: all 0.3s ease;-webkit-transition:all 0.3s ease;} .pop-modal1.mo .header.event h2 {text-indent:-10000px;} .pop-modal1.mo .mo_event {padding:0 0 2.0rem 0;} .pop-modal1.mo .header.event {border-bottom:0.2rem solid #fff;text-indent:-1000px} .pop-modal1.mo .header {text-indent:0;} .pop-modal1.mo .tbl-input dt {width:160px;color: #1A1A1A;font-size: 1.8rem;font-weight: bold;} .pop-modal1.mo .tbl-input dt.tbl-input.long {width:100%;} .pop-modal1.mo .tbl-input .info-time dt {text-indent:-1000px;width:2.2rem;} .pop-modal1.mo .alysis-info-txt01 {padding:0 0 4.0rem 0;display:block;vertical-align:middle;font-size:2.4rem;font-weight:bold;color:#2e2991;text-align:left;} .pop-modal1.mo .online-alysis-pd {padding:0;} .pop-modal1.mo .tit-ty-h3 {padding:30px 0 10px;color:#1A1A1A;font-size:1.8rem;font-weight:bold;} .pop-modal1.mo .check-terms-item .btn-terms-more {position:relative;width:4.0rem;height:40px;display: block;position: absolute;right: 0;top: 0;} .pop-modal1.mo .check-terms-item .btn-terms-more:before {content:'보기';position:absolute;right:-1.0rem;top:10%;padding:1.0rem;text-decoration:underline !important;font-size:1.4rem;} .pop-modal1.mo .check-terms-item .btn-terms-more.on:before {content:'닫기';} .pop-modal1.mo .check-terms-item .terms-info-wrap {height:15.0rem;background: #f2f6fa;border: 1px solid #ced4d9;margin:2.0rem 0 1.0rem;padding:1.5rem;overflow-y:scroll;font-size:1.3rem;overflow-x:hidden;display:none;} .pop-modal1.mo .check-terms-item .terms-info-wrap .terms-cont .box-policy {height:auto;margin: 0;padding: 0;border: 0;background:none;overflow-y:unset; } .pop-modal1.mo .check-terms-item .terms-info-wrap .terms-cont .box-policy .tit {margin:5px 0;display:block; } .pop-modal1.mo .check-terms-item .terms-info-wrap .terms-cont .box-policy .txtB {font-size: 12px;} .pop-modal1.mo .check-terms-item > li:first-child {margin-top:0;} .pop-modal1.mo .check-terms-item > li {border-radius:0;border:none;font-size:1.6rem;padding:2.0rem 0;border-bottom:1px dashed #999;} .pop-modal1.mo .check-terms-item > li .label-check { width: 100%;} .pop-modal1.mo .check-terms-item > li .label-check label {width: calc(100% - 10px);} .pop-modal1.mo .check-terms-item > li .label-check label > input:first-child + span {padding-left:3rem;padding-right:.5rem;font-size:1.6rem;color:#333;} /*-------------------------------------------------------------------------------- # 동의 미동의 2021-06-01 ---------------------------------------------------------------------------------*/ .sc-prepage_s.qr {margin:0;padding:0;} .sc-prepage_s.qr li:nth-child(2) {width:79%;font-size:1.1rem;margin:0} .sc-prepage_s.qr li.qr_img1 {width:60px;height:60px;vertical-align:top;text-indent:-10000px;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Szbovyr_vpba_231012.cat) no-repeat -272px -200px;background-size:400px 400px;} .sc-prepage_s.qr li.qr_img2 {width:60px;height:60px;vertical-align:top;text-indent:-10000px;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Szbovyr_vpba_231012.cat) no-repeat -345px -200px;background-size:400px 400px;} span.rainbow {background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Szbovyr_vpba_231012.cat) no-repeat 0 -225px;background-size:480px 480px;margin:0;display:block;width:250px;height:50px;} span.rainbow span {width:19%;margin:0;} span.rainbow span:first-child, span.rainbow span:nth-child(2) {width:19%;} span.rainbow span.rainbow1 {background-position: -410px -343px;} span.rainbow span.rainbow2 {background-position: -415px -343px;} .label-check span.rainbow1, .tbl-input span.rainbow1 {margin:0 2.0rem 0 0;} .check_list .rainbow_agree .label-check label > input + span {padding: 0.8rem 2.0rem 0.7rem 3.2rem;} /*-------------------------------------------------------------------------------- # 메인 하단 팝업 슬라이딩 2021-06-01 ---------------------------------------------------------------------------------*/ .pop-modal1.mo.main {overflow:hidden;display:block;position:fixed;border-radius:20px 20px 0 0;background:#fff;left:0;right:0;top:0 !important;z-index:1000;transform:translateY(130%);transition: opacity 250ms 250ms ease, transform 300ms 250ms ease;} .pop-modal1.mo.main.open {display:block;position:fixed;left:0;right:0;top:0 !important;z-index:1000;transform:translateY(calc(100vh - 27.0rem));transition:opacity 500ms 250ms ease, transform 500ms 250ms ease;} .pop-modal1.mo.main .header {height:27.0rem;background:none;border-bottom:none;padding:0;} .pop-modal1.mo.main .header button {background:none;} .pop-modal1.mo.main .header button:focus {outline:none;} .pop-modal1.mo.main .header button:before, .pop-modal1.mo.main .header button:after {background:#000;} .pop-modal1.mo.main .main_pop_event img {height:100%;width: 100%;} /* 메인 팝업 2023-12-12 */ /*.pop-modal1.mo .header button.todayNo {right:5.0rem;top:1.0rem;text-indent:0;width:13.0rem;padding:0;background-color:rgba(255,255,255,0.5);font-size:1.2rem;border-radius:1.5rem;height:3.0rem;} .pop-modal1.mo .header button.todayNo:before, .pop-modal1.mo .header button.todayNo:after {display:none;}*/ /*약관*/ .terms-wrap .terms-tit {margin:20px 0 2px;font-weight:bold;} .terms-wrap .terms-txt {margin:20px 0 2px;} .terms-wrap .terms-list-dashed > li {position:relative;display:block;margin-top:0.5rem;padding-left:1.0rem;} .terms-wrap .terms-list-dashed > li:before{content:'-';position:absolute;top:0;left:1px;} .terms-wrap .terms-list > li {position:relative;display:block;margin-top:0.5rem;padding-left:1.5rem;text-indent: -1.5rem;color:#7D7D7D;} .terms-wrap .terms-sub-list{padding:1.0rem 0;} .terms-wrap .terms-sub-list > li {position:relative;display:block;margin-top:0.5rem;padding-left:3.0rem;} .terms-wrap .txt-normal, .terms-wrap .txt-normal >li {text-indent:0;} .terms-wrap .txt-normal:before {display:none;} .terms-wrap .point-color {color:#0081d1 !important;} .terms-wrap .terms-underline {border-bottom: 1px solid #666;} .terms-wrap .point {color:#1A1A1A;font-size: 1.6rem} .terms-wrap .tbl-list th, .terms-wrap .tbl-list td {height:auto ;padding: 0.3rem;border-left: 0.1rem solid #ced4d9;font-size: 1.3rem;text-align:center;} .terms-wrap .tbl-list {border-right: 0.1rem solid #ced4d9;} /* 약관 밑줄 색상 따로 추가요청함으로 추가함....boramhan 20.10.14 */ .terms-wrap .terms-underline1 {border-bottom: 1px solid #fdba31;} .terms-wrap .point02 {color:#f9bd1c;font-size: 1.6rem} /* 3단계 */ .step3 .tbl-input > dt, .step3 .form-area .detail-form .tbl-input > dd .label-check:nth-of-type(1):nth-last-child(2){width:100%;} .step3 .tbl-input > dd .tbl-input.type2 dd{padding-left:110px;} .step3 .tbl-input dt .btn-sub3 {display:inline-block;margin:0 0 0 1.0rem;} .step3 .box-type3 .sub-cont {margin-left:0;} .step3 .box-type3 .mes-info3{margin-top:0.5rem;} .step3 .txt-sub.type2 {margin-left:0;} .infobox-wrap{padding:2.0rem 0 1.0rem;} .infobox-wrap .check-wrap{padding:0 0 4.0rem;} .infobox-wrap .check-wrap .label-check{margin:0;top:auto;bottom:0; -ms-transform: translateY(0);-webkit-transform: translateY(0); transform: translateY(0);} .infobox-wrap .check-wrap + .box-type3{margin:0;} .check-wrap > strong{font-size:1.7rem;} .infobox-wrap > strong{font-weight:normal;} /* 청약완료 */ header.sc-donebox1 {padding:2.0rem;} header.sc-donebox1 h2 {padding-left:10.5rem; max-width:100%;} header.sc-donebox1 h2:before{background-position:-12.0rem -18.0rem;} header.sc-donebox1 .sc-donebox2 {margin:0 -2.0rem;} header.sc-donebox1 .txt-info strong {font-size:1.8rem;} .step4 .sc-step{padding-top:1.5rem;} .step4 .box-type1 dl:not(.tbl-input), .step4 .box-type1 dl:not(.tbl-input) dt, .step4 .box-type1 dl:not(.tbl-input) dd {display:block;text-align:left;} .step4 .box-type1 dt span {margin:-1.0rem 0 0;padding:2.8rem 0 2.8rem 5.0rem;line-height:2.4rem;} .step4 .box-type1 dt span:before {left:0;top:50%;margin:0;-ms-transform:translateY(-50%);-webkit-transform:translateY(-50%);transform:translateY(-50%);} .step4 .btn-action {padding:0 2.0rem !important;} /* 청약완료 화면 수정 2023-04-18 */ .step4 .sc-step{padding-bottom:7.0rem;} .step4 header.sc-donebox1 {min-height:150px;margin-bottom:20px;} .step4 header.sc-donebox1 h2 {padding-top:20px;} .step4 .area-btn1 {margin-top:100px;} .sc-donebox2 {padding:1.0rem 2.0rem 0;} .sc-donebox2 dd{display:block;border-top:1px solid #ced4d9;border-left:0;padding:20px 0;} .sc-donebox2 ul.mes-info2 > li{font-size:1.5rem;} .sc-donebox2 dt{padding:0;font-size:1.8rem;width:100%;} .sc-donebox2 .btn-link{width:100%;font-size:1.2rem;} /* 20181107 포인트 전환 */ .sc-donebox4 {padding:1.0rem 2.0rem 0;} .sc-donebox4 dd{display:block;border-top:1px solid #ced4d9;border-left:0;padding:20px 0;} .sc-donebox4 ul.mes-info2 > li{font-size:1.5rem;} .sc-donebox4 dt{padding:0;font-size:1.8rem;width:100%;} .sc-donebox4 .btn-link{width:100%;font-size:1.2rem;} .tbl-input.agree{position:relative;padding:1.0rem 0 4.5rem;} .tbl-input.agree dt{width:100%;height:auto;line-height:2.0rem;} .tbl-input.agree dd .form{position:absolute;right:0;bottom:0;} /* 공통 */ .tbl-input input, .tbl-input select, .tbl-input textarea, .tbl-input div.label-check, .tbl-input .tbl-col, .tbl-input .tbl-row{margin:0;} .label-check label:not(:only-child){margin-right:0;} @media only screen and (max-width: 359px) { .step-nav li {width:5.0rem;padding:0 1.0rem;font-size:1.4rem;} .step-nav li + li:after {left:-1.0rem;margin:0 -1.0rem 0 0;} .step-nav li span:after {left:1.0rem;} } /*-------------------------------------------------------------------------------- # 기타 : 모바일용 ---------------------------------------------------------------------------------*/ /* 스마트도움말 */ #uiPOPHELP .box-scroll1 {height:calc(100vh - 19.5rem);} /* 보안프로그램 설치 */ .install h1 {padding:1.3rem 0 0.4rem;font-size:2.7rem;} .install .tbl-list colgroup col:nth-child(1) {width:25%;} .install .tbl-list colgroup col:nth-child(3) {width:32%;} /*관리자에서 이미지 등록*/ .imgList{overflow:hidden;margin-top:1rem} .imgList li{float:left;width:100%;height:24rem} .imgList li span{font-size:0;text-indent: -999px} .imgList.sam .n01{display:block;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Sf_001.wct) no-repeat 0 0;background-size:auto 23.5rem} .imgList.sam .n02{display:block;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Sf_002.wct) no-repeat 0 0;background-size:auto 23.5rem} .imgList.sam .n03{display:block;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Sf_003.wct) no-repeat 0 0;background-size:auto 23.5rem} .imgList.sam .n04{display:block;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Sf_004.wct) no-repeat 0 0;background-size:auto 23.5rem} .imgList.sam .n05{display:block;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Sf_005.wct) no-repeat 0 0;background-size:auto 23.5rem} .imgList.lg .n01{display:block;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Sy_001.wct) no-repeat 0 0;background-size:auto 23.5rem} .imgList.lg .n02{display:block;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Sy_002.wct) no-repeat 0 0;background-size:auto 23.5rem} .imgList.lg .n03{display:block;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Sy_003.wct) no-repeat 0 0;background-size:auto 23.5rem} .imgList.lg .n04{display:block;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Sy_004.wct) no-repeat 0 0;background-size:auto 23.5rem} .imgList.lg .n05{display:block;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Sy_005.wct) no-repeat 0 0;background-size:auto 23.5rem} .imgList.lg .n06{display:block;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Sy_006.wct) no-repeat 0 0;background-size:auto 23.5rem} .imgFloat{overflow:hidden} .imgFloat li{float:left;wdith:100%;padding-left:0} .list_01{width:auto;margin:0 auto 2rem!important;text-align:left} .newslatter{height:50rem;background-size:contain} /* nh point 20181101 포인트 환급 */ .btn-com.arr-b { background:#0081d1; border:0; padding:0 3.8rem; height:3.7rem; font-size:15px; line-height:3.8rem; } .btn-com.arr-b span:before, .btn-com.arr-b span:after { top:18px; } .point-list { padding:0; margin-bottom:60px; } .point-list > div { border:0; padding:223px 0 0 0; } .point-list.bg-point02 > div { padding:235px 0 0 0; } .point-list > div:before { content:''; display:block; width:100%; height:1px; background:#cfd4da; } .point-list.bg-point02:after { top:32px; background-position:-200px -250px; } .point-list div > strong { font-size:24px; margin:40px 0 0 0; padding-left:48px; letter-spacing:-3px; } .point-list div > strong:after { width:37px; height:40px; left:0; top:-5px; background-position:-35px 0; background-size:auto 75px; } .point-list:after { top:0; left:50%; margin-left:-160px; width:320px; height:223px; background-position:-200px 0; background-size:600px auto; } .point-list p { padding:25px 0 0 0; font-size:19px; } .point-list p strong { font-size:16px; margin-bottom:5px; } .point-list .detail { margin-top:30px; } .point-list .detail br { display:block; } .point-list .detail span { padding-top:96px; font-size:12px; } .point-list .detail span:before { width:92px; height:92px; margin-left:-46px; background-size:400px auto; background-position:0 -160px; } .point-list .detail span.use02:before { background-position:-100px -160px; } .point-list .detail span.use03:before { background-position:-200px -160px; } .point-list .detail span.use04:before { background-position:0 -260px; } .point-list .detail span.use05:before { background-position:-100px -260px; } .point-list .detail span.use06:before { background-position:-200px -260px; } .point-list .info li { font-size:14px; line-height:18px; padding-left:15px; margin-top:7px; } .point-list .info li:before { top:5px; width:10px; height:10px; background-size:100px auto; background-position:-35px -40px; } .point-list .info .tbl-list > thead > tr > th { margin-top:20px; font-size:1.2rem;text-align:center;} .point-list .info .tbl-list > tbody > tr > td { margin-top:20px; font-size:1.2rem;text-align:center;} .point-list ul > li > p { margin-top:1.0rem;font-size:1.3rem; padding:0 0 0 0;text-align:left;} .members-app { position:relative; padding:0; height:475px; background:none; margin-top:60px; } .members-app > div { position:absolute; top:302px; left:50%; width:337px; box-sizing:border-box; font-size:12px; padding:0 20px 0 30px; margin:0 0 10px -169px; } .members-app:before { content:''; display:block; position:absolute; top:0; left:50%; margin-left:-180px; height:474px; width:337px; padding:0; font-size:12px; background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Svzntrf%2Spbzzba%2Sot_ncc_vasb_z.cat) no-repeat center 0; background-size:auto 474px; } .members-app button { width:130px; } .members-app > div p { text-align:center; margin-bottom:15px; } .members-app > div .btns { margin:0 0 0 10px; } .members-app button:before { background-size:200px auto; width:89px; height:12px; background-position:0 -10px; } .members-app button + button:before { width:77px; margin-left:-39px; background-position:-100px -10px; } .point-wrap .img-box { margin-top:25px; } .point-wrap .summary{font-size:1.4rem;color:#333;font-weight:300;line-height:1.9rem;letter-spacing:-0.05em;font-family: 'NanumSquareR'; padding:0 ; } .point-wrap h4{margin-top:6.0rem;font-size:1.6rem;color:#222;font-weight:600;text-align:center;line-height:2.0rem;font-family: 'NanumSquareR';} .point-wrap h4.first{margin-top:4.0rem} .point-wrap .top-title{display:block;margin-top:3.0rem;font-size:2.1rem;color:#444;font-weight:400;text-align:center;font-family: 'NanumSquareL';} .point-wrap ul{margin-top:2.0rem;} .point-wrap .po-list li{position: relative;float:none;width:100%;font-size:1.2rem;font-weight:300;color:#666;text-align: center;box-sizing: border-box;line-height:1.6rem; padding: 13.2rem 0 0 0;word-break: keep-all;margin-top:2.5rem;} .point-wrap .po-list li:first-child{margin-top:0;} .point-wrap .po-list li:after{content: '';display: block;position: absolute;width: 11.5rem;;height: 11.5rem;top: 0;left: 50%;margin-left: -5.7rem;background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Svzntrf%2Spbzzba%2Sz_ot_zrzoref.cat) no-repeat 0 0;background-size:50.0rem;} .point-wrap .po-list li strong{display: block;color: #333;font-size:1.4rem;color:#222;margin-bottom:1.0rem;} .point-wrap .po-list li.bg-po02:after{background-position: -12.5rem 0;} .point-wrap .po-list li.bg-po03:after{background-position: -25.0rem 0;} .point-wrap .po-list li.bg-po04:after{background-position: 0 -12.5rem;} .point-wrap .po-list li.bg-po05:after{background-position: -12.5rem -12.5rem;} .point-wrap .po-list li.bg-po06:after{background-position: -25.0rem -12.5rem;} .point-wrap .po-list.list2 li.bg-po07:after{background-position: 0 -25.0rem;} .point-wrap .po-list.list2 li.bg-po08:after{background-position: -12.5rem -25.0rem;} .point-wrap .po-list li.bg-po21:after{background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Svzntrf%2Spbzzba%2Sz_ot_zrzoref.cat) no-repeat -25.0rem 0;background-size:50.0rem;} .point-wrap .po-list li.bg-po22:after{background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Svzntrf%2Spbzzba%2Sz_ot_zrzoref.cat) no-repeat -12.5rem 0;background-size:50.0rem;} .point-wrap .po-list li.bg-po23:after{background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Svzntrf%2Spbzzba%2Sz_ot_zrzoref.cat) no-repeat -25.0rem -25.0rem;background-size:50.0rem;} .point-wrap .img-box + .top-title, .point-wrap ul + .top-title{border-top: 1px solid #d0d6db;padding-top: 2.7rem;} .point-wrap .po-list.brand-list li img { display:block; } .point-wrap .po-list.list2 li{width:100%; padding:130px 0 0 0; } .point-wrap .step-list{margin-top:3.0rem;} .point-wrap .step-list li{position:relative;width:100%;padding:13.2rem 0 0 0;text-align:center;font-size:1.2rem;font-weight:300;line-height:2.0rem;margin-top:7.0rem;} .point-wrap .step-list li:before{content:'';display:block;position:absolute;top:-5.0rem;left:50%;width:3.2rem;height:3.0rem;margin-left:-1.6rem;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Svzntrf%2Spbzzba%2Sz_ot_zrzoref.cat) -37.5rem 0 no-repeat; background-size:50.0rem; } .point-wrap .step-list li:after{top:0;left:50%;width:11.5rem;height:11.5rem;margin-left:-5.8rem;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Svzntrf%2Spbzzba%2Sz_ot_zrzoref.cat) no-repeat;background-position:0 -37.5rem; background-size:50.0rem;} .point-wrap .step-list li.bg-step02:after{background-position:-12.5rem -37.5rem;} .point-wrap .step-list li.bg-step03:after{background-position:-25.0rem -37.5rem;} .point-wrap .step-list li:first-child{margin-top:0;} .point-wrap .step-list li:first-child:before{display:none;} .point-wrap .step-list li strong{display: block;font-size:1.6rem;font-weight:600;font-family: 'NanumSquareR';color: #f15921;margin-bottom: 0.5rem;line-height:1.3rem;} .point-wrap .step-list li em{font-size:1.2rem;} .point-wrap .memers-list{margin-top:6.0rem;} .point-wrap .memers-list li{display:flex;align-items:center;justify-content:center; position:relative;margin-top:4.5rem;min-height:16.3rem;height:auto;padding:0 2.0rem;background:#f4f4f4;} .point-wrap .memers-list li:before{content:'';display:block;position:absolute;top:-2.6rem;left:2.5rem;width:11.7rem;height:18.9rem; background-image:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Svzntrf%2Spbzzba%2Sz_ot_zrzoref_nccp.cat);background-repeat:no-repeat;background-position:0 0; background-size:62.5rem;} .point-wrap .memers-list li:after{display:none;} .point-wrap .memers-list li:first-child{margin-top:0;} .point-wrap .memers-list li span{position:relative;display:block;box-sizing:border-box;color:#666;font-size:1.2rem;padding:0 0 0 13.0rem;height:auto;background:#f4f4f4;} .point-wrap .memers-list li span:after{display:none;} .point-wrap .memers-list li strong{display: block;font-size:1.4rem;color: #222;font-family: 'NanumSquareL';margin-bottom:1.0rem;letter-spacing: -0.04em;font-weight:400;} .point-wrap .memers-list li.even{padding:0 2.0rem;} .point-wrap .memers-list li.even span{padding:0 13.0rem 0 0} .point-wrap .memers-list li.even:before{lefT:auto;right:2.5rem;} .point-wrap .memers-list li.bg-mem02:before{background-position: -12.5rem 0} .point-wrap .memers-list li.bg-mem03:before{background-position: -25.0rem 0;} .point-wrap .memers-list li.bg-mem04:before{background-position: -37.5rem 0;} .point-wrap .memers-list li.bg-mem05:before{background-position: -50.0rem 0;} .point-wrap h3 + h4{margin-top:0;} .point-wrap .po-list.brand-list{padding:0;} .point-wrap .po-list.brand-list li{width:100%;padding:0 2.5rem;margin:0;} .point-wrap.info-brand .top-title{font-size:1.5rem;margin-top:2.5rem;} .point-wrap .po-list.brand-list li:after{display:none;} .point-wrap .po-list.brand-list li strong{margin-top:1.0rem;} /* 20181127 상품 특장점 그래프 */ .area-chart span[class*="num"] { font-size:0.8rem; line-height:1.1rem;} @media only screen and (min-width: 480px) and (max-width:767px) { .area-chart span[class*="num"] { font-size:1.3rem; line-height:1.6rem;} } @media only screen and (min-width: 768px) and (max-width:1024px) { .area-chart span[class*="num"] { font-size:1.8rem; line-height:2.2rem;} } /* 연금저축보험 그거 아세요? 이미지*/ .visualImg11{height:auto!important}/*고령인구비중*/ .visualImg12{height:auto!important}/*출산률*/ .visualImg13{height:32rem!important;}/* 노후준비 방법(19세 이상)*/ .visualImg14{height:32rem!important;}/* 은퇴한 가구의 60.5%가 노후의 생활비 부족을 경험하고 있습니다. */ .visualImg15{height:75rem!important}/*2017년 신규 가입자가 20년, 30년 가입후 월 평균국민연금 지급예상액 분석 결과 그래프 */ /* 암보험 그거 아세요? 이미지*/ .visualImg21{height:22rem!important}/* 암 생존율 얼마나 높아졌을까? 그래프 */ /* 20190521 - 레저보험 */ .visualImg23 {height:38.4rem;} .visualImg24 {height:24rem;} /* 190102 : 전체메뉴 dep3 추가 */ .list-3dep .w{display:none} .list-3dep button{position:relative;width:100%;height:4.6rem;color:#333;font-size:1.4rem;text-align:left;padding:10px;} .list-3dep button:after, .list-3dep button:before{content:'';display:block;position:absolute;top:50%;right:0.4rem;background:#2e3133;transform: translate(-50%, -50%);transition: all 0.3s;} .list-3dep button:after{width:0.9rem;height:0.1rem;} .list-3dep button:before{width:0.1rem;height:0.9rem;right:1.2rem;} .list-3dep.on button{background:#edf1f5;} .list-3dep.on button:after{display:none;} .list-3dep.on button:before{width:0.9rem;height:0.1rem;right:0.4rem;background:#0089e4; transition: all 0.3s;} .list-3dep .item{display:none;} .list-3dep.on .item a{position: relative;display: block;padding: 1.2rem 4.0rem 1.2rem 1.0rem;text-align: left;color: #333;font-size: 1.4rem;line-height: 1.5;word-break: normal;} .list-3dep.on .item a:after{content: "";display: block;position: absolute;bottom: 50%;margin-bottom: -6px;right: 4%;width: 0;height: 0;border-style: solid;border-color: transparent;border-width: 4px 0 4px 5px;border-left-color: #5c6166 !important;} .list-3dep .item a:hover, .list-3dep .item a:focus{text-decoration: underline;color:#0089e4;} .list-3dep .item a:focus:after{border-left-color:#0089e4 !important;} /* 201019 : 전체메뉴 dep3 설명 추가 */ .list-3dep .item span {font-size:14px;} .wrap-basic .wrap-calculator1 .wraptype-base.type-tbl dt{width:65px; text-align: left;} .wraptype-base.type-tbl dd .label-check{text-align:left} .product5 .wraptype-base button{max-width:100px; float:none} .list-product2 .bx-wrapper .bx-viewport{height:auto!important} .list-product2.type-farmer .list.type-only{overflow:hidden;max-width:100%!important} .list-product2.type-farmer .list.type-only li{width:auto!important;margin-right:0!important;max-width: 100%!important} .list-product2.type-farmer .list.type-only .box > ul > li{width:100%!important} .list-product2.type-farmer .list.type-only .box:before {border:0.5rem solid #2e3133} .list-product2.type-farmer .list.type-only .box > ul > li span{font-weight: bold} .list-product2.type-farmer .list.type-only .box > ul > li span.txt, .list-product2.type-farmer .list.type-only .box > ul > li span + span{font-weight:normal} .list-product2.type-farmer .list.type-only .box > ul > li br{display:none} .list-product2.type-farmer .list .box .btn-com{width:100% !important; margin:0 0 5px!important} .list-product2.type-farmer .sub-tit{padding:0 !important} .aside-totalmenu-mypage{position:relative; top:0; right:0} .list-3dep .m, .list-3dep .item{display:block} .list-3dep button.title{font-size:15px; height:auto;} .list-3dep button.title:before, .list-3dep button.title:after{display:none} .title .m {display:block;} .title .w {display:none;} /* 190806 농(임)업인 */ .cal-price.farmer .btn-view {right:0.5rem; top:-3rem;} .mb-inbShow {padding-top:0.5rem !important;} .mb-inbShow > span {display:inline-block;} .mb-inbShow > span:nth-child(3) {clear:both;} /* 190806 레저보험 청약 1단계 */ .leisure-account fieldset.box-type1 {padding:1.5rem 2.0rem 2.0rem;} .leisure-account fieldset.box-type1 dd:not(.bnk) input[type=text] {width:100%;} .leisure-account fieldset.box-type1 .bnk select {width:100%; margin-right:0;} .leisure-account fieldset.box-type1 .bnk select + .input-wrap1 {width:100%; margin:10px 0 0;} .leisure-account .mes-info3, .leisure-account .check-wrap {margin-right:2.0rem;} /* 190814 암보험 카드이체 화면 */ .continue-account select + div.input-wrap1 {margin:1.0rem 0 0 !important;} /* 모바일 메인 개편 2020-05-11 */ #container.main.mobile {padding:0;margin:0;} /*-------------------------------------------------------------------------------- # layout : header_m ---------------------------------------------------------------------------------*/ #header_m {position:fixed;left:0;right:0;bottom:0 !important;width:100%;height:17.5rem;z-index:100;} #header_m .logo {position:absolute;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);bottom:0;margin:0;display:inline;overflow:hidden;width:10%;height:4.0rem;z-index:1000;background:#fff;} #header_m .logo:after {content:'';display:inline;position:absolute;top:0;height:3.6rem;width:100%;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Szbovyr_vpba_231012.cat) no-repeat 50% -7.6rem;background-size:30.0rem 30.0rem;} #gnb.mobile .fn-btn {width:100%;} #gnb.mobile .fn-btn li {width:50%;display:inline-block;border:1px solid red;} #gnb.mobile .fn-btn a {position:relative;width:50%;height:4.9rem;font-size:1.5rem;line-height:4.9rem;} #gnb.mobile .fn-btn a:before, #gnb.mobile .fn-btn a:after{content:'';position:absolute;top:13px;left:1.0rem;width:22px;height:20px;} /*-------------------------------------------------------------------------------- # 전체메뉴 / 나의설계내역 ---------------------------------------------------------------------------------*/ [class*="aside-"] > section .header.mobile {position:fixed;left:0;right:0;bottom:0 !important;height:5.0rem;} .fn-btn.area-header {position:fixed;left:0;right:0;bottom:0 !important;height:6.0rem;text-align:center;overflow:hidden;margin:0;padding:0;z-index:999;} .fn-btn.area-header:before {position:fixed;bottom:4.0rem;width:-webkit-calc(100% - 2.0rem);margin:0 1.0rem;height:13.0rem;background:#0055b8;} .fn-btn.area-header li {float:left;width:50%;height:6.0rem;overflow:hidden;padding-top:1.0rem;font-weight:bold;display:inline-block;color:#464646;border-top:2px solid #979797;background:#fff;} .fn-btn.area-header li a {padding:3.0rem 2.0rem;} .fn-btn.area-header li:first-child {border-radius:0 15px 0 0;border-right:1px solid #979797;} .fn-btn.area-header li:last-child {border-radius:15px 0 0 0;border-left:1px solid #979797;} .fn-btn.area-header li:before {content:'';position:relative;top:0;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);display:block;width:2.4rem;height:2.4rem;vertical-align:middle;background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Szbovyr_vpba_231012.cat) no-repeat;background-size:30.0rem 30.0rem;} .fn-btn.area-header li:first-child:before {background-position:-7.5rem -3.5rem;} .fn-btn.area-header li:last-child:before {background-position:-11.1rem -3.7rem;} #topBtn {position:fixed;display:none;right:2.0rem;bottom:10.8rem !important;width:5.0rem;height:5.0rem;text-align:center;font-weight:bold;background:#fff;border-radius:10px;border:1px solid #979797;z-index:100;} #topBtn:before {content:'';position:relative;top:1.0rem;left:25%;right:25;display:block;width:2.4rem;height:2.4rem;background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Szbovyr_vpba_231012.cat) no-repeat -22.2rem -3.7rem;background-size:30.0rem 30.0rem;} /*-------------------------------------------------------------------------------- # layout : header : inApp ---------------------------------------------------------------------------------*/ /* 인앱 모바일 헤더 2022-12-16 */ #header.inApp .logo {position:absolute;right:0;left:50%;transform:translateX(-48%);-webkit-transform:translateX(-48%);} #header.inApp .logo #header.inApp #gnb {left:0;right:100%;} #header.inApp #gnb .fn-btn {width:6.4rem;} #header.inApp #gnb .fn-btn a {float:right;width:3.2rem} #header.inApp button.bt-close {position:absolute;margin-top:0!important;right:0;top:0;overflow:hidden;display:block;text-indent:-9999px;width:4.0rem;height:5.0rem;} #header.inApp button.bt-close:before, #header button.bt-close:after {content:'';display:block;position:absolute;left:50%;top:50%;width:2.0rem;height:0.2rem;margin:-0.1rem 0 0 -0.9rem;background:#2e3133;-webkit-transition:all 0.3s ease;-moz-transition: all 0.3s ease;-webkit-transition:all 0.3s ease;} #header.inApp button.bt-close:before {-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg);} #header.inApp button.bt-close:after {-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);} #header.inApp #gnb .fn-btn .wrap-tooltip {left:1.0rem;} #header.inApp #gnb .fn-btn .wrap-tooltip:after {left:4.1rem;} #bottomBanner.inApp {height:13.0rem;} #container.main.mobile.inApp {padding-top: 5.0rem;} /* 인앱 모바일 tab 2023-01-30 */ .scrolling .wrap-detail.inApp .tab-nav1 {top:0;} #header.inApp span.logo img {display:none;} /* 인앱 모바일 로딩 2023-01-19 */ .inApp_loading {position:relative;margin:0;display:flex;justify-content:center;align-items:center;height:100vh;} /*.inApp_loading:after {z-index:-999;content:'';display:inline;position:absolute;height:6.2rem;width:7.2rem;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Szbovyr_vpba_231012.cat) no-repeat 50% -12.6rem;background-size:50.0rem 50.0rem;}*/ .inApp_loading:after {z-index:-999;content:'';display:inline;position:absolute;height:5.0rem;width:24.0rem;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Svpba1_20221006.cat) no-repeat 0 -32.4rem;background-size:36.0rem 36.0rem;} .inApp_loading span {display:block;padding-top:3.0rem;font-weight:bold;} /* 모바일 헤더2022-12-16 #header.main {position:fixed;left:0;right:0;bottom:0 !important;top:auto !important;width:100%;height:6.0rem;background:rgba(255,255,255,0);z-index:999;} top:calc(100vh - 6.0rem) 모바일 헤더 2023-02-09 #header.main > div {height:6.0rem;} #header.main > div:first-child:before {position:absolute;content:'';display:inline-block;left:0;width:50%;height:6.0rem;z-index:-999;background:#fff;border-top:2px solid #979797;border-radius:0 15px 0 0;border-right:1px solid #979797;} #header.main > div:first-child:after {position:absolute;content:'';display:inline-block;right:0;width:50%;height:6.0rem;z-index:-999;background:#fff;border-top:2px solid #979797;border-radius:15px 0 0 0;border-left:1px solid #979797;} #header.main .logo {position:absolute;left:50%;bottom:0;transform:translateX(-50%);-webkit-transform:translateX(-50%);margin:0;display:inline;overflow:hidden;width:4.0rem;height:4.5rem;z-index:1000;background:#fff;} #header.main .logo:after {content:'';display:inline;position:absolute;top:0;height:3.6rem;width:100%;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Szbovyr_vpba_231012.cat) no-repeat 50% -7.6rem;background-size:30.0rem 30.0rem;} #header.main #gnb .fn-btn {width:100%;height:5.0rem;} #header.main #gnb .fn-btn .wrap-tooltip:not(.none) {display:none;} #header.main #gnb .fn-btn .btn-mp {display:none;} #header.main #gnb {width:100%;height:6.0rem;display:inline-block;position:fixed;bottom:0;top:auto;} 모바일 헤더 2023-02-09 #header.main #gnb .fn-btn .btn-full {position:absolute;content:'';left:20%;transform:translateX(-20%);-webkit-transform:translateX(-20%);display:inline-block;width:8.5rem;height:6.0rem;padding:1.0rem;} #header.main #gnb .fn-btn .btn-full:before {border:none;content:'';position:relative;top:0;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);display:block;width:2.3rem;height:2.3rem;background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Szbovyr_vpba_231012.cat) no-repeat -7.5rem -3.5rem;background-size:30.0rem 30.0rem;} #header.main #gnb .fn-btn .btn-full:after {display:none;} #header.main #gnb .fn-btn a.btn-full {font-size:1.5rem;font-weight:bold;color:#464646;text-align:center;line-height:2.0rem;} #header.main #gnb .fn-btn .btn-sa {position:absolute;content:'';right:20%;transform:translateX(20%);-webkit-transform:translateX(20%);display:inline-block;width:8.5rem;height:6.0rem;padding:1.0rem;} #header.main #gnb .fn-btn .btn-sa:before {border:none;content:'';position:relative;top:0;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);display:block;width:2.3rem;height:2.3rem;background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Szbovyr_vpba_231012.cat) no-repeat -11.1rem -3.7rem;background-size:30.0rem 30.0rem;} #header.main #gnb .fn-btn .btn-sa:after {display:none;} #header.main #gnb .fn-btn a.btn-sa {font-size:1.5rem;font-weight:bold;color:#464646;text-align:center;line-height:2.0rem;} #header #gnb .fn-btn .btn-sa {display:none;} */ /* 모바일 헤더 2023-09-01 챗봇 메뉴 수정 */ #header.main {position:fixed;left:0;right:0;bottom:0 !important;top:auto !important;width:100%;height:6.0rem;background:rgba(255,255,255,0);z-index:999;} #header.main > div {height:6.0rem;background:#fff;border-top:2px solid #979797;border-radius:1.0rem 1.0rem 0 0;} #header.main .logo {display:none;} #header.main #gnb .fn-btn {width:100%;height:5.0rem;} #header.main #gnb .fn-btn .wrap-tooltip:not(.none) {display:none;} #header.main #gnb .fn-btn .btn-mp {display:none;} #header.main #gnb {width:100%;height:6.0rem;display:inline-block;position:fixed;bottom:0;top:auto;} #header.main #gnb .fn-btn .btn-health {height:6.0rem;padding:1.0rem;} #header.main #gnb .fn-btn .btn-ko {height:6.0rem;padding:0.5rem 1.0rem;line-height:1.8rem;} #header.main #gnb .fn-btn a.btn-health:after, #header.main #gnb .fn-btn a.btn-ko:after {display:none;} #header.main #gnb .fn-btn .btn-full, #header.main #gnb .fn-btn .btn-sa {height:6.0rem;padding:1.0rem 0;} #header.main #gnb .fn-btn .btn-full:before {border:none;content:'';position:relative;top:0;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);display:block;width:2.3rem;height:2.3rem;background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Szbovyr_vpba_231012.cat) no-repeat -7.5rem -3.5rem;background-size:30.0rem 30.0rem;} #header.main #gnb .fn-btn .btn-full:after {display:none;} #header.main #gnb .fn-btn a {width:25%;font-size:1.5rem;font-weight:bold;color:#464646;text-align:center;line-height:2.0rem;} #header.main #gnb .fn-btn .btn-sa:before {border:none;content:'';position:relative;top:0;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);display:block;width:2.3rem;height:2.3rem;background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Szbovyr_vpba_231012.cat) no-repeat -11.1rem -3.7rem;background-size:30.0rem 30.0rem;} #header.main #gnb .fn-btn .btn-sa:after {display:none;} #header.main #gnb .fn-btn .btn-sa, #header.main #gnb .fn-btn .btn-health, #header.main #gnb .fn-btn .btn-ko {display:block;} #header.main #gnb .fn-btn .btn-health:before {border:none;content:'';position:relative;top:0;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);display:block;width:3.0rem;height:2.4rem;background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Szbovyr_vpba_231012.cat) no-repeat -11.65rem -19.1rem;background-size:30.0rem 30.0rem;} #header.main #gnb .fn-btn .btn-ko:before {border:none;content:'';position:relative;top:0;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);display:block;width:4.0rem;height:3.1rem;background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Szbovyr_vpba_231012.cat) no-repeat -13.75rem -17.5rem;background-size:28.0rem 28.0rem;} #gnb .fn-btn a {overflow:hidden;float:left;display:block;position:relative;width:4.0rem;height:4.9rem;font-size:0.5rem;line-height:4.9rem;white-space:nowrap;color:rgba(255,255,255,0);oulline:0;} #gnb .fn-btn a:before, #gnb .fn-btn a:after{content:'';position:absolute;top:13px;left:1.0rem;width:22px;height:20px;} #gnb .fn-btn a.btn-mp:before {width:2.2rem;height:2.2rem;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Svpba1_20221006.cat) no-repeat 0 0;background-size:31.0rem 31.0rem;} #gnb .fn-btn .btn-sa, #gnb .fn-btn .btn-ko, #gnb .fn-btn .btn-health {display:none;} /*-------------------------------------------------------------------------------- # 하단 슬라이딩 배너 #bottomBanner {position:absolute;bottom:0 !important;width:100%;margin:0;height:18.5rem;text-align:center;} #bottomBanner span {position:absolute;z-index:500;top:0;text-indent:-10000px;display:block;width:120px;height:13.0rem;background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Szbovyr_vpba_231012.cat) no-repeat -35px bottom;background-size:38.0rem 38.0rem;} .intro {position:fixed;z-index:99;left:0;width:-webkit-calc(100% - 2.0rem);height:6.0rem;} .intro .slide {width:-webkit-calc(100% - 2.0rem);border-radius:15px 15px 0 0;font-size:1.3rem;height:8.5rem;display:block;text-align:center;background:#fff;position:absolute;top:55px;left:1.0rem;padding:1.4rem 0 0 6.0rem;overflow:hidden;} .intro .slide.slide-a {background:#f26060;z-index:400;} .intro .slide.slide-a .slide-a-child {transform:translateY(80px);opacity:0;transition:all 1s;} .intro .slide.slide-a .slide-a-child.is-visible {transform:translateY(0);opacity:1;} .intro .slide.slide-b {background:#0055b8;z-index:300;} .intro .slide.slide-b h2 {transform:translateY(-50px);font-size:1.2rem;} .intro .slide.slide-b p {display:inline-block;} .intro .slide.slide-b p:first-of-type {transform:translateX(-300px);font-size:1.5rem;font-weight:bold;} .intro .slide.slide-b p:last-of-type {transform:translateY(50px);font-size:1.1rem;} .intro .slide.slide-b .slide-b-child {transition:all 1s;opacity:0.5;} .intro .slide.slide-b .slide-b-child.is-visible {transform:translateX(0);opacity:1;} .intro .slide.slide-c {background:#0055b8;z-index:200;} .intro .slide.slide-c .slide-c-child {transition:all 1s cubic-bezier(0.25, 0.25, 0.23, 1.405);transform:scale(0.5);opacity:0;} .intro .slide.slide-c .slide-c-child.is-visible {transform:scale(1);opacity:1;} .intro .slide.slide-d {background:#0055b8;z-index:100;} .intro .slide.slide-d .slide-d-child {transition:all 1s cubic-bezier(0.25, 0.25, 0.23, 1.405);transform:scale(0.5);opacity:0;} .intro .slide.slide-d .slide-d-child.is-visible {transform:scale(1);opacity:1;} .intro .slide .slide-content {text-align:center;color:#fff;} .intro .slide .slide-content h1 {font-weight:bold;font-size:1.7rem;} ---------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------- # 하단 슬라이딩 배너 2023-02-09 인앱과 같이 모바일 하단 통일 ---------------------------------------------------------------------------------*/ #bottomBanner {position:fixed;bottom:0 !important;width:100%;margin:0;height:18.5rem;text-align:center;} #bottomBanner span {position:absolute;z-index:500;top:0;display:block;width:110px;height:130px;} #bottomBanner span img {width:100%;height:100%;} .intro {position:fixed;z-index:99;left:0;width:-webkit-calc(100% - 2.0rem);height:6.0rem;} .intro .slide {background:#0055b8;width:-webkit-calc(100% - 2.0rem);border-radius:15px 15px 0 0;font-size:1.3rem;height:8.5rem;display:block;text-align:center;position:absolute;top:55px;left:1.0rem;padding:1.4rem 0 0 6.0rem;overflow:hidden;} .intro .slide.slide-a {z-index:300;} .intro .slide.slide-a h2 {transform:translateY(-50px);font-size:1.2rem;} .intro .slide.slide-a p {display:inline-block;} .intro .slide.slide-a p:first-of-type {transform:translateX(-300px);font-size:1.5rem;font-weight:bold;} .intro .slide.slide-a p:last-of-type {transform:translateY(50px);font-size:1.1rem;} .intro .slide.slide-a .slide-a-child {transition:all 1s;opacity:0.5;} .intro .slide.slide-a .slide-a-child.is-visible {transform:translateX(0);opacity:1;} .intro .slide.slide-b {z-index:200;} .intro .slide.slide-b .slide-b-child {transition:all 1s cubic-bezier(0.25, 0.25, 0.23, 1.405);transform:scale(0.1);opacity:0;} .intro .slide.slide-b .slide-b-child.is-visible {transform:scale(1);opacity:1;} .intro .slide.slide-c {z-index:100;} .intro .slide.slide-c .slide-c-child {transform:translateY(80px);opacity:0;transition:all 1s;} .intro .slide.slide-c .slide-c-child.is-visible {transform:translateY(0);opacity:1;} .intro .slide .slide-content {text-align:center;color:#fff;} .intro .slide .slide-content h1 {font-weight:bold;font-size:1.7rem;} .intro .red {background:#f26060;} .intro .blue {background:#0055b8;} .intro .green {background:#01b0b0;} .intro .purple {background:#6c01b0;} /*-------------------------------------------------------------------------------- # layout : footer_m 콜센터, 개인정보, copyright ---------------------------------------------------------------------------------*/ #footer_m {position:relative;width:100%;z-index:0;} /* 22-01-25 height:30.0rem 추가? */ #footer_m > div {position:relative;width:100%;max-width:110.0rem;height:20.0rem;margin:0 auto 12.0rem;color:#e5e5e5;font-size:1.4rem;text-align:center;}/* 22-03-23 하단 마진 수정 */ #footer_m .callcenter {background:#646464;margin:0;text-align:left;padding:1.5rem 0 1.0rem;} #footer_m .callcenter a {display:inline-block;margin:0;color:#feb81a;font-size:3.5rem;vertical-align:middle;line-height:5.0rem;} #footer_m .callcenter span {letter-spacing:0;margin-left:3.0rem;display:inline-block;vertical-align:middle;width:44%;font-size:1.6rem;color:#fff;} #footer_m .callcenter span span {font-size:1.2rem;margin:0;width:100%;} #footer_m .callcenter span span:before {content:'';display:inline-block;width:2.4rem;height:2.4rem;vertical-align:middle;background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Szbovyr_vpba_231012.cat) no-repeat -18.6rem -3.4rem;background-size: 30.0rem 30.0rem;} #footer_m .nav-foot {border-top:0.1rem solid #45494d;} #footer_m .nav-foot ul {overflow:hidden;width:100%;text-align:center;margin:2.0rem 0 0.5rem;} #footer_m .nav-foot li {display:inline-block;margin:0;color:#999;} #footer_m .nav-foot li > a {padding:1.0rem 0.5rem;font-size:1.2rem;color:#494949;line-height:1.0rem;letter-spacing:-1.5px;} #footer_m .copyright {color:#999;font-size:1.0rem;} /*-------------------------------------------------------------------------------- # banner-visual1 ---------------------------------------------------------------------------------*/ .main.mobile .main-section1 {padding:0;} .main.mobile .bx-controls.bx-has-controls-auto.bx-has-pager {top:90%;bottom:0;left:0;width:100%;right:0;padding:2.0rem;max-width:38.0rem;margin:0 auto;} .main.mobile div[data-banner="bxslider"] .bx-controls > .bx-controls-direction, .main.mobile div[data-banner="bxslider"] .bx-controls > .bx-controls-auto, .main.mobile div[data-banner="bxslider"] .bx-controls > .bx-controls-auto > .bx-controls-auto-item, .main.mobile div[data-banner="bxslider"] .bx-controls > .bx-pager, .main.mobile div[data-banner="bxslider"] .bx-controls > .bx-pager > .bx-pager-item {float:right;} /* 2023-04-27 .main.mobile 추가 수정 */ div[data-banner="bxslider"] .bx-pager-item > a.active:before {width:1.2rem;height:1.2rem;border-radius:50%;border:1px solid #fff;} div[data-banner="bxslider"] .bx-pager-item > a:before {width:0.6rem;height:0.6rem;border-radius:50%;border:0.4rem solid #ced4d9;} .main.mobile .banner-visual1 .list > li .banner-card [class*="area"] {border-radius:10px;overflow:hidden;} .main.mobile .banner-visual1 .list > li .banner-card {width:95%;max-width:38.0rem;} .main.mobile .banner-visual1 .list {position: static !important;height:25.0rem;} .main.mobile .banner-visual1 .list > li {top:65px;} .main.mobile .banner-card img {border-radius:10px;overflow:hidden;} .main.mobile ~ div[class*="pattern"].num1 {display:none;} /*-------------------------------------------------------------------------------- # 상품리스트 - product ---------------------------------------------------------------------------------*/ .main.mobile .main-section3 {margin:4.0rem auto 2.0rem;z-index:3;} /* 2023-07-18 이벤트 아이콘 위치 변경 */ .main.mobile .main-section3 h3 {color:#2e2990;font-size:2.5rem;padding-bottom:1.5rem;text-align:left;font-weight:bold;line-height:2.0rem;} /* 2023-07-18 이벤트 아이콘 위치 변경 */ .main.mobile .main-section3:before, .main.mobile .main-section3:after {display:none;} .main.mobile .list-product1 {padding:0 2.0rem;} .main.mobile .list-product1:before {display:none;} .main.mobile .list-product1 .list {border-top:2px solid #868686;border-bottom:2px solid #868686;padding:0;margin-bottom:4.0rem;} .main.mobile .list-product1 .list > li {position:relative;width:100%;padding:2.0rem 0 2.0rem 7.0rem;height:100%;text-align:left;border-bottom:1px dashed #a0a0a0;} .main.mobile .list-product1 .list > li:last-child {border-bottom:none} .main.mobile .list-product1 .list > li:before {content:'';display:inline-block;position:absolute;left:0.5rem;top:1.0rem;width:3.72rem;height:3.72rem;margin:1.0rem;vertical-align:middle;background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Szbovyr_vpba_231012.cat) no-repeat;background-size: 30.0rem 30.0rem;} .main.mobile .list-product1 .list > li.product1:before {background-position: -15.0rem 0;}/* 연금 */ .main.mobile .list-product1 .list > li.product2:before {background-position: -3.74rem 0;}/* 모두암 */ .main.mobile .list-product1 .list > li.product3:before {background-position: 0 0;}/*유병자암*/ .main.mobile .list-product1 .list > li.product4:before {background-position: -11.1rem 0;}/* 저축 */ .main.mobile .list-product1 .list > li.product5:before {background-position: -26.25rem 0;}/* 농업인 */ .main.mobile .list-product1 .list > li.product6:before {background-position: -22.5rem 0;}/* 레저 */ .main.mobile .list-product1 .list > li.product7:before {background-position: -18.75rem 0;}/* 뇌심장 */ .main.mobile .list-product1 .list > li.product8:before {background-position: -7.4rem 0;}/* 쏙쏙암 */ .main.mobile .list-product1 .list > li.product9:before {background-position: -3.74rem -3.74rem;}/* 아나파스면 */ .main.mobile .list-product1 .list > li.product10:before {background-position: -3.74rem -7.48rem;}/* 효밍아웃 */ .main.mobile .list-product1 .list > li.product11:before {background-position: 0.4rem -7.48rem;}/* 220321 안전보험 */ .main.mobile .list-product1 .list > li.product12:before {background-position: 0.4rem -18.7rem;}/* 230217 미니보험 */ .main.mobile .list-product1 .list > li.product13:before {background-position: -3.4rem -18.7rem;}/* 230509 검진쏘옥 */ /* 2023-07-18 이벤트 아이콘 위치 변경 */ .main.mobile .list-product1 h3 span.event {background:#0055b8;vertical-align:top;color:#fff;margin-left:0.1rem;font-size:1.2rem;line-height:1.0rem;display:inline-block;padding:0.7rem 0.5rem 0.5rem 0.5rem;letter-spacing:0;} /* 2022-01-25 여백 수정 */ .main.mobile .list-product1 .list > li > .tit {margin:0;font-size:2.2rem;letter-spacing:-0.25rem;color:#464646;font-weight:bold;} .main.mobile .list-product1 .list > li .tit span.best {vertical-align:middle;color:#fff;margin-left:0.1rem;font-size:1.2rem;line-height:1.0rem;display:inline-block;padding:0.7rem 0.5rem 0.5rem 0.5rem;letter-spacing:0;text-indent:-10000px;margin-bottom:0;margin-top:-1.0rem;width:3.0rem;height:3.0rem;background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Szbovyr_vpba_231012.cat) no-repeat 0 -4.9rem;background-size: 38.0rem 38.0rem;} .main.mobile .list-product1 .list > li > span > span {color:#f13097;font-weight:bold;} .main.mobile .list-product1 .list > li > em {font-size:1.1rem;display:block;} .main.mobile .list-product1 .list > li.remark {background:#efefef;text-align:right;padding:1.0rem 1.0rem 1.0rem 0;} .main.mobile .list-product1 .list > li.remark:before {display:none;padding:0;} .main.mobile .list-product1 .list > li > .btn {width:50px;left:85%;right:0;top:5.4rem;width:4.0rem;height:2.0rem;text-indent:-10000px;background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Szbovyr_vpba_231012.cat) no-repeat -26.0rem -3.8rem;background-size: 30.0rem 30.0rem;} /*-------------------------------------------------------------------------------- # 공지 - notice ---------------------------------------------------------------------------------*/ .main.mobile .main-section5 {background:#efefef;line-height:2.0rem;} .main.mobile .main-section5 h2 {color:#666;} .main.mobile .main-section5 .info a {color:#666;} .main.mobile .main-section5 .info a.link:after {border-left:1.0rem solid #666;} .main.mobile .main-section5 h2:before, .main-section5 h2:after {display:none;} /*-------------------------------------------------------------------------------- # 스마트가이드 ---------------------------------------------------------------------------------*/ .main.mobile .main-section6 {margin:0;padding:1.0rem 0;} .main.mobile .main-section6 .list-nav > li {/* width:49%;line-height:0;margin:0 !important; */font-weight:bold;text-align:center/* ;float:left !important; */} .main.mobile .main-section6 .list-nav > li[class*="ic"] > a:before {width:2.5rem;height:2.8rem;margin:0;background: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Szbovyr_vpba_231012.cat) no-repeat;background-size:20.0rem 20.0rem;} /* .main.mobile .main-section6 .list-nav > li:first-child {width:51%;border-right:2px dotted #969696;} */ .main.mobile .main-section6 .list-nav > li.ic1 > a:before {background-position:50% -4.7rem;} .main.mobile .main-section6 .list-nav > li.ic4 > a:before {background-position:-14.5rem -3.5rem;background-size:30.0rem 30.0rem;} /*-------------------------------------------------------------------------------- # 모바일메인 배너 추가 23-10-06 ---------------------------------------------------------------------------------*/ .main section.main-section_bn {margin:4.0rem 2.0rem;border-radius:0.75rem;background:#3716a2;padding:1.5rem 1.0rem;color:#fff;z-index:10;} .main section.main-section_bn dl dt {width:33px;display:inline-block;font-size:0;} .main section.main-section_bn dl dt:before {content:'';display:inline-block;position:absolute;left:1.0rem;top:1.0rem;width:3.0rem;height:3.0rem;vertical-align:middle;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Szbovyr_vpba_231012.cat) no-repeat -10.4rem -21.0rem;background-size:28.0rem 28.0rem;} .main section.main-section_bn dl dd {display:inline-block;font-size:1.4rem;line-height:2.0rem;} .main section.main-section_bn dl dd:before {content:'';display:inline-block;position:absolute;right:1.0rem;top:50%;width:0.6rem;height:0.6rem;border:0.2rem solid #fff;border-width:0 0.2rem 0.2rem 0;-ms-transform:rotate(-45deg) translateY(-50%);-webkit-transform: rotate(-45deg) translateY(-50%);transform: rotate(-45deg) translateY(-50%);} @media only screen and (max-width:319px) { .main section.main-section_bn dl dd {font-size:1.2rem;} } /*-------------------------------------------------------------------------------- # 작업중 / 아나파스면 등 전면공지 ---------------------------------------------------------------------------------*/ #container.all > .contents:only-child {padding: 0;} #container.all .cont-visual {margin-bottom:0;} #container.all {padding: 5.0rem 0 20.0rem;} /* 추천인 2021-07-26 */ #uiPOPSynergy.pop-modal1 .header button {right:0;} /* 시너지 2022-09-27 */ .pop-modal1.mo .tbl-input > dt.long2 {width:100%;} #uiPOPSynergy.pop-modal1.mo .mo_event {padding:0;font-size:2.1rem;} .w22 {width:100% !important;} #uiPOPSynergy.pop-modal1.mo .area-btn1 .btn-com {height: 6.0rem;padding: 0;} #uiPOPSynergy.pop-modal1.mo .label-check label > input:first-child + span {font-size: 1.8rem;} #uiPOPSynergy.pop-modal1.mo .content .area-btn1 > a:only-child, #uiPOPSynergy.pop-modal1.mo .content .area-btn1 > button:only-child {width:100%;font-size: 1.8rem;} #uiPOPSynergy.pop-modal1.mo .content { max-height: calc(100vh - 0rem);} /* 2022-04-01 시너지 추천 22-04-14 수정 */ #uiPOPSinergeUser.pop-modal1.mo .header h2 {text-indent:-10000px;} .sns-wrap.synergy {text-align:center;} .sns-wrap.synergy button {font-size:1.5rem;width:60%;margin:0 0 1.0rem;} .sns-wrap.synergy button.btn-icon1 {color:#fff !important;} .sns-wrap.synergy button.btn-icon1.ic2 {color:#333 !important;} .sns-wrap.synergy button.btn-icon1.ic2, .sns-wrap.synergy button.btn-icon1.ic3 {display:block;margin:0 auto 1.0rem;} tbody#nongBrList td.label-check, tbody#synergyBrList td.label-check {padding-top:3.0rem;} tbody#nongBrList td.label-check label > input:first-child + span:before, tbody#nongBrList td.label-check label > input + span:after, tbody#synergyBrList td.label-check label > input:first-child + span:before, tbody#synergyBrList td.label-check label > input + span:after {left:25%;top:-2.0rem;} tbody#nongBrList td.label-check label > input:first-child + span, tbody#synergyBrList td.label-check label > input:first-child + span {padding:0.8rem 0 0.7rem 0;} tbody#nongBrList td, tbody#synergyBrList td {padding:0;letter-spacing:-0.2rem;} #uiPOPSinergeUser.pop-modal1.mo.open .content {padding:2.0rem 0 10.0rem 0;} #uiPOPSinergeUser.pop-modal1.mo.open .content .mo_event {padding:4.0rem 1.0rem 1.0rem 2.0rem;} /* 2022-07-19 수정 */ #synergy_event_detail {} /* 2022-05-03 시너지 이벤트 팝업 키패드 오류 수정 (마진 제거) */ .content.layerScroll.margin_no .form-area.toggle.check_list {margin:0;} .content.layerScroll.margin_no .tbl-input {margin:0;} .content.layerScroll.margin_no .phone > .selectbox:nth-last-child(7):first-child {margin:0;} .content.layerScroll.margin_no .btn-sub4.ic2 {margin:0;} .footer_test {position:fixed;top:0;left:0;width:100%;height:100%;} /* 2022-05-06 수정중 */ /*-------------------------------------------------------------------------------- # 찐효도보험 21-08-31 ---------------------------------------------------------------------------------*/ /* PC용 가림 */ .area-btn_m.hyo_pc {display:none;} .area-btn_m.hyo_m, .area-btn_m.hyo_next {display:block;} .area-btn_m.hyo_mobile {display:block;} .hyo #footer {display:none;} #wrapper.hyo {min-width:280px;} .pop-modal1.mo.hyo .content {overflow-y:scroll;z-index:999;max-height:100vh;padding-bottom:10.0rem;} /* 효밍아웃 개편 2023-04-06 max-height:calc(100vh - 10.0rem);*/ .pop-modal1.mo.hyo .header {z-index:1000;-webkit-transform:translateZ(0);-webkit-backface-visibility:hidden;/* safari bug fix */} /* 효밍아웃 개편 2023-04-06 */ #uiPOPRefund.pop-modal1.mo.hyo .content {padding-bottom:10.0rem;} .pop-modal1.mo.hyo .content .area-btn1 {margin-top:5.0rem;} .contents_gift {top:0;overflow-y:scroll;height:100%;} .contents_gift.view {width:100%;position:relative;display:block;top:0;padding: 0 0 200px;} .contents_gift.view_none {display:none;} .hyo .wrap-gift {position:relative;z-index:2;top:3.0rem;left:0;width:100%;border:none;height:70.0rem;} .hyo .logo {margin:0;} .hyo .logo img {display:none;} .product10#container > .contents:only-child, .product10#container > .contents:last-child {padding:0 0 15.0rem;} .step-wrap span#divHyoHeaderAdd {font-size:1.4rem;} /* 2021-11-02 효밍아웃 상단 카카오톡 가리기 */ #container.product10 .heading {display:none;text-align:right;padding:1.0rem 2.0rem;} /* 2023-04-06 효밍아웃 상단 카카오톡 가리기 */ /*2022-08-08 효밍아웃 상단 카카오톡 공유 */ #container.product10 .heading .kakao-tooltip {width:100%;text-align:right;} #container.product10 .heading .kakao-tooltip p {position:relative;width:25.0rem;height:6.0rem;margin:1.0rem 0 0;padding:1.3rem 1.0rem 0 6.0rem;background:#ffd62e;color:#352c23;text-align:left;border-radius:0.5rem;opacity:1;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;transition:all 0.3s ease;} #container.product10 .heading .kakao-tooltip p:before, #container.product10 .heading .kakao-tooltip p:after {content:'';position:absolute;} #container.product10 .heading .kakao-tooltip p:after {content:"";display:block;position:absolute;width:1.0rem;height:1.0rem;top:-0.5rem;right:1.5rem;background:#ffd62e;-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);} #container.product10 .heading .kakao-tooltip p:before {content:'';width:5.0rem;height:5.0rem;left:1.0rem;top:1.0rem;margin:0 1.0rem 0 0;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Sxnxnb_tvsg.cat) no-repeat;background-size:4.0rem 4.0rem;} #container.product10 .heading .kakao-tooltip p:before, #container.product10 .heading .kakao-tooltip > p {display:inline-block;vertical-align:top;} #container.product10 .heading .kakao-tooltip p strong {display:block;font-size:1.6rem;} .submain.cc h1.event_title {padding:2.0rem 0;font-size:2.4rem;line-height:3.0rem;color:#2e2991;font-weight:bold;} /*2022-08-08 보험료 계산결과 카카오톡 공유 */ .CalResult.kakao-tooltip {position:relative;height:8.0rem;width:100%;max-width:640px;margin:2.0rem auto 0;padding:1.0rem 0;background:#ffd62e;color:#352c23;font-size:1.3rem;line-height:1.8rem;text-align:center;border-radius:0.5rem;opacity:1;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;transition:all 0.3s ease;} .CalResult.kakao-tooltip:before, .CalResult.kakao-tooltip:after {content:'';position:absolute;} .CalResult.kakao-tooltip:after {content:"";display:block;position:absolute;width:2.0rem;height:2.0rem;top:-1.0rem;left:47%;right:50%;background:#ffd62e;-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);} .CalResult.kakao-tooltip:before {content:'';width:5.0rem;height:5.0rem;top:2.0rem;margin:0 1.0rem 0 0;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Sxnxnb_tvsg.cat) no-repeat;background-size:4.5rem 4.5rem;} .CalResult.kakao-tooltip:before, .CalResult.kakao-tooltip > p {display:inline-block;vertical-align:top;} .CalResult.kakao-tooltip > p {padding:1.0rem 5.0rem 0 5.0rem;position:relative;font-size:1.6rem;} .CalResult.kakao-tooltip > p:before {content:'';position:absolute;width:4.5rem;right:0;top:1.0rem;height:4.5rem;margin:0;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Svpba1_20221006.cat) no-repeat -35.0rem -28.0rem;background-size:70.0rem 70.0rem;} .CalResult.kakao-tooltip p strong {display:block;font-size:2.0rem;line-height:3.0rem;} /* 효밍아웃 개편 2023-04-06 */ .hyo .wrap-basic {margin:0;width:100%;height:100%;background:none;} .hyo .wrap-basic img {display:block;} .hyo .wrap-basic h1 {height:0;} .hyo .wrap-basic span.hyo_ment {margin-top:0;} .hyo_title {height:0;} .hyo_text {height:0;} .hyo .area-btn_m {height:5.0rem;} .hyo .hyo_mobile .area-btn1_m li {width:100%;border-radius:1.0rem 1.0rem 0 0;margin-right:0;padding:0.5rem;background:#f9bd1c;color:#3a1c1c;} /* background:#ee4f85; 효밍아웃 개편 2023-04-11 */ .hyo .btn-m {font-size:1.8rem;line-height:2.0rem;padding:1.0rem 4.0rem;} .hyo .area-btn_m.hyo_next {height:6.0rem;} .hyo .area-btn_m.hyo_next .area-btn1_m li {padding:0 4.0rem;border-radius:0;width:40%;background:#a1aab3;} .hyo .area-btn_m.hyo_next .area-btn1_m li:last-child {width:60%;background:#0081d1;} .hyo .area-btn_m.hyo_next .btn-m {font-size:2.5rem;line-height:6.0rem;padding:0;font-weight:normal;} .hyo .wrap-bottom {padding:0 3.0rem;width:100%;} /* 효밍아웃 개편 2023-03-27 */ .hyo .wrap-bottom .btn-set1 > li {font-size:1.7rem;} .hyo .wrap-bottom .btn-set1 > li:nth-child(1), .hyo .wrap-bottom .btn-set1 > li:nth-child(3) {width:100%;margin-right:0;} .hyo .wrap-bottom .mes-info3.m1 li {font-size:1.5rem;} /* tab content */ .wrapper_tabcontent {z-index:1;position:relative;opacity:1;padding:0 2.0rem 0;height:-webkit-calc(100% + 6.0rem);overflow:hidden;transition:all 1s ease;top:0;} /* padding:0 2.0rem 10.0rem; height 추가 ; 효밍아웃 버튼 안보임 수정 - 20210901 */ .tabcontent {display:none;min-height:200px;} @keyframes tabEffect { from {top: -40px;} to {top: 0px;} } .tabcontent.active {transition:all 1s ease;display:block;} /* Title */ .tabcontent h3 {top:140px;} @keyframes city { from {left: -150px;} to {left: -90px;} } /* Text*/ .tabcontent div {color: #686868;margin: 0;padding: 0;line-height: 28px;font-weight: 100;transition: all 1s ease;animation: fadeEffect 0.6s ease;width: 100%;font-size: 16px;} @keyframes fadeEffect { from {opacity: 0;margin-left: 30px;} to {opacity: 1;margin-left: 0;} } /* gift select */ .gift_select label {width:100%;} .gift_select label:last-child {margin:2.0rem 0 0 0;} .gift_select label span {font-size:1.8rem;} .tabcontent div .gift_content {/*border:1px solid #999; */padding: 1.0rem 1.0rem 5.0rem;} .gift_content h2 {padding-top:2.0rem;margin-bottom:1.0rem;font-size:2.0rem;line-height:3.0rem;font-weight:bold;border-bottom:2px solid #d9d9d9;} .gift_content h2 span {float:right;font-size:1.5rem;font-weight:normal;} .gift_content ul {} .gift_content ul li {padding:0.3rem 1.0rem 0.1rem;border-bottom:1px solid #d9d9d9;font-size:1.5rem;color:#333;letter-spacing:0;} .gift_content ul li span {float:right;} /* 객관식 이미지 이벤트 2022-04-28 */ .pop-modal1.mo div.area-btn1.area-btn_pop.pc {display:none;padding-bottom:0;} .pop-modal1.mo div.area-btn1.area-btn_pop.mb {display:block;padding-bottom:0;} /* 객관식 이미지 이벤트 2022-04-04 */ .event_radio .event_icon {padding:2.0rem 0;background-size:100%;} .event_radio .event_icon label > span:before {width:14.0rem;height:14.4rem;background-size:30.0rem 30.0rem} .event_radio .event_icon label:first-child > input + span:before {background-position:0 0;} .event_radio .event_icon label:first-child > input:checked+ span:before {background-position:-15.0rem 0;} .event_radio .event_icon label:last-child > input + span:before {background-position:0 -15.0rem;} .event_radio .event_icon label:last-child > input:checked + span:before {background-position:-15.0rem -15.0rem;} .event_radio .event_bt li {padding:5% 0} .event_radio .event_bt li:first-child {width:50%;margin:0 1% 0 5%;} .event_radio .event_bt li:last-child {width:42%;} /* 객관식 이미지 이벤트 2022-04-28 */ .event_radio_2 .event_icon {padding:2.0rem 0;background-size:100%;margin:auto;} .event_radio_2 .event_icon label > span:before {width:14.0rem;height:14.4rem;background-size:30.0rem 30.0rem} .event_radio_2 .event_icon label:first-child > input + span:before {background-position:0 0;} .event_radio_2 .event_icon label:first-child > input:checked+ span:before {background-position:-15.0rem 0;} .event_radio_2 .event_icon label:last-child > input + span:before {background-position:0 -15.0rem;} .event_radio_2 .event_icon label:last-child > input:checked + span:before {background-position:-15.0rem -15.0rem;} .event_radio_2 .event_go {width:100%;height:100%;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Sgrzc%2S20220905_r2.cat) repeat-y;background-size:100%;} .event_radio_2 .event_go span {display:block;margin:auto;} .event_radio_2 .event_go span:first-child {width:60%;height:20%;} .event_radio_2 .event_go span:last-child {width:80%;height:20%;} /* 객관식 이미지 이벤트 2022-10-01 */ .event_radio_3 .event_icon {padding:2.0rem 0;background-size:100%;margin:auto;} .event_radio_3 .event_icon label > span:before {width:14.0rem;height:14.4rem;background-size:30.0rem 30.0rem} .event_radio_3 .event_icon label:first-child > input + span:before {background-position:0 0;} .event_radio_3 .event_icon label:first-child > input:checked+ span:before {background-position:-15.0rem 0;} .event_radio_3 .event_icon label:last-child > input + span:before {background-position:0 -15.0rem;} .event_radio_3 .event_icon label:last-child > input:checked + span:before {background-position:-15.0rem -15.0rem;} .event_radio_3 .event_go {width:100%;height:100%;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Sgrzc%2S20221001_r2.cat) repeat-y;background-size:100%;} .event_radio_3 .event_go span {display:block;margin:auto;} .event_radio_3 .event_go span:first-child {width:60%;height:20%;} .event_radio_3 .event_go span:last-child {width:80%;height:20%;} /* 객관식 이미지 이벤트 2023-02-17 4지선다 .event_radio_4 .event_icon {background-size:100%;margin:auto;} .event_radio_4 .event_icon label > span:before {width:13.0rem;height:8.0rem;background-size:52.0rem 16.0rem} .event_radio_4 .event_icon ul li:nth-child(2) label > input + span:before {background-position:-13.0rem 0;} .event_radio_4 .event_icon ul li:nth-child(2) label > input:checked + span:before {background-position:-13.0rem bottom;} .event_radio_4 .event_icon ul li:nth-child(3) label > input + span:before {background-position:-26.0rem 0;} .event_radio_4 .event_icon ul li:nth-child(3) label > input:checked+ span:before {background-position:-26.0rem bottom;} .event_radio_4 .event_icon ul li:nth-child(4) label > input + span:before {background-position:-39.0rem 0;} .event_radio_4 .event_icon ul li:nth-child(4) label > input:checked + span:before {background-position:-39.0rem bottom;} .event_radio_4 .event_go {width:100%;height:100%;} .event_radio_4 .event_go span {width:70%;padding:20px 0;} */ /* 객관식 이미지 이벤트 2023-05-09 검진쏘옥 이벤트 */ .event_radio_4 .event_icon ul {background-size:cover;} .event_radio_4 .event_icon ul li:nth-child(1) label > input:checked + span:before {background-size:cover;} .event_radio_4 .event_icon ul li:nth-child(2) label > input:checked + span:before {background-size:cover;} .event_radio_4 .event_icon ul li:nth-child(3) label > input:checked + span:before {background-size:cover;} .event_radio_4 .event_icon ul li:nth-child(4) label > input:checked + span:before {background-size:cover;} .event_radio_4 .pc_hide {display:block;position:relative;} .event_radio_4 .mb_hide {display:none;} .event_sorry2 {background-position:center 2.0rem;background-size:7.45rem 10.4rem;padding:2.0rem 0;} .event_sorry2 li:first-child {padding:120px 0 0 0;font-weight:bold;} .event_sorry2 li {padding:1.0rem 0;text-align:center;font-size:2.0rem;} .event_sorry2 li:last-child {font-size:1.5rem;color:#0076c0;font-weight:bold;} #uiPOP1.pop-modal2 .header {border-bottom:0;margin:-2.0rem 0 0;} #uiPOP1.pop-modal2 .header button {z-index:100;overflow:hidden;text-indent:-9999px;display:block;position:absolute;right:-2.0rem;top:0;width:5.0rem;height:5.0rem;padding:4.0rem 0 0;background:#fff;} #uiPOP1.pop-modal2 .header button:before, #uiPOP1.pop-modal2 .header button:after { content: '';display: block;position:absolute;left:50%;top:50%;width:2.0rem;height:0.2rem;margin:-0.1rem 0 0 -0.9rem;background: #000;-webkit-transition:all 0.3s ease;-moz-transition: all 0.3s ease;-webkit-transition:all 0.3s ease;} #uiPOP1.pop-modal2 .header button:after {-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);} #uiPOP1.pop-modal2 .header button:before {-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg);} /* 객관식 이미지 이벤트 2023-08-01 보험료 계산 이벤트 */ .event_radio_4 .event_icon > div > span > input {font-size:3.0rem;border-radius:0.5rem;} .event_radio_4 .event_icon > div > span:nth-child(4) > input {font-size:1.5rem;width:26%;border-radius:0.25rem;} .pop-modal2.open.event {max-width:50.0rem;} /* 기기별 사이즈 조정 */ @media only screen and (min-width: 568px) and (max-width: 1368px){ /* 23-10-06 코대리 이벤트 .event_radio_4 .event_icon label > span:before {width:26.0rem;height:16.0rem;background-size:104.0rem 32.0rem} .event_radio_4 .event_icon ul li:nth-child(2) label > input + span:before {background-position:-26.0rem 0;} .event_radio_4 .event_icon ul li:nth-child(2) label > input:checked + span:before {background-position:-26.0rem bottom;} .event_radio_4 .event_icon ul li:nth-child(3) label > input + span:before {background-position:-52.0rem 0;} .event_radio_4 .event_icon ul li:nth-child(3) label > input:checked+ span:before {background-position:-52.0rem bottom;} .event_radio_4 .event_icon ul li:nth-child(4) label > input + span:before {background-position:-78.0rem 0;} .event_radio_4 .event_icon ul li:nth-child(4) label > input:checked + span:before {background-position:-78.0rem bottom;} */ /* 객관식 이미지 이벤트 2023-08-01 보험료 계산 이벤트 */ .event_radio_4 .event_icon > div > span > input {font-size:4.0rem;border-radius:1.0rem;} .event_radio_4 .event_icon > div > span:nth-child(4) > input {font-size:2.0rem;width:27%;border-radius:0.5rem;} } @media only screen and (min-width:361px) and (max-width:540px){ /* 객관식 이미지 이벤트 2023-08-01 보험료 계산 이벤트 */ .event_radio_4 .event_icon > div > span:nth-child(4) > input {width:23%;} } @media only screen and (max-width:360px) { /* 객관식 이미지 이벤트 2023-08-01 보험료 계산 이벤트 */ .event_radio_4 .event_icon > div > span:nth-child(4) > input {width:23%;} } @media only screen and (max-width:320px) { /* 객관식 이미지 이벤트 2023-08-01 보험료 계산 이벤트 */ .event_radio_4 .event_icon > div > span > input {font-size:2.5rem;} .event_radio_4 .event_icon > div > span:nth-child(4) > input {font-size:1.2rem;width:22%;} } /* 객관식 이미지 이벤트 2022-05-22 */ .event_radio_5 .event_icon {padding:2.0rem 0;background-size:100%;margin:auto;} .event_radio_5 .event_icon label > span:before {width:12.0rem;height:12.0rem;background-size:24.0rem 24.0rem} .event_radio_5 .event_icon label:first-child > input + span:before {background-position:0 0;} .event_radio_5 .event_icon label:first-child > input:checked+ span:before {background-position:-12.0rem 0;} .event_radio_5 .event_icon label:last-child > input + span:before {background-position:0 -12.0rem;} .event_radio_5 .event_icon label:last-child > input:checked + span:before {background-position:-12.0rem -12.0rem;} .event_radio_5 .event_go {width:100%;height:100%;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Sgrzc%2S20220522_r3.cat) repeat-y;background-size:100%;} .event_radio_5 .event_go span {display:block;margin:auto;} .event_radio_5 .event_go span:first-child {width:50%;height:20%;} .event_radio_5 .event_go span:last-child {width:70%;height:20%;} .event_sorry {background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Sgrzc%2S20211115_fbeel.cat) no-repeat center 0;background-size:180px 180px;} .event_sorry li:first-child {padding:190px 0 0 0;text-align:center;} .event_sorry li {padding:1.0rem 0 1.0rem 2.0rem;} /* 이벤트 당첨 팝업 2021-11-18 */ #uiPOPAddrCheck.pop-modal2 .content {padding:0;} #uiPOPAddrCheck.pop-modal2 .header {margin:1.5rem;} #uiPOPAddrCheck.pop-modal2 .header h2 {line-height: 1.5;} #uiPOPAddrCheck.pop-modal2 .area-btn1 .btn-com {height: 4.0rem;} #uiPOPAddrCheck.pop-modal2 .content .mes-txt1 + .area-btn1 {margin: 1.5rem 0 0;} /* 가입한도 초과 2021-11-18 */ .excess_me .sorry_me {background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Sgrzc%2S20211115_fbeel.cat) no-repeat center 0;background-size:180px 180px;} .excess_me .sorry_me li {font-size:1.7rem;letter-spacing:-0.2rem;line-height:2.5rem;padding:190px 0 20px 0;text-align:center;} /* 눈 테스트 2022-01-25 */ /*Keyframes*/ @keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } @-moz-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } @-webkit-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {/*background-color:#b4cfe0;*/} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px; /*background-color:#6b92b9;*/} } @-ms-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } .snow { background-image: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Sfabj1_220125.cat), url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Sfabj3_220125.cat), url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Sfabj2_220125.cat); -webkit-animation: snow 40s linear infinite; -moz-animation: snow 40s linear infinite; -ms-animation: snow 40s linear infinite; animation: snow 40s linear infinite; } /* 비 테스트 2022-01-25 */ /*Keyframes*/ @keyframes rain { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 0 1000px, 0 400px, 0 300px;} } @-moz-keyframes rain { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 0 1000px, 0 400px, 0 300px;} } @-webkit-keyframes rain { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {/*background-color:#b4cfe0;*/} 100% {background-position: 0 1000px, 0 400px, 0 300px; /*background-color:#6b92b9;*/} } @-ms-keyframes rain { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 0 1000px, 0 400px, 0 300px;} } .rain { background-image: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Senva1_220125.cat), url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Senva3_220125.cat), url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Senva2_220125.cat); -webkit-animation: rain 2s linear infinite; -moz-animation: rain 2s linear infinite; -ms-animation: rain 2s linear infinite; animation: rain 2s linear infinite; } /* 복주머니 테스트 2022-01-25 */ /*Keyframes*/ @keyframes lucky { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 0 1000px, 0 400px, 0 300px;} } @-moz-keyframes lucky { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 0 1000px, 0 400px, 0 300px;} } @-webkit-keyframes lucky { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {/*background-color:#b4cfe0;*/} 100% {background-position: 0 1000px, 0 400px, 0 300px; /*background-color:#6b92b9;*/} } @-ms-keyframes lucky { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 0 1000px, 0 400px, 0 300px;} } /*복주머니*/ .lucky { background-image: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Syhpxl1.cat), url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Syhpxl3.cat), url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Syhpxl2.cat);/* 코대리 퀴즈 선물이미지 변경 2023-10-06 */ -webkit-animation: lucky 10s linear infinite; -moz-animation: lucky 10s linear infinite; -ms-animation: lucky 10s linear infinite; animation: lucky 10s linear infinite; } /*gift-24년도 추가*/ .gift24{ background-image: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Stvsg1.cat), url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Stvsg3.cat), url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Stvsg2.cat);/* 코대리 퀴즈 선물이미지 변경 2023-10-06 */ -webkit-animation: lucky 10s linear infinite; -moz-animation: lucky 10s linear infinite; -ms-animation: lucky 10s linear infinite; animation: lucky 10s linear infinite; } /* 낙엽 테스트 2022-01-25 */ /*Keyframes*/ @keyframes leaf { 0% {background-position: 0 -100px, 0 -100px, 0 -100px;} 50% {background-position: -300px 300px, -100px 300px, -200px 400px;} 100% {background-position: -500px 600px, -400px 700px, -300px 500px;} } @-moz-keyframes leaf { 0% {background-position: 0 -100px, 0 -100px, 0 -100px;} 50% {background-position: -300px 300px, -100px 300px, -200px 400px;} 100% {background-position: -500px 600px, -400px 700px, -300px 500px;} } @-webkit-keyframes leaf { 0% {background-position: 0 -100px, 0 -100px, 0 -100px;} 50% {background-position: -300px 300px, -100px 300px, -200px 400px;} 100% {background-position: -500px 600px, -400px 700px, -300px 500px;} } @-ms-keyframes leaf { 0% {background-position: 0 -100px, 0 -100px, 0 -100px;} 50% {background-position: -300px 300px, -100px 300px, -200px 400px;} 100% {background-position: -500px 600px, -400px 700px, -300px 500px;} } .leaf { background-image: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Syrns1_220125.cat), url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Syrns3_220125.cat), url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Syrns2_220125.cat); -webkit-animation: leaf 20s linear infinite; -moz-animation: leaf 20s linear infinite; -ms-animation: leaf 20s linear infinite; animation: leaf 20s linear infinite; } /* 벚꽃 테스트 2022-01-25 */ @-webkit-keyframes fall { 0% {opacity: 0.9;top: 0;} 100% {opacity: 0.2;top: 100%;} } @-o-keyframes fall { 0% {opacity: 0.9;top: 0;} 100% {opacity: 0.2;top: 100%;} } @-ms-keyframes fall { 0% {opacity: 0.9;top: 0;} 100% {opacity: 0.2;top: 100%;} } @-moz-keyframes fall { 0% {opacity: 0.9;top: 0;} 100% {opacity: 0.2;top: 100%;} } @keyframes fall { 0% {opacity: 0.9;top: 0;} 100% {opacity: 0.2;top: 100%;} } @-webkit-keyframes blow-soft-left { 0% {margin-left: 0;} 100% {margin-left: -50%;} } @-o-keyframes blow-soft-left { 0% {margin-left: 0;} 100% {margin-left: -50%;} } @-ms-keyframes blow-soft-left { 0% {margin-left: 0;} 100% {margin-left: -50%;} } @-moz-keyframes blow-soft-left { 0% {margin-left: 0;} 100% {margin-left: -50%;} } @keyframes blow-soft-left { 0% {margin-left: 0;} 100% {margin-left: -50%;} } @-webkit-keyframes blow-medium-left { 0% {margin-left: 0;} 100% {margin-left: -100%;} } @-o-keyframes blow-medium-left { 0% {margin-left: 0;} 100% {margin-left: -100%;} } @-ms-keyframes blow-medium-left { 0% {margin-left: 0;} 100% {margin-left: -100%;} } @-moz-keyframes blow-medium-left { 0% {margin-left: 0;} 100% {margin-left: -100%;} } @keyframes blow-medium-left { 0% {margin-left: 0;} 100% {margin-left: -100%;} } @-webkit-keyframes blow-soft-right { 0% {margin-left: 0;} 100% {margin-left: 50%;} } @-o-keyframes blow-soft-right { 0% {margin-left: 0;} 100% {margin-left: 50%;} } @-ms-keyframes blow-soft-right { 0% {margin-left: 0;} 100% {margin-left: 50%;} } @-moz-keyframes blow-soft-right { 0% {margin-left: 0;} 100% {margin-left: 50%;} } @keyframes blow-soft-right { 0% {margin-left: 0;} 100% {margin-left: 50%;} } @-webkit-keyframes blow-medium-right { 0% {margin-left: 0;} 100% {margin-left: 100%;} } @-o-keyframes blow-medium-right { 0% {margin-left: 0;} 100% {margin-left: 100%;} } @-ms-keyframes blow-medium-right { 0% {margin-left: 0;} 100% {margin-left: 100%;} } @-moz-keyframes blow-medium-lerightft { 0% {margin-left: 0;} 100% {margin-left: 100%;} } @keyframes blow-medium-right { 0% {margin-left: 0;} 100% {margin-left: 100%;} } @-webkit-keyframes sway-0 { 0% {-webkit-transform: rotate(-5deg);} 40% {-webkit-transform: rotate(28deg);} 100% {-webkit-transform: rotate(3deg);} } @-o-keyframes sway-0 { 0% {-o-transform: rotate(-5deg);} 40% {-o-transform: rotate(28deg);} 100% {-o-transform: rotate(3deg);} } @-ms-keyframes sway-0 { 0% {-ms-transform: rotate(-5deg);} 40% {-ms-transform: rotate(28deg);} 100% {-ms-transform: rotate(3deg);} } @-moz-keyframes sway-0 { 0% {-moz-transform: rotate(-5deg);} 40% {-moz-transform: rotate(28deg);} 100% {-moz-transform: rotate(3deg);} } @keyframes sway-0 { 0% {transform: rotate(-5deg);} 40% {transform: rotate(28deg);} 100% {transform: rotate(3deg);} } @-webkit-keyframes sway-1 { 0% {-webkit-transform: rotate(10deg);} 40% {-webkit-transform: rotate(43deg);} 100% {-webkit-transform: rotate(15deg);} } @-o-keyframes sway-1 { 0% {-o-transform: rotate(10deg);} 40% {-o-transform: rotate(43deg);} 100% {-o-transform: rotate(15deg);} } @-ms-keyframes sway-1 { 0% {-ms-transform: rotate(10deg);} 40% {-ms-transform: rotate(43deg);} 100% {-ms-transform: rotate(15deg);} } @-moz-keyframes sway-1 { 0% {-moz-transform: rotate(10deg);} 40% {-moz-transform: rotate(43deg);} 100% {-moz-transform: rotate(15deg);} } @keyframes sway-1 { 0% {transform: rotate(10deg);} 40% {transform: rotate(43deg);} 100% {transform: rotate(15deg);} } @-webkit-keyframes sway-2 { 0% {-webkit-transform: rotate(15deg);} 40% {-webkit-transform: rotate(56deg);} 100% {-webkit-transform: rotate(22deg);} } @-o-keyframes sway-2 { 0% {-o-transform: rotate(15deg);} 40% {-o-transform: rotate(56deg);} 100% {-o-transform: rotate(22deg);} } @-ms-keyframes sway-2 { 0% {-ms-transform: rotate(15deg);} 40% {-ms-transform: rotate(56deg);} 100% {-ms-transform: rotate(22deg);} } @-moz-keyframes sway-2 { 0% {-moz-transform: rotate(15deg);} 40% {-moz-transform: rotate(56deg);} 100% {-moz-transform: rotate(22deg);} } @keyframes sway-2 { 0% {transform: rotate(15deg);} 40% {transform: rotate(56deg);} 100% {transform: rotate(22deg);} } @-webkit-keyframes sway-3 { 0% {-webkit-transform: rotate(25deg);} 40% {-webkit-transform: rotate(74deg);} 100% {-webkit-transform: rotate(37deg);} } @-o-keyframes sway-3 { 0% {-o-transform: rotate(25deg);} 40% {-o-transform: rotate(74deg);} 100% {-o-transform: rotate(37deg);} } @-ms-keyframes sway-3 { 0% {-ms-transform: rotate(25deg);} 40% {-ms-transform: rotate(74deg);} 100% {-ms-transform: rotate(37deg);} } @-moz-keyframes sway-3 { 0% {-moz-transform: rotate(25deg);} 40% {-moz-transform: rotate(74deg);} 100% {-moz-transform: rotate(37deg);} } @keyframes sway-3 { 0% {transform: rotate(25deg);} 40% {transform: rotate(74deg);} 100% {transform: rotate(37deg);} } @-webkit-keyframes sway-4 { 0% {-webkit-transform: rotate(40deg);} 40% {-webkit-transform: rotate(68deg);} 100% {-webkit-transform: rotate(25deg);} } @-o-keyframes sway-4 { 0% {-o-transform: rotate(40deg);} 40% {-o-transform: rotate(68deg);} 100% {-o-transform: rotate(25deg);} } @-ms-keyframes sway-4 { 0% {-ms-transform: rotate(40deg);} 40% {-ms-transform: rotate(68deg);} 100% {-ms-transform: rotate(25deg);} } @-moz-keyframes sway-4 { 0% {-moz-transform: rotate(40deg);} 40% {-moz-transform: rotate(68deg);} 100% {-moz-transform: rotate(25deg);} } @keyframes sway-4 { 0% {transform: rotate(40deg);} 40% {transform: rotate(68deg);} 100% {transform: rotate(25deg);} } @-webkit-keyframes sway-5 { 0% {-webkit-transform: rotate(50deg);} 40% {-webkit-transform: rotate(78deg);} 100% {-webkit-transform: rotate(40deg);} } @-o-keyframes sway-5 { 0% {-o-transform: rotate(50deg);} 40% {-o-transform: rotate(78deg);} 100% {-o-transform: rotate(40deg);} } @-ms-keyframes sway-5 { 0% {-ms-transform: rotate(50deg);} 40% {-ms-transform: rotate(78deg);} 100% {-ms-transform: rotate(40deg);} } @-moz-keyframes sway-5 { 0% {-moz-transform: rotate(50deg);} 40% {-moz-transform: rotate(78deg);} 100% {-moz-transform: rotate(40deg);} } @keyframes sway-5 { 0% {transform: rotate(50deg);} 40% {transform: rotate(78deg);} 100% {transform: rotate(40deg);} } @-webkit-keyframes sway-6 { 0% {-webkit-transform: rotate(65deg);} 40% {-webkit-transform: rotate(92deg);} 100% {-webkit-transform: rotate(58deg);} } @-o-keyframes sway-6 { 0% {-o-transform: rotate(65deg);} 40% {-o-transform: rotate(92deg);} 100% {-o-transform: rotate(58deg);} } @-ms-keyframes sway-6 { 0% {-ms-transform: rotate(65deg);} 40% {-ms-transform: rotate(92deg);} 100% {-ms-transform: rotate(58deg);} } @-moz-keyframes sway-6 { 0% {-moz-transform: rotate(65deg);} 40% {-moz-transform: rotate(92deg);} 100% {-moz-transform: rotate(58deg);} } @keyframes sway-6 { 0% {transform: rotate(65deg);} 40% {transform: rotate(92deg);} 100% {transform: rotate(58deg);} } @-webkit-keyframes sway-7 { 0% {-webkit-transform: rotate(72deg);} 40% {-webkit-transform: rotate(118deg);} 100% {-webkit-transform: rotate(68deg);} } @-o-keyframes sway-7 { 0% {-o-transform: rotate(72deg);} 40% {-o-transform: rotate(118deg);} 100% {-o-transform: rotate(68deg);} } @-ms-keyframes sway-7 { 0% {-ms-transform: rotate(72deg);} 40% {-ms-transform: rotate(118deg);} 100% {-ms-transform: rotate(68deg);} } @-moz-keyframes sway-7 { 0% {-moz-transform: rotate(72deg);} 40% {-moz-transform: rotate(118deg);} 100% {-moz-transform: rotate(68deg);} } @keyframes sway-7 { 0% {transform: rotate(72deg);} 40% {transform: rotate(118deg);} 100% {transform: rotate(68deg);} } @-webkit-keyframes sway-8 { 0% {-webkit-transform: rotate(94deg);} 40% {-webkit-transform: rotate(136deg);} 100% {-webkit-transform: rotate(82deg);} } @-o-keyframes sway-8 { 0% {-o-transform: rotate(94deg);} 40% {-o-transform: rotate(136deg);} 100% {-o-transform: rotate(82deg);} } @-ms-keyframes sway-8 { 0% {-ms-transform: rotate(94deg);} 40% {-ms-transform: rotate(136deg);} 100% {-ms-transform: rotate(82deg);} } @-moz-keyframes sway-8 { 0% {-moz-transform: rotate(94deg);} 40% {-moz-transform: rotate(136deg);} 100% {-moz-transform: rotate(82deg);} } @keyframes sway-8 { 0% {transform: rotate(94deg);} 40% {transform: rotate(136deg);} 100% {transform: rotate(82deg);} } .sakura { background: -webkit-linear-gradient(120deg, rgba(255, 183, 197, 0.9), rgba(255, 197, 208, 0.9)); background: -o-linear-gradient(120deg, rgba(255, 183, 197, 0.9), rgba(255, 197, 208, 0.9)); background: -ms-linear-gradient(120deg, rgba(255, 183, 197, 0.9), rgba(255, 197, 208, 0.9)); background: -moz-linear-gradient(120deg, rgba(255, 183, 197, 0.9), rgba(255, 197, 208, 0.9)); background: linear-gradient(120deg, rgba(255, 183, 197, 0.9), rgba(255, 197, 208, 0.9)); -webkit-border-radius: 12px 1px; -o-border-radius: 12px 1px; -ms-border-radius: 12px 1px; -moz-border-radius: 12px 1px; border-radius: 12px 1px; -webkit-pointer-events: none; -moz-pointer-events: none; -ms-pointer-events: none; -o-pointer-events: none; pointer-events: none; position: absolute } #wrapper.fireworks canvas{z-index:0;pointer-events: none;position: fixed;top: 0;transform: scale(1.1);opacity:0.5;} #wrapper.fireworks button#startButton {border: 0;border-radius: 0;margin: 0;padding: 0;display: none;} /* 벚꽃 테스트 2022-03-14 */ /*Keyframes*/ @keyframes flower { 0% {background-position: 0 -100px, 0 -100px, 0 -100px;} 50% {background-position: -300px 300px, -100px 300px, -200px 400px;} 100% {background-position: -500px 600px, -400px 700px, -300px 500px;} } @-moz-keyframes flower { 0% {background-position: 0 -100px, 0 -100px, 0 -100px;} 50% {background-position: -300px 300px, -100px 300px, -200px 400px;} 100% {background-position: -500px 600px, -400px 700px, -300px 500px;} } @-webkit-keyframes flower { 0% {background-position: 0 -100px, 0 -100px, 0 -100px;} 50% {background-position: -300px 300px, -100px 300px, -200px 400px;} 100% {background-position: -500px 600px, -400px 700px, -300px 500px;} } @-ms-keyframes flower { 0% {background-position: 0 -100px, 0 -100px, 0 -100px;} 50% {background-position: -300px 300px, -100px 300px, -200px 400px;} 100% {background-position: -500px 600px, -400px 700px, -300px 500px;} } .flower { background-image: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Ssybjre1.cat), url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Ssybjre3.cat), url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Ssybjre2.cat); -webkit-animation: flower 20s linear infinite; -moz-animation: flower 20s linear infinite; -ms-animation: flower 20s linear infinite; animation: flower 20s linear infinite; } /* 모두암 상품특장점 그래프 추가 chart1 2022-02-22 */ .info-con1 > li > span.tit_box {font-size:1.5rem;width:70%;padding:1.0rem 2.0rem;margin-top:1.0rem;}/* 상품특장점 추가 : 220222 */ .info-con1 > li > p > span.text {font-size:1.2rem;} .chart_box {margin:20px auto;} .chart_box .chart {width:49%;} .chart_box .chart canvas {width:100% !important;height:100% !important;} .chart_box .chart.onechart1, .chart_box .chart.onechart2 {background-size:80%;} .chart_box .chart span {top:50%;} .chart_box .chart span span {font-size:2.0rem;line-height:3.5rem;} /* 모두암 상품특장점 그래프 추가 chart2 2022-02-22 */ .visual-scroll1.chart2 .bx-wrapper .bx-viewport {width:100% !important;height:300px !important;margin:auto;} .visual-scroll1.chart2 {height:300px;} .visual-scroll1.chart2 .list > li.scene5 {width:100% !important;height:100% !important;} .visual-scroll1.chart2 .list > li > div {margin:0;} .visual-scroll1.chart2 .list > li.scene5.active .info ul > li:nth-child(1) b > span:after {height:15.0rem;} .visual-scroll1.chart2 .list > li.scene5 .info ul > li > b > span:after {width:3.0rem;} .visual-scroll1.chart2 .list > li.scene5 .info ul > li {font-size:1.2rem;} .visual-scroll1.chart2 .list > li.scene5 > div > em {top:1.0rem;left:-1.0rem;width:60px;height:60px;background-size:200%;} .visual-scroll1.chart2 .list > li.scene5 > div > strong {left:2.0rem;top:2.0rem;width:60px;height:60px;background-size:200%;} /* 모두암 상품특장점 그래프 추가 chart3 2022-02-22 */ .screenshot__wrapper.chart3 {width:100%;max-width:600px;margin:5.0rem auto 0;} .screenshot__wrapper.chart3 .project-graph__section {flex: 0 0 15%;} .screenshot__wrapper.chart3 .project-graph__per span{display:block;} .screenshot__wrapper.chart3 .project-graph__section {width:30px;} .screenshot__wrapper.chart3 .desktop__body .ment {margin:50px auto 20px;} .project-graph__section:nth-child(3) .red {transform:rotate(-3deg);top:120px;} .project-graph__section:nth-child(4) .red {transform:rotate(-20deg);top:113px;} .project-graph__section:nth-child(5) .red {transform:rotate(-11deg);top:88px;} .project-graph__section:nth-child(6) .red {transform:rotate(-5deg);top:72px;} .project-graph__section:nth-child(7) .red {transform:rotate(-2deg);top:64px;} .project-graph__section:nth-child(8) .red {transform:rotate(0);top:62px;width:0;} /* 모두암 상품특장점 그래프 추가 chart4 2022-02-22 */ .box_one {margin:5.0rem 0;height:200px;} .box_one1 {width:150px;height:150px;top:-20%;left:10%;padding-top:3%;} .box_one2 {width:150px;height:150px;padding-top:0;} .box_one3 {width:120px;height:120px;top:-10%;right:20%;padding-top:2%;} .box_one4 {width:120px;height:120px;bottom:-15%;padding-top:2%;} .box_one div span {font-size:2.3rem;line-height:2.5rem;padding-top:5%;} .box_one div span span {font-size:1.2rem;line-height:1.5rem;} /* ESGArea esg캠페인 동참서약서 */ .box-type1.ESGArea {padding: 2.0rem 4.0rem 1.0rem;} .box-type1 .infobox-wrap#ESGArea {border:none;padding:0 2.0rem;} #ESGArea span.esg_go {position:relative;font-size:0;} #ESGArea span.esg_go:before {position:absolute;content:"";width:12px;height:12px;display:inline-block;border-top:4px solid #2b9330;border-right:4px solid #2b9330; transform:rotate(45deg);top:-13px;left:0;} #ESGArea span.esg_go:after {position:absolute;content:"";width:12px;height:12px;display:inline-block;border-top:4px solid #2b9330;border-right:4px solid #2b9330; transform:rotate(45deg);top:-13px;left:13px;} /* 대중교통안전보험 신상품 보험료계산 220321 */ div.safe_select {font-size:1.8rem;padding:2.0rem 0;} div.safe_select i {font-size:1.8rem;} .list-product2 .list .box {padding:2.0rem;} .list-product2 .list .box > ul.safe_text li {font-size:1.7rem;letter-spacing:-0.2rem;} .list-product2 .list .box > ul.safe_text li:nth-child(odd) {padding:0;} .list-product2 .list .box > ul.safe_text li:nth-child(even) {padding-right:0.1rem;} /* 상품 기본정보 : 비주얼영역 모바일용 2022-04-19----------------------------------------------- */ .wrap-basic.mb {height:auto;padding:2.0rem 0 0;color:#333;} .wrap-basic.mb:before {background:none !important;} .wrap-basic.mb h1, .wrap-basic.mb .txt, .wrap-basic.mb .info, .wrap-basic.mb .txt2 {display:none;} /* 상품 보험료계산 모바일 2022-04-19 -------- ------------------------------------------------- */ .wrap-calculator1.mb {background:none; box-shadow:none;} .wrap-calculator1.mb .heading {font-size:1.5rem;line-height:4.0rem;} .wrap-calculator1.mb p {margin:0 0 1.0rem;line-height:2.5rem;} /* 계산하기 아이콘 삭제 2022-04-05 */ .wrap-calculator1.mb .btn button {height:5.5rem;line-height:5.5rem;width:calc(100vw-4.0rem);color:#fff;background:#0084d1;margin-top:2.0rem;/*left:-2.0rem;right:-2.0rem;*/} .wrap-calculator1.mb fieldset {box-shadow:0 5px 20px #aaaaaa;border-radius:1.0rem;margin-bottom:2.0rem;overflow:hidden;} .wrap-calculator1.mb fieldset ul.calculator_mb {width:90%;margin:auto;} .wrap-calculator1.mb fieldset ul.calculator_mb > li {padding:0;} .wrap-basic.mb .wrap-calculator1.mb {position:static;width:100%;margin:0 auto;overflow:visible;} .wrap-calculator1.mb fieldset ul.calculator_mb li:nth-child(odd) {display:block;width:30%;line-height:4.0rem;} .wrap-calculator1.mb fieldset ul.calculator_mb li:nth-child(even) {width:70%;} .wrap-calculator1.mb fieldset ul.calculator_mb li {border:none !important;padding:2.0rem 0 0 0;font-size:1.6rem;margin-bottom:0;} .wrap-calculator1.mb fieldset ul.farmer {padding-top:1.0rem;} .wrap-calculator1.mb fieldset ul.farmer li {float:left;} .wrap-calculator1.mb fieldset ul.farmer li:nth-child(1) {padding:0 !important;;text-align:right;width:75px;} .wrap-calculator1.mb fieldset ul.farmer li .wraptype-base.type-tbl dt {width:75px;} .wrap-calculator1.mb fieldset ul.farmer > li input.text {font-size:1.8rem;} .wrap-calculator1.mb#uiFormCalculator1 dl.event1, #uiFormCalculator1 dl.event2, #uiFormCalculator1 dl.event3 {margin:1.0rem 0;height:60px;} .wrap-calculator1.mb fieldset ul.calculator_mb > li input.text {font-size:1.8rem;width:90%;font-weight:bold;letter-spacing:0.2px;} .wrap-calculator1.mb .btn button {font-size:2.0rem;} /* 남녀 선택 라디오버튼 */ .wrap-calculator1.mb fieldset ul.calculator_mb .label-icon1 {display:none;} .wrap-calculator1.mb fieldset ul.calculator_mb .radio-icon {font-size:1.8rem;display:block;width:100%;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;} .wrap-calculator1.mb fieldset ul.calculator_mb .radio-icon form {width:100%;flex-wrap:wrap;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;} .wrap-calculator1.mb fieldset ul.calculator_mb .radio-icon label {width:49%;display:-webkit-box;display:inline-block;cursor:pointer;font-weight:500;} .wrap-calculator1.mb fieldset ul.calculator_mb .radio-icon label:last-child {margin:0 0 0 1%;} .wrap-calculator1.mb fieldset ul.calculator_mb .radio-icon label input {display:none;} .wrap-calculator1.mb fieldset ul.calculator_mb .radio-icon label input:checked + span {} .wrap-calculator1.mb fieldset ul.calculator_mb .radio-icon label input:checked + span:before {box-shadow:inset 0 0 0 0.5em #0084d1;} .wrap-calculator1.mb fieldset ul.calculator_mb .radio-icon label span {line-height:4.0rem;position:relative;font-weight:bold;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;padding:0;-webkit-transition:0.25s ease;transition: 0.25s ease;} .wrap-calculator1.mb fieldset ul.calculator_mb .radio-icon label span:before {display:-webkit-box;display:flex;flex-shrink:0;content:"";background:none;width:1.5em;height:1.5em;border-radius:50%;margin:0 0.8rem;-webkit-transition:0.25s ease;transition:0.25s ease;box-shadow: inset 0 0 0 0.125em #d9d9d9;} /* 20220805 생활쏘옥 추가 */ .product12 .info-con1 > li:first-child {padding-top:0;margin:0 -2.0rem;} .product12 .list-product2 .list .box > ul > li {padding:0.5rem 0;} .product12 .list-product2 .list .box > ul > li > span {width:70%;line-height:1.5rem;} .product12 .list-product2 .list > li[aria-hidden="false"] .box:before {border:none;} .product12 .list-product2 .list.type-two .box > ul > li > span + span {width:30%;text-align:right;padding-right:0;} .product12 .wrap-calculator1.mb p i {border-bottom: 5px solid #f3df8f;line-height:3.0rem;} .product12 .wrap-calculator1.mb p i:before {display:none;} /* 20230509 검진쏘옥 추가 */ .product13 .info-con1 > li:first-child {padding-top:0;margin:0 -2.0rem;} .product13 .list-product2 .list > li[aria-hidden="false"] .box:before {border:none;} .product13 .list-product2 .list .box > ul > li:nth-child(2) > span {letter-spacing:-0.2rem;line-height:2.5rem;} .product13 .list-product2 .list .box > ul > li > span > em {padding-top:1.0rem;} .product13 .list-product2 .list.type-two .box > ul > li:first-child > span + span {padding-right:0;} .product13 .list-product2 .list.type-two .box > ul > li:nth-child(2) > span + span {line-height:5.0rem;padding-right:0;} /* 검진쏘옥 - NH검진케어 서비스 이용을 위한 선택 동의 2023-05-09 */ #careAgreePop.pop-modal1.mo .content {max-height:100vh;position:absolute;bottom:0;top:0;padding:3.0rem 2.0rem 5.0rem;} #careAgreePop .form-area.toggle.check_list {margin:0;border-top: 1px dashed #999;} #careAgreePop .form-area.toggle.check_list > li:last-child {border-bottom: 1px dashed #999;} #careAgreePop .check_all.label-check {margin:2.0rem 0 3.0rem;} #careAgreePop .check_all.label-check label {width:100%;} #careAgreePop .check_all.label-check label > input + span {padding:0.9rem 0.8rem 0.9rem 1.2rem;} #careAgreePop .check_all.label-check label > input + span:after {left:15%;} #careAgreePop .mes-info3.m4.default {margin:2.0rem;} /* 가입설계 동의 2023-06-07 */ #susDesignAgree.pop-modal1.open {height:100%;display:block;position:fixed;left:0;right:0;top:0 !important;z-index:1000;transform:translateY(0.0rem);transition:opacity 500ms 250ms ease, transform 500ms 250ms ease;} #susDesignAgree.pop-modal1 .header {position:absolute;top:0 !important;width:100%;z-index:2;} #susDesignAgree.pop-modal1 .content {max-height:100vh;position:absolute;bottom:0;top:0;padding:3.0rem 2.0rem 5.0rem;margin:4.0rem 0 6.0rem;} #susDesignAgree.pop-modal1 .area-btn1 {position:absolute;bottom:0 !important;margin:0;padding:0;width:100%;height:6.0rem;} #susDesignAgree.pop-modal1 .area-btn1 .btn-com.c1 {width:100%;height:6.0rem;background:#0081d1;font-size:2.5rem;line-height:6.0rem;display:inline-block;text-align:center;overflow:hidden;margin:0;padding:0;color:#fff;} /* 가입한도 초과 2023-06-15 #uiPOPPOLYP.pop-modal1.open {height:100%;display:block;position:fixed;left:0;right:0;top:0 !important;} */ /* 옴니 라운지 2022-09-05 */ .on #container {padding:5.0rem 0 0;margin:0;background:#f7f9fb;} .on .logo {margin:0;} .on h2.omni_title {font-size:1.9rem;line-height:3.3rem;margin-bottom:2.0rem;background:#fff;padding:1.0rem 0 0 2.0rem;} .on h2.omni_title span:before {bottom:-0.8rem;} .on h3 {font-size:1.8rem;padding-left:0;} .omni-section1 {background:#f7f9fb;width:100%;height:100%;max-width:38.0rem;margin:auto;} .omni-section1 div.banner-visual1, .omni-section1 div.banner-visual1 .bx-viewport {width:100%;height:200px !important;} .omni-section1 div.banner-visual1 .list {height:100%;} .omni-section1 div.banner-visual1 .list > li {padding:0;height:100%;width:100% !important;} .omni-section1 div.banner-visual1 .list > li.active {width:100% !important;} .omni-section1 div.banner-visual1 .list > li .banner-card {max-width:38.0rem;margin:auto;padding:0 2.0rem;} .omni-section1 div.banner-visual1 .list > li .banner-card a.w2x1 {width:100%;height:200px;} .omni-section1 div.banner-visual1 .bx-controls {top:17.8rem;padding:0 3.0rem 0 1.0rem;} .omni-section1 div.banner-visual1 .bx-controls .bx-pager-item > a.active {line-height:1.5rem;} .omni-section1 div.banner-visual1 .bx-controls .bx-pager-item > a.active:before {border-radius:1.0rem;} .omni-section2 {position:relative;top:auto;width:calc(100% - 4.0rem);height:100%;margin:2.0rem 2.0rem 0;} .omni-section2:after {display:none;} .omni-section2:before {display:none;} .omni-section2 .omni_date {position:relative;height:100%;width:100%;padding:2.0rem 2.0rem 0;top:0;border-right:1px solid #c0c8d5;border-left:1px solid #c0c8d5;} /* 2023-07-24 */ .omni-section2 .omni_date .graph {margin:0;} .omni-section2 .omni-tab_group {position:relative;} .omni-section2 .omni-tab_group:before {content:'';position:absolute;bottom:0;width:100%;height:1px;background:#c0c8d5;} .omni-section3 {background:#fff;border-right:1px solid #c0c8d5;border-left:1px solid #c0c8d5;border-bottom:1px solid #c0c8d5;border-radius:0 0 1.5rem 1.5rem;} /* .omni-section3 {position:static;width:100%;height:100%;padding:0 2.0rem 2.0rem;} .omni-section3 h3 {display:none;} .omni-section3 ul.omni_log {height:100%;} .omni-section3 ul.omni_log {width:100%;position:relative;height:100%;padding:2.0rem 1.0rem 2.0rem 1.5rem;background:#fff;} .omni-section3 ul.omni_log li {font-size:1.4rem;} .omni-section3 ul.omni_log li strong {font-size:1.6rem;color:#046fd9;} .omni-section3 ul.omni_log li i {padding:0;} .omni-section3 ul.omni_log li.omni_log1 span {width:100%;} .omni-section3 ul.omni_log li.omni_log2 {padding-left:60px;} .omni-section3 ul.omni_log li.omni_log2 div {line-height:1.8rem;} */ /* 옴니 라운지 개편 2023-02-23 */ .omni-section3 {position:static;width:calc(100% - 4.0rem);height:100%;padding:0 0 2.0rem;margin:0 2.0rem 2.0rem;} .omni-section3 h3 {padding:2.0rem;border-top:1px solid #c0c8d5;} .omni-section3 ul.omni_log {display:table;width:100%;padding:2.0rem 2.0rem 1.0rem;} /* 2023-07-24 */ .omni-section3 ul.omni_log li.omni_log1 span {width:100%;} .omni-section3 ul.omni_log li.omni_log2 div {line-height:1.8rem;font-size:1.5rem;} .omni-section3 ul.omni_log li.omni_log2 strong {font-size:1.8rem;} .omni-section3 ul.omni_log li.omni_log2 > span {width:140px;} .omni-section3 ul.omni_log li.omni_log2 > span:last-child {width:calc(100% - 140px);text-align:right;padding-right:1.0rem;} .omni-section3 ul.omni_log li.omni_log2 > div > span {padding-left:5px;} .omni-section3 .section3_stamp div.ranking ul li {z-index:1;width:32%;} .omni-section3 .section3_stamp {display:table;width:100%;padding:0 2.0rem;} .omni-section3 .section3_stamp div {width:100%;} .omni-section3 .section3_stamp div:last-child {margin:auto;display:table;float:inherit;} .omni-section3 .section3_stamp div ul.stamp li {width:18.5%;} .omni-section3 .section3_stamp div.ranking > span {text-align:center;} .ranking ul li:last-child span {font-size:1.5rem;padding:0.6rem 0.5rem 0 0;text-align:center;} .ranking ul li:last-child span:before {right:1.5rem;} /* 옴니 라운지 개편 2023-05-18 */ #uiPOPinfomation.pop-modal1.omni {margin-bottom:0;padding-bottom:0;} #uiPOPinfomation.pop-modal1.omni .content.cont4 {max-height: calc(100vh + 7.0rem);} #uiPOPinfomation.pop-modal1.omni .content.cont4 img {margin-bottom:0;padding-bottom:0;} #uiPOPwelcome.pop-modal1.omni.long {padding:0 0 0;} #uiPOPwelcome.pop-modal1.omni .content.cont4 {max-height: calc(100vh + 7.0rem);margin-top:0 !important;} #uiPOPshareCampain.pop-modal1.omni .content {max-height:calc(100vh - 7.0rem);padding-bottom:12.0rem;} .pop-modal1.omni .area-btn_pop5 {padding:0 2.0rem;} .pop-modal1.omni .area-btn_pop5 button {padding:0 2.0rem;} .omni-section4 {padding:2.0rem 2.0rem 5.0rem;margin:3.0rem 0 0;background:#fff;} .omni-section4 .omni_product {position:relative;width:100%;margin-bottom:2.0rem;padding:2.0rem 1.5rem;} .omni-section4 .omni_product:nth-child(4), .omni-section4 .omni_product:nth-child(7), .omni-section4 .omni_product:nth-child(10) {width:100%;} .omni-section4 .omni_product:last-child {margin:0;width:100%;} .omni-section4 .omni_product strong {font-size:1.7rem;/*padding-bottom:1.0rem; height:100%; */} .omni-section4 .omni_product em {font-size:1.4rem;} .omni-section4 .omni_product p.pro_bt span span {font-size:1.4rem;} .omni-section4 .omni_product:nth-child(-n+20) p.pro_t {height:100%;} .omni-section4 .omni_product.last {float:none;} .omni-section4 .omni-tab_group > .omni-tab {width:32.3%;} .omni-section5 {padding:0 2.0rem;} .omni-section5 .omni_product {width:100%;background:#fff;} .omni-section5 .omni_product .pro_t {height:auto;min-height:75px;padding-left:9.0rem;} .omni-section5 .omni_product .pro_t:before {top:0;} .on .contents > p.mes-info3 {background:#fff;margin:0;padding:0 0 2.0rem 3.0rem;font-size:1.3rem;} .omni-btn {position:relative;width:100%;clear:both;top:0;left:0;margin-top:1.0rem;} .omni-btn2 {margin:1.0rem 0 1.0rem 1.0rem;font-size:2.0rem;} #div_infoView .omni-btn2 {padding:0.5rem 1.5rem 0.5rem 0.5rem;font-size:1.5rem;margin:0;} #div_infoView .omni-btn2:before {right:1.0rem;width:0.7rem;height:0.7rem;border-top:0.2rem solid #fff;border-right:0.2rem solid #fff;} .omnilist-btn {position:relative;right:0;} .pop-modal1.omni {min-height:10%;padding:7.0rem 0 5.0rem;display:block;position:fixed;left:0;right:0;top:0 !important;z-index:1000;transform:translateY(1000%);transition: opacity 350ms 350ms ease, transform 350ms 350ms ease;} .pop-modal1.omni.open {min-height:10.0rem;display:block;position:fixed;left:0;right:0;top:0 !important;z-index:1000;transform:translateY(5.0rem);transition:opacity 700ms 350ms ease, transform 700ms 350ms ease;} .pop-modal1.omni.long {border-radius:2.0rem 2.0rem 0 0;padding:7.0rem 0 0;} .pop-modal1.omni.long.open {bottom:0 !important;height:100%;transform:translateY(0.0rem);} .pop-modal1.omni .header {margin:3.0rem 2.0rem 0;} .pop-modal1.omni .header:before {top:-2.0rem;} .pop-modal1.omni .header h2 {padding:1.0rem 3.0rem 0.9rem 0;line-height:2.0rem;height:3.9rem;} .pop-modal1.omni .header button {top:-1.0rem;right:-1.0rem;} .pop-modal1.omni .content {max-height:calc(100vh - 12.0rem);padding:0;position:static;overflow-y:auto;margin:0 !important;} .pop-modal1.omni .content .cont2 {padding:0;} .pop-modal1.omni .content .cont3 {padding:3.0rem 0 11.3rem 0;} .pop-modal1.omni.long .content .cont {padding-bottom:10.0rem;} .pop-modal1.omni .content.cont2 {padding:0;position:static;height:100%;max-height:100%;overflow-y:hidden;margin:0 !important;} .pop-modal1.omni .content.cont4 {max-height: calc(100vh - 5.0rem);margin-top:-7.0rem !important;} .pop-modal1.omni .content.cont4 .cont3 {padding:0;} .pop-modal1.omni .content.cont4 .cont3 img {padding-bottom:13.0rem;} .pop-modal1.omni .content .cont2 img {padding:2.0rem 0 10.0rem 0;} @media only screen and (min-width:540px) and (max-width:1366px) { .omni-section3 .section3_stamp div {width:50%;} } @media only screen and (max-width:360px) { .omni-section2 .omni_date {padding: 2.0rem 1.0rem 1.0rem;} /* 2023-07-20 */ .omni-section3 .section3_stamp {padding:0 1.0rem;} .omni-section3 ul.omni_log {padding:2.0rem 1.0rem;} .omni_product ul li {font-size:1.1rem;margin-left:2px;} .omni_product ul li a:before {top:0.75rem;left:0.25rem;width:20px;height:20px;background-size:30.0rem 15.0rem;} .omni_product ul li.omni_ic2 a:before {background-position:-3.2rem 0.1rem;} .omni_product ul li.omni_ic3 a:before {background-position:-6.4rem 0.1rem;} .omni_product ul li a > span {padding:1.0rem 0 0 2.0rem;} .omni-section4 .omni_product, .omni-section3 .omni_product {padding:2.0rem 1.0rem;} .omni_product ul li:first-child:nth-last-child(4), #gnb .omni_product ul li:first-child:nth-last-child(4) ~ li {width:19.5%;} .omni_product ul li:first-child span {width:48px;font-size:1.1rem;} .omni-section3 ul.omni_log li.omni_log2 div {letter-spacing:-0.15rem;} #div_infoView .omni-btn2 {padding:0.25rem 1.25rem 0.25rem 0.25rem;font-size:1.2rem;margin:0;} #div_infoView .omni-btn2:before {right:0.75rem;width:0.5rem;height:0.5rem;border-top:0.1rem solid #fff;border-right:0.1rem solid #fff;} } /* 20220905 이미지 pc용 숨김 */ ul.open {margin:0 -2.0rem -5.0rem;} ul.open li.pc_20220905 {display:none} ul.open li.mb_20220905 {display:block;} .pop-modal1.omni fieldset.box-type1 {padding:0;margin:0;} .pop-modal1.omni fieldset.box-type1 .label-check {margin:0;} .pop-modal1.omni .details-slider .form-area.toggle.check_list > li {border-bottom:none;} .omni .qr_box {width:250px;} .omni .qr_box span {margin:auto;display:block;width:190px;} .omni .area-btn_pop {z-index:999;-webkit-transform:translateZ(0);-webkit-backface-visibility:hidden;/* safari bug fix */} .omni .area-btn_pop .btn-m {height:5.0rem;line-height:5.0rem;} .pop-modal1.omni .area-btn_pop2, .pop-modal1.omni .area-btn_pop3 {z-index:999;position:absolute;} .pop-modal1.omni .area-btn_pop4 {position:absolute;bottom:2.0rem !important;left:1.5rem;right:1.5rem;z-index:999;width:calc(100% - 3.0rem);-webkit-transform:translateZ(0);-webkit-backface-visibility:hidden;/* safari bug fix */} .omni .on_list li {padding-left:2.0rem;} .omni .on_list li:last-child {text-align:right;padding-right:2.0rem;} .omni .on_list li:first-child, .omni .on_list li:first-child span {font-size:1.6rem;} .omni .on_list .input-date > .text {width:9.0rem;} .omni span.tit-sub4 i, .omni h4.tit-sub3, .omni h4.tit-sub3 i {font-size: 1.6rem;} /* 옴니 라운지 개편 2023-05-27 */ .omni span.tit-sub4 span {padding-left:100px;} .omni span.tit-sub4 i {padding-left:100px;} .omni span.tit-sub4 i.log2:before {top:-1.0rem;width:95px;height:95px;background-position:-16.0rem bottom;background-size:25.0rem 25.0rem;} .omni .on_table2 table {font-size:1.4rem;} .omni .on_table2 table th {padding:0.8rem 0.1rem;} .omni .paging a + a {margin:0 0.3rem;} .omnitab {height:100%;} .omnitab .nav {height:5.0rem;} .omnitab .nav label {padding:1.0rem 0;} .omnitab .slider-wrapper {height:calc(100% - 5.0rem);} .omnitab .slider-wrapper.only {height:100%;} /* 추가 2022-09-15 */ .omnitab .slider-wrapper .details-slider {height:100%;} .omnitab .slider-wrapper .details {padding:0 2.0rem 7.0rem 2.0rem;overflow-y:scroll;margin-bottom:0;height:100%;/*height:calc(100vh - 22.6rem);*/} /* 옴니 라운지 개편 2023-05-03 .on #container > .contents > div {height:auto;} */ /* 옴니 라운지 팝업 2024-01-24 */ #uiPOPwelcome .area-btn_pop4.two {background:none;box-shadow:none;} #uiPOPwelcome .area-btn_pop4.two a {width:48%;position:absolute;font-size:1.5rem;border-radius:1.0rem;background:#046fd9;} #uiPOPwelcome .area-btn_pop4.two a:last-child {right:0;background:#a1aab3;} /* 챗봇 2023-08-01 */ .chatbot .cont-visual:after {background: #00aaa5 url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Sot_cnggrea3.cat) 50% 0 no-repeat;background-image: url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Sot_cnggrea3.cat), linear-gradient(to right, #8089ff, #555baa);background-size: auto 100%;} .np .nav-submenu.cont-visual.navCo {width:100%;margin:0 -2.0rem;position:fixed;z-index:1;} .np .tab-nav1 {top:11.0rem;width:100%;margin:0 -2.0rem 2.0rem;position:fixed;z-index:0;} .np .tab-nav1 > li {width:25%;height:6.0rem;line-height:1.8rem;padding:1.25rem 0;} .np .tab-nav1 > li.active {background:#45494d;color:#fff;font-weight:bold;} .np .tab-nav1 > li a:focus {outline:none;border:none;} .np .uiTabSection {z-index:-1;position:relative;} .np .uiTabSection > div {padding-top:11.0rem } .chatbot1 {height:52.0rem;margin:auto;position:relative;} .chatbot1:before {content:'';position:absolute;display:block;top:0;left:50%;width:30.0rem;height:60.0rem;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Spungobg1_231006.cat) no-repeat;background-size:100%;transform:translateX(-50%);-webkit-transform:translateX(-50%);} .chatbot2 {padding:4.0rem 0 0;max-width:450px;margin:auto;} .chatbot2 li {position:relative;padding-left:calc(15.0rem + 5%);padding-top:4.0rem;height:20.0rem;word-break:keep-all;} /*.chatbot2 li:last-child {height:15.0rem;}*/ .chatbot2 li:before {content:'';position:absolute;display:block;top:0;left:0;width:15.0rem;height:18.0rem;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Spungobg2.cat) no-repeat;background-size:100%;} .chatbot2 li span {display:block;font-size:1.8rem;font-weight:bold;margin-bottom:1.0rem;position:relative;width:7.0rem;text-align:center;} .chatbot2 li span:before {content:'';display:block;width:8.0rem;height:1.0rem;background:#fcde7f;border-radius:50%;position:absolute;bottom:-0.25rem;z-index:-1;left:-0.5rem;} .chatbot2 li:nth-child(2) {padding-left:5%;padding-right:15.0rem;padding-top:5.0rem;} .chatbot2 li:nth-child(2):before {left:auto;right:0;background-position:0 -18.4rem;} .chatbot2 li:nth-child(3):before {background-position:0 -36.8rem;} .chatbot3 {height:55.0rem;margin:auto;position: relative;} .chatbot3:before {content:'';position:absolute;display:block;top:3.0rem;left:50%;width:30.0rem;height:58.0rem;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Spungobg3_240116.cat) no-repeat;background-size:100%;transform:translateX(-50%);-webkit-transform:translateX(-50%);} .chatbot4 {padding:2.0rem 0 4.0rem;max-width:380px;margin:auto;} .chatbot4 li {position:relative;padding-left:calc(15.0rem + 5%);padding-top:2.0rem;height:18.0rem;word-break:keep-all;} .chatbot4 li:before {content:'';position:absolute;display:block;top:0;left:0;width:15.0rem;height:15.0rem;background:url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Sjjj.auryvsr.pb.xe%2Sugzy%2Spbzzba%2Spff%2S..%2Svzntrf%2Spbzzba%2Spungobg4.cat) no-repeat;background-size:100%;} .chatbot4 li span {display:block;font-size:1.8rem;font-weight:bold;margin-bottom:1.0rem;position:relative;width:7.0rem;text-align:center;} .chatbot4 li span:before {content:'';display:block;width:8.0rem;height:1.0rem;background:#c1dfeb;border-radius:50%;position:absolute;bottom:-0.25rem;z-index:-1;left:-0.5rem;} .chatbot4 li:nth-child(2):before {background-position:0 -15.0rem;} .chatbot4 li:nth-child(3):before {background-position:0 -30.0rem;} .chatbot4 li i {display:block;} .chatbot4 li a.bt_story {color:#fff;position:relative;display:block;width:12.0rem;padding:0.5rem 3.0rem 0.5rem 1.0rem;float:right;margin:2.0rem 1.0rem 0 0;border-radius:0.5rem;background:#174e9f} .chatbot4 li a.bt_story:before {content:'';position:absolute;right:2.0rem;top:45%;width:0.75rem;height:0.75rem;border-top:0.2rem solid #fff;border-right:0.2rem solid #fff;-ms-transform:rotate(45deg) translateY(-50%);-webkit-transform:rotate(45deg) translateY(-50%);transform: rotate(45deg) translateY(-50%);} .chatbot4 li.story_no {margin:0 -2.0rem;padding-left:0;font-size:1.2rem;height:auto;text-align:center;} .chatbot4 li.story_no:before {display:none;} .chatbot1 span {position:relative;display:block;width:100%;padding:2.0rem;font-size:1.8rem;font-family:'NanumSquareR';text-align:center;border:1px solid #96bbdd;background:#fff;border-radius:1.0rem;} .chatbot1 span:before {content:"";display:block;position:absolute;width:1.2rem;height:1.2rem;left:50%;top:-0.7rem;margin:0 0 0 -0.7rem;background:#fff;border-top:0.1rem solid #96bbdd;border-left:0.1rem solid #96bbdd;-ms-transform:rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);} /* 기기별 사이즈 조정 */ @media only screen and (min-width: 1024px) and (max-width: 1366px){ /* 메인1 : 상단 비주얼컨텐츠 */ div.banner-visual1 .list > li .banner-card {right:35%;left:35%;} .main.mobile .banner-visual1 .list > li {top:1.0rem;} .pop-modal1.mo.main.open {transform: translateY(calc(100vh - 22.0rem));} } @media only screen and (min-width: 768px) and (max-width: 1023px){ /* 메인1 : 상단 비주얼컨텐츠 */ div.banner-visual1 .list > li .banner-card {right:25%;left:25%;} .main.mobile .banner-visual1 .list > li {top:1.0rem;} .pop-modal1.mo.main.open {transform: translateY(calc(100vh - 22.0rem));} } @media only screen and (min-width: 590px) and (max-width: 767px){ .pop-modal1.mo.main.open {transform: translateY(calc(100vh - 24.0rem));} .sc-prepage_s.qr li:nth-child(2) {width:100%;} } @media only screen and (max-width:360px) { .main.mobile .bx-wrapper {height:190px;} .main.mobile .list-product1 .list > li {padding:2.0rem 0 2.0rem 6.0rem;} .main.mobile .list-product1 .list > li:before {left:0;} .main.mobile .list-product1 .list > li > .btn {left:86%;} .check_all.label-check label > input + span {font-size:1.5rem;} .sc-prepage_s.qr li:nth-child(2) {width:100%;} } @media only screen and (max-width:320px) { .main.mobile .bx-wrapper {height:180px;} .main.mobile .list-product1 .list > li {padding:2.0rem 0 2.0rem 4.8rem;} .main.mobile .list-product1 .list > li:before {left:-1.0rem;} .main.mobile .list-product1 .list > li > .btn {left:87%;} .main.mobile .list-product1 .list > li > .tit {font-size:2.0rem;} .main.mobile .list-product1 {padding:0 1.5rem;} .main.mobile .main-section6 .list-nav > li {width:47%;} .main.mobile .main-section6 .list-nav > li:first-child {width:53%;} .sc-prepage_s.qr li:nth-child(2) {width:100%;} .cont-visual h1 {font-size:1.8rem;} #footer_m .callcenter span {margin-left:2.0rem;width:40%;letter-spacing:-0.1rem;font-size:1.2rem;} #bottomBanner {font-size:1.0rem;} .intro .slide {font-size:1.2rem;padding:1.4rem 0 0 9.0rem;} .intro .slide.slide-b h2 {font-size:1.1rem;} .intro .slide.slide-b p:first-of-type {font-size:1.4rem;} .intro .slide.slide-b p:last-of-type {font-size:1.1rem;} .intro .slide .slide-content h1 {font-size:1.5rem;} .hyo .wrap-basic h1 {font-size: 2.4rem;} .hyo .wrap-basic h1 strong:before {top: -1.0rem;} /*2022-08-08 보험료 계산결과 카카오톡 공유 */ .CalResult.kakao-tooltip:before {width:4.0rem;height:4.0rem;top:2.5rem;background-size:3.5rem 3.5rem;} .CalResult.kakao-tooltip > p {padding:1.0rem 4.0rem 0 4.0rem;font-size:1.4rem;} .CalResult.kakao-tooltip > p:before {width:3.0rem;right:0;top:1.5rem;height:3.0rem;background-position:-25.0rem -20.0rem;background-size:50.0rem 50.0rem;} .CalResult.kakao-tooltip p strong {font-size:1.7rem;} } @media only screen and (max-width:360px) { /* 모두암 상품특장점 그래프 추가 chart4 2022-02-22 */ .box_one {margin:5.0rem -2.0rem;height:200px;} .box_one1 {width:150px;height:150px;top:-20%;left:5%;} .box_one2 {width:150px;height:150px;right:5%;bottom:-20%;padding-top:0;} .box_one3 {width:120px;height:120px;top:-10%;right:10%;} .box_one4 {width:120px;height:120px;bottom:-15%;left:10%;} .box_one div span {font-size:2.3rem;line-height:2.5rem;padding-top:5;} .box_one div span span {font-size:1.2rem;line-height:1.5rem;} /* 모두암 상품특장점 그래프 추가 chart3 */ .project-graph__section:nth-child(3) .red {transform:rotate(-4deg);top:120px;} .project-graph__section:nth-child(4) .red {transform:rotate(-25deg);top:110px;} .project-graph__section:nth-child(5) .red {transform:rotate(-22deg);top:88px;} .project-graph__section:nth-child(6) .red {transform:rotate(-12deg);top:72px;} .project-graph__section:nth-child(7) .red {transform:rotate(-2deg);top:64px;} .project-graph__section:nth-child(8) .red {transform:rotate(0);top:62px;width:0;} .project-graph__popup2 {right:0;} } @media only screen and (min-width:361px) and (max-width:540px){ /* 모두암 상품특장점 그래프 추가 chart3 */ .project-graph__section:nth-child(3) .red {transform:rotate(-4deg);top:120px;} .project-graph__section:nth-child(4) .red {transform:rotate(-23deg);top:110px;} .project-graph__section:nth-child(5) .red {transform:rotate(-22deg);top:88px;} .project-graph__section:nth-child(6) .red {transform:rotate(-12deg);top:72px;} .project-graph__section:nth-child(7) .red {transform:rotate(-2deg);top:64px;} .project-graph__section:nth-child(8) .red {transform:rotate(0);top:62px;width:0;} } @media only screen and (max-width:539px) { /* 모두암 상품특장점 그래프 추가 chart4 2022-02-22 */ .box_one {margin:7.0rem -2.0rem;height:200px;} } @media only screen and (min-width: 540px) and (max-width: 1366px){ /* 모두암 상품특장점 그래프 추가 chart1 */ .chart_box {max-width:600px;} /* 모두암 상품특장점 그래프 추가 chart2 */ .visual-scroll1.chart2 .list > li.scene5 > div > em {left:6.5rem;} .visual-scroll1.chart2 .list > li.scene5 > div > strong {left:10.5rem;} /* 모두암 상품특장점 그래프 추가 chart4 */ .box_one {margin:10.0rem auto;height:270px;} .box_one div {display:inline-block;font-weight:bold;} .box_one1 {left:10%;top:-30%;width:230px;height:230px;padding-top:10%;} .box_one2 {right:10%;bottom:-20%;width:200px;height:200px;} .box_one3 {right:22%;top:-10%;width:150px;height:150px;} .box_one4 {left:22%;bottom:-25%;width:180px;height:180px;padding-top:5%;} /* 모두암 상품특장점 그래프 추가 chart5 */ .area-visual.chart5 img {max-width:600px;width:100%;} /* 옴니라운지 2022-09-05 */ .pop-modal1.omni .content .cont {padding:3.0rem 1.0rem 3.0rem 2.0rem;} .pop-modal1.omni .content .cont .label-check label > input:first-child + span {font-size:1.5rem;padding:0.8rem 0 0.7rem 3.2rem;} } @media only screen and (min-width:541px) and (max-width: 1366px){ /* 모두암 상품특장점 그래프 추가 chart3 */ .project-graph__section:nth-child(3) .red {transform:rotate(-3deg);top:120px;} .project-graph__section:nth-child(4) .red {transform:rotate(-12deg);top:109px;} .project-graph__section:nth-child(5) .red {transform:rotate(-11deg);top:88px;} .project-graph__section:nth-child(6) .red {transform:rotate(-5deg);top:72px;} .project-graph__section:nth-child(7) .red {transform:rotate(-2deg);top:64px;} .project-graph__section:nth-child(8) .red {transform:rotate(0);top:62px;width:0;} .screenshot__wrapper.chart3 .project-graph__section {flex: 0 0 16%;} }