/* css */ @import url("board.css"); @import url("swiper.min.css"); /* ■■■■■■■■ COMMON ■■■■■■■■ */ section{ position: relative; /*width: 100vw; */overflow: hidden; } .inner{ padding: 0 20px; } .hide { display: none;} .header .menu{padding-top:0; } .header .menu .gnb{background: #fff;} .hbanner{padding:5px;font-size:13px;color:#111;font-weight:300;text-align:center;background:#efefef;} .h-wrap{background:#002C6E;} .h-wrap a{color:#fff;} .h-wrap-login{padding:10px 7%;border-bottom:1px solid #3a5242} .h-wrap-login a{color:#fff;font-size:13px;} .menu-util{position:absolute;right:16px;top:18px;} .menu-util li{display:inline-block;width:20px;height:20px;margin:0 4px;text-indent:-9999em;} .menu-util li.sch a{display:block;background: url(/images/common/ico-search.svg) 50% / 96% no-repeat;} .menu-util li.cart a{display:block;background: url(/images/common/ico-cart.svg) 50% / 96% no-repeat;} .menu-util .menu-open{} .menu-util .menu-open.active{display:block;width:18px;height:18px;top:9px;background:url('/images/common/ico-nav-close.png') 50% / 18px no-repeat;z-index:99;} .dpth2-wrap .dpth2 a{padding-left: 5px;font-size:14px;} .header .dpth1-wrap{position: relative; height:calc(100vh - 170px);padding-bottom:150px;overflow-y:scroll;} .header .gnb .dpth1{} .header .gnb .dpth1 > li > a{font-size:16px;font-weight:400;} .header .gnb .dpth1 > li>a[href="javascript:void(0)"]:before{display: none;} .header .gnb .dpth1 > li>a[href="javascript:void(0)"]:after{display: block; content: ''; width: 14px; height: 10px; position: absolute; top: 50%; right: 0; background:url('/images/common/ico_slt.png') 50% / 14px no-repeat;transform: rotate(0); transition: 0.4s;} .header .gnb .dpth1 > li.active>a[href="javascript:void(0)"]:after{transform: rotate(-180deg);} .total-sch{display:none;position:fixed;left:0;right:0;top:60px;width: 100%;height: 48px;padding-left: 14px;border: solid 1px #222;border-radius: 6px;background-color: #fff;box-shadow: inset 0 0 0 1px #f7f7f7;z-index:99;} .total-sch > *{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-align-items: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: justify;-webkit-justify-content: space-between;justify-content: space-between;} .total-sch input[type=text] {background-color: inherit;border: none;outline: none;font-size: 14px;letter-spacing: -.33px;} .total-sch button { position: relative; width: 30px; height: 25px; margin: 10px; bottom: 0; text-indent:-9999em; background:url('/images/board/ico-search.png') 50% / 20px no-repeat; } .total-sch button.btn-close {position:absolute;right:3px;top:47px;width: auto;height: 23px;text-indent:0;margin:0;padding:0 20px 0 5px;font-size: 12px;background:#fff url('/images/common/btn-close.png') right 5px top 50% / 10px no-repeat; border: 1px solid #c9c9c9;} .total-menu{position:fixed;display: block;left:0;right:0;top:60px;width: 100%;padding-left:40px;border-bottom: solid 1px #222;background-color: #fff;box-shadow: inset 0 0 0 1px #f7f7f7;z-index:90;} .total-menu:after{content:'';position:absolute;right:0;top:0;width:16px;height:100%;border-left:1px solid #B8CAD9;background:#fff url('/images/common/arrow_right.png') right 4px top 50% / 8px no-repeat;} .total-menu .menu-open{position:absolute;left:15px;top:18px;} .total-menu ul { height: 54px; padding: 0px 1.125rem; font-size: 0.938rem; color: rgb(102, 102, 102); box-shadow: rgb(221 221 221) 0px -0.5px 0px 0px inset; display: flex; transition-property: transform; box-sizing: content-box;overflow-x:scroll; } .total-menu ul li { flex-shrink: 0; width: auto; height: 100%;margin-right:15px; position: relative; transition-property: transform; } .total-menu ul a { position: relative; height: 100%; display: flex;font-size:13px; padding:0 5px; -webkit-box-align: center; align-items: center; } .total-menu ul a.active{font-weight:500;} .subcontents{padding-top:60px;} .footer-fix { position: fixed; z-index: 21; left: 0px; bottom: 0px; display: flex; width: 100%; height: 45px; border-top: 1px solid rgb(221, 221, 221); background:#111; z-index:9999; } .footer-fix .menu.open { transform: translateX(0);} .footer-fix li { position: relative; flex: 1 1 25%; overflow: hidden; height: 100%; padding: 0px 16px; text-align:center; color: rgb(51, 51, 51); } .footer-fix li.active{} .footer-fix li a{ display: block; margin: 10px auto; font-size:14px; color:#fff; } .ico-f-home a{background:url('/images/common/ico-home.png') 50% / 24px no-repeat;} .ico-f-home.active a{background:url('/images/common/ico-home-active.png') 50% / 24px no-repeat;} .ico-f-menu a{background:url('/images/common/ico-menu.png') 50% / 24px no-repeat;} .ico-f-sch a{background:url('/images/common/ico-search.png') 50% / 24px no-repeat;} .ico-f-my a{background:url('/images/common/ico-my.png') 50% / 24px no-repeat;} .header .gnb .dpth1 > li > a .ir{width:22px;height:22px;margin-right:10px;background:url('/images/common/ico-h01.png') 50% / 100% no-repeat;} .ico-h01{background-image:url('/images/common/ico-h01.png');} .ico-h02{background-image:url('/images/common/ico-h02.png') !important;} .ico-h03{background-image:url('/images/common/ico-h03.png') !important;} .ico-h04{background-image:url('/images/common/ico-h04.png') !important;} .ico-h05{background-image:url('/images/common/ico-h05.png') !important;} .ico-h06{background-image:url('/images/common/ico-h06.png') !important;} .ico-h07{background-image:url('/images/common/ico-h07.png') !important;} .ico-h08{background-image:url('/images/common/ico-h08.png') !important;} .ico-h09{background-image:url('/images/common/ico-h09.png') !important;} .ico-h10{background-image:url('/images/common/ico-h10.png') !important;} /* } 헤더 */ /* ■■■■■■■■ MAIN ■■■■■■■■ */ /* common */ .logo{width:60px;} .main input, .main select, .main label, .main label::before, .main label::after{ transition: 0.0s; } .main-visual{ height: calc(100vh - 50px); } .btn-type-bx{display:inline-block;min-width:120px;padding:5px;font-size:14px;text-align:center;border:1px solid #222;} .w-100 { width: 100%;} /* ■■ 2022-07-28 MAIN NEW ■■ */ .main-container > section:nth-child(2n+2){margin:50px 0;} .main-tit{margin-bottom:10px;padding-bottom:10px;color: #222;font-size:1.4em;} .main-visual-wrap{position:relative; padding-top:50px; z-index:10;} .main-visual-wrap li{position:relative;width:100%;background-size:cover !important;} .main-visual-wrap li > div {position:relative; left:50%;height: 100%; color:#fff;transform:translateX(-50%);} .main-visual-wrap li img{width:100%;object-fit: cover;} .main-visual-wrap p{font-size:30px;font-weight:500;} .main-visual-wrap dl dt{margin-top:15px;font-size:60px;} .main-visual-wrap dl dt span{position:relative;} .main-visual-wrap dl dt span:after{content:'';position:absolute;right:-36px;top:-36px;width:74px;height:74px;background:#9FB0BF;z-index:-1;border-radius:50%;} .main-visual-wrap dl dd{font-size:100px;line-height:1.2;} .main-visual-wrap .button-next, .main-visual-wrap .button-prev{position:absolute;top:50%;z-index:99;transform:translateY(-50%);} .main-visual-wrap .button-next, .main-visual-wrap .button-prev{display:inline-block;width:22px;height:89px;cursor:pointer;} .main-visual-wrap .button-prev{left:20px;background:url(/images/common/btn-slide-arrow-prev-i.png) 50% / 100% no-repeat;} .main-visual-wrap .button-next{right:20px;background:url(/images/common/btn-slide-arrow-next-i.png) 50% / 100% no-repeat;} .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{transition: width 0.6s;border-radius:99px;} .main-visual-wrap .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active{width:26px;background:rgba(255,255,255,0.8);} .main-visual-wrap .swiper-pagination{bottom:10px;} .main-product-wrap{} .main-product-wrap .inner{} .main-product-wrap ul{} .main-product-wrap ul li{position:relative;} .main-product-wrap ul li img{width:100%;height:50vw;object-fit: cover;border:1px solid #eee;} .main-product-wrap ul li .prd-name{margin-top:10px;font-weight:500;} .main-product-wrap ul li .prd-price{} .main-product-wrap .button-next, .main-product-wrap .button-prev{position:absolute;top:0;z-index:99;} .main-product-wrap .button-next, .main-product-wrap .button-prev{display:inline-block;width:24px;height:30px;cursor:pointer;} .main-product-wrap .button-prev{right:54px;background:url(../../images/common/btn-arrow-left-bk-m.png) 50% / 100% no-repeat;} .main-product-wrap .button-next{right:20px;background:url(../../images/common/btn-arrow-right-bk-m.png) 50% / 100% no-repeat;} .main-product-wrap .button-next.swiper-button-disabled, .main-product-wrap .button-prev.swiper-button-disabled{filter: grayscale(100%);opacity:.5;} .main-banner-wrap{} .main-banner-wrap ul{display:block;} .main-banner-wrap ul li{position:relative;margin-top:10px;color:#fff;justify-content: center;align-items: center;text-align:center;} .main-banner-wrap ul li dl{position:relative;z-index:1;} .main-banner-wrap ul li dt{font-size:6.8vw;font-family: 'Allura', cursive;} .main-banner-wrap ul li dd{font-size:3.2vw;} .main-banner-wrap ul li:after{position:absolute;content:'';display:block;width:100%;height:100%;} .main-video-wrap{padding:50px 0;text-align:center;background-color:#D49F96;line-height:0;} .main-video-wrap iframe{width:100%;height:55vw;} .main-banner-wrap-02{text-align:center;} .main-banner-wrap-02 .inner{padding:50px 10px;background:#f4f4f4;} .banner02-tit{color:#666;font-size:20px;font-family: 'Allura', cursive;} .banner02-txt{margin-top:10px;padding:0 30px;} .banner02-txt dt{font-size:28px;font-weight:500;text-transform: uppercase;line-height:1.4;font-family: 'SBAggroM','Noto Sans KR', 'Roboto', Tahoma, Geneva, sans-serif;} .banner02-txt dd{margin-top:10px;color:#999;} .main-banner-wrap-02 .button-next, .main-banner-wrap-02 .button-prev{position:absolute;top:50%;z-index:99;} .main-banner-wrap-02 .button-next, .main-banner-wrap-02 .button-prev{display:inline-block;width:28px;height:30px;cursor:pointer;transform:translateY(-50%);} .main-banner-wrap-02 .button-prev{left:0;background:url(/images/common/btn-arrow-left-bk.png) 50% / 100% no-repeat;} .main-banner-wrap-02 .button-next{right:0;background:url(/images/common/btn-arrow-right-bk.png) 50% / 100% no-repeat;} .main-banner-wrap-02 .button-next.swiper-button-disabled, .main-banner-wrap-02 .button-prev.swiper-button-disabled{filter: grayscale(100%);opacity:.5;} .main-banner-wrap-02 .swiper-pagination{width:calc(100% - 20px);bottom:10px;} .main-banner-wrap-02 .swiper-pagination span{margin:0 2px;} .main-slogan-wrap{padding:50px 0;color:#fff;background:url(/images/temp/img_about.jpg) 50% / cover no-repeat;} .slogan-tit{font-size:16vw;font-family: 'Allura', cursive;line-height:1.3;} .slogan-txt{margin-bottom:40px;font-size:14px;} .main-slogan-wrap .btn-type-bx{position:relative;color:#fff;border:1px solid #fff;} .main-slogan-wrap .btn-type-bx:after{position:absolute;content:'';display:block;width:100%;height:100%;bottom:-5px;right:-5px;background:rgba(255,255,255,0.2);} .main-review-wrap{padding-bottom:50px;} .main-review-bx {background-color: rgb(255, 255, 255);} .main-review-bx img{width:100%;height:40vw;object-fit: cover;} .main-review-bx p{color:#999;font-size:12px;} .main-review-bx p em{display:inline-block;font-size:12px;margin-top:-7px;padding:0 4px;vertical-align:middle;} .main-review-bx dl dt{color:#000;font-size:16px;font-weight:700;line-height:1.4;display:block;overflow:hidden;text-overflow:ellipsis;height:1.4em;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-wrap:break-word;} .main-review-bx dl dd{margin-top:15px;color:#666;font-size:14px;display:block;overflow:hidden;text-overflow:ellipsis;height:6em;word-wrap:break-word;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;} .main-review-wrap .button-next, .main-review-wrap .button-prev{position:absolute;top:0;z-index:99;} .main-review-wrap .button-next, .main-review-wrap .button-prev{display:inline-block;width:20px;height:30px;cursor:pointer;} .main-review-wrap .button-prev{right:60px;background:url(/images/common/btn-arrow-left.png) 50% / 100% no-repeat;} .main-review-wrap .button-next{right:20px;background:url(/images/common/btn-arrow-right.png) 50% / 100% no-repeat;} .main-review-wrap .button-next.swiper-button-disabled, .main-review-wrap .button-prev.swiper-button-disabled{filter: grayscale(100%);opacity:.7;} /* ■■ 2022-07-28 MAIN NEW ■■ */ .ir{display:inline-block;vertical-align:middle;} .view-more{display: block; width: 220px; height: 40px; line-height: 38px; color: #8B9F8B; background: transparent; border: 1px solid #8B9F8B; font-size:14px; font-weight:700; text-align: center; border-radius: 35px; transition: all .3s;} .view-more:hover{background: #8B9F8B;color: #fff;} .view-more .ir{width:8px;height:14px;margin:-2px 0 0 10px;background:url(../../images/common/ico-nav-arrow.png) 0% / contain no-repeat;} .view-more:hover .ir { background-image: url(../../images/common/ico-nav-arrow-active.png);} .view-more-main { width: 100px; border: 0;} .view-more-main .ir{width: 15px;height: 15px;background-image: url(/images/common/btn-more-view.png);} .view-more-main:hover { background: none; color: #8B9F8B;} .view-more-main:hover .ir {background-image: url(/images/common/btn-more-view.png)} /* ■■■■■■■■ subcontents ■■■■■■■■ */ #pop_container{max-width:800px;width:100%; height:auto; margin:0px auto; padding:20px;} .subcontents{color:#666;font-size:14px;line-height:1.6;} .snb ul{display:flex;justify-content:center;border-bottom:1px solid #B8CAD9;} .snb ul li{margin:0 20px;} .snb ul a{display:block;padding:20px 15px;font-size:17px;font-weight:500;} .snb ul .active{border-bottom:2px solid #9FB0BF;} .snb ul .active a {color:#9FB0BF;} .inner-padding{padding-top:45px;padding-bottom: 45px;} /* 제품소개 */ .product-info-top{color:#fff;line-height:1.4;height: calc(100vh - 50px);/*background: url(../../images/contents/bg-product-info.jpg) 50% / cover no-repeat;*/;overflow: hidden;} .product-info-top .inner{position:absolute;width:100%;height:100%;display:flex;text-align:center; text-align: center;flex-direction: column;align-items: center;justify-content: center;z-index:1;} .product-info-top h2{color:#fff;font-size:25px;font-weight:400;} .product-info-top img.logo{width:162px;margin-top:25px;} .product-info-top video { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 100vh;} .product-info-tit{padding:40px 0;color:#000;font-size:26px;text-align:center;} .product-info-tit span{position:relative;display:inline-block;} .product-info-tit span:before{content:'';position:absolute;display:block;top: 5px;margin-left: -5px;width:32px;height:32px;background:url(/images/contents/point-cir.png) 50% / cover no-repeat;} .list-footnote{} .list-footnote li{position:relative;} .list-footnote li + li{margin-top:10px;} .list-footnote li em{/*position:absolute;left:15%;*/} .list-footnote li:nth-child(1){padding-left:15px;} .list-footnote li:nth-child(2){padding-left:20px;} .list-footnote li:nth-child(3){padding-left:25px;} .product-info-03 h2 span{padding:0 10px 5px 0;background:url(../../images/contents/txt-line.png) 100% 100% /131px 16px no-repeat;} .product-info-03 img{margin:25px 0 45px;max-width: 70%;} .product-info-03 p { font-size: 15px;} .product-info-04 .brand-story-02-01 {text-align: center;} .product-info-04 .brand-story-02-02 {text-align: center;} .product-info-04 .brand-story-02-02 .inner{align-items: flex-start} .product-info-05{position:relative;} .product-info-05:before{content:'';position:absolute;top:0;left:0;right:0;height:240px;background:#f2f8ff;z-index:-1;} .product-info-04 .brand-story-02-02-group .swiper-container { padding: 10px;} .product-info-04 .brand-story-02-02-group .swiper-slide { width: 55%; } .product-info-04 .brand-story-02-02-bx { padding: 20px 15px; background: #fff; border-radius: 4px; box-shadow: 0px 5px 13px 0px rgb(0 0 0 / 13%); } .product-info-04 .brand-story-02-02-group img{width:150px;height:150px;border-radius:50%;object-fit: cover;} .product-info-04 .brand-story-02-02-group dl{margin-bottom:30px;} .product-info-04 .brand-story-02-02-group dl:last-child{margin-bottom:0px;} .product-info-04 .brand-story-02-02-group dl dt{margin-bottom:20px;text-align: center;} .product-info-04 .brand-story-02-02-group dl dd { text-align: center;} .product-info-04 .brand-story-02-02-group .name{font-size:16px;color:#000;font-weight:700;} .product-info-04 .brand-story-02-02-group .txt{color:#666;font-size:12px;} .product-info-04 .brand-story-02-02-group .txt:last-child { font-size: 14px;} .app-down-btn-wrap{margin:auto;} .app-down-btn-wrap ul{display:flex;flex-wrap: wrap;justify-content: space-between;} .app-down-btn-wrap ul li{width:100%;margin-top:12px;} .app-down-btn-wrap ul li:nth-child(-n+2){width:49%;} .app-down-btn-wrap .btn{display:block;height:45px;line-height:43px;font-weight: bold;border-radius:10px;} /* 측정시스템 소개 */ .system-info-top{color:#fff;line-height:1.4;background: url(../../images/contents/bg-system-info.jpg) 50% / cover no-repeat;} .system-info-top > div{width:100%;height:100%;display:flex;flex-direction: column;justify-content: center;padding:100px 0px;} .system-info-top h2{color:#fff;font-weight:400;} .system-info-top img.logo{width:324px;margin-top:50px;} .system-info-02{counter-reset:list-number;} .system-info-02 h3{counter-increment:list-number;} .system-info-02 h3:before{content:'0'counter(list-number);display:block;margin-bottom:10px;color:#666;font-size:17px;font-weight:400;line-height:1.2;} .system-info-02 > div{padding:40px 0;} .system-info-02 > div h3{font-size:20px;} .system-info-02 > div .inner .brand-develop-03-con{padding-left:70px;} .system-info-02 > div .brand-develop-03-con{width:50%;line-height:2;} .system-info-02 > div:nth-child(even) .inner{flex-direction: row-reverse;} .system-info-02 > div:nth-child(1){padding-top:0} /* .system-info-02 > div:nth-child(2){background:url(../../images/contents/img-system-info-02-02.png) 50% / cover no-repeat;} */ .system-info-02 > .system-info-02-02{background:url(../../images/contents/img-system-info-02-02.png) 50% / cover repeat-x; animation: mainSystemAni 10s linear infinite;} @keyframes mainSystemAni { 0% { background-position-x : 0} 100% { background-position-x : 100vw;} } .system-info-02 > .system-info-02-02 .inner{display: flex;align-items: center; height: 430px;} .system-info-02 > .system-info-02-02 .inner .system-info-02-con{width:100%;} .system-info-02 p{padding:45px 0 0;} .system-info-02-con{padding-top: 25px;} .system-info-02-03 .inner .system-info-02-con{} .system-info-02-con p{padding:25px 0 0;} .satisfaction-wrap{margin:75px 0 40px;text-align:center;} .satisfaction-wrap ul{display:flex;justify-content: center;} .satisfaction-wrap ul li{display:flex;width:100px;height:100px;margin:0 2px;color:#fff;font-weight:700;justify-content: center;align-items: center;flex-direction: column;border-radius:50%;} .satisfaction-wrap ul li span{font-size:16px;line-height:1;} .satisfaction-wrap ul li p{padding:7px 0 0;font-size:26px;line-height:1;} .satisfaction-wrap ul li:nth-child(1){background:#000;} .satisfaction-wrap ul li:nth-child(2){background-image: -moz-linear-gradient( 60deg, rgb(0,49,127) 0%, rgb(0,49,127) 0%, rgb(100,146,205) 73%);background-image: -webkit-linear-gradient( 60deg, rgb(0,49,127) 0%, rgb(0,49,127) 0%, rgb(100,146,205) 73%);background-image: -ms-linear-gradient( 60deg, rgb(0,49,127) 0%, rgb(0,49,127) 0%, rgb(100,146,205) 73%);} .satisfaction-wrap ul li:nth-child(3){background-image: -moz-linear-gradient( 60deg, rgb(143,252,160) 0%, rgb(11,203,251) 100%);background-image: -webkit-linear-gradient( 60deg, rgb(143,252,160) 0%, rgb(11,203,251) 100%);background-image: -ms-linear-gradient( 60deg, rgb(143,252,160) 0%, rgb(11,203,251) 100%);} .satisfaction-wrap .btn{width: 100%;margin-top:40px;font-weight:700;border-width:2px;line-height: 45px;border-radius:10px;transition: all .3s;} /* FAQ */ .commu-search-wrap{margin:0 -20px;padding:20px;text-align:center;background:#f8f8f8;} .commu-search-wrap .moreinq {padding: 20px 0 0; color: #222; font-size:14px;text-align: center;} .commu-search-wrap .moreinq a{margin-left: 14px;height: 32px; color: #333;padding: 4px 16px;line-height: 30px;font-size: 14px;border-radius: 32px;border: 1px solid #222;} .commu-search-bx { position: relative; width: 100%; margin: 0 auto; padding-right: 60px; border: 1px solid #B8CAD9;background:#fff;border-radius: 4px; } .commu-search-bx .searchTxt { width: 100%; height: 40px; border: 0;font-size:14px; } .commu-search-bx .searchTxt::placeholder{color:#999;} .commu-search-bx .searchBtn { position: absolute; top: 0; right: 0; width: 40px; height: 40px; background: url('/images/common/ico-search.png') no-repeat 50% 50% / 50%; font-size: 0;text-indent:-9999em; } /* FAQ > 탭 */ .tab-bxbx{margin:40px -20px 0;} .tab-bxbx .tab-bxbx-list{display:flex;flex-wrap: wrap;} .tab-bxbx .tab-bxbx-list > li{font-size:15px;text-align:center;} .tab-bxbx .tab-bxbx-list > li:first-child:nth-last-child(2), .tab-bxbx .tab-bxbx-list > li:first-child:nth-last-child(2) ~ li {width: calc(100% / 2);} .tab-bxbx .tab-bxbx-list > li:first-child:nth-last-child(3), .tab-bxbx .tab-bxbx-list > li:first-child:nth-last-child(3) ~ li {width: calc(100% / 3);} .tab-bxbx .tab-bxbx-list > li:first-child:nth-last-child(4), .tab-bxbx .tab-bxbx-list > li:first-child:nth-last-child(4) ~ li {width: calc(100% / 4);} .tab-bxbx .tab-bxbx-list > li:first-child:nth-last-child(5), .tab-bxbx .tab-bxbx-list > li:first-child:nth-last-child(5) ~ li {width: calc(100% / 5);} .tab-bxbx .tab-bxbx-list > li:first-child:nth-last-child(6), .tab-bxbx .tab-bxbx-list > li:first-child:nth-last-child(6) ~ li {width: calc(100% / 6);} .tab-bxbx .tab-bxbx-list > li:first-child:nth-last-child(7), .tab-bxbx .tab-bxbx-list > li:first-child:nth-last-child(7) ~ li {width: calc(100% / 7);} .tab-bxbx .tab-bxbx-list > li:first-child:nth-last-child(8), .tab-bxbx .tab-bxbx-list > li:first-child:nth-last-child(8) ~ li {width: calc(100% / 8);} .tab-bxbx .tab-bxbx-list > li:first-child:nth-last-child(9), .tab-bxbx .tab-bxbx-list > li:first-child:nth-last-child(9) ~ li {width: calc(100% / 9);} .tab-bxbx .tab-bxbx-list > li:first-child:nth-last-child(10), .tab-bxbx .tab-bxbx-list > li:first-child:nth-last-child(10) ~ li {width: calc(100% / 10);} .tab-bxbx .tab-bxbx-list > li a{display:block;padding:8px 20px; color:#222;border:1px solid #9db5d9;} .tab-bxbx .tab-bxbx-list > li + li a{border-left:0;} .tab-bxbx .tab-bxbx-list > li.active a{color:#fff; background:#77A6ED;border-color:#9db5d9;} .tab-bxbx.tab-bxbx-sm{padding:20px;overflow-x:scroll;} .tab-bxbx.tab-bxbx-sm .tab-bxbx-list{display:block;background:#fff;white-space:nowrap;} .tab-bxbx.tab-bxbx-sm .tab-bxbx-list > li{display:inline-block;width:auto !important;min-width:90px;} .tab-bxbx.tab-bxbx-sm .tab-bxbx-list > li + li{margin-left:8px} .tab-bxbx.tab-bxbx-sm .tab-bxbx-list > li a{display:block;padding:6px 10px;font-size:14px;border-color:#dcdcdc;border-radius:99px;} .tab-bxbx.tab-bxbx-sm .tab-bxbx-list > li + li a{border-left:1px solid #dcdcdc;} /* FAQ > 제목 및 세부리스트 */ .faq-list-head{display:none;margin-top:70px; } .faq-list-head .tit{ display: inline-block; color:#222;font-size:1.6em; line-height:1.2;vertical-align: bottom;} .faq-list-head .list { display: inline-block; margin-left: 30px; vertical-align: bottom;} .faq-list-head .list button{ color:#222; font-size:15px; letter-spacing:-1px;} .faq-list-head .list button.active{ color:#4D8C65;} .faq-list-head .list span { position: relative; display: inline-block; line-height: 1;} .faq-list-head .list span + span { margin-left: 11px; padding-left: 15px;} .faq-list-head .list span + span:after { content: ""; position: absolute; top: 3px; left: 0; height: 13px; border-left: 1px solid #dcdcdc;} /* FAQ > 목록 */ .folderList{color:#000;border-top:2px solid #222;} .folderList.faq .faq_q, .folderList.faq .faq_a{position:relative;} .faq_q > div{position:relative;} .faq_q > div:after{ content: ""; position: absolute; top: 5px; right: 0; width: 16px;height:16px; background:url(/images/common/icon-arrow-down2.png) 50% no-repeat;} .open .faq_q > div:after{transform: rotateX(-180deg);} .faq_a > div{position:relative;} .faq_a > div .asw-content{} .faq-cate{display:none;position:absolute;left:0;color:#444;} .folderList .q{display:none;font-size:18px;font-weight:700;} .folderList .a{color:#fff;font-size:13px;font-weight:300;padding:2px 6px;background:#77A6ED;border-radius:4px;} .folderList.faq li{border-bottom:1px solid #dcdcdc;background:#fff;} .folderList.faq li > p{cursor:pointer;} .folderList.faq .faq_q{padding:15px;cursor:pointer;} .folderList.faq .faq_a{padding:15px;background:#f6f6f6} .folderList.faq .open .faq_q{font-weight:500;} :root{--swiper-theme-color:#9FB0BF;} .ir.ico-note-sky{width:28px;height:28px;margin:-4px 2px 0 0;background:url(/images/common/ico-note-sky.png) 50% / 16px no-repeat;} /*} 2022-06-08 */ /* 커뮤니티 2022-06-02 */ .community-wrap .tit5{margin-bottom:20px;padding-bottom:40px; font-size: 24px; text-align:center; } .community-wrap .tit5 span{display:block;color:#bbb;font-size:14px;} .community-hospital h3{} .community-hospital h3 .fwb{color:#bbb;font-size:20px;} .bx-tit{margin-bottom:60px;padding:10px;color:#fff;font-size:16px;background:#00317e;} .plain-tit{margin-bottom:20px;color:#000;font-size:24px;} .plain-tit span{color:#666;font-size:20px;} .hospital-txt{margin:0 -20px 40px;padding:40px 20px;color:#000;border-bottom:6px solid #f5f5f5;background:url(/images/contents/bg-docsole-plus.png) right 10px top 100% / 50% no-repeat;} .hospital-txt span{color:#9FB0BF;font-size:16px;font-weight:700;background:#e8eff8;} .hospital-txt dt{padding-bottom:0.4em;} .board-contents-item .like{position:absolute;top:14px;right:14px;} .like{padding:10px 30px;color:#fff;font-size:15px;font-weight:600;border-radius:99px;background-color:#2a345e;box-shadow: 1.5px 2.598px 7px 0px rgba(0, 0, 0, 0.15),inset 0px 5px 10px 0px rgba(185, 193, 223, 0.1);z-index:2;cursor:pointer;} .like i{display:inline-block;width:20px;height:17px;margin:-4px 4px 0 0;background: url(/img/sub/btn-like.png) no-repeat; text-indent:-9000em;} .board-contents{display:flex;margin-top:50px;flex-wrap: wrap;} .board-contents-item{position:relative;width:100%;padding-bottom:30px;margin:0 0 30px;border-bottom:1px solid #B8CAD9;} .board-contents-item a{display:block;transition: 0.3s ease-in-out;} .board-contents-item img{overflow:hidden;position:relative;background:#f4f4f4;border:1px solid rgb(187, 187, 187);border-radius: 4px;transition: 0.3s ease-in-out;} .board-contents-item img{width:100%;height:50vw;object-fit:cover;} .board-contents-item .tit{position:relative;padding:10px 0 5px;color:#000;font-size:17px;font-weight:700;line-height:1.4;} .board-contents-item .tit p{display:inline;line-height:1.4;} .board-contents-item .txt{margin-bottom:10px;color:#666;font-size:15px;} .board-contents-item .txt{display:block;overflow:hidden;text-overflow:ellipsis;height:3.4em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-wrap:break-word;} .board-contents-item .date{color:#666;font-size:15px;} .board-contents-item:hover a.img{box-shadow: 0.3px 1px 11.04px 0.5px rgba(0, 0, 0, 0.36);} .board-contents-item:hover .tit, .board-contents-item:hover .date{color:#00317e;} .page-board-more{} .page-board-more .btn{display:block;width:100%;color:#9FB0BF;font-size:16px;font-weight:700;text-align:center;} .page-board-more i{width:12px;height:10px;background: url(/images/common/ico-more-down.png) 50% / 100% no-repeat;} .community-wrap .boardView{border-top:1px solid #B8CAD9;} .community-wrap .boardView thead{} .community-wrap .boardView th{padding: 15px 0 20px;} .community-wrap .viewDetail{} .community-certificate{} .community-wrap .tit5.bd0{margin-bottom:0;border-bottom:0;} .interview-view-faq{margin-top:50px;} .interview-view-faq dl{margin-bottom:50px;color:#000;} .interview-view-faq dl dt{padding-bottom:15px;font-size:17px;font-weight:500;} .interview-view-faq dl dt:before{content:'Q';padding-right:5px;font-weight:700;vertical-align: initial;vertical-align: inherit;} .interview-view-faq dl dd{font-size:15px;} .bgOverlay{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background:rgba(0,0,0,0.60);z-index:99;} .review-view-pop{position:fixed;top:50%;left:0;right:0;width:80%;margin:auto;background:#fff;z-index:-999;transform: translateY(-50%);} .review-view-pop .guide-pop-close{position:fixed;top:-40px;right:0;width:30px;height:30px;text-indent:-9999em;background:url(/images/common/ico-close-w.png) 50% no-repeat;z-index:101;} .review-view-pop .review-date{color:#999;font-size:13px;} .review-view-pop .review-date em{display:inline-block;font-size:12px;margin-top:-7px;padding:0 10px;vertical-align:middle;} .review-view-pop dl dt{margin-bottom:10px;padding-bottom:10px;color:#000;font-size:17px;font-weight:500;border-bottom:1px solid #eee;} .review-view-pop dl dd{color:#666;font-size:15px;height:100px;overflow-y:scroll;} .review-view-pop .review-info{padding:20px;} .swiper-gallery img{width:100%;height:50vw;object-fit:cover;} .swiper-thumb{width:200px;margin:20px auto 0;} .swiper-thumb img{width:50px;height:50px;} .review-view-pop .pop-next, .review-view-pop .pop-prev{position:fixed;top:40%;width:26px;height:49px;text-indent:-9999em;z-index:101;} .review-view-pop .pop-next{right:-35px;background:url(/images/common/btn-next-page.png) 50% / 14px no-repeat;} .review-view-pop .pop-prev{left:-35px;background:url(/images/common/btn-prev-page.png) 50% / 14px no-repeat;} .review-image-slide{overflow:hidden;} .review-image-slide .swiper-slide{opacity:0.5;} .review-image-slide .swiper-slide.swiper-slide-thumb-active{opacity:1;} .review-gallery img{width:100%;height:60vw;object-fit: cover;} .certificate-bx, .certificate-test-bx{color:#000;font-weight:500;} .certificate-bx{display:flex;flex-wrap: wrap;text-align:center;} .certificate-bx p{padding:10px 0 25px;} .certificate-bx li{width:calc((100% - 20px) / 2);margin-left:20px;} .certificate-bx li:nth-child(2n+1){margin-left:0;} .certificate-test-bx{display:flex;flex-wrap: wrap;text-align:center;} .certificate-test-bx p{padding:10px 0 25px;} .certificate-test-bx p span{display:block;color:#666;font-size:13px;} .certificate-test-bx li{width:calc((100% - 20px) / 2);margin-left:20px;} .certificate-test-bx li:nth-child(2n+1){margin-left:0;} .certificate-test-bx.certificate-test-bx-2 li{width:100%;margin-left:0;} @keyframes btn-ripple { 100% {top: -20px;right: -20px;bottom: -20px;left: -20px;opacity: 0;} } /* 로그인 */ .sub-member-wrap{display:flex;min-height:calc(100% - 200px);padding:120px 10px 40px; background: url(/images/contents/login_bg.jpg) 50% / cover no-repeat;flex-direction: column;justify-content:center;align-items:center;} .sub-member-wrap .logo{width:144px;} .sub-member-wrap .form-bx{width: 100%;margin-top:20px;padding:20px;border-radius: 4px;background-color: rgba(0, 0, 0, .6); box-shadow: 0px 8px 3.8px 1.2px rgba(0, 0, 0, 0.11);} .sub-member-wrap .form-bx:not(.chk-item) input{width:100%;} .sub-member-wrap .form-bx .fwr.tcenter{padding:20px 0;color:#fff;font-size:14px;} .sub-member-wrap .align-side a{width: 100%;margin: 0 auto;color:#fff;font-size: 15px;text-align: center;} /*.sub-member-wrap .form-bx a{display:block;padding:15px 10px;text-align:center;background-color:#fff;box-shadow: 0px 2px 2px 0.8px rgba(0, 0, 0, 0.11);}*/ /* .sub-member-wrap .align-side.input-item a:first-child {border-right: 1px solid #fff; } */ .tit-join{margin-bottom:20px;padding-bottom:15px;color:#fff;font-size:18px;font-weight:600;border-bottom:2px solid #fff;text-align:center;} .input-item .txt-match{display:block;position:absolute;} .input-item.posR{padding-bottom:15px;} .join-chk-wrap .input-item{margin-top:10px;color:#ddd;} .form-bx .join-chk-wrap .input-item + .input-item{margin-top:10px;} .join-agree-bx{display:none; overflow-y: auto; width: 100%; height: 100px; border: 1px solid #B8CAD9; padding: 2%; font-size: 13px; line-height: 1.6; color: #666; background:#fff;} .join-type{} .join-type li{} .join-type li + li{margin-top:20px;} .join-type li a{display:block;padding:20px;color:#9FB0BF;font-weight:500;text-align:center;background:#fff;border-radius:99px;transition: 0.2s ease-in-out;} #frm_join{padding:0 10px;} .id-find-bx{padding:60px 0;color:#fff;font-size:16px;font-weight:500;text-align:center;border-top:2px solid #9FB0BF;border-bottom:2px solid #9FB0BF;} .id-find-bx strong{display:block;color:#9FB0BF;font-size:2.2em;} .id-find-bx ul{display:block;color:#9FB0BF;font-size:1.5em;} .id-find-bx ul li.naver:before{content:'';display:inline-block;width:20px;height: 20px;margin-right:5px;background:#02c85a url(/images/common/ico-na.png) 50% / 20px no-repeat;} .id-find-bx ul li.kakao:before{content:'';display:inline-block;width:20px;height: 20px;margin-right:5px;background:#fee500 url(/images/common/ico-ka.png) 50% / 20px no-repeat;} .moreview { padding: 2px 4px; background: #ddd; border: 1px solid #999; color: #333; font-size: 11px; border-radius: 4px; } /* input file */ .filebox {display:flex;} .filebox .upload-name {padding:0 10px 0 15px;border: 1px solid #B8CAD9;border-top-right-radius: 0;border-bottom-right-radius: 0;} .filebox label { color: #fff;font-size: 13px;text-align:center;cursor: pointer;vertical-align: middle;background-color: #9FB0BF; width:90px;border-radius: 4px;border-top-left-radius:0;border-bottom-left-radius:0;line-height: 42px; } .filebox input[type="file"] { position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0; } /* 폼형태 */ .w-auto{width:auto !important;} .w-20{width:20% !important;} .w-30{width:30% !important;} .w-40{width:40% !important;} .w-50{width:50% !important;} .w-60{width:60% !important;} .w-70{width:70% !important;} .w-80{width:80% !important;} .w-100{width: 100% !important;} .mw-50{max-width: 50% !important;} .mw-70{max-width: 70% !important;} .mw-100{max-width: 100% !important;} .form-bx input{height:42px;font-size:15px;border-radius:4px;background-color:#fff;} .form-bx .input-item + .input-item{margin-top:10px;} .input-item ::placeholder{color:#bbb;} input.date{padding-left:10px;background:url(/images/common/ico-cal.png) right 12px top 50% no-repeat;} .joinitemAddr{} .joinitemAddr button{width: 150px;height:30px;padding:0.45em 4px 0.5em;font-size:12px;} .joinitemAddr > div{display: flex;margin-bottom:10px;} .joinitemAddr > div input { } /* .joinitemAddr > input#sample2_address{width:40%;} */ /* .joinitemAddr > input#sample2_detailAddress{width:59%;} */ #__daum__layer_1{min-width:100px !important;} #frm_modify_profile input{width:100% !important;} /* 회원가입 > 인증번호 */ .certify-num-bx{display:flex;} .certify-num-bx input{width:calc(100% - 140px);border-top-right-radius:0;border-bottom-right-radius:0;} .certify-num-bx button{width:140px;border-top-left-radius:0;border-bottom-left-radius:0;font-size:13px;} /* 버튼 */ .btn{display:inline-block;height:42px;font-size:18px;border-radius: 4px;text-align:center;line-height:42px;background-color:#fff;transition: 0.1s ease-in-out;} .btn-login{width:100%;color:#fff;background:#9FB0BF;border-radius: 4px;font-weight: 400;} .btn-s{min-width:70px;height:auto;font-size:14px;padding:0.45em 0.2em 0.5em; line-height:1;border-radius:99px;} .btn-ss{height:34px;line-height: 32px;font-size:14px;padding:0 1em;border-radius:99px;} .btn-sq{border-radius:0 !important;} .btn-rsq{border-radius:10px !important;} .btn-fill{color:#fff;background:#111;} .btn-fill-sky{color:#fff;background:#6C808C;} .btn-line{color:#111 !important;border:1px solid #111;background-color:transparent;} .btn-line-sky{color:#888;background:#fff;border:1px solid #888;} .btn-round{display:inline-block;width:200px;color:#fff;font-size:17px;line-height:50px;font-weight:400;background:#8B9F8B;border-radius:99px;} .btn-round-light{display:inline-block;width:200px;color:#8B9F8B;font-size:17px;line-height:50px;font-weight:400;border:1px solid #8B9F8B;border-radius:99px;} .btn-receipt{height:auto;font-size:12px;margin-top:-4px;padding:0.4em 0.5em 0.45em;line-height:1;border-radius:3px;background:linear-gradient(to bottom, #fefefe 0%,#eee 100%);border:1px solid #ddd;vertical-align:middle;} .btn-01{color:#fff;background:#8B9F8B;border:1px solid #8B9F8B;} .btn-02{color:#fff;background:#A8B7A8;border:1px solid #A8B7A8;} .btn-03{color:#8B9F8B;background:#fff;border:1px solid #8B9F8B;} .join-fin-btn.col2 > *{width:49% !important;} .btn-login-naver{width:100%;color:#fff;background: #03c75a url(../../images/common/ico-naver.png) 15px 50% / 17px 16px no-repeat;border-radius: 4px;font-weight: 400;} .btn-login-kakao{width:100%;color:#191919;background: #fee500 url(../../images/common/ico-kakao.png) 15px 50% / 17px 16px no-repeat;border-radius: 4px;font-weight: 400;} .txt-warning{color:#ea0303;font-size:13px;font-weight:500;} .txt-info{;color:#fff;font-size:13px;font-weight:500;} .ir.ico-down, .ir.ico-to-go{width:16px;height:16px;margin-left:10px;margin-top: -4px;text-indent:-9999em;} .ir.ico-down{background:url(/images/common/ico-down.png) no-repeat;} .ir.ico-to-go{background:url(../../images/common/ikqco-to-go.png) 50% / contain no-repeat;} .ir.ico-arrow-right{width:9px;height:14px;margin:-4px 0 0 10px;text-indent:-9999em;background:url(/images/common/ico-arrow-right.png) no-repeat;} .ir.ico-upload{width:20px;height:16px;margin:0 0 0 10px;text-indent:-9999em;background:url(/images/common/ico-upload.png) 50%/ contain no-repeat;} .ir.ico-back{width: 12px;height: 21px;background:url(../../images/common/ico-arrow.png) 50% / contain no-repeat;text-indent:-9999em;} .ir.ico-more{width: 10px;height: 17px;background:url(../../images/common/ico-arrow.png) 50% / contain no-repeat;transform: rotate(-90deg); text-indent:-9999em;} .ir.ico-ordermore{width: 8px;height: 14px;background:url(../../images/common/ico-arrow.png) 50% / contain no-repeat;transform: rotate(180deg);text-indent:-9999em;} .ir.ico-del{width: 14px;height: 14px;background:url(../../images/common/btn-close.png) 50% / contain no-repeat;text-indent:-9999em;} /* 마이페이지 */ .sub-page-top { position:relative;height: 50px;text-align: center; box-shadow: 0.5px 1.5px 2.5px 0.5px rgba(0,0,0,0.1);} .sub-page-top a { position: absolute; top: 50%; left: 20px; transform: translateY(-50%); display: block;} .sub-page-top h2 {color:#000;font-size:20px; line-height: 50px;} .sub-page-top h2 strong {color:#8B9F8B; } .sub-page-top h2 .colorKey1 {color:#111 !important; } .sub-mypage-wrap{border-bottom: 20px solid #f5f5f5;} .sub-mypage-nav{width:100%;} /*.mem-profile-wrap{padding:20px;background: #fff;}*/ /*.mem-profile-wrap > div { display: flex;align-items:center;}*/ /*.mem-profile-bx{margin-left:10px;color:#222;font-size:15px;}*/ /*.mem-profile-bx strong{color:#9FB0BF;font-size:17px;}*/ /*.mem-profile-img{width:50px;height:50px;border-radius:100%;overflow:hidden;border:2px solid #fff;box-shadow: 1.5px 2.598px 7px 0px rgba(15, 52, 113, 0.1);}*/ /*.mem-profile-img img{width:50px;height:50px;object-fit:cover;background:#f1f2f3;}*/ /* .sub-mypage-point-wrap {background:#fff;border-bottom:4px solid #ddd;} .sub-mypage-point-wrap ul {display: flex; padding: 10px;} .sub-mypage-point-wrap ul li { position: relative; width: calc((100% - 6px) / 2); margin:2px;padding:2px 10px;font-size: 13px;background: #fff;bordeR:1px solid;} .sub-mypage-point-wrap ul li a {} .sub-mypage-point-wrap ul li strong { font-weight:500;} */ .my-info-tit{padding:10px 20px 10px;color:#222;font-size:15px;font-weight:500;} .my-info-tit-bx{position:relative;} .my-info-tit-bx .my-info-tit{padding-bottom:0;} .my-info-tit-bx a{position:absolute;right:20px;bottom:0px;font-size:12px;font-weight: 300;} .my-info-tit-bx a:after{content: '';display:inline-block;width: 10px;height: 20px; margin:-4px 0 0 4px;background:url(/images/common/ico-arrow.png) 50% /5px no-repeat;vertical-align:middle;} .mem-profile-wrap{overflow:hidden;padding:20px;} .mem-profile-wrap strong{font-weight:500;} .mem-profile-bx{overflow:hidden;padding-left:10px;color:#222;line-height:1.4;} .mem-profile-bx dt{font-size: 17px;} .mem-profile-bx dt strong{color:#9FB0BF;} .mem-profile-bx dd {padding-top:7px;color:#999;font-size:0.9em;} .mem-profile-bx dd strong{display:block;color:#222;} .mem-profile-bx dd a{color:#999;} .my-info-head{} .btn-chk-my{padding:5px 10px;font-size:15px;border:1px solid #B8CAD9;border-radius:3px;background: linear-gradient(to bottom, #fefefe 0%,#eee 100%);} .mem-profile-img{float:left;width:40px;height:40px;margin:auto;border-radius:100%;overflow:hidden;border:2px solid #fff;box-shadow: 1.5px 2.598px 7px 0px rgba(15, 52, 113, 0.1);} .mem-profile-img img{width:40px;height:40px;object-fit:cover;background:#f1f2f3;} .btn-naver,.btn-kakao{padding:3px 10px 5px 30px;font-size:12px;} .btn-naver{color:#fff;background:#03c75a url(../../images/common/ico-naver.png) 8px 50% / auto 10px no-repeat;border:1px solid #03c75a;} .btn-kakao{color:#191919;background:#fee500 url(../../images/common/ico-kakao.png) 8px 50% / auto 12px no-repeat;border:1px solid #fee500;} .txt-naver, .btn-kakao{} .my-info-bottom{display:flex; overflow:hidden;color:#222;line-height:1.5;border-top:1px solid #d8d9cc;border-bottom:4px solid #ddd;background:#fff;} .my-info-bottom > dl{overflow: hidden; flex:1; position: relative; padding: 10px;text-align:center; box-sizing:border-box;} .my-info-bottom dt{font-size: 13px;font-weight:500;} .my-info-bottom dd{color:#9FB0BF;} .my-info-bottom dd a{position: relative;display: block; font-weight:normal;} .my-info-bottom dd strong{font-weight: normal; } .my-info-bottom > dl + dl:after{content: '';position: absolute;top: 50%;left: 0;width: 1px;height: 40px;margin-top: -20px;background-color: #e5e5e5;} .my-info-bottom > dl{} /*.my-info-bottom > dl:before{content: '';width: 70px;display: block;height: 30px;}*/ .my-info-point:before{background: url('../../images/common/ico-my-info-point.png') 0 50% no-repeat;} .my-info-coupon:before{background: url('../../images/common/ico-my-info-coupon.png') 0 50% no-repeat;} .my-info-invt:before{background: url('../../images/common/ico-my-info-inv.png') 0 50% no-repeat;} .my-info-shipping-state{padding:10px 20px 15px;border-bottom:4px solid #ddd;} .my-info-shipping-state ul{display:flex;padding:5px;background:#f4f4f4;border-radius:4px;} .my-info-shipping-state ul li{position: relative;width:calc(100%/5);text-align:center;} .my-info-shipping-state ul li span{color:#bbb;font-size:26px;} .my-info-shipping-state ul li.on span, .my-info-shipping-state ul li.on strong{color:#9FB0BF;font-weight:400;} .my-info-shipping-state ul li strong{display:block;font-weight:300;font-size:12px;} .my-info-shipping-state li + li:before{content: '';position: absolute;top: 50%;left: 0;margin-top: -9px;width: 7px;height: 11px;background: url('/images/common/ico-arrow.png') no-repeat;background-size:5px;} .my-info-recm{overflow:auto;padding:0 20px 20px;} .my-info-recm .prd-list-item{width:180vw;margin:0;} .my-info-recm .prd-list-item li{width: calc((100% - 40px) / 4);margin:0 0 0 10px;} .my-info-recm .prd-list-item li img{height:45vw;} .my-info-recm .prd-list-item li:nth-child(3){margin-left:10px;} .sub-mypage-nav{background:#fff;} .sub-mypage-nav .nav{border-bottom:4px solid #ddd;} .sub-mypage-nav > p{padding:10px 20px;color:#222;font-size: 15px;font-weight:500;border-bottom:1px solid #B8CAD9;} .sub-mypage-nav .nav li{border-bottom:1px solid #B8CAD9;} .sub-mypage-nav .nav li a{display:block;padding:10px 20px;color:#777;font-weight:400;background:url(/images/common/ico-nav-arrow.png) #fff right 22px top 50% no-repeat;background-size:6px;font-size: 14px;} .sub-mypage-nav .nav li:hover a {color:#fff;background-color:#9FB0BF;background-image:url(/images/common/ico-nav-arrow-active.png);} .sub-mypage-con{ } .sub-mypage-con.mypage{ background: #f5f5f5;} .sub-mypage-inner{min-height:100%;padding:20px;} .sub-mypage-inner > h2{padding-bottom:5px;color:#222;font-size:1.4em;font-weight:500;} .boardSch .sub-mypage-inner { } .mypageList .sub-mypage-inner { } .sub-mypage-top { border-bottom: 10px solid #f5f5f5; } .sub-mypage-top button{ min-width: 140px; font-size: 15px; } .my-invite .ico-invt{width:18px;height:15px;margin-top:-4px;background:url(/images/common/ico-nav-lnb.png) 0 -170px / 100% no-repeat;} /* 마이페이지 > 초대 */ .my-invite{display:flex;align-items:center;font-size:17px;} .my-invite .rUrl-bx{} .my-invite input{width:5px;border:1px solid transparent;color:transparent;background: #fff !important;} .my-invite .btn{padding:0 10px;height:32px;font-weight:500;line-height:32px;font-size:14px;border-radius:4px;} .my-invite .btn.btn-share-copy{background:#ddd;} .my-invite .btn.btn-share-kakao{background:#fae100;} .my-invite .btn i.ico-kakao{width:16px;height:16px;background:url(/images/common/ico-kakao.png) 50% / 16px no-repeat;} .my-invite .btn i.ico-copy{width:16px;height:16px;background:url(/images/common/ico-copy-url.png) 50% / 16px no-repeat;} .myorderList { background: #f5f5f5;} .myorderList ul {} .myorderList ul li { padding-top: 10px; } .myorderList ul li + li{ } .myorderList .orderitem { padding: 0 20px; background: #fff;} .myorderList .orderitemtop { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #B8CAD9;} .myorderList .orderitemtop .orderday { color: #000; font-size: 16px; } .myorderList .orderitemtop a { display: block; color: #666; font-size: 16px;} .myorderList .orderitemcont {padding: 12px 0; } .myorderList .orderitemcont strong {padding-right:10px; font-size: 18px; } .myorderList .orderitemcont > div { display: flex; } .myorderList .orderitemcont .orderiteminfo { padding-top: 10px; } .myorderList .orderitemcover {display:none; border-radius: 4px; overflow: hidden;} .myorderList .orderitemcontTxt {/* width: calc(100% - 40px); padding-left: 15px;*/} .myorderList .orderitemcontTxt p { } .myorderList .orderitemcontTxt .item-num{color: #5f8cc3 !important;font-size: 14px;} .myorderList .item-num { font-size: 16px; } .myorderList .item-name { color: #000; font-size: 17px; } .myorderList .item-price { font-size: 13px;} .myorderList .item-shipping-fee { font-size: 13px; } .boardSch { } .boardSch table { height: 50px;} .boardSch table th { color: #9FB0BF; font-size: 14px; font-weight: 400; } .boardSch table td { text-align: center;} .boardSch .date-set { } .boardSch ul { display: flex; align-items: center; height: 45px; border-top: 2px solid #9FB0BF; border-bottom: 1px solid #B8CAD9;} .boardSch ul li { display: flex; justify-content: center; align-items: center; height: 100%;} .boardSch ul li:first-child { width: 50px; margin-right: 7px; color:#fff;background: #9FB0BF; font-size: 15px;} .boardSch ul li + li { padding-left: 4px;} .boardSch ul li .date { width: 40px; height: 28px; font-size: 12px; color: #000; border: 1px solid #B8CAD9; border-radius: 4px; } .boardSch ul li .date-set { width: 70px; height: 28px; background: #111; color: #fff; border-radius: 4px; } .boardSch input.date-set { width: calc(50% - 63px);} .boardSch .date-set-cont { display: none; padding: 10px 0; } .boardSch .date-set-cont.show { display: block; } .boardSch.answer-input-wrap ul li:first-child { width: auto; background: transparent;} .insole-target select { border-radius: 4px;} /* 마이페이지 > 1:1 문의 220708*/ /* .answer-input-wrap { display: flex; padding: 15px 20px; text-align: center;} .answer-input-wrap > div { width: 50%;} .answer-input-wrap > div:first-child { border-right: 1px solid #B8CAD9;} .answer-input-wrap select { width: 50%; padding: 5px 10px 5px 40px; background: url(../../images/common/ico-division.png) left 10px top 50% / 15px no-repeat; border: 0; font-size: 14px;} .answer-input-wrap .qna-btn { text-align: center;} .answer-input-wrap .qna-btn .btn { margin-left: 15px;} */ /* 마이페이지 > 1:1 문의 220713*/ .answer-input-wrap { padding: 15px 20px; text-align: right;} .boardQna table { border: 0; } .boardQna table tr { border-top: 10px solid #f5f5f5; } .boardQna table tr:last-of-type { border-bottom: 0;} .boardQna table td { display: table-cell; text-align: center; } .boardQna table td > div { padding: 10px 0; } .mypageList { background: #f5f5f5;} .mypageList ul { } .mypageList ul li { padding: 10px 0; } .mypageList .mypagecont { display: flex; justify-content: space-between; align-items: center; padding: 10px; background: #fff; border-radius: 4px; box-shadow: 3px 3px 15px 3px rgba(0,0,0,0.05);} .mypageList .mypageday { font-size: 14px; font-weight: bold; color: #000;} .mypageList .mypagetxt p { color: #9FB0BF; font-size: 22px; font-weight: bold;} .mypageList .mypagetxt p span { color: #666; font-size: 16px; font-weight: 400;} .mypageList .mypagebtn { display: flex; } .mypageList .mypagebtn a { display: block; width: 85px; height: 50px; line-height: 50px; background: #77A6ED; color: #fff; font-size: 16px; text-align: center; border-radius: 4px;} .mypageList .mypagebtn button { width: 80px; height: 50px; line-height: 50px; margin-right: 5px; color: #9FB0BF; border: 1px solid #9FB0BF; font-size: 16px; text-align: center; border-radius: 4px; } .listmorebtn { background: #fff; border-top: 1px solid #B8CAD9; border-bottom: 1px solid #B8CAD9; } .listmorebtn a { display: block; height: 50px; line-height: 50px; color: #666; font-size: 16px; font-weight: bold; text-align: center;} /* 리뷰작성 220704 */ .review_layer { position: fixed; top: 0; left: 0; right: 0; bottom: 0;background: #fff; z-index: 999;} .review_layer .reivew_top { position: relative; height: 50px; line-height: 50px; border-bottom: 1px solid #B8CAD9;} .review_layer .reivew_top p { color: #000; text-align: center; font-size: 20px; font-weight: bold; } .review_layer .reivew_top .close { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 16px; height: 16px; background: url(/m/images/common/btn-close.png) 50% / contain no-repeat;} .review_layer ul { padding: 20px;} .review_layer ul li { font-size: 14px; padding: 2px 0;} .review_layer .review_info { border-bottom: 1px solid #B8CAD9;} .review_layer .review_info li { font-size: 15px;} .review_layer .review_cont { text-align: center;} .review_layer .review_cont .txt { color: #000; font-size: 20px; font-weight: bold;} .review_layer .review_cont li {padding: 5px 0;} .review_layer .review_cont select { width: 70%; font-size: 30px; color: #77A6ED; text-align: center; border: 0; border-radius: 4px; background-position-x: calc(100% - 40px);} .review_layer .review_cont input { width: 100%; border: 0; border-bottom: 1px solid #B8CAD9;} .review_layer .review_cont input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; padding: 0; margin: -1px; clip: rect(0,0,0,0); border: 0;} .review_layer .review_cont label { display: inline-block; width: 100%; height: 40px; line-height: 38px; border: 1px solid #77A6ED; color: #77A6ED; text-align: center; font-size: 16px; border-radius: 4px;} .review_layer .review_cont textarea { width: 100%; min-height: 100px; margin-top: 5px; padding: 10px; border: 0; border-bottom: 1px solid #B8CAD9;} .review_layer .review_cont .upload-name { margin-bottom: 5px; background: transparent !important; height: 30px; line-height: 30px; border-bottom: 0;} .review_layer .review_cont textarea:focus {outline: 1px solid rgba(40,56,144,0.1);} .review_layer .review_cont p { padding-top: 5px; font-size: 12px;} .review_layer .btn_reg_review_bx { padding: 0 20px;} .review_layer .btn_reg_review { width: 100%; height: 48px; background: #77A6ED; color: #fff; font-size: 18px; border-radius: 4px;} /* 교환/환불사유 220705 */ .exchrefund_layer { position: fixed; top: 0; left: 0; width:100%;height:100%;background: #fff; z-index: 999;} .exchrefund_layer .exchrefund_bx {position:relative;} .exchrefund_layer .exchrefund_top { position: relative; height: 50px; line-height: 50px; border-bottom: 1px solid #B8CAD9;} .exchrefund_layer .exchrefund_top p { color: #000; text-align: center; font-size: 20px; font-weight: bold; } .exchrefund_layer .exchrefund_top .close { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 16px; height: 16px; background: url(/m/images/common/btn-close.png) 50% / contain no-repeat;} .exchrefund_layer ul { padding: 20px 20px 10px;} .exchrefund_layer ul li { font-size: 14px; padding: 2px 0;} .exchrefund_layer .exchrefund_info { border-bottom: 1px solid #B8CAD9;} .exchrefund_layer .exchrefund_info li { font-size: 15px;} .exchrefund_layer .exchrefund_cont { } .exchrefund_layer .exchrefund_cont .txt { color: #000; font-size: 20px; font-weight: bold;} .exchrefund_layer .exchrefund_cont li {padding: 10px 0;} .exchrefund_layer .exchrefund_cont select { width: 100%; color: #77A6ED; border: 1px solid; border-radius: 4px;} .exchrefund_layer .exchrefund_cont input[type=text] , .exchrefund_layer .exchrefund_cont input[type=file] { width: 100%; border: 0; border-bottom: 1px solid #B8CAD9;} .exchrefund_layer .exchrefund_cont textarea { width: 100%; min-height: 100px; margin-top: 5px; padding: 10px; border: 1px solid #B8CAD9; border-radius: 4px;} .exchrefund_layer .exchrefund_cont textarea:focus {outline: 1px solid rgba(40,56,144,0.1);} .exchrefund_layer .exchrefund_cont p { padding-top: 5px; font-size: 12px;} .exchrefund_layer .btn_order_exchrefund_bx { padding: 0 20px;} .exchrefund_layer .btn_order_exchrefund { width: 100%; height: 48px; background: #77A6ED; color: #fff; font-size: 18px; border-radius: 4px;} /* 결제완료시 취소/환불 계좌 */ .refund_layer { position: fixed; top: 0; left: 0; right: 0; bottom: 0;background: #fff; z-index: 999;} .refund_layer .refund_top { position: relative; height: 50px; line-height: 50px; border-bottom: 1px solid #B8CAD9;} .refund_layer .refund_top p { color: #000; text-align: center; font-size: 20px; font-weight: bold; } .refund_layer .refund_top .close { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 16px; height: 16px; background: url(/m/images/common/btn-close.png) 50% / contain no-repeat;} .refund_layer ul { padding: 20px 20px 10px;} .refund_layer ul li { font-size: 14px; padding: 2px 0;} .refund_layer .refund_info { border-bottom: 1px solid #B8CAD9;} .refund_layer .refund_info li { font-size: 15px;} .refund_layer .refund_cont { } .refund_layer .refund_cont .txt { color: #000; font-size: 20px; font-weight: bold;} .refund_layer .refund_cont li {padding: 0 0 10px;} .refund_layer .refund_cont select { width: 100%; color: #77A6ED; border: 1px solid; border-radius: 4px; font-size: 14px;} .refund_layer .refund_cont input { width: 100%; border: 0; border-bottom: 1px solid #B8CAD9;} .refund_layer .refund_cont textarea { width: 100%; min-height: 100px; margin-top: 5px; padding: 10px; border: 0; border-bottom: 1px solid #B8CAD9; border-radius: 4px;} .refund_layer .refund_cont textarea:focus {outline: 1px solid rgba(40,56,144,0.1);} .refund_layer .refund_cont p { padding-top: 5px; font-size: 12px;} .refund_layer .btn_order_refund_bx { padding: 0 20px;} .refund_layer .btn_order_cancel_bank { width: 100%; height: 48px; background: #77A6ED; color: #fff; font-size: 18px; border-radius: 4px;} .refund_layer {} /* 걸음목표설정 */ .sub-mypage-list-wrap { } .sub-mypage-list-wrap ul { } .sub-mypage-list-wrap ul li { display: flex; align-items: center; margin: 0 20px; padding: 20px 0; border-bottom: 1px solid #B8CAD9;} .sub-mypage-list-wrap ul li:last-child { border-bottom: 0;} .sub-mypage-list-wrap ul li p { font-size: 18px;} .sub-mypage-list-wrap ul li span { font-size: 14px;} .sub-mypage-list-wrap .point-list li{ justify-content: space-between;} .sub-mypage-list-wrap .point-list { } .point-list .point-txt p { font-size: 16px;} .point-list .point-txt p.date { font-size: 14px;} .point-list li .tit3 { font-size: 21px;color: #666;} .coupon-list { } .coupon-list li { } .coupon-list li .coupon-img { width: 80px;} .coupon-list li .coupon-txt p { font-size: 14px;} .coupon-list li .coupon-txt .coupon-name { font-size: 16px; } .walking-chk-btn { background: #f5f5f5; padding: 0 20px; } .walking-chk-btn button { width: 100%; border-radius: 8px; } .sub-mypage-list-wrap .listmorebtn { background: #f5f5f5; padding: 20px 0; border: 0;} .sub-mypage-list-wrap .listmorebtn a { display: block; height: 50px; line-height: 50px; background: #fff; color: #666; border-top: 1px solid #B8CAD9; border-bottom: 1px solid #B8CAD9; font-size: 16px; font-weight: bold; text-align: center;} /* 주문조회 테이블 */ .sub-order-wrap { background: #f5f5f5;} .order-bx-wrap{margin-bottom:20px;background: #fff;} .order-bx-wrap h3{margin-bottom:10px;color:#0D0D0D;font-size:18px; font-weight:500;} .tbl-order{width:100%;border-top:2px solid #9FB0BF;} .tbl-order th, .tbl-order-info th{font-weight:400;} .tbl-order thead th{padding:15px 23px;color:#fff;background:#9FB0BF;} .tbl-order tbody th{padding:10px 15px;color:#fff;background:#9FB0BF;border-bottom:1px solid #B8CAD9;font-size: 14px;} .tbl-order tbody td{padding:10px 15px;color:#222;font-size:14px;border-bottom:1px solid #B8CAD9;} .tbl-order-info thead th{padding:15px 23px;color:#fff;background:#9FB0BF;} .btn-wrap { display: flex;} .btn-wrap .btn{width:50%;margin: 0 auto;border-radius:4px;font-size: 16px;} .btn-wrap .btn.btn-line{border-top-right-radius: 0; border-bottom-right-radius: 0;border-color: #ddd;} .btn-wrap .btn.btn-fill{} .btn-wrap .btn.btn-fill.half{border-top-left-radius: 0; border-bottom-left-radius: 0;} .tbl-order-info { display: flex; align-items: center; padding: 15px 0; border-top:2px solid #9FB0BF; border-bottom: 1px solid #B8CAD9;} .tbl-order-info .tbl-order-cover { overflow: hidden; border-radius: 4px;} .order-info-cont { width: calc(100% - 70px); padding-left: 15px;} .tbl-order-info tbody th { text-align: left; font-size: 14px;} .tbl-order-info .order-name { color: #000; font-size: 16px;} .tbl-order-info tbody td { text-align: right; font-size: 14px;} .tbl-order-info tbody .total td strong { font-size: 18px;} .tbl-order-info strong{font-weight:500;} .order-info-cover{overflow:hidden;border:1px solid #f4f4f4;border-radius:10px;} .modify-wrap, .withdraw-wrap{text-align:center;border-top:2px solid #9FB0BF;border-bottom:1px solid #B8CAD9;} .modify-wrap{padding:120px 0;} .withdraw-wrap{padding:30px 0;} .logo-80{width:80px;} .logo-100{width:100px;} .logo-150{width:150px;} .modify-bx{margin: auto;} .modify-bx .input-item input{width:100%;border:1px solid #9FB0BF;} .modify-bx a { width: 100px;} .withdraw-note{padding:20px 15px;border-radius: 4px;background:#afafaf;} .withdraw-note dl{text-align:left;color:#fff;} .withdraw-note dl dt{padding-bottom:7px;font-size:16px;font-weight:700;} .withdraw-note dl dd{padding-top:7px;font-size:14px;} .orderstate.mypage-btn-bx{display:block !important;} .mypage-btn-bx .btn.btn-ss{min-width:60px;height:28px;line-height:22px;font-size:13px;padding:0 5px;} .mypage-btn-bx > div{display:inline-block;vertical-align:bottom;} .mypage-btn-bx > div.mgt10{display:block;} .mypage-btn-bx > div .btn{margin-right:4px;} .mypage-btn-bx > div .btn:last-child{margin-right:0;} .mypage-btn-bx > div .btn:first-child:nth-last-child(1) {width: 80px;} .mypage-btn-bx > div .btn:first-child:nth-last-child(2), .mypage-btn-bx > div .btn:first-child:nth-last-child(2) ~ .btn {width: 60px;} .mypage-btn-bx > div .btn:first-child:nth-last-child(3), .mypage-btn-bx > div .btn:first-child:nth-last-child(3) ~ .btn {width: calc((100% - 15px) / 3);} /* 주문하기 */ .order-tab{display:flex;justify-content:center;margin-bottom: 20px;padding:22px 0;background:#fafafa;} .order-tab ul{font-weight:400;} .order-tab ul li{display:inline-block;text-align:center;vertical-align:top;} .order-tab ul li:after{content:'';display:inline-block;width:20px;height:70px;margin:0 20px;background:url(/images/common/ico-step-arrow.png) 50% no-repeat;vertical-align:top;} .order-tab ul li:last-child:after{display:none;} .order-tab ul li p{display:inline-block;font-size:15px;} .order-tab ul li p:before{content:'';display:block;width:70px;height:70px;margin-bottom:15px;border-radius: 50%;box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.1);} .order-tab .active{color:#9FB0BF;font-weight:500;} .step1 p:before{background:#fff url(/images/common/ico-step1.png) 48% 50% no-repeat;} .step2 p:before{background:#fff url(/images/common/ico-step2.png) 50% no-repeat;} .step3 p:before{background:#fff url(/images/common/ico-step3.png) 50% no-repeat;} .step1.active p:before{background-image:url(/images/common/ico-step1-on.png);} .step2.active p:before{background-image:url(/images/common/ico-step2-on.png);} .step3.active p:before{background-image:url(/images/common/ico-step3-on.png);} .order-wrap{padding: 0;} .cart-wrap{padding: 0; border-bottom: 20px solid #f5f5f5;} /* .cart-wrap.inner{padding: 0;} */ .shop_order_item_tit input[type="checkbox"] + label{padding-left:30px;} .shop_order_item_tit input[type="checkbox"] + label:before{top:0;} .shop_order{ position: relative; padding-top: 20px; } .shop_order_side_tot{ border-top: 1px solid #000; } .shop_order_side_tot ul{ padding: 20px 0 5px; } .shop_order_side_tot ul li{ font-size: 17px; font-weight: 600; color: #222; word-spacing: 0; text-align: left; } .shop_order_side_tot ul li.price{ font-size: 25px; font-weight: 600; color: #222; word-spacing: 0; text-align: right; } .shop_order_side_chk{ margin-top: 25px; } .shop_order_side_chk input[type="checkbox"] + label{ font-size: 13px; font-weight: 400; color: #9FB0BF; line-height: 1.5; } .shop_order_side_chk input[type="checkbox"] + label:before{ top: 0; transform: translateY(0); } .shop_order_side_btn{ margin: 20px; } .shop_order_side_btn .btn{ display: block; width: 100%; height:48px;margin:auto;padding: 0 10px; border-radius: 4px; background: #334759; font-size: 16px; font-weight: 400; color: #fff; } .shop_order_side_btn .btn:hover{ background: #9FB0BF; } .shop_order_item{ margin-bottom: 100px; } .shop_order_item:last-child{ margin-bottom: 0; } .shop_order_item_tit{ display:flex;justify-content:space-between;align-items:center;overflow: hidden; padding: 20px; padding-top: 0; font-size: 16px; color: #777; line-height: 1.2; } .shop_order_item .works_num{ display: inline-block; color: #777; } .shop_order_item .works_chk{ font-weight: 600; color: #777; } .shop_order_item .works_total{ font-weight: 500; color: #777; } .shop_order_item_tit .btn_empty{ display: block; float: right; width: 100px; height:35px; margin-left:10px; color:#fff;font-size: 13px; font-weight:400;line-height: 32px;background:#777;} .shop_order_item_tit .btn_empty_del{ display: block; float: right; width: 90px; height:35px; margin-left:10px; color:#777;font-size: 13px; font-weight:400;line-height: 32px;border:1px solid #777;} .shop_order_item_tit .btn_empty.on{ border-color: #777; background: #777; color: #fff; } .shop_order_item_tit .btn_empty:hover{ background: #444; border-color: #444; color: #fff; } .shop_order_item_tit .chk_same{ float: right; } .shop_order_item_tit .chk_same label{ font-size: 15px; font-weight: 500; color: #666; line-height: 25px; } .shop_order_works_list td.work_btn{ width: 110px; } .shop_order_works_list td.work_btn .btn_buy{ display: block; width: 100px; line-height: 35px; margin-bottom: 5px; border-radius: 4px; border: 1px solid #9FB0BF; font-size: 15px; font-weight: 500; color: #9FB0BF; text-align: center; } .shop_order_works_list td.work_btn .btn_buy:hover{ background: #9FB0BF; color: #fff; } .shop_order_works_list td.work_btn .btn_del{ display: block; width: 100px; line-height: 35px; margin-bottom: 5px; border-radius: 4px; border: 1px solid #B8CAD9ddd; font-size: 15px; font-weight: 500; color: #666666; text-align: center; } .shop_order_works_list td.work_btn .btn_del.on{ border-color: #9FB0BF; background: #9FB0BF; color: #fff; } .shop_order_works_list td.work_btn .btn_del:hover{ background: #444; border-color: #444; color: #fff; } .shop_order_works_total{ padding: 20px; background: #fff; font-size: 16px; color: #000; border-top: 5px solid #f5f5f5; border-bottom: 5px solid #f5f5f5;} .shop_order_works_total > div { display: flex; justify-content: space-between; align-items: center;} .shop_order_works_total .wrap_price { border-top: 1px solid #B8CAD9;} .shop_order_works_total .cont{ display: flex; justify-content: space-between; align-items: center; padding: 5px 0; } .shop_order_works_total .cont_coupon { border-top: 1px solid #B8CAD9; } .shop_order_works_total .cont_price { border-top: 1px solid #B8CAD9; padding: 15px 0;} .shop_order_works_total .cont_price span { color: #000; font-weight: bold; font-size: 20px;} .shop_order_works_total .total_price { font-size: 20px; } .shop_order_works_total .shop_order_works-total_wrap { display: block; border-top: 2px solid #9FB0BF; border-bottom: 2px solid #9FB0BF; } /** 장바구니 */ .shop_order_cart{} .shop_order_works_list.shop_order_cart ul li > div{display:block;} .shop_order_works_list.shop_order_cart ul li { display: flex;flex-wrap: wrap;} .shop_order_works_list.shop_order_cart ul li .prodBox {display: flex; align-items: center;} .shop_order_works_list.shop_order_cart ul li .prodBox + .prodBox{margin-top:5px;} .shop_order_works_list.shop_order_cart .work_img {width:calc(100% - 30px); } .shop_order_works_list.shop_order_cart .work_info { display: flex; justify-content: space-between; } .shop_order_works_list.shop_order_cart .price-bx{display:flex; align-items:center;justify-content:space-between;width:100%;} /* 장바구니 **/ .shop_order_works_list { } .shop_order_works_list ul {} .order-wrap .shop_order_works_list ul { border-top: 2px solid #9FB0BF;} .shop_order_works_list ul li { border-top: 5px solid #f5f5f5; padding: 10px 20px;} .order-wrap .shop_order_works_list ul li { border-top: 0; border-bottom: 1px solid #B8CAD9;} .shop_order_works_list ul li > div { display: flex; justify-content: space-between;} .shop_order_works_list .work_chk { } .shop_order_works_list .work_btn_wrap { } .shop_order_works_list .work_chk label{margin-top:-30px;vertical-align:middle;} .shop_order_works_list .work_info_wrap { padding-top: 10px;} .shop_order_works_list .work_img { } .shop_order_works_list .work_img .imgBox{ overflow:hidden;width: 80px; height: 80px;background: #fafafa; margin-right:5px;} .shop_order_works_list .work_img .imgBox img{width: 80px; object-fit: cover;} .shop_order_works_list .work_info { display: flex; justify-content: space-between; width: calc(100% - 80px - 20px);} .shop_order_works_list .work_info p { font-size: 15px;} .shop_order_works_list .work_info .tit{ font-size: 17px; font-weight: 500; color: #222; line-height: 1.4;} /* .shop_order_works_list .work_info .made{ margin-top: 7px; font-weight: 400; color: #666; } */ .shop_order_works_list .work_price{ width: 120px; padding-right:50px;font-size: 17px; text-align: right; } /* .shop_order_works_list .work_qty { font-size: 15px;} */ .proprice{margin: 5px 0 10px;color:#578FCA;text-align: right;} .proprice span{padding-right:5px;color:#666;font-weight: 400;} .shipcharge { font-size: 15px; text-align: right;} .shipcharge span{font-weight: 500; } .shop_order_works_list .price-bx{margin-top:10px;padding:10px 0 0 28px;border-top:1px solid #B8CAD9;} .shop_order_works_list .price-bx > *{} .shop_order_works_list .price-bx .work_price{width:auto;padding:0;} .shop_order_works_list .price-bx .proprice{margin:0;text-align:right;} .order-wrap h2 { padding-left: 20px; color: #9FB0BF; font-size: 18px; } .order-wrap .shop_order_cont { padding: 0 20px; border-bottom: 5px solid #f5f5f5;} .shop_order_coupon { padding: 20px;} .shop_order_vertical { } .shop_order_vertical select { width: calc(100% - 100px); border: 0; font-size: 14px; border-bottom: 1px solid #cecece; } .shop_order_vertical select[name=email_addr] { border: 1px solid #cecece;} .shop_order_vertical .btn { } .coupon-note { font-size: 13px;} .shop_order_coupon select { width: 100%;} .shop_order_coupon input { width: 100%;} .shop_order_coupon .coupon-note { padding:5px 0 15px;} .shop_order_coupon .coupon-note strong{color:#9FB0BF;} .shop_order_addr { padding: 0 20px; border-bottom: 5px solid #f5f5f5;} .shop_order_addr table { width: 100%; border-top: 2px solid #9FB0BF;} .shop_order_addr tbody { } .shop_order_addr tbody th { padding: 10px 5px; color: #fff; background: #9FB0BF; border-bottom: 1px solid #B8CAD9; font-size: 14px; } .shop_order_addr tbody td { align-items: center; padding: 10px 5px; border-bottom: 1px solid #B8CAD9; font-size: 14px;} .shop_order_addr tbody input.email { width: 80px;} .shop_order_addr .tel-bx input { width: calc(100% - 120px); } .shop_order_addr .input-group input { width: calc(100% - 120px);} .shop_order_addr .delivery_request { border: 1px solid #cecece;} .shop_order_addr .email_addr_etc { width: calc(100% - 100px);} .shop_order_works_point { } .shop_order_works-point_wrap { padding: 20px; border-bottom: 5px solid #f5f5f5; } .shop_order_works-point_wrap .cont { display: flex; justify-content: space-between;} .shop_order_works_point > div { font-size: 13px; } .shop_order_works_point > div .point_works { font-size: 18px; } .shop_order_form{ width: 100%; padding: 10px 0; } .shop_order_form th{ vertical-align: top; width: 90px; padding: 5px; } .shop_order_form td{ vertical-align: top; width: 100%; padding: 5px; padding-right: 158px; } .shop_order_form td.full{ padding-right: 0; } .shop_order_btn{ overflow: hidden; padding: 20px 20px 10px; } .shop_order_btn .btn{ float: left; width: calc(33.33% - 6.66px); line-height: 55px; margin-right: 10px; margin-bottom: 10px; border: 1px solid #B8CAD9; border-radius: 4px; font-size: 20px; font-weight: 500; color: #333; text-align: center; } .shop_order_btn .btn:nth-child(3n){ margin-right: 0; } .shop_order_btn .btn:hover{ background: #9FB0BF; border-color: #9FB0BF; color: #fff; font-weight: 400; } .shop_order_btn .formtagBox{ float: left; /*width: calc(50% - 5px); height: 40px; border: 1px solid #B8CAD9; border-radius: 6px; text-align: center;*/ } .shop_order_btn .formtagBox button { width: 100%; height: 100%; font-size: 16px; font-weight: 500; color: #666;} .shop_order_btn .formtagBox.active { border-color: #9FB0BF;} .shop_order_btn .formtagBox.active button { color: #9FB0BF;;} .shop_order_btn .btn + label{ width: 100%; line-height: 55px; padding: 0; border: 1px solid #B8CAD9; border-radius: 4px; font-size: 20px; font-weight: 500; color: #333; text-align: center; } .shop_order_btn .btn + label::before{ display: none; } .shop_order_btn .btn + label:hover{ background: #9FB0BF; border-color: #9FB0BF; color: #fff; font-weight: 400; } .shop_order_btn .btn:checked + label{ background: #9FB0BF; border-color: #9FB0BF; color: #fff; font-weight: 400; } .shop_order_chk_wrap { padding: 0 20px;} .shop_order_chk_wrap input { } .shop_order_chk_wrap label { font-size: 14px;} .shop_order_works_total span{color:#666;font-size: 14px;} .total_works, .total_shipp, .total_price{font-size:16px;font-weight:700;} .shop_order_works_total strong span { font-weight: 700; color: #000;} .shop_order input:read-only{ border: 1px solid #eee; background: #f6f6f6; } .item-count{overflow:hidden;position:relative;width:88px;padding:0 28px;border-radius:5px;border:1px solid #bbb;} .item-count a{display:block;position:absolute;top:0;width:28px;height:28px;font-size:0;line-height:0;color:#fff;vertical-align:middle;} .item-count a.countMinus{left:0;background:#f6f6f6 url(/images/common/ico-minus.png) 50% no-repeat;} .item-count a.countPlus{right:0;background:#f6f6f6 url(/images/common/ico-plus.png) 50% no-repeat;} .item-count .countInput{display:block;width:32px;height:28px} .item-count input[type="text"]{display:block;width:32px;height:28px;padding:0;color:#666;font-size:15px;text-align:center;background:#fff;border:1px solid #fff;} /* 주문완료 */ .shop_finish_item {} .shop_finish_item .form_title{ margin-bottom: 50px; color: #9FB0BF; font-size: 22px;text-align: center; } .shop_finish_item .form_title:before{content:'';display:block;width:68px;height:68px;margin:0 auto 20px;background:url(/images/common/ico-chk.png) 50% / contain no-repeat;} .shop_finish_item .form_text{ margin-bottom: 80px; text-align: center; color: #9FB0BF; font-size: 40px; } .form_confirm{ margin-bottom: 20px; padding: 0 20px; text-align: center; } .form_confirm .btn{width:100%;height:48px;line-height:48px;border-radius: 4px;} .form_confirm_btn{ vertical-align: top; display: inline-block; position: relative; width: 180px; line-height: 50px; margin: 0 5px; border: 2px solid #b60005; border-radius: 4px; background: #fff; font-size: 20px; font-weight: 600; color: #b60005; } .form_confirm_btn .ic{ display: inline-block; margin-left: 5px; } .form_confirm_btn .ic_front_r{ margin-bottom: -3px; } .form_confirm_btn .ic_back_r{ margin-bottom: -3px; } .form_confirm_btn.blong{ width: 300px; } .form_confirm_btn_next{ background: #b60005; color: #fff; font-weight: 500; } .form_confirm_btn_next:hover{ background: #a70005; } .form_confirm_btn_r{ background: #b60005; color: #fff; font-weight: 500; } .form_confirm_btn_r:hover{ background: #a70005; } .form_confirm_btn:hover{ box-shadow: 0 0 10px rgba(110 0 3 / 20%); } .shop_finish_wrap { padding: 20px; border-top: 5px solid #f5f5f5;} .shop_finish_item h3{padding-bottom:5px;color:#9FB0BF;font-size:20px;} .shop_finish_item table{width:100%;border-top:1px solid #9FB0BF;border-bottom:1px solid #9FB0BF;} .shop_finish_item table tr{} .shop_finish_item table tr.bdtop{ border-top: 1px solid #B8CAD9;} .shop_finish_item table tbody th{padding:5px;color:#666;font-weight:400;font-size: 14px; text-align: left;} .shop_finish_item table tbody td{padding:5px;color:#000; text-align: right;font-size: 14px;} .shop_finish_item td.work_img > div{display:flex;align-items: center;} .shop_finish_item .shop_finish_price th { font-size: 16px;} .shop_finish_item .shop_finish_price td { font-size: 16px;} .shop_finish_item td.work_img .imgBox{ width: 200px; height: 120px; background: #fafafa; } .shop_finish_item td.work_img .imgBox img{width: 200px; height: 120px;object-fit: cover;border-radius: 12px;} .shop_finish_item .work_info{padding-left:20px;} .shop_finish_item .work_info .tit{ font-size: 17px; font-weight: 500; color: #222; } .shop_order_works_list .work_info .made{ margin-bottom: 0; font-size: 15px; font-weight: 400; color: #666; } /* 제목스타일 */ .tit0{color:#000;font-size:26px;line-height:1.5;} .tit1{color:#666;font-size:20px;line-height:1.6;} .tit2{color:#666;font-size:15px;} .tit3{color:#9FB0BF;font-size:21px;} .tit4{color:#9FB0BF;font-size:18px;} .tit5{font-size:20px;} .deco-line-bottom:after{content:'';display:block;width:53px;height:2px;margin:25px auto 0;background:#8B9F8B;} /* 탭 */ .tab{margin-bottom:20px;align-items: center;} .tab li{border-bottom:2px solid #fff;height:50px;} .tab li a{display:block;padding:10px 0;} .tab li.active a{color:#9FB0BF;font-weight:500;} .tab li.active {border-color:#9FB0BF;} /* 열 정렬 */ .align-side{display:flex;justify-content:space-between;} .col2{display:flex;} .col2 > *{width:50%;} .list-bar{} .list-bar li{position:relative;padding-left:12px;} .list-bar li + li{margin-top:5px;} .list-bar li:before{content:'';position:absolute;top:10px;left:0;width:5px;height:1px;background:#fff;} /* 상품페이지 LIST, VIEW */ .prd-list{} .prd-list-item-btn-bx{display:flex;flex-wrap: wrap;} .prd-list-item-btn-bx > li{width:50%;border:1px solid #B8CAD9;} .prd-list-item-btn-bx > li.active a{color:#fff;background:#999;} .prd-list-item-btn-bx > li a{display:block;padding:10px;} .prd-list-item-btn-bx > li:nth-child(even){border-left:0;} .prd-list-item-btn-bx > li:nth-child(n+3){border-top:0;} .prd-list-item{display:flex;margin-top:50px;flex-wrap: wrap;} .prd-list-item li{position:relative;width:calc((100% - 10px) / 2);margin:0 0 20px 10px; font-family: "myriad-pro", sans-serif; font-weight: 400; font-style: normal;} .prd-list-item li:nth-child(2n+1){margin-left:0;} .prd-list-item li img{width:100%; object-fit: cover;} .prd-list-item .prd-name{margin-top:10px;font-weight:500;line-height:1.4;} .prd-list-item .prd-price{font-size:0.9em;color:#666;} .prd-list-item .colorPrice{font-family: "Pretendard Variable", Pretendard, -apple-system;} /* 상품목록 (상품명, 가격 cols2) */ .prd-list-bx li a:nth-child(2){overflow:hidden;display:block;margin-top:10px;} .prd-list-bx li a:nth-child(2) .prd-name{height: 40px;margin-top:0;font-size:13px;line-height:1.3;} .prd-list-bx li a:nth-child(2) .prd-price{overflow:hidden;color:#9FB0BF;font-size:0.95rem;text-align:right;font-weight:500;} .prd-list-bx .prd-name-bx{margin-bottom:5px;} .prd-list-bx .member-price{color:#111;font-size:13px; font-family: "Pretendard Variable", Pretendard, -apple-system;} .prd-list-bx .member-price > *:first-child{display:inline-block;padding-right:2px;} .input-group { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; } .adm-order-reg-prd-eq .btn{height:34px;min-width:35px;border:1px solid #ced4da;text-indent:-999em;border-radius:0;} .adm-order-reg-prd-eq input{margin:0 -1px;padding:5px;text-align:center !important;} .adm-order-reg-prd-eq .btn.btn-minus{background: url('/images/common/ico-btn-minus.png') 50% / 10px no-repeat;} .adm-order-reg-prd-eq .btn.btn-plus{background: url('/images/common/ico-btn-plus.png') 50% / 10px no-repeat;} .prd-price-txt{color:#222;font-weight:500;} .prd-detail-info{} .prd-detail-info > img{width:100%;object-fit: cover;border:0px solid #eee;} .prd-detail-info > div{color:#222;} .prd-detail-info > div .prd-name{margin-top:20px;font-size:20px;font-weight:500;} .prd-detail-info > div .prd-name-sub{font-size:15px;color:#666;} .prd-detail-info > div .prd-price{} .prd-detail-info > div > ul{margin-top:20px;padding-top:10px;border-top:1px solid #eee;} .prd-detail-info > div > ul + ul{margin-top:20px;padding-top:10px;} .prd-detail-info > div > ul li{position:relative;margin-top:10px;padding-left:130px;color:#666;} .prd-detail-info > div > ul span{position:absolute;left:0;top:0;color:#333;} .prd-detail-info .order-total-bx{margin-top:30px;padding:10px;text-align:right;background:#eee;} .prd-detail-info .order-total-bx strong{margin-left:20px;color:#222;font-size:20px;} .prd-detail-info .order-btn-bx{display:flex;justify-content:space-between;margin-top:30px;} .prd-detail-info .order-btn-bx *{display:inline-block;height:auto !important;line-height:46px !important;font-size:15px;text-align:center;vertical-align:middle; flex:1;} .prd-detail-info .order-btn-bx *:first-child{color:#333;border:1px solid #333;} .prd-detail-info .order-btn-bx *:last-child{color:#fff;background:#333;border:1px solid #333;} .order-rules-cont { background: #fff;} .order-rules-bx{width:100%;margin-bottom:20px;color:#666;border:1px solid #B8CAD9;} .order-rules-bx th{padding:20px 15px;color:#222;font-weight:500;text-align:left;vertical-align:top;} .order-rules-bx thead{background:#f4f4f4;} .order-rules-bx thead th{padding:10px 15px;font-size:16px;} .order-rules-bx thead th strong{color:#002c6e;} .order-rules-bx strong{color:#222;font-weight:500;} .order-rules-bx tbody th{} .order-rules-bx tbody td{padding:20px 15px;font-size:14px;} .order-rules-bx li {margin-top: 5px;padding-left: 8px;position: relative;line-height: 1.5;} .order-rules-bx li:first-of-type {margin-top: 0;} .order-rules-bx ul li:before {content: "";position: absolute;left: 0;top: 0.6em;width: 3px;height: 3px;background: #666;border-radius: 100%;} .order-rules-bx ol li{margin-left:20px;list-style-position:outside ;} .detail-rules-bx{padding:20px;color:#333;border-bottom:1px solid #B8CAD9;text-align:left;background:#fff;} /* 커뮤니티 > 반품/교환/환불 정책 */ .community-wrap-return{} .community-wrap-return h4.tit7{display:none;} .community-wrap-return .order-rules-bx{border-color:#00317e;} .community-wrap-return .order-rules-bx thead th{margin-bottom:60px;padding:10px;color:#fff;font-size:16px;background:#00317e;} .community-wrap-return .order-rules-bx thead th strong{color:#fff;} .community-wrap-return .order-rules-bx li{margin:10px 20px;line-height:1.6;} .community-wrap-return .order-rules-bx .fwm{color:#222;} /* 페이지 준비중 */ .readyreadyready{text-align:center;padding:80px 10px;font-size:20px;} .readyreadyready span{padding:0 4px;color:#fff;background:#9FB0BF;} @media screen and (max-width:1300px) { } /* 하단 측정하기 고정버튼 */ .bottom-fix-btn { position: fixed; bottom: 20px; right: 20px; z-index: 112;} .bottom-fix-btn li a{box-shadow: 0.3px 1px 6.6px 0.2px rgba(0, 0, 0, 0.29);border-radius: 4px;} .bottom-fix-btn li + li{margin-top:10px;} .bottom-fix-btn .btn { display: block; width:60px; height: 60px; padding:8px 5px; line-height: normal; font-size: 0;} .bottom-fix-btn .btn.btn-measure {background: rgb(20,57,127);background: linear-gradient(0deg, rgba(20,57,127,1) 0%, rgba(94,122,172,1) 100%);text-align: center;} .bottom-fix-btn .btn span { color: #000; font-size: 12px; font-weight: 500; line-height:1.2;} .bottom-fix-btn .btn.btn-measure span { color: #fff; } .bottom-fix-btn .btn.btn-qna {padding: 2px 0;background:#fee500;} .bottom-fix-btn .ir.ico-camera { display: block; width: 22px; height: 22px; margin: 5px auto 0; background:url(/images/common/ico-camera.png) 50% / 100% no-repeat;} .bottom-fix-btn .ir.ico-qna { display: block; width: 22px; height: 22px; margin: 5px auto 0; background:url(/images/common/ico-kakao.png) 50% / 100% no-repeat;} /* 아이콘 공통 사용 중 */ .bottom-fix-btn .ir.ico-top { display: block; width: 22px; height: 22px; margin: 5px auto 0; background:url(/images/common/ico-top.png) 50% / 100% no-repeat;} /* 2022-06-27 마이페이지 > 쿠폰 */ .coupon-exc-bx{padding:20px;border-top: 1px solid #B8CAD9;} .coupon-exc-bx button{width:100%;height:40px;} /* 팝업 (기본) */ .pop-layer{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:999;} .pop-layer > div{position:fixed;top:50%;left:30px;right:30px;background:#fff;box-shadow: 0.618px 1.902px 9.6px 0.4px rgba(0, 0, 0, 0.17);transform:translateY(-50%);z-index:1;} .pop-layer > div h3{padding:10px 20px;color:#fff;background:#8B9F8B;} .pop-layer-inner{padding:20px;} .pop-layer-inner #frm_coupon input[type=text]{width:100%;margin-bottom:10px;} /* 주문 > 무통장입금 */ .mutong-wrap{margin:10px 20px 20px;padding:10px;font-size:14px;border: 1px solid rgb(221, 221, 221);border-radius: 12px;background:#fafafa;} .mutong-wrap input{background-color:#fff;} .mutong-item + .mutong-item, .mutong-item ul li + li{margin-top:5px;} .mutong-item-col2 > label{display:block;color:#222;font-weight:500;} .mutong-item-col2 > label:before{content:'';display:inline-block;width:4px;height:10px;margin-right:5px;background:#00317e;} .mutong-item-col2 *:nth-child(2){display:inline-block;width:300px;height:34px;border-color:#ddd;} .mutong-item ul{margin-top:10px;} .mutong-item ul li{} .mutong-item ul li span{display:inline-block;width:80px;vertical-align:top;} .mutong-item ul li > div{display:inline-block;width:calc(100% - 100px);} .mutong-item ul li > div > div {margin-bottom:5px;} .tax-addr-bx > div .btn-ss{height:34px;} .frm_input.od_settle_bank_tel, .frm_input.od_settle_bank_tax{display:none;} .mutong-item.settle_box, .mutong-item.settle_box2{margin:20px 0 0;padding:10px;background:#fff;} .settle_box ul{position:relative;padding-bottom:46px;} .settle_box input[type=text]{position: absolute;left: 0;bottom:0;margin:5px 0;;width:100%;} .tax-addr-bx .clear input{width:40%;} /* 주소찾기 */ .wrap_zip_layer_m{border:2px solid #103472;width:80%;top:30%;left:40px;right:40px;position:fixed;height:400px;max-height:400px !important;z-index:101;} /* 우편번호 주소찾기 레이어 */ /* 2022-06-30 마이페이지 > 주문조회 > 리뷰 작성팝업 */ .star-bx{border-bottom:1px dotted #ccc !important;} .star-bx li{display:inline-block;margin:5px 0;} .star-bx img{height:16px;} .star-bx input[type="radio"] + label{padding: 0 10px 0 20px;} .star-bx input[type="radio"] + label:before { left: 0; top: 4px; width: 14px; height: 14px; } .star-bx input[type="radio"] + label::after { top: 7px; left: 3px; width: 10px; height: 10px; } .boardWrite .inputListDefault select{width:100%;} /* .testR { position: relative;} .test01 { position: absolute; top: 0; left:0; animation: test01 2s infinite;} .test02 { position: absolute; top: 0; left:0; animation: test02 2s infinite; } @keyframes test01 { 0% { opacity: 1} 3% { opacity: 1;} 100% { opacity: 0; } } @keyframes test02 { 0% { opacity: 0;} 100% { opacity: 1; } } */ @media only screen and (max-width: 640px){ .mypageList .mypagecont { display: block;} .mypageList .mypagebtn { } .mypageList .mypagebtn * + *{margin-top:5px;margin-top:0 !important;} .mypageList .mypagebtn button, .mypageList .mypagebtn a{width:80px;height:34px;font-size:1em;line-height:34px;} .my-info-shipping-state ul li strong{font-size:3vw;;} } /* 2022-10-25 detail-other */ .detail-other-txt-wrap{} .detail-other-txt-wrap .order-btn-bx{} .detail-other-btn{display:flex;justify-content:space-between;} .detail-other-btn > *{width:32%;border-radius:0;font-size:14px;} .detail-other-desc{margin-top:20px;padding-top:10px;border-top:1px solid #eee;} .order-ev-btn-bx{display:flex;justify-content: space-between;flex-wrap:wrap;} .order-ev-btn-bx > *{width:calc(50% - 5px);height:44px;border-radius:0;font-size:14px;} .order-ev-btn-bx > *:first-child{width:100%;margin-bottom:10px;} .detail-other-desc{margin-top:20px;padding-top:10px;border-top:1px solid #eee;} .event-txt{padding:40px;} .event-txt > p{color:#222;font-size:1.5em;} .event-txt > p span{color:#ec5c5c;} .detail-other-txt-wrap .event-txt{margin:20px 0 0;padding:10px;text-align:center;} .detail-other-txt-wrap .event-txt > p{display: inline-block;font-size:1.1em;padding:10px 20px;background-color:#f4f4f4;} .detail-other-txt-wrap .event-txt > p span{} /* 2023-07-04 */ .btn-membership{display:inline-block;height:auto;padding:0.6em 2em 0.8em;color:#fff;font-size:1.4em;font-weight:500;line-height:1em;background:#658c4b;border-radius:99px;} /* 2023-08-01 { */ /* FAQ > NEW */ /* color */ :root { --primary-color: #002C6E; --second-color: #9FB0BF; --other-color: #5B8C6E; } .community-faq-new{} .community-faq-new h3{padding:40px 0 20px;color:#000;} .community-faq-new .tab-bxbx.tab-bxbx-sm{padding:0;overflow-x:inherit;border-left:1px solid #ececec;} /* FAQ > NEW - 탭 */ .tab-bxbx{margin:40px 0 0;} .tab-bxbx .tab-bxbx-list-new{display:flex;flex-wrap: wrap;box-shadow: 4px 4px 10px rgba(0,0,0,0.1);background:#fff;align-items: stretch;} .tab-bxbx .tab-bxbx-list-new > li{font-size:14px;text-align:center;width: calc(100% / 3);} .tab-bxbx .tab-bxbx-list-new > li a{position:relative;display:block;height: 100%;padding:20px 10px; color:#222;font-weight:500;border-bottom:1px solid #ececec;border:1px solid #ececec;} .tab-bxbx .tab-bxbx-list-new > li:nth-child(3n+1) a{border-left:0;} .tab-bxbx .tab-bxbx-list-new > li:nth-child(n+4) a{border-top:0;} .tab-bxbx .tab-bxbx-list-new > li:last-child a{border-right:1px solid #ececec;} .tab-bxbx .tab-bxbx-list-new > li a:before{content:'';display:block;width:25px;height:25px;margin:0 auto 10px;vertical-align:middle;background:url(/images/common/ico-faq.png) no-repeat;background-size:145px;} .tab-bxbx .tab-bxbx-list-new > li a:hover:before{background-image:url(/images/common/ico-faq-on.png);} .tab-bxbx .tab-bxbx-list-new > li a:hover{color:var(--other-color);} .tab-bxbx .tab-bxbx-list-new > li a:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--other-color);transition:0.3s ease;opacity:0;} .tab-bxbx .tab-bxbx-list-new > li a:hover:after{opacity:1;} .tab-bxbx .tab-bxbx-list-new > li a.fq01:before{background-position:0 0;} .tab-bxbx .tab-bxbx-list-new > li a.fq02:before{background-position:-30px 0;} .tab-bxbx .tab-bxbx-list-new > li a.fq03:before{background-position:-60px 0;} .tab-bxbx .tab-bxbx-list-new > li a.fq04:before{background-position:-90px 0;} .tab-bxbx .tab-bxbx-list-new > li a.fq05:before{background-position:-120px 0;} .tab-bxbx .tab-bxbx-list-new > li a.fq06:before{background-position:0 -30px;} .tab-bxbx .tab-bxbx-list-new > li a.fq07:before{background-position:-30px -30px;} .tab-bxbx .tab-bxbx-list-new > li a.fq08:before{background-position:-60px -30px;} .faq-breadcrumb{padding:20px 0 10px 0;} .faq-breadcrumb a:first-child{margin-left:0;} .faq-breadcrumb a:last-child{color:#999;pointer-events: none;} .faq-breadcrumb a{margin:0 10px;} .newfaq-wrap{} .faq-category{padding:20px 0;overflow-x:scroll;} .faq-category .tab-bxbx-list{display:block;background:#fff;white-space:nowrap;} .faq-category .tab-bxbx-list > li{display:inline-block;width:auto !important;min-width:90px;text-align:center;} .faq-category .tab-bxbx-list > li + li{margin-left:8px} .faq-category .tab-bxbx-list > li a{display:block;padding:6px 10px;font-size:14px;border:1px solid #dcdcdc;border-radius:99px;} .faq-category .tab-bxbx-list > li.active a{color:#fff; background:#77A6ED;border-color:#77A6ED;} .newfaq-wrap .faq-category li a, .faq-category-intro-item li a, .faq-category-related li a{color:#666;} .faq-category h3, .faq-category-intro h3{padding-bottom:10px;color:#000;} .faq-category-intro{} .faq-category-intro-item{margin-bottom:30px;} .faq-category-intro-item li{margin:0 0 10px;} .faq-category-intro-item li:nth-child(n+7){display:none;} .faq-category-intro-item li a:hover, .faq-category-related li a:hover{text-decoration:underline;} .list-view-more{margin-top:20px;} .list-view-more > *{color:var(--other-color);cursor:pointer;} .faq-category-view > h3{margin:0 0 40px;color:#000;font-size:1.5em;line-height:1.2;} .faq-category-helpful{display:flex;flex-direction: column;align-items: center;margin:40px 0;padding:40px;border-top:1px solid #B8CAD9;border-bottom:1px solid #B8CAD9;} .faq-category-helpful a{color:var(--other-color);} /* FAQ > NEW - 내용이 도움이 되었나요? */ .faq-helpful-btn li{display:inline-block;margin:10px 4px 30px 4px;} .faq-helpful-btn li div input[type=checkbox] + label{display:inline-block;width:40px;height:40px;margin:auto;font-size:14px;border-radius:50px;text-indent:-9999em;background:url(/images/common/ico-helpful.png) no-repeat;background-size:85px;} .faq-helpful-btn li:last-child div input[type=checkbox] + label{background-position:100% 0;} .faq-helpful-btn li div input[type=checkbox]:checked + label{border-color:var(--other-color);background-image:url(/images/common/ico-helpful-on.png);} .faq-helpful-btn li div input[type=checkbox] + label:before, .faq-helpful-btn li div input[type=checkbox] + label:after{display:none;} /* FAQ > NEW - 관련문서, 최근문서 */ .faq-category-related{} .faq-category-related > *{margin-bottom:20px;} .faq-category-related li{margin:0 0 5px;} /* } 2023-08-01 */ /* 2023-12-20 상품상세 탭추가 { */ .prd-detail-tab{display:flex; margin:0 -20px;} .prd-detail-tab li{flex:1;color:#222;background:#f4f4f4;cursor:pointer;} .prd-detail-tab li span{display:block;padding:8px;text-align:center;} .prd-detail-tab li.active{color:#fff;background:#111;border-color:#111;} /* 2023-12-20 } */ /* 2024-10-29 옵션, 총금액, 장바구니 버튼 */ .total-price{display:flex; justify-content: space-between; align-items: center;} .total-price .price{ color:#002C6E; font-size:1.8em; align-items: center;} .btn-odrer-bx{padding:0 0 15px;/* position:fixed;bottom:0px;left:0;right:0;background:#fff;z-index:99;box-shadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.05); */} .btn-odrer-bx ul{display:flex;flex-wrap: wrap;justify-content: space-between;} .btn-odrer-bx ul li{width:calc(50% - 1px);margin:5px 0;} .btn-odrer-bx ul li .btn{display:block;width:100%;height:44px;font-size:15px;line-height:44px; border-radius: 0;} .product-opt{margin-top:20px; padding:20px 0; border-top:1px solid #eee;} .product-opt dt{padding-bottom:10px; font-weight:500;} .product-opt ul{display:flex;flex-wrap: wrap;} .product-opt ul li:nth-child(5n) {margin-right: 0;} .product-opt ul li {width: calc(100% / 5); margin: 0 0 10px; padding: 1px;} .product-opt ul li a {display: block;min-width: 30px;line-height: 28px;text-align: center;text-decoration: none;word-break: break-all;} .product-opt ul li a {min-width: 40px;width: 100%;height: auto;} .product-opt ul li a span {overflow: hidden;display: block; line-height: normal;font-size: 11px;color: #000;padding: 6px 2px;text-indent: 0;white-space: nowrap;letter-spacing: 0;} .preview-color li img {border: 1px solid #c8c8c8;} .preview-size span {padding: 5px 2px !important; font-size: 14px !important; border: 1px solid #c8c8c8;} .preview-size ul li {margin: 0 0 2px; padding: 2px; } .preview-color li.selected img, .preview-size li.selected span {border-color:#111; border-width:3px;} .item-opt{line-height:0;} .item-opt input + label{padding:0; display:block;} .item-opt input + label:before{position:relative; display:none;} .item-opt input + label:after{position:absolute; top:0; left:0; right:0; bottom:0; width:auto; height:auto; border-radius:0; background:none;} .item-opt input[type="radio"]:checked + label:after {background:none;} .item-opt input + label span{display:block; text-align:center; line-height:2; font-size:11px;} .opt-color input[type="radio"]:checked + label img {border:3px solid #111;} .opt-size input[type="radio"]:checked + label span{border:3px solid #111; } .opt-size input[type="radio"]:disabled + label {color: #b1b1b1; background:#f4f4f4; pointer-events: none;} .opt-size input[type="radio"]:disabled + label span{border-style:dashed; } i.xi-x{font-family: xeicon;} .eq-btn-bx{display:flex;} .eq-btn-bx > div{display:flex;align-items: center;border:1px solid #B8CAD9;background:#fff;} .eq-btn-bx .input-group-prepend, .eq-btn-bx .input-group-append{width:34px;} .eq-btn-bx .input-group-prepend a, .eq-btn-bx .input-group-append a{display:block;height:100%;text-align:center;} .eq-btn-bx input{padding:0;text-align:center;border-top:none;border-bottom:none;} .option-bx{display:flex;align-items: center;} .option-bx > div:first-child{margin-right:40px;} .option-bx > div > span{margin-right:5px;} .item-eq-bx-price{font-size:16px;} .order-total-wrap{margin-top:30px;padding: 20px;background: #eee;} .order-total-wrap > ul > li{position:relative;padding: 10px 0;font-size:14px;border-bottom:1px solid #d2d2d2;} .order-total-wrap > ul > li .ppname{font-weight:500;} .order-total-wrap > ul > li .ppotp{font-size:13px;} .order-total-wrap .btn-opt-del{position:absolute;right:0;top: 4px;} .item-eq-bx{display:flex; align-items: center; padding-top:10px;} .item-eq-bx .posR{padding-right:30px;} /* 회사소개 */ .company-wrap{color:#111; text-align:center; } .company-vs{padding: 20vw 20px; color:#fff; background:url(../../images/contents/bg-about.jpg) 50% / cover no-repeat;} .company-vs h3{margin-bottom:.5em; font-size:24px; line-height:1.2;} .company-vs p{font-weight:300;} .company-mission{padding:40px 0; font-size:13px;} .company-mission h3{font-size:24px; } .company-mission h4{padding:20px 0 30px; font-size:15px; font-weight:500;} .company-mission p{color:#444;} .company-history{padding:80px 10px;} .company-history ul {position: relative; width: 96%; margin: 0 auto; } .company-history ul:after {content: ''; position: absolute; top:0; bottom: 0; left:50%; border-right: 1px solid #eee;} .company-history ul li{position: relative; width: 50%; left: 50%; padding-top: 40px; padding-bottom: 20px; font-size:13px; text-align: left; } .company-history ul li strong{font-size: 26px;} .company-history ul li::after{content: ''; position: absolute; top:60px; display: block; width: 9px; height: 9px; background:#bbb; border-radius: 50%; z-index: 9;} .company-history ul li:nth-child(odd){padding-left: 20px;} .company-history ul li:nth-child(odd)::after{left: -5px;} .company-history ul li:nth-child(even)::after{right: -5px;} .company-history ul li:nth-child(even){left: auto; right:0; padding-right: 20px; text-align: right; } .company-wrap-docsole article{font-size: 15px; font-weight: 300;} /* 브랜드 > 닥솔 */ .brand-top{padding:150px 0 171px;color:#fff;line-height:1.5;background:url(//www.docsole.co.kr/images/contents/bg-brand-story.jpg) 50% / cover no-repeat;} .brand-top h2{font-size:26px; font-weight:500; /*font-weight:400;*/}/*2022-05-04수정*/ .brand-top h2 strong{padding:0 25px 5px 0;background:url(//www.docsole.co.kr/images/contents/txt-line.png) 100% 100% /98px 12px no-repeat;} .brand-top p{font-size: 15px;} .brand-top p strong{font-weight:bold;/*font-size:1.6em;*/line-height:1.4;}/*2022-05-04수정*/ .brand-story-knowhow{margin:40px 0 50px;justify-content: center;align-items: flex-end;} .brand-story-knowhow dl{display:flex;width: 270px;height: 270px;margin:30px auto 0;border-radius: 50%;background-color: rgb(255, 255, 255);box-shadow: 5px 0px 20px 0px rgba(0, 56, 122, 0.35);flex-direction: column; justify-content: center; align-items: center;} .brand-story-01 p{color:#000; font-weight:300;} .brand-story-01 strong{font-weight:500;} /* .brand-story-knowhow .brand-story-01-01{box-shadow: 5px 0px 20px 0px rgba(0, 56, 122, 0.35);} */ .brand-story-knowhow .brand-story-01-02{box-shadow: -5px 0px 20px 0px rgba(0, 56, 122, 0.35);} .brand-story-knowhow dl:before{content:'';display:block;width:30px;height:40px;} .brand-story-knowhow dt{margin-top:20px;color:#6492cd;font-size:16px;font-weight:700;} .brand-story-knowhow dd{margin-top:0.8em;line-height:1.8;font-size: 14px;} .brand-story-01-01:before{background:url(//www.docsole.co.kr/images/common/ico-knowhow.png) 50% / cover no-repeat;} .brand-story-01-02:before{background:url(//www.docsole.co.kr/images/common/ico-system.png) 50% / cover no-repeat;} .brand-story-01-03:before{background:url(//www.docsole.co.kr/images/common/ico-myinsole.png) 50% / cover no-repeat;} .mv-brand-story{width: 100%;} .brand-story-02{} .product-info-02 > div{text-align: center;} .product-info-02 > div.active{display:block;} .product-info-02 > div h3{font-size: 20px;} .product-info-02 > div h4{font-size: 16px;} .brand-story-02 .brand-story-02-tab { display: block; padding: 0 0 60px 0;} .brand-story-02-tab ul { display: flex; align-items: center; margin: 0 -5px;} .brand-story-02-tab ul li { display: flex; justify-content: center; align-items: center; width: 25%; height: 80px; margin: 0 5px; border: 1px solid #6492cd; border-radius: 4px;} .brand-story-02-tab ul li.active {background: #6492cd; box-shadow: 3px 4px 7px 0 rgba(0,0,0,0.15);} .brand-story-02-tab ul li button { width:100%; height:100%; color: #6492cd; font-weight: bold;} .brand-story-02-tab ul li.active button { color: #fff;} .brand-story-02 > div:nth-child(odd) .inner .brand-story-02-con{} .brand-story-02 .brand-story-02-02 { background: #e9f3ff;} .brand-story-02 .brand-story-02-02 .inner{ padding: 45px 20px;} .brand-story-02-con{padding-top: 25px; } .brand-story-02-img { overflow: hidden; text-align: center; border-bottom-right-radius: 50px;} .brand-story-02-con p{padding:20px 0;} .brand-story-02-con p + p{padding-top:0;} .brand-story-02-con p:last-child{padding-bottom:35px;} .gallery-top{padding-bottom:40px;} .product-info-tab-cont { padding-bottom: 40px;} .product-info-tab-cont.fix { position: fixed; top: 40px; left: 0px; right: 0px; height: 120px; padding-top:20px;padding-bottom: 0; background: #fff; z-index: 9;} .product-info-tab-cont.fix ul { padding: 20px; } .product-info-tab-cont.fix .swiper-wrapper { padding-bottom: 0;} .product-info-tab-cont ul {display: flex; justify-content: space-between; align-items: center; background: #fff; color: #6492cd;z-index:99} .product-info-tab-cont ul li { width: calc(25% - 10px); box-shadow: 3px 4px 7px 0 rgba(0,0,0,0.15); border-radius: 4px;} .product-info-tab-cont button { width: 100%; height: 80px; color: #6492cd; border: 1px solid #6492cd; border-radius: 4px; font-size: 14px;font-weight: 500;letter-spacing: -1px;} .product-info-tab-cont li.active button { background: #6492cd; color: #fff; } .product-info-02 .brand-story-02-02 { background: transparent;} .product-info-02 img{max-width:70% !important;max-height:200px;} .brand-story-04{background:#6492cd;} .brand-story-04 ul{} .brand-story-04 ul li{position:relative;width: 100%;height: 200px;color:#fff;font-size:30px;font-weight:700;} .brand-story-04 ul li div{position:absolute;bottom:0;right:0;display:flex;justify-content: center;align-items: center;width:50%;height:100%;background-color: rgba(0, 0, 0,.5);} .brand-story-04 ul li div p { font-size: 18px;} .brand-story-04 ul li div p:before{content:'';display:block;width:20px;height:1px;background:#fff;} .brand-story-04 ul li:nth-child(1){background:url(//www.docsole.co.kr/images/contents/bg-brand-story-04-01.jpg) 50% / cover no-repeat;} .brand-story-04 ul li:nth-child(2){background:url(//www.docsole.co.kr/images/contents/bg-brand-story-04-03.jpg) 50% / cover no-repeat;} .brand-story-04 ul li:nth-child(3){background:url(//www.docsole.co.kr/images/contents/bg-brand-story-04-02.jpg) 50% / cover no-repeat;} .brand-story-04 ul li:nth-child(4){background:url(//www.docsole.co.kr/images/contents/bg-brand-story-04-04.jpg) 50% / cover no-repeat;} .brand-story-05{background:url(//www.docsole.co.kr/images/contents/bg-history.png) right bottom / 70% no-repeat;} .brand-history > div{} .brand-history-item{display: flex;min-width:20%;justify-content: flex-end;padding-bottom: 10px;} .brand-history-item > div { display: flex; flex-direction: column; width: 50%; text-align:left;} .brand-history-item p{transform: translateX(-12%);color:#6492cd;font-size:20px;font-weight:700;} .brand-history-item dl{position:relative;height:100%;padding-left:20px;} .brand-history-item dl:before, .brand-history-item dl:after{content:'';display:block;position:absolute;} .brand-history-item dl:after{top:4px;left:0;width:10px;height:10px;transform: translateX(-50%);background:#969faa;border:5px solid #fff;border-radius:50%;} .brand-history-item dl:before{top:4px;bottom:0px;left:0;width:1px;background:#ced2d7;transform: translateX(-50%);} .brand-history-item dt{margin-bottom:5px;color:#000;font-size:15px;font-weight:700;} .brand-history-item dd{font-size: 14px;} .brand-history-item:nth-child(even){justify-content: flex-start;padding-left: 0;} .brand-history-item:nth-child(even) > div {text-align: right;} .brand-history-item:nth-child(2) p { transform: translateX(10%);} .brand-history-item:nth-child(4) p { transform: translateX(8%)} .brand-history-item:nth-child(even) dl { padding-left: 0; padding-right: 20px;} .brand-history-item:nth-child(even) dl::before { left: auto; right: 0; transform: translateX(50%);} .brand-history-item:nth-child(even) dl::after { left: auto; right: 0; transform: translateX(50%);} .main-advice-group .swiper-container { padding: 15px 20px 35px;} .main-advice-group .swiper-slide { width: 70%; } .brand-story-03-bx { padding: 20px 15px; background: #fff; border-radius: 4px; box-shadow: 0px 5px 13px 0px rgb(0 0 0 / 13%); } .main-advice-group img{width:150px;height:150px;border-radius:50%;object-fit: cover;} .main-advice-group dl{margin-bottom:30px;} .main-advice-group dl:last-child{margin-bottom:0px;} .main-advice-group dl dt{margin-bottom:20px;} .main-advice-group .name{font-size:18px;color:#000;font-weight:700;} .main-advice-group .txt{color:#666;font-size:13px;} .main-advice-group .txt.color0{font-weight:300;} .main-advice-group .txt:last-child { font-size: 14px;} /* 브랜드 > 르무통 */ .bs_area { margin: 10% 0; background-image: url("../../images/contents/bs1_01.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat;} .bs_area .sunny_inner { padding: 30% 3%; text-align: center; font-size: 26px; line-height: 40px; font-weight: 500; letter-spacing: 4px;} .bs_area1 { margin-top: 10%; background-image: url("../../images/contents/bs1_05.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat;} .bs_area1 .sunny_inner { padding: 30% 3%; text-align: center; font-size: 26px; line-height: 40px; color: #fff; font-weight: 500; } .bs_area2 { margin-top: 10%; background-image: url("../../images/contents/bs1_07m_5_.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat;} .bs_area2 .sunny_inner { padding: 70% 10%; font-size: 26px; line-height: 40px; font-weight: 500; } .bs_area3 { margin-top: 10%; background-image: url("../../images/contents/bs1_17m.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat;} .bs_area3 .sunny_inner { padding: 50% 10%; font-size: 26px; line-height: 40px; font-weight: 500; } .bs_area4 { margin-top: 0%; background-image: url("../../images/contents/bs1_15.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat;} .bs_area4 .sunny_inner { padding: 30% 0 40%; font-size: 25px; line-height: 35px; color: #fff; font-weight: 500; text-align: center;} .bs_area4 .sunny_inner span { font-size: 20px; line-height: 20px; color: #fff; font-weight: 600; text-align: center;} .bs_box2 { padding: 5% 20px 15%;} .bs_box2 dd.img { margin-top: 10%;} .bs_box2 dt { font-size: 35px; margin-top: 0px; font-weight: 600; letter-spacing: -2.5px; padding-left: 5%;} .bs_box2 dd.txt { font-size: 15px; padding: 0; letter-spacing: -1.5px; font-weight: 300;} .bs_box2 dd.txt2 { font-size: 18px; padding: 2% 0 0; font-weight: 500;} .bs_box2 dd.txt2 .underline { position: relative;} .bs_box2 dd.txt2 .underline:after { content: ''; display: block; width: 100%; height: 1px; position: absolute; bottom: 1px; left: 1px; background: #242933;} .bs_box3 { padding: 0 5%; text-align: center;} .bs_box3 dd.img {} .bs_box3 dt { font-size: 15px; line-height: 30px; margin-top: -30px; font-weight: 300; } .bs_box3 dd.txt { font-size: 14px; line-height: 24px; padding: 5% 0 12% 5%; letter-spacing: -1.5px; font-weight: 300;} .bs_box4 { padding: 5% 5% 5%; text-align: center;} .bs_box4 dt { font-size: 25px; font-weight: 700; } .bs_box4 dd.txt1 { font-size: 15px; line-height: 26px; padding: 6% 0 5%; font-weight: 300;} .bs_box4 dd.txt2 { font-size: 26px; padding: 0 0 10%; font-weight: 300;} .bs_box4 dd.img { margin: 2% 0;} .bs_box5 { padding: 0% 5%; text-align: center;} .bs_box5 dt { font-size: 15px; font-weight: 800; } .bs_box5 dd.txt1 { font-size: 15px; padding: 5% 0 0; font-weight: 300;} .bs_box5 dd.txt2 { font-size: 15px; line-height: 26px; padding: 5% 0 10%; font-weight: 300;} .bs_box5 dd.list {} .bs_box5 dd.list ul { font-size: 0; letter-spacing: -5px; overflow: hidden;} .bs_box5 dd.list li { font-size: 12px; letter-spacing: 0; display: inline-block; vertical-align: top; *display: inline; zoom:1;width: 28%; text-align: center; padding: 0 2%;} .bs_box5 dd.list li span { display: block; font-size: 15px; line-height: 15px; padding: 10% 0 2%; } .bs_box6 { padding: 5% 5% 5%; text-align: center;} .bs_box6 dt { font-size: 25px; font-weight: 700; } .bs_box6 dd.txt1 { font-size: 18px; line-height: 26px; padding: 6% 0 5%; font-weight: 300;} .bs_box6 dd.img { margin: 2% 0;} .bs_box7 { padding: 10% 5%; text-align: center;} .bs_box7 dt { } .bs_box7 dd.txt1 { font-size: 24px; padding: 5% 0 0; font-weight: 500;} .bs_box7 dd.txt2 { font-size: 16px; line-height: 26px; padding: 10% 0 0; font-weight: 300;} .bs_box7 dd.list {} .bs_box7 dd.list ul { font-size: 0; letter-spacing: -5px; overflow: hidden;} .bs_box7 dd.list li { font-size: 12px; letter-spacing: 0; display: inline-block; vertical-align: top; *display: inline; zoom:1;width: 25%; text-align: center;} .bs_box7 dd.list li span { display: block; font-size: 12px; line-height: 12px; padding: 10% 0 2%; } .bs_box8 { padding: 10% 5%; text-align: center;} .bs_box8 dt { font-size: 26px; font-weight: 600; padding: 0 0 5%;} .bs_box8 dd.txt1 { font-size: 24px; padding: 10% 0 0; font-weight: 500;} .bs_box8 dd.txt2 { font-size: 16px; line-height: 26px; padding: 5% 0 0; font-weight: 300;} .bs_box9 { padding: 10% 5%; text-align: center;} .bs_box9 dt { font-size: 26px; font-weight: 600; padding: 0 0 5%;} .bs_box9 dd.txt1 { font-size: 24px; padding: 10% 0 0; font-weight: 500;} .bs_box9 dd.txt2 { font-size: 16px; line-height: 26px; padding: 5% 0 0; font-weight: 300;} .bs_box10 { padding: 10% 5%; background: #fff; text-align: center;} .bs_box10 dd.img { padding: 0 5%;} .bs_box10 dt { font-size: 26px; padding-bottom: 5%; font-weight: 600; } .bs_box10 dd.txt { font-size: 18px; line-height: 26px; color: #fff; padding: 5% 0 5% 5%; letter-spacing: -1.5px; font-weight: 300;} .bs_box10 dd.txt2 { font-size: 25px; color: #fff; padding: 2% 0 2% 5%; font-weight: 500;} .bs_box10 dd.txt2 .underline { position: relative;} .bs_box10 dd.txt2 .underline:after { content: ''; display: block; width: 100%; height: 1px; position: absolute; bottom: 1px; left: 1px; background: #fff;} .bs_box11 { padding: 10% 5%; text-align: center;} .bs_box11 dt { font-size: 26px; font-weight: 600; padding: 0 0 5%;} .bs_box11 dd.txt1 { font-size: 24px; padding: 10% 0 0; font-weight: 500;} .bs_box11 dd.txt2 { font-size: 18px; line-height: 26px; padding: 5% 0 0; font-weight: 300; padding: 0 0 3%;} .overlay-bg{content:'';position: fixed;top: 0;left: 0;right: 0;bottom: 0;overflow:hidden;background: rgba(0,0,0,0.4);z-index: 110;} .product-cart-fixed{display:none; position:fixed;left:0;right:0;bottom: 0;margin:0;padding:0;background:#fff;z-index:99;} .product-cart-fixed a{border-radius: 0;} .product-cart-fixed .real-btn-odrer-bx, .real-btn-odrer-bx.box_btn{display:flex;} div:not(.product-cart-fixed) .real-btn-odrer-bx.box_btn{padding:10px 0 20px;} .real-btn-odrer-bx.box_btn a,.product-cart-fixed a,.product-cart-fixed button{flex: 1;height: auto !important;line-height: 48px !important; font-size:15px; text-align:center;} .real-btn-odrer-bx.box_btn a{margin:0 2px;} /* 상품옵션 영역 고정, 비고정 */ .product-option-wrap.option-fixed .txt-pdrinfo-info-txtxtxtxt{display: none;} .product-option-wrap.option-fixed { position: fixed; left: 0; right: 0; bottom: 0; min-height: 284px; height: 500px; padding: 0 10px 50px; background: #fff; z-index: 121; overflow-y: scroll; } .product-option-wrap.option-fixed .preview-color{padding-top:12px;} .option-close{display:none;position: fixed;left:0;right:0;padding: 8px 14px;line-height: 2;font-size: 14px;font-weight: 500;text-align: center;border-bottom: 1px solid #B8CAD9;color: #222;background: #f1f1f1;border-radius: 0;z-index:99;} .option-close span.btnClose {overflow: hidden;position: absolute;display:block;width: 36px;height:36px;right: 7px;top: 5px;font-size: 0;background: url("../../images/common/btn-close.png") 50% / 15px no-repeat;text-indent: -150%;} /* 리뷰 { */ /* 2022-11-08 리뷰UI 변경 */ .plain-tit{font-size:18px;} .review-all-wrap{display:flex;overflow:hidden;margin-bottom:40px;padding: 20px;text-align:center;background-color: #f8f9fb;justify-content: center;} .review-all-item + .review-all-item {margin-top:20px;} .review-all-item .tit{color:#000;font-size:13px;font-weight:500;} .review-all-bx{} .review-all-item-01{width:100px;} .review-all-item-03{width:160px;} .review-all-bx .star-wrap {width: 100px; height:18px;margin:5px auto 0;background: url(/images/contents/star-review.png) 0 100% / 100px no-repeat;vertical-align: top;} .review-all-bx .star-wrap .star-bbx {width: 100px;height: 18px;background: url(/images/contents/star-review.png) 0 0 / 100px no-repeat;} .review-all-bx .star-bbx-txt{margin-top:5px;color:#E1E3E8;font-size:20px;font-weight:700;font-family:'Roboto';line-height:1.4;} .review-all-bx .star-bbx-txt span{color:#000;} .review-total .ico-bubble {display:block;width: 44px;height: 41px;margin:5px auto 10px;background: url(/images/common/ico-bubble.png) 50% / 100% no-repeat;} .review-rate .review-rate-bx {display: table;table-layout: fixed;width: 100%;margin-top: 7px;padding: 18px 0 28px;font-size:12px;} .review-rate .review-rate-item {display: table-cell;position: relative;text-align: center;} .review-rate .person {display: inline-block;position: relative;margin-top: -1px;height: 15px;padding: 0 3px;border-radius: 2px;background-color: #002c6e;font-family: arial,sans-serif;font-size: 11px;line-height: 15px;color: #fff;-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%);} .review-rate .person:before {position: absolute;bottom: -7px;left: 50%;margin-left: -4px;border: 4px solid transparent;border-top-color: #002c6e;content: "";} .review-rate .item {display: inline-block;position: relative;width: 7px;height: 110px;border-radius: 4px;background-color: #E1E3E8;} .review-rate .graph-bar {position: absolute;right: 0;bottom: 0;left: 0;min-height: 8px;} .review-rate .graph-bubble {position: absolute;bottom: 100%;left: 50%;z-index: 1;height: 19px;opacity: 0;} .review-rate .review-rate-item.active .graph-bubble {opacity: 1;} .review-rate .color-gauge {display: inline-block;width: 100%;height: 100%;border-radius: 4px;background-color: #D3D6D9;-webkit-box-shadow: inset 0 0 0 1px rgb(0 0 0 / 3%);box-shadow: inset 0 0 0 1px rgb(0 0 0 / 3%);vertical-align: top;} .review-rate .review-rate-item.active .color-gauge {background-color: #002c6e;} .review-rate .score {position: absolute;right: 0;bottom: -23px;left: 0;color: #000;} .tit-star-wrap {height: 14px;} .tit-star-wrap .tit-star-bbx {background: url(/images/contents/star-review.png) 0 100% / 74px no-repeat;width: 74px;height: 14px;display: inline-block;position: relative;vertical-align: top;} .tit-star-wrap .tit-star-bbx .tit-star {background: url(/images/contents/star-review.png) 0 0 / 74px no-repeat;width: 74px;height: 14px;display: block;} .tit-star-wrap .tit-score {display: inline-block;margin-left: 5px;font-family: Tahoma,helvetica,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;font-weight: bold;font-size: 16px;line-height: 18px;color: #000;vertical-align: top;} .ico-crown{position: absolute;top: 1px;left: 10px;width: 34px;height: 34px;background:#002c6e url(/images/common/ico-crown.svg) 50% / 16px no-repeat;border-radius: 0px 0px 2px 2px;opacity: 1;text-indent:-999em;} .review-img-bx ul{display:flex;justify-content:space-between;} .review-img-bx ul li{overflow:hidden;} .review-img-bx ul li:first-child{border-radius: 4px 0px 0 10px;} .review-img-bx ul li:last-child{border-radius: 0px 10px 10px 0px;} /* li가 하나일 때 */ .review-img-bx ul li:first-child:nth-last-child(1) { width: 100%; border-radius: 4px !important; } .review-img-bx ul li:first-child:nth-last-child(1) img{height: 60vw;} /* li가 2개일 때 */ .review-img-bx ul li:first-child:nth-last-child(2), .review-img-bx ul li:first-child:nth-last-child(2) ~ li { width:49%; } .review-bx-text .main-review-bx img{width:100%;height: 45vw;} .review-img-bx .count{position: absolute;top: 50%;right: 20%;margin-top:-15px;color:#fff;font-size:25px;text-align:center;font-weight:700;line-height:25px;} .review-rep{padding:20px;color:#000;font-size:14px;background: #F8F9FB ;border-radius: 4px;} .review-extend{padding:20px 4px;color: #707070;font-size:14px;border-bottom:1px solid #cdcdcd;cursor:pointer;} .review-extend.active{background: #fff ;} .review-extend-img{padding-top:10px;} .review-extend-img li + li{margin-top:10px;} .review-extend-img img{border-radius: 20px;} .main-review-bx{border: 1px solid #CDCDCD;box-shadow:none;} .review-bx .main-review-bx dl dt{border-bottom:none;} .review-bx .main-review-bx dl dd{color:#707070;font-size:14px;} .review-bx .main-review-bx img{height:40vw;} .review-bx > div{margin:0 0 10px;} #review_photo .review-bx .main-review-bx dl{padding-bottom:0;} #review_photo .main-review-bx{overflow:hidden;} #review_photo .main-review-bx-img{float:left;width:40vw;} #review_photo .main-review-bx-txt{overflow:hidden;padding:8px;} #review_photo .main-review-bx-txt br{display:none;} .review-bx-text .main-review-bx{padding:0;border:0;background:none;} .review-bx-text .main-review-bx dl dd{color:#707070;font-size:14px;} .review-bx-text > div + div{margin-top:0;} .review-bx-text .review-txt{padding-right:0;} .review-bx-text .review-txt.active, .review-bx-text .main-review-bx dl dd{height:auto;} .review-bx-text .main-review-bx dl dd.active{-webkit-line-clamp:inherit;-webkit-line-clamp:initial;} .review-bx-text .review-txt.active{height:auto;-webkit-line-clamp:inherit;-webkit-line-clamp:initial;} .review-bx-text .review-txt.active br{display:block;} .review-bx-text .review-txt.active:after{content:'접기';display:block;margin:10px 0;color:#222;background:url(/images/common/ico-arrow-up.png) 30px 8px no-repeat;} .pagination-more-btn{} .pagination-more-btn a{display:block;color:#000;font-size:15px;text-align:center;line-height:50px;background: #F4F7F8;} .review-view-pop-tit{padding:10px;color:#000;font-size:17px;text-align:center;} .review-view-pop-tit strong{} .review-view-pop-tit span{color:#999} /* 수정 */ #review_photo .review-writer{overflow:hidden;display:inline-block;max-width:calc(100% - 70px);height:21px;vertical-align:middle;} .review-day{color: #707070; vertical-align:middle; font-weight:400;} .review-view-pop{width:100%;top:55px;height:calc(100% - 60px);transform: translateY(0);} .review-view-pop dl dd{height:auto;color:#666;font-size:14px;overflow-y:hidden;} .review-view-pop .review-info{padding:20px 0 0;} .review-image-slide{height:calc(100% - 40px);overflow-y:auto;padding:20px;border-top:1px solid #e6e7e9;background:#f8fafc;} .slide-2{overflow:hidden;} .review-view-pop .guide-pop-close{position:fixed;top:10px;right:10px;width:30px;height:30px;margin: 0;text-indent:-9999em;background:url(../../images/common/ico-rev-close.png) 50% / 60% no-repeat;z-index:101;} .review-view-pop .move-btn{} .review-view-pop .move-btn > *{position:fixed;top:50%;width:40px;height:50px;z-index:101;margin: 0;text-indent:-9999em;} .review-view-pop .move-btn .move-btn-prev{left:0;background:rgba(0,0,0,0.5) url(../../images/common/btn-prev-page.png) 50% / 15px no-repeat;} .review-view-pop .move-btn .move-btn-next{right:0;background:rgba(0,0,0,0.5) url(../../images/common/btn-next-page.png) 50% / 15px no-repeat;} @media only screen and (max-width: 400px){ .review-bx .main-review-bx dl dd{font-size:3.5vw;} .review-bx .main-review-bx p{font-size:12px;} #review_photo .main-review-bx-txt{padding:0;} #review_photo .review-writer {max-width: calc(100% - 64px);} .review-bx .main-review-bx img {height: 46vw;} } /* 리뷰 } */ .bank-txt{color:#222;} .bank-txt > strong{font-size: 1.1em; font-weight: 500;} .bank-txt #bank-copy{padding: 10px 0 15px; color:#222; font-size: 1em;} .bank-txt div{margin-top: 10px; padding:20px 5px; border:1px solid #ddd; background:#f9f9f9;} .bank-txt .btn-chk-my{font-size: 13px;} /* 2025-04-14 견적서 */ .estimate-wrap {margin: 0; color: #222; font-size: 15px; font-weight: 400; line-height: 1.2; letter-spacing: -0.06em; z-index:-9999em;} .estimate-wrap p{line-height:1.2;} .estimate-wrap table{width:100%;} .estimate-pop-body{} .estimate-detail-pop-header {display: none; justify-content: space-between; align-items: center; font-size: 24px; margin-bottom: 25px; font-weight:700;} .estimate-detail-pop-header i.estimate-pop-close{display:block; width: 24px; height: 24px; cursor:pointer; background:url(../../images/common/btn-close.png) 50% / 16px no-repeat;} .estimate-detail-pop { padding: 10px;} .estimate-detail-pop .estimate-text-group { border:1px solid red display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; gap: 10px; margin-bottom: 24px } .estimate-detail-pop .estimate-text-group .title { font-size: 18px; padding-left: 0 } .estimate-detail-pop .estimate-text-group .amount { font-size: 28px; color: #ed2024; -webkit-transform: translateY(2px); transform: translateY(2px) } .estimate-detail-pop .estimate-text-group .amount-ko { font-family: SpoqaHanSansNeo; font-size: 13px; letter-spacing: -.65px; color: #222 } .estimate-detail-pop .estimate-product-table { margin-bottom: 24px } .estimate-detail-pop .estimate-product-table th { text-align: center; background-color: #f4f4f4; border-top: 2px solid #222 } .estimate-detail-pop .estimate-product-table th .cell { font-size: 13px; font-weight: 700 } .estimate-detail-pop .estimate-product-table th, .estimate-detail-pop .estimate-product-table td{ padding: 12px 10px; text-overflow: ellipsis; border-bottom: 1px solid #ebeef5;} .estimate-detail-pop .estimate-product-table td:not(:last-of-type) { border-right: 1px solid #ebeef5 } .estimate-detail-pop .estimate-amount-table { border-top: 2px solid #222; border-bottom: 1px solid #dadada; margin-bottom: 100px } .estimate-detail-pop .estimate-amount-table th { font-size: 13px; font-weight: 700; padding: 20px 20px; border-right: 1px solid #ebeef5; text-align: left } .estimate-detail-pop .estimate-amount-table th:last-of-type { width: 290px; border-right: none } .estimate-detail-pop .estimate-amount-table td { font-size: 18px; font-weight: 700; text-align: right; padding-right: 20px; padding-bottom: 20px; border-right: 1px solid #ebeef5 } .estimate-detail-pop .estimate-amount-table td:last-of-type { font-size: 24px; font-weight: 900; border-right: none } .estimate-detail-pop .estimate-detail-container { border: 1px solid #dadada; padding: 40px; margin-top: 0 } .estimate-detail-pop .estimate-detail-container .estimate-title { position: relative; text-align: center; font-size: 40px; font-weight: 900; margin-bottom: 30px } .estimate-detail-pop .estimate-detail-container .estimate-title .oozoomall-logo { position: absolute; width: 137px; right: 0; top: 25px; } .estimate-detail-pop .estimate-detail-container .notify-title { font-weight: 900; margin-bottom: 10px } .estimate-detail-pop .estimate-detail-container .notification-box-container { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 20px 30px; text-align: left; background-color: rgb(249, 249, 249); } .notification-box-container .notification-item { position: relative; padding-left: 9px; font-size: 13px; letter-spacing: -.65px; line-height: 1.15; color: #888;} .notification-box-container .notification-item span{ content: ""; display: block; position: absolute; top: 6px; left: 0px; width: 2px; height: 2px; background-color: #888;} .estimate-detail-pop .estimate-detail-container .requester-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 60px } .requester-wrapper .requester-table { width: 100%; border-top: 2px solid #222 } .requester-wrapper .requester-table tr{height: 35px;} .requester-wrapper .requester-table .text { padding: 25px 5px; font-size: 16px } .requester-wrapper .requester-company-table { width: 100%; position: relative; border-top: 2px solid #222 } .requester-wrapper .requester-company-table tr { height: 42px } .requester-wrapper .requester-company-table .stamp-logo { position: absolute; width: 72px; right: 20px; top: 10px } .estimate-detail-pop .estimate-detail-container .requester-wrapper table .title{ width: 100px; padding: 10px 10px; background-color: #f4f4f4; border: 1px solid #dadada; border-left: none; border-right: none } .estimate-detail-pop .estimate-detail-container .requester-wrapper table .description { width: 100%; padding: 3px 10px; border: 1px solid #dadada; border-left: none; border-right: none } .estimate-detail-pop .estimate-detail-container .estimate-expire-text { font-size: 13px; color: #888; margin: 10px 0 30px 0; } .estimate-detail-pop .button-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 20px; gap: 5px } .estimate-detail-pop .button-group button { width: 110px; color: #222; font-size: 15px; margin: 0; } .estimate-detail-pop .button-group button.large-button { width: 200px; font-weight: 700; color: #fff;}