/*---CSS RESET---*/ @font-face { font-family: 'Pretendard Variable'; font-display: optional; } *{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; }/*텍스트 사이즈 고정*/ body{ font-family: 'Pretendard Variable',-apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; font-size:16px;font-weight:300;font-style: normal;text-decoration: none;color: #222;} li{list-style: none;} table{border-spacing: 0;border-collapse: collapse;} input, select, textarea, button{box-sizing: border-box;} button{background: none;border: none;cursor: pointer;outline: none;} /*공통클래스*/ .k_eng{}/*영문 폰트 변경*/ .clearfix::after{content: "";clear: both;display: block;} .k_w100{display: block;width: 100%;height: 100%;} .center_pos{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}/*포지션 객체 중양정렬*/ .bg{background-repeat: no-repeat;background-size: cover;background-position: center center;}/*background-image - 반응형*/ /*공통클래스*/ /*텍스트사이즈*/ @media screen and (min-width:1481px){ html, body{font-size: 16px;}/*body와 확인 할 것*/ } @media screen and (min-width:721px) and (max-width:1480px){ html, body{font-size: 14px;}/*body와 확인 할 것*/ } @media screen and (max-width:720px){ html, body{font-size: 12px;}/*body와 확인 할 것*/ } /*텍스트사이즈*/ @media screen and (min-width:721px){ br.br_m{display: none;}/*br 모바일에서만 줄내림*/ } @media screen and (max-width:720px){ br.br_d{display: none;}/*br 데스크탑에서만 줄내림*/ } /* 중복될수 있는건 앞에 eb- 붙이기 */ body.is-pc .ko { font-variant-numeric: tabular-nums;} /* 숫자 가로 폭 동일하게 */ /* ------------------- 기본 */ :root { /*color*/ --color-text: #333333; --color-black: #000000; --color-white: #FFFFFF; --color-sky: #87CEEB; --color-green: #008000; --color-aqua-l: #B6FFFF; --color-aqua: #00FFFF; --color-aqua-sb: #00EEEE; --color-red-l: #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-l: #E6F9FC; --color-mg: #15D0F2; --color-mg-b: #07afcd; --color-ma-l: #FFE8C2; --color-ma: #FF7800; --color-ma-b: #E66B00; --color-im-l: #FEE3EF; --color-im: #E50150; --color-im-b: #B1124D; --color-eb-l: #DEEDFF; --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, 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-r, a.eb-btn-gray-r {background: var(--color-gray-r); padding:3px 8px; text-align:center; color:#fff; 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-gray-el, a.eb-btn-gray-el {background: var(--color-gray-el); padding:3px 8px; text-align:center; color:#fff ; border-radius:5px;font-weight:var(--font-b); display:inline-block;} .eb-btn-gray-el: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);} /* ------------------- 백그라운드 */ .bg-basic, i.bg-basic, .badge.bg-basic { background-color: var(--color-basic); 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); } .bg-gray-l, i.bg-gray-l, .badge.bg-gray-l { background-color: var(--color-gray-l); } .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) { /* 모바일이하 */ .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) { } /* ------------------- 폰트사이즈 */ .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; } .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; } .mb70 { margin-bottom: 70px !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; } .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-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-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-pt1 { padding-top:1px !important; } .sm-pt10 { padding-top:10px !important; } .sm-pt20 { padding-top:20px !important; } .sm-pt40 { padding-top:40px !important; } .sm-mr14 { margin-right: 14px !important; } .sm-mr16 { margin-right: 16px !important; } .sm-mr18 { margin-right: 18px !important; } .sm-mb2 { margin-bottom: 2px !important; } .sm-mb3 { margin-bottom: 3px !important; } .sm-mb5 { margin-bottom: 5px !important; } .sm-mb10 { margin-bottom: 10px !important; } .sm-mb15 { margin-bottom: 15px !important; } .sm-mb20 { margin-bottom: 20px !important; } .sm-mb30 { margin-bottom: 30px !important; } .sm-mb40 { margin-bottom: 40px !important; } .sm-mb60 { margin-bottom: 60px !important; } .sm-mb65 { margin-bottom: 65px !important; } .sm-mb70 { margin-bottom: 70px !important; } .sm-mb80 { margin-bottom: 80px !important; } .sm-pb10 { padding-bottom:10px !important; } .sm-pb20 { padding-bottom:20px !important; } } @media (min-width:1024px) and (max-width:1279px) { /* 노트북 & 테블릿이상까지*/ .mdsm-pt1 { padding-top:1px !important; } } /* ------------------- line-height 줄간격 */ .lh14 { line-height:14px !important; } } .lh15 { line-height:15px !important; } } .lh20 { line-height:20px !important; } } .lh25 { line-height:25px !important; } } .lh30 { line-height:30px !important; } } .lh35 { line-height:35px !important; } } .lh40 { line-height:40px !important; } } .lh60 { line-height:60px !important; } } .lh0-8 { line-height:0.8;} .lh0-9 { line-height:0.9;} .lh1 { line-height:1;} .lh1-1 { line-height:1.1;} .lh1-2 { line-height:1.2;} .lh1-3 { line-height:1.3;} .lh1-5 { line-height:1.5;} .lh1-8 { line-height:1.8;} .lh2 { line-height:2;} .lh2-2 { line-height:2.2;} .lh2-3 { line-height:2.3;} .lh2-4 { line-height:2.4;} @media (min-width: 768px) { /* 모바일화면 이상 */ .md-lh0-8 { line-height:0.8;} .md-lh60 { line-height:60px !important; } } } @media (max-width: 767px) { /* 모바일기기전용 */ .sm-lh0-9 { line-height:0.9;} .sm-lh1-1 { line-height:1.1;} .sm-lh40 { line-height:40px !important; } } } /* ------------------- 공통여백 마가기준 설명 */ .eb-inner {max-width:1400px; width:92%; margin:0 auto; height: 100%; position: relative;} .eb-pd-visual { padding:40px 0 20px 0 } /* 메뉴와 타이틀간의 패딩*/ .eb-pd-index { padding:80px 0 0 0 } /* 인덱스의 큰영역별 간격 */ .eb-pd-sub { padding:40px 0 0 0 } /* 서브 대영역 ex) 비주얼 영역별*/ .eb-pd-sub-m { padding:35px 0 0 0 } /* 서브 중영역 */ .eb-pd-sub-s { padding:30px 0 0 0 } /* 서브 소영역 ex) 사이트에 최신글, 최신댓글 */ .eb-pd-title { padding:0 0 20px 0 } /* 대타이틀 ex) 비주얼타이틀등 */ .eb-pd-title-m { padding:0 0 15px 0 } /* 중타이틀 */ .eb-pd-title-s { padding:0 0 10px 0 } /* 소타이틀 ex) 사이트영역 타이틀등 */ .eb-mg-sub { margin:40px 0 0 0 } /* 서브영역별 마진줘야할때 */ @media (max-width: 1023px) { /* 모바일,테블릿까지 */ .eb-pd-visual { padding:30px 0 0 0 } .eb-pd-index { padding:50px 0 0 0 } .eb-pd-sub { padding:30px 0 0 0 } .eb-pd-sub-s { padding:20px 0 0 0 } .eb-mg-sub { margin:30px 0 0 0 } } /* ------------------- 자주쓰는 */ .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 { 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); } @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 ; } /* ------------------- 레이아웃 */ .detailWrap {display:flex;} .detailContent {width: calc(100% - 386px);margin-right:47px;} @media (max-width:1279px){ /* 노트북까지 */ .detailContent {width:100%; margin-right:0;} } .subTop {} /* ------------------- 그누보드 게시글부분 웹뷰에서 이미지 리사이즈 정상작동안해서 추가 */ #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 { position:absolute; right:0px; background:#fff;width:25px;text-align:right; } .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:26px;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; } .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.ig {background: var(--color-ig-l); color: var(--color-ig-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;} } /* ------------------- 탑배너 */ .topBanner.close { display: none; } .tempBanner {background: linear-gradient(to right, #4beedc, #49c6f9); width:100%; position:relative; height:45px; text-align:center; line-height:45px; } .topBannerClose { width: 14px; height: 15px;position: absolute; top:50%; right:30%; transform:translateY(-50%); cursor:pointer;} .topBannerClose span {display: block;width: 100%; height: 1px;background-color: black; /* X자 표시를 위한 색상 */ position: absolute; top: 50%; left: 0;transform-origin: center;} .topBannerClose span:nth-of-type(1) {transform: rotate(45deg);} .topBannerClose span:nth-of-type(2) {transform: rotate(-45deg);} @media (max-width: 1023px) { /* 모바일,테블릿까지 */ .tempBanner {padding:0 20px; text-align:unset;} .topBannerClose {right:20px;} } /* ------------------- 스토어리뷰폼 */ .reviewForm {display:flex; margin-top:25px; } .reviewForm li {width:calc((100%)/2); padding:0px 1px;} /*-------------------------------------------------------------------------------------* * Common * *-------------------------------------------------------------------------------------*/ .w_container {position:relative; width:1400px; margin-left:auto; margin-right:auto;} .w_container img {max-width:100%} .w_container2 {position:relative; width:1300px; margin-left:auto; margin-right:auto;} .w_container2 img {max-width:100%} .w_clear {clear:both} @media (max-width:1480px) { .w_container {width:100%; padding:0 50px 0 50px;} .w_container2 {width:100%; padding:0 50px 0 50px;} } @media (max-width:1200px) { .w_container {width:100%; padding:0 20px 0 20px;} .w_container2 {width:100%; padding:0 20px 0 20px;} } @media (max-width:720px) { .w_container {width:100%; padding:0 15px 0 15px;} .w_container2 {width:100%; padding:0 15px 0 15px;} } @media screen and (min-width:981px){ br.br_m{display: none;} } @media screen and (max-width:980px){ br.br_d{display: none;} } /*-------------------------------------------------------------------------------------* * Contents * *-------------------------------------------------------------------------------------*/ /* 샵소개 */ .w_about {background:#f2f2f4; padding:75px 0 75px 0; font-weight:600; word-break:keep-all} .w_about .main_title {text-align:center; margin:0 0 30px 0} .w_about .main_title span{height:65px; line-height:65px; border-radius:65px; background:#3a2f0d; width:280px; display:inline-block; font-weight:bold; color:#fff; font-size:40px;} .w_about .s_title {text-align:center; font-size:20px; line-height:1.5; margin:0 0 30px 0} .w_about .s_title span {color:#d01b1b; font-size:1.2em} .w_about .about_con {display:table} .w_about .about_left {width:635px; display:table-cell; vertical-align:middle;} .w_about .about_right {width:calc(100% - 635px); display:table-cell; vertical-align:middle;line-height:1.8; font-size:18px;} .w_about .about_right span {width:100px; height:3px; background:#3a2f0d; margin:0 0 50px 0; display:inline-block } .w_about .about_right .about_text {color:#3a2f0d;} @media (max-width:1200px){ .w_about .about_left {width:50%; } .w_about .about_right {width:50%; } .w_about .s_title {margin:0 0 50px 0} .w_about .about_right span {margin:0 0 20px 0;} } @media (max-width:980px){ .w_about .about_con {display:block} .w_about .about_left {display:none } .w_about .about_right {display:block; width:100%; } } @media (max-width:720px){ .w_about .main_title span{height:50px; line-height:50px; border-radius:50px; width:auto; font-size:35px; padding:0 25px 0 25px} .w_about .s_title span {font-size:1em} .w_about .s_title {font-size:18px;} .w_about .about_right {font-size:16px;} } /* 코스정보 */ .w_course {background:url(/images/ebiz/course_bg.jpg) no-repeat; background-size:cover; padding:60px 0 95px 0; font-weight:600; word-break:keep-all} .w_course .main_title {text-align:center; margin:0 0 60px 0} .w_course .main_title span{height:65px; line-height:65px; border-radius:65px; background:#3a2f0d; width:280px; display:inline-block; font-weight:bold; color:#fff; font-size:40px;} .w_course .course_box {padding:30px 30px 50px 30px; background:rgba(255,255,255,0.8);text-align:center; margin:0 0 10px 0} .w_course .course_box .course_icon {margin:0 0 30px 0} .w_course .course_box .course_text {font-size:18px; line-height:1.8; color:#3a2f0d;} .w_course .course_table {display:table; width:100%; margin:0 0 10px 0} .w_course .course_table .course_left {width:380px; display:table-cell; background:rgba(58,47,13,0.5); position:relative} .w_course .course_table .course_left .course_num {font-family:"Montserrat"; font-weight:bolder; opacity:0.2; position:absolute; left:10px; top:10px; color:#fff; font-size:100px; line-height:1} .w_course .course_table .course_left .course_num_tit {display:none} .w_course .course_table .course_left .course_img {position:absolute; right:25px; bottom:25px} .w_course .course_table .course_right {width:calc(100% - 380px);display:table-cell; padding:0 0 0 10px} .w_course .course_table .course_right .course_line {background:rgba(255,255,255,0.5); padding:0 30px 0 30px; margin:0 0 1px 0} .w_course .course_table .course_right .course_line table {width:100%} .w_course .course_table .course_right .course_line table tr td {height:70px;color:#372720; line-height:1.5} .w_course .course_table .course_right .course_line table tr td.td01 {width:60%} .w_course .course_table .course_right .course_line table tr td.td02 {text-align:right} .w_course .course_table .course_right .course_line table tr td.td03 {text-align:right} .w_course .course_table .course_right .course_line table tr td.td04 {padding:25px 0 25px 0} .w_course .course_table .course_right .course_line .font01 {font-size:23px;color:#3a2f0d;} .w_course .course_table .course_right .course_line .font02 {text-decoration:line-through;display:inline-block;color:#6c6c6c;font-size:16px;} .w_course .course_table .course_right .course_line .font03 {font-weight:bold;font-family:"Montserrat";font-size:28px} .w_course .course_table .course_right .course_line .font04 {} .w_course .course_table .course_right .course_line .font05 {font-size:18px;} .w_course .course_banner {display: grid; grid-gap: 10px; grid-template-columns: repeat(5, 1fr);grid-auto-flow: column dense;grid-auto-rows: minmax(325px, auto);} .w_course .course_banner .course_banner_left {grid-column: 1 / span 2; } .w_course .course_banner .course_banner_right {grid-column: 3 / span 3; } @media (max-width:980px){ .w_course .course_box {display:none} .w_course .course_banner {display:none} .w_course .course_table {display:block;} .w_course .course_table .course_left {width:100%;display:block;padding:15px} .w_course .course_table .course_left .course_num { position:relative; left:0; top:0; font-size:60px; line-height:1;float:left;} .w_course .course_table .course_left .course_img {display:none} .w_course .course_table .course_left .course_num_tit {display:block; font-size:35px; color:#fff; float:left; position:relative; top:22px; margin:0 0 0 10px} .w_course .course_table .course_left .course_num_tit img {position:relative; top:-20px; height:30px } .w_course .course_table .course_right {width:100%;display:block; padding:0} } @media (max-width:720px){ .w_course {padding:60px 0 60px 0;} .w_course .main_title span{height:50px; line-height:50px; border-radius:50px; width:auto; font-size:35px; padding:0 25px 0 25px} .w_course .course_table .course_right .course_line {padding:0 15px 0 15px} .w_course .course_table .course_left .course_num { font-size:50px;} .w_course .course_table .course_left .course_num_tit {font-size:28px; color:#fff; float:left; position:relative; top:14px; margin:0 0 0 10px} .w_course .course_table .course_right .course_line .font01 {font-size:18px;} .w_course .course_table .course_right .course_line .font02 {font-size:14px;} .w_course .course_table .course_right .course_line .font03 {font-weight:bold;font-family:"Montserrat";font-size:20px} .w_course .course_table .course_right .course_line .font04 {display:none} .w_course .course_table .course_right .course_line .font05 {font-size:14px;} .w_course .course_table .course_right .course_line .m_e {display:none} } /* 샵내부 */ .w_shop {background:url(/images/ebiz/shop_bg.gif) no-repeat;background-size:cover; padding:60px 0 95px 0; font-weight:600; word-break:keep-all} .w_shop .main_title {text-align:center; margin:0 0 60px 0} .w_shop .main_title span{height:65px; line-height:65px; border-radius:65px; background:#3a2f0d; width:280px; display:inline-block; font-family: 'Nanum Myeongjo'; font-weight:bold; color:#fff; font-size:40px;} .w_shop .shop_gall_common {display: grid; grid-gap: 10px; grid-template-columns: repeat(4, 1fr);grid-auto-flow: column dense; grid-template-rows: repeat(3, 1fr);margin:0 0 10px 0} .w_shop .shop_gall_common .shop_gall01 {grid-column: 1/ span 2; position:relative;grid-row: span 1;} .w_shop .shop_gall_common .shop_gall01 .shop_gall_tit {position:absolute; left:50%; top:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);width:100%; text-align:center; padding:0 15px 0 15px; font-size:20px; } .w_shop .shop_gall_common .shop_gall02 {grid-column: 1/ span 2;grid-row-start: 2;grid-row: span 2; } .w_shop .shop_gall_common .shop_gall03 {grid-column: 3/ span 2;grid-row-start: 1;grid-row: span 3;} .w_shop .shop_gall_pc {display: grid; grid-gap: 10px; grid-template-columns: repeat(3, 1fr);grid-auto-flow: column dense; grid-template-rows: repeat(2, 1fr);} .w_shop .shop_gall_pc .shop_gall04 {grid-column: 1 / span 1; grid-row-start: 1; grid-row: span 2;} .w_shop .shop_gall_pc .shop_gall05 {grid-column: 2 / span 2; grid-row-start: 1;} .w_shop .shop_gall_pc .shop_gall06 {grid-column: 2 / span 2; grid-row-start: 2;} @media (max-width:980px){ .w_shop .shop_gall_common {display: block; } .w_shop .shop_gall_common img {width:100%} .w_shop .shop_gall_common .shop_gall01 {width:100%; } .w_shop .shop_gall_common .shop_gall01 .shop_gall_tit {position:relative; transform:translate(0,0);-webkit-transform:translate(0,0); left:0; top:0; width:100%; text-align:center; padding:25px 15px 50px 15px; font-size:20px; } .w_shop .shop_gall_common .shop_gall01 .shop_gall_tit img {width:auto !important; height:40px} .w_shop .shop_gall_common .shop_gall02 { margin:0 0 10px 0 } .w_shop .shop_gall_pc {display:none} } @media (max-width:720px){ .w_shop .main_title span{height:50px; line-height:50px; border-radius:50px; width:auto; font-size:35px; padding:0 25px 0 25px} } /* 오시는길 */ .w_map {background:#fff7d9; padding:60px 0 60px 0; font-weight:600; word-break:keep-all} .w_map .main_title {text-align:center; margin:0 0 60px 0} .w_map .main_title span{height:65px; line-height:65px; border-radius:65px; background:#3a2f0d; width:280px; display:inline-block; font-family: 'Nanum Myeongjo'; font-weight:bold; color:#fff; font-size:40px;} .w_map .map_list {margin:0 0 20px 0; } .w_map .map_list ul {margin:0; padding:0} .w_map .map_list li {list-style:none; float:left; font-size:20px; padding:0 120px 15px 0; margin:0; } .w_map .map_list li img {height:38px;margin-right:15px} .w_map .w_parking { } .w_map .w_parking .tit {font-size:20px;margin:0 0 20px 0} .w_map .w_parking .tit img { margin-right:15px} .w_map .w_parking .parking_text {padding:0 0 0 42px; margin-left:15px} .w_map .w_parking .parking_text table tr td {font-size:18px; line-height:1.8; vertical-align:top; padding:0 0 10px 0} @media (max-width:1200px){ .w_map .map_list li {padding:0 80px 15px 0; } } @media (max-width:980px){ .w_map .map_list li {width:100%; font-size:18px; padding:0 0 15px 0; margin:0; } .w_map .map_list li img {height:38px;margin-right:15px} .w_map .map_list {margin:0 0 15px 0; } .w_map .w_parking .tit {font-size:18px;} .w_map .w_parking .tit img {height:38px; margin-right:15px} .w_map .w_parking .parking_text {padding:0 0 0 38px; } .w_map .w_parking .parking_text table tr td {font-size:16px; } }