@charset "UTF-8"; #main-banner .banner-link>a, .tabDepth>a, .lastDepth>a, .depth3>a, .depth3>a>span:before, .faq_list>li .q, .faq_list>li .q>.bul, #mVisual .visualRoll .slider>div, #mVisual .vTxtArea .ii, #mVisual .slick-dots>li button, #mVisual .slick-dots>li button:before, #mVisual .vTxt .ii, .main-service-swiper .swiper-wrapper .vTxt .ii, #mVisual .iconMenu .inConts>a, .qm-box>button:before, .swiper-pagination-bullet, .m-tab>a, .store-area>.store-map .thumb .finding-map-link, .store-area>.store-map .thumb .finding-map-link:after, #quick-right, #quick-social, .main-tab>a{transition: all .3s ease-out; transform-origin: 50% 50%;} .historyArea .history_box>.logo>span, .historyArea .history_box>.list:before, #mVisual .vTxt .ii{transition: all .5s ease-out; transform-origin: 50% 50%;} #mainVisual .vTxt .ii{transition: all .7s ease-out; transform-origin: 50% 50%;} #mVisual .visualRoll .slider .photoBox p{transition: all 1s ease-out; transform-origin: 50% 50%;} /*#mainVisual .visualRoll .swiper-slide>img{transition: all 2s ease-out; transform-origin: 50% 50%;}*/ /*[s] All Style */ .f0{font-size:0; line-height:0;} .point{color: var(--point) !important;} .point2{color: var(--point2) !important;} .nTable{width:100%; border-top:1px solid #111; font-size:0; line-height:0; overflow: hidden;} .nTable>table{width:calc(100% + 1px); border-spacing:0; border-collapse: collapse; table-layout : fixed;} .nTable>table th, .nTable>table td{padding:1.5rem; background-color: #fff; border-right:1px solid #ddd; border-bottom:1px solid #ddd; font-weight: 500; font-size:1.8rem; line-height:1.3; color:#111; text-align:center; vertical-align: middle; border-collapse:collapse; empty-cells:show; box-sizing: border-box; word-break:keep-all; word-wrap:break-word;} .nTable>table th{height:6rem;} .nTable>table>thead>tr>th{background-color: #ecf9ef; font-weight: 500;} .nTable>table>tbody>tr>th{background-color: #f8f8f8;} .nTable>table .point{color: #0a9e1f;} .nTable>table td.tar{padding-right:2rem;} .nTable.iclei>table th, .nTable.iclei>table td{font-weight: 400;} .nTable.iclei>table>thead>tr>th{font-weight:600;} .nTable.iclei>table td strong{font-weight: 600;} h4.bul{margin-bottom:4.5rem; padding-left:2rem; font-weight: 700; font-size:2.4rem; line-height:1; color: #1b1b1b; position: relative;} h4.bul:before{content: ""; width: 0.8rem; height: 0.8rem; background-color: var(--point); position:absolute; left: 0; top:0.7rem; border-radius:100%;} *+h4.bul{margin-top:6.5rem;} h4.txt{margin-bottom:2.5rem; font-weight: bold; font-size:3rem; line-height:1.3; color: #111; position: relative;} h4.txt .small{padding-left:2.7rem; font-weight: normal; font-size:1.7rem; color: #555; position: relative; display:inline-block; vertical-align: baseline;} h4.txt .small:before{content: ""; width: 1px; height: 1.6rem; margin-top:-0.8rem; background-color: #000; display: inline-block; position:absolute; left: 1.3rem; top:50%;} *+h4.txt{margin-top:7rem;} h5.txt{margin-bottom:2.5rem; font-weight: bold; font-size:2.5rem; line-height:1.3; color: #111; position: relative;} h5.txt .small{padding-left:2.7rem; font-weight: normal; font-size:1.7rem; color: #555; position: relative; display:inline-block; vertical-align: baseline;} h5.txt .small:before{content: ""; width: 1px; height: 1.6rem; margin-top:-0.8rem; background-color: #000; display: inline-block; position:absolute; left: 1.3rem; top:50%;} *+h5.txt{margin-top:6rem;} h5.bul{margin-bottom:2rem; padding:0 0 1rem 1.3rem; border-bottom:1px solid #DBDBDB; font-weight: bold; font-size:2.2rem; line-height:1.3; color: #000; position: relative;} h5.bul:before{content: ""; width:1rem; height:1rem; background:url('/images/icon_bul_8x8.svg') no-repeat left center/0.8rem; position:absolute; left: 0; top:1rem;} h6.txt{margin:3rem 0 1.5rem; font-weight: bold; font-size:2rem; line-height:1.3; color: #000; position: relative;} .nTit{font-size:4rem; line-height:1.3; color: #000;} .nTxt{font-size:2rem; line-height:1.4; color: #555;} ._star>li{padding-left:1.1rem; font-size:1.7rem; line-height:1.3; color: #555; position: relative;} ._star>li:before{content: "*"; position:absolute; left: 0; top:0;} ._star>li+li{margin-top:0.5rem;} .star_>li{padding-left:2rem; font-size:1.6rem; line-height:1.3; color: #555; position: relative;} .star_>li:before{content: "※"; position:absolute; left: 0; top:0;} .star_>li+li{margin-top:0.5rem;} ._starB>li{padding-left:1.5rem; font-size:1.7rem; line-height:1.4; color: #555; position: relative;} ._starB>li:before{content: "*"; font-weight: 600; color: var(--point); position:absolute; left: 0; top:0;} ._starB>li>p{margin-bottom:1rem; font-weight: 600; font-size:2rem; line-height:1.3; color: #000;} .g-box{margin-top:2rem; padding:2rem; background-color: #f4f6f8; border-radius:0.3rem;} .g-box.res{padding:2rem 4rem; font-weight: 500; font-size:2rem; line-height:1.3; color: #111; text-align: center; border-radius:99rem;} .g-box.res>strong{font-weight: 600; font-size:3rem;} ._caution{padding:0.2rem 0 0.2rem 3.3rem; background:url('/images/icon_caution.png') no-repeat left top/2.7rem; font-size:1.7rem; line-height:1.3; color: #000; position: relative;} ._caution2{margin-top:4rem; padding:0 0 1rem 3rem; background:url('/images/icon_caution2.png') no-repeat left 0.3rem/2.2rem; font-weight: 600; font-size:1.8rem; line-height:1.3; color: #000; position: relative;} ul.jum>li{padding-left:1.2rem; font-size:1.7rem; line-height:1.4; color: #555; position: relative;} ul.jum>li+li{margin-top:0.5rem;} ul.jum>li:before{content: "·"; position: absolute; left:0; top:0;} ul.jum>li.nodot:before{content: "·"; display:none;} ul._bul>li{padding-left:1.2rem; font-size:1.7rem; line-height:1.4; color: #555; position: relative;} ul._bul>li:before{content: "-"; position:absolute; left: 0; top:0;} .issue-box{margin-top:3rem; padding:1.5rem 3rem; border:1px solid #ddd; border-radius:0.3rem;} .issue-box>dl{display: flex; flex-flow: row wrap; align-items: start; gap:1.5rem;} .issue-box>dl>dt{padding:0.7rem 1.4rem; background-color: var(--point); font-weight: 600; font-size:1.6rem; line-height:1; color: #fff; border-radius:0.3rem; white-space: nowrap; position: relative;} .issue-box>dl>dt:before{content: ""; width: 0; height: 0; margin-top:-0.5rem; border-left:0.5rem solid var(--point); border-top:0.5rem solid transparent; border-bottom:0.5rem solid transparent; border-right:0; position:absolute; left: 100%; top:50%;} .issue-box>dl>dd{flex:1; padding-top:0.3rem;font-size:1.7rem; line-height:1.5; color: #555;} .u{text-decoration:none; display: inline; box-shadow: inset 0 -0.2rem 0 var(--point);} .lattice{background-size: 1rem, 3rem, 1rem 1rem, 3rem 3rem; background-image: linear-gradient(90deg, #ededed 1px, transparent 1px), linear-gradient(90deg, #ededed 1px, transparent 1px), linear-gradient(#ededed 1px, transparent 1px), linear-gradient(#ededed 1px, transparent 1px);} .wideFrame{height: 0; padding-bottom: 56.25%; /* 16:9 */ position: relative;} .wideFrame>video, .wideFrame>iframe, .wideFrame>#GoogleMap_map{width: 100%; height: 100%; position: absolute; left: 0; top: 0;} .wideKakao{width: 100%; margin: 0 auto; position: relative;} .wideKakao>.root_daum_roughmap{width: 100%; height:46rem;} .wideKakao>.root_daum_roughmap .wrap_map{height:100%; position: absolute; left: -1px; right: -1px; top: -1px;} .wideKakao .hide {display: none;} .scrollTb{display:inline-block; font-size:0; line-height:0; text-align: center;} .scroll_info{width:100%; padding:2rem 0; font-size:0; line-height:0; position: relative; display:none;} .scroll_info:before{content:"← scroll →"; margin-top:-1rem; font-size:2.2rem; line-height:1; color: #ff0000; display:inline-block; position: absolute; left:44%; top:50%; animation-duration: 1s; animation-iteration-count:infinite; animation-name: scrollMove; animation-timing-function:ease-In-Out;animation-direction:alternate;} @keyframes scrollMove { from {color: #222; left:42%;} to {color: var(--point); left:46%;} } .following-sticky{width:100%; margin:14rem 0 0; position: sticky; bottom:0; z-index:9; transition: all .3s ease-out;} .following-sticky .following-sticky-in{max-width:128rem; margin:0 auto; padding:1.4rem 2rem; background-color: rgba(97,151,223, 0.9); display: flex; flex-flow: row wrap; align-items: center; justify-content: center; gap:0 2rem; border-radius:3rem 3rem 0 0;} .following-sticky .icon img{width:4.3rem; display:block;} .following-sticky .text{flex:1; max-width:58.5rem; font-weight: bold; font-size:2.4rem; line-height:1.4; color: #fff; display: flex; align-items: center; gap:0 1rem;} .following-sticky .text i{min-width:3rem; width:3rem; height:3rem; background-color: #fff; display:none; border-radius:99px; flex-flow: row wrap; align-items: center; justify-content: center;} .following-sticky .text img{height:9px; display:block;} .following-sticky a{min-width:22.2rem; height:4.4rem; padding:0 2rem; background-color: #fff; font-weight: 600; font-size:1.8rem; line-height:1.3; color: #425772; text-align: center; border-radius:99px; display: flex; flex-flow: row wrap; align-items: center; justify-content: center;} .following-sticky a>span{padding:0.3rem 0 0 0.3rem;font-size:1.2rem;opacity:0.5;} .following-sticky a>i{padding-left:1rem;} .following-sticky a img{height:12px; display:block;} /*[e] All Style */ /*[s] Intro Style */ #intro .intro-re .num, #intro .intro-re .ii, .slick-dots>li button, #main-visual .slick-arrow, .m-tab>a, #main-management .main-management .mml>div>span, .b-product-conts .b-product-re .over{transition: all .3s ease-out; transform-origin: 50% 50%;} #intro .intro-re:before, #intro .intro-re:after, #main-visual .vTxtArea .ii{transition: all .5s ease-out; transform-origin: 50% 50%;} #intro{width:100vw; height:100vh; display: flex; align-items: center; justify-content: space-between; position: relative;} #intro .intro-re{width:50vw; height:100vh; text-align: center; display: flex; flex-flow: column wrap; justify-content: center; overflow:hidden;}/* background-image:url('../../images/bg_intro.jpg'); background-repeat: no-repeat; background-size: cover; */ #intro .intro-re:before{content: ""; width:100vw; height:100vh; margin-left:-50vw; display: block; position: absolute; left:50%; top:0; background:#fff url('../../img/bg_intro2.jpg') no-repeat center bottom/cover;} #intro .intro-re:after{content: ""; width:30rem; height:100%; position: absolute; top:0; z-index:2; opacity: 0;} #intro .intro-re:nth-child(1):before{clip: rect(0, 50vw, 100vh, 0vw);} #intro .intro-re:nth-child(1):after{background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 100%); right:50%;} #intro .intro-re:nth-child(2):before{clip: rect(0, 100vw, 100vh, 50vw);} #intro .intro-re:nth-child(2):after{background: linear-gradient(to right, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%); left:50%;} /*#intro .intro-re:before{content: ""; width: 100%; height:100%; background-color:#fff; position:absolute; left: 0; top:0px; opacity: 0;}*/ #intro .intro-re .ii{margin-top:0; opacity: 0; position: relative; z-index:3;} #intro .intro-re .num{font-weight: bold; font-size:8rem; line-height:1; color: rgba(255,255,255,0.5); z-index:3;} #intro .intro-re .title{font-size:2.2rem; line-height:1; color: rgba(255,255,255,0.8);} #intro .intro-re .title>strong{font-weight: 600;} #intro .intro-re .btn{} #intro .intro-re .btn>span{padding:0 0.2rem 0 0.7rem; font-weight: 500; font-size:1.7rem; line-height:4rem; color: rgba(255,255,255,0.9); display:inline-block; position: relative;} #intro .intro-re .btn>span:before{content: ""; width: 100%; height: 1px; background-color: rgba(255,255,255,0.5); display: inline-block; position:absolute; left: 0; bottom:0;} #intro .intro-re:is(:hover, .active):before{filter:grayscale(10%) blur(5px); opacity: 0.95;} #intro .intro-re:is(:hover, .active):after{opacity: 0.1;} #intro .intro-re:is(:hover, .active) .ii{margin-top:4rem; opacity:1;} #intro .intro-re:is(:hover, .active) .num{color: rgba(255,255,255,1);} #intro-logo{display:inline-block; position: fixed; left:5rem; top:5rem; z-index:5;} #intro-logo img{height:6.6rem;} #intro-foot{display: flex; align-items: center; position: fixed; right:8rem; bottom:6rem; z-index:5; gap:1rem;} #intro-foot>span{font-size:1.5rem; line-height:1; color: #fff;} /*[e] Intro Style */ /*[s] Main Popup Style */ #hd_pop {z-index:101;position:relative;margin:0 auto;height:0} #hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} .pop_con{width:auto !important; max-width:100%; height:auto !important; background-color:#fff; position:absolute; display:block; border-radius: 1rem; overflow:hidden; box-sizing:border-box; box-shadow:0 0 3rem rgba(0,0,0,0.5);} .pop_con img{width:100%} .hd_pops_con{} .hd_pops_footer{display: flex; gap: 1rem; justify-content: space-between; padding: 1.5rem 2rem; color:#888; text-align:left;position:relative} .hd_pops_footer.white{background-color: #fff;} .hd_pops_footer.black{background-color: #000;} .hd_pops_footer .today_close{font-size:16px;} .hd_pops_footer .popup_close{width:14px;} .hd_pops_footer .hd_pops_reject {position: relative; font-size: 14px; line-height: 1; color: #888; padding: 0 0 0 20px;} .hd_pops_footer .hd_pops_reject::before{position: absolute; content: ''; width: 14px; height: 14px; top: 0; left: 0; border: 1px solid #888; background-color: #fff;} .hd_pops_footer .hd_pops_reject::after{position: absolute; content: ''; width: 10px; height: 10px; top: 2px; left: 2px; background-image: url('/img/icon_check.svg'); background-repeat: no-repeat; background-size: contain; background-position: center;} .hd_pops_footer .hd_pops_close{width: 14px; height: 14px;/* background-image: url('/img/icon_close.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; */} /* black */ .hd_pops_footer.black .hd_pops_reject {color: #fff;} .hd_pops_footer.black .hd_pops_reject::before{border: 1px solid #fff;} /* .hd_pops_footer.black .hd_pops_reject::after{filter: brightness(0) saturate(100%) invert(100%);} */ .hd_pops_footer.black .hd_pops_close{filter: brightness(0) saturate(100%) invert(100%);} #popLayer{width:100%; height:100%; font-size:0; line-height:0; position:fixed; left:0; top:0; z-index:99; overflow:hidden; overflow-y:auto;} #popLayer.disNone{display:none !important;} #popLayer #moPopArea{width:100vw; height:100vh; padding:10rem 3rem; box-sizing: border-box; display: flex; flex-wrap: wrap; flex-direction: row; align-items: flex-start; justify-content: flex-start; -ms-flex-align:center;} #popLayer #moPopArea .moPop{width:100%; max-width:50rem; margin:0; position: relative;} #popLayer #moPopArea #moPopRoll{background-color: #fff; border-radius:2rem; overflow:hidden; box-shadow:0 2rem 4rem rgba(0,0,0,0.3);} #popLayer .slider{width:100%; border-radius:2rem 2rem 0 0; box-sizing:border-box; overflow:hidden;} #popLayer .slider img{width:100%; vertical-align: top;} #popLayer .slider .HKeditorContent{padding:20px; font-size:20px; line-height:1.5; color: #666;} #popLayer .slider .HKeditorContent img{width:auto;} #popLayer #moPopRoll.roll .slider{} #popLayer .layerPopClose{width:3rem; height:3rem; margin:0; padding:0; font-size:0; line-height:0; position: absolute; right:1.5rem; top:1.5rem; z-index:6; transform:rotate(45deg);} #popLayer .layerPopClose:before, #popLayer .layerPopClose:after{content: ""; background-color: #222; display: block; position:absolute; left: 50%; top:50%;} #popLayer .layerPopClose:before{width: 100%; height: 2px; margin:-1px 0 0 -1.5rem;} #popLayer .layerPopClose:after{width: 2px; height: 100%; margin:-1.5rem 0 0 -1px;} #popLayer .moPopClose{width:100%; border-radius:0 0 2rem 2rem; display: flex; justify-content: space-between; overflow:hidden;} #popLayer .moPopClose>*{flex:1 1 50%; height:6rem; font-size:1.6rem; line-height:1; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: center;} #popLayer .moPopClose button{background-color: #878896; border:none; color: #dcdeea; position: relative;} /*#popLayer .moPopClose button:before{content: "X"; width: 1.8rem; height: 1.8rem; background-color: rgba(255,255,255,0.3); border:1px solid #000; font-family: dotum; font-weight: bold; font-size:1.6rem; line-height:1.6rem; color: #000;display: inline-block; position:absolute; top:0; box-sizing: border-box;} #popLayer .moPopClose button.toDay_close{padding-left:2.5rem;} #popLayer .moPopClose button.toDay_close:before{left:0;}*/ #popLayer .moPopClose button.close{padding-right:2.5rem} #popLayer .moPopClose button.close:before{right:0;} #popLayer .moPopClose a{background-color: #3617cd; color:#fff} #popLayer .slick-dots{width:100%; padding:0; text-align: center; position: absolute; left:0; bottom:7rem; z-index:7;} #popLayer .slick-dots>li{margin:0 0.7rem; display:inline-block; vertical-align: top;} #popLayer .slick-dots>li+li{} #popLayer .slick-dots>li button{width:1.4rem; height:1.4rem; padding:0; background-color:#d4d7d9; border:none; font-size:0; line-height:0; position: relative; cursor: pointer; border-radius:999px; overflow:hidden; transition: all .3s ease-out;} #popLayer .slick-dots>li.slick-active button{width:30px; background-color: #333;} #popLayer #moPopArea #moPopRoll{opacity: 0; visibility: hidden; transition: opacity 1s ease;} #popLayer #moPopArea #moPopRoll.open, #popLayer #moPopArea #moPopRoll.slick-initialized{visibility: visible; opacity: 1;} /*[e] Main Popup Style */ /*[s] Main Style */ .scroll-box{width:100%; padding-bottom:10px; flex-wrap: nowrap; justify-content: start; overflow-x: auto; overflow-y: hidden;} .scroll-box.shadow{width:calc(100% + 5rem);padding:0 0 5rem 5rem; flex-wrap: nowrap; justify-content: start; overflow-x: auto; overflow-y: hidden;} .scroll-box.shadow>*{margin-left:-5rem;} .scroll-box::-webkit-scrollbar{width: 0.5rem; height:100%;}/* 스크롤바의 너비 */ .scroll-box::-webkit-scrollbar:horizontal{width:100%; height:0.5rem} .scroll-box::-webkit-scrollbar-thumb{height: 10%; background-color:var(--point); border-radius: 1rem;} /* 스크롤바의 길이 & 색상 */ .scroll-box::-webkit-scrollbar-track{background-color: rgba(0,0,0,0.1);}/*스크롤바 뒷 배경 색상*/ a.m-btn{width:22.5rem; height:6rem; background-color: var(--point2); font-weight: bold; font-size:2rem; line-height:1.2; color: #fff; text-align: center; display: flex; align-items: center; justify-content: center; gap:1rem; border-radius:1rem;} a.m-btn img{width:1.3rem;} .m-title{} .m-title>dt{font-weight: 600; font-size:2.2rem; line-height:1; color: var(--point);} .m-title>dd{margin-top:2rem; font-weight: 800; font-size:6rem; line-height:1.2; color: #222;} .m-title.full{text-align: center;} /* */ #mainVisual{width:100%; position: relative; z-index:2; overflow:hidden;} #mainVisual .visualRoll{white-space: nowrap;} #mainVisual .visualRoll .swiper-slide{width:100%; font-size:0; line-height:0; position: relative; overflow:hidden; display:inline-block; vertical-align: top; border-radius:0 0 0 17rem;} #mainVisual .visualRoll .swiper-slide>img{width:100%; max-width:none; height:96rem; object-fit: cover; object-position: center center; transform:scale(1);} #mainVisual .vTxtArea{width:100%; height:100%; padding:0 0; text-align: left; position: absolute; left:0; top:0; z-index:5; display: flex; align-items: center; justify-content: center;} #mainVisual .vTxt{width:100%; max-width:146rem; margin:0 auto; padding:0 2rem; position: relative;} #mainVisual .vTxt .ii{font-size:0; line-height:0; color: #fff; top:50px; display:block; opacity: 0; position: relative; word-break:keep-all; word-wrap:break-word; white-space: normal;} #mainVisual .vTxt .i01{transition-delay: 0.7s;} #mainVisual .vTxt .i02{transition-delay: 0.75s;} #mainVisual .vTxt .i03{transition-delay: 0.8s;} #mainVisual .vTxt .i04{transition-delay: 0.85s;} #mainVisual .vTxt .i05{transition-delay: 0.9s;} #mainVisual .vTxt .i06{transition-delay: 0.95s;} #mainVisual .vTxt .i07{transition-delay: 1s;} #mainVisual .vTxt .ii.logo{margin-top:7rem; display: flex; justify-content: center;} #mainVisual .vTxt .ii.logo img{height:2.8rem; display:block;} #mainVisual .vTxt .ii.cate{font-weight: 500; font-size:3rem; line-height:1; color: rgba(255,255,255,0.8);} #mainVisual .vTxt .ii.title{margin-top:2rem; font-weight: 800; font-size:7rem; line-height:1.2;} #mainVisual .vTxt .ii.text{margin-top:3rem; font-weight: 600; font-size:3rem; line-height:1;} #mainVisual .vTxt .ii.btn{margin-top:5rem; display: flex; justify-content: center;} #mainVisual .vTxt .top{display: flex; gap:4rem;} #mainVisual .vTxt .top>li{width:calc((100% - 12rem) / 4); background-color: rgba(23,42,69,0.5); padding:3rem 4rem 2rem; border-radius:0.5rem 2rem;} #mainVisual .vTxt .top>li p{width:11rem; height:3rem; background-color: var(--point2); font-weight: bold; font-size:2rem; line-height:1; color: #fff; text-align: center; border-radius:0.5rem 1rem; display: flex; align-items: center; justify-content: center;} #mainVisual .vTxt .top>li div{margin-top:2rem; padding-bottom:8.5rem; font-weight: 500; font-size:2.4rem; line-height:1.3; color: #fff; text-align: left;} #mainVisual .vTxt .top>li span{position: absolute; right:2rem; bottom:2rem;} #mainVisual .vTxt .top>li img{height:10rem; display:block;} #mainVisual .top-swiper{} #mainVisual .top-swiper .swiper-wrapper{white-space: nowrap;}/* transition:none !important; */ #mainVisual .top-swiper .swiper-slide{flex:1; width:32rem; min-width:32rem; min-height:31rem; background-color: rgba(23,42,69,0.5); padding:3rem 4rem 2rem; border-radius:0.5rem 2rem;} #mainVisual .top-swiper .swiper-slide + .swiper-slide{margin-left:4rem;} #mainVisual .top-swiper .swiper-slide p{width:11rem; height:3rem; background-color: var(--point2); font-weight: bold; font-size:2rem; line-height:1; color: #fff; text-align: center; border-radius:0.5rem 1rem; display: flex; align-items: center; justify-content: center;} #mainVisual .top-swiper .swiper-slide div{margin-top:2rem; padding-bottom:8.5rem; font-weight: 500; font-size:2.4rem; line-height:1.3; color: #fff; text-align: left;} #mainVisual .top-swiper .swiper-slide span{position: absolute; right:2rem; bottom:2rem;} #mainVisual .top-swiper .swiper-slide img{height:10rem; display:block;} #mainVisual .swiper-pagination-progressbar{width:100%; height:0.8rem; background-color:#f8f8f8; position: absolute; left:0; top:auto; bottom:0; border-radius:99px; z-index:6 !important; overflow: hidden;} #mainVisual .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{width: 100%; height: 100%; background-color:var(--point2); border-radius:99px; position: absolute; left: 0; top: 0; transform-origin: left top;} /* #mainVisual .swiper-pagination-area{width:100%; text-align: left; position: absolute; left:0; bottom:15rem; z-index:7;} #mainVisual .swiper-pagination{width:100%; max-width:130rem; margin:0 auto; padding:0 3rem; text-align: left; position: relative;} */ #mainVisual .swiper-pagination{bottom:15rem;} .swiper-pagination{z-index:7 !important;} .swiper-pagination-bullet{width:16px !important; height:16px !important; margin:0 !important; background-color:#b4b8b7 !important; border-radius:99px !important; display: inline-block; vertical-align: top; cursor: pointer; opacity: 1 !important;} .swiper-pagination-bullet+.swiper-pagination-bullet{margin-left:1.4rem !important;} .swiper-pagination-bullet.swiper-pagination-bullet-active{width:54px !important; background-color: var(--point2) !important;} .swiper-button{width:7rem !important; height:7.1rem !important; background: url('/images/main/btn-swiper_prev.png') no-repeat center center / cover !important; cursor: pointer;} .swiper-button::after{display:none !important;} .swiper-button-prev{} .swiper-button-next{background-image: url('/images/main/btn-swiper_next.png') !important} .swiper-button-prev:hover{background-image: url('/images/main/btn-swiper_prev_on.png') !important} .swiper-button-next:hover{background-image: url('/images/main/btn-swiper_next_on.png') !important} /* #mainVisual .swiper-controll{display: flex; justify-content: end; gap:1rem; position: absolute; right:4rem; bottom:4rem; z-index:6;} #mainVisual .swiper-numbering{width:11.5rem; height:5.5rem; background-color: #fff; font-weight: 300; font-size:2rem; line-height:1.3; color: #333; text-align: center; border-radius:99px; display: flex; align-items: center; justify-content: center; gap:0.5rem;} #mainVisual .swiper-numbering>span{} #mainVisual .swiper-numbering>strong{font-weight: 600;} #mainVisual .swiper-numbering>i{font-style: normal; font-size:1.3rem; transform:rotate(15deg);} */ #mainVisual .swiper-slide-active .vTxt .ii{top:0px; opacity:1;} /*#mainVisual .visualRoll .swiper-slide.swiper-slide-active>img{transform:scale(1.1);}*/ /* */ #mainCont01{margin-top:-15rem; padding-top:30rem; background-color: #f5f7f9; position: relative;} #mainCont01 .inConts{display: flex; align-items: center; justify-content: space-between;} #mainCont01 .mainCont01-left{width:50%;} #mainCont01 .mainCont01-right{display: flex; justify-content: end; position: relative;} #mainCont01 .swiper-phone{width:51rem; height:66.8rem; padding:16.8rem 6rem 0 4rem; background: url('/images/main/phone01.png') no-repeat center top / cover; overflow: hidden; position: relative;} #mainCont01 .swiper-phone .logo{display: flex; justify-content: center; position: absolute; left:4rem; right:6rem; top:5.8rem; z-index:5;} #mainCont01 .swiper-phone .logo img{height:6.6rem; display:block;} #mainCont01 .swiper-container{width:100%; overflow: hidden; position: relative;} #mainCont01 .swiper-wrapper{background-color: transparent !important;} #mainCont01 .swiper-slide{width:100%; padding:0 3rem; font-size:0; line-height:0; position: relative; display:inline-block; vertical-align: top;} #mainCont01 .swiper-slide .title{font-weight: 800; font-size:4.5rem; line-height:1.3; color: #222;} #mainCont01 .swiper-slide .text{margin-top:1.5rem; font-size:2.2rem; line-height:1.4; color: #666;} #mainCont01 .swiper-slide .icon{height:16rem; margin-top:1.2rem; display: flex; align-items: start; justify-content: end;} #mainCont01 .swiper-slide .icon img{height:11rem; display:block;} #mainCont01 .swiper-slide .icon img[src*="m01_01"]{height:9.8rem;} #mainCont01 .swiper-slide>a{width:100%; height:6rem; background-color: var(--point2); font-weight: bold; font-size:2rem; line-height:1; color: #fff; text-align: center; display: flex; align-items: center; justify-content: center; border-radius:1rem;} #mainCont01 .swiper-pagination{width:100%; margin-top:7rem; text-align: left; position: relative;} #mainCont01 .swiper-button{margin-top:-3.5rem; position: absolute; top:50%;} #mainCont01 .swiper-button-prev{left:-8.5rem;} #mainCont01 .swiper-button-next{right:-4.5rem;} /* */ #mainCont02{padding:15rem 0; position: relative;} #mainCont02 .roll-number{margin-top:5rem; display: flex; justify-content: center; gap:0 10rem;} #mainCont02 .roll-number .roll-number-re{display: flex; align-items: center; gap:1.5rem 3.5rem; position: relative;} #mainCont02 .roll-number .roll-number-re>dt{font-weight: 800; font-size:8rem; line-height:1; color: var(--point2); display: flex; align-items: center;} #mainCont02 .roll-number .roll-number-re>dd{font-size:2.2rem; line-height:3rem; color: #666;} #mainCont02 .roll-number .roll-number-re>dd strong{font-weight: bold; color: #222;} #mainCont02 .roll-number .roll-number-re + .roll-number-re:before{content:""; width:1px; height:7rem; margin-top:-3.5rem; background-color:#dfdfdf; position:absolute; left:calc(-5rem + 1px); top:50%;} #mainCont02 .m2-swiper{margin-top:5.5rem;} #mainCont02 .m2-swiper .swiper-wrapper{} #mainCont02 .m2-swiper .swiper-slide{width:34rem; min-width:34rem; /*min-height:34rem;*/ height: auto; padding:3rem 2rem; background-color: #fff; border:1px solid #eee; border-radius:3rem; box-shadow:2rem 2rem 3rem rgba(0,0,0,0.15); transform: translateY(0); position: relative; overflow: hidden; transition: all .3s ease-out; } #mainCont02 .m2-swiper .swiper-slide:after{content: ""; width: 15.5rem; height:15.4rem; background: url('../../img/b_m02_03.png') no-repeat center center / cover; display: inline-block; position:absolute; right:-2rem; bottom:-5rem; box-sizing: border-box; opacity: 0;} #mainCont02 .m2-swiper .swiper-slide.i01:after{width: 10.5rem; height:10.3rem; background-image: url('../../img/b_m02_01.png'); right:1rem; bottom:-0.7rem;} #mainCont02 .m2-swiper .swiper-slide.i02:after{width: 13.4rem; height:12.4rem; background-image: url('../../img/b_m02_02.png'); right:2rem; bottom:-3rem;} #mainCont02 .m2-swiper .swiper-slide.i04:after{width: 13.6rem; height:11.6rem; background-image: url('../../img/b_m02_04.png'); right:1rem; bottom:-1.8rem;} #mainCont02 .m2-swiper .swiper-slide + .swiper-slide{margin-left:2rem;} #mainCont02 .m2-swiper .swiper-slide p{padding-bottom:2.4rem; border-bottom:1px solid #eee; font-weight: bold; font-size:3rem; line-height:1.3; color: #222;} #mainCont02 .m2-swiper .swiper-slide p>span{font-size:2rem; display:block;} #mainCont02 .m2-swiper .swiper-slide ul{margin-top:2.4rem;} #mainCont02 .m2-swiper .swiper-slide ul>li{padding-left:1rem; font-size:1.8rem; line-height:2.8rem; color: #666; position: relative;} #mainCont02 .m2-swiper .swiper-slide ul>li:before{content: "·"; position:absolute; left: 0; top:0;} #wrap[data-device="pc"] #mainCont02 .m2-swiper .swiper-slide:hover{background-color: var(--point2); border-color: var(--point2); box-shadow:0 5rem 5rem rgba(0,0,0,0.2);} #wrap[data-device="pc"] #mainCont02 .m2-swiper .swiper-slide:hover:after{opacity: 1;} #wrap[data-device="pc"] #mainCont02 .m2-swiper .swiper-slide:hover p{border-bottom-color:#7da8e2;} #wrap[data-device="pc"] #mainCont02 .m2-swiper .swiper-slide:hover p, #wrap[data-device="pc"] #mainCont02 .m2-swiper .swiper-slide:hover ul>li{color: #fff;} /* */ #mainCont03{height:100vh; padding:0; background-color: #f4f6f8; position: relative;} #mainCont03 .people{content: ""; width: 100%; height: 100%; background: url('/images/main/people.jpg') no-repeat center center / cover; background-attachment: fixed; position:absolute; left: 0; top:0px;} #mainCont03 .people-m{margin-top:7rem; display:none; box-shadow:2rem 2rem 3rem rgba(0,0,0,0.15); border-radius:3rem; overflow: hidden;} #mainCont03 .inConts{display: flex; align-items: start; justify-content: end; z-index:2;} #mainCont03 .inConts .m-title{position: absolute; left:3rem; top:50vh; transform: translateY(-50%);} #mainCont03 .inConts .m-title.new{opacity: 0; margin-top:3rem;} #mainCont03 .inConts .m-title a.m-btn{margin-top:5rem;} #mainCont03 .inConts .member-list>li>.conts, #mainCont03 .inConts .member-list>li>.conts:before, #mainCont03 .inConts .member-list>li>.conts:after, #mainCont03 .inConts .member-list>li>.conts ul{transition: all .3s;} #mainCont03 .inConts .member-list{width:100%; max-width:71rem; padding:15rem 0; display: flex; flex-flow: row wrap; align-items: start; justify-content: space-between; gap:10rem 5rem; position: relative; top:50px; opacity: 0;}/* 11.6279% */ #mainCont03 .inConts .member-list>li{width:calc((100% - 5rem) / 2); position: relative; box-shadow:2rem 2rem 3rem rgba(0,0,0,0.15); border-radius:3rem; overflow: hidden;} #mainCont03 .inConts .member-list>li>img{width:100%; min-width:33rem; display:block;} #mainCont03 .inConts .member-list>li>p{position: absolute; left:2rem; top:25%;} #mainCont03 .inConts .member-list>li>p>strong{padding-bottom:3.4rem; font-weight: bold; font-size:3.4rem; line-height:1; color: #000; display:block; position: relative;} #mainCont03 .inConts .member-list>li>p>strong:before{content: ""; width: 4rem; height: 0.3rem; background-color:var(--point2); position:absolute; left: 0; top:5.1rem;} #mainCont03 .inConts .member-list>li>p>span{font-weight: 500; font-size:2rem; line-height:3rem; color: #333;} #mainCont03 .inConts .member-list>li>p>i{font-style: normal; font-weight: 500; font-size:1.4rem; line-height:1; color: #808080; display:block;} #mainCont03 .inConts .member-list>li>.conts{width:100%; min-height:13.2rem; padding:7.7rem 2rem 3rem; position: absolute; left:0; bottom:0; transform: translateY(100%); display: flex; align-items: center;} #mainCont03 .inConts .member-list>li>.conts:before, #mainCont03 .inConts .member-list>li>.conts:after{content: ""; width: 100%; height:100%; position:absolute; left: 0; top:0; transform: translateY(50px);} #mainCont03 .inConts .member-list>li>.conts:before{background: url('../../img/bg_shape1.png') no-repeat center top; transition-delay: 0.1s;} #mainCont03 .inConts .member-list>li>.conts:after{background: url('../../img/bg_shape2.png') no-repeat center top; transition-delay: 0.2s;} #mainCont03 .inConts .member-list>li>.conts ul{position: relative; z-index:3; transform: translateY(50px); transition-delay: 0.2s;} #mainCont03 .inConts .member-list>li>.conts ul>li{padding-left:1rem; font-weight: 500; font-size:2rem; line-height:3rem; color: #fff; position: relative;} #mainCont03 .inConts .member-list>li>.conts ul>li:before{content: "·"; position:absolute; left: 0; top:0;} #mainCont03 .inConts .member-list>li:nth-child(even)>p{left:auto; right:2rem; text-align: right;} #mainCont03 .inConts .member-list>li:nth-child(even)>p>strong:before{left: auto; right:0;} #mainCont03 .inConts .member-list>li:nth-child(2){margin-top:17rem;} #mainCont03 .inConts .member-list>li:nth-child(odd):not(:first-child){margin-top:-17rem;} #mainCont03 .inConts .member-list>li:hover>.conts{transform: translateY(0%);} #mainCont03 .inConts .member-list>li:hover>.conts:before, #mainCont03 .inConts .member-list>li:hover>.conts:after, #mainCont03 .inConts .member-list>li:hover>.conts ul{transform: translateY(0);} #mainCont03 .m3-swiper{width:100%; margin-top:7rem; padding:0; display:none;} #mainCont03 .m3-swiper .swiper-slide{width:38rem; min-width:38rem; position: relative; box-shadow:2rem 2rem 3rem rgba(0,0,0,0.15); border-radius:3rem; overflow: hidden;} #mainCont03 .m3-swiper .swiper-slide + .swiper-slide{margin-left:7rem;} #mainCont03 .m3-swiper .swiper-slide>img{width:100%; min-width:33rem; display:block;} #mainCont03 .m3-swiper .swiper-slide>p{position: absolute; left:2rem; top:25%;} #mainCont03 .m3-swiper .swiper-slide>p>strong{padding-bottom:3.4rem; font-weight: bold; font-size:3.4rem; line-height:1; color: #000; display:block; position: relative;} #mainCont03 .m3-swiper .swiper-slide>p>strong:before{content: ""; width: 4rem; height: 0.3rem; background-color:var(--point2); position:absolute; left: 0; top:5.1rem;} #mainCont03 .m3-swiper .swiper-slide>p>span{font-weight: 500; font-size:2rem; line-height:3rem; color: #333;} #mainCont03 .m3-swiper .swiper-slide>p>i{font-style: normal; font-weight: 500; font-size:1.4rem; line-height:1; color: #808080; display:block;} #mainCont03 .m3-swiper .swiper-slide>.conts{width:100%; min-height:13.2rem; padding:7.7rem 2rem 3rem; position: absolute; left:0; bottom:0; transform: translateY(100%); display: flex; align-items: center;} #mainCont03 .m3-swiper .swiper-slide>.conts:before, #mainCont03 .m3-swiper .swiper-slide>.conts:after{content: ""; width: 100%; height:100%; position:absolute; left: 0; top:0; transform: translateY(50px);} #mainCont03 .m3-swiper .swiper-slide>.conts:before{background: url('../../img/bg_shape1.png') no-repeat center top; transition-delay: 0.1s;} #mainCont03 .m3-swiper .swiper-slide>.conts:after{background: url('../../img/bg_shape2.png') no-repeat center top; transition-delay: 0.2s;} #mainCont03 .m3-swiper .swiper-slide>.conts ul{position: relative; z-index:3; transform: translateY(50px); transition-delay: 0.2s;} #mainCont03 .m3-swiper .swiper-slide>.conts ul>li{padding-left:1rem; font-weight: 500; font-size:2rem; line-height:3rem; color: #fff; position: relative;} #mainCont03 .m3-swiper .swiper-slide>.conts ul>li:before{content: "·"; position:absolute; left: 0; top:0;} #mainCont03 .m3-swiper .swiper-slide:nth-child(even)>p{left:auto; right:2rem; text-align: right;} #mainCont03 .m3-swiper .swiper-slide:nth-child(even)>p>strong:before{left: auto; right:0;} /* */ .main-bottom{padding:15rem 0; background-color: #fff; background-image: url('../../img/a_m04_bg.jpg'), url('../../img/a_m05_bg.jpg'); background-repeat: no-repeat; background-position: center top, center bottom;} #mainCont04{} #mainCont04 .mainCont04-top{display: flex; flex-flow: row wrap; align-items: end; justify-content: space-between; gap:3rem;} #mainCont04 .m04-img{margin-top:6rem;} #mainCont04 .m04-img img{width: 100%; height:36rem; object-fit: cover; display:block; border-radius:11rem 0 11rem 0;} /* */ #mainCont05{padding-top:15rem;} #mainCont05 .inConts{display: flex; align-items: start; justify-content: space-between;} #mainCont05 .mainCont05-left{width:38%; padding-top:15rem;} #mainCont05 .hashtag{margin-top:1rem;} #mainCont05 .hashtag>dt{font-size:2.2rem; line-height:1.3; color: #666;} #mainCont05 .hashtag>dd{margin-top:1.5rem; display: flex; flex-flow: row wrap; gap:0.8rem 0.6rem;} #mainCont05 .hashtag>dd>p{height:4rem; padding:0 1.5rem; background-color: #222; font-weight: 600; font-size:1.7rem; line-height:1; color: #fff; display: flex; align-items: center; justify-content: center; border-radius:2.2rem;} #mainCont05 .mainCont05-right{padding-right:2.5rem; display: flex; justify-content: end; position: relative;} .phone-form{width:45rem; padding:3rem 3rem 4.5rem; background-color: #fff; border:2rem solid #f4f6f8; border-radius:8rem; box-shadow:2rem 3rem 2rem rgba(0,0,0,0.15)} .phone-form .logo{padding-bottom:2.2rem; border-bottom:1px solid #eee; display: flex; align-items: start; justify-content: center;} .phone-form .logo img{height:6.6rem; display:block;} .phone-form .phone-fild{margin-top:4.3rem; display: flex; flex-flow: column nowrap; gap:1rem;} .phone-form .tit-line{padding-bottom:1rem; font-weight: 600; font-size:2.2rem; line-height:1; color: #000; display: flex; align-items: center; gap:1rem;} .phone-form .tit-line:before{content: ""; width: 0.8rem; height: 2.8rem; background-color: var(--point2); border-radius:0.3rem;} .phone-form input[type=button], .phone-form input[type=text], .phone-form input[type=password], .phone-form input[type=file], .phone-form input[type=submit], .phone-form select, .phone-form textarea{width:100%; height:5.4rem; padding:0 1rem; background-color:#f8f8f8; border:1px solid #dedede; font-weight: 400; font-size:1.8rem; line-height:1.5; color:#999; display: flex; align-items: center; border-radius:1rem; outline:none; select-dummy: expression(this.hideFocus=true);} .phone-form select{padding-right:4rem; background:#f8f8f8 url('/images/bg_select.svg') no-repeat calc(100% - 1rem) center; background-size:1.5rem; -webkit-appearance: none; -moz-appearance: none; appearance: none;} .phone-form select::-ms-expand{display:none;} .phone-form textarea{height:9.5rem; padding:1rem; line-height:1.55;} .phone-form input[type=text]:valid, .phone-form input[type=file]:valid, .phone-form select:required:valid{color: #111 !important;} .phone-form *::-webkit-input-placeholder, .phone-form *::placeholder{color: #999;} .phone-form .title{font-weight: 500; font-size:1.8rem; line-height:1; color: #333;} .phone-form .title>span{color: var(--point); display:inline-block; vertical-align: top; position: relative; top:-0.3rem;} .phone-form .security-code{margin-top:0.8rem; background-color:#f8f8f8; border:1px solid #dedede; font-weight: 300; font-size:1.8rem; line-height:1.5; color:#999; display: flex; border-radius:1rem; overflow: hidden;} .phone-form .security-code>p{width:10.4rem; background-color:var(--point2); font-weight: bold; color:#fff; display: flex; align-items: center; justify-content: center;} .phone-form .security-code input[type=text]{flex:1; border:none; border-radius:0;} .phone-form .phone-fild-check{margin-top:0.5rem; display: flex; align-items: center; justify-content: space-between;} .phone-form .phone-fild-check>a{font-weight: 400; font-size:1.6rem; line-height:1.3; color:#666;} .phone-form .phone-fild-check>a>span{font-weight: bold; color:#404040;} .phone-form .check-new input[type=checkbox]+label, .phone-form .check-new input[type=radio]+label{font-size:1.6rem; line-height:1.8rem;} .phone-form .check-new input[type=checkbox]+label>.graphic, .phone-form .check-new input[type=checkbox]+label>.graphic:before{width: 1.8rem; height: 1.8rem; border-color:#999; border-radius:0.3rem;} .phone-form .check-new input[type=checkbox]+label>.graphic:before{} .phone-form .check-new input[type=checkbox]:checked+label>.graphic{border-color: #222 !important;} .phone-form .m-btn{width:100%; margin-top:1.5rem;} .security-code:focus-within, .phone-form select:focus, .phone-form textarea:focus, .phone-form input:focus{background-color: #fff; border-color: #222 !important; font-weight: 500; color: #222; box-shadow:0.3rem 0.3rem 0.7rem rgba(8,8,8,0.07)} /*[e] Main Style */ /*[s] Sub Style */ /* */ .my-table{width:100%; border-top:1px solid #333; overflow:hidden; position: relative;} .my-table table{width:calc(100% + 1px); border-spacing:0; border-collapse: separate; table-layout : fixed; position: relative;} .my-table table:before{content:""; width:1px; height:100%; background-color: #fff; position: absolute; right:0; top:0;} .my-table>table th, .my-table>table td{height:5rem; padding:1.4rem 2rem; background-color: #fff; border-right:1px solid var(--bor_c); border-bottom:1px solid var(--bor_c); font-size:1.7rem; line-height:1.3; color: #555; text-align:left; vertical-align: middle; border-collapse:collapse; empty-cells:show; box-sizing: border-box; word-break:keep-all; word-wrap:break-word; position: relative;} .my-table>table>thead>tr>th{width:40%; text-align: center;} .my-table>table>thead>tr>th:nth-of-type(2){width:60%;} .my-table.five>table>thead>tr>th{width:auto !important;} .my-table.five>table>thead>tr>th:nth-of-type(2){width:auto !important;} .my-table>table :is(thead>tr>th, tr.th>*, td.th){height:7rem; background-color: #f4f6f8; font-weight: 500; color: #000;} .my-table>table :is(tr.th>*, td.th){height:5rem;} .my-table>table tr.bold>*{font-weight: bold; color: #000 !important;} .my-table>table .medium{font-weight: 500; color: #000 !important;} .my-table>table tr.disabled>*{color: #999 !important;} .my-table>table>tbody>tr>th{background-color: #f4f6f8;} .my-table>table :is(tfoot>tr>td, tr.tfoot>th){height:7rem;background-color: var(--table_th); border-top:1px solid #000; font-weight: bold; color: #000 !important;} .my-table>table tfoot>tr>td{font-size:2rem;} .my-table>table .btns{width:7rem; height:2.8rem; background-color:#fff; border:1px solid var(--point); font-weight: 600; font-size:1.4rem; line-height:1; color: var(--point); text-align: center; display: inline-flex; align-items: center; justify-content: center; border-radius:0.5rem;} .my-table>table input[type=button], .my-table>table input[type=text], .my-table>table input[type=password], .my-table>table input[type=file], .my-table>table input[type=submit], .my-table>table select, .my-table>table textarea, .my-table>table .btns{width:100% !important; height:4rem;} .my-table .flex-btn{display: inline-flex; flex-flow: row wrap; align-items: center; justify-content: space-between; gap:1rem; position: relative;} .my-table .flex-btn.block{display: flex;} .my-table .flex-btn input{flex:1; width:auto;} .my-table .flex-btn a.btn{flex:1; height:2.8rem; padding:0 1.4rem; background-color:var(--point); font-weight: 600; font-size:1.4rem; line-height:0.8; color: #fff; text-align: center; display: inline-flex; align-items: center; justify-content: center; border-radius:0.5rem; cursor: default; gap:0.5rem;} .my-table .flex-btn img[src*="icon_calc3"]{width:1.4rem;} .my-table .flex-btn a[href].btn{cursor: pointer;} .my-table .flex-btn a.btn.del{background-color:#000;} .my-table .flex-btn .bubble{position: relative;} .my-table .flex-btn .bubble .pop-bubble{padding:0 1rem; background-color: #fff; border:1px solid #999; font-weight: 300; font-size:1.5rem; line-height:3rem; color: #000; position:absolute; left: 50%; bottom:calc(100% + 15px); border-radius:1rem; white-space: nowrap; z-index:2; transform: translateX(-50%); opacity: 0; display:none; animation:bubble-motion .3s cubic-bezier(.25,.46,.45,.94) both 0s} .my-table .flex-btn .bubble .pop-bubble:before{content: ""; width: 13px; height: 8px; margin-left:-7px; background: url('/images/bg_bubble.png') no-repeat left top; position:absolute; left: 50%; top:100%; box-sizing: border-box;} .my-table .flex-btn .bubble:hover .pop-bubble{display:block;} @keyframes bubble-motion{ 0% {bottom:calc(100% + 15px); opacity: 0;} 100% {bottom:calc(100% + 10px); opacity: 1;} } .my-table .payment{width:calc(60% - 1px); padding:2rem; background-color: #fff; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; position: absolute; right:0; top:7rem; bottom:0;} .my-table .payment>dl{text-align: center;} .my-table .payment>dl>dt{font-size:2rem; line-height:1.5; color: #000;} .my-table .payment>dl>dd{margin-top:2rem;} .my-table .payment>dl>dd a{width:22rem; height:6rem; margin:0; background-color:var(--point); font-weight: 600; font-size:2rem; line-height:1.3; color:#fff; text-align: center; overflow:hidden; display: inline-flex; align-items: center; justify-content: center; gap: 1rem; border-radius:99px; cursor: pointer; position: relative;} .my-table .payment>dl>dd a img{width:2.2rem;} .my-table .arr-l{position: absolute; left:15px; top:50px;} .my-table .arr-r{position: absolute; right:15px; top:50px;} .my-table .arr-c{margin-left:-12px; position: absolute; left:50%; bottom:-28px;} .my-table.active td.tar{display:table-cell;} .my-table.active .payment{display:none;} .my-table.tac>table th, .my-table.tac>table td{padding-left:0; padding-right:0;text-align: center;} .my-table.tac>table td.tar{padding-left:2rem; padding-right:2rem;} .my-table>table .btn-payment{min-width:10rem; padding:0.8rem; background-color: #fff; border:1px solid #ccc; font-weight: 500; font-size:1.6rem; line-height:1; color: #999; display: inline-flex; align-items: center; justify-content: center; gap:0 0.5rem; border-radius:0.3rem;} .my-table>table .btn-payment img{width:2rem; filter: brightness(0) saturate(100%) invert(60%) sepia(23%) saturate(1115%) hue-rotate(176deg) brightness(92%) contrast(89%);} .my-table>table td.in-table{padding:0; border-bottom:none;} .my-table>table td.in-table .in-table-re>*{background-color: #f8f8f8; position: static;} .my-table>table td.in-table .in-table-re>.medium{padding-left:3.5rem;} .pro-top{padding:7.5rem 0 6.5rem;position: relative;} .pro-top:before, .pro-top:after{content: ""; height: 100%; background-color: #e5f5ff; position:absolute; top:0px;} .pro-top:before{width:24.4792vw; left: 0; border-radius:0 9rem 9rem 0;} .pro-top:after{width:55.7292vw; background-color: #f8f8f8; right: 0; border-radius:9rem 0 0 9rem;} .pro-top .inConts{display: flex; flex-flow: row wrap; align-items: center; gap:0 6rem; z-index:2;} .pro-top p>img{width:23.4rem;} .pro-top p>img[src*="bizsucc"]{width:23.9rem;} .pro-top p>img[src*="calc"]{width:22rem;} .pro-top dl{flex:1; color: #000;} .pro-top dl>dt{font-weight: 800; font-size:4rem; line-height:1.3;} .pro-top dl>dd{margin-top:1.5rem; font-size:2.2rem; line-height:1.4;} .pro-recommend{margin-top:4rem; display: flex; flex-flow: row wrap; justify-content: center; gap:0 2.5758%;} .pro-recommend>li{width:calc((100% - 7.7274%) / 4); min-height:30rem; padding:4.9rem 2.9rem 2.9rem; background-color: #fff; display: flex; flex-flow: column nowrap; justify-content: space-between; border-radius:1rem; box-shadow:3rem 0 5rem rgba(0,0,0,0.2);} .pro-recommend>li dl{font-size:2rem;} .pro-recommend>li dl>dt{font-weight: bold; line-height:1; color: #333;} .pro-recommend>li dl>dd{margin-top:1.5rem; line-height:1.4; color: #000;} .pro-recommend>li p{display: flex; justify-content: end;} .pro-recommend>li img[src*="about02_01"]{width:6.8rem;} .pro-recommend>li img[src*="about02_02"]{width:6.6rem;} .pro-recommend>li img[src*="about02_03"]{width:6.7rem;} .pro-recommend>li img[src*="about02_04"]{width:6.5rem;} :root{ --cw: 10rem; } .circle-line{display: flex; flex-flow: row wrap; align-items: start;} .circle-line>.circle-line_re{flex:1; padding:0 1rem; display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; position: relative;} .circle-line>.circle-line_re:before{content: ""; width:100%; max-width:9.2rem; height:1.4rem; background:url('/images/arr_jum.png') no-repeat right center/cover; position: absolute; left:calc(100% - 4.5rem); top:calc(5rem - 0.7rem);} .circle-line>.circle-line_re:last-child:before{display:none;} .circle-line .circle-line_re .circle, .circle-line .circle-line_re .circle>.step, .circle-line .circle-line_re .circle>.line, .circle-line .circle-line_re .circle>.line .bar{border-radius:999px;} .circle-line .circle-line_re .circle{width:var(--cw); height:var(--cw); padding:0.5rem; position: relative; z-index:2; } .circle-line .circle-line_re:last-child .circle{padding:0;} .circle-line .circle-line_re .circle>.line{width:100%; height:100%; background-color:#f4f6f8; position: absolute; left:0; top:0; overflow:hidden;} .circle-line .circle-line_re .circle>.line.left{clip: rect(0, calc(var(--cw) / 2), var(--cw), 0);} .circle-line .circle-line_re .circle>.line.right{clip: rect(0, var(--cw), var(--cw), calc(var(--cw) / 2));} .circle-line .circle-line_re .circle>.line .bar{width:100%; height:100%; background-color:var(--point2); display:block; position: absolute; left: 0; top:0;} .circle-line .circle-line_re .circle>.line.left .bar{clip: rect(0, var(--cw), var(--cw), calc(var(--cw) / 2));} .circle-line .circle-line_re .circle>.line.right .bar{clip: rect(0, calc(var(--cw) / 2), var(--cw), 0);} .circle-line .circle-line_re .circle>.step{width:100%; height:100%; background-color: #fff; font-weight: 500; font-size:1.5rem; line-height:1.3; color: var(--point2); text-align: center; display: flex; flex-wrap: wrap; flex-direction: row; align-content: center; justify-content: center; position: relative; z-index:4;} .circle-line .circle-line_re:last-child .circle>.step{background-color: var(--point2); border-color:var(--point2); color: #fff;} .circle-line .circle-line_re .circle>.line .bar{ transition-property: transform; transition-duration: var(--dur, 700ms); transition-timing-function: linear; will-change: transform; } .circle-line .circle-line_re .title{margin-top:2.5rem; font-weight: 600; font-size:2rem; line-height:1.3; color: #000; text-align: center;} .circle-line .circle-line_re .jum{margin-top:1rem;} .calc-text{margin-top:5rem; font-weight: 500; font-size:3.4rem; line-height:1.3; color: #000; text-align: center;} .calc-text>dd{font-weight: bold; font-size:4rem; color:var(--point);} #legal-visual{padding:16rem 0 10rem; background:url('/images/img_sVisual_04.jpg') no-repeat center center/cover; display: flex; flex-flow: row wrap; align-items: center; justify-content: center;} #legal-visual>.inConts{display: flex; flex-flow: row wrap; align-items:center; justify-content: space-between;} #legal-visual .visual-left{flex:1;} #legal-visual .visual-left .title{font-weight: bold; font-size:5.4rem; line-height:1.3; color: #fff;} #legal-visual .visual-left .title>span{color: #e8bb4f;} #legal-visual .visual-left .tel{margin-top:4.5rem;} #legal-visual .visual-left .tel>dt{display: flex; flex-flow: row wrap; align-items: center; gap:0 0.8rem;} #legal-visual .visual-left .tel>dt img{display:block;} #legal-visual .visual-left .tel>dt>figure{} #legal-visual .visual-left .tel>dt>span{font-weight: 500; font-size:2rem; line-height:1.3; color: #fff;} #legal-visual .visual-left .tel>dd{margin-top:1.5rem;} #legal-visual .visual-left .tel>dd>strong{font-weight: 800; font-size:7.4rem; line-height:1; color: var(--point2);} #legal-visual .visual-left .tel>dd>._star>li{color: rgba(255,255,255,0.5);} #legal-visual .visual-question{--width_in:48rem; width:var(--width_in); background-color: #fff; border-radius:3rem; overflow: hidden;} #legal-visual .visual-question .visual-question-in{display: flex; transition: all .5s ease-out;} #legal-visual .visual-question.move-0 .visual-question-in{transform: translateX(calc(-1 * var(--width_in) * 0));} #legal-visual .visual-question.move-1 .visual-question-in{transform: translateX(calc(-1 * var(--width_in) * 1));} #legal-visual .visual-question.move-2 .visual-question-in{transform: translateX(calc(-1 * var(--width_in) * 2));} #legal-visual .visual-question.move-3 .visual-question-in{transform: translateX(calc(-1 * var(--width_in) * 3));} #legal-visual .visual-question.move-4 .visual-question-in{transform: translateX(calc(-1 * var(--width_in) * 4));} #legal-visual .visual-question .question-conts{flex:1 0 var(--width_in); padding-top:3rem; display: flex; flex-flow: column nowrap; justify-content: center;} #legal-visual .visual-question .question-conts .step{width:7rem; height:3rem; margin:0 auto; background-color:var(--point2); font-weight: bold; font-size:2rem; line-height:1; color: #fff; text-align: center; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; border-radius:99px;} #legal-visual .visual-question .question-conts .title{margin-top:1.3rem; font-size:3.5rem; line-height:1.1; color: #000; text-align: center;} #legal-visual .visual-question .question-conts .text{margin:1rem 5rem 2rem; padding:1.5rem 2rem; background-color: #f8f8f8; font-size:1.8rem; line-height:1.3; color:var(--point2); text-align: center; border-radius:1rem; position: relative;} #legal-visual .visual-question .question-conts .text:before{content: ""; width: 100%; height: 1px; background-color: #e6e6e6; display: inline-block; position:absolute; left: 0; bottom:-2rem;} #legal-visual .visual-question .question-conts .question-form{flex:1; padding:2rem 5rem 3rem; display: flex; flex-flow: column nowrap;} #legal-visual .visual-question .question-conts .question-form .form-content{flex:1; display: flex; flex-flow: column nowrap;} #legal-visual .visual-question .question-conts .question-form input[type=button], #legal-visual .visual-question .question-conts .question-form input[type=text], #legal-visual .visual-question .question-conts .question-form input[type=password], #legal-visual .visual-question .question-conts .question-form input[type=file], #legal-visual .visual-question .question-conts .question-form input[type=submit], #legal-visual .visual-question .question-conts .question-form select, #legal-visual .visual-question .question-conts .question-form textarea, #legal-visual .visual-question .question-conts .question-form .btns{width:100%; height:4rem; padding:1.5rem 1rem; background-color: #f8f8f8; border-color:#dedede; border-radius:1rem;} #legal-visual .visual-question .question-conts .question-form select{padding:0 3.5rem 0rem 1rem;} #legal-visual .visual-question .question-conts .question-form textarea{height:11rem;} #legal-visual .visual-question .question-conts .question-form input[type=button]:focus, #legal-visual .visual-question .question-conts .question-form input[type=text]:focus, #legal-visual .visual-question .question-conts .question-form input[type=password]:focus, #legal-visual .visual-question .question-conts .question-form input[type=file]:focus, #legal-visual .visual-question .question-conts .question-form input[type=submit]:focus, #legal-visual .visual-question .question-conts .question-form select:focus, #legal-visual .visual-question .question-conts .question-form textarea:focus{background-color: #fff; border-color:#222; box-shadow:0.7rem 0.7rem 0.7rem rgba(8,8,8,0.07);} #legal-visual .visual-question .question-conts .radio-list{} #legal-visual .visual-question .question-conts .radio-list>li{padding:0 0.8rem 0 1.3rem; position: relative; cursor: pointer;} #legal-visual .visual-question .question-conts .radio-list>li+li{border-top:1px solid #e6e6e6;} #legal-visual .visual-question .question-conts .radio-list>li input{position: absolute; left:0; top:0; display:none;} #legal-visual .visual-question .question-conts .radio-list>li label{padding:1.5rem 4.3rem 1.5rem 2.8rem; background:url('/images/icon_check_off.png') no-repeat right center/2.6rem; font-size:2rem; line-height:1.3; color: #333; position: relative; display:block; cursor: pointer;} #legal-visual .visual-question .question-conts .radio-list>li label>p{font-size:1.6rem; line-height:1.3; color: #666;} #legal-visual .visual-question .question-conts .radio-list>li label:before{content: ""; position: absolute; top: 1.5rem; left: 0;} #legal-visual .visual-question .question-conts .radio-list>li:nth-child(1) label:before{content: "가.";} #legal-visual .visual-question .question-conts .radio-list>li:nth-child(2) label:before{content: "나.";} #legal-visual .visual-question .question-conts .radio-list>li:nth-child(3) label:before{content: "다.";} #legal-visual .visual-question .question-conts .radio-list>li:nth-child(4) label:before{content: "라.";} #legal-visual .visual-question .question-conts .radio-list>li:nth-child(5) label:before{content: "마.";} #legal-visual .visual-question .question-conts .radio-list>li:nth-child(6) label:before{content: "바.";} #legal-visual .visual-question .question-conts .radio-list>li:nth-child(7) label:before{content: "사.";} #legal-visual .visual-question .question-conts .radio-list>li:nth-child(8) label:before{content: "아.";} #legal-visual .visual-question .question-conts .radio-list>li:nth-child(9) label:before{content: "자.";} #legal-visual .visual-question .question-conts .radio-list>li:nth-child(10) label:before{content: "차.";} #legal-visual .visual-question .question-conts .radio-list>li:nth-child(11) label:before{content: "카.";} #legal-visual .visual-question .question-conts .radio-list>li:nth-child(12) label:before{content: "타.";} #legal-visual .visual-question .question-conts .radio-list>li:nth-child(13) label:before{content: "파.";} #legal-visual .visual-question .question-conts .radio-list>li:nth-child(14) label:before{content: "하.";} #legal-visual .visual-question .question-conts .radio-list>li input:checked+label{background-image:url('/images/icon_check_on.png'); font-weight: bold; color:var(--point2);} #legal-visual .visual-question .question-conts .radio-list>li input:checked+label>p{font-weight: normal;} #legal-visual .visual-question .question-conts .gray-box{margin-top:1.5rem; padding:1.5rem 2rem; background-color: #f8f8f8; border-radius:1rem;} #legal-visual .visual-question .question-conts .gray-box>dt{font-size:1.7rem; line-height:1.3; color: #333;} #legal-visual .visual-question .question-conts .gray-box>dd{margin-top:1rem;} #legal-visual .visual-question .question-conts .btn-box{display: flex; overflow: hidden; border-radius:0 0 3rem 3rem;} #legal-visual .visual-question .question-conts .btn-box{} #legal-visual .visual-question .question-conts .btn-box .click{flex:1; height:7rem; background-color:#555; font-weight: 600; font-size:2rem; line-height:1.3; color:#fff; text-align: center; overflow:hidden; display: flex; gap: 0.7rem; align-items: center; justify-content: center; cursor: pointer; position: relative; transition: all .3s ease-out;} #legal-visual .visual-question .question-conts .btn-box .click.point{background-color:var(--point2); border-color:var(--point2); color: #fff !important;} #legal-visual .visual-question .question-conts .flex{display: flex; align-items: center; gap:1rem;} #legal-visual .visual-question .question-conts .flex.last{flex:1;} #legal-visual .visual-question .question-conts .flex.last textarea{height:100% !important;} #legal-visual .visual-question .question-conts .flex.wrap{flex-flow: row wrap;} #legal-visual .visual-question .question-conts .flex + .flex{margin-top:2rem;} #legal-visual .visual-question .question-conts .flex.check{gap:1rem 2rem;} #legal-visual .visual-question .question-conts .flex.three .check-new{width:calc((100% - 4rem) / 3); white-space: nowrap;} #legal-visual .visual-question .question-conts .check-new.flex{width:100% !important;} #legal-visual .visual-question .question-conts .q-list{flex:1; display: flex; flex-flow: column nowrap;} #legal-visual .visual-question .question-conts .q-list>li{flex:1; display: flex; flex-flow: column nowrap; } #legal-visual .visual-question .question-conts .q-list>li+li{margin-top:2rem; padding-top:2.5rem; border-top:1px solid #e6e6e6;} #legal-visual .visual-question .question-conts .q-list>li .q{margin-bottom:1.5rem; padding-left:2.7rem; font-weight: 500; font-size:2rem; line-height:1.3; color: #333; position: relative;} #legal-visual .visual-question .question-conts .q-list>li .q:before{content: "Q."; padding-left:0.4rem; position:absolute; left: 0; top:0px;} #legal-visual .visual-question .question-conts .f-list{display: flex; flex-flow: column nowrap; gap:1rem;} #legal-visual .visual-question .question-conts .f-list>li{display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between;} #legal-visual .visual-question .question-conts .f-list>li label{width:8rem; font-weight: 500; font-size:1.8rem; line-height:1.3; color: #222;} #legal-visual .visual-question .question-conts .f-list>li input, #legal-visual .visual-question .question-conts .f-list>li select{flex:1; width:auto; height:5rem !important;} #legal-visual .visual-question .question-conts .pri-check{margin-top:3rem; padding-top:3rem; border-top:1px solid #e6e6e6; display: flex; align-items: center; justify-content: space-between;} #legal-visual .visual-question .question-conts .pri-check>a{font-weight: 400; font-size:1.6rem; line-height:1.3; color:#666;} #legal-visual .visual-question .question-conts .pri-check>a>span{font-weight: bold; color:#404040;} .legal-conts{padding:14rem 0 15rem;} .legal-conts.gray{background-color: #f4f6f8;} .pg-h3{text-align: center;} .pg-h3>strong{font-weight: bold; font-size:5rem; line-height:1; color: #000; text-align: center;} .pg-h3>p{margin-top:1.5rem; font-size:2.2rem; line-height:3.2rem; color: #555;} .legal-expert{width:100%; position: relative; z-index:2;} .legal-expert .legal-expert-list{padding-bottom:7rem;} .legal-expert .legal-expert-roll{white-space: nowrap;} .legal-expert .legal-expert-roll .swiper-slide{width:28rem; min-width:28rem; margin-right:3rem; height: auto; box-shadow:2rem 2rem 3rem rgba(0,0,0,0.15); position: relative; border-radius:2rem; overflow: hidden;} .legal-expert .legal-expert-roll .swiper-slide:last-child{margin-right:0;} .legal-expert .legal-expert-roll .swiper-slide:after{content: ""; width:100%; height:35%; position:absolute; left: 0; bottom:0px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } .legal-expert .legal-expert-roll .swiper-slide img{width:100%; max-width:none; object-fit: cover; object-position: center center; border-radius:2rem; display:block;} .legal-expert .legal-expert-roll .swiper-slide .name{width:100%; padding:0 1rem 3.5rem 3rem; display: flex; flex-flow: row wrap; align-items: baseline; gap:0 1rem; position: absolute; left:0; bottom:0; z-index:2;} .legal-expert .legal-expert-roll .swiper-slide .name>dt{font-weight: bold; font-size:3rem; line-height:1.3; color: #fff;} .legal-expert .legal-expert-roll .swiper-slide .name>dd{font-weight: 500; font-size:2rem; line-height:1.3; color: var(--point);} .legal-expert .swiper-pagination-progressbar{} .legal-expert .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{width: 100%; height: 100%; background-color:var(--point2); border-radius:99px; position: absolute; left: 0; top: 0; transform-origin: left top;} .swiper-scrollbar.ss.swiper-scrollbar-horizontal{width:100%; height:0.5rem; background-color:#e6e6e6; position: absolute; left:0; top:auto; bottom:0; border-radius:99px; z-index:6 !important; overflow: hidden;} .swiper-scrollbar.ss .swiper-scrollbar-drag{width: 100%; height: 100%; position: relative; background-color: #7f7f7f; border-radius: 10px; left: 0; top: 0;} .legal-expert .swiper-button-box{display: flex; flex-flow: row nowrap; align-items: center; justify-content: end; gap:1rem; position: absolute; right:0; top:-7rem;} .legal-expert .swiper-button{position: static !important;} .legal-expert .swiper-button::after{display:none !important;} .legal-expert .swiper-button-prev{background-image: url('/images/main/btn-swiper_prev2.png') !important} .legal-expert .swiper-button-next{background-image: url('/images/main/btn-swiper_next2.png') !important} .legal-expert .swiper-button-prev:hover{background-image: url('/images/main/btn-swiper_prev_on.png') !important} .legal-expert .swiper-button-next:hover{background-image: url('/images/main/btn-swiper_next_on.png') !important} .legal-business{margin-top:3.5rem; padding-bottom:7rem; position: relative;} .legal-business .legal-business-roll{white-space: nowrap;} .legal-business .legal-business-roll .swiper-slide{width:29.6rem; min-width:29.6rem; margin-right:3rem; height: auto; box-shadow:2rem 2rem 3rem rgba(0,0,0,0.15); position: relative; border-radius:2rem; overflow: hidden;} .legal-business .legal-business-roll .swiper-slide:last-child{margin-right:0;} .legal-business .legal-business-roll .swiper-slide img{width:100%; max-width:none; object-fit: cover; object-position: center center; border-radius:1rem; display:block;} .legal-business .legal-business-roll .swiper-slide ul{width:100%; height:100%; padding:1rem; display: flex; flex-flow: column wrap; justify-content: center; gap:2rem 0; position: absolute; left:0; bottom:0; z-index:2;} .legal-business .legal-business-roll .swiper-slide ul>li{font-weight: bold; font-size:2.5rem; line-height:1; color: #fff; text-align: center;} .legal-business .legal-business-roll .swiper-slide ul>li>p{padding-left:3.2rem; display: inline-flex; position: relative;} .legal-business .legal-business-roll .swiper-slide ul>li>p:before{content: ""; width:2.4rem; height:2rem; background: url('/images/icon_check_org.svg') no-repeat center 0.2rem / cover; display: inline-block; position:absolute; left: 0; top:0px;} .legal-business .legal-business-roll .swiper-slide ul>li>div{font-weight: 500; margin-top:1rem;} .legal-search{} .legal-search-top{width:100%; max-width:500px; margin:3.5rem auto 0;} .legal-search-top .form{background-color: #f8f8f8; border:1px solid #dedede; display: flex; border-radius:99px;} .legal-search-top .form input[type="text"]{flex:1; height:6.8rem; background-color: #f8f8f8; border:none; font-size:2rem; border-radius:99px 0 0 99px;} .legal-search-top .form input[type="submit"]{width:10rem; height:auto; background: url('/images/btn_search.png') no-repeat calc(50% - 0.5rem) center / 2.6rem; border:none; border-radius:0 99px 99px 0;} .legal-search-top .hashtag{margin-top:1.5rem; display: flex; gap:0 2rem;} .legal-search-top .hashtag button{font-weight: 500; font-size:2rem; line-height:1.3; color: var(--point); white-space: nowrap;} .legal-search-list{margin-top:5.5rem; display: flex; flex-flow: row wrap; gap:3rem;} .legal-search-list>li{width:calc((100% - 9rem) / 4);} .legal-search-list>li>a{min-height:30rem; padding:4rem 2rem; background-color: #fff; border:1px solid #eee; display:block; border-radius:1rem; overflow: hidden; transition: all .3s ease-out; box-shadow:2rem 2rem 3rem rgba(0,0,0,0.15);} .legal-search-list>li>a * {transition: all .3s ease-out;} .legal-search-list a .title{min-height:5.2rem; font-weight: 600; font-size:2rem; line-height:1.3; color: #000; display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break:break-all;} .legal-search-list a .hr{width:100%; height:1px; margin-top:2rem; background-color: #e6e6e6;} .legal-search-list a .text{min-height:7.2rem; margin-top:2.5rem; font-size:1.7rem; line-height:1.4; color: #555; display: block; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break:break-all;} .legal-search-list a .hashtag{margin-top:2.5rem; display: flex; gap:0 1rem;} .legal-search-list a .hashtag p{font-weight: 500; font-size:1.6rem; line-height:1.3; color: var(--point); white-space: nowrap;} .legal-search-list>li>a:hover{background-color: var(--point2); border-color:var(--point2);} .legal-search-list a:hover .hr{background-color: #7ca7e0;} .legal-search-list a:hover .title, .legal-search-list a:hover .text, .legal-search-list a:hover .hashtag p{color: #fff;} .btn-more{margin-top:5rem; display: flex; justify-content: center;} .btn-more button{width:22rem; height:6rem; background-color: #fff; border:1px solid #ccc; font-weight: 500; font-size:2rem; line-height:1.3; color: #666; border-radius:99px;} .btn-more button>span{margin-left:1rem;} .simple-about01{padding:15rem 0; background: url('/images/sub/bg_simple_about01.jpg') no-repeat center center / cover;} .simple-about02{padding:15rem 0; background: url('/images/sub/bg_simple_about02.jpg') no-repeat center center / cover;} .simple-about03{padding:15rem 0; background: url('/images/sub/bg_simple_about03.jpg') no-repeat center top / cover;} .markTwo{display: flex; justify-content: center;} .markTwo .in{padding:0 3.5rem 0 4.5rem;background-image: url('/images/sub/bg_ddom_left.png'), url('/images/sub/bg_ddom_right.png'); background-repeat:no-repeat; background-position: left top, right bottom 2.5rem; background-size:3.7rem; font-weight: 800; font-size:5.6rem; line-height:1.2; color: #000; text-align: center;} .flexLayout{display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; gap:0;} .flexLayout .thumb{width:40%; max-width:50rem; aspect-ratio:500/500; border-radius:999px; overflow: hidden;} .flexLayout .thumb img{width:100%; max-width:none; object-fit: cover; display:block;} .flexLayout .text{width:calc(50%); color: #000;} .flexLayout .text>dt{font-weight: 800; font-size:5rem; line-height:1.2;} .flexLayout .text>dd{margin-top:2rem; font-size:2.2rem; line-height:3.2rem;} .flexLayout.reversal .thumb{order:2;} .flexLayout.reversal .text{order:1;} .simple-target-radius{padding:4.9rem 2.9rem; border:1px solid #e6e6e6; border-radius:3rem; overflow: hidden;} .simple-target-radius>.title{padding-bottom:4.5rem; border-bottom:1px solid #e6e6e6; font-size:2.5rem; line-height:1.3; color: #000; text-align: center;} .simple-target-radius>.title>strong{letter-spacing: 0 !important;} .simple-target-radius>.title.bold{font-size:3.5rem; color:var(--point3);} .simple-target-radius .gray-radius input[type="text"], .simple-target-radius select{width:100%; height:4.2rem; padding:0 2rem; background-color: #fff; border-color:#dedede;} .simple-target-radius .gray-radius input[type="text"].tar{max-width:20rem; padding:0 1rem; text-align: right;} .simple-target-radius select{padding-right:3.5rem;} .simple-target-radius .flex-b{display: flex; flex-flow: row wrap; align-items: center;} .simple-target-radius .flex-b.g0_10{gap:0 1rem;} .simple-target-radius .flex-b.g0_45{gap:0 4.5rem;} .simple-target-radius .flex-b.sb{justify-content: space-between;} .simple-target-radius .box-w180{width:18rem;} .simple-target-radius .num-q{margin:-2.9rem 0; counter-reset:item;} .simple-target-radius .num-q>li{padding:2.9rem 0; display: flex; flex-flow: row wrap; align-items: start; gap:0 1rem;} .simple-target-radius .num-q>li.flex-b{padding-right:4rem;} .simple-target-radius .num-q>li+li{border-top:1px solid #e6e6e6;} .simple-target-radius .num-q>li:before{counter-increment: item; content: counter(item); width: 3rem; height: 2rem; margin-top:0.1rem; background-color: #333; font-weight: 600; font-size:1.5rem; line-height:0.8; color: #fff; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; border-radius:0.5rem;} .simple-target-radius .num-q>li>p{flex:1; font-weight: 500; font-size:1.8rem; line-height:1.3; color: #000;} .simple-target-radius .gray-radius{width:100%; margin-top:2rem; padding:0rem 4rem; background-color: #f8f8f8; border-radius:1rem; overflow: hidden;} .simple-target-radius .gray-radius>li{min-height:8rem; padding:2rem 0; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between;} .simple-target-radius .gray-radius>li+li{border-top:1px solid #e6e6e6;} .simple-target-radius .gray-radius>li>p{flex:1; padding-left:1.4rem; font-size:1.8rem; line-height:1.3; color: #555; position: relative;} .simple-target-radius .gray-radius>li>p:before{content: "·"; position:absolute; left: 0.2rem; top:0px;} .simple-target-radius .form01_05{width:100%; margin-top:1.5rem; padding:0 0 0 1.4rem; display: flex; flex-flow: row nowrap; align-items: center; gap:1rem 4.5rem;} .simple-target-radius .form01_05>p{flex:auto; font-size:1.8rem; line-height:1.3; color: #555; display: flex; flex-flow: row nowrap; align-items: center; gap:0 1rem;} .simple-target-radius .form01_05>p>strong{font-weight: 400; color: #000;} .simple-target-radius .form01_05 input[type="text"].tar{max-width:none; flex:1;} .simple-target-radius .simple24{width:100%; margin-top:4.5rem; display: flex; flex-flow: row wrap; align-items: start; justify-content: space-between;} .simple-target-radius .simple24>.logo{} .simple-target-radius .simple24>.logo img{display:block;} .simple-target-radius .simple24>.conts{width:73.9837%; padding-top:0.5rem;} .simple-target-radius .simple24>.conts>dl{display: flex; align-items: start; gap:1.4rem;} .simple-target-radius .simple24>.conts>dl+dl{margin-top:1.5rem;} .simple-target-radius .simple24>.conts>dl>dt{width:8rem; height:3.5rem; background-color: var(--point); font-weight: 600; font-size:1.6rem; line-height:0.8; color: #fff; display: flex; align-items: center; justify-content:center; border-radius:0.3rem; position: relative;} .simple-target-radius .simple24>.conts>dl>dt:before{content: ""; width: 0; height: 0; border:0.5rem solid transparent; border-left:0.5rem solid var(--point); border-right-width:0; display: inline-block; position:absolute; left:100%; top:50%; transform: translateY(-50%);} .simple-target-radius .simple24>.conts>dl>dd{flex:1; padding-top:0.6rem; font-size:1.7rem; line-height:1.5; color: #555;} .simple-target-radius .end-text{margin-top:5rem; font-size:2.2rem; line-height:1.4; color: #000; text-align: center;} .simple-target-radius .end-text>em{font-weight: 500;} .btn-amount{margin-bottom:2rem; display: flex; flex-flow: row wrap; align-items: center; justify-content: end; gap:0.5rem; position: relative; z-index:2;} .btn-amount a, .btn-amount button{width:9rem; height:4.4rem; background-color: #000; font-weight: 600; font-size:1.8rem; line-height:0.8; color: #fff; border-radius:0.3rem; overflow: hidden; display: flex; align-items: center; justify-content: center;} .btn-amount a.w150, .btn-amount button.w150{width:15rem;} .btn-amount a.delete, .btn-amount button.delete{background-color: #555;} .btn-amount a.line, .btn-amount button.line{background-color:#fff; border:1px solid var(--point2); color: var(--point2);} h5.txt + .btn-amount{margin-top:-5.8rem;} .btn-amount.center{justify-content: center; gap:2rem 1rem;} .btn-amount.center>strong{margin-right:2rem;} .sign-file-down{text-align: center;} .sign-file-down>dt{width:100%; display: flex; justify-content: center;} .sign-file-down>dt img{width:10rem; display:block;} .sign-file-down>dd{margin-top:2.5rem; font-weight: 500; font-size:2rem; line-height:1.3; color: #000;} .sign-area{width:100%; max-width:111.5rem; margin:6.5rem auto 0; text-align: center;} .sign-area .title{font-weight: bold; font-size:2.5rem; line-height:1.3; color: #000;} .sign-area .text{font-size:2rem; line-height:1.3; color: #df6161;} .sign-area .sigPad{width:100%; max-width:40rem; height:30rem; margin:1.5rem 0; /*background-color: #f8f8f8; */position: relative;} .sign-area canvas{width:100% !important;} .sign-layout{display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between;} .sign-layout .form{width:calc(100% - 44rem); display: flex; flex-flow: column nowrap; gap:1rem 0; text-align: left;} .sign-layout .form dl{display: flex; align-items: center; text-align: left; gap:1.4rem;} .sign-layout .form dl>dt{width:13.5rem; font-weight: 500; font-size:2rem; line-height:1; color: #000;} .sign-layout .form dl>dd{flex:1; display: flex; align-items: center; gap:0 1rem; text-align: left; justify-content:start;} .sign-layout .form input[type="text"]{width:100%; border:none; border-bottom:1px solid #000;} .sign-layout .form input[type="text"].small{width:50%;} .tooltip{display:inline-block; vertical-align: middle; cursor: pointer; position: relative;} .tooltip>img{min-width:24px;} .tooltip .tooltip-area{width:42rem; padding:2.9rem 2.4rem; background-color: #fff; border:1px solid #555; border-radius:1rem; overflow: hidden; position: absolute; left:3rem; bottom:10%; box-shadow:0.5rem 0.5rem 2rem rgba(0,0,0,0.1); display:none; z-index:3;} .tooltip .tooltip-area.top{ bottom:auto; top:50%; margin-top:-10rem; } .tooltip .tooltip-area.right{ left:auto; right:calc(100% + 1rem);} .tooltip .tooltip-area .title{padding-bottom:2.5rem; border-bottom:1px solid #e6e6e6; font-weight: bold; font-size:2rem; line-height:1.3; color: #000; text-align: center; position: relative;} .tooltip .tooltip-area .title a{position: absolute; right:0; top:0;} .tooltip .tooltip-area .text{margin-top:2.5rem; font-weight: 500; font-size:1.6rem; line-height:1.4; color: #333; text-align: left;} .tooltip .tooltip-area .ps-box{width:calc(100% + 4.8rem); margin:2rem 0 -2.9rem -2.4rem; padding:2.5rem 2.4rem; background-color: #f4f6f8;} .simple-step05{width:100%; max-width:86rem; margin:4rem auto 0; padding:2.8rem 3rem; background-color: #f4f6f8; border-radius:1rem; display: flex; justify-content: center;} .simple-step05>dl{display: inline-flex; align-items: center; justify-content: center; gap:0 3rem;} .simple-step05>dl>dt{} .simple-step05>dl>dt img{display:block;} .simple-step05>dl>dd{flex:1; font-size:2rem; line-height:1.4; color: #000;} .menu-two{margin-bottom:4.5rem; font-size:0; line-height:0; text-align: center; display: flex; justify-content: center; gap:1rem; position: relative;} .menu-two a{width:100%; max-width:27rem; height:6rem; padding:0 1.5rem; background-color: #fff; border:1px solid #ccc; font-weight: 400; font-size:1.8rem; line-height:1.3; color: #999; display: flex; align-items: center; justify-content: center; white-space: nowrap; transition: all .3s ease-out; position: relative; border-radius:1rem;} .menu-two a:is(:hover, .active){background-color:var(--point2); border-color:var(--point2); font-weight: bold; color:#fff; z-index:2;} .guide-faq{margin-top:6rem; display: flex; gap:3rem;} .guide-faq-menu a, .guide-faq-menu .depth01-btn>em:before, .guide-faq-menu .depth01-btn>em:after, .guide-faq-menu a:is(.depth02-btn, .depth03-btn, .depth04-btn):before{transition: all .3s ease-out; transform-origin: 50% 50%;} .guide-faq-menu{width:33rem;} .guide-faq-menu .guide-faq-title{width:100%; height:10rem; background-color: var(--point3); font-weight: bold; font-size:3rem; line-height:1; color: #fff; display: none; align-items: center; justify-content: center; position: relative; cursor: default;} .guide-faq-menu .guide-faq-title:before{content: ""; width: 2.4rem; height: 2.4rem; margin-top:-1.2rem; background: url('/images/i_down.png') no-repeat center center/cover; position:absolute; right:2.7rem; top:50%;} .guide-faq-menu ul{display:none;} .guide-faq-menu ul.depth01{border:1px solid #ddd; display:block;} .guide-faq-menu ul.depth01>li+li{border-top:1px solid #ddd;} .guide-faq-menu a{width:100%; min-height:4.9rem; padding:1rem 1.6rem 1rem 1.9rem; font-size:1.7rem; line-height:1.3; color: #999; display: flex; align-items: center; gap:0 0.6rem;} .guide-faq-menu .depth01-btn{background-color: #f5f5f5; color: #555; position: relative;} .guide-faq-menu .depth01-btn>em{width:10px; height:10px; margin-top:-5px; font-size:0; position: absolute; right:1.6rem; top:50%;} .guide-faq-menu .depth01-btn>em:before, .guide-faq-menu .depth01-btn>em:after{content: ""; width: 100%; height: 2px; background-color: #999; position:absolute; left: 50%; top:50%; transform: translate(-50%, -50%);} .guide-faq-menu .depth01-btn>em:after{width: 2px; height: 100%;} .guide-faq-menu li:is(:hover, .active, .open)>.depth01-btn{background-color: var(--point2); font-weight: 600; color: #fff;} .guide-faq-menu li:is(:hover, .active, .open)>.depth01-btn>em:after{background-color: #fff; transform: translate(-50%, -50%) rotate(90deg);} .guide-faq-menu li:is(:hover, .active, .open)>.depth01-btn>em:before{opacity: 0;} .guide-faq-menu li.open ul.depth02{display:block;} .guide-faq-menu li.open ul.depth02>li+li{border-top:1px solid #ddd;} .guide-faq-menu .depth02>li.open ul.depth03{padding-top:1rem; border-top:1px solid #ddd; display:block;} .guide-faq-menu .depth02>li.open ul.depth04{display:block;} .guide-faq-menu .depth02>li.open ul.depth05{display:block;} .guide-faq-menu a:is(.depth02-btn, .depth03-btn, .depth04-btn){padding-left:1.2rem; position: relative;} .guide-faq-menu a:is(.depth02-btn, .depth03-btn, .depth04-btn):before{content:""; width:5px; height:8px; margin-bottom:0.2rem; background: url('/images/arr_guide-faq-menu.svg') no-repeat center center/cover; } .guide-faq-menu .depth02-btn{padding-left:1.9rem !important;} .guide-faq-menu li:is(:hover, .active, .open)>a.depth02-btn{color: var(--point2);} .guide-faq-menu li:is(:hover, .active, .open)>a.depth02-btn:before{filter: brightness(0) saturate(100%) invert(55%) sepia(15%) saturate(1707%) hue-rotate(175deg) brightness(103%) contrast(83%);} .guide-faq-menu li.open>.depth02-btn:before{transform:rotate(90deg);} .guide-faq-menu .depth03-btn{min-height:3.1rem; padding:0.3rem 1.6rem 0.3rem 3.5rem !important; font-size:1.6rem; line-height:1.56;} .guide-faq-menu .depth04-btn{min-height:2.3rem; padding:0.2rem 1.6rem 0.2rem 4.7rem !important; font-size:1.5rem; line-height:1.9rem;} .guide-faq-menu li:is(:hover, .active, .open)>a:is(.depth03-btn, .depth04-btn){color: #000;} .guide-faq-menu li:is(:hover, .active, .open)>a:is(.depth03-btn, .depth04-btn):before{-webkit-filter: grayscale(100%) brightness(0); filter: grayscale(100%) brightness(0);} .guide-faq-menu .depth05{margin:0.5rem 1.9rem 1.7rem 4.4rem; padding:0.9rem 1.4rem; background-color: #f6f8f9; border-radius:1rem;} .guide-faq-menu .depth05-btn{min-height:auto; padding:0 0 0 0.9rem !important; font-size:1.5rem; line-height:2.2rem; position: relative;} .guide-faq-menu .depth05-btn:before{content: "·"; position:absolute; left: 0; top:0px;} .guide-faq-menu li:is(:hover, .active, .open)>a.depth05-btn{color: var(--point2); text-decoration: underline; text-underline-position:under;} .guide-faq-conts{flex:1; padding-top:1rem;} .guide-faq-btm{display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; gap:2rem 0;} .guide-faq-btm>p{font-weight: bold; font-size:3.5rem; line-height:1.3; color: #000;} .guide-faq-btm .board_btn{width:auto;} .guide-faq .faqArea li .title_cate {color:var(--point) !important; font-weight:700;} /* store */ .store-area{margin-bottom:4rem; display: flex; align-items: center; justify-content: space-between;} .store-area>*{width:50%;} .store-area>.store-map{padding:0 3rem; text-align: center; order:1;} .store-area>.store-map .thumb{display:inline-block; position: relative;} .store-area>.store-map .thumb .finding-map-link{width:76px; height:28px; background-color: #999; font-family:"pretendard"; font-weight: 600; font-size:14px; line-height:1; color: #fff; position: absolute; left:50%; top:50%; display: flex; align-items: center; justify-content: center; border-radius:99px;} .store-area>.store-map .thumb .finding-map-link:after{content: ""; width: 48px; height: 49px; margin-left:-24px; background: url('../../images/sub/img_map_pin.png') no-repeat center top / cover; position:absolute; left: 50%; bottom:calc(100% + 9px); opacity: 0; display:none;} .store-area>.store-map .thumb .finding-map-link[data-val="10"]{margin:-55.4% 0 0 -16.2%;} /* 서울 */ .store-area>.store-map .thumb .finding-map-link[data-val="1"]{margin:-48.6% 0 0 -45.9%;} /* 인천 */ .store-area>.store-map .thumb .finding-map-link[data-val="2"]{margin:-62.7% 0 0 18.3%;} /* 강원 */ .store-area>.store-map .thumb .finding-map-link[data-val="9"]{margin:-39.7% 0 0 -8.6%;} /* 경기 */ .store-area>.store-map .thumb .finding-map-link[data-val="7"]{margin:22.9% 0 0 3.8%;} /* 경남 */ .store-area>.store-map .thumb .finding-map-link[data-val="4"]{margin:-15.7% 0 0 20.4%;} /* 경북 */ .store-area>.store-map .thumb .finding-map-link[data-val="6"]{margin:41.7% 0 0 -26.2%;} /* 전남 */ .store-area>.store-map .thumb .finding-map-link[data-val="5"]{margin:7.5% 0 0 -30.5%;} /* 전북 */ .store-area>.store-map .thumb .finding-map-link[data-val="8"]{margin:64.7% 0 0 -49.7%;} /* 제주 */ .store-area>.store-map .thumb .finding-map-link[data-val="3"]{margin:-19.2% 0 0 -34.3%;} /* 충남 */ .store-area>.store-map .thumb .finding-map-link[data-val="11"]{margin:-26.9% 0 0 -3.2%;} /* 충북 */ .store-area>.store-map .thumb .finding-map-link[data-val="16"]{margin:36.1% 0 0 26.8%;} /* 부산 */ .store-area>.store-map .thumb .finding-map-link[data-val="13"]{margin:5.1% 0 0 22.8%;} /* 대구 */ .store-area>.store-map .thumb .finding-map-link[data-val="14"]{margin:27.1% 0 0 -42.2%;} /* 광주 */ .store-area>.store-map .thumb .finding-map-link[data-val="12"]{margin:-11.9% 0 0 -9.2%;} /* 대전 */ .store-area>.store-map .thumb .finding-map-link[data-val="15"]{margin:22.1% 0 0 36.8%;} /* 울산 */ .store-area>.store-map .thumb .finding-map-link:is(:hover, .active){background-color: var(--point); z-index:2;} .store-area>.store-map .thumb .finding-map-link.active:after{height: 58px; opacity: 1;} .store-area>.store-inj{padding-right:3rem; order:2;} .store-area>.store-inj>dl{} .store-area>.store-inj>dl>dt{font-weight: bold; font-size:3.2rem; line-height:1; color:var(--point);} .store-area>.store-inj>dl>dd{margin-top:2rem; font-family:"pretendard"; font-weight: 500; font-size:2.1rem; line-height:1.2; color: #254737;} .store-area .store-inj-box{height:20.5rem; margin-top:2.5rem; padding:0 3rem; background-color: #f8fbfa; display: flex; align-items: center; justify-content: center; gap:2rem; border-radius:1rem;} .store-area .store-inj-box img{width:14rem; min-width:14rem;} .store-area .store-inj-box>dl{} .store-area .store-inj-box>dl>dt{font-family:"pretendard"; font-weight: bold; font-size:2.3rem; line-height:1; color:#1b1b1b;} .store-area .store-inj-box>dl>dd{margin-top:1rem; font-family:"pretendard"; font-weight: 500; font-size:1.8rem; line-height:1.4; color: #254737;} .store-area .store-inj-btn{margin-top:2.5rem; display: flex; justify-content: flex-end;} .store-area .store-inj-btn>a{font-weight: 700; font-size:1.6rem; line-height:1.2; color: #333; display: flex; align-items: center; gap:0.5rem;} .store-area .store-inj-btn>a img{height:0.8rem;} .store-table{width:100%; border-top:2px solid #666; overflow: hidden;} .store-table>table{width:100%; border-spacing:0;} .store-table>table th, .store-table>table td{height:7rem; padding:1.5rem 2rem; background-color: #fff; border-bottom:1px solid #ddd; font-size:1.6rem; line-height:1.6; color:#666; text-align:center; border-collapse:collapse; empty-cells:show; word-break:break-all;} .store-table>table th{background-color: #fdfdfe;} .store-table>table>thead>tr>th{font-weight: 700; font-size:1.7rem; color: #111;} .store-table>table .tit{font-weight: 700; color: #111;} .store-table>table .btn{width:9rem; height:3.7rem; margin:0 auto; background-color: #808080; border:1px solid #707070; font-weight: 700; font-size:1.5rem; line-height:1.2; color: #fff; display: flex; align-items: center; justify-content: center; border-radius:0.5rem;} .store-online-top{height:32rem; background: url('../../images/sub/bg_store.jpg') no-repeat center center / cover; display: flex; align-items: center; justify-content: center;} .store-online-top>dl{width:100%; padding-left:10%;color: #fff;} .store-online-top>dl>dt{font-size:3.4rem; line-height:5.2rem;} .store-online-top>dl>dd{margin-top:3rem; font-size:2.2rem; line-height:1;} .store-online-btm{margin-top:5.5rem;} .store-online-btm .text{font-size:2.1rem; line-height:3.8rem; color: #333;} .store-online-btm .text>strong{font-weight: 700; color: var(--point);} /* history */ .history-area{font-size:0; line-height:0; position: relative;} .history-area:before{content: ""; width: 0.6rem; margin-left:-0.3rem; background-color: rgba(221,221,221,0.8); display: inline-block; position:absolute; left: 50%; top:1.5rem; bottom:0;} .history-area #his_progress{content: ""; width: 0.6rem; margin-left:-0.3rem; background-color:var(--point); display: inline-block; position:absolute; left: 50%; top:1.5rem; border-radius: 0 0 9px 9px;} .history-area>li{text-align: right; display: flex; justify-content: space-between; position: relative; z-index:2;} .history-area>li+li{margin-top:10rem;} .history-area .history-in{width:50%; padding:0 4rem; text-align: left; display:inline-block; vertical-align: top; position: relative; cursor: default; order:2;} .history-area .history-in[href]{cursor: pointer !important;} .history-area .history-in:before{content: ""; width: 2.4rem; height:2.4rem; background-color:var(--btn_c); border:4px solid #fff; display: inline-block; position:absolute; left: -1.2rem; top:1rem; border-radius:999px; box-sizing: border-box;} .history-area .history-in>strong{font-weight: 600; font-size:3.6rem; line-height:1; color: #111; display:block;} .history-area .txt_wrap{margin-top:3rem; } .history-area .txt_wrap>p{padding:0 0 0 1.2rem; font-size:1.7rem; line-height:1.5; color: #666; position: relative;} .history-area .txt_wrap>p:before{content: "ㆍ"; position:absolute; left: -0.3rem; top:0px;} .history-area .txt_wrap>p+p{margin-top:1rem;} /*.history-area .txt_wrap>ul>li:before{content: "-"; position:absolute; left: 0; top:0px;}*/ .history-area>li .thumb{width:50%; margin-top:0; padding:0 4rem; position: relative; order:1;} .history-area>li .thumb img{width:calc(100% - 8rem); height:calc(100%); object-fit:cover; object-position: center center; position: absolute; left:4rem; right:4rem; top:0; bottom:0;} .history-area>li:nth-child(even){text-align: left;} .history-area>li:nth-child(even) .history-in{text-align: right; order:1;} .history-area>li:nth-child(even) .history-in:before{left:auto; right: -1.2rem;} .history-area>li:nth-child(even) .thumb{order:2;} .history-area>li:nth-child(even) .txt_wrap>p{padding:0 1.2rem 0 0;} .history-area>li:nth-child(even) .txt_wrap>p:before{left:auto; right: -0.3rem;} /* etc */ .etc_clause{width:90%; margin:0 auto; font-size:0; line-height:0; text-align: center; box-sizing:border-box; position: relative; overflow: visible;} .etc_clause:before, .etc_clause:after{content:"";position:absolute;top:2%;bottom:0;left:10px;right:10px;-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8);-moz-border-radius:100px / 10px; border-radius:100px / 10px;} .etc_clause:after{right:10px;left:auto;-webkit-transform:skew(8deg) rotate(3deg);-moz-transform:skew(8deg) rotate(3deg);-ms-transform:skew(8deg) rotate(3deg);-o-transform:skew(8deg) rotate(3deg);transform:skew(8deg) rotate(3deg);} .etc_clause .etc_clause_in{padding:60px 80px 80px; background-color: #fdfdfd; border:1px solid #cecece; border-radius:10px; position: relative; z-index:2;} .etc_clause .logo{margin:0;} .etc_clause .logo img{} .etc_clause .txt{padding:50px 0 30px; font-weight: 600; font-size:24px; line-height:1; color: #000;} .etc_clause .txt>span{font-weight: 600; color: #000;} .etc_clause .scroll{font-weight:300; font-size:16px; line-height:1.8; color: #626262; text-align: left;} .etc_select{width:90%; margin:0 auto 2rem; text-align: right;} .etc_select select.base{width:auto;} /* search */ .search-area{} .search-area .search-result{font-weight: bold; font-size:2.6rem; line-height:1.2; color: #111; text-align: center;} .search-area .search-result>strong{color: #cc0000;} .search-area .search-re{margin-top:5rem; border-top:2px solid #111;} .search-area .search-re+.search-re{margin-top:10rem;} .search-area .search-re .search-re-tit{padding:3rem 0 0 3rem; display: flex; align-items: center; gap:1rem;} .search-area .search-re .search-re-tit strong{font-weight: 600; font-size:3rem; line-height:1; color: #111;} .search-area .search-re .search-re-tit span{height:3rem; padding:0 1.5rem; background-color:var(--point); font-weight: 600; font-size:1.8rem; line-height:1; color: #fff; display: flex; align-items: center; justify-content: center; border-radius:99px;} .search-area .search-re-list{} .search-area .search-re-list>li{border-bottom:1px solid #ddd;} .search-area .search-link{padding:2.5rem 3rem; display:block;} .search-area .search-link .tit{font-weight: bold; font-size:2.2rem; line-height:1.3; color: #000;} .search-area .search-link .tit>strong{color: #cc0000;} .search-area .search-link .txt{margin-top:1rem; font-weight: 500; font-size:1.6rem; line-height:1.4; color: var(--point);} .search-area .search-re .search-more{margin-top:6rem; display: flex; justify-content: center;} .search-area .search-re .search-more>a{height:4.1rem; padding:0 2.7rem; border:1px solid #666; font-weight: bold; font-size:1.8rem; line-height:1; color: #555; display: flex; align-items: center; justify-content: center; border-radius:0.5rem;} .search-area .result-group{margin-top:5rem; border-top:2px solid #111;} .search-area .result-group dl{border-bottom:1px solid #ddd; display: flex; align-items: center;} .search-area .result-group dl dt{width:15rem; height:15rem; margin-right:2rem; border:1px solid #ddd; overflow:hidden; position:relative;} .search-area .result-group dl dt img{max-width:100%;position:absolute;width:auto; height:auto;margin:auto;top:0; bottom:0; left:0; right:0;} .search-area .result-group dl dd{width:calc(100% - 17rem);} .search-area .result-group dl dd div {} .search-area .result-group dl dd div.title{display: flex; align-items: center; gap:0 1rem;} .search-area .result-group dl dd div.title a{font-weight: bold; font-size:2.2rem; line-height:1.3; color: #000;} .search-area .result-group dl dd div.title a>h2 {} .search-area .result-group dl dd div.title a[target="_blank"]{height:3rem; padding:0 1.5rem; background-color:var(--point); font-weight: 400; font-size:1.6rem; line-height:1; color: #fff; display: flex; align-items: center; justify-content: center; border-radius:99px;} .search-area .result-group dl dd div.cont{max-height: 4.8rem; margin-top:1rem; font-weight: 400; font-size:1.8rem; line-height:2.4rem; color: #999; display: -webkit-box; text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical; overflow:hidden;} /* .search-area .result-group dl dd div.cont{ max-height: 72px; display: -webkit-box; text-overflow: ellipsis;-webkit-line-clamp: 3;-webkit-box-orient: vertical; overflow:hidden;} .search-area .result-group dl dd div.date {color:#999;} */ .search-area .result-group dl dd div.navi, .result-group dl dd div.navi a {margin-top:1.5rem; font-weight: 500; font-size:1.6rem; line-height:1.4; color: var(--point);} .result-group .more {text-align:right;} .result-group .more a {font-size:13px; color:#7d7d7d; text-decoration:underline;} /*[e] Sub Style */ /*[s] Plugin Style */ .fancybox__slide{padding:40px 6rem !important;} .layer-base.fancybox__content>.carousel__button.is-close{width:3.6rem; height:3.6rem; background-color: #404040; top:0rem !important; right:0rem; border-radius:0 1rem 0 1rem; overflow: hidden;} .layer-base.fancybox__content>.carousel__button.is-close svg{width:60%; height:60%; stroke-width:2; filter:none; color: #fff;} .layer-base.fancybox__content>.carousel__button.is-back{width:3.6rem; height:3.6rem; position: absolute; left:0; top:0; display:none;} .layer-base.fancybox__content>.carousel__button.is-back img{display:block;} .layer-base{padding:0 !important; background-color: transparent !important; font-size:0; line-height:0; display:none;} .layer-base .layer-in{} #find-expert-lay{width:100%; max-width:120rem;} #find-expert-lay .layer-in{padding:4rem; background-color: #fff; border-radius:1rem; overflow: hidden;} #find-expert-lay .scroll{height:74rem; background-color: #fff; overflow-x: hidden; overflow: auto; position: relative;} #find-expert-lay .find-expert-const{display:none;} #find-expert-lay .visual{border-radius:1rem; overflow: hidden;} #find-expert-lay .visual img{display:block;} #find-expert-lay .text-box{margin-top:8rem; font-weight: 500; font-size:2.6rem; line-height:4rem; color: #404040; text-align: center;} #find-expert-lay .text-box>strong{color: #000;} #find-expert-lay .list{display: flex; align-items: flex-start; flex-flow: row wrap; gap:4rem 3rem; position: relative; z-index:2;} #find-expert-lay .list>li{width:calc((100% - 9rem) / 4);} #find-expert-lay .list>li>a{text-align: center; display:block;} #find-expert-lay .list>li .photo{border-radius:1rem; overflow: hidden;} #find-expert-lay .list>li .photo img{aspect-ratio:380/500; object-fit: cover; display:block;} #find-expert-lay .list>li .cate{margin-top:2rem; font-size:1.8rem; line-height:1.3; color: var(--point);} #find-expert-lay .list>li .name{margin-top:0.5rem; font-weight: bold; font-size:2.4rem; line-height:1.3; color:#000;} #find-expert-lay .list+h4.txt{margin-top:7rem; padding-top:8rem; border-top:1px solid #dbdbdb;} #find-expert-lay .find-expert-view{display: flex; flex-flow: row wrap; align-items: start; justify-content: space-between;} #find-expert-lay .find-expert-view .photo-box{width:33.9286%; max-width:38rem;} #find-expert-lay .find-expert-view .photo-box>dt{border-radius:1rem; overflow: hidden;} #find-expert-lay .find-expert-view .photo-box>dt img{aspect-ratio:380/500; object-fit: cover; display:block;} #find-expert-lay .find-expert-view .photo-box>dd{margin-top:3rem; font-weight: 500; font-size:1.4rem; line-height:1.3; color: #666; display: flex; align-items: baseline; justify-content: end;} #find-expert-lay .find-expert-view .photo-box>dd>strong{margin-left:1rem; font-weight: bold; font-size:3rem; color: #000;} #find-expert-lay .find-expert-view .history-info{width:62.5%;} #find-expert-lay .find-expert-view .history-info *+h5.bul{margin-top:3rem;} #find-expert-lay .find-expert-view .history-info .txt{font-size:1.7rem; line-height:1.45; color: #666;} #success-detail-lay{width:100%; max-width:120rem;} #success-detail-lay .layer-in{padding:4rem; background-color: #fff; border-radius:1rem; overflow: hidden;} #success-detail-lay .scroll{height:74rem; background-color: #fff; overflow-x: hidden; overflow: auto; position: relative;} #success-detail-lay .find-expert-const{display:block;} #success-detail-lay .find-expert-view{display: block;} #success-detail-lay .find-expert-view .success-detail-view{width:100%;} #success-detail-lay .find-expert-view .success-detail-view h3{font-size:2.4rem; line-height:1.4; color:#000;} #success-detail-lay .find-expert-view .success-detail-view h5{font-size:1.8rem; line-height:1.4; color:#333;} #success-detail-lay .find-expert-view .success-detail-view p{font-size:1.6rem; line-height:1.6; color:#666;} #success-detail-lay .find-expert-view .success-detail-view .txt{font-size:1.7rem; line-height:1.8; color:#444;} .add-form-lay{width:100%; max-width:128rem;} .add-form-lay .layer-in{padding:4rem 3rem 3rem; background-color: #fff; border-radius:1rem; overflow: hidden;} .add-form-lay .layer-in>.title{padding-bottom:3rem; font-weight: bold; font-size:3.5rem; line-height:1.3; color: var(--point3); text-align: center;} .add-form-lay .layer-in .text{font-size:1.7rem; line-height:1.45; color: #666;} .two-table{display: flex; flex-flow: row wrap; justify-content: space-between;} .two-table>*{width:calc((100% - 2rem) / 2);} #email-no-lay{max-width:84rem;} #priPop-lay{max-width:102.4rem;} .lay-etc .layer-in{padding:0; background-color: transparent;} .lay-etc .layer-in>.title{display:none;} .lay-alert{width:100%; max-width:50rem;} .lay-alert .layer-in{padding:4rem 3rem 4rem; background-color: #fff; border-radius:1rem; overflow: hidden;} .lay-alert .layer-in .logos{display: flex; align-items:center; justify-content: center;} .lay-alert .layer-in .logos img{height:6rem;} .lay-alert .layer-in .text{margin-top:2rem; font-size:1.8rem; line-height:3rem; color: #000;} #simple-lay{} #simple-lay .phone-form{position: relative;} #simple-lay .phone-form:before{content: ""; width: 0.4rem; height: 24.2rem; background:url('/images/main/bg_simple_form_left.png') no-repeat center center/cover; position:absolute; left: -2.4rem; top:11.8rem;} #simple-lay .phone-form:after{content: ""; width: 0.4rem; height: 11rem; background:url('/images/main/bg_simple_form_right.png') no-repeat center center/cover; position:absolute; right:-2.4rem; top:25rem;} /*[e] Plugin Style */ @media only screen and (max-width : 1760px){ /*[s] Main Style */ /*[e] Main Style */ /*[s] Sub Style */ /*[e] Sub Style */ } @media only screen and (max-width : 1460px){ /*[s] Main Style */ #mainCont01 .swiper-button{display:none;} /*[e] Main Style */ /*[s] Layer Style */ /*[e] Layer Style */ } @media only screen and (max-width : 1320px){ .two-table{} .two-table>*{width:100%;} .two-table>*+*{margin-top:3rem;} } @media only screen and (max-width : 1280px){ .scroll_info.w1280{display:block;} .scrollTb.w1280{width:100%; padding-bottom:2rem; display:block; overflow:hidden !important; overflow-x:scroll !important;} .scrollTb.w1280 img{max-width:none;} .scrollTb.w1280>*{width:1240px !important;} /*[s] Main Style */ /*#mainVisual .vTxt .top-scroll{width:100%; flex-wrap: nowrap; justify-content: start; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none;} #mainVisual .vTxt .top-scroll::-webkit-scrollbar{display: none;}*/ #mainVisual .vTxt .top{min-width:128rem; gap:3rem;} #mainVisual .vTxt .top>li{width:calc((100% - 9rem) / 4);} #mainCont02 .roll-number .roll-number-re{flex-direction: column; align-items: start;} #mainCont02 .roll-number .roll-number-re>dt{} #mainCont03{height:auto; padding:15rem 0;} #mainCont03 .inConts{flex-wrap: wrap; justify-content: start;} #mainCont03 .inConts .m-title{width:100%; position: static; transform: translateY(0%);} #mainCont03 .inConts .m-title .fVar{display:none !important;} #mainCont03 .m3-swiper{display:block;} /* #mainCont03 .inConts .member-list{width:100%; max-width:none; margin-top:7rem; padding:0; display: flex; flex-wrap: nowrap; justify-content: start; gap:7rem;} #mainCont03 .inConts .member-list>li{width:38rem; min-width:38rem;} #mainCont03 .inConts .member-list>li:nth-child(2){margin-top:0;} #mainCont03 .inConts .member-list>li:nth-child(odd):not(:first-child){margin-top:0;} */ /*[e] Main Style */ /*[s] Sub Style */ .circle-line>.circle-line_re:before{width:30%; left:calc(100% - 2.5rem);} .flexLayout .text{width:55%;} .tooltip{position: static;} .tooltip .tooltip-area{right:auto !important; left:50% !important; transform: translateX(-50%) !important;} *.static{position: static !important;} .guide-faq-btm{justify-content: center;} .guide-faq-btm .board_btn{width:100%;} /*[e] Sub Style */ /*[s] Layer Style */ /*[e] Layer Style */ } @media only screen and (max-width : 1024px){ /*[s] All Style */ .wideKakao>.root_daum_roughmap{height:auto; padding-bottom: 56.25%;} .scroll_info{display:block;} .scrollTb{width:100%; padding-bottom:2rem; display:block; overflow:hidden !important; overflow-x:scroll !important;} .scrollTb img{max-width:none;} .scrollTb:not(.w1280)>*{width:924px !important;} /*[e] All Style */ /*[s] Main Style */ #mainCont01 .inConts{flex-wrap: wrap; align-items: start; justify-content: start;} #mainCont01 .mainCont01-left{width:100%; position: static;} #mainCont01 .mainCont01-right{margin:0 auto;} #mainCont01 .swiper-phone{height:75rem; margin-top:5.5rem;} #mainCont01 .swiper-pagination{margin-top:0; padding-right:2rem; text-align:center; position: absolute; left:0; bottom:10rem;} #mainCont03 .people{display:none;} #mainCont03 .people-m{display:block;} #mainCont03 .inConts .m-title.new{opacity:1 !important; margin-top:0 !important;} #mainCont03 .inConts .member-list>li>.conts{transform: translateY(0%);} #mainCont03 .inConts .member-list>li>.conts:before, #mainCont03 .inConts .member-list>li>.conts:after, #mainCont03 .inConts .member-list>li>.conts ul{transform: translateY(0);} #mainCont05 .inConts{flex-wrap: wrap; justify-content:start;} #mainCont05 .mainCont05-left{width:100%; padding-top:0;} #mainCont05 .mainCont05-right{margin:10rem auto 0; padding:0 2.5rem 0 0; display: flex; justify-content: end; position: relative;} /*[e] Main Style */ /*[s] Sub Style */ .my-table>table>thead>tr>th{width:50%;} .my-table>table>thead>tr>th:nth-of-type(2){width:50%;} .my-table .payment{width:calc(50% - 1px);} .pro-recommend{gap: 2rem;} .pro-recommend>li{width:calc((100% - 2rem) / 2);} .circle-line{gap:4rem 0;} .circle-line>.circle-line_re{flex:0 1 33.33%; padding:0 1.5rem; justify-content: center;} .circle-line>.circle-line_re:before{left:calc(100% - 4.5rem);} .circle-line>.circle-line_re:nth-child(3):before{display:none;} #legal-visual .visual-left{flex:auto; width:100%;} #legal-visual .visual-question{margin:7rem auto 0;} .legal-search-list>li{width:calc((100% - 6rem) / 3);} .flexLayout .thumb{width:auto; max-width:70%; } .flexLayout .text{width:100%; margin-top:5rem;} .flexLayout .text br{display:none;} .flexLayout.reversal{justify-content: end;} .flexLayout.reversal .thumb{order:1;} .flexLayout.reversal .text{order:2;} .simple-target-radius li.flex-b.sb{justify-content: end;} .simple-target-radius .num-q>li>p, .simple-target-radius .gray-radius>li>p{flex:1 1 calc((100% - 6rem));} .simple-target-radius .box-w180{margin-top:1.5rem;} .simple-target-radius .form01_05{flex-wrap: wrap;} .simple-target-radius .form01_05>p{flex:none; width:calc((100% - 4.5rem) / 2);} .simple-target-radius .form01_05>p>strong{width:4.5rem; display: flex; justify-content: space-between;} .simple-target-radius .simple24>.logo{width:100%; display: flex; justify-content:center;} .simple-target-radius .simple24>.conts{width:100%;} h5.txt + .btn-amount{margin-top:0rem;} h5.txt.pr200{padding-right:0 !important;} .guide-faq{flex-wrap: wrap;} .guide-faq-menu{width:100%;} .guide-faq-menu .guide-faq-title{display: flex; cursor: pointer;} .guide-faq-menu ul.depth01{display:none;} .sign-layout{gap:4rem 0;} .sign-layout .form{width:100%;} .sign-layout .sigPad{max-width:100%;} /* store */ .store-area{display: block;} .store-area>*{width:100%;} .store-area>.store-inj{padding:0 0 7rem 0 ;} .store-table{} .store-table>table{} .store-table>table, .store-table>table tbody, .store-table>table tr, .store-table>table td, .store-table>table th{height:auto; padding:0; background-color: #fff; border:none; display:block;} .store-table>table>thead{display:none;} .store-table>table tr{padding:3rem 0; border-bottom:1px solid #ddd;} .store-table>table th, .store-table>table td{margin-bottom:1rem; text-align: left; position: relative; display: flex; align-items: center; justify-content: flex-start;} .store-table>table .bo_tit{justify-content: flex-start;} .store-table>table th:before, .store-table>table td:before{width:14rem; min-width:14rem; content: attr(data-title); padding-right:2rem; font-weight: 700; color: #222; text-align: justify;} .store-table>table th:after, .store-table>table td:after{content:""; width:1px; height:1.6rem; background-color: #ccc; font-size:0; position: absolute; left:11.5rem; top:50%; transform: translateY(-50%);} .store-table>table .btn{margin:0;} /* search */ .search-area .result-group dl dd div.title a[target="_blank"]{display:none;} /*[e] Sub Style */ /*[s] Plugin Style */ .fancybox__slide{padding:40px 3rem 8px !important;} #find-expert-lay .list{gap:4rem 2rem;} #find-expert-lay .list>li{width:calc((100% - 4rem) / 3);} #success-detail-lay .find-expert-view .success-detail-view h3{font-size:2.2rem;} #success-detail-lay .find-expert-view .success-detail-view h5{font-size:1.7rem;} /*[e] Plugin Style */ } @media only screen and (max-width : 840px){ /*[s] All Style */ .nTable>table th, .nTable>table td{font-size:2.2rem;} .nTable>table th{height:7rem;} h4.txt{font-size:3.4rem;} h4.txt .small{width:100%; padding-left:0; font-size:2.4rem;} h4.txt .small:before{display:none;} h5.txt{font-size:2.8rem;} h5.txt .small{font-size:2.2rem;} h5.txt .small:before{left: 1.2rem;} h5.bul{padding-left:2rem; font-size:2.8rem;} h5.bul:before{width:2rem; height:2rem; background-size:1.2rem; top:0.6rem;} h6.txt{font-size:2.6rem;} .nTxt{font-size:2.4rem; line-height:3.4rem;} ._star>li{padding-left:1.5rem; font-size:2.4rem;} .star_>li{padding-left:2.4rem; font-size:2.4rem;} ._starB>li{padding-left:1.8rem; font-size:2.4rem;} ._starB>li>p{font-size:2.6rem;} ul.jum>li{padding-left:1.4rem; font-size:2.4rem;} ul._bul>li{padding-left:1.4rem; font-size:2.4rem;} ._caution{padding:0 0 0 3.6rem; font-size:2.4rem; background-position: left 0.2rem;} ._caution2{padding:0 0 1rem 3.2rem; font-size:2.4rem; background-position: left 0.4rem;} .issue-box{padding:2rem;} .issue-box>dl{gap:2rem;} .issue-box>dl>dt{padding:1rem 1.7rem 1rem; font-size:1.8rem;} .issue-box>dl>dt:before{margin-top:-0.8rem; border-left-width:0.8rem; border-top-width:0.8rem; border-bottom-width:0.8rem;} .issue-box>dl>dd{padding-top:0.5rem; font-size:2.2rem;} .btn-green>a{font-size:2.2rem;} .btn-green>a.small{width:20rem; height:6.5rem;} .following-sticky{} .following-sticky .following-sticky-in{padding:3rem 2rem; align-items: start; gap:3rem 1.5rem;} .following-sticky .icon{padding-top:0.3rem;} .following-sticky .icon img{width:3.3rem;} .following-sticky .text{flex:auto; font-size:2.4rem;} .following-sticky .text i{display:inline-flex;} .following-sticky:not(.new) a{width:100%; height:100%; background-color: transparent; font-size:0; line-height:0; color: transparent; border-radius:0; position: absolute; left:0; top:0;} .following-sticky:not(.new) a>span{display:none;} .following-sticky:not(.new) a>i{display:none;} .following-sticky.new .icon, .following-sticky.new .text{display:none !important;} .following-sticky.new a{height:6.4rem; padding:0 3rem; font-size:2.4rem;} /*[e] All Style */ /*[s] Main Popup Style */ .pop_con{left:2rem !important; right:2rem !important;} .hd_pops_con{} #popLayer{} #popLayer #moPopArea{} #popLayer #moPopArea .moPop{max-width:90%;} #popLayer #moPopArea #moPopRoll{} #popLayer .slider{} #popLayer .slider img{} /* #popLayer .slider#HKeditorContent{padding:20px; font-size:20px; line-height:1.5; color: #666;} #popLayer .slider#HKeditorContent img{width:auto;} #popLayer #moPopRoll.roll .slider{} */ #popLayer .layerPopClose{width:4rem; height:4rem; right:2rem; top:2rem;} #popLayer .layerPopClose:before{margin:-1px 0 0 -2rem;} #popLayer .layerPopClose:after{margin:-2rem 0 0 -1px;} #popLayer .moPopClose{} #popLayer .moPopClose>*{height:8rem; font-size:2rem;} /* #popLayer .moPopClose button{font-size:1.8rem; line-height:2.4rem;} #popLayer .moPopClose button:before{width: 2.4rem; height: 2.4rem; font-size:1.8rem; line-height:2.6rem;} #popLayer .moPopClose button.toDay_close{padding-left:3.2rem;} #popLayer .moPopClose button.close{padding-right:3.2rem} */ #popLayer .slick-dots{bottom:10rem;} #popLayer .slick-dots>li{} #popLayer .slick-dots>li+li{} #popLayer .slick-dots>li button{width:1.8rem; height:1.8rem;} #popLayer .slick-dots>li.slick-active button{} /*[e] Main Popup Style */ /*[s] Main Style */ a.m-btn{width:27rem; height:8rem; font-size:2.5rem;} .m-title{text-align: left !important;} .m-title>dt{font-size:3rem;} .swiper-pagination-bullet{width:2.2rem !important; height:2.2rem !important;} .swiper-pagination-bullet+.swiper-pagination-bullet{margin-left:2rem !important;} .swiper-pagination-bullet.swiper-pagination-bullet-active{width:7.6rem !important;} #mainVisual .visualRoll .swiper-slide{border-radius:0 0 0 22rem;} #mainVisual .visualRoll .swiper-slide>img{height:106rem;} #mainVisual .vTxt .ii{} #mainVisual .vTxt .ii.logo{} #mainVisual .vTxt .ii.logo img{height:4.7rem;} #mainVisual .vTxt .ii.cate{font-size:3.4rem;} #mainVisual .vTxt .ii.title{font-size:6.4rem;} #mainVisual .vTxt .ii.btn{margin-top:5.5rem;} #mainVisual .top-swiper{} #mainVisual .top-swiper .swiper-wrapper{white-space: nowrap;}/* transition:none !important; */ #mainVisual .top-swiper .swiper-slide{flex:1; width:48.2rem; min-width:48.2rem; min-height:48.6rem; padding:4.5rem 5.5rem 2rem; border-radius:0.5rem 2rem;} #mainVisual .top-swiper .swiper-slide + .swiper-slide{margin-left:3rem;} #mainVisual .top-swiper .swiper-slide p{width:16.5rem; height:4.5rem; font-size:3rem;} #mainVisual .top-swiper .swiper-slide div{margin-top:2.5rem; padding-bottom:16rem; font-size:3.6rem;} #mainVisual .top-swiper .swiper-slide span{right:3rem; bottom:3rem;} #mainVisual .top-swiper .swiper-slide img{height:15rem;} /* #mainVisual .vTxt .top>li{min-width:48rem; padding:4.5rem 5.5rem 2rem;} #mainVisual .vTxt .top>li p{width:16.5rem; height:4.5rem; font-size:3rem;} #mainVisual .vTxt .top>li div{margin-top:2.5rem; padding-bottom:16rem; font-size:3.6rem;} #mainVisual .vTxt .top>li span{right:3rem; bottom:3rem;} #mainVisual .vTxt .top>li img{height:15rem;} */ #mainVisual .swiper-pagination{bottom:10rem;} #mainCont01 .inConts{} #mainCont01 .mainCont01-left{} #mainCont01 .mainCont01-right{} #mainCont01 .swiper-phone{width:100%; max-width:64rem; height:90rem; padding:22.5rem 6.4rem 0 4.4rem; background-image: url('/images/main/phone01_m.png');} #mainCont01 .swiper-phone .logo{left:4.4rem; right:6.4rem; top:7.3rem;} #mainCont01 .swiper-phone .logo img{height:10.5rem;} #mainCont01 .swiper-slide{padding:0 5rem;} #mainCont01 .swiper-slide .title{font-size:5rem;} #mainCont01 .swiper-slide .text{margin-top:2rem; font-size:2.6rem;} #mainCont01 .swiper-slide .icon{height:18rem; margin-top:2.5rem;} #mainCont01 .swiper-slide .icon img{height:12rem;} #mainCont01 .swiper-slide .icon img[src*="m01_01"]{height:10.7rem;} #mainCont01 .swiper-slide>a{height:8rem; font-size:2.6rem;} #mainCont02 .roll-number .roll-number-re{} #mainCont02 .roll-number .roll-number-re>dt{font-size:6rem;} #mainCont02 .roll-number .roll-number-re>dd{font-size:2.6rem; line-height:3.6rem;} #mainCont02 .roll-number .roll-number-re + .roll-number-re:before{height:15rem; margin-top:-7.5rem;} #mainCont02 .m2-swiper .swiper-slide{width:50rem; min-width:50rem; min-height:46rem; padding:4.2rem 3.5rem;} #mainCont02 .m2-swiper .swiper-slide + .swiper-slide{margin-left:3rem;} #mainCont02 .m2-swiper .swiper-slide p{padding-bottom:3rem; font-size:3.6rem;} #mainCont02 .m2-swiper .swiper-slide p>span{font-size:2.6rem;} #mainCont02 .m2-swiper .swiper-slide ul{margin-top:3rem;} #mainCont02 .m2-swiper .swiper-slide ul>li{padding-left:1rem; font-size:2.6rem; line-height:3.8rem;} #mainCont03 .inConts .member-list{margin-top:10rem;} #mainCont03 .m3-swiper .swiper-slide{width:50rem; min-width:50rem;} #mainCont03 .m3-swiper .swiper-slide + .swiper-slide{margin-left:4rem;} #mainCont03 .m3-swiper .swiper-slide>p{left:5rem; top:25%;} #mainCont03 .m3-swiper .swiper-slide:nth-child(even)>p{left:auto; right:5rem;} #mainCont03 .m3-swiper .swiper-slide>p>strong{padding-bottom:4.2rem; font-size:5rem;} #mainCont03 .m3-swiper .swiper-slide>p>strong:before{width: 5.2rem; height: 0.4rem; top:6.8rem;} #mainCont03 .m3-swiper .swiper-slide>p>span{font-size:3rem; line-height:4rem;} #mainCont03 .m3-swiper .swiper-slide>p>i{font-size:2rem;} #mainCont03 .m3-swiper .swiper-slide>.conts{min-height:31.5rem; padding:13rem 5rem 6.5rem;} #mainCont03 .m3-swiper .swiper-slide>.conts ul>li{padding-left:1.3rem; font-size:2.6rem; line-height:3.8rem;} .main-bottom{background-position: right -65vw top -50vw, center bottom;} #mainCont04 .m04-img{margin-top:10rem;} #mainCont04 .m04-img img{height:46rem;} #mainCont05 .hashtag{margin-top:1.5rem;} #mainCont05 .hashtag>dt{font-size:2.6rem; line-height:1.4;} #mainCont05 .hashtag>dd{margin-top:4.5rem; display: flex; flex-flow: row wrap; gap:1rem 0.7rem;} #mainCont05 .hashtag>dd>p{height:5.1rem; padding:0 2rem; font-size:2.2rem; border-radius:99rem;} #mainCont05 .mainCont05-right{width:100%; padding:0 2.5rem;} .phone-form{width:100%; max-width:64rem; margin:0 auto; padding:3.8rem 5rem 5rem;} .phone-form .logo{padding-bottom:2.9rem;} .phone-form .logo img{height:10.5rem;} .phone-form .phone-fild{margin-top:3rem;} .phone-form .tit-line{font-size:2.6rem;} .phone-form input[type=button], .phone-form input[type=text], .phone-form input[type=password], .phone-form input[type=file], .phone-form input[type=submit], .phone-form select, .phone-form textarea{height:7rem; padding:0 2rem; font-size:2.6rem;} .phone-form select{padding-right:5rem; background:#f8f8f8 url('/images/bg_select.svg') no-repeat calc(100% - 2rem) center; background-size:2.5rem;} .phone-form textarea{height:14rem; padding:2rem; line-height:1.55;} .phone-form .title{font-size:2.6rem;} .phone-form .security-code{margin-top:1rem; font-size:2.6rem;} .phone-form .security-code>p{width:13.9rem;} .phone-form .phone-fild-check{} #legal-visual .visual-question .question-conts .pri-check>a, .phone-form .phone-fild-check>a{font-size:2.2rem;} .phone-form .check-new input[type=checkbox]+label, .phone-form .check-new input[type=radio]+label{font-size:2.2rem; line-height:2.2rem;} .phone-form .check-new input[type=checkbox]+label>.graphic, .phone-form .check-new input[type=checkbox]+label>.graphic:before{width: 2.2rem; height: 2.2rem;} .phone-form .m-btn{font-size:2.6rem;} /*[e] Main Style */ /*[s] Sub Style */ /* */ .my-table>table th, .my-table>table td, .my-table .payment>dl>dt, .my-table .payment>dl>dd a{font-size:2.4rem;} .my-table>table th, .my-table>table td, .my-table>table .th{height:7rem;} .my-table>table tfoot>tr>td{font-size:2.6rem;} .my-table>table .btns{width:10rem; height:6rem; font-size:2rem;} .my-table>table input[type=button], .my-table>table input[type=text], .my-table>table input[type=password], .my-table>table input[type=file], .my-table>table input[type=submit], .my-table>table select, .my-table>table textarea, .my-table>table .btns{height:6rem;} .my-table>table select{line-height:6rem;} .my-table>table .btn-payment{padding:1rem; font-size:2.2rem; gap:0 1rem;} .my-table>table .btn-payment img{width:2.6rem;} .my-table .flex-btn a.btn{height:4rem; font-size:2rem;} .my-table .flex-btn .bubble{position: relative;} .my-table .flex-btn .bubble .pop-bubble{padding:0 1.5rem; font-size:1.8rem; line-height:3.5rem;} .my-table .flex-btn .bubble .pop-bubble:before{content: ""; width: 13px; height: 8px; margin-left:-7px; background: url('/images/bg_bubble.png') no-repeat left top; position:absolute; left: 50%; top:100%; box-sizing: border-box;} .my-table .arr-l{left:20px; top:40px;} .my-table .arr-r{right:20px; top:40px;} .my-table .arr-c{bottom:-21px;} .my-table .arr-l img, .my-table .arr-r img{height:28.1rem;} .my-table .arr-c img{height:5.4rem;} .pro-top p{width:100%; display: flex; justify-content: center;} .pro-top p>img{margin-left:-5rem;} .pro-top dl{width:100%; margin-top:4rem;text-align: center;} .pro-top dl>dd{font-size:2.6rem;} .pro-recommend{} .pro-recommend>li{min-height:34rem;} .pro-recommend>li dl{font-size:2.4rem;} :root{ --cw: 20rem; } .circle-line>.circle-line_re{flex:0 1 50%; padding:0 1.5rem; justify-content: center;} .circle-line>.circle-line_re:before{top: calc(10rem - 0.7rem);} .circle-line>.circle-line_re:nth-child(2):before, .circle-line>.circle-line_re:nth-child(4):before{display:none;} .circle-line>.circle-line_re:nth-child(3):before{display:block;} .circle-line .circle-line_re .circle>.step{font-size:2.2rem;} .circle-line .circle-line_re .title{font-size:2.6rem;} #legal-visual .visual-left .title{font-size:4rem;} #legal-visual .visual-left .tel>dt>span{font-size:2.4rem;} #legal-visual .visual-left .tel>dd>strong{font-size:5rem;} #legal-visual .visual-question{--width_in:100%;} #legal-visual .visual-question .question-conts .step{width:9rem; height:4rem; font-size:2.2rem;} #legal-visual .visual-question .question-conts .text{font-size:2.4rem;} #legal-visual .visual-question .question-conts .question-form input[type=button], #legal-visual .visual-question .question-conts .question-form input[type=text], #legal-visual .visual-question .question-conts .question-form input[type=password], #legal-visual .visual-question .question-conts .question-form input[type=file], #legal-visual .visual-question .question-conts .question-form input[type=submit], #legal-visual .visual-question .question-conts .question-form select, #legal-visual .visual-question .question-conts .question-form textarea, #legal-visual .visual-question .question-conts .question-form .btns{height:7rem; padding:1.5rem 2rem;} #legal-visual .visual-question .question-conts .question-form textarea{height:16rem;} #legal-visual .visual-question .question-conts .question-form select{padding:0 3.5rem 0rem 2rem;} #legal-visual .visual-question .question-conts .radio-list>li label{padding-left:3.5rem; font-size:2.4rem;} #legal-visual .visual-question .question-conts .radio-list>li label>p{margin-top:0.5rem; font-size:2rem;} #legal-visual .visual-question .question-conts .gray-box{padding:2rem 2rem;} #legal-visual .visual-question .question-conts .gray-box>dt{font-size:2.4rem;} #legal-visual .visual-question .question-conts .btn-box .click{height:9rem; font-size:2.4rem;} #legal-visual .visual-question .question-conts .q-list>li .q{margin-bottom:2rem; padding-left:3.2rem; font-size:2.4rem;} #legal-visual .visual-question .question-conts .f-list>li label{width:10rem; font-size:2.4rem;} #legal-visual .visual-question .question-conts .f-list>li input, #legal-visual .visual-question .question-conts .f-list>li select{height:7rem !important;} .pg-h3>strong{font-size:4.5rem;} .pg-h3>p{ font-size:2.4rem; line-height:3.4rem;} .legal-expert .legal-expert-roll .swiper-slide{width:40rem; min-width:40rem;} .legal-expert .legal-expert-roll .swiper-slide .name{} .legal-expert .legal-expert-roll .swiper-slide .name>dt{} .legal-expert .legal-expert-roll .swiper-slide .name>dd{font-size:2.4rem;} .legal-expert .swiper-button-box{top:-5rem;} .legal-business .legal-business-roll .swiper-slide{width:39.6rem; min-width:39.6rem;} .legal-business .legal-business-roll .swiper-slide ul>li{font-size:2.8rem;} .legal-search-top{max-width:none;} .legal-search-top .form{} .legal-search-top .form input[type="text"]{height:7.8rem; padding:0 3rem; font-size:2.4rem;} .legal-search-top .form input[type="submit"]{width:11rem;} .legal-search-top .hashtag button{font-size:2.4rem;} .legal-search-list{} .legal-search-list>li{width:calc((100% - 3rem) / 2);} .legal-search-list>li>a{min-height:35.2rem;} .legal-search-list a .title{min-height:6.7rem; font-size:2.6rem;} .legal-search-list a .text{min-height:10rem; font-size:2.4rem;} .legal-search-list a .hashtag p{font-size:2.2rem;} .btn-more{} .btn-more button{width:30rem; height:8rem; font-size:2.4rem;} .markTwo .in{font-size:4.6rem;} .flexLayout .text>dt{font-size:4rem;} .flexLayout .text>dd{font-size:2.6rem; line-height:3.6rem;} .simple-target-radius>.title{font-size:2.8rem;} .simple-target-radius .gray-radius input[type="text"], .simple-target-radius select{height:6rem;} .simple-target-radius .gray-radius input[type="text"].tar{padding:0 2rem;} .simple-target-radius select{padding-right:3.5rem; line-height:1;} .simple-target-radius .box-w180{width:23rem;} .simple-target-radius .num-q{} .simple-target-radius .num-q>li{} .simple-target-radius .num-q>li:before{width: 5rem; height: 3.5rem; margin-top:0; font-size:2rem;} .simple-target-radius .num-q>li.flex-b{padding-right:2rem;} .simple-target-radius .num-q>li>p{font-size:2.4rem; line-height:1.4;} .simple-target-radius .gray-radius{padding:0rem 2rem;} .simple-target-radius .gray-radius>li{} .simple-target-radius .gray-radius>li>p{padding-left:1.8rem; font-size:2.4rem; line-height:1.4;} .simple-target-radius .gray-radius>li>p:before{content: "·"; position:absolute; left: 0.2rem; top:0px;} .simple-target-radius .form01_05{width:100%;} .simple-target-radius .form01_05>p{width:100%; font-size:2.4rem; line-height:1.4;} .simple-target-radius .form01_05>p>strong{width:6.5rem;} .simple-target-radius .simple24{} .simple-target-radius .simple24>.conts>dl{gap:0 2rem;} .simple-target-radius .simple24>.conts>dl>dt{width:10rem; height:4.5rem; font-size:2rem;} .simple-target-radius .simple24>.conts>dl>dt:before{border-width:0.8rem; border-left-width:1rem; border-right-width:0;} .simple-target-radius .simple24>.conts>dl>dd{padding-top:0.6rem; font-size:2.2rem;} .sign-layout .form dl>dt{width:13.5rem; font-size:2.4rem;} .btn-amount{gap:1rem;} .btn-amount a, .btn-amount button{width:10rem; height:5.4rem; font-size:2.2rem;} .btn-amount.center>strong{width:100%; margin-right:0;} .sign-file-down>dd{font-size:2.4rem;} .sign-area{} .sign-area .title{font-size:2.8rem;} .sign-area .text{font-size:2.4rem;} .simple-target-radius .end-text{font-size:2.6rem;} th .tooltip .tooltip-area{left:50%; transform: translateX(-50%);} .tooltip .tooltip-area{width:100%;} .tooltip .tooltip-area .title{font-size:2.8rem;} .tooltip .tooltip-area .text{font-size:2.4rem;} .tooltip .tooltip-area .ps-box{} .simple-step05>dl>dd{font-size:2.4rem;} .menu-two{gap:0.5rem;} .menu-two a{height:8rem; padding:0 1.5rem; font-size:2.4rem;} .guide-faq{} .guide-faq-menu a{min-height:7rem; padding:1rem 1.6rem 1rem 1.9rem; font-size:2.6rem;} .guide-faq-menu .depth03-btn{min-height:5.1rem; padding:0.3rem 1.6rem 0.3rem 3.5rem !important; font-size:2.4rem;} .guide-faq-menu .depth04-btn{min-height:4.3rem; padding:0.2rem 1.6rem 0.2rem 4.7rem !important; font-size:2.3rem; line-height:3.3rem;} .guide-faq-menu .depth04>li+li{margin-top:0.5rem;} .guide-faq-menu .depth05-btn{min-height:auto; padding:0 0 0 1.2rem !important; font-size:2.2rem; line-height:3.2rem;} .guide-faq-menu .depth05>li+li{margin-top:0.5rem;} .guide-faq-btm{gap:3rem 0;} /* store */ .store-area>.store-inj{} .store-area>.store-inj>dl{} .store-area>.store-inj>dl>dt{} .store-area>.store-inj>dl>dd{font-size:2.3rem;} .store-area .store-inj-box{height:23.5rem;} .store-area .store-inj-box img{width:14rem; min-width:14rem;} .store-area .store-inj-box>dl{} .store-area .store-inj-box>dl>dt{font-size:2.4rem; } .store-area .store-inj-box>dl>dd{font-size:2.2rem;} .store-area .store-inj-btn{} .store-area .store-inj-btn>a{font-size:2rem;} .store-table{} .store-table>table{} .store-table>table th, .store-table>table td{font-size:2rem; line-height:1.5;} .store-table>table th{} .store-table>table th:before, .store-table>table td:before{font-size:2.2rem;} .store-table>table .btn{width:12rem; height:4rem; margin:0; font-size:1.8rem;} /* history */ .history-area{} .history-area:before{margin-left:0; left: 0%;} .history-area #his_progress{margin-left:0; left: 0%;} .history-area>li{text-align: left !important; display: block;} .history-area .history-in{width:100%; padding-right:0; text-align: left !important;} .history-area .history-in:before{width: 3rem; height:3rem; left: -1.2rem; top:0.5rem;} .history-area .history-in>strong{font-size:3.2rem;} .history-area .txt_wrap{} .history-area .txt_wrap>p{padding:0 0 0 1.5rem; font-size:2.2rem;} .history-area .txt_wrap>p:before{content: "ㆍ"; position:absolute; left: -0.3rem; top:0px;} .history-area .txt_wrap>p+p{margin-top:1rem;} .history-area>li .thumb{width:100%; margin-top:3rem; padding-right:0; position: relative;} .history-area>li .thumb img{width:100%; height:auto; position: static; } .history-area>li:nth-child(even) .history-in:before{left:-1.2rem; right:auto;} .history-area>li:nth-child(even) .txt_wrap>p{padding:0 0 0 1.5rem;} .history-area>li:nth-child(even) .txt_wrap>p:before{left: -0.3rem; right:auto;} /* etc */ .etc_clause{width:100%; margin:0 auto;} .etc_clause .etc_clause_in{padding:5rem 3rem; border-radius:1rem;} .etc_clause .logo{margin:0;} .etc_clause .txt{padding:2rem 0 6rem; font-size:2.2rem;} .etc_clause .scroll{font-size:2rem;} .etc_select{width:100%;} .etc_select select.base{width:22rem;} /* search */ .search-area{} .search-area .search-re .search-re-tit span{height:4rem; padding:0 2rem; font-size:2rem;} .search-area .search-re .search-re-list .search-link .tit{font-size:2.4rem;} .search-area .search-re .search-re-list .search-link .txt{font-size:2rem;} .search-area .search-re .search-more>a{height:5.1rem; padding:0 3.7rem; font-weight: 600; font-size:2rem;} .search-area .result-group{} .search-area .result-group dl{} .search-area .result-group dl dt{display:none;} .search-area .result-group dl dd{width:100%;} .search-area .result-group dl dd div {} .search-area .result-group dl dd div.title{} .search-area .result-group dl dd div.title a{font-size:2.4rem;} .search-area .result-group dl dd div.title a>h2 {} .search-area .result-group dl dd div.cont{max-height: 5.6rem; margin-top:1rem; font-weight: 400; font-size:2rem; line-height:2.8rem;} .search-area .result-group dl dd div.navi, .result-group dl dd div.navi a{font-size:2rem;} /*[e] Sub Style */ .layer-base.fancybox__content>.carousel__button.is-close, .layer-base.fancybox__content>.carousel__button.is-back{width:4.5rem; height:4.5rem;} #find-expert-lay .scroll{height:100rem;} #find-expert-lay .text-box{font-size:3rem; line-height:4.4rem;} #find-expert-lay .list{gap:4rem 3rem;} #find-expert-lay .list>li{width:calc((100% - 3rem) / 2);} #find-expert-lay .list>li .cate{font-size:2.2rem;} #find-expert-lay .list>li .name{font-size:2.6rem;} #find-expert-lay .find-expert-view .photo-box{width:100%; max-width:none; display: flex; gap:3rem;} #find-expert-lay .find-expert-view .photo-box>dt{max-width:50%;} #find-expert-lay .find-expert-view .photo-box>dd{margin-top:0; font-size:2.4rem; flex-flow: column wrap; justify-content: center;} #find-expert-lay .find-expert-view .photo-box>dd>strong{width:100%; margin-top:1rem;} #find-expert-lay .find-expert-view .history-info{width:100%; height:54.77rem; margin-top:5rem;} #find-expert-lay .find-expert-view .history-info *+h5.bul{margin-top:4rem;} #find-expert-lay .find-expert-view .history-info .txt{font-size:2.4rem;} #success-detail-lay .scroll{height:100rem;} #success-detail-lay .find-expert-view .success-detail-view h3{font-size:3rem;} #success-detail-lay .find-expert-view .success-detail-view h5{font-size:2.6rem;} #success-detail-lay .find-expert-view .success-detail-view p{font-size:2.2rem;} #success-detail-lay .find-expert-view .success-detail-view .txt{font-size:2.4rem;} .add-form-lay .layer-in .text{font-size:2.2rem;} .lay-alert{max-width:90%;} .lay-alert .layer-in .logos img{height:8rem;} .lay-alert .layer-in .text{font-size:2.4rem; line-height:3.6rem;} } @media only screen and (max-width : 640px){ } @media only screen and (max-width : 480px){ #mainCont02 .roll-number .roll-number-re>dt{font-size:5rem;} .my-table>table>thead>tr>th{width:55%;} .my-table>table>thead>tr>th:nth-of-type(2){width:45%;} .my-table .payment{width:calc(45% - 1px);} #find-expert-lay .find-expert-view .history-info{height:53.884rem;} .legal-search-list>li{width:100%;} .lay-alert{max-width:100%;} } @media only screen and (max-width : 400px){ #find-expert-lay .find-expert-view .history-info{height:61.27rem;} } /* transform: scale(1.1) 부분을 transform: scale(1.1) rotate(.001deg); 로 변경하면 부드럽게 처리되네요 display: flex; flex-flow: row wrap; align-items: center; justify-content: center; display: flex; flex-flow: column wrap; align-items: center; justify-content: center; flex-flow: column wrap; align-content: center; justify-content: space-between; justify-content: space-around; flex-wrap: wrap; transform:rotate(180deg); transform: translateY(-50%); transform: scale(1) filter:grayscale(100%); -webkit-filter:grayscale(100%); backdrop-filter: blur(50px); transition: all .5s linear; transition: all .5s ease-out; transition-delay: .8s; :before{content: ""; width: 24px; height: 24px; background-color: #fff; border:1px solid #666; display: inline-block; position:absolute; left: 0; top:0px; box-sizing: border-box;} display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; //한줄 감추기 display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break:break-all; //두줄 감추기 active border-radius:2px; width:calc(100% / 6); box-shadow:0 0 1rem rgba(0,0,0,0.2); */