:root { --color-basic_rgba : 255, 120, 0; /* 나리야사용 */ --color-basic-th : #fff6f3; --color-basic-l : #FFE8C2; --color-basic-r : #FFE0AA; --color-basic-m : #FFA500; --color-basic : #ff7800; /* 기본색상 */ --color-basic-sb : #FF6100; --color-basic-b : #E66B00; --color-basic-eb : #CC5C00; --color-basic-bl : #a64c01; } /* ------------------- 초기화 */ :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;} .mainTop {transition:0.28s; padding-top: calc(env(safe-area-inset-top, 0px) + 0px);} /* 최산단부터 메뉴끝 부분까지 */ .subTop {transition:0.28s; padding-top: calc(env(safe-area-inset-top, 0px) + 0px);} /* 최산단부터 메뉴끝 부분까지 */ .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 { width: 100%; /* 부모 넓이에 맞게 꽉 채움 */ height: auto; /* HTML에 적힌 비율에 맞춰 높이를 자동 계산 */ display: block; /* 이미지 아래쪽 미세한 빈 공간 제거 */ object-fit: cover; /* 혹시 모를 비율 왜곡 방지 */ } /* ------------------- 레이아웃 */ .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); } /* ------------------- 메인비주얼 */ .mvDesc {position:absolute; left:0; bottom:112px;} .mvDesc h2 {color:#fff; font-size:var(--font-size_36); font-weight:var(--font-eb); line-height:1.3em;} @media screen and (max-width: 1920px){ } @media (max-width:1279px){ /* 노트북까지 */ } @media (max-width: 1023px) { /* 모바일,테블릿까지 */ .mvDesc {bottom:48px;} .mvDesc h2 {font-size:24px; } } .mainSchMo {display:none;} /*mainSection01*/ .mainCateList {display:flex;} .mainCateList li {width:calc((100% - 14px*9)/10); margin-right:14px; border-radius:15px; overflow:hidden;} .mainCateList li:last-child {margin-right:0;} .mainCateList li figure img {display:block; width:100%;} .ms01cateName {font-size:16px; font-weight:var(--font-r); text-align:center; margin-top:15px;} @media screen and (max-width:1279px){ .mainCateList {flex-wrap:wrap;} .mainCateList li {width:calc((100% - 15px*5)/6); margin-right:15px; border-radius:15px; overflow:hidden;} .mainCateList li:nth-of-type(6n) {margin-right:0;} .mainCateList li:nth-of-type(n+7) {margin-top:15px;} .ms01cateName { margin-top:10px;} } @media (max-width: 767px) { /* 모바일기기전용 */ .mainCateList li {width:calc((100% - 8px*3)/4); margin-right:8px;} .mainCateList li:nth-of-type(4n) {margin-right:0;} .mainCateList li:nth-of-type(6) {margin-right:8px;} .mainCateList li:nth-of-type(n+5) {margin-top:15px;} .mainCateList li:nth-of-type(10) {margin-right:8px;} } /*mainSection02*/ .ms02Swip .swiper-wrapper .swiper-slide figure img {width:100%;} .ms02Swip .swiper-wrapper .swiper-slide {background:#f4f5f6; border-radius:15px; overflow:hidden; padding:10px 0 20px;} .ms02tit {font-size:16px; font-weight:var(--font-sb); text-align:center; margin-top:17px;} /*mainSection03*/ .ms03Cate {position:absolute; top:9px; right:9px; width:70px; height:50px; text-align:Center; line-height:50px; border-radius:15px; background:#00d4fa; color:#fff; font-size:var(--font-size_11); font-weight:var(--font-m);} .ms03TitBox {display:flex; gap:8px; padding:4px 0 8px 0px;} .ms03Tit {font-size:var(--font-size_17); font-weight:var(--font-b);} .ms03Num {font-size:var(--font-size_15); font-weight:var(--font-b); color:#ff0000; display:block;} .ms03Desc { color: var(--color-gray-m); /*width: 300px;*/overflow: hidden;text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; word-break: keep-all; line-height:1.6em;} .navi_box02 {height:40px; margin:0 auto;justify-content: space-between; position: absolute;top: 37%; width: 100%; left: 50%;transform: translate(-50%, -50%);z-index: 20; display:flex;} /*mainSection05*/ .ms05Info {width:100%; height:100%; background:url(/images/main/ms05Info__bg.jpg) no-repeat center / cover; padding:42px 42px; border-radius:15px;} .ms05TitBox {text-align:center;} .ms05Tit {font-size:var(--font-size_34); font-weight:var(--font-eb); color:#fff; line-height:1.23em; } .ms05txt {font-size:var(--font-size_17); font-weight:var(--font-sb); color:#fff; margin-top:18px;} .ms04Btn {display:inline-block;font-size:var(--font-size_16); font-weight:var(--font-b); color:#fff; background:#db6612; padding:15px 27px; border-radius:5px; margin-top:40px;} .ms05List {display:flex; margin-top:25px;} .ms05List li {width:calc((100% - 26px*2)/3); margin-right:26px; padding:25px 29px; border-radius:15px;box-sizing:border-box;} .ms05List li:nth-of-type(1) {background:#ddf7fb;} .ms05List li:nth-of-type(2) {background:#d9faf5;} .ms05List li:nth-of-type(3) {margin-right:0; background:#fff6d9;} .ms05Content {display:flex; align-items:center; gap:14px;} .ms05Content span {font-size:var(--font-size_18); font-weight:var(--font-b);} .ms05Content span b {color:#718c88; font-size:var(--font-size_14); font-weight:var(--font-m);} .ms05Content h3 {font-size:var(--font-size_26); font-weight:var(--font-b); margin-top:18px;} .ms05List li:nth-of-type(1) .ms05Content h3 {color:var(--color-color6);} .ms05List li:nth-of-type(2) .ms05Content h3 {color:#00a78e;} .ms05List li:nth-of-type(3) .ms05Content h3 {color:#e78200;} @media screen and (max-width:1380px){ .ms05List li {padding:20px 10px;} } @media screen and (max-width:1180px){ .ms05List li {width:calc((100% - 13px*2)/3); margin-right:13px;} .ms05Content h3 {font-size:18px;} } @media screen and (max-width:1023px){ .ms05TitBox {text-align:left;} .ms04Btn {margin-top:20px;} .ms05List {flex-wrap:wrap; gap: 20px;} .ms05List li {width:100%; margin-right:0px; max-width:500px; margin:0 auto; padding:20px;} .ms05List li:nth-of-type(3) {margin-right:auto;} } @media (max-width: 767px) { /* 모바일기기전용 */ .ms03Cate {position:absolute; top:4px; right:9px; width:70px; height:35px; line-height:35px; border-radius:10px;} .ms05Tit {font-size:20px;} .ms05Info {background:url(/images/main/ms05Info__bg_mo.jpg) no-repeat center / cover; padding:28px 21px; border-radius:15px;} .ms05Content span {font-size:14px;} .ms05Content h3 {font-size:19px;} } /* 메인카테고리 슬라이드 */ .mainSec02 {position:relative;} .mainSec02 .swiper { .mainSec02 .swiper-button-prev, .mainSec02 .swiper-button-next { position:static; margin-top:0; } } .swiper-button-next.ms02_next {background: url(/images/icon/ms02_right_arr.png) no-repeat center / cover; width:40px; height:40px; right:-20px; box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.1); border-radius:50%; overflow:hidden;} .swiper-button-prev.ms02_prev {background: url(/images/icon/ms02_left_arr.png) no-repeat center / cover; width:40px; height:40px; left:-20px; box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.1); border-radius:50%; overflow:hidden;} .swiper-button-next::after,.swiper-button-prev::after {display: none;} .mainSec02 .navigation-wrapper { width:100%; margin:0 auto; display:flex; justify-content:space-between; position:absolute; left:50%; transform:translate(-50%,-50%); z-index:70; } /* 메인신규업체 슬라이드 */ .mainSec03 {position:relative;} .mainSec03 .swiper { .mainSec03 .swiper-button-prev, .mainSec03 .swiper-button-next { position:static; margin-top:0; } } .swiper-button-next.ms03_next {background: url(/images/icon/ms02_right_arr.png) no-repeat center / cover; width:40px; height:40px; right:-20px; box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.1); border-radius:50%; overflow:hidden;} .swiper-button-prev.ms03_prev {background: url(/images/icon/ms02_left_arr.png) no-repeat center / cover; width:40px; height:40px; left:-20px; box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.1); border-radius:50%; overflow:hidden;} .swiper-button-next::after,.swiper-button-prev::after {display: none;} .mainSec03 .navigation-wrapper { width:100%; margin:0 auto; display:flex; justify-content:space-between; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:70; } @media (max-width: 767px) { /* 모바일기기전용 */ .mainSec03 .navigation-wrapper { top:53%; } } /* ------------------- 메인비주얼*/ .sec01 { background: #fbfbfb; line-height:1.2} .sec01 .sec01_j_image {background:url('/images/section/sec01_bg_img01.jpg') no-repeat center / cover; border-radius:15px; overflow:hidden; padding:48px; color:#fff} .sec01 .sec01_j_image >ul>li h2 strong {box-shadow: inset 0 -30px 0 var(--color-basic-m);} .sec01 .sec01_j_image ul li:nth-of-type(2) p strong {box-shadow: inset 0 -15px 0 var(--color-basic-m);} .sec01 .sec01_j_image img { width: 100%; } .sec01 .sec01_j_image img.m_ban { display: none; } .sec01 .sec01_j_image ul {display:flex;} .sec01 .sec01_j_image ul li:nth-of-type(1) {width:69.45%;line-height: 3.25em;} .sec01 .sec01_j_image ul li:nth-of-type(2) {width:30.55%; text-align:center; } .mo_sec01_j_image {background:url('/images/section/mo_sec01_bg_img01.jpg') no-repeat center / cover; border-radius:15px; overflow:hidden; padding: 50px 0px 30px; display:none; color:#fff } .mo_sec_banner_box {text-align:center; } .mo_sec_banner_box .mo_sec01_j_image ul li h2 strong {box-shadow: inset 0 -20px 0 var(--color-basic-m);} .mo_sec_banner_box .mo_sec01_j_image ul li:nth-of-type(1) { line-height: 2.65em;} .mo_sec_banner_box .mo_sec01_j_image ul li:nth-of-type(2) {display:flex; justify-content: space-around; margin-top: 73px; } .mo_sec_banner_box .mo_sec01_j_image ul li:nth-of-type(2) p strong {box-shadow: inset 0 -8px 0 var(--color-basic-m);} .anno_box { display: flex; } .anno_box > li { position: relative; margin-right: 20px; padding: 30px 25px; box-sizing: border-box; border: 1px solid #eef4f7; border-radius: 15px; background: #fff; } .anno_box > li { width: calc((100% - 40px * 3) / 2); } .anno_box > li:last-child { margin-right: 0; } .anno_box .tabs { display: flex; align-items: center; } .anno_box .plus_box { position: absolute; top: 30px; right: 26px; } .anno_box .tabs > li { margin-left: 19px; } .anno_box .tabs > li:first-child { margin-left: 0; } .anno_box .tabs > li > a { color: #a6a6a6; font-weight: 500; letter-spacing: -0.01em; } .anno_box .tabs > li.current > a { color: #232323; font-weight: 700; } .anno_box .tab-content { margin-top: 30px; display: none; background: #fff; } .anno_box .tab-content.current { display: inherit; } .anno_box .tab-content > ul { border-top: 1px solid #f0f0f0; padding-top: 30px; } .anno_box .tab-content > ul > li { position: relative; display: flex; align-items: center; margin-top: 22px; } .anno_box .tab-content > ul > li:first-child { margin-top: 0; } .anno_box .tab-content > ul > li .anno_tit { margin-right: 13px; } .anno_box .tab-content > ul > li .news_txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 340px; width: 100%; } .anno_box .tab-content > ul > li .j_date { position: absolute; top: 0; right: 0; } .ca_box .cont_box > ul { border-top: 1px solid #f0f0f0; padding-top: 30px; margin-top: 30px; } .ca_box .cont_box > ul > li { text-align: center; } .ca_box .cont_box > ul > li + li { margin-top: 13px; } .ca_box .cont_box > ul > li button { margin-right: 12px; } .ca_box .cont_box > ul > li button:last-child { margin-right: 0; } .ca_box .cont_box > ul > li button a i {margin-right:3px;} .ca_box .cont_box > ul > li button.on a { border-color: var(--color-basic-m); color: var(--color-basic-m); font-weight: 700; } .ca_box .cont_box > ul > li button.on a i .img_o { display: inline-block; transition: 0.5s; } .ca_box .cont_box > ul > li button.on a i .img_b { display: none; } .ca_box .cont_box > ul > li a { border: 1px solid #666666; height: 40px; line-height: 40px; border-radius: 20px; text-align: center; display: inline-block; color: #666; font-weight: 400; font-size: 1rem; transition: 0.2s; } .ca_box .cont_box > ul > li a:hover { color: var(--color-basic); font-weight: 500; } .ca_box .cont_box > ul > li a i .img_o { display: none; } .ca_box .cont_box > ul > li a.w_83 { width: 83px; } .ca_box .cont_box > ul > li a.w_105 { width: 105px; } .ca_box .cont_box > ul > li a.w_110 { width: 110px; } .ca_box .cont_box > ul > li a.w_120 { width: 120px; } .ca_box .cont_box > ul > li a.w_130 { width: 130px; } .ca_box .cont_box > ul > li a.w_152 { width: 152px; } .area_box .cont_box > ul { text-align: center; border-top: 1px solid #f0f0f0; padding-top: 30px; margin-top: 30px; } .area_box .cont_box > ul > li { display: flex; justify-content: center; } .area_box .cont_box > ul > li + li { margin-top: 35px; } .area_box .cont_box > ul > li > a { display: block; padding: 0 20px; font-size: 1.13rem; font-weight: 400; color: #666666; padding-top: 0; transition: 0.2s; } .area_box .cont_box > ul > li > a.on { color: var(--color-basic); font-weight: 500; } .area_box .cont_box > ul > li > a:hover { color: var(--color-basic); font-weight: 500; } /*--------------------------------------------------------mobile_section01-------------------------------------------------------------------------*/ .mo_anno_box { display: none; margin-top: 10px; } .mo_anno_box > ul { font-size:0; box-sizing:border-box; background: #fff; border-radius: 7px; border: 1px solid #f7fafb; padding: 16px 0; } .mo_anno_box > ul > li { width: 16.66%; display:inline-block; } .mo_anno_box > ul > li.on a i { font-weight: 700; color: var(--color-basic-m); } .mo_anno_box > ul > li.on a img.area_off {display:none;} .mo_anno_box > ul > li.on a img.area_on {display:block;} .mo_anno_box > ul > li > a { display: flex; align-items: center; flex-direction: column; min-height:49px; } .mo_anno_box > ul > li > a img { width:35px; height: auto; max-height: 35px; object-fit: contain;} .mo_anno_box > ul > li > a img.area_on{display:none;} .mo_anno_box > ul > li > a i { font-size: 14.37px; font-weight: 400; color: #666; margin-top: 5px; } .mo_anno_box > ul > li:nth-of-type(n + 7) { margin-top: 16px; } @media screen and (max-width: 1624px){ .area_box .cont_box > ul > li > a { padding: 0 15px; } } @media screen and (max-width: 1480px){ } @media screen and (max-width: 1080px){ .anno_box { flex-wrap: wrap; } .anno_box > li { width: 100%; margin-right: 0; } .anno_box > li + li { margin-top: 20px; } .sec01 { padding: 20px 0; } .mo_sec01_j_image {display:block;} } @media screen and (max-width: 720px){ .mo_anno_box { display: block; } .mo_anno_box > ul > li:nth-of-type(n + 7) { margin-top: 10px; } .sec01 { padding-top: 10px; padding-bottom: 14px; } .sec01 .sec01_j_image {display:none;} .anno_box { display: none; } } .detail_swip .swiper-slide img {width:100%;} .detail_tab_box {display:flex; align-items:center; justify-content: space-between; ; border-top: 2px solid #000; /*border-bottom:1px solid #d2d2d2;*/} .detail_tab_box .de_link {display:block; font-size:14px;} .detail_tab_box .de_link i {display: inline-block;vertical-align: middle;} .detail_tab_box .de_link img{width: 15px; height: 15px;} ul.de_tabs {display:flex;} ul.de_tabs li {cursor:pointer; padding:15px 25px; background:#f3f3f3; border-bottom: 1px solid #d2d2d2; border-right: 1px solid #d2d2d2;} ul.de_tabs li:nth-of-type(1){border-left:1px solid #d2d2d2;} ul.de_tabs li.active{font-weight:700; background:#fff; border-bottom:none; } /*ul.de_tabs li + li {margin-left:10px;}*/ .tab-content {display:block;} .tab_tit {display:flex; align-items:center; } .de_icon_box {display:inline-block; vertical-align:middle; margin-right:5px;} .tab_link {display:flex; margin-left:0px;} .h_info {width:100px; height:30px; line-height:30px; border:1px solid #ddd; text-align:center;} .h_info i img{width:15px; height:15px; display:inline-block; vertical-align:middle;} .tab_link .heart img {width:15px; height:15px;} .tab_link .heart_box {display:flex; align-items:center; margin-left:10px; padding:0 10px; height:30px; line-height:30px; border:1px solid #ddd;justify-content: center;} .tab_link .heart_box.on .h_off{display:none;} .tab_link .heart_box.on .h_on {display:block;} .tab_link .heart_box .heart {margin-right:5px;} .tab_link .heart_box2 {display:flex; align-items:center; margin-left:0px; padding:0 10px; height:30px; line-height:30px; border:1px solid #ddd;justify-content: center;} .h_off {display:block;} .h_on {display:none;} .star_box.on .star_on{display:inline-block;} .star_box.on .star_off {display:none;} .star {margin-right:5px;} .star_on {display:none;} .de_sns_box {display:flex; justify-content: center; border-top:1px solid #c6c6c6 ; padding-top:30px;} .de_sns_box a {display:flex; align-items: center; justify-content: center; text-align:center; color: var(--color-basic); font-size:1.25rem; border: 1px solid var(--color-basic); transition:0.25s; border-radius:5px; background:#fff6f3;} .de_sns_box a:nth-of-type(1) {background: var(--color-basic); color:#fff; width:197px; height:55px;} .de_sns_box a:nth-of-type(2) {margin-left:10px; width:160px;} .de_sns_box a:nth-of-type(3) {background:#fff; color:#2d2d2d; margin-left:10px; width:160px;} .de_sns_box a:nth-of-type(4) {background:#fff; color:#2d2d2d; margin-left:10px; width:160px;} .de_sns_box a:nth-of-type(5) {background:#fff; color:#2d2d2d; margin-left:10px; width:160px;} .de_sns_box a i {display:inline-block; vertical-align:middle;} .talk_p i {margin-right:9px;} .detail_rec_box {position:relative; margin-top:100px; background:#f8f8f8; padding:20px; box-sizing:border-box;} .add_de_box .near_box li {display:flex;} .add_de_box .near_box li .img_box img {width:100%;} .add_de_box .near_box li div {width:calc((100% - 10px)/2); margin-right:10px;} .add_de_box .near_box li div:nth-of-type(2) {margin-right:0;} .add_de_box .near_box li .near_txt {display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .work_con01 dl{display:flex;} .work_con01 dl dt {width:95px; font-weight: 600; line-height:1.3;} .work_con01 dl dd {line-height:1.3;} .detail_bot_box {border-top:2px solid #d2d2d2; padding-top:40px;} .detail_bot_box ul{display:flex; justify-content: space-evenly;} .detail_bot_box ul li figure img{width:100%; max-width:200px;} .detail_bot_box ul li p {line-height:2.35em;} @media screen and (max-width: 767px){ ul.de_tabs li {padding:10px 15px;} .detail_tab_box .de_link img {width:15px; height:15px;} .h_info {font-size:16px; width:100px; height:30px; line-height:30px;} .tab_link { margin-left:0; margin-top:0px;} .tab_link .heart_box {font-size:16px; width:150px; height:30px; line-height:30px; padding:0; margin-left:10px; } .tab_link .heart img {width:10px; height:10px;} .de_sns_box a {font-size:16px;} .tab_tit {flex-wrap: wrap;} .de_sns_box a {width:100px; height:30px; line-height:30px;} .work_con01 dl{flex-wrap: wrap; gap:10px;} .work_con01 dl dt { width:65px; } .detail_bot_box ul {flex-wrap:wrap; gap:10px;} .detail_bot_box ul li p {line-height:1.85em;} .detail_bot_box ul li figure img {width:150px;} } @media screen and (max-width: 1080px){ .mail_i {margin-right:5px} .phone_i {margin-right:5px} .phone_i img {width:21px; height:21px;} .mail_i img {width:21px; height:21px;} } @media screen and (max-width: 980px){ .de_sns_box a:nth-of-type(3) {margin-left:10px;} } @media screen and (max-width: 720px){ } @media screen and (max-width: 554px){ .de_sns_box a:nth-of-type(1) {height:40px; line-height:40px;} .de_sns_box {flex-wrap:wrap;} .de_sns_box a {width:250px; margin-right:10px; margin-left:0; height:40px; line-height:40px; max-width:158px;} .de_sns_box a:nth-of-type(2n) {margin-right:0;} .de_sns_box a:nth-of-type(n + 2) {margin-left:0;} .de_sns_box a:nth-of-type(n + 3) {margin-top:10px;} .star {line-height:16px;} .star img{width:16px; height:16px;} .phone_i {line-height:16px; margin-right:5px;} .phone_i img {width:16px; height:16px; } .mail_i {line-height:10px; margin-right:5px;} .mail_i img {width:16px; height:16px;} } .detail_cont04 {} .serviceDesc {background:#f5f7fa; text-align:center; padding:16px; border-radius:15px;} .serviceDesc p { font-weight:var(--font-m); color:#738299; word-break:keep-all;} .serviceBtnWrap {display:flex; justify-content:space-between;} .serviceBtnBox {display:flex;} .serviceBtnBox .serBtn {display:flex; align-items:center; justify-content: center; width:220px; margin-right:8px; text-align:center;} .serviceBtnBox .serBtn:nth-of-type(3) {margin-right:0;} .serBtn {font-size:var(--font-size_18); font-weight:var(--font-sb); color:#fff; border-radius:15px; display:block; } .serBtn.sertype01 {background: var(--color-basic);} .serBtn.sertype02 {background: var(--color-basic-b);} .serBtn.sertype03 {background:#00a2ff;} .serBtn.sertype04 {background:#fff6f3} .faviriteBtnBox {display:flex; gap:7px;} .faviriteBtnBox .serBtn02 {width:60px; height:60px; display:flex; align-items:center; border-radius:15px; border:1px solid #d2d8e0;justify-content: center;} @media (min-width:1024px) and (max-width:1279px) { /* 노트북 & 테블릿이상까지*/ .serviceBtnBox .serBtn {width:180px;} .serviceBtnBox {margin-right:20px;} } @media (max-width: 1023px) { /* 모바일,테블릿까지 */ .serviceBtnBox .serBtn {width:78px; height:40px; border-radius:5px;} .faviriteBtnBox .serBtn02 {height:40px; width:40px;} .serviceDesc p {font-size:14px;} } /* ------------------- 비주얼슬라이드부분 */ .swiper { position:relative;overflow:hidden; width: 100%; height: 100%; margin-left: auto; margin-right: auto; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; margin:0px; padding:0px; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; background-size: cover; background-position: center; } .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 5px; } .SwiperViewVisual .swiper-wrapper, .SwiperViewVisual .swiper-slide { height: 100%; } .SwiperViewVisual { /* 큰이미지 사이즈 */ width: 70%; height: 350px; } .SwiperViewThumbs { /* 작은이미지 사이즈 */ width:25%; height: 350px; box-sizing: border-box; padding: 0px 0; } @media all and (max-width:768px) { .SwiperViewVisual { width: 100%; height:230px; /* 큰 이미지 사이즈 세로값 */ } .SwiperViewThumbs { display: none; } } .SwiperViewThumbs .swiper-slide { width: 100%; height: 100%; opacity: 0.4; } .SwiperViewThumbs .swiper-slide-thumb-active { opacity: 1; } .swiper-button-next { background: url(/images/icon/btn_next.png) no-repeat; background-size: 50% auto; background-position: right; width:70px; height:70px; } .swiper-button-prev { background: url(/images/icon/btn_prev.png) no-repeat; background-size: 50% auto; background-position: left; width:70px; height:70px; } .swiper-button-next::after, .swiper-button-prev::after { display: none !important; content: none !important; } /* ------------------- 모바일 뷰페이지 하단바 */ #mo_float_bar_view{display: none; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5px);} @media (max-width: 1023px) { /* 모바일,테블릿까지 */ #mo_float_bar_view{display: block;position: fixed;bottom: 0;left: 0;width: 100%;background-color: #fbfbfb;z-index: 80;border-top: 1px solid #e4e3e3;padding: 10px 15px 10px 15px; 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_view ul{display: flex;justify-content: space-between;} #mo_float_bar_view ul li{width: 20%;} #mo_float_bar_view ul li figure{text-align: center;height: 11px;} #mo_float_bar_view ul li figure i{font-size: 24px; color:#999fa7;} #mo_float_bar_view ul li p{text-align: center;font-size: 12px;font-weight: 700; color:#999fa7;} #mo_float_bar_view ul li i.on, #mo_float_bar_view ul li p.on{color: #15d0f2;} } .serviceBtnBox .serBtn {width:110px;height:45px;} .serviceBtnBox a.serBtn {color:#ff} .serviceBtnBox .serBtn:hover{color:#fff} .faviriteBtnBox .serBtn02 {height:45px; width:45px;} /* 기본적인 탭구조 */ /* 스토어 뷰페이지 마우스 위로 올릴때 코스, 위치, 리뷰 열리는부분 - 해당영역에 일부수정되서 사용 */ .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:1480px; width:92%; margin:0 auto; height: 100%; position: relative;} .eb-pd-visual_title { padding:0px 0 40px 0; } /* 비주얼제목 */ .eb-pd-index { padding:50px 0 0 0 } /* 인덱스영역별 */ @media (max-width: 1023px) { /* 모바일,테블릿까지 */ .eb-pd-index { padding:30px 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);} /* ------------------- sidebar */ .infoDesc a {font-size:var(--font-size_18); font-weight:var(--font-m); background:#ddf7fb; color: var(--color-basic);; width:100%; height:50px; text-align:center; line-height:50px; border-radius:15px; display:block; margin-top:20px;} .mbLoginBox a {display:block; width:200px; height:60px; border-radius:20px; border:1px solid var(--color-basic);; line-height:60px; color: var(--color-basic);; font-size:var(--font-size_20); font-weight:var(--font-b);} .mbLoginBox a.mbReg {background: var(--color-basic);; color:#fff;} /* ------------------- sidebar 로그인시 */ .mbUserFavTit {display:flex; padding:10px 20px; border-radius:15px; background: var(--color-basic); color:#fff; justify-content:space-between;position:relative;} .mbUserFavTit.difc {background: var(--color-basic); margin-top:10px;} .mbUserFavBoxDepth02 li:hover a {color: var(--color-basic);} .mbUserPoint span {color: var(--color-basic); font-weight:var(--font-b);padding-left:10px} .userLevRemain { font-weight:var(--font-l); color: var(--color-basic); margin:10px 0;} .userAreaLink.link_vs02 {background: var(--color-gray-el); color: var(--color-basic);} .userAreaLink.link_vs03 {background:#ddf7fb; color: var(--color-basic);} /* ------------------- 탑배너 */ .tempBanner {background: #fff9e2; width:100%; position:relative; height:50px; text-align:center; line-height:50px; } /* ------------------- header*/ #mg_header { width: 100%; border-bottom: 1px solid #f0f0f0; position: fixed;top: 0;z-index:99; background:#fff; transition: all .45s ease; top:45px;} #mg_header {padding-top: calc(env(safe-area-inset-top, 0px) + 0px );} #mg_header.up {top:0;} #mg_header .hdtop { position: relative; display: flex; align-items: center; height: 90px; } #mg_header .hdtop .left-box { display: flex; align-items: center; width: 100%; height: 100%; } #mg_header .hdtop .left-box .hd_logo > a { display: block; height: auto; text-align:center;} #mg_header .hdtop .left-box .hd_logo > a img {display:block; height: auto;} #mg_header .hdtop .left-box .search { position: relative; width: 350px; height: 50px; margin-left: 47px; } @media screen and (max-width: 1080px){ #mg_header .hdtop .left-box .search { width: 250px; } } @media screen and (max-width: 786px){ #mg_header .hdtop .left-box .search { width: 230px; } } #mg_header .hdtop .left-box .search i { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); } #mg_header .hdtop .left-box .search input { width: 100%; height: 100%; border-radius: 25px; border: 1px solid var(--color-basic-b); padding-left: 25px; } #mg_header .hdtop .left-box .search input::placeholder { font-size: 14px; color: #a5a5a5; letter-spacing: -0.01em; font-weight: 400; } #mg_header .hdtop .left-box .detail_btn { width: 127px; height: 45px; text-align: center; line-height: 45px; color: #878787; border-radius: 22.5px; border: 1px solid #c1c1c1; display: block; margin-left: 9px; letter-spacing: -0.01em; } #mg_header .hdtop .left-box .reco_text { margin-left: 33px; } #mg_header .hdtop .left-box .reco_text .rec_tit { color: var(--color-basic-b); letter-spacing: -0.01em; } #mg_header .hdtop .left-box .reco_text .rec_txt { color: #868686; letter-spacing: -0.01em; margin-top: 8px; } #mg_header .hdtop .left-box .reco_text .rec_txt a { border-bottom: 1px solid #868686; margin:0 5px; } #mg_header .hdtop .left-box .reco_text .rec_txt a:first-child {margin-left:0;} #mg_header .hdtop .left-box .reco_text .rec_txt a:last-child {margin-right:0;} #mg_header .hdtop .right_box { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } #mg_header .hdtop .right_box .hd_link { display: flex; } #mg_header .hdtop .right_box .hd_link a { display: block; color: #7f7f7f; position: relative; padding:0 20px;} #mg_header .hdtop .right_box .hd_link a:first-child {padding-left:0;} #mg_header .hdtop .right_box .hd_link a:last-child {padding-right:0;} /* #mg_header .hdtop .right_box .hd_link a:nth-child(5):after { display: none; } */ #mg_header .hdtop .right_box .hd_link a:last-child:after { display: none; } #mg_header .hdtop .right_box .hd_link a:after { position: absolute; content: ""; width: 1px; height: 16px; background: rgba(127, 127, 127, 0.5); right: 0; top: 50%; transform: translateY(-50%); } .m-header-top-left-icon {position: absolute; display: none; } @media screen and (max-width: 1080px){ #mg_header .hdtop .right_box .hd_link a { padding:0 10px;} .m-header-top-left-icon {display: block; } } /*---------------------mobile------------------------------*/ #mg_header .mo_search_btn { display: none; } #mg_header .mo_nav_btn { width: 35px; height: 21px; position: relative; display: none; } #mg_header .mo_nav_btn span { display: block; width: 100%; height: 2px; background: #2f2f2f; position: absolute; } #mg_header .mo_nav_btn span:nth-of-type(1) { top: 0; } #mg_header .mo_nav_btn span:nth-of-type(3) { bottom: 0; } .search_input {display:none; background:#fff;} .search_input input {position: absolute; left: 0; bottom: -47px; width: 100%; padding: 16px; border:1px solid var(--color-gray-th); border-top:none; font-size:12px; font-weight:500; color:#333;} .search_input input::placeholder {font-weight:700;} @media screen and (max-width: 1480px){ #mg_header .hdtop .left-box .reco_text { display: none; } #mg_header .hdtop .left-box .reco_text { display: none; } } @media screen and (max-width: 1180px){ #mg_header .hdtop .left-box .detail_btn { display: none; } } @media screen and (max-width: 1080px){ #mg_header .hdtop .left-box .search { margin-left: 20px; } #mg_header { height: 160px; } #mg_header .hdtop .left-box .hd_logo > a img{width:100%; margin-top:0px;max-width:90px;} } @media screen and (max-width: 720px){ #mg_header:after { display:none;} #mg_header { height: 65px; } #mg_header.active {top:0;top:-65px;} #mg_header .hdtop { height: 65px; } #mg_header .mo_nav_btn { display: block; width: 30px; height: 100%; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } #mg_header .mo_nav_btn span:nth-of-type(1) { top: 25px; } #mg_header .mo_nav_btn span:nth-of-type(3) { bottom: 23px; } #mg_header .hdtop .left-box {} #mg_header .hdtop .left-box .hd_logo > a {text-align:center;width: 100%;} #mg_header .hdtop .left-box .hd_logo > a img{width:100%; margin-top:0px;max-width:100px;} #mg_header .hdtop .left-box .search { display: none; } #mg_header .hdtop .right_box { display: none; } #mg_header .mo_search_btn { display: block;position: absolute; left: 0; top: 50%; transform: translateY(-50%); } #mg_header .mo_search_btn i img { width: 60%; vertical-align: middle; margin-right: 12px; } #mg_header.up.active {top:0; position:fixed;top:-65px;} } /* ------------------- 메뉴바*/ #mg_header .hdBottom { position: relative; height: 70px; align-items: center; display: flex; transition:.25s; } #mg_header .hdBottom .left-box { display: flex; align-items: center; width: 100%; height: 100%; } #mg_header .hdBottom .menu-nav-btn { width: 30px; height: 21px; position: relative; } #mg_header .hdBottom .menu-nav-btn span { display: block; width: 100%; height: 2px; background: #2f2f2f; position: absolute; transition:.3s;} #mg_header .hdBottom .menu-nav-btn span:nth-of-type(1) { transform: translateY(8px);} #mg_header .hdBottom .menu-nav-btn span:nth-of-type(2) { transform: translateY(0px);} #mg_header .hdBottom .menu-nav-btn span:nth-of-type(3) { transform: translateY(-8px);} #mg_header .hdBottom .menu-nav-btn:nth-of-type(1):hover span {transform: translateY(0);} #mg_header .hdBottom .menu-nav-btn:nth-of-type(3):hover span {transform: translateY(0);} #mg_header .hdBottom .menu-nav-btn.often span:nth-of-type(1) {transform: rotate(45deg); top:auto;} #mg_header .hdBottom .menu-nav-btn.often span:nth-of-type(2) {display:none;} #mg_header .hdBottom .menu-nav-btn.often span:nth-of-type(3) {transform: rotate(-45deg);bottom:auto;} @media screen and (max-width: 1023px){ #mg_header .hdBottom .menu-nav-btn {display: none;} } #mg_header .hdBottom .left-box > .hd_nav { height: 100%; } #mg_header .hdBottom .left-box > .hd_nav > ul { display: flex; height: 100%; } #mg_header .hdBottom .left-box > .hd_nav > ul > li { margin-left: 20px; font-size: 1.13rem; font-weight: 700; color: #2f2f2f; position: relative; height: 100%; transition:0.25s; } #mg_header .hdBottom .left-box > .hd_nav > ul > li > a { line-height: 70px; display: block; padding: 0 20px; height: 100%; } #mg_header .hdBottom .left-box > .hd_nav > ul > li > a i {position:relative; z-index:100;} #mg_header .hdBottom .left-box > .hd_nav > ul > li > a i img {vertical-align:middle; margin-right:5px;} #mg_header .hdBottom .left-box > .hd_nav > ul > li > a i:before {content:''; width:0; height:3px; background: var(--color-basic); position:absolute; bottom:-3px; left:0; transition:.3s;} #mg_header .hdBottom .left-box > .hd_nav > ul > li > a:hover i:before {width:100%;} #mg_header .hdBottom .left-box > .hd_nav > ul > li > ul.depth02 { position: absolute; z-index: 2; text-align: center; padding-top: 20px; width: 100%; } #mg_header .hdBottom .left-box > .hd_nav > ul > li > ul.depth02 > li > a { width: 100%; display: block; } /* #mg_header .hdBottom .left-box:hover .all_menu {display:block !important;} */ #mg_header .hdBottom .right_box { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; } #mg_header .hdBottom .right_box .service_box { position: relative; } #mg_header .hdBottom .right_box .serv_02 { margin-left: 9px; } #mg_header .hdBottom .right_box .serv_02 .service_btn {background:#fff; color: var(--color-basic); border:1px solid var(--color-basic);} #mg_header .hdBottom .right_box .service_btn {background: var(--color-basic); color:#fff; width: 158px; height: 40px; text-align: center; line-height: 40px; display: flex; align-items: center; overflow: hidden; border-radius: 20px; border: 1px solid var(--color-basic); justify-content: space-between; padding: 0 17px; } #mg_header .hdBottom .right_box .service_box .service_list {box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.15); background:# border-radius: 10px; background: #fff; position: absolute; width: 158px; z-index: 1; overflow: hidden; box-sizing: border-box; text-align: center; transition: 0.25s; } #mg_header .hdBottom .right_box .service_box .service_list > li { display: none; } #mg_header .hdBottom .right_box .service_box .service_list > li > a { width: 100%; padding: 10px 20px; display: block; } #mg_header .hdBottom .right_box .service_btn i img {vertical-align:middle;} @media screen and (max-width: 1280px){ #mg_header .hdBottom .right_box .service_btn { width: 158px; padding: 0 12px; } #mg_header .hdBottom .left-box > .hd_nav > ul > li > a { padding: 0 13px; } } @media screen and (max-width: 1023px){ #mg_header .hdBottom .right_box {display:none;} #mg_header .hdBottom .left-box > .hd_nav > ul > li {margin-left:10px;} } @media screen and (max-width: 786px){ #mg_header .hdBottom .left-box > .hd_nav > ul > li > a {padding:0 5px;} } @media screen and (max-width: 1023px){ #mg_header .hdBottom { display: none; } } #mg_header .hdBottom .left-box > .hd_nav > ul > li > a.nav_cs {position:relative;} /* #mg_header .hdBottom .left-box > .hd_nav > ul > li > a.nav_cs:before{content:'';position:absolute; width:20px; height:20px; left:-5px; top:50%; transform:translateY(-50%); background:url('/img/icon/cs_icon.png') no-repeat center center /cover;} */ #mg_header .hdBottom .left-box > .hd_nav > ul > li > a {position:relative;} #mg_header .hdBottom .left-box > .hd_nav > ul > li > a .nav_emp_num{position:absolute; width:35px; height:20px; right:0px; top:3px; border-radius:5px; background: var(--color-basic); z-index:20;text-align:center; display:block; color:#fff; line-height:17px; letter-spacing: 0.06em; font-size:10px;} #mg_header .hdBottom .left-box > .hd_nav > ul > li > a .nav_emp_num:after {content:''; position:absolute; left:4px; top:16.8px; border-left:5px solid transparent; border-right:6px solid transparent; border-top: 7px solid var(--color-basic);} #mg_header .hdBottom .left-box > .hd_nav > ul > li > a .add_head_icon {width:80px; display:block; background:#fd2929; color:#fff; position:absolute; left: calc( 100% - 63px ); top:3px; text-align:center; height:20px; line-height:20px; z-index:20; padding:0 5px; font-size:12px; background:#ff0000; letter-spacing:0.04em; border-radius:5px;} #mg_header .hdBottom .left-box > .hd_nav > ul > li > a .add_head_icon:after {content:''; position:absolute; left:7px; top:18px; border-left:5px solid transparent; border-right:6px solid transparent; border-top: 7px solid #ff0000;} .kb_icon img{display:block; width:100%; max-width:199px;} .emp_banner_box { width:100%;} .emp_banner_box ul li figure a img {width:100%; border-radius:8px; overflow:hidden;} .add_plus {margin-left:10px;} @media (min-width: 769px) and (max-width: 1080px) { /* PC와 모바일화면 사이 */ #mg_header .hdBottom .left-box > .hd_nav > ul > li > a .nav_emp_num{line-height:20px;} } /* ------------------- */ .hdWrap {position:relative; } .hdLogo {display:block;} .hdLogo img {max-width: 300px} .hdTop {} .hdTopWrap { max-width: 1480px; width: 92%; margin: 0 auto; display:flex; align-items:center; justify-content: space-between; } .keyList {display:flex;justify-content: center; margin-top:14px;} .keyList p {font-size:var(--font-size_14); font-weight:var(--font-b); color:var(--color-color6); margin-right:34px; } .keyList li a {display:block; padding:0 5.5px; position:relative; font-size:var(--font-size_14); color:#545454; font-weight:var(--font-r);} .keyList li a::before {content:''; position:absolute; left:0px; top:50%; transform:translateY(-50%); width:1px; height:1px; border-radius:50%; background:#000; } .keyList li:nth-of-type(1) a {padding-left:0;} .keyList li:last-child a {padding-right:0;} .keyList li:nth-of-type(1) a::before {display:none !important;} .searchBox {width: 100%;max-width: 540px;} .searchArea {position:relative; width:100%;} .searchBar {width:100%; height:50px; line-height:50px; border-radius:50px; border:2px solid var(--color-color1); position:relative; padding:0 20px;} .searchBtn {position:absolute; right:20px; top:50%; transform:translateY(-50%); z-index:10;} .utilList {display:flex;} .utilList li a {display:flex; align-items:center; flex-direction: column; padding:0 17px; gap:9px; font-size:14px; font-weight:var(--font-r); } .utilList li:first-child a {padding-left:0;} .utilList li:last-child a {padding-right:0;} .hdBottom { border-top:1px solid #ebebeb; position:relative;} .hdBottom:after {content:'';height:100%; width:60px; position:absolute; right:0; top:0; background:url(/images/icon/gradi.png) no-repeat center / cover; display:none;} .hdBotWrap {display:flex; align-items:center; justify-content: space-between;} .hdBot_lt {display:flex; align-items:center; gap:19px;} .allGnbBtn .allGnb { position: relative; display: block; width: 22px; height: 12px; } .allGnbBtn .allGnb i { display: block; position: absolute; width: 100%; height: 2px; background: #111111; top: 50%; transform: translateY(-50%); transition: transform 0.3s, top 0.3s; } /* 첫 번째 줄 */ .allGnbBtn .allGnb i:nth-of-type(1) { transform: translateY(4px); } /* 두 번째 줄 */ .allGnbBtn .allGnb i:nth-of-type(2) { transform: translateY(-50%); } /* 세 번째 줄 */ .allGnbBtn .allGnb i:nth-of-type(3) { transform: translateY(-6px); } /* act 클래스가 있을 때의 상태 */ .allGnbBtn.act .allGnb i:nth-of-type(1) { top: 50%; transform: rotate(45deg); } .allGnbBtn.act .allGnb i:nth-of-type(2) { opacity: 0; } .allGnbBtn.act .allGnb i:nth-of-type(3) { top: 50%; transform: rotate(-45deg); } .allMgMenu {padding:5px 0;} .allMgMenu > .mg_gnb {display:flex; align-items:center;} .allMgMenu > .mg_gnb > li {padding:0 15px; position:relative;} .allMgMenu > .mg_gnb > li:span {} .allMgMenu > .mg_gnb > li:last-child {padding-right: 0 !important; padding-left:0px;} .allMgMenu > .mg_gnb > li:last-child:before {display:none;} .allMgMenu > .mg_gnb > li a {font-size:18px; font-weight:700; display:flex; align-items:center; gap: 6px; transition:0.28s;} .allMgMenu > .mg_gnb > li h2 {font-size:18px; font-weight:700; gap: 6px; transition:0.28s;line-height: 30.6px;} .allMgMenu > .mg_gnb > li a:hover {color:#db6612;} .allMgMenu > .mg_gnb > li .label1 {padding:2px 9px; font-size:var(--font-size_12); color:var(--color-color3); background:var(--color-color2); border-radius:50px; margin-top: -10px;} .allMgMenu > .mg_gnb > li .label2 {padding:2px 9px; font-size:var(--font-size_12); color:var(--color-color3); background:var(--color-color2); border-radius:50px; margin-top: -10px;} .allMgMenu > .mg_gnb > li .label3 {padding:2px 9px; font-size:var(--font-size_12); color:var(--color-color3); background:var(--color-color2); border-radius:50px; margin-top: -10px;} .allMgMenu > .mg_gnb > li .label4 {padding:2px 9px; font-size:var(--font-size_12); color:var(--color-color3); background:var(--color-color2); border-radius:50px; margin-top: -10px;} .allMgMenu > .mg_gnb > li .label5 {padding:2px 9px; font-size:var(--font-size_12); color:var(--color-color3); background:var(--color-color2); border-radius:50px; margin-top: -10px;} .allMgMenu > .mg_gnb > li .label6 {padding:2px 9px; font-size:var(--font-size_12); color:#fff; background:var(--color-color1); border-radius:50px; margin-top: -10px;} /* 밑줄 */ .allMgMenu > .mg_gnb > li > a i {position:relative; z-index:100;} .allMgMenu > .mg_gnb > li > a i:before {content:''; width:0; height:3px; background: var(--color-basic); position:absolute; bottom:-7px; left:0; transition:.3s;} .allMgMenu > .mg_gnb > li > a:hover i:before {width:100%;} .alertBtn {background:var(--color-color1); color:#fff; display:flex; padding:7px 20px; border-radius:50px; gap:14px; font-size:var(--font-size_15); font-weight:var(--font-sb);} .alertBtn i img {display:block;padding-top:4px} .allMgMenuArea {padding: 25px 20px ; background:#fff; box-shadow: 3px 15px 15px 0 rgba(0, 0, 0, 0.1); height:500px; position: absolute; left: 0; top: 126%; z-index: 2000; width: 100%; overflow-y:scroll; display:none; } .allMgMenuAreaList {display:flex; flex-wrap:wrap; row-gap:50px;} .allMgMenuAreaList > li {width:calc((100% - 20px*3)/4); margin-right:20px; border-right:1px solid rgba(0,0,0,0.1);} .allMgMenuAreaList i {font-size:16px;font-weight:500} .allMgMenuAreaList > li:nth-of-type(4n) {margin-right:0;} .allMgMenuAreaList > li > h2 {font-size:var(--font-size_20); font-weight:var(--font-b); position:relative;} .allMgMenuAreaList > li > h2 i {position:relative;} .allMgMenuAreaList > li:hover > h2 i:after { display:block;} .allMgMenuAreaList > li > h2 i:after {position:absolute; content:''; width:10px; height:10px; background:#db6612; border-radius:50%; right:-10px; top:-5px; display:none;} .allMgMenuAreaList > li:hover h2 {transition:0.28s;} .allMgMenuAreaList > li:hover h2 {color:#db6612;} .allMgMenuDepth02 {display:flex; flex-wrap:wrap; margin-top:10px;} .allMgMenuDepth02 > li{width:48%; margin-top:20px;} .allMgMenuDepth02 > li > a {display:block; width:100%; font-size:14px; font-weight:var(--font-m);} .allMgMenuDepth02 > li > a:hover {color: var(--color-basic);} .allMgMenuArea::-webkit-scrollbar {width: 8px; /* 스크롤바의 너비 */} .allMgMenuArea::-webkit-scrollbar-thumb {height: 32px; /* 스크롤바의 길이 */background: #db6612; /* 스크롤바의 색상 */} .allMgMenuArea::-webkit-scrollbar-track {} @media (max-width:1279px){ /* 노트북까지 */ .utilList li a {padding:0 5px;} .allMgMenu > .mg_gnb > li {padding:0 8px;} .allMgMenu > .mg_gnb > li span {display:none;} .searchBox {display:none;} .hdUtil {display:none;} .allGnbBtn {display:none;} .hdBot_rt {display:none;} .hdBot_lt {width:100%;justify-content: space-between;} .allMgMenu {width:100%;} .allMgMenu > .mg_gnb {width:100%; justify-content: space-between;} .hdBottom:after {display:block;} } @media (max-width: 1023px) { /* 모바일,테블릿까지 */ .hdLogo img { width: 150px; max-width: 150px} .allMgMenu {padding:0px 0;} .allMgMenu {overflow-x:auto; scrollbar-width: none;} .allMgMenu > .mg_gnb > li {width:200px;white-space: nowrap;} .allMgMenu > .mg_gnb > li a {font-size:14px;} .hdBottom {display:none;padding:13px 0;} } /* ------------------- 프리미엄 */ .main_section .sec_tit { display: flex; justify-content: space-between; align-items: flex-end; } .main_section .sec_tit button i { margin-right: 5px; } .main_section .sec_tit span img { } .sec02_swip .swiper-wrapper {padding-bottom:0px;} .loop_wrap {position: absolute;top: 45px;right: 0;z-index: 20;padding: 16px 20px 23px;max-width: 420px; width:100%; border: 1px solid #000;box-sizing: border-box;font-size: 16px;letter-spacing: -1px;line-height: 18px;background: #fff; display:none;} .loop_wrap.view {display:block;} .loop_tit {display: block;color: #222;font-weight: normal; line-height: 27px;} .loop_line {border-top:1px solid #222; margin-top:12px;} .loop_price {margin-top:12px;color: #222;line-height: 23px;letter-spacing: -1px;font-weight: bold;} .cont_price {display: block;color: #ff0000;line-height: 22px;font-weight: bold; letter-spacing: -0.5px; position:relative;} .loop_close_btn {position: absolute;top: 0;right: 0;width: 52px;height: 53px;} .price_link {position: absolute;top: -7px;right: 0;} .loop_product {float: left;margin-left: 5px; padding: 4px 0;width: 66px;border: 1px solid var(--color-basic-m);box-sizing: border-box;color: #fff;font-size: 14px;text-align: center; background: var(--color-basic-m);} .unit_p {display: inline-block;width:50px; text-align:right; margin-right: 15px;color: #757575; font-size: 16px;font-weight: normal;letter-spacing: -1px;line-height: 22px;} .num_p {display: inline-block;width:100px;text-align:right;} .best_chk {background:#fffff0; border:2px solid var(--color-basic);} .sec02_bg_01 {background:url('/images/section/sec02_img01.jpg') no-repeat center / cover; height:178.48px;} .non_img .sec02_bg_01 {background:url('/images/section/sec03_img02.jpg') no-repeat center / cover; height:178.48px;} .sec02_cont .sec02_img_box img { width: 100%; } .sec02_cont .sec02_img_box img.mo_sec02_img01 { display: none; } .sec02_cont .sec02_cag {background: var(--color-basic); color:#fff; height:33px; text-align:center; padding:5px 10px 0px 10px;display:inline-block;margin-top:0px} .sec02_cont > ul { display: flex; flex-wrap: wrap; } .sec02_cont > ul > li { width: calc((100% - 8px * 3) / 4); margin-right: 8px; border-radius: 10px; overflow: hidden; border: 2px solid #f4f4f4 ; transition: 0.5s; box-shadow: 0px 12px 21px 0px rgba(0, 0, 0, 0.04); cursor: pointer; } .sec02_cont > ul > li.non_premi {display:flex; display: flex; justify-content: center;align-items: center; flex-direction: column; background:#fcfcfc; border: 1px solid #eee;} .sec02_cont > ul > li.non_premi p {color:#bababa;} .sec02_cont > ul > li.non_premi p a {color:#bababa;} /*.sec02_cont > ul > li:hover { border: 2px solid var(--color-basic); } */ .sec02_cont > ul > li:nth-of-type(4n) { margin-right: 0; } .sec02_cont > ul > li:nth-of-type(n + 5) { margin-top: 10px; } .bot_box { padding: 20px 20px 20px 20px; position:relative;} .bot_box .s_tit { display: flex; align-items: center; } .bot_box .s_tit > span { display: block; margin-right: 12px; } .bot_box .s_tit > span > i { vertical-align: middle; margin-right: 5px; } .bot_box .b_tit { display: flex; align-items: center; margin-top: 17px; margin-bottom: 14px; line-height: 23px;} .bot_box .b_tit .hurry { display: inline-block; padding:0px 6px 0 7px;background: #ff2424; height: 23px; border-radius: 18px; text-align: center; line-height: 23px; margin-right: 7px; } @media screen and (max-width: 1080px){ .bot_box .b_tit .hurry { padding:1px 7px 0 7px;} } .bot_box .sec02_desc { border-top: 1px solid; border-color: rgba(241, 241, 241); } .bot_box .sec02_desc > li { position: relative; } .bot_box .sec02_desc > li.mt_15 {margin-top:5px;} .bot_box .sec02_desc > li a {position:absolute; right:0; display:block; top:0; font-size:13px; color:#181818; font-weight:500;} .bot_box .sec02_desc > li a i {margin-right:5px;} .bot_box .sec02_desc > li a i img{width:9%;} .bot_box .sec02_desc > li > dl { display: flex;} .bot_box .sec02_desc > li > dl dt { width: 170px; } .bot_box .sec02_desc > li > dl dd { width: calc(100% - 170px); } .bot_box .desc_c { position: absolute; top: 53.2%; left: 37%; display: flex; } .bot_box .desc_c span { width: 48px; height: 20px; text-align: center; line-height: 20px; display: block; border-radius: 10px; border: 1px solid var(--color-basic); } .swip_oran {bottom: -35px !important; } .swip_oran .swiper-pagination-bullet-active { background: var(--color-basic); } .swip_oran_visual_banner .swiper-pagination-bullet-active { background: var(--color-basic); } @media screen and (max-width: 1080px){ .sec02_cont > ul > li { width: calc((100% - 8px) / 2); } .sec02_cont > ul > li:nth-of-type(2n) { margin-right: 0; } .sec02_cont > ul > li {margin-top:10px;} } @media screen and (max-width: 720px){ .sec02_bg_01 {height:150px;} .sec02_cont > ul > li { width: 100%; margin-right: 0; } .sec02_cont > ul > li + li { margin-top: 10px; } .sec02_cont .sec02_img_box img.pc_sec02_img01 { display: none; } .sec02_cont .sec02_img_box img.mo_sec02_img01 { display: block; height: 70px; } .bot_box { padding: 0px 10px; } .bot_box .sec02_desc > li:nth-of-type(2) { display: none; } .bot_box .b_tit { margin-top: 5px; margin-bottom: 5px; } .bot_box .sec02_desc { border: none; } .bot_box .sec02_desc > li > dl dt { margin-right:7px; } .bot_box .desc_c {right:10px; top:10px; left:auto;} .bot_box .desc_c span { width: 36px; height: 17px; line-height: 16px; } .sec02_cont > ul > li.non_premi {height:195px;} /* .sec02_cont > ul { display: flex; flex-wrap: wrap; display: none; } */ .mySwiper { width: 100%; height: 835px; display: block; } .swiper-wrapper {height:116%;} .mySwiper .swip_img_box img { width: 100%; } .mySwiper .swiper-slide { height: 180px; border: 2px solid transparent; transition: 0.2s; border-radius: 10px; box-shadow: 0px 12px 21px 0px rgba(0, 0, 0, 0.04); overflow:hidden; } .mySwiper .swiper-slide:hover { border: 2px solid var(--color-basic); } .bot_box .s_tit > span {margin:15px 20px 5px 0px;} .bot_box .s_tit > span i { display:inline-block;} .bot_box .s_tit > span i img {width:80%;} .bot_box .sec02_desc > li > .desc_c {right:-40px; top:45%; left:auto;} .bot_box .sec02_desc > li > dl dd i { margin:0 5px; vertical-align: middle;} .bot_box .sec02_desc > li > dl dd i img {width:4%;} .non_img .sec02_bg_01 {height:100px;} } /* ------------------- 우대 */ .sec03 .sec03_cont > ul > li.non_img .sec03_bg_01 {background: url('/images/section/sec03_img02.jpg') no-repeat center / cover; height:130px; overflow: hidden;} .sec03_bg_01 {background: url('/images/section/sec03_img01.jpg') no-repeat center / cover; height:130px; overflow: hidden;} .sec03_img_box {position:relative;} .sec03_cag {background: var(--color-basic); color:#fff; width:93px; height:23px; text-align:center; transform: rotate(-45deg); display:block; position: absolute; top: 12px;left: -23px; line-height: 23px;} .sec03 .sec03_cont > ul { display: flex; flex-wrap: wrap; } .sec03 .sec03_cont > ul > li { width: calc((100% - 10px * 4) / 5); margin-right: 10px; border: 2px solid #f4f4f4; border-radius: 10px; overflow: hidden; transition: 0.2s; box-shadow: 0px 12px 21px 0px rgba(0, 0, 0, 0.04); } .sec03 .sec03_cont > ul > li:hover { border-color: var(--color-basic); } .sec03 .sec03_cont > ul > li:nth-of-type(n + 6) { margin-top: 10px; } .sec03 .sec03_cont > ul > li .sec03_img_box img { width: 100%; } .sec03 .sec03_cont > ul > li .sec03_bot_box { text-align: center; padding: 10px 10px; } .sec03 .sec03_cont > ul > li .b_tit p { letter-spacing: -0.025em; } .sec03_desc { border-top: 1px solid var(--color-gray-el); border-bottom: 1px solid var(--color-gray-el); padding: 15px 0; margin-top: 15px; } .sec03_desc dl { display: flex; justify-content: center; align-items: center; } .sec03_desc dl + dl { margin-top: 5px; } .sec03_desc dl dt { margin-right: 14px; } .sec03_cate { display: flex; align-items: center; justify-content: space-between; } .sec03_cate p i { margin-right: 4px; vertical-align: middle; } @media (min-width: 1080px) { /* 모바일화면 이상 */ .sec03 .sec03_cont > ul > li:nth-of-type(5n) {margin-right:0;} } @media screen and (max-width: 1080px){ .sec03 .sec03_cont > ul > li { width: calc((100% - 10px) / 2); margin-right: 10px;} .sec03 .sec03_cont > ul > li:nth-of-type(2n) { margin-right: 0; } .sec03 .sec03_cont > ul > li:nth-of-type(5) {margin-right:10px;} .sec03 .sec03_cont > ul > li:nth-of-type(n + 3) { margin-top: 10px;} } @media screen and (max-width: 720px) { .sec03_bg_01 {height:100px;} .sec03_desc {padding: 5px 0; margin-top: 5px;} .sec03_desc dl dt {margin-right:5px;} /*.sec03_cag {width:52px; height:13px; line-height:13px; top: 9px; left: -11px; font-size:10px;}*/ .sec03_cag {width:83px; height:23px; top: 10px;left: -21px; line-height: 23px;} } /* ------------------- 좌측 */ .sec04_cont_wrap { display: flex; } .sec04_left { width: 30.4%; padding-right: 98px; position: relative; } .sec04_left .sec_tit { border-bottom: 2px solid #232323; } .sec04_left .j_cate_list > li p { position: relative; } .sec04_left .j_cate_list > li p i{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: block; cursor: pointer; } .sec04_left .j_cate_list > li p i img.down_ar { position: absolute; right: 0; top: 50%; transform: translateY(-50%); cursor: pointer; } .sec04_left .j_cate_list > li p i img.up_ar {display:none;} .sec04_left .j_cate_list > li p.up_arrow i img.up_ar { display: block; } .sec04_left .j_cate_list > li p.up_arrow i img.down_ar {display:none;} .sec04_left .j_cate_list > li p a { display: block; padding: 15px 0; border-bottom: 1px solid #e6e6e6; } .sec04_left .j_cate_list > li > .cate_depth02 { background: #fafafa; padding: 20px; display: none; } .sec04_left .j_cate_list > li > .cate_depth02 > li + li { margin-top: 12px; } .sec04_left .j_cate_list > li > .cate_depth02 > li > a { height: 100%; font-size: 1.13rem; color: #4f4f4f; font-weight: 500; padding-right:10px } .sec04_right { width: 69.6%; } .sec04_right .sec_tit { } .sec_04_btn { display: flex; } .sec_04_act_btn { position: relative; } .sec_04_act_btn > .update_btn { display: block; width: 122px; height: 40px; text-align: center; line-height: 40px; border-radius: 20px; border: 1px solid #e1e1e1; } .sec_04_act_btn .update_list { background: #fbfbfb; position: absolute; width: 100%; z-index: 2; } .sec_04_act_btn .update_list > li { display: none; } .sec_04_act_btn .update_list > li > a { display: block; padding: 10px; text-align: center; } .sec_04_act_btn i img {vertical-align:middle;} .sec_04_act_btn2 { position: relative; } .sec_04_act_btn2 > .update_btn { display: block; background: var(--color-basic); color: #fff; width: 142px; height: 40px; text-align: center; line-height: 40px; border-radius: 20px; border: 1px solid var(--color-basic); } .sec_04_act_btn2 .update_list { background: #fbfbfb; position: absolute; width: 100%; z-index: 2; } .sec_04_act_btn2 .update_list > li { display: none; } .sec_04_act_btn2 .update_list > li > a { display: block; padding: 10px; text-align: center; } .sec_04_act_btn2 i img {vertical-align:middle;} .j_star_btn > button a { display: block; width: 122px; height: 40px; text-align: center; line-height: 40px; border-radius: 20px; border: 1px solid #e1e1e1; } .j_star_btn > button a .on_click { display: none; } .j_star_btn > button.on .on_click { display: inline-block; } .j_star_btn > button.on .off_click { display: none; } .sec04_right .j_info > li { position: relative; border: 2px solid #eef4f7; border-radius: 15px; transition: 0.2s; box-shadow: 0px 12px 21px 0px rgba(0, 0, 0, 0.04); box-sizing:border-box; overflow:hidden; } .sec04_right .j_info > li + li { margin-top: 10px; } .sec04_right .j_info > li a > .up_load_tm { position: absolute; right: 30px; top: 20px; } .sec04_right .j_info > li:hover { border-color: var(--color-basic); } .sec04_right .j_info > li a > .right_con01 { display: flex; align-items: center; } .sec04_right .j_info > li a > .right_con01 .sec_04_img_box { overflow: hidden; width: 22%;} .sec04_right .j_info > li a > .right_con01 .sec_04_img_box .j_img_box {position:relative; padding:21.6% 0; overflow:hidden;margin:0} .sec04_right .j_info > li a > .right_con01 .sec_04_img_box img { border-radius: 2%; position:absolute; top:0; left:0; right:0; bottom:0; max-width:100%; max-height:100%; width:100%; } .sec04_right .j_info > li a > .right_con01 .sec_con_desc { padding: 17px 30px 17px 30px; } .sec04_right .j_info > li a > .right_con01 .sec_con_desc .sec_04_txt p {white-space: nowrap; overflow: hidden; } .j_info ul li a {display:block} .sec_04_cs_box { position: relative;} .sec_04_cs_box.cs_box02 {z-index:1; background:#f7f7f7; border-radius:8px; padding:30px;} .sec_04_cs_box { background:#f7f7f7; border-radius:8px; padding:30px;} .sec_04_cs_box .sec_con_desc .sec_04_txt p + p { margin-top: 15px; } .sec_04_cs_date > ul > li dl { display: flex; } .sec_04_cs_date > ul > li dl dt { width: 65px; font-size: 0.9375rem; font-weight: 500; color: #8f8f8f; } .sec_04_cs_date > ul > li dl dd { width: calc(100% - 65px); font-size: 1rem; font-weight: 500; color: 333333; } .sec_04_cs_rank p a i { width: 20px; height: 20px; display: inline-block; text-align: center; line-height: 20px; border: 1px solid #8f8f8f; margin-right: 8px; color: #8f8f8f; } .sec_04_email_iq p i { display: inline-block; width: 2px; height: 13px; background: #333333; margin: 0 9px; } .j_more_btn { text-align: center; } .j_more_btn button { width: 250px; height: 50px; border-radius: 25px; border: 1px solid var(--color-basic); } .j_more_btn button i { margin-left: 18px; } .j_more_btn a { border-radius: 25px; border: 1px solid var(--color-basic); padding:10px 30px } .j_more_btn a i { margin-left: 18px; } .mo_sec_04_img01 { display: none; } @media screen and (max-width: 1280px){ .sec04_left {display:none;} .sec04_right {width:100%;} } @media screen and (max-width: 1080px){ /* .sec04_left {padding-right:40px;} */ .sec04_left {display:none;} .sec04_right {width:100%;} .sec_04_cs_box.cs_box02 {padding:20px;} .sec_04_cs_box {padding:20px;} /* .sec04_right .j_info > li > .up_load_tm {display:none;} */ } @media screen and (max-width: 767px){ .sec_04_cs_box.cs_box02 {padding:10px;} .sec_04_cs_box {padding:20px 10px 10px 10px;} } @media screen and (max-width: 575px){ .sec04_right .j_info > li a > .up_load_tm { position: absolute; right: 15px; top: 20px; } } @media screen and (max-width: 720px){ .sec04_right .j_info > li a > .right_con01 .sec_con_desc { padding: 17px 10px;} /* .j_info .up_load_tm { display: none; } */ .sec04_left {display:none;} .sec04_right {width:100%;} /* .pc_sec_04_img01 { display: none; } */ .mo_sec_04_img01 { display: block; } .sec04_right .j_info > li a > .right_con01 .sec_04_img_box img {width:auto; border-radius: 5%;} .sec04_right .j_info > li a > .right_con01 .sec_04_img_box { overflow: hidden; width: 20%;margin-left:10px;} .sec04_right .j_info > li a > .right_con01 .sec_04_img_box .j_img_box { padding:27.6% 0;} .j_more_btn button { width: 250px; height: 50px; } .j_more_btn a { width: 250px; height: 50px; } .sec_04_act_btn > .update_btn { width: 90px; height: 24px; line-height: 24px; } .sec_04_act_btn > .update_btn b {font-size:12px;} .sec_04_act_btn2 > .update_btn { width: 90px; height: 24px; line-height: 24px; } .sec_04_act_btn2 > .update_btn b {font-size:12px;} .j_star_btn > button a { width: 73px; height: 24px; line-height: 24px; font-size:12px;} .j_more_btn button i img { width: 8%;} .j_star_btn button i img { width: 10%; } .sec04_right .sec_tit { } } /* ------------------- foot */ footer{ border-top :1px solid #ebebeb; position:relative;} footer:after {content:'';position:absolute; width:100%; height:1px; left:0; top:90px; background:#ebebeb;} footer:before {content:'';position:absolute; width:100%; height:1px; left:0; top:194px; background:#ebebeb; display:none;} footer .foot_top {height:90px; line-height:90px;} footer ul.foot_link_line {display:flex; align-items:center; justify-content: space-between; height:100%; } footer ul.foot_link_line .left_foot_link {display:flex;} footer ul.foot_link_line .left_foot_link>a {display:block; height:100%; transition:.2s;} footer ul.foot_link_line .left_foot_link>a:hover {font-weight:700; } footer ul.foot_link_line .left_foot_link>a + a {margin-left:46px;} footer ul.foot_link_line .right_foot_link {display:flex;} footer ul.foot_link_line .right_foot_link>a {display:block; width:110px; height:40px; line-height:40px; border:1px solid #e9e9e9; border-radius:20px; text-align:center;} footer ul.foot_link_line .right_foot_link>a+a {margin-left:11px;} .foot_bott {padding:68px 0;} .foot_bott>ul {display:flex; justify-content: space-between;} .foot_bott>ul>li {position:relative;} .ft_account_info dl {display:flex;} .ft_account_info dl dt {width:73px} .ft_account_info dl dd {width:calc(100% - 73px);} .ft_cs_info p i {vertical-align:middle;} .ft_cs_info p i img {margin-right:8px;} .ft_cs_info dl {display:flex;} .ft_cs_info dl dt {width:73px} .ft_cs_info dl dd {width:calc(100% - 73px);} .ft_address_bx>p{line-height: 1.48em;} .ft_address_bx .f_copy {margin-top:20px;} .ft_navi_mo {display:none; position:relative;} .ft_navi_mo a {display:block; padding:5px; } /* .ft_navi_mo:after {content:''; width:1px; height:10px; background:#666; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);} */ /*mobile*/ .mo_right_foot_link {display:none} /*mobile foot*/ .foot_bott.mo_foot {display:none;} .foot_bott.mo_foot .ft_account_info {text-align:center; border-right: 1px solid #ebebeb;} .foot_bott.mo_foot .ft_cs_info {text-align:center;} @media screen and (max-width: 1280px){ footer ul.foot_link_line .left_foot_link>a + a {margin-left:18px;} footer ul.foot_link_line .right_foot_link>a {width:90px;} } @media screen and (max-width: 1080px){ .foot_bott.pc_foot {display:none;} .foot_bott.mo_foot {display:block;} footer:after {display:none;} footer .foot_top {display:none;} footer ul.foot_link_line .left_foot_link>a + a {margin-left:23px;} .foot_bott {padding:1px;} .foot_bott>ul {flex-wrap: wrap;} .foot_bott>ul>li:nth-of-type(3) {width:100%;} .foot_bott>ul>li:nth-of-type(4) {width:100%;} .foot_bott>ul>li:nth-of-type(n+3) {margin-top:10px;} .j_ft_logo {margin:5px 0; text-align:center; } .j_ft_logo img {width:16.7%; height: auto; } .ft_address_bx {text-align:center;} .ft_address_bx p {line-height: 1.38em;} .ft_address_bx .f_copy {margin-top:0px;} .ft_account_info dl {justify-content: center;} .ft_account_info dl dt {width:70px;} .ft_account_info dl dd {width: calc(100% - 20px);} .mo_right_foot_link {display:flex; flex-wrap: wrap; justify-content:center;margin-top:10px; max-width: 100%} .mo_right_foot_link a {font-size:11px; display:block; width:90px; height:30px; line-height:30px; border:1px solid #e9e9e9; border-radius:20px; text-align:center; margin-right:5px;margin-top:5px;} .ft_cs_info dl dd {width:calc(100% - 20px);} .ft_cs_info p i img {width:7%; margin-right:5px;} .ft_navi_mo {display:flex; justify-content: space-around;align-items: center; margin-top:10px;} } @media (max-width: 767px) { /* 모바일이하 */ .ft_account_info dl dt, .ft_account_info dl dd {width:100%;text-align:center;} .ft_account_info dl { width:100%; text-align:center; flex-direction: column; align-items: flex-start; } .ft_cs_info dl dt, .ft_cs_info dl dd {width:100%;text-align:center;} .ft_cs_info dl { width:100%; text-align:center; flex-direction: column; align-items: flex-start; } } @media screen and (min-width: 575px){ .inner_pc {max-width:1480px; margin: 0 auto; width:92%; position:relative;} } .mo_menu_inner {max-width:1480px; margin: 0 auto; width:98%; position:relative;} .m_br {display:none;} /*20231025 추가 수정*/ #mg_header .hd_bottom .left_box > .hd_nav > ul > li > a.nav_cs {position:relative;} /* #mg_header .hd_bottom .left_box > .hd_nav > ul > li > a.nav_cs:before{content:'';position:absolute; width:20px; height:20px; left:-5px; top:50%; transform:translateY(-50%); background:url('/img/icon/cs_icon.png') no-repeat center center /cover;} */ #mg_header .hd_bottom .left_box > .hd_nav > ul > li > a {position:relative;} #mg_header .hd_bottom .left_box > .hd_nav > ul > li > a .nav_emp_num{position:absolute; width:35px; height:20px; right:0px; top:3px; border-radius:5px; background: var(--color-basic); z-index:20;text-align:center; display:block; color:#fff; line-height:17px; letter-spacing: 0.06em; font-size:10px;} #mg_header .hd_bottom .left_box > .hd_nav > ul > li > a .nav_emp_num:after {content:''; position:absolute; left:4px; top:16.8px; border-left:5px solid transparent; border-right:6px solid transparent; border-top: 7px solid var(--color-basic);} #mg_header .hd_bottom .left_box > .hd_nav > ul > li > a .add_head_icon {width:80px; display:block; background:#fd2929; color:#fff; position:absolute; left: calc( 100% - 63px ); top:3px; text-align:center; height:20px; line-height:20px; z-index:20; padding:0 5px; font-size:12px; background:#ff0000; letter-spacing:0.04em; border-radius:5px;} #mg_header .hd_bottom .left_box > .hd_nav > ul > li > a .add_head_icon:after {content:''; position:absolute; left:7px; top:18px; border-left:5px solid transparent; border-right:6px solid transparent; border-top: 7px solid #ff0000;} .kb_icon img{display:block; width:100%; max-width:199px;} .emp_banner_box { width:100%;} .emp_banner_box ul li figure a img {width:100%; border-radius:8px; overflow:hidden;} .add_plus {margin-left:10px;} @media (min-width: 769px) and (max-width: 1080px) { /* PC와 모바일화면 사이 */ #mg_header .hd_bottom .left_box > .hd_nav > ul > li > a .nav_emp_num{line-height:20px;} } .add_sec03_cont01 {display:flex; flex-wrap:wrap;} @media (min-width: 768px) { /* 모바일이상 */ .add_sec03_cont01 li > a { display: flex; } } .add_sec03_cont01 li {width:calc((100% - 10px*3)/4); margin-right:10px; display:flex; border:1px solid #eee; box-sizing:border-box; padding:15px 15px 15px 15px; cursor: pointer; transition:.25s; border-radius:10px;} .add_sec03_cont01 li:hover {border-color: var(--color-basic);} .add_sec03_cont01 li:nth-of-type(n + 5) {margin-top:18px;} .add_sec03_cont01 li .ad_left_box {width:90px; text-align:center;} .add_sec03_cont01 li .ad_right_box {width:calc(100% - 90px);padding-left:10px; max-width:250px} .add_sec03_cont01 li .ad_left_box figure { border-radius:50%; overflow:hidden;} .add_sec03_cont01 li .ad_left_box figure img {border-radius:50%; width:60px; height:60px;} .add_sec03_cont01 li .ad_right_box { -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden; text-overflow: ellipsis; display: -webkit-box;} .add_sec03_cont01 li .ad_right_box h2 { -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden; text-overflow: ellipsis; display: -webkit-box;} .add_sec03_cont01 li .ad_right_box p { overflow: hidden;white-space: nowrap;text-overflow: ellipsis; word-break: break-all;} .add_sec03_cont01 li:nth-of-type(4n) {margin-right:0;} .add_sec03_cont01 li.non_ad_pro {flex-direction: column; justify-content: center; align-items: center; background:#fcfcfc; border:1px solid #eee;} .add_sec03_cont01 li.non_ad_pro h2 a {color:#bababa;} .non_pro_btn {width:120px; height:30px; line-height:30px; text-align:center; display:block; border:1px solid #bababa; border-radius:5px; color:#bababa;} @media screen and (max-width: 1500px){ .add_sec03_cont01 li .ad_right_box {width:calc(100% - 90px);padding-left:10px; max-width:200px} } @media screen and (max-width: 1350px){ .add_sec03_cont01 li .ad_right_box {width:calc(100% - 90px);padding-left:10px; max-width:150px} } @media screen and (max-width: 1080px){ /**/ .add_sec03_cont01 li {width:calc((100% - 20px)/2); margin-right:20px;} .add_sec03_cont01 li:nth-of-type(2n) {margin-right:0;} .add_sec03_cont01 li:nth-of-type(n + 3) {margin-top:18px;} } @media screen and (max-width: 720px){ .add_sec03_cont01 li .ad_right_box {width:calc(100% - 90px);padding-left:0px;} } .add_detail_tab_con {display:flex; justify-content: center;width: 100%; max-width: 100%; margin: 0 auto; align-items:center; } .add_detail_tab_img_box {margin-right:43px; min-width: 250px; text-align:center} .add_detail_tab_desc {width:calc(100% - 74px);} .add_detail_tab_desc dl {display:flex; width:100%;} .add_detail_tab_desc dl dt {width:67px;} .add_detail_tab_desc dl dd {width:calc(100% - 67px);} .add_detail_tab_desc02 {display:flex; margin-top:10px;} .add_detail_tab_desc02 dl + dl {margin-left:80px;} .gen_c {color:#ff0000;} @media screen and (max-width: 900px){ .add_detail_tab_desc02 dl + dl {margin-left:40px;} .add_detail_tab_img_box {margin-right:20px;} } @media screen and (max-width: 790px){ .add_detail_tab_desc02 {flex-wrap:wrap;} .add_detail_tab_desc02 dl + dl {margin-left:0px; margin-top:10px;} .add_detail_tab_img_box {margin-right:0px; text-align: center;} .add_detail_tab_con {flex-wrap:wrap;} .add_detail_tab_desc {margin-top:15px;} } @media screen and (max-width: 767px){ } @media screen and (max-width: 720px){ .add_sec03_cont01 li {padding:10px; flex-wrap:wrap; width:calc((100% - 10px)/2); margin-right:10px;} .add_sec03_cont01 li:nth-of-type(2n) {margin-right:0;} .add_sec03_cont01 li:nth-of-type(n + 3) {margin-top:10px;} .add_sec03_cont01 li .ad_right_box h2{font-size:14px;} .add_sec03_cont01 li .ad_left_box {width:100%; display:flex; align-items:center;} .add_sec03_cont01 li .ad_left_box figure {margin-right:15px; margin-top:0px;} .add_sec03_cont01 li .ad_left_box figure img {width:47px; height:47px;margin-top:5px;} .sec03_pro_info {text-align:left;} .add_sec03_cont01 li .ad_right_box {width:100%; } } .sec03 .sec03_cont > ul > li.non_prefer {background:#fcfcfc; border:1px solid #eee;} .non_prefer a {display:flex; display: flex;flex-direction: column; align-items: center; justify-content: center;height: 100%;} .non_prefer a h2 {color:#bababa;} /*sec04 추가 수정*/ .add_sec04_cate .sec04_cate_list {display:flex; margin-bottom:10px; flex-wrap: wrap; gap: 1px;} .sec04_cate_list li.on a {border-color: var(--color-basic); background: var(--color-basic); color:#fff;} .sec04_cate_list li {margin-right:5px;margin-bottom:5px;} .sec04_cate_list li a {display:block; padding:10px; border-radius:10px; border: 1px solid var(--color-gray-l); font-weight:500;} /* 부모 컨테이너 위치 잡기 */ .set04_cag { position: absolute; left: 10px; top: 0; z-index: 10; /* 이미지 위로 올라오도록 보장 */ } .set04_cag span img { display: inline-block !important; width: 60px !important; /* !important를 붙여서 우선순위 확보 */ max-width: 60px !important; /* 최대 너비도 10으로 고정 */ height: auto !important; position: static !important; } @media screen and (max-width: 720px){ .set04_cag {top:-2px;} .set04_cag span img { width: 50px !important; /* !important를 붙여서 우선순위 확보 */ max-width: 50px !important; /* 최대 너비도 10으로 고정 */ } } /* ------------------- 서브 비주얼*/ .employ {line-height: 1 !important;} .employ .sub_visual > ul {display:flex;} .employ .sub_visual > ul > li {width:calc((100% - 10px)/2); margin-right:10px;} .employ .sub_visual > ul > li:nth-of-type(2) {margin-right:0;} .emp_sub_left img {width:100%;height:120px} .emp_sub_right ul {display:flex; height:100%; } .emp_sub_right ul li {width:calc((100% - 10px)/2); margin-right:10px; text-align:center; border-radius:8px; background:#fff9e2; height:100%; padding:15px 0;} .emp_sub_right ul li a {display: flex; width:188px; height:31px; text-align:center; border-radius:30px; background: var(--color-basic); color:#fff; justify-content: center;align-items: center;margin: 0 auto;} /*수정*/ .emp_sub_right ul li a i {margin-left:15px;} .emp_sub_right ul li a i img {display:inline-block; vertical-align:middle;} .emp_sub_right ul li p {margin-top:10px;} .emp_sub_right ul li:nth-of-type(2) {margin-right:0;} @media screen and (max-width: 1280px){ } @media screen and (max-width: 1080px){ .employ .sub_visual > ul > li {width:calc((100% - 10px)/2); margin-right:0px;} .employ .sub_visual > ul {flex-wrap:wrap;} .employ .sub_visual > ul > li {width:100%;} .emp_sub_left img {height:auto;} .emp_sub_right ul {display:none;} } @media screen and (max-width: 720px){ .emp_sub_right ul {display:none;} /* .emp_sub_right ul {height:85%;} .emp_sub_right ul li a {width:140px;} .emp_sub_right ul li a i {margin-left:10px;} */ } /* ------------------- 구인,구직 지역,검색*/ .employ .j_sub_tit {position:relative;cursor:pointer;} .employ .j_sub_tit .area_down_btn {position:absolute; right:0; width:60px; top:-10px;} .employ .j_sub_tit .area_down_btn i img {width:50%;} .j_sub_tit {display:flex; align-items: baseline;} .j_sub_tit span {margin-left:52px; display:block;} .j_locate_box {background:#fcfcfc; padding:38px; box-sizing:border-box; border:1px solid #eef4f7; border-radius:15px; } .j_locate_map {display:none;} .j_locate_map>ul>li {display:flex; flex-wrap:wrap; align-items: flex-end; } .j_locate_map>ul>li>button {width:11.11%; } .j_locate_map>ul>li>button:nth-of-type(n+10) {margin-top:30px;} .j_locate_map>ul>li>button.on i {color: var(--color-basic-m);} .j_locate_map ul li button img { max-width: 45px !important; /* 강제로 25px로 제한 */ height: auto !important; max-height: 45px; } .j_locate_map>ul>li>button.on img.map_on {display:block; width:45px; height: auto; max-height: 45px;} .j_locate_map>ul>li>button.on img.map_off {display:none; width:45px; height: auto; max-height: 45px;} .j_locate_map figure {display: flex; flex-direction: column; align-items:center;} .j_locate_map figure i {margin-top:18px;} .j_locate_map span {display: flex; flex-direction: column; align-items:center;} .j_locate_map span i {margin-top:18px;} .j_locate_map img.map_on {display:none;} .sphere_box_wrap .sphere_box {z-index:2;} .sphere_box {background: #fcfcfc; padding: 38px; box-sizing: border-box;border: 1px solid #eef4f7; border-radius: 15px; position:relative; display:none;} .sphere_detail_search {right:0;position: absolute;z-index: 1; display:block; width: 127px; height: 45px; text-align: center; line-height: 45px; color: #878787; border-radius: 35.5px; border: 0px solid #c1c1c1; letter-spacing: -0.01em; margin: 10px 0;} .sphere_con>ul>li {display: flex; align-items: center; flex-wrap:wrap; gap:10px;} .sphere_con>ul>li span {display:block; height:40px; border-radius:20px; border:1px solid #929292; text-align:center; line-height:40px;cursor:pointer; } .sphere_con>ul>li span.on {color: var(--color-basic-m); border-color: var(--color-basic-m);} .j_gender span{display:inline-block; height:40px; border-radius:20px; border:1px solid #929292; text-align:center; line-height:40px; margin-right:8px;cursor:pointer;} .j_gender span:nth-of-type(3){margin-right:0;} .j_gender span.on {color: var(--color-basic-m); border-color: var(--color-basic-m);} .j_btn_sub_tit a i {margin-left:15px;} .j_btn_sub_tit {justify-content: space-between;} .se_search {display:flex;} .se_search > li {width:50%;} .sphere_search_btn {text-align:center;} .sphere_search_btn i {margin-right:15px;} .sphere_search_btn i img {vertical-align: middle; width: 7%;} .sphere_search_btn span{display:block; width:250px; height:70px; line-height:70px; border-radius:35px; background: var(--color-basic); color:#fff;} .employ_page_btn {text-align:center;} .employ_page_btn span {margin-right:20px; cursor:pointer;} .employ_page_btn .next_btn {display: inline-block; vertical-align: middle;} .all_emp_search {display:flex; align-items:center; position:relative; height:50px; border-radius:25px; max-width: 470px;width: 100%;} .search_sli {position:relative; } .search_sli>a{display:block; width:111px; height:50px; text-align:center; font-size:0.875rem; color:#333333; font-weight:400; background:#fff; position:relative; line-height:50px; border-radius: 25px 0 0 25px; border-top:1px solid #d6d6d6; border-bottom:1px solid #d6d6d6; border-left:1px solid #d6d6d6;} .search_sli >ul {position:absolute; width:111px; background:#fff; box-sizing: border-box; text-align: center; display:none; overflow:hidden;} .search_sli >ul>li {width:100%;} .search_sli >ul>li>a {padding:10px; display:block; text-align:center; font-size: 0.875rem; color: #333333; font-weight: 400;} .search_sli>a:after {position:absolute; right:0; top: 50%; transform:translateY(-50%); width:1px; height:20px; background:#eaeaea; content:'';} .search_sli i {position:absolute; top:50%; transform:translateY(-50%); right:10px; } .search_sli i img {vertical-align:middle;} .all_emp_search input {width:calc(100% - 111px); height:50px; padding-left:20px; border:1px solid #d6d6d6; border-left:none; border-radius:0 25px 25px 0;} .all_emp_search .sli_con_btn {position: absolute;right: 25px;top: 50%;transform: translateY(-50%);} @media screen and (max-width: 1080px){ .sphere_box {padding:28px;} .j_locate_box {padding:20px;} .sphere_search_btn span {width:130px; height:40px; line-height:40px;} .sphere_search_btn i img {width:10%;} .sphere_detail_search {float:none;} } @media (max-width: 767px) { /* 모바일이하 */ .sphere_box {padding:18px;} .j_sub_tit span {margin-left:20px;} .j_locate_box {padding:18px;} .j_locate_map>ul>li>button {width:16%; } .j_locate_map>ul>li>button:nth-of-type(n+5) {margin-top:10px;} .sphere_search_btn span {width:130px; height:40px; line-height:40px;} .sphere_search_btn i {margin-right:5px;} .sphere_btn {margin:15px 0; width:120px; height:30px; line-height:30px;} .sphere_detail_search {width: 70px; height: 30px; line-height:30px; margin:15px;} .j_btn_sub_tit a {font-size:12px;} .j_btn_sub_tit a i{margin-left:7px; } .j_btn_sub_tit a i img {width: 10%;} .se_search {flex-wrap:wrap;} .se_search > li {width:100%;} .search_sli>a {font-size:14px;} .search_sli >ul>li>a {font-size:14px;} .employ .j_sub_tit .area_down_btn {top:-2px;} .employ .j_sub_tit .area_down_btn i img {width:35%;} } /* ------------------- 구인썸네일형태 리스트*/ .tab-content ul.de_con li{display:flex;} .tab-content ul.de_con li + li {margin-top:20px;} .tab-content ul.de_con li dl {display:flex; width:50%;} .tab-content ul.de_con li dl dt {width:130px; } .tab-content ul.de_con li dl dd {width:calc(100% - 130px);} .recruit_box {display:flex;} .recruit_box li {width:50%; font-weight: 400;} .recruit_box li p + p {margin-top:20px;} .recruit_box li p i {margin-right:40px;} .recruit_box li p b {} @media screen and (max-width: 1080px){ .tab-content ul li dl dt {width:90px;} } @media screen and (max-width: 767px){ .tab-content ul {} .tab-content ul.de_con li dl dt{width:80px;} .tab-content ul.de_con li dl dd {width:calc(100% - 60px);} .tab-content ul.de_con li + li {margin-top:10px;} .tab-content ul.de_con li {flex-wrap:wrap;} .tab-content ul.de_con li + li {margin-top:0px;} .tab-content ul.de_con li dl {width:100%; margin-top:15px;} .tab-content ul {flex-wrap:wrap;} .recruit_box li p b {margin-left:10px;} .recruit_box li p + p {margin-top:15px;} .recruit_box li {width:100%; margin-top: 0px;} .recruit_box li:nth-child(2) {margin-top: 40px;} .recruit_box li p i {margin-right:20px;} } /* ------------------- 메뉴바 올메뉴*/ #mg_header .all_menu { position: absolute; width: 100%; height: 280px; background: #fff; top: calc(100% - 0px); left: 0; z-index: 1; display:none; border-radius: 0 0 20px 20px; box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.25); background: var(--color-basic); padding:20px; } #mg_header .all_menu:before {width:100%; position:absolute; left:-99%; height:100%; background: var(--color-basic); top:0; content:''; box-shadow: -5px 4px 5px 0px rgba(0, 0, 0, 0.25);} #mg_header .all_menu:after {width:100%; position:absolute; right:-99%; height:100%; background: var(--color-basic); top:0; content:''; box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.25);} #mg_header .all_menu > ul { display: flex; justify-content: center; align-items: center; height: 100%; background:#fff; border-radius:10px; } #mg_header .all_menu > ul > li { width: 320px; height: 100%; padding: 30px 15px; position: relative; } #mg_header .all_menu > ul > li:hover strong {color: var(--color-basic);} #mg_header .all_menu > ul > li:last-child:after { display: none; } #mg_header .all_menu > ul > li:after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 160px; background: #f0f0f0; } #mg_header .all_menu > ul > li > strong { font-size: 1.13rem; font-weight: 700; color: #2f2f2f; transition:0.25s; display: block;} #mg_header .all_menu > ul > li > ul { border-top: 1px solid #666; margin-top: 15px; padding-top: 15px; } #mg_header .all_menu > ul > li > ul > li { padding:3px 0px; } #mg_header .all_menu > ul > li > ul > li>a{ padding:0px 15px; transition:.2s;} #mg_header .all_menu > ul > li > ul > li>a:hover {color: var(--color-basic-m);} @media screen and (min-width: 1200px) { #mg_header .all_menu { display: none; } } /* ------------------- 확인되지않음*/ .hurry { display: inline-block; padding:0 7px 0 7px;background: #ff2424; height: 25px; border-radius: 18px; text-align: center; line-height: 25px; margin-right: 7px; } @media screen and (max-width: 1080px){ .hurry { padding:1px 7px 0 7px; } } .emp_v_info_box {display:flex; justify-content: flex-end;} .emp_v_info_box p + p {margin-left:20px;} .emp_v_info_box i img {display:inline-block; width:15px; height:15px; vertical-align:middle; margin-right:5px;} i.bi { line-height: 1; height: 1em; vertical-align: middle; } /* ------------------- 페이지 */ .step-section {font-size:18px; font-weight: var(--font-m); word-break: keep-all;} .step-section h2 { font-weight: var(--font-b); color: var(--color-basic); margin-bottom:15px} .step-section p {margin-top:5px; overflow: hidden;} .step-section.mg p {margin-left:10px;} .scope-section { margin-top:35px;} .scope-section {font-size:18px; font-weight: var(--font-m); word-break: keep-all;} .scope-section h2 { font-weight: var(--font-b); color: var(--color-basic); margin-bottom:15px} .scope-section p {margin-top:5px; overflow: hidden; color: var(--color-gray);} .scope-section.mg p {margin-left:10px;} .action-section { font-size:18px; margin-top:35px; text-align:center; font-weight: var(--font-m); border-top:1px solid #e3e3e3;} .action-section .action-text {margin-top:30px} .action-section .action-text span input {max-width:180px; width:100%;} .action-section .action-button { display: flex; align-items: center; justify-content: center; margin-top:35px} .action-section .action-button a { padding-left:20px; padding-right:20px;height:70px; border-radius:35px; line-height:70px; background:#111111; color:#fff; display:block; text-align:center; } .action-section .action-button a + a {margin-left:17px;} .action-section .action-button a i {margin-right:20px;} .action-section .action-button a i img {vertical-align:middle;} @media screen and (max-width: 1023px){ .step-section p {margin-left:0; } .scope-section p {font-size:16px;} .action-section .action-text {margin-top:20px} .action-section .action-text span input {text-align:center; width:100px;} .action-section .action-button a { height: 60px; line-height: 60px;} .action-section .action-button a i img {width:13%} .action-section .action-button a i {margin-right:10px;} } /* ------------------- 롤링*/ .mainSec02 {position:relative;} .mainSec02 .swiper { .mainSec02 .swiper-button-prev, .mainSec02 .swiper-button-next { position:static; margin-top:0; } } .swiper-button-next.ms02_next {background: url(/images/icon/ms02_right_arr.png) no-repeat center / cover; width:40px; height:40px; right:-20px; box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.1); border-radius:50%; overflow:hidden; } .swiper-button-prev.ms02_prev {background: url(/images/icon/ms02_left_arr.png) no-repeat center / cover; width:40px; height:40px; left:-20px; box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.1); border-radius:50%; overflow:hidden;} .swiper-button-next::after,.swiper-button-prev::after {display: none;} .mainSec02 .navigation-wrapper { width:100%; margin:0 auto; display:flex; justify-content:space-between; position:absolute; left:50%; transform:translate(-50%,-50%); z-index:70; } .mainSec02 .navigation-wrapper { top:57%; } @media (max-width: 767px) { /* 모바일기기전용 */ .mainSec02 .navigation-wrapper { top:60%; } } .ms02Swip_partner .swiper-wrapper .swiper-slide figure img {width:100%; } .ms02Swip_partner .swiper-wrapper .swiper-slide {background:#f4f5f6; border-radius:15px; overflow:hidden; padding:10px 0 20px; } .ms02tit {font-size:16px; font-weight:var(--font-sb); text-align:center; margin-top:17px;} /* ------------------- 광고문의*/ .employ_content {display:flex; border-radius:15px; overflow: hidden;} .employ_content {margin-top:30px;} .employ_content .employ_img_box {width:50%;background: var(--color-gray-th);} .employ_content .employ_con01_wrap {width:50%; background: var(--color-gray-th); padding:20px 20px 20px 20px; box-sizing: border-box;} .employ_content .employ_con01_wrap .employ_con01_chk {} .employ_img_box_con01 { width: 100%;} .employ_img_box_con01 img { display:block; max-height:360px; border-radius:15px;} .employ_con01 h2 {font-size:26px; font-weight: var(--font-b)} .employ_con01 ul {margin-top:30px;} .employ_con01 .txt_tit {display:flex; align-items: center;} .employ_con01 .txt_tit span {background:#ff2424; display:block; letter-spacing:-0.010em; border-radius:13px; width:100px; height:25px; text-align:center; line-height:25px; margin-right:11px;} .employ_con01 .guide {} .employ_con01 .guide.mg {margin-left:45px} .employ_con01_list {display:flex; align-items:center;} .employ_con01_list + .employ_con01_list {margin-top:5px;} .employ_con01_date {margin-left:12px; text-align:right} .employ_con01_date {width:70px;} .employ_con01_date.mg {width:220px;} /* .employ_con01_price {width:calc(100% - 110px);} */ .employ_con01_price {width:160px; padding-left:20px; text-align:right} .employ_con01_price.mg {width:120px; } .employ_con01_chk {display:none;} .employ_left {max-height:1010px;} @media screen and (min-width: 1024px){ .employ_con01 {margin-left:5%} } @media (max-width:1399px){ .employ_img_box_con01 img { width:100%; } } @media (max-width:1199px){ .employ_img_box_con01 img { width:100%; } } @media screen and (max-width: 1023px){ .sphere_con>ul>li {flex-wrap:wrap; gap:5px;} .employ_content {flex-wrap:wrap;} .employ_content {margin-top:20px;} .employ_content .employ_img_box {width:100%;} .employ_content .employ_con01_wrap {width:100%;} .employ_content .employ_con01_wrap {padding:20px;} /* .employ {padding:45px 0;}*/ .employ_img_box_con01 {width: 100%; } .employ_img_box_con01 img {width:100%; display:block; max-height:250px; width:70%;} .employ_con01 ul {margin-top:20px;} .employ_con01 h2 {text-align:right; font-size:22px; } .employ_con01 .guide.mg {margin-left:0px; text-align:right;} .employ_con01_list {justify-content: space-between;} .employ_con01_list span{font-size:16px;} .employ_con01_list p {font-size:16px;} .employ_con01_list + .employ_con01_list {margin-top:10px;} .employ_con01_date.mg {width:70%;} .employ_con01_price {width:140px;} .employ_con01_price.mg {width:30%; min-width:110px} } @media (max-width: 767px) { /* 모바일이하 */ .employ_img_box_con01 img {width:100%; display:block; max-height:250px;} } .sch_f_wrap{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 1100;background-color: rgba(0,0,0,.85);display: none;} .sch_f_box{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 94%;max-width: 750px;} .sch_f_form{position: relative;} .sch_input{display: block;width: 100%;height: 70px;background: transparent;border: none;border-bottom: 3px solid #FFF;outline: none;font-size: 26px;color: #FFF;font-weight: 900;padding-right: 70px;} .sch_input::placeholder{color: #FFF;} .sch_button{position: absolute;top: 0;right: 0;width: 70px;height: 70px;z-index: 1;} .sch_button i{color: #FFF;font-size: 1.9rem;} .keyword_wrap{margin-top: 25px;} .kw_box{float: left;width: 50%;} .kw_box strong{color: #FFF;margin-bottom: 15px; font-size: 24px; font-weight: 700; display: block;} .kw_box li a{display: block; font-size: 18px; font-weight: 700; width: 100%;height: 100%;padding: 10px 15px 10px 0;color: rgba(255,255,255,.4);transition: color .2s;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} .kw_box li a:hover{color: rgba(255,255,255,1);text-decoration: underline;} .sch_close{position: absolute; top: calc(env(safe-area-inset-top, 0px) + 0px) !important; right: 50px;width: 80px;height: 80px;z-index: 1; } .sch_close span{position: absolute;top: 39px;left: 15px;width: 50px;height: 2px;background: #FFF;transition: transform .3s ease;} .sch_close span:nth-child(1){transform: rotate(45deg);} .sch_close span:nth-child(2){transform: rotate(-45deg);} .sch_close:hover span{transform: rotate(0);} @media screen and (max-width: 1480px){ .sch_close{top: 0;right: 0;} } @media screen and (max-width: 768px){ .sch_input{height: 55px;padding-right: 55px;font-size: 16px;} .sch_button{width: 55px;height: 55px;} .sch_button i{font-size: 18px} .kw_box>ul{font-size: 12px;} .kw_box strong{font-size: 20px;} .kw_box li a{padding: 6px 10px 6px 0;} .sch_close{width: 50px;height: 50px;} .sch_close span{top: 24px;left: 12.5px;width: 25px;} }