:root { --color-basic_rgba : 0, 110, 255; --color-basic-l : #d6e7fd; --color-basic-r : #d6e7fd; --color-basic-m : #d6e7fd; --color-basic : #006eff; /* 기본색상 */ --color-basic-sb : #0032ff; --color-basic-b : #0032ff; --color-basic-eb : #0032ff; --color-basic-bl : #0032ff; } /* ------------------- 초기화 */ :root { --color-text : #333333; /* 기본폰트 */ } html {overflow-y:scroll} div {color: var(--color-text); } /* 기본 텍스트컬러 */ body {margin:0;padding:0; font-family: 'Pretendard Variable', Pretendard, sans-serif;font-size:16px;font-weight:400;font-style: normal;text-decoration: none;color: #000; letter-spacing:-0.01em; overflow-x: hidden;} html, h1, h2, h3, h4, h5, h6, form, fieldset, img{margin:0;padding:0;border:0} h1, h2, h3, h4, h5, h6 {font-size:1em; line-height: 1;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block} li{list-style: none;} table{border-spacing: 0;border-collapse: collapse;} ul, dl,dt,dd {margin:0;padding:0;list-style:none} legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden} label, input, button, select, img {vertical-align:middle;font-size:1em} input, select, textarea, button{box-sizing: border-box;} button{background: none;border: none;cursor: pointer;outline: none;} input, button {margin:0;padding:0;font-size:1em} input[type="submit"] {cursor:pointer} button {cursor:pointer} input { -moz-appearance: none; outline:none; background:none;} input:focus {outline:none !important; box-shadow:none !important;} textarea, select {font-size:1em} select {margin:0} p {margin:0;padding:0;word-break:break-all} hr {display:none} pre {overflow-x:scroll;font-size:1.1em} a {text-decoration:none;color: var(--color-text);} /* 링크 텍스트컬러 */ a:hover {color: var(--color-basic);} *, :after, :before { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; margin: 0;padding: 0;font-family: inherit;font-size: inherit;font-weight: inherit;font-style: inherit;color: inherit;text-decoration: inherit;box-sizing: border-box; } html, body{text-size-adjust: none; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .j_eng{font-family: "Montserrat", sans-serif;} @media screen and (min-width:1481px){ html, body{font-size: 16px;} } @media screen and (min-width:721px) and (max-width:1480px){ html, body{font-size: 16px;} } @media (max-width: 767px) { /* 모바일기기전용 */ html, body{font-size: 16px;} } /* 중복될수 있는건 앞에 eb- 붙이기 */ body.is-pc .ko { font-variant-numeric: tabular-nums;} /* 숫자 가로 폭 동일하게 */ /* ------------------- 기본 */ :root { /*color*/ --color-black: #000000; --color-white: #FFFFFF; --color-sky: #87CEEB; --color-green: #008000; --color-aqua-th: #f7feff; --color-aqua-l: #B6FFFF; --color-aqua: #00FFFF; --color-aqua-sb: #00EEEE; --color-red-l: #ff3232; --color-red-m: #ff3232; --color-red: #ff0000; --color-red-b: #c80000; --color-gray-th: #FAFAFA; /* 거의 흰색에 가까운 */ --color-gray-el: #F5F5F5; /* 흐린line, 흰색배경에 쓸만한정도 */ --color-gray-l: #E0E0E0; /* line, 화살표아이콘 등 */ --color-gray-r: #CCCCCC; /* 흐린아이콘등에 적합 */ --color-gray-m: #999999; /* 텍스트 가능컬러, 회색의경우 날짜등 흐린텍스트, 다른컬러는 원색이 너무 진함으로 m을 많이 사용 */ --color-gray: #808080; /* 서브텍스트 */ --color-blue-th: #F5F9FF; --color-blue-el: #DEEDFF; --color-blue-l: #90C5FF; --color-blue-r: #00aaff; --color-blue-m: #006eff; --color-blue: #0000FF; --color-pink-th: #FFF9FA; --color-pink-el: #FFF6F7; --color-pink-l: #FFEBEE; --color-pink-r: #FFE4E8; --color-pink-m: #FFD2D9; --color-pink: #FFC0CB; --color-pink-sb: #FF97A9; --color-pink-b: #FF6E87; --color-pink-eb: #FF4565; --color-pink-bl: #FF3054; --color-hot-pink-r: #FF78C1; --color-hot-pink: #FF1493; --color-hot-pink-b: #DA117E; --color-orange-th: #FFFBF6; --color-orange-el: #FFF1DA; --color-orange-l: #FFE8C2; --color-orange-r: #FFE0AA; --color-orange-m: #FFC766; --color-orange: #FFA500; --color-orange-sb: #FF8F00; --color-orange-b: #FF7800; /* 마알 고유색 */ --color-orange-eb: #FF6100; --color-orangered: #FF4500; --color-yellow-th: #FFFEF5; --color-yellow-el: #FFFFF0; --color-yellow-l: #FFFFDA; --color-yellow-r: #FFFFCC; --color-yellow-m: #FFFF99; --color-yellow: #FFFF00; --color-yellow-b: #FFEB3B; /* 여길넘어가면 골드임 */ --color-gold: #FFD700; --color-gold-sb: #DAA520; --color-gold-b: #B8860B; --color-mg-th:var(--color-aqua-th); /* 가장 최소한 느낌만 나는색 */ --color-mg-l: #E6F9FC; --color-mg-r: #ddf7fb; --color-mg: #15D0F2; /* 기본색상, 주 버튼색 */ --color-mg-b: #07afcd; /* 가장많이 사용하는 진한색 */ --color-ma-th: var(--color-orange-th); --color-ma-l: #FFE8C2; --color-ma-r: #FFE0AA; --color-ma: #FF7800; --color-ma-b: #E66B00; --color-im-th: var(--color-pink-th); --color-im-l: #FEE3EF; --color-im-r: #FED9E9; --color-im: #E50150; /* 알럽마 고유색 */ --color-im-b: #B1124D; --color-eb-th: var(--color-blue-th); --color-eb-l: #DEEDFF; --color-eb-r: #d6e7fd; --color-eb: #006eff; --color-eb-b: #0032ff; /*font-size*/ --font-size_10: 0.625rem; --font-size_11: 0.688rem; --font-size_12: 0.75rem; --font-size_13: 0.813rem; --font-size_14: 0.875rem; --font-size_15: 0.938rem; --font-size_16: 1rem; --font-size_17: 1.0625rem; --font-size_18: 1.125rem; --font-size_19: 1.188rem; --font-size_20: 1.25rem; --font-size_22: 1.375rem; --font-size_24: 1.5rem; --font-size_26: 1.625rem; --font-size_28: 1.75rem; --font-size_30: 1.875rem; --font-size_32: 2rem; --font-size_34: 2.125rem; --font-size_36: 2.25rem; --font-size_38: 2.375rem; --font-size_40: 2.5rem; --font-size_42: 2.625rem; --font-size_44: 2.75rem; --font-size_46: 2.875rem; --font-size_48: 3rem; --font-size_50: 3.125rem; --font-size_60: 3.75rem; --font-size_70: 4.5rem; --font-size_80: 5rem; --font-size_90: 5.625rem; --font-size_100: 6.25rem; /*font-weight*/ --font-th: 100; --font-el: 200; --font-l: 300; --font-r: 400; --font-m: 500; --font-sb: 600; --font-b: bold; --font-eb: 800; --font-bl: 900; } /* ------------------- 폰트두꼐 */ .fe-th { font-weight: var(--font-th) !important; } .fe-el { font-weight: var(--font-el) !important; } .fe-l { font-weight: var(--font-l) !important; } .fe-r { font-weight: var(--font-r) !important; } .fe-m { font-weight: var(--font-m) !important; } .fe-sb { font-weight: var(--font-sb) !important; } .fe-b { font-weight: var(--font-b) !important; } .fe-eb { font-weight: var(--font-eb) !important; } .fe-bl { font-weight: var(--font-bl) !important; } /* ------------------- 폰트컬러 */ .fc-basic, .fc-basic a{ color: var(--color-text) !important; } /* 특정영역내에 폰트컬러가 정해져있을경우, 기본폰트가 필요할때 사용 */ .fc-l, .fc-l a{ color: var(--color-basic-l) !important; } .fc-r, .fc-r a{ color: var(--color-basic-r) !important; } .fc-m, .fc-m a{ color: var(--color-basic-m) !important; } .fc , .fc a{ color: var(--color-basic) !important; } .fc-b, .fc-b a{ color: var(--color-basic-b) !important; } .fc-eb, .fc-eb a{ color: var(--color-basic-eb) !important; } .fc-black, .fc-black a{ color: var(--color-black) } .fc-white, .fc-white a{ color: var(--color-white) } .fc-red, .fc-red a{ color: var(--color-red) } .fc-green, .fc-green a{ color: var(--color-green) } .fc-blue, .fc-blue a{ color: var(--color-blue) } .fc-pink, .fc-pink a{ color: var(--color-pink) } .fc-pink-b, .fc-pink-b a{ color: var(--color-pink-b) } .fc-aqua, .fc-aqua a{ color: var(--color-aqua) } .fc-orange, .fc-orange a{ color: var(--color-orange) } .fc-yellow, .fc-yellow a{ color: var(--color-yellow) } .fc-yellow-b, .fc-yellow-b a{ color: var(--color-yellow-b) } .fc-gold, .fc-gold a{ color: var(--color-gold) } .fc-gold-b, .fc-gold-b a{ color: var(--color-gold-b) } .fc-orangered, .fc-orangered a{ color: var(--color-orangered) } .fc-gray-th, .fc-gray-th a{ color: var(--color-gray-th) } .fc-gray-el, .fc-gray-el a{ color: var(--color-gray-el) } .fc-gray-l, .fc-gray-l a{ color: var(--color-gray-l) } .fc-gray-r, .fc-gray-r a{ color: var(--color-gray-r) } .fc-gray-m, .fc-gray-m a{ color: var(--color-gray-m) } .fc-gray, .fc-gray a{ color: var(--color-gray) } .fc-mg, .fc-mg a{ color: var(--color-mg) } .fc-ma, .fc-ma a{ color: var(--color-ma) } .fc-im, .fc-im a{ color: var(--color-im) } .fc-manager { color:var(--color-mg-manager); } .fc-manager.fc-manager a { color:var(--color-mg-manager); } .fc-review { color: var(--color-basic-b); } .fc-review.fc-review a { color: var(--color-basic-b); } /* ------------------- 버튼 */ .eb-btn-basic-th, a.eb-btn-basic-th {background: var(--color-basic-th);; padding:3px 8px; text-align:center; color:var(--color-basic); border-radius:5px; font-weight: var(--font-b); display:inline-block; border: 1px solid var(--color-basic);} .eb-btn-basic-th:hover {background: var(--color-basic-th); color:var(--color-basic); } .eb-btn-basic, a.eb-btn-basic {background: var(--color-basic); padding:3px 8px; text-align:center; color:#fff ; border-radius:5px;font-weight:var(--font-b); display:inline-block;} .eb-btn-basic:hover {background: var(--color-basic-b); color:#fff;} .eb-btn-basic-b, a.eb-btn-basic-b {background: var(--color-basic-b); padding:3px 8px; text-align:center; color:#fff ; border-radius:5px;font-weight:var(--font-b); display:inline-block;} .eb-btn-basic-b:hover {background: var(--color-basic); color:#fff;} .eb-btn-black, a.eb-btn-black {background:#000; padding:3px 8px; text-align:center; color:#fff; border-radius:5px;font-weight:var(--font-b); display:inline-block;} .eb-btn-black:hover {background:#000; color:#fff;} .eb-btn-white, a.eb-btn-white {background:#ffffff; padding:2px 8px; text-align:center; color:#333; border:1px solid var(--color-gray-l); border-radius:5px;font-weight:var(--font-b); display:inline-block;} .eb-btn-white:hover {background:#000; color:#fff;} .eb-btn-gray-el, a.eb-btn-gray-el {background: var(--color-gray-el); padding:3px 8px; text-align:center; color:#000 ; border-radius:5px;font-weight:var(--font-b); display:inline-block;} .eb-btn-gray-el:hover {background:#000; color:#fff;} .eb-btn-gray-r, a.eb-btn-gray-r {background: var(--color-gray-r); padding:3px 8px; text-align:center; color:#000; border-radius:5px;font-weight:var(--font-b); display:inline-block;} .eb-btn-gray-r:hover {background:#000; color:#fff;} .eb-btn-gray-m, a.eb-btn-gray-m {background: var(--color-gray-m); padding:3px 8px; text-align:center; color:#fff; border-radius:5px;font-weight:var(--font-b); display:inline-block;} .eb-btn-gray-m:hover {background:#000; color:#fff;} .eb-btn-gray, a.eb-btn-gray {background: var(--color-gray); padding:3px 8px; text-align:center; color:#fff; border-radius:5px;font-weight:var(--font-b); display:inline-block;} .eb-btn-gray:hover {background:#000; color:#fff;} .eb-btn-red, a.eb-btn-red {background: var(--color-red); padding:3px 8px; text-align:center; color:#fff; border-radius:5px;font-weight:var(--font-b); display:inline-block;} .eb-btn-red:hover {color:#fff;} .eb-btn-mg, a.eb-btn-mg {background: var(--color-mg); padding:3px 8px; text-align:center; color:#fff; border-radius:5px;font-weight:var(--font-b); display:inline-block;} .eb-btn-mg:hover {color:#fff;} .eb-btn-ma, a.eb-btn-ma {background: var(--color-ma); padding:3px 8px; text-align:center; color:#fff; border-radius:5px;font-weight:var(--font-b); display:inline-block;} .eb-btn-ma:hover {color:#fff;} .eb-btn-im, a.eb-btn-im {background: var(--color-im); padding:3px 8px; text-align:center; color:#fff; border-radius:5px;font-weight:var(--font-b); display:inline-block;} .eb-btn-im:hover {color:#fff;} .eb-btn-manager, a.eb-btn-manager {background:var(--color-mg-manager); padding:3px 8px; text-align:center; color:#fff; border-radius:5px;font-weight:var(--font-b); display:inline-block;} .eb-btn-manager:hover {color:var(--color-yellow);} .eb-btn-g5-admin-01, a.eb-btn-g5-admin {background:#9eacc6; padding:5px 8px; height:35px; text-align:center; color:#fff; border-radius:5px; display:inline-block;} .eb-btn-g5-admin:hover {color:var(--color-yellow);} .eb-btn-g5-admin-02, a.eb-btn-g5-admin {background:#617d46; padding:5px 8px; height:35px; text-align:center; color:#fff; border-radius:5px; display:inline-block;} .eb-btn-g5-admin:hover {color:var(--color-yellow);} /* ------------------- 백그라운드 */ .bg-basic, i.bg-basic, .badge.bg-basic { background-color: var(--color-basic) !important; border-color: var(--color-basic) !important; color: #fff; } .bg-basic-l, i.bg-basic-l, .badge.bg-basic-l { background-color: var(--color-basic-l); color: var(--color-basic-b) !important; } .bg-black, i.bg-black, .badge.bg-black { background-color: var(--color-black); color: #fff; } .bg-white, i.bg-white, .badge.bg-white { background-color: var(--color-white); color: #000; } .bg-red, i.bg-red, .badge.bg-red { background-color: var(--color-red); color: #fff; } .bg-blue, i.bg-blue, .badge.bg-blue { background-color: var(--color-blue); color: #fff; } .bg-pink-th, i.bg-pink-th, .badge.bg-pink-th { background-color: var(--color-pink-th); color: var(--color-pink-b) !important; } .bg-pink, i.bg-pink, .badge.bg-pink { background-color: var(--color-pink); color: #fff; } .bg-pink-b, i.bg-pink-b, .badge.bg-pink-b { background-color: var(--color-pink-b); color: #fff; } .bg-aqua, i.bg-aqua, .badge.bg-aqua { background-color: var(--color-aqua); color: #fff; } .bg-gray-el, i.bg-gray-el, .badge.bg-gray-el { background-color: var(--color-gray-el); border-color: var(--color-gray-l) !important; color: #000; } .bg-gray-l, i.bg-gray-l, .badge.bg-gray-l { background-color: var(--color-gray-l); border-color: var(--color-gray-r) !important; color: #000; } .bg-gray, i.bg-gray, .badge.bg-gray { background-color: var(--color-gray); color: #fff; } .bg-orange-l, i.bg-orange-l, .badge.bg-orange-l { background-color: var(--color-orange-l); color: var(--color-orange-b) !important; } .bg-orange, i.bg-orange, .badge.bg-orange { background-color: var(--color-orange); color: #fff; } .bg-sky, i.bg-sky, .badge.bg-sky { background-color: var(--color-sky); } .bg-yellow, i.bg-yellow, .badge.bg-yellow { background-color: var(--color-yellow); color: #fff; } .bg-yellow-b, i.bg-yellow-b, .badge.bg-yellow-b { background-color: var(--color-yellow-b); color: #fff; } .bg-orangered, i.bg-orangered, .badge.bg-orangered { background-color: var(--color-orangered); color: #fff; } .bg-mg, i.bg-mg, .badge.bg-mg { background-color: var(--color-mg); color: #fff; } .bg-ma, i.bg-ma, .badge.bg-ma { background-color: var(--color-ma); color: #fff; } .bg-im, i.bg-im, .badge.bg-im { background-color: var(--color-im); color: #fff; } /* ------------------- 공간, 미디어별 */ .w33 { width:33% !important; } .w45 { width:45% !important; } .w49 { width:49% !important; } .w50 { width:50% !important; } .w70 { width:70% !important; } .w99 { width:99% !important; } .w100 { width:100% !important;} .w200 { width:200px !important; } .w100px { width:100px !important; } .w200px { width:200px !important; } .max-w1000 { max-width:1000px !important; } @media (min-width: 1024px) { /* 테블릿이상 */ .lg-start-none { display:none !important} .lg-start-border-top { border-top:1px solid var(--color-gray-l); } } @media (max-width: 1023px) { /* 테블릿까지 */ .md-end-none { display:none !important} .md-end-flexww { flex-wrap:Wrap} .md-end-w100 { width:100% !important} } @media (min-width: 768px) { /* 모바일이상 */ .sm-br{ display:none !important} .md-start-none { display:none !important} .md-w60px {width:60px !important} .md-w80px {width:80px !important} .md-w100px {width:100px !important} .md-w120px {width:120px !important} .md-w140px {width:140px !important} } @media (max-width: 767px) { /* 모바일이하 */ .div-sm-img-w100 img { width: 100%; } .sm-flexww {flex-wrap:Wrap } .sm-br { display:block !important} .sm-none { display:none !important} .sm-w40px {width:40px !important} .sm-w60px {width:60px !important} .sm-w80px {width:80px !important} .sm-w38 {width:38% !important} .sm-w40 {width:40% !important} .sm-w41 {width:41% !important} .sm-w43 {width:43% !important} .sm-w45 {width:45% !important} .sm-w48 {width:48% !important} .sm-w50 {width:50% !important} .sm-w53 {width:53% !important} .sm-w55 {width:55% !important} .sm-w58 {width:58% !important} .sm-w60 {width:60% !important} .sm-w80 {width:80% !important} .sm-w100 { width:100% !important} } @media (min-width: 480px) { /* 480 이상 */ } @media (max-width: 479px) { /* 479 까지 */ } @media all and (min-width:480px) and (max-width:1023px) { } /* ------------------- 폰트사이즈 */ .fs0 { font-size: 0 !important; } .fs10 { font-size: var(--font-size_10) !important; } .fs11 { font-size: var(--font-size_11) !important; } .fs12 { font-size: var(--font-size_12) !important; } .fs13 { font-size: var(--font-size_13) !important; } .fs14 { font-size: var(--font-size_14) !important; } .fs15 { font-size: var(--font-size_15) !important; } .fs16 { font-size: var(--font-size_16) !important; } /* 기준 */ .fs17 { font-size: var(--font-size_17) !important; } .fs18 { font-size: var(--font-size_18) !important; } .fs19 { font-size: var(--font-size_19) !important; } .fs20 { font-size: var(--font-size_20) !important; } .fs22 { font-size: var(--font-size_22) !important; } .fs24 { font-size: var(--font-size_24) !important; } .fs26 { font-size: var(--font-size_26) !important; } .fs28 { font-size: var(--font-size_28) !important; } .fs30 { font-size: var(--font-size_30) !important; } .fs32 { font-size: var(--font-size_32) !important; } .fs34 { font-size: var(--font-size_34) !important; } .fs36 { font-size: var(--font-size_36) !important; } .fs38 { font-size: var(--font-size_38) !important; } .fs40 { font-size: var(--font-size_40) !important; } .fs42 { font-size: var(--font-size_42) !important; } .fs43 { font-size: var(--font-size_43) !important; } .fs44 { font-size: var(--font-size_44) !important; } .fs46 { font-size: var(--font-size_46) !important; } .fs48 { font-size: var(--font-size_48) !important; } .fs49 { font-size: var(--font-size_49) !important; } .fs50 { font-size: var(--font-size_50) !important; } .fs60 { font-size: var(--font-size_60) !important; } .fs70 { font-size: var(--font-size_70) !important; } .fs80 { font-size: var(--font-size_80) !important; } .fs90 { font-size: var(--font-size_90) !important; } .fs100 { font-size: var(--font-size_100) !important; } @media (min-width: 1024px) { /* 모바일,테블릿이상 */ .md-fs10 { font-size: var(--font-size_10) !important; } .md-fs11 { font-size: var(--font-size_11) !important; } .md-fs12 { font-size: var(--font-size_12) !important; } .md-fs13 { font-size: var(--font-size_13) !important; } .md-fs14 { font-size: var(--font-size_14) !important; } .md-fs16 { font-size: var(--font-size_16) !important; } .md-fs18 { font-size: var(--font-size_18) !important; } .md-fs20 { font-size: var(--font-size_20) !important; } .md-fs22 { font-size: var(--font-size_22) !important; } .md-fs24 { font-size: var(--font-size_24) !important; } .md-fs26 { font-size: var(--font-size_26) !important; } .md-fs28 { font-size: var(--font-size_28) !important; } .md-fs30 { font-size: var(--font-size_30) !important; } .md-fs32 { font-size: var(--font-size_32) !important; } .md-fs34 { font-size: var(--font-size_34) !important; } .md-fs36 { font-size: var(--font-size_36) !important; } .md-fs38 { font-size: var(--font-size_38) !important; } .md-fs40 { font-size: var(--font-size_40) !important; } .md-fs50 { font-size: var(--font-size_50) !important; } .md-fs60 { font-size: var(--font-size_60) !important; } } @media (max-width: 1023px) { /* 모바일,테블릿까지 */ .sm-fs10 { font-size: var(--font-size_10) !important; } .sm-fs11 { font-size: var(--font-size_11) !important; } .sm-fs12 { font-size: var(--font-size_12) !important; } .sm-fs13 { font-size: var(--font-size_13) !important; } .sm-fs14 { font-size: var(--font-size_14) !important; } .sm-fs16 { font-size: var(--font-size_16) !important; } .sm-fs18 { font-size: var(--font-size_18) !important; } .sm-fs20 { font-size: var(--font-size_20) !important; } .sm-fs22 { font-size: var(--font-size_22) !important; } .sm-fs24 { font-size: var(--font-size_24) !important; } .sm-fs26 { font-size: var(--font-size_26) !important; } .sm-fs28 { font-size: var(--font-size_28) !important; } .sm-fs30 { font-size: var(--font-size_30) !important; } .sm-fs32 { font-size: var(--font-size_32) !important; } .sm-fs34 { font-size: var(--font-size_34) !important; } .sm-fs36 { font-size: var(--font-size_36) !important; } .sm-fs38 { font-size: var(--font-size_38) !important; } .sm-fs40 { font-size: var(--font-size_40) !important; } .sm-fs50 { font-size: var(--font-size_50) !important; } .sm-fs60 { font-size: var(--font-size_60) !important; } } /* ------------------- margin, padding */ .px1 { padding-left: 1px !important; padding-right: 1px !important; } .px2 { padding-left: 2px !important; padding-right: 2px !important; } .px3 { padding-left: 3px !important; padding-right: 3px !important; } .px4 { padding-left: 4px !important; padding-right: 4px !important; } .px5 { padding-left: 5px !important; padding-right: 5px !important; } .px6 { padding-left: 6px !important; padding-right: 6px !important; } .px7 { padding-left: 7px !important; padding-right: 7px !important; } .px8 { padding-left: 8px !important; padding-right: 8px !important; } .px9 { padding-left: 9px !important; padding-right: 9px !important; } .px10 { padding-left:10px !important; padding-right:10px !important; } .px15 { padding-left:15px !important; padding-right:15px !important; } .px20 { padding-left:20px !important; padding-right:20px !important; } .px25 { padding-left:25px !important; padding-right:25px !important; } .px30 { padding-left:30px !important; padding-right:30px !important; } .px40 { padding-left:40px !important; padding-right:40px !important; } .px50 { padding-left:50px !important; padding-right:50px !important; } .px60 { padding-left:60px !important; padding-right:60px !important; } .px70 { padding-left:70px !important; padding-right:70px !important; } .px80 { padding-left:80px !important; padding-right:80px !important; } .px90 { padding-left:90px !important; padding-right:90px !important; } .px100 { padding-left:100px !important; padding-right:100px !important; } .py1 { padding-top: 1px !important; padding-bottom: 1px !important; } .py2 { padding-top: 2px !important; padding-bottom: 2px !important; } .py3 { padding-top: 3px !important; padding-bottom: 3px !important; } .py4 { padding-top: 4px !important; padding-bottom: 4px !important; } .py5 { padding-top: 5px !important; padding-bottom: 5px !important; } .py6 { padding-top: 6px !important; padding-bottom: 6px !important; } .py7 { padding-top: 7px !important; padding-bottom: 7px !important; } .py8 { padding-top: 8px !important; padding-bottom: 8px !important; } .py9 { padding-top: 9px !important; padding-bottom: 9px !important; } .py10 { padding-top:10px !important; padding-bottom:10px !important; } .py15 { padding-top:15px !important; padding-bottom:15px !important; } .py20 { padding-top:20px !important; padding-bottom:20px !important; } .py25 { padding-top:25px !important; padding-bottom:25px !important; } .py30 { padding-top:30px !important; padding-bottom:30px !important; } .py40 { padding-top:40px !important; padding-bottom:40px !important; } .py50 { padding-top:50px !important; padding-bottom:50px !important; } .py60 { padding-top:60px !important; padding-bottom:60px !important; } .py70 { padding-top:70px !important; padding-bottom:70px !important; } .py80 { padding-top:80px !important; padding-bottom:80px !important; } .py90 { padding-top:90px !important; padding-bottom:90px !important; } .py100 { padding-top:100px !important; padding-bottom:100px !important; } @media (min-width: 1024px) { /* 모바일,테블릿이상 */ .md-px5 { padding-left:5px !important; padding-right:5px !important; } .md-px10 { padding-left:10px !important; padding-right:10px !important; } .md-px15 { padding-left:15px !important; padding-right:15px !important; } .md-px20 { padding-left:20px !important; padding-right:20px !important; } .md-px25 { padding-left:25px !important; padding-right:25px !important; } .md-px30 { padding-left:30px !important; padding-right:30px !important; } } @media (max-width: 1023px) { /* 모바일,테블릿까지 */ .sm-px5 { padding-left:5px !important; padding-right:5px !important; } .sm-px10 { padding-left:10px !important; padding-right:10px !important; } .sm-px15 { padding-left:15px !important; padding-right:15px !important; } .sm-px20 { padding-left:20px !important; padding-right:20px !important; } .sm-px25 { padding-left:25px !important; padding-right:25px !important; } .sm-px30 { padding-left:30px !important; padding-right:30px !important; } } .pd0 { padding:0px !important; } .pd1 { padding:1px !important; } .pd2 { padding:2px !important; } .pd3 { padding:3px !important; } .pd4 { padding:4px !important; } .pd5 { padding:5px !important; } .pd10 { padding:10px !important; } .pd15 { padding:15px !important; } .pd20 { padding:20px !important; } .pd25 { padding:25px !important; } .pd30 { padding:30px !important; } .pd40 { padding:40px !important; } .pd50 { padding:50px !important; } .mg0 { margin:0px !important } .mg1 { margin:1px !important; } .mg2 { margin:2px !important; } .mg3 { margin:3px !important; } .mg4 { margin:4px !important; } .mg5 { margin:5px !important; } .mg10 { margin:10px !important; } .mg15 { margin:15px !important; } .mg20 { margin:20px !important; } .mg25 { margin:25px !important; } .mg30 { margin:30px !important; } .mg35 { margin:35px !important; } .mg40 { margin:40px !important; } .mg45 { margin:45px !important; } .mg50 { margin:50px !important; } .mt0 { margin-top:0px !important} .mt1 { margin-top:1px !important; } .mt2 { margin-top:2px !important; } .mt3 { margin-top:3px !important; } .mt4 { margin-top:4px !important; } .mt5 { margin-top:5px !important; } .mt10 { margin-top: 10px !important; } .mt12 { margin-top: 12px !important; } .mt15 { margin-top: 15px !important; } .mt18 { margin-top: 18px !important; } .mt20 { margin-top: 20px !important; } .mt25 { margin-top: 25px !important; } .mt30 { margin-top: 30px !important; } .mt33 { margin-top: 33px !important; } .mt36 { margin-top: 36px !important; } .mt40 { margin-top: 40px !important; } .mt50 { margin-top: 50px !important; } .mt62 { margin-top: 62px !important; } .mt70 { margin-top: 70px !important; } .mt80 { margin-top: 80px !important; } .mt90 { margin-top: 90px !important; } .mt100 { margin-top: 100px !important; } .mt110 { margin-top: 110px !important; } .mt120 { margin-top: 120px !important; } .mt130 { margin-top: 130px !important; } .mt140 { margin-top: 140px !important; } .mt150 { margin-top: 150px !important; } .mt200 { margin-top: 200px !important; } .pt0 { padding-top:0px !important;} .pt1 { padding-top:1px !important; } .pt2 { padding-top:2px !important; } .pt3 { padding-top:3px !important; } .pt4 { padding-top:4px !important; } .pt5 { padding-top:5px !important; } .pt10 { padding-top:10px !important; } .pt15 { padding-top:15px !important; } .pt20 { padding-top:20px !important; } .pt30 { padding-top:30px !important; } .pt40 { padding-top:40px !important; } .pt50 { padding-top:50px !important; } .pt60 { padding-top:60px !important; } .pt70 { padding-top:70px !important; } .pt80 { padding-top:80px !important; } .pt90 { padding-top:90px !important; } .pt100 { padding-top:100px !important; } .mr0 { margin-right:0px !important; } .mr1 { margin-right:1px !important; } .mr2 { margin-right:2px !important; } .mr3 { margin-right:3px !important; } .mr4 { margin-right:4px !important; } .mr5 { margin-right:5px !important; } .mr8 { margin-right:8px !important; } .mr10 { margin-right:10px !important; } .mr18 { margin-right:18px !important; } .mr20 { margin-right:20px !important; } .pr0 { padding-right:0px !important; } .pr1 { padding-right:1px !important; } .pr2 { padding-right:2px !important; } .pr3 { padding-right:3px !important; } .pr4 { padding-right:4px !important; } .pr5 { padding-right:5px !important; } .pr6 { padding-right:6px !important; } .pr7 { padding-right:7px !important; } .pr8 { padding-right:8px !important; } .pr9 { padding-right:9px !important; } .pr10 { padding-right:10px !important; } .pr15 { padding-right:15px !important; } .pr20 { padding-right:20px !important; } .mb0 { margin-bottom: 0px !important; } .mb1 { margin-bottom: 1px !important; } .mb2 { margin-bottom: 2px !important; } .mb3 { margin-bottom: 3px !important; } .mb4 { margin-bottom: 4px !important; } .mb5 { margin-bottom: 5px !important; } .mb10 { margin-bottom: 10px !important; } .mb15 { margin-bottom: 15px !important; } .mb20 { margin-bottom: 20px !important; } .mb25 { margin-bottom: 25px !important; } .mb30 { margin-bottom: 30px !important; } .mb33 { margin-bottom: 33px !important; } .mb40 { margin-bottom: 40px !important; } .mb50 { margin-bottom: 50px !important; } .mb60 { margin-bottom: 60px !important; } .mb70 { margin-bottom: 70px !important; } .mb80 { margin-bottom: 80px !important; } .mb90 { margin-bottom: 90px !important; } .mb100 { margin-bottom: 100px !important; } .mb300 { margin-bottom: 300px !important; } .pb0 { padding-bottom:0 !important;} .pb1 { padding-bottom:1px !important;} .pb2 { padding-bottom:2px !important; } .pb3 { padding-bottom:3px !important; } .pb4 { padding-bottom:4px !important; } .pb5 { padding-bottom:5px !important; } .pb9 { padding-bottom:9px !important; } .pb10 { padding-bottom:10px !important; } .pb15 { padding-bottom:15px !important; } .pb20 { padding-bottom:20px !important; } .pb30 { padding-bottom:30px !important; } .pb40 { padding-bottom:40px !important; } .pb50 { padding-bottom:50px !important; } .pb60 { padding-bottom:60px !important; } .pb70 { padding-bottom:70px !important; } .pb80 { padding-bottom:80px !important; } .pb90 { padding-bottom:90px !important; } .pb100 { padding-bottom:100px !important; } .pb300 { padding-bottom:300px !important; } .ml0 { margin-left:0px !important; } .ml1 { margin-left:1px !important; } .ml2 { margin-left:2px !important; } .ml3 { margin-left:3px !important; } .ml4 { margin-left:4px !important; } .ml5 { margin-left:5px !important; } .ml8 { margin-left:8px !important; } .ml10 { margin-left:10px !important; } .ml11 { margin-left:11px !important; } .ml20 { margin-left:20px !important; } .ml30 { margin-left:30px !important; } .ml40 { margin-left:40px !important; } .ml50 { margin-left:50px !important; } .ml60 { margin-left:60px !important; } .ml70 { margin-left:70px !important; } .ml80 { margin-left:80px !important; } .ml90 { margin-left:90px !important; } .ml100 { margin-left:100px !important; } .pl0 { padding-left:0px !important;} .pl1 { padding-left:1px !important;} .pl2 { padding-left:2px !important;} .pl3 { padding-left:3px !important;} .pl4 { padding-left:4px !important; } .pl5 { padding-left:5px !important; } .pl7 { padding-left:7px !important; } .pl8 { padding-left:8px !important; } .pl10 { padding-left:10px !important; } @media (min-width: 1024px) { /* 모바일,테블릿이상 */ .md-mt0 { margin-top: 0px !important; } .md-mt1 { margin-top: 1px !important; } .md-mt5 { margin-top: 5px !important; } .md-mt10 { margin-top: 10px !important; } .md-mt15 { margin-top: 15px !important; } .md-mt20 { margin-top: 20px !important; } .md-mt25 { margin-top: 25px !important; } .md-mt30 { margin-top: 30px !important; } .md-mt40 { margin-top: 40px !important; } .md-mt50 { margin-top: 50px !important; } .md-mt55 { margin-top: 55px !important; } .md-mt70 { margin-top: 70px !important; } .md-mt80 { margin-top: 80px !important; } .md-mt90 { margin-top: 90px !important; } .md-mt100 { margin-top: 100px !important; } .md-mt150 { margin-top: 150px !important; } .md-mt200 { margin-top: 200px !important; } .md-mt210 { margin-top: 210px !important; } .md-mt220 { margin-top: 220px !important; } .md-mt230 { margin-top: 230px !important; } .md-mt240 { margin-top: 240px !important; } .md-mt250 { margin-top: 250px !important; } .md-pt0 { padding-top:0px !important; } .md-pt1 { padding-top:1px !important; } .md-pt10 { padding-top:10px !important; } .md-pb20 { padding-bottom:20px !important; } .md-mr18 { margin-right: 18px !important; } .md-mb2 { margin-bottom: 2px !important; } .md-mb4 { margin-bottom: 4px !important; } .md-mb5 { margin-bottom: 5px !important; } .md-mb7 { margin-bottom: 7px !important; } .md-mb10 { margin-bottom: 10px !important; } .md-mb15 { margin-bottom: 15px !important; } .md-mb20 { margin-bottom: 20px !important; } .md-mb30 { margin-bottom: 30px !important; } .md-mb40 { margin-bottom: 40px !important; } .md-mb50 { margin-bottom: 50px !important; } .md-mb60 { margin-bottom: 60px !important; } .md-ml15 { margin-left: 15px !important; } } @media (max-width: 1023px) { /* 모바일,테블릿까지 */ .sm-mt1 { margin-top: 1px !important; } .sm-mt2 { margin-top: 2px !important; } .sm-mt5 { margin-top: 5px !important; } .sm-mt8 { margin-top: 8px !important; } .sm-mt10 { margin-top: 10px !important; } .sm-mt15 { margin-top: 15px !important; } .sm-mt20 { margin-top: 20px !important; } .sm-mt25 { margin-top: 25px !important; } .sm-mt30 { margin-top: 30px !important; } .sm-mt40 { margin-top: 40px !important; } .sm-mt50 { margin-top: 50px !important; } .sm-mt60 { margin-top: 60px !important; } .sm-mt70 { margin-top: 70px !important; } .sm-mt80 { margin-top: 80px !important; } .sm-mt90 { margin-top: 90px !important; } .sm-mt100 { margin-top: 100px !important; } .sm-mt110 { margin-top: 110px !important; } .sm-mt120 { margin-top: 120px !important; } .sm-mt130 { margin-top: 130px !important; } .sm-mt140 { margin-top: 140px !important; } .sm-mt150 { margin-top: 150px !important; } .sm-mt200 { margin-top: 200px !important; } .sm-pt1 { padding-top:1px !important; } .sm-pt10 { padding-top:10px !important; } .sm-pt20 { padding-top:20px !important; } .sm-pt40 { padding-top:40px !important; } .sm-mr14 { margin-right: 14px !important; } .sm-mr16 { margin-right: 16px !important; } .sm-mr18 { margin-right: 18px !important; } .sm-mb2 { margin-bottom: 2px !important; } .sm-mb3 { margin-bottom: 3px !important; } .sm-mb5 { margin-bottom: 5px !important; } .sm-mb10 { margin-bottom: 10px !important; } .sm-mb15 { margin-bottom: 15px !important; } .sm-mb20 { margin-bottom: 20px !important; } .sm-mb30 { margin-bottom: 30px !important; } .sm-mb40 { margin-bottom: 40px !important; } .sm-mb60 { margin-bottom: 60px !important; } .sm-mb65 { margin-bottom: 65px !important; } .sm-mb70 { margin-bottom: 70px !important; } .sm-mb80 { margin-bottom: 80px !important; } .sm-pb10 { padding-bottom:10px !important; } .sm-pb20 { padding-bottom:20px !important; } } @media (min-width:1024px) and (max-width:1279px) { /* 노트북 & 테블릿이상까지*/ .mdsm-pt1 { padding-top:1px !important; } } /* ------------------- line-height 줄간격 */ .lh14 { line-height:14px !important; } .lh15 { line-height:15px !important; } .lh20 { line-height:20px !important; } .lh25 { line-height:25px !important; } .lh30 { line-height:30px !important; } .lh35 { line-height:35px !important; } .lh40 { line-height:40px !important; } .lh60 { line-height:60px !important; } .lh0-8 { line-height:0.8;} .lh0-9 { line-height:0.9;} .lh1 { line-height:1;} .lh1-1 { line-height:1.1;} .lh1-2 { line-height:1.2;} .lh1-3 { line-height:1.3;} .lh1-5 { line-height:1.5;} .lh1-8 { line-height:1.8;} .lh2 { line-height:2;} .lh2-2 { line-height:2.2;} .lh2-3 { line-height:2.3;} .lh2-4 { line-height:2.4;} @media (min-width: 768px) { /* 모바일화면 이상 */ .md-lh0-8 { line-height:0.8;} .md-lh60 { line-height:60px !important; } } @media (max-width: 767px) { /* 모바일기기전용 */ .sm-lh0-9 { line-height:0.9;} .sm-lh1-1 { line-height:1.1;} .sm-lh40 { line-height:40px !important; } } /* ------------------- 공통여백 마가기준 설명 - 다르게줄때는 _사이트코드에 재작성하기 */ .eb-inner {max-width:1400px; width:92%; margin:0 auto; height: 100%; position: relative;} .eb-pd-visual { padding:30px 0 30px 0 } /* 비주얼영역 ex) 마알메인 */ .eb-pd-visual_title { padding:0px 0 20px 0 } /* 비주얼제목 */ .eb-pd-index { padding:80px 0 0 0 } /* 인덱스의 큰영역별 간격 */ .eb-pd-section { padding:50px 0 0 0 } /* 리스트등 영역 */ .eb-pd-section-m { padding:40px 0 0 0 } /* 뷰페이지기준 소개,코스,리뷰,댓글등 큰영역 */ .eb-pd-section-s { padding:30px 0 0 0 } /* 최소단위 */ .eb-pd-title { padding:0 0 30px 0 } .eb-pd-title-m { padding:0 0 20px 0 } /* 뷰페이지기준 소개,코스,리뷰,댓글등 타이틀 */ .eb-pd-title-s { padding:0 0 10px 0 } .eb-mg-section { margin:50px 0 0 0 } /* 서브영역별 마진줘야할때 */ .eb-mg-section-m { margin:40px 0 0 0 } .eb-mg-section-s { margin:30px 0 0 0 } @media (max-width: 1023px) { /* 모바일,테블릿까지 */ .eb-pd-visual { padding:20px 0 20px 0 } .eb-pd-visual_title { padding:0px 0 0 0 } .eb-pd-index { padding:50px 0 0 0 } .eb-pd-section { padding:40px 0 0 0 } .eb-pd-section-m { padding:30px 0 0 0 } .eb-pd-section-s { padding:20px 0 0 0 } .eb-pd-title { padding:0 0 20px 0 } .eb-pd-title-m { padding:0 0 15px 0 } .eb-mg-section { margin:40px 0 0 0 } /* 서브영역별 마진줘야할때 */ .eb-mg-section-m { margin:30px 0 0 0 } .eb-mg-section-s { margin:20px 0 0 0 } } .top-safe-area { /* 상단 세이프 에어리어 대응 패딩 */ position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top); background: var(--color-basic); z-index: 100; } .bottom-safe-area { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 0px ); } .bottom-safe-area-s { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 40px ); } .bottom-safe-area-lg { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 100px ); } .eb-pd-safe { padding-top: 0; padding-bottom: 0; } @supports (padding-top: env(safe-area-inset-top)) { .eb-pd-safe { padding-top: calc(env(safe-area-inset-top) + 0px); padding-bottom: calc(env(safe-area-inset-bottom) + 0px); } } /* ------------------- 자주쓰는 */ .wsn { white-space:nowrap; overflow: hidden;} .tdlt { text-decoration: line-through;} .flexww {flex-wrap:Wrap } .fsita { font-style: italic; } .textac { text-align: center; } .center { text-align: center; } .textar { text-align: right; } .wordbka { word-break: keep-all; } .wwbw { word-wrap: break-word; } /* 영역초과시 글씨밑으로 */ .linebb { border-bottom:1px solid var(--color-gray-l); } .linebt { border-top:1px solid var(--color-gray-l); } .linebb0 { border-bottom: 0px !important; } .linebl0 { border-left: 0px !important; } .linebt0 { border-top: 0px !important; } .cursorp { cursor:pointer; } .bround { border-radius: 10px !important; } /* 박스 보더 등 둥글게 */ .form-ext{ margin-top:7px; color: red; } .displayib { display:inline-block;} .verticalat{ vertical-align : top; } .textline1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /*.textline1 { display: -webkit-box; -webkit-line-clamp: 1; overflow: hidden;-webkit-box-orient: vertical;} 위에것으로 변경*/ .textspacings { letter-spacing: -0.02em; } /* 기존간격보다 조금더 넓게 old */ .ls-tight { letter-spacing: -0.02em; } /* 글씨간격 좀 줄임 */ .ls-wide { letter-spacing: 0.02em; } /* 글씨간격 좀 늘림 */ .form-admin-bg { background: var(--color-gray-th); } .scroll-x-auto { /* 가로스크롤 기본값이 없는데, 사용자들이 입력하는 컨텐츠공간등에 일부허용 */ overflow-x: auto; width: 100%; } @keyframes blink-effect { 70%{ opacity:0; } } .blink { animation: blink-effect 1s step-end infinite; animation-name: blink-effect; /* 키프레임 이름 */ animation-duration: 1s; /* 움직임 시간 */ animation-iteration-count:infinite; /* infinite 무한반복, 숫자1은 한번반복 */ animation-timing-function:step-end; /* 움직임 속도 */ } /*
좌측
우측
*/ .eb-box { /* div 설정시 해당영역만큼만 차지하고, 가로로 정렬됨 */ display: flex; } .eb-box.wrap { /* eb-box wrap 사용시 영역 줄바꿈 */ flex-wrap: wrap; } .eb-box .eb-item { /* 공간분배, 영역하나에만 지정시 나머지공간차지함 */ flex: 1 ; } .sr-only { /* h1, h2 동적일때 상단에 미리정의등에 사용 */ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); /* 옛날 브라우저 대응 */ clip-path: inset(50%); /* 현대 브라우저 대응 */ border: 0; white-space: nowrap; /* 줄바꿈 방지 */ } .img-responsive { max-width: 100%; /* 부모보다 크면 부모에 맞추고, 작으면 자기 크기 유지 */ height: auto; /* HTML에 적힌 비율에 맞춰 높이를 자동 계산 */ display: block; /* 이미지 아래쪽 미세한 빈 공간 제거 */ } /* ------------------- 레이아웃 */ .detailWrap {display:flex;} .detailContent {width: calc(100% - 386px);margin-right:47px;} @media (max-width:1279px){ /* 노트북까지 */ .detailContent {width:100%; margin-right:0;} } /* ------------------- 그누보드 게시글부분 웹뷰에서 이미지 리사이즈 정상작동안해서 추가 */ #bo_v_con img { max-width: 100%; height: auto; } /* ------------------- 더보기 로딩 */ #infscr-loading { font-size:1.0rem; opacity:0.8; background: #000; color: #fff; padding: 10px; border-radius: 10px; left: 50%; width:200px; min-width:200px; margin-left:-100px; text-align: center; bottom: 100px; position: fixed; z-index: 100; -webkit-border-radius: 10px; -moz-border-radius: 10px; white-space:nowrap;} #infscr-loading div{ color: #fff;} .label-noti-quick-m { position: absolute; top: 12%; right: 20px; text-align: center; font-size: 12px; font-weight:500; padding: 2px 3px; line-height: 0.9; border-radius: .25em !important; } /* ------------------- 신 나리야 소스 */ .na-convert {font-size:16px;} .list-group-item {padding-left:0;padding-right:0} .list-group-item .col-form-label { font-weight: bold; } .comment-list-photo { width:50px;border-radius: 50%;} @media (max-width: 1023px) { /* 모바일,테블릿까지 */ } .commom-photo {width:50px;height:50px;border-radius: 10%;} .commom-photo-big {width:60px;height:60px;border-radius: 50%;} /* ------------------- 구 나리야 소스 */ .list-group-item.bb0 {border-bottom: 0px;} .list-group-item.pl0 {padding-left:0px;margin-left:0px;} .list-group-item.pr0 {padding-right:0px;margin-right:0px;} hr.hr::before { width:100%; height:1px; content: ""; position:absolute; left:0; bottom:1px; line-height:1px; background-color:#ddd; } hr.hr { display:block; position:relative; height:3px; border: none; line-height:1px; padding:0; margin:0; opacity: 1;} hr.hr::after { width:4.0rem; height:3px; content: ""; position:absolute; left:0; bottom:0; line-height:1px; background-color: var(--color-basic-b)} @media all and (max-width:575px) { .responsive h3.h3 { padding-left:1.0rem; padding-right:1.0rem; } .responsive hr.hr::after { left:1.0rem; } } /* SLY 분류탭 */ .sly-tab { border:0; overflow:hidden; } .sly-tab .d-flex { border-left:1px solid var(--color-gray-l); } .sly-tab li a { display:block; text-align:center; border:1px solid var(--color-gray-l); border-left:0; color:#333; background:#fafafa; } .sly-tab li.active a { font-weight:bold; background:#fff; border-bottom:1px solid #fff; } .sly-tab .sly-btn { display:none; text-align:center; border:1px solid var(--color-gray-l); color:#333; background:#fff; } .sly-tab .sly-btn:hover { background:#fafafa; } .sly-tab .sly-btn.sly-next { border-left:0; } .sly-tab hr { display:block; border-top:1px solid var(--color-gray-l); height:1px; margin:0; margin-top:-1px; padding:0; } /* 모달 */ #clipContent, #setupContent { display: block; border: none; width:100%; } #clipModal .btn { border-radius:0; } /* ------------------- 부트스크랩 수정,추가 */ .form-check-input {width:20px; height:20px; border-radius:5px; } /* 체크박스 기본크기키우기 */ .form-check-label {padding-left:3px; line-height:28px } .modal-xxl { max-width: 1240px; } /* xxl 이 없음으로 추가정의 */ /* ------------------- 비쥬얼 타이틀, 인기검색어, 검색 부분 */ .comPopWrap {display:flex; align-items:center; justify-content:space-between; cursor:pointer;margin-top:20px} .comPopTit {display:flex;flex-wrap: wrap; align-items:center; gap:0px; } .comPopTit ul {display:flex;flex-wrap: wrap; gap:10px; align-items:center;padding-bottom:3px} .comPopTit ul li span { font-size:16px; font-weight:var(--font-m);} .comPopTit span { width:95px; font-size:var(--font-size_18); font-weight:var(--font-b);} .comPopWrap_downArr { right:0px; background:#fff;width:25px;text-align:right; } /* position:absolute; 제거 */ .comPopTermInputWrap {margin-top:20px;} .comPopTermInputBox {position:relative; max-width: 500px; margin: 0 auto; } .comPopTermInputBox button {position:absolute; right:15px; top:45%; transform:translateY(-45%);} .comPopTermInput {border:none; width:100%; border: 2px solid var(--color-basic-b); border-radius: 50px; height: 50px; line-height: 50px; padding: 0 20px; font-weight:var(--font-b);} .comPopTermInput::placeholder {font-weight:var(--font-b); color:#999; font-size:var(--font-size_14);} @media (max-width: 1023px) { /* 모바일,테블릿까지 */ .comPopTermInputWrap {margin-top:} .comPopTermInput{border: 2px solid var(--color-basic-b);border-radius: 5px; height: 45px; line-height: 45px; padding: 0 20px ;} } .comPopTerm {display:none;} .comSelBox {display:flex;} .comSelBox .comSelBox_list {display:flex;justify-content : space-between; } .comSelBox .comSelBox_list .item {padding-left:5px;} .comSelBox .comSelBox_list .item:nth-child(1) {padding-left:0px;} .comSelBox .comSelBox_list .item span {display:block; border-radius:20px; border:1px solid #d4d4d4; color:#000; padding:9px 29px; font-weight:var(--font-sb);} .comSelBox .comSelBox_list .item.on span {background:#333333; border-radius:20px; border:1px solid #333333; color:#fff;} .comSelBox .comSelBox_list .item.on span {color:#fff} @media (max-width: 1023px) { /* 모바일,테블릿까지 */ .comSelBox .comSelBox {gap:4px;} .comSelBox .comSelBox_list .item span { padding:6px 19px;} } .visual-sub-title-wrap {display:flex; align-items:center; justify-content:space-between;} .visual-sub-title {font-size:22px; font-weight:700; line-height:1; padding:11px 0} /* 우측번튼과 높이 맞추기위해 패딩11 */ .comSearchList {width:calc(100% - 230px); margin-right:11px;display:flex; gap:11px; } .comSearchList li {width:100%; position:relative;} .comSearchList li:nth-of-type(2) {margin-right:0;} .comSearchInputBox {position:relative; width:100%; cursor:pointer;} .comSearchInputBox i {position:absolute; right:28px; top:50%; transform:translateY(-50%);} .comSearchInput {width:100%; border:none; height:100%; background:#f5f5f5; border-radius:15px; padding: 20px 89px 20px 28px; text-align:right; font-size:var(--font-size_17); font-weight:var(--font-b);} .comSearchInput::placeholder {text-align:left; font-size:var(--font-size_17); color:#a4a4a4; font-weight:var(--font-r);} .comDeTit {font-size:var(--font-size_18); font-weight:var(--font-sb);} .comSearchBar_mo {display:none;} @media (min-width: 1023px) { /* 모바일,테블릿이상 */ } @media (max-width:1279px){ /* 노트북까지 */ .comSearchBar_mo .comSearchInputBox { box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.1); border-radius:15px; border:1px solid #ebebeb;} .comSearchBar_mo {display:block;} } @media (max-width: 1023px) { /* 모바일,테블릿까지 */ .comSearchBar_mo {padding-bottom:23px; border-bottom:1px solid #f2f2f2;} } /* ------------------- 리스트상단 */ .msRoof {display:flex; justify-content:space-between;} .roofMore {font-size: var(--font-size_16); font-weight: var(--font-r); color:var(--color-basic-b);} .LinkBox {margin-top:17px; display:flex;} /* ------------------- header 모바일상단*/ .moRoadWrap {display:none;} .moRoadWrap {background:#fff; border-top:1px solid #ebebeb; padding-top:13px ; margin-top: -px; } .moRoadWrap .faviriteBtnBox .serBtn02 {border:none;} .moRoadBox {display: flex; align-items: center; justify-content: space-between;} .moRoadCate {font-size: var(--font-size_22);font-weight: var(--font-b); line-height:22px;width:70%;min-width:250px;text-align:center} .backBtn img {width:16px;} .mobileBtnBox {display:none; width: 22px; height: 17px;} .nav_btn {width: 100%; height: 100%; position:relative;} .nav_btn>span {display: block;width: 100%; height: 3px;background: #000;position: absolute; transition: .3s;} .nav_btn>span:nth-of-type(1) {transform: translateY(7px);} .nav_btn>span:nth-of-type(2) {transform: translateY(0px);} .nav_btn>span:nth-of-type(3) {transform: translateY(-7px);} @media (max-width:1279px){ /* 노트북까지 */ .mobileBtnBox {display:block;} } @media (max-width: 1023px) { /* 모바일,테블릿까지 */ .moRoadWrap {display:block; } } /* ------------------- sidebar */ .mobileWrap {width:100%; height:100vh; background:#f7f8fa; z-index:999; position:fixed; top:0; left:0; padding: 20px 0; display:none; overflow-y:scroll; overflow-y:scroll; -ms-overflow-style: none;} .mobileWrap::-webkit-scrollbar { display: none;} .mbLogo {width:50%;} .mbLogo img {max-width:100%;} .mobileWrapInner {max-width:1280px; width:92%; margin:0 auto;} .mbCloseBtn { display: flex;align-items: center;justify-content: center;} .mbTop {display:flex; justify-content:space-between; margin-bottom:55px} .mbCloseBtn button { position: relative; width: 24px; height: 24px; background: none; border: none; cursor: pointer;padding: 0;} .mbCloseBtn button span {position: absolute; display: block; width: 100%; height: 2px; background-color: #666; /* 선 색상 */ top: 50%; left: 0; transform: translateY(-50%);} .mbCloseBtn button span:first-child { transform: rotate(45deg); } .mbCloseBtn button span:last-child { transform: rotate(-45deg); } .mbSmWrap {max-width:550px; margin:0 auto; width:100%; } .mbLoginArea {width:100%; padding:20px; border-radius:20px; background:#fff; text-align:center;} .mbLoginArea span {font-size:var(--font-size_20); font-weight:var(--font-m); line-height:1.5em;} .mbLoginArea span b {font-weight:var(--font-b); color:var(--color-basic);} .mbLoginBox {display:flex; gap:15px; justify-content:center; margin-top:0px;} .mbLoginBox a {display:block; width:200px; height:60px; border-radius:20px; border:1px solid var(--color-basic-b); line-height:60px; color: var(--color-basic-b); font-size:var(--font-size_20); font-weight:var(--font-b);} .mbLoginBox a.mbReg {background: var(--color-basic-b); color:#fff;} .mbLoginHelpBox {font-size:var(--font-size_18); font-weight:var(--font-l); color:#aaaaaa; display:flex; gap:20px; justify-content:center; margin-top:20px;} .mbInfo {width:100%; padding:20px; border-radius:20px; background:#fff; margin-top:20px;} .infoDesc {text-align:center; } .infoDesc span {font-size:var(--font-size_18); font-weight:var(--font-m); color: var(--color-gray); } .infoDesc a {font-size:var(--font-size_18); font-weight:var(--font-m); background:#ddf7fb; color:#07afcd; width:100%; height:50px; text-align:center; line-height:50px; border-radius:15px; display:block; margin-top:20px;} .mbSchArea {position:relative; height:50px; margin:10px 0;} .mbSchArea input {width:100%;padding:15px 20px; border:1px solid #ebebeb; border-radius:15px; background:#fff;} .mbSchArea input::placeholder {font-size:var(--font-size_18); font-weight:var(--font-m); color:#b6b6b6;} .mbSchBtn {position:absolute; right:20px; top:50%; transform:translateY(-50%); width:21px; height:21px;} .mbSchTag {display:flex; align-items:center; gap:14px;} .mbSchTag li a {font-size:var(--font-size_14); font-weight:var(--font-r); color:#545454; letter-spacing:-0.02em; display:block; position:relative;} .mbSchTag li a:after {content:''; position:absolute; width:1px; height:1px; border-radius:50%; background:#545454; top:50%; right:-7px; } .mbSchTag li:last-child a:after {display:none;} .mbAcorWrap {background:#fff; border-radius:15px; padding:15px; margin:0px 0 20px 0; } .mbAcorList {cursor:pointer;} .mbAcorTit {display:flex; align-items:center; font-size:var(--font-size_18); font-weight:var(--font-sb); justify-content:space-between; padding:0px 0 10px 0px; cursor:pointer; position:relative;} .mbAcorTit i img {display:block;} .mbAcorbox {padding-left:5px} .sidebar-menu-ul { display: flex; flex-wrap: wrap; width:100%; font-weight: var(--font-sb);} .sidebar-menu-ul li {width:50%} .sidebar-menu-ul li a {display:block; padding:8px 0 8px 0; } .sidebar-menu-ul li.full-width {width:100%} @media (max-width: 1023px) { /* 모바일,테블릿까지 */ .sidebar-menu-ul li.mobile-full {width:100%} } .mbSiteLink {padding:25px 0;} .mbSiteLink li + li {margin-top:25px;} .mbSiteLink li a {font-size:var(--font-size_16); font-weight:var(--font-r); color:#434343; } @media (max-width:1279px){ /* 노트북까지 */ .mbLoginBox {gap:6px;} .mbLoginBox a {height:45px; line-height:45px; width:145px; font-size:14px;} .mbLoginHelpBox {font-size:12px;} .infoDesc span {font-size:14px; text-align:left;} .mbSchTag li a {font-size:12px;} .mbAcorTit {font-size:18px;} .mobileWrap {overflow-y:scroll; -ms-overflow-style: none;} .mobileWrap::-webkit-scrollbar { display: none;} .mbSiteLink li a {font-size:14px;} .mbSiteLink {padding:15px 0;} } /* ------------------- sidebar 로그인시 */ .userArea {background:#fff; border-radius:15px; padding:15px;} .mbUserInfo {display:flex; align-items:start;justify-content: space-between; flex-wrap:wrap} .mbUserIcon {display:flex; gap:17px;} .mbUserName {font-size:var(--font-size_18); font-weight:var(--font-l);} .mbUserName b {font-weight:var(--font-eb);} .mbTxt {margin-top:9px;} .mbInfoMor { font-weight: 500; color:#999999; } .userLev {display:flex; align-items:center; width:100%; border-radius:15px; background:#f3f4f6; padding:20px; justify-content:space-between;} .userlevel {display:flex; align-items:center; gap:7px;} .userlevel h4 { font-weight:var(--font-l);} .mbUserPoint {display:flex; align-items:center; gap:12px;} .mbUserPoint span {color:#07afcd; font-weight:var(--font-b);padding-left:10px} .userLevRemain { font-weight:var(--font-l); color:#07afcd; margin:10px 0;} .mbUserFavBox {cursor:pointer; position:relative;} .mbUserFavTit {display:flex; padding:10px 20px; border-radius:15px; background:#07afcd; color:#fff; justify-content:space-between;position:relative;} .mbUserFavTit.difc {background: var(--color-basic-b); margin-top:10px;} .mbUserFavBoxDepth02 {display:none;width:100%;padding-top:5px} .mbUserFavBoxDepth02 li {display:flex; justify-content:space-between; padding:5px 5px} .mbUserFavBoxDepth02 li > a {display:block; padding:5px 0px;; font-weight:700; transition:0.28s;} .mbUserFavBoxDepth02 li:hover a {color: var(--color-basic-b);} .stListAdd {display:flex; gap:3px; align-items:center;} .stListAdd img {width:16px;} .userUtillList {display:flex; flex-wrap:wrap;} .userUtillList li {width:calc((100% - 10px*3)/4); height:50px; margin-right:10px;} .userUtillList li:nth-of-type(4n) {margin-right:0;} .userUtillList li:nth-of-type(n + 5) {margin-top:20px;} .userUtillList li a {display:flex; align-items:center; gap:10px; font-size:14px; font-weight:var(--font-r);} .userUtillList i{color:#ff4500;} .usertype02 {margin:20px 0;} .userLinkTxt { font-weight:var(--font-m); color: var(--color-gray)} .userAreaLink {display:block; width:100%; padding:20px; text-align:center; background:#fff6d9; color:#e78200; font-weight:var(--font-m); border-radius:15px; margin-top:10px; } .userAreaLink.link_vs02 {background:#ddf7fb; color:#07afcd;} .userAreaLink.mg {background: var(--color-mg-l); color: var(--color-mg-b);} .userAreaLink.ma {background: var(--color-ma-l); color: var(--color-ma-b);} .userAreaLink.im {background: var(--color-im-l); color: var(--color-im-b);} .userAreaLink.eb {background: var(--color-eb-l); color: var(--color-eb-b);} @media (max-width: 1023px) { /* 모바일,테블릿까지 */ .mbUserName {font-size:18px;} .mbTxt {font-size:18px;} .userUtillList li {width:50%; margin-right:0;} .userUtillList li a {font-size:16px;} .userUtillList li:nth-of-type(n + 3) {margin-top:20px;} } /* ------------------- 탑 notice app */ .top-notice-app { width: 100%; height: 45px; background: #fafafa; position: relative; } .top-notice-app.close { display: none; } .top-notice-app p { letter-spacing: -0.01em; line-height: 40px; } .top-notice-app p i { display: inline-block; vertical-align: middle; margin-right: 6px; } .top-notice-app p b { font-weight: 700; } .top-notice-app-close { position: absolute; top: 50%; right: 0; width: 11px; height: 11px; transform: translateY(-50%); border:0} .top-notice-app-close span { width: 100%; height: 2px; display: block; position: relative; } .top-notice-app-close span:after, .top-notice-app-close span:before { position: absolute; content: ""; height: 2px; width: 100%; background-color: #2e2d26; left: 0; } .top-notice-app-close span:after { transform: rotate(45deg); } .top-notice-app-close span:before { transform: rotate(-45deg); } @media (max-width: 1023px) { /* 모바일,테블릿까지 */ .top-notice-app p {font-size:15px;} .top-notice-app p i { margin-right: 0; } .top-notice-app p i img { } } /* ------------------- 탑 notice guide */ .top-notice-guide.close { display: none; } .top-notice-guide-content {background: linear-gradient(to right, var(--color-basic-r), var(--color-basic-l)); width:100%; position:relative; height:45px; text-align:center; line-height:45px; } .top-notice-guide-close { width: 14px; height: 15px;position: absolute; top:50%; right:30%; transform:translateY(-50%); cursor:pointer;} .top-notice-guide-close span {display: block;width: 100%; height: 1px;background-color: black; /* X자 표시를 위한 색상 */ position: absolute; top: 50%; left: 0;transform-origin: center;} .top-notice-guide-close span:nth-of-type(1) {transform: rotate(45deg);} .top-notice-guide-close span:nth-of-type(2) {transform: rotate(-45deg);} @media (max-width: 1023px) { /* 모바일,테블릿까지 */ .top-notice-guide-content {padding:0 20px; text-align:unset;} .top-notice-guide-close {right:20px;} } /* ------------------- 스토어리뷰폼 */ .reviewForm {display:flex; margin-top:25px; } .reviewForm li {width:calc((100%)/2); padding:0px 1px;} /* ------------------- 퀵메뉴 */ #sky{display: block;} #sky2{display: block;} @media screen and (max-width: 1480px){ #sky{display: none;} #sky2{display: none;} } /* ------------------- 퀵메뉴 gps설정부분 */ #actionSheet { position: fixed; bottom: 0px; left: 0; width: 100%; background-color: rgba(0, 0, 0, 0.5); height: 100%; display: flex; flex-direction: column; justify-content: flex-end; transition: 1s; /* 서서히 나타나는 효과 */ visibility: hidden; opacity: 0; } #actionSheet.active { z-index:100; /* 서서히 나타나는 효과 */ visibility: visible; opacity: 1; } .action-options { background-color: #fff; border-top-left-radius: 10px; border-top-right-radius: 10px; /* 세로 컨텐츠가 늘어나는 경우 스크롤이 생기도록 설정 */ overflow: auto; max-height: 300px; /* 아래에서 위로 나타나는 효과, max-height과 동일하게 작성 */ position: relative; bottom: -300px; transition: 1s; } #actionSheet.active .action-options { /* 아래에서 위로 나타나는 효과, max-height과 동일하게 작성 */ bottom: calc(55px + env(safe-area-inset-bottom, 0px)); } .action-option { width: 100%; padding: 15px; cursor: pointer; transition: background-color 0.3s ease; } .action-option-close { text-align: center; } .action-option:hover { background-color: #f2f2f2; } /* ------------------- 카카오맵 */ #postcode-wrap { height: 380px; /* 주소검색 창 높이 설정 */ position: relative; /* 닫기 버튼을 절대 위치로 고정하기 위한 기준 부모 설정 */ } #postcode-wrap .btn.bg-basic.btn-sm { position: absolute; /* 절대 위치로 설정 */ bottom: 10px; /* 창 하단에서 10px 여유 두기 */ left: 50%; /* 수평 중앙 정렬 */ transform: translateX(-50%); /* 중앙 정렬 */ } /* ------------------- 사이드바 조절 */ #memberOffcanvas { width:550px; background:#f7f8fa; padding-top: calc(env(safe-area-inset-top, 0px) + 0px ); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 50px);} #menuOffcanvas { width:550px; background:#f7f8fa; padding-top: calc(env(safe-area-inset-top, 0px) + 0px ); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 50px);} #newOffcanvas { width:550px; background:#f7f8fa; padding-top: calc(env(safe-area-inset-top, 0px) + 0px ); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 50px);} #notiOffcanvas { width:550px; background:#f7f8fa; padding-top: calc(env(safe-area-inset-top, 0px) + 0px ); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 50px);} /* ------------------- 필수입력 - 셀렉트에서 required 사용시 부트스크랩 화살표가 사라짐 */ .required-select, textarea.required-select { /* 화살표 + 빨강 별 이미지 */ background-image: var(--bs-form-select-bg-img), url('/board/theme/Marigold/img/require.png'); /* 위치 지정: 첫 번째가 화살표, 두 번째가 빨강 별 */ background-position: right 0.75rem center, right top; } /* ------------------- 소셜로그인부분 텍스트 정렬 */ #sns_offcanvas .sns-wrap .txt { padding-top: 4px; } /* ------------------- 모바일하단바 */ #mo_float_bar{display: block;position: fixed;bottom: 0;left: 0;width: 100%;background-color: #fbfbfb;z-index: 1046;border-top: 1px solid #e4e3e3;padding: 7px 0 5px 0; box-shadow: 0 -3px 3px rgba(0,0,0,.02); -webkit-box-shadow: 0 -3px 3px rgba(0,0,0,.02); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5px); } #mo_float_bar ul{display: flex;justify-content: space-between;} #mo_float_bar ul li{width: 20%;} #mo_float_bar ul li figure{text-align: center;height: 11px;} #mo_float_bar ul li figure i{font-size: 24px; color:#999fa7;} #mo_float_bar ul li p{text-align: center;font-size: 12px;font-weight: 700; color:#999fa7;} #mo_float_bar ul li i.on, #mo_float_bar ul li p.on{color: var(--color-basic);} /* ------------------- 모바일우측 gps아이콘 */ .floBanMob1 { position: fixed; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); /* 아래 끝에서부터의 거리 */ right: 15px; /* 오른쪽 끝에서부터의 거리 */ background-color: #fff; z-index: 90; width:40px; height:40px; text-align:center; padding-top:6px; border-radius:10px; border : solid 1px var(--color-gray-l); } /*main_visual-----------------------------------------------------*/ #k_mv2{width: 100%;height: 100%;cursor:grab;position: relative;} #k_mv2 .k_mv2_con{height: 100%;} .k_mv2_txt_box{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 90%;max-width: 1400px;color: #FFF;} .k_mv2_txt_box h2{font-size: 4rem;font-weight: bold;letter-spacing: 0em;margin-bottom: 35px;} .k_mv2_txt_box p{margin-bottom: 75px;} .k_mv2_txt_box p b, .k_mv2_txt_box p i{display: block;} .k_mv2_txt_box p b{font-size: 2rem;font-weight: 500;letter-spacing: -0.045em;margin-bottom: 50px;font-weight: bold;} .k_mv2_txt_box p i{font-size: 1rem;font-weight: 400;letter-spacing: -0.03em;color: rgba(255,255,255,0.9);line-height: 180%;} .k_mv2_link_01, .k_mv2_link_02{display: inline-block;height: 60px;} .k_mv2_link_01{width: 60px;background: #d92620;position: relative;margin-right: 5px;} .k_mv2_link_02{width: 145px;border: 1px solid #FFF;line-height: 58px;font-weight: bold;text-align: center;vertical-align: top;} .k_mv2_link_01:hover i.k_45arrow{transform: translate(-50%, -50%) rotate(90deg);} #k_swiper_wrap_01{position: absolute;top: 20%;left: 50%;transform: translateX(-50%);width: 90%;max-width: 1400px;height: 0;z-index: 1;} #k_swiper_con_01{height: 35px;position: absolute;left: 0;top: 0;width: 150px;} #k_mv2 .k_swiper_btn_01{width: 100%;height: 3px;background: rgba(255,255,255,0.3);} #k_mv2 .k_swiper_btn_01 span{background: #c20802;} #k_mv2 .k_swiper_btn_02{} #k_mv2 .k_swiper_btn_02 span{width: auto;height: auto;background: none;color: rgba(255,255,255,0.4);font-size: 1.1rem;font-weight: bold;letter-spacing: 0.03em;margin: 0 10px;opacity: 1;} #k_mv2 .k_swiper_btn_02 span:first-child{margin-left: 0;} #k_mv2 .k_swiper_btn_02 span.swiper-pagination-bullet-active{color: #fff;} /*정지재생_버튼*/ .k_play_btn_wrap{position: absolute;top: 0;right: 0;} .k_play_btn_wrap button{width: 21px;height: 21px;} .k_play_btn_wrap button i{color: #FFF;} .k_start_btn{display: none;} /*노트북 도트바*/ @media screen and (max-width: 1600px) and (max-height: 900px){ .k_mv2_txt_box{top: 60%;} } /*노트북 도트바*/ @media screen and (max-width: 760px){ #k_swiper_con_01{height: 45px;} .k_mv2_txt_box{top: 53%;} .k_mv2_txt_box h2{font-size: 3rem;margin-bottom: 15px;} .k_mv2_txt_box p{margin-bottom: 50px;} .k_mv2_txt_box p b{font-size: 1.8rem;margin-bottom: 24px;} .k_mv2_txt_box p i{font-size: 12px;word-break: keep-all;} .k_mv2_link_01, .k_mv2_link_02{height: 45px;} .k_mv2_link_01{width: 45px;} .k_mv2_link_02{width: 125px;line-height: 43px;} } .test__{width:100%; height:500px; border:1px solid;} @media screen and (max-width: 1080px){ } @media screen and (max-width: 760px){ } *{ margin:0; padding:0; font-family: inherit; font-size: inherit; font-weight: inherit; font-style: inherit; color: inherit; text-decoration: inherit; box-sizing: border-box; } ul,li,ol{ list-style:none; } .g_innerbox{ width:100%; margin:0 auto; } .g_btn1{ background-color: #fff; color: #333; width: 150px; height: 40px; line-height: 40px; text-align: center; border-radius: 3px; opacity: .9; transition: all .2s; font-weight:500; border:1px solid white; } .g_btn1:nth-of-type(2):hover{ background-color:white; border:1px solid var(--color-basic); color: var(--color-basic); } .g_bt1{ background-color:white; border:1px solid #888888; } .g_bt1:hover{ background-color:white; border:1px solid var(--color-basic); color: var(--color-basic); } .g_btn2{ background-color: #fff; color: #333; width: 50px; height: 40px; line-height: 40px; text-align: center; border-radius: 3px; opacity: .9; transition: all .2s; font-weight:500; display:flex; justify-content:center; align-items:center; } .g_btn3{ background-color: var(--color-basic); color: white; width: 100px; height: 40px; line-height: 40px; text-align: center; border-radius: 3px; opacity: .9; transition: all .2s; font-weight:500; } /* .on{ background-color: var(--color-basic); color:white; font-weight:500; } */ .g_sec2{width:100%; background-color:#f9f9f9;;} .g_sec3{width:100%; margin:3% 0; font-weight:500; color:#555} .g_sec4{width:100%; margin:8% 0;} .g_button_box{ width:756px; margin:0 auto; display:flex; margin-bottom:4%; } .g_button_box li{ padding:2.5% 0; width:24%; border:1px solid #ededed; text-align:center; margin-left:-0.1%; cursor:pointer; } #g_big3{font-size:1.4rem;font-weight:700;} .g_port_box{ display:flex; justify-content:center; align-itmes:center; } .g_port_box:not(:first-of-type){display:none;} .g_p_box{ width:49%; display:flex; justify-content:center; align-itmes:center; flex-direction: column; padding:2%; } .g_p_box:first-of-type{ margin-right:2%; } .g_p_box h1{ font-size:1.8rem; font-weight:600; margin:5% 0; } .g_p_box table{ width:100%; } .g_p_box th{ padding:2.5% 0; width:101px; text-align:center; border-radius:4rem; color:#999; font-weight:500; display:block; background-color:#def2ff; color: var(--color-basic); margin:10px 10px 10px 0; } .g_p_box td{font-weight:500;width:75%;} .g_sec2 p{ font-size:1.25rem; background-color:#ededed; } .g_btn_box{ text-align:right; margin:10% 0; position:relative; display:flex; justify-content: flex-end; } .g_btn_box::before{ content:''; width:100%; height:0.5px; background-color:#ddd; position:absolute; left:0; top:-30px; } .g_btn1:nth-of-type(2){ background-color: var(--color-basic); color:white; border:1px solid var(--color-basic); } .g_sec2 button{ margin:0 1%; } .g_sec3 th{ padding:1.5% 1.5%; width:200px; background-color:#fbfbfb; text-align:left; } .g_sec3 tr:last-of-type th{ color:#000; font-weight:700; } .g_sec3 tr:last-of-type{ padding:5% 0; border-bottom:1px solid #eee; } .g_sec3 td{ padding:1% 1.5%; } .g_sec3 tr{ border-top:1px solid #eee; } .g_sec3 span{ } .g_sec3 span:first-child{ color:gold; padding:0 0.5% 0 3%; } .g_sec4_box{ width:23%; } .g_img{ overflow:hidden;} /*.g_sec4_box img{*/ /*transition:.3s ease;*/ /*}*/ /*.g_img:hover img{*/ /*transform:scale(1.2);*/ /*}*/ /*.g_img img:hover .g_img::before{*/ /*background-color:rgba(0,0,0,.7);*/ /*}*/ .g_sec4_box:hover .g_img::before{ background:rgba(0,0,0,.7); } .g_sec4_inner{ display:flex; align-items: center; justify-content: space-around; } .g_img{ width:100%; height:400px; position:relative; } .g_img::before{ content:''; position:absolute; top:0; left:0; transition:.3s ease; width:100%; height:100%; background:none; } .g_img img{ width:100%; height:100%; object-fit: cover; } .g_btn_box2{ position:absolute; width:100%; top:50%; left:59%; z-index:2; transform:translate(-50%,-50%); opacity:0; transition:.3s ease; } .g_sec4_box p{ font-weight:500; font-size:1.2rem; margin-top:7%; } .g_sec4 .g_btn1{ width: 114px; font-size:0.8rem; opacity:0.9; } .g_sec4 .g_btn3{ width: 114px; font-size:0.8rem; opacity:0.9; } .g_sec4_box:hover .g_btn_box2{ opacity:1; } .g_sec4_box .g_btn3:hover{ opacity:1; } .g_sec4_box .g_btn1:hover{ opacity:1; } .g_sec4 button{ margin:0 1%;} .g_svg{ width:50%: } .red{ fill:red; animation:like .5s ease; } @keyframes like{ 0%{transform: scale(1) translateY(0px);} 50%{transform: scale(1.1) translateY(-5px);} 100%{transform: scale(1) translateY(0px);} } @media (max-width:1280px){ /****************************** max-width:1280px ******************************/ .g_sec2{margin:5% auto;} .g_sec4{margin:9% auto;} .g_sec4 .g_btn1 { width: 100px; font-size: 0.8rem; opacity: 0.9; } .g_sec4 .g_btn3 { width: 71px; font-size: 0.8rem; opacity: 0.9; } .g_img { width: 100%; height: 340px; position: relative; } } @media (max-width:1268px){ /****************************** max-width:1268px ******************************/ .g_btn1{width:145px;} } @media (max-width:1024px){ /****************************** max-width:1024px ******************************/ .g_innerbox{width:78%;} .g_btn_box::before{top:-22px;} .g_btn_box{margin:13% 0;} .g_btn1{width:110px;} .g_sec4_inner{flex-wrap:wrap;} .g_img { width: 100%; height: 462px; position: relative; } .g_btn_box2 { position: absolute; width: 100%; top: 50%; left: 65%; z-index: 2; transform: translate(-50%,-50%); opacity: 0; transition: .3s ease; } .g_sec4 .g_btn1 { width: 133px; font-size: 0.8rem; opacity: 0.9; } .g_sec4 .g_btn3 { width: 100px; font-size: 0.8rem; opacity: 0.9; } .g_sec4_box { width: 45%; margin:5% 0; } } @media (max-width:768px){ /****************************** max-width:768px ******************************/ .g_sec4_inner{ flex-wrap:wrap; } .g_img { width: 100%; height: 462px; position: relative; } .g_btn_box2 { position: absolute; width: 100%; top: 50%; left: 65%; z-index: 2; transform: translate(-50%,-50%); opacity: 0; transition: .3s ease; } .g_sec4 .g_btn1 { width: 140px; font-size: 0.8rem; opacity: 0.9; } .g_sec4 .g_btn3 { width: 120px; font-size: 0.8rem; opacity: 0.9; } .g_sec4_box { width: 100%; margin:5% 0; position:relative; } .g_innerbox{width:95%;} .g_button_box{ width:100%; margin-bottom: 6%; justify-content:center; flex-wrap:wrap; } .g_button_box li{width:50%; padding:4% 0;} .g_button_box li:nth-of-type(4){border-top:none;} .g_button_box li:nth-of-type(3){border-top:none;} .g_port_box{flex-direction: column;} .g_p_box{width:100%;} .g_p_box tr{ padding: 1.5% 0;} .g_p_box td{ font-size: 16px;word-break: keep-all;width:65%;} .g_p_box th{padding: 2% 0;} .g_btn1{margin:0 1%; width:40%;} .g_sec3 tr{ border-top: 1px solid #eee; } #g_big3{font-size:1.5rem;font-weight:700;} .g_sec3 th { padding: 1.5% 1.5%; width: 90px; background-color: #fbfbfb; text-align: left; } .g_sec3 td { padding: 10px; word-break: keep-all; } .g_sec3 tr:last-of-type th { color: #000; font-weight: 700; padding: 2.5% 1.5%; } .g_sec3 tr:last-of-type{padding:0;} .g_slide_img { width: 90%; height: 464px; position: relative; } .g_sec3{ margin-top:13%;} .g_sec4_box p{ font-size:1.5rem; margin-bottom:10%;} } @media (max-width:320px){ .g_sec3 { margin-top: 8%; } } .eb-tabs { display: flex; flex-direction: column; align-items: center; position: relative; background: #000; text-align: center; } .eb-tabs-container { display: flex; flex-direction: row; position: absolute; width: 100%; height: 40px; background: #fff; z-index: 80; border-bottom:1px solid #000; /* 하단라인 컬러상 */ } .eb-tabs-container-top { position: fixed; } .eb-tab { position: relative; display: flex; justify-content: center; align-items: center; flex: 1; color: #000; letter-spacing: 0.1rem; transition: all 0.5s ease; font-size: 16px; font-weight: bold; padding-top:5px; padding-bottom:15px; } .eb-tab:hover { } .eb-tab-slider { position: absolute; bottom: 0; width: 0; height: 4px; background: #000; transition: left 0.3s ease; } .eb-tab::after { content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 16px; background-color: #e9e9e9; /* 가로 구분선 색상 */ } .eb-tab:last-child::after { display: none; } /* ------------------- 변경되는 공통여백 */ .eb-inner {max-width:1400px; width:92%; margin:0 auto; height: 100%; position: relative;} .eb-pd-visual { padding:60px 0 30px 0 } /* 메뉴와 타이틀간의 패딩*/ .eb-pd-visual_title { padding:60px 0 30px 0 } /* 메뉴와 타이틀간의 패딩*/ @media (max-width: 1023px) { /* 모바일,테블릿까지 */ .eb-pd-visual { padding:40px 0 0 0 } .eb-pd-visual_title { padding:40px 0 0 0 } } /* ------------------- 변경되는 구 나리야 소스 */ hr.hr::after { width:4.0rem; height:3px; content: ""; position:absolute; left:0; bottom:0; line-height:1px; background-color: var(--color-basic)} /* ------------------- 변경되는 비쥬얼 타이틀, 인기검색어, 검색 부분 */ .visual-sub-title {font-size:36px; font-weight:700; line-height:1;} /* ------------------- header*/ .k_eng{font-family: 'Roboto', sans-serif;}/*영문 폰트 변경*/ .clearfix::after{content: "";clear: both;display: block;} .k_w100{display: block;width: 100%;height: 100%;} .center_pos{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}/*포지션 객체 중양정렬*/ .bg{background-repeat: no-repeat;background-size: cover;background-position: center center;}/*background-image - 반응형*/ *{outline:0; margin:0; padding:0;} html { scroll-behavior: smooth; } .b_sections{width:100%; } .b_inner{width:94%; max-width:1400px; margin:0 auto;} .b_sections .b_tit-txt{font-size:3.75rem; } .b_sections .b_sub-txt{font-size:1.25rem; font-weight: 500; line-height: 1.8; display: block; padding:35px 0; word-break:keep-all; } .b_eng{font-family: 'Montserrat', sans-serif; font-weight: 700;} .g_header_bg{ width:100%; height:70px; background-color:#333; } @media (max-width:1280px){ .g_header_bg{height:60px;} } #b_header {/*background-color: rgba(0,0,0,.25);*/ font-family: 'Pretendard Variable'; width:100%; height:70px; position:fixed; left:0; top:0; z-index:10; border-bottom: 1px solid rgba(255,255,255,.3); transition:background-color .2s; } #b_header.b_on{background-color: rgba(0,0,0,.5); transition:background-color .2s; border-color:rgba(255,255,255,.1);} #b_header .b_inner{display: flex; justify-content: space-between; align-items: center; height:100%; } #b_header nav{height:100%;} #b_header .b_gnb {display: flex; align-items: center; height:100%;} #b_header .b_gnb li{color:#fff; margin-right:50px; height:100%; display: flex; align-items: center; position:relative;} #b_header .b_gnb li:last-child{margin-right:0px;} #b_header .b_gnb li:after{content:''; width:0; height:2px; background-color: #006fff; position:absolute; left:-14px; bottom:-1px; transition: width .2s ease;} #b_header .b_gnb > li:hover:after{width:140%; transition: width .2s ease;} #b_header .b_gnb li a{display: block; padding:5px ; font-size:1.2rem; text-align: center; font-weight:500; color: #fff;} #b_header .b_gnb li .b_blue{color:#006fff; font-size:0.813rem; display: block; margin-top:-1px;} #b_header .b_logo a{display:block;} #b_header .b_logo img{display:block;} #b_header .b_logo img.b_logo-c{display:none;} #b_header .b_gnb > li > .b_sub_gnb{display:none; background: rgba(0,0,0,0.75);position: absolute; width:180%; top:100%; padding:12px 0; left:50%; transform:translateX(-50%);}/*2depth hide*/ #b_header .b_gnb > li > .b_sub_gnb > li {width:100%; padding:5px 10px;} #b_header .b_gnb > li > .b_sub_gnb > li > a{display: block;width: 100%;height: 100%;text-align: center;font-size: 14px;font-weight: 400;letter-spacing: -0.065em;color: #fff;padding:12px 0;} #b_header .b_gnb > li > .b_sub_gnb > li > a:hover{text-decoration: underline;} /* ------------------- 빠른상담 */ #k_mo_quick{position: fixed;top: 50%;right: -400px;transform: translateY(-50%);width: 100%;height: 100%;max-width: 400px;max-height: 750px;background: #fff;z-index: 91; transition: right 0.7s; border-radius:30px; border:none; transition-timing-function: ease; -webkit-transition-timing-function: ease; box-shadow: 3px 3px 13px rgba(0,0,0,0.15); -webkit-box-shadow: 3px 3px 13px rgba(0,0,0,0.15); -moz-box-shadow: 3px 3px 13px rgba(0,0,0,0.15); -ms-box-shadow: 3px 3px 13px rgba(0,0,0,0.15); -o-box-shadow: 3px 3px 13px rgba(0,0,0,0.15); } #k_mo_quick>h3, #k_mo_quick>p{text-align: center;font-weight: bold;letter-spacing: -0.065em;} #k_mo_quick>strong, #k_mo_quick>p{ display: block;text-align: center;font-weight: bold;letter-spacing: -0.065em;} #k_mo_quick>h3{font-size: 30px;margin-top: 50px;margin-bottom: 25px; color: var(--color-basic); } #k_mo_quick>strong{ display: block; font-size: 30px;margin-top: 50px;margin-bottom: 25px; color: var(--color-basic); } #k_mo_quick>p{font-size: 18px;color: #999;margin-bottom: 25px; line-height:1.5; } #k_mo_quick .k_radio_check{margin: 15px 0px;} #k_mo_quick .k_radio_check input{cursor: pointer;display: inline-block;width: 15px;height: 15px;} #k_mo_quick .k_radio_check label{display: inline-block !important;font-size: 14px;font-weight: 500;letter-spacing: -0.045em;padding-left: 5px;color: #777;} .k_radio_check label a{padding-left: 13px;} #k_mo_quick .k_form_submit{width: 100%;background-color: var(--color-basic);font-size: 16px;font-weight: bold;color: #FFF;transition: background-color 0.3s;cursor:pointer;} #k_mo_quick .k_form_submit:hover{background-color: #222;} #k_mo_quick.active{right: 95px;} @media screen and (max-width: 1480px){ #k_mo_quick{height: 60%;overflow-y: scroll;} #k_mo_quick.active{right: 65px;} } @media screen and (max-width: 760px){ #k_mo_quick{width: 100%;height: 100%;} #k_mo_quick.active{right: 0;} } .k_mo_q_tell{margin-bottom: 30px;} .k_mo_q_tell span{display: block;text-align: center;font-size: 16px;margin-bottom: 5px;} .k_mo_q_tell span i{color: var(--color-basic); margin-right:5px;} .k_mo_qui_formbox {width: 90%; margin: 0 auto;} .k_mo_qui_formbox ul li{margin-bottom: 25px;} .k_mo_qui_formbox ul li label{margin-bottom: 13px;display: block;} .k_mo_qui_formbox ul li label::after{content: "";clear: both;display: block;} .k_mo_qui_formbox ul li label object{display: inline-block;height: 16px;} .k_mo_qui_formbox ul li label h3{display: inline-block;font-size: 16px;font-weight: 500;letter-spacing: -0.045em;margin-left: 8px;} .k_mo_qui_formbox ul li label strong{display: inline-block;font-size: 16px;font-weight: 500;letter-spacing: -0.045em;margin-left: 8px;} .k_mo_qui_formbox ul li input[type="text"] {display: block;width: 100%;height: 45px;border: none;background: #f9f9f9;padding: 0 15px;border-radius:5px;border:1px solid #f1f1f1; } .k_mo_qui_formbox ul li input[type="submit"] {display: block;width: 100%;height: 45px;border: none;background: #f9f9f9;padding: 0 15px;border-radius:5px;border:1px solid #f1f1f1; } .k_mo_qui_formbox ul li input[type="text"]::placeholder{color: #999;font-size: 14px;font-weight: 400;} .k_mo_qui_formbox ul li input[type="text"]:focus{outline: none;border: 1px solid #222;} .k_mo_quick_close{position: absolute;top: 0;right: 0;width: 50px;height: 50px;} .k_mo_quick_close span{position: absolute;top: 24px;left: 12.5px;width: 25px;height: 2px;background: #222;transition: transform 0.2s;} .k_mo_quick_close span:nth-child(1){transform: rotate(45deg);} .k_mo_quick_close span:nth-child(2){transform: rotate(-45deg);} .k_mo_quick_close:hover span{transform: rotate(0);} /*견적문의팝업*/ .k_form_repair_01::after{content: "";clear: both;display: block;} .k_form_repair_01 input, .k_form_repair_01 p{float: left;} .k_form_repair_01 input{width: 80% !important;} .k_form_repair_01 p{width: 20%;line-height: 50px;text-align: center;font-weight: bold;} .k_form_repair_01 span{width: 100%;line-height: 50px;text-align: center;font-weight: bold;} /*포트폴리오 더보기*/ .k_port_last{position: relative;} .k_port_last_txt{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);color: #FFF;font-weight: 500;text-align: center;width: 90%;z-index: 1;} .k_port_last_txt b, .k_port_last_txt i{display: block;} .k_port_last_txt b{font-size: 4rem;} .k_port_last_txt i{font-size: 1.5rem;letter-spacing: -0.065em;} .k_port_last::after{content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 300px;height: 300px;background: #222;border-radius: 300px;transition: all 0.5s;} .k_port_last:hover::after{background: #d92620;width: 135%;height: 135%;} @media screen and (max-width: 760px){ .k_port_last::after{width: 170px;height: 170px;} } /*왼쪽, 오른쪽 퀵메뉴*/ #k_lft_quick{position: fixed;top: 50%;left: 3%;transform: translateY(-50%);z-index: 1000;} #k_lft_quick ul li{width: 40px;height: 40px;border-radius: 40px;transition: all 0.3s;background: #FFF;margin-bottom: 15px;} #k_lft_quick ul li:last-child{margin-bottom: 0;} #k_lft_quick ul li a{display: block;width: 100%;height: 100%;text-align: center;} #k_lft_quick ul li a i{line-height: 40px;font-size: 1.2rem;} #k_lft_quick ul li:first-child a i{font-size: 1.4rem;} #k_lft_quick ul li:hover{background: #d92620; box-shadow: 3px 3px 10px rgba(0,0,0,0.15); -webkit-box-shadow: 3px 3px 10px rgba(0,0,0,0.2); -moz-box-shadow: 3px 3px 10px rgba(0,0,0,0.2); -ms-box-shadow: 3px 3px 10px rgba(0,0,0,0.2); -o-box-shadow: 3px 3px 10px rgba(0,0,0,0.2); } #k_lft_quick ul li:hover i{color: #FFF;} #k_lft_quick ul li p{white-space: nowrap;line-height: 38px;font-weight: bold;letter-spacing: -0.045em;font-size: 1rem;padding-left: 13px;} /*탑버튼 추가*/ #k_rgt_quick ul li:last-child{background: #222;color: #fff; box-shadow: 3px 3px 8px rgba(0,0,0,0.15); -webkit-box-shadow: 3px 3px 8px rgba(0,0,0,0.15); -moz-box-shadow: 3px 3px 8px rgba(0,0,0,0.15); -ms-box-shadow: 3px 3px 8px rgba(0,0,0,0.15); -o-box-shadow: 3px 3px 8px rgba(0,0,0,0.15); } #k_rgt_quick ul li:last-child:hover{background: var(--color-basic);} /*오른쪽 새로운 퀵메뉴*/ #k_new_quick{position: fixed;top: 50%;right: -135px;transform: translateY(-50%);z-index: 80;transition: right 1s;width: 230px;} #k_new_quick .k_nq_inner li{width:80px;height: 80px;background: var(--color-basic);position: relative;transition: transform 0.3s; border-radius: 50%; margin-bottom: 4px; box-shadow: 0 3px 5px rgb(0 0 0 / 20%);transition:background-color .2s;} #k_new_quick .k_nq_inner li:hover{background-color:#0066d4; transition:background-color .2s; } /*#k_new_quick .k_nq_inner li::after{content: "";clear: both;display: block;}*/ #k_new_quick .k_nq_inner li a{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;display: flex; justify-content: center; align-items: center;} #k_new_quick .k_nq_inner li figure, #k_new_quick .k_nq_inner li h4{float: left;height: 80px;} #k_new_quick .k_nq_inner li figure{width: 80px;position: relative;} #k_new_quick .k_nq_inner li h4{width: calc( 100% - 80px);line-height: 80px;color: #FFF;font-weight: bold;font-size: 1rem;padding-right: 15px; display:none; } #k_new_quick object, #k_new_quick figure i{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);} #k_new_quick object{height: 28px;} #k_new_quick i{color: #FFF;font-size: 1.8rem;} #k_new_quick .k_nq_inner li:nth-child(4) figure i{font-size: 1.6rem;} /*#k_new_quick .k_nq_inner li:hover{transform: translateX(-150px);}*/ .k_nq_top{width: 80px;height: 80px;background: #000;position: relative; border-radius: 50%;box-shadow: 0 3px 5px rgb(0 0 0 / 20%);} .k_nq_top a{display: block;width: 100%;height: 100%;} .k_nq_top a span{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);color: #FFF;width: 100%;text-align: center;} .k_nq_top a span i{display: block;margin: 0 auto;font-size: 1.1rem !important;margin-bottom: 5px;} .k_nq_top a span b{font-size: 0.9rem;font-weight: bold;} /*#k_new_quick.active{right: -150px;}*/ #k_new_quick.active{right: -135px;} @media screen and (max-width: 1280px){ /* #k_new_quick{right: -312px;/*width: 181px;}*/ #k_new_quick.active{right: -135px;} /* #k_new_quick .k_nq_inner li:hover{transform: translateX(-131px);}*/ /* #k_new_quick .k_nq_inner li, #k_new_quick .k_nq_inner li figure, #k_new_quick .k_nq_inner li h4{height: 50px;}*/ #k_new_quick object{height: 20px;} #k_new_quick i{font-size: 1.5rem;} #k_new_quick .k_nq_inner li:nth-child(4) figure i{font-size: 1.4rem;} /* #k_new_quick .k_nq_inner li figure, .k_nq_top{width: 50px;}*/ #k_new_quick .k_nq_inner li h4{width: calc( 100% - 50px);line-height: 50px;} /* .k_nq_top{height: 100px;}*/ } @media screen and (max-width: 760px){ #k_new_quick{position: fixed;top: 75%;right: -135px;transform: translateY(-50%);transition: right 1s;width: 200px;} #k_new_quick .k_nq_inner li{width:60px;height: 60px;background: var(--color-basic);position: relative;transition: transform 0.3s; border-radius: 50%; margin-bottom: 4px; box-shadow: 0 3px 5px rgb(0 0 0 / 20%);transition:background-color .2s;} .k_nq_top{width: 60px;height: 60px;background: #000;position: relative; border-radius: 50%;box-shadow: 0 3px 5px rgb(0 0 0 / 20%);} .k_nq_top{float: left;/*height: 50px;*/} } @media screen and (max-width: 1px){ /*우선순위 강제*/ #k_new_quick{right: 0 !important;} #k_new_quick .k_nq_inner li h4{display: none !important;} #k_new_quick .k_nq_inner li:hover{transform: translateX(0) !important;} /*우선순위 강제*/ #k_new_quick{top: auto;bottom: 0;transform: translateY(0);/*background: var(--color-basic);*/} #k_new_quick{width: 100%;display:flex; justify-content:center; bottom: 15px;} #k_new_quick .k_nq_inner{float: left;/*width: calc( 100% - 50px );*/} #k_new_quick .k_nq_inner::after{content: "";clear: both;display: block;} #k_new_quick .k_nq_inner li{float: left;/*width: 50px;*/} #k_new_quick .k_nq_inner li:first-child, #k_new_quick .k_nq_inner li:nth-child(2){margin-right: 7px;} #k_new_quick .k_nq_inner li:first-child h4, #k_new_quick .k_nq_inner li:nth-child(2) h4{display: block !important;} .k_nq_top{float: left;/*height: 50px;*/} } @media screen and (max-width: 460px){ #k_new_quick .k_nq_inner li h4{font-size: 10px;} } @media screen and (max-width: 340px){ #k_new_quick .k_nq_inner li:first-child h4, #k_new_quick .k_nq_inner li:nth-child(2) h4{display: none !important;} } /*오른쪽 퀵메뉴 궁금한 점이 있으시면 말풍선*/ #k_speech_bubble{position: absolute;top: -95px;right: 70%;width: 275px;height: 65px;border-radius: 8px;background: #f9f9f9;/*opacity: 0;transition: opacity 1s;*/ animation-duration: 0.5s;animation-name: speech_bubble;animation-iteration-count: infinite;animation-direction: alternate; display:none; } @keyframes speech_bubble{ from{top: -95px;} to{top: -110px;} } #k_speech_bubble:hover{animation-play-state: paused;} .k_sb_close{position: absolute;top: 6px;right: 6px;width: 13px;height: 13px;} .k_sb_close span{position: absolute;top: 5.5px;left: 0;width: 13px;height: 2px;background: #222;transition: transform 0.3s;} .k_sb_close span:nth-child(1){transform: rotate(45deg);} .k_sb_close span:nth-child(2){transform: rotate(-45deg);} .k_sb_close:hover span{transform: rotate(0);} #k_speech_bubble p{line-height: 63px;text-align: center;font-weight: 500;color: #555;font-size: 0.93rem;cursor: pointer;} #k_speech_bubble::after{content: "";position: absolute;bottom: -20px;right: 0;border: 20px solid transparent;border-left-color: #f9f9f9;z-index: -1;} #k_new_quick.active #k_speech_bubble{opacity: 1;} @media screen and (max-width: 1280px){ #k_speech_bubble{width: 235px;height: 50px;right: 75%;} #k_speech_bubble p{line-height: 48px;} @keyframes speech_bubble{ from{top: -85px;} to{top: -100px;} } } @media screen and (max-width: 760px){ #k_speech_bubble{display: none !important;}/*모바일일때 강제 제거*/ } /*오른쪽 퀵버튼 새로운 new 2020/10/30*/ #k_new_quick2{position: fixed;top: 50%;right: 1%;transform: translateY(-50%);z-index: 1100;} #k_new_quick2 ul li{width: 50px;height: 50px;border-radius: 50px;margin: 12px 0;position: relative;} #k_new_quick2 ul li figure{width: inherit;height: inherit;position: relative;} #k_new_quick2 ul li figure a{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;} #k_new_quick2 ul li.k_new_quick_01{background: var(--color-basic);color: #FFF;text-align: center;font-weight: 500;} #k_new_quick2 ul li.k_new_quick_02{background: var(--color-basic);} #k_new_quick2 ul li.k_new_quick_03{background: #ffe812;} #k_new_quick2 ul li.k_new_quick_04{background: #2ac50f;} #k_new_quick2 ul li.k_new_quick_05{background: #222;color: #FFF;text-align: center;font-weight: bold;} #k_new_quick2 ul li figure object, #k_new_quick2 ul li figure a i{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);} #k_new_quick2 ul li figure object{height: 25px;} #k_new_quick2 ul li figure a i{font-size: 1.3rem;} #k_new_quick2 ul li h4{position: absolute;top: 50%;right: -200px;transform: translateY(-50%);background: #222;color: #FFF;font-weight: bold;font-size: 0.9rem;padding: 12px 25px;white-space: nowrap;border-radius: 50px;transition: right 0.5s;z-index: -2;} #k_new_quick2 ul li:hover h4{right: 125%;} /*오른쪽 퀵메뉴 빠른상담 2020/10/30*/ #k_new_quick_inn, #k_new_quick_inn2{width: 80px;height: 80px;} #k_new_quick_inn:hover, #k_new_quick_inn2:hover{transform: translateX(0) !important;} #k_new_quick_inn a, #k_new_quick_inn2 a{position: relative;} #k_new_quick_inn a h5, #k_new_quick_inn2 a h5 {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);font-size: 1.1rem;font-weight: bold;color: #FFF;} #k_new_quick_inn a span, #k_new_quick_inn2 a span{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);font-size: 1.1rem;font-weight: bold;color: #FFF;line-height:24px} .k_new_quick_inn3 a span {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);font-size: 1.1rem;font-weight: bold;color: #FFF;line-height:24px} .k_new_quick_inn3 a h5 {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);font-size: 1.1rem;font-weight: bold;color: #FFF;} @media screen and (max-width: 1280px){ #k_new_quick_inn, #k_new_quick_inn2{width: 50px;height: 50px;} #k_new_quick_inn a h5, #k_new_quick_inn2 a h5{font-size: 16px;} #k_new_quick_inn a span, #k_new_quick_inn2 a span{font-size: 16px;line-height:20px} } @media screen and (max-width: 760px){ } @media screen and (max-width: 1px){ #k_new_quick_inn, #k_new_quick_inn2{float: right !important; } } /* 메인비주얼 영역 */ .b_sec01 {height:750px; font-family: 'Pretendard Variable';} .b_sec01 .b_inner{height:100%; position:relative;} .b_sec01 .b_mv-box{position:absolute; left:50%; top:53%; transform:translateY(-50%);} .b_sec01 .b_mv-box .b_mv-txt{color:#fff;} .b_sec01 .b_mv-box .b_mv-txt strong{font-size:2.7rem; line-height:1.2; font-weight: 400; text-align:left; padding:1.2rem 0;} .b_sec01 .b_mv-box .b_mv-txt strong{font-size:2.7rem; line-height:1.2; font-weight: 400; text-align:left; padding:1.2rem 0;} .b_sec01 .b_mv-box .b_mv-txt .b_bold{font-family: 'Pretendard Variable'; font-weight: 500;} .b_sec01 .b_mv-box .b_mv-txt p{font-size:1.2rem; opacity: 0.7; line-height:1.8;} .b_sec01 .b_mv-box .b_mv-btn{display: flex; margin-top:40px; flex-wrap:wrap;} .b_sec01 .b_mv-box .b_mv-btn .b_btns{border:1px solid #fff; border-radius: 30px; width:180px; height:50px; transition:all .3s;} .b_sec01 .b_mv-box .b_mv-btn .b_com-info{margin-right:20px;} .b_sec01 .b_mv-box .b_mv-btn .b_btns a{width:100%; height:100%; display: flex; align-items: center; justify-content: space-between; padding:0 15%;} .b_sec01 .b_mv-box .b_mv-btn .b_btns p{width:100%; height:100%; display: flex; align-items: center; justify-content: space-between; padding:0 15%;} .b_sec01 .b_mv-box .b_mv-btn .b_btns span{font-size: 1.063rem; color:#fff; font-weight: 500; } .b_sec01 .b_mv-box .b_mv-btn .b_btns:hover{background-color:#0066d4; border-color:#0066d4; transition:all .3s;} .b_sec01 .b_mv-box .b_mv-btn .b_btns:hover span{color:#fff;transition:all .3s;} .b_sec01 .b_mv-box .b_mv-txt .main_text_br {display:none;} .b_sec01 .b_mv-box .b_mv-btn .b_btns{background-color: var(--color-basic); border-color: var(--color-basic);} .b_sec01{position: relative; overflow: hidden;} .b_sec01 .swiper-wrapper{height: 100%;} .b_sec01 .swiper-wrapper .swiper-slide01 {height: 100%; background:url(/images/main/b_mv-img.jpg) no-repeat center/ cover; } .b_sec01 .swiper-wrapper .swiper-slide02 {height: 100%; background:url(/images/main/b_mv-img03.jpg) no-repeat center/ cover;} .b_sec01 .swiper-wrapper .swiper-slide03 {height: 100%; background:url(/images/main/b_mv-img04.jpg) no-repeat center/ cover;} .b_sec01 .swiper-slide .b_mv-box{ transform: translateY(-43%); opacity: 0; transition-delay: .5s; transition-duration: .7s; transition-property: transform, opacity; } .b_sec01 .swiper-slide-active .b_mv-box{transform: translateY(-50%); opacity: 1;} .b_sec01 .je_btns{width: 96%; max-width: 1480px; position: absolute; top: 50%; left: 0; right: 0; margin: auto; z-index: 1;} .b_sec01 .swiper-pagination{bottom: 85px; left: 15px;} .b_sec01 .swiper-pagination-bullet-active{background-color: #fff;} .b_sec01 .swiper-button-next,.b_sec01 .swiper-button-prev{color: #fff;} @media screen and (max-width : 1280px) { .b_sec01 .swiper-pagination{bottom: 40px;} .b_sec01 .swiper-slide .b_mv-box{ transform: translateY(-43%); opacity: 0; /* transition-delay: 1.3s;*/ /* transition-duration: 1s;*/ transition-property: transform, opacity; } .b_sec01 .swiper-slide-active .b_mv-box{transform: translateY(-50%); opacity: 1;} } @media screen and (max-width : 960px){ .b_sec01 .swiper-slide .b_mv-box{ left:40%; transform: translateY(-43%); opacity: 0; /* transition-delay: 1.3s;*/ /* transition-duration: 1s;*/ transition-property: transform, opacity; } .b_sec01 .swiper-slide-active .b_mv-box{transform: translateY(-50%); left:40%; opacity: 1;} .b_sec01 .swiper-pagination{left: 0;} .b_sec01 .b_mv-box .b_mv-txt strong{font-size:1.8rem; font-weight: 200; text-align:left; padding:1.2rem 0;} .b_sec01 .b_mv-box .b_mv-txt strong{font-size:1.8rem; font-weight: 200; text-align:left; padding:1.2rem 0;} .b_sec01 .b_mv-box .b_mv-txt .b_bold{font-weight: 500; font-size:2rem;} .b_sec01 .b_mv-box .b_mv-txt p{font-size:1.2rem; opacity: 0.7; line-height:1.8;} } @media screen and (max-width : 767px){ .b_sec01 .swiper-slide .b_mv-box{ margin:0 auto; left:15%; transform: translateY(-43%); opacity: 0; /* transition-delay: 1.3s;*/ /* transition-duration: 1s;*/ transition-property: transform, opacity; } .b_sec01 .swiper-slide-active .b_mv-box{transform: translateY(-50%); left:15%; opacity: 1;} .b_sec01 .b_mv-box .b_mv-btn{justify-content: center;} .b_sec01 .swiper-button-next:after, .b_sec01 .swiper-button-prev:after{font-size: 20px;} /* .b_sec01 .swiper-slide-active .b_mv-box{top:53%; left:12%; transform: translateY(-53%);opacity: 1;width:80%;} */ .b_sec01 .b_mv-box .b_mv-txt > strong{font-size:1rem; font-weight: 200; text-align:left; padding:1.2rem 0;} .b_sec01 .b_mv-box .b_mv-txt > strong{font-size:1rem; font-weight: 200; text-align:left; padding:1.2rem 0;} .b_sec01 .b_mv-box .b_mv-txt .main_text_br {display:block;} /* .b_sec01 .b_mv-box .b_mv-txt .b_bold{font-weight: 500;}*/ .b_sec01 .b_mv-box .b_mv-txt p{font-size:1.2rem; opacity: 0.7; line-height:1.8;} .b_sec01 .b_mv-box .b_mv-btn .b_btns { margin-top:-10px;} } /* portfolio_price */ .portfolio_price{width: 100%; position:relative; } .portfolio_price:before{content:''; width:100%; background-color:#f5fbff; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:-1; } .portfolio_price_con{ width: 100%; display: flex; justify-content: space-between; } .portfolio_price_con .portfolio_price_box{margin-left:-1px;} .portfolio_price_con > div{ border: 1px solid #ededed; width:100%; padding: 30px 0; background-color:#fff; } .portfolio_price_box {margin-bottom:20px;} .portfolio_price_box > h1, h2, h3, p{text-align: center;} .portfolio_price_box > h1 {color: #333; font-size: 2.2rem; } .portfolio_price_box > h2 {font-size: 2rem; font-weight:600; padding-bottom: 15px;} .portfolio_price_box > h3 {font-size: 2rem; font-weight:600; padding-bottom: 15px;} .portfolio_price_box > p {color: #666; text-align:center;} .portfolio_price_box > .port_text{ padding: 1rem 0; white-space:nowrap; } .portfolio_price_box > .port_text > p{ font-size: 18px; line-height: 2rem; padding:10px 0; text-align:center; } .portfolio_price_box strong{font-weight: bold;} .inquiry_btn{ width:150px; height:40px; border:1px solid #ededed; text-align:center; cursor:pointer; position:relative; overflow:hidden; margin: 0 auto; } .inquiry_btn a{ text-align: center; display: block; font-size: 1rem; font-weight: 700; color:#333; line-height:55px; transition:all .5s; z-index:2; position:relative; top: 50%; left: 50%; transform: translate(-50%, -50%); } .inquiry_left{ width:150px; height: 42px; top: -5px; left:-155px; background: var(--color-basic); border: 1px solid var(--color-basic); position:absolute; transition:all .5s; z-index:1; } .inquiry_btn:hover .inquiry_left{ left:0; } .inquiry_btn:hover a{ color:#fff; } .portfolio_icon{ background-color: #f6f6f6; width: 10rem; height: 10rem; margin: 20px auto 0; border-radius: 50%; position: relative; } .portfolio_icon img{ display: block; margin: 0 auto; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width:50px; } .portfolio_info{ width: 70%; margin: 30px auto; } .portfolio_info .portfolio_info_flex{ display: flex; justify-content: flex-start; } .portfolio_info .portfolio_info_flex > strong{ font-size: 16px; font-weight: 700; width: 100px; max-width: 100%; padding: 5px 0; } .portfolio_info .portfolio_info_flex > span{ font-size: 16px; color: #666; width: 100%; max-width: 100%; padding: 5px 0; } .portfolio_price_box .portfolio_btn{ width: 250px; max-width: 100%; height: 50px; line-height: 2.5rem; display: block; background-color: var(--color-basic); color: #fff; border: 2px solid var(--color-basic); margin: 0 auto; margin-top: 25px; border-radius: 30px; font-weight: 700; font-size: 1.1rem; cursor: pointer; transition: all .2s; } .portfolio_price_box .portfolio_btn:hover{ background-color: #fff; color: var(--color-basic); border: 2px solid var(--color-basic); } @media screen and (max-width:1280px) { .portfolio_price_con{ display: flex; justify-content: center; flex-wrap: wrap; } .portfolio_price_con > div{ width: 50%; } .portfolio_info{ width: 65%; padding: 0 20px; margin: 0 auto; } .inquiry_btn{margin-bottom:30px;} } @media screen and (max-width:760px) { .portfolio_price_con{max-width:100%; } .portfolio_price_con > div{width: 100%;;} } @media screen and (max-width:460px) { .portfolio_price_con > div{ width: 100%; } .portfolio_info{padding: 5px 0;} } /* progress_tab */ .progress_tab { width: 100%; } .progress_tab_con{ max-width: 100%; margin-bottom: 150px; } .progress_tab_con > h1{padding-bottom: 40px;} .progress_tab_con > h1,h2 .homepage_br {display:none;} .progress_tab_con > h1,h2{ text-align: center; } .progress_tab_con > h1,h2 strong{ font-weight:bold; } .progress_tab_con .progress_main{ display: flex; justify-content: space-between; border:1px solid #ededed; margin-bottom:-1px; margin-top:-1px; border-radius: 30px 30px 0 0; overflow:hidden; background-color: #f5fbff; } .progress_tab_con .progress_main > li{ width: 100%; margin: 0 auto; padding: 20px 10px; cursor: pointer; text-align: center; border-bottom:1px solid #ededed; /* border-right:1px solid #ededed;*/ margin-bottom:-1px; margin-right:-1px; } .progress_tab_con .progress_main > li:last-child{border-right:none;} .progress_tab_con .progress_main > li > a{color: #555; font-weight:bold;} .progress_tab_con .progress_main > li.on{ background-color: var(--color-basic); font-weight: bold; color: #fff; transition: all .3s; border-radius: 30px 30px 0 0; } .progress_tab_con .progress_main > li.on a{color: #fff;} .progress_sub{ clear: both; background-color: #fff; border: 1px solid #ededed; margin-left:-1px; padding: 40px; text-align: left; } .progress_tab_con .progress_sub > div > strong,p{text-align: left;} .progress_tab_con .progress_sub > div{display: none;} .progress_tab_con .progress_sub > div.on{display: block;} .progress_tab_con .progress_sub > div > strong { margin-bottom:20px; font-size:1.5rem; font-weight:bold; text-align: center; } .progress_tab_con .progress_sub > div > p { line-height:2rem; } @media screen and (max-width:1280px) { .progress_tab .progress_tab_con {padding:0 20px; } .progress_tab_con .progress_main{ display: flex; justify-content: center; flex-wrap: wrap; } .progress_tab_con .progress_main > li{ width: 25%; } } @media screen and (max-width:760px) { .progress_tab_con > h1 .homepage_br {display:block;} .progress_tab_con .progress_main{ /* width: 100%; */ justify-content:center; flex-wrap: wrap } .progress_tab_con .progress_main > li{ width: 50%; } .progress_tab_con > h1,strong{ font-size: 1.8rem; text-align: center; } .progress_tab_con .progress_sub > div > strong { font-size:20px; } } @media screen and (max-width:480px) { .progress_tab_con .progress_main{ justify-content:center; flex-wrap: wrap } .progress_tab_con .progress_main > li:last-child{border-bottom:none;} .progress_tab_con .progress_main > li{ border-bottom:1px solid #ededed; width:50%; } .progress_tab_con > h1, strong{ font-size: 2rem; } } /* ------------------- 카테고리박스 */ .category_tabs{padding:30px 0;max-width: 1400px;margin: 0 auto;} .category_tab{ width:100%; } .category_tab_con{display:flex; border:1px solid #ededed; margin-bottom: 20px;} .category_tab_con .category_main { border-bottom:1px solid #fff; /* margin-left:-1px;*/ background-color: var(--color-basic); width:180px; max-width:100%; height:3.5rem; line-height:3.5rem; } .category_tab_con .category_main h3{ padding-top:17px; font-size:1rem; color:#fff; text-align:center; } .category_tab_con .category_main a{display:block; font-weight:500;} .category_tab_con .category_sub{width:100%;} .category_tab_con .category_sub ul { display:flex; justify-content:space-between; /* flex-wrap: wrap;*/ cursor:pointer; margin-bottom:-1px; padding: 0 10px; /* border-bottom:1px solid #fafafa;*/ } .category_tab_con .category_sub ul li{ width:100%; text-align:center; height:3.5rem; line-height:3.5rem; font-size:1rem; } .category_tab_con .category_sub ul li a{display:block;} @media screen and (max-width:1280px) { .category_tabs {padding-top:30px;} .category_tab_con {display:block;} .category_tab_con .category_main { width:100%; } .category_tab_con .category_sub{ width:100%; } .category_tab_con .category_sub ul li a{ font-size:.6rem; } } @media screen and (max-width:720px) { .category_tab_con .category_sub ul { /* justify-content:center;*/ flex-wrap: wrap; } .category_tab_con .category_sub ul li{width:32%; } } @media screen and (max-width:500px) { .category_tab_con .category_sub ul li a{ font-size:.7rem; } } /* ------------------- 포트폴리오 이미지형박스영역 */ .portfolio_tab { width: 100%; } .portfolio_tab .portfolio_tab_con{ width: 1400px; max-width: 100%; margin: 0 auto; } .portfolio_tab_con .portfolio_main{ display: flex; justify-content: space-between; width: 70%; margin: 0 auto; } .portfolio_tab_con .portfolio_main > li{ width: 100%; margin: 0 auto; cursor: pointer; text-align: center; background-color: #fff; border: 1px solid #ededed; margin-left:-1px; } .portfolio_tab_con .portfolio_main > li > a{ display: block;padding: 20px 10px; } .portfolio_tab_con .portfolio_main > li.on{ background-color: var(--color-basic); font-weight: bold; color: #fff; transition: all .3s; } .portfolio_tab_con .portfolio_main > li.on a{color: #fff;} .portfolio_sub {background-color: #fff; text-align: left;} .portfolio_tab_con h2{font-size:50px} .portfolio_tab_con strong{font-size:50px; display: block;} .portfolio_tab_con .portfolio_sub > div > h2,p{text-align: left; display: block;} .portfolio_tab_con .portfolio_sub > div{display: none;} .portfolio_tab_con .portfolio_sub > div.on{display: block;} .portfolio_sub_con {margin:0 auto;} .portfolio_sub_con .port_tab_box { width:100%; margin:0 auto; display: flex; justify-content: space-between; } .portfolio_sub_con .port_tab_box > .port_tab {width:25%; padding:20px 10px 20px 0px;} .portfolio_sub_con .port_tab_box .port_tab_btn{ width:100%; margin:0 auto; display: flex; justify-content:center; } .portfolio_sub_con .port_tab_box .port_tab .port_tab_img::after{ content:""; background-color:rgba(0,0,0,.7); position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; transition:all .2s; } .port_tab .port_tab_img{ position:relative; width:100%; height:420px; margin:0 auto; overflow:hidden; box-shadow:2px 2px 5px #ededed; transition:all .2s; } .port_tab .port_tab_img img{ max-width:100%; height:auto; object-fit:cover display:block; transition:all .7s; } .port_tab .port_tab_img:hover img { transform: scale(1.05); transition:all .7s; } .portfolio_sub_con .port_tab_box .port_tab .port_tab_img:hover::after{opacity:1;transition:all .5s;} .portfolio_sub_con .port_tab_box .port_tab .port_tab_img:hover .port_tab_btn{opacity:1;} .portfolio_sub_con .port_tab_box .port_tab_btn { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); transition:all .2s; opacity:0; z-index:1; } .portfolio_sub_con .port_tab_box .port_tab_btn > div{ margin:0 5px; } .port_tab_box .port_tab_btn .port_tab_btn01:hover{opacity:1;} .port_tab_box .port_tab_btn .port_tab_btn01{ background-color:#fff; color:#333; width:150px; height:40px; line-height:40px; text-align:center; border-radius:3px; opacity:.9; transition:all .2s; } .port_tab_box .port_tab_btn .port_tab_btn01 > a{ display:block; font-size:1rem; font-weight:bold; } .port_tab_box .port_tab_btn .port_tab_btn01 > a:hover{ color:#000; } .port_tab_box .port_tab_btn .port_tab_btn02:hover{opacity:1;} .port_tab_box .port_tab_btn .port_tab_btn02{ background-color: var(--color-basic); color:#fff; width:100px; height:40px; line-height:40px; text-align:center; border-radius:3px; opacity:.9; transition:all .2s; } .port_tab_box .port_tab_btn .port_tab_btn02 > a{ display:block; font-size:1rem; font-weight:bold; color:#fff; } .port_tab_box .port_tab_btn .port_tab_btn03:hover{opacity:1;} .port_tab_box .port_tab_btn .port_tab_btn03{ position:absolute; top:73px; left:50%; transform:translate(-51.8%,-51.8%); transition:all .2s; background-color: var(--color-basic); color:#fff; width:260px; height:40px; line-height:40px; text-align:center; border-radius:3px; opacity:.9; transition:all .2s; } .port_tab_box .port_tab_btn .port_tab_btn03 > a{ display:block; font-size:1rem; font-weight:bold; color:#fff; } .port_tab_box .port_tab > h2{ font-size:1rem; font-weight:bold; } .portfolio_sub_con .port_tab_box .port_tab p{text-align: center; font-size: 18px; font-weight:500; ;} @media screen and (max-width:1400px) { .portfolio_sub_con .port_tab_box .port_tab_img{width:100%; height:23rem;} } @media screen and (max-width:1280px) { .portfolio_sub_con .port_tab_box{ justify-content:center; flex-wrap: wrap; } .portfolio_sub_con .port_tab_box .port_tab_img{width:100%; height:40rem;} .portfolio_sub_con .port_tab_box .port_tab_img img{width:100%; height:40rem object-fit:cover; } .portfolio_sub_con .port_tab_box .port_tab {width:49.9%; padding:20px 10px 20px 0px; margin-bottom:30px;} } @media screen and (max-width:1023px) { .portfolio_sub_con .port_tab_box .port_tab_img{width:100%; height:28rem;} } @media screen and (max-width:767px) { .portfolio_tab_con .portfolio_main{width:100%; padding:0 0px;} .portfolio_tab_con .portfolio_main{ flex-wrap:wrap; } .portfolio_tab_con h2{font-size:36px} .portfolio_tab_con strong{font-size:36px; display: block;} .portfolio_tab_con .portfolio_main > li{ width:50%; } .portfolio_tab_con .portfolio_main > li a{ font-size:18px; font-weight:500; } .portfolio_tab_con .portfolio_main > li:nth-of-type(2){border-left:none;} .portfolio_tab_con .portfolio_main > li:nth-of-type(3){border-top:none;} .portfolio_tab_con .portfolio_main > li:nth-of-type(4){border-top:none;} .portfolio_tab_con .portfolio_main > li:nth-of-type(4){border-left:none;} .portfolio_sub_con .port_tab_box .port_tab p{text-align: center; font-weight:500; white-space: nowrap; overflow:hidden;} .portfolio_sub_con .port_tab_box .port_tab{width:100%; padding:30px 0px; margin-bottom:-20px;} .port_tab .port_tab_img{height:420px;} } /* 풋터 영역 */ .b_footer{background-color: #262626; padding:50px 0;} .b_footer .b_inner{display: flex; align-items: center;} .b_footer .b_ft-logo{margin-right:70px; opacity:.4;} .b_footer .b_ft-address{color:#fff; font-size:0.938rem; line-height: 1.7; opacity:.4;} .b_footer .b_ft-address i{margin:0 7px ;} /* #b_header .b_toggle-btn{width:27px; height:20px; display: none;} #b_header .b_toggle-btn button{display: block; width:100%; height:100%; position:relative;} #b_header .b_toggle-btn span{display: inline-block; width:100%; height:2px; background-color: #fff; position:absolute; left:0;} #b_header .b_toggle-btn span.b_top{top:0;} #b_header .b_toggle-btn span.b_mid{top:9px;} #b_header .b_toggle-btn span.b_bot{bottom:0;} */ #b_header .b_toggle-btn{width:25px; height:25px; margin-left:25px;margin-bottom:5px; } #b_header .b_toggle-btn button{display: flex; width:100%; height:100%; flex-direction: column; align-items: center; justify-content: center;} #b_header .b_toggle-btn span{display: block; background-color: #fff; width:100%; height:2px; } #b_header .b_toggle-btn .b_top{transform:translateY(-3px); transition:all .2s;} #b_header .b_toggle-btn .b_mid{transform:translateY(3px); transition:all .2s;} #b_header .b_toggle-btn .b_bot{transform:translateY(9px); transition:all .2s;} #b_header .b_toggle-btn:hover .b_top{transform:translateY(2px); transition:all .2s;} #b_header .b_toggle-btn:hover .b_bot{transform:translateY(0); transition:all .2s;} #b_toggle-menu{font-family: 'Pretendard Variable'; max-width:360px; width:100%; height:100%; background-color: #111; position:fixed; right:0; top:0; z-index:90; transform:translateX(500px); transition:all .3s; } #b_toggle-menu a{ color:#fff; } #b_toggle-menu.on{transform:translateX(0px); transition:all .3s; } #b_toggle-menu .b_m_inner{width:85%; margin:0 auto; height:100%; } #b_toggle-menu .b_gnb{margin-top:120px; width:100%; } #b_toggle-menu .b_gnb li{ font-size:1.125rem; font-weight: 500; color:#fff; border-bottom: 1px solid rgba(255,255,255,.2); width:100%;transition:all .2s;} #b_toggle-menu .b_gnb li .b_blue{color:#0d8ef2;} #b_toggle-menu .b_gnb li a{width:100%; height:100%; display: block; padding:15px 0;} #b_toggle-menu .b_gnb li > ul{display:none;} #b_toggle-menu .b_gnb li > ul > li{ border-bottom:none;} #b_toggle-menu .b_gnb li > ul > li > a{font-size:16px; padding-left:20px;} #b_toggle-menu .b_gnb li:hover{border-color:#fff; transition:all .2s;} #b_toggle-menu .b_m_close-btn{width:45px ; height:45px; position:absolute; right:25px; top:30px;} #b_toggle-menu .b_m_close-btn button{display: flex; width:100%; height:100%;flex-direction: column; align-items: center; justify-content: center;} #b_toggle-menu .b_m_close-btn span{display: block; background-color: #fff; width:100%; height:2px;} #b_toggle-menu .b_m_close-btn .b_fst{transform:translateY(1px);} #b_toggle-menu .b_m_close-btn:hover .b_fst{transform:translateY(-3px); transition:all .2s; height:2px;} #b_toggle-menu .b_m_close-btn:hover .b_snd{transform:translateY(3px); transition:all .2s; height:2px;} #b_toggle-menu .b_m_close-btn2{width:45px ; height:45px; position:absolute; right:25px; top:30px;} #b_toggle-menu .b_m_close-btn2 span{position: absolute;top: 24px;left: 12.5px;width: 35px;height: 2px;background-color: #fff;transition: transform 0.2s;} #b_toggle-menu .b_m_close-btn2 span:nth-child(1){transform: rotate(45deg);} #b_toggle-menu .b_m_close-btn2 span:nth-child(2){transform: rotate(-45deg);} #b_toggle-menu .b_m_close-btn2:hover span{transform: rotate(0);} @media screen and (max-width: 1280px){ #b_header{height:60px;} #b_header .b_gnb{display: none;} #b_header .b_toggle-btn{display: block;} #b_header .b_logo img{width:120px; height: auto;} .b_sec01{height:550px;} .b_sec01{background-position-x: 10%;} /* .b_sec01 .b_mv-box {left:20%;}*/ .b_sec01 .b_mv-box{display: flex; flex-direction: column; align-items: center; left:0; transform:unset; width: 100%;} .b_sec01 .b_mv-box .b_mv-txt h1{font-size: 2.5rem; text-align:center; } .b_sec01 .b_mv-box .b_mv-txt h2{font-size: 2.5rem; text-align:center; } .b_sec01 .b_mv-box .b_mv-txt p{ text-align:center; } .b_sections .b_tit-txt{font-size: 2.5rem;} .b_sec02{height:550px;} } @media screen and (max-width: 960px){ .b_sec01 .swiper-slide .b_mv-box{left:0;} .b_sec01 .b_mv-box .b_mv-txt p{font-size: 1.125rem;} .b_sec01 .b_mv-box .b_mv-btn .b_btns{width: 165px; height: 42px;} .b_sec01 .b_mv-box .b_mv-btn .b_com-info{margin-right: 10px;} } @media screen and (max-width: 930px){ .b_sec03 .b_tap-box .b_tabs li{font-size: 0.813rem;} /* .b_sec03 .b_tap-box .b_tabs li{font-size: 0.813rem; width: 20%; border-radius: 10px; margin: 0 5px 1% 0;} .b_sec03 .b_tap-box .b_tabs{margin-bottom: 20px; flex-wrap: wrap; justify-content: flex-start;} */ .b_sec05 .b_write-box .b_f_box{width:90%; } .b_sec05 .b_write-box .b_f_box .b_wrapper .b_label{width:31%; } .b_sec05 .b_write-box .b_f_box .b_category .b_label{width:15%;} .b_sec05 .b_write-box .b_f_box .b_price .b_label{width:15%; } .b_sec06 .b_left-box{border-right:0;} .b_sec06 .b_left-box, .b_sec06 .b_right-box{width:100%} .b_sec06 .b_right-box .b_btn-list{width:100%; margin-left:0; margin-top:50px;} .b_footer .b_inner{flex-direction: column;} .b_footer .b_ft-logo{margin-right:0; margin-bottom:20px;} .b_footer .b_ft-address{text-align: center;} } @media screen and (max-width: 860px){ .b_sec04 .b_list-box ul li .b_list-txt h4 {font-size: 1.4rem;} } @media screen and (max-width: 820px){ .b_sec05 .b_write-box .b_f_box .b_category .b_label{width:100%; margin-bottom:15px;} .b_sec05 .b_write-box .b_f_box .b_price .b_label{width:100%; margin-bottom:15px;} /* .b_sec05 .b_write-box .b_f_box .b_wrapper .b_check{width: 100%;} */ .b_sec05 .b_write-box .b_f_box .b_wrapper .b_chk-list{margin-bottom: 5px;} } @media screen and (max-width: 760px){ .b_sec03,.b_sec04,.b_sec05,.b_sec07{padding:80px 0;} .b_sec03 .b_tap-box .b_tab-list .b_tab-cont .b_img-cont{width:100%; } .b_sec03 .b_tap-box .b_tab-list .b_tab-cont .b_txt-box{margin-left: 0px; text-align: center; width: 100%; margin-top:30px;} .b_sec03 .b_tap-box .b_tabs li{width: 15%; border-radius: 10px; margin: 0 1% 5px 0;} .b_sec03 .b_tap-box .b_tabs{margin-bottom: 10px; flex-wrap: wrap; justify-content: flex-start;} .b_sec04 .b_list-box ul li {width: 48%;} .b_sec05 .b_write-box .b_f_box .b_wrapper{width:100%; flex-wrap: wrap;} .b_sec05 .b_write-box .b_f_box .b_wrapper .b_label{width:19%} .b_sec05 .b_write-box .b_f_box .b_text-box input{width: 80%;} .b_sec05 .b_write-box .b_btn-box .b_top-box{flex-wrap:wrap; } .b_sec05 .b_write-box .b_btn-box .b_top-box label{display: flex; align-items: center;} .b_sec05 .b_write-box .b_btn-box .b_top-box .b_agree{width:100%; } .b_sec05 .b_write-box .b_btn-box .b_top-box .b_request{width:100%; margin-top: 15px;} .b_sec05 .b_write-box .b_btn-box .b_top-box .b_request p{display: flex; align-items: center; width: 50%;} .b_sec05 .b_write-box .b_btn-box .b_top-box .b_request .b_rqs-btn{width: 50%; text-align: center;} .b_sec05 .b_write-box{padding: 30px 0;} } .b_hide-04{display: none;} .b_hide-09{display: none;} @media screen and (max-width: 630px){ .b_hide-04{display: block;} .b_hide-09{display: block;;} } .b_hide-05{display: none;} .b_hide-07{display: none;} .b_hide-10{display: none;} .b_hide-11{display: none;} @media screen and (max-width: 500px){ .b_hide-05{display: block;} .b_sec02 .b_cont-box .b_go-box{right:50%; transform: translateX(50%);} .b_sec02 .b_cont-box .b_go-box p{width:300px; margin-left: -45px;} .b_sec02 .b_cont-box .b_go-box span{display: flex; padding:0; width: 85px; height: 50px; justify-content: center; align-items: center;} .b_sec03 .b_tap-box .b_tabs li{width: 19%;} .b_sec05 .b_write-box .b_f_box .b_wrapper .b_chk-list{margin-right:15px;} .b_hide-07{display: block;} .b_hide-10{display: block;} .b_none{display: none;} .b_hide-12{display: none;} .b_hide-11{display: block;} } .b_hide-06{display: none;} @media screen and (max-width: 460px){ .b_sec04 .b_tit-box{margin-bottom:20px;} .b_sec04 .b_list-box ul li {width: 100%;} .b_hide-06{display: block;} .b_sec03 .b_tap-box .b_tab-list .b_tab-cont .b_txt-box p br{display: none;} } .b_hide-03{display: none;} @media screen and (max-width: 430px){ .b_hide-03{display: block;} .b_sec06 .b_right-box .b_btn-list li{width: 100%; margin-bottom: 20px;} } .b_hide-02{display: none;} .b_hide-08{display: none;} @media screen and (max-width: 400px){ .b_sec01 .b_mv-box .b_mv-btn .b_com-info{margin-bottom:10px;} .b_hide-01{display: none;} .b_hide-02{display: block;} .b_hide-07{display: none;} .b_hide-08{display: block;} } /*k_2section_06---------------------------------------------------*/ .b_motion{transform:translateY(25px); opacity:0; transition:transform 1s ease, opacity 1s;} .b_motion.active{transform:translateY(0); opacity:1;} /*footer*/ .k_footer{/*margin-bottom: 66px;*/;} .k_ft_con{width: 90%;max-width: 1500px;margin: 0 auto;} .k_ft_top{background-color: #222;height: 60px;} .k_ft_top h2{float: left;color: #fff;font-size: 1rem;font-weight: 400;letter-spacing: -0.045em;line-height: 60px;} .k_ft_top p{float: right;} .k_ft_top p span{display: inline-block;color: #FFF;font-size: 1rem;font-weight: 300;letter-spacing: -0.045em;line-height: 60px;margin-left: 50px;} .k_ft_top p span i{margin-right: 5px;} .k_ft_inner{background-color: #16181f;padding: 33px 0;} .k_ft_inner .k_ft_con{position: relative;} .k_ft_logo{float: left;} .k_ft_menu{float: right;} .k_ft_menu>ul>li{display: inline-block;} .k_ft_menu>ul>li>a{color: #999;font-size: 0.95rem;font-weight: 500;letter-spacing: -0.045em;margin-left: 15px;transition: color 0.2s;} .k_ft_menu>ul>li>a:hover{color: #ffff;} /*.k_ft_menu>ul>li:first-child>a{color: #d92620;font-weight: 600;}*/ .k_ft_menu>ul>li>ul{display: none;} .k_ft_info{color: rgba(255,255,255,0.75);font-size: 15px;font-weight: 300;letter-spacing: -0.045em;margin-top: 25px;line-height: 200%;padding-top: 25px;position: relative;} .k_ft_info::after{content: "";position: absolute;top: -1.5px;left: 0;width: 50px;height: 3px;background-color: #fff;} .k_ft_info i{margin-right: 20px;} .k_ft_info i b{color: rgba(255,255,255,0.65);font-weight: 500;} .k_ft_copy{margin-top: 25px;color: rgba(255,255,255,0.55);font-size: 15px;font-weight: 300;letter-spacing: -0.045em;margin-top: 25px;} .k_ft_add{position: absolute;bottom: 0;right: 0;} .k_ft_add a{padding: 8px 20px;display: inline-block;font-size: 13px;font-weight: bold;letter-spacing: -0.045em;color: #222;margin-left: 3px;border: 1px solid #eee;transition: all 0.2s;color: #FFF;} .k_ft_add a i{display: inline-block;margin-left: 8px;} .k_ft_add a:hover{background-color: var(--color-basic);border-color: var(--color-basic);color: #FFF;} @media screen and (max-width: 980px){ .k_ft_add{position: unset;display: block;} .k_ft_add a{margin-left: 0;margin-right: 3px;margin-top: 25px;} } @media screen and (max-width: 860px){ .k_ft_top h2{display: none;} .k_ft_top p span{margin-left: 25px;} } @media screen and (max-width: 760px){ /* .k_footer{margin-bottom: 50px;}*/ .k_ft_inner{padding: 33px 0 20px;} .k_ft_logo, .k_ft_menu{float: none;display: block;} /* .k_ft_logo{margin-bottom: 25px;}*/ .k_ft_logo img{display: block;} .k_ft_menu>ul>li>a{margin-left: 0;margin-right: 13px;} .k_ft_info, .k_ft_copy, .k_ft_add a{font-size: 12px;} } @media screen and (max-width: 460px){ .k_ft_menu>ul>li>a{margin-left: 0;margin-right: 9px;font-size: 11px;} .k_ft_info, .k_ft_copy, .k_ft_add a{font-size: 12px;} .k_ft_add a{margin-right: 2px;font-size: 11px;padding: 8px 13px;} .k_ft_top p{float: none;} .k_ft_top p span{margin-left: 0;} .k_ft_top p span:nth-child(2){display: none;} } .portfolio_sub{margin-bottom: 50px;} .b_more_btn{max-width:450px; width:94%; height:70px; background-color: var(--color-basic); margin:0 auto; color:#fff; border-radius:50px; transition:all .2s; border:2px solid var(--color-basic);} .b_more_btn a{display:flex; width:100%; height:100%; align-items:center; justify-content:center; font-size: 1.3rem; font-weight:600;color:#fff;} .b_more_btn:hover{border:2px solid var(--color-basic); color: var(--color-basic); transition:all .2s; background-color:#fff; } .b_more_btn:hover a{color: var(--color-basic);} /*popup privacy_olicy terms_service */ .k_pop_wrap{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.7);z-index: 999999;display: none;} .k_pop_inner{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 80%;max-width: 800px;background: #FFF;box-shadow: 5px 5px 13px rgba(0,0,0,0.3);padding: 40px;border-radius: 30px;} .pop_content{position: relative;} .pop_content h4{font-size: 1.3rem;font-weight: bold;letter-spacing: -0.045em;margin-bottom: 15px;padding-bottom: 15px;border-bottom: 1px solid #ddd;} .pop_content p{max-height: 350px;overflow-y: scroll;font-size: 14px; line-height: 1.4; word-break: keep-all;} .pop_content p i{display: block; word-break: keep-all;} .pop_content p i b{font-weight: 500;} .pop_close{position: absolute;top: 0;right: 0;width: 30px;height: 30px;} .pop_close span{position: absolute;top: 14px;left: 0;width: 100%;height: 2px;background: #222;transition: transform 0.3s;} .pop_close span:nth-child(1){transform: rotate(45deg);} .pop_close span:nth-child(2){transform: rotate(-45deg);} .pop_close:hover span{transform: rotate(0);} /*#k_pop_02 .pop_content h4{margin-bottom:0; }*/ /*견적문의 팝업*/ #k_question{position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 100%;height: 100%;max-width: 1200px;max-height: 850px;background: #fff;z-index: 1;overflow-y: scroll; border-radius:40px;} #k_question::-webkit-scrollbar{ width: 1px; background: transparent; } #k_question::-mo-scrollbar{ width: 1px; background: transparent; } #k_question::-ms-scrollbar{ width: 1px; background: transparent; } #k_question::-o-scrollbar{ width: 1px; background: transparent; } #k_question_pay{position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 100%;height: 100%;max-width: 800px;max-height: 400px;background: #fff;z-index: 1;overflow-y: scroll; border-radius:40px;} #k_question_pay::-webkit-scrollbar{ width: 1px; background: transparent; } #k_question_pay::-mo-scrollbar{ width: 1px; background: transparent; } #k_question_pay::-ms-scrollbar{ width: 1px; background: transparent; } #k_question_pay::-o-scrollbar{ width: 1px; background: transparent; } .k_qus_container{width: 90%;margin: 0 auto;} .k_que_tit{height: 65px;margin-top: 30px;} .k_que_tit .k_logo{width: 200px;float: left;} .b_cont_tit{font-size:2rem; font-weight:600; color: var(--color-basic); } #k_question .k_main_txt_00{color: #333;} #k_question_pay .k_main_txt_00{color: #333;} .k_que_close{float: right;width: 50px;height: 50px;position: relative;} .k_que_close span{position: absolute;top: 31px;left: 10px;width: 40px;height: 3px;background: #222;transition: transform 0.2s;} .k_que_close span:nth-child(1){transform: rotate(45deg);} .k_que_close span:nth-child(2){transform: rotate(-45deg);} .k_que_close:hover span{transform: rotate(0);} .k_que_close_pay{float: right;width: 50px;height: 50px;position: relative;} .k_que_close_pay span{position: absolute;top: 31px;left: 10px;width: 40px;height: 3px;background: #222;transition: transform 0.2s;} .k_que_close_pay span:nth-child(1){transform: rotate(45deg);} .k_que_close_pay span:nth-child(2){transform: rotate(-45deg);} .k_que_close_pay:hover span{transform: rotate(0);} .k_que_close_payout{float: right;width: 50px;height: 50px;position: relative;} .k_que_close_payout span{position: absolute;top: 31px;left: 10px;width: 40px;height: 3px;background: #222;transition: transform 0.2s;} .k_que_close_payout span:nth-child(1){transform: rotate(45deg);} .k_que_close_payout span:nth-child(2){transform: rotate(-45deg);} .k_que_close_payout:hover span{transform: rotate(0);} .k_que_inner{/*padding: 50px 0;*/width: 100%;margin: 0 auto;} .k_que_box_01{text-align: left;margin-top: 50px;} .k_que_box_01 strong{ display: inline-block; } .k_que_box_01 .k_main_tit{margin-bottom: 25px;} /*.k_que_box_01 .k_main_tit i{left: 50%;transform: translateX(-50%);}*/ .k_que_box_01 .k_main_txt{font-size: 18px;line-height: 1.5;font-weight: bold;letter-spacing: -0.045em;} .k_que_box_01 .k_que_info{padding-top:30px;} .k_que_box_01 .k_que_info i{display: block;margin-bottom: 10px;} .k_que_box_01 .k_que_info i span{color: var(--color-basic);display: block;} .k_que_box_02{width: 100%;margin: 0 auto;} .k_que_box_02 ul{} .k_que_box_02 ul li{float: left;width: 49%;position: relative;margin-bottom: 8px;} .k_que_box_02 ul li:nth-child(2n){margin-left: 2%;} .k_que_box_02 ul li.b_wid_100{width:100%; } .k_que_box_02 ul li input[type="text"]{display: block;width: 100%;height: 50px;padding: 0 13px;border-radius: unset;border: 1px solid #f1f1f1;background: #f9f9f9;transition: box-shadow 0.5s;font-size: 16px; border-radius:5px;} .k_que_box_02 ul li input[type="text"]:focus{outline: none;border: 1px solid #222;background: #fff;/*box-shadow: 5px 5px 8px rgba(0,0,0,0.1);*/} .k_que_box_02 ul li textarea{display: block;width: 100%;padding: 13px;border-radius: unset;border: 1px solid #f1f1f1;background: #f9f9f9;transition: box-shadow 0.5s;min-height: 150px;resize: none;font-size: 16px;border-radius:5px;} .k_que_box_02 ul li textarea::placeholder{color: #999;font-weight: 400;letter-spacing: -0.045em;font-size: 16px;} .k_que_box_02 ul li textarea:focus{outline: none;border: 1px solid #222;background: #f9f9f9;box-shadow: 5px 5px 8px rgba(0,0,0,0.1);} .k_que_box_02 .b_ul_01{margin-bottom:30px;} .k_que_box_02 ul li label{position: absolute;top: 0;left: 15px;height: 50px;line-height: 50px;color: #999;font-size: 1rem;font-weight: 400;letter-spacing: -0.045em;} .k_que_box_02 ul li label i{color: #d92620;} .k_que_box_02 h4{font-size: 1rem;font-weight: bold;letter-spacing: -0.045em;position: relative;margin-bottom: 15px;} .k_que_box_02 h4 span{background: #fff;position: relative;z-index: 1;padding-right: 13px;} .k_que_box_02 h4::after{content: "";position: absolute;top: 50%;left: 0;transform: translateY(-50%);width: 100%;height: 2px;background: #222;} .k_que_box_02 strong{ display: block; font-size: 1rem;font-weight: bold;letter-spacing: -0.045em;position: relative;margin-bottom: 10px;} .k_que_box_02 strong span{background: #fff;position: relative;z-index: 1;padding-right: 13px;} .k_que_box_02 strong::after{content: "";position: absolute;top: 50%;left: 0;transform: translateY(-50%);width: 100%;height: 2px;background: #222;} .k_que_box_02 ul li label strong{font-size:0; text-indent:-9999px;} .k_que_box_02_pay{width: 100%;margin: 0 auto;} .k_que_box_02_pay ul{} .k_que_box_02_pay ul li{float: left;width: 48%;position: relative;margin-bottom: 8px;} .k_que_box_02_pay ul li:nth-child(2n){margin-left: 2%;} .k_que_box_02_pay ul li.b_wid_100{width:100%; } .k_que_box_02_pay ul li input{display: block;width: 100%;height: 50px;padding: 0 13px;border-radius: unset;border: 1px solid #f1f1f1;background: #f9f9f9;transition: box-shadow 0.5s;font-size: 16px; border-radius:5px;} .k_que_box_02_pay ul li input:focus{outline: none;border: 1px solid #222;background: #fff;/*box-shadow: 5px 5px 8px rgba(0,0,0,0.1);*/} #k_question .k_list_w100{width: 100%;margin: 0;clear: both;} #k_question_pay .k_list_w100{width: 100%;margin: 0;clear: both;} .k_que_box_02_pay ul li textarea{display: block;width: 100%;padding: 13px;border-radius: unset;border: 1px solid #f1f1f1;background: #f9f9f9;transition: box-shadow 0.5s;min-height: 150px;resize: none;font-size: 16px;border-radius:5px;} .k_que_box_02_pay ul li textarea::placeholder{color: #999;font-weight: 400;letter-spacing: -0.045em;font-size: 16px;} .k_que_box_02_pay ul li textarea:focus{outline: none;border: 1px solid #222;background: #f9f9f9;box-shadow: 5px 5px 8px rgba(0,0,0,0.1);} .k_que_box_02_pay .b_ul_01{margin-bottom:30px;} .k_que_box_02_pay ul li label{position: absolute;top: 0;left: 15px;height: 50px;line-height: 50px;color: #999;font-size: 1rem;font-weight: 400;letter-spacing: -0.045em;} .k_que_box_02_pay ul li label i{color: #d92620;} #k_question .k_radio_check{margin-top: 15px;} #k_question .k_radio_check input{cursor: pointer;display: inline-block;width: 15px;height: 15px;} #k_question .k_radio_check label{font-size: 1rem;font-weight: 500;letter-spacing: -0.065em;padding-left: 5px;color: #777;height: auto;line-height: 100%;position: unset;position: static;} #k_question .k_radio_check label a{padding-left: 13px;} .k_que_box_02_pay h4{font-size: 1rem;font-weight: bold;letter-spacing: -0.045em;position: relative;margin-bottom: 15px;} .k_que_box_02_pay h4 span{background: #fff;position: relative;z-index: 1;padding-right: 13px;} .k_que_box_02_pay h4::after{content: "";position: absolute;top: 50%;left: 0;transform: translateY(-50%);width: 100%;height: 2px;background: #222;} /*견적문의수정CSS_2020/10/30*/ .k_que_box_01, .k_que_box_02{float: left;width: 47.5%;} .k_que_box_01{margin-right: 5%;} #k_question_bg{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.7);z-index: 91;display: none;} #k_question_bg_pay{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.7);z-index: 999999;display: none;} #k_question_bg_payout{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.7);z-index: 999999;display: none;} .k_question_dummy{position: absolute;top: 0;left: 0;width: 100%;height: 100%;} @media screen and (max-width: 760px){ } /*닫기버튼추가*/ .k_qus_btn_wrap{} .k_qus_btn_wrap button, .k_form_submit_00{display: inline-block;text-align: center;width: 225px;border: none;height: 44px;line-height: 41px;font-weight: bold;font-size: 1.1rem;letter-spacing: -0.045em; border: 2px solid #222; transition: all 0.2s;cursor: pointer;margin-right: 6px;} .k_form_submit_00{background: var(--color-basic);color: #FFF;border-color: var(--color-basic);} .k_qus_btn_wrap button:hover, .k_form_submit_00:hover{background: #222;border-color: #222;color: #FFF;} .payout_close {display: inline-block;text-align: center;width: 225px;border: none;height: 44px;line-height: 38px;font-weight: bold;font-size: 1.1rem;letter-spacing: -0.045em; border: 2px solid #222; transition: all 0.2s;cursor: pointer;margin-right: 6px;} .payout_close a:hover, .payout_close:hover{background: #222;border-color: #222;color: #FFF;} /*좌우분할*/ /*.k_que_box_02_01, .k_que_box_02_02, .k_que_box_02_03{padding: 15px;} .k_que_box_02_01, .k_que_box_02_02{float: left;width: 50%;} .k_que_box_02_03{clear: both;}*/ .k_que_box_02_03 ul li{float: none;width: 100%;} .k_que_box_02_03 ul li .k_radio_check{text-align: center;} .k_que_box_02_03 ul li .k_radio_check *{display: inline-block;position: unset;position: relative;} .k_que_box_02_01:hover h4, .k_que_box_02_02:hover h4{color: #d92620;} .k_que_box_02_01:hover h4::after, .k_que_box_02_02:hover h4::after{background: #d92620;} .k_que_box_02_01:hover strong, .k_que_box_02_02:hover strong{color: #d92620;} .k_que_box_02_01:hover strong::after, .k_que_box_02_02:hover strong::after{background: #d92620;} @media screen and (max-width: 1500px){ #k_question{width: 80%;height: 80%;} #k_question_pay{width: 80%;height: 80%;} .k_que_inner{padding:50px 0;} .k_que_box_01, .k_que_box_02{float: none;width: 100%;margin: 0;} .k_que_box_01{margin-bottom: 50px;} .k_qus_btn_wrap {text-align: center;} } @media screen and (max-width: 1080px){ #k_question .k_main_txt_00{text-align:center;} #k_question_pay .k_main_txt_00{text-align:center;} .k_que_box_01 .k_que_info{text-align:center;} } @media screen and (max-width: 830px){ #k_question{width: 100%;height: 100%;} #k_question_pay{width: 100%;height: 100%;} .k_qus_container{width: 80%;} } @media screen and (max-width: 760px){ #k_question{border: 10px solid #222;} #k_question_pay{border: 10px solid #222;} .k_que_box_01 {margin-top:10px} .k_que_box_01 .k_main_txt{font-size: 16px;} .k_que_inner{padding:10px 0;} .k_que_box_02_01, .k_que_box_02_02{float: none;width: 100%;} .k_que_box_02_01, .k_que_box_02_02, .k_que_box_02_03{padding: 0;} .k_que_box_02_01{margin-bottom: 25px;} .k_que_box_02{margin-top: 25px;} #k_question .k_que_box_02 ul li{float: none;width: 100%;margin: 0;margin-bottom: 13px;} #k_question_pay .k_que_box_02 ul li{float: none;width: 100%;margin: 0;margin-bottom: 13px;} .k_que_box_02_03 ul li .k_radio_check{text-align: left;} .k_qus_btn_wrap button, .k_form_submit_00{width: 45%;height: 40px;line-height: 36px;} .k_que_box_02 ul li input::placeholder{font-size:0.938rem;} .k_que_box_02 ul li textarea::placeholder{font-size:0.938rem;} } .b_banner{width:100%; background:url(/images/skin_ebizkorea/b_banner.jpg) no-repeat center / cover;} .b_banner .b_inner{display:flex; flex-direction:column; align-items:center; padding:100px 0;} .b_banner .b_inq_txt{text-align:center; } .b_banner .b_inq_txt span{font-size:1rem; text-transform:uppercase; color: var(--color-basic); font-weight:600; letter-spacing:2px;} .b_banner .b_inq_txt p{font-size:2.5rem; padding-top:15px; text-align:center; color:#fff; } .b_banner .b_inq_btn{width:230px; height:60px; border-radius:50px; background-color:transparent; border:1px solid #fff; margin-top:35px; transition:all .2s;} .b_banner .b_inq_btn button{display:block; width:100%; height:100%; text-align:center; color:#fff; font-size:1.125rem; font-weight:600; } .b_banner .b_inq_btn:hover{background-color:#fff; transition:background-color .2s;} .b_banner .b_inq_btn:hover button{color: var(--color-basic); transition:color .2s;} /*.k_ft_add{opacity:.6;}*/ .k_ft_add a{border-radius: 2px;} .k_ft_info{margin-top:0;} .k_ft_logo img{opacity:.5;} .k_ft_info::after{display:none; } @media screen and (max-width: 480px){ .portfolio_sub{margin-bottom:0; } } @media screen and (max-width: 460px){ } .g_sec1{ width:100%;} @media (max-width:1280px){ .g_sec1 h2{margin:5% 0;} } @media (max-width:768px){ .b_banner .b_inner{padding:50px 0;} .b_banner .b_inq_txt p{font-size:20px; } .g_sec1 h2 { margin: 10% 0 0 0; } } /* ------------------- sidebar */ .mobileWrap {width:100%; height:100vh; background:#f7f8fa; z-index:999; position:fixed; top:0; left:0; padding: 20px 0; display:none; overflow-y:scroll; overflow-y:scroll; -ms-overflow-style: none;} .mobileWrap::-webkit-scrollbar { display: none;} .mbLogo {width:50%;} .mbLogo img {max-width:100%;} .mobileWrapInner {max-width:1280px; width:92%; margin:0 auto;} .mbCloseBtn { display: flex;align-items: center;justify-content: center;} .mbTop {display:flex; justify-content:space-between; margin-bottom:55px} .mbCloseBtn button { position: relative; width: 24px; height: 24px; background: none; border: none; cursor: pointer;padding: 0;} .mbCloseBtn button span {position: absolute; display: block; width: 100%; height: 2px; background-color: #666; /* 선 색상 */ top: 50%; left: 0; transform: translateY(-50%);} .mbCloseBtn button span:first-child { transform: rotate(45deg); } .mbCloseBtn button span:last-child { transform: rotate(-45deg); } .mbSmWrap {max-width:550px; margin:0 auto; width:100%; } .mbLoginArea {width:100%; padding:20px; border-radius:20px; background:#fff; text-align:center;} .mbLoginArea span {font-size:var(--font-size_20); font-weight:var(--font-m); line-height:1.5em;} .mbLoginArea span b {font-weight:var(--font-b); color:var(--color-color1);} .mbLoginBox {display:flex; gap:15px; justify-content:center; margin-top:0px;} .mbLoginBox a {display:block; width:200px; height:60px; border-radius:20px; border:1px solid #15d0f2; line-height:60px; color:#15d0f2; font-size:var(--font-size_20); font-weight:var(--font-b);} .mbLoginBox a.mbReg {background:#15d0f2; color:#fff;} .mbLoginHelpBox {font-size:var(--font-size_18); font-weight:var(--font-l); color:#aaaaaa; display:flex; gap:20px; justify-content:center; margin-top:20px;} .mbInfo {width:100%; padding:20px; border-radius:20px; background:#fff; margin-top:20px;} .infoDesc {text-align:center; } .infoDesc span {font-size:var(--font-size_18); font-weight:var(--font-m); color:#848484; } .infoDesc a {font-size:var(--font-size_18); font-weight:var(--font-m); background:#ddf7fb; color:#07afcd; width:100%; height:50px; text-align:center; line-height:50px; border-radius:15px; display:block; margin-top:20px;} .mbSchArea {position:relative; height:50px; margin:10px 0;} .mbSchArea input {width:100%;padding:15px 20px; border:1px solid #ebebeb; border-radius:15px; background:#fff;} .mbSchArea input::placeholder {font-size:var(--font-size_18); font-weight:var(--font-m); color:#b6b6b6;} .mbSchBtn {position:absolute; right:20px; top:50%; transform:translateY(-50%); width:21px; height:21px;} .mbSchTag {display:flex; align-items:center; gap:14px;} .mbSchTag li a {font-size:var(--font-size_14); font-weight:var(--font-r); color:#545454; letter-spacing:-0.02em; display:block; position:relative;} .mbSchTag li a:after {content:''; position:absolute; width:1px; height:1px; border-radius:50%; background:#545454; top:50%; right:-7px; } .mbSchTag li:last-child a:after {display:none;} .mbAcorWrap {background:#fff; border-radius:15px; padding:15px; margin:0px 0 20px 0; } .mbAcorList {cursor:pointer;} .mbAcorTit {display:flex; align-items:center; font-size:var(--font-size_18); font-weight:var(--font-sb); justify-content:space-between; padding:0px 0 10px 0px; cursor:pointer; position:relative;} .mbAcorTit i img {display:block;} .mbAcorbox {padding-left:5px} .sidebar-menu-ul { display: flex; flex-wrap: wrap; width:100%; font-weight: var(--font-sb);} .sidebar-menu-ul li {width:50%} .sidebar-menu-ul li a {display:block; padding:8px 0 8px 0; } .mbSiteLink {padding:25px 0;} .mbSiteLink li + li {margin-top:25px;} .mbSiteLink li a {font-size:var(--font-size_16); font-weight:var(--font-r); color:#434343; } @media (max-width:1279px){ /* 노트북까지 */ .mbLoginBox {gap:6px;} .mbLoginBox a {height:45px; line-height:45px; width:145px; font-size:14px;} .mbLoginHelpBox {font-size:12px;} .infoDesc span {font-size:14px; text-align:left;} .mbSchTag li a {font-size:12px;} .mbAcorTit {font-size:18px;} .mobileWrap {overflow-y:scroll; -ms-overflow-style: none;} .mobileWrap::-webkit-scrollbar { display: none;} .mbSiteLink li a {font-size:14px;} .mbSiteLink {padding:15px 0;} } /* ------------------- sidebar 로그인시 */ .userArea {background:#fff; border-radius:15px; padding:15px;} .mbUserInfo {display:flex; align-items:start;justify-content: space-between; flex-wrap:wrap} .mbUserIcon {display:flex; gap:17px;} .mbUserName {font-size:var(--font-size_18); font-weight:var(--font-l);} .mbUserName b {font-weight:var(--font-eb);} .mbTxt {margin-top:9px;} .mbInfoMor { font-weight: 500; color:#999999; } .userLev {display:flex; align-items:center; width:100%; border-radius:15px; background:#f3f4f6; padding:20px; justify-content:space-between;} .userlevel {display:flex; align-items:center; gap:7px;} .userlevel h4 { font-weight:var(--font-l);} .mbUserPoint {display:flex; align-items:center; gap:12px;} .mbUserPoint span {color:#07afcd; font-weight:var(--font-b);padding-left:10px} .userLevRemain { font-weight:var(--font-l); color:#07afcd; margin:10px 0;} .mbUserFavBox {cursor:pointer; position:relative;} .mbUserFavTit {display:flex; padding:10px 20px; border-radius:15px; background:#07afcd; color:#fff; justify-content:space-between;position:relative;} .mbUserFavTit.difc {background:#15d0f2; margin-top:10px;} .mbUserFavBoxDepth02 {display:none;width:100%;padding-top:5px} .mbUserFavBoxDepth02 li {display:flex; justify-content:space-between; padding:5px 5px} .mbUserFavBoxDepth02 li > a {display:block; padding:5px 0px;; font-weight:700; transition:0.28s;} .mbUserFavBoxDepth02 li:hover a {color:#15d0f2;} .stListAdd {display:flex; gap:3px; align-items:center;} .stListAdd img {width:16px;} .userUtillList {display:flex; flex-wrap:wrap;} .userUtillList li {width:calc((100% - 10px*3)/4); height:50px; margin-right:10px;} .userUtillList li:nth-of-type(4n) {margin-right:0;} .userUtillList li:nth-of-type(n + 5) {margin-top:20px;} .userUtillList li a {display:flex; align-items:center; gap:10px; font-size:14px; font-weight:var(--font-r);} .userUtillList i{color:#ff4500;} .usertype02 {margin:20px 0;} .userLinkTxt { font-weight:var(--font-m); color:#848484;} .userAreaLink {display:block; width:100%; padding:20px; text-align:center; background:#fff6d9; color:#e78200; font-weight:var(--font-m); border-radius:15px; margin-top:10px; } .userAreaLink.link_vs02 {background:#ddf7fb; color:#07afcd;} @media (max-width: 1023px) { /* 모바일,테블릿까지 */ .mbUserName {font-size:18px;} .mbTxt {font-size:18px;} .userUtillList li {width:50%; margin-right:0;} .userUtillList li a {font-size:16px;} .userUtillList li:nth-of-type(n + 3) {margin-top:20px;} }